From 0ff21691d400789a3176328d7c4824913d0ef967 Mon Sep 17 00:00:00 2001
From: TrymVei <tve@variant.no>
Date: Fri, 29 Nov 2024 17:25:08 +0100
Subject: [PATCH] feat: add illustrations on top of footer

---
 .../navigation/footer/Footer_new.tsx          | 163 ++++++++++--------
 .../footerIllustration/FooterIllustration.tsx |  70 ++++++++
 .../footerIllustration.module.css             |  11 ++
 .../navigation/footer/footer_new.module.css   |   7 +-
 4 files changed, 174 insertions(+), 77 deletions(-)
 create mode 100644 src/components/navigation/footer/footerIllustration/FooterIllustration.tsx
 create mode 100644 src/components/navigation/footer/footerIllustration/footerIllustration.module.css

diff --git a/src/components/navigation/footer/Footer_new.tsx b/src/components/navigation/footer/Footer_new.tsx
index cad269235..54cbd146f 100644
--- a/src/components/navigation/footer/Footer_new.tsx
+++ b/src/components/navigation/footer/Footer_new.tsx
@@ -15,6 +15,7 @@ import {
 import styles from "./footer_new.module.css";
 import { FooterSection } from "./footerSection/FooterSection";
 import { TextTertiary } from "./textTertiary/TextTertiary";
+import { FooterIllustration } from "./footerIllustration/FooterIllustration";
 
 export interface IFooter {
   navigationData: Navigation;
@@ -36,92 +37,108 @@ const FooterNew = ({ navigationData, soMeData, legalData }: IFooter) => {
 
   return (
     <footer className={styles.footer}>
-      <nav className={styles.nav}>
-        <div className={styles.flex_container_left}>
-          <div>
-            <TextTertiary>
-              Vi har kontorer i Trondheim, Oslo og Bergen. Kom gjerne innom for
-              en kopp kaffe eller bare en hyggelig prat.
-            </TextTertiary>
-            {/*  TODO:: Get offices and map through. Should these link to something?  */}
-            <ul className={styles.offices}>
-              <CustomLink link={dummyLink("Trondheim")} type="footerLinkNew" />
-              <CustomLink link={dummyLink("Oslo")} type="footerLinkNew" />
-              <CustomLink link={dummyLink("Bergen")} type="footerLinkNew" />
-            </ul>
+      <FooterIllustration color={"#FFD02F"} />
+      <div className={styles.footerContent}>
+        <nav className={styles.nav}>
+          <div className={styles.flex_container_left}>
+            <div>
+              <TextTertiary>
+                Vi har kontorer i Trondheim, Oslo og Bergen. Kom gjerne innom
+                for en kopp kaffe eller bare en hyggelig prat.
+              </TextTertiary>
+              {/*  TODO:: Get offices and map through. Should these link to something?  */}
+              <ul className={styles.offices}>
+                <CustomLink
+                  link={dummyLink("Trondheim")}
+                  type="footerLinkNew"
+                />
+                <CustomLink link={dummyLink("Oslo")} type="footerLinkNew" />
+                <CustomLink link={dummyLink("Bergen")} type="footerLinkNew" />
+              </ul>
+            </div>
+            <div>
+              <FooterSection title="Generell kontakt">
+                <CustomLink
+                  link={dummyLink("928 07 375")}
+                  type="footerLinkNew"
+                />
+                <CustomLink
+                  link={dummyLink("post@variant.no")}
+                  type="footerLinkNew"
+                />
+              </FooterSection>
+            </div>
           </div>
-          <div>
-            <FooterSection title="Generell kontakt">
-              <CustomLink link={dummyLink("928 07 375")} type="footerLinkNew" />
+          <div className={styles.flex_container_right}>
+            <FooterSection title="Hovedmeny">
+              <CustomLink link={dummyLink("Arbeid")} type="footerLinkNew" />
+              <CustomLink link={dummyLink("Fag")} type="footerLinkNew" />
+              <CustomLink link={dummyLink("Jobb")} type="footerLinkNew" />
+              <CustomLink link={dummyLink("Folk")} type="footerLinkNew" />
+            </FooterSection>
+
+            <FooterSection title="Annet">
               <CustomLink
-                link={dummyLink("post@variant.no")}
+                link={dummyLink("Refill 2025")}
                 type="footerLinkNew"
               />
+              <CustomLink link={dummyLink("Styleguide")} type="footerLinkNew" />
+              <CustomLink link={dummyLink("Bærekraft")} type="footerLinkNew" />
             </FooterSection>
-          </div>
-        </div>
-        <div className={styles.flex_container_right}>
-          <FooterSection title="Hovedmeny">
-            <CustomLink link={dummyLink("Arbeid")} type="footerLinkNew" />
-            <CustomLink link={dummyLink("Fag")} type="footerLinkNew" />
-            <CustomLink link={dummyLink("Jobb")} type="footerLinkNew" />
-            <CustomLink link={dummyLink("Folk")} type="footerLinkNew" />
-          </FooterSection>
 
-          <FooterSection title="Annet">
-            <CustomLink link={dummyLink("Refill 2025")} type="footerLinkNew" />
-            <CustomLink link={dummyLink("Styleguide")} type="footerLinkNew" />
-            <CustomLink link={dummyLink("Bærekraft")} type="footerLinkNew" />
-          </FooterSection>
+            {soMeData && (
+              <FooterSection title="Følg oss">
+                {renderSoMe(navigationData, soMeData)}
+              </FooterSection>
+            )}
+          </div>
+        </nav>
+        <Image
+          className={styles.logo}
+          src={"/_assets/variant-logo.svg"}
+          alt={"variant logo"}
+          width={310}
+          height={74}
+        />
 
-          {soMeData && (
-            <FooterSection title="Følg oss">
-              {renderSoMe(navigationData, soMeData)}
-            </FooterSection>
-          )}
+        <div className={styles.grey_links}>
+          <ul className={styles.grey_links__language}>
+            <li>
+              <CustomLink
+                link={dummyLink("variant.se")}
+                type="footerLinkGrey"
+              />
+            </li>
+            <li>
+              <CustomLink link={dummyLink("English")} type="footerLinkGrey" />
+            </li>
+          </ul>
+          <ul className={styles.credits}>
+            {legalData?.map((legal) => {
+              const link: ILink = {
+                _key: legal._id,
+                _type: legal._type,
+                linkTitle: legal.basicTitle,
+                linkType: LinkType.Internal,
+                internalLink: {
+                  _ref: legal.slug.current,
+                },
+                language: legal.language,
+              };
+              return (
+                <li key={legal._id}>
+                  <CustomLink link={link} type="footerLinkGrey" />
+                </li>
+              );
+            })}
+          </ul>
         </div>
-      </nav>
-      <Image
-        className={styles.logo}
-        src={"/_assets/variant-logo.svg"}
-        alt={"variant logo"}
-        width={310}
-        height={74}
-      />
-
-      <div className={styles.grey_links}>
-        <ul className={styles.grey_links__language}>
-          <li>
-            <CustomLink link={dummyLink("variant.se")} type="footerLinkGrey" />
-          </li>
-          <li>
-            <CustomLink link={dummyLink("English")} type="footerLinkGrey" />
-          </li>
-        </ul>
-        <ul className={styles.credits}>
-          {legalData?.map((legal) => {
-            const link: ILink = {
-              _key: legal._id,
-              _type: legal._type,
-              linkTitle: legal.basicTitle,
-              linkType: LinkType.Internal,
-              internalLink: {
-                _ref: legal.slug.current,
-              },
-              language: legal.language,
-            };
-            return (
-              <li key={legal._id}>
-                <CustomLink link={link} type="footerLinkGrey" />
-              </li>
-            );
-          })}
-        </ul>
       </div>
     </footer>
   );
 };
 
+// TODO: Change color on some link
 const renderSoMe = (data: Navigation, soMeData: SocialMediaProfiles) => {
   const socialMediaSections = filterSectionsByType(data, "socialMedia");
   return (
diff --git a/src/components/navigation/footer/footerIllustration/FooterIllustration.tsx b/src/components/navigation/footer/footerIllustration/FooterIllustration.tsx
new file mode 100644
index 000000000..dafc9bdc8
--- /dev/null
+++ b/src/components/navigation/footer/footerIllustration/FooterIllustration.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+import styles from "./footerIllustration.module.css";
+
+interface FooterIllustrationProps {
+  color: string;
+}
+
+export const FooterIllustration = ({ color }: FooterIllustrationProps) => {
+  return (
+    <div className={styles.footerIllustrations}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="147"
+        height="71"
+        viewBox="0 0 147 71"
+        fill="none"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M13.0377 70.0255C8.6983 46.6608 24.1213 24.2022 47.4859 19.8628L83.8554 13.108C107.22 8.76858 129.679 24.1916 134.018 47.5562V47.5562C138.358 70.9209 122.935 93.3795 99.5699 97.7189L63.2004 104.474C39.8358 108.813 17.3772 93.3902 13.0377 70.0255V70.0255ZM125.428 1.30714V1.30714C127.606 0.90263 129.7 2.34033 130.105 4.51833V4.51833L145.819 89.1293V89.1293C146.224 91.3073 144.786 93.4008 142.608 93.8053V93.8053L21.6274 116.275V116.275C19.4494 116.679 17.3559 115.241 16.9513 113.063V113.063L1.23687 28.4525V28.4525C0.832353 26.2745 2.27005 24.1809 4.44805 23.7764V23.7764L125.428 1.30714Z"
+          fill={color}
+        />
+        <circle
+          cx="2.00553"
+          cy="2.00553"
+          r="2.00553"
+          transform="matrix(-0.983187 0.182604 0.182604 0.983187 106.894 21.4552)"
+          fill="#282828"
+        />
+        <circle
+          cx="2.00553"
+          cy="2.00553"
+          r="2.00553"
+          transform="matrix(-0.983187 0.182604 0.182604 0.983187 90.3052 24.5361)"
+          fill="#282828"
+        />
+        <path
+          d="M92.7176 33.0633C93.1221 35.2413 95.9219 36.5478 98.9711 35.9815C102.02 35.4152 104.164 33.1905 103.76 31.0125"
+          stroke="#282828"
+          stroke-width="1.60443"
+          stroke-linecap="round"
+        />
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="215"
+        height="84"
+        viewBox="0 0 215 84"
+        fill="none"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M48.0316 167.754C71.2346 190.957 108.854 190.957 132.057 167.754L167.296 132.516C190.499 109.313 190.499 71.6932 167.296 48.4902V48.4902C144.093 25.2872 106.473 25.2872 83.2701 48.4902L48.0315 83.7288C24.8286 106.932 24.8286 144.551 48.0316 167.754V167.754ZM212.107 93.3012V93.3012C213.652 91.7557 213.652 89.2501 212.107 87.7047V87.7047L128.081 3.67923V3.67923C126.536 2.13381 124.03 2.13381 122.485 3.67923V3.67923L3.2206 122.943V122.943C1.67518 124.489 1.67518 126.994 3.2206 128.54V128.54L87.2461 212.565V212.565C88.7915 214.111 91.2971 214.111 92.8425 212.565V212.565L212.107 93.3012Z"
+          fill={color}
+        />
+        <circle cx="119.025" cy="38.9881" r="1.97865" fill="#282828" />
+        <circle cx="131.138" cy="38.9881" r="1.97865" fill="#282828" />
+        <path
+          d="M130.622 45.7156C130.622 47.9011 128.142 49.6729 125.082 49.6729C122.022 49.6729 119.542 47.9011 119.542 45.7156"
+          stroke="#282828"
+          stroke-width="1.58292"
+          stroke-linecap="round"
+        />
+      </svg>
+    </div>
+  );
+};
diff --git a/src/components/navigation/footer/footerIllustration/footerIllustration.module.css b/src/components/navigation/footer/footerIllustration/footerIllustration.module.css
new file mode 100644
index 000000000..7dc7f0cc0
--- /dev/null
+++ b/src/components/navigation/footer/footerIllustration/footerIllustration.module.css
@@ -0,0 +1,11 @@
+.footerIllustrations {
+  background-color: transparent;
+  display: flex;
+  align-items: end;
+  justify-content: space-around;
+
+  &>svg {
+    width: 20%;
+    height: auto;
+  }
+}
diff --git a/src/components/navigation/footer/footer_new.module.css b/src/components/navigation/footer/footer_new.module.css
index 06e44ff10..cd838e9ac 100644
--- a/src/components/navigation/footer/footer_new.module.css
+++ b/src/components/navigation/footer/footer_new.module.css
@@ -1,4 +1,4 @@
-.footer {
+.footerContent {
   background-color: var(--primary-bg);
   border-radius: 0.75rem;
   padding: 1.5rem;
@@ -50,8 +50,7 @@
     justify-content: space-between;
   }
 
-  @media (min-width: 1408px) {
-  }
+  @media (min-width: 1408px) {}
 }
 
 .logo {
@@ -96,7 +95,7 @@
   gap: 1rem;
   flex-wrap: wrap;
 
-  & > li {
+  &>li {
     text-wrap: nowrap;
   }