feat: redesign homepage with triptych process + admin image management
- Redesign Hero section with new copy focused on the triptych offering - Add Process component (replaces System) with zigzag layout for 3 pillars: Google Maps reviews, managed Facebook, converting website - Redesign AboutMe with orange background and stats row - Add admin panel for managing site image URLs (replaces Sanity dependency) - Create site_images API routes and Supabase-backed storage with defaults - Update FAQ to reference built-in admin panel - Add site_images table type to database types - Pass images prop through homepage components https://claude.ai/code/session_01V8YAjpqRQ3bfBYsABYsEgo
This commit is contained in:
Claude
126
components/marketing/Process.tsx
Normal file
126
components/marketing/Process.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import ScrollReveal from "@/components/animations/ScrollReveal";
|
||||
|
||||
interface ProcessProps {
|
||||
images?: Record<string, string>;
|
||||
}
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: "01",
|
||||
title: "Avis Google Maps automatiques",
|
||||
subtitle: "Être trouvé par les bons clients",
|
||||
description:
|
||||
"Vos clients satisfaits laissent un avis en 30 secondes grâce à notre système automatisé. Plus d'avis = meilleur classement Google Maps = plus de clients qualifiés qui vous trouvent avant votre concurrent.",
|
||||
points: [
|
||||
"Système d'envoi automatique après chaque chantier",
|
||||
"QR Code personnalisé à montrer au client",
|
||||
"Vos avis montent, votre classement Google aussi",
|
||||
],
|
||||
imageKey: "process_google",
|
||||
color: "orange",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
title: "Facebook géré pour vous",
|
||||
subtitle: "Montrer votre savoir-faire au quotidien",
|
||||
description:
|
||||
"Je gère votre page Facebook avec vos photos de chantier. Vous prenez une photo, je la transforme en publication professionnelle qui donne envie. Micro-formation incluse pour prendre de belles photos sur le chantier.",
|
||||
points: [
|
||||
"Publications régulières avec vos réalisations",
|
||||
"Micro-formation : photos qui vendent",
|
||||
"Vos futurs clients voient votre travail avant de vous appeler",
|
||||
],
|
||||
imageKey: "process_facebook",
|
||||
color: "orange",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
title: "Site internet qui convertit",
|
||||
subtitle: "Transformer les visiteurs en devis qualifiés",
|
||||
description:
|
||||
"Un site pro qui met en avant votre travail, votre savoir-faire, votre plus-value. Avec un formulaire intelligent qui trie les curieux et augmente le nombre de devis qualifiés. Fini les appels pour « juste un prix ».",
|
||||
points: [
|
||||
"Design pro qui inspire confiance immédiate",
|
||||
"Formulaire intelligent : filtre les curieux",
|
||||
"Optimisé Google pour votre zone (Douai, Orchies, Valenciennes)",
|
||||
],
|
||||
imageKey: "process_site",
|
||||
color: "orange",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Process({ images }: ProcessProps) {
|
||||
return (
|
||||
<section id="process" className="py-16 md:py-24 bg-bg" aria-label="Le processus">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<ScrollReveal direction="up">
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-block px-3 py-1.5 bg-orange/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-4">
|
||||
Le Triptyque HookLab
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
|
||||
3 piliers pour remplir votre{" "}
|
||||
<span className="text-orange">carnet de commandes.</span>
|
||||
</h2>
|
||||
<p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
|
||||
Un système complet qui travaille pour vous 24h/24, même quand vous êtes sur le chantier.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Steps - Zigzag layout */}
|
||||
<div className="space-y-16 md:space-y-24">
|
||||
{steps.map((step, i) => {
|
||||
const isEven = i % 2 === 0;
|
||||
const imageUrl = images?.[step.imageKey];
|
||||
|
||||
return (
|
||||
<ScrollReveal key={step.number} direction={isEven ? "left" : "right"} delay={i * 100}>
|
||||
<div className={`grid grid-cols-1 md:grid-cols-2 gap-10 items-center ${!isEven ? "md:direction-rtl" : ""}`}>
|
||||
{/* Image side */}
|
||||
<div className={`relative ${!isEven ? "md:order-2" : ""}`}>
|
||||
<div className="relative rounded-2xl overflow-hidden shadow-xl">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={imageUrl || ""}
|
||||
alt={step.title}
|
||||
className="w-full h-64 md:h-80 object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-navy/30 to-transparent" />
|
||||
</div>
|
||||
{/* Number badge */}
|
||||
<div className="absolute -top-4 -left-4 w-16 h-16 bg-orange rounded-2xl flex items-center justify-center shadow-lg">
|
||||
<span className="text-white font-extrabold text-2xl">{step.number}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Text side */}
|
||||
<div className={!isEven ? "md:order-1" : ""}>
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-wider">{step.subtitle}</span>
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-navy mt-2 mb-4">{step.title}</h3>
|
||||
<p className="text-text-light text-base leading-relaxed mb-6">{step.description}</p>
|
||||
<ul className="space-y-3">
|
||||
{step.points.map((point) => (
|
||||
<li key={point} className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 bg-orange/15 rounded-full flex items-center justify-center shrink-0 mt-0.5">
|
||||
<svg className="w-3.5 h-3.5 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-text text-sm font-medium">{point}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user