About us page updated

This commit is contained in:
vidhya 2026-06-29 17:17:37 +05:30
parent 640fae8be8
commit 49500e41df
10 changed files with 393 additions and 14 deletions

View File

@ -799,22 +799,401 @@ el.textContent=new Date().getFullYear();
<!-- ── 4. ABOUT US PAGE ───────────────────────────────────── --> <!-- ── 4. ABOUT US PAGE ───────────────────────────────────── -->
<template id="v2_aboutus" inherit_id="website.aboutus" name="V2 About Us" active="True" priority="500"> <template id="v2_aboutus" inherit_id="website.aboutus" name="V2 About Us" active="True" priority="500">
<xpath expr="//div[@id='wrap']" position="replace"> <xpath expr="//div[@id='wrap']" position="replace">
<div id="wrap" class="oe_structure oe_empty" style="background-color:#fdf6e3; font-family:'Jost',sans-serif; padding-top:96px;"> <div id="wrap" class="oe_structure oe_empty" style="background-color:#ffffff; font-family:'Jost',sans-serif;">
<section style="max-width:1600px; margin:0 auto; padding:80px 32px; display:grid; grid-template-columns:1fr 0.85fr; gap:80px; align-items:start;"> <!-- Inner Banner -->
<div> <section class="v2-inner-banner" style="background-image: url('/theme_aakriti_v2/static/src/img/about.webp');">
<span class="v2-eyebrow" style="display:block; margin-bottom:16px;">About</span> <div class="v2-inner-banner-content">
<h1 style="font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(2.8rem,5vw,4.5rem); font-weight:700; color:#1a1206; margin:0 0 32px; line-height:1.1;">About Aakriti<br/>Design Events</h1> <h1 class="v2-inner-banner-title" style="font-family: var(--v2-font-display);">About Us</h1>
<div style="height:2px; background:linear-gradient(to right,transparent,rgba(201,151,58,0.5),transparent); margin-bottom:36px;"></div> <div class="v2-inner-banner-breadcrumb">
<div style="display:flex; flex-direction:column; gap:20px; font-size:1rem; color:#6b5e4e; line-height:1.85;"> <a href="/">Home</a> / <span class="v2-active">About Us</span>
<p style="margin:0;">Aakriti Design specializes in event decor and wedding design that goes beyond surface-level styling. We create environments that reflect your story, your culture, and the experience you want your guests to remember.</p>
<p style="margin:0;">With over 10 years of experience in event design, logistics, and space management, Paarul Ladd brings a thoughtful understanding of how celebrations unfold and how environments shape experiences.</p>
</div>
<div style="margin-top:40px;">
<a href="/rental/request" class="v2-btn-dark">Book a Consultation →</a>
</div> </div>
</div> </div>
<div style="border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(30,18,8,0.18);"> </section>
<img src="/theme_aakriti_v2/static/src/img/about.webp" alt="Aakriti Events" style="width:100%; display:block; object-fit:cover;"/> <style>
.v2-about-section {
max-width: 1320px;
margin: 0 auto;
padding: 80px 24px;
}
.v2-story-grid {
display: grid;
gap: 60px;
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 992px) {
.v2-story-grid {
grid-template-columns: 1fr 1fr;
}
}
.v2-about-label {
font-size: 0.75rem;
font-weight: 700;
color: #C9973A;
text-transform: uppercase;
letter-spacing: 0.15em;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.v2-about-label::after, .v2-about-label.center::before {
content: "";
height: 1px;
background-color: #C9973A;
flex: 1;
max-width: 40px;
}
.v2-about-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: #1a1206;
line-height: 1.1;
margin-bottom: 24px;
font-weight: 600;
}
.v2-about-title span.gold {
color: #C9973A;
}
.v2-about-text {
color: #666;
font-size: 0.95rem;
line-height: 1.8;
margin-bottom: 16px;
}
.v2-btn-gold-solid {
background-color: #C9973A;
color: white;
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.05em;
border: none;
}
.v2-btn-gold-solid:hover {
background-color: #b5852f;
color: white;
}
.v2-features-grid-about {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.v2-features-grid-about {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.v2-features-grid-about {
grid-template-columns: repeat(6, 1fr);
}
}
.v2-feature-card {
border: 1px solid #f0e6d2;
border-radius: 12px;
padding: 32px 16px;
text-align: center;
background: #ffffff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
}
.v2-feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
border-color: #C9973A;
}
.v2-feature-icon-new {
color: #C9973A;
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.v2-feature-icon-new svg {
width: 36px;
height: 36px;
}
.v2-feature-card h4 {
font-family: 'Jost', sans-serif;
font-size: 1rem;
font-weight: 600;
color: #1a1206;
margin-bottom: 12px;
line-height: 1.3;
}
.v2-feature-card p {
font-size: 0.85rem;
color: #666;
line-height: 1.6;
margin: 0;
}
.v2-founder-section {
background-color: #fdf9f1;
padding: 80px 24px;
}
.v2-founder-grid {
max-width: 1320px;
margin: 0 auto;
display: grid;
gap: 40px;
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 992px) {
.v2-founder-grid {
grid-template-columns: 1fr 1.2fr 1fr;
}
}
.v2-founder-img {
width: 100%;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
object-fit: cover;
}
.v2-founder-quote-card {
background: #ffffff;
border-radius: 12px;
padding: 40px 32px;
box-shadow: 0 15px 40px rgba(0,0,0,0.04);
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.v2-quote-icon {
font-size: 4rem;
color: #C9973A;
font-family: Georgia, serif;
line-height: 0.6;
margin-bottom: 16px;
}
.v2-quote-text {
font-size: 0.95rem;
color: #666;
line-height: 1.7;
margin-bottom: 24px;
}
.v2-quote-author {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-style: italic;
color: #1a1206;
font-weight: 600;
}
.v2-flower-deco {
position: absolute;
bottom: -15px;
right: -15px;
width: 120px;
opacity: 0.5;
pointer-events: none;
}
.v2-cta-banner {
position: relative;
padding: 100px 24px;
text-align: center;
background-image: url('/theme_aakriti_v2/static/src/img/hero_bg.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.v2-cta-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to right, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.98) 25%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.98) 75%, rgba(255,255,255,0.2) 100%);
}
.v2-cta-banner-content {
position: relative;
max-width: 800px;
margin: 0 auto;
z-index: 1;
}
.v2-cta-banner-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: #1a1206;
margin-bottom: 16px;
line-height: 1.1;
font-weight: 600;
}
.v2-cta-banner-text {
color: #666;
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 32px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- SECTION 1: OUR STORY -->
<section class="v2-about-section">
<div class="v2-story-grid">
<!-- Images Left -->
<div 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;"/>
<img src="/theme_aakriti_v2/static/src/img/hero_bg.png" alt="Event setup" style="width: 100%; height: 220px; object-fit: cover; border-radius: 12px;"/>
</div>
</div>
<!-- Content Right -->
<div 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>
<!-- Small decorative divider line -->
<div style="display:flex; align-items:center; gap:8px; margin-bottom:24px; color:#C9973A;">
<div style="width:5px; height:5px; background:#C9973A; transform:rotate(45deg);"></div>
<div style="height:1px; width:60px; background:#C9973A;"></div>
<div style="width:5px; height:5px; background:#C9973A; transform:rotate(45deg);"></div>
</div>
<p class="v2-about-text">Custom event decor and wedding design created with meaning, intention, and cultural understanding.</p>
<p class="v2-about-text">Aakriti Design specializes in creating environments that reflect your story, your culture, and the experience you want every guest to remember.</p>
<p class="v2-about-text">Every celebration carries emotion, movement, and energy. We believe beautiful events are designed not only to look extraordinary but to feel effortless.</p>
<p class="v2-about-text">From intimate gatherings to large multicultural weddings, our approach blends creativity with flawless execution.</p>
<div style="margin-top: 36px;">
<a href="/rental/request" class="v2-btn-gold-solid">
LET'S CREATE TOGETHER
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
</div>
</div>
</section>
<!-- SECTION 2: WHAT MAKES US DIFFERENT -->
<section class="v2-about-section" style="padding-top: 40px; padding-bottom: 120px;">
<div style="text-align: center; margin-bottom: 60px;">
<div class="v2-about-label center" style="justify-content: center;">WHAT MAKES US DIFFERENT</div>
<h2 class="v2-about-title">The Aakriti Difference</h2>
</div>
<div class="v2-features-grid-about">
<!-- Card 1 -->
<div class="v2-feature-card">
<div class="v2-feature-icon-new">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5"/></svg>
</div>
<h4>Fusion Weddings</h4>
<p>Blending traditions beautifully while respecting every culture.</p>
</div>
<!-- Card 2 -->
<div class="v2-feature-card">
<div class="v2-feature-icon-new">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>
</div>
<h4>Intentional Design</h4>
<p>Every space is planned around guest experience and flow.</p>
</div>
<!-- Card 3 -->
<div class="v2-feature-card">
<div class="v2-feature-icon-new">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M4.93 4.93l1.41 1.41"/><path d="M17.66 17.66l1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="M4.93 19.07l1.41-1.41"/><path d="M17.66 6.34l1.41-1.41"/></svg>
</div>
<h4>Creative Styling</h4>
<p>Every celebration is designed from the ground up.</p>
</div>
<!-- Card 4 -->
<div class="v2-feature-card">
<div class="v2-feature-icon-new">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
</div>
<h4>Execution Expertise</h4>
<p>Over a decade of practical planning experience.</p>
</div>
<!-- Card 5 -->
<div class="v2-feature-card">
<div class="v2-feature-icon-new">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" 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>
</div>
<h4>Personalized Service</h4>
<p>No templates. Every design is uniquely yours.</p>
</div>
<!-- Card 6 -->
<div class="v2-feature-card">
<div class="v2-feature-icon-new">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
</div>
<h4>Stress-Free Process</h4>
<p>Calm guidance from concept to celebration.</p>
</div>
</div>
</section>
<!-- SECTION 3: MEET THE FOUNDER -->
<section class="v2-founder-section">
<div class="v2-founder-grid">
<!-- Left: Image -->
<div>
<img src="/theme_aakriti_v2/static/src/img/about.webp" alt="Founder" class="v2-founder-img" style="aspect-ratio: 4/5;"/>
</div>
<!-- Middle: Content -->
<div>
<div class="v2-about-label">MEET THE FOUNDER</div>
<h2 class="v2-about-title" style="margin-bottom: 16px;">Meet The Creative<br/>Behind <span class="gold">Aakriti</span></h2>
<div style="margin-bottom: 16px;">
<h4 style="font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: #C9973A; font-weight: 600; margin: 0;">Paarul Ladd</h4>
<p style="font-size: 0.85rem; color: #666; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin: 4px 0 0;">Founder &amp; Creative Director</p>
</div>
<p class="v2-about-text">With over 10 years of experience in event decor, space planning, and multicultural celebrations, Paarul brings together creativity, precision, and calm leadership.</p>
<p class="v2-about-text">Her passion is creating spaces that feel beautiful, intentional, and deeply personal.</p>
<div style="margin-top: 32px;">
<a href="/contactus" class="v2-btn-gold-solid">
READ HER STORY
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
</div>
<!-- Right: Quote Card -->
<div class="v2-founder-quote-card">
<div class="v2-quote-icon"></div>
<p class="v2-quote-text">At Aakriti Design, we don't just design events—we create experiences that you and your guests will cherish forever.</p>
<div class="v2-quote-author">Paarul Ladd</div>
<!-- Flower decoration SVG -->
<svg class="v2-flower-deco" viewBox="0 0 100 100" fill="none" stroke="#C9973A" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M50,90 Q55,70 85,60 Q65,55 60,35 Q55,55 30,60 Q45,70 50,90 Z"/>
<path d="M60,35 Q75,25 90,30 Q80,45 85,60"/>
<path d="M30,60 Q15,55 10,40 Q25,35 45,45"/>
<circle cx="56" cy="56" r="4"/>
</svg>
</div>
</div>
</section>
<!-- SECTION 4: CTA BANNER -->
<section class="v2-cta-banner">
<div class="v2-cta-banner-content">
<h2 class="v2-cta-banner-title">Let's Create Something<br/><span style="color:#C9973A;">Beautiful</span> Together</h2>
<p class="v2-cta-banner-text">Whether you're planning an intimate celebration or a grand wedding, we'll bring your vision to life.</p>
<a href="/contactus" class="v2-btn-gold-solid" style="display:inline-flex; align-items:center; gap:8px;">
BOOK A CONSULTATION
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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> </div>
</section> </section>
</div> </div>