blog template

This commit is contained in:
vidhya 2026-06-29 23:20:21 +05:30
parent fbf20b1fa2
commit bdb23b923f
13 changed files with 1053 additions and 35 deletions

View File

@ -1 +1,3 @@
# -*- coding: utf-8 -*-
from . import controllers

View File

@ -19,6 +19,7 @@
'data': [
'views/website_v2_templates.xml',
'views/portfolio_templates.xml',
'views/blog_templates.xml',
],
'installable': True,
'application': False,

View File

@ -0,0 +1,2 @@
# -*- coding: utf-8 -*-
from . import blog_controller

View File

@ -0,0 +1,30 @@
# -*- coding: utf-8 -*-
from odoo import http
from odoo.http import request
from ..utils.blog_data import get_all_posts, get_post_by_slug, get_recent_posts
class V2BlogController(http.Controller):
@http.route('/blog', type='http', auth='public', website=True)
def blog_list(self, **kwargs):
"""Render the blog listing page with all posts."""
posts = get_all_posts()
return request.render('theme_aakriti_v2.v2_blog_list', {
'posts': posts,
'page_title': 'Blog — Aakriti Events',
})
@http.route('/blog/<string:slug>', type='http', auth='public', website=True)
def blog_detail(self, slug, **kwargs):
"""Render a single blog post by slug."""
post = get_post_by_slug(slug)
if not post:
return request.not_found()
recent = get_recent_posts(exclude_slug=slug, limit=3)
return request.render('theme_aakriti_v2.v2_blog_detail', {
'post': post,
'recent_posts': recent,
'page_title': post['title'] + ' — Aakriti Events',
})

View File

@ -0,0 +1 @@
# -*- coding: utf-8 -*-

View File

