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

Implement initial Clicks2Cart Odoo theme including custom layout, fonts, and static assets.

Browse Source
This commit is contained in:
Alaguraj0361 2026-03-10 16:25:09 +05:30
parent 7ff67cda0e
commit 4cd18000fc
5 changed files with 528 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

27
addons/theme_clicks2cart/static/src/scss/jenstore_index.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>
<p><em>Thank you for using nginx.</em></p>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"7bcff11f763943ceb4542e40bbe85bc1","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>

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

@ -423,17 +423,17 @@ header#top {
// Product Grid Cards
.s_col_product_card {
position: relative;
background: #fff;
border: 1px solid #f0f0f0;
// background: #fff;
// border: 1px solid #f0f0f0;
padding: 15px;
transition: all 0.4s ease;
text-align: center;
margin-bottom: 20px;
&:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transform: translateY(-5px);
}
// &:hover {
// box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
// transform: translateY(-5px);
// }
.s_col_badge {
position: absolute;
@ -522,7 +522,7 @@ header#top {
transform: translate(-50%, -45%);
width: 100%;
height: 600px;
background-image: url('/theme_clicks2cart/static/src/img/brush_splash.png');
background-image: url('/theme_clicks2cart/static/src/img/wedding_brush_splash.png');
background-repeat: no-repeat;
background-position: center;
background-size: 110% auto;
@ -711,7 +711,7 @@ header#top {
// Holiday Section (Exact Mockup Match)
// =========================================
.s_holiday_section {
padding: 120px 0;
// padding: 120px 0;
position: relative;
background-color: #fff;
overflow: hidden;
@ -949,6 +949,7 @@ header#top {
}
}
// Floating Petals
// Floating Petals
.s_holiday_petal_float {
position: absolute;
@ -956,4 +957,271 @@ header#top {
z-index: 2;
opacity: 0.6;
}
}
// =========================================
// Custom Footer (Jenstore Style)
// =========================================
footer#bottom.o_footer {
background-image: url('https://landing.engotheme.com/html/jenstore/demo/css/img/BG-footer.png');
background-size: 100% 100%;
background-position: top center;
background-repeat: no-repeat;
padding-top: 250px !important;
padding-bottom: 50px;
border-top: none !important;
// Pull the footer up slightly to overlap the previous section for a seamless wave effect
margin-top: -60px !important;
position: relative;
z-index: 10;
// Ensure the background color is entirely transparent
// This allows the full png shape (including side waves) to define the bounds.
background-color: transparent !important;
// Remove Odoo default borders
&.border-top {
border-top: none !important;
}
.footer-title {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 800;
color: #000;
margin-bottom: 30px;
}
.footer-links {
li {
margin-bottom: 15px;
a {
color: #888 !important;
text-decoration: none !important;
font-size: 0.95rem;
font-family: 'Outfit', sans-serif;
font-weight: 400;
transition: all 0.3s ease;
&:hover {
color: #e6b3a3 !important;
padding-left: 5px;
}
}
}
}
.footer-newsletter-card {
background: #fff;
padding: 50px 40px;
position: relative;
overflow: hidden;
// box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
min-height: 350px;
.newsletter-image {
position: absolute;
right: 20px;
bottom: 0;
max-height: 250px;
pointer-events: none;
z-index: 1;
}
.newsletter-content {
position: relative;
z-index: 5;
max-width: 70%;
}
h2 {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 10px;
color: #000;
}
p {
color: #888;
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 30px;
}
.newsletter-form {
max-width: 320px;
.input-group {
border: 1px solid #1a1a1a;
border-radius: 0;
input {
background: transparent;
border: none;
box-shadow: none;
padding: 12px 15px;
font-size: 0.95rem;
&::placeholder {
color: #888;
font-family: inherit;
}
}
}
.btn-subscribe {
background: #000;
color: #fff;
border: none;
border-radius: 0;
padding: 12px 40px;
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 1px;
margin-top: 15px;
display: inline-block;
transition: all 0.3s ease;
&:hover {
background: #e6b3a3;
color: #fff;
transform: translateY(-2px);
}
}
}
}
.footer-bottom {
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
color: #888;
font-family: 'Outfit', sans-serif;
font-size: 0.85rem;
.footer-logo {
h5 {
font-family: 'Playfair Display', serif;
font-weight: 700;
color: #000;
margin-bottom: 0;
}
span {
font-family: 'Outfit', sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.6rem;
display: block;
}
}
a {
color: #777 !important;
text-decoration: none !important;
&:hover {
color: #000 !important;
}
}
}
// Social icons
.social-links {
a {
color: #000 !important;
font-size: 1rem;
transition: color 0.3s ease;
&:hover {
color: #e6b3a3 !important;
}
}
}
}
// =========================================
// Countdown & Brands Section
// =========================================
.s_sale_countdown {
.s_countdown_bg {
// Use the watercolor splash PNG as background - it is already transparent on edges
background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/counter.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
overflow: hidden;
position: relative;
.btn-dark {
transition: all 0.3s ease;
&:hover {
background-color: #e6b3a3 !important;
border-color: #e6b3a3 !important;
transform: translateY(-2px);
}
}
}
}
.s_brand_logos {
img {
transition: transform 0.4s ease, filter 0.4s ease;
&:hover {
transform: scale(1.1);
filter: grayscale(0) !important;
}
}
span,
i {
transition: color 0.3s ease;
}
div.col-4:hover {
span,
i {
color: #e6b3a3 !important;
}
}
}
// =========================================
// Wedding Section (Jenstore style)
// =========================================
.s_wedding_section {
overflow: hidden;
.s_wedding_card {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
&:hover {
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
}
// Floating bottom-right flower decoration
.s_cat_floating_flower {
position: absolute;
bottom: -60px;
right: -30px;
width: 280px;
height: 280px;
background-image: url('https://landing.engotheme.com/html/jenstore/demo/img/decor-flower.png');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
pointer-events: none;
z-index: 3;
}
}

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

@ -82,49 +82,94 @@
<field name="website_id" eval="6"/>
<field name="arch" type="xml">
<xpath expr="//footer" position="replace">
<footer id="bottom" data-anchor="true" data-name="Footer" class="o_footer o_colored_level o_cc mt-5 border-top">
<footer id="bottom" data-anchor="true" data-name="Footer" class="o_footer o_colored_level o_cc">
<div id="footer" class="oe_structure oe_structure_solo">
<div class="container">
<div class="row text-center text-md-start">
<div class="col-md-3 mb-4">
<h5 style="color: #e6b3a3; font-family: 'Playfair Display'; font-size: 1.5rem;">Clicks2Cart.ca</h5>
<p class="text-muted small">Bringing blooms to your doorstep with love and care. Every arrangement is a story told in petals.</p>
<div class="d-flex gap-3 mt-3">
<a href="#" class="btn btn-outline-secondary btn-sm rounded-circle"><i class="fa fa-instagram"></i></a>
<a href="#" class="btn btn-outline-secondary btn-sm rounded-circle"><i class="fa fa-facebook"></i></a>
<a href="#" class="btn btn-outline-secondary btn-sm rounded-circle"><i class="fa fa-pinterest"></i></a>
<section class="s_footer_custom">
<div class="container">
<div class="row align-items-start">
<!-- Navigation Links -->
<div class="col-lg-7">
<div class="row">
<div class="col-md-4 mb-4">
<h5 class="footer-title fw-bold">About</h5>
<ul class="list-unstyled footer-links">
<li><a href="#">News &amp; Stories</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Our Studio</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Stockists</a></li>
</ul>
</div>
<div class="col-md-4 mb-4">
<h5 class="footer-title fw-bold">Customer services</h5>
<ul class="list-unstyled footer-links">
<li><a href="/contactus">Contact Us</a></li>
<li><a href="#">Trade Services</a></li>
<li><a href="#">Login/Register</a></li>
<li><a href="#">Delivery &amp; Returns</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
<div class="col-md-4 mb-4">
<h5 class="footer-title fw-bold">Store</h5>
<ul class="list-unstyled footer-links">
<li><a href="/shop">Shop</a></li>
<li><a href="#">Wedding</a></li>
<li><a href="#">Holiday</a></li>
</ul>
</div>
</div>
<!-- Social Links -->
<div class="d-flex align-items-center gap-3 mt-4 social-links" style="font-family: 'Outfit', sans-serif;">
<span class="text-uppercase fw-bold" style="letter-spacing: 1px; color: #000; font-size: 0.8rem;">CONNECT WITH US:</span>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</div>
</div>
<!-- Newsletter Card -->
<div class="col-lg-5 mb-4">
<div class="footer-newsletter-card">
<div class="newsletter-content">
<h2>Newsletter</h2>
<p>Sign up for our mailing list to get lastest updates and offers</p>
<div class="newsletter-form mt-2">
<div class="input-group">
<input type="email" class="form-control" placeholder="Your mail here" aria-label="Email"/>
</div>
<button class="btn btn-subscribe mt-3">Subscribe</button>
</div>
</div>
<!-- Image Decoration -->
<img src="https://landing.engotheme.com/html/jenstore/demo/img/newsletter_img.png" class="newsletter-image d-none d-md-block" alt="Flowers"/>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<h5>About</h5>
<ul class="list-unstyled">
<li><a href="/aboutus">Our Story</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="col-md-3 mb-4">
<h5>Customer Service</h5>
<ul class="list-unstyled">
<li><a href="#">Shipping</a></li>
<li><a href="#">Returns</a></li>
<li><a href="/contactus">Contact Us</a></li>
</ul>
</div>
<div class="col-md-3 mb-4 text-center">
<h5>Newsletter</h5>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email address"/>
<button class="btn btn-dark" type="button">Join</button>
<!-- Footer Bottom -->
<div class="footer-bottom">
<div class="row align-items-center">
<div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
<div class="footer-logo">
<h5 class="mb-0 fw-bold text-uppercase">Jenstore</h5>
<span class="text-uppercase">Flowers</span>
</div>
</div>
<div class="col-md-4 text-center mb-3 mb-md-0">
<p class="mb-0">Copyright © 2018 by EngoTheme</p>
</div>
<div class="col-md-4 text-center text-md-end">
<p class="mb-0">E: <a href="mailto:Jenstore@gmail.com">Jenstore@gmail.com</a></p>
</div>
</div>
</div>
</div>
<div class="text-center py-4 text-muted small border-top mt-4">
© 2024 Clicks2Cart.ca. All rights reserved.
</div>
</div>
</section>
</div>
</footer>
</xpath>
</field>
</record>

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

@ -242,50 +242,64 @@
</section>
<!-- Wedding Category Feature Section -->
<section class="s_category_feature pb-0">
<!-- Brush Splash Background -->
<div class="s_cat_background" aria-hidden="true"></div>
<section class="s_wedding_section" style="background: transparent; padding: 0;">
<div class="container pb-5">
<!-- Section Header -->
<div class="s_cat_header">
<h2 class="s_cat_title">Wedding</h2>
<p class="s_cat_divider">&#126; All Category of Clickstocart &#126;</p>
</div>
<!-- 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 s_cat_grid">
<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 mb-4">
<div class="s_cat_card text-center">
<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="s_cat_badge badge-hot">HOT</span>
<span class="position-absolute top-0 start-0 m-2 badge" style="background:#e74c3c; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px;">SALE</span>
</t>
<t t-elif="product_index == 2">
<span class="s_cat_badge badge-sale">SALE</span>
<span class="position-absolute top-0 start-0 m-2 badge" style="background:#e6b3a3; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px;">HOT</span>
</t>
<div class="s_cat_img_wrap position-relative overflow-hidden">
<!-- Product Image -->
<div style="background: #f8f8f8; height: 230px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<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"/>
<img t-att-src="website.image_url(product, 'image_512')" t-att-alt="product.name" loading="lazy" style="max-height: 210px; object-fit: contain; mix-blend-mode: multiply;"/>
</a>
<!-- Hover Cart Icon -->
<div class="s_cat_hover_btn">
<a t-attf-href="/shop/cart/update_short?product_id=#{product.product_variant_id.id}" class="btn_add_cart" title="Add to Cart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
</div>
<!-- Product info below image -->
<div class="s_cat_info mt-3">
<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" style="color: #e6b3a3;">
<!-- 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>
@ -294,31 +308,36 @@
<!-- Fallback placeholders -->
<t t-if="not wedding_products">
<t t-foreach="[1,2,3,4]" t-as="item">
<div class="col-lg-3 col-md-6 mb-4">
<div class="s_cat_card text-center">
<t t-if="item == 1"><span class="s_cat_badge badge-hot">HOT</span></t>
<t t-if="item == 3"><span class="s_cat_badge badge-sale">SALE</span></t>
<div class="s_cat_img_wrap position-relative overflow-hidden">
<img t-attf-src="/theme_clicks2cart/static/src/img/wedding_col#{'_v2' if item == 4 else ''}.png" alt="Fallback Product"/>
<div class="s_cat_hover_btn">
<a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
</div>
<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 start-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;" t-esc="item[4]"/>
</t>
<div style="background: #f8f8f8; height: 230px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<img src="/theme_clicks2cart/static/src/img/wedding_col.png" alt="Product" style="max-height: 210px; object-fit: contain; mix-blend-mode: multiply;"/>
</div>
<div class="s_cat_info mt-3">
<h6 class="s_cat_prod_name mb-1">Wedding Flowers</h6>
<div class="s_cat_prod_price fw-bold" style="color: #e6b3a3;">$120.00</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>
</div>
<!-- Floating floral accents at bottom right -->
<div class="s_cat_floating_flower" aria-hidden="true"></div>
</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 -->
@ -462,25 +481,84 @@
</div>
</section>
<!-- Sale Banner -->
<section class="py-5">
<div class="container">
<div class="s_sale_banner p-5 shadow-sm border-0 overflow-hidden" style="background: linear-gradient(135deg, #fdf5e6 0%, #fff 100%); border-radius: 40px;">
<div class="row align-items-center">
<div class="col-lg-6 text-center text-lg-start px-lg-5">
<p class="text-uppercase fw-bold m-0" style="color: #e6b3a3; letter-spacing: 3px;">Limited Offer</p>
<h2 class="display-3 fw-bold my-3" style="font-family: 'Playfair Display';">Sale up to 40%</h2>
<p class="lead text-muted mb-4">Don't miss out on our seasonal favorites at unbelievable prices. Only this week!</p>
<div class="d-flex justify-content-center justify-content-lg-start gap-4 mb-4">
<div class="text-center"><h3 class="fw-bold m-0">12</h3><p class="small text-muted">Days</p></div>
<div class="text-center"><h3 class="fw-bold m-0">20</h3><p class="small text-muted">Hrs</p></div>
<div class="text-center"><h3 class="fw-bold m-0">33</h3><p class="small text-muted">Mins</p></div>
<div class="text-center"><h3 class="fw-bold m-0">27</h3><p class="small text-muted">Secs</p></div>
<!-- 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 btn-lg rounded-pill px-5">Shop Sale</a>
<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 class="col-lg-6 mt-4 mt-lg-0">
<img src="/theme_clicks2cart/static/src/img/hero_bg.png" class="img-fluid rounded-4 shadow-lg" alt="Sales Bloom"/>
</div>
</div>
</div>
</section>
<!-- Brand Logos -->
<section class="s_brand_logos bg-white" style="padding-top: 60px; padding-bottom: 80px;">
<div class="container">
<div class="row align-items-center justify-content-center text-center opacity-75">
<!-- Logo 1 (holli) -->
<div class="col-4 col-md-2 mb-4 mb-md-0">
<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>
<!-- Logo 2 (handmade with love) -->
<div class="col-4 col-md-2 mb-4 mb-md-0">
<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>
<!-- Logo 3 (fashion LIVE STYLE) -->
<div class="col-4 col-md-2 mb-4 mb-md-0">
<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>
<!-- Logo 4 (jes WEDDING agency) -->
<div class="col-4 col-md-2 mb-4 mb-md-0">
<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>
<!-- Logo 5 (X-pure) -->
<div class="col-4 col-md-2 mb-4 mb-md-0">
<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>
<!-- Logo 6 (art studio by A.LIN) -->
<div class="col-4 col-md-2 mb-4 mb-md-0">
<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>