import React, { useState } from 'react'; import { motion } from 'framer-motion'; import { ShoppingBag, Star, Heart, Home, PackageSearch, ShoppingCart, User } from 'lucide-react'; // ========================================== // 1. STYLES GLOBAUX (Injectés via ); // ========================================== // 2. COMPOSANT : PRODUCT CARD // ========================================== const ProductCard = ({ title = "Cyber Sneakers Neon", price = "$299", image = "https://images.unsplash.com/photo-1608231387042-66d1773070a5?auto=format&fit=crop&q=80&w=600", rating = 4.8 }) => { return (

NEW

{title}

{price}

{rating} / 5

Ajouter au panier

); }; // ========================================== // 3. COMPOSANT : FLOATING NAVBAR // ========================================== const navItems = [ { id: 'home', label: 'Accueil', icon: Home }, { id: 'catalog', label: 'Catalogue', icon: PackageSearch }, { id: 'cart', label: 'Panier', icon: ShoppingCart }, { id: 'profile', label: 'Profil', icon: User }, ]; const FloatingNav = () => { const [activeTab, setActiveTab] = useState(navItems[0].id); return (

{navItems.map((item) => { const Icon = item.icon; const isActive = activeTab === item.id; return ( ); })}

); }; // ========================================== // 4. APPLICATION PRINCIPALE (Affiche le tout) // ========================================== export default function App() { return (

{/* Notre carte trône au centre de l'écran */} {/* Notre menu est toujours fixé en bas de l'écran */}

); }

Neon Glass Card

Commentaires0