Update src/app/page.tsx
This commit is contained in:
121
src/app/page.tsx
121
src/app/page.tsx
@@ -12,6 +12,7 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
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";
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -54,10 +55,9 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "hero" },
|
||||
{ name: "Fonctionnement", id: "features" },
|
||||
{ name: "Analysis", id: "analysis" },
|
||||
{ name: "Tarifs", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Aide", id: "contact" },
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
]}
|
||||
brandName="CliquePas"
|
||||
/>
|
||||
@@ -69,53 +69,32 @@ export default function LandingPage() {
|
||||
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."
|
||||
tag="Nouvelle solution de protection"
|
||||
buttons={[{ text: "Analyser gratuitement", onClick: () => handleScroll("contact") }]}
|
||||
buttons={[{ text: "Analyser gratuitement", onClick: () => handleScroll("analysis") }]}
|
||||
buttonAnimation="slide-up"
|
||||
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/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é" },
|
||||
{ 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="analysis" data-section="analysis">
|
||||
<ContactText
|
||||
text="Centre d'Analyse : Copiez-collez le contenu suspect ci-dessous pour obtenir une évaluation instantanée du risque."
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[{ text: "Analyser le lien" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
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: "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}] }
|
||||
]}
|
||||
title="Comment CliquePas vous protège"
|
||||
description="Une approche simple et efficace pour détecter les signaux d'alerte sans jargon technique."
|
||||
title="Fonctionnalités"
|
||||
description="Outils avancés de détection."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -125,77 +104,27 @@ export default function LandingPage() {
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "basic", badge: "Découverte", price: "0 € / mois", subtitle: "Pour tester le réflexe", features: ["3 analyses par mois", "Analyse texte & lien", "Score indicatif"] },
|
||||
{ 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"] },
|
||||
{ id: "basic", badge: "Découverte", price: "0 €", subtitle: "Test", features: ["3 analyses"] },
|
||||
{ id: "pro", badge: "Pro", price: "4,99 €", subtitle: "Illimité", features: ["Illimité"] },
|
||||
]}
|
||||
title="Choisissez votre formule"
|
||||
description="Sélectionnez l'offre adaptée à vos besoins de protection quotidienne."
|
||||
title="Pricing & Plans"
|
||||
description="Choisissez votre formule."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Grâce à CliquePas, j'ai pu éviter un faux SMS de ma banque. C'est rassurant d'avoir un réflexe si simple !"
|
||||
rating={5}
|
||||
author="Marie L."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-young-bearded-entrepreneur-glasses-casual-clothes-standing-bright-coworking-office_176420-7905.jpg", alt: "Marie L" },
|
||||
{ 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" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-business-woman-working-laptop_1303-9731.jpg", alt: "Luc M" },
|
||||
{ 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" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ 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." },
|
||||
{ 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." },
|
||||
]}
|
||||
sideTitle="Questions fréquentes"
|
||||
sideDescription="Tout savoir sur notre assistant anti-arnaque."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
names={["Microsoft", "Google", "Apple", "Amazon", "Facebook", "Twitter", "Netflix"]}
|
||||
title="Ils utilisent CliquePas pour la sécurité"
|
||||
description="Rejoignez des milliers d'utilisateurs qui font confiance à CliquePas pour se protéger."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<div id="dashboard" data-section="dashboard">
|
||||
<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}
|
||||
title="User Dashboard"
|
||||
description="Connectez-vous pour accéder à votre historique et gérer vos abonnements."
|
||||
buttonText="Sign In / Sign Up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="CliquePas"
|
||||
leftLink={{ text: "Confidentialité", href: "/privacy" }}
|
||||
rightLink={{ text: "Contact", onClick: () => handleScroll("contact") }}
|
||||
leftLink={{ text: "Confidentialité", href: "#" }}
|
||||
rightLink={{ text: "Contact", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user