From b165fedfb5f9d5efcc2b99478e65a7f0e9540c2b Mon Sep 17 00:00:00 2001
From: Dima Vakatsiienko <imagnum.satellite@gmail.com>
Date: Sun, 11 Sep 2022 21:44:04 +0300
Subject: [PATCH] feat(core): create <Footer /> component

---
 package.json                                |   4 +-
 src/components/Footer.test.tsx              |  55 ---------
 src/components/Footer.tsx                   |  25 ----
 src/components/Footer/Footer.tsx            | 119 ++++++++++++++++++++
 src/components/Footer/index.ts              |   1 +
 src/components/Footer/svg/FacebookSvg.tsx   |  20 ++++
 src/components/Footer/svg/FooterLogoSvg.tsx |  22 ++++
 src/components/Footer/svg/InstagramSvg.tsx  |  22 ++++
 src/components/Footer/svg/TwitterSvg.tsx    |  20 ++++
 src/components/Footer/svg/index.ts          |   4 +
 src/components/Header/Header.tsx            |  59 +---------
 src/components/Hero/Hero.tsx                |  20 +---
 src/components/Nav.tsx                      |  64 +++++++++++
 src/components/index.ts                     |   1 +
 src/theme/globals.scss                      |  12 ++
 yarn.lock                                   |  26 ++---
 16 files changed, 308 insertions(+), 166 deletions(-)
 delete mode 100644 src/components/Footer.test.tsx
 delete mode 100644 src/components/Footer.tsx
 create mode 100644 src/components/Footer/Footer.tsx
 create mode 100644 src/components/Footer/index.ts
 create mode 100644 src/components/Footer/svg/FacebookSvg.tsx
 create mode 100644 src/components/Footer/svg/FooterLogoSvg.tsx
 create mode 100644 src/components/Footer/svg/InstagramSvg.tsx
 create mode 100644 src/components/Footer/svg/TwitterSvg.tsx
 create mode 100644 src/components/Footer/svg/index.ts
 create mode 100644 src/components/Nav.tsx

diff --git a/package.json b/package.json
index 20259cb..7699069 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@hookform/resolvers": "2.9.7",
     "@reduxjs/toolkit": "1.8.5",
-    "@tanstack/react-query": "4.3.2",
+    "@tanstack/react-query": "4.3.4",
     "next": "12.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -51,7 +51,7 @@
     "@swc-node/register": "1.5.1",
     "@swc/core": "1.3.0",
     "@swc/jest": "0.2.22",
