diff --git a/public/images/inner-banner/1.webp b/public/images/inner-banner/1.webp new file mode 100644 index 0000000..c5ade70 Binary files /dev/null and b/public/images/inner-banner/1.webp differ diff --git a/public/images/inner-banner/2.webp b/public/images/inner-banner/2.webp new file mode 100644 index 0000000..63c2a20 Binary files /dev/null and b/public/images/inner-banner/2.webp differ diff --git a/public/images/inner-banner/3.webp b/public/images/inner-banner/3.webp new file mode 100644 index 0000000..aee5263 Binary files /dev/null and b/public/images/inner-banner/3.webp differ diff --git a/public/images/inner-banner/4.webp b/public/images/inner-banner/4.webp new file mode 100644 index 0000000..df64fb8 Binary files /dev/null and b/public/images/inner-banner/4.webp differ diff --git a/public/images/inner-banner/5.webp b/public/images/inner-banner/5.webp new file mode 100644 index 0000000..0317120 Binary files /dev/null and b/public/images/inner-banner/5.webp differ diff --git a/public/images/inner-banner/6.webp b/public/images/inner-banner/6.webp new file mode 100644 index 0000000..7e97b04 Binary files /dev/null and b/public/images/inner-banner/6.webp differ diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index bc37811..fcb0c28 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -79,9 +79,10 @@ export default function AboutPage() { return ( +
{/* ── Inner Banner ── */} - + {/* ══════════════════════════════════════════ SECTION 1 — Welcome & Features (Image match) @@ -92,7 +93,7 @@ export default function AboutPage() {
-
+
{/* Top Row: 3 columns (Left Text, Center Arch, Right Card) */}
@@ -153,84 +154,89 @@ export default function AboutPage() { {/* CENTER & RIGHT ARCH/CARD COMPOSITION */} -
+
-
{/* The Arch Group Container */} - {/* Outer arch line decoration */} -
+ {/* px buffer on mobile/tablet so absolute badges don't overflow viewport */} +
+
{/* The Arch Group Container */} - {/* The Arch Image container */} - -
-
- My Dosa Place -
- + {/* Outer arch line decoration */} +
- {/* Made With Love Badge (Overlapping left of arch) */} - -
-
- - - - - MADE
WITH
LOVE - - - - -
- + {/* The Arch Image container */} + +
+
+ My Dosa Place +
+ - {/* Right Card (Overlapping right of arch) */} - -
-
+ {/* Made With Love Badge (Overlapping left of arch) */} + +
+
+ + + + + MADE
WITH
LOVE + + + + +
+ -
-

A Taste of

-

- TRADITION
MADE WITH
PASSION -

+ {/* Right Card — only at lg+ where two-column layout provides horizontal space */} + +
+
- {/* Divider */} -
-
- - - -
+
+

A Taste of

+

+ TRADITION
MADE WITH
PASSION +

+ + {/* Divider */} +
+
+ + + +
+
+ +
    +
  • + + Every meal. +
    • +
  • + + Every guest. +
    • +
  • + + Every time. +
    • +
-
    -
  • - - Every meal. -
    • -
  • - - Every guest. -
    • -
  • - - Every time. -
    • -
+ {/* Leaves bg bottom right */} +
+ +
+ - {/* Leaves bg bottom right */} -
- -
-
- -
+
{/* end arch group */} +
{/* end padding wrapper */}
@@ -335,9 +341,9 @@ export default function AboutPage() { Rooted in tradition. Crafted with passion.
Served with love.

- + {/* - + */}
@@ -366,14 +372,14 @@ export default function AboutPage() { {v.icon}
-

+

{v.label}

-
+ {/*
-
+
*/}

{v.desc}

@@ -481,7 +487,7 @@ export default function AboutPage() {
-
+
{/* ── LEFT: Ornate dark green panel ── */}
@@ -654,7 +660,7 @@ export default function AboutPage() {
{/* ── BOTTOM FEATURE BAR ── */} -
+
{/* Feature 1 */}
@@ -760,11 +766,11 @@ export default function AboutPage() { Come Dine With Us

-

+

EXPERIENCE THE TASTE OF

-

+

TRADITION

@@ -853,6 +859,7 @@ export default function AboutPage() {
+
{/* end overflow-x-hidden wrapper */} ); } diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx index 1e90539..06def34 100644 --- a/src/app/blog/[slug]/page.tsx +++ b/src/app/blog/[slug]/page.tsx @@ -28,7 +28,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug: return ( {/* Inner Banner */} - +
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx index bcfea99..c6f7678 100644 --- a/src/app/blog/page.tsx +++ b/src/app/blog/page.tsx @@ -27,7 +27,7 @@ const CornerOrnaments = () => ( export default function BlogPage() { return ( - +
{/* Subtle background texture */} diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index 7ab6589..9914d2d 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -43,7 +43,7 @@ export default function ContactPage() { {/* ── Inner Banner ── */} - + {/* ── TOP SECTION: Sandstone bg — Info + Form ── */}
diff --git a/src/app/globals.css b/src/app/globals.css index e9a79e8..6edc94d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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 { diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx index 340add4..10f9986 100644 --- a/src/app/menu/page.tsx +++ b/src/app/menu/page.tsx @@ -10,7 +10,7 @@ export default function MenuPage() {
{/* Inner Banner */} - +
diff --git a/src/app/reservation/page.tsx b/src/app/reservation/page.tsx index 707a1d9..41e9394 100644 --- a/src/app/reservation/page.tsx +++ b/src/app/reservation/page.tsx @@ -30,7 +30,7 @@ export default function ReservationPage() { return ( - +
{/* Full Page Background with Pots and Temple */} diff --git a/src/components/ChefShowcase.tsx b/src/components/ChefShowcase.tsx index 01f219f..73897a4 100644 --- a/src/components/ChefShowcase.tsx +++ b/src/components/ChefShowcase.tsx @@ -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 */} diff --git a/src/components/CulinaryCategories.tsx b/src/components/CulinaryCategories.tsx index 6a515a4..4fdaf29 100644 --- a/src/components/CulinaryCategories.tsx +++ b/src/components/CulinaryCategories.tsx @@ -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 */}
@@ -243,7 +243,7 @@ export default function CulinaryCategories() {
{/* Left: circular thali image with slow rotating mandala border */} -
+
{/* Spin ring behind thali */}
@@ -261,7 +261,7 @@ export default function CulinaryCategories() {
{/* Right: details */} -
+
{cat.subtitle} diff --git a/src/components/EventsAccordion.tsx b/src/components/EventsAccordion.tsx index 17a3975..6752b8c 100644 --- a/src/components/EventsAccordion.tsx +++ b/src/components/EventsAccordion.tsx @@ -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() {

- {/* Horizontal Accordion Track */} {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 (
- {/* Left side green accent strip (only in hover/active) */} + {/* Accent strip (horizontal on mobile, vertical on desktop) */}
{/* ==================== CLOSED VIEW CARD ==================== */} {!isActive && ( -
+
- {/* Circle icon container at top */} -
+ {/* Circle icon container */} +
- {/* Vertical upward title text */} -
-

+ {/* Title text */} +
+

{event.title}

- {/* Lotus watermark at bottom */} -
+ {/* Lotus watermark at bottom (Desktop only) */} +
- {/* Circle number badge at bottom */} -
- + {/* Circle number badge */} +
+ 0{idx + 1}
@@ -257,7 +256,7 @@ export default function EventsAccordion() { {/* ==================== OPENED VIEW CARD ==================== */} {isActive && ( -
+
{/* Top Notch Shield Overlay */}
@@ -267,24 +266,24 @@ export default function EventsAccordion() {
{/* Details content section */} -
+
{/* Double gold-rim circle icon container */} -
-
+
+
{/* Header subtitles */}
- + {event.subtitle} -

+

{event.title}

-

+

— {event.tamilTitle} —

@@ -294,10 +293,10 @@ export default function EventsAccordion() { {event.desc}

- {/* Notched Enquire CTA Button with modern CSS clip-path notches */} -
+ {/* Notched Enquire CTA Button */} +
+ + {/* Logo inside overlay */} + setIsMobileMenuOpen(false)}> + My Dosa Place + + + +
+ ); - {/* Right Side: Reservation Button & Hamburger */} -
- - RESERVE TABLE - - - -
-
- - {/* Mobile Menu Overlay */} -
+
- -
- + + {/* Center: Navigation Links (Desktop — visible above 992px) */} + + + {/* Right Side: Reservation Button & Hamburger */} +
+ + RESERVE TABLE + + + {/* Hamburger — hidden above 992px */} + +
+
+ + + {/* Mobile menu rendered in document.body via portal to avoid transform stacking context */} + {mounted && createPortal(mobileMenu, document.body)} + ); } diff --git a/src/components/InnerBanner.tsx b/src/components/InnerBanner.tsx index 8528e3c..c59a900 100644 --- a/src/components/InnerBanner.tsx +++ b/src/components/InnerBanner.tsx @@ -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 (
{/* Background Image */}
{`${pageName}
diff --git a/src/components/MenuPreview.tsx b/src/components/MenuPreview.tsx index d89d63b..8d8372e 100644 --- a/src/components/MenuPreview.tsx +++ b/src/components/MenuPreview.tsx @@ -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 */}
@@ -117,7 +117,7 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
{/* Protruding traditional brass thali container */} -
+
{/* Inner Rim of the Plate */}
{/* Green Banana Leaf Inner Liner */} @@ -137,9 +137,9 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
{/* Content Section */} -
+
{/* Name and Pill Badge */} -
+

{name}

@@ -147,7 +147,7 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
{/* Description */} -

+

{desc}

@@ -305,10 +305,10 @@ export default function MenuPreview() {
{/* 2-Column Menu Layout grid */} -
+
{/* Vertical separator in the center (Desktop only) */} -
+
@@ -321,14 +321,14 @@ export default function MenuPreview() {
{/* Left Column Item Cards */} -
+
{leftColumnItems.map((item, index) => ( ))}
{/* Right Column Item Cards */} -
+
{rightColumnItems.map((item, index) => ( ))} @@ -347,9 +347,9 @@ export default function MenuPreview() { } const BottomFeatures = () => ( -
+
{/* Feature 1 */} -
+
100% Vegetarian
@@ -360,7 +360,7 @@ const BottomFeatures = () => (
{/* Feature 2 */} -
+
Authentic Recipes
@@ -371,7 +371,7 @@ const BottomFeatures = () => (
{/* Feature 3 */} -
+
Finest Ingredients
@@ -382,7 +382,7 @@ const BottomFeatures = () => (
{/* Feature 4 */} -
+
Made With Love