Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ad68966291 | |||
| e9e5eac179 | |||
| b3695c4f32 |
234
src/app/page.tsx
234
src/app/page.tsx
@@ -1,216 +1,24 @@
|
|||||||
"use client";
|
export default function Home() {
|
||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
||||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
||||||
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
|
||||||
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
|
||||||
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
||||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
||||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
||||||
import ContactText from "@/components/sections/contact/ContactText";
|
|
||||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
||||||
import { Sparkles, Zap, Users, Pen, Vote, Trophy, MessageCircle, Share2, Smartphone, Flame, HelpCircle, Smile, Heart, Crown } from "lucide-react";
|
|
||||||
|
|
||||||
export default function HomePage() {
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<div className="min-h-screen bg-gradient-to-b from-slate-950 to-slate-900">
|
||||||
defaultButtonVariant="hover-magnetic"
|
<div id="hero" data-section="hero" className="w-full py-20 px-4">
|
||||||
defaultTextAnimation="reveal-blur"
|
<div className="max-w-4xl mx-auto text-center space-y-6">
|
||||||
borderRadius="soft"
|
<h1 className="text-5xl md:text-7xl font-bold text-white leading-tight">
|
||||||
contentWidth="smallMedium"
|
La Cochonne des Problèmes
|
||||||
sizing="largeSizeMediumTitles"
|
</h1>
|
||||||
background="circleGradient"
|
<p className="text-xl md:text-2xl text-slate-300 font-semibold">
|
||||||
cardStyle="layered-gradient"
|
The Ultimate Party Game for Friends
|
||||||
primaryButtonStyle="shadow"
|
</p>
|
||||||
secondaryButtonStyle="glass"
|
<p className="text-lg text-slate-400 max-w-2xl mx-auto">
|
||||||
headingFontWeight="bold"
|
Write anonymously, vote to guess, and discover hilarious truths that embarrass! Create unforgettable moments of laughter with your friends.
|
||||||
>
|
</p>
|
||||||
<div id="nav" data-section="nav">
|
<div className="pt-4">
|
||||||
<NavbarStyleFullscreen
|
<button className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-colors">
|
||||||
navItems={[
|
Start Playing Now
|
||||||
{ name: "Home", id: "home" },
|
</button>
|
||||||
{ name: "How It Works", id: "how-it-works" },
|
</div>
|
||||||
{ name: "Features", id: "features" },
|
</div>
|
||||||
{ name: "Play Now", id: "play-now" },
|
|
||||||
{ name: "FAQ", id: "faq" },
|
|
||||||
]}
|
|
||||||
brandName="La Cochonne"
|
|
||||||
bottomLeftText="Party Game"
|
|
||||||
bottomRightText="Friends & Fun"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div id="hero" data-section="hero">
|
|
||||||
<HeroBillboard
|
|
||||||
title="La Cochonne des Problèmes"
|
|
||||||
description="Le jeu de soirée ultime entre amis. Écrivez anonymement, votez pour deviner, et découvrez les vérités amusantes qui dérangent!"
|
|
||||||
background={{ variant: "sparkles-gradient" }}
|
|
||||||
tag="Party Game 🎉"
|
|
||||||
tagIcon={Sparkles}
|
|
||||||
tagAnimation="slide-up"
|
|
||||||
buttons={[
|
|
||||||
{ text: "Créer une partie", href: "/create" },
|
|
||||||
{ text: "Rejoindre une partie", href: "/join" },
|
|
||||||
]}
|
|
||||||
buttonAnimation="slide-up"
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/stylish-friends-sitting-cafe_273609-5473.jpg?_wi=1"
|
|
||||||
imageAlt="Friends playing party game on smartphones"
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="how-it-works" data-section="how-it-works">
|
|
||||||
<FeatureHoverPattern
|
|
||||||
title="Comment ça marche?"
|
|
||||||
description="Un processus simple et rapide pour des soirées inoubliables"
|
|
||||||
tag="Règles du Jeu"
|
|
||||||
tagIcon={Zap}
|
|
||||||
tagAnimation="slide-up"
|
|
||||||
features={[
|
|
||||||
{
|
|
||||||
icon: Users,
|
|
||||||
title: "Rejoindre", description: "Entrez un code de partie ou créez-en une nouvelle. Choisissez votre pseudo anonyme et rejoignez vos amis."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Pen,
|
|
||||||
title: "Écrire", description: "Écrivez des phrases amusantes et anonymes sur vos amis. Accusez-les, taquinez-les, soyez créatif!"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Vote,
|
|
||||||
title: "Voter", description: "Les messages apparaissent un par un. Votez pour la personne qui correspond le mieux à chaque phrase."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Trophy,
|
|
||||||
title: "Gagner", description: "Les résultats des votes créent des moments hilarants. Découvrez qui pensait quoi de vous!"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: MessageCircle,
|
|
||||||
title: "Rire", description: "Révélations amusantes, réactions gênées et souvenirs inoubliables avec vos amis."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Share2,
|
|
||||||
title: "Partager", description: "Consultez les statistiques amusantes et les résultats globaux de la partie."
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
textboxLayout="default"
|
|
||||||
animationType="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
|
||||||
<MediaAbout
|
|
||||||
title="🐷 La Cochonne en Action: Des Moments Hilarants Garantis!"
|
|
||||||
description="Design optimisé pour smartphone, jeu en temps réel avec synchronisation instantanée entre tous les joueurs, totalement anonyme et hilarant. Préparez-vous à découvrir ce que vos amis pensent VRAIMENT de vous!"
|
|
||||||
tag="Expérience Mobile 📱"
|
|
||||||
tagIcon={Smartphone}
|
|
||||||
tagAnimation="slide-up"
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/group-close-friends-playing-space-sim-videogame-modern-gaming-console-young-adult-people-sitting-sofa-home-while-enjoying-time-together-fun-leisure-activity-entertainment-device_482257-43301.jpg?_wi=1"
|
|
||||||
imageAlt="Game room interface showing voting screen"
|
|
||||||
buttons={[{ text: "Commencer maintenant", href: "/create" }]}
|
|
||||||
buttonAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="social-proof" data-section="social-proof">
|
|
||||||
<SocialProofOne
|
|
||||||
title="💖 Pourquoi Tes Amis Adorent La Cochonne"
|
|
||||||
description="Ce jeu ne ment pas - il expose les plus gros secrets entre amis avec un humour sans égal!"
|
|
||||||
tag="Trending 🔥"
|
|
||||||
tagIcon={Flame}
|
|
||||||
tagAnimation="slide-up"
|
|
||||||
names={[
|
|
||||||
"4-12 joueurs = Fun illimité", "Aucune installation requise", "Fonctionne partout, tout le temps", "Anonyme à 100% (ou presque!)", "Jeu en temps réel ULTRA rapide", "Zéro pub, zéro ennui", "Gratuit et RIDICULEMENT amusant", "Les secrets explosent à chaque tour"
|
|
||||||
]}
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
showCard={true}
|
|
||||||
speed={40}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="faq" data-section="faq">
|
|
||||||
<FaqBase
|
|
||||||
faqs={[
|
|
||||||
{
|
|
||||||
id: "1", title: "🎮 Combien de joueurs? Ou est-ce que ça devient du chaos total?", content: "4 à 12 joueurs = PARFAIT pour les dramas. Vous pouvez jouer à plus, mais à 20+ joueurs, c'est juste du chaos amusant (ce qui n'est pas forcément mauvais!). Minimum 2 joueurs (pour les couple game), maximum illimité techniquement."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2", title: "🤐 Les messages restent-ils vraiment anonymes? Ou mes amis vont me démasquer?", content: "Oui! 100% anonyme. Le système ne garde pas trace de qui a écrit quoi. C'est LE cœur du jeu - vous pouvez être aussi brutalement honnête que vous voulez sans crainte. Personne ne saura que c'était vous (sauf si vous craquez et l'avoue en riant!)."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3", title: "📱 J'ai peur des téléchargements. Besoin d'une app?", content: "NON! C'est une web-app. Elle vit dans votre navigateur. Aucune installation, aucune mise à jour, aucun truc qui prend de la place sur votre téléphone. Juste... accédez et jouez. C'est ça la magie."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4", title: "⏱️ Combien de temps avant que quelqu'un se fâche?", content: "Une partie typique dure 15-45 minutes selon le nombre de joueurs et de messages. Généralement, les amis ne se fâchent que 5 minutes avant de rire... et alors qu'on s'assure que c'est juste du fun!"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5", title: "🔄 On peut rejouer avec le même groupe sans penser à la même chose?", content: "Absolument! Jouez autant que vous voulez. Les résultats se réinitialisent à chaque partie, donc c'est toujours frais. Les secrets changent à chaque fois - vos amis vont trouver encore plus de trucs amusants sur vous!"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "6", title: "🚀 Comment ça marche pour créer une partie? Est-ce trop compliqué?", content: "Hyper simple! L'hôte crée une partie (30 secondes max), le système génère un code unique. Les autres joueurs rejoignent avec ce code. L'hôte lance quand tout le monde est prêt. Boom - le drama commence!"
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="❓ On a Des Questions (Et Elles Sont Hilarantes)"
|
|
||||||
description="Trouvez les réponses avant de vous lancer dans le chaos!"
|
|
||||||
tag="Aide & Support 🆘"
|
|
||||||
tagIcon={HelpCircle}
|
|
||||||
tagAnimation="slide-up"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
faqsAnimation="slide-up"
|
|
||||||
animationType="smooth"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="play-now" data-section="play-now">
|
|
||||||
<ContactText
|
|
||||||
text="🎉 Prêt à Créer du Drama et Des Souvenirs Hilarants? La Cochonne T'Attend! Avec Tes Amis, C'est Plus Drôle. Sans Eux? Tu Vas Te Sentir Seul (Fais-Les Venir!)."
|
|
||||||
animationType="entrance-slide"
|
|
||||||
buttons={[
|
|
||||||
{ text: "🎪 Créer une Partie MAINTENANT", href: "/create" },
|
|
||||||
{ text: "📲 Rejoindre le Drama", href: "/join" },
|
|
||||||
]}
|
|
||||||
background={{ variant: "plain" }}
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
|
||||||
<FooterMedia
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/four-beautiful-girls-resting-party_176420-6194.jpg?_wi=1"
|
|
||||||
imageAlt="Friends celebrating at a party"
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
title: "🎮 Jeu", items: [
|
|
||||||
{ label: "Créer une partie", href: "/create" },
|
|
||||||
{ label: "Rejoindre une partie", href: "/join" },
|
|
||||||
{ label: "Comment jouer", href: "#how-it-works" },
|
|
||||||
{ label: "Règles du Drama", href: "#faq" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "📚 Ressources", items: [
|
|
||||||
{ label: "À propos", href: "/about" },
|
|
||||||
{ label: "Conditions d'utilisation", href: "#" },
|
|
||||||
{ label: "Politique de confidentialité", href: "#" },
|
|
||||||
{ label: "Contact", href: "#" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "💬 Suivez-Nous", items: [
|
|
||||||
{ label: "Instagram", href: "https://instagram.com" },
|
|
||||||
{ label: "Twitter", href: "https://twitter.com" },
|
|
||||||
{ label: "TikTok", href: "https://tiktok.com" },
|
|
||||||
{ label: "Discord", href: "https://discord.com" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
logoText="🐷 La Cochonne"
|
|
||||||
copyrightText="© 2025 La Cochonne des Problèmes. Tous droits réservés. Sois Prudent Avec Tes Amis!"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user