implement Clicks2Cart theme with custom header, mobile navigation, hero carousel, and styling.
This commit is contained in:
Alaguraj0361
parent
048789595c
commit
284cbf1fea
Binary file not shown.
|
After Width: | Height: | Size: 612 KiB |
BIN
addons/theme_clicks2cart/static/src/img/festive_hero_slide.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/festive_hero_slide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 745 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 575 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 762 KiB |
BIN
addons/theme_clicks2cart/static/src/img/puja_hero_slide.png
Normal file
BIN
addons/theme_clicks2cart/static/src/img/puja_hero_slide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 642 KiB |
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
<!-- Goolge Fonts -->
|
||||
<!-- Google Fonts -->
|
||||
<template id="clicks2cart_fonts" inherit_id="website.layout" name="Clicks2Cart Fonts">
|
||||
<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&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet"/>
|
||||
@ -29,46 +29,96 @@
|
||||
</div>
|
||||
</xpath>
|
||||
<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">✕</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">
|
||||
<t t-cache="None if website.is_menu_cache_disabled() else (xmlid,website,website.is_public_user())">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<!-- Left Menus -->
|
||||
<div class="d-none d-lg-flex gap-4">
|
||||
<a href="/" class="nav-link active">Home</a>
|
||||
<a href="/shop" class="nav-link">Shop +</a>
|
||||
<a href="/aboutus" class="nav-link">About Us</a>
|
||||
<a href="/blog" class="nav-link">Blog</a>
|
||||
<a href="/contactus" class="nav-link">Contact</a>
|
||||
<div class="container d-flex justify-content-between align-items-center position-relative">
|
||||
|
||||
<!-- 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">
|
||||
☰
|
||||
</button>
|
||||
<!-- Desktop nav links -->
|
||||
<div class="d-none d-lg-flex gap-4">
|
||||
<a href="/" class="nav-link active">Home</a>
|
||||
<a href="/shop" class="nav-link">Shop +</a>
|
||||
<a href="/aboutus" class="nav-link">About Us</a>
|
||||
<a href="/blog" class="nav-link">Blog</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>
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- Right Icons -->
|
||||
<div class="header-icons d-flex align-items-center gap-4">
|
||||
<a href="/my/account" class="text-dark"><i class="fa fa-user-o"></i></a>
|
||||
<!-- RIGHT: Cart + account + search -->
|
||||
<div class="c2c-header-right header-icons d-flex align-items-center justify-content-end gap-3">
|
||||
<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">
|
||||
<i class="fa fa-shopping-bag"></i>
|
||||
<i class="fa fa-shopping-bag"/>
|
||||
<span class="cart-badge">3</span>
|
||||
</a>
|
||||
<a href="#" class="text-dark"><i class="fa fa-search"></i></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>
|
||||
<a href="#" class="text-dark d-none d-lg-inline"><i class="fa fa-search"/></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</t>
|
||||
</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>
|
||||
</data>
|
||||
</field>
|
||||
@ -122,13 +172,13 @@
|
||||
<!-- Social Links -->
|
||||
<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>
|
||||
<a href="#"><i class="fa fa-instagram"></i></a>
|
||||
<a href="#"><i class="fa fa-facebook"></i></a>
|
||||
<a href="#"><i class="fa fa-twitter"></i></a>
|
||||
<a href="#"><i class="fa fa-pinterest"></i></a>
|
||||
<a href="#"><i class="fa fa-instagram"/></a>
|
||||
<a href="#"><i class="fa fa-facebook"/></a>
|
||||
<a href="#"><i class="fa fa-twitter"/></a>
|
||||
<a href="#"><i class="fa fa-pinterest"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Newsletter Card -->
|
||||
<div class="col-lg-5 mb-4">
|
||||
<div class="footer-newsletter-card">
|
||||
|
||||
@ -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="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="3" aria-label="Slide 4"></button>
|
||||
</div>
|
||||
|
||||
<div class="carousel-inner h-100">
|
||||
@ -28,12 +29,12 @@
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-12">
|
||||
<p class="hero-pre-title text-uppercase">EXPLORE THE</p>
|
||||
<h1 class="display-1 fw-bold mb-4">New Arrivals</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-pre-title text-uppercase">TRADITION & FRESHNESS</p>
|
||||
<h1 class="display-1 fw-bold mb-4">Weaving Freshness into Every Tradition</h1>
|
||||
<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"/>
|
||||
<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>
|
||||
@ -45,12 +46,12 @@
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-12">
|
||||
<p class="hero-pre-title text-uppercase">SPECIAL MOMENTS</p>
|
||||
<h1 class="display-1 fw-bold mb-4">Wedding Bloom</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-pre-title text-uppercase">FESTIVE & ELEGANT</p>
|
||||
<h1 class="display-1 fw-bold mb-4">Celebrate Elegance, Embrace Tradition</h1>
|
||||
<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 & 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"/>
|
||||
<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>
|
||||
@ -62,12 +63,29 @@
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-12">
|
||||
<p class="hero-pre-title text-uppercase">FRESH EVERY DAY</p>
|
||||
<h1 class="display-1 fw-bold mb-4">Luxury Gifting</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-pre-title text-uppercase">DIVINE & SACRED</p>
|
||||
<h1 class="display-1 fw-bold mb-4">Celebrate Devotion, Embrace Spirituality</h1>
|
||||
<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"/>
|
||||
<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>
|
||||
@ -90,23 +108,17 @@
|
||||
<!-- 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');">
|
||||
<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">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
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.
|
||||
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.
|
||||
</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"/>
|
||||
<div class="details">
|
||||
<h6>Lovelllo</h6>
|
||||
<span>Founder</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -119,8 +131,8 @@
|
||||
<div class="container position-relative py-5" style="z-index:2;">
|
||||
<!-- Section Header -->
|
||||
<div class="text-center mb-4">
|
||||
<h2 class="s_col_heading">Shop by collection</h2>
|
||||
<p class="s_col_subheading">— All Category of Clicks2Cart —</p>
|
||||
<h2 class="s_col_heading">Divine Flowers</h2>
|
||||
<p class="s_col_subheading">— Fresh flowers for every sacred ritual and spiritual celebration. —</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Row -->
|
||||
@ -291,12 +303,12 @@
|
||||
|
||||
<!-- Title on white background (above the watercolor image) -->
|
||||
<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>
|
||||
<p style="font-family: 'Outfit', sans-serif; font-size: 0.95rem; color: #888;">- Lorem Ipsum is simply dummy text of the printing -</p>
|
||||
<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;">- Your One-Stop Shop for Essentials & More -</p>
|
||||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<div style="
|
||||
position: absolute;
|
||||
@ -310,94 +322,80 @@
|
||||
"></div>
|
||||
|
||||
<div class="container position-relative" style="z-index: 2;">
|
||||
<!-- Product Grid (4 items) -->
|
||||
<div class="row g-4">
|
||||
<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_container">
|
||||
<!-- Product Slider (Auto sliding) -->
|
||||
<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">
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="s_wedding_card position-relative bg-white text-center" style="padding: 10px; transition: box-shadow 0.3s ease;">
|
||||
<!-- Badge -->
|
||||
<t t-if="product_index == 0">
|
||||
<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>
|
||||
</t>
|
||||
<t t-elif="product_index == 2">
|
||||
<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>
|
||||
<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>
|
||||
<!-- Original Set -->
|
||||
<t t-foreach="home_categories" t-as="category">
|
||||
<div class="s_wedding_slider_item">
|
||||
<div class="s_wedding_card position-relative text-center w-100" style="height: 380px; overflow: hidden; padding: 0;">
|
||||
<!-- Category Image -->
|
||||
<div class="s_wedding_card_img_wrap position-absolute top-0 start-0 w-100 h-100">
|
||||
<a t-attf-href="/shop/category/#{category.id}" class="d-block h-100 w-100">
|
||||
<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>
|
||||
|
||||
<!-- Product Info -->
|
||||
<div class="pb-2">
|
||||
<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"/>
|
||||
<!-- Stars -->
|
||||
<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>
|
||||
<!-- Price -->
|
||||
<div style="font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; color: #000;">
|
||||
<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>
|
||||
</t>
|
||||
|
||||
<!-- Fallback placeholders -->
|
||||
<t t-if="not wedding_products">
|
||||
<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="col-lg-3 col-md-6">
|
||||
<div class="s_wedding_card position-relative bg-white text-center" style="padding: 10px; transition: box-shadow 0.3s ease;">
|
||||
<t t-if="item[4]">
|
||||
<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]"/>
|
||||
</t>
|
||||
<div class="s_wedding_card_img_wrap position-relative">
|
||||
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product"/>
|
||||
<div class="s_product_actions">
|
||||
<a href="#" class="action-btn quick-view"
|
||||
t-att-data-name="item[0]"
|
||||
t-att-data-price="'$' + str(item[1])"
|
||||
data-img="/theme_clicks2cart/static/src/img/wedding_col.png"
|
||||
t-att-data-desc="'Premium ' + item[0] + ' arrangement for your special wedding day.'"><i class="fa fa-eye"></i></a>
|
||||
<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>
|
||||
<!-- Hover Overlay (Category Name & Button) -->
|
||||
<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>
|
||||
<div class="pb-2">
|
||||
<span class="d-block fw-bold text-dark mb-1" style="font-family: 'Outfit'; font-size: 0.95rem;" t-esc="item[0]"/>
|
||||
<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 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> <!-- /row -->
|
||||
|
||||
<!-- Duplicated Set for seamless loop -->
|
||||
<t t-foreach="home_categories" t-as="category">
|
||||
<div class="s_wedding_slider_item">
|
||||
<div class="s_wedding_card position-relative text-center w-100" style="height: 380px; overflow: hidden; padding: 0;">
|
||||
<div class="s_wedding_card_img_wrap position-absolute top-0 start-0 w-100 h-100">
|
||||
<a t-attf-href="/shop/category/#{category.id}" class="d-block h-100 w-100">
|
||||
<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>
|
||||
|
||||
<!-- Fallback placeholders if no categories found -->
|
||||
<t t-if="not home_categories">
|
||||
<t t-foreach="['Pooja Essentials', 'Fresh Produce', 'Sarees', 'Jewelry'] * 2" t-as="item">
|
||||
<div class="s_wedding_slider_item">
|
||||
<div class="s_wedding_card position-relative text-center w-100" style="height: 380px; overflow: hidden; padding: 0;">
|
||||
<div class="s_wedding_card_img_wrap position-absolute top-0 start-0 w-100 h-100">
|
||||
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Category" class="category-img" style="height: 100%; width: 100%; object-fit: cover;"/>
|
||||
</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 class="mt-2 category-btn-wrapper">
|
||||
<a href="/shop" class="btn_view_cat">View Category</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</div> <!-- /slider track -->
|
||||
</div> <!-- /slider container -->
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Floating floral decoration bottom right -->
|
||||
<div class="s_cat_floating_flower" aria-hidden="true" style="bottom: -40px; right: -20px; z-index: 5;"></div>
|
||||
</div> <!-- /bg wrapper -->
|
||||
@ -413,8 +411,8 @@
|
||||
<div class="container">
|
||||
<!-- Section Header -->
|
||||
<div class="s_holiday_header">
|
||||
<h2 class="s_holiday_title">Holiday</h2>
|
||||
<p class="s_holiday_divider">— Lorem Ipsum is simply dummy text of the printing —</p>
|
||||
<h2 class="s_holiday_title">Exclusive Deals</h2>
|
||||
<p class="s_holiday_divider">— Discover the best offers and special discounts from ClicksToCart —</p>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center s_holiday_grid_container">
|
||||
@ -574,6 +572,230 @@
|
||||
</div>
|
||||
</div>
|
||||
</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}&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 -->
|
||||
<section class="s_sale_countdown position-relative" style="background-color: transparent;">
|
||||
@ -581,29 +803,11 @@
|
||||
<div class="container position-relative z-index-1">
|
||||
<div class="row align-items-center justify-content-end">
|
||||
<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>
|
||||
<p class="text-muted mb-4" style="font-family: inherit; font-size: 0.95rem; line-height: 1.6; max-width: 480px; color: #666 !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
|
||||
<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-5" style="font-family: 'Outfit', sans-serif; font-size: 1.1rem; line-height: 1.8; max-width: 500px; color: #444 !important;">
|
||||
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>
|
||||
<div class="d-flex justify-content-start gap-2 gap-md-3 mb-4 flex-wrap">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user