From e885a7fdcd63347ae8153cac6e4a1bd8521509ff Mon Sep 17 00:00:00 2001 From: Asma Date: Mon, 23 Jun 2025 09:36:51 +0200 Subject: [PATCH 1/8] :art: added two logos behind the main image --- .../landing/visitor/featured/index.tsx | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/marketing/landing/visitor/featured/index.tsx b/src/components/marketing/landing/visitor/featured/index.tsx index d1bc68ab7..6332aa59f 100644 --- a/src/components/marketing/landing/visitor/featured/index.tsx +++ b/src/components/marketing/landing/visitor/featured/index.tsx @@ -52,13 +52,34 @@ const Featured: React.FC = () => { /> -
+
+ +
+ Logo décoratif gauche +
+ +
+ Logo décoratif droit +
+ {"Équipe From 13b6ec738f3885b92db7204f5936cfb230e7c57a Mon Sep 17 00:00:00 2001 From: Asma Date: Mon, 23 Jun 2025 11:23:32 +0200 Subject: [PATCH 2/8] :heavy_plus_sign: added tonightpass section to the homepage --- .../landing/visitor/tonightpass/index.tsx | 34 +++++++++++++++++++ .../marketing/landing/visitor/index.tsx | 2 ++ 2 files changed, 36 insertions(+) create mode 100644 src/components/marketing/landing/visitor/tonightpass/index.tsx 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..cd6702307 --- /dev/null +++ b/src/components/marketing/landing/visitor/tonightpass/index.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import Link from 'next/link'; +import Image from 'next/image'; + +const Tonightpass: React.FC = () => { + return( +
+ + + +

Tonight Pass,
la billetterie 2.0

+

Réservez votre entrée, entrez rapidement,
restez en contact avec les gens.

+ En quelques clics depuis votre canapé 🛋️ + + + +
+ Showcase Tonight Pass +
+
+ ) +}; + +export default Tonightpass; \ No newline at end of file diff --git a/src/screens/marketing/landing/visitor/index.tsx b/src/screens/marketing/landing/visitor/index.tsx index 29fca6e55..a0e0d2de5 100644 --- a/src/screens/marketing/landing/visitor/index.tsx +++ b/src/screens/marketing/landing/visitor/index.tsx @@ -1,6 +1,7 @@ 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 type { NextPage } from "next"; import React from "react"; @@ -8,6 +9,7 @@ const VisitorLanding: NextPage = () => { return ( <> + From 46da9743353f82a3894fe0073a8fab55e06aa211 Mon Sep 17 00:00:00 2001 From: Asma Date: Mon, 23 Jun 2025 17:02:47 +0200 Subject: [PATCH 3/8] :heavy_plus_sign: added services section to the homepage --- .../landing/visitor/services/index.tsx | 118 ++++++++++++++++++ .../marketing/landing/visitor/index.tsx | 2 + 2 files changed, 120 insertions(+) create mode 100644 src/components/marketing/landing/visitor/services/index.tsx 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..088e69b4c --- /dev/null +++ b/src/components/marketing/landing/visitor/services/index.tsx @@ -0,0 +1,118 @@ +'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 = [ + { + color: '#652599', + title: 'Design UX UI/Branding', + description: + 'Moodboard, maquettage UI complet, prototypage et identité graphique faite maison.', + }, + { + color: '#23cd82', + title: 'Développement Front & Back End', + description: + 'Développement from-scratch côté front (web, app) et back (API, bots).', + }, + { + color: '#ee2400', + title: 'Intégrations Web', + description: + 'Création ou adaptation de projets avec Wordpress, Shopify, Webflow, etc.', + }, +]; + +const Services: React.FC = () => { + const [colorIndex, setColorIndex] = useState(0); + const containerRef = useRef(null); + + useEffect(() => { + const handleScroll = () => { + if (!containerRef.current) return; + + const containerTop = containerRef.current.getBoundingClientRect().top + window.scrollY; + const scrollY = window.scrollY; + const earlyOffset = 25; + const relativeY = scrollY - containerTop + earlyOffset; + + const sectionHeight = 300; + let index = Math.floor(relativeY / sectionHeight); + index = Math.max(0, Math.min(index, colorSets.length - 1)); + + setColorIndex(index); + }; + + window.addEventListener('scroll', handleScroll); + handleScroll(); + + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + const colors = colorSets[colorIndex]; + + return ( +
+ {/* Bloc gauche (texte + bouton) */} +
+

+ Un studio qui combine
+ les savoirs-faire créatifs +

+

+ Nous sommes experts dans nos domaines :
+ développement web, design d'interface, audits ... +

+ + + +
+ + {/* Bloc droite (services) */} +
+

+ Nos projets allient nos compétences afin qu’ils soient resplendissants sur le web. +

+ + {services.map((service, index) => ( +
+
+

{service.title}

+

{service.description}

+
+ ))} +
+
+ ); +}; + +export default Services; diff --git a/src/screens/marketing/landing/visitor/index.tsx b/src/screens/marketing/landing/visitor/index.tsx index a0e0d2de5..9adae6ddf 100644 --- a/src/screens/marketing/landing/visitor/index.tsx +++ b/src/screens/marketing/landing/visitor/index.tsx @@ -2,6 +2,7 @@ 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"; @@ -10,6 +11,7 @@ const VisitorLanding: NextPage = () => { <> + From 558bf709956882ff830e4207e1d508ebee8b1eeb Mon Sep 17 00:00:00 2001 From: Asma Date: Wed, 25 Jun 2025 10:41:12 +0200 Subject: [PATCH 4/8] :heavy_plus_sign: added reviews section to the homepage --- .../landing/visitor/reviews/index.tsx | 118 ++++++++++++++++++ .../marketing/landing/visitor/index.tsx | 2 + tailwind.config.ts | 2 + 3 files changed, 122 insertions(+) create mode 100644 src/components/marketing/landing/visitor/reviews/index.tsx 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..49e532fef --- /dev/null +++ b/src/components/marketing/landing/visitor/reviews/index.tsx @@ -0,0 +1,118 @@ +import React from 'react'; +import Image from 'next/image'; + +// 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", +avatar: "/favicon-32x32.png" + }, + { +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", +avatar: "/favicon-32x32.png" + }, + { +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", +avatar: "/favicon-32x32.png" + } +]; + +const Reviews: React.FC = () => { +return ( +
+
+ +{/* Titre sticky qui reste derrière les commentaires */} +
+

+ Ce que nos experts disent de nous. +

+

+ On ne les a pas du tout forcés à parler. +

+
+ +{/* Grille des avis qui défile devant le titre */} +
+{reviewsData.map((review, index) => { +const getTransform = (index: number) => { +switch (index) { +case 0: return 'translate-y-0'; +case 1: return 'translate-y-[30rem]'; +case 2: return 'translate-y-32'; +default: return 'translate-y-0'; + } + }; + +return ( +
+
+

+ "{review.text}" +

+
+ +
+ +
+

+{review.author} +

+

+{review.role} +

+
+
+
+ ); + })} +
+ +{/* Spacer pour que les cartes aient assez d'espace ET pour révéler le titre à la fin */} +
+ +
+ +{/* Témoignage Lucas Bodin */} +
+
+ +
+

+"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." +

+

+Lucas Bodin, Head of Design @ onRuntime Studio +

+
+
+
+
+ ); + }; + +export default Reviews; \ No newline at end of file diff --git a/src/screens/marketing/landing/visitor/index.tsx b/src/screens/marketing/landing/visitor/index.tsx index 9adae6ddf..2a98a3e7e 100644 --- a/src/screens/marketing/landing/visitor/index.tsx +++ b/src/screens/marketing/landing/visitor/index.tsx @@ -5,6 +5,7 @@ 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"; const VisitorLanding: NextPage = () => { return ( @@ -13,6 +14,7 @@ const VisitorLanding: NextPage = () => { + ); 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; + + From 253c8045305e2e963d174d8c5d5b41dd411de7ae Mon Sep 17 00:00:00 2001 From: Asma Date: Wed, 25 Jun 2025 11:15:22 +0200 Subject: [PATCH 5/8] :white_check_mark: update logo homepage --- .../landing/visitor/featured/index.tsx | 64 +++++++++++++++---- 1 file changed, 50 insertions(+), 14 deletions(-) diff --git a/src/components/marketing/landing/visitor/featured/index.tsx b/src/components/marketing/landing/visitor/featured/index.tsx index 6332aa59f..94d6bfc95 100644 --- a/src/components/marketing/landing/visitor/featured/index.tsx +++ b/src/components/marketing/landing/visitor/featured/index.tsx @@ -55,23 +55,59 @@ const Featured: React.FC = () => {
- Logo décoratif gauche + + + + + + + + + + + + + + + + + +
- Logo décoratif droit + + + + + + + + + + + + + + + + + +
Date: Wed, 25 Jun 2025 12:12:06 +0200 Subject: [PATCH 6/8] :white_check_mark: update button on tonightpass section --- .../landing/visitor/tonightpass/index.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/marketing/landing/visitor/tonightpass/index.tsx b/src/components/marketing/landing/visitor/tonightpass/index.tsx index cd6702307..8d2d6a82a 100644 --- a/src/components/marketing/landing/visitor/tonightpass/index.tsx +++ b/src/components/marketing/landing/visitor/tonightpass/index.tsx @@ -5,11 +5,13 @@ import Image from 'next/image'; const Tonightpass: React.FC = () => { return(
- - - +
+ + + +

Tonight Pass,
la billetterie 2.0

Réservez votre entrée, entrez rapidement,
restez en contact avec les gens.

En quelques clics depuis votre canapé 🛋️ @@ -31,4 +33,4 @@ const Tonightpass: React.FC = () => { ) }; -export default Tonightpass; \ No newline at end of file +export default Tonightpass; From 17584181e342dd89a2153f698571ae5a919ef19c Mon Sep 17 00:00:00 2001 From: Asma Date: Wed, 25 Jun 2025 15:06:40 +0200 Subject: [PATCH 7/8] :white_check_mark: update reviews page --- .vscode/settings.json | 37 +++ .../landing/visitor/reviews/index.tsx | 220 +++++++++--------- 2 files changed, 150 insertions(+), 107 deletions(-) create mode 100644 .vscode/settings.json 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/src/components/marketing/landing/visitor/reviews/index.tsx b/src/components/marketing/landing/visitor/reviews/index.tsx index 49e532fef..d5b12a1fd 100644 --- a/src/components/marketing/landing/visitor/reviews/index.tsx +++ b/src/components/marketing/landing/visitor/reviews/index.tsx @@ -1,118 +1,124 @@ -import React from 'react'; -import Image from 'next/image'; +import React from "react"; +import Image from "next/image"; // 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", -avatar: "/favicon-32x32.png" - }, - { -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", -avatar: "/favicon-32x32.png" - }, - { -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", -avatar: "/favicon-32x32.png" - } + { + 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", + avatar: "/favicon-32x32.png", + }, + { + 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", + avatar: "/favicon-32x32.png", + }, + { + 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", + avatar: "/favicon-32x32.png", + }, ]; const Reviews: React.FC = () => { -return ( -
-
+ return ( +
+
+ {/* Titre sticky qui reste derrière les commentaires */} +
+

+ Ce que nos experts disent de nous. +

+

+ On ne les a pas du tout forcés à parler. +

+
-{/* Titre sticky qui reste derrière les commentaires */} -
-

- Ce que nos experts disent de nous. -

-

- On ne les a pas du tout forcés à parler. -

-
+ {/* Grille des avis qui défile devant le titre */} +
+ {reviewsData.map((review, index) => { + const getTransform = (index: number) => { + switch (index) { + case 0: + return "translate-y-0"; + case 1: + return "translate-y-[30rem]"; + case 2: + return "translate-y-32"; + default: + return "translate-y-0"; + } + }; -{/* Grille des avis qui défile devant le titre */} -
-{reviewsData.map((review, index) => { -const getTransform = (index: number) => { -switch (index) { -case 0: return 'translate-y-0'; -case 1: return 'translate-y-[30rem]'; -case 2: return 'translate-y-32'; -default: return 'translate-y-0'; - } - }; + return ( +
+
+

+ “{review.text}” +

+
+
+ {`Photo +
+

+ {review.author} +

+

{review.role}

+
+
+
+ ); + })} +
-return ( -
-
-

- "{review.text}" -

-
+ {/* Spacer pour que les cartes aient assez d'espace ET pour révéler le titre à la fin */} +
+
-
- -
-

-{review.author} -

-

-{review.role} -

-
-
- - ); - })} -
+ {/* Témoignage Lucas Bodin */} +
+
+ Photo Lucas +
+

+ “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.” +

+

+ Lucas Bodin, Head of Design @{" "} + onRuntime Studio +

+
+
+
+
+ ); +}; -{/* Spacer pour que les cartes aient assez d'espace ET pour révéler le titre à la fin */} -
- -
- -{/* Témoignage Lucas Bodin */} -
-
- -
-

-"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." -

-

-Lucas Bodin, Head of Design @ onRuntime Studio -

-
-
-
-
- ); - }; - -export default Reviews; \ No newline at end of file +export default Reviews; From b42e748d36810a104c8228dda1dcf67520b5c4ed Mon Sep 17 00:00:00 2001 From: Asma Date: Fri, 27 Jun 2025 11:21:30 +0200 Subject: [PATCH 8/8] :white_check_mark: improve responsive on visitor page --- src/app/layout.tsx | 2 +- .../marketing/landing/testimonial/index.tsx | 50 +++++ .../landing/visitor/featured/index.tsx | 189 ++++++++++++------ .../landing/visitor/reviews/index.tsx | 74 +++---- .../landing/visitor/services/index.tsx | 99 +++++---- .../landing/visitor/tonightpass/index.tsx | 69 ++++--- 6 files changed, 307 insertions(+), 176 deletions(-) create mode 100644 src/components/marketing/landing/testimonial/index.tsx 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/marketing/landing/testimonial/index.tsx b/src/components/marketing/landing/testimonial/index.tsx new file mode 100644 index 000000000..b7bb84bbe --- /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 = ({ + quote, + author, + role, + company, + imageSrc, + imageAlt = `Photo ${author}`, +}) => { + return ( +
+
+ {/* Image - centrée sur mobile, à gauche sur desktop */} +
+ {imageAlt} +
+ + {/* Contenu texte */} +
+

+ “{quote}” +

+

+ {author}, {role} @{" "} + {company} +

+
+
+
+ ); +}; + +export default Testimonial; diff --git a/src/components/marketing/landing/visitor/featured/index.tsx b/src/components/marketing/landing/visitor/featured/index.tsx index 94d6bfc95..49fd30c7e 100644 --- a/src/components/marketing/landing/visitor/featured/index.tsx +++ b/src/components/marketing/landing/visitor/featured/index.tsx @@ -53,62 +53,131 @@ const Featured: React.FC = () => {
+ {/* SVG décoratif gauche - visible uniquement desktop */} +
+ + + + + + + + + + + + + + + + + + +
-
- - - - - - - - - - - - - - - - - - -
- -
- - - - - - - - - - - - - - - - - - -
+ {/* SVG décoratif droite - visible uniquement desktop */} +
+ + + + + + + + + + + + + + + + + + +
{ 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'une tasse de café ☕️ pour - discuter, jouer et surtout créer des projets. + nous retrouver autour d'une tasse de café ☕️ pour discuter, + jouer et surtout créer des projets.

- +
diff --git a/src/components/marketing/landing/visitor/reviews/index.tsx b/src/components/marketing/landing/visitor/reviews/index.tsx index d5b12a1fd..532f02f4b 100644 --- a/src/components/marketing/landing/visitor/reviews/index.tsx +++ b/src/components/marketing/landing/visitor/reviews/index.tsx @@ -1,5 +1,6 @@ import React from "react"; import Image from "next/image"; +import Testimonial from "../../testimonial"; // Données extraites pour éviter la répétition const reviewsData = [ @@ -28,29 +29,29 @@ const reviewsData = [ const Reviews: React.FC = () => { return ( -
+
{/* Titre sticky qui reste derrière les commentaires */} -
-

+
+

Ce que nos experts disent de nous.

-

+

On ne les a pas du tout forcés à parler.

{/* Grille des avis qui défile devant le titre */} -
+
{reviewsData.map((review, index) => { const getTransform = (index: number) => { switch (index) { case 0: return "translate-y-0"; case 1: - return "translate-y-[30rem]"; + return "sm:translate-y-8 md:translate-y-[30rem]"; // Moins de décalage sur mobile case 2: - return "translate-y-32"; + return "sm:translate-y-4 md:translate-y-32"; // Moins de décalage sur mobile default: return "translate-y-0"; } @@ -59,26 +60,28 @@ const Reviews: React.FC = () => { return (
-
-

+

+

“{review.text}”

-
+
{`Photo -
-

+
+

{review.author}

-

{review.role}

+

+ {review.role} +

@@ -86,37 +89,18 @@ const Reviews: React.FC = () => { })}
- {/* Spacer pour que les cartes aient assez d'espace ET pour révéler le titre à la fin */} -
+ {/* Spacer responsive */} +
{/* Témoignage Lucas Bodin */} -
-
- Photo Lucas -
-

- “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.” -

-

- Lucas Bodin, Head of Design @{" "} - onRuntime Studio -

-
-
-
+

); }; diff --git a/src/components/marketing/landing/visitor/services/index.tsx b/src/components/marketing/landing/visitor/services/index.tsx index 088e69b4c..95cce3826 100644 --- a/src/components/marketing/landing/visitor/services/index.tsx +++ b/src/components/marketing/landing/visitor/services/index.tsx @@ -1,83 +1,97 @@ -'use client'; +"use client"; -import React, { useEffect, useRef, useState } from 'react'; -import Link from 'next/link'; +import React, { useEffect, useRef, useState } from "react"; +import Link from "next/link"; const colorSets = [ { - text: 'text-black', - button: 'bg-black text-white', + text: "text-black", + button: "bg-black text-white", }, { - text: 'text-[#652599]', - button: 'bg-[#652599] text-white', + text: "text-[#652599]", + button: "bg-[#652599] text-white", }, { - text: 'text-[#23cd82]', - button: 'bg-[#23cd82] text-white', + text: "text-[#23cd82]", + button: "bg-[#23cd82] text-white", }, { - text: 'text-[#ee2400]', - button: 'bg-[#ee2400] text-white', + text: "text-[#ee2400]", + button: "bg-[#ee2400] text-white", }, ]; const services = [ { - color: '#652599', - title: 'Design UX UI/Branding', + color: "#652599", + title: "Design UX UI/Branding", description: - 'Moodboard, maquettage UI complet, prototypage et identité graphique faite maison.', + "Chacun de nos projets à son moodboard, et son maquettage UI complet et prototypé. Même leurs identités graphiques sont faites maisons.", }, { - color: '#23cd82', - title: 'Développement Front & Back End', + color: "#23cd82", + title: "Développement Front & Back End", description: - 'Développement from-scratch côté front (web, app) et back (API, bots).', + "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).", }, { - color: '#ee2400', - title: 'Intégrations Web', + color: "#ee2400", + title: "Intégrations Web", description: - 'Création ou adaptation de projets avec Wordpress, Shopify, Webflow, etc.', + "Selon les besoins de nos projets, nous pouvons les créer ou les modifier via des intégrations comme Wordpress, Shopify, Webflow, etc.", }, ]; const Services: React.FC = () => { const [colorIndex, setColorIndex] = useState(0); + const [isMobile, setIsMobile] = useState(false); const containerRef = useRef(null); useEffect(() => { + setIsMobile(window.innerWidth < 768); + const handleScroll = () => { - if (!containerRef.current) return; + if (!containerRef.current || isMobile) return; - const containerTop = containerRef.current.getBoundingClientRect().top + window.scrollY; + const containerTop = + containerRef.current.getBoundingClientRect().top + window.scrollY; const scrollY = window.scrollY; - const earlyOffset = 25; + const earlyOffset = 25; const relativeY = scrollY - containerTop + earlyOffset; - const sectionHeight = 300; + const sectionHeight = 300; let index = Math.floor(relativeY / sectionHeight); index = Math.max(0, Math.min(index, colorSets.length - 1)); setColorIndex(index); }; - window.addEventListener('scroll', handleScroll); - handleScroll(); + window.addEventListener("scroll", handleScroll); + handleScroll(); - return () => window.removeEventListener('scroll', handleScroll); - }, []); + return () => window.removeEventListener("scroll", handleScroll); + }, [isMobile]); - const colors = colorSets[colorIndex]; + const colors = isMobile ? colorSets[0] : colorSets[colorIndex]; return ( -
- {/* Bloc gauche (texte + bouton) */} -
-

+
+ {/* Bloc gauche */} +
+

Un studio qui combine
les savoirs-faire créatifs

@@ -87,24 +101,25 @@ const Services: React.FC = () => {

- {/* Bloc droite (services) */} -
+ {/* Bloc droite */} +

- Nos projets allient nos compétences afin qu’ils soient resplendissants sur le web. + Nos projets allient nos compétences afin qu’ils soient resplendissants + sur le web.

{services.map((service, index) => ( -
+

{service.title}

{service.description}

diff --git a/src/components/marketing/landing/visitor/tonightpass/index.tsx b/src/components/marketing/landing/visitor/tonightpass/index.tsx index 8d2d6a82a..bce7d7edb 100644 --- a/src/components/marketing/landing/visitor/tonightpass/index.tsx +++ b/src/components/marketing/landing/visitor/tonightpass/index.tsx @@ -1,36 +1,45 @@ import React from "react"; -import Link from 'next/link'; -import Image from 'next/image'; +import Link from "next/link"; +import Image from "next/image"; const Tonightpass: React.FC = () => { - return( -
-
- - - -
-

Tonight Pass,
la billetterie 2.0

-

Réservez votre entrée, entrez rapidement,
restez en contact avec les gens.

- En quelques clics depuis votre canapé 🛋️ - - - -
- Showcase Tonight Pass -
-
- ) + return ( +
+
+ + + +
+

+ Tonight Pass,
la billetterie 2.0 +

+

+ Réservez votre entrée, entrez rapidement,
+ restez en contact avec les gens. +

+ + En quelques clics depuis votre canapé 🛋️ + + + + +
+ {" "} + {/* mb-4 au lieu de mb-8, padding mobile */} + Showcase Tonight Pass +
+
+ ); }; export default Tonightpass;