chore: create 3 columns layout for 2nd section

lukso-network · Nov 12, 2024 · bb68844 · bb68844
1 parent 84a362b
commit bb68844
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 53 deletions.
diff --git a/src/components/Box/index.js b/src/components/Box/index.js
@@ -4,15 +4,19 @@ import styles from './Box.module.scss';
 
 export default function Box({ icon, link, title, content, className }) {
   return (
-    <Link style={{ textDecoration: 'none', textAlign: 'left' }} to={link}>
-      <div className={`${styles.card} ${className}`}>
-        <div
-          className={`${styles.img} img`}
-          style={{ backgroundImage: 'url(' + icon + ')' }}
+    // <Link style={{ textDecoration: 'none', textAlign: 'left' }} to={link}>
+    <div style={{ overflow: 'auto' }}>
+      <div style={{ float: 'left' }}>
+        <img
+          style={{ display: 'block' }}
+          src={icon}
+          // className={`${styles.img} img`}
+          // style={{ backgroundImage: 'url(' + icon + ')' }}
         />
-        <h3>{title}</h3>
-        <p>{content}</p>
       </div>
-    </Link>
+      <h3>{title}</h3>
+      <p>{content}</p>
+    </div>
+    // </Link>
   );
 }
diff --git a/src/components/Headline/Headline.module.scss b/src/components/Headline/Headline.module.scss
@@ -6,7 +6,7 @@
   min-height: 500px;
   margin-bottom: -250px;
 
-  padding-top: 2.5rem;
+  padding-top: 1.25rem;
   padding-bottom: 1rem;
   text-align: left;
 

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -184,37 +184,34 @@ function Index() {
       </div>
 
       <div className={styles.container}>
-        <div className={styles.twoColumnSection}>
-          <div className={styles.leftColumn}>
-            <div className={styles.cardContainer}>
-              <Box
-                icon={FAQIcon}
-                link="./faq/lukso/general-information"
-                title="What is LUKSO?"
-                className="faq"
-                content="...."
-              />
+        <div className={styles.cardContainer}>
+          <div>
+            <Box
+              icon={FAQIcon}
+              link="./faq/lukso/general-information"
+              title="What is LUKSO?"
+              className="faq"
+              content="...."
+            />
+            <div style={{ margin: '0 2rem' }}>
+              {accordionData.map((item, index) => (
+                <CustomAccordion
+                  key={index}
+                  summary={item.summary}
+                  details={item.details}
+                  index={index}
+                />
+              ))}
             </div>
-            {accordionData.map((item, index) => (
-              <CustomAccordion
-                key={index}
-                summary={item.summary}
-                details={item.details}
-                index={index}
-              />
-            ))}
           </div>
-
-          <div className={styles.rightColumn}>
-            <div className={styles.cardContainer}>
-              <Box
-                icon={ToolsIcon}
-                link="./tools/libraries/getting-started"
-                title="TOOLS"
-                className="tools"
-                content="Explore tools that help you to interact with Universal Profiles and Digital Assets."
-              />
-            </div>
+          <div>
+            <Box
+              icon={ToolsIcon}
+              link="./tools/libraries/getting-started"
+              title="TOOLS"
+              className="tools"
+              content="Explore tools that help you to interact with Universal Profiles and Digital Assets."
+            />
             <ul>
               <li>smart contracts packages</li>
               <li>erc725.js</li>
@@ -223,18 +220,15 @@ function Index() {
               <li>lsp-utils.js</li>
             </ul>
           </div>
-        </div>
-      </div>
-
-      <div className={styles.container}>
-        <div className={styles.cardContainer}>
-          <Box
-            icon={NetworksIcon}
-            link="./networks/mainnet/parameters/"
-            title="NETWORKS"
-            className="networks"
-            content="Participate as node operator or interact on LUKSO's networks."
-          />
+          <div>
+            <Box
+              icon={NetworksIcon}
+              link="./networks/mainnet/parameters/"
+              title="NETWORKS"
+              className="networks"
+              content="Participate as node operator or interact on LUKSO's networks."
+            />
+          </div>
         </div>
         <div></div>
         <SeparatorWithTitle title={'Popular dApps built on LUKSO'} />

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -1,3 +1,7 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
 .container {
   display: flex;
   justify-content: center;
@@ -7,7 +11,7 @@
 
 .cardContainer {
   display: grid;
-  grid-template-columns: 1fr 1fr auto;
+  grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 16px;
   justify-self: center;
 
@@ -44,7 +48,6 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
-  margin-bottom: 3rem;
   position: relative;
 
   &::after {
@@ -69,13 +72,14 @@
 }
 
 .leftColumn {
+  padding: 1.25rem 5rem;
   display: flex;
   flex-direction: column;
   margin-right: 5rem;
 }
 
 .rightColumn {
-  padding: 2.5rem 5rem;
+  padding: 1.25rem 5rem;
   margin-top: 1rem;
 }