ba1d24fa02
- SEO technique: sitemap.ts, robots.ts, structured data JSON-LD (Organization, Course, FAQPage) - Meta tags optimisés pour 12+ mots-clés TikTok Shop France - Hero SEO-optimisé: H1 ciblant "formation TikTok Shop" + "créateur affilié France" - Nouvelle section ResultsShowcase: stats marché TikTok Shop + timeline 8 semaines - Tableau comparatif HookLab vs alternatives - 6 témoignages avec disclaimer Google-compliant (pas de faux avis) - Pricing avec prix barré, bonus inclus, garantie satisfait ou remboursé - Badges de confiance (paiement sécurisé, RGPD, support, garantie) - Pop-up exit-intent (desktop) avec stats marché - Barre sticky CTA mobile - Notifications social proof animées - CTA final avant footer - Barre d'annonce urgence en haut - FAQ enrichie (10 questions) avec structured data FAQPage - Smooth scroll + animations CSS ajoutées https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
const notifications = [
|
|
{ name: "Mehdi L.", action: "a candidat\u00e9", time: "il y a 3 min" },
|
|
{ name: "Laura B.", action: "a rejoint le programme", time: "il y a 12 min" },
|
|
{ name: "Yanis K.", action: "a candidat\u00e9", time: "il y a 18 min" },
|
|
{ name: "Sarah M.", action: "a g\u00e9n\u00e9r\u00e9 sa 1\u00e8re commission", time: "il y a 1h" },
|
|
{ name: "Thomas D.", action: "a candidat\u00e9", time: "il y a 2h" },
|
|
{ name: "Amina K.", action: "a atteint 1 000\u20ac de commissions", time: "il y a 3h" },
|
|
{ name: "Julien R.", action: "a candidat\u00e9", time: "il y a 4h" },
|
|
{ name: "Fatima N.", action: "a rejoint le programme", time: "il y a 5h" },
|
|
];
|
|
|
|
export default function SocialProofTicker() {
|
|
const [current, setCurrent] = useState(0);
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const showTimeout = setTimeout(() => setVisible(true), 5000);
|
|
return () => clearTimeout(showTimeout);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!visible) return;
|
|
const interval = setInterval(() => {
|
|
setVisible(false);
|
|
setTimeout(() => {
|
|
setCurrent((prev) => (prev + 1) % notifications.length);
|
|
setVisible(true);
|
|
}, 500);
|
|
}, 4000);
|
|
return () => clearInterval(interval);
|
|
}, [visible]);
|
|
|
|
const n = notifications[current];
|
|
|
|
return (
|
|
<div
|
|
className={`fixed bottom-4 left-4 z-50 transition-all duration-500 ${
|
|
visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
|
|
}`}
|
|
>
|
|
<div className="bg-dark-light border border-dark-border rounded-2xl p-4 shadow-2xl max-w-xs">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-sm font-bold text-white shrink-0">
|
|
{n.name[0]}
|
|
</div>
|
|
<div>
|
|
<p className="text-white text-sm font-medium">
|
|
{n.name} <span className="text-white/60 font-normal">{n.action}</span>
|
|
</p>
|
|
<p className="text-white/40 text-xs">{n.time}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|