diff --git a/app/(home)/layout.js b/app/(home)/layout.js index 51b304b96..9f37458db 100644 --- a/app/(home)/layout.js +++ b/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 }) { -
{children}
+
+ {children} +
+ +
+
); } diff --git a/app/(home)/styles.module.scss b/app/(home)/styles.module.scss index ad95522f8..6326b3347 100644 --- a/app/(home)/styles.module.scss +++ b/app/(home)/styles.module.scss @@ -1,4 +1,3 @@ .main { padding: 0 60px; - padding-bottom: 364px; } diff --git a/components/home/index.js b/components/home/index.js index a5cad7c39..efe34ee77 100644 --- a/components/home/index.js +++ b/components/home/index.js @@ -107,3 +107,26 @@ export const HomeNav = () => ( ); + +//TODO: finish styling, populate links from footerMenu, add rest of footer +export async function HomeFooter() { + const footerMenu = await getMenu('footer'); + + return ( +
+

+ For additional creative resources, visit the following: +
+ Moodboard, Soundtrack, Twitter, Instagram. +

+

+ To discuss creative opportunities and potential +
+ collaborations, visit Aug.Services for more information. +

+
+ +
+
+ ); +} diff --git a/components/home/styles.module.scss b/components/home/styles.module.scss index bef4daaa5..a46cf9eba 100644 --- a/components/home/styles.module.scss +++ b/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; + } +} diff --git a/components/price/styles.module.scss b/components/price/styles.module.scss new file mode 100644 index 000000000..e2170f724 --- /dev/null +++ b/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; + } +}