From de84edb9c2192506b78103fea84b57e0c66e79f4 Mon Sep 17 00:00:00 2001
From: Alaguraj0361 <alaguraj0361@gmail.com>
Date: Mon, 2 Feb 2026 22:55:24 +0530
Subject: [PATCH] Footer ui updated

---
 .../static/src/scss/theme.scss                | 178 +++++++++++++++++-
 .../dine360_theme_chennora/views/layout.xml   | 151 ++++++++-------
 2 files changed, 257 insertions(+), 72 deletions(-)

diff --git a/addons/dine360_theme_chennora/static/src/scss/theme.scss b/addons/dine360_theme_chennora/static/src/scss/theme.scss
index ecfac8a..48ad0de 100644
--- a/addons/dine360_theme_chennora/static/src/scss/theme.scss
+++ b/addons/dine360_theme_chennora/static/src/scss/theme.scss
@@ -814,11 +814,185 @@
 }
 
 // Footer
+// Footer Refinement
 footer#bottom {
     background-color: #04121D !important;
     color: white;
+    position: relative;
+    padding-top: 120px; // Space for the floating bar
+    overflow: visible;
 
-    a:hover {
-        color: #FECD4F !important;
+    // Floating Teal Bar
+    .footer-cta-bar-wrapper {
+        position: absolute;
+        top: -60px;
+        left: 0;
+        right: 0;
+        z-index: 20;
+
+        .footer-cta-bar {
+            background-color: #2BB1A5;
+            border-radius: 20px;
+            padding: 30px 50px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .cta-item {
+                display: flex;
+                align-items: center;
+                gap: 20px;
+                color: white;
+
+                .icon-circle {
+                    width: 50px;
+                    height: 50px;
+                    background: white;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #2BB1A5;
+                    font-size: 20px;
+                }
+
+                strong {
+                    display: block;
+                    font-size: 14px;
+                    opacity: 0.8;
+                }
+
+                p {
+                    margin: 0;
+                    font-weight: 700;
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+
+    .footer-title {
+        font-size: 24px;
+        font-weight: 800;
+        margin-bottom: 30px;
+        position: relative;
+        padding-bottom: 10px;
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 50px;
+            height: 3px;
+            background: #2BB1A5;
+        }
+    }
+
+    .footer-logo {
+        max-width: 180px;
+    }
+
+    .social-links {
+        display: flex;
+        gap: 10px;
+
+        a {
+            width: 35px;
+            height: 35px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            transition: all 0.3s;
+
+            &:hover {
+                background: #FECD4F;
+                border-color: #FECD4F;
+                color: #04121D;
+            }
+        }
+    }
+
+    .footer-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+            margin-bottom: 15px;
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+
+            i {
+                color: #2BB1A5;
+                font-size: 12px;
+                margin-top: 5px;
+            }
+
+            a {
+                color: white;
+                text-decoration: none;
+                transition: color 0.3s;
+
+                &:hover {
+                    color: #FECD4F;
+                }
+            }
+        }
+    }
+
+    .footer-accent-left {
+        position: absolute;
+        left: -50px;
+        bottom: 100px;
+        width: 200px;
+        opacity: 0.8;
+        pointer-events: none;
+    }
+
+    .footer-accent-right {
+        position: absolute;
+        right: -50px;
+        top: 0;
+        width: 250px;
+        opacity: 0.8;
+        pointer-events: none;
+        border-radius: 50%;
+    }
+
+    .footer-copyright-bar {
+        background-color: #FECD4F;
+        color: #04121D;
+        text-align: center;
+        padding: 15px;
+        font-weight: 700;
+        margin-top: 80px;
+    }
+}
+
+// Mobile Responsive Footer
+@media (max-width: 991px) {
+    footer#bottom {
+        padding-top: 200px;
+
+        .footer-cta-bar-wrapper {
+            top: -150px;
+
+            .footer-cta-bar {
+                flex-direction: column;
+                gap: 20px;
+                padding: 30px;
+            }
+        }
+
+        .footer-accent-left,
+        .footer-accent-right {
+            display: none;
+        }
     }
 }
\ No newline at end of file
diff --git a/addons/dine360_theme_chennora/views/layout.xml b/addons/dine360_theme_chennora/views/layout.xml
index 7afbcf8..2a20511 100644
--- a/addons/dine360_theme_chennora/views/layout.xml
+++ b/addons/dine360_theme_chennora/views/layout.xml
@@ -17,19 +17,6 @@
         </xpath>
 
         <xpath expr="//head" position="attributes">
