File Manager

✏️ Edit File: /home/u414903541/domains/ecomish.com/public_html/index.php

<?php include 'header.php'; ?>

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
        background-color: var(--ivory-bg);
        color: var(--charcoal);
        font-family: 'Lato', sans-serif;
        overflow-x: hidden;
        position: relative;
    }

body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 20% 80%, rgba(197, 165, 114, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(31, 77, 58, 0.05) 0%, transparent 50%);
        pointer-events: none;
        z-index: -1;
        animation: ambientGlow 15s ease-in-out infinite;
    }

@keyframes ambientGlow {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }

a { text-decoration: none; color: inherit; transition: var(--transition-smooth); }

/* Animation Classes */
    .fade-in { animation: fadeIn 0.8s ease-out forwards; opacity: 0; }
    @keyframes fadeIn { to { opacity: 1; } }
    .slide-up { animation: slideUp 0.8s ease-out forwards; opacity: 0; transform: translateY(30px); }
    @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

/* =========================================
       1. LUXURY CATEGORY SECTION
       ========================================= */
    .category-section { max-width: 1400px; margin: 15px auto 0; padding: 0 5%; position: relative; }
    
    .section-label {
        font-family: 'Playfair Display', serif; font-size: 12px; letter-spacing: 3px;
        color: var(--gold-accent); text-transform: uppercase; margin-bottom: 15px;
        display: flex; align-items: center; gap: 10px; animation: fadeIn 0.6s ease-out;
    }
    .section-label::before { content: ''; width: 30px; height: 1px; background: var(--gold-accent); animation: expandLine 0.8s ease-out; }
    @keyframes expandLine { from { width: 0; } to { width: 30px; } }

.category-scroll { display: flex; gap: 20px; overflow-x: auto; padding: 15px 5px 20px; scroll-behavior: smooth; scrollbar-width: none; }
    .category-scroll::-webkit-scrollbar { display: none; }

.cat-item {
        flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 85px;
        cursor: pointer; padding: 12px 8px; border-radius: 12px; transition: var(--transition-smooth);
        position: relative; animation: fadeIn 0.6s ease-out backwards;
    }
    .cat-item:hover { background: var(--glass-light); backdrop-filter: blur(10px); }

.cat-icon-box {
        width: 70px; height: 70px; border-radius: 50%;
        background: #fff; /* White background for icons to look professional */
        border: 2px solid var(--light-gold); display: flex; align-items: center; justify-content: center;
        margin-bottom: 10px; position: relative; box-shadow: var(--shadow-soft);
        transition: var(--transition-bounce); overflow: hidden;
        padding: 8px; /* Safe space for icons */
    }

/* UPDATED: NO CUT FOR CATEGORY IMAGES */
    .cat-img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s ease; }
    .cat-item:hover .cat-img { transform: scale(1.1); }
    
    .cat-icon-box i { font-size: 26px; color: var(--royal-green); transition: var(--transition-smooth); }
    .cat-name { font-size: 11px; font-weight: 700; color: var(--charcoal); letter-spacing: 0.8px; text-align: center; text-transform: uppercase; transition: var(--transition-smooth); }

.cat-item:hover .cat-icon-box { transform: translateY(-5px) scale(1.05); box-shadow: var(--shadow-glow); border-color: var(--gold-accent); }
    .cat-item:hover .cat-icon-box i { color: var(--gold-accent); transform: scale(1.1); }
    .cat-item:hover .cat-name { color: var(--gold-accent); }

.scroll-nav {
        position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
        background: var(--glass-light); backdrop-filter: blur(10px); border: 1px solid var(--light-gold);
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        color: var(--royal-green); cursor: pointer; transition: var(--transition-smooth); z-index: 10;
        box-shadow: var(--shadow-soft);
    }
    .scroll-nav:hover { background: var(--royal-green); color: var(--linen-white); transform: translateY(-50%) scale(1.15); box-shadow: var(--shadow-glow); }
    .scroll-prev { left: -5px; } .scroll-next { right: -5px; }

