nav: style info & filters

app/(home)/layout.js

@@ -1,14 +1,16 @@
-import { TypesNav } from '/components/home';
+import { HomeNav } from '/components/home';
+
+import styles from './styles.module.scss';
 
 export default function HomeLayout({ children }) {
     return (
         <>
             <header>
                 <nav>
-                    <TypesNav />
+                    <HomeNav />
                 </nav>
             </header>
-            <main>{children}</main>
+            <main className={styles.main}>{children}</main>
         </>
     );
 }

app/(home)/styles.module.scss

@@ -0,0 +1,3 @@
+.main {
+    padding: 0 60px;
+}

app/layout.js

@@ -7,16 +7,16 @@ const CenturyNovaSB = localFont({
     src: [
         {
             path: '../fonts/CenturyNovaSBRoman/font.woff',
-            weight: '400',
+            weight: '300',
             style: 'normal',
         },
         {
             path: '../fonts/CenturyNovaSBItalic/font.woff',
-            weight: '400',
+            weight: '300',
             style: 'italic',
         },
     ],
-    variable: '--font-century-nova-sb',
+    variable: '--font-century-nova',
 });
 const Dia = localFont({
     src: [

app/styles.module.scss

@@ -10,6 +10,5 @@
     a,
     a:visited {
         color: colors.$black;
-        text-decoration: none;
     }
 }

components/home/index.js

@@ -6,6 +6,7 @@ import Image from 'next/image';
 import { getCollectionProducts, getMenu } from 'lib/shopify';
 
 import { PriceRanges } from '/components/price.js';
+import styles from './styles.module.scss';
 
 export async function HomeProduct({ product }) {
     const featuredImage = product?.images?.[0];
@@ -65,15 +66,29 @@ export async function HomeProductsList({ collection }) {
 export async function TypesNav() {
     const typesMenu = await getMenu('types-nav');
 
-    // console.log({ typesMenu });
-
     return (
-        <ul>
-            {typesMenu?.map(menuItem => (
-                <li key={menuItem?.path}>
-                    <Link href={menuItem?.path}>{menuItem?.title}</Link>
-                </li>
+        <p className={styles.typesNav}>
+            <span className='filter'>Filter: </span>
+            {typesMenu?.map((menuItem, i) => (
+                <span key={menuItem?.path}>
+                    <Link
+                        href={menuItem?.path}
+                        className='link'
+                    >{`${menuItem?.title}`}</Link>
+                    <span className='not-link'>{`${
+                        i == typesMenu.length - 1 ? '.' : ','
+                    } `}</span>
+                </span>
             ))}
-        </ul>
+        </p>
     );
 }
+
+export const HomeNav = () => (
+    <div className={styles.homeNav}>
+        <Link href='/information' className='information'>
+            Information
+        </Link>
+        <TypesNav />
+    </div>
+);

components/home/styles.module.scss

@@ -0,0 +1,31 @@
+@use 'styles/_typography';
+
+.homeNav {
+    padding: 51px 115px 22px 115px;
+
+    display: grid;
+    grid-template-columns: 200px 1fr 200px;
+    align-items: baseline;
+
+    :global .information {
+        @include typography.header-cta;
+    }
+}
+
+.typesNav {
+    text-align: center;
+
+    :global .filter {
+        @include typography.body;
+    }
+
+    :global .not-link {
+        @include typography.body-cta;
+
+        text-decoration-line: none;
+    }
+
+    :global .link {
+        @include typography.body-cta;
+    }
+}

styles/_typography.scss

@@ -0,0 +1,92 @@
+@mixin title {
+    font-family: var(--font-century-nova);
+    font-size: 95px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 90px; /* 94.737% */
+    letter-spacing: -5.7px;
+}
+
+@mixin header {
+    font-family: var(--font-century-nova);
+    font-size: 35px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 39px; /* 111.429% */
+    letter-spacing: -1.4px;
+
+    text-decoration-thickness: 5%;
+    text-underline-offset: 7%;
+}
+
+@mixin subheader {
+    font-family: var(--font-dia);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 100% */
+    text-transform: uppercase;
+}
+
+@mixin body {
+    font-family: var(--font-century-nova);
+    font-size: 25px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 30px; /* 120% */
+    letter-spacing: -0.75px;
+}
+
+@mixin list {
+    font-family: var(--font-dia);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 100;
+    line-height: 19px;
+}
+
+@mixin caption {
+    font-family: var(--font-dia);
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 10px; /* 100% */
+    letter-spacing: 0.1px;
+    text-transform: uppercase;
+}
+
+@mixin header-cta($decoration: underline) {
+    font-family: var(--font-century-nova);
+    font-size: 35px;
+    font-style: normal;
+    font-weight: 100;
+    line-height: 35px; /* 100% */
+    letter-spacing: -1.4px;
+    text-decoration-line: $decoration;
+
+    text-decoration-thickness: 5%;
+    text-underline-offset: 7%;
+}
+
+@mixin body-cta($decoration: underline) {
+    font-family: var(--font-dia);
+    font-size: 25px;
+    font-style: normal;
+    font-weight: 100;
+    line-height: 30px;
+    letter-spacing: -0.25px;
+    text-decoration-line: $decoration;
+
+    text-decoration-thickness: 4%;
+    text-underline-offset: 4%;
+}
+
+@mixin list-cta($decoration: underline) {
+    font-family: var(--font-dia);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 100;
+    line-height: 20px; /* 111.111% */
+    text-transform: uppercase;
+    text-decoration-line: $decoration;
+}