Skip to content

Commit

Permalink
feat: add illustrations on top of footer
Browse files Browse the repository at this point in the history
  • Loading branch information
TrymVei committed Nov 29, 2024
1 parent 1f5eed9 commit 0ff2169
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 77 deletions.
163 changes: 90 additions & 73 deletions src/components/navigation/footer/Footer_new.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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("[email protected]")}
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("[email protected]")}
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 (
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.footerIllustrations {
background-color: transparent;
display: flex;
align-items: end;
justify-content: space-around;

&>svg {
width: 20%;
height: auto;
}
}
7 changes: 3 additions & 4 deletions src/components/navigation/footer/footer_new.module.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.footer {
.footerContent {
background-color: var(--primary-bg);
border-radius: 0.75rem;
padding: 1.5rem;
Expand Down Expand Up @@ -50,8 +50,7 @@
justify-content: space-between;
}

@media (min-width: 1408px) {
}
@media (min-width: 1408px) {}
}

.logo {
Expand Down Expand Up @@ -96,7 +95,7 @@
gap: 1rem;
flex-wrap: wrap;

& > li {
&>li {
text-wrap: nowrap;
}

Expand Down

0 comments on commit 0ff2169

Please sign in to comment.