Responsive Design - Copy this React, Tailwind Component to your project
"import React from 'react'; import { useState } from 'react'; import { FaHeart, FaRegHeart, FaShoppingCart } from "react icons/fa"; import "./index.css" import CategoriesSlider from './comp/categories slider'; import ProductPop from './comp/product pop'; import { useCart } from "./comp/CartContext"; import ProductShowcase from './comp/product showcase'; import { Footer } from './comp/footer'; import { Avis } from './comp/avis'; import ProductsPage from './comp/products section'; import CartSidebar from './comp/CartPage'; import { useNavigate } from 'react router dom'; const Home = () => { const [products, setProducts] = useState([ { id: 1, title: "Premium Leather Wallet", description: "Handcrafted genuine leather wallet with multiple card slots", price: 79.99, image: "https://images.unsplash.com/photo 1627123424574 724758594e93", liked: false }, { id: 2, title: "Wireless Noise Cancelling Headphones", description: "High quality audio with active noise cancellation", price: 249.99, image: "https://images.unsplash.com/photo 1505740420928 5e560c06d30e", liked: false }, { id: 3, title: "Smart Fitness Watch", description: "Track your health and fitness with advanced sensors", price: 199.99, image: "https://images.unsplash.com/photo 1579586337278 3befd40fd17a", liked: false }, { id: 4, title: "Organic Cotton T Shirt", description: "Sustainable and comfortable cotton blend t shirt", price: 34.99, image: "https://images.unsplash.com/photo 1521572163474 6864f9cf17ab", liked: false }, { id: 5, title: "Minimalist Ceramic Watch", description: "Elegant timepiece with sapphire crystal glass", price: 159.99, image: "https://images.unsplash.com/photo 1524592094714 0f0654e20314", liked: false }, { id: 6, title: "Professional Camera Lens", description: "High performance lens for professional photography", price: 899.99, image: "https://images.unsplash.com/photo 1516035069371 29a1b244cc32", liked: false } ]); const navigate = useNavigate(); const toggleLike = (productId) => { setProducts(products.map(product => product.id === productId ? { ...product, liked: !product.liked } : product )); }; return ( <> <div className="min h screen bg gradient to b from [#174C57] via [#174C57] to [#FFFFFF]"> {/* Header */} {/* Hero Section */} <main className="max w 7xl mx auto px 6 lg:px 12 pt 12 lg:pt 24"> <div className="grid lg:grid cols 2 gap 12 items center"> {/* Text Content */} <div className="text center lg:text left"> <h1 className="text 4xl lg:text 6xl font bold text white leading tight mb 8"> Lampadaire Luxueux pour Intérieur Moderne </h1> <button onClick={() => navigate("/products")} className="px 8 py 4 border 2 border amber 300/30 rounded full text white hover:border amber 300 transition all duration 300 group"> <span className="relative inline flex items center"> Shop now <svg className="ml 2 h 5 w 5 group hover:translate x 1 transition transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 8l4 4m0 0l 4 4m4 4H3" /> </svg> </span> </button> </div> {/* Product Image */} <div className="relative top [10rem]"> {/* Product Image */} <div className="relative w full mt 16 lg:mt 0 z 0"> {/* Effet lumineux */} <div className="absolute top [ 53px] right [3rem] w [9rem] h [13rem] bg yellow 300 rounded full blur 2xl opacity 60 animate pulse pointer events none z 0" /> {/* Lampadaire */} <img src="/light.png" alt="Lampadaire" className="absolute top [ 150px] right [ 8rem] w 40 lg:w [27rem] z 10" /> {/* Canapé */} <img src="/can.png" alt="Canapé" className="w full object contain z 20" /> </div> </div> </div> </main> </div> < CategoriesSlider /> < ProductPop /> < ProductShowcase /> < ProductsPage /> < Avis /> </> ); }; export default Home; " ajouter une responsive complete stp
