initial commit

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;