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
@@ -1,139 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { urlFor } from "@/lib/sanity/client";
|
||||
import type { SiteSettings } from "@/lib/sanity/queries";
|
||||
import ScrollReveal from "@/components/animations/ScrollReveal";
|
||||
import AnimatedCounter from "@/components/animations/AnimatedCounter";
|
||||
|
||||
interface AboutMeProps {
|
||||
settings?: SiteSettings | null;
|
||||
images?: Record<string, string>;
|
||||
}
|
||||
|
||||
export default function AboutMe({ settings }: AboutMeProps) {
|
||||
const name = settings?.ownerName || "Enguerrand";
|
||||
const bio = settings?.ownerBio;
|
||||
const address = settings?.address || "Flines-lez-Raches, Nord (59)";
|
||||
const lat = settings?.lat || 50.4267;
|
||||
const lng = settings?.lng || 3.2372;
|
||||
const photoUrl = settings?.ownerPhoto ? urlFor(settings.ownerPhoto)?.width(400).height(480).url() : null;
|
||||
export default function AboutMe({ images }: AboutMeProps) {
|
||||
const photoUrl = images?.about_photo;
|
||||
|
||||
return (
|
||||
<section id="qui-suis-je" className="py-16 md:py-24 bg-bg" aria-label="Qui suis-je">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<section id="qui-suis-je" className="py-16 md:py-24 bg-orange relative overflow-hidden" aria-label="Qui suis-je">
|
||||
{/* Subtle pattern */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute top-20 right-20 w-40 h-40 border-2 border-white rounded-full" />
|
||||
<div className="absolute bottom-10 left-10 w-60 h-60 border-2 border-white rounded-full" />
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Stats top row */}
|
||||
<ScrollReveal direction="up">
|
||||
<div className="text-center mb-12">
|
||||
<span className="inline-block px-3 py-1.5 bg-navy/5 border border-navy/10 rounded-full text-navy text-xs font-semibold mb-4">
|
||||
Votre expert local
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em]">
|
||||
Pas une plateforme anonyme.{" "}
|
||||
<span className="text-orange">Un voisin.</span>
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-14">
|
||||
{[
|
||||
{ value: 100, suffix: "%", label: "Local Nord" },
|
||||
{ value: 24, suffix: "h", label: "Délai de réponse" },
|
||||
{ value: 0, suffix: "€", label: "L'audit" },
|
||||
{ value: 3, suffix: "", label: "Piliers du système" },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="text-center">
|
||||
<p className="text-3xl md:text-4xl font-extrabold text-white">
|
||||
<AnimatedCounter end={stat.value} suffix={stat.suffix} />
|
||||
</p>
|
||||
<p className="text-white/70 text-sm font-medium mt-1">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
|
||||
{/* Left - Photo */}
|
||||
{/* Content */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
{/* Photo */}
|
||||
<ScrollReveal direction="left">
|
||||
<div className="flex justify-center">
|
||||
<div className="relative">
|
||||
<div className="w-64 h-72 sm:w-72 sm:h-80 bg-bg-muted border-2 border-border rounded-2xl flex items-center justify-center overflow-hidden">
|
||||
<div className="w-64 h-80 sm:w-72 sm:h-[22rem] rounded-2xl overflow-hidden border-4 border-white/20 shadow-xl">
|
||||
{photoUrl ? (
|
||||
<Image
|
||||
src={photoUrl}
|
||||
alt={`Photo de ${name}`}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 640px) 256px, 288px"
|
||||
/>
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={photoUrl} alt="Enguerrand Ozano" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<div className="text-center p-6">
|
||||
<div className="w-20 h-20 bg-navy/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-10 h-10 text-navy/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
<div className="w-full h-full bg-orange-hover flex items-center justify-center">
|
||||
<div className="text-center p-6">
|
||||
<div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-10 h-10 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-white/60 text-sm">Votre photo ici</p>
|
||||
<p className="text-white/40 text-xs mt-1">(modifiable dans Admin > Images)</p>
|
||||
</div>
|
||||
<p className="text-text-muted text-sm">Votre photo ici</p>
|
||||
<p className="text-text-muted text-xs mt-1">(configurable via Sanity)</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-orange text-white text-xs font-bold px-4 py-1.5 rounded-full shadow-md whitespace-nowrap">
|
||||
Basé à {address.split(",")[0]}
|
||||
<div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-navy text-white text-xs font-bold px-4 py-2 rounded-full shadow-lg whitespace-nowrap">
|
||||
Basé à Flines-lez-Raches
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Right - Text */}
|
||||
{/* Text */}
|
||||
<ScrollReveal direction="right">
|
||||
<div>
|
||||
{bio ? (
|
||||
<p className="text-text text-base sm:text-lg leading-relaxed mb-4">
|
||||
{bio}
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-text text-base sm:text-lg leading-relaxed mb-4">
|
||||
Je suis <strong className="text-navy">{name}</strong>, spécialisé dans la
|
||||
visibilité locale et la construction de{" "}
|
||||
<strong className="text-navy">systèmes de confiance en ligne</strong>{" "}
|
||||
pour les TPE/PME du Nord.
|
||||
</p>
|
||||
<p className="text-text-light text-base leading-relaxed mb-4">
|
||||
Je ne suis pas un call center parisien. Je connais la réalité de vos
|
||||
chantiers à Douai, Orchies ou Valenciennes. Je sais que vous n’avez pas
|
||||
le temps de gérer “un truc internet” et que vous voulez des résultats
|
||||
concrets : des appels de <strong>vrais</strong> clients.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
<p className="text-text-light text-base leading-relaxed mb-6">
|
||||
Mon approche : je vous construis un <strong className="text-navy">dossier de confiance</strong>{" "}
|
||||
(Google + site + preuves) qui transforme votre bouche-à-oreille en système
|
||||
<span className="inline-block px-3 py-1.5 bg-white/15 rounded-full text-white text-xs font-semibold mb-4">
|
||||
Votre expert local
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-4">
|
||||
Pas une plateforme anonyme.{" "}
|
||||
<span className="text-navy">Un voisin.</span>
|
||||
</h2>
|
||||
<p className="text-white/90 text-base leading-relaxed mb-4">
|
||||
Je suis <strong className="text-white">Enguerrand</strong>, spécialisé dans la
|
||||
visibilité locale et la construction de{" "}
|
||||
<strong className="text-white">systèmes de confiance en ligne</strong>{" "}
|
||||
pour les artisans du Nord.
|
||||
</p>
|
||||
<p className="text-white/80 text-base leading-relaxed mb-4">
|
||||
Je ne suis pas un call center parisien. Je connais la réalité de vos
|
||||
chantiers à Douai, Orchies ou Valenciennes. Je sais que vous n’avez pas
|
||||
le temps de gérer “un truc internet” et que vous voulez des résultats
|
||||
concrets : des appels de <strong className="text-white">vrais</strong> clients.
|
||||
</p>
|
||||
<p className="text-white/80 text-base leading-relaxed mb-6">
|
||||
Mon approche : je vous construis un <strong className="text-white">système complet</strong>{" "}
|
||||
(Google + Facebook + Site) qui transforme votre bouche-à-oreille en système
|
||||
permanent. Pas de jargon, pas de blabla — du concret.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-bg-white border border-border rounded-xl p-4 text-center">
|
||||
<p className="text-2xl font-bold text-navy">
|
||||
<AnimatedCounter end={100} suffix="%" />
|
||||
</p>
|
||||
<p className="text-text-muted text-xs mt-1">Local Nord</p>
|
||||
</div>
|
||||
<div className="bg-bg-white border border-border rounded-xl p-4 text-center">
|
||||
<p className="text-2xl font-bold text-navy">
|
||||
<AnimatedCounter end={24} suffix="h" />
|
||||
</p>
|
||||
<p className="text-text-muted text-xs mt-1">Délai de réponse</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="#contact"
|
||||
className="inline-flex items-center gap-2 bg-navy hover:bg-navy-light text-white font-bold text-sm px-6 py-3 rounded-xl transition-colors"
|
||||
>
|
||||
Discutons de votre situation
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
{/* Map */}
|
||||
<ScrollReveal direction="up" className="mt-12">
|
||||
<div className="bg-bg-white border border-border rounded-2xl overflow-hidden">
|
||||
<div className="p-4 border-b border-border flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span className="text-navy font-semibold text-sm">Zone d’intervention : Douai, Orchies, Arleux, Valenciennes et environs</span>
|
||||
</div>
|
||||
<div className="relative h-48 sm:h-64">
|
||||
<iframe
|
||||
src={`https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.45}%2C${lat - 0.18}%2C${lng + 0.45}%2C${lat + 0.12}&layer=mapnik&marker=${lat}%2C${lng}`}
|
||||
className="absolute inset-0 w-full h-full border-0"
|
||||
title={`Carte de localisation - ${address.split(",")[0]}`}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user