206 lines
14 KiB
XML
206 lines
14 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
<data>
|
|
<!-- Base Blog Detail Layout -->
|
|
<template id="blog_detail_layout" name="Blog Detail Layout">
|
|
<style>
|
|
.blog-article-body h2, .blog-article-body h3, .blog-article-body h4 {
|
|
font-family: 'Bebas Neue', Impact, sans-serif;
|
|
color: #04121D;
|
|
letter-spacing: 1px;
|
|
margin-top: 30px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.blog-article-body h2 { font-size: 32px; }
|
|
.blog-article-body h3 { font-size: 26px; }
|
|
.blog-article-body h4 { font-size: 22px; }
|
|
|
|
.blog-article-body ul {
|
|
list-style: none !important;
|
|
padding-left: 0 !important;
|
|
margin-bottom: 25px;
|
|
}
|
|
.blog-article-body ul li {
|
|
position: relative;
|
|
padding-left: 30px !important;
|
|
margin-bottom: 14px;
|
|
color: #444;
|
|
line-height: 1.7;
|
|
font-size: 16px;
|
|
}
|
|
.blog-article-body ul li::before {
|
|
content: "\f058"; /* fa-check-circle */
|
|
font-family: FontAwesome;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 1px;
|
|
color: #ffb800;
|
|
font-size: 16px;
|
|
}
|
|
.blog-article-body blockquote.blog-quote {
|
|
background: #FFF9EE;
|
|
border-left: 4px solid #ffb800;
|
|
border-radius: 8px;
|
|
font-style: italic;
|
|
color: #222;
|
|
font-size: 17px;
|
|
line-height: 1.75;
|
|
position: relative;
|
|
}
|
|
.hover-yellow {
|
|
transition: color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
.hover-yellow:hover {
|
|
color: #ffb800 !important;
|
|
}
|
|
.recent-post-link {
|
|
transition: transform 0.25s ease;
|
|
}
|
|
.recent-post-link:hover .recent-post-thumb img {
|
|
transform: scale(1.08);
|
|
}
|
|
.recent-post-link:hover .recent-post-title {
|
|
color: #ffb800 !important;
|
|
}
|
|
.sidebar-cat-link:hover {
|
|
color: #ffb800 !important;
|
|
padding-left: 4px;
|
|
}
|
|
</style>
|
|
<t t-call="website.layout">
|
|
<div id="wrap" class="oe_structure">
|
|
|
|
<!-- 1. Hero Page Banner -->
|
|
<section class="s_page_title o_colored_level position-relative" style="background-color: #04121D; background-image: url('/dine360_theme_shivasakthi/static/src/img/about-banner-new.png'); background-size: cover; background-position: center; padding: 140px 0 100px 0;">
|
|
<div class="position-absolute w-100 h-100" style="top: 0; left: 0; background-color: rgba(0,0,0,0.65); 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;">BLOG DETAILS</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"><a href="/blog" class="text-white text-decoration-none hover-yellow">Blog</a></li>
|
|
<li class="breadcrumb-item active" style="color: #ffb800;" aria-current="page">Blog Details</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. Main Blog Detail Section -->
|
|
<section class="s_blog_detail_section o_colored_level" style="background-color: #F9F6F0;">
|
|
<div class="container">
|
|
<div class="row g-5">
|
|
|
|
<!-- Left Main Article Column (col-lg-8) -->
|
|
<div class="col-lg-8">
|
|
<article class="blog-detail-article bg-white p-4 p-md-5 rounded-3 shadow-sm border-0">
|
|
|
|
<!-- Featured Image -->
|
|
<div class="blog-main-image-wrapper mb-4 overflow-hidden rounded-3 position-relative shadow-sm" style="max-height: 480px; background-color: #eee;">
|
|
<img t-att-src="blog_img or '/dine360_theme_shivasakthi/static/src/img/blog-detail-2.webp'"
|
|
class="img-fluid w-100"
|
|
t-att-alt="blog_title"
|
|
style="object-fit: cover; object-position: center; width: 100%; min-height: 320px; max-height: 480px; display: block;"/>
|
|
</div>
|
|
|
|
<!-- Meta Details Bar -->
|
|
<div class="blog-meta-bar d-flex flex-wrap align-items-center gap-3 pb-3 mb-3 border-bottom text-muted small" style="font-weight: 500;">
|
|
<span class="badge px-3 py-2 text-uppercase fw-bold" style="background-color: #ffb800; color: #04121D; font-size: 12px; letter-spacing: 0.5px;">
|
|
<i class="fa fa-tag me-1"></i> <t t-esc="blog_category or 'Restaurant'"/>
|
|
</span>
|
|
<span><i class="fa fa-calendar-o text-warning me-1"></i> <t t-esc="blog_date or 'June 1, 2026'"/></span>
|
|
<span><i class="fa fa-user-circle-o text-warning me-1"></i> <t t-esc="blog_author or 'Shiva Sakthi Culinary Team'"/></span>
|
|
<span><i class="fa fa-clock-o text-warning me-1"></i> <t t-esc="blog_read_time or '4 Min Read'"/></span>
|
|
</div>
|
|
|
|
<!-- Article Title -->
|
|
<h1 class="blog-article-title fw-bold mb-4 text-uppercase" style="font-family: 'Bebas Neue', Impact, sans-serif; font-size: 40px; color: #04121D; letter-spacing: 1px; line-height: 1.15;">
|
|
<t t-esc="blog_title"/>
|
|
</h1>
|
|
|
|
<!-- Article Body Content -->
|
|
<div class="blog-article-body text-dark" style="font-size: 16px; line-height: 1.85; font-family: 'Outfit', sans-serif;">
|
|
<t t-out="blog_content"/>
|
|
</div>
|
|
|
|
<!-- Post Footer (Tags & Back to Blog) -->
|
|
<div class="blog-article-footer mt-5 pt-4 border-top d-flex flex-wrap align-items-center justify-content-between gap-3">
|
|
<div class="d-flex align-items-center gap-2 flex-wrap">
|
|
<span class="fw-bold text-uppercase small text-dark"><i class="fa fa-tags text-warning me-1"></i> Tags:</span>
|
|
<span class="badge bg-light text-dark border px-2 py-1">South Indian Cuisine</span>
|
|
<span class="badge bg-light text-dark border px-2 py-1">Mississauga Dining</span>
|
|
<span class="badge bg-light text-dark border px-2 py-1">Authentic Taste</span>
|
|
</div>
|
|
<a href="/blog" class="btn btn-outline-dark fw-bold px-4 py-2 rounded-1 text-uppercase hover-yellow" style="font-size: 13px; letter-spacing: 1px;">
|
|
<i class="fa fa-arrow-left me-2"></i> Back to Blog
|
|
</a>
|
|
</div>
|
|
|
|
</article>
|
|
</div>
|
|
|
|
<!-- Right Sidebar Column (col-lg-4) -->
|
|
<div class="col-lg-4">
|
|
<aside class="blog-sidebar" style="position: sticky; top: 90px;">
|
|
|
|
<!-- Order Food Online Promo CTA Card -->
|
|
<div class="sidebar-widget p-4 rounded-3 text-white text-center mb-4 shadow-sm" style="background: linear-gradient(135deg, #04121D 0%, #15222E 100%); border: 1px solid rgba(255,184,0,0.3);">
|
|
<div class="mb-3">
|
|
<i class="fa fa-cutlery text-warning" style="font-size: 32px;"></i>
|
|
</div>
|
|
<h4 class="fw-bold text-uppercase mb-2" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #fff;">Taste The Authentic Difference</h4>
|
|
<p class="small text-white-50 mb-4" style="line-height: 1.6;">Craving hot crispy dosas, unlimited thali, or rich South Indian curries? Order online now for pickup or delivery!</p>
|
|
<a href="/shop" class="btn btn-warning w-100 fw-bold text-uppercase py-2 rounded-1 shadow-sm" style="letter-spacing: 1px; color: #04121D; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 18px;">
|
|
Order Food Online <i class="fa fa-arrow-right ms-1"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Recent Articles Widget -->
|
|
<div class="sidebar-widget bg-white p-4 rounded-3 mb-4 shadow-sm border-0">
|
|
<h5 class="fw-bold text-uppercase mb-4 pb-2 border-bottom" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #04121D; font-size: 22px;">
|
|
<i class="fa fa-newspaper-o text-warning me-2"></i> Recent Articles
|
|
</h5>
|
|
<div class="recent-posts-list d-flex flex-column gap-3">
|
|
<t t-foreach="recent_posts" t-as="rpost">
|
|
<a t-attf-href="/blog/#{rpost.get('slug')}" class="recent-post-link d-flex align-items-center gap-3 text-decoration-none" style="color: inherit;">
|
|
<div class="recent-post-thumb flex-shrink-0 overflow-hidden rounded-2" style="width: 75px; height: 65px; background: #eee;">
|
|
<img t-att-src="rpost.get('image')" t-att-alt="rpost.get('title')" class="w-100 h-100" style="object-fit: cover; transition: transform 0.3s ease;"/>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-1 fw-bold recent-post-title" style="font-size: 14px; line-height: 1.35; color: #04121D; transition: color 0.2s ease;" t-esc="rpost.get('title')"/>
|
|
<span class="text-muted small" style="font-size: 12px;"><i class="fa fa-calendar-o text-warning me-1"></i> <t t-esc="rpost.get('date')"/></span>
|
|
</div>
|
|
</a>
|
|
</t>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories Widget -->
|
|
<div class="sidebar-widget bg-white p-4 rounded-3 shadow-sm border-0">
|
|
<h5 class="fw-bold text-uppercase mb-3 pb-2 border-bottom" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #04121D; font-size: 22px;">
|
|
<i class="fa fa-folder-open-o text-warning me-2"></i> Categories
|
|
</h5>
|
|
<ul class="list-unstyled mb-0 d-flex flex-column gap-2">
|
|
<t t-foreach="categories" t-as="cat_name">
|
|
<li class="d-flex justify-content-between align-items-center py-2 border-bottom" style="border-color: rgba(0,0,0,0.05) !important;">
|
|
<a href="/blog" class="sidebar-cat-link text-decoration-none text-dark fw-semibold small hover-yellow" style="transition: all 0.2s ease;">
|
|
<i class="fa fa-angle-right text-warning me-2"></i> <t t-esc="cat_name"/>
|
|
</a>
|
|
<span class="badge rounded-pill bg-light text-muted border px-2 py-1 small" t-esc="categories[cat_name]"/>
|
|
</li>
|
|
</t>
|
|
</ul>
|
|
</div>
|
|
|
|
</aside>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</t>
|
|
</template>
|
|
</data>
|
|
</odoo>
|