From 4125ffb3b6469974700a650c4c562a77f5a0597c Mon Sep 17 00:00:00 2001
From: Yurii Venher <79912799+yurii-ve@users.noreply.github.com>
Date: Thu, 10 Oct 2024 12:22:30 +0300
Subject: [PATCH] Remove absolute positioning from the intro board (#88)

* Remove absolute positioning from the intro board

* Fix tabs

* Remove redundant style
---
 _codux/boards/intro/intro.board.tsx   | 24 +++++++++++++-----------
 _codux/boards/intro/intro.module.scss | 25 +++++++++++++------------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/_codux/boards/intro/intro.board.tsx b/_codux/boards/intro/intro.board.tsx
index fb4d80d..eb05992 100644
--- a/_codux/boards/intro/intro.board.tsx
+++ b/_codux/boards/intro/intro.board.tsx
@@ -5,17 +5,19 @@ export default createBoard({
     name: '🌱 Intro',
     Board: () => (
         <div className={styles.container}>
-            <p className={styles.myStyle}>
-                HOW TO USE <br /> E-COMMERCE STARTER?
-            </p>
-            <p className={styles.myParagraph}>
-                Welcome to Codux e-commerce starter. <br /> This template was built to help you create your own store
-                easily. Use Codux to design your website the way you want, and Wix Headless e-commerce services to
-                manage your store.
-                <a href={'https://help.codux.com/kb/en/article/kb37137'}>
-                    <button className="introButton">Learn more</button>
-                </a>
-            </p>
+            <div className={styles.content}>
+                <p className={styles.title}>
+                    HOW TO USE <br /> E-COMMERCE STARTER?
+                </p>
+                <p className={styles.description}>
+                    Welcome to Codux e-commerce starter. <br /> This template was built to help you create your own
+                    store easily. Use Codux to design your website the way you want, and Wix Headless e-commerce
+                    services to manage your store.
+                    <a href={'https://help.codux.com/kb/en/article/kb37137'}>
+                        <button className="introButton">Learn more</button>
+                    </a>
+                </p>
+            </div>
         </div>
     ),
     environmentProps: {
diff --git a/_codux/boards/intro/intro.module.scss b/_codux/boards/intro/intro.module.scss
index 40f80a8..0217736 100644
--- a/_codux/boards/intro/intro.module.scss
+++ b/_codux/boards/intro/intro.module.scss
@@ -1,17 +1,18 @@
 @use '@styles/variables.scss' as *;
 
 .container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 10px;
-    display: grid;
+    width: 100%;
+    height: 100vh;
+    display: flex;
     justify-content: center;
+    align-items: center;
+}
+
+.content {
     width: 1000px;
 }
 
-.myStyle {
+.title {
     font: var(--paragraph1);
     color: var(--snow-white);
     padding: 40px 100px;
@@ -23,7 +24,7 @@
     border-radius: 20px 20px 0 0;
 }
 
-.myParagraph {
+.description {
     color: var(--snow-white);
     padding: 70px 120px;
     text-align: center;
@@ -43,15 +44,15 @@
         margin-top: unset;
     }
 
-    .myStyle,
-    .myParagraph {
+    .title,
+    .description {
         padding: 50px 40px;
     }
 }
 
 @media (width <= $mobile-width) {
-    .myStyle,
-    .myParagraph {
+    .title,
+    .description {
         font-size: 20px;
     }
 }