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/featured/index.tsx b/src/components/marketing/landing/visitor/featured/index.tsx index d1bc68ab7..94d6bfc95 100644 --- a/src/components/marketing/landing/visitor/featured/index.tsx +++ b/src/components/marketing/landing/visitor/featured/index.tsx @@ -52,13 +52,70 @@ const Featured: React.FC = () => { /> -
+
+ +
+ + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + +
+ {"Équipe 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..d5b12a1fd --- /dev/null +++ b/src/components/marketing/landing/visitor/reviews/index.tsx @@ -0,0 +1,124 @@ +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}” +

+
+
+ {`Photo +
+

+ {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 */} +
+
+ 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 +

+
+
+
+
+ ); +}; + +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..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/components/marketing/landing/visitor/tonightpass/index.tsx b/src/components/marketing/landing/visitor/tonightpass/index.tsx new file mode 100644 index 000000000..8d2d6a82a --- /dev/null +++ b/src/components/marketing/landing/visitor/tonightpass/index.tsx @@ -0,0 +1,36 @@ +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; diff --git a/src/screens/marketing/landing/visitor/index.tsx b/src/screens/marketing/landing/visitor/index.tsx index 29fca6e55..2a98a3e7e 100644 --- a/src/screens/marketing/landing/visitor/index.tsx +++ b/src/screens/marketing/landing/visitor/index.tsx @@ -1,14 +1,20 @@ 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"; const VisitorLanding: NextPage = () => { return ( <> + + + ); 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; + +