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 />
|
||||
|
||||
@@ -40,6 +40,15 @@ const navItems = [
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Images du site",
|
||||
href: "/admin/images",
|
||||
icon: (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function AdminShell({ children, adminName, adminEmail }: AdminShellProps) {
|
||||
|
||||
@@ -1,140 +1,115 @@
|
||||
"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="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-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">
|
||||
<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-text-muted text-sm">Votre photo ici</p>
|
||||
<p className="text-text-muted text-xs mt-1">(configurable via Sanity)</p>
|
||||
<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>
|
||||
</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
|
||||
<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-navy">systèmes de confiance en ligne</strong>{" "}
|
||||
pour les TPE/PME du Nord.
|
||||
<strong className="text-white">systèmes de confiance en ligne</strong>{" "}
|
||||
pour les artisans du Nord.
|
||||
</p>
|
||||
<p className="text-text-light text-base leading-relaxed mb-4">
|
||||
<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>vrais</strong> clients.
|
||||
concrets : des appels de <strong className="text-white">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
|
||||
<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>
|
||||
</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" />
|
||||
<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>
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -49,7 +49,11 @@ const demos = [
|
||||
},
|
||||
];
|
||||
|
||||
export default function DemosLive() {
|
||||
interface DemosLiveProps {
|
||||
images?: Record<string, string>;
|
||||
}
|
||||
|
||||
export default function DemosLive(_props: DemosLiveProps) {
|
||||
return (
|
||||
<section id="demos" className="py-16 md:py-24 bg-bg" aria-label="Démos live">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
@@ -10,7 +10,7 @@ const faqs = [
|
||||
},
|
||||
{
|
||||
q: "Est-ce que je pourrai changer mes photos moi-même\u00a0?",
|
||||
a: "Oui. Je vous donne accès à une interface simplifiée (Sanity). C\u2019est aussi simple que d\u2019envoyer un SMS. Vous changez une photo, le site se met à jour tout seul.",
|
||||
a: "Oui. Vous avez un panneau d'administration simple et intuitif. Collez un lien d'image, cliquez sur Sauver, et le site se met à jour tout seul. Aussi simple qu'envoyer un SMS.",
|
||||
},
|
||||
{
|
||||
q: "C\u2019est quoi la différence avec un site gratuit\u00a0?",
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import Button from "@/components/ui/Button";
|
||||
import ParallaxRocket from "@/components/animations/ParallaxRocket";
|
||||
import FloatingElements from "@/components/animations/FloatingElements";
|
||||
|
||||
export default function Hero() {
|
||||
interface HeroProps {
|
||||
images?: Record<string, string>;
|
||||
}
|
||||
|
||||
export default function Hero({ images }: HeroProps) {
|
||||
const portraitUrl = images?.hero_portrait;
|
||||
|
||||
return (
|
||||
<section
|
||||
className="relative min-h-[90vh] md:min-h-screen flex items-center bg-navy overflow-hidden"
|
||||
aria-label="Introduction"
|
||||
>
|
||||
{/* Background gradient layers */}
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_20%_50%,rgba(232,119,46,0.08),transparent_60%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(255,255,255,0.04),transparent_50%)]" />
|
||||
|
||||
{/* Grid pattern overlay */}
|
||||
{/* Grid pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
@@ -24,105 +29,95 @@ export default function Hero() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Floating decorative elements */}
|
||||
<FloatingElements />
|
||||
|
||||
{/* Parallax Rocket */}
|
||||
<ParallaxRocket />
|
||||
|
||||
<div className="relative z-20 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
|
||||
<div className="max-w-3xl">
|
||||
{/* Badge animé */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Left - Text */}
|
||||
<div>
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 bg-orange/15 border border-orange/25 rounded-full text-orange text-xs font-semibold mb-8 animate-fade-in-down">
|
||||
<span className="w-2 h-2 bg-orange rounded-full animate-pulse" />
|
||||
Flines-lez-Raches, Nord (59)
|
||||
</span>
|
||||
|
||||
{/* H1 avec animation staggered */}
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold text-white leading-[1.1] tracking-[-0.03em] mb-6">
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-white leading-[1.1] tracking-[-0.03em] mb-6">
|
||||
<span className="block animate-hero-text-1">
|
||||
Artisans du Nord :
|
||||
</span>
|
||||
<span className="block animate-hero-text-2">
|
||||
Votre site web doit
|
||||
Transformez votre
|
||||
</span>
|
||||
<span className="block animate-hero-text-2">
|
||||
être aussi solide que{" "}
|
||||
bouche-à-oreille en{" "}
|
||||
</span>
|
||||
<span className="block text-orange animate-hero-text-3 relative">
|
||||
vos ouvrages.
|
||||
{/* Underline animée */}
|
||||
machine à chantiers.
|
||||
<span className="absolute -bottom-2 left-0 h-1 bg-orange/40 rounded-full animate-underline-grow" />
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Sous-titre avec fade in */}
|
||||
<p className="text-white/65 text-lg sm:text-xl md:text-2xl leading-relaxed mb-10 max-w-2xl animate-fade-in-up animation-delay-600">
|
||||
Un site professionnel à la hauteur de votre savoir-faire.
|
||||
Depuis Flines-lez-Raches, je conçois des vitrines numériques
|
||||
performantes qui inspirent confiance et génèrent des demandes
|
||||
qualifiées.
|
||||
<p className="text-white/65 text-lg sm:text-xl leading-relaxed mb-10 max-w-xl animate-fade-in-up animation-delay-600">
|
||||
Avis Google + Facebook + Site pro : le triptyque qui fait que vos
|
||||
futurs clients vous appellent <strong className="text-white/90">vous</strong>, et pas votre concurrent.
|
||||
</p>
|
||||
|
||||
{/* CTA buttons avec animation */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 animate-fade-in-up animation-delay-800">
|
||||
<a href="#contact">
|
||||
<Button size="lg" className="w-full sm:w-auto pulse-glow text-base group">
|
||||
<span className="flex items-center gap-2">
|
||||
DÉMARRER MON AUDIT GRATUIT
|
||||
<svg
|
||||
className="w-5 h-5 transition-transform group-hover:translate-x-1"
|
||||
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 className="w-5 h-5 transition-transform group-hover:translate-x-1" 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>
|
||||
</span>
|
||||
</Button>
|
||||
</a>
|
||||
<a
|
||||
href="#demos"
|
||||
href="#process"
|
||||
className="inline-flex items-center justify-center gap-2 px-6 py-3.5 border border-white/20 text-white font-semibold text-sm rounded-xl hover:bg-white/10 hover:border-white/30 transition-all duration-300"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
Découvrir nos réalisations
|
||||
Comment ça marche ?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Trust line animée */}
|
||||
<div className="mt-8 flex flex-wrap items-center gap-6 animate-fade-in-up animation-delay-1000">
|
||||
<div className="flex items-center gap-2">
|
||||
{["Réponse sous 24h", "100% Géré pour vous", "Pas de jargon"].map((t) => (
|
||||
<div key={t} className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 bg-success/20 rounded-full flex items-center justify-center">
|
||||
<svg className="w-3 h-3 text-success" 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-white/50 text-sm">Réponse sous 24h</span>
|
||||
<span className="text-white/50 text-sm">{t}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 bg-success/20 rounded-full flex items-center justify-center">
|
||||
<svg className="w-3 h-3 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right - Portrait */}
|
||||
<div className="hidden lg:flex justify-center">
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-4 bg-orange/20 rounded-3xl blur-2xl" />
|
||||
<div className="relative w-80 h-96 rounded-2xl overflow-hidden border-2 border-white/10">
|
||||
{portraitUrl ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={portraitUrl} alt="Enguerrand Ozano - HookLab" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<div className="w-full h-full bg-navy-light flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-orange/20 rounded-full flex items-center justify-center mx-auto mb-3">
|
||||
<svg className="w-10 h-10 text-orange/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>
|
||||
<span className="text-white/50 text-sm">Pas de jargon</span>
|
||||
<p className="text-white/30 text-sm">Votre photo ici</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 bg-success/20 rounded-full flex items-center justify-center">
|
||||
<svg className="w-3 h-3 text-success" 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-white/50 text-sm">100% Géré pour vous</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute -bottom-3 -right-3 bg-orange text-white text-xs font-bold px-4 py-2 rounded-xl shadow-lg">
|
||||
Expert Nord (59)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
94
lib/site-images.ts
Normal file
94
lib/site-images.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import { createAdminClient } from "@/lib/supabase/server";
|
||||
|
||||
export interface SiteImage {
|
||||
key: string;
|
||||
url: string;
|
||||
label: string;
|
||||
updated_at?: string;
|
||||
}
|
||||
|
||||
// Images par défaut (utilisées si la table n'existe pas ou si l'image n'est pas configurée)
|
||||
export const DEFAULT_IMAGES: Record<string, { url: string; label: string }> = {
|
||||
hero_portrait: {
|
||||
url: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=500&q=80",
|
||||
label: "Photo portrait (Hero)",
|
||||
},
|
||||
about_photo: {
|
||||
url: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80",
|
||||
label: "Photo Enguerrand (Qui suis-je)",
|
||||
},
|
||||
process_google: {
|
||||
url: "https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?auto=format&fit=crop&w=600&q=80",
|
||||
label: "Image Avis Google (étape 1)",
|
||||
},
|
||||
process_facebook: {
|
||||
url: "https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?auto=format&fit=crop&w=600&q=80",
|
||||
label: "Image Facebook (étape 2)",
|
||||
},
|
||||
process_site: {
|
||||
url: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=600&q=80",
|
||||
label: "Image Site Internet (étape 3)",
|
||||
},
|
||||
demo_macon: {
|
||||
url: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=600&q=80",
|
||||
label: "Image démo Maçon",
|
||||
},
|
||||
demo_paysagiste: {
|
||||
url: "https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=600&q=80",
|
||||
label: "Image démo Paysagiste",
|
||||
},
|
||||
demo_plombier: {
|
||||
url: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?auto=format&fit=crop&w=600&q=80",
|
||||
label: "Image démo Plombier",
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Récupère toutes les images du site depuis Supabase.
|
||||
* Fallback sur les valeurs par défaut si la table n'existe pas.
|
||||
*/
|
||||
export async function getSiteImages(): Promise<Record<string, string>> {
|
||||
const result: Record<string, string> = {};
|
||||
|
||||
// Mettre les defaults d'abord
|
||||
for (const [key, val] of Object.entries(DEFAULT_IMAGES)) {
|
||||
result[key] = val.url;
|
||||
}
|
||||
|
||||
try {
|
||||
const supabase = createAdminClient();
|
||||
const { data, error } = await supabase.from("site_images").select("key, url");
|
||||
const rows = (data ?? []) as unknown as Pick<SiteImage, "key" | "url">[];
|
||||
|
||||
if (!error) {
|
||||
for (const row of rows) {
|
||||
if (row.url) {
|
||||
result[row.key] = row.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Table n'existe pas encore, on utilise les defaults
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Met à jour une image du site.
|
||||
*/
|
||||
export async function updateSiteImage(key: string, url: string): Promise<boolean> {
|
||||
try {
|
||||
const supabase = createAdminClient();
|
||||
const label = DEFAULT_IMAGES[key]?.label || key;
|
||||
|
||||
const { error } = await (supabase.from("site_images") as ReturnType<typeof supabase.from>).upsert(
|
||||
{ key, url, label, updated_at: new Date().toISOString() } as Record<string, unknown>,
|
||||
{ onConflict: "key" }
|
||||
);
|
||||
|
||||
return !error;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -183,6 +183,26 @@ export type Database = {
|
||||
metadata?: Record<string, unknown> | null;
|
||||
};
|
||||
};
|
||||
site_images: {
|
||||
Row: {
|
||||
key: string;
|
||||
url: string;
|
||||
label: string | null;
|
||||
updated_at: string;
|
||||
};
|
||||
Insert: {
|
||||
key: string;
|
||||
url: string;
|
||||
label?: string | null;
|
||||
updated_at?: string;
|
||||
};
|
||||
Update: {
|
||||
key?: string;
|
||||
url?: string;
|
||||
label?: string | null;
|
||||
updated_at?: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user