From b63d739c45b4464205456e82f9867808916ff245 Mon Sep 17 00:00:00 2001
From: mustafademiray <mustafademiray@protonmail.com>
Date: Wed, 4 Dec 2024 17:15:28 +0300
Subject: [PATCH] new layout

---
 src/components/Headline/Headline.module.scss |   6 +-
 src/css/custom.css                           |  38 +---
 src/pages/index.js                           | 193 ++++++++++++-------
 src/pages/index.module.scss                  |  47 +----
 4 files changed, 140 insertions(+), 144 deletions(-)

diff --git a/src/components/Headline/Headline.module.scss b/src/components/Headline/Headline.module.scss
index 60dc4a9cd..d711aec65 100644
--- a/src/components/Headline/Headline.module.scss
+++ b/src/components/Headline/Headline.module.scss
@@ -1,14 +1,10 @@
 .headline {
-  background-image: url('../../../static/img/icons/ellipse-top-gradient.png');
-  background-repeat: no-repeat;
-  background-position: center -30px;
-  background-size: contain;
   min-height: 500px;
   margin-bottom: -250px;
+  text-align: center;
 
   padding-top: 1.25rem;
   padding-bottom: 1rem;
-  text-align: left;
 
   h1 {
     font-family: var(--ifm-heading-font-family);
diff --git a/src/css/custom.css b/src/css/custom.css
index 2f3c25df9..773ec320c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -9,17 +9,17 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #4467bb;
+  --ifm-color-primary: #6972e1;
   --ifm-color-primary-dark: #3d5da8;
   --ifm-color-primary-darker: #3a589f;
   --ifm-color-primary-darkest: #304883;
-  --ifm-color-primary-light: #5776c2;
+  --ifm-color-primary-light: #a4b5ff;
   --ifm-color-primary-lighter: #607ec5;
   --ifm-color-primary-lightest: #7c95cf;
   --ifm-code-font-size: 95%;
-  --color-cta-background: #ecf0f3;
-  --color-cta-background-blue: #6270a4;
-  --ifm-heading-font-family: Apax, sans-serif;
+  --color-cta-background: #6981ec;
+  --color-cta-background-blue: #6981ec;
+  --ifm-heading-font-family: Inter, sans-serif;
   --ifm-font-family-base: Inter, sans-serif;
   --ifm-heading-font-weight: 400;
   --ifm-h2-font-size: 1.5rem;
@@ -179,34 +179,6 @@ html[data-theme='dark'] .faq .img {
   font-weight: var(--ifm-font-weight-normal);
 }
 
-@font-face {
-  font-family: 'Apax';
-  src: url('/static/fonts/Apax-Light.woff2') format('woff2');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Apax';
-  src: url('/static/fonts/Apax-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Apax';
-  src: url('/static/fonts/Apax-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Apax';
-  src: url('/static/fonts/Apax-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-}
-
 a.imageLink {
   display: inline-block;
   position: relative;
diff --git a/src/pages/index.js b/src/pages/index.js
index 6807855e8..459ec26de 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -17,6 +17,8 @@ import FAQIcon from '../../static/img/icons/icon-faq-gradient.png';
 import DappsGallery from '../components/DappsGallery';
 import SeparatorWithTitle from '../components/SeperatorWithTitle';
 
+import SearchBarWrapper from '../theme/SearchBar';
+
 const accordionData = [
   {
     summary: 'General',
@@ -95,62 +97,80 @@ const networksData = [
 function Index() {
   return (
     <Layout description="Network, Standards, Tools and Guides for development on LUKSO and related standards.">
-      <div className={styles.container} style={{ marginBottom: '3rem' }}>
-        <div className={styles.twoColumnSection}>
-          <div className={styles.leftColumn}>
-            <Headline />
-            <div className={styles.ctaButtons}>
-              <div style={{ display: 'inline-block' }}>
-                <CallToActionButton
-                  text="🏁 Getting Started 🏁"
-                  link="/learn/getting-started"
-                  color="white"
-                  icon="material-symbols:keyboard-double-arrow-right"
-                />
-              </div>
-
-              <div style={{ display: 'inline-block', marginLeft: '1rem' }}>
-                <CallToActionButton
-                  text="Download 🆙 Browser Extension"
-                  link="install-up-browser-extension"
-                  color="white"
-                  icon="material-symbols:extension"
-                />
-              </div>
-            </div>
-          </div>
+      <div className={styles.container}>
+        <Headline />
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <SearchBarWrapper />
+        </div>
 
-          <div className={styles.rightColumn}>
-            <div>
-              {accordionData.map((item, index) => (
-                <CustomAccordion
-                  key={index}
-                  summary={item.summary}
-                  details={item.details}
-                  index={index}
-                />
-              ))}
-            </div>
-          </div>
+        <div>
+          {accordionData.map((item, index) => (
+            <CustomAccordion
+              key={index}
+              summary={item.summary}
+              details={item.details}
+              index={index}
+            />
+          ))}
         </div>
       </div>
 
       <div className={styles.container}>
-        <div className={styles.cardContainer}>
-          <div>
-            <Box
-              icon={StandardsIcon}
-              link="./learn/getting-started"
-              title="Developer Quickstarts"
-              // className="standards"
-              content="Our quickest guides to get your started building on LUKSO."
-            />
-          </div>
-          <div className={styles.guideBox}>
-            <h3>Integration guides</h3>
-            <p style={{ margin: '1rem 0' }}>
-              Looking to migrate your project to LUKSO? Or starting from
-              scratch?
+        <h2>DEVELOPER QUICKSTART</h2>
+        <p>Our quickest guides to get you building</p>
+
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            gap: '1rem',
+            marginBottom: '3rem',
+          }}
+        >
+          <CallToActionButton
+            text="Download UP Browser Extension"
+            link="/install-up-browser-extension"
+            color="white"
+            icon="material-symbols:extension"
+          />
+          <CallToActionButton
+            text="Start Building on LUKSO"
+            link="/learn/getting-started"
+            color="white"
+            icon="material-symbols:flag-sharp"
+          />
+        </div>
+
+        <div
+          className={styles.cardContainer}
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '2rem',
+          }}
+        >
+          <div className={styles.guideBox} style={{ flex: 1 }}>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '1rem',
+                marginBottom: '1rem',
+              }}
+            >
+              <div
+                style={{
+                  width: '50px',
+                  height: '50px',
+                  backgroundColor: '#ddd',
+                }}
+              >
+                {/* Placeholder for Integration Guide icon */}
+              </div>
+              <h3>Integration Guide</h3>
+            </div>
+            <p style={{ marginBottom: '2rem' }}>
+              Looking to migrate your project to LUKSO?
             </p>
             <ul>
               <li>
@@ -171,11 +191,29 @@ function Index() {
               </li>
             </ul>
           </div>
-          <div className={styles.guideBox}>
-            <h3>Universal Profiles</h3>
-            <p style={{ margin: '1rem 0' }}>
-              Discover the world of Universal Profiles 🆙 and what you can do
-              with them.
+
+          <div className={styles.guideBox} style={{ flex: 1 }}>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '1rem',
+                marginBottom: '1rem',
+              }}
+            >
+              <div
+                style={{
+                  width: '50px',
+                  height: '50px',
+                  backgroundColor: '#ddd',
+                }}
+              >
+                {/* Placeholder for Universal Profiles icon */}
+              </div>
+              <h3>Universal Profiles</h3>
+            </div>
+            <p style={{ marginBottom: '2rem' }}>
+              Discover Universal Profiles and a new world of possibilities
             </p>
             <ul>
               <li>
@@ -197,11 +235,30 @@ function Index() {
               </li>
             </ul>
           </div>
-          <div>&nbsp;</div>
-          <div className={styles.guideBox}>
-            <h3>Digital Assets</h3>
-            <p style={{ margin: '1rem 0' }}>
-              Create Build and interact with tokens and NFTs using LSP7 and LSP8
+
+          <div className={styles.guideBox} style={{ flex: 1 }}>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '1rem',
+                marginBottom: '1rem',
+              }}
+            >
+              <div
+                style={{
+                  width: '50px',
+                  height: '50px',
+                  backgroundColor: '#ddd',
+                }}
+              >
+                {/* Placeholder for Digital Assets icon */}
+              </div>
+              <h3>Digital Assets</h3>
+            </div>
+            <p style={{ marginBottom: '2rem' }}>
+              Create, Build and interact with our evolved tokens and NFTs with
+              LSP7 and LSP8
             </p>
             <ul>
               <li>
@@ -226,13 +283,19 @@ function Index() {
               </li>
             </ul>
           </div>
-          <div>&nbsp;</div>
         </div>
-
-        <SeparatorWithTitle title={'Popular dApps built on LUKSO'} />
+      </div>
+      {/* <SeparatorWithTitle title={'Popular dApps built on LUKSO'} /> */}
+      <h2 style={{ textAlign: 'center' }}>Popular dApps built on LUKSO</h2>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
         <DappsGallery />
       </div>
-
       <div className={styles.container}>
         <div className={styles.cardContainer}>
           <div>
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index e9507147b..32c6f8756 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -7,6 +7,10 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  padding: 2rem;
+  //max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
 }
 
 .cardContainer {
@@ -41,47 +45,6 @@
   }
 }
 
-.twoColumnSection {
-  background-repeat: no-repeat;
-  background-position: right -40px;
-  background-size: contain;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 5%;
-    bottom: 3%;
-    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 {
-  padding: 1.25rem 0 1.25rem 5rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.rightColumn {
-  padding: 1.25rem 5rem;
-  margin-top: 1rem;
-}
-
 .ctaButtons {
   margin-top: 3rem;
 }
@@ -95,6 +58,7 @@
 .guideBox {
   display: block;
   background-color: #f5f5f577;
+  text-align: left;
   border-radius: 8px;
   padding: 1.5rem;
   transition: all 0.2s ease;
@@ -117,3 +81,4 @@
     line-height: 1.4;
   }
 }
+