-
+
+
+
+
+
+
+
+
+
{detailsData.copyrightCompany}{" "}
+ {detailsData.copyrightInfo}
+
+
+
+
diff --git a/components/Footer/Navigation/MainNav/mainnav.module.css b/components/Footer/Navigation/MainNav/mainnav.module.css
index b4cbffc88..f3c21e23e 100644
--- a/components/Footer/Navigation/MainNav/mainnav.module.css
+++ b/components/Footer/Navigation/MainNav/mainnav.module.css
@@ -1,5 +1,4 @@
.mainNavigation {
- max-width: 360px;
width: 100%;
}
@@ -10,6 +9,9 @@
.mainNavigationItem {
padding: var(--Spacing-x3) 0;
border-bottom: 1px solid var(--Scandic-Peach-20);
+ &:first-child {
+ padding-top: 0;
+ }
&:last-child {
border-bottom: 0;
}
@@ -21,3 +23,9 @@
display: flex;
justify-content: space-between;
}
+
+@media screen and (min-width: 1367px) {
+ .mainNavigation {
+ max-width: 360px;
+ }
+}
diff --git a/components/Footer/Navigation/SecondaryNav/secondarynav.module.css b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
index 3d7d6a6ec..314f69c3e 100644
--- a/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
+++ b/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
@@ -1,6 +1,8 @@
.secondaryNavigation {
display: flex;
- gap: 80px;
+ flex-direction: column-reverse;
+ gap: var(--Spacing-x6);
+ margin-top: var(--Spacing-x6);
}
.secondaryNavigationList {
@@ -23,3 +25,11 @@
font-family: var(--typography-Body-Bold-fontFamily);
margin: 0;
}
+
+@media screen and (min-width: 1367px) {
+ .secondaryNavigation {
+ margin-top: 0;
+ gap: 80px;
+ flex-direction: row;
+ }
+}
diff --git a/components/Footer/Navigation/navigation.module.css b/components/Footer/Navigation/navigation.module.css
index fa45a3d99..c37481cbd 100644
--- a/components/Footer/Navigation/navigation.module.css
+++ b/components/Footer/Navigation/navigation.module.css
@@ -1,6 +1,6 @@
.section {
background: var(--Scandic-Brand-Pale-Peach);
- padding: 160px var(--Spacing-x9);
+ padding: var(--Spacing-x9) var(--Spacing-x2);
color: var(--Scandic-Brand-Burgundy);
}
@@ -8,4 +8,14 @@
margin: 0 auto;
display: flex;
justify-content: space-between;
+ flex-direction: column;
+}
+
+@media screen and (min-width: 1367px) {
+ .section {
+ padding: 160px var(--Spacing-x9);
+ }
+ .maxWidth {
+ flex-direction: row;
+ }
}
diff --git a/components/Footer/mockedData.ts b/components/Footer/mockedData.ts
index 491bc6a56..8ae41a2df 100644
--- a/components/Footer/mockedData.ts
+++ b/components/Footer/mockedData.ts
@@ -99,3 +99,67 @@ export const navigationData = {
},
},
}
+
+export const detailsData = {
+ copyrightCompany: "© 2024 Scandic AB",
+ copyrightInfo: "All rights reserved.",
+ social: {
+ links: [
+ {
+ title: "Facebook",
+ href: "https://www.facebook.com/scandichotels/",
+ id: "facebook",
+ },
+ {
+ title: "Instagram",
+ href: "https://www.instagram.com/scandichotels/",
+ id: "instagram",
+ },
+ {
+ title: "Tripadvisor",
+ href: "https://www.tripadvisor.com/Hotel_Review-g297628-d1020208712-Reviews-Scandic_Hotels-Stockholm_Sweden.html",
+ id: "tripadvisor",
+ },
+ ],
+ },
+ links: [
+ {
+ title: "Cookies",
+ href: "/cookies",
+ id: "cookies",
+ },
+ {
+ title: "Privacy policy",
+ href: "/privacy",
+ id: "privacy",
+ },
+ ],
+ languageSwitcher: {
+ urls: {
+ da: {
+ url: "https://www.scandichotels.com/da",
+ isExternal: true,
+ },
+ de: {
+ url: "https://www.scandichotels.com/de",
+ isExternal: true,
+ },
+ en: {
+ url: "https://www.scandichotels.com/en",
+ isExternal: true,
+ },
+ fi: {
+ url: "https://www.scandichotels.com/fi",
+ isExternal: true,
+ },
+ no: {
+ url: "https://www.scandichotels.com/no",
+ isExternal: true,
+ },
+ sv: {
+ url: "https://www.scandichotels.com/sv",
+ isExternal: true,
+ },
+ },
+ },
+}
diff --git a/components/Icons/Facebook.tsx b/components/Icons/Facebook.tsx
new file mode 100644
index 000000000..20e7b6499
--- /dev/null
+++ b/components/Icons/Facebook.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function FacebookIcon({
+ className,
+ color,
+ ...props
+}: IconProps) {
+ const classNames = iconVariants({ className, color })
+ return (
+
+ )
+}
diff --git a/components/Icons/Instagram.tsx b/components/Icons/Instagram.tsx
new file mode 100644
index 000000000..5297456d2
--- /dev/null
+++ b/components/Icons/Instagram.tsx
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function InstagramIcon({
+ className,
+ color,
+ ...props
+}: IconProps) {
+ const classNames = iconVariants({ className, color })
+ return (
+
+ )
+}
diff --git a/components/Icons/get-icon-by-icon-name.ts b/components/Icons/get-icon-by-icon-name.ts
index e7a044f06..e10495d52 100644
--- a/components/Icons/get-icon-by-icon-name.ts
+++ b/components/Icons/get-icon-by-icon-name.ts
@@ -1,5 +1,8 @@
import { FC } from "react"
+import FacebookIcon from "./Facebook"
+import InstagramIcon from "./Instagram"
+import TripAdvisorIcon from "./TripAdvisor"
import {
AccessibilityIcon,
AccountCircleIcon,
@@ -85,6 +88,8 @@ export function getIconByIconName(icon?: IconName): FC
| null {
return ElectricBikeIcon
case IconName.Email:
return EmailIcon
+ case IconName.Facebook:
+ return FacebookIcon
case IconName.Fitness:
return FitnessIcon
case IconName.Globe:
@@ -95,6 +100,8 @@ export function getIconByIconName(icon?: IconName): FC | null {
return ImageIcon
case IconName.InfoCircle:
return InfoCircleIcon
+ case IconName.Instagram:
+ return InstagramIcon
case IconName.Location:
return LocationIcon
case IconName.Lock:
@@ -115,6 +122,8 @@ export function getIconByIconName(icon?: IconName): FC | null {
return RestaurantIcon
case IconName.Sauna:
return SaunaIcon
+ case IconName.Tripadvisor:
+ return TripAdvisorIcon
case IconName.TshirtWash:
return TshirtWashIcon
case IconName.WarningTriangle:
diff --git a/types/components/icon.ts b/types/components/icon.ts
index 52ac8c021..d965a4e78 100644
--- a/types/components/icon.ts
+++ b/types/components/icon.ts
@@ -27,11 +27,13 @@ export enum IconName {
DoorOpen = "DoorOpen",
ElectricBike = "ElectricBike",
Email = "Email",
+ Facebook = "Facebook",
Fitness = "Fitness",
Globe = "Globe",
House = "House",
Image = "Image",
InfoCircle = "InfoCircle",
+ Instagram = "Instagram",
Location = "Location",
Lock = "Lock",
Parking = "Parking",
@@ -42,6 +44,7 @@ export enum IconName {
PlusCircle = "PlusCircle",
Restaurant = "Restaurant",
Sauna = "Sauna",
+ Tripadvisor = "Tripadvisor",
TshirtWash = "TshirtWash",
Wifi = "Wifi",
WarningTriangle = "WarningTriangle",