initial commit

2025-12-24 10:33:03 +01:00
commit 75a7b2fbd9
52 changed files with 14946 additions and 0 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+    import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+    import { Toaster } from '@/components/ui/toaster';
+    import Layout from '@/components/Layout';
+    import HomePage from '@/pages/HomePage';
+    import OrderPage from '@/pages/OrderPage';
+    import ConfirmationPage from '@/pages/ConfirmationPage';
+    import CreationsPage from '@/pages/CreationsPage';
+
+    function App() {
+      return (
+        <Router>
+          <Layout>
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="/commander" element={<OrderPage />} />
+              <Route path="/confirmation" element={<ConfirmationPage />} />
+              <Route path="/creations" element={<CreationsPage />} />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Routes>
+          </Layout>
+          <Toaster />
+        </Router>
+      );
+    }
+
+    export default App;
--- a/src/components/CallToAction.jsx
+++ b/src/components/CallToAction.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const CallToAction = () => {
+  return (
+    <motion.h1
+      className='text-xl font-bold text-white leading-8 w-full'
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5, delay: 0.5 }}
+    >
+      Let's turn your ideas into reality
+    </motion.h1>
+  );
+};
+
+export default CallToAction;
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+    import { Music2, Heart } from 'lucide-react';
+
+    const Footer = () => {
+      const currentYear = new Date().getFullYear();
+      return (
+        <footer className="bg-background/80 backdrop-blur-md shadow-t-lg py-8 text-center text-muted-foreground">
+          <div className="container mx-auto px-4">
+            <div className="flex justify-center items-center mb-4">
+              <Music2 className="h-6 w-6 text-primary mr-2" />
+              <p className="text-sm">
+                Dites le en chanson &copy; {currentYear}. Créé avec <Heart className="inline h-4 w-4 text-accent" /> par vous !
+              </p>
+            </div>
+            <p className="text-xs">
+              Transformez vos histoires en mélodies inoubliables.
+            </p>
+          </div>
+        </footer>
+      );
+    };
+
+    export default Footer;
--- a/src/components/HeroImage.jsx
+++ b/src/components/HeroImage.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+const HeroImage = () => {
+  return (
+    <div className="relative w-8 h-8 shrink-0" data-name="ic-sparkles">
+      <svg 
+        width="32" 
+        height="32" 
+        viewBox="0 0 32 32" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+        className="w-full h-full"
+      >
+        <path 
+          d="M11.787 9.5356C11.5053 8.82147 10.4947 8.82147 10.213 9.5356L8.742 13.2654C8.65601 13.4834 8.48343 13.656 8.2654 13.742L4.5356 15.213C3.82147 15.4947 3.82147 16.5053 4.5356 16.787L8.2654 18.258C8.48343 18.344 8.65601 18.5166 8.742 18.7346L10.213 22.4644C10.4947 23.1785 11.5053 23.1785 11.787 22.4644L13.258 18.7346C13.344 18.5166 13.5166 18.344 13.7346 18.258L17.4644 16.787C18.1785 16.5053 18.1785 15.4947 17.4644 15.213L13.7346 13.742C13.5166 13.656 13.344 13.4834 13.258 13.2654L11.787 9.5356Z" 
+          fill="white"
+        />
+        <path 
+          d="M23.5621 2.38257C23.361 1.87248 22.639 1.87248 22.4379 2.38257L21.3871 5.04671C21.3257 5.20245 21.2024 5.32572 21.0467 5.38714L18.3826 6.43787C17.8725 6.63904 17.8725 7.36096 18.3826 7.56214L21.0467 8.61286C21.2024 8.67428 21.3257 8.79755 21.3871 8.95329L22.4379 11.6174C22.639 12.1275 23.361 12.1275 23.5621 11.6174L24.6129 8.95329C24.6743 8.79755 24.7976 8.67428 24.9533 8.61286L27.6174 7.56214C28.1275 7.36096 28.1275 6.63904 27.6174 6.43787L24.9533 5.38714C24.7976 5.32572 24.6743 5.20245 24.6129 5.04671L23.5621 2.38257Z" 
+          fill="white"
+        />
+        <path 
+          d="M23.3373 22.2295C23.2166 21.9235 22.7834 21.9235 22.6627 22.2295L22.0323 23.828C21.9954 23.9215 21.9215 23.9954 21.828 24.0323L20.2295 24.6627C19.9235 24.7834 19.9235 25.2166 20.2295 25.3373L21.828 25.9677C21.9215 26.0046 21.9954 26.0785 22.0323 26.172L22.6627 27.7705C22.7834 28.0765 23.2166 28.0765 23.3373 27.7705L23.9677 26.172C24.0046 26.0785 24.0785 26.0046 24.172 25.9677L25.7705 25.3373C26.0765 25.2166 26.0765 24.7834 25.7705 24.6627L24.172 24.0323C24.0785 23.9954 24.0046 23.9215 23.9677 23.828L23.3373 22.2295Z" 
+          fill="white"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default HeroImage;
--- a/src/components/ImageCarousel.jsx
+++ b/src/components/ImageCarousel.jsx
@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+    import { motion, AnimatePresence } from 'framer-motion';
+    import { ChevronLeft, ChevronRight } from 'lucide-react';
+    import { Button } from '@/components/ui/button';
+
+    const carouselImages = [
+      { src: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745", alt: "DJ mixant de la musique lors d'un concert vibrant" },
+      { src: "https://images.unsplash.com/photo-1511379938547-c1f69419868d", alt: "Gros plan sur des écouteurs posés sur un clavier d'ordinateur portable" },
+      { src: "https://images.unsplash.com/photo-1487180144351-b8472da7d491", alt: "Personne jouant de la guitare acoustique avec un effet de lumière bokeh" },
+      { src: "https://images.unsplash.com/photo-1507838153414-b4b713384a76", alt: "Piano à queue dans une pièce faiblement éclairée avec des partitions" },
+      { src: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f", alt: "Microphone de studio vintage sur fond sombre" }
+    ];
+
+    const variants = {
+      enter: (direction) => {
+        return {
+          x: direction > 0 ? 1000 : -1000,
+          opacity: 0
+        };
+      },
+      center: {
+        zIndex: 1,
+        x: 0,
+        opacity: 1
+      },
+      exit: (direction) => {
+        return {
+          zIndex: 0,
+          x: direction < 0 ? 1000 : -1000,
+          opacity: 0
+        };
+      }
+    };
+
+    const swipeConfidenceThreshold = 10000;
+    const swipePower = (offset, velocity) => {
+      return Math.abs(offset) * velocity;
+    };
+
+    const ImageCarousel = () => {
+      const [[page, direction], setPage] = useState([0, 0]);
+      const imageIndex = ((page % carouselImages.length) + carouselImages.length) % carouselImages.length;
+
+      const paginate = (newDirection) => {
+        setPage([page + newDirection, newDirection]);
+      };
+
+      useEffect(() => {
+        const timer = setInterval(() => {
+          paginate(1);
+        }, 5000); // Change image every 5 seconds
+        return () => clearInterval(timer);
+      }, [page]);
+
+      return (
+        <div className="relative w-full max-w-4xl mx-auto h-72 md:h-96 overflow-hidden rounded-xl shadow-2xl">
+          <AnimatePresence initial={false} custom={direction}>
+            <motion.img
+              key={page}
+              src={carouselImages[imageIndex].src}
+              alt={carouselImages[imageIndex].alt}
+              custom={direction}
+              variants={variants}
+              initial="enter"
+              animate="center"
+              exit="exit"
+              transition={{
+                x: { type: "spring", stiffness: 300, damping: 30 },
+                opacity: { duration: 0.2 }
+              }}
+              drag="x"
+              dragConstraints={{ left: 0, right: 0 }}
+              dragElastic={1}
+              onDragEnd={(e, { offset, velocity }) => {
+                const swipe = swipePower(offset.x, velocity.x);
+                if (swipe < -swipeConfidenceThreshold) {
+                  paginate(1);
+                } else if (swipe > swipeConfidenceThreshold) {
+                  paginate(-1);
+                }
+              }}
+              className="absolute w-full h-full object-cover"
+            />
+          </AnimatePresence>
+          <div className="absolute top-1/2 left-2 transform -translate-y-1/2 z-10">
+            <Button variant="outline" size="icon" onClick={() => paginate(-1)} className="rounded-full bg-black/30 hover:bg-black/50 text-white border-none">
+              <ChevronLeft className="h-6 w-6" />
+            </Button>
+          </div>
+          <div className="absolute top-1/2 right-2 transform -translate-y-1/2 z-10">
+            <Button variant="outline" size="icon" onClick={() => paginate(1)} className="rounded-full bg-black/30 hover:bg-black/50 text-white border-none">
+              <ChevronRight className="h-6 w-6" />
+            </Button>
+          </div>
+          <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10">
+            {carouselImages.map((_, i) => (
+              <button
+                key={i}
+                onClick={() => setPage([i, i > imageIndex ? 1 : -1])}
+                className={`w-3 h-3 rounded-full ${i === imageIndex ? 'bg-primary' : 'bg-white/50 hover:bg-white/80'} transition-colors`}
+              />
+            ))}
+          </div>
+        </div>
+      );
+    };
+
+    export default ImageCarousel;
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+    import Navbar from '@/components/Navbar';
+    import Footer from '@/components/Footer';
+
+    const Layout = ({ children }) => {
+      return (
+        <div className="min-h-screen flex flex-col bg-gradient-to-br from-background to-secondary/30 dark:from-background dark:to-secondary/10">
+          <Navbar />
+          <main className="flex-grow container mx-auto px-4 py-8">
+            {children}
+          </main>
+          <Footer />
+        </div>
+      );
+    };
+
+    export default Layout;
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+    import { Link } from 'react-router-dom';
+    import { Button } from '@/components/ui/button';
+    import { Music2, Menu, X, Sparkles } from 'lucide-react';
+    import { motion, AnimatePresence } from 'framer-motion';
+
+    const Navbar = () => {
+      const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+      const toggleMobileMenu = () => {
+        setMobileMenuOpen(!mobileMenuOpen);
+      };
+
+      const navLinks = [
+        { to: "/", text: "Accueil" },
+        { to: "/creations", text: "Créations" },
+        { to: "/commander", text: "Commander une chanson", primary: true },
+      ];
+
+      const mobileMenuVariants = {
+        hidden: { opacity: 0, y: -20 },
+        visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
+        exit: { opacity: 0, y: -20, transition: { duration: 0.2 } },
+      };
+
+      return (
+        <nav className="bg-background/80 backdrop-blur-md shadow-lg sticky top-0 z-50">
+          <div className="container mx-auto px-4 py-3 flex justify-between items-center">
+            <Link to="/" className="flex items-center space-x-2 text-2xl font-bold">
+              <Music2 className="h-8 w-8 text-primary" />
+              <span className="gradient-text">Dites le en chanson</span>
+            </Link>
+            
+            <div className="hidden md:flex space-x-2 items-center">
+              <Button variant="ghost" asChild>
+                <Link to="/">Accueil</Link>
+              </Button>
+              <Button variant="ghost" asChild>
+                <Link to="/creations" className="flex items-center">
+                  <Sparkles className="h-4 w-4 mr-2 text-yellow-400" />
+                  Créations
+                </Link>
+              </Button>
+              <Button asChild className="bg-gradient-to-r from-primary to-accent hover:opacity-90 transition-opacity">
+                <Link to="/commander">Commander une chanson</Link>
+              </Button>
+            </div>
+
+            <div className="md:hidden">
+              <Button variant="ghost" onClick={toggleMobileMenu} size="icon">
+                {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+              </Button>
+            </div>
+          </div>
+
+          <AnimatePresence>
+            {mobileMenuOpen && (
+              <motion.div
+                variants={mobileMenuVariants}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+                className="md:hidden absolute top-full left-0 right-0 bg-background/95 backdrop-blur-md shadow-lg pb-4 border-t border-border"
+              >
+                <div className="container mx-auto px-4 py-2 flex flex-col items-end space-y-2">
+                  <Button variant="ghost" asChild className="w-full justify-end" onClick={toggleMobileMenu}>
+                    <Link to="/">Accueil</Link>
+                  </Button>
+                  <Button variant="ghost" asChild className="w-full justify-end" onClick={toggleMobileMenu}>
+                     <Link to="/creations" className="flex items-center justify-end w-full">
+                        <Sparkles className="h-4 w-4 mr-2 text-yellow-400" />
+                        Créations
+                      </Link>
+                  </Button>
+                  <Button asChild className="w-full justify-end bg-gradient-to-r from-primary to-accent hover:opacity-90 transition-opacity" onClick={toggleMobileMenu}>
+                    <Link to="/commander">Commander une chanson</Link>
+                  </Button>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </nav>
+      );
+    };
+
+    export default Navbar;
--- a/src/components/WelcomeMessage.jsx
+++ b/src/components/WelcomeMessage.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const WelcomeMessage = () => {
+  return (
+    <motion.p
+      className='text-sm text-white leading-5 w-full'
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5, delay: 0.8 }}
+    >
+      Write in the chat what you want to create.
+    </motion.p>
+  );
+};
+
+export default WelcomeMessage;
--- a/src/components/order/Step0ProductSelection.jsx
+++ b/src/components/order/Step0ProductSelection.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+    import { motion } from 'framer-motion';
+    import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+    import { cn } from '@/lib/utils';
+    import { products } from '@/config/orderFormConfig';
+    import { CheckCircle, Tag } from 'lucide-react';
+
+    const Step0ProductSelection = ({ selectedProduct, onProductSelect, error }) => {
+      return (
+        <motion.div
+          key="productSelection"
+          initial={{ opacity: 0, x: 50 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -50 }}
+          className="space-y-6"
+        >
+          <h2 className="text-2xl font-semibold text-center gradient-text">Choisissez votre création</h2>
+          {error && <p className="text-sm text-center text-destructive">{error}</p>}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {products.map((product) => (
+              <motion.div
+                key={product.id}
+                whileHover={{ y: -5 }}
+                transition={{ type: 'spring', stiffness: 300 }}
+              >
+                <Card
+                  onClick={() => onProductSelect(product.id)}
+                  className={cn(
+                    'cursor-pointer transition-all duration-300 ease-in-out h-full flex flex-col overflow-hidden',
+                    selectedProduct === product.id
+                      ? 'ring-2 ring-primary shadow-primary/50 scale-105 border-primary'
+                      : 'hover:shadow-lg',
+                    error && !selectedProduct ? 'ring-2 ring-destructive border-destructive' : ''
+                  )}
+                >
+                  <CardHeader className="relative p-0">
+                    <img  
+                      alt={product.name} 
+                      src={product.imageUrl || "https://images.unsplash.com/photo-1595872018818-97555653a011"} 
+                      className="w-full h-48 object-cover" 
+                    />
+                    {selectedProduct === product.id && (
+                      <div className="absolute top-2 right-2 bg-primary rounded-full p-1 z-10">
+                        <CheckCircle className="h-6 w-6 text-primary-foreground" />
+                      </div>
+                    )}
+                    {product.promotionPrice && (
+                       <div className="absolute top-2 left-2 bg-accent text-accent-foreground px-2 py-1 rounded-md text-xs font-semibold flex items-center z-10">
+                         <Tag className="h-3 w-3 mr-1" /> PROMO
+                       </div>
+                    )}
+                  </CardHeader>
+                  <CardContent className="p-4 flex-grow flex flex-col justify-between">
+                    <div>
+                      <CardTitle className="text-xl mb-2 !bg-none !text-foreground">{product.name}</CardTitle>
+                      <CardDescription className="text-sm mb-3">{product.description}</CardDescription>
+                    </div>
+                    <div className="mt-auto">
+                      {product.promotionPrice ? (
+                        <div className="flex items-baseline gap-2">
+                          <p className="text-2xl font-bold text-primary">{product.promotionPrice.toFixed(2)} €</p>
+                          <p className="text-sm line-through text-muted-foreground">{product.price.toFixed(2)} €</p>
+                        </div>
+                      ) : (
+                        <p className="text-2xl font-bold text-primary">{product.price.toFixed(2)} €</p>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      );
+    };
+
+    export default Step0ProductSelection;
--- a/src/components/order/Step1Content.jsx
+++ b/src/components/order/Step1Content.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+    import { motion } from 'framer-motion';
+    import { Input } from '@/components/ui/input';
+    import { Label } from '@/components/ui/label';
+    import { Textarea } from '@/components/ui/textarea';
+    import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+    import { languages } from '@/config/orderFormConfig';
+    import { cn } from '@/lib/utils';
+
+    const Step1Content = ({ formData, handleChange, handleSelectChange, errors }) => {
+      return (
+        <motion.div 
+          key="songInfo" 
+          initial={{ opacity: 0, x: 50 }} 
+          animate={{ opacity: 1, x: 0 }} 
+          exit={{ opacity: 0, x: -50 }} 
+          className="space-y-6"
+        >
+          <div>
+            <Label htmlFor="recipientName" className={cn("text-lg", errors.recipientName && "text-destructive")}>Prénom ou surnom de la personne à qui vous offrez la chanson*</Label>
+            <Input id="recipientName" name="recipientName" value={formData.recipientName} onChange={handleChange} placeholder="Ex: Chloé, Mon amour, Papi..." className={cn("mt-2 text-base p-3", errors.recipientName && "border-destructive focus-visible:ring-destructive")}/>
+            {errors.recipientName && <p className="text-sm text-destructive mt-1">{errors.recipientName}</p>}
+          </div>
+          <div>
+            <Label htmlFor="songForWhom" className={cn("text-lg", errors.songForWhom && "text-destructive")}>C'est pour qui ?*</Label>
+            <Input id="songForWhom" name="songForWhom" value={formData.songForWhom} onChange={handleChange} placeholder="Ex: Mon/ma partenaire, un(e) ami(e), ma famille..." className={cn("mt-2 text-base p-3", errors.songForWhom && "border-destructive focus-visible:ring-destructive")}/>
+            {errors.songForWhom && <p className="text-sm text-destructive mt-1">{errors.songForWhom}</p>}
+          </div>
+          <div>
+            <Label htmlFor="occasion" className="text-lg">Occasion (si applicable)</Label>
+            <Input id="occasion" name="occasion" value={formData.occasion} onChange={handleChange} placeholder="Ex: Anniversaire, mariage, déclaration..." className="mt-2 text-base p-3"/>
+          </div>
+          <div>
+            <Label htmlFor="language" className={cn("text-lg", errors.language && "text-destructive")}>Langue de la chanson*</Label>
+            <Select name="language" onValueChange={(value) => handleSelectChange('language', value)} value={formData.language}>
+              <SelectTrigger className={cn("w-full mt-2 text-base p-3 h-auto", errors.language && "border-destructive focus:ring-destructive")}>
+                <SelectValue placeholder="Sélectionnez une langue" />
+              </SelectTrigger>
+              <SelectContent>
+                {languages.map(lang => <SelectItem key={lang} value={lang}>{lang}</SelectItem>)}
+              </SelectContent>
+            </Select>
+            {errors.language && <p className="text-sm text-destructive mt-1">{errors.language}</p>}
+          </div>
+          <div>
+            <Label htmlFor="anecdote1" className={cn("text-lg", errors.anecdote1 && "text-destructive")}>Anecdote 1 - Donnez nous quelques infos pour adapter le texte !*</Label>
+            <Textarea id="anecdote1" name="anecdote1" value={formData.anecdote1} onChange={handleChange} placeholder="Un souvenir marquant, une qualité spéciale, un rêve partagé..." rows={3} className={cn("mt-2 text-base p-3", errors.anecdote1 && "border-destructive focus-visible:ring-destructive")}/>
+            {errors.anecdote1 && <p className="text-sm text-destructive mt-1">{errors.anecdote1}</p>}
+          </div>
+          <div>
+            <Label htmlFor="anecdote2" className="text-lg">Anecdote 2 - Plus d'infos pour enrichir le texte !</Label>
+            <Textarea id="anecdote2" name="anecdote2" value={formData.anecdote2} onChange={handleChange} placeholder="Un détail amusant, une passion, un lieu important..." rows={3} className="mt-2 text-base p-3"/>
+          </div>
+          <div>
+            <Label htmlFor="anecdote3" className="text-lg">Anecdote 3 - Encore une info pour une chanson parfaite !</Label>
+            <Textarea id="anecdote3" name="anecdote3" value={formData.anecdote3} onChange={handleChange} placeholder="Un message secret, une private joke, un souhait..." rows={3} className="mt-2 text-base p-3"/>
+          </div>
+        </motion.div>
+      );
+    };
+
+    export default Step1Content;
--- a/src/components/order/Step2MusicalChoices.jsx
+++ b/src/components/order/Step2MusicalChoices.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+    import { motion } from 'framer-motion';
+    import { Label } from '@/components/ui/label';
+    import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+    import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+    import { voiceGenders, musicalStyles, moods } from '@/config/orderFormConfig';
+    import { cn } from '@/lib/utils';
+
+    const Step2MusicalChoices = ({ formData, handleSelectChange, handleRadioGroupChange, errors }) => {
+      return (
+        <motion.div 
+          key="musicalChoices" 
+          initial={{ opacity: 0, x: 50 }} 
+          animate={{ opacity: 1, x: 0 }} 
+          exit={{ opacity: 0, x: -50 }} 
+          className="space-y-8"
+        >
+          <div>
+            <Label className={cn("text-lg mb-2 block", errors.voiceGender && "text-destructive")}>Genre de la voix*</Label>
+            <RadioGroup
+              name="voiceGender"
+              value={formData.voiceGender}
+              onValueChange={(value) => handleRadioGroupChange('voiceGender', value)}
+              className={cn("flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4", errors.voiceGender && "rounded-md border border-destructive p-2")}
+            >
+              {voiceGenders.map((gender) => (
+                <div key={gender} className="flex items-center space-x-2">
+                  <RadioGroupItem value={gender} id={`voice-${gender.toLowerCase().replace(' ', '-')}`} />
+                  <Label htmlFor={`voice-${gender.toLowerCase().replace(' ', '-')}`} className="text-base font-normal">{gender}</Label>
+                </div>
+              ))}
+            </RadioGroup>
+            {errors.voiceGender && <p className="text-sm text-destructive mt-1">{errors.voiceGender}</p>}
+          </div>
+
+          <div>
+            <Label htmlFor="musicalStyle" className={cn("text-lg", errors.musicalStyle && "text-destructive")}>Style musical*</Label>
+            <Select name="musicalStyle" onValueChange={(value) => handleSelectChange('musicalStyle', value)} value={formData.musicalStyle}>
+              <SelectTrigger className={cn("w-full mt-2 text-base p-3 h-auto", errors.musicalStyle && "border-destructive focus:ring-destructive")}>
+                <SelectValue placeholder="Sélectionnez un style" />
+              </SelectTrigger>
+              <SelectContent>
+                {musicalStyles.map(style => <SelectItem key={style} value={style}>{style}</SelectItem>)}
+              </SelectContent>
+            </Select>
+            {errors.musicalStyle && <p className="text-sm text-destructive mt-1">{errors.musicalStyle}</p>}
+          </div>
+
+          <div>
+            <Label htmlFor="mood" className={cn("text-lg", errors.mood && "text-destructive")}>Ambiance*</Label>
+            <Select name="mood" onValueChange={(value) => handleSelectChange('mood', value)} value={formData.mood}>
+              <SelectTrigger className={cn("w-full mt-2 text-base p-3 h-auto", errors.mood && "border-destructive focus:ring-destructive")}>
+                <SelectValue placeholder="Sélectionnez une ambiance" />
+              </SelectTrigger>
+              <SelectContent>
+                {moods.map(mood => <SelectItem key={mood} value={mood}>{mood}</SelectItem>)}
+              </SelectContent>
+            </Select>
+            {errors.mood && <p className="text-sm text-destructive mt-1">{errors.mood}</p>}
+          </div>
+        </motion.div>
+      );
+    };
+
+    export default Step2MusicalChoices;
--- a/src/components/order/Step3Review.jsx
+++ b/src/components/order/Step3Review.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+    import { motion } from 'framer-motion';
+    import { products } from '@/config/orderFormConfig';
+    import { CreditCard } from 'lucide-react';
+
+    const Step3Review = ({ formData }) => {
+      const selectedProductDetails = products.find(p => p.id === formData.selectedProduct);
+      const priceToDisplay = selectedProductDetails ? (selectedProductDetails.promotionPrice || selectedProductDetails.price) : 0;
+
+      const formatKey = (key) => {
+        const translations = {
+          selectedProduct: "Produit Sélectionné",
+          recipientName: "Prénom/Surnom du destinataire",
+          songForWhom: "Pour qui",
+          occasion: "Occasion",
+          language: "Langue",
+          anecdote1: "Anecdote 1",
+          anecdote2: "Anecdote 2",
+          anecdote3: "Anecdote 3",
+          voiceGender: "Genre de la voix",
+          musicalStyle: "Style musical",
+          mood: "Ambiance",
+        };
+        return translations[key] || key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+      };
+
+      const displayValue = (key, value) => {
+        if (key === 'selectedProduct') {
+          return selectedProductDetails?.name || 'Non sélectionné';
+        }
+        if (!value || (Array.isArray(value) && value.length === 0)) return 'Non spécifié';
+        return Array.isArray(value) ? value.join(', ') : value.toString();
+      };
+
+      return (
+        <motion.div 
+          key="review" 
+          initial={{ opacity: 0, x: 50 }} 
+          animate={{ opacity: 1, x: 0 }} 
+          exit={{ opacity: 0, x: -50 }} 
+          className="space-y-6"
+        >
+          <h3 className="text-2xl font-semibold gradient-text">Vérifiez votre commande</h3>
+          <div className="space-y-3 text-sm p-4 border rounded-lg bg-secondary/50 dark:bg-secondary/20">
+            {Object.entries(formData).map(([key, value]) => {
+              if (key === 'price' || key === 'productName' || key === 'stripePriceId') return null; 
+              if ((!value && key !== 'selectedProduct') && !(Array.isArray(value) && value.length === 0)) return null;
+              
+              return (
+                <div key={key} className="flex justify-between items-start">
+                  <span className="font-medium text-muted-foreground">{formatKey(key)}:</span>
+                  <span className="text-right max-w-[60%] break-words pl-2">{displayValue(key, value)}</span>
+                </div>
+              );
+            })}
+          </div>
+          <p className="text-lg font-bold text-center">Prix Total : {priceToDisplay.toFixed(2)} €</p>
+          <div className="text-sm text-muted-foreground p-4 border border-dashed border-primary/50 rounded-lg bg-primary/10 dark:bg-primary/5">
+            <div className="flex items-center font-semibold text-primary mb-2">
+                <CreditCard className="h-5 w-5 mr-2" />
+                Paiement Sécurisé
+            </div>
+            <p>Nous utilisons Stripe pour un paiement sécurisé. Vous serez redirigé vers leur plateforme pour finaliser votre commande. Après le paiement de votre commande, vous recevrez un email de confirmation.</p>
+            <p className="mt-2">Après validation de votre commande, vous recevrez un lien par email pour télécharger votre création.</p>
+          </div>
+        </motion.div>
+      );
+    };
+
+    export default Step3Review;
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+
+const buttonVariants = cva(
+	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+				destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+				outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+				secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-10 px-4 py-2',
+				sm: 'h-9 rounded-md px-3',
+				lg: 'h-11 rounded-md px-8',
+				icon: 'h-10 w-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : 'button';
+	return (
+		<Comp
+			className={cn(buttonVariants({ variant, size, className }))}
+			ref={ref}
+			{...props}
+		/>
+	);
+});
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
--- a/src/components/ui/card.jsx
+++ b/src/components/ui/card.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+    import { cn } from '@/lib/utils';
+
+    const Card = React.forwardRef(({ className, ...props }, ref) => (
+      <div
+        ref={ref}
+        className={cn(
+          'rounded-xl border bg-card text-card-foreground shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out',
+          className
+        )}
+        {...props}
+      />
+    ));
+    Card.displayName = 'Card';
+
+    const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+      <div
+        ref={ref}
+        className={cn('flex flex-col space-y-1.5 p-6', className)}
+        {...props}
+      />
+    ));
+    CardHeader.displayName = 'CardHeader';
+
+    const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+      <h3
+        ref={ref}
+        className={cn(
+          'text-2xl font-semibold leading-none tracking-tight gradient-text',
+          className
+        )}
+        {...props}
+      />
+    ));
+    CardTitle.displayName = 'CardTitle';
+
+    const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+      <p
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+      />
+    ));
+    CardDescription.displayName = 'CardDescription';
+
+    const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+      <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+    ));
+    CardContent.displayName = 'CardContent';
+
+    const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+      <div
+        ref={ref}
+        className={cn('flex items-center p-6 pt-0', className)}
+        {...props}
+      />
+    ));
+    CardFooter.displayName = 'CardFooter';
+
+    export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+    import { cn } from '@/lib/utils';
+
+    const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+      return (
+        <input
+          type={type}
+          className={cn(
+            'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+      );
+    });
+    Input.displayName = 'Input';
+
+    export { Input };
--- a/src/components/ui/label.jsx
+++ b/src/components/ui/label.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+    import * as LabelPrimitive from '@radix-ui/react-label';
+    import { cva } from 'class-variance-authority';
+    import { cn } from '@/lib/utils';
+
+    const labelVariants = cva(
+      'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+    );
+
+    const Label = React.forwardRef(({ className, ...props }, ref) => (
+      <LabelPrimitive.Root
+        ref={ref}
+        className={cn(labelVariants(), className)}
+        {...props}
+      />
+    ));
+    Label.displayName = LabelPrimitive.Root.displayName;
+
+    export { Label };
--- a/src/components/ui/progress.jsx
+++ b/src/components/ui/progress.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+    import * as ProgressPrimitive from '@radix-ui/react-progress';
+    import { cn } from '@/lib/utils';
+
+    const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
+      <ProgressPrimitive.Root
+        ref={ref}
+        className={cn(
+          'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+          className
+        )}
+        {...props}
+      >
+        <ProgressPrimitive.Indicator
+          className="h-full w-full flex-1 bg-gradient-to-r from-primary to-accent transition-all"
+          style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        />
+      </ProgressPrimitive.Root>
+    ));
+    Progress.displayName = ProgressPrimitive.Root.displayName;
+
+    export { Progress };
--- a/src/components/ui/radio-group.jsx
+++ b/src/components/ui/radio-group.jsx
@@ -0,0 +1,36 @@
+import React from "react"
+    import { Check } from "lucide-react"
+    import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+
+    import { cn } from "@/lib/utils"
+
+    const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+      return (
+        <RadioGroupPrimitive.Root
+          className={cn("grid gap-2", className)}
+          {...props}
+          ref={ref}
+        />
+      )
+    })
+    RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+    const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+      return (
+        <RadioGroupPrimitive.Item
+          ref={ref}
+          className={cn(
+            "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        >
+          <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+            <Check className="h-3.5 w-3.5 fill-current text-current" />
+          </RadioGroupPrimitive.Indicator>
+        </RadioGroupPrimitive.Item>
+      )
+    })
+    RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+    export { RadioGroup, RadioGroupItem }
--- a/src/components/ui/select.jsx
+++ b/src/components/ui/select.jsx
@@ -0,0 +1,126 @@
+import React from 'react';
+    import * as SelectPrimitive from '@radix-ui/react-select';
+    import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+    import { cn } from '@/lib/utils';
+
+    const Select = SelectPrimitive.Root;
+    const SelectGroup = SelectPrimitive.Group;
+    const SelectValue = SelectPrimitive.Value;
+
+    const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+      <SelectPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SelectPrimitive.Icon asChild>
+          <ChevronDown className="h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+      </SelectPrimitive.Trigger>
+    ));
+    SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+    const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+      <SelectPrimitive.ScrollUpButton
+        ref={ref}
+        className={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...props}
+      >
+        <ChevronUp className="h-4 w-4" />
+      </SelectPrimitive.ScrollUpButton>
+    ));
+    SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+    const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+      <SelectPrimitive.ScrollDownButton
+        ref={ref}
+        className={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...props}
+      >
+        <ChevronDown className="h-4 w-4" />
+      </SelectPrimitive.ScrollDownButton>
+    ));
+    SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+    const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          ref={ref}
+          className={cn(
+            'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            position === 'popper' &&
+              'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            className
+          )}
+          position={position}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.Viewport
+            className={cn(
+              'p-1',
+              position === 'popper' &&
+                'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+            )}
+          >
+            {children}
+          </SelectPrimitive.Viewport>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    ));
+    SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+    const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+      <SelectPrimitive.Label
+        ref={ref}
+        className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+        {...props}
+      />
+    ));
+    SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+    const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+      <SelectPrimitive.Item
+        ref={ref}
+        className={cn(
+          'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+          className
+        )}
+        {...props}
+      >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          <SelectPrimitive.ItemIndicator>
+            <Check className="h-4 w-4" />
+          </SelectPrimitive.ItemIndicator>
+        </span>
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      </SelectPrimitive.Item>
+    ));
+    SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+    const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+      <SelectPrimitive.Separator
+        ref={ref}
+        className={cn('-mx-1 my-1 h-px bg-muted', className)}
+        {...props}
+      />
+    ));
+    SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+    export {
+      Select,
+      SelectGroup,
+      SelectValue,
+      SelectTrigger,
+      SelectContent,
+      SelectLabel,
+      SelectItem,
+      SelectSeparator,
+      SelectScrollUpButton,
+      SelectScrollDownButton,
+    };
--- a/src/components/ui/textarea.jsx
+++ b/src/components/ui/textarea.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+    import { cn } from '@/lib/utils';
+
+    const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+      return (
+        <textarea
+          className={cn(
+            'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+      );
+    });
+    Textarea.displayName = 'Textarea';
+
+    export { Textarea };
--- a/src/components/ui/toast.jsx
+++ b/src/components/ui/toast.jsx
@@ -0,0 +1,101 @@
+import { cn } from '@/lib/utils';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import React from 'react';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+			className,
+		)}
+		{...props}
+	/>
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+	'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full',
+	{
+		variants: {
+			variant: {
+				default: 'bg-background border',
+				destructive:
+          'group destructive border-destructive bg-destructive text-destructive-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+	return (
+		<ToastPrimitives.Root
+			ref={ref}
+			className={cn(toastVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+			className,
+		)}
+		{...props}
+	/>
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+			className,
+		)}
+		toast-close=""
+		{...props}
+	>
+		<X className="h-4 w-4" />
+	</ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
+	<ToastPrimitives.Title
+		ref={ref}
+		className={cn('text-sm font-semibold', className)}
+		{...props}
+	/>
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn('text-sm opacity-90', className)}
+		{...props}
+	/>
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+export {
+	Toast,
+	ToastAction,
+	ToastClose,
+	ToastDescription,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
+};
--- a/src/components/ui/toaster.jsx
+++ b/src/components/ui/toaster.jsx
@@ -0,0 +1,34 @@
+import {
+	Toast,
+	ToastClose,
+	ToastDescription,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
+} from '@/components/ui/toast';
+import { useToast } from '@/components/ui/use-toast';
+import React from 'react';
+
+export function Toaster() {
+	const { toasts } = useToast();
+
+	return (
+		<ToastProvider>
+			{toasts.map(({ id, title, description, action, ...props }) => {
+				return (
+					<Toast key={id} {...props}>
+						<div className="grid gap-1">
+							{title && <ToastTitle>{title}</ToastTitle>}
+							{description && (
+								<ToastDescription>{description}</ToastDescription>
+							)}
+						</div>
+						{action}
+						<ToastClose />
+					</Toast>
+				);
+			})}
+			<ToastViewport />
+		</ToastProvider>
+	);
+}
--- a/src/components/ui/use-toast.js
+++ b/src/components/ui/use-toast.js
@@ -0,0 +1,103 @@
+import { useState, useEffect } from "react"
+
+const TOAST_LIMIT = 1
+
+let count = 0
+function generateId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+const toastStore = {
+  state: {
+    toasts: [],
+  },
+  listeners: [],
+  
+  getState: () => toastStore.state,
+  
+  setState: (nextState) => {
+    if (typeof nextState === 'function') {
+      toastStore.state = nextState(toastStore.state)
+    } else {
+      toastStore.state = { ...toastStore.state, ...nextState }
+    }
+    
+    toastStore.listeners.forEach(listener => listener(toastStore.state))
+  },
+  
+  subscribe: (listener) => {
+    toastStore.listeners.push(listener)
+    return () => {
+      toastStore.listeners = toastStore.listeners.filter(l => l !== listener)
+    }
+  }
+}
+
+export const toast = ({ ...props }) => {
+  const id = generateId()
+
+  const update = (props) =>
+    toastStore.setState((state) => ({
+      ...state,
+      toasts: state.toasts.map((t) =>
+        t.id === id ? { ...t, ...props } : t
+      ),
+    }))
+
+  const dismiss = () => toastStore.setState((state) => ({
+    ...state,
+    toasts: state.toasts.filter((t) => t.id !== id),
+  }))
+
+  toastStore.setState((state) => ({
+    ...state,
+    toasts: [
+      { ...props, id, dismiss },
+      ...state.toasts,
+    ].slice(0, TOAST_LIMIT),
+  }))
+
+  return {
+    id,
+    dismiss,
+    update,
+  }
+}
+
+export function useToast() {
+  const [state, setState] = useState(toastStore.getState())
+  
+  useEffect(() => {
+    const unsubscribe = toastStore.subscribe((state) => {
+      setState(state)
+    })
+    
+    return unsubscribe
+  }, [])
+  
+  useEffect(() => {
+    const timeouts = []
+
+    state.toasts.forEach((toast) => {
+      if (toast.duration === Infinity) {
+        return
+      }
+
+      const timeout = setTimeout(() => {
+        toast.dismiss()
+      }, toast.duration || 5000)
+
+      timeouts.push(timeout)
+    })
+
+    return () => {
+      timeouts.forEach((timeout) => clearTimeout(timeout))
+    }
+  }, [state.toasts])
+
+  return {
+    toast,
+    toasts: state.toasts,
+  }
+}
--- a/src/config/orderFormConfig.jsx
+++ b/src/config/orderFormConfig.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+    import { ShoppingBag, Edit2, Music, Send } from 'lucide-react';
+
+    export const STRIPE_PUBLISHABLE_KEY = 'pk_live_51RPSGmEPL3QASpovp8Q6p8ehNMW7TzSrOaV6zvPE1OtflMFN5jChQBEj5kr84wontlLOe8uiHyJBiCduzxIZwj5A00DIEVs31n';
+
+    export const products = [
+      { 
+        id: 'prod_SQK3M9UvfXBUh0', 
+        name: 'Chanson personnalisée', 
+        price: 19.90,
+        promotionPrice: 17.90, 
+        stripePriceId: 'price_1RVTPKEPL3QASpovq34PyAvN', 
+        description: 'Une chanson complète, paroles et musique, rien que pour vous, à un prix spécial !',
+        imageUrl: 'https://zneurmyahctnnzglnptl.supabase.co/storage/v1/object/public/images//chanson-personnalisee.jpg'
+      },
+      { 
+        id: 'prod_SQK4s1RR0xK3oe', 
+        name: '2 chansons personnalisées', 
+        price: 29.90, 
+        promotionPrice: null,
+        stripePriceId: 'price_1RVTQKEPL3QASpovL3Cg7K9S', 
+        description: 'Deux chansons uniques pour deux fois plus d\'émotion.',
+        imageUrl: 'https://zneurmyahctnnzglnptl.supabase.co/storage/v1/object/public/images//chansons-personnalisees.jpg'
+      },
+      { 
+        id: 'prod_SQKBpI2jc1hHOQ', 
+        name: '1 chanson personnalisée + 1 clip photo-musique', 
+        price: 49.90, 
+        promotionPrice: 44.90,
+        stripePriceId: 'price_1RVTXYEPL3QASpovSei3ZV48', 
+        description: 'Votre chanson mise en musique et accompagnée d\'un clip photo, en promotion !',
+        imageUrl: 'https://zneurmyahctnnzglnptl.supabase.co/storage/v1/object/public/images//chanson-photo.jpg'
+      },
+      { 
+        id: 'prod_SQKCtsEPlwf329', 
+        name: 'Texte personnalisé', 
+        price: 7.90, 
+        promotionPrice: null,
+        stripePriceId: 'price_1RVTXtEPL3QASpovaWjXf30q', 
+        description: 'Un texte de chanson unique, écrit sur mesure pour vous.',
+        imageUrl: 'https://zneurmyahctnnzglnptl.supabase.co/storage/v1/object/public/images//texte-personalise.jpg'
+      }
+    ];
+
+    export const initialFormData = {
+      selectedProduct: null, 
+      recipientName: '',
+      songForWhom: '',
+      occasion: '',
+      language: 'Français',
+      anecdote1: '',
+      anecdote2: '',
+      anecdote3: '',
+      voiceGender: '',
+      musicalStyle: '',
+      mood: '',
+    };
+
+    export const stepsConfig = [
+      { id: 'productSelection', title: 'Choix du Produit', icon: <ShoppingBag className="h-5 w-5 mr-2" /> },
+      { id: 'songInfo', title: 'Informations pour la chanson', icon: <Edit2 className="h-5 w-5 mr-2" /> },
+      { id: 'musicalChoices', title: 'Choix Musicaux', icon: <Music className="h-5 w-5 mr-2" /> },
+      { id: 'review', title: 'Récapitulatif & Paiement', icon: <Send className="h-5 w-5 mr-2" /> },
+    ];
+    
+    export const languages = ["Français", "Anglais", "Espagnol", "Autre"];
+    export const voiceGenders = ["Femme", "Homme", "Peu importe"];
+    export const musicalStyles = ["Pop", "Hip Hop", "Rock", "Funny", "Acoustique", "R&B", "Reggae", "Funk", "Soul", "Country", "Electro", "Métal", "Gospel", "Zouk", "Variété Française"];
+    export const moods = ["Heureux", "Romantique", "Comique", "Sincère", "Triste"];
+
+    export const formValidations = {
+      productSelection: [
+        { name: 'selectedProduct', message: "Veuillez sélectionner un produit." },
+      ],
+      songInfo: [
+        { name: 'recipientName', message: "Veuillez indiquer le prénom ou surnom." },
+        { name: 'songForWhom', message: "Veuillez préciser pour qui est la chanson." },
+        { name: 'anecdote1', message: "L'anecdote 1 est obligatoire." },
+        { name: 'language', message: "Veuillez sélectionner une langue." },
+      ],
+      musicalChoices: [
+        { name: 'voiceGender', message: "Veuillez choisir un genre de voix." },
+        { name: 'musicalStyle', message: "Veuillez choisir un style musical." },
+        { name: 'mood', message: "Veuillez choisir une ambiance." },
+      ],
+    };
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,62 @@
+@tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 224 71.4% 4.1%;
+      --card: 0 0% 100%;
+      --card-foreground: 224 71.4% 4.1%;
+      --popover: 0 0% 100%;
+      --popover-foreground: 224 71.4% 4.1%;
+      --primary: 262.1 83.3% 57.8%; /* Vibrant Purple */
+      --primary-foreground: 355.7 100% 97.3%;
+      --secondary: 210 40% 96.1%; /* Light Blue-Gray */
+      --secondary-foreground: 222.2 47.4% 11.2%;
+      --muted: 210 40% 96.1%;
+      --muted-foreground: 215 20.2% 65.1%;
+      --accent: 340.1 92.3% 68.4%; /* Bright Pink */
+      --accent-foreground: 355.7 100% 97.3%;
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 215 20.2% 65.1%;
+      --input: 215 20.2% 65.1%;
+      --ring: 262.1 83.3% 57.8%;
+      --radius: 0.75rem;
+    }
+
+    .dark {
+      --background: 224 71.4% 4.1%;
+      --foreground: 210 20% 98%;
+      --card: 224 71.4% 4.1%;
+      --card-foreground: 210 20% 98%;
+      --popover: 224 71.4% 4.1%;
+      --popover-foreground: 210 20% 98%;
+      --primary: 262.1 83.3% 57.8%;
+      --primary-foreground: 355.7 100% 97.3%;
+      --secondary: 222.2 47.4% 11.2%;
+      --secondary-foreground: 210 20% 98%;
+      --muted: 217.2 32.6% 17.5%;
+      --muted-foreground: 217.9 10.6% 64.9%;
+      --accent: 340.1 92.3% 68.4%;
+      --accent-foreground: 355.7 100% 97.3%;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 85.7% 97.3%;
+      --border: 217.2 32.6% 17.5%;
+      --input: 217.2 32.6% 17.5%;
+      --ring: 262.1 83.3% 57.8%;
+    }
+
+    @layer base {
+      * {
+        @apply border-border;
+      }
+      body {
+        @apply bg-background text-foreground;
+        font-feature-settings: "rlig" 1, "calt" 1;
+      }
+    }
+
+    .gradient-text {
+      @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent;
+    }
--- a/src/lib/customSupabaseClient.js
+++ b/src/lib/customSupabaseClient.js
@@ -0,0 +1,13 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = 'https://zneurmyahctnnzglnptl.supabase.co';
+const supabaseAnonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InpuZXVybXlhaGN0bm56Z2xucHRsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDg4NTM5MTksImV4cCI6MjA2NDQyOTkxOX0.wK5iWQt3pXNNpi9xquCaowvQrz8k8qjlcwFMsehqnWI';
+
+const customSupabaseClient = createClient(supabaseUrl, supabaseAnonKey);
+
+export default customSupabaseClient;
+
+export { 
+    customSupabaseClient,
+    customSupabaseClient as supabase,
+};
--- a/src/lib/supabaseClient.js
+++ b/src/lib/supabaseClient.js
@@ -0,0 +1,6 @@
+import { createClient } from '@supabase/supabase-js';
+
+    const supabaseUrl = 'https://zneurmyahctnnzglnptl.supabase.co';
+    const supabaseAnonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InpuZXVybXlhaGN0bm56Z2xucHRsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDg4NTM5MTksImV4cCI6MjA2NDQyOTkxOX0.wK5iWQt3pXNNpi9xquCaowvQrz8k8qjlcwFMsehqnWI';
+
+    export const supabase = createClient(supabaseUrl, supabaseAnonKey);
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from '@/App';
+import '@/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/src/pages/ConfirmationPage.jsx
+++ b/src/pages/ConfirmationPage.jsx
@@ -0,0 +1,236 @@
+import React, { useEffect, useState } from 'react';
+    import { Link, useSearchParams, useNavigate } from 'react-router-dom';
+    import { Button } from '@/components/ui/button';
+    import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+    import { motion } from 'framer-motion';
+    import { CheckCircle, Package, Loader2, AlertTriangle, Info } from 'lucide-react';
+    import { useToast } from "@/components/ui/use-toast";
+    import { supabase } from '@/lib/supabaseClient';
+
+    const ConfirmationPage = () => {
+      const [orderDetails, setOrderDetails] = useState(null);
+      const [searchParams] = useSearchParams();
+      const sessionId = searchParams.get('session_id');
+      const { toast } = useToast();
+      const [isLoading, setIsLoading] = useState(true);
+      const [mainStatus, setMainStatus] = useState({ type: 'info', message: 'Traitement en cours...' });
+      const navigate = useNavigate();
+
+      useEffect(() => {
+        const processOrder = async () => {
+          if (!sessionId) {
+            setMainStatus({ type: 'error', message: "Session de paiement invalide ou manquante." });
+            toast({ title: "Erreur", description: "Session de paiement invalide.", variant: "destructive" });
+            setIsLoading(false);
+            return;
+          }
+
+          const storedOrderDataString = localStorage.getItem('confirmedOrderDataForConfirmationPage');
+          if (!storedOrderDataString) {
+            setMainStatus({ type: 'error', message: "Impossible de récupérer les détails de la commande. Veuillez nous contacter." });
+            toast({ title: "Erreur", description: "Détails de commande non trouvés.", variant: "destructive" });
+            setIsLoading(false);
+            return;
+          }
+          
+          const storedOrderData = JSON.parse(storedOrderDataString);
+          setOrderDetails(storedOrderData); 
+
+          try {
+            const payload = { orderData: { ...storedOrderData }, sessionId: sessionId };
+            const { data: functionResponse, error: functionError } = await supabase.functions.invoke('send-order-confirmation-email', {
+              body: JSON.stringify(payload),
+            });
+
+            if (functionError) {
+              console.error("Supabase function invocation error:", functionError);
+              throw new Error(functionError.message || "Erreur d'invocation de la fonction Edge.");
+            }
+            
+            if (!functionResponse) {
+                console.error("No response data from edge function");
+                throw new Error("Aucune donnée retournée par la fonction Edge.");
+            }
+            
+            if (functionResponse.orderId && functionResponse.orderId !== 'N/A') {
+                setOrderDetails(prev => ({ ...prev, id: functionResponse.orderId, customer_email: functionResponse.customerEmail || prev.customer_email }));
+                toast({
+                    title: "Paiement Réussi!",
+                    description: `Votre commande (ID: ${functionResponse.orderId.substring(0,8)}) est enregistrée et un email de confirmation vous a été envoyé.`,
+                    variant: "success",
+                    duration: 7000,
+                });
+                setMainStatus({ type: 'success', message: `Commande ${functionResponse.orderId.substring(0,8)} confirmée.` });
+            } else {
+                 toast({
+                    title: "Problème Enregistrement Commande",
+                    description: `La commande n'a pas pu être formellement enregistrée. ${functionResponse.error || ''}`,
+                    variant: "destructive",
+                 });
+                 setMainStatus({ type: 'error', message: `Erreur enregistrement: ${functionResponse.error || 'Détail non disponible'}` });
+            }
+
+            if (functionResponse.adminEmailError) {
+                toast({
+                    title: "Alerte Email Admin (Info)",
+                    description: `L'email admin n'a pas pu être envoyé: ${functionResponse.adminEmailError}`,
+                    variant: "default", 
+                    duration: 4000 
+                });
+            }
+            if (functionResponse.customerEmailError && functionResponse.customerEmail) {
+                 toast({
+                    title: "Alerte Email Client",
+                    description: `L'email de confirmation client n'a pas pu être envoyé: ${functionResponse.customerEmailError}. Veuillez vérifier vos spams ou nous contacter.`,
+                    variant: "destructive",
+                    duration: 10000
+                });
+            }
+
+          } catch (e) {
+            console.error("Erreur critique lors du traitement de la commande:", e);
+            setMainStatus({ type: 'error', message: `Erreur critique: ${e.message}. La commande a pu être enregistrée ou non.` });
+            toast({
+              title: "Erreur Critique",
+              description: `Un problème est survenu: ${e.message}. Veuillez vérifier l'état de votre commande ou nous contacter.`,
+              variant: "destructive",
+              duration: 10000,
+            });
+          } finally {
+            localStorage.removeItem('confirmedOrderDataForConfirmationPage');
+            setIsLoading(false);
+          }
+        };
+
+        processOrder();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [sessionId, toast]);
+
+      const handleReturnHome = () => {
+        localStorage.removeItem('songOrderForm');
+        navigate('/');
+      };
+
+      const formatKey = (key) => {
+        const translations = {
+          id: "ID Commande",
+          selectedProduct: "Produit Sélectionné",
+          productName: "Nom du Produit",
+          price: "Prix Payé",
+          recipientName: "Prénom/Surnom du destinataire",
+          songForWhom: "Pour qui",
+          occasion: "Occasion",
+          language: "Langue",
+          anecdote1: "Anecdote 1",
+          anecdote2: "Anecdote 2",
+          anecdote3: "Anecdote 3",
+          voiceGender: "Genre de la voix",
+          musicalStyle: "Style musical",
+          mood: "Ambiance",
+          customer_email: "Email du Client",
+        };
+        return translations[key] || key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+      };
+
+      const displayValue = (key, value) => {
+        if (key === 'price' && typeof value === 'number') {
+          return `${Number(value).toFixed(2)} €`;
+        }
+        if (key === 'id' && typeof value === 'string') {
+          return value.substring(0,8);
+        }
+        if (!value && value !==0 || (Array.isArray(value) && value.length === 0)) return 'Non spécifié';
+        return Array.isArray(value) ? value.join(', ') : value.toString();
+      };
+
+
+      if (isLoading) {
+        return (
+          <div className="flex flex-col items-center justify-center min-h-[calc(100vh-200px)]">
+            <Loader2 className="h-16 w-16 animate-spin text-primary mb-4" />
+            <p className="text-xl text-muted-foreground">Traitement de votre commande...</p>
+          </div>
+        );
+      }
+
+      const overallSuccess = mainStatus.type === 'success';
+
+      return (
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          className="max-w-2xl mx-auto py-12 px-4 text-center"
+        >
+          <Card className="shadow-xl bg-card/80 backdrop-blur-md">
+            <CardHeader>
+              <motion.div
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ type: 'spring', stiffness: 260, damping: 20, delay: 0.2 }}
+                className={`mx-auto w-fit p-4 rounded-full mb-4 ${overallSuccess ? 'bg-green-500/20' : 'bg-amber-500/20'}`}
+              >
+                {overallSuccess ? <CheckCircle className="h-16 w-16 text-green-500" /> : <AlertTriangle className="h-16 w-16 text-amber-500" />}
+              </motion.div>
+              <CardTitle className={`text-4xl !bg-clip-text !text-transparent ${overallSuccess ? '!bg-gradient-to-r !from-green-500 !to-emerald-500' : '!bg-gradient-to-r !from-amber-500 !to-orange-500'}`}>
+                {overallSuccess ? 'Commande Confirmée !' : 'Statut de la Commande'}
+              </CardTitle>
+              <CardDescription className="text-lg text-muted-foreground mt-2">
+                {overallSuccess ? 'Merci pour votre confiance ! Votre création est en préparation.' : 'Un problème est survenu avec votre commande. Veuillez nous contacter.'}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+                <div className={`p-3 rounded-md text-sm flex items-center ${mainStatus.type === 'success' ? 'bg-green-500/10 text-green-700' : mainStatus.type === 'error' ? 'bg-red-500/10 text-red-700' : 'bg-blue-500/10 text-blue-700'}`}>
+                    {mainStatus.type === 'success' ? <CheckCircle className="h-5 w-5 mr-2 flex-shrink-0" /> : <AlertTriangle className="h-5 w-5 mr-2 flex-shrink-0" />}
+                    <span>{mainStatus.message}</span>
+                </div>
+
+              {orderDetails ? (
+                <div className="text-left p-4 sm:p-6 bg-secondary/50 dark:bg-secondary/20 rounded-lg">
+                  <h3 className="text-xl font-semibold mb-3 text-primary flex items-center">
+                    <Package className="h-6 w-6 mr-2" />
+                    Récapitulatif de votre commande :
+                  </h3>
+                  <ul className="space-y-1 text-sm">
+                    {Object.entries(orderDetails).map(([key, value]) => {
+                       if (key === 'selectedProduct' || key === 'stripePriceId') return null;
+                       const displayVal = displayValue(key, value);
+                       if (displayVal === 'Non spécifié' && key !== 'customer_email' && key !== 'id') return null;
+                       
+                       return (
+                         <li key={key} className="flex justify-between items-start py-1 border-b border-border/50 last:border-b-0">
+                           <strong className="pr-2 text-foreground/80">{formatKey(key)}:</strong>
+                           <span className="text-right max-w-[60%] sm:max-w-[70%] break-words text-foreground">{displayVal}</span>
+                         </li>
+                       );
+                    })}
+                  </ul>
+                </div>
+              ) : (
+                !isLoading && <p className="text-muted-foreground">Aucun détail de commande à afficher.</p>
+              )}
+
+              <div className="mt-6 p-4 bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 rounded-lg border border-purple-300/50">
+                  <div className="flex items-center">
+                      <Info className="h-6 w-6 mr-3 text-purple-400 flex-shrink-0" />
+                      <div>
+                          <p className="text-sm text-muted-foreground mb-2">
+                              Un email de confirmation de commande vous a été envoyé. En cas de difficulté, n'hésitez pas à contrôler vos courriers indésirables.
+                          </p>
+                          <p className="text-sm text-muted-foreground">
+                              Votre chanson unique sera prête et vous sera livrée par email dans les <strong>48 heures</strong>.
+                          </p>
+                      </div>
+                  </div>
+              </div>
+              
+              <Button onClick={handleReturnHome} size="lg" className="mt-8 w-full sm:w-auto bg-gradient-to-r from-primary to-accent hover:opacity-90 transition-opacity">
+                Retour à l'accueil
+              </Button>
+            </CardContent>
+          </Card>
+        </motion.div>
+      );
+    };
+
+    export default ConfirmationPage;
--- a/src/pages/CreationsPage.jsx
+++ b/src/pages/CreationsPage.jsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { motion } from 'framer-motion';
+import { Music, Video, Image as ImageIcon } from 'lucide-react';
+
+const creations = [
+  {
+    type: 'image',
+    title: 'Pochette d\'Album Conceptuelle',
+    description: 'Une image de démonstration pour illustrer une pochette ou un visuel accompagnant une chanson.',
+    url: 'https://zneurmyahctnnzglnptl.supabase.co/storage/v1/object/public/demo//exemple.jpg',
+    icon: <ImageIcon className="h-8 w-8 text-primary" />
+  },
+  {
+    type: 'audio',
+    title: 'Extrait Musical Personnalisé',
+    description: 'Écoutez un exemple de création audio, une mélodie entraînante et unique.',
+    url: 'https://zneurmyahctnnzglnptl.supabase.co/storage/v1/object/public/demo//exemple1.mp3',
+    icon: <Music className="h-8 w-8 text-primary" />
+  },
+  {
+    type: 'video',
+    title: 'Clip Vidéo Émotionnel',
+    description: 'Visualisez un exemple de montage vidéo accompagnant une chanson, capturant l\'essence du message.',
+    url: 'https://zneurmyahctnnzglnptl.supabase.co/storage/v1/object/public/demo//exemple2.mp4',
+    icon: <Video className="h-8 w-8 text-primary" />
+  },
+  {
+    type: 'video',
+    title: 'Vidéo Lyrique Animée',
+    description: 'Un autre exemple de vidéo, peut-être avec des paroles animées ou un style visuel différent.',
+    url: 'https://zneurmyahctnnzglnptl.supabase.co/storage/v1/object/public/demo//exemple3.mp4',
+    icon: <Video className="h-8 w-8 text-primary" />
+  },
+  {
+    type: 'video',
+    title: 'Performance Acoustique Filmée',
+    description: 'Découvrez une performance simple et touchante, mettant en valeur la voix et la mélodie.',
+    url: 'https://zneurmyahctnnzglnptl.supabase.co/storage/v1/object/public/demo//exemple4.mp4',
+    icon: <Video className="h-8 w-8 text-primary" />
+  }
+];
+
+const CreationsPage = () => {
+  const cardVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: (i) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: i * 0.1,
+        duration: 0.5,
+        ease: "easeOut"
+      }
+    })
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-12">
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="text-center mb-12"
+      >
+        <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">
+          <span className="gradient-text">Nos Créations</span>
+        </h1>
+        <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto">
+          Découvrez quelques exemples de chansons et visuels que nous pouvons réaliser pour vous. Chaque création est unique, comme votre histoire.
+        </p>
+      </motion.div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {creations.map((creation, index) => (
+          <motion.div
+            key={index}
+            custom={index}
+            variants={cardVariants}
+            initial="hidden"
+            animate="visible"
+            whileHover={{ y: -5, boxShadow: "0px 10px 20px rgba(0,0,0,0.1)" }}
+          >
+            <Card className="overflow-hidden h-full flex flex-col bg-card/80 backdrop-blur-sm border-border/50 shadow-lg hover:shadow-primary/20 transition-shadow duration-300">
+              <CardHeader className="flex flex-row items-start gap-4 p-4 bg-muted/30">
+                <div className="p-2 bg-primary/10 rounded-lg">
+                  {creation.icon}
+                </div>
+                <div>
+                  <CardTitle className="text-xl font-semibold text-foreground">{creation.title}</CardTitle>
+                  <CardDescription className="text-sm text-muted-foreground">{creation.type === 'image' ? 'Image' : creation.type === 'audio' ? 'Audio' : 'Vidéo'}</CardDescription>
+                </div>
+              </CardHeader>
+              <CardContent className="p-4 flex-grow flex flex-col justify-between">
+                <div>
+                  {creation.type === 'image' && (
+                    <div className="aspect-video w-full overflow-hidden rounded-md mb-4 border border-border">
+                      <img-replace src={creation.url} alt={creation.title} className="w-full h-full object-cover transition-transform duration-300 hover:scale-105" />
+                    </div>
+                  )}
+                  {creation.type === 'audio' && (
+                    <audio controls className="w-full my-4 rounded-md shadow-sm">
+                      <source src={creation.url} type="audio/mpeg" />
+                      Votre navigateur ne supporte pas l'élément audio.
+                    </audio>
+                  )}
+                  {creation.type === 'video' && (
+                    <div className="aspect-video w-full overflow-hidden rounded-md mb-4 border border-border">
+                      <video controls className="w-full h-full object-cover" preload="metadata">
+                        <source src={creation.url} type="video/mp4" />
+                        Votre navigateur ne supporte pas l'élément vidéo.
+                      </video>
+                    </div>
+                  )}
+                  <p className="text-muted-foreground text-sm leading-relaxed">{creation.description}</p>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CreationsPage;
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -0,0 +1,162 @@
+import React from 'react';
+    import { Link } from 'react-router-dom';
+    import { Button } from '@/components/ui/button';
+    import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+    import { motion } from 'framer-motion';
+    import { Music, Zap, Gift, Edit3 } from 'lucide-react';
+    import ImageCarousel from '@/components/ImageCarousel';
+
+    const HomePage = () => {
+      const features = [
+        {
+          icon: <Edit3 className="h-10 w-10 text-primary" />,
+          title: "Entièrement Personnalisé",
+          description: "Chaque chanson est unique, écrite spécialement pour vous à partir de vos anecdotes et émotions.",
+        },
+        {
+          icon: <Music className="h-10 w-10 text-accent" />,
+          title: "Tous Genres Musicaux",
+          description: "Pop, rock, folk, électro... Choisissez le style qui vous correspond et nous créons la magie.",
+        },
+        {
+          icon: <Zap className="h-10 w-10 text-primary" />,
+          title: "Création Rapide",
+          description: "Recevez votre chanson personnalisée en un temps record, prête à être partagée.",
+        },
+        {
+          icon: <Gift className="h-10 w-10 text-accent" />,
+          title: "Le Cadeau Parfait",
+          description: "Offrez une chanson unique pour un anniversaire, un mariage, ou toute autre occasion spéciale.",
+        },
+      ];
+
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="space-y-16 py-8"
+        >
+          <section className="text-center">
+            <motion.h1 
+              className="text-5xl md:text-7xl font-extrabold mb-6"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+            >
+              <span className="gradient-text">Transformez Vos Histoires</span><br/> en Chansons Inoubliables
+            </motion.h1>
+            <motion.p 
+              className="text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto mb-10"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.4 }}
+            >
+              Offrez ou offrez-vous une chanson 100% personnalisée. Partagez vos anecdotes, choisissez votre style, et laissez nos artistes compositeurs créer une mélodie unique qui raconte votre histoire.
+            </motion.p>
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.6 }}
+            >
+              <Button size="lg" asChild className="bg-gradient-to-r from-primary to-accent hover:opacity-90 transition-opacity text-lg px-10 py-6 rounded-full shadow-lg hover:shadow-primary/50">
+                <Link to="/commander">Créez votre chanson maintenant</Link>
+              </Button>
+            </motion.div>
+            <motion.div 
+              className="mt-12"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.5, delay: 0.8 }}
+            >
+              <ImageCarousel />
+            </motion.div>
+          </section>
+
+          <section className="py-12">
+            <h2 className="text-4xl font-bold text-center mb-12">
+              Comment ça <span className="gradient-text">marche</span> ?
+            </h2>
+            <div className="grid md:grid-cols-3 gap-8 text-center">
+              <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }}>
+                <Card className="h-full bg-card/70 backdrop-blur-sm">
+                  <CardHeader>
+                    <div className="mx-auto bg-primary/10 p-4 rounded-full w-fit mb-4">
+                      <span className="text-3xl font-bold text-primary">1</span>
+                    </div>
+                    <CardTitle className="text-2xl !bg-none !text-foreground">Racontez-nous</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <CardDescription>Remplissez notre formulaire intuitif avec les détails, anecdotes, et émotions que vous souhaitez transmettre.</CardDescription>
+                  </CardContent>
+                </Card>
+              </motion.div>
+              <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.4 }}>
+                <Card className="h-full bg-card/70 backdrop-blur-sm">
+                  <CardHeader>
+                    <div className="mx-auto bg-accent/10 p-4 rounded-full w-fit mb-4">
+                      <span className="text-3xl font-bold text-accent">2</span>
+                    </div>
+                    <CardTitle className="text-2xl !bg-none !text-foreground">Nous composons</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <CardDescription>Nos artistes talentueux (et une pincée d'IA créative !) transforment vos idées en une chanson unique et mémorable.</CardDescription>
+                  </CardContent>
+                </Card>
+              </motion.div>
+              <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.6 }}>
+                <Card className="h-full bg-card/70 backdrop-blur-sm">
+                  <CardHeader>
+                    <div className="mx-auto bg-primary/10 p-4 rounded-full w-fit mb-4">
+                      <span className="text-3xl font-bold text-primary">3</span>
+                    </div>
+                    <CardTitle className="text-2xl !bg-none !text-foreground">Recevez votre Hit</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <CardDescription>Votre chef-d'œuvre musical vous est livré, prêt à émouvoir et à être partagé avec le monde entier.</CardDescription>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            </div>
+          </section>
+
+          <section className="py-12">
+            <h2 className="text-4xl font-bold text-center mb-12">
+              Pourquoi choisir <span className="gradient-text">Dites le en chanson</span> ?
+            </h2>
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+              {features.map((feature, index) => (
+                <motion.div 
+                  key={feature.title}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 + 0.2 }}
+                >
+                  <Card className="h-full text-center bg-card/70 backdrop-blur-sm">
+                    <CardHeader>
+                      <div className="mx-auto mb-4">{feature.icon}</div>
+                      <CardTitle className="text-xl !bg-none !text-foreground">{feature.title}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <CardDescription>{feature.description}</CardDescription>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              ))}
+            </div>
+          </section>
+
+          <section className="text-center py-12 bg-gradient-to-r from-primary/10 to-accent/10 dark:from-primary/5 dark:to-accent/5 rounded-xl shadow-inner">
+             <h2 className="text-4xl font-bold mb-6">Prêt à créer votre <span className="gradient-text">bande-son personnelle</span> ?</h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8">
+              Ne laissez pas vos souvenirs s'estomper. Immortalisez-les en musique.
+            </p>
+            <Button size="lg" asChild className="bg-gradient-to-r from-primary to-accent hover:opacity-90 transition-opacity text-lg px-10 py-6 rounded-full shadow-lg hover:shadow-primary/50">
+              <Link to="/commander">Je crée ma chanson</Link>
+            </Button>
+          </section>
+        </motion.div>
+      );
+    };
+
+    export default HomePage;
--- a/src/pages/OrderPage.jsx
+++ b/src/pages/OrderPage.jsx
@@ -0,0 +1,228 @@
+import React, { useState, useEffect } from 'react';
+    import { useNavigate } from 'react-router-dom';
+    import { motion, AnimatePresence } from 'framer-motion';
+    import { Button } from '@/components/ui/button';
+    import { Progress } from '@/components/ui/progress';
+    import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+    import { useToast } from '@/components/ui/use-toast';
+    import { ChevronLeft, ChevronRight, ShoppingCart } from 'lucide-react';
+    import Step0ProductSelection from '@/components/order/Step0ProductSelection';
+    import Step1Content from '@/components/order/Step1Content';
+    import Step2MusicalChoices from '@/components/order/Step2MusicalChoices';
+    import Step3Review from '@/components/order/Step3Review';
+    import { initialFormData, stepsConfig, formValidations, products, STRIPE_PUBLISHABLE_KEY } from '@/config/orderFormConfig';
+    import { loadStripe } from '@stripe/stripe-js';
+
+    const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY);
+
+    const OrderPage = () => {
+      const [currentStep, setCurrentStep] = useState(0);
+      const [formData, setFormData] = useState(() => {
+        const savedData = localStorage.getItem('songOrderForm');
+        if (savedData) {
+          const parsedData = JSON.parse(savedData);
+          const selectedProductDetails = products.find(p => p.id === parsedData.selectedProduct);
+          if (!selectedProductDetails) {
+            return { ...initialFormData, selectedProduct: initialFormData.selectedProduct, price: 0, stripePriceId: null };
+          }
+          return { 
+            ...parsedData, 
+            price: selectedProductDetails.promotionPrice || selectedProductDetails.price, 
+            stripePriceId: selectedProductDetails.stripePriceId 
+          };
+        }
+        return initialFormData;
+      });
+      const [errors, setErrors] = useState({});
+      const { toast } = useToast();
+      const navigate = useNavigate();
+      const [isProcessingPayment, setIsProcessingPayment] = useState(false);
+
+
+      useEffect(() => {
+        localStorage.setItem('songOrderForm', JSON.stringify(formData));
+      }, [formData]);
+
+      const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+        if (errors[name]) {
+          setErrors(prev => ({ ...prev, [name]: null }));
+        }
+      };
+
+      const handleSelectChange = (name, value) => {
+        setFormData(prev => ({ ...prev, [name]: value }));
+         if (errors[name]) {
+          setErrors(prev => ({ ...prev, [name]: null }));
+        }
+      };
+      
+      const handleRadioGroupChange = (name, value) => {
+        setFormData(prev => ({ ...prev, [name]: value }));
+         if (errors[name]) {
+          setErrors(prev => ({ ...prev, [name]: null }));
+        }
+      };
+
+      const handleProductSelect = (productId) => {
+        const selectedProductDetails = products.find(p => p.id === productId);
+        setFormData(prev => ({ 
+          ...prev, 
+          selectedProduct: productId, 
+          price: selectedProductDetails?.promotionPrice || selectedProductDetails?.price || 0,
+          stripePriceId: selectedProductDetails?.stripePriceId 
+        }));
+        if (errors.selectedProduct) {
+          setErrors(prev => ({ ...prev, selectedProduct: null }));
+        }
+      };
+
+      const validateStep = () => {
+        const currentStepId = stepsConfig[currentStep].id;
+        const stepFields = formValidations[currentStepId];
+        let newErrors = {};
+        let isValid = true;
+
+        if (stepFields) {
+          for (const field of stepFields) {
+            const value = formData[field.name];
+            if (!value || (typeof value === 'string' && value.trim() === '')) {
+              newErrors[field.name] = field.message;
+              isValid = false;
+            }
+          }
+        }
+        
+        setErrors(newErrors);
+        if (!isValid && Object.keys(newErrors).length > 0) {
+           const firstErrorField = Object.keys(newErrors)[0];
+           toast({ title: "Champ requis", description: newErrors[firstErrorField], variant: "destructive" });
+        }
+        return isValid;
+      };
+
+      const nextStep = () => {
+        if (validateStep()) {
+          setCurrentStep(prev => Math.min(prev + 1, stepsConfig.length - 1));
+        }
+      };
+      const prevStep = () => {
+        setErrors({}); 
+        setCurrentStep(prev => Math.max(prev - 1, 0));
+      }
+
+      const handleSubmit = async () => {
+        if (!validateStep() || !formData.selectedProduct || !formData.stripePriceId) {
+            toast({
+                title: "Erreur de commande",
+                description: "Veuillez sélectionner un produit et remplir tous les champs requis avant de continuer.",
+                variant: "destructive",
+            });
+            return;
+        }
+        
+        setIsProcessingPayment(true);
+        toast({
+          title: "Préparation du paiement...",
+          description: "Vous allez être redirigé vers Stripe.",
+        });
+
+        const stripe = await stripePromise;
+        const selectedProductDetails = products.find(p => p.id === formData.selectedProduct);
+        
+        if (!selectedProductDetails || !selectedProductDetails.stripePriceId || selectedProductDetails.stripePriceId.includes('YOUR_')) {
+            toast({
+                title: "Erreur de configuration produit",
+                description: "L'ID de prix Stripe pour ce produit n'est pas correctement configuré. Veuillez me fournir les bons Price IDs.",
+                variant: "destructive",
+            });
+            setIsProcessingPayment(false);
+            return;
+        }
+
+        const finalPrice = selectedProductDetails.promotionPrice || selectedProductDetails.price;
+
+        const finalFormDataForConfirmation = { ...formData, productName: selectedProductDetails?.name, price: finalPrice };
+        localStorage.setItem('confirmedOrderDataForConfirmationPage', JSON.stringify(finalFormDataForConfirmation));
+        
+        const { error } = await stripe.redirectToCheckout({
+            lineItems: [{ price: selectedProductDetails.stripePriceId, quantity: 1 }],
+            mode: 'payment',
+            successUrl: `${window.location.origin}/confirmation?session_id={CHECKOUT_SESSION_ID}`,
+            cancelUrl: `${window.location.origin}/commander`,
+            customerEmail: formData.email, 
+        });
+
+        if (error) {
+            console.error("Erreur Stripe:", error);
+            toast({
+                title: "Erreur de paiement",
+                description: error.message || "Une erreur est survenue lors de la redirection vers Stripe.",
+                variant: "destructive",
+            });
+            localStorage.removeItem('confirmedOrderDataForConfirmationPage');
+            setIsProcessingPayment(false);
+        }
+      };
+      
+      const progressPercentage = ((currentStep + 1) / stepsConfig.length) * 100;
+      const currentSelectedProduct = formData.selectedProduct ? products.find(p => p.id === formData.selectedProduct) : null;
+      const currentPriceToPay = currentSelectedProduct ? (currentSelectedProduct.promotionPrice || currentSelectedProduct.price) : 0;
+
+
+      const renderStepContent = () => {
+        const stepId = stepsConfig[currentStep].id;
+        switch (stepId) {
+          case 'productSelection':
+            return <Step0ProductSelection selectedProduct={formData.selectedProduct} onProductSelect={handleProductSelect} error={errors.selectedProduct} />;
+          case 'songInfo':
+            return <Step1Content formData={formData} handleChange={handleChange} handleSelectChange={handleSelectChange} errors={errors} />;
+          case 'musicalChoices':
+            return <Step2MusicalChoices formData={formData} handleSelectChange={handleSelectChange} handleRadioGroupChange={handleRadioGroupChange} errors={errors} />;
+          case 'review':
+            return <Step3Review formData={formData} handleChange={handleChange} errors={errors} />;
+          default:
+            return <div>Étape inconnue</div>;
+        }
+      };
+
+      return (
+        <div className="max-w-3xl mx-auto py-8">
+          <Card className="shadow-2xl bg-card/80 backdrop-blur-md">
+            <CardHeader className="text-center border-b pb-4">
+              <div className="flex items-center justify-center text-3xl font-bold mb-2">
+                {stepsConfig[currentStep].icon}
+                <h1 className="gradient-text">{stepsConfig[currentStep].title}</h1>
+              </div>
+              <CardDescription>Étape {currentStep + 1} sur {stepsConfig.length}</CardDescription>
+              <Progress value={progressPercentage} className="mt-4 h-3" />
+            </CardHeader>
+            <CardContent className="p-6 md:p-10 min-h-[300px]">
+              <AnimatePresence mode="wait">
+                {renderStepContent()}
+              </AnimatePresence>
+            </CardContent>
+            <CardFooter className="flex justify-between p-6 border-t">
+              <Button variant="outline" onClick={prevStep} disabled={currentStep === 0 || isProcessingPayment} className="text-base px-6 py-3">
+                <ChevronLeft className="h-5 w-5 mr-2" />
+                Précédent
+              </Button>
+              {currentStep < stepsConfig.length - 1 ? (
+                <Button onClick={nextStep} disabled={isProcessingPayment} className="text-base px-6 py-3 bg-gradient-to-r from-primary to-accent hover:opacity-90 transition-opacity">
+                  Suivant
+                  <ChevronRight className="h-5 w-5 ml-2" />
+                </Button>
+              ) : (
+                <Button onClick={handleSubmit} disabled={isProcessingPayment} className="text-base px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 hover:opacity-90 transition-opacity">
+                  {isProcessingPayment ? "Traitement..." : `Payer (${currentPriceToPay ? currentPriceToPay.toFixed(2) : '0.00'} €)`}
+                  {!isProcessingPayment && <ShoppingCart className="h-5 w-5 ml-2" />}
+                </Button>
+              )}
+            </CardFooter>
+          </Card>
+        </div>
+      );
+    };
+
+    export default OrderPage;