Add waitlist promotion structure

Implement a structured layout for the landing page to promote the waitlist, including sections for the Hero, Challenges, Solutions, Benefits, Call to Action, Process, Testimonials, and FAQ. Each section includes visual recommendations to enhance relevance and conversion rates.
[skip gpt_engineer]

src/components/landing/HeroSection.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { ArrowRight } from 'lucide-react';
-import { Button } from '../ui/button';
-import { LoginForm } from './LoginForm';
-import { Dialog, DialogContent } from '../ui/dialog';
-import { DynamicText } from './DynamicText';
+import React from 'react'
+import { ArrowRight } from 'lucide-react'
+import { Button } from '../ui/button'
+import { Dialog, DialogContent } from '../ui/dialog'
+import { WaitlistForm } from './WaitlistForm'
+import { DynamicText } from './DynamicText'
 
 export function HeroSection() {
-  const [showLoginForm, setShowLoginForm] = React.useState(false);
+  const [showWaitlistForm, setShowWaitlistForm] = React.useState(false)
 
   return (
     <section className="relative py-20 overflow-hidden">
@@ -19,7 +19,7 @@ export function HeroSection() {
           </h1>
           <Button 
             size="lg"
-            onClick={() => setShowLoginForm(true)}
+            onClick={() => setShowWaitlistForm(true)}
             className="bg-primary text-white hover:bg-primary/90 transition-all duration-200 text-lg px-8 py-6 rounded-xl shadow-premium hover:shadow-premium-lg transform hover:scale-105 mb-6"
           >
             Je m'inscris maintenant
@@ -30,11 +30,11 @@ export function HeroSection() {
           </p>
         </div>
       </div>
-      <Dialog open={showLoginForm} onOpenChange={setShowLoginForm}>
+      <Dialog open={showWaitlistForm} onOpenChange={setShowWaitlistForm}>
         <DialogContent className="sm:max-w-[425px]">
-          <LoginForm />
+          <WaitlistForm />
         </DialogContent>
       </Dialog>
     </section>
-  );
+  )
 }

src/components/landing/WaitlistForm.tsx

@@ -0,0 +1,103 @@
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { supabase } from "@/integrations/supabase/client"
+import { useToast } from "@/hooks/use-toast"
+
+interface WaitlistFormData {
+  email: string
+  firstName: string
+  teachingLevel: string
+}
+
+export const WaitlistForm = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const { toast } = useToast()
+  const { register, handleSubmit, reset, formState: { errors } } = useForm<WaitlistFormData>()
+
+  const onSubmit = async (data: WaitlistFormData) => {
+    setIsLoading(true)
+    try {
+      const { error } = await supabase
+        .from('waitlist')
+        .insert([
+          {
+            email: data.email,
+            first_name: data.firstName,
+            teaching_level: data.teachingLevel
+          }
+        ])
+
+      if (error) throw error
+
+      toast({
+        title: "Inscription réussie !",
+        description: "Nous vous contacterons dès que la plateforme sera disponible.",
+      })
+      reset()
+    } catch (error) {
+      console.error('Error:', error)
+      toast({
+        variant: "destructive",
+        title: "Erreur",
+        description: "Une erreur est survenue lors de l'inscription. Veuillez réessayer.",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 w-full max-w-md mx-auto">
+      <div>
+        <Input
+          placeholder="Votre prénom"
+          {...register("firstName", { required: "Le prénom est requis" })}
+          className="w-full"
+        />
+        {errors.firstName && (
+          <p className="text-sm text-red-500 mt-1">{errors.firstName.message}</p>
+        )}
+      </div>
+
+      <div>
+        <Input
+          type="email"
+          placeholder="Votre email"
+          {...register("email", { 
+            required: "L'email est requis",
+            pattern: {
+              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+              message: "Email invalide"
+            }
+          })}
+          className="w-full"
+        />
+        {errors.email && (
+          <p className="text-sm text-red-500 mt-1">{errors.email.message}</p>
+        )}
+      </div>
+
+      <div>
+        <Textarea
+          placeholder="Votre niveau d'enseignement"
+          {...register("teachingLevel", { required: "Le niveau d'enseignement est requis" })}
+          className="w-full"
+        />
+        {errors.teachingLevel && (
+          <p className="text-sm text-red-500 mt-1">{errors.teachingLevel.message}</p>
+        )}
+      </div>
+
+      <Button 
+        type="submit" 
+        className="w-full bg-primary hover:bg-primary/90 text-white"
+        disabled={isLoading}
+      >
+        {isLoading ? "Inscription en cours..." : "Je m'inscris à la liste d'attente"}
+      </Button>
+    </form>
+  )
+}

src/integrations/supabase/types.ts

@@ -129,6 +129,30 @@ export type Database = {
         }
         Relationships: []
       }
+      waitlist: {
+        Row: {
+          created_at: string
+          email: string
+          first_name: string
+          id: string
+          teaching_level: string
+        }
+        Insert: {
+          created_at?: string
+          email: string
+          first_name: string
+          id?: string
+          teaching_level: string
+        }
+        Update: {
+          created_at?: string
+          email?: string
+          first_name?: string
+          id?: string
+          teaching_level?: string
+        }
+        Relationships: []
+      }
     }
     Views: {
       conversation_analytics: {

src/pages/Landing.tsx

@@ -5,12 +5,15 @@ import { HowItWorksSection } from "@/components/landing/HowItWorksSection"
 import { TestimonialsSection } from "@/components/landing/TestimonialsSection"
 import { FAQSection } from "@/components/landing/FAQSection"
 import { CTASection } from "@/components/landing/CTASection"
-import { Header } from "@/components/landing/Header"
+import { SEO } from "@/components/SEO"
 
 const Landing = () => {
   return (
     <div className="min-h-screen">
-      <Header />
+      <SEO 
+        title="PedagoIA - Assistant pédagogique intelligent" 
+        description="Votre assistant pédagogique qui vous aide à adapter vos cours, effectuer vos tâches administratives et préparer vos cours plus efficacement."
+      />
       <HeroSection />
       <ChallengesSection />
       <MetricsSection />