@ -0,0 +1,330 @@
# -*- coding: utf-8 -*-
"""
Aakriti Events V2 Blog Data Utility
All blog post data lives here. Each post is a dict with a unique `slug`
field used for URL routing.
"""
BLOG_POSTS = [
{
"slug": "how-to-plan-a-luxury-wedding",
"title": "How to Plan a Luxury Wedding Without the Stress",
"category": "Wedding Tips",
"date": "June 15, 2025",
"read_time": "6 min read",
"image": "/theme_aakriti_v2/static/src/img/wedding.png",
"excerpt": (
"Planning a luxury wedding can feel overwhelming, but with the right team "
"and timeline in place, your dream celebration becomes effortlessly achievable."
),
"content": """
<p>A luxury wedding is more than just a big budget it's about creating an experience
that feels personal, intentional, and effortlessly beautiful for every single guest.
The secret to pulling this off without stress lies in three core principles:
<strong>early planning, the right vendor network, and clear communication.</strong></p>
<h3>Start at Least 12 Months Out</h3>
<p>The most sought-after venues, photographers, and floral designers book up quickly.
Starting your planning journey 1218 months before your date ensures you have access
to the very best. Begin with a clear vision board and a realistic budget conversation
before you book anything.</p>
<h3>Build Your Dream Team First</h3>
<p>Your wedding planner and creative director are your most important hires.
A great planner will have an established vendor network, negotiate on your behalf,
and manage your timeline so you never have to worry. At Aakriti Design, we handle
every detail from mandap construction to guest flow logistics so you can
simply be present on your day.</p>
<h3>Design Around Your Story</h3>
<p>Luxury isn't about excess — it's about meaning. Every floral arrangement,
every lighting choice, every table setting should reflect who you are as a couple.
We begin every wedding design consultation by listening. Your cultural background,
your favourite memories, the mood you want guests to feel walking in all of this
shapes our creative direction.</p>
<h3>Plan for the Guest Experience</h3>
<p>The difference between a good wedding and an unforgettable one is how guests
<em>feel</em> as they move through the day. Think about arrival moments, cocktail
hour flow, the reveal of the main reception space, and the energy of the dance floor.
Every transition is an opportunity to create a memory.</p>
<p>Ready to start planning your dream wedding? <a href="/contactus">Reach out to our
team</a> for a complimentary consultation.</p>
""",
"author": "Paarul Ladd",
"author_title": "Founder & Creative Director",
"tags": ["Wedding", "Planning", "Luxury"],
},
{
"slug": "multicultural-wedding-design-tips",
"title": "Multicultural Wedding Design: Blending Traditions Beautifully",
"category": "Design Inspiration",
"date": "May 28, 2025",
"read_time": "5 min read",
"image": "/theme_aakriti_v2/static/src/img/cultural.png",
"excerpt": (
"Designing a fusion wedding that honours two cultures with equal beauty and "
"respect requires deep creativity and cultural sensitivity. Here's how we do it."
),
"content": """
<p>Multicultural weddings are among the most beautiful and complex celebrations
to design. When two families bring different traditions, colour palettes, rituals,
and aesthetic expectations to the same event, the challenge is to honour them
all without making the event feel like a compromise.</p>
<h3>Start with a Cultural Discovery Session</h3>
<p>Before we pick a single flower or choose a fabric, we sit down with both
families separately and together. We ask about rituals that matter most, colours
that hold significance, and moments they want guests to witness and remember.
This forms the emotional foundation of the entire design.</p>
<h3>Find the Visual Thread</h3>
<p>Every beautiful fusion design has a unifying visual language a colour, a
texture, or a motif that bridges both traditions. For an Indo-Western wedding,
this might be ivory and gold paired with lush greenery. For an African-South Asian
celebration, it could be rich jewel tones with intricate pattern work. The thread
makes the event feel cohesive rather than divided.</p>
<h3>Zone the Ceremony Thoughtfully</h3>
<p>When a celebration includes two ceremony types a Hindu ceremony and a Christian
blessing, for example how you transition between zones matters enormously. Lighting,
floral drops, or even a simple walk through a beautifully designed corridor can create
a meaningful moment of transition between rituals.</p>
<h3>Communicate with Vendors Early</h3>
<p>Caterers, musicians, officiants every vendor needs to understand the cultural
context of what they're contributing to. We brief each vendor thoroughly and ensure
all timelines account for the natural pace of different ritual formats.</p>
<p>We've had the privilege of designing some of the most extraordinary fusion
celebrations in the region. <a href="/contactus">Let's talk about yours.</a></p>
""",
"author": "Paarul Ladd",
"author_title": "Founder & Creative Director",
"tags": ["Multicultural", "Wedding", "Design"],
},
{
"slug": "stage-decoration-trends-2025",
"title": "Stage Decoration Trends Dominating 2025 Events",
"category": "Trends",
"date": "May 10, 2025",
"read_time": "4 min read",
"image": "/theme_aakriti_v2/static/src/img/stage_decor.png",
"excerpt": (
"From dramatic floral backdrops to architectural LED installations, "
"stage design in 2025 is bolder, more immersive, and deeply personal."
),
"content": """
<p>The stage is the centrepiece of any celebration the place where memories are
made, photographs are taken, and families gather. In 2025, stage decoration has
evolved dramatically, moving beyond standard floral arches toward fully immersive,
architectural experiences.</p>
<h3>1. Organic Floral Cascades</h3>
<p>Tightly packed, symmetrical floral walls are giving way to organic, cascading
arrangements that feel wild and lush. Think trailing jasmine, oversized garden roses,
and dramatic foliage draping from asymmetric frames. The effect is romantic without
feeling rigid.</p>
<h3>2. Mixed Material Backdrops</h3>
<p>Combining fabric draping with metallic accents, geometric frames, and live
botanicals creates stages with depth and texture. The interplay of softness and
structure creates a visually rich backdrop that photographs beautifully from
every angle.</p>
<h3>3. LED and Projection Mapping</h3>
<p>For evening events and corporate galas, projection mapping onto stage structures
allows dynamic, programmable visuals that transform throughout the event. From a
soft warm glow during dinner to an energetic light show for the reception, the
technology adds theatrical impact.</p>
<h3>4. Custom Monogram and Typography</h3>
<p>Couples and brands are increasingly requesting custom typographic elements
integrated into stage design neon or acrylic lettering, laser-cut name panels,
and illuminated monograms that serve as both decor and branding.</p>
<h3>5. Sustainability-Forward Design</h3>
<p>2025 is also the year event design gets more sustainable. Rental flower walls,
reusable structural elements, and seasonal, locally sourced florals are becoming
standard practice for conscious couples.</p>
<p>Want to see how these trends could work for your event?
<a href="/contactus">Book a design consultation with us.</a></p>
""",
"author": "Paarul Ladd",
"author_title": "Founder & Creative Director",
"tags": ["Stage Design", "Trends", "Decor"],
},
{
"slug": "corporate-event-design-essentials",
"title": "Corporate Event Design: Making Brand Moments Unforgettable",
"category": "Corporate Events",
"date": "April 22, 2025",
"read_time": "5 min read",
"image": "/theme_aakriti_v2/static/src/img/corporate.png",
"excerpt": (
"A corporate event is a brand experience. Every design decision — from "
"the entrance to the stage — should reflect your company's identity and values."
),
"content": """
<p>Corporate events are often treated as purely logistical exercises a venue,
some food, a speaker. But the most impactful brand moments happen when design
is treated with the same care as content. When a space feels right, guests
pay attention, they engage, they remember.</p>
<h3>Design That Communicates Brand Identity</h3>
<p>The moment a guest enters your event, they should feel your brand. This means
your colour palette, typography, and visual language need to carry through from
the signage at the entrance to the centrepieces on the tables. We work closely
with your marketing team to ensure design coherence at every touchpoint.</p>
<h3>Entrance Design Matters Most</h3>
<p>The entrance moment sets the emotional tone for everything that follows. A
dramatic brand-installed entrance arch, a branded photo wall, or a thoughtfully
lit arrival corridor creates a sense of occasion and signals to guests that this
event is special.</p>
<h3>Stage and AV Integration</h3>
<p>For conferences and product launches, the stage design and audio-visual
production need to work as one unified system. Screens, lighting rigs, speaker
positions, and branding elements should be designed together, not assembled
separately. We coordinate closely with AV teams to ensure a seamless result.</p>
<h3>Networking Spaces Deserve Design Attention</h3>
<p>Breakout rooms and networking areas are where conversations and deals
happen. Comfortable, well-designed networking zones with good lighting and
thoughtful furniture arrangements significantly increase guest engagement and
event ROI.</p>
<p>Planning a corporate event or brand activation?
<a href="/contactus">Let's create something exceptional together.</a></p>
""",
"author": "Paarul Ladd",
"author_title": "Founder & Creative Director",
"tags": ["Corporate", "Brand", "Events"],
},
{
"slug": "birthday-celebration-ideas-adults",
"title": "Elevated Birthday Celebrations: Beyond the Ordinary",
"category": "Birthday Events",
"date": "April 5, 2025",
"read_time": "4 min read",
"image": "/theme_aakriti_v2/static/src/img/birthday.png",
"excerpt": (
"Adult birthday celebrations deserve the same creative attention as weddings. "
"Here's how to design a milestone birthday that guests will talk about for years."
),
"content": """
<p>A milestone birthday a 30th, 50th, or 60th is a significant life moment.
It deserves to be celebrated with intention, beauty, and personal meaning.
Gone are the days of a standard restaurant booking. Today's elevated birthday
events are intimate, immersive, and deeply personal.</p>
<h3>Choose a Theme That Reflects the Guest of Honour</h3>
<p>The best birthday events tell the story of the person being celebrated.
Are they a lover of travel? A fashion devotee? A nature enthusiast? Let their
passions and personality drive every design decision from the colour palette
and centrepieces to the entertainment and menu.</p>
<h3>The Importance of the Reveal Moment</h3>
<p>One of the most powerful design tools for a birthday celebration is the
reveal moment when the guest of honour first sees the decorated space.
A well-designed reveal, with controlled lighting and a dramatic entrance, creates
an emotional peak that guests carry with them forever.</p>
<h3>Intimate vs. Grand Both Can Be Extraordinary</h3>
<p>An intimate dinner for 20 can be just as visually stunning as a party for 200.
In fact, smaller gatherings allow for more intricate, personal design details
custom place cards, hand-written menus, personalised table settings, and curated
sensory experiences that wouldn't be practical at scale.</p>
<h3>Commission a Signature Cake</h3>
<p>A custom birthday cake that reflects the guest of honour's aesthetic is one
of the most photographed moments of any celebration. Work with an artist-baker
to create something that becomes a conversation piece and the centrepiece of
the dessert table.</p>
<p>Ready to design a birthday celebration as special as the person it honours?
<a href="/contactus">Let's begin the conversation.</a></p>
""",
"author": "Paarul Ladd",
"author_title": "Founder & Creative Director",
"tags": ["Birthday", "Celebration", "Design"],
},
{
"slug": "event-decor-colour-palette-guide",
"title": "The Art of Choosing Your Event Colour Palette",
"category": "Design Guide",
"date": "March 18, 2025",
"read_time": "7 min read",
"image": "/theme_aakriti_v2/static/src/img/gallery1.webp",
"excerpt": (
"Your event colour palette sets the emotional tone before a single guest "
"arrives. Learn how to choose a palette that feels intentional and cohesive."
),
"content": """
<p>Colour is the most powerful emotional tool in event design. Before a guest
reads a single word of signage or takes their first bite of food, the colour
palette of a space has already communicated the mood, the personality, and the
intention of the event. Choosing thoughtfully matters enormously.</p>
<h3>Start with the Emotional Goal</h3>
<p>Ask yourself: how do you want guests to feel when they walk in? Romantic and
intimate? Celebratory and energetic? Sophisticated and calm? Different colour
families evoke different emotional responses. Warm terracottas and earthy tones
feel grounded and welcoming. Cool blues and silvers feel refined and elegant.
Jewel tones feel festive and rich.</p>
<h3>Choose a Dominant, Secondary, and Accent</h3>
<p>The most successful event palettes use three layers of colour. A dominant
colour (60% of the visual space), a secondary colour (30%), and an accent
(10%). This structure creates visual harmony without monotony. For a luxury
wedding, this might look like: soft ivory (dominant), dusty sage (secondary),
and burnished gold (accent).</p>
<h3>Consider How Colour Behaves in Different Lighting</h3>
<p>A colour that looks perfect in a mood board can behave completely differently
under warm uplighting, natural daylight, or cool LED wash. We always review
fabric and floral samples under the actual event lighting conditions before
finalising any palette decision.</p>
<h3>Cultural Significance of Colour</h3>
<p>In multicultural events, colour choices carry symbolic weight. Red is auspicious
in South Asian traditions; white is associated with mourning in some East Asian
cultures. Understanding the cultural context of your guest list ensures colour
choices feel respectful and celebratory.</p>
<h3>Test Before You Commit</h3>
<p>We always recommend a mock-up table setting or a small test arrangement before
finalising large orders. Seeing colours together in a real-world setting with
real fabrics, real florals, and real lighting often reveals refinements that
digital mood boards miss.</p>
<p>Working on an event and unsure about your palette?
<a href="/contactus">Book a design session with our team.</a></p>
""",
"author": "Paarul Ladd",
"author_title": "Founder & Creative Director",
"tags": ["Design", "Colour", "Tips"],
},
]
def get_all_posts():
"""Return all blog posts."""
return BLOG_POSTS
def get_post_by_slug(slug):
"""Return a single blog post dict by its slug, or None if not found."""
for post in BLOG_POSTS:
if post["slug"] == slug:
return post
return None
def get_recent_posts(exclude_slug=None, limit=3):
"""Return recent posts, optionally excluding one by slug."""
posts = [p for p in BLOG_POSTS if p["slug"] != exclude_slug]
return posts[:limit]

