diff --git a/app/macon/MaconClient.tsx b/app/macon/MaconClient.tsx new file mode 100644 index 0000000..0a5d428 --- /dev/null +++ b/app/macon/MaconClient.tsx @@ -0,0 +1,197 @@ +"use client"; + +import { useState } from "react"; +import MagicReveal from "@/components/ui/MagicReveal"; +import Button from "@/components/ui/Button"; + +interface MaconClientProps { + type?: "slider" | "form" | "cert"; + certName?: string; + avantLabel?: string; + apresLabel?: string; +} + +export default function MaconClient({ type, certName, avantLabel, apresLabel }: MaconClientProps) { + // Cert badge with popup + if (!type || type === "cert") { + return ; + } + + if (type === "slider") { + return ( + + ); + } + + if (type === "form") { + return ; + } + + return null; +} + +function CertBadge({ name }: { name: string }) { + const [open, setOpen] = useState(false); + + const infos: Record = { + "D\u00e9cennale": "La garantie d\u00e9cennale couvre tous les dommages compromettant la solidit\u00e9 de l\u2019ouvrage pendant 10 ans apr\u00e8s la r\u00e9ception des travaux.", + "Qualibat": "Qualibat est l\u2019organisme de r\u00e9f\u00e9rence pour la qualification des entreprises du b\u00e2timent. Gage de comp\u00e9tence et de s\u00e9rieux.", + "RGE": "Le label RGE (Reconnu Garant de l\u2019Environnement) vous permet de b\u00e9n\u00e9ficier des aides de l\u2019\u00c9tat : MaPrimeR\u00e9nov\u2019, CEE, \u00e9co-PTZ.", + }; + + return ( + <> + + + {/* Popup */} + {open && ( +
setOpen(false)}> +
e.stopPropagation()}> +
+
+ + + +
+

{name}

+
+

+ {infos[name] || "Certification professionnelle v\u00e9rifi\u00e9e."} +

+ +
+
+ )} + + ); +} + +function DevisForm() { + const [step, setStep] = useState<"type" | "details" | "urgence">("type"); + const [projectType, setProjectType] = useState(""); + + if (step === "urgence") { + return ( +
+
+ + + +
+

Urgence d\u00e9tect\u00e9e !

+

Pour une intervention rapide, appelez directement le patron :

+ + + + + APPELER LE PATRON + +

Disponible 7j/7 pour les urgences

+ +
+ ); + } + + if (step === "details") { + return ( +
+
+ 2/2 +

D\u00e9tails du projet

+
+

Type : {projectType}

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+ ); + } + + return ( +
+
+ 1/2 +

Quel type de projet ?

+
+
+ {[ + { label: "Urgence fuite / d\u00e9g\u00e2t", urgent: true }, + { label: "R\u00e9novation toiture", urgent: false }, + { label: "Ravalement fa\u00e7ade", urgent: false }, + { label: "Ma\u00e7onnerie neuve", urgent: false }, + { label: "Charpente / Isolation", urgent: false }, + { label: "Autre projet", urgent: false }, + ].map((item) => ( + + ))} +
+
+ ); +} diff --git a/app/macon/page.tsx b/app/macon/page.tsx index 06eeedb..09180f0 100644 --- a/app/macon/page.tsx +++ b/app/macon/page.tsx @@ -1,148 +1,208 @@ import type { Metadata } from "next"; import Link from "next/link"; import Button from "@/components/ui/Button"; +import MaconClient from "./MaconClient"; export const metadata: Metadata = { - title: "D\u00e9mo Site Ma\u00e7on / Couvreur - Pack Gros \u0152uvre", + title: "D\u00e9mo Site Ma\u00e7on / Couvreur - L'Expertise Solide | HookLab", description: - "D\u00e9couvrez le mod\u00e8le de site HookLab pour ma\u00e7ons et couvreurs. Galerie Avant/Apr\u00e8s, bouton Urgence Fuite, optimis\u00e9 SEO local.", + "Mod\u00e8le de site HookLab pour ma\u00e7ons, couvreurs et charpentiers. Slider Avant/Apr\u00e8s interactif, badges garanties, formulaire intelligent, bouton urgence.", }; -const avantApres = [ - { avant: "Toiture v\u00e9tuste - Tuiles cass\u00e9es", apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques" }, - { avant: "Fa\u00e7ade fissur\u00e9e - Enduit d\u00e9grad\u00e9", apres: "Ravalement complet + isolation" }, - { avant: "Chemin\u00e9e en ruine", apres: "Reconstruction + \u00e9tanch\u00e9it\u00e9" }, -]; - export default function MaconDemo() { return ( -
- {/* Nav simplifi\u00e9e */} -