Autosave: 20260129-061143

2026-01-29 06:11:43 +00:00 · 2026-01-29 06:11:43 +00:00 · 297c24af93
commit 297c24af93
parent 62ce947b8d
16 changed files with 605 additions and 125 deletions
--- a/api/cart.php
+++ b/api/cart.php
@ -0,0 +1,79 @@
+<?php
+session_start();
+
+header('Content-Type: application/json');
+
+if (!isset($_SESSION['cart'])) {
+    $_SESSION['cart'] = [];
+}
+
+$action = $_GET['action'] ?? '';
+
+function getCartCount() {
+    $count = 0;
+    if (isset($_SESSION['cart'])) {
+        foreach ($_SESSION['cart'] as $item) {
+            $count += $item['quantity'];
+        }
+    }
+    return $count;
+}
+
+switch ($action) {
+    case 'add':
+        $id = $_POST['id'] ?? null;
+        $name = $_POST['name'] ?? '';
+        $price = $_POST['price'] ?? 0;
+        $image = $_POST['image'] ?? '';
+        
+        if ($id) {
+            if (isset($_SESSION['cart'][$id])) {
+                $_SESSION['cart'][$id]['quantity']++;
+            } else {
+                $_SESSION['cart'][$id] = [
+                    'id' => $id,
+                    'name' => $name,
+                    'price' => (float)$price,
+                    'image' => $image,
+                    'quantity' => 1
+                ];
+            }
+            echo json_encode(['success' => true, 'cart_count' => getCartCount()]);
+        } else {
+            echo json_encode(['success' => false, 'error' => 'Invalid product']);
+        }
+        break;
+
+    case 'remove':
+        $id = $_POST['id'] ?? null;
+        if ($id && isset($_SESSION['cart'][$id])) {
+            unset($_SESSION['cart'][$id]);
+            echo json_encode(['success' => true, 'cart_count' => getCartCount()]);
+        } else {
+            echo json_encode(['success' => false, 'error' => 'Product not in cart']);
+        }
+        break;
+
+    case 'update':
+        $id = $_POST['id'] ?? null;
+        $quantity = (int)($_POST['quantity'] ?? 1);
+        if ($id && isset($_SESSION['cart'][$id])) {
+            if ($quantity <= 0) {
+                unset($_SESSION['cart'][$id]);
+            } else {
+                $_SESSION['cart'][$id]['quantity'] = $quantity;
+            }
+            echo json_encode(['success' => true, 'cart_count' => getCartCount()]);
+        } else {
+            echo json_encode(['success' => false, 'error' => 'Product not in cart']);
+        }
+        break;
+
+    case 'get':
+        echo json_encode(['success' => true, 'cart' => array_values($_SESSION['cart']), 'cart_count' => getCartCount()]);
+        break;
+
+    default:
+        echo json_encode(['success' => false, 'error' => 'Invalid action']);
+        break;
+}
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@ -22,6 +22,12 @@ h1, h2, h3, .h1, .h2, .h3 {
    color: var(--ee-charcoal);
 }

+/* Ensure headers inside white-text containers are visible */
+.text-white h1, .text-white h2, .text-white h3, 
+.hero-section h1, .hero-section h2, .hero-section h3 {
+    color: var(--ee-white) !important;
+}
+
 .bg-charcoal {
    background-color: var(--ee-charcoal) !important;
 }
@ -87,6 +93,18 @@ footer {
    padding: 60px 0;
 }

+/* Zoom Effect */
+.zoom-container {
+    overflow: hidden;
+    border-radius: 8px;
+    border: 2px solid var(--ee-gold);
+}
+
+.img-zoom-20 {
+    transform: scale(1.2);
+    transform-origin: center;
+}
+
 /* Senior Friendly Adjustments */
