alaguraj/my-dosa-place-cinematic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive updated

Browse Source
This commit is contained in:
Selvi 2026-07-20 16:16:34 +05:30
parent 7d73605a74
commit 39fd538a68
19 changed files with 279 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/inner-banner/1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
public/images/inner-banner/2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
public/images/inner-banner/3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
public/images/inner-banner/4.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
public/images/inner-banner/5.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
public/images/inner-banner/6.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

45
src/app/about/page.tsx
View File

@ -79,9 +79,10 @@ export default function AboutPage() {
return (
<SubpageLayout>
<div className="w-full overflow-x-hidden">
{/* ── Inner Banner ── */}
<InnerBanner pageName="About" />
<InnerBanner pageName="About" bgImage="/images/inner-banner/1.webp" />
{/* ══════════════════════════════════════════
SECTION 1 — Welcome & Features (Image match)
@ -92,7 +93,7 @@ export default function AboutPage() {
<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-7xl mx-auto px-6">
<div className="relative z-10 max-w-7xl mx-auto px-4 sm: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">
@ -153,15 +154,18 @@ export default function AboutPage() {
</AnimatedSection>
{/* 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="flex-1 flex justify-center items-center mt-12 lg:mt-0 w-full">
{/* px buffer on mobile/tablet so absolute badges don't overflow viewport */}
<div className="relative px-[70px] lg:px-0">
<div className="relative overflow-visible"> {/* The Arch Group Container */}
<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" />
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[280px] h-[420px] sm:w-[340px] sm:h-[480px] lg:w-[420px] lg:h-[570px] rounded-t-full border-t border-l border-r border-[#bc9e65]/40 z-0 pointer-events-none" />
{/* 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="relative w-[260px] h-[380px] sm:w-[320px] sm:h-[460px] lg:w-[400px] lg:h-[550px] rounded-t-full overflow-hidden border-[6px] border-[#fdfaf4] shadow-[0_0_40px_rgba(0,0,0,0.1)] z-10">
<div className="absolute inset-0 rounded-t-full border border-[#bc9e65]/30 z-20 pointer-events-none" />
<Image
src="/images/story_arch.png"
@ -173,7 +177,7 @@ export default function AboutPage() {
</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">
<AnimatedSection variant="fadeRight" delay={0.4} className="absolute top-1/2 -translate-y-1/2 -left-6 sm:-left-16 lg:-left-16 z-20">
<div className="bg-[#0a4a2b] border border-[#bc9e65] rounded-2xl p-4 flex flex-col items-center justify-center w-[110px] h-[160px] shadow-xl relative">
<div className="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">
@ -188,8 +192,8 @@ export default function AboutPage() {
</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">
{/* Right Card — only at lg+ where two-column layout provides horizontal space */}
<AnimatedSection variant="fadeLeft" delay={0.5} className="absolute top-10 -right-35 lg:-right-20 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" />
@ -230,7 +234,9 @@ export default function AboutPage() {
</div>
</div>
</AnimatedSection>
</div>
</div>{/* end arch group */}
</div>{/* end padding wrapper */}
</div>
</div>
@ -335,9 +341,9 @@ export default function AboutPage() {
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">
{/* <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>
</svg> */}
</div>
</AnimatedSection>
@ -366,14 +372,14 @@ export default function AboutPage() {
{v.icon}
</div>
<h3 className="font-serif text-white text-xl sm:text-2xl uppercase tracking-widest mb-4">
<h3 className="font-serif text-white text-xl uppercase tracking-widest mb-4">
{v.label}
</h3>
<div className="flex justify-center mb-5">
{/* <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>
</div> */}
<p className="font-sans text-stone-200 text-sm leading-relaxed px-2">
{v.desc}
</p>
@ -481,7 +487,7 @@ export default function AboutPage() {
<Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
</div>
<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 max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 min-h-[850px] flex flex-col lg:flex-row shadow-2xl rounded-xl lg:rounded-3xl overflow-hidden mb-12">
{/* ── 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">
@ -654,7 +660,7 @@ export default function AboutPage() {
</div>
{/* ── 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="relative max-w-[1400px] mx-auto w-[90%] sm:w-[85%] lg:w-[78%] bg-[#062013] border border-[#bc9e65] rounded-2xl lg:rounded-full px-6 sm: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">
@ -760,11 +766,11 @@ export default function AboutPage() {
Come Dine With Us
</p>
<h2 className="font-serif text-2xl sm:text-4xl lg:text-6xl text-[#1a3a25] tracking-wide leading-tight mb-2">
<h2 className="font-serif text-xl sm:text-3xl lg:text-5xl text-[#1a3a25] tracking-wide leading-tight mb-2">
EXPERIENCE THE TASTE OF
</h2>
<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)" }}>
<h2 className="font-serif text-4xl sm:text-6xl lg:text-[90px] 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>
@ -853,6 +859,7 @@ export default function AboutPage() {
</div>
</div>
</div>{/* end overflow-x-hidden wrapper */}
</SubpageLayout>
);
}

2
src/app/blog/[slug]/page.tsx
View File

@ -28,7 +28,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
return (
<SubpageLayout>
{/* Inner Banner */}
<InnerBanner pageName="Blog Details" />
<InnerBanner pageName="Blog Details" bgImage="/images/inner-banner/4.webp" />
<div className="w-full bg-[#fbfaf4] relative z-10">
<div className="max-w-7xl mx-auto px-6 py-12 lg:py-20 flex flex-col lg:flex-row gap-12">

2
src/app/blog/page.tsx
View File

@ -27,7 +27,7 @@ const CornerOrnaments = () => (
export default function BlogPage() {
return (
<SubpageLayout>
<InnerBanner pageName="Blog" />
<InnerBanner pageName="Blog" bgImage="/images/inner-banner/3.webp" />
<div className="w-full bg-[#f5efe0] relative z-10">
{/* Subtle background texture */}

2
src/app/contact/page.tsx
View File

@ -43,7 +43,7 @@ export default function ContactPage() {
<SubpageLayout>
{/* ── Inner Banner ── */}
<InnerBanner pageName="Contact" />
<InnerBanner pageName="Contact" bgImage="/images/inner-banner/5.webp" />
{/* ── TOP SECTION: Sandstone bg — Info + Form ── */}
<div className="relative w-full bg-[#fdfaf4] overflow-hidden">

3
src/app/globals.css
View File

@ -16,6 +16,9 @@
--font-serif: var(--font-cinzel);
--font-sans: var(--font-montserrat);
/* Custom breakpoint: show desktop nav above 992px */
--breakpoint-desk: 62rem; /* 992px */
}
:root {

2
src/app/menu/page.tsx
View File

@ -10,7 +10,7 @@ export default function MenuPage() {
<div className="flex flex-col">
{/* Inner Banner */}
<InnerBanner pageName="Menu" />
<InnerBanner pageName="Menu" bgImage="/images/inner-banner/2.webp" />
<MenuPageContent />
</div>

2
src/app/reservation/page.tsx
View File

@ -30,7 +30,7 @@ export default function ReservationPage() {
return (
<SubpageLayout>
<InnerBanner pageName="Reservation" />
<InnerBanner pageName="Reservation" bgImage="/images/inner-banner/6.webp" />
<div className="relative w-full bg-[#fdfaf4] overflow-hidden flex flex-col justify-center py-24">
{/* Full Page Background with Pots and Temple */}

2
src/components/ChefShowcase.tsx
View File

@ -246,7 +246,7 @@ export default function ChefShowcase() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.1, ease: "easeOut" }}
className="bg-black/25 backdrop-blur-sm border border-[#d8c396]/30 rounded-2xl p-6 sm:p-8 mt-4 shadow-2xl relative z-10 divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/20 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 select-text"
className="bg-black/25 backdrop-blur-sm border border-[#d8c396]/30 rounded-2xl p-6 sm:p-8 mt-4 shadow-2xl relative z-10 divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/20 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 select-text"
>
{/* Feature 1: Authentic Recipes */}

6
src/components/CulinaryCategories.tsx
View File

@ -226,7 +226,7 @@ export default function CulinaryCategories() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="col-span-1 md:col-span-2 lg:col-span-2 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-6 pt-8 rounded-none shadow-2xl flex flex-col sm:flex-row items-center gap-6 group overflow-visible min-h-[220px]"
className="col-span-1 md:col-span-2 lg:col-span-2 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-6 pt-8 rounded-none shadow-2xl flex flex-col sm:flex-row lg:flex-col xl:flex-row items-center gap-6 group overflow-visible min-h-[220px]"
>
{/* Inner gold design outline and corner leaves */}
<div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none" />
@ -243,7 +243,7 @@ export default function CulinaryCategories() {
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,_rgba(188,158,101,0.08)_0%,_transparent_75%)] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none z-0" />
{/* Left: circular thali image with slow rotating mandala border */}
<div className="relative w-36 h-36 sm:w-40 sm:h-40 flex-shrink-0 z-10">
<div className="relative w-36 h-36 sm:w-40 sm:h-40 lg:w-36 lg:h-36 xl:w-40 xl:h-40 flex-shrink-0 z-10">
{/* Spin ring behind thali */}
<div className="absolute inset-[-6px] border border-dashed border-[#bc9e65]/25 rounded-full animate-[spin_60s_linear_infinite]" />
@ -261,7 +261,7 @@ export default function CulinaryCategories() {
</div>
{/* Right: details */}
<div className="flex flex-col text-center sm:text-left items-center sm:items-start flex-1 select-text relative z-10">
<div className="flex flex-col text-center sm:text-left lg:text-center xl:text-left items-center sm:items-start lg:items-center xl:items-start flex-1 select-text relative z-10 mt-4 sm:mt-0 lg:mt-4 xl:mt-0">
<span className="font-sans text-[9px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mb-1">
{cat.subtitle}
</span>

59
src/components/EventsAccordion.tsx
View File

@ -28,7 +28,7 @@ export default function EventsAccordion() {
title: "Royal Feasts",
tamilTitle: "கல்யாண விருந்து",
subtitle: "WEDDING BANQUETS",
desc: "Our South Indian catering service in Waterloo brings the same authentic flavours to your celebrations—whether it's a wedding, family gathering, or corporate event. Enjoy traditional multi-course menus with the option of classic banana leaf-style presentation for a truly authentic South Indian dining experience. ",
desc: "Our South Indian catering service in Waterloo brings authentic flavours to weddings, family gatherings, and corporate events. Enjoy traditional multi-course menus with optional banana leaf-style presentation for a true South Indian dining experience.",
icon: RoyalFeastsIcon,
bgImage: "/images/home/royal/cards/royal-feast.webp",
},
@ -44,7 +44,7 @@ export default function EventsAccordion() {
title: "Private Gatherings",
tamilTitle: "சபை கூட்டங்கள்",
subtitle: "CORPORATE COLLABORATIONS",
desc: "Looking for a distinctive corporate event venue in Waterloo? Host partners and executives in our private boardroom venue, crafted from vintage rosewood for a refined, professional setting. Our executive dining venue is designed for high-level meetings, client presentations, and business discussions — paired seamlessly with gourmet South Indian catering. From strategic sessions to celebratory close-outs, our private meeting space with catering brings substance and style together.",
desc: "Looking for a corporate event venue in Waterloo? Host meetings, presentations, and executive dining in our private rosewood boardroom, complemented by gourmet South Indian catering for a refined and professional experience.",
icon: PrivateGatheringsIcon,
bgImage: "/images/home/royal/cards/private-gatherings.webp",
},
@ -177,13 +177,12 @@ export default function EventsAccordion() {
</p>
</motion.div>
{/* Horizontal Accordion Track */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }}
className="flex flex-col lg:flex-row gap-5 h-[620px] lg:h-[460px] w-full items-stretch relative z-20"
className="flex flex-col lg:flex-row gap-5 h-[680px] lg:h-[460px] w-full items-stretch relative z-20"
>
{events.map((event, idx) => {
const isActive = idx === activeIdx;
@ -191,8 +190,8 @@ export default function EventsAccordion() {
// Compute dynamic width flex basis classes
const flexClass = isActive
? "lg:flex-[3.5] bg-opacity-100"
: "lg:flex-[0.8] opacity-80 lg:opacity-95 hover:opacity-100";
? "flex-[4] lg:flex-[3.5] bg-opacity-100"
: "flex-[0.8] lg:flex-[0.8] opacity-80 lg:opacity-95 hover:opacity-100";
return (
<div
@ -216,38 +215,38 @@ export default function EventsAccordion() {
{/* Thin inner Gold border outline frame */}
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
{/* Left side green accent strip (only in hover/active) */}
{/* Accent strip (horizontal on mobile, vertical on desktop) */}
<div
className="absolute left-0 top-0 bottom-0 w-[4px] bg-[#0a4a2b] transition-opacity duration-500"
className="absolute left-0 top-0 lg:bottom-0 w-full h-[4px] lg:w-[4px] lg:h-full bg-[#0a4a2b] transition-opacity duration-500"
style={{ opacity: isActive ? 1 : 0 }}
/>
{/* ==================== CLOSED VIEW CARD ==================== */}
{!isActive && (
<div className="flex flex-col justify-between items-center h-full w-full py-8 pointer-events-none select-none relative z-10">
<div className="flex flex-row lg:flex-col justify-between items-center h-full w-full px-3 sm:px-6 py-4 lg:py-8 lg:px-0 pointer-events-none select-none relative z-10 gap-2">
{/* Circle icon container at top */}
<div className="w-11 h-11 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/50 flex items-center justify-center shadow-sm">
{/* Circle icon container */}
<div className="w-10 h-10 sm:w-11 sm:h-11 flex-shrink-0 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/50 flex items-center justify-center shadow-sm">
<CategoryIcon />
</div>
{/* Vertical upward title text */}
<div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 origin-center -rotate-90 whitespace-nowrap">
<h3 className="font-serif text-sm sm:text-base font-bold tracking-[0.3em] uppercase text-[#0a4a2b]">
{/* Title text */}
<div className="relative lg:absolute lg:left-1/2 lg:-translate-x-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:origin-center lg:-rotate-90 whitespace-nowrap text-center overflow-hidden">
<h3 className="font-serif text-xs sm:text-sm lg:text-base font-bold tracking-[0.1em] sm:tracking-[0.2em] lg:tracking-[0.3em] uppercase text-[#0a4a2b] truncate">
{event.title}
</h3>
</div>
{/* Lotus watermark at bottom */}
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-8 h-8 text-[#bc9e65] opacity-[0.06] pointer-events-none">
{/* Lotus watermark at bottom (Desktop only) */}
<div className="hidden lg:block absolute bottom-16 left-1/2 -translate-x-1/2 w-8 h-8 text-[#bc9e65] opacity-[0.06] pointer-events-none">
<svg 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>
{/* Circle number badge at bottom */}
<div className="w-7 h-7 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/40 flex items-center justify-center shadow-sm">
<span className="font-serif text-base font-bold text-[#bc9e65]">
{/* Circle number badge */}
<div className="w-6 h-6 sm:w-7 sm:h-7 flex-shrink-0 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/40 flex items-center justify-center shadow-sm">
<span className="font-serif text-xs sm:text-base font-bold text-[#bc9e65]">
0{idx + 1}
</span>
</div>
@ -257,7 +256,7 @@ export default function EventsAccordion() {
{/* ==================== OPENED VIEW CARD ==================== */}
{isActive && (
<div className="p-8 flex flex-col justify-between h-full select-text text-left relative z-10 w-full">
<div className="p-6 lg:p-8 flex flex-col justify-between h-full select-text text-left relative z-10 w-full overflow-hidden">
{/* Top Notch Shield Overlay */}
<div className="absolute -top-[1px] left-1/2 -translate-x-1/2 w-12 h-6 bg-[#0a4a2b] border-b border-r border-l border-[#bc9e65]/40 rounded-b-xl flex items-center justify-center z-20">
@ -267,24 +266,24 @@ export default function EventsAccordion() {
</div>
{/* Details content section */}
<div className="flex flex-col items-start gap-4">
<div className="flex flex-col items-start gap-3 lg:gap-4 h-full justify-center overflow-y-auto custom-scrollbar pr-2">
{/* Double gold-rim circle icon container */}
<div className="w-14 h-14 rounded-full border border-[#bc9e65]/45 flex items-center justify-center bg-transparent shadow-sm">
<div className="w-12 h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center">
<div className="w-12 h-12 lg:w-14 lg:h-14 rounded-full border border-[#bc9e65]/45 flex flex-shrink-0 items-center justify-center bg-transparent shadow-sm mb-1 lg:mb-0">
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center">
<CategoryIcon />
</div>
</div>
{/* Header subtitles */}
<div>
<span className="font-sans text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase block mb-1 pointer-events-none select-none">
<span className="font-sans text-xs lg:text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase block mb-1 pointer-events-none select-none">
{event.subtitle}
</span>
<h3 className="font-serif text-2xl sm:text-3xl font-bold text-[#0a4a2b] uppercase tracking-wider mb-1">
<h3 className="font-serif text-xl sm:text-2xl lg:text-3xl font-bold text-[#0a4a2b] uppercase tracking-wider mb-1">
{event.title}
</h3>
<p className="font-serif text-sm text-[#bc9e65] font-medium tracking-wide mb-3 pointer-events-none select-none">
<p className="font-serif text-xs lg:text-sm text-[#bc9e65] font-medium tracking-wide mb-2 lg:mb-3 pointer-events-none select-none">
— {event.tamilTitle} —
</p>
</div>
@ -294,10 +293,10 @@ export default function EventsAccordion() {
{event.desc}
</p>
{/* Notched Enquire CTA Button with modern CSS clip-path notches */}
<div className="mt-4 select-none">
{/* Notched Enquire CTA Button */}
<div className="mt-2 lg:mt-4 select-none">
<button
className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-6 py-2.5 uppercase font-sans font-bold text-base tracking-wider relative hover:bg-[#0c5030] transition-colors duration-300 shadow-md"
className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-5 py-2 lg:px-6 lg:py-2.5 uppercase font-sans font-bold text-sm lg:text-base tracking-wider relative hover:bg-[#0c5030] transition-colors duration-300 shadow-md"
style={{
clipPath: "polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px)"
}}
@ -309,7 +308,7 @@ export default function EventsAccordion() {
</div>
{/* Bottom Right Card Number Indicator */}
<div className="absolute bottom-6 right-8 font-serif text-3xl font-bold text-[#bc9e65]/35 pointer-events-none select-none">
<div className="absolute bottom-4 right-6 lg:bottom-6 lg:right-8 font-serif text-2xl lg:text-3xl font-bold text-[#bc9e65]/35 pointer-events-none select-none">
0{idx + 1}
</div>

131
src/components/Header.tsx
View File

@ -1,29 +1,117 @@
"use client";
import Image from "next/image";
import { useState, useEffect } from "react";
import { createPortal } from "react-dom";
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 [mounted, setMounted] = useState(false);
const pathname = usePathname();
useEffect(() => {
setMounted(true);
}, []);
// Close mobile menu when route changes
useEffect(() => {
setIsMobileMenuOpen(false);
}, [pathname]);
// Prevent body scroll when mobile menu is open
useEffect(() => {
if (isMobileMenuOpen) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
return () => {
document.body.style.overflow = "";
};
}, [isMobileMenuOpen]);
const mobileMenu = (
<div
className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center transition-all duration-300 desk:hidden ${
isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
}`}
style={{ backgroundColor: "#06120c" }}
>
{/* Close button */}
<button
className="absolute top-12 right-6 p-2 text-[#bc9e65] hover:text-white transition-colors"
onClick={() => setIsMobileMenuOpen(false)}
aria-label="Close Menu"
>
<X size={32} />
</button>
{/* Logo inside overlay */}
<Link href="/" className="mb-10 select-none" onClick={() => setIsMobileMenuOpen(false)}>
<Image
src="/images/logo.png"
alt="My Dosa Place"
width={160}
height={60}
className="h-14 w-auto pointer-events-none"
/>
</Link>
<nav className="flex flex-col items-center gap-8 text-center">
<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 hover:bg-[#d8c396]"
>
RESERVE TABLE
</Link>
</nav>
</div>
);
return (
<>
<header
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 ${
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 z-40 ${
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 */}
<Link href="/" className="clickable flex items-center gap-2.5 select-none relative z-[70]">
<Link href="/" className="clickable flex items-center gap-2.5 select-none">
<Image
src="/images/logo.png"
alt="My Dosa Place"
@ -34,8 +122,8 @@ export default function Header({ visible }: { visible: boolean }) {
/>
</Link>
{/* Center: Navigation Links (Desktop) */}
<nav className="hidden lg:flex items-center gap-8">
{/* Center: Navigation Links (Desktop — visible above 992px) */}
<nav className="hidden desk: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>
@ -44,16 +132,17 @@ export default function Header({ visible }: { visible: boolean }) {
</nav>
{/* Right Side: Reservation Button & Hamburger */}
<div className="flex items-center gap-4 relative z-[70]">
<div className="flex items-center gap-4">
<Link
href="/reservation"
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"
className="hidden desk: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
</Link>
{/* Hamburger — hidden above 992px */}
<button
className="lg:hidden p-2 text-[#bc9e65] hover:text-white transition-colors"
className="desk:hidden p-2 text-[#bc9e65] hover:text-white transition-colors"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle Menu"
>
@ -61,28 +150,10 @@ export default function Header({ visible }: { visible: boolean }) {
</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>
{/* Mobile menu rendered in document.body via portal to avoid transform stacking context */}
{mounted && createPortal(mobileMenu, document.body)}
</>
);
}

7
src/components/InnerBanner.tsx
View File

@ -3,19 +3,20 @@ import Link from "next/link";
interface InnerBannerProps {
pageName: string;
bgImage?: string;
}
export default function InnerBanner({ pageName }: InnerBannerProps) {
export default function InnerBanner({ pageName, bgImage = "/images/inner-banner.png" }: InnerBannerProps) {
return (
<div className="relative w-full h-[320px] sm:h-[450px] flex items-center justify-center overflow-hidden">
{/* Background Image */}
<div className="absolute inset-0 z-0">
<Image
src="/images/inner-banner.png"
src={bgImage}
alt={`${pageName} banner`}
fill
priority
className="object-cover object-[center_-300px]"
className="object-cover object-center"
/>
</div>

28
src/components/MenuPreview.tsx
View File

@ -105,7 +105,7 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.5, delay: (index % 5) * 0.08, ease: "easeOut" }}
whileHover={{ y: -2, scale: 1.01 }}
className="group relative bg-[#fdfcf9] border border-[#d8c396]/45 rounded-none p-4 pl-22 pr-4 min-h-[96px] shadow-[0_4px_12px_rgba(10,74,43,0.03)] hover:shadow-[0_8px_20px_rgba(10,74,43,0.07)] hover:border-[#bc9e65] flex flex-col justify-center select-text overflow-visible"
className="group relative bg-[#fdfcf9] border border-[#d8c396]/45 rounded-none p-5 sm:p-4 sm:pl-22 sm:pr-4 min-h-[96px] shadow-[0_4px_12px_rgba(10,74,43,0.03)] hover:shadow-[0_8px_20px_rgba(10,74,43,0.07)] hover:border-[#bc9e65] flex flex-col justify-center select-text overflow-visible"
>
{/* Inner decorative inset line */}
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none" />
@ -117,7 +117,7 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
<div className="absolute -bottom-[1px] -right-[1px] w-3.5 h-3.5 bg-[#fbfaf5] rounded-tl-full border-l border-t border-[#d8c396]/45 group-hover:border-[#bc9e65] z-20 pointer-events-none transition-colors duration-300" />
{/* Protruding traditional brass thali container */}
<div className="absolute -left-6 top-1/2 -translate-y-1/2 w-20 h-20 sm:w-[86px] sm:h-[86px] rounded-full p-1.5 bg-gradient-to-br from-[#bc9e65] via-[#fcfaf2] to-[#aa771c] shadow-lg flex-shrink-0 z-10 flex items-center justify-center">
<div className="relative sm:absolute sm:-left-6 sm:top-1/2 sm:-translate-y-1/2 mx-auto sm:mx-0 mb-4 sm:mb-0 w-20 h-20 sm:w-[86px] sm:h-[86px] rounded-full p-1.5 bg-gradient-to-br from-[#bc9e65] via-[#fcfaf2] to-[#aa771c] shadow-lg flex-shrink-0 z-10 flex items-center justify-center">
{/* Inner Rim of the Plate */}
<div className="w-full h-full rounded-full p-[3px] bg-[#0c5030] relative overflow-hidden flex items-center justify-center">
{/* Green Banana Leaf Inner Liner */}
@ -137,9 +137,9 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
</div>
{/* Content Section */}
<div className="relative z-10 flex flex-col gap-1 w-full pl-2">
<div className="relative z-10 flex flex-col gap-2 sm:gap-1 w-full sm:pl-2 items-center sm:items-start text-center sm:text-left">
{/* Name and Pill Badge */}
<div className="flex items-start justify-between gap-3 w-full">
<div className="flex flex-col sm:flex-row items-center sm:items-start sm:justify-between gap-2 sm:gap-3 w-full">
<h3 className="font-serif text-lg sm:text-[15.5px] font-bold text-[#0a4a2b] tracking-wider uppercase transition-colors duration-300 group-hover:text-[#bc9e65]">
{name}
</h3>
@ -147,7 +147,7 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
</div>
{/* Description */}
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[95%]">
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-full sm:max-w-[95%]">
{desc}
</p>
</div>
@ -305,10 +305,10 @@ export default function MenuPreview() {
</div>
{/* 2-Column Menu Layout grid */}
<div className="relative grid grid-cols-1 md:grid-cols-2 gap-x-14 gap-y-6 z-10 md:px-4">
<div className="relative grid grid-cols-1 lg:grid-cols-2 gap-x-14 gap-y-6 z-10 lg:px-4">
{/* Vertical separator in the center (Desktop only) */}
<div className="hidden md:flex absolute left-1/2 top-4 bottom-4 w-[1px] flex-col items-center justify-between -translate-x-1/2 pointer-events-none z-15">
<div className="hidden lg:flex absolute left-1/2 top-4 bottom-4 w-[1px] flex-col items-center justify-between -translate-x-1/2 pointer-events-none z-15">
<div className="w-[1px] flex-1 border-l border-dashed border-[#d8c396]/55" />
<svg className="w-4 h-8 text-[#bc9e65] my-2 opacity-70" viewBox="0 0 20 40" fill="none" stroke="currentColor" strokeWidth="1.5">
<circle cx="10" cy="20" r="3" fill="currentColor" />
@ -321,14 +321,14 @@ export default function MenuPreview() {
</div>
{/* Left Column Item Cards */}
<div className="flex flex-col gap-6 pl-2 pr-2 md:pl-4">
<div className="flex flex-col gap-6 pl-2 pr-2 lg:pl-4">
{leftColumnItems.map((item, index) => (
<MenuItemCard key={index} {...item} index={index} />
))}
</div>
{/* Right Column Item Cards */}
<div className="flex flex-col gap-6 pl-2 pr-2 md:pr-4">
<div className="flex flex-col gap-6 pl-2 pr-2 lg:pr-4">
{rightColumnItems.map((item, index) => (
<MenuItemCard key={index} {...item} index={index} />
))}
@ -347,9 +347,9 @@ 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 mx-auto z-10 relative divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/25 select-text">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-0 mt-16 bg-[#faf8f2]/95 border border-[#d8c396]/45 rounded-2xl p-6 shadow-lg mx-auto z-10 relative lg: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="flex items-center gap-3.5 justify-start sm:justify-center px-2 sm:px-4 py-2 lg:py-0">
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
<Image src="/images/home/menu/icons/menu-pure-veg.webp" alt="100% Vegetarian" width={24} height={24} className="object-contain" />
</div>
@ -360,7 +360,7 @@ const BottomFeatures = () => (
</div>
{/* Feature 2 */}
<div className="flex items-center gap-3.5 justify-center px-4 py-3 md:py-0">
<div className="flex items-center gap-3.5 justify-start sm:justify-center px-2 sm:px-4 py-2 lg:py-0">
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
<Image src="/images/home/menu/icons/menu-authentic.webp" alt="Authentic Recipes" width={24} height={24} className="object-contain" />
</div>
@ -371,7 +371,7 @@ const BottomFeatures = () => (
</div>
{/* Feature 3 */}
<div className="flex items-center gap-3.5 justify-center px-4 py-3 md:py-0">
<div className="flex items-center gap-3.5 justify-start sm:justify-center px-2 sm:px-4 py-2 lg:py-0">
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
<Image src="/images/home/menu/icons/menu-ingredients.webp" alt="Finest Ingredients" width={24} height={24} className="object-contain" />
</div>
@ -382,7 +382,7 @@ const BottomFeatures = () => (
</div>
{/* Feature 4 */}
<div className="flex items-center gap-3.5 justify-center px-4 py-3 md:py-0">
<div className="flex items-center gap-3.5 justify-start sm:justify-center px-2 sm:px-4 py-2 lg:py-0">
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
<Image src="/images/home/menu/icons/menu-love.webp" alt="Made With Love" width={24} height={24} className="object-contain" />
</div>