columns and links

lukso-network · Nov 12, 2024 · bacc269 · bacc269
1 parent 0c2a3a8
commit bacc269
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 25 deletions.
diff --git a/src/components/Headline/Headline.module.scss b/src/components/Headline/Headline.module.scss
@@ -1,7 +1,7 @@
 .headline {
   background-image: url('../../../static/img/icons/ellipse-top-gradient.png');
   background-repeat: no-repeat;
-  background-position: center -100px;
+  background-position: center -30px;
   background-size: contain;
   min-height: 500px;
   margin-bottom: -250px;

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -63,33 +63,57 @@ function Index() {
   return (
     <Layout description="Network, Standards, Tools and Guides for development on LUKSO and related standards.">
       <div className={styles.container}>
-        <Headline />
-        <div>
-          {accordionData.map((item, index) => (
-            <CustomAccordion
-              summary={item.summary}
-              details={item.details}
-              index={index}
-            />
-          ))}
-        </div>
-        <div style={{ marginTop: '3em' }}>
-          <CallToActionButton
-            text="🏁 Getting Started 🏁"
-            link="/learn/getting-started"
-            color="white"
-            icon="material-symbols:keyboard-double-arrow-right"
-          />
+        <div className={styles.twoColumnSection}>
+          <div className={styles.leftColumn}>
+            <Headline />
+            <div className={styles.ctaButtons}>
+              <CallToActionButton
+                text="🏁 Getting Started 🏁"
+                link="/learn/getting-started"
+                color="white"
+                icon="material-symbols:keyboard-double-arrow-right"
+              />
 
-          <div style={{ marginTop: '3em' }}>
-            <CallToActionButton
-              text="Download 🆙 Browser Extension"
-              link="install-up-browser-extension"
-              color="white"
-              icon="material-symbols:extension"
-            />
+              <div style={{ marginTop: '3em' }}>
+                <CallToActionButton
+                  text="Download 🆙 Browser Extension"
+                  link="install-up-browser-extension"
+                  color="white"
+                  icon="material-symbols:extension"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className={styles.rightColumn}>
+            <div className={styles.guideBoxes}>
+              <a href="/guides/smart-contracts" className={styles.guideBox}>
+                <h3>Smart Contract Development</h3>
+                <p>Learn how to build and deploy smart contracts on LUKSO</p>
+              </a>
+              <a href="/guides/universal-profiles" className={styles.guideBox}>
+                <h3>Universal Profiles</h3>
+                <p>
+                  Create and manage blockchain identities with LSP standards
+                </p>
+              </a>
+              <a href="/guides/digital-assets" className={styles.guideBox}>
+                <h3>Digital Assets</h3>
+                <p>
+                  Build and interact with tokens and NFTs using LSP7 and LSP8
+                </p>
+              </a>
+              <a href="/guides/dapp-integration" className={styles.guideBox}>
+                <h3>Migrate to LUKSO</h3>
+                <p>
+                  The overview of the differences between building on LUKSO vs
+                  other EVM chains.
+                </p>
+              </a>
+            </div>
           </div>
         </div>
+
         <div className={styles.cardContainer}>
           <Box
             icon={GuidesIcon}
@@ -136,6 +160,16 @@ function Index() {
             content="Check out LUKSO ecosystem tools and services."
           />
         </div>
+        <div>
+          {accordionData.map((item, index) => (
+            <CustomAccordion
+              key={index}
+              summary={item.summary}
+              details={item.details}
+              index={index}
+            />
+          ))}
+        </div>
         <SeparatorWithTitle title={'Projects building on LUKSO'} />
         <DappsGallery />
       </div>

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -37,3 +37,84 @@
     margin: 0 1rem 1rem;
   }
 }
+
+.twoColumnSection {
+  background-image: url('../../static/img/icons/ellipse-top-gradient.png');
+  background-repeat: no-repeat;
+  background-position: right -40px;
+  background-size: contain;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  margin-bottom: 3rem;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 5%;
+    bottom: 0;
+    left: 50%;
+    width: 0.1px;
+    background: var(--ifm-color-emphasis-300);
+    transform: translateX(-50%);
+  }
+
+  @media (max-width: 996px) {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.leftColumn {
+  display: flex;
+  flex-direction: column;
+  margin-right: 5rem;
+}
+
+.rightColumn {
+  padding: 5rem;
+  margin-top: 1rem;
+}
+
+.ctaButtons {
+  margin-top: 3rem;
+}
+
+.guideBoxes {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.guideBox {
+  display: block;
+  background-color: #f5f5f598;
+  border-radius: 8px;
+  padding: 1.5rem;
+  transition: all 0.2s ease;
+  text-decoration: none;
+
+  &:hover {
+    background-color: #eaeaea83;
+    transform: translateY(-2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.2rem;
+    color: #333;
+  }
+
+  p {
+    margin: 0;
+    color: #666;
+    font-size: 0.95rem;
+    line-height: 1.4;
+  }
+}