home: begin footer (markup + style)

app/(home)/layout.js

@@ -1,4 +1,4 @@
-import { HomeNav } from '/components/home';
+import { HomeNav, HomeFooter } from '/components/home';
 
 import styles from './styles.module.scss';
 
@@ -10,7 +10,12 @@ export default function HomeLayout({ children }) {
                     <HomeNav />
                 </nav>
             </header>
-            <main className={styles.main}>{children}</main>
+            <main className={styles.main}>
+                {children}
+                <footer>
+                    <HomeFooter />
+                </footer>
+            </main>
         </>
     );
 }

app/(home)/styles.module.scss

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

components/home/index.js

@@ -107,3 +107,26 @@ export const HomeNav = () => (
         <TypesNav />
     </div>
 );
+
+//TODO: finish styling, populate links from footerMenu, add rest of footer
+export async function HomeFooter() {
+    const footerMenu = await getMenu('footer');
+
+    return (
+        <div className={styles.homeFooter}>
+            <p>
+                For additional creative resources, visit the following:
+                <br />
+                Moodboard, Soundtrack, Twitter, Instagram.
+            </p>
+            <p>
+                To discuss creative opportunities and potential
+                <br />
+                collaborations, visit Aug.Services for more information.
+            </p>
+            <div>
+                <button type='button'>return to top ( ↑ )</button>
+            </div>
+        </div>
+    );
+}

components/home/styles.module.scss

@@ -1,5 +1,11 @@
 @use 'styles/_typography';
 
+@mixin home-grid {
+    display: grid;
+    grid-template-columns: repeat(24, 1fr);
+    column-gap: 10px;
+}
+
 .homeNav {
     padding: 51px 115px 22px 115px;
 
@@ -31,10 +37,10 @@
 }
 
 .homeProductsList {
-    display: grid;
-    grid-template-columns: repeat(24, 1fr);
-    column-gap: 10px;
+    @include home-grid;
+
     row-gap: 20px;
+    padding-bottom: 364px;
 
     > {
         li {
@@ -67,3 +73,17 @@
         @include typography.subheader;
     }
 }
+
+.homeFooter {
+    @include home-grid;
+
+    > p {
+        @include typography.body;
+
+        grid-column-end: span 10;
+    }
+
+    > *:last-child {
+        grid-column-end: span 4;
+    }
+}

components/price/styles.module.scss

@@ -0,0 +1,12 @@
+@use 'styles/_typography';
+
+.priceRanges {
+    @include typography.header;
+
+    display: flex;
+    gap: 10px;
+
+    .originalPrice {
+        text-decoration-line: line-through;
+    }
+}