843 lines
66 KiB
XML
843 lines
66 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>
|
||
</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">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>
|
||
<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>
|
||
</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">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>
|
||
<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>
|
||
</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">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>
|
||
<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>
|
||
</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">who we are ?</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.
|
||
</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">Shop by collection</h2>
|
||
<p class="s_col_subheading">— All Category of Clicks2Cart —</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;">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>
|
||
</div>
|
||
|
||
<!-- Background + Products area (watercolor starts here) -->
|
||
<div class="position-relative overflow-hidden" style="padding-top: 150px; padding-bottom: 500px;">
|
||
<!-- 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;">
|
||
<!-- 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')"/>
|
||
|
||
<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>
|
||
</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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</t>
|
||
</t>
|
||
</div> <!-- /row -->
|
||
</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">
|
||
<!-- Top accent floral -->
|
||
<div class="s_holiday_bg_accent" aria-hidden="true"></div>
|
||
|
||
<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>
|
||
</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>
|
||
|
||
<!-- 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;">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
|
||
</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>
|
||
</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>
|
||
</odoo>
|