-            <!--
-            Cache the <head> of the website.layout:
-            - For each individual website.page record (their css/js might be the
-              same but their title will not for example). Arguably we could do this
-              for any record (not only website.page) but this t-cache was originally
-              added to replace the website.page own cache system. For other records,
-              it could probably depend on each individual access right.
-            - Only for non-designers (especially visitors) (hence the "editable or
-              translatable" check).
-            - Only if not in any debug mode (we want any correct value of debug mode
-              to correctly appear in the `odoo` object + assets may depend on this
-              (e.g. debug=assets or debug=tests)).
-            -->
             <attribute name="t-cache">main_object if main_object and main_object._name == 'website.page' and not request.session.debug and not editable and not translatable else None</attribute>
         </xpath>
         <xpath expr="//head/*[1]" position="before">
@@ -60,39 +47,33 @@
             <meta t-if="meta_keywords or editable" name="keywords" t-att-content="meta_keywords"/>
             <t t-if="seo_object">
             <meta name="default_description" t-att-content="website_meta_description or website_meta.get('meta_description')" groups="website.group_website_designer"/>
-                <!-- OpenGraph tags for Facebook sharing -->
                 <t t-set="opengraph_meta" t-value="website_meta.get('opengraph_meta')"/>
                 <t t-if="opengraph_meta">
                     <t t-foreach="opengraph_meta" t-as="property">
                         <t t-if="isinstance(opengraph_meta[property], list)">
                             <t t-foreach="opengraph_meta[property]" t-as="meta_content">
-            <meta t-att-property="property" t-att-content="meta_content"/>
+                                <meta t-att-property="property" t-att-content="meta_content"/>
                             </t>
                         </t>
                         <t t-else="">
-            <meta t-att-property="property" t-att-content="opengraph_meta[property]"/>
+                            <meta t-att-property="property" t-att-content="opengraph_meta[property]"/>
                         </t>
                     </t>
                 </t>
-                <!-- Twitter tags for sharing -->
                 <t t-set="twitter_meta" t-value="website_meta.get('twitter_meta')"/>
                 <t t-if="opengraph_meta">
                     <t t-foreach="twitter_meta" t-as="t_meta">
-            <meta t-att-name="t_meta" t-att-content="twitter_meta[t_meta]"/>
+                        <meta t-att-name="t_meta" t-att-content="twitter_meta[t_meta]"/>
                     </t>
                 </t>
             </t>
-            <!-- `alternate`/`canonical` mainly useful to crawlers/bots/SEO tools, which test the website as public user -->
             <t t-if="request and request.is_frontend_multilang and website and website.is_public_user()">
                 <t t-set="alternate_languages" t-value="website._get_alternate_languages(canonical_params=canonical_params)"/>
                 <t t-foreach="alternate_languages" t-as="lg">
-            <link rel="alternate" t-att-hreflang="lg['hreflang']" t-att-href="lg['href']"/>
+                    <link rel="alternate" t-att-hreflang="lg['hreflang']" t-att-href="lg['href']"/>
                 </t>
             </t>
             <link t-if="request and website and website.is_public_user()" rel="canonical" t-att-href="website._get_canonical_url(canonical_params=canonical_params)"/>
-            <!-- TODO: Once we have style in DB, add this preconnect only if a
-            google font is actually used. Note that if no font is used, the
-            preconnect is actually not connecting to the google servers. -->
             <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""/>
         </xpath>
 
@@ -102,9 +83,6 @@
         </xpath>
 
         <xpath expr="//header/t[@t-cache]" position="attributes">
-            <!-- website.is_public_user() is needed for menus having a page with
-            restricted visibility (only shown to logged in user): public users and
-            logged in users can't share the menu cache. -->
             <attribute name="t-cache">None if website.is_menu_cache_disabled() else (xmlid,website,website.is_public_user())</attribute>
         </xpath>
 
@@ -114,23 +92,79 @@
             <t t-set="extra_items_toggle_aria_label">Extra items button</t>
         </xpath>
 
-        <xpath expr="//footer" position="attributes">
-            <attribute name="data-name">Footer</attribute>
-            <!-- Background now controlled by css configuration, using color combinations -->
-            <attribute name="t-attf-class" add="o_colored_level o_cc" remove="bg-light" separator=" "/>
-            <!-- Add the main object as a cache key so that the footer_visible page
-            option is properly reflected across pages. Controllers and other objects
-            do not have any page option (yet) so they can share the same cache -->
-            <attribute name="t-cache" add="website,main_object._name == 'website.page' and main_object"/>
-        </xpath>
-        <xpath expr="//div[hasclass('o_footer_copyright')]" position="attributes">
-            <attribute name="data-name">Copyright</attribute>
-            <!-- Background now controlled by css configuration, using color combinations -->
-            <attribute name="class" add="o_colored_level o_cc" separator=" "/>
-        </xpath>
-        <xpath expr="//t[@t-call='web.brand_promotion']/.." position="attributes">
-            <attribute name="class" add="o_not_editable" separator=" "/>
-            <attribute name="t-if">not editable</attribute>
+        <xpath expr="//footer[@id='bottom']" position="replace">
+            <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">
+                    <section class="s_footer_premium pt80">
+                        <div class="container footer-cta-bar-wrapper">
+                            <div class="footer-cta-bar">
+                                <div class="cta-item">
+                                    <div class="icon-circle"><i class="fa fa-map-marker"></i></div>
+                                    <div>
+                                        <strong>Address</strong>
+                                        <p>Unit 66, 11665 McVean Dr, Brampton, Canada.</p>
+                                    </div>
+                                </div>
+                                <div class="cta-item">
+                                    <div class="icon-circle"><i class="fa fa-envelope"></i></div>
+                                    <div>
+                                        <strong>Send Email</strong>
+                                        <p>chennorakitchen@gmail.com</p>
+                                    </div>
+                                </div>
+                                <div class="cta-item">
+                                    <div class="icon-circle"><i class="fa fa-phone"></i></div>
+                                    <div>
+                                        <strong>Call Us</strong>
+                                        <p>+1(647)856-2878</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="container main-footer-content mt-5">
+                            <div class="row">
+                                <div class="col-lg-3 col-md-6 mb-5">
+                                    <h2 class="fw-bold mb-4" style="color: #FECD4F;">Chennora</h2>
+                                    <p class="text-white-50 mb-4">Chennora brings Chennai's authentic flavors to Brampton where every dish tells a story of South Indian heritage.</p>
+                                    <div class="social-links">
+                                        <a href="#"><i class="fa fa-facebook"></i></a>
+                                        <a href="#"><i class="fa fa-instagram"></i></a>
+                                        <a href="#"><i class="fa fa-tiktok"></i></a>
+                                        <a href="#"><i class="fa fa-youtube"></i></a>
+                                        <a href="#"><i class="fa fa-twitter"></i></a>
+                                    </div>
+                                </div>
+                                <div class="col-lg-3 col-md-6 mb-5">
+                                    <h4 class="footer-title">Hours</h4>
+                                    <ul class="footer-list">
+                                        <li><span>Sunday - Thursday: <span style="color: #2BB1A5;">12pm - 9pm</span></span></li>
+                                        <li><span>Friday &amp; Saturday: <span style="color: #2BB1A5;">12pm - 11pm</span></span></li>
+                                    </ul>
+                                </div>
+                                <div class="col-lg-3 col-md-6 mb-5">
+                                    <h4 class="footer-title">Quick Links</h4>
+                                    <ul class="footer-list">
+                                        <li><i class="fa fa-chevron-right"></i><a href="/about">About Us</a></li>
+                                        <li><i class="fa fa-chevron-right"></i><a href="/blog">Our Blogs</a></li>
+                                        <li><i class="fa fa-chevron-right"></i><a href="/contactus">Contact Us</a></li>
+                                    </ul>
+                                </div>
+                                <div class="col-lg-3 col-md-6 mb-5">
+                                    <h4 class="footer-title">Contact</h4>
+                                    <div class="mb-3 d-flex align-items-center"><i class="fa fa-phone me-3" style="color: #2BB1A5;"></i><span>+1(647)856-2878</span></div>
+                                    <h5 class="fw-bold mt-4 mb-2">Address</h5>
+                                    <div class="d-flex align-items-start"><i class="fa fa-map-marker me-3 mt-1" style="color: #2BB1A5;"></i><span>Chennora Indian Kitchen Bar, Unit 66, 11665 McVean Dr, Brampton</span></div>
+                                </div>
+                            </div>
+                        </div>
+                        <img src="/dine360_theme_chennora/static/src/img/about-leaves.png" class="footer-accent-left d-none d-lg-block" alt=""/>
+                        <img src="/dine360_theme_chennora/static/src/img/gallery-2.png" class="footer-accent-right d-none d-lg-block" alt=""/>
+                        <div class="footer-copyright-bar">
+                            Copyright 2026 @ Chennora. Powered by MetatronCube. All Right Reserved.
+                        </div>
+                    </section>
+                </div>
+            </footer>
         </xpath>
 
         <xpath expr="//div[@id='wrapwrap']" position="after">
@@ -146,7 +180,7 @@
                         'analytics_storage': 'denied',
                     });
                     gtag('js', new Date());