@media (max-width: 768px) {
    body { font-size: 1rem; }
--- a/assets/images/pexels/jar-opener.jpg
+++ b/assets/images/pexels/jar-opener.jpg
--- a/assets/images/pexels/pill-organizer.jpg
+++ b/assets/images/pexels/pill-organizer.jpg
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -1,41 +1,132 @@
-function addToCart(product) {
-    alert(product + " has been added to your cart. We are still setting up our full checkout system!");
-}
-
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', () => {
+    // Inquiry Form Handling
    const inquiryForm = document.getElementById('inquiryForm');
    if (inquiryForm) {
-        inquiryForm.addEventListener('submit', function(e) {
+        inquiryForm.addEventListener('submit', async (e) => {
            e.preventDefault();
-            const formData = new FormData(this);
-            const submitBtn = this.querySelector('button[type="submit"]');
+            const formData = new FormData(inquiryForm);
+            const submitBtn = inquiryForm.querySelector('button[type="submit"]');
            
            submitBtn.disabled = true;
-            submitBtn.textContent = 'Sending...';
+            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Sending...';

-            fetch(this.action, {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Thank you! We have received your inquiry.');
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('inquiryModal'));
-                    modal.hide();
-                    inquiryForm.reset();
+            try {
+                const response = await fetch('/api/inquiry.php', {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.json();
+
+                if (result.success) {
+                    inquiryForm.innerHTML = `<div class="text-center py-4">
+                        <div class="h1 text-gold mb-3"><i class="bi bi-check-circle"></i></div>
+                        <h6>Thank you, ${formData.get('name')}!</h6>
+                        <p class="small text-muted mb-0">We have received your inquiry and will contact you shortly.</p>
+                    </div>`;
                } else {
-                    alert('Error: ' + data.error);
+                    alert('Something went wrong. Please try again.');
+                    submitBtn.disabled = false;
+                    submitBtn.innerHTML = 'Send Inquiry';
                }
-            })
-            .catch(error => {
+            } catch (error) {
                console.error('Error:', error);
-                alert('There was an error sending your inquiry.');
-            })
-            .finally(() => {
+                alert('Connection error. Please try again later.');
                submitBtn.disabled = false;
-                submitBtn.textContent = 'Send Inquiry';
-            });
+                submitBtn.innerHTML = 'Send Inquiry';
+            }
        });
    }
+
+    // Initialize cart count
+    updateCartCount();
 });
+
+function addToCart(id, name, price, image) {
+    const formData = new FormData();
+    formData.append('id', id);
+    formData.append('name', name);
+    formData.append('price', price);
+    formData.append('image', image);
+
+    fetch('/api/cart.php?action=add', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => {
+        if (!response.ok) throw new Error('Network response was not ok');
+        return response.json();
+    })
+    .then(data => {
+        if (data.success) {
+            updateCartCount(data.cart_count);
+            showToast(`<i class="bi bi-cart-check-fill me-2"></i> ${name} added to cart!`);
+        } else {
+            console.error('API Error:', data.error);
+        }
+    })
+    .catch(error => {
+        console.error('Error adding to cart:', error);
+        alert('Could not add item to cart. Please try again.');
+    });
+}
+
+function updateCartCount(count = null) {
+    if (count !== null) {
+        renderCartCount(count);
+        return;
+    }
+
+    fetch('/api/cart.php?action=get')
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            renderCartCount(data.cart_count);
+        }
+    })
+    .catch(error => console.error('Error fetching cart count:', error));
+}
+
+function renderCartCount(count) {
+    const cartCountElement = document.getElementById('cart-count');
+    if (cartCountElement) {
+        cartCountElement.innerText = count;
+        if (count > 0) {
+            cartCountElement.classList.remove('d-none');
+        } else {
+            cartCountElement.classList.add('d-none');
+        }
+    }
+}
+
+function showToast(message) {
+    const toastContainer = document.getElementById('toast-container') || createToastContainer();
+    const toast = document.createElement('div');
+    toast.className = 'toast align-items-center text-white bg-charcoal border-0 show mb-2 shadow-lg';
+    toast.role = 'alert';
+    toast.ariaLive = 'assertive';
+    toast.ariaAtomic = 'true';
+    toast.innerHTML = `
+        <div class="d-flex">
+            <div class="toast-body py-3">
+                ${message}
+            </div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+    `;
+    toastContainer.appendChild(toast);
+    
+    // Auto-remove after 4 seconds
+    setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => toast.remove(), 500);
+    }, 4000);
+}
+
+function createToastContainer() {
+    const container = document.createElement('div');
+    container.id = 'toast-container';
+    container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
+    container.style.zIndex = '1100';
+    document.body.appendChild(container);
+    return container;
+}
--- a/assets/pasted-20260129-055938-169c9b19.png
+++ b/assets/pasted-20260129-055938-169c9b19.png
--- a/assets/pasted-20260129-060533-24041dfc.png
+++ b/assets/pasted-20260129-060533-24041dfc.png
--- a/assets/pasted-20260129-060739-18177018.png
+++ b/assets/pasted-20260129-060739-18177018.png
--- a/assets/vm-shot-2026-01-29T05-58-17-342Z.jpg
+++ b/assets/vm-shot-2026-01-29T05-58-17-342Z.jpg
--- a/assets/vm-shot-2026-01-29T06-04-56-060Z.jpg
+++ b/assets/vm-shot-2026-01-29T06-04-56-060Z.jpg
--- a/cart.php
+++ b/cart.php
@ -0,0 +1,172 @@
+<?php
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+$pageTitle = "Your Cart";
+include 'header.php';
+
+$cart = $_SESSION['cart'] ?? [];
+$total = 0;
+foreach ($cart as $item) {
+    $total += $item['price'] * $item['quantity'];
+}
+?>
+
+<div class="container py-5">
+    <div class="row mb-5 align-items-end">
+        <div class="col-md-6">
+            <h1 class="display-4 fw-bold">Your Cart</h1>
+            <p class="text-muted mb-0">Review your safety essentials before checkout.</p>
+        </div>
+        <div class="col-md-6 text-md-end">
+            <a href="/index.php#products" class="text-gold fw-bold text-decoration-none"><i class="bi bi-arrow-left me-2"></i> Continue Shopping</a>
+        </div>
+    </div>
+
+    <?php if (empty($cart)): ?>
+        <div class="text-center py-5 bg-light rounded-4 border-dashed">
+            <div class="display-1 text-muted mb-4"><i class="bi bi-cart-x"></i></div>
+            <h3 class="fw-bold">Your cart is empty</h3>
+            <p class="text-muted mb-4 fs-5">It looks like you haven't added any safety essentials yet.</p>
+            <a href="/index.php#products" class="btn btn-gold btn-lg px-5 rounded-pill">Browse Products</a>
+        </div>
+    <?php else: ?>
+        <div class="row g-5">
+            <div class="col-lg-8">
+                <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
+                    <div class="card-body p-0">
+                        <div class="table-responsive">
+                            <table class="table table-borderless align-middle mb-0">
+                                <thead class="bg-light">
+                                    <tr>
+                                        <th scope="col" class="py-3 ps-4 text-muted small text-uppercase fw-bold">Product</th>
+                                        <th scope="col" class="py-3 text-muted small text-uppercase fw-bold text-center">Quantity</th>
+                                        <th scope="col" class="py-3 text-muted small text-uppercase fw-bold text-end">Price</th>
+                                        <th scope="col" class="py-3 pe-4"></th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <?php foreach ($cart as $id => $item): ?>
+                                    <tr class="border-bottom">
+                                        <td class="py-4 ps-4">
+                                            <div class="d-flex align-items-center">
+                                                <img src="<?php echo htmlspecialchars($item['image']); ?>" alt="<?php echo htmlspecialchars($item['name']); ?>" class="rounded-3 me-3 border" style="width: 80px; height: 80px; object-fit: cover;">
+                                                <div>
+                                                    <h6 class="mb-1 fw-bold"><?php echo htmlspecialchars($item['name']); ?></h6>
+                                                    <span class="text-muted small">$<?php echo number_format($item['price'], 2); ?> each</span>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td class="py-4 text-center">
+                                            <div class="d-inline-flex align-items-center bg-light rounded-pill p-1">
+                                                <button class="btn btn-sm btn-light rounded-circle" onclick="updateQuantity(<?php echo $id; ?>, <?php echo $item['quantity'] - 1; ?>)">
+                                                    <i class="bi bi-dash"></i>
+                                                </button>
+                                                <span class="px-3 fw-bold"><?php echo $item['quantity']; ?></span>
+                                                <button class="btn btn-sm btn-light rounded-circle" onclick="updateQuantity(<?php echo $id; ?>, <?php echo $item['quantity'] + 1; ?>)">
+                                                    <i class="bi bi-plus"></i>
+                                                </button>
+                                            </div>
+                                        </td>
+                                        <td class="py-4 text-end">
+                                            <span class="fw-bold fs-5 text-charcoal">$<?php echo number_format($item['price'] * $item['quantity'], 2); ?></span>
+                                        </td>
+                                        <td class="py-4 pe-4 text-end">
+                                            <button class="btn btn-link text-danger p-0 opacity-50 hover-opacity-100" onclick="removeFromCart(<?php echo $id; ?>)" title="Remove Item">
+                                                <i class="bi bi-trash fs-5"></i>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    <?php endforeach; ?>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="card border-0 shadow-sm rounded-4 bg-charcoal text-white">
+                    <div class="card-body p-4">
+                        <h5 class="fw-bold mb-4 text-gold">Order Summary</h5>
+                        <div class="d-flex justify-content-between mb-3">
+                            <span class="text-light opacity-75">Subtotal</span>
+                            <span class="fw-bold">$<?php echo number_format($total, 2); ?></span>
+                        </div>
+                        <div class="d-flex justify-content-between mb-3">
+                            <span class="text-light opacity-75">Shipping</span>
+                            <span class="text-gold fw-bold">Free</span>
+                        </div>
+                        <div class="d-flex justify-content-between mb-3">
+                            <span class="text-light opacity-75">Estimated Tax</span>
+                            <span class="fw-bold">$0.00</span>
+                        </div>
+                        <hr class="my-4 opacity-25">
+                        <div class="d-flex justify-content-between mb-5">
+                            <span class="h4 fw-bold mb-0">Total</span>
+                            <span class="h4 fw-bold text-gold mb-0">$<?php echo number_format($total, 2); ?></span>
+                        </div>
+                        <button class="btn btn-gold btn-lg w-100 rounded-pill py-3 fw-bold shadow" onclick="checkout()">Complete Order</button>
+                        
+                        <div class="mt-4 p-3 bg-white bg-opacity-10 rounded-3 small">
+                            <div class="d-flex align-items-center mb-2">
+                                <i class="bi bi-shield-check text-gold me-2"></i>
+                                <span>ElderEase Secure Checkout</span>
+                            </div>
+                            <div class="d-flex align-items-center">
+                                <i class="bi bi-truck text-gold me-2"></i>
+                                <span>Free shipping on all orders</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    <?php endif; ?>
+</div>
+
+<style>
+.hover-opacity-100:hover { opacity: 1 !important; }
+.border-dashed { border: 2px dashed #dee2e6 !important; }
+</style>
+
+<script>
+function updateQuantity(id, quantity) {
+    const formData = new FormData();
+    formData.append('id', id);
+    formData.append('quantity', quantity);
+
+    fetch('/api/cart.php?action=update', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            location.reload();
+        }
+    });
+}
+
+function removeFromCart(id) {
+    const formData = new FormData();
+    formData.append('id', id);
+
+    fetch('/api/cart.php?action=remove', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            location.reload();
+        }
+    });
+}
+
+function checkout() {
+    // In a real app, this would redirect to a checkout page or Stripe
+    alert('Thank you for choosing ElderEase! In this demonstration version, checkout is simulated. We would normally take you to a secure payment page now.');
+}
+</script>
+
+<?php include 'footer.php'; ?>
--- a/footer.php
+++ b/footer.php
@ -1,22 +1,33 @@
-<footer class="mt-5">
+<footer class="mt-5 py-5 bg-light border-top">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4">
-                <h3 class="text-gold mb-3">ElderEase</h3>
-                <p class="text-muted small">Thoughtfully designed essentials that help seniors live confidently at home.</p>
+                <h3 class="text-gold mb-3 fw-bold">ElderEase</h3>
+                <p class="text-muted small">Thoughtfully designed essentials that help seniors live confidently at home. Safety, dignity, and independence are at the heart of everything we do.</p>
            </div>
