why cant you update the products lol

index.html

@@ -34,92 +34,160 @@
             <div class="dessert dessert-5">🍫</div>
         </div>
     </section>
-
     <section id="postres" class="products-section">
         <div class="container">
             <h2 class="section-title">Nuestras Delicias</h2>
-            <div class="products-grid">
-                <div class="product-card">
+            <div class="product-filters">
+                <button class="filter-btn active" data-filter="all">Todos</button>
+                <button class="filter-btn" data-filter="cookies">Cookies</button>
+                <button class="filter-btn" data-filter="tartas">Tartas</button>
+                <button class="filter-btn" data-filter="brownies">Brownies</button>
+                <button class="filter-btn" data-filter="cheesecakes">Cheesecakes</button>
+                <button class="filter-btn" data-filter="tortas">Tortas</button>
+                <button class="filter-btn" data-filter="tradicionales">Tradicionales</button>
+            </div>
+<div class="products-grid">
+                <div class="product-card" data-category="cookies" data-price="3.50">
                     <div class="product-image">
                     <img src="https://static.photos/food/320x240/101" alt="Cookie Chispas de Caracas">
 <div class="product-badge">Best Seller</div>
+                        <div class="product-overlay">
+                            <div class="quick-view">👁️ Vista Rápida</div>
+                        </div>
                     </div>
                     <div class="product-info">
                         <h3 class="product-name">Cookie "Chispas de Caracas"</h3>
                         <p class="product-description">Chispas de Chocolate y Sal Marina</p>
+<div class="product-meta">
+                            <span class="product-tag">🍪 Cookies</span>
+                            <span class="product-time">⏰ 30 min</span>
+                        </div>
 <div class="product-price-row">
                             <span class="product-price">$3.50</span>
-                            <button class="btn-order">Pedir Ahora</button>
+                            <div class="product-actions">
+                                <button class="btn-quick-add">+ Rápido</button>
+                                <button class="btn-order">Pedir Ahora</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="product-card">
+                <div class="product-card" data-category="tartas" data-price="4.50">
                     <div class="product-image">
                     <img src="https://static.photos/food/320x240/102" alt="Mini Tarta Parchita Tropical">
 <div class="product-badge">Nuevo</div>
+                        <div class="product-overlay">
+                            <div class="quick-view">👁️ Vista Rápida</div>
+                        </div>
                     </div>
                     <div class="product-info">
                         <h3 class="product-name">Mini Tarta "Parchita Tropical"</h3>
                         <p class="product-description">Parchita y Merengue Suizo</p>
+<div class="product-meta">
+                            <span class="product-tag">🥧 Tartas</span>
+                            <span class="product-time">⏰ 45 min</span>
+                        </div>
 <div class="product-price-row">
                             <span class="product-price">$4.50</span>
-                            <button class="btn-order">Pedir Ahora</button>
+                            <div class="product-actions">
+                                <button class="btn-quick-add">+ Rápido</button>
+                                <button class="btn-order">Pedir Ahora</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="product-card">
+                <div class="product-card" data-category="tradicionales" data-price="5.00">
                     <div class="product-image">
                     <img src="https://static.photos/food/320x240/103" alt="Quesillo Recuerdo de Abuela">
 <div class="product-badge">Tradicional</div>
+                        <div class="product-overlay">
+                            <div class="quick-view">👁️ Vista Rápida</div>
+                        </div>
                     </div>
                     <div class="product-info">
                         <h3 class="product-name">Quesillo "Recuerdo de Abuela"</h3>
                         <p class="product-description">Quesillo Cremoso</p>
+<div class="product-meta">
+                            <span class="product-tag">🍮 Tradicionales</span>
+                            <span class="product-time">⏰ 20 min</span>
+                        </div>
 <div class="product-price-row">
                             <span class="product-price">$5.00</span>
-                            <button class="btn-order">Pedir Ahora</button>
+                            <div class="product-actions">
+                                <button class="btn-quick-add">+ Rápido</button>
+                                <button class="btn-order">Pedir Ahora</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="product-card">
+                <div class="product-card" data-category="brownies" data-price="6.00">
                     <div class="product-image">
                     <img src="https://static.photos/food/320x240/104" alt="Brownie Chocovenezolano Supremo">
 <div class="product-badge">Premium</div>
+                        <div class="product-overlay">
+                            <div class="quick-view">👁️ Vista Rápida</div>
+                        </div>
                     </div>
                     <div class="product-info">
                         <h3 class="product-name">Brownie "Chocovenezolano Supremo"</h3>
                         <p class="product-description">Brownie con Ganache y Nueces</p>
+<div class="product-meta">
+                            <span class="product-tag">🍫 Brownies</span>
+                            <span class="product-time">⏰ 25 min</span>
+                        </div>
 <div class="product-price-row">
                             <span class="product-price">$6.00</span>
