From dd7a1ccd8df3e22a47e2ff219b277b63bf421e43 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Wed, 11 Mar 2026 16:16:13 +0530
Subject: [PATCH] introduce Clicks2Cart theme with custom styling and page
 layouts.

---
 .../static/src/scss/theme.scss                | 60 +++++++++----
 addons/theme_clicks2cart/views/pages.xml      | 87 +++++++++++++------
 2 files changed, 103 insertions(+), 44 deletions(-)

diff --git a/addons/theme_clicks2cart/static/src/scss/theme.scss b/addons/theme_clicks2cart/static/src/scss/theme.scss
index a7422ae..6738814 100644
--- a/addons/theme_clicks2cart/static/src/scss/theme.scss
+++ b/addons/theme_clicks2cart/static/src/scss/theme.scss
@@ -351,7 +351,7 @@ header#top {
             padding: 40px 50px;
             text-align: center;
             min-width: 280px;
-            backdrop-filter: blur(5px);
+            // backdrop-filter: blur(5px);
             z-index: 5;
             // border: 1px solid rgba(0, 0, 0, 0.05);
 
@@ -767,6 +767,7 @@ header#top {
             box-shadow: none;
             background: transparent;
             text-align: center;
+            position: relative; // Added for badge positioning
 
             &:hover {
                 transform: none;
@@ -786,17 +787,18 @@ header#top {
 
             .s_cat_badge {
                 position: absolute;
-                top: 15px;
-                right: 15px;
+                top: 10px; // Snugger to the corner
+                right: 10px; // Snugger to the corner
                 background: #000;
                 color: #fff;
                 font-size: 0.65rem;
                 font-weight: 700;
-                padding: 4px 10px;
-                z-index: 12;
+                padding: 4px 12px;
+                z-index: 20; // Higher z-index to stay above everything
                 letter-spacing: 1px;
                 text-transform: uppercase;
                 border-radius: 0;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 
                 &.badge-hot {
                     background: #e74c3c;
@@ -808,14 +810,14 @@ header#top {
             }
 
             .s_cat_img_wrap {
-                background-color: #f7f7f7;
+                // background-color: #f7f7f7;
                 border-radius: 4px;
-                margin-bottom: 20px;
+                // margin-bottom: 20px;
                 aspect-ratio: 1 / 1.25;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                padding: 10px;
+                // padding: 10px;
                 position: relative;
                 overflow: hidden;
 
@@ -1172,12 +1174,36 @@ footer#bottom.o_footer {
 }
 
 .s_brand_logos {
-    img {
-        transition: transform 0.4s ease, filter 0.4s ease;
+    overflow: hidden;
+    white-space: nowrap;
+
+    .s_brand_slider_track {
+        display: flex;
+        width: max-content;
+        animation: brandMarquee 30s linear infinite;
 
         &:hover {
+            animation-play-state: paused;
+        }
+    }
+
+    .s_brand_logo_item {
+        width: 200px; // Standard spacing between logos
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 20px;
+        opacity: 0.6;
+        transition: all 0.4s ease;
+
+        &:hover {
+            opacity: 1;
             transform: scale(1.1);
-            filter: grayscale(0) !important;
+
+            span,
+            i {
+                color: #e6b3a3 !important;
+            }
         }
     }
 
@@ -1185,13 +1211,15 @@ footer#bottom.o_footer {
     i {
         transition: color 0.3s ease;
     }
+}
 
-    div.col-4:hover {
+@keyframes brandMarquee {
+    0% {
+        transform: translateX(0);
+    }
 
-        span,
-        i {
-            color: #e6b3a3 !important;
-        }
+    100% {
+        transform: translateX(-50%); // Because we duplicated the items exactly
     }
 }
 
diff --git a/addons/theme_clicks2cart/views/pages.xml b/addons/theme_clicks2cart/views/pages.xml
index ce99dd7..520db2a 100644
--- a/addons/theme_clicks2cart/views/pages.xml
+++ b/addons/theme_clicks2cart/views/pages.xml
@@ -274,10 +274,10 @@
                                     <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 start-0 m-2 badge" style="background:#e74c3c; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px;">SALE</span>
+                                            <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 start-0 m-2 badge" style="background:#e6b3a3; border-radius:0; font-size:0.65rem; padding: 4px 10px; letter-spacing:1px;">HOT</span>
+                                            <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 -->
@@ -312,7 +312,7 @@
                                     <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]"/>
+                                                <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 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;"/>
@@ -361,14 +361,13 @@
                                     <t t-foreach="holiday_products" t-as="product">
                                         <div class="col-md-6">
                                             <div class="s_cat_card">
-                                                <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>
-                                                
                                                 <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>
@@ -392,8 +391,8 @@
                                     <t t-if="not holiday_products">
                                         <div class="col-md-6 mb-4">
                                             <div class="s_cat_card">
-                                                <span class="s_cat_badge badge-hot">HOT</span>
                                                 <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 &amp; Flirty"/>
                                                     <div class="s_cat_hover_btn">
                                                         <a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
@@ -444,8 +443,8 @@
                                         </div>
                                         <div class="col-md-6 mb-4">
                                             <div class="s_cat_card">
-                                                <span class="s_cat_badge badge-sale">SALE</span>
                                                 <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_cat_hover_btn">
                                                         <a href="#" class="btn_add_cart"><i class="fa fa-shopping-cart"></i></a>
@@ -516,45 +515,77 @@
                     </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">
+                <!-- 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>
-                            <!-- Logo 2 (handmade with love) -->
-                            <div class="col-4 col-md-2 mb-4 mb-md-0">
+                            <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>
-                            <!-- Logo 3 (fashion LIVE STYLE) -->
-                            <div class="col-4 col-md-2 mb-4 mb-md-0">
+                            <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>
-                            <!-- Logo 4 (jes WEDDING agency) -->
-                            <div class="col-4 col-md-2 mb-4 mb-md-0">
+                            <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>
-                            <!-- Logo 5 (X-pure) -->
-                            <div class="col-4 col-md-2 mb-4 mb-md-0">
+                            <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>
-                            <!-- Logo 6 (art studio by A.LIN) -->
-                            <div class="col-4 col-md-2 mb-4 mb-md-0">
+                            <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>