diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..74c9bc999
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,37 @@
+{
+    // - Git
+    "git.autofetch": true,
+  
+    // - TypeScript
+    "typescript.updateImportsOnFileMove.enabled": "always",
+  
+    // - Actions on save
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "always"
+    },
+  
+    // - Lint and format
+    "editor.formatOnSave": true,
+    "eslint.format.enable": true,
+    "eslint.validate": [
+      "javascript"
+    ],
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescriptreact]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[json]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[css]": {
+      "editor.defaultFormatter": "stylelint.vscode-stylelint"
+    },
+  
+    // - Common
+    "editor.tabSize": 2,
+  }
\ No newline at end of file
diff --git a/public/services-img.png b/public/services-img.png
new file mode 100644
index 000000000..845561c2a
Binary files /dev/null and b/public/services-img.png differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 58e3051d2..f5743222b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,7 +9,7 @@ import { Provider } from "react-wrap-balancer";
 import Footer from "@/components/layout/footer/footer";
 import Script from "next/script";
 import { Toaster } from "@/components/ui/toaster";
-import { Figtree } from "next/font/google"
+import { Figtree } from "next/font/google";
 import { OrganizationSchema } from "@/components/json-ld/organization-schema";
 
 export const figtree = Figtree({
diff --git a/src/components/layout/footer/footer.tsx b/src/components/layout/footer/footer.tsx
index 57bb8e8e9..ec111dad4 100644
--- a/src/components/layout/footer/footer.tsx
+++ b/src/components/layout/footer/footer.tsx
@@ -19,7 +19,7 @@ const navigation = {
   ["Autres"]: [
     { name: "Contact", href: Routes.contact },
     { name: "Conditions générales", href: Routes.legals.terms },
-    { name: "Politique de confidentialité", href: Routes.legals.privacy }, 
+    { name: "Politique de confidentialité", href: Routes.legals.privacy },
     { name: "Détails de l'entreprise", href: Routes.legals.company },
   ],
   ["Réseaux sociaux"]: [
@@ -36,7 +36,7 @@ const Footer: React.FC = () => {
 
   return (
     <footer className={"pb-24 pt-10 md:pt-20 border-t w-full border-border"}>
-      <div className={"px-4 md:px-0 max-w-5xl text-xs md:text-sm mx-auto"}>
+      <div className={"px-4 md:px-4 max-w-5xl text-xs md:text-sm mx-auto"}>
         <div className="flex flex-col md:flex-row justify-between md:items-start gap-8">
           <div className="flex flex-col items-start gap-5">
             <OnRuntimeWordMark height={24} className="h-6" />
@@ -58,7 +58,16 @@ const Footer: React.FC = () => {
                 <ul className="flex flex-col gap-3">
                   {links.map((link) => (
                     <li key={link.name}>
-                      <Link href={link.href} className="text-foreground" target={link.href.startsWith("http") ? "_blank" : ""} rel={link.href.startsWith("http") ? "noopener noreferrer" : ""}>
+                      <Link
+                        href={link.href}
+                        className="text-foreground"
+                        target={link.href.startsWith("http") ? "_blank" : ""}
+                        rel={
+                          link.href.startsWith("http")
+                            ? "noopener noreferrer"
+                            : ""
+                        }
+                      >
                         {link.name}
                       </Link>
                     </li>
diff --git a/src/components/marketing/landing/testimonial/index.tsx b/src/components/marketing/landing/testimonial/index.tsx
new file mode 100644
index 000000000..41a5a6148
--- /dev/null
+++ b/src/components/marketing/landing/testimonial/index.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import Image from "next/image";
+
+export interface TestimonialProps {
+  quote: string;
+  author: string;
+  role: string;
+  company: string;
+  imageSrc: string;
+  imageAlt?: string;
+}
+
+const Testimonial: React.FC<TestimonialProps> = ({
+  quote,
+  author,
+  role,
+  company,
+  imageSrc,
+  imageAlt = `Photo ${author}`,
+}) => {
+  return (
+    <section className="max-w-7xl mx-auto px-4 py-8 md:py-16">
+      <div className="flex flex-col md:flex-row justify-center items-center gap-8 md:gap-16 max-w-5xl mx-auto">
+        {/* Image - centrée sur mobile, à gauche sur desktop */}
+        <div className="flex-shrink-0 order-1 md:order-none">
+          <Image
+            src={imageSrc}
+            alt={imageAlt}
+            width={200}
+            height={200}
+            className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-[200px] lg:h-[200px] rounded-lg rotate-[-10deg] md:rotate-[-15deg] shadow-lg bg-white px-2 pt-2 pb-4 md:pb-6 transition-all duration-300 ease-in-out hover:rotate-0 hover:scale-105 mx-auto md:mx-0 object-cover"
+          />
+        </div>
+
+        {/* Contenu texte */}
+        <div className="flex-1 text-center md:text-left order-2 md:order-none">
+          <p className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-medium text-black leading-relaxed mb-4 md:mb-6">
+            &ldquo;{quote}&rdquo;
+          </p>
+          <p className="text-base md:text-lg text-gray-600">
+            <span className="font-semibold">{author}</span>, {role} @{" "}
+            <strong className="text-black">{company}</strong>
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Testimonial;
diff --git a/src/components/marketing/landing/visitor/featured/index.tsx b/src/components/marketing/landing/visitor/featured/index.tsx
index d1bc68ab7..dd9a2605b 100644
--- a/src/components/marketing/landing/visitor/featured/index.tsx
+++ b/src/components/marketing/landing/visitor/featured/index.tsx
@@ -12,7 +12,7 @@ import Link from "next/link";
 const Featured: React.FC = () => {
   return (
     <header className="bg-gradient-to-t from-onruntime-blue/10 to-transparent">
-      <div className="px-4 md:px-0 py-16 flex flex-col justify-center items-center max-w-5xl mx-auto">
+      <div className="px-4 md:px-8 py-16 flex flex-col justify-center items-center max-w-5xl mx-auto">
         <div className="relative max-w-xl flex flex-col items-center gap-6">
           <h1 className="font-semibold text-5xl md:text-6xl text-foreground text-center">
             <Balancer>
@@ -52,18 +52,144 @@ const Featured: React.FC = () => {
           />
         </div>
 
-        <div className="relative mt-12 rounded-sm overflow-hidden">
+        <div className="relative mt-12 rounded-sm">
+          {/* SVG décoratif gauche - visible uniquement desktop */}
+          <div className="absolute -top-20 left-20 z-[-10] pointer-events-none hidden md:block">
+            <svg
+              width="150"
+              height="150"
+              viewBox="0 0 171 171"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="rotate-[-15deg]"
+            >
+              <g filter="url(#filter0_d_2071_266)">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M55.2564 52.8785C44.3091 56.2504 38.168 67.8584 41.5399 78.8057L52.8784 115.618C56.2503 126.565 67.8583 132.706 78.8055 129.334L115.617 117.995C126.565 114.624 132.706 103.016 129.334 92.0684L117.995 55.2565C114.623 44.3092 103.016 38.1682 92.0683 41.54L55.2564 52.8785ZM93.7871 63.9959C90.8942 62.4654 87.3083 63.5699 85.7779 66.4628L69.9428 96.3946C68.4124 99.2875 69.5168 102.873 72.4097 104.404L77.0866 106.878C79.9795 108.409 83.5653 107.304 85.0958 104.411L100.931 74.4793C102.461 71.5864 101.357 68.0005 98.4639 66.4701L93.7871 63.9959Z"
+                  fill="#111111"
+                />
+                <path
+                  d="M90.5104 36.4805C104.252 32.2483 118.822 39.9572 123.055 53.6986L134.393 90.5105C138.626 104.252 130.917 118.823 117.175 123.055L80.3643 134.393C66.6227 138.626 52.0514 130.917 47.8189 117.175L36.4804 80.3635C32.2481 66.6221 39.957 52.0515 53.6985 47.819L90.5104 36.4805ZM91.3109 68.6752C91.0026 68.5124 90.62 68.63 90.4569 68.9382L74.6219 98.8701C74.4588 99.1783 74.5768 99.5607 74.8849 99.724L79.5626 102.198C79.871 102.361 80.2524 102.244 80.4156 101.935L96.2516 72.0031C96.4143 71.6947 96.2968 71.3122 95.9886 71.1491L91.3109 68.6752Z"
+                  stroke="#F7F7F7"
+                  strokeWidth="10.5882"
+                />
+              </g>
+              <defs>
+                <filter
+                  id="filter0_d_2071_266"
+                  x="0.0244141"
+                  y="0.0245361"
+                  width="170.825"
+                  height="170.825"
+                  filterUnits="userSpaceOnUse"
+                  colorInterpolationFilters="sRGB"
+                >
+                  <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                  <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha"
+                  />
+                  <feOffset />
+                  <feGaussianBlur stdDeviation="15" />
+                  <feComposite in2="hardAlpha" operator="out" />
+                  <feColorMatrix
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in2="BackgroundImageFix"
+                    result="effect1_dropShadow_2071_266"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in="SourceGraphic"
+                    in2="effect1_dropShadow_2071_266"
+                    result="shape"
+                  />
+                </filter>
+              </defs>
+            </svg>
+          </div>
+
+          {/* SVG décoratif droite - visible uniquement desktop */}
+          <div className="absolute -top-20 right-20 z-[-10] pointer-events-none hidden md:block">
+            <svg
+              width="150"
+              height="150"
+              viewBox="0 0 174 174"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="rotate-[-15deg]"
+            >
+              <g filter="url(#filter0_d_2071_267)">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M84.9995 42.6393C74.4663 38.1378 62.2783 43.0274 57.7767 53.5605L42.6395 88.9801C38.1379 99.5133 43.0275 111.701 53.5607 116.203L88.9802 131.34C99.5134 135.842 111.701 130.952 116.203 120.419L131.34 84.9994C135.842 74.4662 130.952 62.2781 120.419 57.7765L84.9995 42.6393ZM107.219 76.0239C106 72.9864 102.55 71.5119 99.5123 72.7305L68.0846 85.3386C65.0471 86.5572 63.5726 90.0074 64.7912 93.0449L66.7612 97.9554C67.9798 100.993 71.43 102.467 74.4675 101.249L105.895 88.6407C108.933 87.4222 110.407 83.9719 109.189 80.9345L107.219 76.0239Z"
+                  fill="#2294FF"
+                />
+                <path
+                  d="M122.5 52.9087C135.721 58.5595 141.859 73.8586 136.208 87.0803L121.071 122.5C115.42 135.721 100.121 141.858 86.8993 136.208L51.4807 121.071C38.2589 115.421 32.121 100.121 37.7716 86.8992L52.9089 51.4797C58.5596 38.2581 73.8587 32.121 87.0804 37.7715L122.5 52.9087ZM102.305 77.9945C102.175 77.6711 101.807 77.5135 101.483 77.6434L70.0555 90.2515C69.7319 90.3814 69.5749 90.7494 69.7044 91.0732L71.6753 95.984C71.8052 96.3079 72.1722 96.4647 72.496 96.3348L103.925 83.727C104.248 83.5969 104.406 83.229 104.276 82.9054L102.305 77.9945Z"
+                  stroke="#F7F7F7"
+                  strokeWidth="10.5882"
+                />
+              </g>
+              <defs>
+                <filter
+                  id="filter0_d_2071_267"
+                  x="0.374512"
+                  y="0.37439"
+                  width="173.231"
+                  height="173.231"
+                  filterUnits="userSpaceOnUse"
+                  colorInterpolationFilters="sRGB"
+                >
+                  <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                  <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha"
+                  />
+                  <feOffset />
+                  <feGaussianBlur stdDeviation="15" />
+                  <feComposite in2="hardAlpha" operator="out" />
+                  <feColorMatrix
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in2="BackgroundImageFix"
+                    result="effect1_dropShadow_2071_267"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in="SourceGraphic"
+                    in2="effect1_dropShadow_2071_267"
+                    result="shape"
+                  />
+                </filter>
+              </defs>
+            </svg>
+          </div>
+
           <Image
             src={"/static/images/onruntime-team.jpg"}
             alt={"Équipe onRuntime Studio"}
             width={1024}
             height={510}
-            className="z-[-1] max-h-[510px] object-cover"
+            className="relative z-0 max-h-[510px] object-cover rounded-[15px]"
             priority
             sizes="100vw"
           />
 
-          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end items-center p-5 md:p-10 gap-5">
+          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end items-center p-5 md:p-10 gap-5 rounded-b-lg">
             <Image
               className="hidden md:block self-start"
               src={"/static/images/quotes.png"}
@@ -79,12 +205,16 @@ const Featured: React.FC = () => {
                 intéressés par les nouvelles technologies et le monde de la
                 création (design, musique, etc.). À partir de là nous avons créé
                 un Studio et une communauté autour de celui-ci, nous adorons
-                nous retrouver autour d&apos;une tasse de café ☕️ pour
-                discuter, jouer et surtout créer des projets.
+                nous retrouver autour d&apos;une tasse de café ☕️ pour discuter,
+                jouer et surtout créer des projets.
               </Balancer>
             </p>
 
-            <OnRuntimeWordMark fill="white" height={24} className="self-end h-6" />
+            <OnRuntimeWordMark
+              fill="white"
+              height={24}
+              className="self-end h-6"
+            />
           </div>
         </div>
 
diff --git a/src/components/marketing/landing/visitor/projects/index.tsx b/src/components/marketing/landing/visitor/projects/index.tsx
index 238ef6451..0350ed04e 100644
--- a/src/components/marketing/landing/visitor/projects/index.tsx
+++ b/src/components/marketing/landing/visitor/projects/index.tsx
@@ -8,7 +8,7 @@ import Routes from "@/constants/routes";
 
 const Projects: React.FC = () => {
   return (
-    <section className="px-4 md:px-0 py-24 flex flex-col gap-9 max-w-5xl mx-auto">
+    <section className="px-4 md:px-4 py-24 flex flex-col gap-9 max-w-5xl mx-auto">
       <div className="flex justify-between items-center">
         <h2 className="text-muted-foreground">Nos derniers projets</h2>
         <Link href={Routes.projects}>
diff --git a/src/components/marketing/landing/visitor/reviews/index.tsx b/src/components/marketing/landing/visitor/reviews/index.tsx
new file mode 100644
index 000000000..6eec66050
--- /dev/null
+++ b/src/components/marketing/landing/visitor/reviews/index.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+
+// Données extraites pour éviter la répétition
+const reviewsData = [
+  {
+    id: 1,
+    text: "Composé de talents variés, allant de développeurs à des designers passionnés. Chacun apporte sa touche unique à nos projets. Ensemble, nous formons un collectif où l'innovation est au cœur de tout ce que nous entreprenons.",
+    author: "Cécile Pislor",
+    role: "CEO @ DroitAuCoeurCoaching",
+  },
+  {
+    id: 2,
+    text: "Composé de talents variés, allant de développeurs à des designers passionnés. Chacun apporte sa touche unique à nos projets. Ensemble, nous formons un collectif où l'innovation est au cœur de tout ce que nous entreprenons.",
+    author: "Cécile Pislor",
+    role: "CEO @ DroitAuCoeurCoaching",
+  },
+  {
+    id: 3,
+    text: "Composé de talents variés, allant de développeurs à des designers passionnés. Chacun apporte sa touche unique à nos projets. Ensemble, nous formons un collectif où l'innovation est au cœur de tout ce que nous entreprenons.",
+    author: "Cécile Pislor",
+    role: "CEO @ DroitAuCoeurCoaching",
+  },
+];
+
+const Reviews: React.FC = () => {
+  return (
+    <section className="pt-[4em] md:pt-[5em] py-8 md:py-16 px-4 relative min-h-screen">
+      <div className="max-w-7xl mx-auto relative">
+        {/* Titre sticky */}
+        <div className="sticky top-16 md:top-20 text-center z-0 mb-8 md:mb-16">
+          <h2 className="text-black font-semibold text-2xl sm:text-3xl md:text-4xl mb-2 md:mb-4 pointer-events-none px-4">
+            Ce que nos experts disent de nous.
+          </h2>
+          <p className="text-gray-600 text-base md:text-lg pointer-events-none px-4">
+            On ne les a pas du tout forcés à parler.
+          </p>
+        </div>
+
+        {/* Grille des avis */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8 relative z-10">
+          {reviewsData.map((review, index) => {
+            const getTransform = (index: number) => {
+              switch (index) {
+                case 0:
+                  return "translate-y-0";
+                case 1:
+                  return "sm:translate-y-8 md:translate-y-[30rem]";
+                case 2:
+                  return "sm:translate-y-4 md:translate-y-32";
+                default:
+                  return "translate-y-0";
+              }
+            };
+
+            return (
+              <article
+                key={review.id}
+                className={`bg-white rounded-lg p-4 sm:p-5 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 ${getTransform(index)} z-10 relative`}
+              >
+                <blockquote className="mb-4 md:mb-6">
+                  <p className="text-gray-700 italic leading-relaxed text-sm sm:text-base">
+                    &ldquo;{review.text}&rdquo;
+                  </p>
+                </blockquote>
+                <div className="flex items-center gap-3 md:gap-4">
+                  <div className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 flex-shrink-0">
+                    <svg
+                      viewBox="0 0 171 171"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="w-full h-full"
+                    >
+                      <g filter="url(#filter0_d_2071_266)">
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M55.2564 52.8785C44.3091 56.2504 38.168 67.8584 41.5399 78.8057L52.8784 115.618C56.2503 126.565 67.8583 132.706 78.8055 129.334L115.617 117.995C126.565 114.624 132.706 103.016 129.334 92.0684L117.995 55.2565C114.623 44.3092 103.016 38.1682 92.0683 41.54L55.2564 52.8785ZM93.7871 63.9959C90.8942 62.4654 87.3083 63.5699 85.7779 66.4628L69.9428 96.3946C68.4124 99.2875 69.5168 102.873 72.4097 104.404L77.0866 106.878C79.9795 108.409 83.5653 107.304 85.0958 104.411L100.931 74.4793C102.461 71.5864 101.357 68.0005 98.4639 66.4701L93.7871 63.9959Z"
+                          fill="#111111"
+                        />
+                        <path
+                          d="M90.5104 36.4805C104.252 32.2483 118.822 39.9572 123.055 53.6986L134.393 90.5105C138.626 104.252 130.917 118.823 117.175 123.055L80.3643 134.393C66.6227 138.626 52.0514 130.917 47.8189 117.175L36.4804 80.3635C32.2481 66.6221 39.957 52.0515 53.6985 47.819L90.5104 36.4805ZM91.3109 68.6752C91.0026 68.5124 90.62 68.63 90.4569 68.9382L74.6219 98.8701C74.4588 99.1783 74.5768 99.5607 74.8849 99.724L79.5626 102.198C79.871 102.361 80.2524 102.244 80.4156 101.935L96.2516 72.0031C96.4143 71.6947 96.2968 71.3122 95.9886 71.1491L91.3109 68.6752Z"
+                          stroke="#F7F7F7"
+                          strokeWidth="10.5882"
+                        />
+                      </g>
+                      <defs>
+                        <filter
+                          id="filter0_d_2071_266"
+                          x="0.0244141"
+                          y="0.0245361"
+                          width="170.825"
+                          height="170.825"
+                          filterUnits="userSpaceOnUse"
+                          colorInterpolationFilters="sRGB"
+                        >
+                          <feFlood
+                            floodOpacity="0"
+                            result="BackgroundImageFix"
+                          />
+                          <feColorMatrix
+                            in="SourceAlpha"
+                            type="matrix"
+                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                            result="hardAlpha"
+                          />
+                          <feOffset />
+                          <feGaussianBlur stdDeviation="15" />
+                          <feComposite in2="hardAlpha" operator="out" />
+                          <feColorMatrix
+                            type="matrix"
+                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+                          />
+                          <feBlend
+                            mode="normal"
+                            in2="BackgroundImageFix"
+                            result="effect1_dropShadow_2071_266"
+                          />
+                          <feBlend
+                            mode="normal"
+                            in="SourceGraphic"
+                            in2="effect1_dropShadow_2071_266"
+                            result="shape"
+                          />
+                        </filter>
+                      </defs>
+                    </svg>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <h3 className="font-semibold text-base sm:text-lg text-gray-900 truncate">
+                      {review.author}
+                    </h3>
+                    <p className="text-xs sm:text-sm text-gray-600 line-clamp-2">
+                      {review.role}
+                    </p>
+                  </div>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+
+        <div className="h-[2rem] sm:h-[30rem] md:h-[40rem]"></div>
+      </div>
+    </section>
+  );
+};
+
+export default Reviews;
diff --git a/src/components/marketing/landing/visitor/services/index.tsx b/src/components/marketing/landing/visitor/services/index.tsx
new file mode 100644
index 000000000..1ad7f79e3
--- /dev/null
+++ b/src/components/marketing/landing/visitor/services/index.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+
+const colorSets = [
+  {
+    text: "text-black",
+    button: "bg-black text-white",
+  },
+  {
+    text: "text-[#652599]",
+    button: "bg-[#652599] text-white",
+  },
+  {
+    text: "text-[#23cd82]",
+    button: "bg-[#23cd82] text-white",
+  },
+  {
+    text: "text-[#ee2400]",
+    button: "bg-[#ee2400] text-white",
+  },
+];
+
+const services = [
+  {
+    title: "Design UX UI/Branding",
+    description:
+      "Chacun de nos projets à son moodboard, et son maquettage UI complet et prototypé. Même leurs identités graphiques sont faites maisons.",
+  },
+  {
+    title: "Développement Front & Back End",
+    description:
+      "Nous réalisons chacun de nos projets from-scratch avec un développement front (web, app, logiciel) ainsi qu'en profondeur avec le back (api, bots).",
+  },
+  {
+    title: "Intégrations Web",
+    description:
+      "Selon les besoins de nos projets, nous pouvons les créer ou les modifier via des intégrations comme Wordpress, Shopify, Webflow, etc.",
+  },
+];
+
+const PaletteIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="128"
+    height="128"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path>
+    <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
+    <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
+    <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
+    <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
+  </svg>
+);
+
+const CodeIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="128"
+    height="128"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="m16 18 6-6-6-6"></path>
+    <path d="m8 6-6 6 6 6"></path>
+  </svg>
+);
+
+const LayersIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="128"
+    height="128"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path>
+    <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path>
+    <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>
+  </svg>
+);
+
+const Services: React.FC = () => {
+  const [colorIndex, setColorIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const serviceRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    const updateIsMobile = () => setIsMobile(window.innerWidth < 768);
+    updateIsMobile();
+    window.addEventListener("resize", updateIsMobile);
+
+    const handleScroll = () => {
+      if (!containerRef.current || isMobile) return;
+
+      const windowHeight = window.innerHeight;
+      const anticipationDistance = 50;
+
+      let newColorIndex = 0;
+
+      serviceRefs.current.forEach((serviceRef, index) => {
+        if (serviceRef) {
+          const rect = serviceRef.getBoundingClientRect();
+          const serviceTop = rect.top;
+          const triggerPoint = windowHeight / 2 + anticipationDistance;
+
+          if (serviceTop <= triggerPoint && serviceTop > -rect.height) {
+            newColorIndex = index + 1;
+          }
+        }
+      });
+
+      newColorIndex = Math.min(newColorIndex, colorSets.length - 1);
+      setColorIndex(newColorIndex);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+
+    return () => {
+      window.removeEventListener("resize", updateIsMobile);
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [isMobile]);
+
+  const colors = isMobile ? colorSets[0] : colorSets[colorIndex];
+
+  return (
+    <div
+      className="mt-32 flex flex-col md:flex-row justify-center gap-0 md:gap-24 px-16"
+      ref={containerRef}
+    >
+      {/* Bloc gauche */}
+      <div
+        className={`
+          flex flex-col gap-4
+          md:sticky md:top-24 md:self-start
+          transition-all duration-3000ms] md:w-[500px]
+          text-center md:text-left
+          ${colors.text}
+        `}
+        style={{ position: isMobile ? "static" : undefined }}
+      >
+        <h2 className="font-semibold text-2xl md:text-2xl transition-colors duration-[3000ms] ease-out">
+          Un studio qui combine <br />
+          les savoirs-faire créatifs
+        </h2>
+        <p>
+          Nous sommes experts dans nos domaines : <br />
+          développement web, design d&apos;interface, audits ...
+        </p>
+        <Link href="/">
+          <button
+            className={`mt-8 mb-8 px-4 py-2 text-sm rounded-md shadow hover:opacity-80 transition-all duration-[3000ms] ${colors.button} mx-auto md:mx-0`}
+          >
+            En savoir plus
+          </button>
+        </Link>
+      </div>
+
+      {/* Bloc droite */}
+      <div className="w-full max-w-md md:w-[500px]">
+        <p className="mb-8">
+          Nos projets allient nos compétences afin qu&apos;ils soient
+          resplendissants sur le web.
+        </p>
+
+        {services.map((service, index) => (
+          <div
+            key={service.title}
+            className="min-h-[200px] mb-12"
+            ref={(el) => {
+              serviceRefs.current[index] = el;
+            }}
+          >
+            <div
+              className="mb-4 p-6 rounded-xl flex items-center justify-center shadow-lg backdrop-blur-md border border-white/30"
+              style={{
+                minHeight: "150px",
+                background:
+                  "radial-gradient(circle at center, rgba(250,250,255,0.8), rgba(211, 234, 255, 0.4))",
+              }}
+            >
+              {/* Différent SVG pour chaque service */}
+              {index === 0 ? (
+                <PaletteIcon className="w-20 h-20 md:w-24 md:h-24 text-[#b1d9ff] opacity-50" />
+              ) : index === 1 ? (
+                <CodeIcon className="w-20 h-20 md:w-24 md:h-24 text-[#b1d9ff] opacity-50" />
+              ) : (
+                <LayersIcon className="w-20 h-20 md:w-24 md:h-24 text-[#b1d9ff] opacity-50" />
+              )}
+            </div>
+            <h3 className="font-semibold text-2xl">{service.title}</h3>
+            <p className="mb-8">{service.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Services;
diff --git a/src/components/marketing/landing/visitor/team/index.tsx b/src/components/marketing/landing/visitor/team/index.tsx
index 0be6d9092..9c22d4bcc 100644
--- a/src/components/marketing/landing/visitor/team/index.tsx
+++ b/src/components/marketing/landing/visitor/team/index.tsx
@@ -21,7 +21,7 @@ const Team: React.FC = () => {
   ];
 
   return (
-    <section className="px-4 md:px-0 max-w-5xl py-16 mx-auto">
+    <section className="px-4 md:px-4 max-w-5xl py-16 mx-auto">
       <div className="flex flex-col lg:flex-row justify-between items-stretch gap-8">
         <div className="w-full lg:w-1/2">
           <TeamGrid />
@@ -35,8 +35,8 @@ const Team: React.FC = () => {
           <p className="leading-6">
             Composée de talents variés, allant de développeurs à des designers
             passionnés. Chacun apporte sa touche unique à nos projets. Ensemble,
-            nous formons un collectif où l&apos;innovation est au cœur de tout ce que
-            nous entreprenons.
+            nous formons un collectif où l&apos;innovation est au cœur de tout
+            ce que nous entreprenons.
           </p>
 
           <div className="flex flex-row flex-wrap gap-x-16 gap-y-6">
@@ -62,4 +62,4 @@ const Team: React.FC = () => {
   );
 };
 
-export default Team;
\ No newline at end of file
+export default Team;
diff --git a/src/components/marketing/landing/visitor/testimonial/index.tsx b/src/components/marketing/landing/visitor/testimonial/index.tsx
new file mode 100644
index 000000000..f7a77b521
--- /dev/null
+++ b/src/components/marketing/landing/visitor/testimonial/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Testimonial from "../../testimonial";
+
+const LucasTestimonial: React.FC = () => {
+  return (
+    <div className="md:px-4">
+      {/* Témoignage Lucas Bodin */}
+      <Testimonial
+        quote="onRuntime Studio c'est bien plus qu'un simple studio de créateurs. C'est un espace où l'innovation, la collaboration, et la passion se lient pour donner vie à des projets uniques. Nous croyons au pouvoir de l'intelligence collective, où chaque créateur, apporte sa vision afin qu'ensemble, nous transformions des idées en réalités."
+        author="Lucas Bodin"
+        role="Head of Design"
+        company="onRuntime Studio"
+        imageSrc="/static/images/members/lucas-bodin.jpg"
+      />
+    </div>
+  );
+};
+
+export default LucasTestimonial;
diff --git a/src/components/marketing/landing/visitor/tonightpass/index.tsx b/src/components/marketing/landing/visitor/tonightpass/index.tsx
new file mode 100644
index 000000000..e61eabdfd
--- /dev/null
+++ b/src/components/marketing/landing/visitor/tonightpass/index.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+
+const Tonightpass: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center h-auto min-h-full bg-black pt-16 pb-8 md:px-8">
+      <div className="sticky top-20 z-40">
+        <Link href="/projects/tonightpass">
+          <button className="bg-white text-black px-4 py-2 text-sm rounded-md shadow hover:bg-gray-100">
+            Notre success story 🏆
+          </button>
+        </Link>
+      </div>
+      <h2 className="text-white font-semibold text-center mt-8 text-4xl">
+        Tonight Pass, <br /> la billetterie 2.0
+      </h2>
+      <p className="text-white text-center mt-8">
+        Réservez votre entrée, entrez rapidement, <br />
+        restez en contact avec les gens.
+      </p>
+      <strong className="text-white text-center mt-8">
+        En quelques clics depuis votre canapé 🛋️
+      </strong>
+      <Link href="/projects/tonightpass">
+        <button className="mt-8 bg-white text-black px-3 py-1 text-sm rounded-md shadow hover:bg-gray-100">
+          En savoir plus
+        </button>
+      </Link>
+      <div className="w-full max-w-screen-lg mt-8 mb-4 px-4 md:px-0">
+        <Image
+          src="/static/images/projects/tonightpass/showcase.jpg"
+          alt="Showcase Tonight Pass"
+          width={1000}
+          height={800}
+          className="w-full h-auto rounded-md"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Tonightpass;
diff --git a/src/screens/marketing/landing/visitor/index.tsx b/src/screens/marketing/landing/visitor/index.tsx
index 29fca6e55..0bb5979e3 100644
--- a/src/screens/marketing/landing/visitor/index.tsx
+++ b/src/screens/marketing/landing/visitor/index.tsx
@@ -1,14 +1,23 @@
 import Featured from "@/components/marketing/landing/visitor/featured";
 import Projects from "@/components/marketing/landing/visitor/projects";
 import Team from "@/components/marketing/landing/visitor/team";
+import Tonightpass from "@/components/marketing/landing/visitor/tonightpass";
+import Services from "@/components/marketing/landing/visitor/services";
 import type { NextPage } from "next";
 import React from "react";
+// import Reviews from "@/components/marketing/landing/visitor/reviews";
+import LucasTestimonial from "@/components/marketing/landing/visitor/testimonial";
 
 const VisitorLanding: NextPage = () => {
   return (
     <>
       <Featured />
+      <Tonightpass />
+      <Services />
       <Team />
+      {/* <Reviews /> */}
+      {/* TODO: uncomment when real reviews are available */}
+      <LucasTestimonial />
       <Projects />
     </>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 45cdf1039..898876389 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -78,3 +78,5 @@ export default {
 	},
 	plugins: [tailwindcssAnimatePlugin],
 } satisfies Config;
+
+