Add scripts for downloading images and finding shapes

- Created `download_categories.py` to download specific category images from a remote server.
- Created `download_extra_categories.py` to download additional category images.
- Added `find_shapes.py` to extract and print unique shape and category image paths from a markdown file.

addons/dine360_theme_shivasakthi/static/src/js/category_slider.js

@@ -14,6 +14,7 @@ publicWidget.registry.CategoryCarousel = publicWidget.Widget.extend({
 
         this.currentIndex = 0;
         this.totalOriginal = this.$items.length;
+        this.isHovered = false;
 
         // Clone all items and append for seamless loop
         // We ensure we have enough content to scroll endlessly
@@ -23,12 +24,27 @@ publicWidget.registry.CategoryCarousel = publicWidget.Widget.extend({
         // Update items list
         this.$newItems = this.$('.category-item');
 
-        // 3 seconds interval
+        // Initial dots setup
+        this._updateDots();
+
+        // 1 second interval
         this._startAutoSlide();
 
         // Pause on hover
-        this.$el.on('mouseenter', () => this._stopAutoSlide());
-        this.$el.on('mouseleave', () => this._startAutoSlide());
+        this.$el.on('mouseenter', () => {
+            this.isHovered = true;
+            this._stopAutoSlide();
+        });
+        this.$el.on('mouseleave', () => {
+            this.isHovered = false;
+            this._startAutoSlide();
+        });
+
+        // Click on dots to slide
+        this.$el.on('click', '.dot', (e) => {
+            const index = parseInt($(e.currentTarget).data('index'));
+            this._slideToIndex(index);
+        });
 
         // Handle window resize to reset alignment
         $(window).on('resize', () => {
@@ -40,13 +56,33 @@ publicWidget.registry.CategoryCarousel = publicWidget.Widget.extend({
 
     _startAutoSlide: function () {
         if (this.interval) clearInterval(this.interval);
-        this.interval = setInterval(this._slide.bind(this), 3000); // 3 seconds
+        this.interval = setInterval(this._slide.bind(this), 1000); // 1 second
     },
 
     _stopAutoSlide: function () {
         if (this.interval) clearInterval(this.interval);
     },
 
+    _updateDots: function () {
+        const dotIndex = this.currentIndex % this.totalOriginal;
+        this.$('.dot').removeClass('active');
+        this.$(`.dot[data-index="${dotIndex}"]`).addClass('active');
+    },
+
+    _slideToIndex: function (index) {
+        this._stopAutoSlide();
+        this.currentIndex = index;
+        const itemWidth = this.$newItems.first().outerWidth(true);
+        this.$track.css({
+            'transition': 'transform 0.5s ease-in-out',
+            'transform': `translateX(-${this.currentIndex * itemWidth}px)`
+        });
+        this._updateDots();
+        if (!this.isHovered) {
+            this._startAutoSlide();
+        }
+    },
+
     _slide: function (resize = false) {
         if (resize) {
             // Just reset position on resize to avoid misalignment
@@ -71,17 +107,18 @@ publicWidget.registry.CategoryCarousel = publicWidget.Widget.extend({
         // Loop check
         // If we have moved past the original set
         if (this.currentIndex >= this.totalOriginal) {
+            this._updateDots();
             setTimeout(() => {
                 // Snap back to 0 (visually identical position)
                 // We use 0 because 0 is the start of Original Set
-                // When currentIndex == totalOriginal, we are at the start of Cloned Set
-                // Cloned Set is identical to Original Set.
                 this.$track.css({
                     'transition': 'none',
                     'transform': 'translateX(0)'
                 });
                 this.currentIndex = 0;
             }, 500); // Wait for transition to finish
+        } else {
+            this._updateDots();
         }
     }
 });

addons/dine360_theme_shivasakthi/static/src/scss/theme.scss

@@ -144,17 +144,53 @@ header {
     transition: all 0.3s ease;
 }
 
-// Category Card Hover
+// Category Slider Layouts
+.category-track-container {
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+    padding: 15px 0 25px; /* Allow vertical card translate/shadow spacing */
+    margin: 0 auto;
+}
+
+.category-track {
+    display: flex;
+    width: max-content;
+    transition: transform 0.5s ease-in-out;
+}
+
 .category-item {
+    flex: 0 0 280px;
+    width: 280px;
+    margin-right: 20px; /* Using margin instead of gap so jQuery outerWidth(true) includes the spacing */
     transition: all 0.3s ease;
     cursor: pointer;
 
-    &:hover {
-        transform: translateY(-10px);
+    a {
+        display: block;
+    }
+}
 
-        .category-img {
-            border-color: #ffb800 !important;
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+// Category Dots
+.category-dots {
+    .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #ffb800;
+        display: inline-block;
+        opacity: 0.5;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+
+        &.active {
+            width: 25px;
+            border-radius: 4px;
+            opacity: 1;
+        }
+
+        &:hover {
+            opacity: 0.8;
         }
     }
 }
@@ -2186,12 +2222,13 @@ body.o_edit_mode {
     background-position: center;
     position: relative;
     overflow: hidden;
-    min-height: 380px;
+    min-height: 600px;
     display: flex;
-    align-items: center;
+    align-items: flex-end;
+    padding-bottom: 0 !important;
 
     .row.g-0 {
-        border-radius: 12px;
+        border-radius: 12px 12px 0 0;
         overflow: hidden;
     }
 }
@@ -2228,3 +2265,256 @@ body.o_edit_mode {
         }
     }
 }
+
+/* Category Card Styling */
+.category-card {
+    background: #ffffff;
+    border: 1px solid #f0f0f0;
+    border-radius: 4px;
+    padding: 40px 30px 0; /* No bottom padding so button sits flush */
+    text-align: center;
+    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 290px;
+    cursor: pointer;
+
+    .category-plate-img {
+        width: 140px;
+        height: 140px;
+        object-fit: cover;
+        margin: 0 auto 30px;
+        border-radius: 50%;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
+        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+
+    .category-btn {
+        background-color: #ffb800;
+        color: #04121D;
+        font-family: 'Bebas Neue', sans-serif !important;
+        font-size: 19px;
+        font-weight: 400;
+        padding: 12px 0;
+        text-align: center;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        transition: all 0.3s ease;
+        margin-left: -30px; /* Offset parent padding */
+        margin-right: -30px;
+    }
+
+    &:hover {
+        transform: translateY(-8px);
+        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+        border-color: rgba(255, 184, 0, 0.25);
+
+        .category-plate-img {
+            transform: scale(1.08) rotate(8deg);
+        }
+
+        .category-btn {
+            background-color: #04121D;
+            color: #ffb800;
+        }
+    }
+}
+
+/* Unlimited Thali Section Mockup Realignment */
+.s_unlimited_thali_section {
+    position: relative;
+    overflow: hidden;
+
+    .thali-watermark {
+        position: absolute;
+        right: -20px;
+        bottom: -50px;
+        font-size: 20rem;
+        font-family: 'Bebas Neue', sans-serif !important;
+        font-weight: 900;
+        color: rgba(255, 255, 255, 0.02);
+        z-index: 1;
+        pointer-events: none;
+        line-height: 0.8;
+        user-select: none;
+    }
+
+    .thali-accent-chili-top {
+        position: absolute;
+        left: 4%;
+        top: 15%;
+        width: 45px;
+        z-index: 5;
+        pointer-events: none;
+        opacity: 0.45;
+        animation: floatChiliTop 8s ease-in-out infinite;
+    }
+
+    .thali-accent-chili-bottom {
+        position: absolute;
+        left: 6%;
+        bottom: 12%;
+        width: 45px;
+        z-index: 5;
+        pointer-events: none;
+        opacity: 0.45;
+        animation: floatChiliBottom 9s ease-in-out infinite;
+    }
+
+    .thali-accent-tomato-top {
+        position: absolute;
+        right: 12%;
+        top: 15%;
+        width: 55px;
+        z-index: 5;
+        pointer-events: none;
+        opacity: 0.4;
+        animation: floatTomatoTop 10s ease-in-out infinite;
+    }
+
+    .thali-accent-tomato-bottom {
+        position: absolute;
+        right: 4%;
+        bottom: 18%;
+        width: 55px;
+        z-index: 5;
+        pointer-events: none;
+        opacity: 0.4;
+        animation: floatTomatoBottom 8s ease-in-out infinite;
+    }
+
+    .thali-title-img {
+        max-width: 420px;
+        width: 100%;
+        height: auto;
+        filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
+    }
+
+    .thali-subtitle {
+        color: #ffb800;
+        font-family: 'Bebas Neue', sans-serif !important;
+        font-size: clamp(26px, 3.2vw, 34px);
+        letter-spacing: 2px;
+        font-weight: 700;
+        line-height: 1;
+    }
+
+    .thali-desc {
+        color: rgba(255,255,255,0.7);
+        font-family: 'Roboto', sans-serif !important;
+        font-size: 15px;
+        line-height: 1.8;
+        max-width: 520px;
+    }
+
+    .btn-thali-day {
+        background-color: #ffb800 !important;
+        color: #04121D !important;
+        font-family: 'Bebas Neue', sans-serif !important;
+        font-size: 16px;
+        font-weight: 700;
+        width: 130px;
+        text-align: center;
+        border-radius: 4px;
+        padding: 10px 0;
+        border: none;
+        letter-spacing: 1px;
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 4px 15px rgba(254, 205, 79, 0.4);
+            background-color: white !important;
+        }
+    }
+
+    .btn-thali-reserve {
+        background-color: transparent !important;
+        color: white !important;
+        border: 1px solid rgba(255, 255, 255, 0.6) !important;
+        font-family: 'Bebas Neue', sans-serif !important;
+        font-size: 15px;
+        font-weight: 400;
+        padding: 12px 35px;
+        border-radius: 0;
+        letter-spacing: 1.5px;
+        transition: all 0.3s ease;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+            background-color: #ffb800 !important;
+            border-color: #ffb800 !important;
+            color: #04121D !important;
+            transform: translateY(-3px);
+        }
+    }
+
+    .thali-image-container {
+        position: relative;
+        display: inline-block;
+    }
+
+    .thali-leaf-img {
+        filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.8));
+        transition: transform 0.5s ease;
+
+        &:hover {
+            transform: scale(1.03) rotate(1deg);
+        }
+    }
+
+    .thali-steam-effect {
+        position: absolute;
+        top: -15%;
+        left: 10%;
+        width: 80%;
+        height: 60%;
+        background: radial-gradient(ellipse at bottom, rgba(255,255,255,0.08) 0%, transparent 60%);
+        filter: blur(8px);
+        opacity: 0.6;
+        pointer-events: none;
+        animation: steamRise 6s infinite ease-in-out;
+        z-index: 3;
+    }
+}
+
+@keyframes steamRise {
+    0% {
+        transform: translateY(10px) scale(0.95);
+        opacity: 0.3;
+    }
+    50% {
+        transform: translateY(-15px) scale(1.05);
+        opacity: 0.7;
+    }
+    100% {
+        transform: translateY(-30px) scale(1.1);
+        opacity: 0;
+    }
+}
+
+@keyframes floatChiliTop {
+    0%, 100% { transform: translateY(0) rotate(15deg); }
+    50% { transform: translateY(-8px) rotate(18deg); }
+}
+
+@keyframes floatChiliBottom {
+    0%, 100% { transform: translateY(0) rotate(-35deg); }
+    50% { transform: translateY(10px) rotate(-32deg); }
+}
+
+@keyframes floatTomatoTop {
+    0%, 100% { transform: translateY(0) rotate(45deg); }
+    50% { transform: translateY(-10px) rotate(42deg); }
+}
+
+@keyframes floatTomatoBottom {
+    0%, 100% { transform: translateY(0) rotate(-15deg); }
+    50% { transform: translateY(8px) rotate(-12deg); }
+}

addons/dine360_theme_shivasakthi/views/pages.xml

@@ -173,23 +173,29 @@
     </section>
 
     <!-- Stats Section -->
-    <section class="s_stats_section o_colored_level pt128 pb128 oe_img_bg o_bg_img_center" style="background-image: url('/dine360_theme_shivasakthi/static/src/img/bg-image.jpg'); background-size: cover; background-position: center; position: relative;">
-        <div class="o_we_bg_filter bg-black-50" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.45); z-index: 1;"/>
+    <section class="s_stats_section o_colored_level pt128" style="background-image: url('/dine360_theme_shivasakthi/static/src/img/bg-image.jpg'); background-size: cover; background-position: center; position: relative; min-height: 600px; display: flex; align-items: flex-end; padding-bottom: 0;">
+        <div class="o_we_bg_filter bg-black-25" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); z-index: 1;"/>
         <div class="container position-relative" style="z-index: 2;">
-            <div class="row justify-content-end">
-                <div class="col-lg-6">
-                    <div class="row g-0 rounded overflow-hidden shadow-lg" style="border: 1px solid rgba(255, 255, 255, 0.1);">
-                        <div class="col-4 text-center py-5" style="background-color: #ffb800; color: #04121D;">
-                            <h2 class="display-4 fw-bold mb-1">6+</h2>
-                            <p class="small fw-bold text-uppercase mb-0" style="letter-spacing: 1px; font-size: 11px;">Years<br/>Experience</p>
+            <div class="row justify-content-center">
+                <div class="col-lg-8 col-md-10">
+                    <div class="row g-0 overflow-hidden shadow-lg stats-box-row" style="background: transparent;">
+                        <!-- Box 1 -->
+                        <div class="col-4 text-center py-4 px-2 d-flex flex-column align-items-center justify-content-center" style="background-color: #ffb800; color: #000; min-height: 170px;">
+                            <h2 class="fw-bold mb-1" style="font-size: clamp(32px, 4.5vw, 54px); line-height: 1; font-family: 'Bebas Neue', sans-serif !important;">20+</h2>
+                            <div class="wavy-line mb-3" style="font-size: 14px; font-weight: bold; color: #000; letter-spacing: -2px;">~~~~</div>
+                            <p class="text-uppercase fw-bold mb-0" style="font-size: clamp(10px, 1.2vw, 13px); letter-spacing: 0.5px; font-family: 'Bebas Neue', sans-serif !important;">Experience Chefs</p>
                         </div>
-                        <div class="col-4 text-center py-5" style="background-color: #0c0f12; color: white;">
-                            <h2 class="display-4 fw-bold mb-1 text-white">1K+</h2>
-                            <p class="small fw-bold text-uppercase mb-0 text-white-50" style="letter-spacing: 1px; font-size: 11px;">Happy<br/>Customer</p>
+                        <!-- Box 2 -->
+                        <div class="col-4 text-center py-4 px-2 d-flex flex-column align-items-center justify-content-center" style="background-color: #1c1c1c; color: #fff; min-height: 170px;">
+                            <h2 class="fw-bold mb-1 text-white" style="font-size: clamp(32px, 4.5vw, 54px); line-height: 1; font-family: 'Bebas Neue', sans-serif !important;">2K+</h2>
+                            <div class="wavy-line mb-3" style="font-size: 14px; font-weight: bold; color: #fff; letter-spacing: -2px;">~~~~</div>
+                            <p class="text-uppercase fw-bold mb-0 text-white" style="font-size: clamp(10px, 1.2vw, 13px); letter-spacing: 0.5px; font-family: 'Bebas Neue', sans-serif !important;">Happy Customers</p>
                         </div>
-                        <div class="col-4 text-center py-5" style="background-color: #ffb800; color: #04121D;">
-                            <h2 class="display-4 fw-bold mb-1">13+</h2>
-                            <p class="small fw-bold text-uppercase mb-0" style="letter-spacing: 1px; font-size: 11px;">Popular<br/>Dishes</p>
+                        <!-- Box 3 -->
+                        <div class="col-4 text-center py-4 px-2 d-flex flex-column align-items-center justify-content-center" style="background-color: #ffb800; color: #000; min-height: 170px;">
+                            <h2 class="fw-bold mb-1" style="font-size: clamp(32px, 4.5vw, 54px); line-height: 1; font-family: 'Bebas Neue', sans-serif !important;">40+</h2>
+                            <div class="wavy-line mb-3" style="font-size: 14px; font-weight: bold; color: #000; letter-spacing: -2px;">~~~~</div>
+                            <p class="text-uppercase fw-bold mb-0" style="font-size: clamp(10px, 1.2vw, 13px); letter-spacing: 0.5px; font-family: 'Bebas Neue', sans-serif !important;">Favorite Dishes</p>
                         </div>
                     </div>
                 </div>
@@ -197,59 +203,154 @@
         </div>
     </section>
 
-    <!-- Category Section Header -->
-    <section class="s_title o_colored_level pb24 pt64" data-vcss="001" data-snippet="s_title" data-name="Title" style="background-color: rgb(244, 241, 234); background-image: none;">
-        <div class="s_allow_columns container">
-            <h6 style="text-align: center;">
-                <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-right: 10px;" loading="lazy"/>
-                <span style="color: #ffb800; font-weight: 700; letter-spacing: 2px;">SPECIAL CATEGORY</span>
-                <img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 25px; margin-left: 10px;" loading="lazy"/>
-            </h6>
-            <h2 class="display-4 fw-bold" style="text-align: center; color: #04121D; text-transform: uppercase;">Popular Items</h2>
-        </div>
-    </section>
-
     <!-- Category Slider Section -->
-    <section class="s_category_slider o_colored_level pb64" data-snippet="s_category_slider" data-name="Category Slider" style="background-color: rgb(244, 241, 234);">
-        <t t-set="shop_categories" t-value="request.env['product.public.category'].sudo().search([('website_id', 'in', [False, website.id]), ('parent_id', '=', False)], order='sequence asc')"/>
-        <div class="container overflow-hidden">
-            <div class="row justify-content-center g-4">
-                <t t-foreach="shop_categories[:4]" t-as="categ">
-                    <div class="col-lg-3 col-md-6 col-6 category-item text-center">
-                        <a t-attf-href="/shop?category=#{categ.id}" class="d-block text-decoration-none p-3">
-                            <div class="bg-white rounded-circle p-1 shadow-sm mb-3 category-img mx-auto" style="border: 2px solid transparent; width: 180px; height: 180px; overflow: hidden; transition: all 0.3s ease;">
-                                <img t-att-src="website.image_url(categ, 'image_1920')" class="img img-fluid rounded-circle" style="width: 100%; height: 100%; object-fit: cover;" t-att-alt="categ.name" loading="lazy"/>
+    <section class="s_category_slider o_colored_level pt80 pb80" data-snippet="s_category_slider" data-name="Category Slider" style="background-color: white; position: relative; overflow: hidden;">
+        <!-- Floating Accents -->
+        <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="category-accent-tomato d-none d-lg-block" style="position: absolute; left: 5%; bottom: 15%; width: 60px; z-index: 5; pointer-events: none; filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.15)); animation: floatWobbleTomato 8s ease-in-out infinite;" alt=""/>
+        <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/shapes/hero-shape3.png" class="category-accent-cucumber d-none d-lg-block" style="position: absolute; right: 5%; top: 15%; width: 60px; z-index: 5; pointer-events: none; filter: drop-shadow(3px 3px 8px rgba(0,0,0,0.15)); animation: floatWobbleTomato 10s ease-in-out infinite reverse;" alt=""/>
+
+        <div class="container">
+            <!-- Header -->
+            <div class="row mb-5">
+                <div class="col-12 text-center">
+                    <h6 class="mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-family: 'Bebas Neue', sans-serif !important;">SOUTH INDIAN AND NORTH INDIAN</h6>
+                    <h2 class="display-4 fw-bold" style="color: #04121D; text-transform: uppercase; font-family: 'Bebas Neue', sans-serif !important; font-size: 46px; letter-spacing: 1px;">Popular Dishes</h2>
+                </div>
+            </div>
+
+            <!-- Category Track Container for Carousel -->
+            <div class="category-track-container">
+                <div class="category-track">
+                    <!-- Item 1: Hakka -->
+                    <div class="category-item">
+                        <a href="/shop?search=Hakka" class="text-decoration-none">
+                            <div class="category-card">
+                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/hakka.webp" class="category-plate-img img-fluid" alt="Hakka"/>
+                                <div class="category-btn">Hakka</div>
                             </div>
-                            <h6 class="fw-bold mb-1 text-dark" style="font-size: 18px; text-transform: uppercase;" t-field="categ.name"/>
-                            <small class="text-muted"><t t-esc="categ.product_tmpl_ids and len(categ.product_tmpl_ids) or 0"/>+ Varieties</small>
                         </a>
                     </div>
-                </t>
+                    <!-- Item 2: Veg Biryani -->
+                    <div class="category-item">
+                        <a href="/shop?search=Veg+Biryani" class="text-decoration-none">
+                            <div class="category-card">
+                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/veg-biryani.webp" class="category-plate-img img-fluid" alt="Veg Biryani"/>
+                                <div class="category-btn">Veg Biryani</div>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- Item 3: Veg Curry -->
+                    <div class="category-item">
+                        <a href="/shop?search=Veg+Curry" class="text-decoration-none">
+                            <div class="category-card">
+                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/veg-curry.webp" class="category-plate-img img-fluid" alt="Veg Curry"/>
+                                <div class="category-btn">Veg Curry</div>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- Item 4: Non-Veg Biryani -->
+                    <div class="category-item">
+                        <a href="/shop?search=Non+Veg+Biryani" class="text-decoration-none">
+                            <div class="category-card">
+                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/nonveg-biryani.webp" class="category-plate-img img-fluid" alt="Non-Veg Biryani"/>
+                                <div class="category-btn">Non - Veg Biryani</div>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- Item 5: Dosa -->
+                    <div class="category-item">
+                        <a href="/shop?search=Dosa" class="text-decoration-none">
+                            <div class="category-card">
+                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/dosa.webp" class="category-plate-img img-fluid" alt="Dosa"/>
+                                <div class="category-btn">Dosa</div>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- Item 6: Idly -->
+                    <div class="category-item">
+                        <a href="/shop?search=Idly" class="text-decoration-none">
+                            <div class="category-card">
+                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/idly.webp" class="category-plate-img img-fluid" alt="Idly"/>
+                                <div class="category-btn">Idly</div>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- Item 7: Uthappam -->
+                    <div class="category-item">
+                        <a href="/shop?search=Uthappam" class="text-decoration-none">
+                            <div class="category-card">
+                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/uthappam.webp" class="category-plate-img img-fluid" alt="Uthappam"/>
+                                <div class="category-btn">Uthappam</div>
+                            </div>
+                        </a>
+                    </div>
+                    <!-- Item 8: Beverages -->
+                    <div class="category-item">
+                        <a href="/shop?search=Beverages" class="text-decoration-none">
+                            <div class="category-card">
+                                <img src="/dine360_theme_shivasakthi/static/src/img/assets/images/home/category/beverages.webp" class="category-plate-img img-fluid" alt="Beverages"/>
+                                <div class="category-btn">Beverages</div>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Dots Slider representation -->
+            <div class="row mt-5">
+                <div class="col-12 d-flex justify-content-center gap-2 align-items-center category-dots">
+                    <span class="dot active" data-index="0"/>
+                    <span class="dot" data-index="1"/>
+                    <span class="dot" data-index="2"/>
+                    <span class="dot" data-index="3"/>
+                    <span class="dot" data-index="4"/>
+                    <span class="dot" data-index="5"/>
+                    <span class="dot" data-index="6"/>
+                    <span class="dot" data-index="7"/>
+                </div>
             </div>
         </div>
     </section>
 
     <!-- Unlimited Thali Section -->
-    <section class="s_unlimited_thali_section o_colored_level pt96 pb96" style="background-color: #080808; background-image: url('/dine360_theme_shivasakthi/static/src/img/hero-bg.jpg'); background-size: cover; background-position: center; position: relative; overflow: hidden;">
-        <div class="o_we_bg_filter bg-black-50" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.55); z-index: 1;"/>
+    <section class="s_unlimited_thali_section o_colored_level pt128 pb128" style="background-color: #080808; background-image: url('/dine360_theme_shivasakthi/static/src/img/hero-bg.jpg'); background-size: cover; background-position: center; position: relative; overflow: hidden;">
+        <div class="o_we_bg_filter bg-black-85" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 1;"/>
+        
+        <!-- Watermark -->
+        <div class="thali-watermark d-none d-lg-block">THALI</div>
+
+        <!-- Floating Accents -->
+        <!-- Left Side Chili -->
+        <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="thali-accent-chili-top d-none d-lg-block" alt="Chili Accent Top"/>
+        <img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" class="thali-accent-chili-bottom d-none d-lg-block" alt="Chili Accent Bottom"/>
+        <!-- Right Side Tomato -->
+        <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="thali-accent-tomato-top d-none d-lg-block" alt="Tomato Accent Top"/>
+        <img src="/dine360_theme_shivasakthi/static/src/img/tomato.png" class="thali-accent-tomato-bottom d-none d-lg-block" alt="Tomato Accent Bottom"/>
+
         <div class="container position-relative" style="z-index: 2;">
             <div class="row align-items-center">
                 <!-- Left Text Side -->
                 <div class="col-lg-6 text-white o_colored_level">
-                    <h6 class="mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;">SPECIAL DEAL</h6>
-                    <h1 class="display-3 fw-bold mb-2 text-white" style="line-height: 1.1; letter-spacing: 1px;">UNLIMITED THALI</h1>
-                    <h2 class="h3 fw-bold mb-4" style="color: #ffb800; text-transform: uppercase;">FOR RESERVATION</h2>
-                    <p class="lead mb-5 text-white-50" style="font-size: 16px; line-height: 1.7;">
-                        Enjoy the comfort of home-style cooking blended with restaurant excellence. At Shiva Sakthi, every weekend meal is crafted with love and served by reservation only.
+                    <img src="/dine360_theme_shivasakthi/static/src/img/unlimited-thali-text.png" class="thali-title-img img-fluid mb-4" alt="Unlimited Thali"/>
+                    <h2 class="thali-subtitle mb-4">FOR RESERVATION</h2>
+                    <p class="thali-desc mb-4">
+                        Enjoy our Unlimited Thali, available by reservation Recommended, every Saturday and Sunday from 12 PM to 4 PM.
                     </p>
-                    <div class="d-flex flex-wrap gap-3">
-                        <a href="/reservation" class="btn px-4 py-3 fw-bold text-uppercase" style="background-color: #ffb800; color: #04121D; border-radius: 4px; font-size: 13px;">BOOK NOW</a>
-                        <a href="/shop" class="btn btn-outline-light px-4 py-3 fw-bold text-uppercase" style="border-radius: 4px; font-size: 13px;">EXPLORE MENU</a>
+                    <div class="d-flex gap-3 mb-4">
+                        <a href="/reservation" class="btn btn-thali-day">SATURDAY</a>
+                        <a href="/reservation" class="btn btn-thali-day">SUNDAY</a>
+                    </div>
+                    <div>
+                        <a href="/reservation" class="btn btn-thali-reserve">RESERVATION <i class="fa fa-long-arrow-right ms-2"/></a>
                     </div>
                 </div>
                 <!-- Right Image Side -->
-                <div class="col-lg-6 text-center mt-5 mt-lg-0 o_colored_level">
-                    <img src="/dine360_theme_shivasakthi/static/src/img/unlimited-thali-right.webp" class="img img-fluid mx-auto" alt="Unlimited Thali Platter" style="max-height: 480px; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));"/>
+                <div class="col-lg-6 text-center mt-5 mt-lg-0 o_colored_level position-relative">
+                    <div class="thali-image-container">
+                        <!-- Steam overlay effect -->
+                        <div class="thali-steam-effect"/>
+                        <img src="/dine360_theme_shivasakthi/static/src/img/unlimited-thali-leaf.png" class="img img-fluid mx-auto thali-leaf-img" alt="Unlimited Thali Platter"/>
+                    </div>
                 </div>
             </div>
         </div>

scratch/download_categories.py

@@ -0,0 +1,24 @@
+import urllib.request
+import os
+
+base_url = "https://shivasakthi.ca/"
+static_dir = "/mnt/extra-addons/dine360_theme_shivasakthi/static/src/img"
+
+assets_to_download = {
+    "assets/images/shapes/hero-shape3.png": "assets/images/shapes/hero-shape3.png",
+    "assets/images/home/category/hakka.webp": "assets/images/home/category/hakka.webp",
+    "assets/images/home/category/veg-biryani.webp": "assets/images/home/category/veg-biryani.webp",
+    "assets/images/home/category/veg-curry.webp": "assets/images/home/category/veg-curry.webp",
+    "assets/images/home/category/nonveg-biryani.webp": "assets/images/home/category/nonveg-biryani.webp"
+}
+
+for remote, local in assets_to_download.items():
+    url = base_url + remote
+    local_path = os.path.join(static_dir, local)
+    os.makedirs(os.path.dirname(local_path), exist_ok=True)
+    print(f"Downloading {url} to {local_path}...")
+    try:
+        urllib.request.urlretrieve(url, local_path)
+        print("Success!")
+    except Exception as e:
+        print(f"Failed: {e}")

scratch/download_extra_categories.py

@@ -0,0 +1,23 @@
+import urllib.request
+import os
+
+base_url = "https://shivasakthi.ca/"
+static_dir = "/mnt/extra-addons/dine360_theme_shivasakthi/static/src/img"
+
+assets_to_download = {
+    "assets/images/home/category/dosa.webp": "assets/images/home/category/dosa.webp",
+    "assets/images/home/category/idly.webp": "assets/images/home/category/idly.webp",
+    "assets/images/home/category/uthappam.webp": "assets/images/home/category/uthappam.webp",
+    "assets/images/home/category/beverages.webp": "assets/images/home/category/beverages.webp"
+}
+
+for remote, local in assets_to_download.items():
+    url = base_url + remote
+    local_path = os.path.join(static_dir, local)
+    os.makedirs(os.path.dirname(local_path), exist_ok=True)
+    print(f"Downloading {url} to {local_path}...")
+    try:
+        urllib.request.urlretrieve(url, local_path)
+        print("Success!")
+    except Exception as e:
+        print(f"Failed: {e}")

scratch/find_shapes.py

@@ -0,0 +1,11 @@
+with open("/mnt/extra-addons/page_js.md", "r", encoding="utf-8") as f:
+    text = f.read()
+
+import re
+shapes = re.findall(r'assets/images/shapes/[a-zA-Z0-9_-]+\.[a-z]+', text)
+for s in set(shapes):
+    print("Shape:", s)
+
+categories = re.findall(r'assets/images/home/category/[a-zA-Z0-9_-]+\.[a-z]+', text)
+for c in set(categories):
+    print("Category Image:", c)