-                            <button class="btn-order">Pedir Ahora</button>
+                            <div class="product-actions">
+                                <button class="btn-quick-add">+ Rápido</button>
+                                <button class="btn-order">Pedir Ahora</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="product-card">
+                <div class="product-card" data-category="cheesecakes" data-price="4.50">
                     <div class="product-image">
                     <img src="https://static.photos/food/320x240/105" alt="Cheesecake Fresita Caraqueña">
 <div class="product-badge">Original</div>
+                        <div class="product-overlay">
+                            <div class="quick-view">👁️ Vista Rápida</div>
+                        </div>
                     </div>
                     <div class="product-info">
                         <h3 class="product-name">Cheesecake "Fresita Caraqueña"</h3>
                         <p class="product-description">Cheesecake de Fresa en frasco</p>
+<div class="product-meta">
+                            <span class="product-tag">🍓 Cheesecakes</span>
+                            <span class="product-time">⏰ 15 min</span>
+                        </div>
 <div class="product-price-row">
                             <span class="product-price">$4.50</span>
-                            <button class="btn-order">Pedir Ahora</button>
+                            <div class="product-actions">
+                                <button class="btn-quick-add">+ Rápido</button>
+                                <button class="btn-order">Pedir Ahora</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="product-card">
+                <div class="product-card" data-category="tortas" data-price="5.50">
                     <div class="product-image">
                     <img src="https://static.photos/food/320x240/106" alt="Tres Leches Mango Playero">
 <div class="product-badge">Temporada</div>
+                        <div class="product-overlay">
+                            <div class="quick-view">👁️ Vista Rápida</div>
+                        </div>
                     </div>
                     <div class="product-info">
                         <h3 class="product-name">Tres Leches "Mango Playero"</h3>
                         <p class="product-description">Mini Torta de Tres Leches de Mango</p>
+<div class="product-meta">
+                            <span class="product-tag">🎂 Tortas</span>
+                            <span class="product-time">⏰ 35 min</span>
+                        </div>
 <div class="product-price-row">
                             <span class="product-price">$5.50</span>
-                            <button class="btn-order">Pedir Ahora</button>
+                            <div class="product-actions">
+                                <button class="btn-quick-add">+ Rápido</button>
+                                <button class="btn-order">Pedir Ahora</button>
+                            </div>
                         </div>
                     </div>
                 </div>

script.js

@@ -1,8 +1,32 @@
+
 // Smooth scroll for navigation links
 document.addEventListener('DOMContentLoaded', function() {
+    // Product filter functionality
+    const filterButtons = document.querySelectorAll('.filter-btn');
+    const productCards = document.querySelectorAll('.product-card');
+
+    filterButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const filter = button.dataset.filter;
+            
+            // Update active button
+            filterButtons.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+            
+            // Filter products
+            productCards.forEach(card => {
+                if (filter === 'all' || card.dataset.category === filter) {
+                    card.classList.remove('hidden');
+                    card.style.animation = 'fadeInUp 0.5s ease-out';
+                } else {
+                    card.classList.add('hidden');
+                }
+            });
+        });
+    });
+
     // Order button functionality
     const orderButtons = document.querySelectorAll('.btn-order');
