alaguraj/odoo_clicks2cart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement Clicks2Cart theme with custom header, mobile navigation, hero carousel, and styling.

Browse Source
This commit is contained in:
Alaguraj0361 2026-03-14 17:24:28 +05:30
parent 048789595c
commit 284cbf1fea
8 changed files with 1387 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
addons/theme_clicks2cart/static/src/img/featured_collection_cart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 612 KiB

BIN
addons/theme_clicks2cart/static/src/img/festive_hero_slide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 745 KiB

BIN
addons/theme_clicks2cart/static/src/img/floral_gift_box_countdown_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 575 KiB

BIN
addons/theme_clicks2cart/static/src/img/fresh_produce_hero_slide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 762 KiB

BIN
addons/theme_clicks2cart/static/src/img/puja_hero_slide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 642 KiB

987
addons/theme_clicks2cart/static/src/scss/theme.scss
View File

File diff suppressed because it is too large Load Diff

96
addons/theme_clicks2cart/views/layout.xml
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<odoo> <odoo>
<!-- Goolge Fonts --> <!-- Google Fonts -->
<template id="clicks2cart_fonts" inherit_id="website.layout" name="Clicks2Cart Fonts"> <template id="clicks2cart_fonts" inherit_id="website.layout" name="Clicks2Cart Fonts">
<xpath expr="//head" position="inside"> <xpath expr="//head" position="inside">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,800;1,400&amp;family=Outfit:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,800;1,400&amp;family=Outfit:wght@300;400;500;600&amp;display=swap" rel="stylesheet"/>
@ -29,11 +29,50 @@
</div> </div>
</xpath> </xpath>
<xpath expr="//header" position="replace"> <xpath expr="//header" position="replace">
<!-- ===== MOBILE SIDE DRAWER ===== -->
<div class="c2c-mobile-overlay d-lg-none" id="c2cMobileOverlay" onclick="c2cCloseMobileMenu()"/>
<div class="c2c-mobile-drawer d-lg-none" id="c2cMobileDrawer">
<!-- Close button row (top right of drawer, with partial logo visible behind) -->
<div class="c2c-drawer-header">
<button class="c2c-drawer-close" onclick="c2cCloseMobileMenu()" aria-label="Close">&#10005;</button>
</div>
<!-- Search bar -->
<div class="c2c-drawer-search">
<input type="text" placeholder="Search here..." class="c2c-search-input"/>
<button class="c2c-search-btn" aria-label="Search"><i class="fa fa-search"/></button>
</div>
<!-- Nav links -->
<nav class="c2c-drawer-nav">
<a href="/" class="c2c-drawer-link c2c-drawer-link--active">Home</a>
<a href="/shop" class="c2c-drawer-link c2c-drawer-link--accent">Shop <span class="c2c-plus">+</span></a>
<a href="/aboutus" class="c2c-drawer-link c2c-drawer-link--muted">About Us</a>
<a href="/blog" class="c2c-drawer-link c2c-drawer-link--muted">Blog</a>
<a href="/contactus" class="c2c-drawer-link c2c-drawer-link--muted">Contact</a>
</nav>
<!-- Footer links inside drawer -->
<div class="c2c-drawer-footer">
<a href="/my/account" class="c2c-drawer-account">
<i class="fa fa-user-o me-2"/>My Account
</a>
<p class="c2c-drawer-contact mt-3 mb-1"><strong>P:</strong>800 123 654 78</p>
<p class="c2c-drawer-contact mb-0"><strong>E:</strong><a href="mailto:Jenstore@gmail.com">Jenstore@gmail.com</a></p>
</div>
</div>
<!-- ===== MAIN HEADER ===== -->
<header id="top" class="sticky-top bg-white"> <header id="top" class="sticky-top bg-white">
<t t-cache="None if website.is_menu_cache_disabled() else (xmlid,website,website.is_public_user())"> <t t-cache="None if website.is_menu_cache_disabled() else (xmlid,website,website.is_public_user())">
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<div class="container d-flex justify-content-between align-items-center"> <div class="container d-flex justify-content-between align-items-center position-relative">
<!-- Left Menus -->
<!-- LEFT: Hamburger (mobile) / Nav links (desktop) -->
<div class="c2c-header-left d-flex align-items-center">
<!-- Mobile hamburger -->
<button class="c2c-mobile-toggle d-lg-none" onclick="c2cOpenMobileMenu()" aria-label="Open menu">
&#9776;
</button>
<!-- Desktop nav links -->
<div class="d-none d-lg-flex gap-4"> <div class="d-none d-lg-flex gap-4">
<a href="/" class="nav-link active">Home</a> <a href="/" class="nav-link active">Home</a>
<a href="/shop" class="nav-link">Shop +</a> <a href="/shop" class="nav-link">Shop +</a>
@ -41,34 +80,45 @@
<a href="/blog" class="nav-link">Blog</a> <a href="/blog" class="nav-link">Blog</a>
<a href="/contactus" class="nav-link">Contact</a> <a href="/contactus" class="nav-link">Contact</a>
</div> </div>
<!-- Center Logo -->
<div class="text-center position-absolute start-50 translate-middle-x">
<a href="/" class="navbar-brand">
<img src="/theme_clicks2cart/static/description/logo_temp.png" class="img-fluid" style="max-height: 45px;" alt="Logo"/>
<div class="mt-n2">
<span class="fs-6 fw-bold text-uppercase d-block" style="letter-spacing: 2px;">Clicks To Cart</span>
<span class="small text-muted" style="font-size: 0.5rem; letter-spacing: 1px;">Celebrating India's Heritage</span>
</div> </div>
<!-- CENTER: Logo -->
<div class="c2c-logo-wrap text-center">
<a href="/" class="navbar-brand m-0 p-0">
<!-- Removed broken image tag for now, using text logo -->
<span class="fs-5 fw-bold text-uppercase d-block lh-1" style="letter-spacing: 2px;">Clicks To Cart</span>
<span class="small text-muted d-block" style="font-size: 0.6rem; letter-spacing: 1px;">Celebrating India's Heritage</span>
</a> </a>
</div> </div>
<!-- Right Icons --> <!-- RIGHT: Cart + account + search -->
<div class="header-icons d-flex align-items-center gap-4"> <div class="c2c-header-right header-icons d-flex align-items-center justify-content-end gap-3">
<a href="/my/account" class="text-dark"><i class="fa fa-user-o"></i></a> <a href="/my/account" class="text-dark d-none d-lg-inline"><i class="fa fa-user-o"/></a>
<a href="/shop/cart" class="text-dark position-relative"> <a href="/shop/cart" class="text-dark position-relative">
<i class="fa fa-shopping-bag"></i> <i class="fa fa-shopping-bag"/>
<span class="cart-badge">3</span> <span class="cart-badge">3</span>
</a> </a>
<a href="#" class="text-dark"><i class="fa fa-search"></i></a> <a href="#" class="text-dark d-none d-lg-inline"><i class="fa fa-search"/></a>
<button class="navbar-toggler border-0 p-0" type="button" data-bs-toggle="collapse" data-bs-target="#top_menu_collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div> </div>
</div> </div>
</nav> </nav>
</t> </t>
</header> </header>
<!-- Mobile drawer JS (inline, no dependency) -->
<script type="text/javascript">
function c2cOpenMobileMenu() {
document.getElementById('c2cMobileDrawer').classList.add('c2c-drawer--open');
document.getElementById('c2cMobileOverlay').classList.add('c2c-overlay--visible');
document.body.style.overflow = 'hidden';
}
function c2cCloseMobileMenu() {
document.getElementById('c2cMobileDrawer').classList.remove('c2c-drawer--open');
document.getElementById('c2cMobileOverlay').classList.remove('c2c-overlay--visible');
document.body.style.overflow = '';
}
</script>
</xpath> </xpath>
</data> </data>
</field> </field>
@ -122,10 +172,10 @@
<!-- Social Links --> <!-- Social Links -->
<div class="d-flex align-items-center gap-3 mt-4 social-links" style="font-family: 'Outfit', sans-serif;"> <div class="d-flex align-items-center gap-3 mt-4 social-links" style="font-family: 'Outfit', sans-serif;">
<span class="text-uppercase fw-bold" style="letter-spacing: 1px; color: #000; font-size: 0.8rem;">CONNECT WITH US:</span> <span class="text-uppercase fw-bold" style="letter-spacing: 1px; color: #000; font-size: 0.8rem;">CONNECT WITH US:</span>
<a href="#"><i class="fa fa-instagram"></i></a> <a href="#"><i class="fa fa-instagram"/></a>
<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-facebook"/></a>
<a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-twitter"/></a>
<a href="#"><i class="fa fa-pinterest"></i></a> <a href="#"><i class="fa fa-pinterest"/></a>
</div> </div>
</div> </div>