-            <div class="col-md-4 mb-4">
-                <h5>Quick Links</h5>
+            <div class="col-md-2 mb-4">
+                <h5 class="fw-bold mb-3">Shop</h5>
                <ul class="list-unstyled">
-                    <li><a href="/about.php" class="text-decoration-none text-muted">Our Story</a></li>
-                    <li><a href="/faq.php" class="text-decoration-none text-muted">Shipping & Returns</a></li>
-                    <li><a href="/product.php" class="text-decoration-none text-muted">Shop Safety Socks</a></li>
+                    <li><a href="/index.php#products" class="text-decoration-none text-muted small">All Products</a></li>
+                    <li><a href="/product.php?slug=safety-socks" class="text-decoration-none text-muted small">Safety Socks</a></li>
+                    <li><a href="/product.php?slug=jar-opener" class="text-decoration-none text-muted small">Jar Opener</a></li>
+                    <li><a href="/product.php?slug=pill-organizer" class="text-decoration-none text-muted small">Pill Organizer</a></li>
                </ul>
            </div>
-            <div class="col-md-4 mb-4">
-                <h5>Trust & Support</h5>
-                <p class="text-muted small">Questions? We're here to help caregivers and seniors alike.</p>
-                <p class="text-muted small">© <?php echo date('Y'); ?> ElderEase. All rights reserved.</p>
+            <div class="col-md-2 mb-4">
+                <h5 class="fw-bold mb-3">About</h5>
+                <ul class="list-unstyled">
+                    <li><a href="/about.php" class="text-decoration-none text-muted small">Our Story</a></li>
+                    <li><a href="/faq.php" class="text-decoration-none text-muted small">FAQ</a></li>
+                    <li><a href="/faq.php" class="text-decoration-none text-muted small">Shipping</a></li>
+                </ul>
+            </div>
+            <div class="col-md-4 mb-4 text-md-end">
+                <h5 class="fw-bold mb-3">ElderEase Mission</h5>
+                <p class="text-muted small">Helping seniors stay safe and independent, one simple solution at a time.</p>
+                <div class="mt-4">
+                    <span class="text-muted small">© <?php echo date('Y'); ?> ElderEase. All rights reserved.</span>
+                </div>
            </div>
        </div>
    </div>