View File

@ -0,0 +1,615 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- ══════════════════════════════════════════════════════
BLOG LIST PAGE
Route: /v2/blog
══════════════════════════════════════════════════════ -->
<template id="v2_blog_list" name="V2 Blog List">
<t t-call="website.layout">
<t t-set="head">
<title t-out="page_title"/>
<meta name="description" content="Read the latest insights on luxury weddings, event design, multicultural celebrations, and creative inspiration from the Aakriti Events team."/>
</t>
<div id="wrap" class="oe_structure" style="background-color: var(--v2-cream); font-family: var(--v2-font-body);">
<style>
/* ── Blog List Page ── */
.v2-blog-banner {
position: relative;
height: 340px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.v2-blog-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(30, 18, 8, 0.55) 0%, rgba(30, 18, 8, 0.65) 100%);
z-index: 1;
}
.v2-blog-banner-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.v2-blog-banner-content {
position: relative;
z-index: 2;
}
.v2-blog-banner-title {
font-family: var(--v2-font-display);
font-size: clamp(2.8rem, 5vw, 4.5rem);
font-weight: 600;
color: var(--v2-white);
line-height: 1.1;
margin-bottom: 12px;
}
.v2-blog-breadcrumb {
font-size: 0.8rem;
color: rgba(255,255,255,0.75);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.v2-blog-breadcrumb a {
color: rgba(255,255,255,0.75);
text-decoration: none;
}
.v2-blog-breadcrumb .v2-active {
color: var(--v2-gold);
}
/* Blog Grid */
.v2-blog-section {
max-width: 1320px;
margin: 0 auto;
padding: 80px 24px;
}
.v2-blog-grid {
display: grid;
gap: 32px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.v2-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.v2-blog-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Blog Card */
.v2-blog-card {
background: var(--v2-white);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(30,18,8,0.06);
border: 1px solid var(--v2-border);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.v2-blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(30,18,8,0.12);
}
.v2-blog-card-img-wrap {
position: relative;
overflow: hidden;
height: 240px;
}
.v2-blog-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.v2-blog-card:hover .v2-blog-card-img-wrap img {
transform: scale(1.06);
}
.v2-blog-card-category {
position: absolute;
top: 16px;
left: 16px;
background: var(--v2-gold);
color: var(--v2-white);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 12px;
border-radius: 4px;
}
.v2-blog-card-body {
padding: 28px 24px 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.v2-blog-card-meta {
font-size: 0.78rem;
color: var(--v2-muted);
margin-bottom: 12px;
display: flex;
gap: 14px;
align-items: center;
}
.v2-blog-card-meta span {
display: flex;
align-items: center;
gap: 4px;
}
.v2-blog-card-title {
font-family: var(--v2-font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--v2-text);
line-height: 1.25;
margin-bottom: 12px;
text-decoration: none;
display: block;
}
.v2-blog-card-title:hover {
color: var(--v2-gold);
}
.v2-blog-card-excerpt {
font-size: 0.88rem;
color: var(--v2-muted);
line-height: 1.7;
flex: 1;
margin-bottom: 24px;
}
.v2-blog-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
font-weight: 700;
color: var(--v2-gold);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: gap 0.2s ease;
}
.v2-blog-card-link:hover {
gap: 10px;
color: var(--v2-gold-dark);
}
@media (max-width: 767px) {
.v2-blog-section {
padding: 48px 20px;
}
}
</style>
<!-- Inner Banner -->
<div class="v2-blog-banner">
<img class="v2-blog-banner-bg"
src="/theme_aakriti_v2/static/src/img/hero_bg.png"
alt="Blog banner"/>
<div class="v2-blog-banner-content">
<h1 class="v2-blog-banner-title">Our Blog</h1>
<div class="v2-blog-breadcrumb">
<a href="/">Home</a> / <span class="v2-active">Blog</span>
</div>
</div>
</div>
<!-- Blog Grid -->
<div class="v2-blog-section">
<div style="text-align:center; margin-bottom:56px;">
<div style="font-size:0.75rem; font-weight:700; color:#C9973A; text-transform:uppercase; letter-spacing:0.15em; margin-bottom:12px; display:flex; align-items:center; justify-content:center; gap:12px;">
<span style="height:1px; width:40px; background:#C9973A; display:inline-block;"></span>
INSIGHTS &amp; INSPIRATION
<span style="height:1px; width:40px; background:#C9973A; display:inline-block;"></span>
</div>
<h2 style="font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(2rem,3.5vw,3rem); color:#1a1206; font-weight:600; margin:0;">
Stories from the Studio
</h2>
</div>
<div class="v2-blog-grid">
<t t-foreach="posts" t-as="post">
<article class="v2-blog-card">
<div class="v2-blog-card-img-wrap">
<img t-att-src="post['image']" t-att-alt="post['title']"/>
<span class="v2-blog-card-category" t-out="post['category']"/>
</div>
<div class="v2-blog-card-body">
<div class="v2-blog-card-meta">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
<t t-out="post['date']"/>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<t t-out="post['read_time']"/>
</span>
</div>
<a t-attf-href="/blog/#{post['slug']}" class="v2-blog-card-title" t-out="post['title']"/>
<p class="v2-blog-card-excerpt" t-out="post['excerpt']"/>
<a t-attf-href="/blog/#{post['slug']}" class="v2-blog-card-link">
Read Article
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</a>
</div>
</article>
</t>
</div>
</div>
</div>
</t>
</template>
<!-- ══════════════════════════════════════════════════════
BLOG DETAIL PAGE
Route: /v2/blog/<slug>
══════════════════════════════════════════════════════ -->
<template id="v2_blog_detail" name="V2 Blog Detail">
<t t-call="website.layout">
<t t-set="head">
<title t-out="page_title"/>
<meta t-att-name="'description'" t-att-content="post['excerpt']"/>
</t>
<div id="wrap" class="oe_structure" style="background-color: var(--v2-cream); font-family: var(--v2-font-body);">
<style>
/* ── Blog Detail Page ── */
.v2-detail-banner {
position: relative;
height: 460px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.v2-detail-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(30,18,8,0.85) 0%, rgba(30,18,8,0.25) 60%, transparent 100%);
z-index: 1;
}
.v2-detail-banner img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.v2-detail-banner-content {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: 0 24px 48px;
width: 100%;
}
.v2-detail-category-badge {
display: inline-block;
background: var(--v2-gold);
color: var(--v2-white);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 5px 14px;
border-radius: 4px;
margin-bottom: 16px;
}
.v2-detail-banner-title {
font-family: var(--v2-font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 600;
color: var(--v2-white);
line-height: 1.15;
max-width: 800px;
margin-bottom: 20px;
}
.v2-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
font-size: 0.82rem;
color: rgba(255,255,255,0.8);
}
.v2-detail-meta span {
display: flex;
align-items: center;
gap: 6px;
}
/* Article Layout */
.v2-detail-layout {
max-width: 1320px;
margin: 0 auto;
padding: 64px 24px;
display: grid;
gap: 60px;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.v2-detail-layout {
grid-template-columns: 1fr 340px;
}
}
/* Article Body */
.v2-article-body {
font-size: 1rem;
color: var(--v2-text);
line-height: 1.85;
}
.v2-article-body h3 {
font-family: var(--v2-font-display);
font-size: 1.6rem;
font-weight: 600;
color: var(--v2-text);
margin: 40px 0 16px;
line-height: 1.2;
}
.v2-article-body p {
margin-bottom: 20px;
}
.v2-article-body strong {
color: var(--v2-text);
font-weight: 600;
}
.v2-article-body a {
color: var(--v2-gold);
text-decoration: underline;
}
.v2-article-body a:hover {
color: var(--v2-gold-dark);
}
.v2-article-body em {
font-style: italic;
}
/* Author Card */
.v2-author-card {
display: flex;
align-items: center;
gap: 16px;
background: var(--v2-white);
border: 1px solid var(--v2-border);
border-radius: 12px;
padding: 24px;
margin-top: 48px;
}
.v2-author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--v2-gold);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--v2-font-display);
font-size: 1.6rem;
color: var(--v2-white);
font-weight: 600;
flex-shrink: 0;
}
.v2-author-info h4 {
font-family: var(--v2-font-display);
font-size: 1.2rem;
color: var(--v2-text);
font-weight: 600;
margin: 0 0 4px;
}
.v2-author-info p {
font-size: 0.8rem;
color: var(--v2-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
}
/* Tags */
.v2-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 32px;
}
.v2-tag {
font-size: 0.75rem;
color: var(--v2-gold);
border: 1px solid var(--v2-gold);
padding: 4px 14px;
border-radius: 100px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Sidebar */
.v2-sidebar {}
.v2-sidebar-card {
background: var(--v2-white);
border: 1px solid var(--v2-border);
border-radius: 16px;
padding: 32px 28px;
margin-bottom: 32px;
}
.v2-sidebar-title {
font-family: var(--v2-font-display);
font-size: 1.25rem;
font-weight: 600;
color: var(--v2-text);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--v2-border);
}
.v2-recent-post {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 0;
border-bottom: 1px solid var(--v2-border);
text-decoration: none;
}
.v2-recent-post:last-child {
border-bottom: none;
padding-bottom: 0;
}
.v2-recent-post-img {
width: 72px;
height: 60px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.v2-recent-post-info h5 {
font-size: 0.88rem;
font-weight: 600;
color: var(--v2-text);
line-height: 1.35;
margin: 0 0 4px;
transition: color 0.2s;
}
.v2-recent-post:hover .v2-recent-post-info h5 {
color: var(--v2-gold);
}
.v2-recent-post-info span {
font-size: 0.75rem;
color: var(--v2-muted);
}
.v2-cta-sidebar {
background: linear-gradient(135deg, var(--v2-dark) 0%, var(--v2-dark2) 100%);
border-radius: 16px;
padding: 36px 28px;
text-align: center;
}
.v2-cta-sidebar h3 {
font-family: var(--v2-font-display);
font-size: 1.5rem;
color: var(--v2-white);
font-weight: 600;
margin-bottom: 12px;
line-height: 1.25;
}
.v2-cta-sidebar p {
font-size: 0.88rem;
color: rgba(255,255,255,0.7);
margin-bottom: 24px;
line-height: 1.6;
}
@media (max-width: 767px) {
.v2-detail-layout {
padding: 40px 20px;
}
.v2-detail-banner {
height: 320px;
}
}
</style>
<!-- Hero Banner -->
<div class="v2-detail-banner">
<img t-att-src="post['image']" t-att-alt="post['title']"/>
<div class="v2-detail-banner-content">
<span class="v2-detail-category-badge" t-out="post['category']"/>
<h1 class="v2-detail-banner-title" t-out="post['title']"/>
<div class="v2-detail-meta">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
<t t-out="post['date']"/>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<t t-out="post['read_time']"/>
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<t t-out="post['author']"/>
</span>
</div>
</div>
</div>
<!-- Article Layout -->
<div class="v2-detail-layout">
<!-- Main Content -->
<div>
<!-- Breadcrumb -->
<div style="font-size:0.78rem; color: var(--v2-muted); margin-bottom:32px; text-transform:uppercase; letter-spacing:0.06em;">
<a href="/" style="color: var(--v2-muted); text-decoration:none;">Home</a>
<span style="margin:0 8px;">·</span>
<a href="/blog" style="color: var(--v2-muted); text-decoration:none;">Blog</a>
<span style="margin:0 8px;">·</span>
<span style="color: var(--v2-gold);" t-out="post['category']"/>
</div>
<!-- Article Body -->
<div class="v2-article-body">
<t t-out="post['content']"/>
</div>
<!-- Tags -->
<div class="v2-tags">
<t t-foreach="post.get('tags', [])" t-as="tag">
<span class="v2-tag" t-out="tag"/>
</t>
</div>
<!-- Author Card -->
<div class="v2-author-card">
<div class="v2-author-avatar">
<t t-out="post['author'][0]"/>
</div>
<div class="v2-author-info">
<h4 t-out="post['author']"/>
<p t-out="post['author_title']"/>
</div>
</div>
<!-- Back Link -->
<div style="margin-top:48px;">
<a href="/blog" style="display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; color: var(--v2-gold); text-transform:uppercase; letter-spacing:0.08em; text-decoration:none;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
Back to All Articles
</a>
</div>
</div>
<!-- Sidebar -->
<aside class="v2-sidebar">
<!-- Recent Posts -->
<div class="v2-sidebar-card">
<div class="v2-sidebar-title">More Articles</div>
<t t-foreach="recent_posts" t-as="rp">
<a t-attf-href="/blog/#{rp['slug']}" class="v2-recent-post">
<img t-att-src="rp['image']" t-att-alt="rp['title']" class="v2-recent-post-img"/>
<div class="v2-recent-post-info">
<h5 t-out="rp['title']"/>
<span t-out="rp['date']"/>
</div>
</a>
</t>
</div>
<!-- CTA Card -->
<div class="v2-cta-sidebar">
<h3>Ready to Create Your Dream Event?</h3>
<p>Let's talk about your vision. We'd love to bring it to life.</p>
<a href="/contactus" style="display:inline-flex; align-items:center; gap:8px; background: var(--v2-gold); color: var(--v2-white); padding:12px 24px; border-radius:4px; font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; text-decoration:none; transition:background 0.3s;">
Book a Consultation
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</a>
</div>
</aside>
</div>
</div>
</t>
</template>
</odoo>

View File

@ -45,6 +45,8 @@
<a href="/">Home</a>
<a href="/aboutus">About Us</a>
<a href="/rentals">Services</a>
<a href="/portfolio">Portfolio</a>
<a href="/blog">Blog</a>
<a href="/contactus">Contact</a>
</nav>
<div class="v2-drawer-footer">
@ -117,6 +119,7 @@
<li><a href="/">Home</a></li>
<li><a href="/aboutus">About Us</a></li>
<li><a href="/rentals">Services</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contactus">Contact</a></li>
</ul>
@ -178,47 +181,73 @@
</p>
<div class="v2-footer-social">
<style>
.v2-footer-social {
display: flex;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
}
.v2-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
color: #fff;
text-decoration: none;
}
.v2-social-link:hover {
background: #C9973A;
border-color: #C9973A;
transform: translateY(-3px);
}
.v2-social-link svg {
display: block;
}
</style>
<!-- Facebook -->
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg"
width="18" height="18"
fill="white"
viewBox="0 0 24 24">
<path d="M15 3h4V0h-4c-4 0-7 3-7 7v3H5v4h3v10h4V14h4l1-4h-5V7c0-1.2.8-2 2-2"/>
<a href="#" class="v2-social-link" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
</svg>
</a>
<!-- Instagram -->
<a href="#">
<!-- Instagram -->
<a href="https://www.instagram.com/your_username/"
class="v2-social-link"
aria-label="Instagram"
target="_blank"
rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg"
width="18" height="18"
fill="white"
viewBox="0 0 24 24">
<rect x="2" y="2" width="20"
height="20" rx="5"/>
<circle cx="12" cy="12" r="4"/>
<circle cx="18" cy="6" r="1"/>
width="16"
height="16"
viewBox="0 0 448 512"
fill="currentColor">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9S160.5 370.8 224.1 370.8 339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.2 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.5 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.9-26.9 26.9s-26.9-12-26.9-26.9 12-26.9 26.9-26.9 26.9 12 26.9 26.9zM398.8 80A79.2 79.2 0 0 0 368 49.2 79.2 79.2 0 0 0 311.2 32H136.8A79.2 79.2 0 0 0 80 49.2 79.2 79.2 0 0 0 49.2 80 79.2 79.2 0 0 0 32 136.8v174.4A79.2 79.2 0 0 0 49.2 368 79.2 79.2 0 0 0 80 398.8 79.2 79.2 0 0 0 136.8 416h174.4A79.2 79.2 0 0 0 368 398.8 79.2 79.2 0 0 0 398.8 368 79.2 79.2 0 0 0 416 311.2V136.8A79.2 79.2 0 0 0 398.8 80z"/>
</svg>
</a>
<!-- Twitter / X -->
<a href="#" class="v2-social-link" aria-label="Twitter / X">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
<!-- Twitter/X -->
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg"
width="18" height="18"
fill="white"
viewBox="0 0 24 24">
<path d="M4 4L20 20M20 4L4 20"/>
</svg>
</a>
<!-- YouTube -->
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg"
width="18" height="18"
fill="white"
viewBox="0 0 24 24">
<path d="M23 12s0-4-1-6c-.5-1-1.5-2-2.5-2.2C17.8 3.5 12 3.5 12 3.5s-5.8 0-7.5.3C3.5 4 2.5 5 2 6c-1 2-1 6-1 6s0 4 1 6c.5 1 1.5 2 2.5 2.2 1.7.3 7.5.3 7.5.3s5.8 0 7.5-.3c1-.2 2-1.2 2.5-2.2 1-2 1-6 1-6z"/>
<polygon points="10,8 16,12 10,16"/>
<!-- LinkedIn -->
<a href="#" class="v2-social-link" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
<rect width="4" height="12" x="2" y="9"/>
<circle cx="4" cy="4" r="2"/>
</svg>
</a>
</div>
@ -1036,6 +1065,9 @@ el.textContent=new Date().getFullYear();
margin-right: auto;
}
.v2-story-images { order: 2; }
.v2-story-content { order: 1; }
/* Responsive spacing adjustments for mobile and tablet */
@media (max-width: 991.98px) {
.v2-about-section, .v2-founder-section {
@ -1048,13 +1080,18 @@ el.textContent=new Date().getFullYear();
gap: 32px;
}
}
@media (min-width: 992px) {
.v2-story-images { order: 1; }
.v2-story-content { order: 2; }
}
</style>
<!-- SECTION 1: OUR STORY -->
<section class="v2-about-section">
<div class="v2-story-grid">
<!-- Images Left -->
<div style="display: grid; gap: 16px;">
<div class="v2-story-images" style="display: grid; gap: 16px;">
<img src="/theme_aakriti_v2/static/src/img/about.webp" alt="Event setup" style="width: 100%; height: 320px; object-fit: cover; border-radius: 12px;"/>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
<img src="/theme_aakriti_v2/static/src/img/gallery1.webp" alt="Event details" style="width: 100%; height: 220px; object-fit: cover; border-radius: 12px;"/>
@ -1063,7 +1100,7 @@ el.textContent=new Date().getFullYear();
</div>
<!-- Content Right -->
<div style="padding-right: 20px;">
<div class="v2-story-content" style="padding-right: 20px;">
<div class="v2-about-label">OUR STORY</div>
<h2 class="v2-about-title">Events Made<br/><span class="gold">With Purpose</span></h2>