From c6b2d2ea124bbfd80be668204c741db21d7c568d Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 20 Aug 2024 10:24:44 +0200
Subject: [PATCH] feat(SW-185): basic setup for new footer with mocked data

---
 components/Footer/Details/details.module.css  |  13 +++
 components/Footer/Details/index.tsx           |  25 +++++
 .../Footer/Navigation/MainNav/index.tsx       |  30 ++++++
 .../Navigation/MainNav/mainnav.module.css     |  23 ++++
 .../Footer/Navigation/SecondaryNav/index.tsx  |  35 ++++++
 .../SecondaryNav/secondarynav.module.css      |  25 +++++
 components/Footer/Navigation/index.tsx        |  19 ++++
 .../Footer/Navigation/navigation.module.css   |  11 ++
 components/Footer/index.tsx                   |  11 ++
 components/Footer/mockedData.ts               | 101 ++++++++++++++++++
 10 files changed, 293 insertions(+)
 create mode 100644 components/Footer/Details/details.module.css
 create mode 100644 components/Footer/Details/index.tsx
 create mode 100644 components/Footer/Navigation/MainNav/index.tsx
 create mode 100644 components/Footer/Navigation/MainNav/mainnav.module.css
 create mode 100644 components/Footer/Navigation/SecondaryNav/index.tsx
 create mode 100644 components/Footer/Navigation/SecondaryNav/secondarynav.module.css
 create mode 100644 components/Footer/Navigation/index.tsx
 create mode 100644 components/Footer/Navigation/navigation.module.css
 create mode 100644 components/Footer/index.tsx
 create mode 100644 components/Footer/mockedData.ts

diff --git a/components/Footer/Details/details.module.css b/components/Footer/Details/details.module.css
new file mode 100644
index 000000000..19f1494fe
--- /dev/null
+++ b/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;
+}
diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx
new file mode 100644
index 000000000..061105620
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/Footer/Navigation/MainNav/index.tsx b/components/Footer/Navigation/MainNav/index.tsx
new file mode 100644
index 000000000..f3158ba4f
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/Footer/Navigation/MainNav/mainnav.module.css b/components/Footer/Navigation/MainNav/mainnav.module.css
new file mode 100644
index 000000000..b4cbffc88
--- /dev/null
+++ b/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;
+}
diff --git a/components/Footer/Navigation/SecondaryNav/index.tsx b/components/Footer/Navigation/SecondaryNav/index.tsx
new file mode 100644
index 000000000..914dcf123
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/Footer/Navigation/SecondaryNav/secondarynav.module.css b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
new file mode 100644
index 000000000..3d7d6a6ec
--- /dev/null
+++ b/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;
+}
diff --git a/components/Footer/Navigation/index.tsx b/components/Footer/Navigation/index.tsx
new file mode 100644
index 000000000..13b0e0f47
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/Footer/Navigation/navigation.module.css b/components/Footer/Navigation/navigation.module.css
new file mode 100644
index 000000000..fa45a3d99
--- /dev/null
+++ b/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;
+}
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
new file mode 100644
index 000000000..4ce45da0f
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/Footer/mockedData.ts b/components/Footer/mockedData.ts
new file mode 100644
index 000000000..491bc6a56
--- /dev/null
+++ b/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",
+        },
+      ],
+    },
+  },
+}