/* =========================================
       2. HERO BANNER
       ========================================= */
    .hero-section { padding: 0 5% 25px; max-width: 1400px; margin: 0 auto; position: relative; }
    .hero-banner {
        height: 280px; border-radius: 16px; position: relative; overflow: hidden;
        box-shadow: var(--shadow-heavy); background: linear-gradient(45deg, var(--deep-emerald), var(--royal-green));
        animation: slideUp 1s ease-out;
    }
    .hero-gradient {
        position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(90deg, rgba(10, 35, 24, 0.85) 0%, rgba(31, 77, 58, 0.6) 50%, rgba(197, 165, 114, 0.3) 100%);
    }
    .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; animation: zoomIn 1.2s ease-out; }
    @keyframes zoomIn { from { transform: scale(1.1); } to { transform: scale(1); } }

.hero-content {
        position: relative; z-index: 2; padding: 35px; height: 100%; display: flex;
        flex-direction: column; justify-content: center; align-items: flex-start; max-width: 100%;
    }
    .hero-title {
        font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--linen-white);
        letter-spacing: 1px; line-height: 1.2; margin-bottom: 12px; text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.4);
    }
    .hero-highlight { color: var(--light-gold); font-style: italic; border-bottom: 2px solid rgba(232, 217, 181, 0.7); padding-bottom: 2px; }
    .hero-subtitle { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--light-gold); margin-bottom: 20px; }
    .hero-cta {
        display: inline-flex; align-items: center; gap: 10px; background: transparent;
        border: 2px solid var(--light-gold); color: var(--linen-white); padding: 12px 28px;
        font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
        transition: var(--transition-smooth); border-radius: 6px; position: relative; overflow: hidden;
    }
    .hero-cta::before {
        content: ''; position: absolute; inset: 0; background: var(--light-gold);
        transform: translateX(-100%); transition: transform 0.4s ease; z-index: -1;
    }
    .hero-cta:hover::before { transform: translateX(0); }
    .hero-cta:hover { color: var(--deep-emerald); transform: translateY(-2px); box-shadow: var(--shadow-glow); }

/* =========================================
       3. DEALS SECTION
       ========================================= */
    .deals-section { padding: 25px 5% 20px; max-width: 1400px; margin: 0 auto; }
    .deals-banner {
        background: linear-gradient(135deg, var(--royal-green), var(--deep-emerald));
        border-radius: 16px; padding: 25px; display: grid; grid-template-columns: 1fr; gap: 15px;
        box-shadow: var(--shadow-medium); position: relative; overflow: hidden; animation: slideUp 0.8s ease-out;
    }
    .deals-banner::before {
        content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px;
        background: radial-gradient(circle, rgba(197, 165, 114, 0.2), transparent);
        border-radius: 50%; animation: float 6s ease-in-out infinite;
    }
    @keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-20px) translateX(10px); } }

.deal-badge { display: inline-block; background: var(--light-gold); color: var(--deep-emerald); padding: 6px 14px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
    .deal-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--linen-white); margin-bottom: 8px; font-weight: 700; }
    .deal-desc { color: var(--light-gold); font-size: 13px; margin-bottom: 15px; line-height: 1.5; }
    .deal-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--linen-white); color: var(--deep-emerald); padding: 10px 24px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition-smooth); }
    .deal-cta:hover { background: var(--light-gold); transform: translateY(-2px); box-shadow: var(--shadow-soft); }

/* =========================================
       4. PRODUCT GRID
       ========================================= */
    .product-section { padding: 25px 5% 25px; max-width: 1400px; margin: 0 auto; }
    .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(197, 165, 114, 0.2); animation: fadeIn 0.8s ease-out; }
    .section-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--deep-emerald); }
    .section-subtitle { font-size: 11px; color: var(--platinum); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 3px; }
    
    .view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--gold-accent); letter-spacing: 1px; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--gold-accent); border-radius: 6px; transition: var(--transition-smooth); }
    .view-all:hover { background: var(--gold-accent); color: var(--deep-emerald); transform: translateX(3px); }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .product-card { background: var(--linen-white); border-radius: 14px; overflow: hidden; position: relative; transition: var(--transition-smooth); box-shadow: var(--shadow-soft); animation: fadeIn 0.6s ease-out backwards; }
    .product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-heavy); }

