Update homepage visitor

.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,
+  }

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({

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>

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;

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>
 

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}>