Initialized repository for project Integrate React component
Co-authored-by: Tarik Hennen <182493942+tarikhennen@users.noreply.github.com>
This commit is contained in:
v0
834
app/page.tsx
Normal file
834
app/page.tsx
Normal file
@@ -0,0 +1,834 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import { useState, useRef } from "react"
|
||||
import { motion, useInView } from "framer-motion"
|
||||
import {
|
||||
ArrowRight,
|
||||
Star,
|
||||
Check,
|
||||
MessageSquare,
|
||||
Users,
|
||||
Zap,
|
||||
Shield,
|
||||
Brain,
|
||||
Sparkles,
|
||||
Mail,
|
||||
MapPin,
|
||||
Github,
|
||||
Twitter,
|
||||
Linkedin,
|
||||
Plus,
|
||||
Minus,
|
||||
GraduationCap,
|
||||
Building2,
|
||||
Menu,
|
||||
X,
|
||||
} from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import Image from "next/image"
|
||||
|
||||
function Navigation() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo and Brand */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Image src="/cercle-gpt-logo.png" alt="Cercle GPT Logo" width={40} height={40} className="rounded-lg" />
|
||||
<span className="text-xl font-bold text-gray-900 dark:text-white">Cercle GPT</span>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
<a
|
||||
href="#features"
|
||||
className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
Fonctionnalités
|
||||
</a>
|
||||
<a
|
||||
href="#testimonials"
|
||||
className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
Témoignages
|
||||
</a>
|
||||
<a
|
||||
href="#faq"
|
||||
className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
<Button>Accéder à la bêta</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="md:hidden p-2 text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden py-4 space-y-4">
|
||||
<a
|
||||
href="#features"
|
||||
className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
Fonctionnalités
|
||||
</a>
|
||||
<a
|
||||
href="#testimonials"
|
||||
className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
Témoignages
|
||||
</a>
|
||||
<a
|
||||
href="#faq"
|
||||
className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
<Button className="w-full">Accéder à la bêta</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
// Hero Section Component
|
||||
function HeroSection() {
|
||||
return (
|
||||
<section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 overflow-hidden pt-16">
|
||||
{/* Background Elements */}
|
||||
<div className="absolute inset-0 opacity-5"></div>
|
||||
<div className="absolute top-20 left-20 w-72 h-72 bg-blue-400/20 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 right-20 w-96 h-96 bg-purple-400/20 rounded-full blur-3xl"></div>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-6 text-center">
|
||||
{/* Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-100 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 mb-8"
|
||||
>
|
||||
<GraduationCap className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
<span className="text-sm font-medium text-blue-700 dark:text-blue-300">
|
||||
Bêta exclusive pour les étudiants IHECS Master 2
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6 leading-tight"
|
||||
>
|
||||
Multipliez vos perspectives
|
||||
<br />
|
||||
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
académiques
|
||||
</span>
|
||||
<br />
|
||||
avec plusieurs IA
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="text-xl text-gray-600 dark:text-gray-300 mb-12 max-w-3xl mx-auto leading-relaxed"
|
||||
>
|
||||
Comparez instantanément les réponses de GPT-4, Claude, Gemini et plus encore. Enrichissez vos mémoires,
|
||||
affinez votre pensée critique et découvrez des angles d'analyse inédits pour vos travaux académiques.
|
||||
</motion.p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center mb-16"
|
||||
>
|
||||
<Button size="lg" className="text-lg px-8 py-6">
|
||||
Accéder à la bêta
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
<Button variant="outline" size="lg" className="text-lg px-8 py-6 bg-transparent">
|
||||
Voir la démo
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-2xl mx-auto"
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">5+ IA</div>
|
||||
<div className="text-gray-600 dark:text-gray-400">Comparées simultanément</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">3x</div>
|
||||
<div className="text-gray-600 dark:text-gray-400">Plus de perspectives</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">100%</div>
|
||||
<div className="text-gray-600 dark:text-gray-400">Étudiants IHECS M2</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// Features Section Component
|
||||
function FeaturesSection() {
|
||||
const ref = useRef(null)
|
||||
const isInView = useInView(ref, { once: true })
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: <MessageSquare className="w-8 h-8" />,
|
||||
title: "Comparaison multi-IA en temps réel",
|
||||
description:
|
||||
"Posez une question et obtenez simultanément les réponses de GPT-4, Claude, Gemini et d'autres modèles. Identifiez les convergences et divergences pour enrichir votre analyse critique.",
|
||||
},
|
||||
{
|
||||
icon: <Brain className="w-8 h-8" />,
|
||||
title: "Pensée critique augmentée",
|
||||
description:
|
||||
"Confrontez différentes perspectives d'IA pour développer votre esprit critique. Parfait pour analyser des concepts complexes, débattre d'idées et construire des argumentations solides.",
|
||||
},
|
||||
{
|
||||
icon: <Zap className="w-8 h-8" />,
|
||||
title: "Recherche académique accélérée",
|
||||
description:
|
||||
"Gagnez des heures sur vos recherches de mémoire. Explorez rapidement plusieurs angles d'approche, identifiez des sources pertinentes et structurez vos idées plus efficacement.",
|
||||
},
|
||||
{
|
||||
icon: <Users className="w-8 h-8" />,
|
||||
title: "Collaboration étudiante",
|
||||
description:
|
||||
"Partagez vos conversations multi-IA avec vos pairs, co-construisez des connaissances et bénéficiez des découvertes de vos collègues pour vos projets de groupe.",
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-8 h-8" />,
|
||||
title: "Intégrité académique garantie",
|
||||
description:
|
||||
"Outils de citation automatique et vérification des sources pour respecter les normes académiques. Utilisez l'IA comme assistant de recherche, pas comme substitut.",
|
||||
},
|
||||
{
|
||||
icon: <Sparkles className="w-8 h-8" />,
|
||||
title: "Synthèse intelligente",
|
||||
description:
|
||||
"L'IA analyse les réponses multiples et génère des synthèses structurées. Identifiez rapidement les points clés, contradictions et pistes de réflexion pour vos travaux.",
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section id="features" ref={ref} className="py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">Votre avantage académique multi-IA</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
|
||||
Des outils conçus pour les étudiants exigeants qui veulent exceller dans leurs mémoires, projets et
|
||||
recherches académiques
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="p-6 h-full hover:shadow-lg transition-shadow">
|
||||
<div className="text-blue-600 dark:text-blue-400 mb-4">{feature.icon}</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">{feature.title}</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">{feature.description}</p>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// Waitlist Section Component for Other Institutions
|
||||
function WaitlistSection() {
|
||||
const ref = useRef(null)
|
||||
const isInView = useInView(ref, { once: true })
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [gdprConsent, setGdprConsent] = useState(false)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!gdprConsent) {
|
||||
alert("Veuillez accepter la politique de confidentialité pour continuer.")
|
||||
return
|
||||
}
|
||||
setSubmitted(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<section ref={ref} className="py-20 bg-white dark:bg-gray-900">
|
||||
<div className="max-w-4xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<Building2 className="w-16 h-16 text-blue-600 dark:text-blue-400 mx-auto mb-6" />
|
||||
<h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Votre établissement souhaite rejoindre la bêta ?
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Cercle GPT est actuellement en phase bêta exclusive pour les étudiants IHECS Master 2. Inscrivez votre
|
||||
établissement sur notre liste d'attente pour être parmi les premiers à accéder à la plateforme.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Card className="p-8">
|
||||
{!submitted ? (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="institutionName">Nom de l'établissement *</Label>
|
||||
<Input id="institutionName" placeholder="Université de..." required />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="institutionType">Type d'établissement *</Label>
|
||||
<Input id="institutionType" placeholder="Université, École..." required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="contactName">Nom du contact *</Label>
|
||||
<Input id="contactName" placeholder="Prénom Nom" required />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="contactRole">Fonction *</Label>
|
||||
<Input id="contactRole" placeholder="Professeur, Directeur..." required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="contactEmail">Email professionnel *</Label>
|
||||
<Input id="contactEmail" type="email" placeholder="contact@etablissement.edu" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="studentCount">Nombre d'étudiants potentiels</Label>
|
||||
<Input id="studentCount" type="number" placeholder="100" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="message">Pourquoi Cercle GPT intéresse votre établissement ?</Label>
|
||||
<Textarea id="message" placeholder="Parlez-nous de vos besoins et objectifs..." rows={4} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<Checkbox
|
||||
id="gdpr-waitlist"
|
||||
checked={gdprConsent}
|
||||
onCheckedChange={(checked) => setGdprConsent(checked as boolean)}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor="gdpr-waitlist" className="text-sm leading-relaxed cursor-pointer">
|
||||
J'accepte que mes données soient collectées et traitées conformément à la{" "}
|
||||
<a
|
||||
href="https://lecercle.ai/politique-de-confidentialite/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 dark:text-blue-400 hover:underline font-medium"
|
||||
>
|
||||
politique de confidentialité
|
||||
</a>{" "}
|
||||
de Cercle GPT. *
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" size="lg">
|
||||
Rejoindre la liste d'attente
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center">
|
||||
Nous vous contacterons dès que Cercle GPT sera disponible pour votre établissement
|
||||
</p>
|
||||
</form>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Check className="w-8 h-8 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Merci pour votre inscription !
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Votre établissement a été ajouté à notre liste d'attente. Nous vous contacterons très prochainement.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// Testimonials Section Component
|
||||
function TestimonialsSection() {
|
||||
const ref = useRef(null)
|
||||
const isInView = useInView(ref, { once: true })
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
name: "Sophie Dubois",
|
||||
role: "Étudiante Master 2, Communication",
|
||||
university: "IHECS",
|
||||
content:
|
||||
"Comparer les réponses de 5 IA différentes m'a permis d'identifier des angles d'analyse que je n'aurais jamais trouvés seule. Mon mémoire sur les réseaux sociaux a gagné en profondeur grâce à ces perspectives multiples.",
|
||||
avatar: "👩🎓",
|
||||
},
|
||||
{
|
||||
name: "Thomas Laurent",
|
||||
role: "Étudiant Master 2, Journalisme",
|
||||
university: "IHECS",
|
||||
content:
|
||||
"Pour mes enquêtes journalistiques, pouvoir confronter différentes IA m'aide à vérifier les faits sous plusieurs angles. C'est devenu indispensable pour ma rigueur professionnelle.",
|
||||
avatar: "👨💼",
|
||||
},
|
||||
{
|
||||
name: "Marie Petit",
|
||||
role: "Étudiante Master 2, Relations Publiques",
|
||||
university: "IHECS",
|
||||
content:
|
||||
"J'ai divisé par deux le temps de mes recherches bibliographiques. Les synthèses multi-IA m'aident à structurer mes idées et à identifier rapidement les sources les plus pertinentes.",
|
||||
avatar: "👩💻",
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section id="testimonials" ref={ref} className="py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">Ils excellent avec Cercle GPT</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400">
|
||||
Découvrez comment les étudiants IHECS utilisent le multi-IA pour leurs travaux académiques
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{testimonials.map((testimonial, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="p-6 h-full">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="text-3xl">{testimonial.avatar}</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">{testimonial.name}</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{testimonial.role}</p>
|
||||
<p className="text-sm text-blue-600 dark:text-blue-400">{testimonial.university}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-700 dark:text-gray-300 italic">"{testimonial.content}"</p>
|
||||
<div className="flex text-yellow-400 mt-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star key={i} className="w-4 h-4 fill-current" />
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// FAQ Section Component
|
||||
function FAQSection() {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(null)
|
||||
const ref = useRef(null)
|
||||
const isInView = useInView(ref, { once: true })
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: "Pourquoi utiliser plusieurs IA plutôt qu'une seule ?",
|
||||
answer:
|
||||
"Chaque modèle d'IA a ses forces : GPT-4 excelle en créativité, Claude en analyse nuancée, Gemini en recherche factuelle. En les comparant, vous obtenez une vision plus complète et développez votre esprit critique, essentiel pour vos travaux académiques.",
|
||||
},
|
||||
{
|
||||
question: "Comment Cercle GPT améliore-t-il mes recherches de mémoire ?",
|
||||
answer:
|
||||
"En posant la même question à 5 IA différentes, vous découvrez des angles d'analyse variés, identifiez des sources complémentaires et construisez une argumentation plus solide. C'est comme avoir 5 assistants de recherche avec des expertises différentes.",
|
||||
},
|
||||
{
|
||||
question: "Est-ce que l'utilisation de Cercle GPT respecte l'intégrité académique ?",
|
||||
answer:
|
||||
"Absolument. Cercle GPT est un outil de recherche et d'analyse, pas un générateur de contenu à copier-coller. Nous incluons des outils de citation et encourageons l'utilisation critique des réponses pour enrichir votre réflexion personnelle.",
|
||||
},
|
||||
{
|
||||
question: "Quels types de travaux académiques sont adaptés à Cercle GPT ?",
|
||||
answer:
|
||||
"Mémoires, projets de recherche, analyses critiques, revues de littérature, préparation d'exposés, brainstorming créatif, vérification de faits journalistiques... Tout travail nécessitant recherche et analyse approfondie.",
|
||||
},
|
||||
{
|
||||
question: "Puis-je collaborer avec d'autres étudiants IHECS ?",
|
||||
answer:
|
||||
"Oui ! Partagez vos conversations multi-IA, travaillez ensemble sur des projets de groupe et apprenez des découvertes de vos pairs. La collaboration enrichit l'expérience d'apprentissage.",
|
||||
},
|
||||
{
|
||||
question: "Comment mes données académiques sont-elles protégées ?",
|
||||
answer:
|
||||
"Toutes vos conversations sont chiffrées de bout en bout. Nous ne partageons jamais vos recherches ou données personnelles. Votre travail académique reste strictement confidentiel et vous appartient entièrement.",
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section id="faq" ref={ref} className="py-20 bg-white dark:bg-gray-900">
|
||||
<div className="max-w-4xl mx-auto px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">Questions fréquentes</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400">Tout ce que vous devez savoir sur Cercle GPT</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="overflow-hidden">
|
||||
<button
|
||||
onClick={() => setOpenIndex(openIndex === index ? null : index)}
|
||||
className="w-full p-6 text-left flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">{faq.question}</h3>
|
||||
{openIndex === index ? (
|
||||
<Minus className="w-5 h-5 text-gray-500 flex-shrink-0" />
|
||||
) : (
|
||||
<Plus className="w-5 h-5 text-gray-500 flex-shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
{openIndex === index && (
|
||||
<div className="px-6 pb-6">
|
||||
<p className="text-gray-600 dark:text-gray-400">{faq.answer}</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// Contact Section Component
|
||||
function ContactSection() {
|
||||
const ref = useRef(null)
|
||||
const isInView = useInView(ref, { once: true })
|
||||
const [gdprConsent, setGdprConsent] = useState(false)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!gdprConsent) {
|
||||
alert("Veuillez accepter la politique de confidentialité pour continuer.")
|
||||
return
|
||||
}
|
||||
alert("Message envoyé avec succès !")
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" ref={ref} className="py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">Contactez-nous</h2>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
|
||||
Des questions ? Nous serions ravis de vous entendre. Envoyez-nous un message et nous vous répondrons dans
|
||||
les plus brefs délais.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<Mail className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Email</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">contact@cerclegpt.be</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||
<MapPin className="w-6 h-6 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">Adresse</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400">IHECS, Rue de l'Étuve 58-60, 1000 Bruxelles</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<Card className="p-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="firstName">Prénom</Label>
|
||||
<Input id="firstName" placeholder="Jean" required />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="lastName">Nom</Label>
|
||||
<Input id="lastName" placeholder="Dupont" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="jean.dupont@ihecs.be" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="subject">Sujet</Label>
|
||||
<Input id="subject" placeholder="Comment pouvons-nous vous aider ?" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="contactMessage">Message</Label>
|
||||
<Textarea id="contactMessage" placeholder="Parlez-nous de votre demande..." rows={5} required />
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<Checkbox
|
||||
id="gdpr-contact"
|
||||
checked={gdprConsent}
|
||||
onCheckedChange={(checked) => setGdprConsent(checked as boolean)}
|
||||
required
|
||||
/>
|
||||
<Label htmlFor="gdpr-contact" className="text-sm leading-relaxed cursor-pointer">
|
||||
J'accepte que mes données soient collectées et traitées conformément à la{" "}
|
||||
<a
|
||||
href="https://lecercle.ai/politique-de-confidentialite/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 dark:text-blue-400 hover:underline font-medium"
|
||||
>
|
||||
politique de confidentialité
|
||||
</a>{" "}
|
||||
de Cercle GPT. *
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full">
|
||||
Envoyer le message
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// Footer Component
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="bg-gray-900 text-white py-16">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Image src="/cercle-gpt-logo.png" alt="Cercle GPT Logo" width={32} height={32} className="rounded-lg" />
|
||||
<h3 className="text-2xl font-bold">Cercle GPT</h3>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-4">Plateforme multi-IA pour les étudiants et chercheurs de l'IHECS.</p>
|
||||
<div className="flex gap-4">
|
||||
<Github className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
|
||||
<Twitter className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
|
||||
<Linkedin className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Produit */}
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Produit</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li>
|
||||
<a href="#features" className="hover:text-white transition-colors">
|
||||
Fonctionnalités
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Bêta IHECS
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Liste d'attente
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Ressources */}
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Ressources</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Guide d'utilisation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Tutoriels
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Communauté
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Support */}
|
||||
<div>
|
||||
<h4 className="font-semibold mb-4">Support</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Centre d'aide
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#contact" className="hover:text-white transition-colors">
|
||||
Nous contacter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-white transition-colors">
|
||||
Statut
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://lecercle.ai/politique-de-confidentialite/"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
Confidentialité
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-800 pt-8 text-center text-gray-400">
|
||||
<p>© 2025 Cercle GPT. Tous droits réservés.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
// Main Website Component
|
||||
export default function CercleGPTWebsite() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white dark:bg-gray-900">
|
||||
<Navigation />
|
||||
<HeroSection />
|
||||
<FeaturesSection />
|
||||
<TestimonialsSection />
|
||||
<WaitlistSection />
|
||||
<FAQSection />
|
||||
<ContactSection />
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user