-    "@tanstack/react-query-devtools": "4.3.2",
+    "@tanstack/react-query-devtools": "4.3.4",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
diff --git a/src/components/Footer.test.tsx b/src/components/Footer.test.tsx
deleted file mode 100644
index 3fd9c0c..0000000
--- a/src/components/Footer.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/* Components */
-import { Footer } from './Footer';
-
-/* Instruments */
-import { styledRender } from '@/utils';
-
-test('<Footer />: Loads renders correct markup', async () => {
-    const root = styledRender(<Footer />);
-
-    expect(root.container).toMatchInlineSnapshot(`
-.c1 {
-  font-size: 56px;
-  font-weight: 700;
-  line-height: 58px;
-  -webkit-letter-spacing: 2px;
-  -moz-letter-spacing: 2px;
-  -ms-letter-spacing: 2px;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-}
-
-.c0 {
-  grid-area: footer;
-  background-color: #101010;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  color: white;
-}
-
-<div>
-  <footer
-    class="c0"
-  >
-    <h1
-      class="c1"
-    >
-      Footer
-    </h1>
-  </footer>
-</div>
-`);
-});
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
deleted file mode 100644
index fc955a1..0000000
--- a/src/components/Footer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/* Core */
-import styled from 'styled-components';
-
-/* Components */
-import { H1 } from '@/ui';
-
-/* Instruments */
-import { center } from '@/theme';
-
-export const Footer = () => {
-    return (
-        <StyledFooter>
-            <H1>Footer</H1>
-        </StyledFooter>
-    );
-};
-
-/* Styles */
-const StyledFooter = styled.footer`
-    grid-area: footer;
-    background-color: ${p => p.theme.palette[ 'color-2' ]};
-
-    ${center}
-    color: white;
-`;
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..94713b0
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,119 @@
+/* Core */
+import Link from 'next/link';
+import styled from 'styled-components';
+
+/* Components */
+import { Nav } from '@/components';
+import { Body, media } from '@/ui';
+import {
+    FooterLogoSvg, FacebookSvg, TwitterSvg, InstagramSvg
+} from './svg';
+
+/* Instruments */
+import { center } from '@/theme';
+
+export const Footer = () => {
+    return (
+        <StyledFooter>
+            <section className = 'footer-container'>
+                <section className = 'footer-logo-nav'>
+                    <Link href = '/'>
+                        <a>
+                            <FooterLogoSvg className = 'footer-logo' />
+                        </a>
+                    </Link>
+                    <Nav className = 'footer-nav' />
+                </section>
+
+                <Body>
+                    Audiophile is an all in one stop to fulfill your audio needs. We're a small team
+                    of music lovers and sound specialists who are devoted to helping you get the
+                    most out of personal audio. Come and visit our demo facility - we’re open 7 days
+                    a week.
+                </Body>
+
+                <section className = 'copyright-social'>
+                    <Body className = 'copyright'>
+                        Copyright {new Date().getFullYear()}. All Rights Reserved
+                    </Body>
+
+                    <div className = 'social'>
+                        <a
+                            href = 'https://www.facebook.com'
+                            rel = 'noreferrer noopener'
+                            target = '_blank'
+                        >
+                            <FacebookSvg />
+                        </a>
+
+                        <a href = 'https://www.twitter.com' rel = 'noreferrer noopener' target = '_blank'>
+                            <TwitterSvg />
+                        </a>
+
+                        <a
+                            href = 'https://www.instagram.com'
+                            rel = 'noreferrer noopener'
+                            target = '_blank'
+                        >
+                            <InstagramSvg />
+                        </a>
+                    </div>
+                </section>
+
+                <div className = 'line' />
+            </section>
+        </StyledFooter>
+    );
+};
+
+/* Styles */
+const StyledFooter = styled.footer`
+    grid-area: footer;
+    height: 400px;
+    background-color: ${p => p.theme.palette[ 'color-2' ]};
+    color: white;
+
+    ${Body} {
+        max-width: 540px;
+        color: #878787;
+    }
+
+    & .footer-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 36px;
+        height: 100%;
+        padding: 75px 0 48px;
+        max-width: ${p => p.theme.viewports.desktopContent};
+        margin: 0 auto;
+
+        ${media.lessThan('desktopContent')`max-width: ${p => p.theme.viewports.tabletContent};`}
+
+        & .footer-logo-nav {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        & .copyright-social {
+            display: flex;
+            justify-content: space-between;
+
+            & .social {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+            }
+        }
+
+        & .line {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100px;
+            height: 4px;
+            background-color: var(--color-6);
+        }
+    }
+`;
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 0000000..ddcc5a9
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/Footer/svg/FacebookSvg.tsx b/src/components/Footer/svg/FacebookSvg.tsx
new file mode 100644
index 0000000..46991fc
--- /dev/null
+++ b/src/components/Footer/svg/FacebookSvg.tsx
@@ -0,0 +1,20 @@
+export const FacebookSvg = (props: FacebookSvgProps) => {
+    return (
+        <svg
+            fill = 'none'
+            height = '24'
+            viewBox = '0 0 24 24'
+            width = '24'
+            xmlns = 'http://www.w3.org/2000/svg'
+            { ...props }
+        >
+            <path
+                d = 'M22.675 0H1.325C0.593 0 0 0.593 0 1.325V22.676C0 23.407 0.593 24 1.325 24H12.82V14.706H9.692V11.084H12.82V8.413C12.82 5.313 14.713 3.625 17.479 3.625C18.804 3.625 19.942 3.724 20.274 3.768V7.008L18.356 7.009C16.852 7.009 16.561 7.724 16.561 8.772V11.085H20.148L19.681 14.707H16.561V24H22.677C23.407 24 24 23.407 24 22.675V1.325C24 0.593 23.407 0 22.675 0Z'
+                fill = 'white'
+            />
+        </svg>
+    );
+};
+
+/* Types */
+export type FacebookSvgProps = React.SVGProps<SVGSVGElement>;
diff --git a/src/components/Footer/svg/FooterLogoSvg.tsx b/src/components/Footer/svg/FooterLogoSvg.tsx
new file mode 100644
index 0000000..6bf1775
--- /dev/null
+++ b/src/components/Footer/svg/FooterLogoSvg.tsx
@@ -0,0 +1,22 @@
+export const FooterLogoSvg = (props: FooterLogoSvgProps) => {
+    return (
+        <svg
+            fill = 'none'
+            height = '25'
+            viewBox = '0 0 143 25'
+            width = '143'
+            xmlns = 'http://www.w3.org/2000/svg'
+            { ...props }
+        >
+            <path
+                clipRule = 'evenodd'
+                d = 'M57.9755 4.10884V0H53.2131V4.10884H57.9755ZM41.8721 20.3997C43.5076 20.3997 44.9648 19.8429 46.1074 18.8803L46.5635 19.9241H50.1425V0.792094L45.3611 0.792093V6.38308C44.3548 5.75732 43.1686 5.40721 41.8721 5.40721C37.5634 5.40721 34.4943 8.52769 34.4943 12.896C34.4943 17.2644 37.5634 20.3997 41.8721 20.3997ZM7.36265 20.3849C8.99354 20.3849 10.4497 19.8476 11.5995 18.9152L12.0137 19.9093H15.7527V5.85311L12.1479 5.85285L11.6531 6.93986C10.4936 5.98222 9.01642 5.42934 7.36265 5.42934C3.06909 5.42934 0 8.52769 0 12.8809C0 17.2493 3.06909 20.3849 7.36265 20.3849ZM8.00933 16.098C6.19773 16.098 4.86614 14.7278 4.86614 12.8921C4.86614 11.0677 6.18681 9.69748 8.00933 9.69748C9.82094 9.69748 11.1525 11.0677 11.1525 12.8921C11.1525 14.7278 9.82094 16.098 8.00933 16.098ZM32.4542 13.8899C32.4542 17.823 29.6916 20.3849 25.544 20.3849C21.396 20.3849 18.6184 17.823 18.6184 13.8899V5.86794H23.4549V13.6793C23.4549 15.163 24.2516 16.0355 25.544 16.0355C26.836 16.0355 27.6177 15.1482 27.6177 13.6793V5.86794H32.4542V13.8899ZM39.3758 12.8963C39.3758 14.7317 40.7074 16.1128 42.519 16.1128C44.3306 16.1128 45.6622 14.7317 45.6622 12.8963C45.6622 11.0607 44.3306 9.67952 42.519 9.67952C40.7074 9.67952 39.3758 11.0607 39.3758 12.8963ZM58.0127 5.86768V19.9239H53.1762V5.86768H58.0127ZM68.1095 20.3849C72.6727 20.3849 75.9821 17.2384 75.9821 12.896C75.9821 8.53888 72.6727 5.40747 68.1095 5.40747C63.5315 5.40747 60.237 8.53888 60.237 12.896C60.237 17.2384 63.5315 20.3849 68.1095 20.3849ZM65.0812 12.8963C65.0812 14.7546 66.346 16.0355 68.1095 16.0358C69.873 16.0358 71.1378 14.7548 71.1378 12.8966C71.1378 11.0492 69.873 9.75709 68.1095 9.75709C66.346 9.75709 65.0812 11.038 65.0812 12.8963ZM82.9978 25V19.4663C83.9888 20.0655 85.1511 20.3997 86.4208 20.3997C90.7144 20.3997 93.7835 17.2753 93.7835 12.896C93.7835 8.51676 90.7144 5.40721 86.4208 5.40721C84.7523 5.40721 83.2662 5.98508 82.1114 6.98463L81.5056 5.86794H78.2165V25H82.9978ZM82.6307 12.8958C82.6307 14.7424 83.9623 16.1126 85.7739 16.1126C87.5743 16.1126 88.9171 14.7424 88.9171 12.8958C88.9171 11.0492 87.5855 9.679 85.7739 9.679C83.9623 9.679 82.6307 11.0492 82.6307 12.8958ZM100.839 19.9241V12.4181C100.839 10.6143 101.751 9.57462 103.215 9.57462C104.477 9.57462 105.046 10.4011 105.046 12.0222V19.9241H109.882V11.4597C109.882 7.81629 107.811 5.45225 104.587 5.45225C103.188 5.45225 101.873 5.95931 100.839 6.79279V0.792093H96.0023V19.9241H100.839ZM117.574 0V4.10884H112.811V0H117.574ZM117.611 5.86768H112.774V19.9239H117.611V5.86768ZM125.489 0.792093V19.9241H120.653V0.792093H125.489ZM135.34 20.3851C138.863 20.3851 141.704 18.3808 142.692 15.1729H137.879C137.414 15.9957 136.47 16.4911 135.34 16.4911C133.813 16.4911 132.79 15.6573 132.474 14.045H142.9C142.963 13.6103 143 13.1868 143 12.7633C143 8.63988 139.866 5.40747 135.34 5.40747C130.933 5.40747 127.714 8.57611 127.714 12.8854C127.714 17.1795 130.959 20.3851 135.34 20.3851ZM132.559 11.3639H138.236C137.811 9.95908 136.8 9.20109 135.34 9.20109C133.931 9.20109 132.951 9.96767 132.559 11.3639Z'
+                fill = 'white'
+                fillRule = 'evenodd'
+            />
+        </svg>
+    );
+};
+
+/* Types */
+export type FooterLogoSvgProps = React.SVGProps<SVGSVGElement>;
diff --git a/src/components/Footer/svg/InstagramSvg.tsx b/src/components/Footer/svg/InstagramSvg.tsx
new file mode 100644
index 0000000..642a324
--- /dev/null
+++ b/src/components/Footer/svg/InstagramSvg.tsx
@@ -0,0 +1,22 @@
+export const InstagramSvg = (props: InstagramSvgProps) => {
+    return (
+        <svg
+            fill = 'none'
+            height = '24'
+            viewBox = '0 0 24 24'
+            width = '24'
+            xmlns = 'http://www.w3.org/2000/svg'
+            { ...props }
+        >
+            <path
+                clipRule = 'evenodd'
+                d = 'M12 0C8.741 0 8.333 0.014 7.053 0.072C2.695 0.272 0.273 2.69 0.073 7.052C0.014 8.333 0 8.741 0 12C0 15.259 0.014 15.668 0.072 16.948C0.272 21.306 2.69 23.728 7.052 23.928C8.333 23.986 8.741 24 12 24C15.259 24 15.668 23.986 16.948 23.928C21.302 23.728 23.73 21.31 23.927 16.948C23.986 15.668 24 15.259 24 12C24 8.741 23.986 8.333 23.928 7.053C23.732 2.699 21.311 0.273 16.949 0.073C15.668 0.014 15.259 0 12 0ZM12 2.163C15.204 2.163 15.584 2.175 16.85 2.233C20.102 2.381 21.621 3.924 21.769 7.152C21.827 8.417 21.838 8.797 21.838 12.001C21.838 15.206 21.826 15.585 21.769 16.85C21.62 20.075 20.105 21.621 16.85 21.769C15.584 21.827 15.206 21.839 12 21.839C8.796 21.839 8.416 21.827 7.151 21.769C3.891 21.62 2.38 20.07 2.232 16.849C2.174 15.584 2.162 15.205 2.162 12C2.162 8.796 2.175 8.417 2.232 7.151C2.381 3.924 3.896 2.38 7.151 2.232C8.417 2.175 8.796 2.163 12 2.163ZM5.838 12C5.838 8.597 8.597 5.838 12 5.838C15.403 5.838 18.162 8.597 18.162 12C18.162 15.404 15.403 18.163 12 18.163C8.597 18.163 5.838 15.403 5.838 12ZM12 16C9.791 16 8 14.21 8 12C8 9.791 9.791 8 12 8C14.209 8 16 9.791 16 12C16 14.21 14.209 16 12 16ZM16.965 5.595C16.965 4.8 17.61 4.155 18.406 4.155C19.201 4.155 19.845 4.8 19.845 5.595C19.845 6.39 19.201 7.035 18.406 7.035C17.61 7.035 16.965 6.39 16.965 5.595Z'
+                fill = 'white'
+                fillRule = 'evenodd'
+            />
+        </svg>
+    );
+};
+
+/* Types */
+export type InstagramSvgProps = React.SVGProps<SVGSVGElement>;
diff --git a/src/components/Footer/svg/TwitterSvg.tsx b/src/components/Footer/svg/TwitterSvg.tsx
new file mode 100644
index 0000000..14198db
--- /dev/null
+++ b/src/components/Footer/svg/TwitterSvg.tsx
@@ -0,0 +1,20 @@
+export const TwitterSvg = (props: TwitterSvgProps) => {
+    return (
+        <svg
+            fill = 'none'
+            height = '20'
+            viewBox = '0 0 24 20'
+            width = '24'
+            xmlns = 'http://www.w3.org/2000/svg'
+            { ...props }
+        >
+            <path
+                d = 'M24 2.55705C23.117 2.94905 22.168 3.21305 21.172 3.33205C22.189 2.72305 22.97 1.75805 23.337 0.608047C22.386 1.17205 21.332 1.58205 20.21 1.80305C19.313 0.846047 18.032 0.248047 16.616 0.248047C13.437 0.248047 11.101 3.21405 11.819 6.29305C7.728 6.08805 4.1 4.12805 1.671 1.14905C0.381 3.36205 1.002 6.25705 3.194 7.72305C2.388 7.69705 1.628 7.47605 0.965 7.10705C0.911 9.38805 2.546 11.522 4.914 11.997C4.221 12.185 3.462 12.229 2.69 12.081C3.316 14.037 5.134 15.46 7.29 15.5C5.22 17.123 2.612 17.848 0 17.54C2.179 18.937 4.768 19.752 7.548 19.752C16.69 19.752 21.855 12.031 21.543 5.10605C22.505 4.41105 23.34 3.54405 24 2.55705Z'
+                fill = 'white'
+            />
+        </svg>
+    );
+};
+
+/* Types */
+export type TwitterSvgProps = React.SVGProps<SVGSVGElement>;
diff --git a/src/components/Footer/svg/index.ts b/src/components/Footer/svg/index.ts
new file mode 100644
index 0000000..27f4342
--- /dev/null
+++ b/src/components/Footer/svg/index.ts
@@ -0,0 +1,4 @@
+export * from './FooterLogoSvg';
+export * from './FacebookSvg';
+export * from './TwitterSvg';
+export * from './InstagramSvg';
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 22cb6ed..f08069a 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link';
 import styled from 'styled-components';
 
 /* Components */