-    
     orderButtons.forEach(button => {
         button.addEventListener('click', function() {
             const productName = this.closest('.product-card').querySelector('.product-name').textContent;
@@ -12,7 +36,72 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
 
-    // Intersection Observer for animations
+    // Quick add functionality
+    const quickAddButtons = document.querySelectorAll('.btn-quick-add');
+    let cartItems = [];
+
+    quickAddButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const card = this.closest('.product-card');
+            const productName = card.querySelector('.product-name').textContent;
+            const productPrice = card.dataset.price;
+            
+            // Add to cart
+            cartItems.push({ name: productName, price: productPrice });
+            
+            // Show feedback
+            button.textContent = '✓ Añadido';
+            button.style.background = 'var(--coral)';
+            
+            setTimeout(() => {
+                button.textContent = '+ Rápido';
+                button.style.background = 'var(--dorado)';
+            }, 2000);
+            
+            // Update cart notification
+            updateCartNotification();
+        });
+    });
+
+    function updateCartNotification() {
+        const cartCount = document.querySelector('.cart-count');
+        if (cartCount) {
+            cartCount.textContent = cartItems.length;
+        } else {
+            const cartNotification = document.createElement('div');
+            cartNotification.className = 'cart-notification';
+            cartNotification.innerHTML = `
+                <div class="cart-icon">🛒</div>
+                <span class="cart-count">${cartItems.length}</span>
+            `;
+            cartNotification.style.cssText = `
+                position: fixed;
+                top: 100px;
+                right: 20px;
+                background: var(--coral);
+                color: white;
+                padding: 1rem;
+                border-radius: 50%;
+                width: 60px;
+                height: 60px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 1.5rem;
+                z-index: 999;
+                cursor: pointer;
+                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            `;
+            document.body.appendChild(cartNotification);
+            
+            cartNotification.addEventListener('click', () => {
+                const cartMessage = `¡Hola! Tengo ${cartItems.length} productos en mi carrito. Me gustaría confirmar mi pedido.`;
+                const whatsappUrl = `https://wa.me/584141234567?text=${encodeURIComponent(cartMessage)}`;
+                window.open(whatsappUrl, '_blank');
+            });
+        }
+    }
+// Intersection Observer for animations
     const observerOptions = {
         threshold: 0.1,
         rootMargin: '0px 0px -50px 0px'
@@ -93,7 +182,6 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     `;
     document.head.appendChild(whatsappStyle);
-
     // Instagram feed mockup interaction
     const instagramPosts = document.querySelectorAll('.instagram-post');
     instagramPosts.forEach((post, index) => {
@@ -101,4 +189,65 @@ document.addEventListener('DOMContentLoaded', function() {
             window.open('https://instagram.com/tryme_vnzl', '_blank');
         });
     });
-});
+
+    // Quick view functionality
+    const quickViews = document.querySelectorAll('.quick-view');
+    quickViews.forEach(view => {
+        view.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const card = view.closest('.product-card');
+            const productName = card.querySelector('.product-name').textContent;
+            const productDescription = card.querySelector('.product-description').textContent;
+            const productPrice = card.querySelector('.product-price').textContent;
+            const productImage = card.querySelector('.product-image img').src;
+            
+            // Create modal
+            const modal = document.createElement('div');
+            modal.className = 'product-modal';
+            modal.innerHTML = `
+                <div class="modal-content">
+                    <span class="modal-close">&times;</span>
+                    <img src="${productImage}" alt="${productName}">
+                    <h3>${productName}</h3>
+                    <p>${productDescription}</p>
+                    <div class="modal-price">${productPrice}</div>
+                    <button class="btn-order">Pedir Ahora</button>
+                </div>
+            `;
+            
+            modal.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0,0,0,0.8);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 2000;
+            `;
+            
+            document.body.appendChild(modal);
+            
+            // Close modal
+            modal.querySelector('.modal-close').addEventListener('click', () => {
+                modal.remove();
+            });
+            
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    modal.remove();
+                }
+            });
+            
+            // Order button in modal
+            modal.querySelector('.btn-order').addEventListener('click', () => {
+                const message = `¡Hola! Me gustaría ordenar: ${productName}`;
+                const whatsappUrl = `https://wa.me/584141234567?text=${encodeURIComponent(message)}`;
+                window.open(whatsappUrl, '_blank');
+                modal.remove();
+            });
+        });
+    });
+});

style.css

@@ -187,6 +187,32 @@ body {
     font-size: 2rem;
     margin-top: 0.5rem;
 }
+/* Product Filters */
+.product-filters {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 3rem;
+    flex-wrap: wrap;
+}
+
+.filter-btn {
+    background: white;
+    color: var(--chocolate);
+    border: 2px solid var(--coral);
+    padding: 0.8rem 1.5rem;
+    border-radius: 25px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.filter-btn:hover,
+.filter-btn.active {
+    background: var(--coral);
+    color: white;
+}
 
 /* Products Grid */
 .products-grid {
@@ -196,6 +222,9 @@ body {
     margin-bottom: 3rem;
 }
 
+.product-card.hidden {
+    display: none;
+}
 .product-card {
     background: white;
     border-radius: 20px;
@@ -229,11 +258,43 @@ body {
     object-fit: cover;
     transition: transform 0.3s ease;
 }
-
 .product-card:hover .product-image img {
     transform: scale(1.1);
 }
 
+.product-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(74, 44, 42, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.product-card:hover .product-overlay {
+    opacity: 1;
+}
+
+.quick-view {
+    color: white;
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+    padding: 0.8rem 1.5rem;
+    background: var(--coral);
+    border-radius: 25px;
+    transition: all 0.3s ease;
+}
+
+.quick-view:hover {
+    background: var(--dorado);
+    transform: scale(1.05);
+}
 .product-badge {
     position: absolute;
     top: 1rem;
@@ -256,14 +317,28 @@ body {
     margin-bottom: 0.5rem;
     font-weight: 600;
 }
-
 .product-description {
     color: var(--chocolate);
     opacity: 0.8;
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
     line-height: 1.6;
 }
 
+.product-meta {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.product-tag, .product-time {
+    font-size: 0.9rem;
+    color: var(--coral);
+    background: rgba(228, 147, 122, 0.1);
+    padding: 0.3rem 0.8rem;
+    border-radius: 15px;
+    font-weight: 500;
+}
 .product-price-row {
     display: flex;
     justify-content: space-between;
@@ -283,12 +358,33 @@ body {
     font-size: 1rem;
     border-radius: 25px;
 }
-
 .btn-order:hover {
     background: var(--dorado);
     transform: scale(1.05);
 }
 
+.product-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.btn-quick-add {
+    background: var(--dorado);
+    color: white;
+    border: none;
+    padding: 0.6rem 1rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-quick-add:hover {
+    background: var(--coral);
+    transform: scale(1.05);
+}
 /* Story Section */
 .story-section {
     background: linear-gradient(135deg, var(--crema) 0%, rgba(228,147,122,0.1) 100%);