feat(SW-185): basic setup for new footer with mocked data

components/Footer/Navigation/MainNav/index.tsx

@@ -0,0 +1,30 @@
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./mainnav.module.css"
+
+export default async function FooterMainNav({
+  mainLinks,
+}: {
+  mainLinks: Array<{ id: string; href: string; title: string }>
+}) {
+  return (
+    <nav className={styles.mainNavigation}>
+      <ul className={styles.mainNavigationList}>
+        {mainLinks.map((link) => (
+          <li key={link.id} className={styles.mainNavigationItem}>
+            <Link
+              color="burgundy"
+              href={link.href}
+              className={styles.mainNavigationLink}
+            >
+              {link.title}
+
+              <ArrowRightIcon color="burgundy" />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

components/Footer/Navigation/MainNav/mainnav.module.css

@@ -0,0 +1,23 @@
+.mainNavigation {
+  max-width: 360px;
+  width: 100%;
+}
+
+.mainNavigationList {
+  list-style: none;
+}
+
+.mainNavigationItem {
+  padding: var(--Spacing-x3) 0;
+  border-bottom: 1px solid var(--Scandic-Peach-20);
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.mainNavigationLink {
+  font-size: 20px;
+  font-weight: 500;
+  display: flex;
+  justify-content: space-between;
+}

components/Footer/Navigation/SecondaryNav/index.tsx

@@ -0,0 +1,35 @@
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./secondarynav.module.css"
+
+export default async function FooterSecondaryNav({
+  secondaryLinks,
+}: {
+  secondaryLinks: Record<
+    string,
+    { title: string; links: Array<{ id: string; href: string; title: string }> }
+  >
+}) {
+  return (
+    <div className={styles.secondaryNavigation}>
+      {Object.entries(secondaryLinks).map(([key, group]) => (
+        <nav key={key} className={styles.secondaryNavigationGroup}>
+          <p className={styles.secondaryNavigationGroupTitle}>{group.title}</p>
+          <ul className={styles.secondaryNavigationList}>
+            {group.links.map((link) => (
+              <li key={link.id} className={styles.secondaryNavigationItem}>
+                <Link
+                  color="burgundy"
+                  href={link.href}
+                  className={styles.secondaryNavigationLink}
+                >
+                  {link.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      ))}
+    </div>
+  )
+}

components/Footer/Navigation/SecondaryNav/secondarynav.module.css

@@ -0,0 +1,25 @@
+.secondaryNavigation {
+  display: flex;
+  gap: 80px;
+}
+
+.secondaryNavigationList {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  gap: var(--Spacing-x3);
+}
+
+.secondaryNavigationGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
+.secondaryNavigationGroupTitle {
+  font-size: 14px;
+  color: var(--Scandic-Peach-80);
+  font-weight: 500;
+  font-family: var(--typography-Body-Bold-fontFamily);
+  margin: 0;
+}

components/Footer/Navigation/index.tsx

@@ -0,0 +1,19 @@
+import MaxWidth from "@/components/MaxWidth"
+
+import { navigationData } from "../mockedData"
+import FooterMainNav from "./MainNav"
+import FooterSecondaryNav from "./SecondaryNav"
+
+import styles from "./navigation.module.css"
+
+export default async function FooterNavigation() {
+  const { mainLinks, secondaryLinks } = navigationData
+  return (
+    <section className={styles.section}>
+      <MaxWidth tag="div" className={styles.maxWidth}>
+        <FooterMainNav mainLinks={mainLinks} />
+        <FooterSecondaryNav secondaryLinks={secondaryLinks} />
+      </MaxWidth>
+    </section>
+  )
+}

components/Footer/Navigation/navigation.module.css

@@ -0,0 +1,11 @@
+.section {
+  background: var(--Scandic-Brand-Pale-Peach);
+  padding: 160px var(--Spacing-x9);
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.maxWidth {
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+}