1117 lines
92 KiB
XML
1117 lines
92 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
||
<odoo>
|
||
<!-- Custom Homepage Content -->
|
||
<record id="clicks2cart_homepage_v17" model="ir.ui.view">
|
||
<field name="name">Clicks2Cart Homepage</field>
|
||
<field name="type">qweb</field>
|
||
<field name="inherit_id" ref="website.homepage"/>
|
||
<field name="key">website.homepage</field>
|
||
<field name="priority" eval="1000"/>
|
||
<field name="website_id" eval="6"/>
|
||
<field name="arch" type="xml">
|
||
<xpath expr="//div[@id='wrap']" position="replace">
|
||
<div id="wrap" class="oe_structure">
|
||
<!-- Premium Hero Section -->
|
||
<!-- Premium Hero Section (Working Slider) -->
|
||
<section class="s_hero_premium py-0">
|
||
<div id="clicks2cartHeroCarousel" class="carousel slide h-100" data-bs-ride="carousel">
|
||
<!-- Indicators -->
|
||
<div class="carousel-indicators">
|
||
<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">
|
||
<!-- Slide 1 -->
|
||
<div class="carousel-item active h-100 slide-1">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-12">
|
||
<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 Fresh Garlands</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 2 -->
|
||
<div class="carousel-item h-100 slide-2">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-12">
|
||
<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">Shop Puja Essentials Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 3 -->
|
||
<div class="carousel-item h-100 slide-3">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-12">
|
||
<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">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>
|
||
|
||
<!-- Controls -->
|
||
<button class="carousel-control-prev" type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide="prev" style="width: 5%;">
|
||
<span class="carousel-control-prev-icon" aria-hidden="true" style="filter: invert(1);"></span>
|
||
<span class="visually-hidden">Previous</span>
|
||
</button>
|
||
<button class="carousel-control-next" type="button" data-bs-target="#clicks2cartHeroCarousel" data-bs-slide="next" style="width: 5%;">
|
||
<span class="carousel-control-next-icon" aria-hidden="true" style="filter: invert(1);"></span>
|
||
<span class="visually-hidden">Next</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 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">Cultural Treasures</h2>
|
||
<p class="description px-lg-5">
|
||
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">
|
||
<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>
|
||
</section>
|
||
|
||
<!-- Shop by collection -->
|
||
<section class="s_collections position-relative overflow-hidden">
|
||
<!-- Large outline flower backgrounds (top-left + bottom-right) -->
|
||
<div class="s_col_bg_flower s_col_bg_flower--tl" aria-hidden="true"></div>
|
||
<div class="s_col_bg_flower s_col_bg_flower--br" aria-hidden="true"></div>
|
||
|
||
<div class="container position-relative py-5" style="z-index:2;">
|
||
<!-- Section Header -->
|
||
<div class="text-center mb-4">
|
||
<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 -->
|
||
<div class="row align-items-center g-4">
|
||
|
||
<!-- Left: Floral Image + Sale Text Overlay -->
|
||
<div class="col-lg-5">
|
||
<div class="s_col_promo position-relative">
|
||
<!-- The actual floral image (pink roses + splash + envelope) -->
|
||
<img src="https://landing.engotheme.com/html/jenstore/demo/img/collection.png"
|
||
class="s_col_promo_img img-fluid w-100"
|
||
alt="Summer Sale Collection"/>
|
||
<!-- Text overlay box centered on image -->
|
||
<div class="s_col_overlay_text">
|
||
<span class="s_col_hello">HELLO SUMMER</span>
|
||
<h3 class="s_col_sale_text">Sale 10%</h3>
|
||
<a href="/shop" class="s_col_shop_btn">Shop now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Right: 2×2 Product Grid -->
|
||
<div class="col-lg-7">
|
||
<t t-set="featured_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True), ('sale_ok', '=', True), ('website_id', 'in', [False, website.id])], limit=4, order='website_sequence asc')"/>
|
||
<div class="row g-3">
|
||
<t t-foreach="featured_products" t-as="product">
|
||
<div class="col-6">
|
||
<div class="s_col_product_card">
|
||
<t t-if="product_index == 0">
|
||
<span class="s_col_badge s_col_badge--hot">HOT</span>
|
||
</t>
|
||
<t t-elif="product_index == 3">
|
||
<span class="s_col_badge s_col_badge--sale">SALE</span>
|
||
</t>
|
||
<div class="s_col_product_img position-relative overflow-hidden">
|
||
<a t-attf-href="/shop/product/#{product.website_slug}">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="s_col_product_info">
|
||
<h6 class="s_col_product_name" t-field="product.name"/>
|
||
<div class="s_col_stars">
|
||
<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>
|
||
<p class="s_col_product_price">
|
||
<span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t>
|
||
<!-- Fallback if no products -->
|
||
<t t-if="not featured_products">
|
||
<div class="col-6">
|
||
<div class="s_col_product_card">
|
||
<span class="s_col_badge s_col_badge--hot">HOT</span>
|
||
<div class="s_col_product_img position-relative overflow-hidden">
|
||
<img src="/theme_clicks2cart/static/src/img/flora_col.png" alt="Flora"/>
|
||
<div class="s_product_actions">
|
||
<a href="#" class="action-btn quick-view"
|
||
data-name="Flora Bouquet"
|
||
data-price="$120.00"
|
||
data-img="/theme_clicks2cart/static/src/img/flora_col.png"
|
||
data-desc="Elegantly arranged fresh flora bouquet for your special moments."><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>
|
||
</div>
|
||
</div>
|
||
<div class="s_col_product_info">
|
||
<h6 class="s_col_product_name">Flora Bouquet</h6>
|
||
<div class="s_col_stars">
|
||
<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>
|
||
<p class="s_col_product_price">$120.00</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="s_col_product_card">
|
||
<div class="s_col_product_img position-relative overflow-hidden">
|
||
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Wedding"/>
|
||
<div class="s_product_actions">
|
||
<a href="#" class="action-btn quick-view"
|
||
data-name="Wedding Roses"
|
||
data-price="$115.40"
|
||
data-img="/theme_clicks2cart/static/src/img/wedding_col.png"
|
||
data-desc="Timeless wedding roses that capture the essence of purity."><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>
|
||
</div>
|
||
</div>
|
||
<div class="s_col_product_info">
|
||
<h6 class="s_col_product_name">Wedding Roses</h6>
|
||
<div class="s_col_stars">
|
||
<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"/>
|
||
</div>
|
||
<p class="s_col_product_price">$115.40</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="s_col_product_card">
|
||
<div class="s_col_product_img position-relative overflow-hidden">
|
||
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" alt="Holiday"/>
|
||
<div class="s_product_actions">
|
||
<a href="#" class="action-btn quick-view"
|
||
data-name="Holiday Bloom"
|
||
data-price="$250.60"
|
||
data-img="/theme_clicks2cart/static/src/img/holiday_col.png"
|
||
data-desc="Vibrant holiday blooms to celebrate festive occasions."><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>
|
||
</div>
|
||
</div>
|
||
<div class="s_col_product_info">
|
||
<h6 class="s_col_product_name">Holiday Bloom</h6>
|
||
<div class="s_col_stars">
|
||
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-half-o"/><i class="fa fa-star-o"/>
|
||
</div>
|
||
<p class="s_col_product_price">$250.60</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="s_col_product_card">
|
||
<span class="s_col_badge s_col_badge--sale">SALE</span>
|
||
<div class="s_col_product_img position-relative overflow-hidden">
|
||
<img src="/theme_clicks2cart/static/src/img/hero_bg.png" alt="Sale"/>
|
||
<div class="s_product_actions">
|
||
<a href="#" class="action-btn quick-view"
|
||
data-name="Rose Bouquet"
|
||
data-price="$100.90"
|
||
data-img="/theme_clicks2cart/static/src/img/hero_bg.png"
|
||
data-desc="Elegantly arranged fresh rose bouquet for your loved ones."><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>
|
||
</div>
|
||
</div>
|
||
<div class="s_col_product_info">
|
||
<h6 class="s_col_product_name">Rose Bouquet</h6>
|
||
<div class="s_col_stars">
|
||
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/>
|
||
</div>
|
||
<p class="s_col_product_price">$100.90</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Wedding Category Feature Section -->
|
||
<section class="s_wedding_section" style="background: transparent; padding: 0;">
|
||
|
||
<!-- 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;">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; height: 1000px;">
|
||
<!-- Blue watercolor splash background only behind products -->
|
||
<div style="
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/wedding.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
"></div>
|
||
|
||
<div class="container position-relative" style="z-index: 2;">
|
||
<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)"/>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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 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>
|
||
|
||
<!-- 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 -->
|
||
</section>
|
||
|
||
<!-- Holiday Section -->
|
||
<section class="s_holiday_section">
|
||
<!-- Elementor-style Decorations -->
|
||
<div class="s_holiday_bg_accent" aria-hidden="true"></div>
|
||
<div class="s_holiday_bg_accent_br" aria-hidden="true"></div>
|
||
<div class="s_holiday_splash" aria-hidden="true"></div>
|
||
|
||
<div class="container">
|
||
<!-- Section Header -->
|
||
<div class="s_holiday_header">
|
||
<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">
|
||
<!-- Left: Product Grid (7 cols) -->
|
||
<div class="col-lg-7">
|
||
<div class="row s_holiday_prod_grid">
|
||
<t t-set="holiday_products" t-value="request.env['product.template'].sudo().search([('is_published', '=', True)], limit=4, offset=4, order='website_sequence asc')"/>
|
||
|
||
<t t-foreach="holiday_products" t-as="product">
|
||
<div class="col-md-6">
|
||
<div class="s_cat_card">
|
||
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||
<t t-if="product_index == 0">
|
||
<span class="s_cat_badge badge-hot">HOT</span>
|
||
</t>
|
||
<t t-elif="product_index == 3">
|
||
<span class="s_cat_badge badge-sale">SALE</span>
|
||
</t>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="s_cat_info">
|
||
<h6 class="s_cat_prod_name mb-1">
|
||
<a t-attf-href="/shop/product/#{product.website_slug or product.id}" t-field="product.name" class="text-dark text-decoration-none fw-bold"/>
|
||
</h6>
|
||
<div class="s_cat_prod_price fw-bold">
|
||
<span t-field="product.list_price" t-options='{"widget": "monetary"}'/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t>
|
||
|
||
<!-- Fallback with specific Holiday Images -->
|
||
<t t-if="not holiday_products">
|
||
<div class="col-md-6 mb-4">
|
||
<div class="s_cat_card">
|
||
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||
<span class="s_cat_badge badge-hot">HOT</span>
|
||
<img src="/theme_clicks2cart/static/src/img/holiday_prod_1.png" alt="Fun & Flirty"/>
|
||
<div class="s_product_actions">
|
||
<a href="#" class="action-btn quick-view"
|
||
data-name="Fun & Flirty By Bl.."
|
||
data-price="$200.2"
|
||
data-img="/theme_clicks2cart/static/src/img/holiday_prod_1.png"
|
||
data-desc="Fun and flirty floral arrangement by Bloom."><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>
|
||
</div>
|
||
</div>
|
||
<div class="s_cat_info">
|
||
<h6 class="s_cat_prod_name">Fun & Flirty By Bl..</h6>
|
||
<div class="s_cat_stars 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 class="s_cat_prod_price fw-bold">$200.2</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mb-4">
|
||
<div class="s_cat_card">
|
||
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||
<img src="/theme_clicks2cart/static/src/img/holiday_prod_2.png" alt="Winter White"/>
|
||
<div class="s_product_actions">
|
||
<a href="#" class="action-btn quick-view"
|
||
data-name="Winter White Bo.."
|
||
data-price="$240.2"
|
||
data-img="/theme_clicks2cart/static/src/img/holiday_prod_2.png"
|
||
data-desc="Pure and elegant winter white floral bouquet."><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>
|
||
</div>
|
||
</div>
|
||
<div class="s_cat_info">
|
||
<h6 class="s_cat_prod_name">Winter White Bo..</h6>
|
||
<div class="s_cat_stars 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"/>
|
||
</div>
|
||
<div class="s_cat_prod_price fw-bold">$240.2</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mb-4">
|
||
<div class="s_cat_card">
|
||
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||
<img src="/theme_clicks2cart/static/src/img/holiday_prod_3.png" alt="Tulipa Floriade"/>
|
||
<div class="s_product_actions">
|
||
<a href="#" class="action-btn quick-view"
|
||
data-name="Tulipa Floriade"
|
||
data-price="$190.5"
|
||
data-img="/theme_clicks2cart/static/src/img/holiday_prod_3.png"
|
||
data-desc="Vibrant Tulipa Floriade selection for holiday cheer."><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>
|
||
</div>
|
||
</div>
|
||
<div class="s_cat_info">
|
||
<h6 class="s_cat_prod_name">Tulipa Floriade..</h6>
|
||
<div class="s_cat_stars 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-half-o"/><i class="fa fa-star-o"/>
|
||
</div>
|
||
<div class="s_cat_prod_price fw-bold">$190.5</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mb-4">
|
||
<div class="s_cat_card">
|
||
<div class="s_cat_img_wrap position-relative overflow-hidden">
|
||
<span class="s_cat_badge badge-sale">SALE</span>
|
||
<img src="/theme_clicks2cart/static/src/img/holiday_prod_4.png" alt="Sweet Sorbet"/>
|
||
<div class="s_product_actions">
|
||
<a href="#" class="action-btn quick-view"
|
||
data-name="Sweet Sorbet"
|
||
data-price="$210.3"
|
||
data-img="/theme_clicks2cart/static/src/img/holiday_prod_4.png"
|
||
data-desc="Sweet sorbet colored flowers for a fresh summer look."><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>
|
||
</div>
|
||
</div>
|
||
<div class="s_cat_info">
|
||
<h6 class="s_cat_prod_name">Sweet Sorbet</h6>
|
||
<div class="s_cat_stars mb-1" style="color: #e6b3a3; font-size: 0.8rem;">
|
||
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star-half-o"/><i class="fa fa-star-o"/><i class="fa fa-star-o"/>
|
||
</div>
|
||
<div class="s_cat_prod_price fw-bold">$210.3</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Large Promo Area (5 cols) -->
|
||
<div class="col-lg-5">
|
||
<div class="s_holiday_promo_wrap">
|
||
<div class="s_holiday_promo_bg"></div>
|
||
<div class="s_holiday_promo_content">
|
||
<span class="s_holiday_hello">HELLO SUMMER</span>
|
||
<h3 class="s_holiday_promo_title">Sale 10%</h3>
|
||
<a href="/shop" class="s_holiday_shop_btn">Shop now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</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;">
|
||
<div class="s_countdown_bg" style="padding-top: 200px; padding-bottom: 200px;">
|
||
<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;">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>
|
||
<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>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Brand Logos (Auto Slider) -->
|
||
<section class="s_brand_logos bg-white overflow-hidden" style="padding-top: 60px; padding-bottom: 80px;">
|
||
<div class="container-fluid px-0">
|
||
<div class="s_brand_slider_track">
|
||
<!-- Original Logos -->
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center border rounded-circle mx-auto" style="width: 80px; height: 80px; border-color: #ddd !important;">
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #666;">holli</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||
<i class="fa fa-heart mb-1 text-muted" style="font-size: 1.2rem;"></i>
|
||
<span style="font-family: 'Outfit'; font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; color: #333; line-height: 1.2;">HANDMADE<br/>WITH LOVE</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1rem; color: #888; line-height: 1;">fashion</span>
|
||
<span style="font-family: 'Playfair Display'; font-size: 0.9rem; font-weight: 800; letter-spacing: 1px; color: #222; line-height: 1;">LIVE<br/>STYLE</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center border p-2 mx-auto" style="border-color: #ccc !important; max-width: 90px;">
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #444; line-height: 1;">jes</span>
|
||
<span style="font-family: 'Outfit'; font-size: 0.5rem; letter-spacing: 2px; color: #555; line-height: 1.2;">WEDDING<br/>agency</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.5rem; color: #666;">x-pure</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||
<i class="fa fa-asterisk text-muted mb-1" style="font-size: 0.8rem;"></i>
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 0.9rem; color: #555; line-height: 1;">art studio</span>
|
||
<span style="font-family: 'Outfit'; font-size: 0.45rem; letter-spacing: 2px; color: #777; line-height: 1.2;">BY A.LIN</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Duplicated Logos for seamless sliding -->
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center border rounded-circle mx-auto" style="width: 80px; height: 80px; border-color: #ddd !important;">
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #666;">holli</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||
<i class="fa fa-heart mb-1 text-muted" style="font-size: 1.2rem;"></i>
|
||
<span style="font-family: 'Outfit'; font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; color: #333; line-height: 1.2;">HANDMADE<br/>WITH LOVE</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1rem; color: #888; line-height: 1;">fashion</span>
|
||
<span style="font-family: 'Playfair Display'; font-size: 0.9rem; font-weight: 800; letter-spacing: 1px; color: #222; line-height: 1;">LIVE<br/>STYLE</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center border p-2 mx-auto" style="border-color: #ccc !important; max-width: 90px;">
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.2rem; color: #444; line-height: 1;">jes</span>
|
||
<span style="font-family: 'Outfit'; font-size: 0.5rem; letter-spacing: 2px; color: #555; line-height: 1.2;">WEDDING<br/>agency</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 1.5rem; color: #666;">x-pure</span>
|
||
</div>
|
||
</div>
|
||
<div class="s_brand_logo_item">
|
||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||
<i class="fa fa-asterisk text-muted mb-1" style="font-size: 0.8rem;"></i>
|
||
<span style="font-family: 'Playfair Display'; font-style: italic; font-size: 0.9rem; color: #555; line-height: 1;">art studio</span>
|
||
<span style="font-family: 'Outfit'; font-size: 0.45rem; letter-spacing: 2px; color: #777; line-height: 1.2;">BY A.LIN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Latest Blogs -->
|
||
<section class="s_blogs_section">
|
||
<div class="container">
|
||
<div class="s_blogs_header">
|
||
<h2 class="s_blogs_title">Latest Blogs</h2>
|
||
<p class="s_blogs_subtitle">- Lorem Ipsum Is simply dummy text of the printing -</p>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="s_blog_card">
|
||
<div class="s_blog_img_wrap">
|
||
<img src="/theme_clicks2cart/static/src/img/flora_col.png" alt="Blog 1"/>
|
||
</div>
|
||
<div class="s_blog_info">
|
||
<div class="s_blog_meta">
|
||
<span><i class="fa fa-calendar-o"></i> May, 12 2018</span>
|
||
<span class="meta-sep">|</span>
|
||
<span><i class="fa fa-pencil-square-o"></i> Pixel-Creative</span>
|
||
</div>
|
||
<h4 class="s_blog_name">Choose for yourself the Flobal chiffon dress</h4>
|
||
<p class="s_blog_desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="s_blog_card">
|
||
<div class="s_blog_img_wrap">
|
||
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Blog 2"/>
|
||
</div>
|
||
<div class="s_blog_info">
|
||
<div class="s_blog_meta">
|
||
<span><i class="fa fa-calendar-o"></i> May, 12 2018</span>
|
||
<span class="meta-sep">|</span>
|
||
<span><i class="fa fa-pencil-square-o"></i> Pixel-Creative</span>
|
||
</div>
|
||
<h4 class="s_blog_name">Choose for yourself the Flobal chiffon dress</h4>
|
||
<p class="s_blog_desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="s_blog_card">
|
||
<div class="s_blog_img_wrap">
|
||
<img src="/theme_clicks2cart/static/src/img/holiday_col.png" alt="Blog 3"/>
|
||
</div>
|
||
<div class="s_blog_info">
|
||
<div class="s_blog_meta">
|
||
<span><i class="fa fa-calendar-o"></i> May, 12 2018</span>
|
||
<span class="meta-sep">|</span>
|
||
<span><i class="fa fa-pencil-square-o"></i> Pixel-Creative</span>
|
||
</div>
|
||
<h4 class="s_blog_name">Choose for yourself the Flobal chiffon dress</h4>
|
||
<p class="s_blog_desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Quick View Modal -->
|
||
<div class="s_quickview_modal" id="s_quickview_modal">
|
||
<div class="s_quickview_overlay"></div>
|
||
<div class="s_quickview_container">
|
||
<button class="s_quickview_close"><i class="fa fa-times-circle-o"></i></button>
|
||
<div class="row g-0 h-100">
|
||
<!-- Left: Images -->
|
||
<div class="col-md-6 s_qv_images_col">
|
||
<div class="s_qv_top_label">QUICK VIEW</div>
|
||
<div class="s_qv_main_img">
|
||
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product" id="qv_main_image"/>
|
||
</div>
|
||
<div class="s_qv_thumbnails">
|
||
<div class="thumb active"><img src="/theme_clicks2cart/static/src/img/flora_col.png"/></div>
|
||
<div class="thumb"><img src="/theme_clicks2cart/static/src/img/wedding_col.png"/></div>
|
||
<div class="thumb"><img src="/theme_clicks2cart/static/src/img/holiday_col.png"/></div>
|
||
</div>
|
||
</div>
|
||
<!-- Right: Details -->
|
||
<div class="col-md-6 s_qv_content_col">
|
||
<div class="s_details_wrapper">
|
||
<h3 class="s_qv_prod_name">Queen Rose - Pink</h3>
|
||
<p class="s_qv_prod_desc">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
|
||
|
||
<div class="s_qv_rating">
|
||
<div class="stars">
|
||
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
|
||
</div>
|
||
<span class="rating_count">10 Rating(s) | Add Your Rating</span>
|
||
</div>
|
||
|
||
<div class="s_qv_price">
|
||
<span class="current_price">$250.9</span>
|
||
<span class="old_price">$300.02</span>
|
||
</div>
|
||
|
||
<hr class="my-4" style="opacity: 0.1;"/>
|
||
|
||
<div class="s_qv_options">
|
||
<h5 class="opt_title">Option</h5>
|
||
<div class="row mt-3">
|
||
<div class="col-6">
|
||
<label class="d-block mb-2">Size <span class="text-danger">*</span></label>
|
||
<select class="form-select custom-select">
|
||
<option>S</option>
|
||
<option>M</option>
|
||
<option>L</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-6">
|
||
<label class="d-block mb-2">Color <span class="text-danger">*</span></label>
|
||
<div class="color_circles">
|
||
<span class="circle" style="background: #e6b3a3;"></span>
|
||
<span class="circle" style="background: #f1c40f;"></span>
|
||
<span class="circle" style="background: #fff; border: 1px solid #ddd;"></span>
|
||
<span class="circle" style="background: #c0392b;"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-danger small mt-3">Required Fields *</p>
|
||
</div>
|
||
|
||
<hr class="my-4" style="opacity: 0.1;"/>
|
||
|
||
<div class="s_qv_footer d-flex align-items-center justify-content-between">
|
||
<div class="qty_wrap d-flex align-items-center gap-3">
|
||
<span class="fw-bold">Quanty:</span>
|
||
<div class="qty_controls">
|
||
<button class="qty_btn">-</button>
|
||
<input type="text" value="01" class="qty_input"/>
|
||
<button class="qty_btn">+</button>
|
||
</div>
|
||
</div>
|
||
<div class="footer_price h4 fw-bold m-0">$ 250.9</div>
|
||
</div>
|
||
|
||
<div class="s_qv_actions d-flex align-items-center gap-3 mt-4">
|
||
<button class="btn_add_cart">Add to cart</button>
|
||
<button class="btn_icon_round"><i class="fa fa-eye"></i></button>
|
||
<button class="btn_icon_round"><i class="fa fa-heart-o"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</xpath>
|
||
</field>
|
||
</record>
|
||
|
||
<!-- Blog Page Template -->
|
||
<template id="blog_page" name="Blog Page">
|
||
<t t-call="website.layout">
|
||
<div id="wrap" class="oe_structure">
|
||
<section class="s_blog_page_header py-5" style="background: #fafafa; border-bottom: 1px solid #eee;">
|
||
<div class="container text-center">
|
||
<h1 class="display-4 fw-bold mb-3" style="font-family: 'Playfair Display', serif; color: #333;">Our Blog</h1>
|
||
<nav aria-label="breadcrumb">
|
||
<ol class="breadcrumb justify-content-center mb-0" style="background: transparent;">
|
||
<li class="breadcrumb-item"><a href="/" class="text-decoration-none" style="color: #e6b3a3;">Home</a></li>
|
||
<li class="breadcrumb-item active text-muted" aria-current="page">Blog</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="s_blog_listing py-5" style="background: #fff;">
|
||
<div class="container">
|
||
<div class="row g-4">
|
||
<t t-if="not blog_posts">
|
||
<!-- Fallback Static Content -->
|
||
<t t-foreach="[1,2,3,4,5,6]" t-as="i">
|
||
<div class="col-lg-4 col-md-6">
|
||
<div class="s_blog_card mb-4" style="transition: transform 0.3s ease;">
|
||
<div class="s_blog_img_wrap overflow-hidden" style="height: 250px;">
|
||
<img t-attf-src="/theme_clicks2cart/static/src/img/blog_listing_#{i}.png"
|
||
onerror="this.src='/theme_clicks2cart/static/src/img/flora_col.png'"
|
||
class="img-fluid w-100 h-100 object-fit-cover"
|
||
alt="Blog"/>
|
||
</div>
|
||
<div class="s_blog_info p-4 border border-top-0">
|
||
<div class="s_blog_meta mb-2" style="font-size: 0.8rem; color: #888; font-family: 'Outfit';">
|
||
<span><i class="fa fa-calendar-o me-1"></i> May 12, 2024</span>
|
||
<span class="mx-2">|</span>
|
||
<span><i class="fa fa-user-o me-1"></i> Admin</span>
|
||
</div>
|
||
<h4 class="s_blog_name mb-3" style="font-family: 'Playfair Display'; font-weight: 700; color: #222; font-size: 1.25rem;">The Secret of Beautiful Roses</h4>
|
||
<p class="s_blog_desc mb-3 text-muted" style="font-size: 0.9rem; line-height: 1.6;">Discover how to keep your roses fresh for weeks with our simple yet effective care secrets.</p>
|
||
<a href="#" class="btn-link text-decoration-none fw-bold" style="color: #e6b3a3; font-size: 0.9rem; letter-spacing: 1px;">READ MORE <i class="fa fa-long-arrow-right ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
<t t-foreach="blog_posts" t-as="blog">
|
||
<div class="col-lg-4 col-md-6">
|
||
<div class="s_blog_card mb-4">
|
||
<div class="s_blog_img_wrap overflow-hidden" style="height: 250px;">
|
||
<img t-att-src="website.image_url(blog, 'image_1024')" class="img-fluid w-100 h-100 object-fit-cover" t-att-alt="blog.name"/>
|
||
</div>
|
||
<div class="s_blog_info p-4 border border-top-0">
|
||
<div class="s_blog_meta mb-2" style="font-size: 0.8rem; color: #888; font-family: 'Outfit';">
|
||
<span t-field="blog.post_date" t-options='{"widget": "date"}'/>
|
||
</div>
|
||
<h4 class="s_blog_name mb-3" style="font-family: 'Playfair Display'; font-weight: 700; color: #222; font-size: 1.25rem;" t-field="blog.name"/>
|
||
<p class="s_blog_desc mb-3 text-muted" style="font-size: 0.9rem; line-height: 1.6;" t-field="blog.subtitle"/>
|
||
<a t-attf-href="/blog/#{blog.id}" class="btn-link text-decoration-none fw-bold" style="color: #e6b3a3; font-size: 0.9rem; letter-spacing: 1px;">READ MORE <i class="fa fa-long-arrow-right ms-1"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</t>
|
||
</template>
|
||
</odoo>
|