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
161
app/admin/images/page.tsx
Normal file
161
app/admin/images/page.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface SiteImage {
|
||||
key: string;
|
||||
url: string;
|
||||
label: string;
|
||||
updated_at: string | null;
|
||||
}
|
||||
|
||||
export default function AdminImages() {
|
||||
const [images, setImages] = useState<SiteImage[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState<string | null>(null);
|
||||
const [editUrls, setEditUrls] = useState<Record<string, string>>({});
|
||||
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/admin/site-images")
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
setImages(data.images || []);
|
||||
const urls: Record<string, string> = {};
|
||||
for (const img of data.images || []) {
|
||||
urls[img.key] = img.url;
|
||||
}
|
||||
setEditUrls(urls);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleSave = async (key: string) => {
|
||||
setSaving(key);
|
||||
setMessage(null);
|
||||
try {
|
||||
const res = await fetch("/api/admin/site-images", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ key, url: editUrls[key] }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
setMessage({ type: "success", text: `Image "${key}" mise à jour !` });
|
||||
setImages((prev) =>
|
||||
prev.map((img) =>
|
||||
img.key === key ? { ...img, url: editUrls[key], updated_at: new Date().toISOString() } : img
|
||||
)
|
||||
);
|
||||
} else {
|
||||
setMessage({ type: "error", text: data.error || "Erreur" });
|
||||
}
|
||||
} catch {
|
||||
setMessage({ type: "error", text: "Erreur réseau" });
|
||||
}
|
||||
setSaving(null);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="max-w-4xl">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Images du site</h1>
|
||||
<p className="text-white/60">Chargement...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Images du site</h1>
|
||||
<p className="text-white/60">
|
||||
Changez les URLs des images affichées sur le site. Collez un lien Noelshack, Unsplash, ou tout autre hébergeur d'images.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div
|
||||
className={`mb-6 p-4 rounded-xl text-sm font-medium ${
|
||||
message.type === "success" ? "bg-success/10 text-success" : "bg-red-500/10 text-red-400"
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Info SQL */}
|
||||
<div className="mb-8 bg-dark-light border border-dark-border rounded-[20px] p-6">
|
||||
<p className="text-white/50 text-xs mb-2 font-medium">
|
||||
Si la sauvegarde échoue, créez la table dans Supabase (SQL Editor) :
|
||||
</p>
|
||||
<pre className="bg-black/30 rounded-lg p-3 text-xs text-green-400 overflow-x-auto">
|
||||
{`CREATE TABLE site_images (
|
||||
key TEXT PRIMARY KEY,
|
||||
url TEXT NOT NULL,
|
||||
label TEXT,
|
||||
updated_at TIMESTAMPTZ DEFAULT NOW()
|
||||
);`}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{images.map((img) => (
|
||||
<div key={img.key} className="bg-dark-light border border-dark-border rounded-[20px] p-6">
|
||||
<div className="flex items-start gap-6">
|
||||
{/* Preview */}
|
||||
<div className="w-32 h-24 rounded-xl overflow-hidden bg-black/30 shrink-0">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={editUrls[img.key] || img.url}
|
||||
alt={img.label}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src =
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-white font-semibold text-sm">{img.label}</h3>
|
||||
<span className="text-white/20 text-xs font-mono">{img.key}</span>
|
||||
</div>
|
||||
{img.updated_at && (
|
||||
<p className="text-white/30 text-xs mb-3">
|
||||
Modifié le{" "}
|
||||
{new Date(img.updated_at).toLocaleDateString("fr-FR", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="url"
|
||||
value={editUrls[img.key] || ""}
|
||||
onChange={(e) => setEditUrls((prev) => ({ ...prev, [img.key]: e.target.value }))}
|
||||
placeholder="https://..."
|
||||
className="flex-1 px-4 py-2.5 bg-black/30 border border-dark-border rounded-xl text-white text-sm placeholder:text-white/20 focus:border-orange focus:ring-1 focus:ring-orange outline-none"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleSave(img.key)}
|
||||
disabled={saving === img.key || editUrls[img.key] === img.url}
|
||||
className="px-5 py-2.5 bg-orange hover:bg-orange/90 disabled:opacity-30 text-white font-semibold text-sm rounded-xl transition-colors cursor-pointer disabled:cursor-not-allowed shrink-0"
|
||||
>
|
||||
{saving === img.key ? "..." : "Sauver"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
96
app/api/admin/site-images/route.ts
Normal file
96
app/api/admin/site-images/route.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { createClient, createAdminClient } from "@/lib/supabase/server";
|
||||
import { DEFAULT_IMAGES, updateSiteImage } from "@/lib/site-images";
|
||||
import type { Profile } from "@/types/database.types";
|
||||
|
||||
interface SiteImageRow {
|
||||
key: string;
|
||||
url: string;
|
||||
label: string | null;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
async function checkAdmin() {
|
||||
const supabase = await createClient();
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser();
|
||||
if (!user) return false;
|
||||
|
||||
const adminClient = createAdminClient();
|
||||
const { data: profile } = await adminClient
|
||||
.from("profiles")
|
||||
.select("is_admin")
|
||||
.eq("id", user.id)
|
||||
.single();
|
||||
|
||||
return (profile as Pick<Profile, "is_admin"> | null)?.is_admin === true;
|
||||
}
|
||||
|
||||
// GET - Récupérer toutes les images
|
||||
export async function GET() {
|
||||
const isAdmin = await checkAdmin();
|
||||
if (!isAdmin) {
|
||||
return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
|
||||
}
|
||||
|
||||
try {
|
||||
const supabase = createAdminClient();
|
||||
const { data } = await supabase.from("site_images").select("*");
|
||||
const rows = (data ?? []) as unknown as SiteImageRow[];
|
||||
|
||||
// Merge defaults avec les valeurs en base
|
||||
const images = Object.entries(DEFAULT_IMAGES).map(([key, def]) => {
|
||||
const saved = rows.find((d) => d.key === key);
|
||||
return {
|
||||
key,
|
||||
url: saved?.url || def.url,
|
||||
label: def.label,
|
||||
updated_at: saved?.updated_at || null,
|
||||
};
|
||||
});
|
||||
|
||||
return NextResponse.json({ images });
|
||||
} catch {
|
||||
// Si la table n'existe pas, retourner les defaults
|
||||
const images = Object.entries(DEFAULT_IMAGES).map(([key, def]) => ({
|
||||
key,
|
||||
url: def.url,
|
||||
label: def.label,
|
||||
updated_at: null,
|
||||
}));
|
||||
return NextResponse.json({ images });
|
||||
}
|
||||
}
|
||||
|
||||
// PUT - Mettre à jour une image
|
||||
export async function PUT(request: NextRequest) {
|
||||
const isAdmin = await checkAdmin();
|
||||
if (!isAdmin) {
|
||||
return NextResponse.json({ error: "Non autorisé" }, { status: 401 });
|
||||
}
|
||||
|
||||
const body = await request.json();
|
||||
const { key, url } = body;
|
||||
|
||||
if (!key || !url) {
|
||||
return NextResponse.json({ error: "key et url requis" }, { status: 400 });
|
||||
}
|
||||
|
||||
// Vérifier que l'URL est valide
|
||||
try {
|
||||
new URL(url);
|
||||
} catch {
|
||||
return NextResponse.json({ error: "URL invalide" }, { status: 400 });
|
||||
}
|
||||
|
||||
const success = await updateSiteImage(key, url);
|
||||
if (!success) {
|
||||
return NextResponse.json(
|
||||
{ error: "Erreur lors de la sauvegarde. Vérifiez que la table site_images existe dans Supabase." },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true });
|
||||
}
|
||||
20
app/page.tsx
20
app/page.tsx
@@ -1,19 +1,19 @@
|
||||
import Navbar from "@/components/marketing/Navbar";
|
||||
import Hero from "@/components/marketing/Hero";
|
||||
import Problematique from "@/components/marketing/Problematique";
|
||||
import System from "@/components/marketing/System";
|
||||
import Process from "@/components/marketing/Process";
|
||||
import DemosLive from "@/components/marketing/DemosLive";
|
||||
import AboutMe from "@/components/marketing/AboutMe";
|
||||
import FAQ from "@/components/marketing/FAQ";
|
||||
import Contact from "@/components/marketing/Contact";
|
||||
import Footer from "@/components/marketing/Footer";
|
||||
import { getSiteSettings } from "@/lib/sanity/queries";
|
||||
import { getSiteImages } from "@/lib/site-images";
|
||||
|
||||
// Revalider les données Sanity toutes les 60 secondes
|
||||
// Revalider les images toutes les 60 secondes
|
||||
export const revalidate = 60;
|
||||
|
||||
export default async function LandingPage() {
|
||||
const siteSettings = await getSiteSettings();
|
||||
const images = await getSiteImages();
|
||||
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen">
|
||||
@@ -21,19 +21,19 @@ export default async function LandingPage() {
|
||||
<Navbar />
|
||||
|
||||
{/* Hero - Le Choc Visuel */}
|
||||
<Hero />
|
||||
<Hero images={images} />
|
||||
|
||||
{/* La Problématique - L'Identification */}
|
||||
<Problematique />
|
||||
|
||||
{/* La Solution HookLab Tech */}
|
||||
<System />
|
||||
{/* Le Triptyque HookLab - Les 3 Piliers */}
|
||||
<Process images={images} />
|
||||
|
||||
{/* Démos Live - 3 Dossiers de Confiance */}
|
||||
<DemosLive />
|
||||
<DemosLive images={images} />
|
||||
|
||||
{/* Qui suis-je - Ancrage Local (Sanity) */}
|
||||
<AboutMe settings={siteSettings} />
|
||||
{/* Qui suis-je - Ancrage Local */}
|
||||
<AboutMe images={images} />
|
||||
|
||||
{/* FAQ - Objections */}
|
||||
<FAQ />
|
||||
|
||||
Reference in New Issue
Block a user