@ -25,4 +36,4 @@
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 <script src="/assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
-</html>
+</html>
--- a/header.php
+++ b/header.php
@ -1,26 +1,46 @@
+<?php
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+$cartCount = 0;
+if (isset($_SESSION['cart'])) {
+    foreach ($_SESSION['cart'] as $item) {
+        $cartCount += $item['quantity'];
+    }
+}
+?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title><?php echo isset($pageTitle) ? $pageTitle . " | ElderEase" : "ElderEase - Safety, Comfort, and Independence"; ?></title>
+    <title><?php echo isset($pageTitle) ? $pageTitle . " | ElderEase" : "ElderEase: Safety, Comfort, and Independence"; ?></title>
    <meta name="description" content="<?php echo $_SERVER['PROJECT_DESCRIPTION'] ?? 'Safety and independence for seniors at home.'; ?>">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
 <body>
 <nav class="navbar navbar-expand-lg navbar-dark bg-charcoal py-3">
    <div class="container">
-        <a class="navbar-brand text-gold" href="/">ElderEase</a>
+        <a class="navbar-brand text-gold fw-bold" href="/">ElderEase</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav ms-auto">
+            <ul class="navbar-nav ms-auto align-items-center">
                <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-                <li class="nav-item"><a class="nav-link" href="/product.php">Shop Socks</a></li>
