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

components/Footer/Details/details.module.css

@@ -0,0 +1,13 @@
+.details {
+  background: var(--Main-Grey-100);
+  color: var(--Main-Grey-White);
+  padding: var(--Spacing-x5) var(--Spacing-x5) var(--Spacing-x9)
+    var(--Spacing-x5);
+}
+
+.imageContainer {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(227, 217, 209, 0.2);
+  padding: 0 0 var(--Spacing-x2) 0;
+}

components/Footer/Details/index.tsx

@@ -0,0 +1,25 @@
+import Image from "@/components/Image"
+
+import styles from "./details.module.css"
+
+export default async function FooterDetails() {
+  return (
+    <section className={styles.details}>
+      <div className={styles.imageContainer}>
+        <Image
+          alt="Scandic Hotels logo"
+          className={styles.logo}
+          data-js="scandiclogoimg"
+          data-nosvgsrc="/_static/img/scandic-logotype.png"
+          itemProp="logo"
+          height={30}
+          src="/_static/img/scandic-logotype-white.svg"
+          width={138}
+        />
+        <div className={styles.socialLinks}>
+          <nav></nav>
+        </div>
+      </div>
+    </section>
+  )
+}

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;
+}

components/Footer/index.tsx

@@ -0,0 +1,11 @@
+import FooterDetails from "./Details"
+import FooterNavigation from "./Navigation"
+
+export default async function Footer() {
+  return (
+    <footer>
+      <FooterNavigation />
+      <FooterDetails />
+    </footer>
+  )
+}

components/Footer/mockedData.ts

@@ -0,0 +1,101 @@
+export const navigationData = {
+  mainLinks: [
+    {
+      title: "Travel guides",
+      href: "/travel-guides",
+      id: "travel-guides",
+    },
+    {
+      title: "New hotels",
+      href: "/new-hotels",
+      id: "new-hotels",
+    },
+    {
+      title: "Accessibililty",
+      href: "/accessibility",
+      id: "accessibility",
+    },
+    {
+      title: "Sustanability",
+      href: "/sustainability",
+      id: "sustainability",
+    },
+  ],
+  secondaryLinks: {
+    app: {
+      title: "Scandic App",
+      links: [
+        {
+          title: "App Store",
+          href: "https://apps.apple.com/se/app/scandic-hotels/id1020208712",
+          id: "app-store",
+        },
+        {
+          title: "Google Play",
+          href: "https://play.google.com/store/apps/details?id=com.scandichotels.scandichotels",
+          id: "google-play",
+        },
+      ],
+    },
+    customerService: {
+      title: "Customer service",
+      links: [
+        {
+          title: "Contact us",
+          href: "/contact-us",
+          id: "contact-us",
+        },
+        {
+          title: "Frequntly asked questions",
+          href: "/frequently-asked-questions",
+          id: "frequently-asked-questions",
+        },
+        {
+          title: "Rates and policys",
+          href: "/rates-and-policies",
+          id: "rates-and-policies",
+        },
+        {
+          title: "Terms and conditions",
+          href: "/terms-and-conditions",
+          id: "terms-and-conditions",
+        },
+      ],
+    },
+    about: {
+      title: "About Scandic Hotels",
+      links: [
+        {
+          title: "Scandic Group",
+          href: "/scandic-group",
+          id: "scandic-group",
+        },
+        {
+          title: "Investors",
+          href: "/investors",
+          id: "investors",
+        },
+        {
+          title: "Press",
+          href: "/press",
+          id: "press",
+        },
+        {
+          title: "Sponsors",
+          href: "/sponsors",
+          id: "sponsors",
+        },
+        {
+          title: "Partners",
+          href: "/partners",
+          id: "partners",
+        },
+        {
+          title: "Career",
+          href: "/career",
+          id: "career",
+        },
+      ],
+    },
+  },
+}