Refactor design (#275)

* fix: correction span

* fix: correction span

* Refactor of the details pages

---------

Co-authored-by: Dedelweiss <[email protected]>

public/locales/en/translation.json

@@ -75,7 +75,7 @@
             "title": "Close to customers across ",
             "titleImp": "Europe",
             "desc": "Lunatech was founded in 1993 as an IT consulting, product research and development team. As a team of adept self-managing programmers, working with a very experienced commercial team, Lunatech has a successful track record of implementing medium-sized to large systems. Our skills are best applied in designing and building back office systems whereby a web interface is just one of many external user- interfaces. Lunatech is an international company with offices in the Netherlands and France. With over 11+ revenue and 90+ people, Lunatech is growing organically.",
-            "desc2": "We excel at going into an organisation, analysing their requirements, and then - together with the customer - designing and building a system to meet their needs. Lunatech exists for more than 30 years and helped numerous customers. We work to an interactive development process. We build applications in a number of short iterations. This provides great visibility to the customer and it greatly improves the end result because the product and expectations can be adjusted along the way. With a proud record of providing professional IT services for large corporations, you’ll find us highly technical, very creative, and flexible. Lunatech is also NEN-4400-1 and TISAX certified, European Open Source consortium and Eclipse foundation member delivering on open source."
+            "desc2": "Lunatech is strategically located with offices in Rotterdam and Paris, allowing us to better serve our customers throughout France and several other European countries, including the Netherlands, Germany and beyond. Our multicultural team enables us to respond to the specific needs of each market, providing tailored and innovative solutions for our customers across Europe."
         },
         "secondBlock": {
             "title": "Customised products to meet your ",

public/locales/fr/translation.json

@@ -75,7 +75,7 @@
             "title": "Proche des clients à travers ",
             "titleImp": "l'Europe",
             "desc": "Lunatech a été fondée en 1993 en tant qu'équipe de conseil en informatique, de recherche et développement de produits. En tant qu'équipe de programmeurs autonomes, travaillant avec une équipe commerciale très expérimentée, Lunatech a un historique de réussite dans la mise en œuvre de systèmes de taille moyenne à grande. Nos compétences sont mieux appliquées à la conception et à la construction de systèmes de back-office, où une interface web n'est qu'une des nombreuses interfaces utilisateur externes. Lunatech est une entreprise internationale avec des bureaux aux Pays-Bas et en France. Avec plus de 11+ de revenus et 90+ personnes, Lunatech se développe organiquement.",
-            "desc2": "Nous excellons à entrer dans une organisation, à analyser ses besoins, puis - avec le client - à concevoir et à construire un système répondant à ses besoins. Lunatech existe depuis plus de 30 ans et a aidé de nombreux clients. Nous travaillons selon un processus de développement interactif. Nous construisons des applications en plusieurs itérations courtes. Cela offre une grande visibilité au client et améliore considérablement le résultat final, car le produit et les attentes peuvent être ajustés en cours de route. Avec un dossier de prestations professionnelles de services informatiques pour les grandes entreprises, vous nous trouverez hautement techniques, très créatifs et flexibles. Lunatech est également certifiée NEN-4400-1 et TISAX, membre du consortium européen Open Source et de la fondation Eclipse, offrant des solutions open source."
+            "desc2": "Lunatech est implantée stratégiquement avec des bureaux à Rotterdam et à Paris, nous permettant de mieux servir nos clients dans toute la France et dans plusieurs autres pays européens, notamment aux Pays-Bas, en Allemagne et au-delà. Notre équipe multiculturelle nous permet de répondre aux besoins spécifiques de chaque marché, en proposant des solutions adaptées et innovantes pour nos clients à travers toute l'Europe."
 
         },
         "secondBlock": {

src/components/FeatureBox/FeatureBox.scss

@@ -0,0 +1,15 @@
+@import "/src/styles/Variables.scss";
+@import "/src/styles/Mixins.scss";
+@import "/src/styles/Responsive.scss";
+
+.featureBox {
+    @include dark-gradient;
+    padding: 20px 35px 25px 35px;
+    cursor: pointer;
+    &:not(:last-child) {
+        margin-bottom: 24px;
+    }
+    h3 {
+        color: $pink;
+    }
+}

src/components/FeatureBox/FeatureBox.tsx

@@ -0,0 +1,22 @@
+import Title from '@components/Title/Title';
+import Text from '@components/Text/Text';
+
+import "./FeatureBox.scss";
+
+interface FeatureBoxProps {
+  title: string;
+  text: JSX.Element;
+  classNames?: string;
+  onClick?: () => void;
+}
+
+const FeatureBox = (props: FeatureBoxProps) => {
+    return (
+        <div className={`featureBox ${props.classNames}`}>
+            <Title level={3}>{props.title}</Title>
+            <Text size="medium" className="mgt24">{props.text}</Text>
+        </div>
+    )
+}
+
+export default FeatureBox

src/components/TechnologieCarousel/TechnologieCarousel.scss

@@ -71,7 +71,7 @@
     &__card {
         background: linear-gradient(to bottom, #0A1E50, #081A47);
         scroll-snap-align: start;
-        max-height: 380px;
+        max-height: 390px;
         width: 380px;
         padding: 40px;
         list-style: none;

src/constants/index.ts

@@ -334,7 +334,7 @@ export const aboutPage = [
             title: "about.firstBlock.title",
             titleImp: "about.firstBlock.titleImp",
             desc: "about.firstBlock.desc",
-            desc2: "about.firstBlock.desc"
+            desc2: "about.firstBlock.desc2"
         },
         secondBlock: {
             title: "about.secondBlock.title",
@@ -384,6 +384,139 @@ export const contactBlock = [
     }
 ]
 
+export const expertiseSoftwareProjectDelivery = {
+    "paragraphes": [
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[0].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[0].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[1].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[1].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[2].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[2].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[3].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[3].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[4].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[4].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[5].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[5].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[6].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[6].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[7].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[7].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[8].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[8].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[9].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[9].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[10].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[10].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[11].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[11].text"
+        },
+        {
+            "title": "expertiseSoftwareProjectDelivery.paragraphes[12].title",
+            "text": "expertiseSoftwareProjectDelivery.paragraphes[12].text"
+        },
+    ]
+}
+
+export const expertiseSystemIntegration = {
+    "paragraphes": [{
+            "title": "expertiseSystemIntegration.paragraphes[0].title",
+            "text": "expertiseSystemIntegration.paragraphes[0].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[1].title",
+            "text": "expertiseSystemIntegration.paragraphes[1].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[2].title",
+            "text": "expertiseSystemIntegration.paragraphes[2].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[3].title",
+            "text": "expertiseSystemIntegration.paragraphes[3].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[4].title",
+            "text": "expertiseSystemIntegration.paragraphes[4].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[5].title",
+            "text": "expertiseSystemIntegration.paragraphes[5].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[6].title",
+            "text": "expertiseSystemIntegration.paragraphes[6].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[7].title",
+            "text": "expertiseSystemIntegration.paragraphes[7].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[8].title",
+            "text": "expertiseSystemIntegration.paragraphes[8].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[9].title",
+            "text": "expertiseSystemIntegration.paragraphes[9].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[10].title",
+            "text": "expertiseSystemIntegration.paragraphes[10].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[11].title",
+            "text": "expertiseSystemIntegration.paragraphes[11].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[12].title",
+            "text": "expertiseSystemIntegration.paragraphes[12].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[13].title",
+            "text": "expertiseSystemIntegration.paragraphes[13].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[14].title",
+            "text": "expertiseSystemIntegration.paragraphes[14].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[15].title",
+            "text": "expertiseSystemIntegration.paragraphes[15].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[16].title",
+            "text": "expertiseSystemIntegration.paragraphes[16].text"
+        },
+        {
+            "title": "expertiseSystemIntegration.paragraphes[17].title",
+            "text": "expertiseSystemIntegration.paragraphes[17].text"
+        }
+    ]
+}
+
 export const expertiseStrategicExpertise = {
 
         "paragraphes" : [{
@@ -409,6 +542,71 @@ export const expertiseStrategicExpertise = {
     ]
 }
 
+export const expertiseLegacyModernisation = {
+    "paragraphes" : [
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[0].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[0].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[1].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[1].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[2].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[2].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[3].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[3].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[4].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[4].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.conclusion",
+            "text" : "expertiseLegacyModernisation.conclusion"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[5].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[5].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[6].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[6].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[7].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[7].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[8].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[8].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[9].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[9].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[10].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[10].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[11].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[11].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[12].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[12].text"
+        },
+        {
+            "title" : "expertiseLegacyModernisation.paragraphes[13].title",
+            "text" : "expertiseLegacyModernisation.paragraphes[13].text"
+        }
+    ]
+}
+
 export const softwareDefinedVehicule = {
     "title" : "softwareDefinedVehicule.title",
     "description" : "softwareDefinedVehicule.description",