+import { Nav } from '@/components';
 import { MobileNavModal } from './MobileNavModal';
 
 /* Instruments */
@@ -32,30 +33,7 @@ export const Header = () => {
                     </Link>
 
                     <Desktop>
-                        <nav className = 'nav'>
-                            <ul>
-                                <li>
-                                    <Link href = '/'>
-                                        <a>Home</a>
-                                    </Link>
-                                </li>
-                                <li>
-                                    <Link href = '/headphones'>
-                                        <a>Headphones</a>
-                                    </Link>
-                                </li>
-                                <li>
-                                    <Link href = '/speakers'>
-                                        <a>Speakres</a>
-                                    </Link>
-                                </li>
-                                <li>
-                                    <Link href = '/earphones'>
-                                        <a>Earphones</a>
-                                    </Link>
-                                </li>
-                            </ul>
-                        </nav>
+                        <Nav />
                     </Desktop>
 
                     <Link href = '/checkout'>
@@ -123,8 +101,6 @@ const SHeader = styled.header<SSectionProps>`
             ${media.lessThan('tabletContent')`padding: 0 24px;`}
 
             & svg {
-                cursor: pointer;
-
                 &.burger-menu-svg {
                     grid-area: burger;
                 }
@@ -134,37 +110,6 @@ const SHeader = styled.header<SSectionProps>`
                 &.shopping-cart-svg {
                     grid-area: cart;
                 }
-
-                &:hover {
-                    & path,
-                    & rect {
-                        transition: fill 300ms ease;
-                        fill: var(--color-6);
-                    }
-                }
-            }
-
-            & nav {
-                grid-area: nav;
-
-                & ul {
-                    display: flex;
-                    gap: 34px;
-
-                    & li {
-                        & a {
-                            font-size: 13px;
-                            font-weight: 700;
-                            line-height: 25px;
-                            letter-spacing: 2px;
-                            transition: color 300ms ease;
-
-                            &:hover {
-                                color: var(--color-6);
-                            }
-                        }
-                    }
-                }
             }
         }
     }
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
index f17824c..03d79cb 100644
--- a/src/components/Hero/Hero.tsx
+++ b/src/components/Hero/Hero.tsx
@@ -65,11 +65,11 @@ const Article = styled.article<SArticleProps>`
             ${center}
 
             position: relative;
-            align-items: start;
+            align-items: ${p => (p.$page === 'home' ? 'start' : 'center')};
 
             ${media.lessThan('desktopContent')`