+                <li class="nav-item"><a class="nav-link" href="/#products">Products</a></li>
                <li class="nav-item"><a class="nav-link" href="/about.php">Our Story</a></li>
                <li class="nav-item"><a class="nav-link" href="/faq.php">FAQ</a></li>
+                <li class="nav-item ms-lg-3 mt-3 mt-lg-0">
+                    <a href="/cart.php" class="btn btn-outline-gold position-relative rounded-pill px-3">
+                        <i class="bi bi-cart3"></i> Cart
+                        <span id="cart-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger <?php echo $cartCount > 0 ? '' : 'd-none'; ?>">
+                            <?php echo $cartCount; ?>
+                        </span>
+                    </a>
+                </li>
            </ul>
        </div>
    </div>
--- a/includes/pexels.php
+++ b/includes/pexels.php
@ -0,0 +1,25 @@
+<?php
+function pexels_key() {
+  $k = getenv('PEXELS_KEY');
+  return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
+}
+function pexels_get($url) {
+  $ch = curl_init();
+  curl_setopt_array($ch, [
+    CURLOPT_URL => $url,
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
+    CURLOPT_TIMEOUT => 15,
+  ]);
+  $resp = curl_exec($ch);
+  $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+  curl_close($ch);
+  if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
+  return null;
+}
+function download_to($srcUrl, $destPath) {
+  $data = file_get_contents($srcUrl);
+  if ($data === false) return false;
+  if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true);
+  return file_put_contents($destPath, $data) !== false;
+}
--- a/index.php
+++ b/index.php
@ -1,64 +1,89 @@
 <?php 
-$pageTitle = "Safety, Comfort, and Independence";
+require_once 'db/config.php';
+$pageTitle = "ElderEase: Safety, Comfort, and Independence";
 include 'header.php'; 
+
+$products = db()->query("SELECT * FROM products ORDER BY id ASC")->fetchAll();
 ?>

-<section class="hero-section">
-    <div class="container">
+<!-- Hero Section -->
+<section class="hero-section bg-charcoal text-white py-5 position-relative overflow-hidden">
+    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
-                <h1 class="display-4 mb-4 text-white">Safety, Comfort, and Independence — At Every Step.</h1>
-                <p class="lead mb-5 opacity-75">ElderEase creates thoughtfully designed essentials that help seniors live confidently at home.</p>
+                <h1 class="display-3 fw-bold mb-4 text-white">Safety Comfort, And independence at every step.</h1>
+                <p class="lead mb-5 text-white">ElderEase creates thoughtfully designed essentials that help seniors live confidently at home.</p>
                <div class="d-flex gap-3">
