Enhance About and Contact Pages with New Layouts and Styles

- Added new images for the About Us section, including banners and dishes.
- Implemented custom styles in theme.scss for improved user interaction and aesthetics.
- Revamped the About Us page structure with new sections highlighting South Indian cuisine.
- Updated the Contact Us page with a modern design and improved contact information layout.
- Enhanced form styling for better user experience.
This commit is contained in:
Alaguraj0361 2026-06-09 15:25:37 +05:30
parent 353281e248
commit cdd6ce5b2f
11 changed files with 304 additions and 230 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 234 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 382 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 580 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 587 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 693 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 536 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 532 KiB

View File

@ -3105,3 +3105,83 @@ body.o_edit_mode {
color: #fff;
border-color: #fff;
}
/* About Us V2 Custom Styles */
.hover-yellow:hover {
color: #ffb800 !important;
}
.floating-img {
animation: floatImg 6s ease-in-out infinite;
filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
}
@keyframes floatImg {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
.banner-card {
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.banner-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.icon-circle {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(255, 184, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.icon-circle:hover {
background-color: #ffb800;
}
.icon-circle:hover i {
color: #fff !important;
}
/* Contact Us V2 Custom Styles */
.contact-dark-card {
background-color: #111;
transition: transform 0.3s ease;
}
.contact-dark-card:hover {
transform: translateY(-5px);
}
.contact-dark-card .icon-box {
width: 60px;
height: 60px;
}
.contact-input {
border: none !important;
border-radius: 0 !important;
padding: 15px 20px !important;
background-color: #ffffff !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
font-size: 14px !important;
}
.contact-input:focus {
box-shadow: 0 5px 15px rgba(255,184,0,0.2) !important;
outline: none !important;
}

View File

@ -5,85 +5,149 @@
<xpath expr="//div[@id='wrap']" position="replace">
<div id="wrap" class="oe_structure">
<!-- Page Banner -->
<section class="s_page_title o_colored_level" style="background-color: #04121D; background-image: url('/dine360_theme_shivasakthi/static/src/img/about-banner-new.png'); background-size: cover; background-position: center; padding: 100px 0; position: relative; overflow: hidden;">
<div class="o_we_bg_filter bg-black-50"/>
<div class="container text-center text-white position-relative" style="z-index: 2;">
<h1 class="display-3 fw-bold mb-3" style="letter-spacing: 1px;">ABOUT US</h1>
<!-- 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: 600;">
<li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none" style="opacity: 0.8;">Home</a></li>
<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>
</div>
</section>
<!-- Main About Section -->
<section class="s_about_page_new pt96 pb96 o_colored_level position-relative" style="background-color: #F9F6F0; overflow: hidden;">
<!-- Floating Elements -->
<!-- Lemon (Left) -->
<img src="/dine360_theme_shivasakthi/static/src/img/about-new-lemon.png" alt="" class="position-absolute d-none d-lg-block" style="left: -2%; top: 50%; width: 150px; transform: translateY(-50%); z-index: 1;"/>
<!-- Basil (Bottom Left) -->
<img src="/dine360_theme_shivasakthi/static/src/img/about-new-basil.png" alt="" class="position-absolute d-none d-lg-block" style="left: 10%; bottom: 5%; width: 120px; z-index: 1;"/>
<!-- Pepper (Top Right) -->
<img src="/dine360_theme_shivasakthi/static/src/img/about-new-pepper.png" alt="" class="position-absolute d-none d-lg-block" style="right: 5%; top: 10%; width: 100px; z-index: 1;"/>
<div class="container position-relative" style="z-index: 2;">
<!-- 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">
<!-- Left Image Side -->
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="position-relative p-3">
<!-- Yellow Background/Border Effect -->
<div class="position-absolute" style="background-color: #ffb800; top: 0; left: 0; width: 85%; height: 90%; z-index: 0; border-radius: 2px;"></div>
<!-- Main Image -->
<div class="position-relative bg-white p-2 shadow-sm" style="z-index: 1; margin: 30px 0 0 30px;">
<img src="/dine360_theme_shivasakthi/static/src/img/about-new-main.png" class="img-fluid w-100" alt="Authentic South Indian Dish" style="object-fit: cover; min-height: 400px;"/>
</div>
</div>
<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>
<!-- Right Content Side -->
<div class="col-lg-6 ps-lg-5">
<div class="about-content-wrapper">
<!-- Subtitle -->
<h6 class="d-flex align-items-center mb-3" style="color: #ffb800; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 14px;">
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 20px; margin-right: 8px;" alt=""/>
ABOUT US
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 20px; margin-left: 8px;" alt=""/>
</h6>
<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>
<!-- Title -->
<h2 class="display-5 fw-bold mb-4" style="color: #04121D; line-height: 1.2;">Bringing Authentic South Indian Cuisine To Mississauga</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>
<!-- Small Bold Header -->
<h5 class="fw-bold mb-3" style="color: #04121D; font-size: 18px;">Our Story, Our Passion For Freshness And Flavor</h5>
<!-- Description -->
<div class="text-muted" style="font-size: 15px; line-height: 1.7;">
<p class="mb-3">
At Shivasakthi, we believe that every meal should be a celebration of authentic Indian flavors. As one of the top Indian restaurants in Mississauga, we take pride in serving dishes that capture the rich traditions of South India. Whether you're visiting for a casual lunch, a family dinner, or a special event, our team is committed to delivering the best Indian food experience in Mississauga.
</p>
<p class="mb-3">
Our chefs bring generations of expertise to every dish — from the famous Hyderabadi biryani to the crispy masala dosas. Visit Shivasakthi today and find out why we are a top-rated South Indian restaurant in Mississauga.
</p>
<p class="mb-3">
Shivasakthi stands out for its dedication to freshness, authenticity, and variety. Our menu features iconic Tamil Nadu specialties like Madurai Mutton Bone Soup, Seeraga Samba Mutton Dum Biryani, and classic dosas, idlis, and uttapams. For something different, try our Indo-Chinese dishes or indulge in our exclusive weekend specials for a unique culinary experience.
</p>
<p class="mb-0">
Whether you're stopping by for a quick bite, a hearty meal, or a special celebration, our team ensures a warm welcome and an unforgettable dining experience. Blending tradition with modern flair, Shivasakthi isn't just a restaurant—it's a tribute to Chennai's rich and vibrant culinary heritage
</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>
</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>
@ -92,6 +156,3 @@
</template>
</data>
</odoo>

View File

@ -6,195 +6,132 @@
<div id="wrap" class="oe_structure">
<!-- 1. HERO BANNER -->
<section class="s_page_title o_colored_level" style="background-color: #04121D; background-image: url('/dine360_theme_shivasakthi/static/src/img/contact-banner-bg.png'); background-size: cover; background-position: center; padding: 120px 0; position: relative;">
<div class="o_we_bg_filter bg-black-50"/>
<section class="s_page_title o_colored_level position-relative" style="background-color: #04121D; background-image: url('/dine360_theme_shivasakthi/static/src/img/contact-banner-bg.png'); background-size: cover; background-position: center; padding: 160px 0 120px 0;">
<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" style="text-transform: uppercase; letter-spacing: 1px;">Contact Us</h1>
<h1 class="display-3 fw-bold mb-3 text-uppercase" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 2px;">Contact</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: 600;">
<li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none" style="opacity: 0.8;">Home</a></li>
<li class="breadcrumb-item active" style="color: #ffb800;" aria-current="page">Contact Us</li>
<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">Contact</li>
</ol>
</nav>
</div>
</section>
<!-- 2. CONTACT INFO SECTION -->
<section class="s_contact_info pt80 pb80" style="background-color: #F9F6F0;">
<div class="container">
<!-- 2. GET IN TOUCH WITH US + DARK CARDS -->
<section class="s_contact_get_in_touch pt-5 pb-5 bg-white position-relative" style="z-index: 10;">
<div class="container pt-5 pb-5">
<div class="text-center mb-5">
<h6 style="color: #ffb800; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin-bottom: 10px;">
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 20px;" alt=""/>
Shivasakthi
<img src="/dine360_theme_shivasakthi/static/src/img/subtitle-icon.png" style="width: 20px;" alt=""/>
</h6>
<h2 class="display-5 fw-bold" style="color: #04121D;">Contact</h2>
<p class="text-muted mt-3" style="max-width: 800px; margin: 0 auto; font-size: 14px;">
Looking for 'Indian restaurants near me' in Mississauga? Find us conveniently located near Downtown Mississauga. Shivasakthi is your go-to destination for authentic Indian and South Indian food in Mississauga, Ontario. Call us or drop by for dine-in, takeout, or catering services.
<h6 style="color: #ffb800; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin-bottom: 15px;">Contact Us</h6>
<h2 class="display-5 fw-bold text-uppercase mb-4" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #111;">Get In Touch With Us</h2>
<p class="text-muted" style="max-width: 900px; margin: 0 auto; font-size: 15px; line-height: 1.8;">
We're always happy to connect with you at Shiva Sakthi Restaurant. Conveniently located in a prime and easily accessible area, our restaurant welcomes guests who are looking for fresh, authentic South Indian meals served with care. Whether you want to make a reservation, check our menu, place a takeaway order, or inquire about catering services, our team is ready to assist you. Visitors can reach us by phone, email, or through the contact form on this page. We aim to respond quickly to all inquiries and ensure every guest enjoys a smooth experience. Drop by, get in touch, or simply say hello - we look forward to serving you.
</p>
</div>
<div class="row g-4 justify-content-center">
<!-- Address -->
<div class="col-lg-3 col-md-6">
<div class="bg-white p-4 text-center h-100 rounded-3 shadow-sm border-bottom border-warning border-3">
<div class="mb-3 d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 60px; height: 60px; background-color: rgba(254, 205, 79, 0.1); color: #ffb800;">
<i class="fa fa-map-marker fa-lg"></i>
</div>
<h5 class="fw-bold mb-2">Our Address</h5>
<p class="text-muted small mb-0">Shivasakthi Indian Kitchen Bar<br/>7166 Airport Road, Mississauga, Ontario L4T 2H2</p>
</div>
</div>
<!-- Email -->
<div class="col-lg-3 col-md-6">
<div class="bg-white p-4 text-center h-100 rounded-3 shadow-sm border-bottom border-warning border-3">
<div class="mb-3 d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 60px; height: 60px; background-color: rgba(254, 205, 79, 0.1); color: #ffb800;">
<i class="fa fa-envelope fa-lg"></i>
</div>
<h5 class="fw-bold mb-2">Email</h5>
<p class="text-muted small mb-0">Shivasakthikitchen@gmail.com</p>
</div>
</div>
<div class="row g-4 justify-content-center mt-4">
<!-- Call Us -->
<div class="col-lg-3 col-md-6">
<div class="bg-white p-4 text-center h-100 rounded-3 shadow-sm border-bottom border-warning border-3">
<div class="mb-3 d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 60px; height: 60px; background-color: rgba(254, 205, 79, 0.1); color: #ffb800;">
<i class="fa fa-phone fa-lg"></i>
<div class="col-lg-4 col-md-6">
<div class="contact-dark-card d-flex align-items-center p-4 h-100">
<div class="icon-box bg-white d-flex align-items-center justify-content-center me-4">
<i class="fa fa-phone" style="color: #ffb800; font-size: 20px;"></i>
</div>
<div>
<h6 class="text-white fw-bold mb-1" style="font-size: 16px;">Call Us</h6>
<p class="text-white-50 mb-0" style="font-size: 14px;">905-677-3555</p>
</div>
<h5 class="fw-bold mb-2">Call Us</h5>
<p class="text-muted small mb-0">905-677-3555</p>
</div>
</div>
<!-- Opening Hours -->
<div class="col-lg-3 col-md-6">
<div class="bg-white p-4 text-center h-100 rounded-3 shadow-sm border-bottom border-warning border-3">
<div class="mb-3 d-inline-flex align-items-center justify-content-center rounded-circle" style="width: 60px; height: 60px; background-color: rgba(254, 205, 79, 0.1); color: #ffb800;">
<i class="fa fa-clock-o fa-lg"></i>
<!-- Email Address -->
<div class="col-lg-4 col-md-6">
<div class="contact-dark-card d-flex align-items-center p-4 h-100">
<div class="icon-box bg-white d-flex align-items-center justify-content-center me-4">
<i class="fa fa-envelope-o" style="color: #ffb800; font-size: 20px;"></i>
</div>
<div>
<h6 class="text-white fw-bold mb-1" style="font-size: 16px;">Email Address</h6>
<p class="text-white-50 mb-0" style="font-size: 14px;">info@shivasakthi.ca</p>
</div>
</div>
</div>
<!-- Location -->
<div class="col-lg-4 col-md-6">
<div class="contact-dark-card d-flex align-items-center p-4 h-100">
<div class="icon-box bg-white d-flex align-items-center justify-content-center me-4">
<i class="fa fa-map-marker" style="color: #ffb800; font-size: 20px;"></i>
</div>
<div>
<h6 class="text-white fw-bold mb-1" style="font-size: 16px;">Location</h6>
<p class="text-white-50 mb-0" style="font-size: 14px;">7166 Airport Road, Mississauga,<br/>Ontario L4T 2H2, Canada.</p>
</div>
<h5 class="fw-bold mb-2">Opening Hours</h5>
<p class="text-muted small mb-0">Monday - Friday: 12 PM - 9 PM<br/>Saturday &amp; Sunday: 12 PM - 11 PM</p>
</div>
</div>
</div>
</div>
</section>
<!-- 3. FORM & IMAGE SECTION -->
<section class="s_contact_form_wrapper pb96 pt48" style="background-color: #F9F6F0;">
<div class="container">
<div class="row align-items-center">
<!-- 3. FORM & IMAGE SECTION (Dark wrapper, Light inner) -->
<section class="s_contact_form_split pt-5 pb-5" style="background-color: #111;">
<div class="container pt-5 pb-5">
<div class="row g-0">
<!-- Left Image -->
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="position-relative p-3">
<div class="position-absolute" style="background-color: #ffb800; bottom: 0; left: 0; width: 90%; height: 90%; z-index: 0; border-radius: 2px;"></div>
<div class="position-relative bg-white p-2 shadow-sm" style="z-index: 1; margin: 0 20px 20px 20px;">
<img src="/dine360_theme_shivasakthi/static/src/img/contact-side-img-new.png" class="img-fluid w-100" style="object-fit: cover; height: 500px;" alt="Interior"/>
</div>
</div>
<div class="col-lg-6">
<img src="/dine360_theme_shivasakthi/static/src/img/contact_v2/interior.png" class="img-fluid w-100 h-100" style="object-fit: cover; min-height: 500px;" alt="Interior"/>
</div>
<!-- Right Form -->
<div class="col-lg-6">
<div class="bg-white p-5 rounded-3 shadow-lg">
<h3 class="fw-bold mb-4" style="color: #04121D;">Get In Touch For Reservations Or Inquiries!</h3>
<!-- Right Form (Cream Background) -->
<div class="col-lg-6" style="background-color: #F6F4EB; padding: 60px;">
<h2 class="fw-bold text-uppercase mb-3" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #111; font-size: 32px;">Send Us Message</h2>
<p class="text-muted mb-4" style="font-size: 14px; line-height: 1.6;">
Have a question or need assistance? Fill out the form below and our team will get back to you as soon as possible. *
</p>
<!-- Standard HTML Form (Bypassing Odoo JS Interference) -->
<section class="s_contact_form_custom pt-3">
<div class="container">
<form action="/contactus/submit" method="post" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<div class="s_website_form_rows row s_col_no_bgcolor">
<!-- Standard HTML Form -->
<form action="/contactus/submit" method="post" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<div class="row g-3">
<!-- Full Name -->
<div class="col-lg-6 mb-4">
<div class="s_col_no_resize s_col_no_bgcolor">
<label class="form-label fw-normal" for="name" style="color: #666; font-size: 15px;">
Full Name
<span style="color: #ffb800;"> *</span>
</label>
<div>
<input type="text" class="form-control" name="name" required="1" placeholder="Full Name" style="background-color: #F8F9FA; border: 1px solid #ffb800 !important; border-radius: 8px; padding: 12px; color: #ffb800 !important; font-size: 14px;"/>
</div>
</div>
</div>
<!-- Email Address -->
<div class="col-lg-6 mb-4">
<div class="s_col_no_resize s_col_no_bgcolor">
<label class="form-label fw-normal" for="email_from" style="color: #666; font-size: 15px;">
Email Address
<span style="color: #ffb800;"> *</span>
</label>
<div>
<input type="email" class="form-control" name="email_from" required="1" placeholder="Email Address" style="background-color: #F8F9FA; border: 1px solid #ffb800 !important; border-radius: 8px; padding: 12px; color: #ffb800 !important; font-size: 14px;"/>
</div>
</div>
</div>
<!-- Phone Number -->
<div class="col-lg-6 mb-4">
<div class="s_col_no_resize s_col_no_bgcolor">
<label class="form-label fw-normal" for="phone" style="color: #666; font-size: 15px;">
Phone Number
<span style="color: #ffb800;"> *</span>
</label>
<div>
<input type="tel" class="form-control" name="phone" required="1" placeholder="Phone Number" style="background-color: #F8F9FA; border: 1px solid #ffb800 !important; border-radius: 8px; padding: 12px; color: #ffb800 !important; font-size: 14px;"/>
</div>
</div>
</div>
<!-- Subject -->
<div class="col-lg-6 mb-4">
<div class="s_col_no_resize s_col_no_bgcolor">
<label class="form-label fw-normal" for="subject" style="color: #666; font-size: 15px;">
Subject
<span style="color: #ffb800;"> *</span>
</label>
<div>
<select class="form-select" name="subject" required="1" style="background-color: #F8F9FA; border: 1px solid #ffb800 !important; border-radius: 8px; padding: 12px; color: #ffb800 !important; font-size: 14px;">
<option value="" disabled="disabled" selected="selected">Select Subject</option>
<option value="Complain">Complain</option>
<option value="Greetings">Greetings</option>
<option value="Expire Date">Expire Date</option>
<option value="About Price">About Price</option>
<option value="About Order">About Order</option>
</select>
</div>
</div>
</div>
<!-- Message -->
<div class="col-12 mb-4">
<div class="s_col_no_resize s_col_no_bgcolor">
<label class="form-label fw-normal" for="description" style="color: #666; font-size: 15px;">
Message
<span style="color: #ffb800;"> *</span>
</label>
<div>
<textarea class="form-control" name="description" required="1" placeholder="Message" rows="5" style="background-color: #FFFFFF; border: 1px solid #ffb800 !important; border-radius: 8px; padding: 12px; color: #ffb800 !important; font-size: 14px;"></textarea>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="col-12">
<button type="submit" class="btn btn-primary btn-lg w-100 fw-bold" style="background-color: #ffb800 !important; border: none; color: #04121D; padding: 15px; text-transform: uppercase; border-radius: 4px;">
Submit Now <i class="fa fa-long-arrow-right ms-2"></i>
</button>
</div>
</div>
</form>
<!-- Full Name -->
<div class="col-md-6">
<input type="text" class="form-control bg-white contact-input" name="name" required="1" placeholder="Full Name"/>
</div>
</section>
</div>
<!-- Email Address -->
<div class="col-md-6">
<input type="email" class="form-control bg-white contact-input" name="email_from" required="1" placeholder="Email Address"/>
</div>
<!-- Phone Number -->
<div class="col-md-6">
<input type="tel" class="form-control bg-white contact-input" name="phone" required="1" placeholder="Phone"/>
</div>
<!-- Subject -->
<div class="col-md-6">
<input type="text" class="form-control bg-white contact-input" name="subject" required="1" placeholder="Subject"/>
</div>
<!-- Message -->
<div class="col-12">
<textarea class="form-control bg-white contact-input" name="description" required="1" placeholder="Write Message" rows="5"></textarea>
</div>
<!-- Submit Button -->
<div class="col-12 mt-4">
<button type="submit" class="btn fw-bold text-white px-4 py-3 text-uppercase" style="background-color: #ffb800; border: none; font-size: 14px; letter-spacing: 1px; border-radius: 2px;">
Send Message Us <i class="fa fa-paper-plane ms-2"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- 4. MAP SECTION -->
<section class="s_map pb0" data-snippet="s_map" data-name="Map">
<section class="s_map" data-snippet="s_map" data-name="Map">
<div class="map_container o_not_editable" style="height: 500px !important; width: 100%;">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2882.023604364022!2d-79.69973268450123!3d43.79155297911666!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b3d8f3b1b3b1b%3A0x1b3b1b3b1b3b1b3b!2s11665%20McVean%20Dr%2C%20Mississauga%2C%20ON%20L6P%201J7%2C%20Canada!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus"
width="100%" height="500" style="border:0; height: 500px !important; width: 100%;" allowfullscreen="" loading="lazy"></iframe>
@ -224,7 +161,3 @@
</data>
</odoo>