fix: professional tone + real photos on demo pages

- Hero: replace aggressive "Arrêtez de perdre des chantiers" with professional "Un site à la hauteur de votre savoir-faire" - Macon: rewrite hero as client-facing (artisan's real site), add Unsplash before/after photos to MagicReveal sliders - Paysagiste: rewrite hero "Transformez votre extérieur" instead of "Ne vendez pas des travaux", add real photos to gallery - Plombier: rewrite hero "Votre plombier réactif et transparent" instead of "Convaincre en 3 secondes chrono" - MagicReveal: now accepts avantImage/apresImage URLs and renders real photos with the interactive slider https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
2026-02-16 05:34:40 +00:00
parent 6b2f91601b
commit e94a03f302
7 changed files with 111 additions and 83 deletions
--- a/app/macon/MaconClient.tsx
+++ b/app/macon/MaconClient.tsx
@@ -9,9 +9,11 @@ interface MaconClientProps {
  certName?: string;
  avantLabel?: string;
  apresLabel?: string;
+  avantImage?: string;
+  apresImage?: string;
 }

-export default function MaconClient({ type, certName, avantLabel, apresLabel }: MaconClientProps) {
+export default function MaconClient({ type, certName, avantLabel, apresLabel, avantImage, apresImage }: MaconClientProps) {
  // Cert badge with popup
  if (!type || type === "cert") {
    return <CertBadge name={certName || ""} />;
@@ -22,8 +24,8 @@ export default function MaconClient({ type, certName, avantLabel, apresLabel }:
      <MagicReveal
        avantLabel={avantLabel || ""}
        apresLabel={apresLabel || ""}
-        avantColor="bg-red-50"
-        apresColor="bg-green-50"
+        avantImage={avantImage || ""}
+        apresImage={apresImage || ""}
        height="h-64"
      />
    );
@@ -97,7 +99,7 @@ function DevisForm() {
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
          </svg>
        </div>
-        <h3 className="text-[#1b2a4a] font-bold text-xl mb-2">Urgence d\u00e9tect\u00e9e !</h3>
+        <h3 className="text-[#1b2a4a] font-bold text-xl mb-2">Urgence d&eacute;tect&eacute;e !</h3>
        <p className="text-gray-500 text-sm mb-6">Pour une intervention rapide, appelez directement le patron :</p>
        <a
          href="tel:+33604408157"
@@ -121,17 +123,17 @@ function DevisForm() {
      <div className="bg-white rounded-2xl p-6 sm:p-8">
        <div className="flex items-center gap-2 mb-6">
          <span className="bg-orange text-white text-xs font-bold px-2.5 py-1 rounded-full">2/2</span>
-          <h3 className="text-[#1b2a4a] font-bold text-lg">D\u00e9tails du projet</h3>
+          <h3 className="text-[#1b2a4a] font-bold text-lg">D&eacute;tails du projet</h3>
        </div>
        <p className="text-gray-400 text-sm mb-5">Type : <strong className="text-[#1b2a4a]">{projectType}</strong></p>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1.5">Surface approximative</label>
            <select className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm focus:border-orange focus:ring-1 focus:ring-orange outline-none">
-              <option>Moins de 50m\u00b2</option>
-              <option>50 \u00e0 100m\u00b2</option>
-              <option>100 \u00e0 200m\u00b2</option>
-              <option>Plus de 200m\u00b2</option>
+              <option>Moins de 50m&sup2;</option>
+              <option>50 &agrave; 100m&sup2;</option>
+              <option>100 &agrave; 200m&sup2;</option>
+              <option>Plus de 200m&sup2;</option>
            </select>
          </div>
          <div>
@@ -139,7 +141,7 @@ function DevisForm() {
            <input type="text" placeholder="Marc Dupont" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" />
          </div>
          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1.5">T\u00e9l\u00e9phone</label>
+            <label className="block text-sm font-medium text-gray-700 mb-1.5">T&eacute;l&eacute;phone</label>
            <input type="tel" placeholder="06 12 34 56 78" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" />
          </div>
          <div>
--- a/app/macon/page.tsx
+++ b/app/macon/page.tsx
@@ -64,8 +64,9 @@ export default function MaconDemo() {
            <span className="text-orange">Votre site aussi.</span>
          </h1>
          <p className="text-white/60 text-lg max-w-2xl mx-auto mb-4">
-            Dans le gros \u0153uvre, le client a peur. Peur que \u00e7a s&rsquo;\u00e9croule, peur des fuites,
-            peur que vous partiez avec l&rsquo;acompte. Ce site est une machine \u00e0 tuer les objections.
+            Plus de 15 ans d&rsquo;exp&eacute;rience en ma&ccedil;onnerie, couverture et charpente.
+            Chaque chantier est r&eacute;alis&eacute; dans les r&egrave;gles de l&rsquo;art, avec des garanties solides
+            pour votre tranquillit&eacute;.
          </p>
          <p className="text-white/40 text-sm mb-8">
            Intervention rapide sur Douai, Orchies, Valenciennes et environs.
@@ -101,11 +102,26 @@ export default function MaconDemo() {

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
-              { avant: "Toiture v\u00e9tuste \u2014 Tuiles cass\u00e9es, infiltrations", apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques" },
-              { avant: "Fa\u00e7ade fissur\u00e9e \u2014 Enduit d\u00e9grad\u00e9", apres: "Ravalement complet + isolation thermique" },
-              { avant: "Chemin\u00e9e en ruine \u2014 Danger effondrement", apres: "Reconstruction + \u00e9tanch\u00e9it\u00e9 garantie" },
+              {
+                avant: "Toiture v\u00e9tuste \u2014 Tuiles cass\u00e9es",
+                apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques",
+                avantImg: "https://images.unsplash.com/photo-1632823469850-2f77dd9c7f93?auto=format&fit=crop&w=800&q=80",
+                apresImg: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80",
+              },
+              {
+                avant: "Fa\u00e7ade fissur\u00e9e \u2014 Enduit d\u00e9grad\u00e9",
+                apres: "Ravalement complet + isolation",
+                avantImg: "https://images.unsplash.com/photo-1590274853856-f22d5ee3d228?auto=format&fit=crop&w=800&q=80",
+                apresImg: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=800&q=80",
+              },
+              {
+                avant: "Mur porteur ab\u00eem\u00e9 \u2014 Fissures",
+                apres: "Reconstruction + renforcement",
+                avantImg: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=800&q=80",
+                apresImg: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c0?auto=format&fit=crop&w=800&q=80",
+              },
            ].map((item, i) => (
-              <MaconClient key={i} type="slider" avantLabel={item.avant} apresLabel={item.apres} />
+              <MaconClient key={i} type="slider" avantLabel={item.avant} apresLabel={item.apres} avantImage={item.avantImg} apresImage={item.apresImg} />
            ))}
          </div>
        </div>