440
addons/theme_clicks2cart/views/pages.xml
View File

@ -20,6 +20,7 @@
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> <button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div> </div>
<div class="carousel-inner h-100"> <div class="carousel-inner h-100">
@ -28,12 +29,12 @@
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-12"> <div class="col-lg-12">
<p class="hero-pre-title text-uppercase">EXPLORE THE</p> <p class="hero-pre-title text-uppercase">TRADITION &amp; FRESHNESS</p>
<h1 class="display-1 fw-bold mb-4">New Arrivals</h1> <h1 class="display-1 fw-bold mb-4">Weaving Freshness into Every Tradition</h1>
<p class="hero-desc">Experience our hand-picked floral collections designed to bring elegance and freshness to your special moments.</p> <p class="hero-desc">Enjoy Free Shipping Canada-wide on Flower Orders $199+! From vibrant marigold garlands to fresh, handpicked blooms, we deliver the beauty of tradition and festivity right to your doorstep.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/> <img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
<div class="mt-4"> <div class="mt-4">
<a href="/shop" class="btn btn-shop-now font-weight-bold">Shop now</a> <a href="/shop" class="btn btn-shop-now font-weight-bold">Shop Fresh Garlands</a>
</div> </div>
</div> </div>
</div> </div>
@ -45,12 +46,12 @@
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-12"> <div class="col-lg-12">
<p class="hero-pre-title text-uppercase">SPECIAL MOMENTS</p> <p class="hero-pre-title text-uppercase">FESTIVE &amp; ELEGANT</p>
<h1 class="display-1 fw-bold mb-4">Wedding Bloom</h1> <h1 class="display-1 fw-bold mb-4">Celebrate Elegance, Embrace Tradition</h1>
<p class="hero-desc">Discover the perfect wedding floral arrangements that capture the essence of your love story with timeless beauty.</p> <p class="hero-desc">Celebrate every moment in style with our curated sarees, exquisite jewelry, and festive accessories—crafted for timeless elegance. Enjoy Same-Day Delivery in KWC &amp; GTA for just $9.99!</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/> <img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
<div class="mt-4"> <div class="mt-4">
<a href="/shop" class="btn btn-shop-now font-weight-bold">Explore More</a> <a href="/shop" class="btn btn-shop-now font-weight-bold">Shop Puja Essentials Now</a>
</div> </div>
</div> </div>
</div> </div>
@ -62,12 +63,29 @@
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-12"> <div class="col-lg-12">
<p class="hero-pre-title text-uppercase">FRESH EVERY DAY</p> <p class="hero-pre-title text-uppercase">DIVINE &amp; SACRED</p>
<h1 class="display-1 fw-bold mb-4">Luxury Gifting</h1> <h1 class="display-1 fw-bold mb-4">Celebrate Devotion, Embrace Spirituality</h1>
<p class="hero-desc">Elevate your gifting game with our premium floral boxes, delivered fresh to your doorstep every single day.</p> <p class="hero-desc">Bring home divine calm with our Puja essentials, designed to inspire peace and devotion. Fill your space with positive energy and celebrate every ritual with purity and elegance.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/> <img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
<div class="mt-4"> <div class="mt-4">
<a href="/shop" class="btn btn-shop-now font-weight-bold">Gift Now</a> <a href="/shop" class="btn btn-shop-now font-weight-bold">Shop Puja Essentials Now</a>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="carousel-item h-100 slide-4">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<p class="hero-pre-title text-uppercase">FARM FRESH</p>
<h1 class="display-1 fw-bold mb-4">Freshness Straight From the Farm</h1>
<p class="hero-desc">Experience the goodness of hand-picked fruits and vegetables, carefully chosen for freshness and rich flavor, delivered straight to your doorstep, bringing the wholesome taste and comfort of home directly into your kitchen.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Separator_flourish.svg" class="hero-separator opacity-75" alt="Separator"/>
<div class="mt-4">
<a href="/shop" class="btn btn-shop-now font-weight-bold">Shop Fresh Produce</a>
</div> </div>
</div> </div>
</div> </div>
@ -90,23 +108,17 @@
<!-- Who we are? --> <!-- Who we are? -->
<section class="s_who_we_are bg-white container-fluid p-0" style="background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/who.png');"> <section class="s_who_we_are bg-white container-fluid p-0" style="background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/who.png');">
<div class="who-we-are-wrapper" > <div class="who-we-are-wrapper" >
<h2 class="title">who we are ?</h2> <h2 class="title">Cultural Treasures</h2>
<p class="description px-lg-5"> <p class="description px-lg-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Clicks to Cart brings the beauty of Indian tradition to Canada. Discover elegant Golu dolls, divine cultural items, sarees, and home decor. We carefully curate authentic products that celebrate heritage and craftsmanship. Enjoy timeless tradition delivered conveniently to your doorstep.
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p> </p>
<div class="founder-info"> <!-- <div class="founder-info">
<img src="https://landing.engotheme.com/html/jenstore/demo/img/founder.png" alt="Founder Portrait" width="70" height="70"/> <img src="https://landing.engotheme.com/html/jenstore/demo/img/founder.png" alt="Founder Portrait" width="70" height="70"/>
<div class="details"> <div class="details">
<h6>Lovelllo</h6> <h6>Lovelllo</h6>
<span>Founder</span> <span>Founder</span>
</div> </div>
</div> </div> -->
</div> </div>
</section> </section>
@ -119,8 +131,8 @@
<div class="container position-relative py-5" style="z-index:2;"> <div class="container position-relative py-5" style="z-index:2;">
<!-- Section Header --> <!-- Section Header -->
<div class="text-center mb-4"> <div class="text-center mb-4">
<h2 class="s_col_heading">Shop by collection</h2> <h2 class="s_col_heading">Divine Flowers</h2>
<p class="s_col_subheading">&#8212; All Category of Clicks2Cart &#8212;</p> <p class="s_col_subheading">&#8212; Fresh flowers for every sacred ritual and spiritual celebration. &#8212;</p>
</div> </div>
<!-- Main Content Row --> <!-- Main Content Row -->
@ -291,12 +303,12 @@
<!-- Title on white background (above the watercolor image) --> <!-- Title on white background (above the watercolor image) -->
<div class="container text-center" style="position: relative; z-index: 2;"> <div class="container text-center" style="position: relative; z-index: 2;">
<h2 style="font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 800; color: #000; letter-spacing: -1px;">Wedding</h2> <h2 style="font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 800; color: #000; letter-spacing: -1px;">Categories</h2>
<p style="font-family: 'Outfit', sans-serif; font-size: 0.95rem; color: #888;">- Lorem Ipsum is simply dummy text of the printing -</p> <p style="font-family: 'Outfit', sans-serif; font-size: 0.95rem; color: #888;">- Your One-Stop Shop for Essentials &amp; More -</p>
</div> </div>
<!-- Background + Products area (watercolor starts here) --> <!-- Background + Products area (watercolor starts here) -->
<div class="position-relative overflow-hidden" style="padding-top: 150px; padding-bottom: 500px;"> <div class="position-relative overflow-hidden" style="padding-top: 150px; height: 1000px;">
<!-- Blue watercolor splash background only behind products --> <!-- Blue watercolor splash background only behind products -->
<div style=" <div style="
position: absolute; position: absolute;
@ -310,94 +322,80 @@
"></div> "></div>
<div class="container position-relative" style="z-index: 2;"> <div class="container position-relative" style="z-index: 2;">
<!-- Product Grid (4 items) --> <div class="s_wedding_slider_container">
<div class="row g-4"> <!-- Product Slider (Auto sliding) -->
<t t-set="wedding_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True)], limit=4, order='website_sequence asc')"/> <div class="s_wedding_slider_track">
<t t-set="home_categories" t-value="request.env['product.public.category'].sudo().search([], limit=8)"/>
<t t-foreach="wedding_products" t-as="product"> <!-- Original Set -->
<div class="col-lg-3 col-md-6"> <t t-foreach="home_categories" t-as="category">
<div class="s_wedding_card position-relative bg-white text-center" style="padding: 10px; transition: box-shadow 0.3s ease;"> <div class="s_wedding_slider_item">
<!-- Badge --> <div class="s_wedding_card position-relative text-center w-100" style="height: 380px; overflow: hidden; padding: 0;">
<t t-if="product_index == 0"> <!-- Category Image -->
<span class="position-absolute top-0 end-0 m-2 badge" style="background:#e74c3c; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px; z-index: 10;">SALE</span> <div class="s_wedding_card_img_wrap position-absolute top-0 start-0 w-100 h-100">
</t> <a t-attf-href="/shop/category/#{category.id}" class="d-block h-100 w-100">
<t t-elif="product_index == 2"> <img t-att-src="website.image_url(category, 'image_1920')" t-att-alt="category.name" loading="lazy" class="category-img" style="height: 100%; width: 100%; object-fit: cover; object-position: center;"/>
<span class="position-absolute top-0 end-0 m-2 badge" style="background:#e6b3a3; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px; z-index: 10;">HOT</span>
</t>
<!-- Product Image -->
<div class="s_wedding_card_img_wrap position-relative">
<a t-attf-href="/shop/product/#{product.website_slug or product.id}">
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy"/>
</a> </a>
<div class="s_product_actions">
<a href="#" class="action-btn quick-view"
t-att-data-name="product.name"
t-att-data-price="product.list_price"
t-att-data-img="website.image_url(product, 'image_512')"
t-att-data-desc="product.description_sale or 'Premium quality floral arrangement for your special moments.'"><i class="fa fa-eye"></i></a>
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div>
</div> </div>
<!-- Product Info --> <!-- Hover Overlay (Category Name & Button) -->
<div class="pb-2"> <div class="s_wedding_card_overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center">
<a t-attf-href="/shop/product/#{product.website_slug or product.id}" class="d-block fw-bold text-dark text-decoration-none mb-1" style="font-family: 'Outfit', sans-serif; font-size: 0.95rem;" t-field="product.name"/> <div class="mb-4 category-title-wrapper">
<!-- Stars --> <a t-attf-href="/shop/category/#{category.id}" class="d-block fw-bold text-dark text-decoration-none" style="font-family: 'Playfair Display', serif; font-size: 1.8rem;" t-field="category.name"/>
<div class="mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/>
</div> </div>
<!-- Price --> <div class="mt-2 category-btn-wrapper">
<div style="font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; color: #000;"> <a t-attf-href="/shop/category/#{category.id}" class="btn_view_cat">View Category</a>
<span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
<t t-if="product_index == 0 or product_index == 2">
<span class="text-muted text-decoration-line-through ms-1" style="font-size: 0.75rem; font-weight: 400;">$450.0</span>
</t>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</t> </t>
<!-- Fallback placeholders --> <!-- Duplicated Set for seamless loop -->
<t t-if="not wedding_products"> <t t-foreach="home_categories" t-as="category">
<t t-foreach="[('Queen Rose - Pink','300.2','450.0','star star star star star','SALE'), ('Bouquet Lavender','160.8','','star star star star star-half-o',''), ('Tulipa Floriade - Yellow','200.7','','star star star-o star-o star-o','HOT'), ('Bouquet Rose','350.4','','star star star star star-half-o','')]" t-as="item"> <div class="s_wedding_slider_item">
<div class="col-lg-3 col-md-6"> <div class="s_wedding_card position-relative text-center w-100" style="height: 380px; overflow: hidden; padding: 0;">
<div class="s_wedding_card position-relative bg-white text-center" style="padding: 10px; transition: box-shadow 0.3s ease;"> <div class="s_wedding_card_img_wrap position-absolute top-0 start-0 w-100 h-100">
<t t-if="item[4]"> <a t-attf-href="/shop/category/#{category.id}" class="d-block h-100 w-100">
<span class="position-absolute top-0 end-0 m-2 badge" t-attf-style="background:#{item[4] == 'SALE' and '#e74c3c' or '#e6b3a3'}; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px; z-index: 10;" t-esc="item[4]"/> <img t-att-src="website.image_url(category, 'image_1920')" t-att-alt="category.name" loading="lazy" class="category-img" style="height: 100%; width: 100%; object-fit: cover; object-position: center;"/>
</a>
</div>
<div class="s_wedding_card_overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center">
<div class="mb-4 category-title-wrapper">
<a t-attf-href="/shop/category/#{category.id}" class="d-block fw-bold text-dark text-decoration-none" style="font-family: 'Playfair Display', serif; font-size: 1.8rem;" t-field="category.name"/>
</div>
<div class="mt-2 category-btn-wrapper">
<a t-attf-href="/shop/category/#{category.id}" class="btn_view_cat">View Category</a>
</div>
</div>
</div>
</div>
</t> </t>
<div class="s_wedding_card_img_wrap position-relative">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product"/> <!-- Fallback placeholders if no categories found -->
<div class="s_product_actions"> <t t-if="not home_categories">
<a href="#" class="action-btn quick-view" <t t-foreach="['Pooja Essentials', 'Fresh Produce', 'Sarees', 'Jewelry'] * 2" t-as="item">
t-att-data-name="item[0]" <div class="s_wedding_slider_item">
t-att-data-price="'$' + str(item[1])" <div class="s_wedding_card position-relative text-center w-100" style="height: 380px; overflow: hidden; padding: 0;">
data-img="/theme_clicks2cart/static/src/img/wedding_col.png" <div class="s_wedding_card_img_wrap position-absolute top-0 start-0 w-100 h-100">
t-att-data-desc="'Premium ' + item[0] + ' arrangement for your special wedding day.'"><i class="fa fa-eye"></i></a> <img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Category" class="category-img" style="height: 100%; width: 100%; object-fit: cover;"/>
<a href="#" class="action-btn add-to-cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="action-btn wishlist"><i class="fa fa-heart-o"></i></a>
</div> </div>
<div class="s_wedding_card_overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center">
<div class="mb-4 category-title-wrapper">
<span class="d-block fw-bold text-dark" style="font-family: 'Playfair Display'; font-size: 1.8rem;" t-esc="item"/>
</div> </div>
<div class="pb-2"> <div class="mt-2 category-btn-wrapper">
<span class="d-block fw-bold text-dark mb-1" style="font-family: 'Outfit'; font-size: 0.95rem;" t-esc="item[0]"/> <a href="/shop" class="btn_view_cat">View Category</a>
<div class="mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-half-o"/>
</div>
<div style="font-family: 'Outfit'; font-weight: 700; font-size: 1rem; color: #000;">
$<t t-esc="item[1]"/>
<t t-if="item[2]">
<span class="text-muted text-decoration-line-through ms-1" style="font-size:0.75rem; font-weight:400;">$<t t-esc="item[2]"/></span>
</t>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</t> </t>
</t> </t>
</div> <!-- /row --> </div> <!-- /slider track -->
</div> <!-- /slider container -->
</div> <!-- /container --> </div> <!-- /container -->
<!-- Floating floral decoration bottom right --> <!-- Floating floral decoration bottom right -->
<div class="s_cat_floating_flower" aria-hidden="true" style="bottom: -40px; right: -20px; z-index: 5;"></div> <div class="s_cat_floating_flower" aria-hidden="true" style="bottom: -40px; right: -20px; z-index: 5;"></div>
</div> <!-- /bg wrapper --> </div> <!-- /bg wrapper -->
@ -413,8 +411,8 @@
<div class="container"> <div class="container">
<!-- Section Header --> <!-- Section Header -->
<div class="s_holiday_header"> <div class="s_holiday_header">
<h2 class="s_holiday_title">Holiday</h2> <h2 class="s_holiday_title">Exclusive Deals</h2>
<p class="s_holiday_divider">&#8212; Lorem Ipsum is simply dummy text of the printing &#8212;</p> <p class="s_holiday_divider">&#8212; Discover the best offers and special discounts from ClicksToCart &#8212;</p>
</div> </div>
<div class="row align-items-center s_holiday_grid_container"> <div class="row align-items-center s_holiday_grid_container">
@ -575,35 +573,241 @@
</div> </div>
</section> </section>
<!-- Promo Banners Section (6 Categories) -->
<section class="s_promo_grid bg-white py-5">
<div class="container-fluid px-4 px-lg-5">
<!-- Section Title -->
<div class="row mb-5 mt-3">
<div class="col-12 text-center">
<span class="d-block mb-3" style="font-family: 'Outfit', sans-serif; font-size: 0.9rem; color: #888; letter-spacing: 4px; text-transform: uppercase;">~ Featured Collections ~</span>
<h2 class="mb-0" style="font-family: 'Playfair Display', serif; font-size: 3.2rem; font-weight: 800; color: #1a1a1a;">Handpicked from the Heart of South India</h2>
</div>
</div>
<!-- Row 1 -->
<div class="row g-4 mb-4">
<!-- Divine Blossoms (Large Left) -->
<div class="col-lg-8 position-relative">
<div class="promo-banner-card w-100 h-100 position-relative d-flex align-items-center justify-content-end overflow-hidden"
style="background-color: #e6edf2; min-height: 400px; padding: 40px;">
<div class="banner-bg position-absolute top-0 start-0 w-100 h-100" style="z-index: 1;">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" class="w-100 h-100" style="object-fit: cover; object-position: left center;" alt="Divine Blossoms" loading="lazy"/>
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 d-none d-lg-block" style="background: linear-gradient(to right, rgba(230, 237, 242, 0) 20%, rgba(230, 237, 242, 1) 70%); z-index: 2;"></div>
<div class="position-absolute top-0 start-0 w-100 h-100 d-lg-none" style="background: rgba(230, 237, 242, 0.85); z-index: 2;"></div>
<div class="position-relative z-index-3 me-lg-5 text-center text-lg-start" style="max-width: 350px; z-index: 3;">
<p class="mb-3" style="font-family: 'Outfit', sans-serif; font-size: 0.85rem; color: #666; letter-spacing: 2px; text-transform: uppercase;">Fresh Flowers</p>
<h2 class="mb-2" style="font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 800; color: #000; line-height: 1.1;">Divine<br/>Blossoms</h2>
<a href="/shop" class="d-inline-block fw-bold text-dark text-decoration-none mt-3" style="font-family: 'Playfair Display', serif; font-size: 1.1rem; border-bottom: 2px solid #000; padding-bottom: 2px;">Shop Category</a>
</div>
<a href="/shop" class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 10;"></a>
</div>
</div>
<!-- Divine Essentials (Small Right) -->
<div class="col-lg-4 position-relative">
<div class="promo-banner-card w-100 h-100 position-relative d-flex flex-column align-items-center justify-content-center overflow-hidden"
style="min-height: 400px;">
<div class="banner-bg position-absolute top-0 start-0 w-100 h-100" style="z-index: 1;">
<img src="/theme_clicks2cart/static/src/img/featured_collection_cart.png" class="w-100 h-100" style="object-fit: cover; object-position: center;" alt="Divine Essentials" loading="lazy"/>
</div>
<div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(255,255,255,0.7); z-index: 2;"></div>
<div class="position-relative text-center z-index-3" style="z-index: 3;">
<h2 class="mb-1" style="font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 800; color: #000; line-height: 1.1;">Divine<br/>Essentials</h2>
</div>
<a href="/shop" class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 10;"></a>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row g-4 mb-4">
<!-- Fresh Produce (Small Left) -->
<div class="col-lg-4 position-relative">
<div class="promo-banner-card w-100 h-100 position-relative d-flex flex-column align-items-center justify-content-center overflow-hidden"
style="min-height: 400px;">
<div class="banner-bg position-absolute top-0 start-0 w-100 h-100" style="z-index: 1;">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" class="w-100 h-100" style="object-fit: cover; object-position: center;" alt="Fresh Produce" loading="lazy"/>
</div>
<div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(255,255,255,0.7); z-index: 2;"></div>
<div class="position-relative text-center z-index-3" style="z-index: 3;">
<h2 class="mb-1" style="font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 800; color: #000; line-height: 1.1;">Fresh<br/>Produce</h2>
</div>
<a href="/shop" class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 10;"></a>
</div>
</div>
<!-- Exquisite Elegance (Large Right) -->
<div class="col-lg-8 position-relative">
<div class="promo-banner-card w-100 h-100 position-relative d-flex align-items-center justify-content-start overflow-hidden"
style="background-color: #f6e6e2; min-height: 400px; padding: 40px;">
<div class="banner-bg position-absolute top-0 start-0 w-100 h-100" style="z-index: 1;">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" class="w-100 h-100" style="object-fit: cover; object-position: right center;" alt="Exquisite Elegance" loading="lazy"/>
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 d-none d-lg-block" style="background: linear-gradient(to left, rgba(246, 230, 226, 0) 20%, rgba(246, 230, 226, 1) 70%); z-index: 2;"></div>
<div class="position-absolute top-0 start-0 w-100 h-100 d-lg-none" style="background: rgba(246, 230, 226, 0.85); z-index: 2;"></div>
<div class="position-relative z-index-3 ms-lg-5 ps-lg-4 text-center text-lg-start" style="max-width: 60%; z-index: 3;">
<p class="mb-3" style="font-family: 'Outfit', sans-serif; font-size: 0.85rem; color: #888; letter-spacing: 2px; text-transform: uppercase;">Fine Jewelry</p>
<h2 class="mb-4" style="font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 800; color: #000; line-height: 1.1;">Exquisite<br/>Elegance</h2>
<a href="/shop" class="btn btn-dark rounded-0 px-4 py-2 mt-2" style="font-family: 'Playfair Display', serif; font-weight: 700; font-size: 0.95rem; display: inline-block;">Shop now</a>
</div>
<a href="/shop" class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 10;"></a>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row g-4">
<!-- Grocery Gems (Large Left) -->
<div class="col-lg-8 position-relative">
<div class="promo-banner-card w-100 h-100 position-relative d-flex align-items-center justify-content-end overflow-hidden"
style="background-color: #f9f6f0; min-height: 400px; padding: 40px;">
<div class="banner-bg position-absolute top-0 start-0 w-100 h-100" style="z-index: 1;">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" class="w-100 h-100" style="object-fit: cover; object-position: left center;" alt="Grocery Gems" loading="lazy"/>
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 d-none d-lg-block" style="background: linear-gradient(to right, rgba(249, 246, 240, 0) 20%, rgba(249, 246, 240, 1) 70%); z-index: 2;"></div>
<div class="position-absolute top-0 start-0 w-100 h-100 d-lg-none" style="background: rgba(249, 246, 240, 0.85); z-index: 2;"></div>
<div class="position-relative z-index-3 me-lg-5 text-center text-lg-start" style="max-width: 350px; z-index: 3;">
<p class="mb-3" style="font-family: 'Outfit', sans-serif; font-size: 0.85rem; color: #888; letter-spacing: 2px; text-transform: uppercase;">Pantry Staples</p>
<h2 class="mb-3" style="font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 800; color: #000; line-height: 1.1;">Grocery<br/>Gems</h2>
<a href="/shop" class="d-inline-block fw-bold text-dark text-decoration-none mt-2" style="font-family: 'Playfair Display', serif; font-size: 1.1rem; border-bottom: 2px solid #000; padding-bottom: 2px;">Read more</a>
</div>
<a href="/shop" class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 10;"></a>
</div>
</div>
<!-- Saree Picks (Small Right) -->
<div class="col-lg-4 position-relative">
<div class="promo-banner-card w-100 h-100 position-relative d-flex flex-column align-items-center justify-content-center overflow-hidden"
style="min-height: 400px;">
<div class="banner-bg position-absolute top-0 start-0 w-100 h-100" style="z-index: 1;">
<img src="/theme_clicks2cart/static/src/img/featured_collection_cart.png" class="w-100 h-100" style="object-fit: cover; object-position: center;" alt="Saree Picks" loading="lazy"/>
</div>
<div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(255,255,255,0.7); z-index: 2;"></div>
<div class="position-relative text-center z-index-3" style="z-index: 3;">
<h2 class="mb-1" style="font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 800; color: #000; line-height: 1.1;">Saree<br/>Picks</h2>
</div>
<a href="/shop" class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 10;"></a>
</div>
</div>
</div>
</div>
</section>
<!-- Jewelry Highlight Section (Creative Editorial Redesign) -->
<section class="s_jewelry_editorial position-relative bg-white" style="overflow: hidden; padding-top: 100px; padding-bottom: 120px;">
<!-- Decorative Background Elements -->
<div class="position-absolute top-0 end-0 h-100 d-none d-lg-block" style="width: 45%; background-color: #fcfaf8; z-index: 0; border-bottom-left-radius: 120px;"></div>
<div class="position-absolute" style="top: -100px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(230,179,163,0.1) 0%, rgba(255,255,255,0) 70%); z-index: 0;"></div>
<!-- Elementor Style Animated Images -->
<div class="position-absolute elementor-anim-float-up-down" style="top: 10%; right: 40%; z-index: 1; pointer-events: none; opacity: 0.7;">
<img src="https://landing.engotheme.com/html/jenstore/demo/img/floral_accent_tl.png" style="width: 180px; transform: rotate(25deg);" alt="floral accent 1" loading="lazy" />
</div>
<div class="position-absolute elementor-anim-spin-slow" style="bottom: 5%; left: -5%; z-index: 1; pointer-events: none; opacity: 0.6;">
<img src="https://landing.engotheme.com/html/jenstore/demo/img/decor-flower.png" style="width: 300px;" alt="floral accent 2" loading="lazy" />
</div>
<div class="position-absolute elementor-anim-float-side" style="top: 60%; right: 5%; z-index: 1; pointer-events: none; opacity: 0.4;">
<img src="https://landing.engotheme.com/html/jenstore/demo/img/decor-flower.png" style="width: 150px; filter: blur(1px); transform: scaleX(-1);" alt="floral accent 3" loading="lazy" />
</div>
<div class="container position-relative z-index-1">
<div class="row align-items-center">
<!-- Left: Editorial Typography -->
<div class="col-lg-5 pe-lg-5 mb-5 mb-lg-0 text-center text-lg-start">
<div class="editorial-text-wrap position-relative">
<span class="d-inline-block mb-3 px-3 py-1" style="border: 1px solid #e6b3a3; color: #d49581; font-family: 'Outfit', sans-serif; font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase;">Exquisite Craftsmanship</span>
<h2 class="mb-4" style="font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 800; color: #1a1a1a; line-height: 1.15;">
Elevate <br/><span style="font-style: italic; color: #e6b3a3; font-weight: 400;">Style</span> with <br/>Jewelry.
</h2>
<p class="mb-5 pe-lg-4" style="font-family: 'Outfit', sans-serif; font-size: 1.05rem; color: #666; line-height: 1.8;">
Discover the art of elegance. Our curated collection of fine jewelry combines timeless craftsmanship with contemporary allure, designed to make every moment unforgettable.
</p>
<a href="/shop" class="btn btn-dark rounded-0 px-5 py-3 d-inline-flex align-items-center justify-content-center" style="font-family: 'Outfit', sans-serif; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; transition: all 0.3s ease;">
Explore Collection <i class="fa fa-long-arrow-right ms-3"></i>
</a>
</div>
</div>
<!-- Right: Offset Product Grid -->
<div class="col-lg-7">
<div class="row g-4 offset-grid">
<t t-set="jewelry_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True)], limit=4, order='website_sequence desc')"/>
<t t-set="p_count" t-value="0"/>
<t t-foreach="jewelry_products" t-as="product">
<div t-attf-class="col-6 col-md-6 #{p_count % 2 == 1 and 'mt-sm-5 pt-sm-4 mt-4' or ''}">
<div class="editorial-product-card text-center mb-4">
<div class="editorial-img-wrap position-relative overflow-hidden mb-3" style="background: #f9f9f9; padding: 20px;">
<a t-attf-href="/shop/product/#{product.website_slug or product.id}" class="d-block">
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" class="img-fluid w-100 transition-zoom" style="object-fit: contain; aspect-ratio: 3/4;" loading="lazy"/>
</a>
<!-- Hover Add to Cart -->
<div class="editorial-action-overlay position-absolute bottom-0 start-0 w-100 p-3" style="transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0;">
<a t-attf-href="/shop/cart/update?product_id=#{product.product_variant_id.id}&amp;add_qty=1" class="btn btn-dark w-100 rounded-0 py-2 shadow-sm" style="font-family: 'Outfit', sans-serif; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;">Add to Cart</a>
</div>
</div>
<div class="editorial-product-info px-2">
<a t-attf-href="/shop/product/#{product.website_slug or product.id}" class="d-block text-dark text-decoration-none text-truncate fw-bold mb-1" style="font-family: 'Playfair Display', serif; font-size: 1.15rem;" t-field="product.name"/>
<div class="text-muted" style="font-family: 'Outfit', sans-serif; font-size: 1rem;">
<span t-field="product.list_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
</div>
</div>
</div>
</div>
<t t-set="p_count" t-value="p_count + 1"/>
</t>
<!-- Fallback for empty db -->
<t t-if="not jewelry_products">
<t t-set="p_count_fb" t-value="0"/>
<t t-foreach="[('Royal Gold Ring','450.0'), ('Pearl Drop Earrings','320.0'), ('Eternal Diamond Studs','890.0'), ('Sapphire Bracelet','1100.0')]" t-as="item">
<div t-attf-class="col-6 col-md-6 #{p_count_fb % 2 == 1 and 'mt-sm-5 pt-sm-4 mt-4' or ''}">
<div class="editorial-product-card text-center mb-4">
<div class="editorial-img-wrap position-relative overflow-hidden mb-3" style="background: #f9f9f9; padding: 20px;">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Jewelry" class="img-fluid w-100 transition-zoom" style="object-fit: contain; aspect-ratio: 3/4;" loading="lazy"/>
<div class="editorial-action-overlay position-absolute bottom-0 start-0 w-100 p-3" style="transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0;">
<a href="/shop" class="btn btn-dark w-100 rounded-0 py-2 shadow-sm" style="font-family: 'Outfit', sans-serif; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;">Add to Cart</a>
</div>
</div>
<div class="editorial-product-info px-2">
<a href="/shop" class="d-block text-dark text-decoration-none text-truncate fw-bold mb-1" style="font-family: 'Playfair Display', serif; font-size: 1.15rem;"><span t-esc="item[0]"/></a>
<div class="text-muted" style="font-family: 'Outfit', sans-serif; font-size: 1rem;">$<span t-esc="item[1]"/></div>
</div>
</div>
</div>
<t t-set="p_count_fb" t-value="p_count_fb + 1"/>
</t>
</t>
</div>
</div>
</div>
</div>
</section>
<!-- Sale Banner / Countdown --> <!-- Sale Banner / Countdown -->
<section class="s_sale_countdown position-relative" style="background-color: transparent;"> <section class="s_sale_countdown position-relative" style="background-color: transparent;">
<div class="s_countdown_bg" style="padding-top: 200px; padding-bottom: 200px;"> <div class="s_countdown_bg" style="padding-top: 200px; padding-bottom: 200px;">
<div class="container position-relative z-index-1"> <div class="container position-relative z-index-1">
<div class="row align-items-center justify-content-end"> <div class="row align-items-center justify-content-end">
<div class="col-lg-5 text-start"> <div class="col-lg-5 text-start">
<h2 class="display-4 fw-bold mb-3" style="font-family: 'Playfair Display'; color: #000; letter-spacing: -1px;">Sale up to 40%</h2> <h2 class="display-4 fw-bold mb-3" style="font-family: 'Playfair Display'; color: #000; letter-spacing: -1px;">Experience Timeless Elegance</h2>
<p class="text-muted mb-4" style="font-family: inherit; font-size: 0.95rem; line-height: 1.6; max-width: 480px; color: #666 !important;"> <p class="text-muted mb-5" style="font-family: 'Outfit', sans-serif; font-size: 1.1rem; line-height: 1.8; max-width: 500px; color: #444 !important;">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout Discover our curated collection of artisanal puja essentials, exquisite jewelry, and festive treasures. Join us in celebrating rituals and style with quality you can trust.
</p> </p>
<div class="d-flex justify-content-start gap-2 gap-md-3 mb-4 flex-wrap"> <a href="/shop" class="btn btn-dark text-white fw-bold" style="border-radius: 0; padding: 16px 45px; font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase;">Discover Now</a>
<div class="bg-white text-center py-2 px-3 shadow-sm" style="min-width: 75px;">
<h3 class="fw-bold m-0" style="color: #000; font-family: 'Outfit'; font-size: 1.8rem;">151</h3>
<span class="text-muted text-uppercase" style="font-family: 'Outfit'; font-size: 0.65rem; letter-spacing: 1px;">Days</span>
</div>
<div class="bg-white text-center py-2 px-3 shadow-sm" style="min-width: 75px;">
<h3 class="fw-bold m-0" style="color: #000; font-family: 'Outfit'; font-size: 1.8rem;">22</h3>
<span class="text-muted text-uppercase" style="font-family: 'Outfit'; font-size: 0.65rem; letter-spacing: 1px;">Hours</span>
</div>
<div class="bg-white text-center py-2 px-3 shadow-sm" style="min-width: 75px;">
<h3 class="fw-bold m-0" style="color: #000; font-family: 'Outfit'; font-size: 1.8rem;">00</h3>
<span class="text-muted text-uppercase" style="font-family: 'Outfit'; font-size: 0.65rem; letter-spacing: 1px;">Mins</span>
</div>
<div class="bg-white text-center py-2 px-3 shadow-sm" style="min-width: 75px;">
<h3 class="fw-bold m-0" style="color: #000; font-family: 'Outfit'; font-size: 1.8rem;">46</h3>
<span class="text-muted text-uppercase" style="font-family: 'Outfit'; font-size: 0.65rem; letter-spacing: 1px;">Secs</span>
</div>
</div>
<a href="/shop" class="btn btn-dark text-white fw-bold mt-2" style="border-radius: 0; padding: 12px 35px; font-size: 0.8rem; letter-spacing: 1px; text-transform: none;">Shop now</a>
</div> </div>
</div> </div>
</div> </div>