-                    <a href="/product.php" class="btn btn-gold btn-lg">Shop Non-Slip Safety Socks</a>
-                    <a href="/about.php" class="btn btn-outline-light btn-lg">Why Safety Matters</a>
+                    <a href="#products" class="btn btn-gold btn-lg px-4">Shop Now</a>
+                    <a href="/about.php" class="btn btn-outline-light btn-lg px-4">Our Mission</a>
                </div>
            </div>
-            <div class="col-lg-6 text-center">
-                <img src="/assets/pasted-20260129-004647-d9048856.png" alt="Seniors enjoying independence at home" class="img-fluid rounded shadow-lg border border-gold" style="max-height: 500px; object-fit: cover;">
+            <div class="col-lg-6">
+                <div class="zoom-container shadow-lg">
+                    <img src="/assets/pasted-20260129-004647-d9048856.png" alt="Seniors at home" class="img-fluid img-zoom-20">
+                </div>
            </div>
        </div>
    </div>
 </section>

+<!-- Trust Pillars -->
 <section class="py-5 bg-light">
-    <div class="container">
-        <div class="row text-center">
-            <div class="col-md-4 mb-4 mb-md-0">
-                <div class="trust-pillar bg-white shadow-sm">
-                    <h4 class="text-gold mb-3">Designed for Seniors</h4>
-                    <p class="text-muted small mb-0">Every detail is considered for ease of use and maximum comfort.</p>
-                </div>
-            </div>
-            <div class="col-md-4 mb-4 mb-md-0">
-                <div class="trust-pillar bg-white shadow-sm">
-                    <h4 class="text-gold mb-3">Simple Solutions</h4>
-                    <p class="text-muted small mb-0">Effective safety without complicated technology or setup.</p>
+    <div class="container py-4">
+        <div class="row text-center g-4">
+            <div class="col-md-4">
+                <div class="p-4 border rounded bg-white shadow-sm h-100">
+                    <div class="h3 text-gold mb-3"><i class="bi bi-person-check"></i></div>
+                    <h5 class="fw-bold">Designed for Seniors</h5>
+                    <p class="text-muted small mb-0">Every product is tested for ease of use and maximum safety.</p>
                </div>
            </div>
            <div class="col-md-4">
-                <div class="trust-pillar bg-white shadow-sm">
-                    <h4 class="text-gold mb-3">Focused on Dignity</h4>
-                    <p class="text-muted small mb-0">Help your loved ones stay independent and safe at home.</p>
+                <div class="p-4 border rounded bg-white shadow-sm h-100">
+                    <div class="h3 text-gold mb-3"><i class="bi bi-shield-lock"></i></div>
+                    <h5 class="fw-bold">Simple Solutions</h5>
+                    <p class="text-muted small mb-0">No complicated technology — just effective, reliable tools for daily living.</p>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="p-4 border rounded bg-white shadow-sm h-100">
+                    <div class="h3 text-gold mb-3"><i class="bi bi-heart"></i></div>
+                    <h5 class="fw-bold">Focused on Dignity</h5>
+                    <p class="text-muted small mb-0">Helping you maintain independence in the comfort of your own home.</p>
                </div>
            </div>
        </div>
    </div>
 </section>

-<section class="py-5">
-    <div class="container">
-        <div class="row align-items-center">
-            <div class="col-md-6 mb-4 mb-md-0">
-                <img src="/assets/pasted-20260128-235831-98ddb985.jpg" alt="ElderEase™ Non-Slip Safety Socks" class="img-fluid rounded shadow-sm">
-            </div>
-            <div class="col-md-6">
-                <h2 class="mb-4">ElderEase™ Non-Slip Safety Socks</h2>
-                <p class="mb-4">Prevent slips and falls on smooth floors with soft, comfortable socks designed specifically for seniors. Move confidently without bulky shoes.</p>
-                <a href="/product.php" class="btn btn-gold">View Product Details</a>
+<!-- Featured Products -->
+<section id="products" class="py-5">
+    <div class="container py-5">
+        <div class="text-center mb-5">
+            <h2 class="fw-bold">Essential Safety Solutions</h2>
+            <p class="text-muted">Carefully selected to improve daily life.</p>
+        </div>
+        <div class="row g-4">
+            <?php foreach ($products as $product): ?>
+            <div class="col-md-4">
+                <div class="card h-100 border-0 shadow-sm product-card">
+                    <a href="product.php?slug=<?php echo $product['slug']; ?>">
+                        <img src="<?php echo htmlspecialchars($product['image_url'] ?: 'https://via.placeholder.com/400x400?text=Product+Image'); ?>" class="card-img-top rounded-top" alt="<?php echo htmlspecialchars($product['name']); ?>">
+                    </a>
+                    <div class="card-body p-4">
+                        <h5 class="card-title fw-bold mb-2"><?php echo htmlspecialchars($product['name']); ?></h5>
+                        <p class="text-muted small mb-3"><?php echo htmlspecialchars($product['short_description']); ?></p>
+                        <div class="d-flex justify-content-between align-items-center mb-3">
+                            <span class="h5 text-gold mb-0">$<?php echo number_format($product['price'], 2); ?></span>
+                            <a href="product.php?slug=<?php echo $product['slug']; ?>" class="btn btn-link text-gold text-decoration-none p-0 small fw-bold">View Story →</a>
+                        </div>
+                        <button onclick="addToCart(<?php echo $product['id']; ?>, '<?php echo addslashes($product['name']); ?>', <?php echo $product['price']; ?>, '<?php echo $product['image_url']; ?>')" class="btn btn-gold w-100 rounded-pill">Add to Cart</button>
+                    </div>
+                </div>
            </div>
