bender/3be69304-04fe-4a3b-bd2d-fed043a8325b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-09 15:50:46 +00:00
parent 91a9fd8627
commit d599380a4a
1 changed files with 71 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/app/page.tsx
View File

@@ -12,6 +12,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
import PricingCardOne from '@/components/sections/pricing/PricingCardOne'; import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne'; import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen'; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactText from '@/components/sections/contact/ContactText';
import { AlertTriangle, Briefcase, Globe, Home, Landmark, Mail, MessageSquare, Package, Shield, ShieldCheck, ShoppingBag, Target, User } from "lucide-react"; import { AlertTriangle, Briefcase, Globe, Home, Landmark, Mail, MessageSquare, Package, Shield, ShieldCheck, ShoppingBag, Target, User } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
@@ -50,154 +51,82 @@ export default function LandingPage() {
headingFontWeight="extrabold" headingFontWeight="extrabold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleFullscreen <NavbarStyleFullscreen
navItems={[ navItems={[
{ name: "Accueil", id: "hero" }, { name: "Accueil", id: "hero" },
{ name: "Fonctionnement", id: "features" }, { name: "Analysis", id: "analysis" },
{ name: "Tarifs", id: "pricing" }, { name: "Tarifs", id: "pricing" },
{ name: "FAQ", id: "faq" }, { name: "Dashboard", id: "dashboard" },
{ name: "Aide", id: "contact" }, ]}
]} brandName="CliquePas"
brandName="CliquePas" />
/> </div>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardCarousel <HeroBillboardCarousel
background={{ variant: "gradient-bars" }} background={{ variant: "gradient-bars" }}
title="CliquePas : Vérifiez avant de cliquer." title="CliquePas : Vérifiez avant de cliquer."
description="L'assistant anti-arnaque simple pour protéger toute votre famille. Analysez SMS, emails et liens en quelques secondes." description="L'assistant anti-arnaque simple pour protéger toute votre famille. Analysez SMS, emails et liens en quelques secondes."
tag="Nouvelle solution de protection" tag="Nouvelle solution de protection"
buttons={[{ text: "Analyser gratuitement", onClick: () => handleScroll("contact") }]} buttons={[{ text: "Analyser gratuitement", onClick: () => handleScroll("analysis") }]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
mediaItems={[ mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/online-security-fingerprint-scanner-smartphone_53876-94846.jpg", imageAlt: "Interface CliquePas" }, { imageSrc: "http://img.b2bpic.net/free-photo/online-security-fingerprint-scanner-smartphone_53876-94846.jpg", imageAlt: "Interface CliquePas" },
{ imageSrc: "http://img.b2bpic.net/free-photo/advanced-cyber-surveillance-room-with-no-personnel-present_482257-105706.jpg", imageAlt: "Analyse SMS" }, ]}
{ imageSrc: "http://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg", imageAlt: "Score de risque" }, />
{ imageSrc: "http://img.b2bpic.net/free-photo/young-woman-analyst-works-online-reports-green-screen_482257-116633.jpg", imageAlt: "Recommandations de sécurité" }, </div>
{ imageSrc: "http://img.b2bpic.net/free-photo/cyber-operations-center-with-governmental-hackers-working-digital-security_482257-115534.jpg", imageAlt: "Mode Famille" },
{ imageSrc: "http://img.b2bpic.net/free-photo/forecast-expert-ceo-analyzing-investment-insights-negotiations-details_482257-122706.jpg", imageAlt: "Aide après arnaque" },
]}
/>
</div>
<div id="features" data-section="features"> <div id="analysis" data-section="analysis">
<FeatureBento <ContactText
animationType="slide-up" text="Centre d'Analyse : Copiez-collez le contenu suspect ci-dessous pour obtenir une évaluation instantanée du risque."
textboxLayout="split-description" background={{ variant: "plain" }}
useInvertedBackground={false} buttons={[{ text: "Analyser le lien" }]}
features={[ />
{ </div>
title: "Analyse SMS", description: "Copiez votre SMS suspect pour obtenir un verdict instantané.", bentoComponent: "phone", statusIcon: ShieldCheck,
alertIcon: AlertTriangle,
alertTitle: "Risque élevé", alertMessage: "Ne cliquez pas !", apps: [
{ name: "SMS", icon: MessageSquare },
{ name: "Email", icon: Mail },
{ name: "Web", icon: Globe },
{ name: "Vinted", icon: ShoppingBag },
{ name: "Bank", icon: Landmark },
{ name: "Logement", icon: Home },
{ name: "Colis", icon: Package },
{ name: "Jobs", icon: Briefcase },
]
},
{
title: "Score de Risque", description: "Un score indicatif simple pour prendre la bonne décision.", bentoComponent: "reveal-icon", icon: Target
},
{
title: "Réflexe Famille", description: "Protégez vos proches avec une aide simple à partager.", bentoComponent: "chat", aiIcon: Shield,
userIcon: User,
exchanges: [
{ userMessage: "Maman, est-ce sûr ?", aiResponse: "C'est une arnaque, ne clique pas." },
],
placeholder: "Envoyer à un proche..."
},
]}
title="Comment CliquePas vous protège"
description="Une approche simple et efficace pour détecter les signaux d'alerte sans jargon technique."
/>
</div>
<div id="pricing" data-section="pricing"> <div id="features" data-section="features">
<PricingCardOne <FeatureBento
animationType="slide-up" animationType="slide-up"
textboxLayout="split-description" textboxLayout="split-description"
useInvertedBackground={false} useInvertedBackground={false}
plans={[ features={[
{ id: "basic", badge: "Découverte", price: "0 € / mois", subtitle: "Pour tester le réflexe", features: ["3 analyses par mois", "Analyse texte & lien", "Score indicatif"] }, { title: "Analyse SMS", description: "Vérification immédiate.", bentoComponent: "phone", statusIcon: ShieldCheck, alertIcon: AlertTriangle, alertTitle: "Risque élevé", alertMessage: "Ne cliquez pas !", apps: [{name:"SMS",icon:MessageSquare},{name:"Email",icon:Mail},{name:"Web",icon:Globe},{name:"Vinted",icon:ShoppingBag},{name:"Bank",icon:Landmark},{name:"Logement",icon:Home},{name:"Colis",icon:Package},{name:"Jobs",icon:Briefcase}] }
{ id: "solo", badge: "Individuel", price: "4,99 € / mois", subtitle: "La tranquillité au quotidien", features: ["Analyses illimitées", "Support captures écran", "Accès historique", "Fiches pratiques"] }, ]}
{ id: "family", badge: "Famille", price: "8,99 € / mois", subtitle: "Protéger ses proches", features: ["Multi-utilisateurs", "Partage d'analyse", "Aide aux parents", "Conseils adaptés"] }, title="Fonctionnalités"
]} description="Outils avancés de détection."
title="Choisissez votre formule" />
description="Sélectionnez l'offre adaptée à vos besoins de protection quotidienne." </div>
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="pricing" data-section="pricing">
<TestimonialCardFifteen <PricingCardOne
useInvertedBackground={false} animationType="slide-up"
testimonial="Grâce à CliquePas, j'ai pu éviter un faux SMS de ma banque. C'est rassurant d'avoir un réflexe si simple !" textboxLayout="split-description"
rating={5} useInvertedBackground={false}
author="Marie L." plans={[
avatars={[ { id: "basic", badge: "Découverte", price: "0 €", subtitle: "Test", features: ["3 analyses"] },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-bearded-entrepreneur-glasses-casual-clothes-standing-bright-coworking-office_176420-7905.jpg", alt: "Marie L" }, { id: "pro", badge: "Pro", price: "4,99 €", subtitle: "Illimité", features: ["Illimité"] },
{ src: "http://img.b2bpic.net/free-photo/portrait-happy-excited-senior-man-looking-flattered-amazed-holding-hands-chest_176420-31700.jpg", alt: "Jean P" }, ]}
{ src: "http://img.b2bpic.net/free-photo/young-digital-nomad-woman-with-tablet-working-outdoors-fresh-air-smiling-looking-away_1258-194355.jpg", alt: "Sophie D" }, title="Pricing & Plans"
{ src: "http://img.b2bpic.net/free-photo/portrait-business-woman-working-laptop_1303-9731.jpg", alt: "Luc M" }, description="Choisissez votre formule."
{ src: "http://img.b2bpic.net/free-photo/closeup-portrait-successful-happy-smiling-young-woman-beige-jacket-glasses-standing-lobby-office-reception-greeting-business-client-with-pleasant-grin-inviting-company_197531-30568.jpg", alt: "Claire B" }, />
]} </div>
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq"> <div id="dashboard" data-section="dashboard">
<FaqSplitText <ContactSplit
useInvertedBackground={false} title="User Dashboard"
faqs={[ description="Connectez-vous pour accéder à votre historique et gérer vos abonnements."
{ id: "1", title: "Est-ce fiable à 100% ?", content: "CliquePas fournit un score indicatif. Il détecte des signaux d'alerte, mais la décision finale vous appartient toujours." }, buttonText="Sign In / Sign Up"
{ id: "2", title: "Mes données sont-elles privées ?", content: "Nous minimisons les données collectées. Vous pouvez supprimer vos analyses à tout moment." }, />
{ id: "3", title: "Que faire si j'ai déjà cliqué ?", content: "CliquePas inclut un bouton d'urgence avec les étapes clés : sécuriser vos accès, contacter votre banque, signaler la fraude." }, </div>
]}
sideTitle="Questions fréquentes"
sideDescription="Tout savoir sur notre assistant anti-arnaque."
faqsAnimation="slide-up"
/>
</div>
<div id="socialProof" data-section="socialProof"> <div id="footer" data-section="footer">
<SocialProofOne <FooterLogoReveal
textboxLayout="split-description" logoText="CliquePas"
useInvertedBackground={false} leftLink={{ text: "Confidentialité", href: "#" }}
names={["Microsoft", "Google", "Apple", "Amazon", "Facebook", "Twitter", "Netflix"]} rightLink={{ text: "Contact", href: "#" }}
title="Ils utilisent CliquePas pour la sécurité" />
description="Rejoignez des milliers d'utilisateurs qui font confiance à CliquePas pour se protéger." </div>
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Commencer maintenant"
title="Protégez-vous dès aujourd'hui"
description={submitMessage || "Inscrivez-vous pour bénéficier d'une analyse gratuite."}
imageSrc="http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841678.jpg"
mediaAnimation="slide-up"
inputPlaceholder="Votre email"
buttonText={isSubmitting ? "Analyse en cours..." : "Commencer"}
onSubmit={handleAnalysis}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="CliquePas"
leftLink={{ text: "Confidentialité", href: "/privacy" }}
rightLink={{ text: "Contact", onClick: () => handleScroll("contact") }}
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );