From e885a7fdcd63347ae8153cac6e4a1bd8521509ff Mon Sep 17 00:00:00 2001 From: Asma Date: Mon, 23 Jun 2025 09:36:51 +0200 Subject: [PATCH 1/7] :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/7] :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/7] :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/7] :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/7] :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/7] :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/7] :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;