fix: align design of footer with current web

app/[lang]/(live)/layout.tsx

@@ -6,6 +6,7 @@ import Script from "next/script"
 import TrpcProvider from "@/lib/trpc/Provider"
 
 import AdobeScript from "@/components/Current/AdobeScript"
+import Footer from "@/components/Current/Footer"
 import Header from "@/components/Current/Header"
 import VwoScript from "@/components/Current/VwoScript"
 
@@ -52,6 +53,7 @@ export default async function RootLayout({
         <TrpcProvider lang={params.lang}>
           <Header lang={params.lang} languageSwitcher={languageSwitcher} />
           {children}
+          <Footer lang={params.lang} />
         </TrpcProvider>
         <Script id="page-tracking">{`
           typeof _satellite !== "undefined" && _satellite.pageBottom();

components/Current/Footer/Navigation.tsx

@@ -1,16 +1,18 @@
+import styles from "./navigation.module.css"
+
 import type { FooterNavigationProps } from "@/types/components/current/footer"
 
 export default function Navigation({ linkGroups }: FooterNavigationProps) {
   return (
-    <ul className="l-footer-sections global-footer__content__sections">
+    <ul className={styles.container}>
       {linkGroups.map((group) => (
-        <li className="global-footer-section" key={group.title}>
-          <div className="link-list">
-            <h3 className="link-list-header">{group.title}</h3>
-            <ul className="list-footer-pages">
-              {group.links.map(link => (
-                <li key={link.href}>
-                  <a href={link.href}>
+        <li className={styles.section} key={group.title}>
+          <div className={styles.linkList}>
+            <h3 className={styles.linkListTitle}>{group.title}</h3>
+            <ul className={styles.listPages}>
+              {group.links.map((link) => (
+                <li className={styles.li} key={link.href}>
+                  <a className={styles.listLink} href={link.href}>
                     {link.title}
                   </a>
                 </li>

components/Current/Footer/footer.module.css

@@ -0,0 +1,164 @@
+.container {
+  position: relative;
+  background: #000;
+  color: #fff;
+  z-index: 9;
+  overflow: hidden;
+  border-top: 1px solid #868686;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.container::before {
+  content: "";
+  position: absolute;
+  top: -10px;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  z-index: 3;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.85) 0 0 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
+}
+
+.content {
+  position: relative;
+  box-sizing: content-box;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 30px 10px 0 10px;
+}
+
+.contentHeading {
+  text-align: center;
+  color: #fff;
+  font-family: BrandonText-Bold, Arial, Helvetica, sans-serif;
+  font-size: 1.375rem;
+  line-height: 1.1em;
+  text-transform: uppercase;
+  font-weight: 400;
+  color: #483729;
+  margin-bottom: 1rem;
+  margin-top: 0;
+}
+
+.hiddenAccessible {
+  display: block;
+  position: absolute;
+  left: -100000em;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.footerSections {
+  display: block;
+  padding: 0;
+  margin: -10px;
+  list-style: none;
+}
+
+.footerLink {
+  clear: both;
+  padding: 0 0 3px;
+}
+
+.footerLinkHeader {
+  display: none;
+  padding: 0 20px;
+  border-bottom: 1px solid #e3e0db;
+  font-weight: 700;
+  text-transform: uppercase;
+  margin-bottom: 15px;
+}
+
+.contentBottom {
+  max-width: 700px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.contentBottomTitle {
+  margin-bottom: 16px;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22.4px;
+  font-family: Helvetica, Arial, sans-serif;
+  text-align: center;
+}
+
+.footerAboutText {
+  margin-bottom: 16px;
+  line-height: 22.4px;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 16px;
+}
+
+.appDownloadTable {
+  height: 62px;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tableRow {
+  height: 62px;
+}
+
+.tableData {
+  width: 50px;
+  height: 62px;
+}
+
+.sectionContainer {
+  text-align: center;
+  margin-top: 32px;
+  margin-bottom: 16px;
+  padding-bottom: 3px;
+}
+
+.sectionTitle {
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: normal;
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.socialMediaIconsContainer {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+  padding-right: 4px;
+  padding-bottom: 4px;
+}
+
+.socialMediaIconLink {
+  border-bottom: 3px solid transparent;
+}
+
+.socialMediaIcon {
+  width: 42px;
+  height: 42px;
+  overflow: hidden;
+  display: block;
+  text-indent: -9999px;
+  fill: #fff;
+}
+
+@media screen and (min-width: 950px) {
+  .container {
+    padding: 0 20px;
+  }
+
+  .contentHeading {
+    margin: 0;
+    margin-bottom: 25px;
+  }
+  .socialMediaIconsContainer {
+    gap: 9px;
+  }
+}

components/Current/Footer/index.tsx

@@ -7,6 +7,8 @@ import Image from "@/components/Image"
 
 import Navigation from "./Navigation"
 
+import styles from "./footer.module.css"
+
 import type { LangParams } from "@/types/params"
 import type { GetFooterData } from "@/types/requests/footer"
 
@@ -27,57 +29,44 @@ export default async function Footer({ lang }: LangParams) {
 
   const footerData = data.all_footer.items[0]
   return (
-    <footer className="global-footer">
-      <div className="global-footer__content">
-        <h2 className="global-footer__content__heading">
+    <footer className={styles.container}>
+      <div className={styles.content}>
+        <h2 className={styles.contentHeading}>
           <Image
             alt={footerData.logoConnection.edges[0].node.title}
-            data-js="scandiclogoimg"
             data-nosvgsrc="/_static/img/scandic-logotype-white.png" // what here?
-            height="22"
+            height={23}
             src={footerData.logoConnection.edges[0].node.url}
-            width="102"
+            width={102.17}
           />
-          <span className="hidden--accessible">Scandic</span>
+          <span className={styles.hiddenAccessible}>Scandic</span>
         </h2>
-        <ul className="l-footer-sections">
+        <ul className={styles.footerSections}>
           {footerData.navigation.map((group) => (
-            <li className="global-footer-section" key={group.title}>
-              <div className="link-list-top-header">{group.title}</div>
+            <li className={styles.footerLink} key={group.title}>
+              <div className={styles.footerLinkHeader}>{group.title}</div>
             </li>
           ))}
         </ul>
 
-        <div
-          data-js-collapsible="global-footer"
-          className="collapsible-global-footer"
-        >
+        <div>
           <Navigation linkGroups={footerData.navigation} />
 
-          <div className="global-footer__content__bottom">
-            <p className="newFooterTitle">
-              <strong>{footerData.about.title}</strong>
+          <div className={styles.contentBottom}>
+            <p className={styles.contentBottomTitle}>
+              {footerData.about.title}
             </p>
-            <div className="padTop15">
-              <p>{footerData.about.text}</p>
-              <p style={{ textAlign: "center" }}>
-                <strong>{footerData.app_downloads.title}</strong>
+            <div>
+              <p className={styles.footerAboutText}>{footerData.about.text}</p>
+              <p className={styles.contentBottomTitle}>
+                {footerData.app_downloads.title}
               </p>
-              <table
-                style={{
-                  height: "62px",
-                  width: "100%",
-                  borderCollapse: "collapse",
-                }}
-              >
+              <table className={styles.appDownloadTable}>
                 <tbody>
-                  <tr style={{ height: "62px" }}>
+                  <tr className={styles.tableRow}>
                     <td
-                      style={{
-                        width: "50%",
-                        height: "62px",
-                        textAlign: "right",
-                      }}
+                      className={styles.tableData}
+                      style={{ textAlign: "right" }}
                     >
                       <a
                         title="Appstore"
@@ -100,11 +89,8 @@ export default async function Footer({ lang }: LangParams) {
                       </a>
                     </td>
                     <td
-                      style={{
-                        width: "50%",
-                        height: "62px",
-                        textAlign: "left",
-                      }}
+                      className={styles.tableData}
+                      style={{ textAlign: "left" }}
                     >
                       <a
                         title="Google Play"
@@ -130,118 +116,56 @@ export default async function Footer({ lang }: LangParams) {
                 </tbody>
               </table>
             </div>
-            <style
-              dangerouslySetInnerHTML={{
-                __html: `#map-destinations-list .hotel-teaser .hotel-teaser__body + .special-alerts.special-alerts--inline-block {
-display: none;
-}`,
-              }}
-            />
-            <p>
-              <Script
-                id="inline-script"
-                dangerouslySetInnerHTML={{
-                  __html: `const isNetsHotel = location.href.match(/hotel=((389)|(365)|(374)|(888)|(891)|(340))/g) != null;
-                    let removeSavedCardElem = function () {
-                    if (!isNetsHotel) {
-                        return;
-                    }
-                    if (document.querySelector(".credit-card-form__saved-select")) {
-                        if (!document.querySelector(".credit-card-form__new")) {
-                            document.querySelector(".credit-card-form").classNameList.add("hidden");
-                        }
-                        document.querySelector(".credit-card-form__saved-select").remove();
-                        document.querySelector(".credit-card-form__select input[type=radio]").checked = "checked";
-                    }
-                    setTimeout( function() {
-                        if (document.querySelector(".credit-card-form__select")) {
-                            document.querySelector(".credit-card-form__select input[type=radio]").checked = "checked";
-                            document.querySelector(".credit-card-form__select").classNameList.add("hidden");
-                        }
-                        if (document.querySelector(".credit-card-form__new")) {
-                            document.querySelector(".credit-card-form__new").classNameList.remove("ng-hide");
-                        }
-                    }, 300);
-                    }
-                    removeSavedCardElem();
-                    setTimeout(removeSavedCardElem, 500);
-                    const confirmPgHotelId = document.getElementById("adm-hotelOperaId") && document.getElementById("adm-hotelOperaId").value;
-                    const isNetsHotelConfnPg = ["389","365","374","888","891","340"].indexOf(confirmPgHotelId) != -1;
-                    if (isNetsHotelConfnPg && document.querySelector(".save-credit-card__form")) {
-                    document.querySelector(".save-credit-card__form").style.display = "none";
-                    document.querySelector(".save-credit-card__form").remove();
-                    }`,
-                }}
-              />
-            </p>
           </div>
-          <div className="global-footer__social-media" id="social-icons">
-            <h3 className="heading-5 u-uppercase">
+          <div className={styles.sectionContainer}>
+            <h3 className={styles.sectionTitle}>
               {footerData.social_media.title}
             </h3>
-            <a
-              href={footerData.social_media.facebook.href}
-              rel="noopener"
-              target="_blank"
-              className="social-media-icon"
-              title="Scandic on Facebook"
-            >
-              <svg
-                focusable="false"
-                className="icon icon--facebook icon--white"
-                viewBox="0 0 150 150"
-                role="img"
-                aria-labelledby="social-icons facebook-icon"
+            <section className={styles.socialMediaIconsContainer}>
+              <a
+                href={footerData.social_media.facebook.href}
+                rel="noopener"
+                target="_blank"
+                className={styles.socialMediaIconLink}
+                title="Scandic on Facebook"
               >
-                <title id="facebook-icon">
-                  {footerData.social_media.facebook.title}
-                </title>
-                <use xlinkHref="/_static/img/icons/sprites.svg#icon-facebook"></use>
-              </svg>
-            </a>
-            <a
-              href={footerData.social_media.twitter.href}
-              rel="noopener"
-              target="_blank"
-              className="social-media-icon"
-            >
-              <span className="hidden--accessible">{`Model.SafeGet(m => m.FooterHeader) on Twitter`}</span>
-              <svg
-                focusable="false"
-                className="icon icon--twitter icon--white"
-                viewBox="0 0 150 150"
-                role="img"
-                aria-labelledby="social-icons twitter-icon"
+                <svg
+                  focusable="false"
+                  className={styles.socialMediaIcon}
+                  viewBox="0 0 150 150"
+                  role="img"
+                  aria-labelledby="social-icons facebook-icon"
+                >
+                  <title id="facebook-icon">
+                    {footerData.social_media.facebook.title}
+                  </title>
+                  <use xlinkHref="/_static/img/icons/sprites.svg#icon-facebook"></use>
+                </svg>
+              </a>
+              <a
+                href={footerData.social_media.instagram.href}
+                rel="noopener"
+                target="_blank"
+                className={styles.socialMediaIconLink}
+                title="Scandic on Instagram"
               >
-                <title id="twitter-icon">
-                  {footerData.social_media.twitter.title}
-                </title>
-                <use xlinkHref="/_static/img/icons/sprites.svg#icon-twitter"></use>
-              </svg>
-            </a>
-            <a
-              href={footerData.social_media.instagram.href}
-              rel="noopener"
-              target="_blank"
-              className="social-media-icon"
-              title="Scandic on Instagram"
-            >
-              <svg
-                focusable="false"
-                className="icon icon--instagram icon--white"
-                viewBox="0 0 150 150"
-                role="img"
-                aria-labelledby="social-icons instagram-icon"
-              >
-                <title id="instagram-icon">
-                  {footerData.social_media.instagram.title}
-                </title>
-                <use xlinkHref="/_static/img/icons/sprites.svg#icon-instagram"></use>
-              </svg>
-            </a>
+                <svg
+                  focusable="false"
+                  className={styles.socialMediaIcon}
+                  viewBox="0 0 150 150"
+                  role="img"
+                  aria-labelledby="social-icons instagram-icon"
+                >
+                  <title id="instagram-icon">
+                    {footerData.social_media.instagram.title}
+                  </title>
+                  <use xlinkHref="/_static/img/icons/sprites.svg#icon-instagram"></use>
+                </svg>
+              </a>
+            </section>
           </div>
-          <div className="global-footer__trip-advisor">
-            <h3 className="heading-5 u-uppercase">
+          <div className={styles.sectionContainer}>
+            <h3 className={styles.sectionTitle}>
               {footerData.trip_advisor.title}
             </h3>
             <Image

components/Current/Footer/navigation.module.css

@@ -0,0 +1,92 @@
+.container {
+  display: block;
+  padding: 0;
+  margin: -10px;
+  list-style: none;
+}
+
+.section {
+  padding: 0 0 3px;
+  display: block;
+  height: auto;
+  float: left;
+  width: 100%;
+  list-style: none;
+}
+
+.linkList {
+  padding: 10px 20px 20px;
+}
+
+.linkListTitle {
+  font-family:
+    Helvetica Neue,
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 16px;
+  line-height: 22px;
+  border-bottom: 1px solid #e3e0db;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding-bottom: 3px;
+  margin-bottom: 15px;
+  margin-top: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.listPages {
+  list-style: none;
+}
+
+.li {
+  padding-left: 38px;
+  margin-bottom: 8px;
+  background-image: url(/_static/img/bullet-list-arrow-circle-white.svg);
+  background-repeat: no-repeat;
+  background-position: 0 7px;
+  background-size: 19px;
+}
+
+.listLink {
+  text-decoration: none;
+  color: #fff;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 32px;
+}
+
+.listLink:hover,
+.listLink:active,
+.listLink:focus {
+  text-decoration: underline;
+}
+
+@media screen and (min-width: 950px) {
+  .container {
+    display: flex;
+  }
+  .section {
+    margin-bottom: 4px;
+    padding: 0 0 20px;
+  }
+
+  .linkList {
+    padding: 0 10px;
+  }
+
+  .linkListTitle {
+    padding: 0 20px;
+  }
+  .listPages {
+    padding: 10px 20px;
+  }
+
+  .linkListTitle {
+    padding-bottom: 2px;
+    line-height: 24px;
+  }
+}