+            <?php endforeach; ?>
        </div>
    </div>
 </section>

-<?php include 'footer.php'; ?>
+<?php include 'footer.php'; ?>
--- a/product.php
+++ b/product.php
@ -1,40 +1,79 @@
 <?php 
-$pageTitle = "ElderEase™ Non-Slip Safety Socks";
+require_once 'db/config.php';
+$slug = $_GET['slug'] ?? 'safety-socks';
+
+$stmt = db()->prepare("SELECT * FROM products WHERE slug = ?");
+$stmt->execute([$slug]);
+$product = $stmt->fetch();
+
+if (!$product) {
+    header("Location: /");
+    exit;
+}
+
+$pageTitle = $product['name'];
 include 'header.php'; 
 ?>

 <div class="container py-5">
-    <div class="row">
-        <div class="col-md-6 mb-4 mb-md-0">
-             <img src="/assets/pasted-20260128-235831-98ddb985.jpg" alt="ElderEase™ Non-Slip Safety Socks" class="img-fluid rounded shadow-sm">
-        </div>
-        <div class="col-md-6">
-            <nav aria-label="breadcrumb">
-              <ol class="breadcrumb mb-4">
-                <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-muted">Home</a></li>
-                <li class="breadcrumb-item active">Safety Socks</li>
-              </ol>
-            </nav>
-            <h1 class="mb-3">ElderEase™ Non-Slip Safety Socks</h1>
-            <p class="h3 text-gold mb-4">$14.99 <small class="text-muted fs-6 text-decoration-line-through">$19.99</small></p>
-            
-            <p class="mb-4">Prevent slips and falls on smooth floors with soft, comfortable socks designed specifically for seniors. ElderEase Non-Slip Safety Socks help your loved ones move confidently around the home — without bulky shoes or complicated devices.</p>
-            
-            <h5 class="mb-3">Key Benefits:</h5>
-            <ul class="mb-4 list-unstyled">
-                <li class="mb-2">✓ Anti-slip grip designed for hardwood, tile, and laminate</li>
-                <li class="mb-2">✓ Soft, breathable fabric for all-day comfort</li>
-                <li class="mb-2">✓ Helps reduce fall risk at home</li>
-                <li class="mb-2">✓ Easy to wear — no straps, no setup</li>
-            </ul>
+    <!-- Breadcrumb -->
+    <nav aria-label="breadcrumb" class="mb-5">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-muted">Home</a></li>
+        <li class="breadcrumb-item active"><?php echo htmlspecialchars($product['name']); ?></li>
+      </ol>
+    </nav>

-            <div class="d-grid gap-2 mb-4">
-                <button class="btn btn-gold btn-lg" onclick="addToCart('ElderEase Socks')">Add to Cart</button>
-                <button class="btn btn-outline-gold" data-bs-toggle="modal" data-bs-target="#inquiryModal">Buy with Confidence</button>
+    <!-- Hero Story Section -->
+    <div class="row align-items-center mb-5">
+        <div class="col-md-6 order-2 order-md-1">
+            <h1 class="display-4 fw-bold mb-4"><?php echo htmlspecialchars($product['name']); ?></h1>
+            <p class="lead mb-4"><?php echo htmlspecialchars($product['short_description']); ?></p>
+            <p class="h2 text-gold mb-4">$<?php echo number_format($product['price'], 2); ?> 
+                <?php if ($product['original_price']): ?>
+                    <small class="text-muted fs-5 text-decoration-line-through">$<?php echo number_format($product['original_price'], 2); ?></small>
+                <?php endif; ?>
+            </p>
+            
+            <div class="d-flex gap-3 mt-4">
+                <button class="btn btn-gold btn-lg px-4" onclick="addToCart(<?php echo $product['id']; ?>, '<?php echo addslashes($product['name']); ?>', <?php echo $product['price']; ?>, '<?php echo $product['image_url']; ?>')">Add to Cart</button>
+                <button class="btn btn-outline-gold btn-lg px-4" data-bs-toggle="modal" data-bs-target="#inquiryModal">Learn More</button>
+            </div>
+        </div>
+        <div class="col-md-6 mb-4 mb-md-0 order-1 order-md-2 text-center">
+             <img src="<?php echo htmlspecialchars($product['image_url']); ?>" alt="<?php echo htmlspecialchars($product['name']); ?>" class="img-fluid rounded shadow-lg border border-gold p-1" style="max-height: 500px; object-fit: cover;">
+        </div>
+    </div>
+
+    <!-- Details Section -->
+    <div class="row justify-content-center py-5">
+        <div class="col-md-8">
+            <h3 class="fw-bold mb-4">The Story Behind the Design</h3>
+            <div class="fs-5 text-muted mb-5" style="line-height: 1.8;">
+                <?php echo nl2br(htmlspecialchars($product['description'])); ?>
            </div>