/* UPDATED: NO CUT CONTAINER FOR PRODUCTS */
    .card-img-container { 
        height: 200px; width: 100%; 
        background: #fff; /* White background to prevent black gaps */
        position: relative; overflow: hidden;
        display: flex; align-items: center; justify-content: center;
        padding: 10px; /* Safe space for product edges */
    }
    .card-img { 
        max-width: 100%; max-height: 100%; 
        object-fit: contain; /* IMAGE FULLY VISIBLE - NO CUT */
        transition: transform 0.8s ease; 
    }
    .product-card:hover .card-img { transform: scale(1.08); }

.card-details { padding: 15px; background: var(--linen-white); }
    .product-category { font-size: 10px; color: var(--gold-accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-weight: 600; }
    .product-title { font-size: 14px; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    
    .price-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .current-price { font-size: 16px; font-weight: 800; color: var(--royal-green); }
    .old-price { font-size: 12px; color: var(--platinum); text-decoration: line-through; }

/* BADGES */
    .card-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
    .new-badge { background: linear-gradient(135deg, var(--royal-green), var(--deep-emerald)); color: #fff; font-size: 9px; font-weight: 700; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
    .off-badge { background: linear-gradient(135deg, #D32F2F, #B71C1C); color: #fff; font-size: 9px; font-weight: 700; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); animation: slideInLeft 0.6s ease-out; }

/* =========================================
       5. TRENDING SECTION
       ========================================= */
    .trending-section { padding: 25px 5% 25px; max-width: 1450px; margin: 0 auto; background: linear-gradient(180deg, transparent, rgba(197, 165, 114, 0.05), transparent); }
    .trending-scroll { display: flex; gap: 15px; overflow-x: auto; padding: 15px 5px 20px; scroll-behavior: smooth; scrollbar-width: none; }
    .trending-scroll::-webkit-scrollbar { display: none; }
    .trending-card { flex: 0 0 auto; width: 240px; background: var(--linen-white); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); animation: slideUp 0.6s ease-out backwards; }
    .trending-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-medium); }

/* UPDATED: NO CUT FOR TRENDING */
    .trending-img-container {
        height: 180px; width: 100%; background: #fff;
        display: flex; align-items: center; justify-content: center; padding: 10px;
    }
    .trending-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.6s ease; }
    .trending-card:hover .trending-img { transform: scale(1.08); }

/* =========================================
       6. BRAND STORY
       ========================================= */
    .story-section { padding: 30px 5% 25px; max-width: 1400px; margin: 0 auto; }
    .story-container { background: linear-gradient(135deg, var(--deep-emerald), var(--royal-green)); border-radius: 16px; padding: 30px 25px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-heavy); animation: slideUp 0.8s ease-out; }
    .story-container::before { content: ''; position: absolute; top: -100px; left: -100px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(232, 217, 181, 0.15), transparent); border-radius: 50%; animation: float 8s ease-in-out infinite; }
    .story-icon { font-size: 3rem; color: var(--light-gold); margin-bottom: 15px; animation: pulse 3s ease-in-out infinite; }
    .story-title { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--linen-white); margin-bottom: 12px; font-weight: 700; }
    .story-text { color: var(--light-gold); font-size: 13px; line-height: 1.7; max-width: 600px; margin: 0 auto 20px; }
    .story-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--linen-white); color: var(--deep-emerald); padding: 12px 28px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition-smooth); }
    .story-cta:hover { background: var(--light-gold); transform: translateY(-2px); box-shadow: var(--shadow-soft); }

