about page images updated
This commit is contained in:
parent
c2dd471507
commit
4c5ce6a1bf
@ -90,7 +90,7 @@ export default function AboutPage() {
|
||||
<div className="relative w-full bg-[#fdfaf4] overflow-hidden pt-24 pb-24">
|
||||
{/* Faint temple sketch background */}
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image src="/images/story_bg.png" alt="" fill priority className="object-cover object-left mix-blend-multiply" />
|
||||
<Image src="/images/about/bg/abt-bg.webp" alt="" fill priority className="object-cover object-left mix-blend-multiply" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6">
|
||||
@ -154,31 +154,31 @@ export default function AboutPage() {
|
||||
</AnimatedSection>
|
||||
|
||||
{/* CENTER & RIGHT ARCH/CARD COMPOSITION */}
|
||||
<div className="flex-1 flex justify-center items-center mt-12 lg:mt-0 w-full">
|
||||
<div className="hidden lg:flex flex-1 justify-center items-center mt-12 lg:mt-0 w-full">
|
||||
|
||||
{/* px buffer on mobile/tablet so absolute badges don't overflow viewport */}
|
||||
<div className="relative px-[70px] lg:px-0">
|
||||
<div className="relative overflow-visible"> {/* The Arch Group Container */}
|
||||
|
||||
{/* Outer arch line decoration */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[280px] h-[420px] sm:w-[340px] sm:h-[480px] lg:w-[420px] lg:h-[570px] rounded-t-full border-t border-l border-r border-[#bc9e65]/40 z-0 pointer-events-none" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[280px] h-[420px] sm:w-[340px] sm:h-[480px] lg:w-[420px] lg:h-[570px] rounded-t-full z-0 pointer-events-none" />
|
||||
|
||||
{/* The Arch Image container */}
|
||||
<AnimatedSection variant="scaleUp" delay={0.2}>
|
||||
<div className="relative w-[260px] h-[380px] sm:w-[320px] sm:h-[460px] lg:w-[400px] lg:h-[550px] rounded-t-full overflow-hidden border-[6px] border-[#fdfaf4] shadow-[0_0_40px_rgba(0,0,0,0.1)] z-10">
|
||||
<div className="absolute inset-0 rounded-t-full border border-[#bc9e65]/30 z-20 pointer-events-none" />
|
||||
<Image
|
||||
<div className="relative w-[260px] h-[380px] sm:w-[320px] sm:h-[460px] lg:w-[400px] lg:h-[550px] rounded-t-full overflow-hidden z-10">
|
||||
<div className="absolute inset-0 rounded-t-full pointer-events-none" />
|
||||
{/* <Image
|
||||
src="/images/story_arch.png"
|
||||
alt="My Dosa Place"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
{/* Made With Love Badge (Overlapping left of arch) */}
|
||||
<AnimatedSection variant="fadeRight" delay={0.4} className="absolute top-1/2 -translate-y-1/2 -left-6 sm:-left-16 lg:-left-16 z-20">
|
||||
<div className="bg-[#0a4a2b] border border-[#bc9e65] rounded-2xl p-4 flex flex-col items-center justify-center w-[110px] h-[160px] shadow-xl relative">
|
||||
<div className="bg-[#0a4a2b] rounded-2xl p-4 flex flex-col items-center justify-center w-[110px] h-[160px] shadow-xl relative">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/40 rounded-xl pointer-events-none" />
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||
@ -308,7 +308,7 @@ export default function AboutPage() {
|
||||
<div className="relative w-full overflow-hidden">
|
||||
{/* Background image overlay */}
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none mix-blend-multiply opacity-50">
|
||||
<Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
|
||||
<Image src="/images/about/bg/our-values-bg.webp" alt="" fill className="object-cover object-center" />
|
||||
</div>
|
||||
|
||||
{/* Intricate Gold Border */}
|
||||
@ -484,23 +484,23 @@ export default function AboutPage() {
|
||||
|
||||
{/* Background texture for the whole section */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<Image src="/images/faq-bg.png" alt="" fill className="object-cover object-center" />
|
||||
<Image src="/images/about/bg/faq-bg.webp" alt="" fill className="object-cover object-center" />
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 min-h-[850px] flex flex-col lg:flex-row shadow-2xl rounded-xl lg:rounded-3xl overflow-hidden mb-12">
|
||||
<div className="relative max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 min-h-[850px] flex flex-col lg:flex-row rounded-xl lg:rounded-3xl overflow-hidden mb-12">
|
||||
|
||||
{/* ── LEFT: Ornate dark green panel ── */}
|
||||
<div className="relative flex-[1.2] lg:flex-none lg:w-[60%] z-20 flex flex-col justify-center">
|
||||
|
||||
{/* The Inset Gold Ornate Border */}
|
||||
<div className="absolute inset-4 lg:inset-6 border-[1.5px] border-[#bc9e65] rounded-xl lg:rounded-tr-[100px] lg:rounded-br-[100px] pointer-events-none" />
|
||||
<div className="absolute inset-4 lg:inset-6 rounded-xl lg:rounded-tr-[100px] lg:rounded-br-[100px] pointer-events-none" />
|
||||
|
||||
{/* Corner flourishes */}
|
||||
<div className="absolute top-6 left-6 w-12 h-12 border-t-2 border-l-2 border-[#bc9e65] pointer-events-none" />
|
||||
<div className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-[#bc9e65] pointer-events-none" />
|
||||
{/* <div className="absolute top-6 left-6 w-12 h-12 border-t-2 border-l-2 border-[#bc9e65] pointer-events-none" />
|
||||
<div className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-[#bc9e65] pointer-events-none" /> */}
|
||||
|
||||
{/* Hanging Lamp graphic (top left) */}
|
||||
<div className="absolute top-4 left-16 sm:left-24 w-12 h-32 pointer-events-none flex flex-col items-center">
|
||||
{/* <div className="absolute top-4 left-16 sm:left-24 w-12 h-32 pointer-events-none flex flex-col items-center">
|
||||
<div className="w-[1.5px] h-16 bg-[#bc9e65]" />
|
||||
<svg className="w-8 h-12 text-[#bc9e65]" viewBox="0 0 24 36" fill="currentColor">
|
||||
<path d="M4 12 L20 12 L16 20 L8 20 Z" />
|
||||
@ -509,20 +509,20 @@ export default function AboutPage() {
|
||||
<circle cx="12" cy="10" r="2" />
|
||||
<circle cx="12" cy="22" r="2" />
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Overlapping Lotus Emblem on the right edge */}
|
||||
<div className="absolute top-1/2 -right-10 -translate-y-1/2 w-20 h-20 bg-[#062013] rounded-full border-[1.5px] border-[#bc9e65] flex items-center justify-center z-30 hidden lg:flex shadow-xl">
|
||||
{/* <div className="absolute top-1/2 -right-10 -translate-y-1/2 w-20 h-20 bg-[#062013] rounded-full border-[1.5px] border-[#bc9e65] flex items-center justify-center z-30 hidden lg:flex shadow-xl">
|
||||
<svg className="w-10 h-10 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C12 2 15 7 15 11C15 15 12 18 12 18C12 18 9 15 9 11C9 7 12 2 12 2Z" />
|
||||
<path d="M12 2C12 2 18 7 20 11C22 15 18 18 18 18C18 18 16 15 15 11C14 7 12 2 12 2Z" opacity="0.7" />
|
||||
<path d="M12 2C12 2 6 7 4 11C2 15 6 18 6 18C6 18 8 15 9 11C10 7 12 2 12 2Z" opacity="0.7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<AnimatedSection variant="fadeUp" delay={0.1} className="relative z-10 flex flex-col items-center text-center mt-12">
|
||||
<AnimatedSection variant="fadeUp" delay={0.1} className="relative z-10 flex flex-col items-start text-left mt-12">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col items-center mb-10 w-full max-w-2xl mx-auto">
|
||||
<div className="flex flex-col items-start mb-10 w-full max-w-2xl">
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<div className="w-10 h-[1.5px] bg-[#bc9e65]" />
|
||||
<span className="font-sans text-[10px] sm:text-xs tracking-[0.3em] text-[#bc9e65] uppercase font-bold">We're Here To Help</span>
|
||||
@ -531,18 +531,18 @@ export default function AboutPage() {
|
||||
<h2 className="font-serif text-4xl sm:text-5xl lg:text-[54px] text-white tracking-wide mb-4 leading-tight">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<div className="flex items-center justify-start mb-6">
|
||||
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="font-sans text-[#e8dcb5] text-sm sm:text-base max-w-md mx-auto">
|
||||
<p className="font-sans text-[#e8dcb5] text-sm sm:text-base max-w-md">
|
||||
Find answers to common questions about our food, services and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* FAQ accordion */}
|
||||
<div className="space-y-4 w-full max-w-2xl mx-auto">
|
||||
<div className="space-y-4 w-full max-w-2xl">
|
||||
{[
|
||||
{
|
||||
q: "Do you offer vegan options?",
|
||||
@ -554,16 +554,16 @@ export default function AboutPage() {
|
||||
a: "We source our ingredients locally whenever possible and import authentic spices directly from South India.",
|
||||
icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M4 12c0-4.418 3.582-8 8-8s8 3.582 8 8M3 14h18M6 14v4a2 2 0 002 2h8a2 2 0 002-2v-4" /></svg>
|
||||
},
|
||||
{
|
||||
q: "Do you provide catering services?",
|
||||
a: "Yes, we offer catering for events of all sizes. Contact us for our specialized catering menu.",
|
||||
icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M8 9h8m-8 4h6m-3-9v4a5 5 0 00-5 5H4a7 7 0 017-7V4a1 1 0 011-1h2a1 1 0 011 1v4a7 7 0 017 7h-2a5 5 0 00-5-5V4" /></svg>
|
||||
},
|
||||
{
|
||||
q: "What are your opening hours?",
|
||||
a: "We are open from 11:30 AM to 10:00 PM from Tuesday to Sunday. We are closed on Mondays.",
|
||||
icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
}
|
||||
{
|
||||
q: "Do you provide catering services?",
|
||||
a: "Yes, we offer catering for events of all sizes. Contact us for our specialized catering menu.",
|
||||
icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M8 9h8m-8 4h6m-3-9v4a5 5 0 00-5 5H4a7 7 0 017-7V4a1 1 0 011-1h2a1 1 0 011 1v4a7 7 0 017 7h-2a5 5 0 00-5-5V4" /></svg>
|
||||
},
|
||||
{
|
||||
q: "What are your opening hours?",
|
||||
a: "We are open from 11:30 AM to 10:00 PM from Tuesday to Sunday. We are closed on Mondays.",
|
||||
icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
}
|
||||
].map((f, i) => {
|
||||
const isOpen = openFaq === i;
|
||||
return (
|
||||
@ -708,44 +708,14 @@ export default function AboutPage() {
|
||||
{/* ══════════════════════════════════════════
|
||||
SECTION 4 — CTA (sandstone bg, ornate border)
|
||||
══════════════════════════════════════════ */}
|
||||
<div className="relative w-full bg-[#fdfaf4] p-4 sm:p-6 lg:p-8">
|
||||
<div className="relative w-full overflow-hidden">
|
||||
|
||||
{/* The Outer Ornate Gold Border Container */}
|
||||
<div className="relative w-full border-[1.5px] border-[#bc9e65] min-h-[700px] flex flex-col justify-between overflow-visible">
|
||||
<div className="relative w-full min-h-[700px] flex flex-col justify-between overflow-hidden">
|
||||
|
||||
{/* Corner ornaments */}
|
||||
{/* Top Left */}
|
||||
<div className="absolute top-0 left-0 w-16 h-16 pointer-events-none">
|
||||
<svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
|
||||
<path d="M0,0 L50,0 Q50,50 0,50 Z" />
|
||||
<path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Top Right */}
|
||||
<div className="absolute top-0 right-0 w-16 h-16 pointer-events-none transform rotate-90">
|
||||
<svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
|
||||
<path d="M0,0 L50,0 Q50,50 0,50 Z" />
|
||||
<path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Bottom Left */}
|
||||
<div className="absolute bottom-0 left-0 w-16 h-16 pointer-events-none transform -rotate-90">
|
||||
<svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
|
||||
<path d="M0,0 L50,0 Q50,50 0,50 Z" />
|
||||
<path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Bottom Right */}
|
||||
<div className="absolute bottom-0 right-0 w-16 h-16 pointer-events-none transform rotate-180">
|
||||
<svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
|
||||
<path d="M0,0 L50,0 Q50,50 0,50 Z" />
|
||||
<path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Background Image: story_bg.png has the pots and leaves and temple/palace */}
|
||||
{/* Background Image: cta-bg.webp */}
|
||||
<div className="absolute inset-0 pointer-events-none z-0">
|
||||
<Image src="/images/story_bg.png" alt="" fill className="object-cover object-bottom opacity-80 mix-blend-multiply" />
|
||||
<Image src="/images/about/bg/cta-bg.webp" alt="" fill priority className="object-cover object-center" />
|
||||
</div>
|
||||
|
||||
{/* Center Content */}
|
||||
|
||||
@ -34,7 +34,7 @@ export default function ReservationPage() {
|
||||
<div className="relative w-full bg-[#fdfaf4] overflow-hidden flex flex-col justify-center py-24">
|
||||
|
||||
{/* Full Page Background with Pots and Temple */}
|
||||
{/* <div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image
|
||||
src="/images/about/bg/reservation-bg.webp"
|
||||
alt="Royal Background"
|
||||
@ -42,7 +42,7 @@ export default function ReservationPage() {
|
||||
priority
|
||||
className="object-cover object-bottom opacity-90 mix-blend-multiply"
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Ornate Page Border */}
|
||||
{/* <div className="absolute inset-4 sm:inset-8 border-[1.5px] border-[#bc9e65] pointer-events-none z-10 hidden md:block">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user