Update landing page CTAs and styles

Centered icons in cards, adjusted section colors, and modified CTAs for the waitlist. Updated steps to highlight benefits of joining the waitlist, including exclusive launch pricing and early access.
[skip gpt_engineer]

src/components/landing/CTASection.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, Star } from 'lucide-react';
 import { Button } from '../ui/button';
 
 export function CTASection() {
@@ -8,20 +8,21 @@ export function CTASection() {
       <div className="container mx-auto px-4">
         <div className="max-w-4xl mx-auto text-center">
           <h2 className="text-3xl md:text-4xl font-bold mb-6">
-            Prêt à transformer votre enseignement avec l'IA ?
+            Soyez parmi les premiers à transformer l'enseignement avec l'IA
           </h2>
           <p className="text-xl text-muted-foreground mb-8">
-            Rejoignez des milliers d'enseignants qui gagnent des heures de travail chaque semaine grâce à Pédagoia.
+            Rejoignez la liste d'attente et bénéficiez d'un accès prioritaire et d'un tarif exclusif de lancement.
           </p>
           <Button 
             size="lg"
-            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"
+            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 group"
           >
-            Je m'inscris gratuitement
-            <ArrowRight className="ml-2 h-5 w-5" />
+            <Star className="w-5 h-5 mr-2 group-hover:rotate-45 transition-transform" />
+            Je rejoins la liste d'attente
+            <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
           </Button>
         </div>
       </div>
     </section>
   );
-}
+}

src/components/landing/ChallengesSection.tsx

@@ -44,7 +44,7 @@ export const ChallengesSection = () => {
 
   return (
     <>
-      <section className="py-20 bg-secondary/30">
+      <section className="py-20 bg-[#F1F0FB]">
         <div className="container mx-auto px-4">
           <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">
             Les conditions de travail des enseignants sont de plus en plus exigeantes
@@ -53,9 +53,11 @@ export const ChallengesSection = () => {
             {challenges.map((challenge, index) => (
               <div 
                 key={index}
-                className="bg-white p-8 rounded-xl shadow-premium hover:shadow-premium-lg transition-all duration-200 text-center"
+                className="bg-white p-8 rounded-xl shadow-premium hover:shadow-premium-lg transition-all duration-200 text-center flex flex-col items-center"
               >
-                {challenge.icon}
+                <div className="flex justify-center">
+                  {challenge.icon}
+                </div>
                 <h3 className="text-xl font-semibold mb-2">{challenge.title}</h3>
                 <p className="text-muted-foreground">{challenge.description}</p>
               </div>
@@ -73,9 +75,11 @@ export const ChallengesSection = () => {
             {solutions.map((solution, index) => (
               <div 
                 key={index}
-                className="p-8 rounded-xl text-center hover:scale-105 transition-all duration-200"
+                className="p-8 rounded-xl text-center hover:scale-105 transition-all duration-200 flex flex-col items-center"
               >
-                {solution.icon}
+                <div className="flex justify-center">
+                  {solution.icon}
+                </div>
                 <h3 className="text-xl font-semibold mb-2">{solution.title}</h3>
                 <p className="text-muted-foreground">{solution.description}</p>
               </div>

src/components/landing/HowItWorksSection.tsx

@@ -1,24 +1,24 @@
 import React from 'react';
-import { UserPlus, Wand2, Smile } from 'lucide-react';
+import { UserPlus, Wand2, Gift } from 'lucide-react';
 
 const steps = [
   {
     number: 1,
     icon: UserPlus,
-    title: "Inscrivez-vous gratuitement",
-    description: "Créez votre compte en quelques secondes et accédez immédiatement à nos outils."
+    title: "Rejoignez la liste d'attente",
+    description: "Inscrivez-vous en quelques secondes et soyez prévenu dès que Pedagoia sera disponible, avec un tarif de lancement exclusif."
   },
   {
     number: 2,
     icon: Wand2,
-    title: "Choisissez vos outils",
-    description: "Sélectionnez et utilisez chaque jour l'outil adapté à votre besoin du moment. De la préparation à l'évaluation."
+    title: "Soyez le premier à tester",
+    description: "En tant que membre de la liste d'attente, vous serez les premiers à accéder à notre plateforme, avant même le lancement officiel."
   },
   {
     number: 3,
-    icon: Smile,
-    title: "Retrouvez votre équilibre",
-    description: "Redécouvrez le plaisir d'enseigner en vous concentrant sur ce qui compte vraiment : l'épanouissement et la réussite de vos élèves sans négliger votre santé mentale."
+    icon: Gift,
+    title: "Bénéficiez d'un tarif de lancement",
+    description: "Profitez d'un tarif spécial réservé aux premiers utilisateurs. Vous serez ainsi les pionniers de l'outil qui va transformer l'enseignement."
   }
 ];
 
@@ -32,7 +32,7 @@ export function HowItWorksSection() {
               Comment ça marche ?
             </h2>
             <p className="text-xl text-muted-foreground mt-4 max-w-2xl mx-auto">
-              3 étapes simples vers un enseignement plus serein et efficace
+              Trois étapes simples pour être prêt à révolutionner votre enseignement
             </p>
           </div>