-                    gtag('config', '&lt;t t-esc="website.google_analytics_key"/&gt;');
+                    gtag('config', '<t t-esc="website.google_analytics_key"/>');
                     function allConsentsGranted() {
                         gtag('consent', 'update', {
                             'ad_storage': 'granted',
@@ -172,12 +206,9 @@
             </t>
         </xpath>
 
-        <!-- Page options -->
         <xpath expr="//div[@id='wrapwrap']" position="before">
             <t groups="website.group_website_restricted_editor">
                 <t t-foreach="['header_overlay', 'header_color', 'header_text_color', 'header_visible', 'footer_visible']" t-as="optionName">
-                    <!-- Firefox autocomplete is too aggressive and works on hidden inputs,
-                    so we need to disable it (https://bugzilla.mozilla.org/show_bug.cgi?id=520561) -->
                     <input t-if="main_object and optionName in main_object" type="hidden" class="o_page_option_data" autocomplete="off" t-att-name="optionName" t-att-value="main_object[optionName]"/>
                 </t>
             </t>
@@ -191,39 +222,19 @@
             <t t-set="header_text_color_is_class" t-value="'text-' in header_text_color"/>
             <t t-set="header_text_color_class" t-value="header_text_color_is_class and header_text_color or ''"/>
             <t t-set="header_text_color_style" t-value="(not header_text_color_is_class) and header_text_color or ''"/>
-
-            <div groups="base.group_user" class="o_frontend_to_backend_nav position-fixed d-none">
-                <svg xmlns="http://www.w3.org/2000/svg" class="o_frontend_to_backend_icon position-absolute" width="24px" height="24px" viewBox="-7 -7 24 24" preserveAspectRatio="xMinYMin">
-                    <path fill="#FFF" d="M8 8V1a1 1 0 1 1 2 0v8a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h7z"/>
-                </svg>
-                <div class="o_frontend_to_backend_buttons d-flex">
-                    <a href="#" title="Go to your Odoo Apps" class="o_frontend_to_backend_apps_btn fa fa-th d-flex align-items-center justify-content-center text-decoration-none" data-bs-toggle="dropdown"/>
-                    <div class="dropdown-menu o_frontend_to_backend_apps_menu" role="menu">
-                        <a role="menuitem" class="dropdown-item" t-esc="menu['name']" t-as="menu" t-foreach="env['ir.ui.menu'].with_context(force_action=True).load_menus_root()['children']" t-attf-href="/web#menu_id=#{menu['id']}&amp;action=#{menu['action'] and menu['action'].split(',')[1] or ''}"/>
-                    </div>
-                    <a groups="website.group_website_restricted_editor" href="#" title="Edit this content" class="o_frontend_to_backend_edit_btn px-3 d-flex align-items-center justify-content-center text-decoration-none">
-                        <img src="/website/static/description/icon.png" alt=""/>Editor
-                    </a>
-                </div>
-            </div>
         </xpath>
+
         <xpath expr="//div[@id='wrapwrap']" position="attributes">
             <attribute name="t-attf-class" add="#{'o_header_overlay' if main_object and 'header_overlay' in main_object and main_object.header_overlay else ''}" separator=" "/>
         </xpath>
         <xpath expr="//header" position="attributes">
-            <attribute name="t-attf-class" add="#{header_bg_color_class}" separator=" "/>
-            <attribute name="t-attf-style" add="#{header_bg_color_style and ('background-color: %s;' % header_bg_color_style)}" separator=" "/>
-            <attribute name="t-attf-class" add="#{header_text_color_class}" separator=" "/>
-            <attribute name="t-attf-style" add="#{header_text_color_style and ('color: %s;' % header_text_color_style)}" separator=" "/>
+            <attribute name="t-attf-class" add="#{header_bg_color_class} #{header_text_color_class}" separator=" "/>
+            <attribute name="t-attf-style" add="#{header_bg_color_style and ('background-color: %s;' % header_bg_color_style)} #{header_text_color_style and ('color: %s;' % header_text_color_style)}" separator=" "/>
         </xpath>
         <xpath expr="//header" position="attributes">
             <attribute name="t-attf-class" add="#{'d-none o_snippet_invisible' if main_object and 'header_visible' in main_object and not main_object.header_visible else ''}" separator=" "/>
             <attribute name="t-att-data-invisible">'1' if main_object and 'header_visible' in main_object and not main_object.header_visible else None</attribute>
         </xpath>
-        <xpath expr="//footer[@id='bottom']" position="attributes">
-            <attribute name="t-attf-class" add="#{'d-none o_snippet_invisible' if main_object and 'footer_visible' in main_object and not main_object.footer_visible else ''}" separator=" "/>
-            <attribute name="t-att-data-invisible">'1' if main_object and 'footer_visible' in main_object and not main_object.footer_visible else None</attribute>
-        </xpath>
     </template>
 </data>
 </odoo>