<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="about_page" inherit_id="website.aboutus" name="About Us Page" priority="1000">
            <xpath expr="//div[@id='wrap']" position="replace">
                <div id="wrap" class="oe_structure">
                    
                    <!-- Page Banner Section -->
                    <section class="s_about_hero_banner position-relative" style="background-image: url('/dine360_theme_shivasakthi/static/src/img/about-banner-new.png'); background-size: cover; background-position: center; padding: 160px 0 120px 0; background-color: #000;">
                        <div class="position-absolute w-100 h-100" style="top: 0; left: 0; background-color: rgba(0,0,0,0.6); z-index: 1;"></div>
                        <div class="container text-center text-white position-relative" style="z-index: 2;">
                            <h1 class="display-3 fw-bold mb-3 text-uppercase" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 2px;">About Us</h1>
                            <nav aria-label="breadcrumb" class="d-flex justify-content-center">
                                <ol class="breadcrumb mb-0" style="background: transparent; font-size: 14px; text-transform: uppercase; font-weight: 500;">
                                    <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none hover-yellow">Home</a></li>
                                    <li class="breadcrumb-item active" style="color: #ffb800;" aria-current="page">About Us</li>
                                </ol>
                            </nav>
                        </div>
                    </section>

                    <!-- Section 1: Where Flavor Meets Festivity -->
                    <section class="s_about_flavor_festivity pt-5 pb-5 bg-white">
                        <div class="container pt-5 pb-5">
                            <div class="row align-items-center">
                                <div class="col-lg-6 mb-5 mb-lg-0 text-center">
                                    <img src="/dine360_theme_shivasakthi/static/src/img/about_v2/vada.png" alt="Vada Dish" class="img-fluid floating-img"/>
                                </div>
                                <div class="col-lg-6 ps-lg-5">
                                    <h6 class="text-uppercase mb-2 fw-bold" style="color: #ffb800; font-size: 14px; letter-spacing: 1px;">Experience South Indian Cuisine Like Never Before!</h6>
                                    <h2 class="display-4 fw-bold text-uppercase mb-4" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #111;">Where Flavor Meets Festivity</h2>
                                    
                                    <p class="text-muted mb-4" style="font-size: 16px; line-height: 1.8;">
                                        At Shiva Sakthi, dining isn't just about food, it's an immersive journey that tantalizes every sense. We bring the rich, authentic flavors of South and North Indian cuisine straight to the heart of Canada.
                                    </p>
                                    <p class="text-muted mb-5" style="font-size: 16px; line-height: 1.8;">
                                        Whether you're here for a quiet family dinner or a lively evening out, Shiva Sakthi transforms every meal into a celebration of culture, taste, where every bite hits a note and every vibe feels like home.
                                    </p>

                                    <div class="row mb-5">
                                        <div class="col-sm-6 mb-3 mb-sm-0 d-flex align-items-center">
                                            <div class="icon-circle me-3">
                                                <i class="fa fa-cutlery text-warning" style="font-size: 24px;"></i>
                                            </div>
                                            <h5 class="mb-0 fw-bold text-uppercase" style="font-family: 'Bebas Neue', Impact, sans-serif; font-size: 20px;">Best Quality Food</h5>
                                        </div>
                                        <div class="col-sm-6 d-flex align-items-center">
                                            <div class="icon-circle me-3">
                                                <i class="fa fa-user-circle text-warning" style="font-size: 24px;"></i>
                                            </div>
                                            <h5 class="mb-0 fw-bold text-uppercase" style="font-family: 'Bebas Neue', Impact, sans-serif; font-size: 20px;">Experienced Chefs</h5>
                                        </div>
                                    </div>

                                    <a href="/menu" class="btn btn-warning text-uppercase fw-bold px-4 py-3 rounded-0" style="font-size: 14px; letter-spacing: 1px;">Discover More <i class="fa fa-arrow-right ms-2"></i></a>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- Section 2: Banner Cards (Biryani) -->
                    <section class="s_about_biryani_banners pb-5 bg-white">
                        <div class="container pb-5">
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <img src="/dine360_theme_shivasakthi/static/src/img/about_v2/chicken_biryani_banner.png" alt="Ambur Chicken Biryani" class="img-fluid w-100 banner-card"/>
                                </div>
                                <div class="col-lg-6">
                                    <img src="/dine360_theme_shivasakthi/static/src/img/about_v2/mutton_biryani_banner.png" alt="Thalapakattu Mutton Biryani" class="img-fluid w-100 banner-card"/>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- Section 3: Parallax Live Melodies -->
                    <section class="s_about_live_melodies position-relative text-center" style="background-image: url('/dine360_theme_shivasakthi/static/src/img/about_v2/skewers_bg.png'); background-attachment: fixed; background-size: cover; background-position: center; padding: 120px 0;">
                        <div class="position-absolute w-100 h-100" style="top: 0; left: 0; background-color: rgba(0,0,0,0.75); z-index: 1;"></div>
                        <div class="container position-relative text-white" style="z-index: 2;">
                            <h6 class="text-uppercase mb-3 fw-bold" style="color: #ffb800; font-size: 14px; letter-spacing: 2px;">Dine-In And Experience South Indian Culture And Vibes!</h6>
                            <h2 class="display-3 fw-bold text-uppercase mb-0" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 2px;">Indian Flavors With Live Melodies</h2>
                        </div>
                    </section>

                    <!-- Section 4: Authentic Flavors -->
                    <section class="s_about_authentic_flavors pt-5 pb-5 bg-white position-relative overflow-hidden">
                        <div class="container pt-5 pb-5">
                            <div class="row align-items-center">
                                <div class="col-lg-6 pe-lg-5">
                                    <h6 class="text-uppercase mb-2 fw-bold" style="color: #ffb800; font-size: 14px; letter-spacing: 1px;">Discover True South Indian Taste At Shiva Sakthi</h6>
                                    <h2 class="display-4 fw-bold text-uppercase mb-4" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #111;">Authentic Flavors,<br/>Unforgettable Moments</h2>
                                    
                                    <p class="text-muted mb-3" style="font-size: 16px; line-height: 1.8;">
                                        At Shiva Sakthi, every meal tells a story. From our perfectly spiced Biryanis to our traditional dosas, we ensure every dish is prepared with fresh ingredients and an authentic touch.
                                    </p>
                                    <p class="text-muted mb-5" style="font-size: 16px; line-height: 1.8;">
                                        We invite you to experience the finest combination of delicious food and a welcoming atmosphere. Whether you're dining in or taking out, Shiva Sakthi promises an exceptional culinary journey.
                                    </p>
                                    <a href="#" class="btn btn-warning text-uppercase fw-bold px-4 py-3 rounded-0" style="font-size: 14px; letter-spacing: 1px;">Order Online <i class="fa fa-arrow-right ms-2"></i></a>
                                </div>
                                <div class="col-lg-6 mt-5 mt-lg-0 text-center position-relative">
                                    <img src="/dine360_theme_shivasakthi/static/src/img/about_v2/mutton_dish.png" alt="Mutton Dish" class="img-fluid floating-img"/>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- Section 5: Call to Action (Split Background) -->
                    <section class="s_about_cta position-relative overflow-hidden">
                        <div class="row g-0">
                            <!-- Left Yellow Section -->
                            <div class="col-lg-6 position-relative d-flex align-items-center" style="background-color: #ffb800; padding: 100px 50px;">
                                <!-- Subtle Texture Overlay (Optional) -->
                                <div class="w-100" style="max-width: 500px; margin-left: auto; margin-right: auto; padding-right: 50px;">
                                    <h6 class="text-uppercase mb-3 fw-bold text-white" style="font-size: 14px; letter-spacing: 1px;">Experience Authentic South Indian Food</h6>
                                    <h2 class="display-4 fw-bold text-uppercase mb-4 text-white" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px;">Don't Wait—Call Us Now To<br/>Place Your Order!</h2>
                                    <a href="tel:+1234567890" class="btn btn-outline-light text-uppercase fw-bold px-4 py-3 rounded-0 mt-2" style="font-size: 14px; letter-spacing: 1px; border-width: 2px;">Call Us <i class="fa fa-phone ms-2"></i></a>
                                </div>
                            </div>
                            <!-- Right Black Section -->
                            <div class="col-lg-6 position-relative" style="background-color: #111; min-height: 400px; display: flex; align-items: center; justify-content: center;">
                                <img src="/dine360_theme_shivasakthi/static/src/img/about_v2/noodles.png" alt="Noodles" class="img-fluid floating-img" style="max-height: 450px; z-index: 2;"/>
                            </div>
                        </div>
                    </section>

                    <!-- Section 6: Testimonials (Split Background) -->
                    <section class="s_about_testimonials position-relative overflow-hidden">
                        <div class="row g-0">
                            <!-- Left Image Section -->
                            <div class="col-lg-6 position-relative">
                                <img src="/dine360_theme_shivasakthi/static/src/img/about_v2/feedback_dish.jpg" alt="Feedback Dish" class="img-fluid w-100 h-100" style="object-fit: cover; min-height: 500px;"/>
                            </div>
                            <!-- Right Yellow Section -->
                            <div class="col-lg-6 position-relative d-flex align-items-center text-center" style="background-color: #ffb800; padding: 100px 50px;">
                                <div class="w-100" style="max-width: 600px; margin: 0 auto;">
                                    <h2 class="display-4 fw-bold text-uppercase text-white mb-4" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px;">What Have Lot's Off Happy Customer<br/>Explore Feedback</h2>
                                    
                                    <div class="text-white mb-4 mt-5">
                                        <i class="fa fa-star" style="font-size: 20px;"></i>
                                        <i class="fa fa-star" style="font-size: 20px;"></i>
                                        <i class="fa fa-star" style="font-size: 20px;"></i>
                                        <i class="fa fa-star" style="font-size: 20px;"></i>
                                        <i class="fa fa-star" style="font-size: 20px;"></i>
                                    </div>
                                    
                                    <p class="text-white fw-bold mb-4" style="font-size: 18px; line-height: 1.8;">
                                        "Absolutely fantastic! The flavors are authentic and take me back home. The Ambur Chicken Biryani is a must-try! The staff is friendly, and the atmosphere is perfect for a family dinner. We will definitely be coming back again and again!"
                                    </p>
                                    <h5 class="text-white fw-bold text-uppercase mb-0" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; font-size: 22px;">- Clara Fernandez</h5>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </xpath>
        </template>
    </data>
</odoo>