-                    align-items: center;
-                    max-width: ${p => p.theme.viewports.tabletContent};
+                align-items: center;
+                max-width: ${p => p.theme.viewports.tabletContent};
             `}
 
             ${H1} {
@@ -99,9 +99,7 @@ const Article = styled.article<SArticleProps>`
                 max-width: 400px;
                 z-index: 2;
 
-                ${media.lessThan('desktopContent')`
-                    align-items: center;
-                `}
+                ${media.lessThan('desktopContent')`align-items: center;`}
             }
 
             & .hero-img {
@@ -111,17 +109,11 @@ const Article = styled.article<SArticleProps>`
                 background-image: url(${heroImg.src});
                 background-size: cover;
                 box-shadow: 0 0 50px 50px var(--color-2) inset;
-                /* right: 0; */
+                right: 0;
                 top: -200px;
                 z-index: 1;
 
-                ${media.lessThan('tabletContent')`
-                /* left: 0 */
-                    /* top: 0; */
-                    /* right: 50%; */
-                    /* bottom: 0; */
-                    /* left: 50%; */
-                `}
+                ${media.lessThan('tabletContent')`right: auto;`}
             }
         }
     }
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
new file mode 100644
index 0000000..3719061
--- /dev/null
+++ b/src/components/Nav.tsx
@@ -0,0 +1,64 @@
+/* Core */
+import Link from 'next/link';
+import styled from 'styled-components';
+
+export const Nav = (props: NavProps) => {
+    return (
+        <SNav className = { props.className }>
+            <ul>
+                <li>
+                    <Link href = '/'>
+                        <a>Home</a>
+                    </Link>
+                </li>
+                <li>
+                    <Link href = '/headphones'>
+                        <a>Headphones</a>
+                    </Link>
+                </li>
+                <li>
+                    <Link href = '/speakers'>
+                        <a>Speakres</a>
+                    </Link>
+                </li>
+                <li>
+                    <Link href = '/earphones'>
+                        <a>Earphones</a>
+                    </Link>
+                </li>
+            </ul>
+        </SNav>
+    );
+};
+Nav.defaultProps = {
+    className: 'nav',
+};
+
+/* Styles */
+const SNav = styled.nav`
+    grid-area: nav;
+
+    & ul {
+        display: flex;
+        gap: 34px;
+
+        & li {
+            & a {
+                font-size: 13px;
+                font-weight: 700;
+                line-height: 25px;
+                letter-spacing: 2px;
+                transition: color 300ms ease;
+
+                &:hover {
+                    color: var(--color-6);
+                }
+            }
+        }
+    }
+`;
+
+/* Types */
+interface NavProps {
+    className?: string;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 7b164b3..df7d067 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,6 @@
 export { Layout } from './Layout';
 
+export { Nav } from './Nav';
 export { Header } from './Header';
 export { Hero } from './Hero';
 export { Content } from './Content';
diff --git a/src/theme/globals.scss b/src/theme/globals.scss
index f0b649e..2f5b868 100644
--- a/src/theme/globals.scss
+++ b/src/theme/globals.scss
@@ -4,6 +4,18 @@
     font-family: syste-ui, Manrope, sans-serif;
     background-color: #000;
     font-size: 10px;
+
+    & svg {
+        cursor: pointer;
+
+        &:hover {
+            & path,
+            & rect {
+                transition: fill 300ms ease;
+                fill: var(--color-6);
+            }
+        }
+    }
 }
 
 *,
diff --git a/yarn.lock b/yarn.lock
index c723b30..51f18f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1171,25 +1171,25 @@
   dependencies:
     remove-accents "0.4.2"
 
-"@tanstack/query-core@4.3.2":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.3.2.tgz#9d4af5964f07067b4cb00fcbfce4a5d4e01f87c8"
-  integrity sha512-tgOqrONmYix18MGALiR15oCYI5qu08QgMSxnEHjkzxjolJNbUUCGj4Nd1YCQUqyWY6u3waHdA1mjCZgsjny3Iw==
+"@tanstack/query-core@4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.3.4.tgz#b93da17232fda91ec08ef14d2ca1d8326fc599f2"
+  integrity sha512-NLAe3j5Vk1yYEtoPP5fPGPjRzkZPx67KUM3f14L3InziJZJ0wVecCh7uKfgYkbRKJSeq6PlbND7iuCGdTplN6Q==
 
-"@tanstack/react-query-devtools@4.3.2":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.3.2.tgz#317ae5bbde9c880613ed9b39116ce9109515463f"
-  integrity sha512-jfR8PUqfjhmacbmxKkMjzJa07r5AJeSfiB4kIyXtZoPCQ45UouTRBdoLYl9DgHgeeO0Gxc4IsQ9/opvJrDeHhw==
+"@tanstack/react-query-devtools@4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.3.4.tgz#2e622077908d00a85641b7861290bb7339f63ee5"
+  integrity sha512-gAn4F0SxaOFgURpO2qaPlUKfm0elKLbJbPnFFFLvlKe1HjcbSrQUzBbC/Lp9g2l/fPq/AGTiB0hFJtpEwCuQBA==
   dependencies:
     "@tanstack/match-sorter-utils" "^8.1.1"
     use-sync-external-store "^1.2.0"
 
-"@tanstack/react-query@4.3.2":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.3.2.tgz#e5d3165aefbb4f9ea446ab375a4e7d8927c54f98"
-  integrity sha512-b9UozJ8WjWyuHzrj4Op7/QelsZYMdxElRImG9RYeGSwKX0As6Dpwuueq4/xJCQxt7JZdnQkg6m/vwR79oELtFA==
+"@tanstack/react-query@4.3.4":
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.3.4.tgz#91a4232a967de04a0662d63d53b18ecc3e11c7e2"
+  integrity sha512-IiAo+B8bxphEpO7xwLQaCptd2rY4Ef3pW1q9J3pT66G+J/st4QpGQ+cSm9iESp9ccRy1YNUk3klk/hQtWewl6g==
   dependencies:
-    "@tanstack/query-core" "4.3.2"
+    "@tanstack/query-core" "4.3.4"
     use-sync-external-store "^1.2.0"
 
 "@testing-library/dom@^8.5.0":