{"id":9950,"date":"2025-11-02T02:40:21","date_gmt":"2025-11-02T02:40:21","guid":{"rendered":"https:\/\/adcelectronique.com\/?page_id=9950"},"modified":"2025-11-02T02:50:56","modified_gmt":"2025-11-02T02:50:56","slug":"claud","status":"publish","type":"page","link":"https:\/\/adcelectronique.com\/index.php\/claud\/","title":{"rendered":"claud"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n ADC Electronique - Premium Electronics & Home Accessories<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --primary: #0A66C2;\r\n --primary-dark: #084d92;\r\n --secondary: #00A67E;\r\n --accent: #FF6B35;\r\n --dark: #1A1D29;\r\n --darker: #0F1117;\r\n --light: #F8FAFC;\r\n --gray: #64748B;\r\n --gray-light: #E2E8F0;\r\n --white: #FFFFFF;\r\n --success: #10B981;\r\n --warning: #F59E0B;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: var(--light);\r\n color: var(--dark);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Header *\/\r\n header {\r\n background: var(--white);\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\r\n position: sticky;\r\n top: 0;\r\n z-index: 1000;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n header.scrolled {\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .top-bar {\r\n background: var(--dark);\r\n color: var(--white);\r\n padding: 0.75rem 0;\r\n font-size: 0.875rem;\r\n }\r\n\r\n .top-bar-content {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .top-bar-left {\r\n display: flex;\r\n gap: 2rem;\r\n align-items: center;\r\n }\r\n\r\n .top-bar-left a {\r\n color: var(--white);\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .top-bar-left a:hover {\r\n color: var(--accent);\r\n }\r\n\r\n .top-bar-right {\r\n display: flex;\r\n gap: 1.5rem;\r\n align-items: center;\r\n }\r\n\r\n .language-selector, .currency-selector {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n cursor: pointer;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .language-selector:hover, .currency-selector:hover {\r\n color: var(--accent);\r\n }\r\n\r\n \/* Main Navigation *\/\r\n .main-nav {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 1rem 2rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .logo-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .logo {\r\n width: 180px;\r\n height: 60px;\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 8px;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-weight: 700;\r\n font-size: 1.5rem;\r\n color: var(--white);\r\n text-decoration: none;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .logo:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 2.5rem;\r\n list-style: none;\r\n align-items: center;\r\n }\r\n\r\n .nav-links a {\r\n color: var(--dark);\r\n text-decoration: none;\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n transition: color 0.3s ease;\r\n position: relative;\r\n }\r\n\r\n .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -5px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--primary);\r\n transition: width 0.3s ease;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: var(--primary);\r\n }\r\n\r\n .nav-links a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n .nav-actions {\r\n display: flex;\r\n gap: 1.5rem;\r\n align-items: center;\r\n }\r\n\r\n .search-container {\r\n position: relative;\r\n }\r\n\r\n .search-input {\r\n background: var(--light);\r\n border: 2px solid transparent;\r\n padding: 0.6rem 2.5rem 0.6rem 1rem;\r\n border-radius: 25px;\r\n font-size: 0.9rem;\r\n color: var(--dark);\r\n outline: none;\r\n transition: all 0.3s ease;\r\n width: 250px;\r\n }\r\n\r\n .search-input:focus {\r\n border-color: var(--primary);\r\n background: var(--white);\r\n width: 350px;\r\n }\r\n\r\n .search-btn {\r\n position: absolute;\r\n right: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n color: var(--gray);\r\n cursor: pointer;\r\n font-size: 1rem;\r\n }\r\n\r\n .icon-btn {\r\n background: none;\r\n border: none;\r\n color: var(--dark);\r\n font-size: 1.3rem;\r\n cursor: pointer;\r\n position: relative;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .icon-btn:hover {\r\n color: var(--primary);\r\n }\r\n\r\n .badge {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n background: var(--accent);\r\n color: var(--white);\r\n border-radius: 50%;\r\n width: 20px;\r\n height: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n }\r\n\r\n .cart-btn {\r\n background: var(--primary);\r\n color: var(--white);\r\n border: none;\r\n padding: 0.7rem 1.5rem;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .cart-btn:hover {\r\n background: var(--primary-dark);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(10, 102, 194, 0.3);\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero {\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\r\n color: var(--white);\r\n padding: 4rem 2rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: url('data:image\/svg+xml,<svg width=\"100\" height=\"100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><defs><pattern id=\"grid\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\"><path d=\"M 100 0 L 0 0 0 100\" fill=\"none\" stroke=\"rgba(255,255,255,0.05)\" stroke-width=\"1\"\/><\/pattern><\/defs><rect width=\"100%\" height=\"100%\" fill=\"url(%23grid)\"\/><\/svg>');\r\n opacity: 0.5;\r\n }\r\n\r\n .hero-content {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 4rem;\r\n align-items: center;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .hero-text h1 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 3.5rem;\r\n font-weight: 700;\r\n margin-bottom: 1.5rem;\r\n line-height: 1.2;\r\n }\r\n\r\n .hero-text h1 .highlight {\r\n color: var(--accent);\r\n }\r\n\r\n .hero-text p {\r\n font-size: 1.2rem;\r\n margin-bottom: 2rem;\r\n opacity: 0.95;\r\n line-height: 1.8;\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn-primary, .btn-secondary {\r\n padding: 1rem 2rem;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n border: none;\r\n }\r\n\r\n .btn-primary {\r\n background: var(--accent);\r\n color: var(--white);\r\n }\r\n\r\n .btn-primary:hover {\r\n background: #FF5722;\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 25px rgba(255, 107, 53, 0.3);\r\n }\r\n\r\n .btn-secondary {\r\n background: var(--white);\r\n color: var(--primary);\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: var(--light);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .hero-image {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n }\r\n\r\n .hero-product-showcase {\r\n width: 100%;\r\n max-width: 500px;\r\n aspect-ratio: 1;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n border-radius: 20px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-20px); }\r\n }\r\n\r\n .hero-product-showcase i {\r\n font-size: 12rem;\r\n color: var(--white);\r\n opacity: 0.9;\r\n }\r\n\r\n \/* Features Section *\/\r\n .features {\r\n padding: 5rem 2rem;\r\n background: var(--white);\r\n }\r\n\r\n .section-title {\r\n text-align: center;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .section-title h2 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n color: var(--dark);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .section-title p {\r\n font-size: 1.1rem;\r\n color: var(--gray);\r\n }\r\n\r\n .features-grid {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 2rem;\r\n }\r\n\r\n .feature-card {\r\n background: var(--white);\r\n border: 2px solid var(--gray-light);\r\n border-radius: 15px;\r\n padding: 2.5rem;\r\n text-align: center;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .feature-card:hover {\r\n transform: translateY(-10px);\r\n border-color: var(--primary);\r\n box-shadow: 0 15px 40px rgba(10, 102, 194, 0.15);\r\n }\r\n\r\n .feature-icon {\r\n width: 80px;\r\n height: 80px;\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 1.5rem;\r\n font-size: 2rem;\r\n color: var(--white);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .feature-card:hover .feature-icon {\r\n transform: scale(1.1) rotate(5deg);\r\n }\r\n\r\n .feature-card h3 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.3rem;\r\n font-weight: 600;\r\n margin-bottom: 1rem;\r\n color: var(--dark);\r\n }\r\n\r\n .feature-card p {\r\n color: var(--gray);\r\n line-height: 1.8;\r\n }\r\n\r\n \/* Products Section *\/\r\n .products {\r\n padding: 5rem 2rem;\r\n background: var(--light);\r\n }\r\n\r\n .products-header {\r\n max-width: 1400px;\r\n margin: 0 auto 3rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 2rem;\r\n }\r\n\r\n .filter-buttons {\r\n display: flex;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .filter-btn {\r\n background: var(--white);\r\n border: 2px solid var(--gray-light);\r\n padding: 0.6rem 1.5rem;\r\n border-radius: 25px;\r\n color: var(--dark);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .filter-btn.active,\r\n .filter-btn:hover {\r\n background: var(--primary);\r\n border-color: var(--primary);\r\n color: var(--white);\r\n }\r\n\r\n .view-toggle {\r\n display: flex;\r\n gap: 0.5rem;\r\n }\r\n\r\n .view-btn {\r\n background: var(--white);\r\n border: 2px solid var(--gray-light);\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .view-btn.active,\r\n .view-btn:hover {\r\n background: var(--primary);\r\n border-color: var(--primary);\r\n color: var(--white);\r\n }\r\n\r\n .products-grid {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: 2rem;\r\n }\r\n\r\n .product-card {\r\n background: var(--white);\r\n border-radius: 15px;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n }\r\n\r\n .product-card:hover {\r\n transform: translateY(-10px);\r\n border-color: var(--primary);\r\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .product-image-container {\r\n position: relative;\r\n height: 280px;\r\n background: var(--light);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n }\r\n\r\n .product-badge {\r\n position: absolute;\r\n top: 15px;\r\n left: 15px;\r\n background: var(--accent);\r\n color: var(--white);\r\n padding: 0.4rem 1rem;\r\n border-radius: 20px;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n z-index: 1;\r\n }\r\n\r\n .product-badge.sale {\r\n background: var(--warning);\r\n }\r\n\r\n .product-badge.new {\r\n background: var(--success);\r\n }\r\n\r\n .product-actions {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n opacity: 0;\r\n transform: translateX(20px);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .product-card:hover .product-actions {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .action-btn {\r\n width: 40px;\r\n height: 40px;\r\n background: var(--white);\r\n border: none;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .action-btn:hover {\r\n background: var(--primary);\r\n color: var(--white);\r\n transform: scale(1.1);\r\n }\r\n\r\n .product-image-container i {\r\n font-size: 6rem;\r\n color: var(--primary);\r\n opacity: 0.8;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .product-card:hover .product-image-container i {\r\n transform: scale(1.1);\r\n }\r\n\r\n .product-info {\r\n padding: 1.5rem;\r\n }\r\n\r\n .product-category {\r\n color: var(--secondary);\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .product-title {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n color: var(--dark);\r\n margin-bottom: 0.8rem;\r\n line-height: 1.4;\r\n }\r\n\r\n .product-description {\r\n color: var(--gray);\r\n font-size: 0.9rem;\r\n line-height: 1.6;\r\n margin-bottom: 1rem;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .product-rating {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .stars {\r\n color: var(--warning);\r\n font-size: 0.9rem;\r\n }\r\n\r\n .rating-count {\r\n color: var(--gray);\r\n font-size: 0.85rem;\r\n }\r\n\r\n .product-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding-top: 1rem;\r\n border-top: 1px solid var(--gray-light);\r\n }\r\n\r\n .product-price {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n }\r\n\r\n .price-current {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: var(--primary);\r\n }\r\n\r\n .price-old {\r\n font-size: 1.1rem;\r\n color: var(--gray);\r\n text-decoration: line-through;\r\n }\r\n\r\n .add-to-cart-btn {\r\n background: var(--primary);\r\n color: var(--white);\r\n border: none;\r\n padding: 0.8rem 1.5rem;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .add-to-cart-btn:hover {\r\n background: var(--primary-dark);\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* Categories Section *\/\r\n .categories {\r\n padding: 5rem 2rem;\r\n background: var(--white);\r\n }\r\n\r\n .categories-grid {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 2rem;\r\n }\r\n\r\n .category-card {\r\n position: relative;\r\n height: 300px;\r\n border-radius: 15px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .category-card:hover {\r\n transform: translateY(-10px);\r\n }\r\n\r\n .category-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n opacity: 0.9;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--white);\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .category-card:hover .category-overlay {\r\n opacity: 1;\r\n }\r\n\r\n .category-icon {\r\n font-size: 4rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .category-name {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .category-count {\r\n font-size: 0.9rem;\r\n opacity: 0.9;\r\n }\r\n\r\n \/* Stats Section *\/\r\n .stats {\r\n padding: 5rem 2rem;\r\n background: var(--dark);\r\n color: var(--white);\r\n }\r\n\r\n .stats-grid {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 3rem;\r\n }\r\n\r\n .stat-item {\r\n text-align: center;\r\n }\r\n\r\n .stat-number {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 3.5rem;\r\n font-weight: 700;\r\n color: var(--accent);\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .stat-label {\r\n font-size: 1.1rem;\r\n opacity: 0.8;\r\n }\r\n\r\n \/* Newsletter Section *\/\r\n .newsletter {\r\n padding: 5rem 2rem;\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n color: var(--white);\r\n }\r\n\r\n .newsletter-content {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n\r\n .newsletter-content h2 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .newsletter-content p {\r\n font-size: 1.2rem;\r\n margin-bottom: 2rem;\r\n opacity: 0.95;\r\n }\r\n\r\n .newsletter-form {\r\n display: flex;\r\n gap: 1rem;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n .newsletter-input {\r\n flex: 1;\r\n padding: 1rem 1.5rem;\r\n border: none;\r\n border-radius: 25px;\r\n font-size: 1rem;\r\n outline: none;\r\n }\r\n\r\n .newsletter-btn {\r\n background: var(--accent);\r\n color: var(--white);\r\n border: none;\r\n padding: 1rem 2.5rem;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .newsletter-btn:hover {\r\n background: #FF5722;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n background: var(--darker);\r\n color: var(--white);\r\n padding: 4rem 2rem 2rem;\r\n }\r\n\r\n .footer-content {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: 3rem;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .footer-section h3 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .footer-section p {\r\n color: var(--gray-light);\r\n line-height: 1.8;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .footer-section ul {\r\n list-style: none;\r\n }\r\n\r\n .footer-section ul li {\r\n margin-bottom: 0.8rem;\r\n }\r\n\r\n .footer-section ul li a {\r\n color: var(--gray-light);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .footer-section ul li a:hover {\r\n color: var(--accent);\r\n }\r\n\r\n .social-links {\r\n display: flex;\r\n gap: 1rem;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n .social-btn {\r\n width: 45px;\r\n height: 45px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--white);\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .social-btn:hover {\r\n background: var(--primary);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .footer-bottom {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding-top: 2rem;\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 1rem;\r\n }\r\n\r\n .payment-methods {\r\n display: flex;\r\n gap: 1rem;\r\n align-items: center;\r\n }\r\n\r\n .payment-methods i {\r\n font-size: 2rem;\r\n color: var(--gray-light);\r\n }\r\n\r\n \/* Cart Sidebar *\/\r\n .cart-sidebar {\r\n position: fixed;\r\n right: -450px;\r\n top: 0;\r\n width: 450px;\r\n height: 100vh;\r\n background: var(--white);\r\n box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);\r\n z-index: 2000;\r\n transition: right 0.4s ease;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .cart-sidebar.active {\r\n right: 0;\r\n }\r\n\r\n .cart-header {\r\n padding: 2rem;\r\n border-bottom: 2px solid var(--gray-light);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .cart-header h2 {\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n }\r\n\r\n .close-cart {\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--dark);\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .close-cart:hover {\r\n color: var(--accent);\r\n }\r\n\r\n .cart-items {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: 2rem;\r\n }\r\n\r\n .cart-item {\r\n display: flex;\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n padding-bottom: 2rem;\r\n border-bottom: 1px solid var(--gray-light);\r\n }\r\n\r\n .cart-item-image {\r\n width: 80px;\r\n height: 80px;\r\n background: var(--light);\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .cart-item-image i {\r\n font-size: 2rem;\r\n color: var(--primary);\r\n }\r\n\r\n .cart-item-info {\r\n flex: 1;\r\n }\r\n\r\n .cart-item-info h4 {\r\n font-size: 1rem;\r\n margin-bottom: 0.5rem;\r\n color: var(--dark);\r\n }\r\n\r\n .cart-item-price {\r\n color: var(--primary);\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .cart-item-quantity {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n margin-top: 0.8rem;\r\n }\r\n\r\n .qty-btn {\r\n width: 30px;\r\n height: 30px;\r\n background: var(--light);\r\n border: 1px solid var(--gray-light);\r\n border-radius: 5px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .qty-btn:hover {\r\n background: var(--primary);\r\n color: var(--white);\r\n border-color: var(--primary);\r\n }\r\n\r\n .remove-item {\r\n background: none;\r\n border: none;\r\n color: var(--gray);\r\n cursor: pointer;\r\n margin-left: auto;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .remove-item:hover {\r\n color: var(--accent);\r\n }\r\n\r\n .cart-footer {\r\n padding: 2rem;\r\n border-top: 2px solid var(--gray-light);\r\n }\r\n\r\n .cart-subtotal {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: 1.2rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .cart-total {\r\n display: flex;\r\n justify-content: space-between;\r\n font-family: 'Space Grotesk', sans-serif;\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n margin-bottom: 1.5rem;\r\n color: var(--primary);\r\n }\r\n\r\n .checkout-btn {\r\n width: 100%;\r\n padding: 1.2rem;\r\n background: var(--primary);\r\n color: var(--white);\r\n border: none;\r\n border-radius: 25px;\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .checkout-btn:hover {\r\n background: var(--primary-dark);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .continue-shopping {\r\n width: 100%;\r\n padding: 1rem;\r\n background: var(--light);\r\n color: var(--dark);\r\n border: 2px solid var(--gray-light);\r\n border-radius: 25px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .continue-shopping:hover {\r\n background: var(--white);\r\n border-color: var(--primary);\r\n }\r\n\r\n \/* Notification Toast *\/\r\n .notification {\r\n position: fixed;\r\n top: 100px;\r\n right: -400px;\r\n background: var(--white);\r\n border-left: 4px solid var(--success);\r\n box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);\r\n border-radius: 10px;\r\n padding: 1.5rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n z-index: 3000;\r\n transition: right 0.4s ease;\r\n min-width: 300px;\r\n }\r\n\r\n .notification.show {\r\n right: 30px;\r\n }\r\n\r\n .notification-icon {\r\n width: 50px;\r\n height: 50px;\r\n background: var(--success);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--white);\r\n font-size: 1.5rem;\r\n }\r\n\r\n .notification-text h4 {\r\n font-size: 1rem;\r\n margin-bottom: 0.3rem;\r\n color: var(--dark);\r\n }\r\n\r\n .notification-text p {\r\n font-size: 0.85rem;\r\n color: var(--gray);\r\n }\r\n\r\n \/* Scroll to Top *\/\r\n .scroll-top {\r\n position: fixed;\r\n bottom: 30px;\r\n right: 30px;\r\n width: 50px;\r\n height: 50px;\r\n background: var(--primary);\r\n color: var(--white);\r\n border: none;\r\n border-radius: 50%;\r\n font-size: 1.2rem;\r\n cursor: pointer;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: all 0.3s ease;\r\n z-index: 1500;\r\n }\r\n\r\n .scroll-top.visible {\r\n opacity: 1;\r\n pointer-events: all;\r\n }\r\n\r\n .scroll-top:hover {\r\n background: var(--primary-dark);\r\n transform: translateY(-5px);\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1024px) {\r\n .hero-content {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n }\r\n\r\n .hero-text h1 {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .footer-content {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n\r\n .products-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .nav-links {\r\n display: none;\r\n }\r\n\r\n .search-input {\r\n width: 150px;\r\n }\r\n\r\n .search-input:focus {\r\n width: 200px;\r\n }\r\n\r\n .hero-text h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n .section-title h2 {\r\n font-size: 2rem;\r\n }\r\n\r\n .products-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .cart-sidebar {\r\n width: 100%;\r\n right: -100%;\r\n }\r\n\r\n .footer-content {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .newsletter-form {\r\n flex-direction: column;\r\n }\r\n }\r\n\r\n \/* Loading Animation *\/\r\n @keyframes slideInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .animate-in {\r\n animation: slideInUp 0.6s ease-out;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Header -->\r\n <header id=\"header\">\r\n <!-- Top Bar -->\r\n <div class=\"top-bar\">\r\n <div class=\"top-bar-content\">\r\n <div class=\"top-bar-left\">\r\n <a href=\"tel:+1234567890\">\r\n <i class=\"fas fa-phone\"><\/i>\r\n +1 (234) 567-890\r\n <\/a>\r\n <a href=\"mailto:info@adcelectronique.com\">\r\n <i class=\"fas fa-envelope\"><\/i>\r\n info@adcelectronique.com\r\n <\/a>\r\n <\/div>\r\n <div class=\"top-bar-right\">\r\n <div class=\"language-selector\">\r\n <i class=\"fas fa-globe\"><\/i>\r\n <span>EN<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <div class=\"currency-selector\">\r\n <span>USD<\/span>\r\n <i class=\"fas fa-chevron-down\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Main Navigation -->\r\n <nav class=\"main-nav\">\r\n <div class=\"logo-container\">\r\n <a href=\"#\" class=\"logo\">ADC<\/a>\r\n <\/div>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#home\">Home<\/a><\/li>\r\n <li><a href=\"#products\">Products<\/a><\/li>\r\n <li><a href=\"#categories\">Categories<\/a><\/li>\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <div class=\"nav-actions\">\r\n <div class=\"search-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search products...\" id=\"searchInput\">\r\n <button class=\"search-btn\"><i class=\"fas fa-search\"><\/i><\/button>\r\n <\/div>\r\n <button class=\"icon-btn\">\r\n <i class=\"fas fa-heart\"><\/i>\r\n <span class=\"badge\">0<\/span>\r\n <\/button>\r\n <button class=\"cart-btn\" onclick=\"toggleCart()\">\r\n <i class=\"fas fa-shopping-cart\"><\/i>\r\n <span id=\"cartCount\">0<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n <\/header>\r\n\r\n <!-- Hero Section -->\r\n <section class=\"hero\" id=\"home\">\r\n <div class=\"hero-content\">\r\n <div class=\"hero-text\">\r\n <h1>We Provide <span class=\"highlight\">High Quality<\/span> Electronics & Accessories<\/h1>\r\n <p>Discover premium electronic components, gadgets, and home accessories with fast delivery, best quality, and free returns. Your trusted partner in technology.<\/p>\r\n <div class=\"hero-buttons\">\r\n <a href=\"#products\" class=\"btn-primary\">\r\n Shop Now\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <a href=\"#categories\" class=\"btn-secondary\">\r\n Browse Categories\r\n <i class=\"fas fa-th\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-image\">\r\n <div class=\"hero-product-showcase\">\r\n <i class=\"fas fa-microchip\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Features Section -->\r\n <section class=\"features\">\r\n <div class=\"features-grid\">\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <i class=\"fas fa-shipping-fast\"><\/i>\r\n <\/div>\r\n <h3>Fast Delivery<\/h3>\r\n <p>Lightning-fast shipping with real-time tracking. Get your products delivered within 24-48 hours.<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <i class=\"fas fa-certificate\"><\/i>\r\n <\/div>\r\n <h3>Best Quality<\/h3>\r\n <p>Premium grade products with rigorous quality control. Only the best for our customers.<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <i class=\"fas fa-undo-alt\"><\/i>\r\n <\/div>\r\n <h3>Free Return<\/h3>\r\n <p>30-day hassle-free returns. Not satisfied? Get a full refund, no questions asked.<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <div class=\"feature-icon\">\r\n <i class=\"fas fa-headset\"><\/i>\r\n <\/div>\r\n <h3>24\/7 Support<\/h3>\r\n <p>Expert customer support available around the clock. We're always here to help you.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Products Section -->\r\n <section class=\"products\" id=\"products\">\r\n <div class=\"section-title\">\r\n <h2>Most Popular Products<\/h2>\r\n <p>Discover our curated selection of premium electronics and accessories<\/p>\r\n <\/div>\r\n \r\n <div class=\"products-header\">\r\n <div class=\"filter-buttons\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">All Products<\/button>\r\n <button class=\"filter-btn\" data-filter=\"electronics\">Electronics<\/button>\r\n <button class=\"filter-btn\" data-filter=\"accessories\">Accessories<\/button>\r\n <button class=\"filter-btn\" data-filter=\"gadgets\">Gadgets<\/button>\r\n <button class=\"filter-btn\" data-filter=\"smart-home\">Smart Home<\/button>\r\n <\/div>\r\n <div class=\"view-toggle\">\r\n <button class=\"view-btn active\"><i class=\"fas fa-th\"><\/i><\/button>\r\n <button class=\"view-btn\"><i class=\"fas fa-list\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"products-grid\" id=\"productsGrid\">\r\n <!-- Products will be dynamically inserted here -->\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Categories Section -->\r\n <section class=\"categories\" id=\"categories\">\r\n <div class=\"section-title\">\r\n <h2>Shop by Category<\/h2>\r\n <p>Browse our extensive collection of product categories<\/p>\r\n <\/div>\r\n <div class=\"categories-grid\">\r\n <div class=\"category-card\">\r\n <div class=\"category-overlay\">\r\n <div class=\"category-icon\"><i class=\"fas fa-laptop\"><\/i><\/div>\r\n <div class=\"category-name\">Computers<\/div>\r\n <div class=\"category-count\">245 Products<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"category-card\">\r\n <div class=\"category-overlay\">\r\n <div class=\"category-icon\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\r\n <div class=\"category-name\">Smartphones<\/div>\r\n <div class=\"category-count\">180 Products<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"category-card\">\r\n <div class=\"category-overlay\">\r\n <div class=\"category-icon\"><i class=\"fas fa-headphones\"><\/i><\/div>\r\n <div class=\"category-name\">Audio<\/div>\r\n <div class=\"category-count\">320 Products<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"category-card\">\r\n <div class=\"category-overlay\">\r\n <div class=\"category-icon\"><i class=\"fas fa-camera\"><\/i><\/div>\r\n <div class=\"category-name\">Photography<\/div>\r\n <div class=\"category-count\">156 Products<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Stats Section -->\r\n <section class=\"stats\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" data-target=\"50000\">0<\/div>\r\n <div class=\"stat-label\">Products Sold<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" data-target=\"25000\">0<\/div>\r\n <div class=\"stat-label\">Happy Customers<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" data-target=\"98\">0<\/div>\r\n <div class=\"stat-label\">Satisfaction Rate<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\" data-target=\"60\">0<\/div>\r\n <div class=\"stat-label\">Countries Served<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Newsletter Section -->\r\n <section class=\"newsletter\">\r\n <div class=\"newsletter-content\">\r\n <h2>Subscribe to Our Newsletter<\/h2>\r\n <p>Get the latest updates on new products, exclusive deals, and special offers<\/p>\r\n <form class=\"newsletter-form\">\r\n <input type=\"email\" class=\"newsletter-input\" placeholder=\"Enter your email address\" required>\r\n <button type=\"submit\" class=\"newsletter-btn\">Subscribe<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Footer -->\r\n <footer>\r\n <div class=\"footer-content\">\r\n <div class=\"footer-section\">\r\n <h3>ADC Electronique<\/h3>\r\n <p>Your trusted partner in premium electronics and accessories. Quality products, exceptional service, and fast delivery worldwide.<\/p>\r\n <div class=\"social-links\">\r\n <a href=\"#\" class=\"social-btn\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\r\n <a href=\"#\" class=\"social-btn\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n <a href=\"#\" class=\"social-btn\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n <a href=\"#\" class=\"social-btn\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\r\n <a href=\"#\" class=\"social-btn\"><i class=\"fab fa-youtube\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-section\">\r\n <h3>Quick Links<\/h3>\r\n <ul>\r\n <li><a href=\"#home\">Home<\/a><\/li>\r\n <li><a href=\"#products\">Products<\/a><\/li>\r\n <li><a href=\"#categories\">Categories<\/a><\/li>\r\n <li><a href=\"#about\">About Us<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-section\">\r\n <h3>Customer Service<\/h3>\r\n <ul>\r\n <li><a href=\"#\">Shipping Policy<\/a><\/li>\r\n <li><a href=\"#\">Returns & Exchanges<\/a><\/li>\r\n <li><a href=\"#\">Track Order<\/a><\/li>\r\n <li><a href=\"#\">FAQs<\/a><\/li>\r\n <li><a href=\"#\">Support<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-section\">\r\n <h3>Contact Info<\/h3>\r\n <ul>\r\n <li><i class=\"fas fa-map-marker-alt\"><\/i> 123 Electronics Ave, Tech City<\/li>\r\n <li><i class=\"fas fa-phone\"><\/i> +1 (234) 567-890<\/li>\r\n <li><i class=\"fas fa-envelope\"><\/i> info@adcelectronique.com<\/li>\r\n <li><i class=\"fas fa-clock\"><\/i> Mon-Fri: 9AM - 6PM<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <p>© 2025 ADC Electronique. All rights reserved.<\/p>\r\n <div class=\"payment-methods\">\r\n <i class=\"fab fa-cc-visa\"><\/i>\r\n <i class=\"fab fa-cc-mastercard\"><\/i>\r\n <i class=\"fab fa-cc-paypal\"><\/i>\r\n <i class=\"fab fa-cc-amex\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- Cart Sidebar -->\r\n <div class=\"cart-sidebar\" id=\"cartSidebar\">\r\n <div class=\"cart-header\">\r\n <h2>Shopping Cart<\/h2>\r\n <button class=\"close-cart\" onclick=\"toggleCart()\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"cart-items\" id=\"cartItems\">\r\n <p style=\"text-align: center; color: var(--gray); padding: 3rem 1rem;\">Your cart is empty<\/p>\r\n <\/div>\r\n <div class=\"cart-footer\" id=\"cartFooter\" style=\"display: none;\">\r\n <div class=\"cart-subtotal\">\r\n <span>Subtotal:<\/span>\r\n <span id=\"cartSubtotal\">$0.00<\/span>\r\n <\/div>\r\n <div class=\"cart-total\">\r\n <span>Total:<\/span>\r\n <span id=\"cartTotal\">$0.00<\/span>\r\n <\/div>\r\n <button class=\"checkout-btn\">\r\n <i class=\"fas fa-lock\"><\/i> Proceed to Checkout\r\n <\/button>\r\n <button class=\"continue-shopping\" onclick=\"toggleCart()\">\r\n Continue Shopping\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Notification Toast -->\r\n <div class=\"notification\" id=\"notification\">\r\n <div class=\"notification-icon\">\r\n <i class=\"fas fa-check\"><\/i>\r\n <\/div>\r\n <div class=\"notification-text\">\r\n <h4>Added to Cart!<\/h4>\r\n <p id=\"notificationText\">Product added successfully<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Scroll to Top Button -->\r\n <button class=\"scroll-top\" id=\"scrollTop\" onclick=\"scrollToTop()\">\r\n <i class=\"fas fa-arrow-up\"><\/i>\r\n <\/button>\r\n\r\n <script>\r\n \/\/ Products Data (Real WooCommerce-style structure)\r\n const products = [\r\n {\r\n id: 1,\r\n name: \"Wireless Bluetooth Earbuds Pro\",\r\n category: \"electronics\",\r\n price: 89.99,\r\n oldPrice: 129.99,\r\n badge: \"Sale\",\r\n badgeType: \"sale\",\r\n icon: \"fa-headphones\",\r\n description: \"Premium wireless earbuds with active noise cancellation and 30-hour battery life\",\r\n rating: 4.8,\r\n reviews: 234,\r\n stock: 45\r\n },\r\n {\r\n id: 2,\r\n name: \"Smart Home Security Camera HD\",\r\n category: \"smart-home\",\r\n price: 129.99,\r\n oldPrice: null,\r\n badge: \"New\",\r\n badgeType: \"new\",\r\n icon: \"fa-video\",\r\n description: \"1080p HD security camera with motion detection and night vision capabilities\",\r\n rating: 4.6,\r\n reviews: 187,\r\n stock: 32\r\n },\r\n {\r\n id: 3,\r\n name: \"USB-C Fast Charging Cable 2M\",\r\n category: \"accessories\",\r\n price: 19.99,\r\n oldPrice: 29.99,\r\n badge: \"Sale\",\r\n badgeType: \"sale\",\r\n icon: \"fa-plug\",\r\n description: \"Durable braided charging cable with fast charging support up to 60W\",\r\n rating: 4.9,\r\n reviews: 456,\r\n stock: 150\r\n },\r\n {\r\n id: 4,\r\n name: \"Mechanical Gaming Keyboard RGB\",\r\n category: \"electronics\",\r\n price: 159.99,\r\n oldPrice: null,\r\n badge: \"Hot\",\r\n badgeType: \"hot\",\r\n icon: \"fa-keyboard\",\r\n description: \"Premium mechanical keyboard with customizable RGB lighting and macro keys\",\r\n rating: 4.7,\r\n reviews: 298,\r\n stock: 28\r\n },\r\n {\r\n id: 5,\r\n name: \"Portable Power Bank 20000mAh\",\r\n category: \"accessories\",\r\n price: 49.99,\r\n oldPrice: 69.99,\r\n badge: \"Sale\",\r\n badgeType: \"sale\",\r\n icon: \"fa-battery-full\",\r\n description: \"High-capacity power bank with dual USB ports and fast charging technology\",\r\n rating: 4.5,\r\n reviews: 342,\r\n stock: 67\r\n },\r\n {\r\n id: 6,\r\n name: \"Smart LED Light Bulb RGB\",\r\n category: \"smart-home\",\r\n price: 24.99,\r\n oldPrice: null,\r\n badge: \"New\",\r\n badgeType: \"new\",\r\n icon: \"fa-lightbulb\",\r\n description: \"WiFi-enabled smart bulb with 16 million colors and voice control support\",\r\n rating: 4.4,\r\n reviews: 189,\r\n stock: 95\r\n },\r\n {\r\n id: 7,\r\n name: \"Wireless Gaming Mouse Pro\",\r\n category: \"electronics\",\r\n price: 79.99,\r\n oldPrice: 99.99,\r\n badge: \"Sale\",\r\n badgeType: \"sale\",\r\n icon: \"fa-mouse\",\r\n description: \"Ergonomic wireless gaming mouse with 16000 DPI and programmable buttons\",\r\n rating: 4.8,\r\n reviews: 412,\r\n stock: 53\r\n },\r\n {\r\n id: 8,\r\n name: \"Smart Fitness Tracker Watch\",\r\n category: \"gadgets\",\r\n price: 99.99,\r\n oldPrice: null,\r\n badge: \"Hot\",\r\n badgeType: \"hot\",\r\n icon: \"fa-watch\",\r\n description: \"Advanced fitness tracker with heart rate monitoring and GPS tracking\",\r\n rating: 4.6,\r\n reviews: 276,\r\n stock: 41\r\n },\r\n {\r\n id: 9,\r\n name: \"Wireless Phone Charger Stand\",\r\n category: \"accessories\",\r\n price: 34.99,\r\n oldPrice: 49.99,\r\n badge: \"Sale\",\r\n badgeType: \"sale\",\r\n icon: \"fa-charging-station\",\r\n description: \"Fast wireless charging stand compatible with all Qi-enabled devices\",\r\n rating: 4.7,\r\n reviews: 198,\r\n stock: 78\r\n },\r\n {\r\n id: 10,\r\n name: \"HD Webcam 1080p with Microphone\",\r\n category: \"electronics\",\r\n price: 69.99,\r\n oldPrice: null,\r\n badge: \"New\",\r\n badgeType: \"new\",\r\n icon: \"fa-camera\",\r\n description: \"Professional webcam with auto-focus and built-in noise-canceling microphone\",\r\n rating: 4.5,\r\n reviews: 224,\r\n stock: 36\r\n },\r\n {\r\n id: 11,\r\n name: \"Bluetooth Speaker Waterproof\",\r\n category: \"gadgets\",\r\n price: 59.99,\r\n oldPrice: 89.99,\r\n badge: \"Sale\",\r\n badgeType: \"sale\",\r\n icon: \"fa-volume-up\",\r\n description: \"Portable waterproof speaker with 360\u00b0 sound and 12-hour battery life\",\r\n rating: 4.8,\r\n reviews: 367,\r\n stock: 62\r\n },\r\n {\r\n id: 12,\r\n name: \"Smart Thermostat WiFi Enabled\",\r\n category: \"smart-home\",\r\n price: 149.99,\r\n oldPrice: null,\r\n badge: \"Hot\",\r\n badgeType: \"hot\",\r\n icon: \"fa-thermometer-half\",\r\n description: \"Intelligent thermostat with learning capabilities and energy-saving features\",\r\n rating: 4.7,\r\n reviews: 156,\r\n stock: 24\r\n }\r\n ];\r\n\r\n \/\/ Cart State\r\n let cart = [];\r\n\r\n \/\/ Initialize\r\n document.addEventListener('DOMContentLoaded', function() {\r\n renderProducts();\r\n setupFilterButtons();\r\n setupScrollEffects();\r\n animateStats();\r\n setupSearch();\r\n });\r\n\r\n \/\/ Render Products\r\n function renderProducts(filter = 'all') {\r\n const grid = document.getElementById('productsGrid');\r\n const filteredProducts = filter === 'all' \r\n ? products \r\n : products.filter(p => p.category === filter);\r\n\r\n grid.innerHTML = filteredProducts.map(product => `\r\n <div class=\"product-card animate-in\" data-category=\"${product.category}\">\r\n ${product.badge ? `<div class=\"product-badge ${product.badgeType}\">${product.badge}<\/div>` : ''}\r\n <div class=\"product-actions\">\r\n <button class=\"action-btn\" title=\"Add to Wishlist\">\r\n <i class=\"fas fa-heart\"><\/i>\r\n <\/button>\r\n <button class=\"action-btn\" title=\"Quick View\">\r\n <i class=\"fas fa-eye\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"product-image-container\">\r\n <i class=\"fas ${product.icon}\"><\/i>\r\n <\/div>\r\n <div class=\"product-info\">\r\n <div class=\"product-category\">${product.category}<\/div>\r\n <h3 class=\"product-title\">${product.name}<\/h3>\r\n <p class=\"product-description\">${product.description}<\/p>\r\n <div class=\"product-rating\">\r\n <div class=\"stars\">\r\n ${'<i class=\"fas fa-star\"><\/i>'.repeat(Math.floor(product.rating))}\r\n ${product.rating % 1 !== 0 ? '<i class=\"fas fa-star-half-alt\"><\/i>' : ''}\r\n <\/div>\r\n <span class=\"rating-count\">(${product.reviews})<\/span>\r\n <\/div>\r\n <div class=\"product-footer\">\r\n <div class=\"product-price\">\r\n <span class=\"price-current\">$${product.price}<\/span>\r\n ${product.oldPrice ? `<span class=\"price-old\">$${product.oldPrice}<\/span>` : ''}\r\n <\/div>\r\n <button class=\"add-to-cart-btn\" onclick=\"addToCart(${product.id})\">\r\n <i class=\"fas fa-cart-plus\"><\/i>\r\n Add to Cart\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n \/\/ Setup Filter Buttons\r\n function setupFilterButtons() {\r\n const filterButtons = document.querySelectorAll('.filter-btn');\r\n filterButtons.forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n filterButtons.forEach(b => b.classList.remove('active'));\r\n this.classList.add('active');\r\n const filter = this.getAttribute('data-filter');\r\n renderProducts(filter);\r\n });\r\n });\r\n }\r\n\r\n \/\/ Add to Cart\r\n function addToCart(productId) {\r\n const product = products.find(p => p.id === productId);\r\n const existingItem = cart.find(item => item.id === productId);\r\n\r\n if (existingItem) {\r\n existingItem.quantity++;\r\n } else {\r\n cart.push({ ...product, quantity: 1 });\r\n }\r\n\r\n updateCart();\r\n showNotification(`${product.name} added to cart!`);\r\n }\r\n\r\n \/\/ Update Cart\r\n function updateCart() {\r\n const cartCount = document.getElementById('cartCount');\r\n const cartItems = document.getElementById('cartItems');\r\n const cartFooter = document.getElementById('cartFooter');\r\n const cartSubtotal = document.getElementById('cartSubtotal');\r\n const cartTotal = document.getElementById('cartTotal');\r\n\r\n const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);\r\n const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);\r\n\r\n cartCount.textContent = totalItems;\r\n cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;\r\n cartTotal.textContent = `$${subtotal.toFixed(2)}`;\r\n\r\n if (cart.length === 0) {\r\n cartItems.innerHTML = '<p style=\"text-align: center; color: var(--gray); padding: 3rem 1rem;\">Your cart is empty<\/p>';\r\n cartFooter.style.display = 'none';\r\n } else {\r\n cartFooter.style.display = 'block';\r\n cartItems.innerHTML = cart.map(item => `\r\n <div class=\"cart-item\">\r\n <div class=\"cart-item-image\">\r\n <i class=\"fas ${item.icon}\"><\/i>\r\n <\/div>\r\n <div class=\"cart-item-info\">\r\n <h4>${item.name}<\/h4>\r\n <div class=\"cart-item-price\">$${item.price}<\/div>\r\n <div class=\"cart-item-quantity\">\r\n <button class=\"qty-btn\" onclick=\"updateQuantity(${item.id}, -1)\">-<\/button>\r\n <span>${item.quantity}<\/span>\r\n <button class=\"qty-btn\" onclick=\"updateQuantity(${item.id}, 1)\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n <button class=\"remove-item\" onclick=\"removeItem(${item.id})\">\r\n <i class=\"fas fa-trash\"><\/i>\r\n <\/button>\r\n <\/div>\r\n `).join('');\r\n }\r\n }\r\n\r\n \/\/ Update Quantity\r\n function updateQuantity(productId, change) {\r\n const item = cart.find(i => i.id === productId);\r\n if (item) {\r\n item.quantity += change;\r\n if (item.quantity <= 0) {\r\n cart = cart.filter(i => i.id !== productId);\r\n }\r\n updateCart();\r\n }\r\n }\r\n\r\n \/\/ Remove Item\r\n function removeItem(productId) {\r\n cart = cart.filter(i => i.id !== productId);\r\n updateCart();\r\n }\r\n\r\n \/\/ Toggle Cart\r\n function toggleCart() {\r\n const cartSidebar = document.getElementById('cartSidebar');\r\n cartSidebar.classList.toggle('active');\r\n }\r\n\r\n \/\/ Show Notification\r\n function showNotification(text) {\r\n const notification = document.getElementById('notification');\r\n const notificationText = document.getElementById('notificationText');\r\n notificationText.textContent = text;\r\n notification.classList.add('show');\r\n setTimeout(() => {\r\n notification.classList.remove('show');\r\n }, 3000);\r\n }\r\n\r\n \/\/ Scroll Effects\r\n function setupScrollEffects() {\r\n const header = document.getElementById('header');\r\n const scrollTopBtn = document.getElementById('scrollTop');\r\n\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 100) {\r\n header.classList.add('scrolled');\r\n scrollTopBtn.classList.add('visible');\r\n } else {\r\n header.classList.remove('scrolled');\r\n scrollTopBtn.classList.remove('visible');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Scroll to Top\r\n function scrollToTop() {\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n \/\/ Animate Stats\r\n function animateStats() {\r\n const statNumbers = document.querySelectorAll('.stat-number');\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const target = entry.target;\r\n const targetValue = parseInt(target.getAttribute('data-target'));\r\n const duration = 2000;\r\n const increment = targetValue \/ (duration \/ 16);\r\n \r\n let current = 0;\r\n const timer = setInterval(() => {\r\n current += increment;\r\n if (current >= targetValue) {\r\n target.textContent = targetValue.toLocaleString() + (targetValue === 98 ? '%' : '+');\r\n clearInterval(timer);\r\n } else {\r\n target.textContent = Math.floor(current).toLocaleString() + (targetValue === 98 ? '%' : '+');\r\n }\r\n }, 16);\r\n \r\n observer.unobserve(target);\r\n }\r\n });\r\n });\r\n\r\n statNumbers.forEach(stat => observer.observe(stat));\r\n }\r\n\r\n \/\/ Search Functionality\r\n function setupSearch() {\r\n const searchInput = document.getElementById('searchInput');\r\n searchInput.addEventListener('input', function(e) {\r\n const searchTerm = e.target.value.toLowerCase();\r\n const productCards = document.querySelectorAll('.product-card');\r\n \r\n productCards.forEach(card => {\r\n const title = card.querySelector('.product-title').textContent.toLowerCase();\r\n const description = card.querySelector('.product-description').textContent.toLowerCase();\r\n \r\n if (title.includes(searchTerm) || description.includes(searchTerm)) {\r\n card.style.display = 'block';\r\n } else {\r\n card.style.display = 'none';\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Smooth Scroll\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) {\r\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n });\r\n });\r\n\r\n \/\/ Newsletter Form\r\n document.querySelector('.newsletter-form').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n showNotification('Thank you for subscribing to our newsletter!');\r\n this.reset();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ADC Electronique – Premium Electronics & Home Accessories +1 (234) 567-890 info@adcelectronique.com EN USD ADC Home Products Categories About Contact<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9950","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>claud - ADC Electronique<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/adcelectronique.com\/index.php\/claud\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"claud\" \/>\n<meta property=\"og:description\" content=\"ADC Electronique – Premium Electronics & Home Accessories +1 (234) 567-890 info@adcelectronique.com EN USD ADC Home Products Categories About Contact\" \/>\n<meta property=\"og:url\" content=\"https:\/\/adcelectronique.com\/index.php\/claud\/\" \/>\n<meta property=\"og:site_name\" content=\"ADC Electronique\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-02T02:50:56+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/adcelectronique.com\/index.php\/claud\/\",\"url\":\"https:\/\/adcelectronique.com\/index.php\/claud\/\",\"name\":\"claud - ADC Electronique\",\"isPartOf\":{\"@id\":\"https:\/\/adcelectronique.com\/#website\"},\"datePublished\":\"2025-11-02T02:40:21+00:00\",\"dateModified\":\"2025-11-02T02:50:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/adcelectronique.com\/index.php\/claud\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/adcelectronique.com\/index.php\/claud\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/adcelectronique.com\/index.php\/claud\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/adcelectronique.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"claud\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/adcelectronique.com\/#website\",\"url\":\"https:\/\/adcelectronique.com\/\",\"name\":\"ADC Electronique\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/adcelectronique.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"claud - ADC Electronique","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/adcelectronique.com\/index.php\/claud\/","og_locale":"fr_FR","og_type":"article","og_title":"claud","og_description":"ADC Electronique – Premium Electronics & Home Accessories +1 (234) 567-890 info@adcelectronique.com EN USD ADC Home Products Categories About Contact","og_url":"https:\/\/adcelectronique.com\/index.php\/claud\/","og_site_name":"ADC Electronique","article_modified_time":"2025-11-02T02:50:56+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/adcelectronique.com\/index.php\/claud\/","url":"https:\/\/adcelectronique.com\/index.php\/claud\/","name":"claud - ADC Electronique","isPartOf":{"@id":"https:\/\/adcelectronique.com\/#website"},"datePublished":"2025-11-02T02:40:21+00:00","dateModified":"2025-11-02T02:50:56+00:00","breadcrumb":{"@id":"https:\/\/adcelectronique.com\/index.php\/claud\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/adcelectronique.com\/index.php\/claud\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/adcelectronique.com\/index.php\/claud\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/adcelectronique.com\/"},{"@type":"ListItem","position":2,"name":"claud"}]},{"@type":"WebSite","@id":"https:\/\/adcelectronique.com\/#website","url":"https:\/\/adcelectronique.com\/","name":"ADC Electronique","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/adcelectronique.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/adcelectronique.com\/index.php\/wp-json\/wp\/v2\/pages\/9950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adcelectronique.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adcelectronique.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adcelectronique.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adcelectronique.com\/index.php\/wp-json\/wp\/v2\/comments?post=9950"}],"version-history":[{"count":0,"href":"https:\/\/adcelectronique.com\/index.php\/wp-json\/wp\/v2\/pages\/9950\/revisions"}],"wp:attachment":[{"href":"https:\/\/adcelectronique.com\/index.php\/wp-json\/wp\/v2\/media?parent=9950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}