hero banner

app/[lang]/components/footer/footer.module.css

@@ -21,6 +21,18 @@
   align-content: flex-start;
   column-gap: 40px;
 }
+.logoContainer {
+  margin: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.logoContainer img {
+  width: auto;
+  height: 200px;
+}
+
 .footerSection {
   display: flex;
   flex-direction: column;

app/[lang]/components/footer/footer.tsx

@@ -1,16 +1,21 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { getDictionary } from "../../../../translations/translations";
 import styles from "./footer.module.css";
 import { FormModalButton } from "../formModal/formModal";
+import logoITSolutions from "../../../../public/icons/logo-septeo-it-solution.svg";
 
 export function Footer(p: { lang: string }) {
   const t = getDictionary(p.lang);
   const year = new Date().getFullYear();
   return (
     <footer className={styles.footer}>
       <div className={styles.footerSections}>
+        <div className={styles.logoContainer}>
+          <Image src={logoITSolutions} alt="Septeo IT Solutions" />
+        </div>
         <nav className={styles.footerSection}>
           <h1>{t.footer.nav.t}</h1>
           <Link href="/">{t.footer.nav.home}</Link>
@@ -50,7 +55,7 @@ export function Footer(p: { lang: string }) {
         </div>
       </div>
       <div className={styles.copyright}>
-        © Septeo IT Solutions {year} {t.legalNotice.editor.name} {t.footer.copyright}
+        © Septeo IT Solutions {year} {t.footer.copyright}
         <span className={styles.spacer} />
         <Link href="/legalNotice">{t.footer.legalNotice}</Link>
         <span className={styles.spacer} />

app/[lang]/page.module.css

@@ -1,18 +1,88 @@
 .blueBackground {
   background-image: linear-gradient(0deg, transparent, var(--quinternary15));
 }
+
 .advantagesBackground{
   background-color: var(--tertiary);
 }
 .greenBackground {
   background-color: var(--quaternary);
 }
 
+/* HERO BANNER */
+.heroBanner {
+  padding: 50px 0 50px 0;
+  background-image: linear-gradient(180deg,#7096ff1a 50%,#7096ff26 75%,#7096ff33);
+  border-bottom-left-radius: 10rem;
+  display: flex;
+  justify-content: center;
+}
+
+.heroBannerContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+  padding: 60px 40px;
+  max-width: 80rem;
+}
+
+.heroBannerContent {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: flex-start;
+}
+
+.heroBannerImg {
+  width: 100%;
+  height: auto;
+  position: relative;
+}
+
+.heroBannerImg img {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  border-radius: 15px;
+}
+
+.heroBannerCTA {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 20px;
+  padding-bottom: 30px;
+  width: 100%;
+}
+
+@media (max-width: 739px) {
+  .heroBannerContainer {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1031px) {
+  .heroBannerCTA {
+    flex-direction: column;
+    align-items: stretch;
+    row-gap: 10px;
+  }
+}
+
+.statsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 10px;
+}
+
 .titleSection {
+  padding: 50px 0 0px 0;
   max-width: 900px;
   margin: auto;
-  padding: 20px;
 }
+
 .moto {
   font-size: 2em;
   color: var(--title-color);

app/[lang]/page.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { getDictionary } from "../../translations/translations";
 import styles from "./page.module.css";
 import { Metadata } from "next";
@@ -8,6 +7,9 @@ import frenchImg from "../../public/images/french.svg";
 import privacyByDesignImg from "../../public/images/privacyByDesign.svg";
 import multiDeviceImg from "../../public/images/multiDevice.svg";
 import cryptographyImg from "../../public/images/cryptography.svg";
+import heroBannerImg from "../../public/images/heroBanner.png";
+import googleIcon from "../../public/images/google.svg";
+import starsIcon from "../../public/images/stars.svg";
 
 import VimeoPlayer from "./components/vimeoPlayer/vimeoPlayer";
 import CustomerCarousel from "./components/customerCarousel/customerCarousel";
@@ -47,8 +49,42 @@ export default async function Page({
   return (
     <div>
       <div className={styles.blueBackground}>
+        <section className={styles.heroBanner}>
+          <div className={styles.heroBannerContainer}>
+            <div className={styles.heroBannerContent}>
+              <h1 className={styles.heroBannerTitle}>{t.heroBanner.title}</h1>
+              <p className={styles.heroBannerDescription}>{t.heroBanner.description}</p>
+              <div className={styles.heroBannerCTA}>
+                <FormModalButton
+                lang={lang}
+                className={styles.actionLink}
+                buttonText={t.actions.contactUs}
+                modalTitle={t.actions.contactUs}
+                modalLinkValue="contact-us"
+                isFreeTrialForm={false}
+                />
+                <FormModalButton
+                  lang={lang}
+                  className={styles.actionLinkPrimary}
+                  buttonText={t.actions.freeTrial}
+                  modalTitle={t.actions.freeTrial}
+                  modalLinkValue="free-trial"
+                  isFreeTrialForm={true}
+                />
+              </div>
+              <div className={styles.statsContainer}>
+                <Image src={googleIcon} alt="Google Play" />
+                <p>{t.heroBanner.rating}</p>
+                <Image src={starsIcon} alt="Stars" />
+              </div>
+            </div>
+            <div className={styles.heroBannerImg}>
+              <Image src={heroBannerImg} alt="Hero Banner" />
+            </div>
+          </div>
+        </section>
         <section className={styles.titleSection}>
-          <h1 className={styles.moto}>{t.pitch.moto}</h1>
+          <h2 className={styles.moto}>{t.pitch.moto}</h2>
           <VimeoPlayer
             videoId="915105612"
             title={t.pitch.prezVideoTitle}

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.