-            <div class="alert alert-light border small text-muted">
-                <strong>Peace of mind:</strong> 30-day hassle-free returns on all safety items.
+            <!-- Benefits Box (Charcoal Style like About Page) -->
+            <div class="p-5 bg-charcoal text-white rounded my-5 shadow">
+                <h4 class="text-gold mb-4">Why It Matters</h4>
+                <ul class="list-unstyled">
+                    <?php 
+                    $benefits = json_decode($product['benefits'], true);
+                    if ($benefits):
+                        foreach ($benefits as $benefit): ?>
+                            <li class="mb-3 d-flex align-items-start">
+                                <i class="bi bi-check-circle-fill text-gold me-3 mt-1"></i>
+                                <span class="fs-5"><?php echo htmlspecialchars($benefit); ?></span>
+                            </li>
+                        <?php endforeach; 
+                    endif; ?>
+                </ul>
+            </div>
+
+            <div class="text-center mt-5">
+                <div class="alert alert-light border small text-muted d-inline-block px-4">
+                    <i class="bi bi-shield-check me-2"></i> <strong>ElderEase Guarantee:</strong> 30-day hassle-free returns on all safety items.
+                </div>
            </div>
        </div>
    </div>
@ -42,29 +81,29 @@ include 'header.php';

 <!-- Inquiry Modal -->
 <div class="modal fade" id="inquiryModal" tabindex="-1">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header border-0">
-                <h5 class="modal-title">Request Information</h5>
-                <button type="button" class="btn-close" data-bs-close="modal"></button>
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content border-0 shadow-lg">
+            <div class="modal-header bg-charcoal text-white border-0">
+                <h5 class="modal-title">Product Inquiry</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-close="modal"></button>
            </div>
-            <div class="modal-body">
-                <p class="small text-muted mb-4">Interested in ElderEase products? Leave your details and we'll reach out to assist with your purchase.</p>
+            <div class="modal-body p-4">
+                <p class="text-muted mb-4">Have questions about how this product can help? Our team is here to support you.</p>
                <form id="inquiryForm" action="/api/inquiry.php" method="POST">
-                    <input type="hidden" name="product_id" value="safety-socks">
+                    <input type="hidden" name="product_id" value="<?php echo htmlspecialchars($product['slug']); ?>">
                    <div class="mb-3">
-                        <label class="form-label small">Name</label>
-                        <input type="text" name="name" class="form-control" required>
+                        <label class="form-label small fw-bold">Name</label>
+                        <input type="text" name="name" class="form-control form-control-lg" placeholder="Your Name" required>
                    </div>
                    <div class="mb-3">
-                        <label class="form-label small">Email Address</label>
-                        <input type="email" name="email" class="form-control" required>
+                        <label class="form-label small fw-bold">Email Address</label>
+                        <input type="email" name="email" class="form-control form-control-lg" placeholder="your@email.com" required>
                    </div>
-                    <div class="mb-3">
-                        <label class="form-label small">Message (Optional)</label>
-                        <textarea name="message" class="form-control" rows="3"></textarea>
+                    <div class="mb-4">
+                        <label class="form-label small fw-bold">Message</label>
+                        <textarea name="message" class="form-control" rows="3" placeholder="How can we help?"></textarea>
                    </div>
-                    <button type="submit" class="btn btn-gold w-100">Send Inquiry</button>
+                    <button type="submit" class="btn btn-gold btn-lg w-100">Send Message</button>
                </form>
            </div>
        </div>