corrections, about strcture updated
This commit is contained in:
parent
9e4ab57004
commit
245a5ca43e
BIN
public/images/logo.png
Normal file
BIN
public/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
@ -35,27 +35,29 @@ const values = [
|
||||
label: "Quality",
|
||||
desc: "Every dish crafted with the finest ingredients.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-10 h-10">
|
||||
<path d="M24 4l5.5 11.2L42 17l-9 8.8 2.1 12.4L24 32.4 12.9 38.2 15 25.8 6 17l12.5-1.8z" />
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-8 h-8">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 14v4m-5-4h10m-8 4a3 3 0 006 0H9z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18.36 10a7.978 7.978 0 00-12.72 0" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4v3m0 0a2 2 0 100 4 2 2 0 000-4z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Sustainability",
|
||||
desc: "Our thinking practices support responsible.",
|
||||
desc: "Our thinking practices support responsible choices for a better tomorrow.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-10 h-10">
|
||||
<path d="M24 6c0 0-14 8-14 20a14 14 0 0028 0C38 14 24 6 24 6z" />
|
||||
<path d="M24 20v16M18 30l6-6 6 6" />
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-8 h-8">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 01-9-9c0-5 3.5-9 9-9s9 4 9 9a9 9 0 01-9 9z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21V9m-4 4l4-4 4 4" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Passion",
|
||||
desc: "Dedication and love poured into every recipe.",
|
||||
desc: "Dedication and love poured into every recipe we serve.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-10 h-10">
|
||||
<path d="M24 38s-14-8.5-14-18a8 8 0 0114-5.3A8 8 0 0138 20c0 9.5-14 18-14 18z" />
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-8 h-8">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
@ -63,14 +65,11 @@ const values = [
|
||||
label: "Community",
|
||||
desc: "Building bonds and bringing people together.",
|
||||
icon: (
|
||||
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-10 h-10">
|
||||
<circle cx="18" cy="18" r="6" />
|
||||
<circle cx="30" cy="18" r="6" />
|
||||
<path d="M6 40c0-6.6 5.4-12 12-12h12c6.6 0 12 5.4 12 12" />
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-8 h-8">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
/* ─── Page ──────────────────────────────────────────── */
|
||||
@ -85,122 +84,387 @@ export default function AboutPage() {
|
||||
<InnerBanner pageName="About" />
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
SECTION 1 — Welcome (sandstone bg)
|
||||
SECTION 1 — Welcome & Features (Image match)
|
||||
══════════════════════════════════════════ */}
|
||||
<div className="relative w-full">
|
||||
<div className="relative w-full bg-[#fdfaf4] overflow-hidden pt-16 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-center" />
|
||||
<Image src="/images/story_bg.png" alt="" fill priority className="object-cover object-left mix-blend-multiply" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-6xl mx-auto px-6 py-16 sm:py-20">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-6">
|
||||
{/* Top Row: 3 columns (Left Text, Center Arch, Right Card) */}
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-10">
|
||||
|
||||
{/* Text */}
|
||||
{/* LEFT COLUMN: Text */}
|
||||
<AnimatedSection variant="fadeLeft" delay={0.1}>
|
||||
<div className="select-text">
|
||||
<p className="font-sans text-[11px] tracking-[0.3em] text-[#8a6c3a] uppercase font-bold mb-3">
|
||||
Welcome to
|
||||
</p>
|
||||
<h1 className="font-serif text-4xl sm:text-5xl lg:text-[52px] text-[#1a3a25] leading-tight mb-6">
|
||||
My Dosa Place
|
||||
<div className="w-full lg:w-[400px] select-text z-20 relative">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<svg className="w-5 h-5 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>
|
||||
<p className="font-sans text-[11px] tracking-[0.2em] text-[#bc9e65] uppercase font-bold">
|
||||
WELCOME TO
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h1 className="font-serif text-5xl sm:text-[64px] leading-[1.1] mb-4">
|
||||
<span className="text-[#0a4a2b] block">My Dosa</span>
|
||||
<span className="text-[#bc9e65] block">Place</span>
|
||||
</h1>
|
||||
<div className="w-16 h-[1.5px] bg-[#bc9e65] mb-6" />
|
||||
<p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-4">
|
||||
Nestled in the heart of Waterloo, My Dosa Place is a celebration of authentic South Indian cuisine — where every dish tells a story rooted in tradition, love, and the finest ingredients.
|
||||
|
||||
{/* Divider */}
|
||||
<div className="flex items-center gap-3 w-48 mb-6">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
|
||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||
</svg>
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
|
||||
</div>
|
||||
|
||||
<h3 className="font-sans text-sm tracking-widest text-[#0a4a2b] uppercase font-bold mb-4">
|
||||
AUTHENTIC SOUTH INDIAN CUISINE
|
||||
</h3>
|
||||
|
||||
<p className="font-sans text-[#4a3c28] text-sm leading-relaxed mb-8 pr-4">
|
||||
Nestled in the heart of Waterloo, My Dosa Place is a 100% pure vegetarian South Indian restaurant built around one craft: the dosa — where every dish tells a story rooted in tradition, love, and the finest ingredients.
|
||||
</p>
|
||||
<p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-4">
|
||||
From our crispy, golden dosas to rich, aromatic curries, each recipe has been carefully crafted to honour the culinary heritage of South India. We believe that great food brings people together, and that every meal should be an experience to remember.
|
||||
</p>
|
||||
<p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-8">
|
||||
Our doors are open to families, friends, and anyone seeking a warm and cozy dining experience, from the streets of Waterloo all the way to South Indian flavours.
|
||||
</p>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 px-8 py-3.5 bg-[#1a3a25] hover:bg-[#8a6c3a] text-white font-sans font-bold text-[10px] tracking-widest uppercase transition-all duration-300 shadow-md hover:shadow-lg rounded-sm mt-2"
|
||||
>
|
||||
Contact Us <span className="text-sm leading-none">→</span>
|
||||
</Link>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-6">
|
||||
<Link
|
||||
href="/menu"
|
||||
className="inline-flex items-center gap-3 px-6 py-3 bg-[#0a4a2b] hover:bg-[#163823] text-white font-sans font-bold text-[11px] tracking-widest uppercase transition-all duration-300 rounded-md"
|
||||
>
|
||||
EXPLORE MENU <span>→</span>
|
||||
</Link>
|
||||
|
||||
<button className="flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] group-hover:bg-[#bc9e65] group-hover:text-white transition-all">
|
||||
<svg className="w-3.5 h-3.5 ml-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="font-sans text-[11px] font-bold tracking-widest text-[#bc9e65] uppercase">
|
||||
OUR STORY
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
{/* Photo */}
|
||||
<AnimatedSection variant="fadeRight" delay={0.2}>
|
||||
<div className="relative flex justify-center lg:justify-end items-center">
|
||||
<div className="relative shadow-2xl border-4 border-white/60 rounded-sm inline-flex">
|
||||
<Image
|
||||
src="/images/about.png"
|
||||
alt="My Dosa Place exterior"
|
||||
width={600}
|
||||
height={800}
|
||||
className="w-full h-auto object-contain max-w-[500px]"
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="absolute -bottom-4 -right-4 w-24 h-24 pointer-events-none opacity-60 select-none hidden lg:block">
|
||||
<Image src="/images/menu_leaf_right.png" alt="" fill className="object-contain" />
|
||||
</div> */}
|
||||
{/* CENTER & RIGHT ARCH/CARD COMPOSITION */}
|
||||
<div className="flex-1 flex justify-center lg:justify-end items-center mt-12 lg:mt-0 lg:pl-10">
|
||||
|
||||
<div className="relative"> {/* 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-[340px] h-[500px] sm:w-[420px] sm:h-[570px] rounded-t-full border-t border-l border-r border-[#bc9e65]/40 z-0 pointer-events-none" />
|
||||
|
||||
{/* The Arch Image container */}
|
||||
<AnimatedSection variant="scaleUp" delay={0.2}>
|
||||
<div className="relative w-[320px] h-[480px] sm:w-[400px] sm: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
|
||||
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-8 lg:-left-12 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="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" />
|
||||
</svg>
|
||||
<span className="font-sans text-[11px] tracking-widest text-white uppercase text-center font-bold leading-tight mb-3">
|
||||
MADE<br />WITH<br />LOVE
|
||||
</span>
|
||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
||||
</svg>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
{/* Right Card (Overlapping right of arch) */}
|
||||
<AnimatedSection variant="fadeLeft" delay={0.5} className="absolute top-10 -right-4 lg:-right-24 z-20 hidden md:block">
|
||||
<div className="bg-[#fdfaf4] border border-[#bc9e65] rounded-3xl p-8 w-[260px] shadow-2xl relative">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/30 rounded-[20px] pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center text-center pt-2">
|
||||
<p className="font-serif italic text-[#bc9e65] text-lg mb-1">A Taste of</p>
|
||||
<h4 className="font-serif text-[#0a4a2b] text-lg font-bold leading-snug tracking-wide uppercase mb-3">
|
||||
TRADITION<br />MADE WITH<br />PASSION
|
||||
</h4>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="flex items-center gap-2 w-full justify-center mb-6">
|
||||
<div className="h-[1px] w-8 bg-[#bc9e65]" />
|
||||
<svg className="w-4 h-4 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 className="h-[1px] w-8 bg-[#bc9e65]" />
|
||||
</div>
|
||||
|
||||
<ul className="w-full flex flex-col gap-4 text-left">
|
||||
<li className="flex items-center gap-4">
|
||||
<svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z M12 12v6 m-4-3h8" /></svg>
|
||||
<span className="font-sans text-sm text-[#0a4a2b] font-medium">Every meal.</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-4">
|
||||
<svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
||||
<span className="font-sans text-sm text-[#0a4a2b] font-medium">Every guest.</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-4">
|
||||
<svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
|
||||
<span className="font-sans text-sm text-[#0a4a2b] font-medium">Every time.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Leaves bg bottom right */}
|
||||
<div className="absolute bottom-0 right-0 w-24 h-24 opacity-30 pointer-events-none rounded-br-3xl overflow-hidden">
|
||||
<Image src="/images/menu_leaf_clean.png" alt="" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTTOM PILL ROW */}
|
||||
{/* <AnimatedSection variant="fadeUp" delay={0.6}>
|
||||
<div className="mt-20 w-full rounded-[40px] bg-[#fcf9f2] border border-[#eaddc4] shadow-md flex flex-col md:flex-row items-stretch overflow-hidden min-h-[140px]">
|
||||
|
||||
<div className="relative w-full md:w-[25%] h-48 md:h-auto hidden md:block">
|
||||
<Image src="/images/south_indian_thali_luxury.png" alt="Dosa" fill className="object-cover" />
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex-1 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6 p-6 lg:p-8">
|
||||
|
||||
<div className="flex items-center gap-3 lg:gap-4">
|
||||
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-[#0a4a2b] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-5 h-5 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col flex-1">
|
||||
<span className="font-sans font-bold text-[10px] lg:text-[11px] tracking-[0.15em] text-[#0a4a2b] uppercase mb-1 leading-tight">AUTHENTIC RECIPES</span>
|
||||
<span className="font-sans text-[9px] lg:text-[10px] text-stone-500 leading-snug pr-2">Traditional recipes passed down through generations.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 lg:gap-4 sm:border-l border-[#eaddc4] pt-4 sm:pt-0 sm:pl-6 border-t sm:border-t-0">
|
||||
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-[#0a4a2b] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-5 h-5 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col flex-1">
|
||||
<span className="font-sans font-bold text-[10px] lg:text-[11px] tracking-[0.15em] text-[#0a4a2b] uppercase mb-1 leading-tight">FINEST INGREDIENTS</span>
|
||||
<span className="font-sans text-[9px] lg:text-[10px] text-stone-500 leading-snug pr-2">Handpicked ingredients for rich, natural and authentic flavours.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 lg:gap-4 xl:border-l border-[#eaddc4] pt-4 xl:pt-0 xl:pl-6 border-t xl:border-t-0">
|
||||
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-[#0a4a2b] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-5 h-5 lg:w-6 lg:h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L8 8h8l-4-6zm-5 7v13h10V9H7zm2 2h6v2H9v-2zm0 4h6v2H9v-2zm0 4h6v2H9v-2z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col flex-1">
|
||||
<span className="font-sans font-bold text-[10px] lg:text-[11px] tracking-[0.15em] text-[#0a4a2b] uppercase mb-1 leading-tight">HERITAGE & CULTURE</span>
|
||||
<span className="font-sans text-[9px] lg:text-[10px] text-stone-500 leading-snug pr-2">Honouring the culinary heritage of South India in every dish.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 lg:gap-4 sm:border-l border-[#eaddc4] pt-4 sm:pt-0 sm:pl-6 border-t sm:border-t-0 xl:border-t-0">
|
||||
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full bg-[#0a4a2b] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-5 h-5 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col flex-1">
|
||||
<span className="font-sans font-bold text-[10px] lg:text-[11px] tracking-[0.15em] text-[#0a4a2b] uppercase mb-1 leading-tight">WARM AMBIENCE</span>
|
||||
<span className="font-sans text-[9px] lg:text-[10px] text-stone-500 leading-snug pr-2">A cozy space where good food and great memories are made.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="relative w-full md:w-[20%] h-48 md:h-auto hidden md:block">
|
||||
<Image src="/images/my_dosa_place_interior.png" alt="Interior" fill className="object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
SECTION 2 — Our Values (dark green bg)
|
||||
══════════════════════════════════════════ */}
|
||||
<div className="relative w-full bg-[#04120a]">
|
||||
<div className="absolute inset-0 pointer-events-none select-none">
|
||||
<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" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-[#040d08]/70 pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 max-w-6xl mx-auto px-6 py-20 sm:py-24 text-center">
|
||||
<AnimatedSection variant="fadeUp" delay={0}>
|
||||
<h2 className="font-serif text-3xl sm:text-[40px] text-[#e8dcb5] tracking-wider mb-20">
|
||||
Our Values
|
||||
{/* Intricate Gold Border */}
|
||||
<div className="absolute inset-4 z-10 border border-[#bc9e65]/40 rounded-xl pointer-events-none">
|
||||
{/* Corner ornaments */}
|
||||
<div className="absolute -top-1 -left-1 w-6 h-6 border-t-2 border-l-2 border-[#bc9e65]" />
|
||||
<div className="absolute -top-1 -right-1 w-6 h-6 border-t-2 border-r-2 border-[#bc9e65]" />
|
||||
<div className="absolute -bottom-1 -left-1 w-6 h-6 border-b-2 border-l-2 border-[#bc9e65]" />
|
||||
<div className="absolute -bottom-1 -right-1 w-6 h-6 border-b-2 border-r-2 border-[#bc9e65]" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-20 max-w-7xl mx-auto px-6 py-20 sm:py-24 flex flex-col items-center text-center">
|
||||
{/* Header */}
|
||||
<AnimatedSection variant="fadeUp" delay={0} className="flex flex-col items-center">
|
||||
{/* Lotus icon top */}
|
||||
<svg className="w-8 h-8 text-[#bc9e65] mb-4" 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>
|
||||
<h2 className="font-serif text-5xl sm:text-[64px] text-white uppercase tracking-wider mb-4 leading-none">
|
||||
OUR VALUES
|
||||
</h2>
|
||||
<div className="flex items-center gap-3 w-48 mb-6 justify-center">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
|
||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||
</svg>
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
|
||||
</div>
|
||||
<p className="font-sans text-[#bc9e65] text-lg sm:text-xl tracking-wide leading-relaxed">
|
||||
Rooted in tradition. Crafted with passion.<br />Served with love.
|
||||
</p>
|
||||
<div className="flex justify-center mt-6 mb-16">
|
||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 sm:gap-0">
|
||||
{/* Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full mb-20 relative">
|
||||
{/* Decorators between cards */}
|
||||
<div className="hidden lg:block absolute left-1/4 top-1/2 -translate-y-1/2 -ml-2 z-30">
|
||||
<div className="w-3 h-3 rotate-45 border border-[#bc9e65] bg-[#0a2e1f]" />
|
||||
</div>
|
||||
<div className="hidden lg:block absolute left-2/4 top-1/2 -translate-y-1/2 -ml-2 z-30">
|
||||
<div className="w-3 h-3 rotate-45 border border-[#bc9e65] bg-[#0a2e1f]" />
|
||||
</div>
|
||||
<div className="hidden lg:block absolute left-3/4 top-1/2 -translate-y-1/2 -ml-2 z-30">
|
||||
<div className="w-3 h-3 rotate-45 border border-[#bc9e65] bg-[#0a2e1f]" />
|
||||
</div>
|
||||
|
||||
{values.map((v, i) => (
|
||||
<AnimatedSection key={v.label} variant="fadeUp" delay={i * 0.12}>
|
||||
<div
|
||||
className={`flex flex-col items-center text-center group ${i !== values.length - 1 ? 'md:border-r border-[#bc9e65]/20' : ''
|
||||
} px-4 sm:px-8`}
|
||||
>
|
||||
<div className="relative flex items-center justify-center mb-6">
|
||||
{/* subtle glow behind icon */}
|
||||
<div className="absolute inset-0 bg-[#163823] rounded-full blur-[20px] scale-[1.5] opacity-50 group-hover:opacity-80 transition-opacity duration-300"></div>
|
||||
<div className="relative z-10 text-[#bc9e65] group-hover:scale-110 transition-transform duration-300">
|
||||
{v.icon}
|
||||
</div>
|
||||
<AnimatedSection key={v.label} variant="fadeUp" delay={i * 0.1}>
|
||||
<div className="relative group bg-[#0a2e1f] border border-[#bc9e65] rounded-t-[50px] rounded-b-xl px-6 py-12 flex flex-col items-center text-center shadow-[0_10px_30px_rgba(0,0,0,0.5)] transition-transform duration-300 hover:-translate-y-2 h-full z-20">
|
||||
{/* Scalloped top inner border approximation */}
|
||||
<div className="absolute inset-2 border border-[#bc9e65]/30 rounded-t-[42px] rounded-b-lg pointer-events-none" />
|
||||
|
||||
{/* Gold Circular Icon */}
|
||||
<div className="w-[84px] h-[84px] rounded-full border-[2px] border-[#bc9e65] bg-gradient-to-br from-[#bc9e65]/20 to-transparent flex items-center justify-center text-[#bc9e65] mb-8 relative shadow-[0_0_15px_rgba(188,158,101,0.2)]">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/50 rounded-full" />
|
||||
{v.icon}
|
||||
</div>
|
||||
<h3 className="font-serif text-[#bc9e65] text-lg mb-3 tracking-wide">{v.label}</h3>
|
||||
<p className="font-sans text-[#e8dcb5]/70 text-[11px] uppercase tracking-widest leading-[1.8]">{v.desc}</p>
|
||||
|
||||
<h3 className="font-serif text-white text-xl sm:text-2xl uppercase tracking-widest mb-4">
|
||||
{v.label}
|
||||
</h3>
|
||||
<div className="flex justify-center mb-5">
|
||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="font-sans text-stone-200 text-sm leading-relaxed px-2">
|
||||
{v.desc}
|
||||
</p>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<AnimatedSection variant="fadeUp" delay={0.4} className="w-full">
|
||||
<div className="rounded-3xl lg:rounded-full bg-[#0a2e1f] border border-[#bc9e65] px-6 sm:px-8 py-8 sm:py-10 lg:py-6 shadow-xl relative w-full overflow-hidden">
|
||||
<div className="absolute inset-1 sm:inset-1.5 lg:inset-1 border border-[#bc9e65]/30 rounded-3xl lg:rounded-full pointer-events-none" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 lg:gap-4 relative z-10">
|
||||
{/* 1 */}
|
||||
<div className="flex items-center sm:justify-center gap-4 lg:border-r border-[#bc9e65]/30">
|
||||
<div className="text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6 sm:w-7 sm:h-7 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-sans font-bold text-[11px] sm:text-[12px] lg:text-[11px] tracking-widest text-[#bc9e65] uppercase mb-0.5">AUTHENTIC FLAVOURS</span>
|
||||
<span className="font-sans text-[10px] sm:text-[11px] lg:text-[10px] text-stone-300 leading-tight">True taste of South India</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 2 */}
|
||||
<div className="flex items-center sm:justify-center gap-4 lg:border-r border-[#bc9e65]/30">
|
||||
<div className="text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6 sm:w-7 sm:h-7 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-sans font-bold text-[11px] sm:text-[12px] lg:text-[11px] tracking-widest text-[#bc9e65] uppercase mb-0.5">FINEST INGREDIENTS</span>
|
||||
<span className="font-sans text-[10px] sm:text-[11px] lg:text-[10px] text-stone-300 leading-tight">Handpicked with care</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 3 */}
|
||||
<div className="flex items-center sm:justify-center gap-4 lg:border-r border-[#bc9e65]/30">
|
||||
<div className="text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6 sm:w-7 sm:h-7 lg:w-6 lg:h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L8 8h8l-4-6zm-5 7v13h10V9H7zm2 2h6v2H9v-2zm0 4h6v2H9v-2zm0 4h6v2H9v-2z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-sans font-bold text-[11px] sm:text-[12px] lg:text-[11px] tracking-widest text-[#bc9e65] uppercase mb-0.5">TIMELESS TRADITION</span>
|
||||
<span className="font-sans text-[10px] sm:text-[11px] lg:text-[10px] text-stone-300 leading-tight">Honouring our heritage</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 4 */}
|
||||
<div className="flex items-center sm:justify-center gap-4">
|
||||
<div className="text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6 sm:w-7 sm:h-7 lg:w-6 lg:h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-sans font-bold text-[11px] sm:text-[12px] lg:text-[11px] tracking-widest text-[#bc9e65] uppercase mb-0.5">WARM HOSPITALITY</span>
|
||||
<span className="font-sans text-[10px] sm:text-[11px] lg:text-[10px] text-stone-300 leading-tight">Making you feel at home</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
SECTION 2.5 — Testimonials (sandstone bg)
|
||||
══════════════════════════════════════════ */}
|
||||
<div className="relative w-full">
|
||||
<div className="relative w-full bg-[#fdfaf4] overflow-hidden">
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image src="/images/story_bg.png" alt="" fill className="object-cover object-center" />
|
||||
<Image src="/images/menu_bg_traditional.png" alt="" fill className="object-cover object-center opacity-60 mix-blend-multiply" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-[#f5e9d0]/40 pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 max-w-6xl mx-auto px-6 py-16 sm:py-20 text-center">
|
||||
<AnimatedSection variant="fadeUp">
|
||||
<div className="relative z-10 max-w-6xl mx-auto px-6 py-20 sm:py-24 text-center">
|
||||
<AnimatedSection variant="fadeUp" className="flex flex-col items-center">
|
||||
{/* Top Crown icon */}
|
||||
<div className="relative flex items-center justify-center mb-4">
|
||||
<svg className="w-8 h-8 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p className="font-sans text-[11px] tracking-[0.3em] text-[#8a6c3a] uppercase font-bold mb-3">
|
||||
Words of Love
|
||||
</p>
|
||||
<h2 className="font-serif text-3xl sm:text-4xl text-[#1a3a25] tracking-wider mb-3">
|
||||
What Our Guests Say
|
||||
<h2 className="font-serif text-4xl sm:text-5xl text-[#1a3a25] tracking-wider mb-2">
|
||||
WHAT OUR GUESTS SAY
|
||||
</h2>
|
||||
<div className="w-16 h-[1.5px] bg-[#bc9e65] mx-auto mb-14" />
|
||||
|
||||
<div className="flex items-center gap-3 w-48 mx-auto mb-14 justify-center">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
|
||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||
</svg>
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
<TestimonialSlider />
|
||||
@ -208,121 +472,384 @@ export default function AboutPage() {
|
||||
</div>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
SECTION 3 — FAQ (full-width split layout)
|
||||
LEFT: dark green bg + accordion
|
||||
RIGHT: interior photo full height
|
||||
SECTION 3 — FAQ (dark green & gold ornate split layout)
|
||||
══════════════════════════════════════════ */}
|
||||
<div className="w-full flex flex-col lg:flex-row" style={{ minHeight: "420px" }}>
|
||||
<div className="relative w-full bg-[#04120a] overflow-hidden pt-10 pb-40">
|
||||
|
||||
{/* ── LEFT: dark green panel ── */}
|
||||
<div className="relative flex-1 bg-[#071a0e]">
|
||||
{/* subtle bg texture */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-[#050f08]/65 pointer-events-none" />
|
||||
{/* Background texture for the whole section */}
|
||||
<div className="absolute inset-0 pointer-events-none opacity-30">
|
||||
<Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
|
||||
</div>
|
||||
|
||||
{/* gold border – right edge only on desktop, bottom edge on mobile */}
|
||||
<div className="absolute top-0 right-0 bottom-0 w-px bg-[#bc9e65]/30 hidden lg:block" />
|
||||
<div className="relative max-w-[1400px] mx-auto min-h-[850px] flex flex-col lg:flex-row shadow-2xl rounded-xl lg:rounded-3xl overflow-hidden mb-12">
|
||||
|
||||
<div className="relative z-10 px-8 sm:px-12 lg:px-16 py-12 lg:py-16">
|
||||
<AnimatedSection variant="fadeLeft" delay={0.1}>
|
||||
<h2 className="font-serif text-3xl sm:text-4xl text-white tracking-wide mb-8">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
{/* ── LEFT: Ornate dark green panel ── */}
|
||||
<div className="relative flex-[1.2] lg:flex-none lg:w-[60%] bg-[#062013] z-20 p-6 sm:p-10 lg:p-16 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" />
|
||||
|
||||
{/* 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" />
|
||||
|
||||
{/* 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="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" />
|
||||
<path d="M12 24 L12 36" stroke="currentColor" strokeWidth="1.5" />
|
||||
<path d="M12 0 L12 12" stroke="currentColor" strokeWidth="1.5" />
|
||||
<circle cx="12" cy="10" r="2" />
|
||||
<circle cx="12" cy="22" r="2" />
|
||||
</svg>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<AnimatedSection variant="fadeUp" delay={0.1} className="relative z-10 flex flex-col items-center text-center mt-12">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col items-center mb-10 w-full max-w-2xl mx-auto">
|
||||
<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>
|
||||
<div className="w-10 h-[1.5px] bg-[#bc9e65]" />
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
Find answers to common questions about our food, services and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* FAQ accordion */}
|
||||
<div className="space-y-2">
|
||||
{faqs.map((f, i) => {
|
||||
<div className="space-y-4 w-full max-w-2xl mx-auto">
|
||||
{[
|
||||
{
|
||||
q: "Do you offer vegan options?",
|
||||
a: "Yes! We have a wide range of delicious vegan dishes made with the finest ingredients.",
|
||||
icon: <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22C12 22 4 16 4 10C4 5.58 7.58 2 12 2C16.42 2 20 5.58 20 10C20 16 12 22 12 22Z" opacity="0.8" /><path d="M12 2C7.58 2 4 5.58 4 10C4 16 12 22 12 22V2Z" /></svg>
|
||||
},
|
||||
{
|
||||
q: "Where do you source your ingredients?",
|
||||
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>
|
||||
}
|
||||
].map((f, i) => {
|
||||
const isOpen = openFaq === i;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`border border-[#bc9e65]/25 cursor-pointer transition-colors duration-300 rounded-sm overflow-hidden ${isOpen ? "bg-[#0a2012]" : "bg-[#091810] hover:bg-[#0c2016]"
|
||||
}`}
|
||||
className={`border border-[#bc9e65] rounded-2xl overflow-hidden cursor-pointer transition-all duration-300 relative
|
||||
${isOpen ? "bg-[#0a2e1f] shadow-inner" : "bg-[#062013] hover:bg-[#0a2a1c]"}`}
|
||||
onClick={() => setOpenFaq(isOpen ? null : i)}
|
||||
>
|
||||
{/* question row */}
|
||||
<div className="flex items-center justify-between px-5 py-4 gap-4">
|
||||
<span className={`font-sans text-sm tracking-wide transition-colors duration-300 ${isOpen ? "text-white" : "text-stone-300"
|
||||
}`}>
|
||||
{f.q}
|
||||
</span>
|
||||
<motion.span
|
||||
animate={{ rotate: isOpen ? 45 : 0 }}
|
||||
transition={{ duration: 0.25, ease: "easeInOut" }}
|
||||
className="text-[#bc9e65] text-2xl leading-none shrink-0 font-light select-none"
|
||||
>
|
||||
+
|
||||
</motion.span>
|
||||
</div>
|
||||
{/* answer — smooth height animation */}
|
||||
<AnimatePresence initial={false}>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
key="answer"
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
style={{ overflow: "hidden" }}
|
||||
<div className="flex items-center justify-between px-5 py-4 sm:px-8 sm:py-5 gap-4 relative z-10">
|
||||
{/* Icon on left */}
|
||||
<div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-full border border-[#bc9e65] text-[#bc9e65]">
|
||||
{f.icon}
|
||||
</div>
|
||||
|
||||
{/* Text Content */}
|
||||
<div className="flex-1">
|
||||
<span className={`font-serif text-base sm:text-lg tracking-wide transition-colors duration-300 ${isOpen ? "text-white" : "text-white"}`}>
|
||||
{f.q}
|
||||
</span>
|
||||
|
||||
<AnimatePresence initial={false}>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0, marginTop: 0 }}
|
||||
animate={{ height: "auto", opacity: 1, marginTop: 12 }}
|
||||
exit={{ height: 0, opacity: 0, marginTop: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{ overflow: "hidden" }}
|
||||
>
|
||||
<p className="font-sans text-[#e8dcb5] text-sm leading-relaxed tracking-wide pb-2 pr-4 border-t border-[#bc9e65]/20 pt-4">
|
||||
{f.a}
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Right plus/minus indicator */}
|
||||
<div className="shrink-0 flex items-center justify-center w-8 h-8 rounded-full border border-[#bc9e65] text-[#bc9e65]">
|
||||
<motion.span
|
||||
animate={{ rotate: isOpen ? 180 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="text-lg leading-none font-light"
|
||||
>
|
||||
<p className="font-sans text-stone-300 text-sm leading-relaxed px-5 pb-5 tracking-wide">
|
||||
{f.a}
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
{isOpen ? "−" : "+"}
|
||||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Still have questions block */}
|
||||
<div className="mt-8 w-[95%] sm:w-[85%] max-w-xl mx-auto border border-[#bc9e65] rounded-2xl bg-[#082418] px-6 py-5 flex flex-col sm:flex-row items-center justify-between gap-4 sm:gap-6 shadow-md relative">
|
||||
<div className="flex items-center gap-4 relative z-10">
|
||||
<div className="w-10 h-10 rounded-full border border-[#bc9e65] text-[#bc9e65] flex items-center justify-center shrink-0">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-serif text-[#bc9e65] text-lg tracking-wide">Still have questions?</span>
|
||||
<span className="font-sans text-[#e8dcb5] text-xs uppercase tracking-wider">We're happy to help!</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="relative z-10 px-8 py-3 bg-gradient-to-r from-[#d9b876] to-[#bc9e65] hover:from-[#e8dcb5] hover:to-[#d9b876] text-[#1a3a25] font-serif font-bold text-xs tracking-widest uppercase transition-all duration-300 rounded shadow-md shrink-0 whitespace-nowrap border-[1.5px] border-[#bc9e65]"
|
||||
>
|
||||
CONTACT US →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
|
||||
{/* ── RIGHT: photo full height ── */}
|
||||
<div className="relative w-full lg:w-[40%] min-h-[400px] lg:min-h-0 z-0 bg-[#062013]">
|
||||
<Image
|
||||
src="/images/my_dosa_place_interior.png"
|
||||
alt="My Dosa Place interior"
|
||||
fill
|
||||
className="object-cover object-center"
|
||||
/>
|
||||
{/* Dark gradient overlay matching reference */}
|
||||
<div className="absolute inset-0 bg-gradient-to-l from-transparent via-[#062013]/20 to-[#062013] opacity-90" />
|
||||
|
||||
{/* Hanging lights accents in the photo side */}
|
||||
<div className="absolute top-10 right-10 flex items-center justify-center w-8 h-8 rounded-full border border-[#bc9e65] text-[#bc9e65]">
|
||||
<div className="w-2 h-2 rounded-full bg-[#bc9e65]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ── RIGHT: photo full height ── */}
|
||||
<div className="relative w-full lg:w-[42%] min-h-[280px] lg:min-h-0">
|
||||
<Image
|
||||
src="/images/my_dosa_place_interior.png"
|
||||
alt="My Dosa Place interior"
|
||||
fill
|
||||
className="object-cover object-center"
|
||||
/>
|
||||
{/* warm dark fade on the left edge blending into green panel */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#050f08]/50 via-transparent to-transparent" />
|
||||
{/* ── BOTTOM FEATURE BAR ── */}
|
||||
<div className="relative max-w-[1400px] mx-auto w-[78%] bg-[#062013] border border-[#bc9e65] rounded-full px-8 py-6 shadow-2xl z-30 mb-8 mt-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 relative z-10">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex items-center gap-4 lg:border-r border-[#bc9e65]/30">
|
||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><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>
|
||||
<div className="flex flex-col text-left pr-4">
|
||||
<span className="font-serif text-[11px] sm:text-xs tracking-widest text-white uppercase mb-1">AUTHENTIC RECIPES</span>
|
||||
<span className="font-sans text-[10px] text-[#e8dcb5] leading-snug">Traditional flavours passed down through generations.</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature 2 */}
|
||||
<div className="flex items-center gap-4 lg:border-r border-[#bc9e65]/30">
|
||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left pr-4">
|
||||
<span className="font-serif text-[11px] sm:text-xs tracking-widest text-white uppercase mb-1">FINEST INGREDIENTS</span>
|
||||
<span className="font-sans text-[10px] text-[#e8dcb5] leading-snug">Handpicked ingredients for exceptional taste.</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature 3 */}
|
||||
<div className="flex items-center gap-4 lg:border-r border-[#bc9e65]/30">
|
||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left pr-4">
|
||||
<span className="font-serif text-[11px] sm:text-xs tracking-widest text-white uppercase mb-1">MADE WITH LOVE</span>
|
||||
<span className="font-sans text-[10px] text-[#e8dcb5] leading-snug">Every dish is crafted with passion and care.</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature 4 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-serif text-[11px] sm:text-xs tracking-widest text-white uppercase mb-1">WARM HOSPITALITY</span>
|
||||
<span className="font-sans text-[10px] text-[#e8dcb5] leading-snug">A cozy place where every guest feels like family.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ══════════════════════════════════════════
|
||||
SECTION 4 — CTA (sandstone bg)
|
||||
SECTION 4 — CTA (sandstone bg, ornate border)
|
||||
══════════════════════════════════════════ */}
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image src="/images/menu_bg_traditional.png" alt="" fill className="object-cover object-center" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-[#f5e9d0]/30 pointer-events-none" />
|
||||
<div className="relative w-full bg-[#fdfaf4] p-4 sm:p-6 lg:p-8">
|
||||
|
||||
{/* 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">
|
||||
|
||||
{/* 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 */}
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
{/* Center Content */}
|
||||
<div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 pt-14 sm:pt-24 pb-8 flex flex-col items-center text-center">
|
||||
|
||||
{/* Top Lotus Icon with wings */}
|
||||
<div className="flex items-center justify-center gap-4 mb-4">
|
||||
<div className="w-12 h-[1.5px] bg-gradient-to-r from-transparent to-[#bc9e65]" />
|
||||
<svg className="w-8 h-8 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 className="w-12 h-[1.5px] bg-gradient-to-l from-transparent to-[#bc9e65]" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-3xl mx-auto px-6 py-20 sm:py-24 text-center">
|
||||
<AnimatedSection variant="scaleUp" delay={0}>
|
||||
<p className="font-sans text-[11px] tracking-[0.3em] text-[#8a6c3a] uppercase font-bold mb-4">
|
||||
Come Dine With Us
|
||||
</p>
|
||||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl text-[#1a3a25] tracking-wide leading-tight mb-4">
|
||||
Experience the Taste of Tradition
|
||||
|
||||
<h2 className="font-serif text-2xl sm:text-4xl lg:text-6xl text-[#1a3a25] tracking-wide leading-tight mb-2">
|
||||
EXPERIENCE THE TASTE OF
|
||||
</h2>
|
||||
<div className="w-16 h-[1.5px] bg-[#bc9e65] mx-auto mb-6" />
|
||||
<p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-10 max-w-xl mx-auto">
|
||||
|
||||
<h2 className="font-serif text-5xl sm:text-7xl lg:text-[100px] text-transparent bg-clip-text bg-gradient-to-b from-[#d9b876] to-[#8a6c3a] tracking-widest leading-none mb-6 drop-shadow-sm font-bold" style={{ textShadow: "0px 4px 15px rgba(188,158,101,0.3)" }}>
|
||||
TRADITION
|
||||
</h2>
|
||||
|
||||
<div className="flex justify-center mb-8">
|
||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p className="font-sans text-[#4a3c28] text-sm sm:text-base leading-relaxed tracking-wide mb-10 max-w-lg mx-auto">
|
||||
Visit us or order online and let every bite take you on a journey of authentic South Indian flavors.
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href="/reservation"
|
||||
className="inline-flex items-center gap-3 px-10 py-4 bg-[#1a3a25] hover:bg-[#0c2419] text-[#bc9e65] font-sans font-bold text-sm tracking-widest uppercase transition-all duration-300 shadow-lg hover:shadow-xl rounded-sm"
|
||||
className="inline-flex items-center gap-3 px-8 sm:px-12 py-4 sm:py-5 bg-gradient-to-r from-[#e8dcb5] via-[#d9b876] to-[#e8dcb5] text-[#1a3a25] font-sans font-bold text-[12px] sm:text-[13px] tracking-widest uppercase transition-all duration-300 shadow-[0_10px_20px_rgba(188,158,101,0.3)] hover:shadow-[0_15px_25px_rgba(188,158,101,0.4)] hover:-translate-y-1 relative"
|
||||
style={{
|
||||
clipPath: "polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px)"
|
||||
}}
|
||||
>
|
||||
Reserve a Table
|
||||
{/* Inner subtle border effect */}
|
||||
<div className="absolute inset-[3px] border border-[#8a6c3a]/30 pointer-events-none" style={{
|
||||
clipPath: "polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px)"
|
||||
}} />
|
||||
|
||||
<svg className="w-5 h-5 relative z-10 text-[#1a3a25]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" 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>
|
||||
<span className="relative z-10">RESERVE A TABLE</span>
|
||||
</Link>
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar inserted here */}
|
||||
<div className="relative z-10 w-[95%] max-w-[1200px] mx-auto mb-10 mt-12 bg-[#fdfaf4]/90 backdrop-blur-sm border border-[#bc9e65] rounded-xl px-6 py-8 shadow-[0_15px_30px_rgba(0,0,0,0.05)]" style={{
|
||||
clipPath: "polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px)"
|
||||
}}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 relative z-10">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex items-center justify-center gap-4 lg:border-r border-[#bc9e65]/30 px-2">
|
||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><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>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-serif text-[10px] sm:text-[11px] tracking-widest text-[#1a3a25] uppercase font-bold mb-1">AUTHENTIC RECIPES</span>
|
||||
<span className="font-sans text-[9px] sm:text-[10px] text-[#4a3c28] leading-snug">Traditional flavors passed down through generations.</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature 2 */}
|
||||
<div className="flex items-center justify-center gap-4 lg:border-r border-[#bc9e65]/30 px-2">
|
||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-serif text-[10px] sm:text-[11px] tracking-widest text-[#1a3a25] uppercase font-bold mb-1">FINEST INGREDIENTS</span>
|
||||
<span className="font-sans text-[9px] sm:text-[10px] text-[#4a3c28] leading-snug">Handpicked ingredients for exceptional taste and quality.</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature 3 */}
|
||||
<div className="flex items-center justify-center gap-4 lg:border-r border-[#bc9e65]/30 px-2">
|
||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-serif text-[10px] sm:text-[11px] tracking-widest text-[#1a3a25] uppercase font-bold mb-1">MADE WITH LOVE</span>
|
||||
<span className="font-sans text-[9px] sm:text-[10px] text-[#4a3c28] leading-snug">Every dish is crafted with passion and dedication.</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Feature 4 */}
|
||||
<div className="flex items-center justify-center gap-4 px-2">
|
||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65] flex items-center justify-center text-[#bc9e65] shrink-0">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<span className="font-serif text-[10px] sm:text-[11px] tracking-widest text-[#1a3a25] uppercase font-bold mb-1">WARM HOSPITALITY</span>
|
||||
<span className="font-sans text-[9px] sm:text-[10px] text-[#4a3c28] leading-snug">A cozy place where every guest feels like family.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom center divider icon below feature bar overlapping the border */}
|
||||
{/* <div className="absolute bottom-[-14px] left-1/2 -translate-x-1/2 bg-[#fdfaf4] px-4 z-20 hidden md:block">
|
||||
<svg className="w-7 h-7 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||
</svg>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -65,93 +65,12 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
|
||||
|
||||
{/* Content Body */}
|
||||
<AnimatedSection variant="fadeUp" delay={0.25}>
|
||||
<div className="prose prose-stone max-w-none prose-p:font-sans prose-p:text-stone-700 prose-p:leading-[1.8] prose-p:text-[15px] prose-p:mb-6">
|
||||
|
||||
{/* First Paragraph */}
|
||||
<p className="text-lg text-stone-800 leading-relaxed font-medium">
|
||||
{firstParagraph}
|
||||
</p>
|
||||
|
||||
{/* Blockquote using theme style */}
|
||||
<blockquote className="my-10 relative bg-[#f5efe0] border-l-4 border-[#1a3a25] px-8 py-6 rounded-r-xl shadow-sm">
|
||||
<svg className="absolute top-4 left-4 w-8 h-8 text-[#bc9e65]/20 transform -translate-x-2 -translate-y-2" fill="currentColor" viewBox="0 0 32 32">
|
||||
<path d="M10 8c-3.3 0-6 2.7-6 6v10h10V14H8c0-1.1.9-2 2-2h4V8h-4zm14 0c-3.3 0-6 2.7-6 6v10h10V14h-6c0-1.1.9-2 2-2h4V8h-4z"/>
|
||||
</svg>
|
||||
<p className="font-serif text-xl sm:text-2xl italic text-[#1a3a25] leading-snug relative z-10 m-0">
|
||||
"Tradition is not the worship of ashes, but the preservation of fire. Our recipes are a testament to this philosophy."
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
{/* Remaining Paragraphs */}
|
||||
{remainingParagraphs.map((p, idx) => (
|
||||
<p key={idx}>{p}</p>
|
||||
))}
|
||||
|
||||
{/* List with related icons */}
|
||||
<h3 className="font-serif text-2xl text-[#1a3a25] mt-12 mb-6 font-bold">Key Elements of Our Heritage</h3>
|
||||
<ul className="space-y-4 mb-10 pl-0">
|
||||
<li className="flex items-start gap-4">
|
||||
<div className="mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-[#f5efe0] flex items-center justify-center text-[#8a6c3a] shadow-sm border border-[#e8e0ce]">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<strong className="block text-[#1a3a25] font-sans font-bold">Authentic Spices</strong>
|
||||
<span className="text-stone-600 font-sans text-sm">Sourced directly from the lush hills of Kerala, ensuring unmatched aroma and flavor.</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-4">
|
||||
<div className="mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-[#f5efe0] flex items-center justify-center text-[#8a6c3a] shadow-sm border border-[#e8e0ce]">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<strong className="block text-[#1a3a25] font-sans font-bold">Time-Honored Techniques</strong>
|
||||
<span className="text-stone-600 font-sans text-sm">Slow-cooking processes that have been passed down through generations.</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-4">
|
||||
<div className="mt-1 flex-shrink-0 w-8 h-8 rounded-full bg-[#f5efe0] flex items-center justify-center text-[#8a6c3a] shadow-sm border border-[#e8e0ce]">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<strong className="block text-[#1a3a25] font-sans font-bold">Cooked with Love</strong>
|
||||
<span className="text-stone-600 font-sans text-sm">Every dish is prepared with the same care and devotion as a home-cooked meal.</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* 2 Images per row */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 my-12">
|
||||
<div className="relative w-full aspect-[4/3] rounded-xl overflow-hidden shadow-md">
|
||||
<Image src="/images/chettinad_interior.png" alt="Kitchen Prep" fill className="object-cover" />
|
||||
</div>
|
||||
<div className="relative w-full aspect-[4/3] rounded-xl overflow-hidden shadow-md">
|
||||
<Image src="/images/chef_cooking.png" alt="Chef Cooking" fill className="object-cover object-top" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title, Paragraph and FAQ */}
|
||||
<h3 className="font-serif text-3xl text-[#1a3a25] mt-12 mb-4 font-bold">Common Inquiries</h3>
|
||||
<p className="mb-8">
|
||||
We often receive questions about our traditional cooking methods and ingredient sourcing. Here are some of the most frequently asked questions from our guests who want to dive deeper into our culinary heritage.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 mb-16">
|
||||
{[
|
||||
{ q: "Do you use artificial colors in your curries?", a: "Never. The vibrant colors of our dishes come purely from natural ingredients like turmeric, Kashmiri chili, and fresh herbs." },
|
||||
{ q: "Is your dosa batter gluten-free?", a: "Yes, our traditional dosa batter is made entirely from rice and lentils, making it naturally gluten-free." },
|
||||
{ q: "How spicy is the authentic Chettinad preparation?", a: "It carries a robust, earthy heat from black pepper and dry red chilies. However, we can adjust the spice level to accommodate your palate upon request." }
|
||||
].map((faq, idx) => (
|
||||
<div key={idx} className="bg-white border border-[#e8e0ce] p-6 rounded-xl shadow-sm">
|
||||
<h4 className="font-sans font-bold text-[#1a3a25] text-[15px] mb-2 flex items-start gap-2">
|
||||
<span className="text-[#8a6c3a]">Q.</span> {faq.q}
|
||||
</h4>
|
||||
<p className="font-sans text-stone-600 text-sm m-0 pl-6">
|
||||
{faq.a}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="prose prose-stone max-w-none prose-p:font-sans prose-p:text-stone-700 prose-p:leading-[1.8] prose-p:text-[15px] prose-p:mb-6"
|
||||
dangerouslySetInnerHTML={{ __html: post.content }}
|
||||
/>
|
||||
|
||||
<AnimatedSection variant="fadeUp" delay={0.35}>
|
||||
{/* Back to page button */}
|
||||
<div className="border-t border-[#e8e0ce] pt-10 mt-10 text-center sm:text-left">
|
||||
<Link
|
||||
@ -161,7 +80,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
|
||||
<span className="text-[14px]">←</span> Back to Blogs
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ export default function BlogPage() {
|
||||
<div className="absolute inset-0 pointer-events-none select-none">
|
||||
<Image src="/images/story_bg.png" alt="" fill className="object-cover" />
|
||||
</div>
|
||||
<div className="max-w-5xl mx-auto px-6 py-12 lg:py-20 relative z-10">
|
||||
<div className="max-w-6xl mx-auto px-6 py-12 lg:py-20 relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-7xl mx-auto">
|
||||
{BLOG_POSTS.map((post, index) => (
|
||||
<AnimatedSection key={post.id} variant="fadeUp" delay={index * 0.1}>
|
||||
@ -56,7 +56,7 @@ export default function BlogPage() {
|
||||
|
||||
{/* Floating Tag */}
|
||||
<div className="absolute bottom-4 left-5 z-20 bg-[#0a4a2b] rounded-md px-3 py-1.5 shadow-md">
|
||||
<span className="font-sans text-[10px] font-extrabold tracking-widest text-[#bc9e65] uppercase">
|
||||
<span className="font-sans text-[10px] font-extrabold tracking-widest text-[#fff] uppercase">
|
||||
{post.id === 1 ? "Recipes" : post.id === 2 ? "Ingredients" : "Behind The Scenes"}
|
||||
</span>
|
||||
</div>
|
||||
@ -77,11 +77,11 @@ export default function BlogPage() {
|
||||
{/* Footer Row */}
|
||||
<div className="flex items-center text-stone-500 font-sans text-[11px] mt-auto">
|
||||
<span className="flex-shrink-0">
|
||||
{post.date} • {Math.max(2, Math.ceil(post.content.length / 400))} min read
|
||||
{post.date}
|
||||
</span>
|
||||
|
||||
{/* Expanding line */}
|
||||
<div className="flex-1 h-[1px] bg-[#d8c396]/60 mx-3" />
|
||||
<div className="flex-1 bg-[#d8c396]/60 mx-3" />
|
||||
|
||||
<Link
|
||||
href={`/blog/${post.slug}`}
|
||||
|
||||
@ -46,168 +46,327 @@ export default function ContactPage() {
|
||||
<InnerBanner pageName="Contact" />
|
||||
|
||||
{/* ── TOP SECTION: Sandstone bg — Info + Form ── */}
|
||||
<div className="relative w-full">
|
||||
{/* Sandstone bg image */}
|
||||
<div className="relative w-full bg-[#fdfaf4] overflow-hidden">
|
||||
{/* Sandstone bg image with pots and diyas on the bottom corners */}
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image
|
||||
src="/images/story_bg.png"
|
||||
alt="Background"
|
||||
fill
|
||||
priority
|
||||
className="object-cover object-center"
|
||||
className="object-cover object-center opacity-90 mix-blend-multiply"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-6xl mx-auto px-6 py-16">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-start">
|
||||
<div className="relative z-10 max-w-[1300px] mx-auto px-6 py-16 sm:py-24">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-stretch">
|
||||
|
||||
{/* Left Column: Info */}
|
||||
<AnimatedSection variant="fadeLeft" delay={0.1}>
|
||||
<div className="select-text pt-4">
|
||||
<h2 className="font-serif text-3xl sm:text-4xl text-[#1a3a25] tracking-wider mb-10">
|
||||
Get in Touch
|
||||
</h2>
|
||||
<div className="select-text flex flex-col items-center lg:items-start text-center lg:text-left">
|
||||
<h2 className="font-serif text-4xl sm:text-5xl text-[#1a3a25] tracking-wider mb-2 uppercase">
|
||||
Get In Touch
|
||||
</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
{/* Phone */}
|
||||
<div className="flex items-start gap-5 group">
|
||||
<div className="w-12 h-12 rounded-full bg-[#0c2419]/10 border border-[#0c2419]/30 flex items-center justify-center text-[#1a3a25] group-hover:bg-[#0c2419] group-hover:text-[#bc9e65] transition-colors duration-300 shadow-sm shrink-0">
|
||||
<Phone strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
<h4 className="font-serif text-[#1a3a25] text-base tracking-wide font-medium mb-1">Phone</h4>
|
||||
<p className="font-sans text-[#3a2e1e] text-sm tracking-wider">+1 (519) 888-7459</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-12 justify-center lg:justify-start w-full lg:w-auto">
|
||||
<div className="w-16 h-px bg-[#bc9e65]" />
|
||||
<svg className="w-3 h-3 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L15 8L22 9L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9L9 8L12 2Z" />
|
||||
</svg>
|
||||
<div className="w-16 h-px bg-[#bc9e65]" />
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="flex items-start gap-5 group">
|
||||
<div className="w-12 h-12 rounded-full bg-[#0c2419]/10 border border-[#0c2419]/30 flex items-center justify-center text-[#1a3a25] group-hover:bg-[#0c2419] group-hover:text-[#bc9e65] transition-colors duration-300 shadow-sm shrink-0">
|
||||
<Mail strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
<h4 className="font-serif text-[#1a3a25] text-base tracking-wide font-medium mb-1">Email</h4>
|
||||
<p className="font-sans text-[#3a2e1e] text-sm tracking-wider">mydosaplacewaterloo@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8 w-full max-w-md mx-auto lg:mx-0">
|
||||
|
||||
{/* Location */}
|
||||
<div className="flex items-start gap-5 group">
|
||||
<div className="w-12 h-12 rounded-full bg-[#0c2419]/10 border border-[#0c2419]/30 flex items-center justify-center text-[#1a3a25] group-hover:bg-[#0c2419] group-hover:text-[#bc9e65] transition-colors duration-300 shadow-sm shrink-0">
|
||||
<MapPin strokeWidth={1.5} className="w-5 h-5" />
|
||||
{/* Phone */}
|
||||
<div className="flex items-center lg:items-start gap-6 group">
|
||||
<div className="relative w-14 h-14 flex items-center justify-center shrink-0">
|
||||
<svg className="absolute inset-0 w-full h-full text-[#0a2e1f]" viewBox="0 0 100 100">
|
||||
<path d="M50 2 C60 2 62 10 70 12 C78 14 84 8 88 15 C92 22 86 28 88 36 C90 44 98 46 98 55 C98 64 90 66 88 74 C86 82 92 88 88 95 C84 102 78 96 70 98 C62 100 60 108 50 108 C40 108 38 100 30 98 C22 96 16 102 12 95 C8 88 14 82 12 74 C10 66 2 64 2 55 C2 46 10 44 12 36 C14 28 8 22 12 15 C16 8 22 14 30 12 C38 10 40 2 50 2 Z" fill="currentColor" stroke="#bc9e65" strokeWidth="3" />
|
||||
</svg>
|
||||
<Phone strokeWidth={1.5} className="w-6 h-6 text-[#bc9e65] relative z-10" />
|
||||
</div>
|
||||
<div className="pt-1 text-left">
|
||||
<h4 className="font-serif text-[#1a3a25] text-lg tracking-wide uppercase mb-1">Phone</h4>
|
||||
<p className="font-sans text-[#4a3c28] text-sm tracking-wide">+1 519-888-7459</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
<h4 className="font-serif text-[#1a3a25] text-base tracking-wide font-medium mb-1">Location</h4>
|
||||
<p className="font-sans text-[#3a2e1e] text-sm tracking-wider leading-relaxed uppercase">
|
||||
922 Erb St. W Unit C3#3,<br />
|
||||
Waterloo, ON N2T 0C9,<br />
|
||||
Canada
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Opening Hours */}
|
||||
<div className="flex items-start gap-5 group">
|
||||
<div className="w-12 h-12 rounded-full bg-[#0c2419]/10 border border-[#0c2419]/30 flex items-center justify-center text-[#1a3a25] group-hover:bg-[#0c2419] group-hover:text-[#bc9e65] transition-colors duration-300 shadow-sm shrink-0">
|
||||
<Clock strokeWidth={1.5} className="w-5 h-5" />
|
||||
<div className="w-full h-px bg-gradient-to-r from-transparent via-[#bc9e65]/50 to-transparent lg:hidden" />
|
||||
<div className="w-48 h-px bg-gradient-to-r from-[#bc9e65]/50 to-transparent hidden lg:block" />
|
||||
|
||||
{/* Email */}
|
||||
<div className="flex items-center lg:items-start gap-6 group">
|
||||
<div className="relative w-14 h-14 flex items-center justify-center shrink-0">
|
||||
<svg className="absolute inset-0 w-full h-full text-[#0a2e1f]" viewBox="0 0 100 100">
|
||||
<path d="M50 2 C60 2 62 10 70 12 C78 14 84 8 88 15 C92 22 86 28 88 36 C90 44 98 46 98 55 C98 64 90 66 88 74 C86 82 92 88 88 95 C84 102 78 96 70 98 C62 100 60 108 50 108 C40 108 38 100 30 98 C22 96 16 102 12 95 C8 88 14 82 12 74 C10 66 2 64 2 55 C2 46 10 44 12 36 C14 28 8 22 12 15 C16 8 22 14 30 12 C38 10 40 2 50 2 Z" fill="currentColor" stroke="#bc9e65" strokeWidth="3" />
|
||||
</svg>
|
||||
<Mail strokeWidth={1.5} className="w-6 h-6 text-[#bc9e65] relative z-10" />
|
||||
</div>
|
||||
<div className="pt-1 text-left flex-1 min-w-0">
|
||||
<h4 className="font-serif text-[#1a3a25] text-lg tracking-wide uppercase mb-1">Email</h4>
|
||||
<p className="font-sans text-[#4a3c28] text-sm tracking-wide break-all">mydosaplacewaterloo@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
<h4 className="font-serif text-[#1a3a25] text-base tracking-wide font-medium mb-1">Opening Hours</h4>
|
||||
<p className="font-sans text-[#3a2e1e] text-sm tracking-wider leading-relaxed">
|
||||
Mon - Thu: 4pm–10pm<br />
|
||||
Fri - Sun: 11am–10pm
|
||||
</p>
|
||||
|
||||
<div className="w-full h-px bg-gradient-to-r from-transparent via-[#bc9e65]/50 to-transparent lg:hidden" />
|
||||
<div className="w-48 h-px bg-gradient-to-r from-[#bc9e65]/50 to-transparent hidden lg:block" />
|
||||
|
||||
{/* Location */}
|
||||
<div className="flex items-center lg:items-start gap-6 group">
|
||||
<div className="relative w-14 h-14 flex items-center justify-center shrink-0">
|
||||
<svg className="absolute inset-0 w-full h-full text-[#0a2e1f]" viewBox="0 0 100 100">
|
||||
<path d="M50 2 C60 2 62 10 70 12 C78 14 84 8 88 15 C92 22 86 28 88 36 C90 44 98 46 98 55 C98 64 90 66 88 74 C86 82 92 88 88 95 C84 102 78 96 70 98 C62 100 60 108 50 108 C40 108 38 100 30 98 C22 96 16 102 12 95 C8 88 14 82 12 74 C10 66 2 64 2 55 C2 46 10 44 12 36 C14 28 8 22 12 15 C16 8 22 14 30 12 C38 10 40 2 50 2 Z" fill="currentColor" stroke="#bc9e65" strokeWidth="3" />
|
||||
</svg>
|
||||
<MapPin strokeWidth={1.5} className="w-6 h-6 text-[#bc9e65] relative z-10" />
|
||||
</div>
|
||||
<div className="pt-1 text-left">
|
||||
<h4 className="font-serif text-[#1a3a25] text-lg tracking-wide uppercase mb-1">Location</h4>
|
||||
<p className="font-sans text-[#4a3c28] text-sm tracking-wide leading-relaxed">
|
||||
922 Erb St. W Unit C3#3, Waterloo,<br /> ON N2T 0C9,
|
||||
Canada
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
{/* Right Column: Form — Dark green theme card */}
|
||||
<AnimatedSection variant="fadeRight" delay={0.2}>
|
||||
<div className="relative bg-gradient-to-br from-[#0c2419]/95 via-[#06120c]/98 to-[#040b07] border border-[#bc9e65]/40 p-8 sm:p-10 group overflow-visible shadow-2xl">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/15 pointer-events-none" />
|
||||
<CornerOrnaments />
|
||||
<div className="relative bg-[#0a2e1f] p-8 sm:p-12 shadow-[0_20px_50px_rgba(0,0,0,0.5)] rounded-xl border-[4px] border-[#082418]">
|
||||
{/* Ornate Gold Border inside */}
|
||||
<div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="font-serif text-2xl text-[#bc9e65] mb-8">Send Us a Message</h3>
|
||||
{/* Corner Ornaments */}
|
||||
<div className="absolute top-2 left-2 w-12 h-12 pointer-events-none">
|
||||
<svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
|
||||
<path d="M0,0 L40,0 Q40,40 0,40 Z" />
|
||||
<path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2 w-12 h-12 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 L40,0 Q40,40 0,40 Z" />
|
||||
<path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute bottom-2 left-2 w-12 h-12 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 L40,0 Q40,40 0,40 Z" />
|
||||
<path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute bottom-2 right-2 w-12 h-12 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 L40,0 Q40,40 0,40 Z" />
|
||||
<path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{submitted ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center animate-pulse min-h-[350px]">
|
||||
<svg className="w-12 h-12 text-[#bc9e65] mb-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
|
||||
{/* Faint mandala watermark at bottom */}
|
||||
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-64 h-40 overflow-hidden pointer-events-none opacity-5">
|
||||
<svg viewBox="0 0 100 50" fill="currentColor" className="w-full h-full text-[#bc9e65]">
|
||||
<path d="M50 50 C50 20 20 0 0 0 L100 0 C80 0 50 20 50 50 Z" />
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
<circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
<circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center">
|
||||
<svg className="w-10 h-10 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" />
|
||||
</svg>
|
||||
<h3 className="font-serif text-2xl sm:text-[28px] text-[#bc9e65] tracking-widest uppercase mb-4">
|
||||
Send Us A Message
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-4 mb-10 w-full justify-center">
|
||||
<div className="w-16 h-[1px] bg-[#bc9e65]" />
|
||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L15 8L22 9L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9L9 8L12 2Z" />
|
||||
</svg>
|
||||
<h4 className="font-serif text-white tracking-wider uppercase text-base mb-2">MESSAGE SENT</h4>
|
||||
<p className="font-sans text-stone-300 text-sm leading-relaxed max-w-[280px] mx-auto tracking-wider">
|
||||
Thank you for contacting us. We will get back to you shortly.
|
||||
</p>
|
||||
<div className="w-16 h-[1px] bg-[#bc9e65]" />
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-500"
|
||||
placeholder="Your Name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-500"
|
||||
placeholder="Your Email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
/>
|
||||
|
||||
{submitted ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center min-h-[300px]">
|
||||
<svg className="w-12 h-12 text-[#bc9e65] mb-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
|
||||
</svg>
|
||||
<h4 className="font-serif text-[#bc9e65] tracking-widest uppercase text-lg mb-2">Message Sent</h4>
|
||||
<p className="font-sans text-[#e8dcb5] text-sm leading-relaxed max-w-[280px] mx-auto tracking-wider">
|
||||
Thank you for contacting us. We will get back to you shortly.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="w-full space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
|
||||
placeholder="Your Name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<input
|
||||
type="tel"
|
||||
className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-500"
|
||||
placeholder="Phone Number"
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-500"
|
||||
placeholder="Subject"
|
||||
value={formData.subject}
|
||||
onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<Mail strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
|
||||
placeholder="Your Email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
rows={5}
|
||||
required
|
||||
className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none resize-none placeholder-stone-500"
|
||||
placeholder="Your Message"
|
||||
value={formData.msg}
|
||||
onChange={(e) => setFormData({ ...formData, msg: e.target.value })}
|
||||
/>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<Phone strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<input
|
||||
type="tel"
|
||||
className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
|
||||
placeholder="Phone Number"
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="clickable w-full py-3.5 bg-gradient-to-r from-[#bc9e65] to-[#d4b872] hover:from-[#c5a975] hover:to-[#dfc585] text-[#06120c] font-sans font-bold text-sm tracking-wider transition-all duration-300 shadow-md rounded-sm mt-1"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
|
||||
placeholder="Subject"
|
||||
value={formData.subject}
|
||||
onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full">
|
||||
<div className="absolute top-4 left-0 pl-4 flex items-start pointer-events-none text-[#bc9e65]">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
|
||||
</div>
|
||||
<textarea
|
||||
rows={4}
|
||||
required
|
||||
className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-4 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors resize-none placeholder-[#bc9e65]/80"
|
||||
placeholder="Your Message"
|
||||
value={formData.msg}
|
||||
onChange={(e) => setFormData({ ...formData, msg: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="group relative flex items-center justify-center w-full py-4 mt-6 bg-gradient-to-r from-[#c5a975] via-[#d9b876] to-[#c5a975] hover:from-[#e8dcb5] hover:via-[#c5a975] hover:to-[#e8dcb5] text-[#1a3a25] font-serif tracking-widest uppercase transition-all duration-500 rounded shadow-[0_5px_15px_rgba(0,0,0,0.3)] overflow-hidden"
|
||||
>
|
||||
{/* Inner border line on button */}
|
||||
<div className="absolute inset-1 border border-[#1a3a25]/20 rounded-sm pointer-events-none" />
|
||||
<span className="relative z-10 text-sm font-bold">Send Message</span>
|
||||
<svg className="relative z-10 w-4 h-4 ml-3 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── OPENING HOURS + MAP ROW ── */}
|
||||
<AnimatedSection variant="fadeUp" delay={0.1}>
|
||||
<div className="relative max-w-7xl mx-auto w-[calc(100%-3rem)] bg-[#0a2e1f] border border-[#bc9e65]/20 rounded-2xl mb-16 overflow-hidden shadow-2xl">
|
||||
<div className="absolute inset-0 pointer-events-none select-none opacity-20">
|
||||
<Image
|
||||
src="/images/footer_bg.png"
|
||||
alt="Background"
|
||||
fill
|
||||
className="object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-10 px-6 py-16 grid grid-cols-1 lg:grid-cols-2 gap-0">
|
||||
|
||||
{/* Opening Hours Panel */}
|
||||
<div className="flex flex-col justify-center px-0 lg:pr-16 pb-12 lg:pb-0 border-b lg:border-b-0 lg:border-r border-[#bc9e65]/20">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-10 h-10 rounded-full bg-[#bc9e65]/10 border border-[#bc9e65]/40 flex items-center justify-center shrink-0">
|
||||
<Clock strokeWidth={1.5} className="w-5 h-5 text-[#bc9e65]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-sans text-[11px] tracking-[0.3em] text-[#bc9e65]/70 uppercase font-bold mb-0.5">We are open</p>
|
||||
<h3 className="font-serif text-2xl text-white tracking-wide">Opening Hours</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{[
|
||||
{ day: 'Friday', time: '5:00 – 10:00 pm' },
|
||||
{ day: 'Saturday', time: '12:00 – 10:00 pm' },
|
||||
{ day: 'Sunday', time: '12:00 – 9:00 pm' },
|
||||
{ day: 'Monday', time: '4:00 – 10:00 pm' },
|
||||
{ day: 'Tuesday', time: 'Closed', closed: true },
|
||||
{ day: 'Wednesday', time: '4:30 – 10:00 pm' },
|
||||
{ day: 'Thursday', time: '4:00 – 10:00 pm' },
|
||||
].map(({ day, time, closed }) => (
|
||||
<div key={day} className="flex items-center justify-between py-2.5 border-b border-[#bc9e65]/10 last:border-0">
|
||||
<span className="font-sans text-sm font-semibold text-[#e8dcb5] tracking-wide">{day}</span>
|
||||
<span className={`font-sans text-sm tracking-wide ${closed ? 'text-red-400 font-bold' : 'text-[#bc9e65]'}`}>{time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Map Panel */}
|
||||
<div className="flex flex-col justify-center pt-12 lg:pt-0 lg:pl-16">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-10 h-10 rounded-full bg-[#bc9e65]/10 border border-[#bc9e65]/40 flex items-center justify-center shrink-0">
|
||||
<MapPin strokeWidth={1.5} className="w-5 h-5 text-[#bc9e65]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-sans text-[11px] tracking-[0.3em] text-[#bc9e65]/70 uppercase font-bold mb-0.5">Find us at</p>
|
||||
<h3 className="font-serif text-2xl text-white tracking-wide">Our Location</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl overflow-hidden border border-[#bc9e65]/30 shadow-2xl" style={{ height: '280px' }}>
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2387.597603633402!2d-80.5796577!3d43.4438744!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf755b6dfbef5%3A0x21184d424ab8bf6f!2sMy%20Dosa%20Place%20(%20South%20Indian%20Pure%20VEG)!5e1!3m2!1sen!2sin!4v1784207213128!5m2!1sen!2sin"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="My Dosa Place on Google Maps"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
|
||||
{/* ── MAP SECTION: Sandstone bg ── */}
|
||||
<div className="relative w-full">
|
||||
{/* Sandstone bg image */}
|
||||
{/* ── MAP SECTION (commented) ── */}
|
||||
{/* <div className="relative w-full">
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image
|
||||
src="/images/story_bg.png"
|
||||
@ -231,7 +390,7 @@ export default function ContactPage() {
|
||||
className="absolute inset-0 transition-all duration-700 group-hover:filter-none group-hover:opacity-100"
|
||||
></iframe>
|
||||
|
||||
{/* Floating info card */}
|
||||
|
||||
<div className="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
|
||||
<div className="bg-[#0c2419] border border-[#bc9e65]/40 p-6 sm:p-8 shadow-2xl max-w-xs w-full pointer-events-auto rounded-sm">
|
||||
<h3 className="font-serif text-white text-xl mb-3 tracking-wide">My Dosa Place</h3>
|
||||
@ -253,7 +412,7 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* ── BOTTOM FEATURES: Full-width dark green ── */}
|
||||
{/* <div className="relative max-w-7xl mx-auto w-[calc(100%-3rem)] bg-[#061810] rounded-2xl mb-16 border border-[#bc9e65]/30 overflow-hidden shadow-2xl">
|
||||
|
||||
@ -27,7 +27,7 @@ export default function Home() {
|
||||
<main className="w-full relative bg-darkbg text-foreground overflow-hidden select-none">
|
||||
{/* Isolated wrapper for client-only widgets to prevent hydration insertion conflicts */}
|
||||
<div id="client-only-widgets">
|
||||
{mounted && <SoundManager />}
|
||||
{/* {mounted && <SoundManager />} */}
|
||||
{mounted && <CustomCursor />}
|
||||
{mounted && <Header visible={headerVisible} />}
|
||||
</div>
|
||||
|
||||
@ -2,30 +2,21 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { User, Mail, Phone, Calendar, Clock, Users, MapPin } from "lucide-react";
|
||||
import SubpageLayout from "@/components/SubpageLayout";
|
||||
|
||||
const CornerOrnaments = () => (
|
||||
<>
|
||||
<svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 left-2.5 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
|
||||
</svg>
|
||||
<svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 right-2.5 rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
|
||||
</svg>
|
||||
<svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 left-2.5 -rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
|
||||
</svg>
|
||||
<svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 right-2.5 rotate-180 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
import AnimatedSection from "@/components/AnimatedSection";
|
||||
import InnerBanner from "@/components/InnerBanner";
|
||||
|
||||
export default function ReservationPage() {
|
||||
const [guests, setGuests] = useState("2 Guests");
|
||||
const [date, setDate] = useState("2026-07-16");
|
||||
const [time, setTime] = useState("06:00 PM");
|
||||
const [area, setArea] = useState("Heritage Dining Court");
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
guests: "2 Guests",
|
||||
date: "",
|
||||
time: "07:00 PM",
|
||||
area: "Heritage Dining Court"
|
||||
});
|
||||
const [reserved, setReserved] = useState(false);
|
||||
|
||||
const handleReserve = (e: React.FormEvent) => {
|
||||
@ -33,149 +24,270 @@ export default function ReservationPage() {
|
||||
setReserved(true);
|
||||
setTimeout(() => {
|
||||
setReserved(false);
|
||||
setFormData({ ...formData, name: "", email: "", phone: "", date: "" });
|
||||
}, 6000);
|
||||
};
|
||||
|
||||
return (
|
||||
<SubpageLayout>
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none opacity-40">
|
||||
<Image
|
||||
src="/images/category_bg.jpg"
|
||||
alt="Backdrop"
|
||||
fill
|
||||
priority
|
||||
className="object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[500px] mx-auto px-6 pt-[140px] pb-[100px] sm:pt-[160px] sm:pb-[120px] relative z-10 min-h-screen flex flex-col justify-center">
|
||||
<InnerBanner pageName="Reservation" />
|
||||
<div className="relative w-full bg-[#fdfaf4] overflow-hidden flex flex-col justify-center py-24">
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center pb-10 select-text">
|
||||
<div className="flex items-center gap-3 justify-center mb-2">
|
||||
<span className="text-[#bc9e65] text-xs">❧</span>
|
||||
<span className="font-sans text-[10px] tracking-[0.3em] text-[#bc9e65] font-extrabold uppercase">
|
||||
TABLE BOOKING
|
||||
</span>
|
||||
<span className="text-[#bc9e65] text-xs">❧</span>
|
||||
</div>
|
||||
<h1 className="font-serif text-3xl sm:text-4xl lg:text-[42px] font-bold text-white tracking-wider leading-tight uppercase">
|
||||
Reserve <span className="text-[#bc9e65]">Table</span>
|
||||
</h1>
|
||||
<div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#bc9e65] to-transparent mx-auto mt-4" />
|
||||
{/* Full Page Background with Pots and Temple */}
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image
|
||||
src="/images/story_bg.png"
|
||||
alt="Royal Background"
|
||||
fill
|
||||
priority
|
||||
className="object-cover object-bottom opacity-90 mix-blend-multiply"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Card Frame containing booking inputs */}
|
||||
<div className="relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-8 group overflow-visible shadow-2xl">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/15 pointer-events-none" />
|
||||
<CornerOrnaments />
|
||||
{/* Ornate Page Border */}
|
||||
<div className="absolute inset-4 sm:inset-8 border-[1.5px] border-[#bc9e65] pointer-events-none z-10 hidden md:block">
|
||||
{/* Corner Ornaments */}
|
||||
<div className="absolute top-0 left-0 w-16 h-16 transform">
|
||||
<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>
|
||||
<div className="absolute top-0 right-0 w-16 h-16 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>
|
||||
<div className="absolute bottom-0 left-0 w-16 h-16 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>
|
||||
<div className="absolute bottom-0 right-0 w-16 h-16 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>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 h-full flex flex-col justify-between">
|
||||
{reserved ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center animate-pulse">
|
||||
<svg className="w-12 h-12 text-[#bc9e65] mb-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
|
||||
</svg>
|
||||
<h4 className="font-serif text-white tracking-wider uppercase text-[15px] mb-2.5">
|
||||
RESERVATION CONFIRMED
|
||||
</h4>
|
||||
<div className="h-[1px] w-20 bg-[#bc9e65]/35 mb-4" />
|
||||
<p className="font-sans text-stone-300 text-[11px] leading-relaxed max-w-[280px] mx-auto tracking-wider mb-2">
|
||||
Your table has been reserved for <strong className="text-white">{guests}</strong> on <strong className="text-white">{date}</strong> at <strong className="text-white">{time}</strong> in our <strong className="text-white">{area}</strong>.
|
||||
</p>
|
||||
<p className="font-sans text-[#bc9e65] text-[10px] tracking-widest uppercase mt-4">
|
||||
A verification parchment has been sent.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleReserve} className="space-y-5">
|
||||
<div className="relative z-20 max-w-2xl mx-auto w-full px-4 sm:px-8">
|
||||
|
||||
{/* Form Card */}
|
||||
<div className="w-full">
|
||||
<AnimatedSection variant="fadeUp" delay={0.1}>
|
||||
<div className="relative bg-[#0a2e1f] p-8 sm:p-12 shadow-[0_30px_60px_rgba(0,0,0,0.6)] rounded-xl border-[4px] border-[#082418]">
|
||||
{/* Ornate Gold Border inside */}
|
||||
<div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
|
||||
|
||||
{/* Guests selection */}
|
||||
<div>
|
||||
<label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1.5">
|
||||
NUMBER OF GUESTS
|
||||
</label>
|
||||
<select
|
||||
className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none cursor-pointer"
|
||||
value={guests}
|
||||
onChange={(e) => setGuests(e.target.value)}
|
||||
>
|
||||
<option className="bg-[#06120c]" value="1 Guest">1 Guest</option>
|
||||
<option className="bg-[#06120c]" value="2 Guests">2 Guests</option>
|
||||
<option className="bg-[#06120c]" value="3 Guests">3 Guests</option>
|
||||
<option className="bg-[#06120c]" value="4 Guests">4 Guests</option>
|
||||
<option className="bg-[#06120c]" value="5 Guests">5 Guests</option>
|
||||
<option className="bg-[#06120c]" value="6+ Guests">6+ Guests (Banquet inquiry)</option>
|
||||
</select>
|
||||
{/* Corner Ornaments */}
|
||||
<div className="absolute top-2 left-2 w-12 h-12 pointer-events-none">
|
||||
<svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
|
||||
<path d="M0,0 L40,0 Q40,40 0,40 Z" />
|
||||
<path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute top-2 right-2 w-12 h-12 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 L40,0 Q40,40 0,40 Z" />
|
||||
<path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute bottom-2 left-2 w-12 h-12 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 L40,0 Q40,40 0,40 Z" />
|
||||
<path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute bottom-2 right-2 w-12 h-12 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 L40,0 Q40,40 0,40 Z" />
|
||||
<path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Date Selection */}
|
||||
<div>
|
||||
<label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1.5">
|
||||
RESERVATION DATE
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
/>
|
||||
<div className="relative z-10 flex flex-col items-center">
|
||||
<svg className="w-10 h-10 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" />
|
||||
</svg>
|
||||
<h3 className="font-serif text-2xl sm:text-[28px] text-[#bc9e65] tracking-widest uppercase mb-4 text-center">
|
||||
Table Reservation
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-4 mb-8 w-full justify-center">
|
||||
<div className="w-16 h-[1px] bg-[#bc9e65]" />
|
||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L15 8L22 9L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9L9 8L12 2Z" />
|
||||
</svg>
|
||||
<div className="w-16 h-[1px] bg-[#bc9e65]" />
|
||||
</div>
|
||||
|
||||
{reserved ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center min-h-[350px]">
|
||||
<svg className="w-16 h-16 text-[#bc9e65] mb-6" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
|
||||
</svg>
|
||||
<h4 className="font-serif text-[#bc9e65] tracking-widest uppercase text-xl mb-3">
|
||||
Reservation Confirmed
|
||||
</h4>
|
||||
<div className="w-24 h-[1px] bg-[#bc9e65]/50 mb-5" />
|
||||
<p className="font-sans text-[#e8dcb5] text-sm leading-relaxed max-w-[300px] mx-auto tracking-wider">
|
||||
Dear {formData.name}, your table for <strong className="text-white">{formData.guests}</strong> on <strong className="text-white">{formData.date}</strong> at <strong className="text-white">{formData.time}</strong> in our <strong className="text-white">{formData.area}</strong> has been secured.
|
||||
</p>
|
||||
<p className="font-sans text-[#bc9e65] text-[10px] tracking-widest uppercase mt-6">
|
||||
A verification parchment has been sent to your email.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleReserve} className="w-full space-y-5">
|
||||
|
||||
{/* Personal Info Row */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<User strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
|
||||
placeholder="Full Name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<Phone strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<input
|
||||
type="tel"
|
||||
required
|
||||
className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
|
||||
placeholder="Phone Number"
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<Mail strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
|
||||
placeholder="Email Address"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Booking Info Row 1 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<Users strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<select
|
||||
className="w-full bg-[#0a2e1f] border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-10 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors cursor-pointer appearance-none"
|
||||
value={formData.guests}
|
||||
onChange={(e) => setFormData({ ...formData, guests: e.target.value })}
|
||||
>
|
||||
<option value="1 Guest">1 Guest</option>
|
||||
<option value="2 Guests">2 Guests</option>
|
||||
<option value="3 Guests">3 Guests</option>
|
||||
<option value="4 Guests">4 Guests</option>
|
||||
<option value="5 Guests">5 Guests</option>
|
||||
<option value="6+ Guests">6+ Guests (Banquet)</option>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<Calendar strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
className="w-full bg-[#0a2e1f] sm:bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
|
||||
value={formData.date}
|
||||
onChange={(e) => setFormData({ ...formData, date: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Booking Info Row 2 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<Clock strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<select
|
||||
className="w-full bg-[#0a2e1f] border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-10 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors cursor-pointer appearance-none"
|
||||
value={formData.time}
|
||||
onChange={(e) => setFormData({ ...formData, time: e.target.value })}
|
||||
>
|
||||
<optgroup label="Lunch Service">
|
||||
<option value="11:30 AM">11:30 AM</option>
|
||||
<option value="12:00 PM">12:00 PM</option>
|
||||
<option value="01:00 PM">01:00 PM</option>
|
||||
<option value="02:00 PM">02:00 PM</option>
|
||||
</optgroup>
|
||||
<optgroup label="Dinner Service">
|
||||
<option value="05:30 PM">05:30 PM</option>
|
||||
<option value="06:00 PM">06:00 PM</option>
|
||||
<option value="07:00 PM">07:00 PM</option>
|
||||
<option value="08:00 PM">08:00 PM</option>
|
||||
<option value="09:00 PM">09:00 PM</option>
|
||||
<option value="10:00 PM">10:00 PM</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative w-full">
|
||||
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<MapPin strokeWidth={1.5} className="w-5 h-5" />
|
||||
</div>
|
||||
<select
|
||||
className="w-full bg-[#0a2e1f] border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-10 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors cursor-pointer appearance-none"
|
||||
value={formData.area}
|
||||
onChange={(e) => setFormData({ ...formData, area: e.target.value })}
|
||||
>
|
||||
<option value="Heritage Dining Court">Heritage Court</option>
|
||||
<option value="Banana Leaf Courtyard">Courtyard</option>
|
||||
<option value="Royal Maharaja Chambers">Maharaja Chambers</option>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-[#bc9e65]">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="group relative flex items-center justify-center w-full py-4 mt-8 bg-gradient-to-r from-[#c5a975] via-[#d9b876] to-[#c5a975] hover:from-[#e8dcb5] hover:via-[#c5a975] hover:to-[#e8dcb5] text-[#1a3a25] font-serif tracking-widest uppercase transition-all duration-500 rounded shadow-[0_5px_15px_rgba(0,0,0,0.3)] overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-1 border border-[#1a3a25]/20 rounded-sm pointer-events-none" />
|
||||
<span className="relative z-10 text-[13px] font-bold">Secure Royal Seat</span>
|
||||
<svg className="relative z-10 w-4 h-4 ml-3 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
|
||||
</button>
|
||||
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Time Selection */}
|
||||
<div>
|
||||
<label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1.5">
|
||||
PREFERRED TIME
|
||||
</label>
|
||||
<select
|
||||
className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none cursor-pointer"
|
||||
value={time}
|
||||
onChange={(e) => setTime(e.target.value)}
|
||||
>
|
||||
<optgroup className="bg-[#06120c]" label="Lunch Service">
|
||||
<option value="11:30 AM">11:30 AM</option>
|
||||
<option value="12:00 PM">12:00 PM</option>
|
||||
<option value="01:00 PM">01:00 PM</option>
|
||||
<option value="02:00 PM">02:00 PM</option>
|
||||
</optgroup>
|
||||
<optgroup className="bg-[#06120c]" label="Dinner Service">
|
||||
<option value="05:30 PM">05:30 PM</option>
|
||||
<option value="06:00 PM">06:00 PM</option>
|
||||
<option value="07:00 PM">07:00 PM</option>
|
||||
<option value="08:00 PM">08:00 PM</option>
|
||||
<option value="09:00 PM">09:00 PM</option>
|
||||
<option value="10:00 PM">10:00 PM</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Seating Area Selection */}
|
||||
<div>
|
||||
<label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1.5">
|
||||
SEATING COURT
|
||||
</label>
|
||||
<select
|
||||
className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none cursor-pointer"
|
||||
value={area}
|
||||
onChange={(e) => setArea(e.target.value)}
|
||||
>
|
||||
<option className="bg-[#06120c]" value="Heritage Dining Court">Heritage Dining Court (Main Hall)</option>
|
||||
<option className="bg-[#06120c]" value="Banana Leaf Courtyard">Banana Leaf Courtyard (Alfresco)</option>
|
||||
<option className="bg-[#06120c]" value="Royal Maharaja Chambers">Royal Maharaja Chambers (Private Dining)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Submit button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="clickable w-full py-3 border border-[#bc9e65]/50 hover:border-[#bc9e65] bg-transparent text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] font-sans font-bold text-[9px] tracking-widest uppercase transition-all duration-300 shadow-md mt-6"
|
||||
>
|
||||
SECURE ROYAL SEAT
|
||||
</button>
|
||||
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -253,28 +253,28 @@ export default function ChefShowcase() {
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<Image src="/images/home/chef/icons/chef-authentic.webp" alt="Authentic Recipes" width={45} height={45} className="object-contain mb-2.5" />
|
||||
<h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Authentic Recipes</h5>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[150px] mx-auto">Traditional recipes passed down through generations.</p>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[180px] mx-auto">Traditional recipes passed down through generations.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2: Pure Vegetarian */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<Image src="/images/home/chef/icons/chef-pure-veg.webp" alt="Pure Vegetarian" width={45} height={45} className="object-contain mb-2.5" />
|
||||
<h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Pure Vegetarian</h5>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[150px] mx-auto">100% pure veg, made with the finest natural ingredients.</p>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[180px] mx-auto">100% pure veg, made with the finest natural ingredients.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3: Wood Fire Cooking */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<Image src="/images/home/chef/icons/chef-wood.webp" alt="Wood Fire Cooking" width={45} height={45} className="object-contain mb-2.5" />
|
||||
<h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Wood Fire Cooking</h5>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[150px] mx-auto">Infused with the aroma of wood fire and heritage.</p>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[180px] mx-auto">Infused with the aroma of wood fire and heritage.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 4: Cooked With Love */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<Image src="/images/home/chef/icons/chef-love.webp" alt="Cooked With Love" width={45} height={45} className="object-contain mb-2.5" />
|
||||
<h5 className="font-serif text-base sm:text-sm font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Cooked With Love</h5>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[150px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
|
||||
<p className="font-sans text-base sm:text-base text-stone-300 leading-relaxed max-w-[180px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
|
||||
@ -262,7 +262,7 @@ export default function CulinaryCategories() {
|
||||
|
||||
{/* Right: details */}
|
||||
<div className="flex flex-col text-center sm:text-left items-center sm:items-start flex-1 select-text relative z-10">
|
||||
<span className="font-sans text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mb-1">
|
||||
<span className="font-sans text-[9px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mb-1">
|
||||
{cat.subtitle}
|
||||
</span>
|
||||
<h3 className="font-serif text-lg lg:text-xl font-bold text-white tracking-wider uppercase mb-2">
|
||||
@ -270,15 +270,15 @@ export default function CulinaryCategories() {
|
||||
</h3>
|
||||
{/* Divider */}
|
||||
<div className="h-[1px] w-16 bg-[#bc9e65]/40 mb-3" />
|
||||
<p className="font-sans text-stone-300 text-base sm:text-base leading-relaxed tracking-wider mb-4 max-w-[260px]">
|
||||
<p className="font-sans text-stone-300 text-[11px] lg:text-xs leading-relaxed tracking-wider mb-4 max-w-[240px]">
|
||||
{cat.desc}
|
||||
</p>
|
||||
|
||||
<a
|
||||
href="#menu"
|
||||
className="clickable inline-flex items-center gap-2 font-sans font-bold text-sm tracking-[0.2em] text-[#bc9e65] uppercase hover:text-white transition-colors duration-300"
|
||||
className="clickable inline-flex items-center gap-2 font-sans font-bold text-[9px] tracking-[0.2em] text-[#bc9e65] uppercase hover:text-white transition-colors duration-300"
|
||||
>
|
||||
EXPLORE MENU <span className="text-sm group-hover:translate-x-1 transition-transform duration-300">→</span>
|
||||
EXPLORE MENU <span className="text-xs group-hover:translate-x-1 transition-transform duration-300">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
@ -323,10 +323,10 @@ export default function CulinaryCategories() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 className="font-serif text-lg lg:text-lg font-bold text-white tracking-wider uppercase mb-2 relative z-10">
|
||||
<h3 className="font-serif text-[13px] lg:text-[14px] font-bold text-white tracking-wider uppercase mb-2 relative z-10">
|
||||
{cat.title}
|
||||
</h3>
|
||||
<p className="font-sans text-stone-300 text-sm sm:text-base leading-relaxed tracking-wider mb-5 max-w-[170px] flex-1 relative z-10">
|
||||
<p className="font-sans text-stone-300 text-[10.5px] leading-relaxed tracking-wider mb-5 max-w-[170px] flex-1 relative z-10">
|
||||
{cat.desc}
|
||||
</p>
|
||||
|
||||
@ -336,7 +336,7 @@ export default function CulinaryCategories() {
|
||||
className="clickable w-7 h-7 rounded-full border border-[#bc9e65]/40 hover:border-[#bc9e65] flex items-center justify-center text-[#bc9e65] hover:bg-gradient-to-br hover:from-[#d8c396] hover:to-[#aa771c] hover:text-[#06120c] transition-all duration-300 shadow-md transform group-hover:scale-105 z-10"
|
||||
aria-label={`Explore ${cat.title}`}
|
||||
>
|
||||
<span className="text-sm leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
|
||||
<span className="text-xs leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
);
|
||||
@ -384,10 +384,10 @@ export default function CulinaryCategories() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 className="font-serif text-base font-bold text-white tracking-wider uppercase mb-1.5 relative z-10">
|
||||
<h3 className="font-serif text-[12px] font-bold text-white tracking-wider uppercase mb-1.5 relative z-10">
|
||||
{cat.title}
|
||||
</h3>
|
||||
<p className="font-sans text-stone-300 text-base leading-relaxed tracking-wider mb-4 max-w-[140px] flex-1 relative z-10">
|
||||
<p className="font-sans text-stone-300 text-[10px] leading-relaxed tracking-wider mb-4 max-w-[140px] flex-1 relative z-10">
|
||||
{cat.desc}
|
||||
</p>
|
||||
|
||||
@ -397,7 +397,7 @@ export default function CulinaryCategories() {
|
||||
className="clickable w-6 h-6 rounded-full border border-[#bc9e65]/40 hover:border-[#bc9e65] flex items-center justify-center text-[#bc9e65] hover:bg-gradient-to-br hover:from-[#d8c396] hover:to-[#aa771c] hover:text-[#06120c] transition-all duration-300 shadow-md transform group-hover:scale-105 z-10"
|
||||
aria-label={`Explore ${cat.title}`}
|
||||
>
|
||||
<span className="text-base leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
|
||||
<span className="text-[10px] leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
@ -16,8 +16,8 @@ export default function Footer() {
|
||||
};
|
||||
|
||||
return (
|
||||
<footer id="footer" className="relative w-full py-16 px-6 sm:px-12 md:px-16 lg:px-24 overflow-hidden z-20">
|
||||
|
||||
<footer id="footer" className="relative w-full py-16 overflow-hidden z-20">
|
||||
|
||||
{/* Consolidated Mockup Background Layer */}
|
||||
<div className="absolute inset-0 z-0 pointer-events-none select-none">
|
||||
<Image
|
||||
@ -30,25 +30,23 @@ export default function Footer() {
|
||||
</div>
|
||||
|
||||
{/* Frame Container enclosing footer - content floats within the baked border box */}
|
||||
<div className="container max-w-6xl mx-auto px-4 sm:px-8 md:px-12 py-8 relative z-10 flex flex-col h-full">
|
||||
|
||||
<div className="max-w-7xl w-full mx-auto px-6 relative z-10 flex flex-col h-full">
|
||||
|
||||
{/* Column Grid layout */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 md:gap-12 pb-8 border-b border-[#bc9e65]/35">
|
||||
|
||||
{/* Column 1: Brand & Bio (col-span 4) */}
|
||||
<div className="lg:col-span-4 flex flex-col gap-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 md:gap-8 pb-8 border-b border-[#bc9e65]/35">
|
||||
|
||||
{/* Column 1: Brand & Bio (col-span 3) */}
|
||||
<div className="lg:col-span-3 flex flex-col gap-5">
|
||||
<div className="flex flex-col items-start select-text">
|
||||
{/* Gold lotus crest */}
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2.5 pointer-events-none select-none" 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>
|
||||
<span className="font-serif text-[#bc9e65] text-lg sm:text-[17px] tracking-[0.3em] uppercase block mb-1">
|
||||
MY DOSA
|
||||
</span>
|
||||
<span className="font-serif text-[#bc9e65] text-lg sm:text-[17px] tracking-[0.35em] uppercase block mb-2">
|
||||
PLACE
|
||||
</span>
|
||||
|
||||
{/* Brand Logo */}
|
||||
<Image
|
||||
src="/images/logo.png"
|
||||
alt="My Dosa Place"
|
||||
width={200}
|
||||
height={80}
|
||||
className="w-40 sm:w-48 h-auto mb-2 pointer-events-none select-none"
|
||||
/>
|
||||
|
||||
{/* Traditional Gold Leaf Separator */}
|
||||
<div className="flex items-center gap-2 w-28 mb-3 pointer-events-none select-none">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||||
@ -58,7 +56,7 @@ export default function Footer() {
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex items-start gap-2.5 max-w-sm text-left">
|
||||
<span className="text-[#bc9e65] text-xl font-bold leading-none mt-0.5 pointer-events-none select-none">•</span>
|
||||
<p className="font-sans text-sm text-stone-300 leading-relaxed tracking-wider select-text">
|
||||
@ -101,7 +99,7 @@ export default function Footer() {
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2.5 pointer-events-none select-none" 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>
|
||||
<h4 className="font-serif text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||||
<h4 className="font-serif font-bold text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||||
Quick Links
|
||||
</h4>
|
||||
{/* Separator */}
|
||||
@ -138,13 +136,13 @@ export default function Footer() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Column 3: Feast Sessions (col-span 3, bordered vertically on desktop) */}
|
||||
<div className="lg:col-span-3 flex flex-col gap-4 text-left border-l-0 border-r-0 lg:border-l lg:border-r border-[#bc9e65]/20 lg:px-6">
|
||||
{/* Column 3: Feast Sessions (col-span 4, bordered vertically on desktop) */}
|
||||
<div className="lg:col-span-4 flex flex-col gap-4 text-left border-l-0 border-r-0 lg:border-l lg:border-r border-[#bc9e65]/20 lg:px-6">
|
||||
<div className="flex flex-col items-start select-text">
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2 pointer-events-none select-none" 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>
|
||||
<h4 className="font-serif text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||||
<h4 className="font-serif font-bold text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||||
Feast Sessions
|
||||
</h4>
|
||||
{/* Separator */}
|
||||
@ -157,51 +155,58 @@ export default function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 font-sans text-sm text-stone-300 tracking-wider">
|
||||
{/* Wednesday - Monday */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col select-text">
|
||||
<span className="font-bold text-[#bc9e65] uppercase text-base tracking-widest">Wednesday – Monday</span>
|
||||
<span className="text-stone-300 mt-0.5">04:30 PM – 10:00 PM</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 font-sans text-sm text-stone-300 tracking-wider">
|
||||
{/* Friday */}
|
||||
<div className="flex justify-between items-center select-text">
|
||||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Friday</span>
|
||||
<span>5–10 pm</span>
|
||||
</div>
|
||||
|
||||
{/* Saturday */}
|
||||
<div className="flex justify-between items-center select-text">
|
||||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Saturday</span>
|
||||
<span>12–10 pm</span>
|
||||
</div>
|
||||
{/* Sunday */}
|
||||
<div className="flex justify-between items-center select-text">
|
||||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Sunday</span>
|
||||
<span>12–9 pm</span>
|
||||
</div>
|
||||
{/* Monday */}
|
||||
<div className="flex justify-between items-center select-text">
|
||||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Monday</span>
|
||||
<span>4–10 pm</span>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-dashed border-[#bc9e65]/20 my-1 w-full" />
|
||||
|
||||
{/* Tuesday */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
<path d="M10 13l4 4m0-4l-4 4" strokeLinecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col select-text">
|
||||
<span className="font-bold text-white uppercase text-base tracking-widest">Tuesday</span>
|
||||
<span className="text-stone-400 mt-0.5">Closed</span>
|
||||
</div>
|
||||
{/* Tuesday – Closed */}
|
||||
<div className="flex justify-between items-center select-text">
|
||||
<span className="text-white font-semibold uppercase tracking-widest">Tuesday</span>
|
||||
<span className="text-stone-400">Closed</span>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-dashed border-[#bc9e65]/20 my-1 w-full" />
|
||||
|
||||
{/* Wednesday */}
|
||||
<div className="flex justify-between items-center select-text">
|
||||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Wednesday</span>
|
||||
<span>4:30–10 pm</span>
|
||||
</div>
|
||||
{/* Thursday */}
|
||||
<div className="flex justify-between items-center select-text">
|
||||
<span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Thursday</span>
|
||||
<span>4–10 pm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column 3: The Dining Court (col-span 3, no borders) */}
|
||||
{/* Column 4: The Dining Court (col-span 3, no borders) */}
|
||||
<div className="lg:col-span-3 flex flex-col gap-4 text-left">
|
||||
<div className="flex flex-col items-start select-text">
|
||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2 pointer-events-none select-none" 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>
|
||||
<h4 className="font-serif text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||||
<h4 className="font-serif font-bold text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
|
||||
The Dining Court
|
||||
</h4>
|
||||
{/* Separator */}
|
||||
@ -242,22 +247,10 @@ export default function Footer() {
|
||||
</div>
|
||||
|
||||
{/* Footer Bottom copyright & credits bar */}
|
||||
<div className="pt-6 mt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-stone-500 font-sans text-sm tracking-[0.2em] uppercase select-text relative z-10">
|
||||
<span>© 2026 MY DOSA PLACE. ALL RIGHTS RESERVED.</span>
|
||||
|
||||
{/* Center lotus crest with horizontal gold dividers */}
|
||||
<div className="flex items-center gap-4 w-48 justify-center pointer-events-none select-none">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
|
||||
<svg className="w-5 h-4 text-[#bc9e65] opacity-75" viewBox="0 0 30 20" fill="currentColor">
|
||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||
</svg>
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span>PURE VEG SOUTH INDIAN HERITAGE.</span>
|
||||
<span className="text-sm text-[#bc9e65] leading-none mb-0.5">❧</span>
|
||||
</div>
|
||||
<div className="pt-6 mt-8 flex flex-col items-center justify-center text-center gap-2 text-stone-300 font-sans text-xs tracking-[0.2em] uppercase select-text relative z-10">
|
||||
<p>
|
||||
© 2026 My Dosa Place. All rights reserved. | Powered by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" className="hover:text-[#bc9e65] transition-colors">Metatroncube</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,68 +1,87 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
export default function Header({ visible }: { visible: boolean }) {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
// Close mobile menu when route changes
|
||||
useEffect(() => {
|
||||
setIsMobileMenuOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`fixed top-0 left-0 w-full h-16 bg-[#06120c]/85 border-b border-[#bc9e65]/20 backdrop-blur-md z-40 transition-transform duration-500 ease-in-out ${
|
||||
className={`fixed top-0 left-0 w-full h-22 bg-[#06120c]/90 border-b border-[#bc9e65]/20 backdrop-blur-md transition-transform duration-500 ease-in-out ${
|
||||
visible ? "translate-y-0" : "-translate-y-full"
|
||||
}`}
|
||||
} ${isMobileMenuOpen ? "z-[60]" : "z-40"}`}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto h-full px-6 flex items-center justify-between">
|
||||
|
||||
{/* Left Side: Brand Logo */}
|
||||
<a href="/" className="clickable flex items-center gap-2.5 select-none">
|
||||
<svg className="w-5 h-5 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>
|
||||
<span className="font-serif text-[#bc9e65] text-sm sm:text-base tracking-[0.25em] uppercase font-semibold">
|
||||
MY DOSA PLACE
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{/* Center: Navigation Links */}
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<a
|
||||
href="/"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
<a
|
||||
href="/about"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<a
|
||||
href="/menu"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
Menu
|
||||
</a>
|
||||
<a
|
||||
href="/blog"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
<a
|
||||
href="/contact"
|
||||
className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
{/* Left Side: Brand Logo */}
|
||||
<Link href="/" className="clickable flex items-center gap-2.5 select-none relative z-[70]">
|
||||
<Image
|
||||
src="/images/logo.png"
|
||||
alt="My Dosa Place"
|
||||
width={160}
|
||||
height={60}
|
||||
className="h-10 sm:h-12 w-auto pointer-events-none"
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Center: Navigation Links (Desktop) */}
|
||||
<nav className="hidden lg:flex items-center gap-8">
|
||||
<Link href="/" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Home</Link>
|
||||
<Link href="/about" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">About</Link>
|
||||
<Link href="/menu" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Menu</Link>
|
||||
<Link href="/blog" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Blog</Link>
|
||||
<Link href="/contact" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Contact</Link>
|
||||
</nav>
|
||||
|
||||
{/* Right Side: Reservation Button */}
|
||||
<div className="flex items-center">
|
||||
<a
|
||||
{/* Right Side: Reservation Button & Hamburger */}
|
||||
<div className="flex items-center gap-4 relative z-[70]">
|
||||
<Link
|
||||
href="/reservation"
|
||||
className="clickable px-4 sm:px-5 py-2 border border-[#bc9e65]/50 hover:border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] transition-all duration-300 shadow-md"
|
||||
className="hidden lg:inline-block clickable px-4 sm:px-5 py-2 border border-[#bc9e65]/50 hover:border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] transition-all duration-300 shadow-md"
|
||||
>
|
||||
RESERVE TABLE
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
className="lg:hidden p-2 text-[#bc9e65] hover:text-white transition-colors"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="Toggle Menu"
|
||||
>
|
||||
{isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Overlay */}
|
||||
<div
|
||||
className={`fixed inset-0 bg-[#06120c] z-[60] flex flex-col items-center justify-center transition-all duration-300 lg:hidden ${
|
||||
isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
|
||||
}`}
|
||||
>
|
||||
<nav className="flex flex-col items-center gap-8 text-center mt-12">
|
||||
<Link href="/" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">Home</Link>
|
||||
<Link href="/about" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">About</Link>
|
||||
<Link href="/menu" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">Menu</Link>
|
||||
<Link href="/blog" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">Blog</Link>
|
||||
<Link href="/contact" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">Contact</Link>
|
||||
|
||||
<Link
|
||||
href="/reservation"
|
||||
className="mt-8 px-8 py-3 border border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#06120c] bg-[#bc9e65] transition-all duration-300 shadow-md"
|
||||
>
|
||||
RESERVE TABLE
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
@ -28,15 +28,18 @@ export default function InnerBanner({ pageName }: InnerBannerProps) {
|
||||
{/* Content */}
|
||||
<div className="relative z-20 flex flex-col items-center text-center px-6">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="flex items-center gap-2.5 mb-4">
|
||||
<Link
|
||||
href="/"
|
||||
className="font-sans text-[11px] sm:text-xs tracking-[0.2em] text-[#bc9e65]/80 hover:text-[#bc9e65] uppercase transition-colors duration-200"
|
||||
className="font-sans text-xs sm:text-sm tracking-[0.2em] text-[#bc9e65] font-semibold hover:text-white uppercase transition-colors duration-200"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<span className="text-[#bc9e65]/50 text-xs select-none">›</span>
|
||||
<span className="font-sans text-[11px] sm:text-xs tracking-[0.2em] text-[#1a3a25] uppercase">
|
||||
{/* Heart separator */}
|
||||
<svg className="w-3.5 h-3.5 text-[#bc9e65] flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||||
</svg>
|
||||
<span className="font-sans text-xs sm:text-sm tracking-[0.2em] text-[#2d7a4f] font-semibold uppercase">
|
||||
{pageName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -7,85 +7,139 @@ import AnimatedSection from "@/components/AnimatedSection";
|
||||
|
||||
const TABS = [
|
||||
{ id: "all", label: "ALL ITEMS", noIcon: true },
|
||||
{ id: "dosa", label: "DOSA", active: true },
|
||||
{ id: "idli", label: "IDLI" },
|
||||
{ id: "vada", label: "VADA" },
|
||||
{ id: "classics", label: "CLASSICS" },
|
||||
{ id: "dosa", label: "DOSA" },
|
||||
{ id: "rava", label: "RAVA SPL" },
|
||||
{ id: "uttapam", label: "UTTAPAM" },
|
||||
{ id: "tiffin", label: "TIFFIN" },
|
||||
{ id: "breads", label: "BREADS" },
|
||||
{ id: "appetizers", label: "APPETIZERS" },
|
||||
{ id: "tiffin", label: "TIFFIN SPL" },
|
||||
{ id: "rice", label: "RICE" },
|
||||
{ id: "curry", label: "CURRY" },
|
||||
{ id: "beverages", label: "BEVERAGES" }
|
||||
{ id: "beverages", label: "BEVERAGES" },
|
||||
{ id: "weekend", label: "WEEKEND SPL" },
|
||||
];
|
||||
|
||||
const MENU_ITEMS = [
|
||||
{
|
||||
id: 1,
|
||||
name: "ONION RAVA DOSA",
|
||||
desc: "Crispy semolina crepe with onions, herbs & spices.",
|
||||
price: "$9.99",
|
||||
tag: "RAVA SPL",
|
||||
bg: "light",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "MASALA DOSA",
|
||||
desc: "Crispy thin rice & lentil crepe stuffed with potato masala.",
|
||||
price: "$8.99",
|
||||
tag: "CLASSIC",
|
||||
bg: "light",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "IDLI SAMBAR (2 PCS)",
|
||||
desc: "Steamed fluffy rice & lentil cakes with hot sambar.",
|
||||
price: "$6.49",
|
||||
tag: "TIFFIN SPL",
|
||||
bg: "green",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "ONION RAVA MASALA DOSA",
|
||||
desc: "Semolina crepe with onions and spiced potato filling.",
|
||||
price: "$9.49",
|
||||
tag: "RAVA SPL",
|
||||
bg: "light",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "MYSORE MASALA",
|
||||
desc: "Rice crepe spread with spicy chutney & potato masala.",
|
||||
price: "$9.49",
|
||||
tag: "CLASSIC",
|
||||
bg: "dark",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "MEDU VADA (2 PCS)",
|
||||
desc: "Deep fried crispy lentil donuts served with sambar & chutney.",
|
||||
price: "$6.49",
|
||||
tag: "TIFFIN SPL",
|
||||
bg: "light",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "PAPER ROAST DOSA",
|
||||
desc: "Extra large, paper-thin, crispy dosa served hot.",
|
||||
price: "$10.49",
|
||||
tag: "CLASSIC",
|
||||
bg: "light",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "RAVA MASALA DOSA",
|
||||
desc: "Crispy semolina crepe filled with spiced potato masala.",
|
||||
price: "$9.49",
|
||||
tag: "RAVA SPL",
|
||||
bg: "light",
|
||||
}
|
||||
// ── CLASSICS ──────────────────────────────────────────────────────────
|
||||
{ id: 1, name: "IDLY (6 PCS)", desc: "Steamed fluffy rice & lentil cakes served with sambar & chutneys.", price: "$10.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 2, name: "THATTU IDLY (1 PC)", desc: "Plate-style idly served with sambar & fresh chutneys.", price: "$10.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 3, name: "THATTU IDLY (2 PCS)", desc: "Two plate-style idlies with sambar & fresh chutneys.", price: "$14.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 4, name: "GHEE PODI IDLY", desc: "Soft idlies tossed in aromatic gunpowder podi with ghee.", price: "$14.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 5, name: "MINI SAMBAR IDLY", desc: "Bite-sized idlies immersed in rich, spiced sambar.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 6, name: "SAMBAR IDLY", desc: "Classic idly dunked in hot, tangy sambar.", price: "$9.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 7, name: "MEDHU VADA", desc: "Crispy golden lentil donuts served with sambar & chutney.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 8, name: "SAMBAR VADA", desc: "Crispy vadas soaked in hearty sambar.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 9, name: "DAHI VADA", desc: "Soft vadas topped with creamy yogurt & spiced chutneys.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 10, name: "1 IDLY 1 VADA COMBO", desc: "One fluffy idly and one crispy vada with sambar & chutney.", price: "$11.99", tag: "CLASSICS", bg: "green" },
|
||||
{ id: 11, name: "2 IDLY 1 VADA COMBO", desc: "Two soft idlies and one crispy vada with sambar & chutney.", price: "$12.99", tag: "CLASSICS", bg: "green" },
|
||||
{ id: 12, name: "1 IDLY 2 VADA COMBO", desc: "One fluffy idly and two crispy vadas with sambar & chutney.", price: "$13.99", tag: "CLASSICS", bg: "green" },
|
||||
{ id: 13, name: "RASA VADA", desc: "Crispy vadas soaked in tangy, peppery rasam.", price: "$13.99", tag: "CLASSICS", bg: "light" },
|
||||
{ id: 14, name: "PARUPPU VADA", desc: "Crispy deep-fried lentil patties seasoned with spices.", price: "$11.99", tag: "CLASSICS", bg: "light" },
|
||||
|
||||
// ── DOSA ──────────────────────────────────────────────────────────────
|
||||
{ id: 20, name: "PLAIN DOSA", desc: "Thin, crispy fermented rice & lentil crepe served with chutneys.", price: "$10.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 21, name: "MASALA DOSA", desc: "Crispy dosa stuffed with spiced potato masala.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 22, name: "MYSORE DOSA", desc: "Crispy dosa spread with fiery Mysore chutney.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 23, name: "MYSORE MASALA", desc: "Spicy Mysore chutney spread dosa with potato masala filling.", price: "$14.99", tag: "DOSA", bg: "dark" },
|
||||
{ id: 24, name: "GHEE ROAST", desc: "Dosa cooked in rich ghee till golden & irresistibly crisp.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 25, name: "GHEE MASALA", desc: "Ghee-roasted dosa generously filled with potato masala.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 26, name: "ONION DOSA", desc: "Classic dosa loaded with caramelised onions & spices.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 27, name: "ONION MASALA", desc: "Onion dosa with a hearty spiced potato filling.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 28, name: "PODI MASALA", desc: "Dosa smeared with spicy gunpowder podi & stuffed with masala.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 29, name: "GHEE PODI MASALA", desc: "Ghee-laced dosa with gunpowder podi and potato masala.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 30, name: "GHEE PODI", desc: "Dosa drizzled with ghee and fragrant gunpowder podi.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 31, name: "PAV BHAJI DOSA", desc: "Crispy dosa topped with spiced Mumbai-style pav bhaji.", price: "$16.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 32, name: "BUTTER MASALA", desc: "Dosa slathered in butter with a spiced masala filling.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 33, name: "CHZ DOSA", desc: "Dosa filled with gooey melted cheese & spices.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 34, name: "CHETTINAD MASALA", desc: "Aromatic Chettinad spiced dosa with potato filling.", price: "$16.99", tag: "DOSA", bg: "dark" },
|
||||
{ id: 35, name: "ANDHRA CHARA", desc: "Fiery Andhra-style spiced dosa, bold & robust.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 36, name: "ANDHRA KARA MASALA", desc: "Spicy Andhra kara chutney dosa with masala filling.", price: "$16.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 37, name: "KARA DOSA", desc: "Dosa with spicy kara chutney spread.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 38, name: "BUTTER GARLIC", desc: "Dosa cooked with butter and roasted garlic.", price: "$14.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 39, name: "BUTTER GARLIC MASALA", desc: "Butter garlic dosa filled with spiced potato masala.", price: "$15.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 40, name: "PANEER BUTTER (BURJI)", desc: "Dosa with crumbled paneer cooked in butter & spices.", price: "$17.99", tag: "DOSA", bg: "dark" },
|
||||
{ id: 41, name: "BUTTER DOSA", desc: "Simple crispy dosa lavishly spread with fresh butter.", price: "$13.99", tag: "DOSA", bg: "light" },
|
||||
{ id: 42, name: "KIDS DOSA", desc: "A small, soft & mild dosa perfect for little ones.", price: "$9.99", tag: "DOSA", bg: "light" },
|
||||
|
||||
// ── RAVA SPL ──────────────────────────────────────────────────────────
|
||||
{ id: 50, name: "RAVA DOSA", desc: "Thin, lacy & crispy semolina crepe served with chutneys.", price: "$13.99", tag: "RAVA SPL", bg: "light" },
|
||||
{ id: 51, name: "RAVA MASALA", desc: "Crispy rava dosa filled with spiced potato masala.", price: "$14.99", tag: "RAVA SPL", bg: "light" },
|
||||
{ id: 52, name: "ONION RAVA", desc: "Lacy semolina crepe loaded with onions & herbs.", price: "$15.99", tag: "RAVA SPL", bg: "light" },
|
||||
{ id: 53, name: "ONION RAVA MASALA", desc: "Onion rava dosa generously stuffed with potato masala.", price: "$16.99", tag: "RAVA SPL", bg: "light" },
|
||||
|
||||
// ── UTTAPAM ───────────────────────────────────────────────────────────
|
||||
{ id: 60, name: "PLAIN UTTAPAM", desc: "Thick, soft rice pancake served with sambar & chutneys.", price: "$10.99", tag: "UTTAPAM", bg: "light" },
|
||||
{ id: 61, name: "ONION UTTAPAM", desc: "Fluffy uttapam generously topped with fresh onions.", price: "$12.99", tag: "UTTAPAM", bg: "light" },
|
||||
{ id: 62, name: "GHEE PODI UTTAPAM", desc: "Uttapam drizzled with ghee & aromatic gunpowder podi.", price: "$14.99", tag: "UTTAPAM", bg: "light" },
|
||||
{ id: 63, name: "MIX VEG UTTAPAM", desc: "Uttapam loaded with a colourful medley of fresh vegetables.", price: "$16.99", tag: "UTTAPAM", bg: "green" },
|
||||
{ id: 64, name: "ONION TOMATO UTTAPAM", desc: "Classic uttapam with onion and ripe tomato topping.", price: "$13.99", tag: "UTTAPAM", bg: "light" },
|
||||
{ id: 65, name: "ONION CHILLI UTTAPAM", desc: "Spiced uttapam topped with onions and green chillies.", price: "$13.99", tag: "UTTAPAM", bg: "light" },
|
||||
|
||||
// ── BREADS ────────────────────────────────────────────────────────────
|
||||
{ id: 70, name: "CHAPPATHI KADALA", desc: "Soft wheat flatbread served with spiced black chickpea curry.", price: "$13.99", tag: "BREADS", bg: "light" },
|
||||
{ id: 71, name: "PAROTTA KADALA", desc: "Flaky layered parotta paired with rich kadala curry.", price: "$14.99", tag: "BREADS", bg: "light" },
|
||||
{ id: 72, name: "POORI MASALA", desc: "Deep-fried fluffy poori served with spiced potato masala.", price: "$13.99", tag: "BREADS", bg: "light" },
|
||||
|
||||
// ── APPETIZERS ────────────────────────────────────────────────────────
|
||||
{ id: 80, name: "GOBI 65", desc: "Crispy spiced fried cauliflower in a tangy South Indian style.", price: "$14.99", tag: "APPETIZERS", bg: "light" },
|
||||
{ id: 81, name: "PANEER 65", desc: "Crispy marinated paneer cubes fried with aromatic spices.", price: "$15.99", tag: "APPETIZERS", bg: "light" },
|
||||
{ id: 82, name: "CHILLI PAROTTA", desc: "Shredded flaky parotta stir-fried with peppers & spicy sauces.", price: "$14.99", tag: "APPETIZERS", bg: "light" },
|
||||
{ id: 83, name: "KOTHU PAROTTA", desc: "Finely chopped parotta tossed with veggies, eggs & spices.", price: "$14.99", tag: "APPETIZERS", bg: "light" },
|
||||
{ id: 84, name: "CHILLI GOBI", desc: "Crispy cauliflower tossed in spicy Indo-Chinese chilli sauce.", price: "$15.99", tag: "APPETIZERS", bg: "dark" },
|
||||
{ id: 85, name: "CHILLI PANEER", desc: "Crispy paneer cubes tossed in bold Indo-Chinese chilli sauce.", price: "$16.99", tag: "APPETIZERS", bg: "dark" },
|
||||
{ id: 86, name: "CAULIFLOWER MANCHURIAN",desc: "Crispy gobi florets in a savory, tangy Manchurian sauce.", price: "$15.99", tag: "APPETIZERS", bg: "light" },
|
||||
{ id: 87, name: "CHILLI IDLY", desc: "Crispy fried idly pieces tossed in spicy Indo-Chinese sauce.", price: "$13.99", tag: "APPETIZERS", bg: "light" },
|
||||
{ id: 88, name: "ONION PAKODA", desc: "Crunchy golden fritters made with onions, gram flour & spices.", price: "$12.99", tag: "APPETIZERS", bg: "light" },
|
||||
|
||||
// ── TIFFIN SPL ────────────────────────────────────────────────────────
|
||||
{ id: 90, name: "GHEE PONGAL", desc: "Comforting rice & lentil porridge cooked with ghee, ginger & pepper.", price: "$12.99", tag: "TIFFIN SPL", bg: "light" },
|
||||
{ id: 91, name: "RAVA KICHADI", desc: "Savoury semolina upma cooked with vegetables & spices.", price: "$12.99", tag: "TIFFIN SPL", bg: "light" },
|
||||
{ id: 92, name: "MINI TIFFIN COMBO", desc: "A delightful assortment of mini tiffin bites – perfect sampler.", price: "$16.99", tag: "TIFFIN SPL", bg: "green" },
|
||||
{ id: 93, name: "MEGA TIFFIN COMBO", desc: "The ultimate tiffin feast with coffee & guava included.", price: "$19.99", tag: "TIFFIN SPL", bg: "green" },
|
||||
|
||||
// ── WEEKEND SPL ───────────────────────────────────────────────────────
|
||||
{ id: 100, name: "THALI SOUTH INDIAN", desc: "A royal platter of rice, curries, sides & dessert. Sat & Sun 12–3 PM.", price: "$21.99", tag: "WEEKEND SPL",bg: "dark" },
|
||||
{ id: 101, name: "VEG FRIED RICE / NOODLES", desc: "Wok-tossed fried rice or noodles with fresh veggies & sauces.", price: "$15.99", tag: "WEEKEND SPL",bg: "light" },
|
||||
{ id: 102, name: "CHENNA BHATURA", desc: "Fluffy deep-fried bread with spiced chickpea (chenna) curry.", price: "$15.99", tag: "WEEKEND SPL",bg: "light" },
|
||||
|
||||
// ── RICE ──────────────────────────────────────────────────────────────
|
||||
{ id: 110, name: "CURD RICE", desc: "Cooling yogurt rice seasoned with mustard, ginger & curry leaves.", price: "$11.99", tag: "RICE", bg: "light" },
|
||||
{ id: 111, name: "SAMBAR RICE", desc: "Flavourful rice cooked with hearty sambar & vegetables.", price: "$13.99", tag: "RICE", bg: "light" },
|
||||
{ id: 112, name: "PULIYODARAI", desc: "Tangy tamarind rice tempered with spices & peanuts.", price: "$13.99", tag: "RICE", bg: "light" },
|
||||
{ id: 113, name: "VEG PULAO", desc: "Fragrant basmati rice cooked with vegetables & whole spices.", price: "$15.99", tag: "RICE", bg: "green" },
|
||||
{ id: 114, name: "LEMON RICE", desc: "Zesty rice tossed with lemon juice, turmeric & mustard seeds.", price: "$13.99", tag: "RICE", bg: "light" },
|
||||
{ id: 115, name: "TOMATO DAAL", desc: "Comforting lentil curry simmered with ripe tomatoes & spices.", price: "$14.99", tag: "RICE", bg: "light" },
|
||||
|
||||
// ── BEVERAGES ─────────────────────────────────────────────────────────
|
||||
{ id: 120, name: "COLD BADAM MILK", desc: "Chilled almond-infused milk sweetened with saffron & cardamom.", price: "$9.99", tag: "BEVERAGES", bg: "light" },
|
||||
{ id: 121, name: "MANGO LASSI", desc: "Refreshing yogurt drink blended with sweet Alphonso mangoes.", price: "$8.99", tag: "BEVERAGES", bg: "light" },
|
||||
{ id: 122, name: "ROSE MILK", desc: "Chilled milk flavoured with rose syrup – a South Indian classic.", price: "$7.99", tag: "BEVERAGES", bg: "light" },
|
||||
{ id: 123, name: "POP / WATER", desc: "Chilled soft drink or still water.", price: "$2.99", tag: "BEVERAGES", bg: "light" },
|
||||
{ id: 124, name: "MASALA CHAI", desc: "Aromatic spiced tea brewed with ginger, cardamom & milk.", price: "$4.99", tag: "BEVERAGES", bg: "light" },
|
||||
{ id: 125, name: "FILTER COFFEE", desc: "Authentic South Indian decoction coffee with frothy milk.", price: "$4.99", tag: "BEVERAGES", bg: "dark" },
|
||||
];
|
||||
|
||||
export default function MenuPageContent() {
|
||||
const [activeTab, setActiveTab] = useState("dosa");
|
||||
const [activeTab, setActiveTab] = useState("classics");
|
||||
|
||||
// Map tab ids → item tag values
|
||||
const TAB_TAG_MAP: Record<string, string> = {
|
||||
classics: "CLASSICS",
|
||||
dosa: "DOSA",
|
||||
rava: "RAVA SPL",
|
||||
uttapam: "UTTAPAM",
|
||||
breads: "BREADS",
|
||||
appetizers: "APPETIZERS",
|
||||
tiffin: "TIFFIN SPL",
|
||||
rice: "RICE",
|
||||
beverages: "BEVERAGES",
|
||||
weekend: "WEEKEND SPL",
|
||||
};
|
||||
|
||||
const filteredItems =
|
||||
activeTab === "all"
|
||||
? MENU_ITEMS
|
||||
: MENU_ITEMS.filter((item) => item.tag === TAB_TAG_MAP[activeTab]);
|
||||
|
||||
return (
|
||||
<div className="bg-[#faf7f2] font-sans pb-24 text-stone-800">
|
||||
@ -99,7 +153,7 @@ export default function MenuPageContent() {
|
||||
<div className="flex flex-col items-center mb-10">
|
||||
<div className="flex items-center gap-6">
|
||||
<span className="text-[#bc9e65]">❧</span>
|
||||
<h2 className="font-serif text-3xl font-bold text-[#0f3f26] uppercase tracking-widest">DOSA SPECIALTIES</h2>
|
||||
<h2 className="font-serif text-3xl font-bold text-[#0f3f26] uppercase tracking-widest">MY DOSA SPECIALTIES</h2>
|
||||
<span className="text-[#bc9e65] scale-x-[-1]">❧</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-3 text-sm font-semibold tracking-wide text-stone-600">
|
||||
@ -112,7 +166,7 @@ export default function MenuPageContent() {
|
||||
{/* Tabs */}
|
||||
<AnimatedSection variant="fadeUp" delay={0}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16 relative z-10">
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-6 hide-scrollbar justify-start md:justify-center items-end">
|
||||
<div className="flex flex-wrap items-center gap-2 justify-center">
|
||||
{TABS.map((tab) => {
|
||||
const isActive = activeTab === tab.id;
|
||||
const isAllItems = tab.id === "all";
|
||||
@ -172,10 +226,10 @@ export default function MenuPageContent() {
|
||||
|
||||
{/* Card Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{MENU_ITEMS.map((item, index) => (
|
||||
<AnimatedSection key={item.id} variant="fadeUp" delay={index * 0.08}>
|
||||
{filteredItems.map((item, index) => (
|
||||
<AnimatedSection key={item.id} variant="fadeUp" delay={index * 0.08} className="h-full">
|
||||
<div
|
||||
className="relative rounded-3xl overflow-hidden shadow-lg group transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl border bg-white text-stone-800 border-stone-200 hover:bg-[#0a4a2b] hover:border-[#0a4a2b]"
|
||||
className="relative rounded-3xl overflow-hidden shadow-lg group transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl border bg-white text-stone-800 border-stone-200 hover:bg-[#0a4a2b] hover:border-[#0a4a2b] flex flex-col h-full"
|
||||
>
|
||||
{/* Image Section */}
|
||||
<div className="relative h-30 w-full bg-[#111]">
|
||||
@ -199,7 +253,7 @@ export default function MenuPageContent() {
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="pt-10 pb-6 px-6 relative">
|
||||
<div className="pt-10 pb-6 px-6 relative flex flex-col flex-grow">
|
||||
|
||||
<h3 className="font-serif text-lg font-bold tracking-wider mb-2 pr-6 text-[#0f3f26] group-hover:text-white transition-colors duration-500">
|
||||
{item.name}
|
||||
@ -210,15 +264,15 @@ export default function MenuPageContent() {
|
||||
🌿
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] font-sans mb-6 min-h-[32px] leading-relaxed text-stone-500 group-hover:text-stone-300 transition-colors duration-500">
|
||||
<p className="text-[11px] font-sans mb-6 leading-relaxed text-stone-500 group-hover:text-stone-300 transition-colors duration-500 flex-grow">
|
||||
{item.desc}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-serif text-lg font-bold text-[#0f3f26] group-hover:text-white transition-colors duration-500">
|
||||
{/* <span className="font-serif text-lg font-bold text-[#0f3f26] group-hover:text-white transition-colors duration-500">
|
||||
{item.price}
|
||||
</span>
|
||||
</span> */}
|
||||
<span className={`text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-full flex items-center gap-1 border transition-colors duration-500
|
||||
${item.tag.includes('RAVA') ? 'bg-[#e8f5e9] text-[#1b5e20] border-[#a5d6a7]/70 group-hover:bg-white/20 group-hover:text-white group-hover:border-white/30' :
|
||||
item.tag.includes('CLASSIC') ? 'bg-[#fbe9e7] text-[#c62828] border-[#ffab91]/70 group-hover:bg-white/20 group-hover:text-white group-hover:border-white/30' :
|
||||
@ -231,9 +285,9 @@ export default function MenuPageContent() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button className="w-6 h-6 rounded-full flex items-center justify-center font-bold text-sm transition-all hover:scale-110 bg-[#0f3f26] text-white group-hover:bg-[#bc9e65] group-hover:text-[#0a4a2b]">
|
||||
{/* <button className="w-6 h-6 rounded-full flex items-center justify-center font-bold text-sm transition-all hover:scale-110 bg-[#0f3f26] text-white group-hover:bg-[#bc9e65] group-hover:text-[#0a4a2b]">
|
||||
+
|
||||
</button>
|
||||
</button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -90,8 +90,9 @@ const CategoryPill = ({ tag, type }: { tag: string; type: "green" | "gold" | "or
|
||||
};
|
||||
const style = styles[type];
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full border text-sm font-sans font-bold uppercase tracking-wider shadow-sm flex-shrink-0 ${style.bg}`}>
|
||||
<span className="text-base leading-none font-extrabold">{style.icon}</span>
|
||||
<span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full border text-[9px] font-sans font-bold uppercase tracking-wider shadow-sm flex-shrink-0 ${style.bg}`}>
|
||||
<span className="text-[10px] leading-none font-extrabold">{style.icon}</span>
|
||||
|
||||
{tag}
|
||||
</span>
|
||||
);
|
||||
@ -262,7 +263,7 @@ export default function MenuPreview() {
|
||||
|
||||
<TitleDivider />
|
||||
|
||||
<p className="font-sans text-sm sm:text-lg text-stone-700 max-w-2xl mt-4 leading-relaxed tracking-wider italic font-semibold">
|
||||
<p className="font-sans text-sm sm:text-lg text-stone-700 max-w-3xl mt-4 leading-relaxed tracking-wider italic font-semibold">
|
||||
Explore a wide variety of authentic South Indian vegetarian dishes,<br className="hidden sm:inline" />
|
||||
crafted with traditional recipes and the finest ingredients.
|
||||
</p>
|
||||
@ -292,7 +293,7 @@ export default function MenuPreview() {
|
||||
|
||||
<div className="bg-[#0a4a2b] border border-[#d8c396]/80 px-8 py-2.5 rounded-full z-10 font-serif font-bold text-sm sm:text-base tracking-[0.25em] text-[#fcfaf2] uppercase shadow-lg flex items-center gap-3">
|
||||
<span className="text-[#d8c396] text-sm opacity-75">✦</span>
|
||||
Dosa Specialties
|
||||
My Dosa Specialties
|
||||
<span className="text-[#d8c396] text-sm opacity-75">✦</span>
|
||||
</div>
|
||||
|
||||
@ -346,7 +347,7 @@ export default function MenuPreview() {
|
||||
}
|
||||
|
||||
const BottomFeatures = () => (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 mt-16 bg-[#faf8f2]/95 border border-[#d8c396]/45 rounded-2xl p-6 shadow-lg max-w-4xl mx-auto z-10 relative divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/25 select-text">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 mt-16 bg-[#faf8f2]/95 border border-[#d8c396]/45 rounded-2xl p-6 shadow-lg mx-auto z-10 relative divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/25 select-text">
|
||||
{/* Feature 1 */}
|
||||
<div className="flex items-center gap-3.5 justify-center px-4 py-3 md:py-0">
|
||||
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||
|
||||
@ -23,14 +23,14 @@ const StoryLotusDivider = () => (
|
||||
|
||||
export default function RestaurantStory() {
|
||||
return (
|
||||
<section id="story" className="relative py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none">
|
||||
<section id="story" className="relative py-24 md:py-24 px-6 sm:px-12 md:px-24 overflow-hidden select-none bg-[#f5edd9]">
|
||||
{/* Traditional Background Image containing pre-composed sketches and mandalas */}
|
||||
<Image
|
||||
src="/images/home/our-story/our-story-bg.webp"
|
||||
alt="Traditional South Indian Story Background"
|
||||
fill
|
||||
priority
|
||||
className="object-fill pointer-events-none select-none z-0"
|
||||
className="object-cover object-center pointer-events-none select-none z-0"
|
||||
/>
|
||||
|
||||
{/* Traditional Temple Borders */}
|
||||
@ -57,8 +57,8 @@ export default function RestaurantStory() {
|
||||
|
||||
{/* Main Headline */}
|
||||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase">
|
||||
South Indian Recipes,<br />
|
||||
<span className="text-[#0a4a2b] font-extrabold block mt-1">Made the Traditional Way</span>
|
||||
Traditional South<br />
|
||||
<span className="text-[#0a4a2b] font-extrabold block mt-1">Indian Recipes</span>
|
||||
</h2>
|
||||
|
||||
{/* Traditional Gold Divider */}
|
||||
@ -66,7 +66,7 @@ export default function RestaurantStory() {
|
||||
|
||||
{/* Paragraph Narrative */}
|
||||
<p className="font-sans text-sm sm:text-base lg:text-lg text-stone-700 leading-relaxed max-w-2xl text-center tracking-wider mb-2 italic font-semibold">
|
||||
At My Dosa Place, every recipe carries the memory of a South Indian kitchen—passed from hand to hand, kitchen to kitchen, and generation to generation. Nestled in the heart of Waterloo, we've created a home for those who grew up with these flavours and an introduction for those experiencing them for the first time.
|
||||
At My Dosa Place, every recipe reflects the heart of a South Indian kitchen, passed down through generations. In the heart of Waterloo, we bring authentic flavours to those who grew up with them and those discovering them for the first time.
|
||||
</p>
|
||||
|
||||
{/* Traditional Bottom Gold Divider */}
|
||||
@ -86,10 +86,12 @@ export default function RestaurantStory() {
|
||||
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none overflow-hidden">
|
||||
<Image src="/images/home/our-story/icons/pure-veg.webp" alt="100% Pure Veg" width={32} height={32} className="object-contain" />
|
||||
</div>
|
||||
<h4 className="font-serif text-base sm:text-sm font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
<h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
|
||||
100% Pure Veg
|
||||
</h4>
|
||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[220px] mx-auto">
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
|
||||
|
||||
Pure vegetarian food made with the finest ingredients.
|
||||
</p>
|
||||
</motion.div>
|
||||
@ -105,10 +107,12 @@ export default function RestaurantStory() {
|
||||
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none overflow-hidden">
|
||||
<Image src="/images/home/our-story/icons/authentic.webp" alt="Authentic Recipes" width={32} height={32} className="object-contain" />
|
||||
</div>
|
||||
<h4 className="font-serif text-base sm:text-sm font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
<h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
|
||||
Authentic Recipes
|
||||
</h4>
|
||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[220px] mx-auto">
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
|
||||
|
||||
Traditional recipes crafted with authentic South Indian flavors.
|
||||
</p>
|
||||
</motion.div>
|
||||
@ -124,10 +128,12 @@ export default function RestaurantStory() {
|
||||
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none overflow-hidden">
|
||||
<Image src="/images/home/our-story/icons/hospitality.webp" alt="Warm Hospitality" width={32} height={32} className="object-contain" />
|
||||
</div>
|
||||
<h4 className="font-serif text-base sm:text-sm font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
<h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
|
||||
Warm Hospitality
|
||||
</h4>
|
||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[220px] mx-auto">
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
|
||||
|
||||
A homely environment with friendly service and a smile.
|
||||
</p>
|
||||
</motion.div>
|
||||
@ -143,10 +149,12 @@ export default function RestaurantStory() {
|
||||
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none overflow-hidden">
|
||||
<Image src="/images/home/our-story/icons/love.webp" alt="Made With Love" width={32} height={32} className="object-contain" />
|
||||
</div>
|
||||
<h4 className="font-serif text-base sm:text-sm font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
<h4 className="font-serif text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1.5">
|
||||
|
||||
Made With Love
|
||||
</h4>
|
||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[220px] mx-auto">
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
|
||||
|
||||
Every dish is prepared with love, care and traditional values.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@ -91,7 +91,7 @@ export default function SpatialSanctuary() {
|
||||
className="absolute top-0 left-0 h-full flex flex-row items-center z-10"
|
||||
style={{ width: "max-content" }}
|
||||
>
|
||||
|
||||
|
||||
{/* ==================== SLIDE 1: THE CULINARY HERITAGE MAIN COVER ==================== */}
|
||||
<div className="w-screen h-screen flex-shrink-0 relative flex flex-col justify-center px-6 sm:px-12 md:px-16 pt-12 pb-20 overflow-hidden bg-[#fdfcf7]">
|
||||
{/* Parchment background image for Slide 1 */}
|
||||
@ -108,10 +108,10 @@ export default function SpatialSanctuary() {
|
||||
|
||||
{/* Slide Content layout */}
|
||||
<div className="max-w-7xl mx-auto w-full flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12 relative z-10">
|
||||
|
||||
|
||||
{/* Left Side details */}
|
||||
<div className="w-full lg:w-[50%] flex flex-col items-center lg:items-start text-center lg:text-left justify-center select-text">
|
||||
|
||||
|
||||
{/* Pre-title with Gold star crest */}
|
||||
<div className="flex flex-col items-center lg:items-start mb-2 pointer-events-none select-none">
|
||||
<svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
|
||||
@ -155,14 +155,14 @@ export default function SpatialSanctuary() {
|
||||
|
||||
{/* Grid of 4 Sanctuary Features */}
|
||||
<div className="grid grid-cols-2 gap-4 w-full max-w-lg">
|
||||
|
||||
|
||||
{/* Card 1: Recipes */}
|
||||
<div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-4 flex flex-col items-center text-center group">
|
||||
<Image src="/images/home/culinary-heritage/icons/culinary-heritage.webp" alt="Heritage Recipes" width={32} height={32} className="object-contain mb-2" />
|
||||
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Heritage Recipes
|
||||
</h5>
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[110px]">
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]">
|
||||
Timeless recipes rooted in tradition.
|
||||
</p>
|
||||
</div>
|
||||
@ -173,7 +173,7 @@ export default function SpatialSanctuary() {
|
||||
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Pure A2 Ghee
|
||||
</h5>
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[110px]">
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]">
|
||||
Traditional ghee that enriches the flavor.
|
||||
</p>
|
||||
</div>
|
||||
@ -184,7 +184,7 @@ export default function SpatialSanctuary() {
|
||||
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Artisanal Dosa
|
||||
</h5>
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[110px]">
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]">
|
||||
Stone-ground batter fermented to perfection.
|
||||
</p>
|
||||
</div>
|
||||
@ -195,7 +195,7 @@ export default function SpatialSanctuary() {
|
||||
<h5 className="font-serif text-base sm:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
|
||||
Imperial Feasts
|
||||
</h5>
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[110px]">
|
||||
<p className="font-sans text-sm sm:text-sm text-stone-500 leading-relaxed max-w-[180px]">
|
||||
Grand platters reflecting royal tastes.
|
||||
</p>
|
||||
</div>
|
||||
@ -236,7 +236,7 @@ export default function SpatialSanctuary() {
|
||||
|
||||
{/* Grid Layout Container */}
|
||||
<div className="grid grid-rows-2 auto-cols-[220px] sm:auto-cols-[250px] md:auto-cols-[270px] grid-flow-col gap-6 h-[75vh] max-h-[680px] w-max relative z-10 pr-24">
|
||||
|
||||
|
||||
{/* Card 1: Row 1, Col 1 - Cream Intro Card */}
|
||||
<div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-5 flex flex-col justify-center select-text relative">
|
||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
|
||||
|
||||
@ -18,7 +18,7 @@ export default function SubpageLayout({ children }: { children: React.ReactNode
|
||||
<main className="w-full relative bg-darkbg text-foreground overflow-hidden select-none">
|
||||
{/* Isolated wrapper for client-only widgets to prevent hydration insertion conflicts */}
|
||||
<div id="client-only-widgets">
|
||||
{mounted && <SoundManager />}
|
||||
{/* {mounted && <SoundManager />} */}
|
||||
{mounted && <CustomCursor />}
|
||||
{mounted && <Header visible={true} />}
|
||||
</div>
|
||||
|
||||
@ -15,10 +15,22 @@ export default function TestimonialSlider() {
|
||||
try {
|
||||
const res = await fetch("/api/reviews");
|
||||
const data = await res.json().catch(() => ({}));
|
||||
const reviews = Array.isArray(data.reviews) ? data.reviews : [];
|
||||
|
||||
if (!res.ok) {
|
||||
const errorMessage = data?.error || `${res.status} ${res.statusText}`;
|
||||
console.warn('Reviews API returned non-ok response:', errorMessage);
|
||||
}
|
||||
|
||||
if (data.error) {
|
||||
console.warn('Reviews API returned an error payload:', data.error);
|
||||
}
|
||||
|
||||
// Ignore fallback reviews to show Google reviews only
|
||||
const reviews = Array.isArray(data.reviews) && !data.fallback ? data.reviews : [];
|
||||
setReviews(formatReviewsForHome(reviews));
|
||||
} catch (error) {
|
||||
console.error("Reviews fetch failed:", error);
|
||||
setReviews([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@ -56,7 +68,7 @@ export default function TestimonialSlider() {
|
||||
}
|
||||
|
||||
if (!displayReviews.length) {
|
||||
return <div className="py-20 text-[#bc9e65] text-sm">No reviews available at this time.</div>;
|
||||
return <div className="py-20 text-[#bc9e65] text-sm">No Google reviews are available right now.</div>;
|
||||
}
|
||||
|
||||
const review = displayReviews[current % displayReviews.length];
|
||||
@ -65,49 +77,87 @@ export default function TestimonialSlider() {
|
||||
const displayText = expanded ? review.text : (isLong ? `${review.text.substring(0, maxChars)}...` : review.text);
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-3xl mx-auto relative group">
|
||||
<div className="w-full max-w-4xl mx-auto relative group">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={current}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="bg-white/40 border border-[#bc9e65]/30 p-8 sm:p-12 shadow-sm rounded-xl relative"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="relative bg-[#fcf9f2] p-6 sm:p-14 rounded-2xl shadow-[0_10px_40px_rgba(0,0,0,0.08)] mx-1 sm:mx-12 mt-12 border border-[#bc9e65]/20"
|
||||
>
|
||||
{/* Quote Icon */}
|
||||
<svg className="absolute w-10 h-10 text-[#bc9e65]/20 top-6 left-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
|
||||
</svg>
|
||||
{/* Inner decorative border */}
|
||||
<div className="absolute inset-2 border border-[#bc9e65]/40 rounded-xl pointer-events-none" />
|
||||
|
||||
{/* Decorative Corner accents */}
|
||||
<div className="absolute top-2 left-2 w-4 h-4 border-t border-l border-[#bc9e65] rounded-tl-lg" />
|
||||
<div className="absolute top-2 right-2 w-4 h-4 border-t border-r border-[#bc9e65] rounded-tr-lg" />
|
||||
<div className="absolute bottom-2 left-2 w-4 h-4 border-b border-l border-[#bc9e65] rounded-bl-lg" />
|
||||
<div className="absolute bottom-2 right-2 w-4 h-4 border-b border-r border-[#bc9e65] rounded-br-lg" />
|
||||
|
||||
{/* Stars */}
|
||||
<div className="flex justify-center gap-1 mb-6 text-[#bc9e65]">
|
||||
{[...Array(review.rating)].map((_, i) => (
|
||||
<svg key={i} className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
{/* Crown Crest Top Center */}
|
||||
<div className="absolute -top-10 left-1/2 -translate-x-1/2 w-20 h-20 bg-gradient-to-br from-[#fcf9f2] to-[#f5e9d0] rounded-full border border-[#bc9e65] flex items-center justify-center shadow-md z-10">
|
||||
<div className="absolute inset-1 border border-[#bc9e65]/40 rounded-full" />
|
||||
<svg className="w-8 h-8 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p className="font-sans text-[#4a3c28] text-base sm:text-lg leading-relaxed italic mb-4 min-h-[100px]">
|
||||
"{displayText}"
|
||||
{isLong && (
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="ml-2 text-[#bc9e65] hover:text-[#8a6c3a] font-bold text-xs uppercase tracking-wider transition-colors inline-block"
|
||||
>
|
||||
{expanded ? "Read Less" : "Read More"}
|
||||
</button>
|
||||
)}
|
||||
</p>
|
||||
{/* Left Quote */}
|
||||
<div className="absolute top-16 left-6 sm:left-12 text-[#bc9e65] opacity-90">
|
||||
<span className="font-serif text-6xl leading-none">“</span>
|
||||
</div>
|
||||
|
||||
<div className="w-8 h-px bg-[#bc9e65]/50 mx-auto mb-4" />
|
||||
<h4 className="font-serif text-[#1a3a25] tracking-widest uppercase text-sm font-bold">
|
||||
{review.name}
|
||||
</h4>
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#8a6c3a] mt-1 block">
|
||||
{review.role}
|
||||
</span>
|
||||
{/* Right Quote */}
|
||||
<div className="absolute bottom-24 right-6 sm:right-12 text-[#bc9e65] opacity-90">
|
||||
<span className="font-serif text-6xl leading-none">”</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 px-8 sm:px-20 flex flex-col items-center text-center mt-2">
|
||||
{/* Stars */}
|
||||
<div className="flex justify-center gap-1.5 mb-4 text-[#bc9e65]">
|
||||
{[...Array(review.rating || 5)].map((_, i) => (
|
||||
<svg key={i} className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Small divider under stars */}
|
||||
<div className="flex items-center gap-2 mb-8">
|
||||
<div className="w-6 h-px bg-[#bc9e65]/50" />
|
||||
<div className="w-1.5 h-1.5 rotate-45 bg-[#bc9e65]" />
|
||||
<div className="w-6 h-px bg-[#bc9e65]/50" />
|
||||
</div>
|
||||
|
||||
<p className="font-sans text-[#4a3c28] text-base sm:text-lg leading-relaxed italic mb-10 min-h-[80px]">
|
||||
"{displayText}"
|
||||
{isLong && (
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="ml-2 text-[#bc9e65] hover:text-[#8a6c3a] font-bold text-xs uppercase tracking-wider transition-colors inline-block"
|
||||
>
|
||||
{expanded ? "Read Less" : "Read More"}
|
||||
</button>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="w-32 h-px bg-gradient-to-r from-transparent via-[#bc9e65] to-transparent mb-4" />
|
||||
<h4 className="font-serif text-[#1a3a25] tracking-widest uppercase text-base font-bold">
|
||||
{review.name}
|
||||
</h4>
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#8a6c3a] mt-1 block">
|
||||
{review.role || "REGULAR CUSTOMER"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Bottom Lotus Ornament */}
|
||||
{/* <div className="absolute -bottom-4 left-1/2 -translate-x-1/2 bg-[#fcf9f2] px-3 z-10">
|
||||
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||
</svg>
|
||||
</div> */}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user