feat: max width footer & navbar

Author: ovflowd

packages/ui-components/src/Containers/Footer/index.module.css

@@ -1,86 +1,90 @@
 @reference "../../styles/index.css";
 
-.footer {
-  @apply flex
-    flex-col
-    items-center
-    gap-6
-    border-t
+.container {
+  @apply border-t
     border-neutral-200
     bg-white
     py-4
     text-neutral-500
     sm:px-8
-    md:justify-between
     md:py-5
     dark:border-neutral-900
     dark:bg-neutral-950;
 
-  .row {
-    @apply flex
+  .innerContainer {
+    @apply max-w-10xl
+      mx-auto
+      flex
       flex-col
       items-center
       gap-6
-      md:flex-row
-      md:justify-between
-      md:gap-0
-      md:self-stretch;
-  }
+      md:justify-between;
 
-  .sectionPrimary {
-    @apply flex
-      flex-wrap
-      content-start
-      items-center
-      justify-center
-      gap-1
-      self-stretch;
+    .row {
+      @apply flex
+        flex-col
+        items-center
+        gap-6
+        md:flex-row
+        md:justify-between
+        md:gap-0
+        md:self-stretch;
 
-    a {
-      @apply whitespace-nowrap;
-    }
-  }
+      .sectionPrimary {
+        @apply flex
+          flex-wrap
+          content-start
+          items-center
+          justify-center
+          gap-1
+          self-stretch;
 
-  .sectionSecondary {
-    @apply flex
-      flex-col
-      items-center
-      gap-1
-      md:flex-row;
+        a {
+          @apply whitespace-nowrap;
+        }
+      }
 
-    .social {
-      @apply flex
-        items-center
-        gap-1;
-    }
-  }
+      .sectionSecondary {
+        @apply flex
+          flex-col
+          items-center
+          gap-1
+          md:flex-row;
 
-  .legal {
-    @apply flex
-      flex-col
-      gap-2
-      px-4
-      text-center
-      text-xs
-      text-balance
-      md:px-14;
+        .social {
+          @apply flex
+            items-center
+            gap-1;
+        }
+      }
 
-    p {
-      @apply text-center
-        text-sm
-        text-neutral-800
-        dark:text-neutral-500;
-    }
+      &.legal {
+        @apply flex
+          flex-col
+          gap-2
+          px-4
+          text-center
+          text-xs
+          text-balance;
+
+        p {
+          @apply text-center
+            text-sm
+            text-neutral-800
+            dark:text-neutral-500;
+        }
 
-    a {
-      @apply max-ml:font-semibold
-        text-green-600
-        dark:text-green-400;
+        a {
+          @apply max-ml:font-semibold
+            text-green-600
+            dark:text-green-400;
 
-      &:hover {
-        @apply cursor-pointer
-          text-green-900
-          dark:text-green-200;
+          &:hover {
+            @apply cursor-pointer
+              text-green-900
+              dark:text-green-200;
+          }
+        }
       }
     }
   }

packages/ui-components/src/Containers/Footer/index.tsx

@@ -55,9 +55,9 @@ const Footer: FC<FooterProps> = ({
   as = 'a',
   navigation,
   slots,
-}) => {
-  return (
-    <footer className={styles.footer}>
+}) => (
+  <footer className={styles.container}>
+    <div className={styles.innerContainer}>
       <div className={styles.row}>
         <div className={styles.sectionPrimary}>{slots?.primary}</div>
 
@@ -83,9 +83,10 @@ const Footer: FC<FooterProps> = ({
           </div>
         </div>
       </div>
+
       <div className={classNames(styles.row, styles.legal)}>{slots?.legal}</div>
-    </footer>
-  );
-};
+    </div>
+  </footer>
+);
 
 export default Footer;