/* =========================================
       7. SUBCATEGORY MODAL
       ========================================= */
    .subcat-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(10, 35, 24, 0.7); backdrop-filter: blur(8px); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
    .subcat-modal.active { display: flex; opacity: 1; }
    .subcat-content { background: var(--linen-white); width: 90%; max-width: 450px; border-radius: 18px; padding: 25px; position: relative; transform: translateY(20px); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid var(--light-gold); box-shadow: var(--shadow-heavy); }
    .subcat-modal.active .subcat-content { transform: translateY(0); }
    .modal-close { position: absolute; top: 12px; right: 15px; font-size: 22px; color: var(--platinum); cursor: pointer; transition: 0.3s; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    .modal-close:hover { color: var(--royal-green); background: rgba(197, 165, 114, 0.1); }
    .modal-title { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--deep-emerald); text-align: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(197, 165, 114, 0.3); }
    .sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .sub-link { display: flex; align-items: center; justify-content: center; background: var(--ivory-bg); padding: 14px; border-radius: 10px; text-align: center; color: var(--charcoal); font-weight: 600; font-size: 13px; border: 1px solid transparent; transition: var(--transition-smooth); }
    .sub-link:hover { background: var(--royal-green); color: #fff; border-color: var(--gold-accent); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
    .view-main-cat { display: block; text-align: center; margin-top: 20px; font-size: 12px; color: var(--gold-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition-smooth); }
    .view-main-cat:hover { color: var(--royal-green); }

/* =========================================
       8. RESPONSIVE
       ========================================= */
    @media (min-width: 768px) {
        .category-section { padding: 35px 5% 30px; }
        .cat-item { min-width: 110px; padding: 15px 10px; }
        .cat-icon-box { width: 90px; height: 90px; } .cat-icon-box i { font-size: 32px; }
        .hero-section { padding: 0 5% 40px; }
        .hero-banner { height: 450px; border-radius: 20px; }
        .hero-title { font-size: 4rem; }
        .hero-content { padding: 50px; max-width: 60%; }
        .deals-section { padding: 40px 5% 35px; } .deals-banner { padding: 40px; } .deal-title { font-size: 2.5rem; }
        .product-section { padding: 40px 5% 40px; } .section-title { font-size: 2.2rem; }
        .product-grid { grid-template-columns: repeat(4, 1fr); gap: 25px; } .card-img-container { height: 280px; } .card-details { padding: 20px; }
        .trending-section { padding: 40px 5% 40px; } .trending-card { width: 320px; } .trending-img-container { height: 220px; }
        .story-section { padding: 45px 5% 40px; } .story-container { padding: 50px 40px; } .story-title { font-size: 2.8rem; }
        .scroll-prev { left: 15px; } .scroll-next { right: 15px; }
    }
    
    
    /* =========================================
   CATEGORY ITEMS SPACING FIX
   ========================================= */

.category-scroll {
    display: flex;
    gap: 30px; /* Har category ke beech ka gap yahan se control hoga */
    overflow-x: auto;
    padding: 15px 5px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth mobile scroll */
}

.cat-item {
    flex: 0 0 auto;
    width: 90px; /* Fixed width taaki sabhi items ek jaise dikhein */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
    margin: 0; /* Extra margin hata diya */
}

/* Mobile ke liye thoda chota gap aur width */
@media (max-width: 768px) {
    .category-scroll {
        gap: 10px; /* Mobile par gap thoda kam */
    }
    .cat-item {
        width: 80px; /* Mobile par icons ki width fix */
    }
}

/* By default arrows hide rahengi */
.scroll-nav {
    display: none !important; 
}

/* Jab hum JS se 'show' class add karenge tabhi dikhengi */
.scroll-nav.show {
    display: flex !important;
}
</style>

<div class="category-section">
    <div class="scroll-nav scroll-prev" onclick="scrollCat(-1)"><i class="fas fa-chevron-left"></i></div>
    <div class="category-scroll" id="categoryScroll">
        <?php
        /** * LOGIC: Sirf wahi Top Categories (parent_id = 0) nikalo jinke paas 
         * products hain (chahe direct hon ya unke kisi child/grandchild mein).
         */
        function getActiveTopCategoryIds($conn) {
            // 1. Pehle woh saari category IDs lo jinme active products mapped hain
            $res = $conn->query("SELECT DISTINCT category_id FROM products WHERE status='active'");
            $product_cat_ids = [];
            while($row = $res->fetch_assoc()) { 
                if($row['category_id']) $product_cat_ids[] = $row['category_id']; 
            }

if(empty($product_cat_ids)) return [0]; // Agar koi product hi nahi hai

// 2. In IDs ke liye unke topmost parent (Root Category) ko dhundo
            $top_parent_ids = [];
            foreach($product_cat_ids as $id) {
                $curr = $id;
                $last_valid_id = $id;
                while($curr > 0) {
                    $p_res = $conn->query("SELECT id, parent_id FROM categories WHERE id = $curr");
                    if($p_row = $p_res->fetch_assoc()) {
                        $last_valid_id = $p_row['id']; // Current ID ko track rakho
                        $curr = $p_row['parent_id'];   // Upar jao
                    } else {
                        $curr = 0;
                    }
                }
                $top_parent_ids[] = $last_valid_id;
            }
            return array_unique($top_parent_ids);
        }

$active_top_ids = getActiveTopCategoryIds($conn);
        $ids_string = implode(',', $active_top_ids);

// Sirf wahi categories fetch karo jo active IDs ki list mein hain
        $cats = $conn->query("SELECT * FROM categories WHERE id IN ($ids_string) AND status='active' ORDER BY display_order ASC");

if($cats && $cats->num_rows > 0){
            while($c = $cats->fetch_assoc()):
                $cid = $c['id'];
                
                // Sub-categories fetch karte waqt bhi check karo ki unme products hain ya nahi
                // (Optional: Agar aap chahte ho ki popup mein bhi sirf active sub-cats dikhen)
                $sub_res = $conn->query("SELECT DISTINCT c.id, c.name FROM categories c 
                                       INNER JOIN products p ON (p.category_id = c.id)
                                       WHERE c.parent_id = $cid AND p.status='active'");
                
                $subs = [];
                while($s = $sub_res->fetch_assoc()) { $subs[] = $s; }
                
                $hasSubs = count($subs) > 0;
                $subsJson = htmlspecialchars(json_encode($subs), ENT_QUOTES, 'UTF-8');
                $imgName = $c['image'];
                $imgPath = "uploads/" . $imgName;
                $hasImage = (!empty($imgName) && file_exists($imgPath) && $imgName != 'default_cat.png');
        ?>
        <div class="cat-item" onclick="handleCategoryClick(<?php echo $c['id']; ?>, '<?php echo htmlspecialchars($c['name']); ?>', <?php echo $hasSubs ? 'true' : 'false'; ?>, '<?php echo $subsJson; ?>')">
            <div class="cat-icon-box">
                <?php if($hasImage): ?>
                    <img src="<?php echo $imgPath; ?>" class="cat-img" alt="<?php echo htmlspecialchars($c['name']); ?>">
                <?php else: ?>
                    <div class="cat-placeholder"><i class="fas fa-layer-group"></i></div>
                <?php endif; ?>
            </div>
            <span class="cat-name"><?php echo htmlspecialchars($c['name']); ?></span>
        </div>
        <?php endwhile; } else { ?>
            <div class="cat-item"><span class="cat-name">No Active Collections</span></div>
        <?php } ?>
    </div>
    <div class="scroll-nav scroll-next" onclick="scrollCat(1)"><i class="fas fa-chevron-right"></i></div>
</div>

<div class="hero-section">
    <div class="hero-banner">
        <div class="hero-gradient"></div>
        <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?q=80&w=2070&auto=format&fit=crop" alt="Heritage Collection" class="hero-img" loading="lazy">
        <div class="hero-content">
            <h1 class="hero-title">Heritage <span class="hero-highlight">Collection</span> 2026</h1>
            <p class="hero-subtitle">Timeless Luxury · Artisanal Craftsmanship</p>
            <a href="products.php" class="hero-cta">Explore Collection <i class="fas fa-arrow-right"></i></a>
        </div>
    </div>
</div>

<div class="deals-section">
    <div class="deals-banner">
        <div>
            <span class="deal-badge">⚡ Limited Time Offer</span>
            <h2 class="deal-title">Exclusive Deal of the Week</h2>
            <p class="deal-desc">Discover handpicked luxury items with special pricing. Premium quality at unbeatable value.</p>
            <a href="products.php?deals=1" class="deal-cta">Shop Deals <i class="fas fa-arrow-right"></i></a>
        </div>
    </div>
</div>

<div class="product-section">
    <div class="section-header">
        <div>
            <div class="section-subtitle">Fresh Arrivals</div>
            <h2 class="section-title">Newest Additions</h2>
        </div>
        <a href="products.php" class="view-all">View All <i class="fas fa-arrow-right"></i></a>
    </div>

<div class="product-grid">
        <?php
        $products = $conn->query("
            SELECT p.*, c.name as category_name 
            FROM products p 
            LEFT JOIN categories c ON p.category_id = c.id 
            WHERE p.status='active' 
            ORDER BY p.id DESC 
            LIMIT 4
        ");
        
        if($products->num_rows > 0):
            while($p = $products->fetch_assoc()):
                $isNew = (time() - strtotime($p['created_at'])) < (30 * 24 * 60 * 60);
                
                $price = $p['price'];
                $mrp = $p['mrp'];
                $discount = 0;
                if($mrp > $price && $mrp > 0){
                    $discount = round((($mrp - $price) / $mrp) * 100);
                }
        ?>
        <a href="product.php?id=<?php echo $p['id']; ?>" class="product-card">
            <div class="card-badges">
                <?php if($discount > 0): ?>
                    <div class="off-badge"><?php echo $discount; ?>% OFF</div>
                <?php endif; ?>
                <?php if($isNew): ?>
                    <div class="new-badge">New</div>
                <?php endif; ?>
            </div>
            
            <div class="card-img-container">
                <img src="<?php echo $p['image'] ? 'uploads/'.$p['image'] : 'https://via.placeholder.com/300'; ?>" alt="<?php echo htmlspecialchars($p['title']); ?>" class="card-img" loading="lazy">
            </div>
            
            <div class="card-details">
                <div class="product-category"><?php echo htmlspecialchars($p['category_name'] ?? 'Luxury'); ?></div>
                <h3 class="product-title"><?php echo htmlspecialchars($p['title']); ?></h3>
                <div class="price-block">
                    <span class="current-price">₹<?php echo number_format($price); ?></span>
                    <?php if($discount > 0): ?>
                        <span class="old-price">₹<?php echo number_format($mrp); ?></span>
                    <?php endif; ?>
                </div>
            </div>
        </a>
        <?php endwhile; else: ?>
            <div class="empty-state">
                <div class="empty-icon"><i class="fas fa-box-open"></i></div>
                <h3 class="empty-text">Coming Soon</h3>
                <p class="empty-subtext">We are curating the finest items for you.</p>
            </div>
        <?php endif; ?>
    </div>
</div>

<div class="trending-section">
    <div class="section-header">
        <div>
            <div class="section-subtitle">What's Hot</div>
            <h2 class="section-title">Trending Now</h2>
        </div>
        <a href="products.php?sort=popular" class="view-all">View All <i class="fas fa-fire"></i></a>
    </div>

<div class="trending-scroll">
        <?php
        $trending = $conn->query("
            SELECT p.*, c.name as category_name 
            FROM products p 
            LEFT JOIN categories c ON p.category_id = c.id 
            WHERE p.status='active' 
            ORDER BY RAND() 
            LIMIT 4
        ");
        
        if($trending->num_rows > 0):
            while($t = $trending->fetch_assoc()):
                $tPrice = $t['price'];
                $tMrp = $t['mrp'];
                $tDiscount = 0;
                if($tMrp > $tPrice && $tMrp > 0){
                    $tDiscount = round((($tMrp - $tPrice) / $tMrp) * 100);
                }
        ?>
        <a href="product.php?id=<?php echo $t['id']; ?>" class="trending-card">
            <div class="trending-img-container">
                <?php if($tDiscount > 0): ?>
                <div style="position:absolute; top:10px; left:10px; z-index:2;">
                    <span class="off-badge"><?php echo $tDiscount; ?>% OFF</span>
                </div>
                <?php endif; ?>
                <img src="<?php echo $t['image'] ? 'uploads/'.$t['image'] : 'https://via.placeholder.com/280x180'; ?>" alt="<?php echo htmlspecialchars($t['title']); ?>" class="trending-img" loading="lazy">
            </div>
            <div class="card-details">
                <div class="product-category"><?php echo htmlspecialchars($t['category_name'] ?? 'Luxury'); ?></div>
                <h3 class="product-title"><?php echo htmlspecialchars($t['title']); ?></h3>
                <div class="price-block">
                    <span class="current-price">₹<?php echo number_format($tPrice); ?></span>
                    <?php if($tDiscount > 0): ?>
                        <span class="old-price">₹<?php echo number_format($tMrp); ?></span>
                    <?php endif; ?>
                </div>
            </div>
        </a>
        <?php endwhile; endif; ?>
    </div>
</div>

<div class="story-section">
    <div class="story-container">
        <div class="story-icon"><i class="fas fa-gem"></i></div>
        <h2 class="story-title">Crafted with Passion</h2>
        <p class="story-text">
            Every piece in our collection tells a story of dedication, artistry, and timeless elegance. 
            We handpick only the finest materials and work with master craftsmen to bring you luxury that lasts.
        </p>
        <a href="aboutUs.php" class="story-cta">Our Story <i class="fas fa-arrow-right"></i></a>
    </div>
</div>

<?php include 'faq.php'; ?>

<div id="subCatModal" class="subcat-modal">
    <div class="subcat-content">
        <span class="modal-close" onclick="closeModal()">&times;</span>
        <h3 id="modalTitle" class="modal-title">Category Name</h3>
        <div id="modalList" class="sub-grid"></div>
        <a id="viewMainLink" href="#" class="view-main-cat">View All in this Category</a>
    </div>
</div>

const modal = document.getElementById('subCatModal');
    const modalTitle = document.getElementById('modalTitle');
    const modalList = document.getElementById('modalList');
    const viewMainLink = document.getElementById('viewMainLink');

function closeModal() { modal.classList.remove('active'); }
    window.onclick = function(event) { if (event.target == modal) closeModal(); }

document.querySelectorAll('.slide-up, .fade-in').forEach(el => {
        el.style.animationPlayState = 'paused';
        observer.observe(el);
    });
    
    
    
    
    
    
    
    
    
    
    
    function updateArrows() {
    const container = document.getElementById('categoryScroll');
    const prevBtn = document.querySelector('.scroll-prev');
    const nextBtn = document.querySelector('.scroll-next');

// Check ki kya content container se bahar ja raha hai (scrollable hai)
    if (container.scrollWidth > container.clientWidth) {
        prevBtn.classList.add('show');
        nextBtn.classList.add('show');
    } else {
        prevBtn.classList.remove('show');
        nextBtn.classList.remove('show');
    }
}

// Page load hone par aur window resize hone par check karein
window.addEventListener('load', updateArrows);
window.addEventListener('resize', updateArrows);

// Agar aap dynamic categories load kar rahe hain toh thodi der baad bhi check kar sakte hain
setTimeout(updateArrows, 500);
</script>

<?php include 'footer.php'; ?>

Batal

⬅ Naik ke ecomish.com 49 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁PHPMailer-master	dir	—	2026-02-18 06:37	📂 Buka
📁admin	dir	—	2026-04-19 01:30	📂 Buka
📁images	dir	—	2026-02-18 08:01	📂 Buka
📁uploads	dir	—	2026-07-03 18:37	📂 Buka
📁vendor	dir	—	2026-02-02 11:41	📂 Buka
📄.htaccess	htaccess	0 B	2026-02-05 07:26	✏️ Edit 👁️ View
🐘404.php	php	754 B	2026-02-02 11:41	✏️ Edit 👁️ View
🗜️PHPMailer-master.zip	zip	461.7 KB	2026-02-18 06:36	✏️ Edit 👁️ View
🐘aboutUs.php	php	47.8 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘article.php	php	3.3 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘blog.php	php	2.9 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘cart.php	php	19.3 KB	2026-04-10 07:49	✏️ Edit 👁️ View
🐘cashfree_webhook.php	php	2.7 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘category.php	php	7.6 KB	2026-02-25 10:31	✏️ Edit 👁️ View
🐘check_ip.php	php	509 B	2026-02-06 11:31	✏️ Edit 👁️ View
🐘checkout.php	php	67.2 KB	2026-04-10 07:54	✏️ Edit 👁️ View
🐘config.php	php	274 B	2026-02-02 11:43	✏️ Edit 👁️ View
🐘contact.php	php	1.1 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘contactUs.php	php	41 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🗜️ecomish.zip	zip	393.4 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🗜️ecomish260226.zip	zip	37.1 MB	2026-02-26 10:24	✏️ Edit 👁️ View
🗜️ecomishbackup16022026.zip	zip	34.5 MB	2026-02-16 09:46	✏️ Edit 👁️ View
🗜️ecomishbackup18022026.zip	zip	34.6 MB	2026-02-18 06:32	✏️ Edit 👁️ View
🗜️ecomishlive222026.zip	zip	29.5 MB	2026-02-02 11:39	✏️ Edit 👁️ View
🐘faq.php	php	18.7 KB	2026-02-25 12:03	✏️ Edit 👁️ View
🐘footer.php	php	21.5 KB	2026-02-25 12:00	✏️ Edit 👁️ View
🐘forgot_password.php	php	10.8 KB	2026-02-23 08:07	✏️ Edit 👁️ View
🐘functions.php	php	956 B	2026-02-02 11:41	✏️ Edit 👁️ View
🐘header.php	php	19.9 KB	2026-04-10 07:53	✏️ Edit 👁️ View
🐘hu.php	php	176.5 KB	2026-04-19 01:35	✏️ Edit 👁️ View
🐘index.php	php	34.4 KB	2026-04-10 07:12	✏️ Edit 👁️ View
🐘install.php	php	2.8 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘login.php	php	11.7 KB	2026-03-05 08:05	✏️ Edit 👁️ View
🐘logout.php	php	79 B	2026-02-02 11:41	✏️ Edit 👁️ View
🐘nimbus_shipping.php	php	7.3 KB	2026-02-09 06:39	✏️ Edit 👁️ View
🐘order_success.php	php	17.6 KB	2026-02-28 10:40	✏️ Edit 👁️ View
🐘orders.php	php	10.4 KB	2026-02-18 10:28	✏️ Edit 👁️ View
🐘privacypolicy.php	php	39.5 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘product.php	php	22.9 KB	2026-02-26 11:25	✏️ Edit 👁️ View
🐘products.php	php	15.1 KB	2026-04-10 07:09	✏️ Edit 👁️ View
🐘profile.php	php	32.4 KB	2026-02-25 12:12	✏️ Edit 👁️ View
🐘register.php	php	18.3 KB	2026-03-05 08:01	✏️ Edit 👁️ View
🐘returnRefund.php	php	47.5 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘search.php	php	13.2 KB	2026-02-16 12:44	✏️ Edit 👁️ View
🐘seller_register.php	php	18.5 KB	2026-02-28 07:52	✏️ Edit 👁️ View
🐘seller_status.php	php	7.9 KB	2026-02-28 07:43	✏️ Edit 👁️ View
🐘shipping-policy.php	php	48.4 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘terms-of-service.php	php	71.5 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘wishlist.php	php	9.9 KB	2026-02-02 11:41	✏️ Edit 👁️ View