Team Ai
Apppublic

taha1444/choco-ruby-admin-delight

sourceHugging Faceupdated 9mo agoView on Hugging Face
0likes
2 commits on main
d2395b29mo ago

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Choco Ruby – Where Chocolate Meets Elegance</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { colors: { ruby: '#E91E63', 'ruby-dark': '#C2185B', 'ruby-light': '#F8BBD9', chocolate: '#3E2723', 'chocolate-light': '#5D4037', gold: '#D4AF37', 'gold-light': '#F5E6A3', cream: '#FFF8F0', }, fontFamily: { playfair: ['Playfair Display', 'serif'], montserrat: ['Montserrat', 'sans-serif'], } } } } </script> <style> * { scroll-behavior: smooth; } body { font-family: 'Montserrat', sans-serif; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; } .hero-gradient { background: linear-gradient(135deg, rgba(62, 39, 35, 0.9) 0%, rgba(62, 39, 35, 0.7) 50%, rgba(233, 30, 99, 0.3) 100%); } .gold-shimmer { background: linear-gradient(90deg, #D4AF37, #F5E6A3, #D4AF37); background-size: 200% auto; animation: shimmer 3s linear infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .product-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .product-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px -12px rgba(62, 39, 35, 0.25); } .product-card:hover .product-image { transform: scale(1.05); } .product-image { transition: transform 0.4s ease; } .btn-primary { background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%); transition: all 0.3s ease; } .btn-primary:hover { background: linear-gradient(135deg, #C2185B 0%, #E91E63 100%); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(233, 30, 99, 0.3); } .btn-gold { background: linear-gradient(135deg, #D4AF37 0%, #F5E6A3 50%, #D4AF37 100%); color: #3E2723; transition: all 0.3s ease; } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(212, 175, 55, 0.4); } .feature-card { transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-5px); } .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); } .feature-icon { transition: transform 0.3s ease; } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #D4AF37, #F5E6A3); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .testimonial-card { backdrop-filter: blur(10px); } .floating { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #FFF8F0; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #E91E63, #D4AF37); border-radius: 4px; } .cart-badge { animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } </style> </head> <body class="bg-cream"> <!-- Navigation --> <nav class="fixed top-0 left-0 right-0 z-50 bg-chocolate/95 backdrop-blur-md shadow-lg"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-20"> <!-- Logo --> <div class="flex items-center space-x-2"> <img src="images/logo1.png.png" alt="Choco Ruby Logo" class="h-16"> <span class="text-white font-playfair text-2xl font-semibold">Choco <span class="gold-shimmer">Ruby</span></span> </div> <!-- Desktop Menu --> <div class="hidden md:flex items-center space-x-8"> <a href="#home" class="nav-link text-white/90 hover:text-gold transition-colors font-medium">Home</a> <a href="#about" class="nav-link text-white/90 hover:text-gold transition-colors font-medium">About</a> <a href="#products" class="nav-link text-white/90 hover:text-gold transition-colors font-medium">Products</a> <a href="#why-us" class="nav-link text-white/90 hover:text-gold transition-colors font-medium">Why Us</a> <a href="#contact" class="nav-link text-white/90 hover:text-gold transition-colors font-medium">Contact</a> </div> <!-- Cart & Mobile Menu --> <div class="flex items-center space-x-4"> <button class="relative text-white hover:text-gold transition-colors"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path> </svg> <span class="cart-badge absolute -top-2 -right-2 bg-ruby text-white text-xs w-5 h-5 rounded-full flex items-center justify-center font-semibold">0</span> </button> <button id="mobile-menu-btn" class="md:hidden text-white"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="md:hidden hidden bg-chocolate-light"> <div class="px-4 py-4 space-y-3"> <a href="#home" class="block text-white/90 hover:text-gold transition-colors py-2">Home</a> <a href="#about" class="block text-white/90 hover:text-gold transition-colors py-2">About</a> <a href="#products" class="block text-white/90 hover:text-gold transition-colors py-2">Products</a> <a href="#why-us" class="block text-white/90 hover:text-gold transition-colors py-2">Why Us</a> <a href="#contact" class="block text-white/90 hover:text-gold transition-colors py-2">Contact</a> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden"> <!-- Background Image Placeholder --> <div class="absolute inset-0 bg-gradient-to-br from-chocolate via-chocolate-light to-ruby/30"> <div class="absolute inset-0" style="background-image: url('https://images.unsplash.com/photo-1481391319762-47dff72954d9?w=1920&q=80'); background-size: cover; background-position: center; opacity: 0.4;"></div> </div> <div class="absolute inset-0 hero-gradient"></div> <!-- Decorative Elements --> <div class="absolute top-20 left-10 w-32 h-32 bg-ruby/20 rounded-full blur-3xl floating"></div> <div class="absolute bottom-20 right-10 w-40 h-40 bg-gold/20 rounded-full blur-3xl floating" style="animation-delay: 1s;"></div> <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div class="space-y-8"> <div class="inline-block px-6 py-2 border border-gold/50 rounded-full"> <span class="text-gold text-sm tracking-widest uppercase">Premium Artisan Chocolate</span> </div> <h1 class="text-5xl md:text-7xl lg:text-8xl font-playfair text-white leading-tight"> Choco <span class="gold-shimmer">Ruby</span> </h1> <p class="text-2xl md:text-3xl font-playfair text-ruby-light italic"> Where Chocolate Meets Elegance </p> <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto font-light"> Experience handcrafted ruby chocolates with luxury taste. Each piece is a masterpiece of flavor and artistry. </p> <div class="flex flex-col sm:flex-row gap-4 justify-center pt-8"> <a href="#products" class="btn-primary px-10 py-4 rounded-full text-white font-semibold text-lg shadow-xl"> Shop Now </a> <a href="#about" class="btn-gold px-10 py-4 rounded-full font-semibold text-lg shadow-xl"> Our Story </a> </div> </div> </div> <!-- Scroll Indicator --> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> <svg class="w-8 h-8 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> </svg> </div> </section> <!-- About Section --> <section id="about" class="py-24 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid md:grid-cols-2 gap-16 items-center"> <div class="fade-in"> <div class="relative"> <div class="absolute -top-4 -left-4 w-full h-full bg-gradient-to-br from-ruby/20 to-gold/20 rounded-3xl"></div> <div class="relative overflow-hidden rounded-3xl shadow-2xl"> <img src="https://images.unsplash.com/photo-1549007994-cb92caebd54b?w=800&q=80" alt="Artisan chocolate making" class="w-full h-96 object-cover"> </div> <div class="absolute -bottom-6 -right-6 bg-chocolate text-white p-6 rounded-2xl shadow-xl"> <span class="block text-4xl font-playfair gold-shimmer">10+</span> <span class="text-sm text-white/80">Years of Excellence</span> </div> </div> </div> <div class="fade-in" style="transition-delay: 0.2s;"> <div class="inline-block px-4 py-1 bg-ruby/10 rounded-full mb-4"> <span class="text-ruby text-sm font-medium tracking-wide">Our Story</span> </div> <h2 class="text-4xl md:text-5xl font-playfair text-chocolate mb-6"> Crafted with <span class="text-ruby">Passion</span> & <span class="text-gold">Elegance</span> </h2> <div class="w-20 h-1 bg-gradient-to-r from-ruby to-gold mb-8"></div> <p class="text-chocolate-light text-lg leading-relaxed mb-6"> Choco Ruby was created to bring the finest ruby chocolate experience to chocolate lovers. Each piece is crafted with passion and elegance, using only the most premium ingredients sourced from around the world. </p> <p class="text-chocolate-light text-lg leading-relaxed mb-8"> Our master chocolatiers blend traditional techniques with modern innovation to create chocolates that are not just treats, but experiences. From our signature ruby chocolate to our exclusive collections, every creation tells a story of dedication and artistry. </p> <div class="flex flex-wrap gap-8"> <div class="text-center"> <span class="block text-3xl font-playfair text-ruby">100%</span> <span class="text-chocolate-light text-sm">Handcrafted</span> </div> <div class="text-center"> <span class="block text-3xl font-playfair text-gold">Premium</span> <span class="text-chocolate-light text-sm">Ingredients</span> </div> <div class="text-center"> <span class="block text-3xl font-playfair text-chocolate">Unique</span> <span class="text-chocolate-light text-sm">Flavors</span> </div> </div> </div> </div> </div> </section> <!-- Products Section --> <section id="products" class="py-24 bg-gradient-to-b from-cream to-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <div class="inline-block px-4 py-1 bg-ruby/10 rounded-full mb-4"> <span class="text-ruby text-sm font-medium tracking-wide">Premium Selection</span> </div> <h2 class="text-4xl md:text-5xl font-playfair text-chocolate mb-4"> Our <span class="gold-shimmer">Creations</span> </h2> <div class="w-20 h-1 bg-gradient-to-r from-ruby to-gold mx-auto mb-6"></div> <p class="text-chocolate-light text-lg max-w-2xl mx-auto"> Discover our exquisite collection of handcrafted ruby chocolates, each piece a masterpiece of flavor and artistry. </p> </div> <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Product 1 --> <div class="product-card bg-white rounded-3xl overflow-hidden shadow-lg fade-in"> <div class="relative overflow-hidden"> <img src="images/product5.jpg.png" alt="Ruby Hearts" class="product-image w-full h-72 object-cover"> <div class="absolute top-4 right-4 bg-ruby text-white px-3 py-1 rounded-full text-sm font-medium"> Bestseller </div> </div> <div class="p-6"> <h3 class="text-2xl font-playfair text-chocolate mb-2">Ruby Hearts</h3> <p class="text-chocolate-light text-sm mb-4">Delicate heart-shaped ruby chocolates filled with smooth ganache. Perfect for expressing love.</p> <div class="flex items-center justify-between"> <span class="text-2xl font-playfair text-ruby">4 000 <span class="text-sm">DA</span></span> <button class="add-to-cart btn-primary px-6 py-2 rounded-full text-white text-sm font-medium"> Add to Cart </button> </div> </div> </div> <!-- Product 2 --> <div class="product-card bg-white rounded-3xl overflow-hidden shadow-lg fade-in" style="transition-delay: 0.1s;"> <div class="relative overflow-hidden"> <img src="images/product6.jpg.png" alt="Royal Collection" class="product-image w-full h-72 object-cover"> <div class="absolute top-4 right-4 bg-gold text-chocolate px-3 py-1 rounded-full text-sm font-medium"> Premium </div> </div> <div class="p-6"> <h3 class="text-2xl font-playfair text-chocolate mb-2">Royal Collection</h3> <p class="text-chocolate-light text-sm mb-4">An exclusive assortment of our finest ruby chocolates in an elegant gold box. The ultimate luxury gift.</p> <div class="flex items-center justify-between"> <span class="text-2xl font-playfair text-ruby">12 000 <span class="text-sm">DA</span></span> <button class="add-to-cart btn-primary px-6 py-2 rounded-full text-white text-sm font-medium"> Add to Cart </button> </div> </div> </div> <!-- Product 3 --> <div class="product-card bg-white rounded-3xl overflow-hidden shadow-lg fade-in" style="transition-delay: 0.2s;"> <div class="relative overflow-hidden"> <img src="https://images.unsplash.com/photo-1548907040-4baa42d10919?w=600&q=80" alt="Elegance Box" class="product-image w-full h-72 object-cover"> <div class="absolute top-4 right-4 bg-chocolate text-white px-3 py-1 rounded-full text-sm font-medium"> Popular </div> </div> <div class="p-6"> <h3 class="text-2xl font-playfair text-chocolate mb-2">Elegance Box</h3> <p class="text-chocolate-light text-sm mb-4">A curated selection of mixed ruby chocolate pralines in a sophisticated presentation box.</p> <div class="flex items-center justify-between"> <span class="text-2xl font-playfair text-ruby">8 500 <span class="text-sm">DA</span></span> <button class="add-to-cart btn-primary px-6 py-2 rounded-full text-white text-sm font-medium"> Add to Cart </button> </div> </div> </div> <!-- Product 4 --> <div class="product-card bg-white rounded-3xl overflow-hidden shadow-lg fade-in" style="transition-delay: 0.3s;"> <div class="relative overflow-hidden"> <img src="images/product3.jpg.png" alt="Ruby Truffles" class="product-image w-full h-72 object-cover"> </div> <div class="p-6"> <h3 class="text-2xl font-playfair text-chocolate mb-2">Ruby Truffles</h3> <p class="text-chocolate-light text-sm mb-4">Handrolled truffles coated in ruby chocolate powder. Melt-in-your-mouth perfection.</p> <div class="flex items-center justify-between"> <span class="text-2xl font-playfair text-ruby">5 500 <span class="text-sm">DA</span></span> <button class="add-to-cart btn-primary px-6 py-2 rounded-full text-white text-sm font-medium"> Add to Cart </button> </div> </div> </div> <!-- Product 5 --> <div class="product-card bg-white rounded-3xl overflow-hidden shadow-lg fade-in" style="transition-delay: 0.4s;"> <div class="relative overflow-hidden"> <img src="images/product4.jpg.png" alt="Ruby Truffles" class="product-image w-full h-72 object-cover" > </div> <div class="p-6"> <h3 class="text-2xl font-playfair text-chocolate mb-2">Signature Bars</h3> <p class="text-chocolate-light text-sm mb-4">Premium ruby chocolate bars with dried fruits and nuts. A perfect everyday indulgence.</p> <div class="flex items-center justify-between"> <span class="text-2xl font-playfair text-ruby">3 000 <span class="text-sm">DA</span></span> <button class="add-to-cart btn-primary px-6 py-2 rounded-full text-white text-sm font-medium"> Add to Cart </button> </div> </div> </div> <!-- Product 6 --> <div class="product-card bg-white rounded-3xl overflow-hidden shadow-lg fade-in" style="transition-delay: 0.5s;"> <div class="relative overflow-hidden"> <img src="https://images.unsplash.com/photo-1511381939415-e44015466834?w=600&q=80" alt="Grand Gift Set" class="product-image w-full h-72 object-cover"> <div class="absolute top-4 right-4 bg-ruby text-white px-3 py-1 rounded-full text-sm font-medium"> Limited </div> </div> <div class="p-6"> <h3 class="text-2xl font-playfair text-chocolate mb-2">Grand Gift Set</h3> <p class="text-chocolate-light text-sm mb-4">The ultimate chocolate experience. Includes all our signature creations in a luxury case.</p> <div class="flex items-center justify-between"> <span class="text-2xl font-playfair text-ruby">25 000 <span class="text-sm">DA</span></span> <button class="add-to-cart btn-primary px-6 py-2 rounded-full text-white text-sm font-medium"> Add to Cart </button> </div> </div> </div> </div> </div> </section> <!-- Why Choose Us Section --> <section id="why-us" class="py-24 bg-chocolate relative overflow-hidden"> <!-- Decorative Elements --> <div class="absolute top-0 left-0 w-64 h-64 bg-ruby/10 rounded-full blur-3xl"></div> <div class="absolute bottom-0 right-0 w-80 h-80 bg-gold/10 rounded-full blur-3xl"></div> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="text-center mb-16 fade-in"> <div class="inline-block px-4 py-1 bg-white/10 rounded-full mb-4"> <span class="text-gold text-sm font-medium tracking-wide">The Choco Ruby Difference</span> </div> <h2 class="text-4xl md:text-5xl font-playfair text-white mb-4"> Why Choose <span class="gold-shimmer">Us</span> </h2> <div class="w-20 h-1 bg-gradient-to-r from-ruby to-gold mx-auto mb-6"></div> <p class="text-white/70 text-lg max-w-2xl mx-auto"> Discover what makes Choco Ruby the premier choice for luxury chocolate lovers. </p> </div> <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Feature 1 --> <div class="feature-card bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center border border-white/10 fade-in"> <div class="feature-icon w-20 h-20 bg-gradient-to-br from-ruby to-ruby-dark rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path> </svg> </div> <h3 class="text-xl font-playfair text-white mb-3">Premium Quality</h3> <p class="text-white/60 text-sm">Only the finest ingredients sourced from trusted suppliers worldwide.</p> </div> <!-- Feature 2 --> <div class="feature-card bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center border border-white/10 fade-in" style="transition-delay: 0.1s;"> <div class="feature-icon w-20 h-20 bg-gradient-to-br from-gold to-gold-light rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg"> <svg class="w-10 h-10 text-chocolate" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path> </svg> </div> <h3 class="text-xl font-playfair text-white mb-3">Handcrafted</h3> <p class="text-white/60 text-sm">Each piece is carefully crafted by our master chocolatiers with love.</p> </div> <!-- Feature 3 --> <div class="feature-card bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center border border-white/10 fade-in" style="transition-delay: 0.2s;"> <div class="feature-icon w-20 h-20 bg-gradient-to-br from-ruby-light to-ruby rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path> </svg> </div> <h3 class="text-xl font-playfair text-white mb-3">Elegant Packaging</h3> <p class="text-white/60 text-sm">Beautiful presentation boxes perfect for gifting on any occasion.</p> </div> <!-- Feature 4 --> <div class="feature-card bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center border border-white/10 fade-in" style="transition-delay: 0.3s;"> <div class="feature-icon w-20 h-20 bg-gradient-to-br from-chocolate-light to-chocolate rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg"> <svg class="w-10 h-10 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> </div> <h3 class="text-xl font-playfair text-white mb-3">Fast Delivery</h3> <p class="text-white/60 text-sm">Quick and secure delivery across Algeria with temperature control.</p> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-24 bg-cream"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <div class="inline-block px-4 py-1 bg-ruby/10 rounded-full mb-4"> <span class="text-ruby text-sm font-medium tracking-wide">Customer Love</span> </div> <h2 class="text-4xl md:text-5xl font-playfair text-chocolate mb-4"> What Our <span class="gold-shimmer">Customers</span> Say </h2> <div class="w-20 h-1 bg-gradient-to-r from-ruby to-gold mx-auto"></div> </div> <div class="grid md:grid-cols-3 gap-8"> <!-- Testimonial 1 --> <div class="testimonial-card bg-white rounded-2xl p-8 shadow-lg fade-in"> <div class="flex mb-4"> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> </div> <p class="text-chocolate-light mb-6 italic">"The most exquisite chocolates I've ever tasted. The Ruby Hearts are absolutely divine! Perfect for special occasions."</p> <div class="flex items-center"> <div class="w-12 h-12 bg-gradient-to-br from-ruby to-gold rounded-full flex items-center justify-center text-white font-semibold">SA</div> <div class="ml-4"> <p class="font-semibold text-chocolate">Sarah A.</p> <p class="text-sm text-chocolate-light">Algiers</p> </div> </div> </div> <!-- Testimonial 2 --> <div class="testimonial-card bg-white rounded-2xl p-8 shadow-lg fade-in" style="transition-delay: 0.1s;"> <div class="flex mb-4"> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> </div> <p class="text-chocolate-light mb-6 italic">"I ordered the Royal Collection for my wife's birthday. The presentation was stunning and the taste was incredible. Will definitely order again!"</p> <div class="flex items-center"> <div class="w-12 h-12 bg-gradient-to-br from-chocolate to-chocolate-light rounded-full flex items-center justify-center text-white font-semibold">MK</div> <div class="ml-4"> <p class="font-semibold text-chocolate">Mohammed K.</p> <p class="text-sm text-chocolate-light">Oran</p> </div> </div> </div> <!-- Testimonial 3 --> <div class="testimonial-card bg-white rounded-2xl p-8 shadow-lg fade-in" style="transition-delay: 0.2s;"> <div class="flex mb-4"> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> <svg class="w-5 h-5 text-gold" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> </div> <p class="text-chocolate-light mb-6 italic">"Fast delivery and the chocolates arrived in perfect condition. The Elegance Box made a wonderful corporate gift. Highly recommend!"</p> <div class="flex items-center"> <div class="w-12 h-12 bg-gradient-to-br from-gold to-gold-light rounded-full flex items-center justify-center text-chocolate font-semibold">FB</div> <div class="ml-4"> <p class="font-semibold text-chocolate">Fatima B.</p> <p class="text-sm text-chocolate-light">Constantine</p> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-24 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid lg:grid-cols-2 gap-16"> <div class="fade-in"> <div class="inline-block px-4 py-1 bg-ruby/10 rounded-full mb-4"> <span class="text-ruby text-sm font-medium tracking-wide">Get in Touch</span> </div> <h2 class="text-4xl md:text-5xl font-playfair text-chocolate mb-6"> Let's <span class="gold-shimmer">Connect</span> </h2> <div class="w-20 h-1 bg-gradient-to-r from-ruby to-gold mb-8"></div> <p class="text-chocolate-light text-lg mb-8"> Have questions about our products or want to place a custom order? We'd love to hear from you! </p> <div class="space-y-6"> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-ruby/10 rounded-xl flex items-center justify-center"> <svg class="w-6 h-6 text-ruby" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> </div> <div> <p class="font-medium text-chocolate">Location</p> <p class="text-chocolate-light">Algiers, Algeria</p> </div> </div> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-gold/20 rounded-xl flex items-center justify-center"> <svg class="w-6 h-6 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> </div> <div> <p class="font-medium text-chocolate">Email</p> <p class="text-chocolate-light">hello@chocoruby.dz</p> </div> </div> <div class="flex items-center space-x-4"> <div class="w-12 h-12 bg-chocolate/10 rounded-xl flex items-center justify-center"> <svg class="w-6 h-6 text-chocolate" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> </div> <div> <p class="font-medium text-chocolate">Phone</p> <p class="text-chocolate-light">+213 555 123 456</p> </div> </div> </div> <!-- Social Links --> <div class="mt-10"> <p class="text-chocolate font-medium mb-4">Follow Us</p> <div class="flex space-x-4"> <a href="https://www.instagram.com/chocoruby.__/" target="_blank" rel="noopener noreferrer" class="w-12 h-12 bg-gradient-to-br from-ruby to-ruby-dark rounded-xl flex items-center justify-center text-white hover:shadow-lg transition-shadow"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> </svg> </a> <a href="https://www.facebook.com/choco.ruby.47" target="_blank" rel="noopener noreferrer" class="w-12 h-12 bg-gradient-to-br from-chocolate to-chocolate-light rounded-xl flex items-center justify-center text-white hover:shadow-lg transition-shadow"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M22.675 0h-21.35C.597 0 0 .597 0 1.326v21.348C0 23.403.597 24 1.326 24h11.495v-9.294H9.691V11.01h3.13V8.309c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.795.143v3.24l-1.918.001c-1.504 0-1.796.715-1.796 1.763v2.312h3.587l-.467 3.696h-3.12V24h6.116C23.403 24 24 23.403 24 22.674V1.326C24 .597 23.403 0 22.675 0z"/> </svg> </a> </div> </div> </div> <!-- Contact Form --> <div class="fade-in" style="transition-delay: 0.2s;"> <form class="bg-cream rounded-3xl p-8 shadow-lg"> <div class="space-y-6"> <div> <label class="block text-chocolate font-medium mb-2">Full Name</label> <input type="text" class="w-full px-4 py-3 rounded-xl border border-chocolate/20 focus:border-ruby focus:ring-2 focus:ring-ruby/20 outline-none transition-all" placeholder="Your name"> </div> <div> <label class="block text-chocolate font-medium mb-2">Email Address</label> <input type="email" class="w-full px-4 py-3 rounded-xl border border-chocolate/20 focus:border-ruby focus:ring-2 focus:ring-ruby/20 outline-none transition-all" placeholder="your@email.com"> </div> <div> <label class="block text-chocolate font-medium mb-2">Phone Number</label> <input type="tel" class="w-full px-4 py-3 rounded-xl border border-chocolate/20 focus:border-ruby focus:ring-2 focus:ring-ruby/20 outline-none transition-all" placeholder="+213 XXX XXX XXX"> </div> <div> <label class="block text-chocolate font-medium mb-2">Message</label> <textarea rows="4" class="w-full px-4 py-3 rounded-xl border border-chocolate/20 focus:border-ruby focus:ring-2 focus:ring-ruby/20 outline-none transition-all resize-none" placeholder="Tell us about your order or inquiry..."></textarea> </div> <button type="submit" class="w-full btn-primary py-4 rounded-xl text-white font-semibold text-lg"> Send Message </button> </div> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-chocolate py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid md:grid-cols-4 gap-12 mb-12"> <!-- Brand --> <div class="md:col-span-2"> <div class="flex items-center space-x-2 mb-6"> <div class="w-12 h-12 bg-gradient-to-br from-ruby to-ruby-dark rounded-full flex items-center justify-center"> <span class="text-white font-playfair text-xl font-bold">CR</span> </div> <span class="text-white font-playfair text-2xl font-semibold">Choco <span class="gold-shimmer">Ruby</span></span> </div> <p class="text-white/60 mb-6 max-w-md"> Where chocolate meets elegance. Experience the finest handcrafted ruby chocolates, made with passion and premium ingredients. </p> <p class="text-gold text-sm">© 2024 Choco Ruby. All rights reserved.</p> </div> <!-- Quick Links --> <div> <h4 class="text-white font-playfair text-lg mb-6">Quick Links</h4> <ul class="space-y-3"> <li><a href="#home" class="text-white/60 hover:text-gold transition-colors">Home</a></li> <li><a href="#about" class="text-white/60 hover:text-gold transition-colors">About Us</a></li> <li><a href="#products" class="text-white/60 hover:text-gold transition-colors">Products</a></li> <li><a href="#contact" class="text-white/60 hover:text-gold transition-colors">Contact</a></li> </ul> </div> <!-- Newsletter --> <div> <h4 class="text-white font-playfair text-lg mb-6">Newsletter</h4> <p class="text-white/60 mb-4 text-sm">Subscribe for exclusive offers and new arrivals.</p> <form class="flex"> <input type="email" placeholder="Your email" class="flex-1 px-4 py-2 rounded-l-lg bg-white/10 border border-white/20 text-white placeholder-white/40 focus:outline-none focus:border-gold"> <button class="px-4 py-2 bg-gold text-chocolate rounded-r-lg font-medium hover:bg-gold-light transition-colors"> Subscribe </button> </form> </div> </div> <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center"> <p class="text-white/40 text-sm">Handcrafted with ❤️ in Algeria</p> <div class="flex space-x-6 mt-4 md:mt-0"> <a href="#" class="text-white/40 hover:text-gold text-sm transition-colors">Privacy Policy</a> <a href="#" class="text-white/40 hover:text-gold text-sm transition-colors">Terms of Service</a> <a href="#" class="text-white/40 hover:text-gold text-sm transition-colors">Shipping Info</a> </div> </div> </div> </footer> <script> // Mobile menu toggle const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Close mobile menu when clicking on links mobileMenu.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); }); }); // Navbar background on scroll const nav = document.querySelector('nav'); window.addEventListener('scroll', () => { if (window.scrollY > 50) { nav.classList.add('shadow-xl'); } else { nav.classList.remove('shadow-xl'); } }); // Fade in animation on scroll const fadeElements = document.querySelectorAll('.fade-in'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); fadeElements.forEach(el => observer.observe(el)); // Cart functionality let cartCount = 0; const cartBadge = document.querySelector('.cart-badge'); const addToCartButtons = document.querySelectorAll('.add-to-cart'); addToCartButtons.forEach(button => { button.addEventListener('click', () => { cartCount++; cartBadge.textContent = cartCount; // Button animation button.textContent = 'Added!'; button.classList.add('bg-green-500'); setTimeout(() => { button.textContent = 'Add to Cart'; button.classList.remove('bg-green-500'); }, 1500); }); }); // Smooth scroll for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); </script> </body>

taha1444
62e92369mo ago

initial commit

taha1444