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

design: redesign menu & story sections and convert banquet card to box format

Browse Source
This commit is contained in:
Alaguraj0361 2026-07-14 21:45:10 +05:30
parent f2d308e890
commit 52a2e183fc
15 changed files with 378 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/menu_bg_traditional.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 875 KiB

BIN
public/images/menu_brass_pot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 727 KiB

BIN
public/images/menu_brass_pot_clean.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 780 KiB

BIN
public/images/menu_green_cloth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 900 KiB

BIN
public/images/menu_green_cloth_clean.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 827 KiB

BIN
public/images/menu_leaf_clean.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 489 KiB

BIN
public/images/menu_leaf_left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 552 KiB

BIN
public/images/menu_leaf_right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 KiB

BIN
public/images/menu_left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
public/images/menu_right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
public/images/story_arch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 548 KiB

BIN
public/images/story_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 899 KiB

18
src/components/EntranceExperience.tsx
View File

@ -373,22 +373,12 @@ export default function EntranceExperience() {
animate={{ opacity: 1, x: 0, scale: 1 }}
exit={{ opacity: 0, x: -50, scale: 0.95 }}
transition={{ duration: 0.8, ease: "easeOut" }}
className="absolute top-28 left-8 z-30 w-[340px] sm:w-[400px] max-w-[calc(100vw-32px)] max-sm:top-auto max-sm:bottom-16 max-sm:left-4 max-sm:right-4 max-sm:mx-auto bg-[#fcfaf2]/95 border-2 border-double border-gold/45 rounded-b-lg p-6 sm:p-8 pt-10 sm:pt-12 shadow-2xl pointer-events-none"
style={{
borderTopLeftRadius: "180px 150px",
borderTopRightRadius: "180px 150px",
}}
className="absolute top-28 left-8 z-30 w-[340px] sm:w-[400px] max-w-[calc(100vw-32px)] max-sm:top-auto max-sm:bottom-16 max-sm:left-4 max-sm:right-4 max-sm:mx-auto bg-[#fcfaf2]/95 border-2 border-double border-gold/45 rounded-3xl p-6 sm:p-8 shadow-2xl pointer-events-none"
>
{/* Inner traditional gold frame matching the arch dome */}
<div
className="absolute top-2 left-2 right-2 bottom-2 border border-gold/15 pointer-events-none rounded-b-md"
style={{
borderTopLeftRadius: "170px 140px",
borderTopRightRadius: "170px 140px",
}}
/>
{/* Inner traditional gold frame */}
<div className="absolute top-2 left-2 right-2 bottom-2 border border-gold/15 pointer-events-none rounded-[22px]" />
<span className="font-sans text-[#188754] text-[10px] sm:text-[11px] tracking-[0.4em] uppercase font-bold block mb-2.5 text-center mt-2">
<span className="font-sans text-[#188754] text-[10px] sm:text-[11px] tracking-[0.4em] uppercase font-bold block mb-2.5 text-center mt-1">
P U R E V E G E T A R I A N F E A S T
</span>

463
src/components/MenuPreview.tsx
View File

@ -1,7 +1,7 @@
"use client";
import { useRef } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
import { motion } from "framer-motion";
import Image from "next/image";
interface MenuItemProps {
@ -9,66 +9,143 @@ interface MenuItemProps {
desc: string;
tag: string;
type: "green" | "gold" | "orange";
img: string;
}
const LotusOrnament = () => (
<svg className="w-16 h-8 text-[#bc9e65] opacity-90 mb-1" viewBox="0 0 120 40" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
{/* Center Petal */}
<path d="M 60,5 C 55,18 57,32 60,35 C 63,32 65,18 60,5 Z" fill="currentColor" fillOpacity="0.1" />
{/* Left Petal */}
<path d="M 60,18 C 45,20 44,32 60,35" />
{/* Right Petal */}
<path d="M 60,18 C 75,20 76,32 60,35" />
{/* Left scroll wing */}
<path d="M 45,30 C 30,30 25,20 35,15 C 42,12 48,22 38,28 C 35,30 30,26 32,22" />
{/* Right scroll wing */}
<path d="M 75,30 C 90,30 95,20 85,15 C 78,12 72,22 82,28 C 85,30 90,26 88,22" />
<circle cx="60" cy="35" r="2" fill="currentColor" />
</svg>
);
const TitleDivider = () => (
<div className="flex items-center gap-4 w-full max-w-[280px] justify-center my-3">
<div className="h-[1px] flex-1 bg-gradient-to-r from-transparent via-[#d8c396]/60 to-[#d8c396]" />
<svg className="w-6 h-4 text-[#bc9e65] opacity-90" viewBox="0 0 40 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M 20,4 C 18,10 12,14 20,17 C 28,14 22,10 20,4 Z" fill="currentColor" fillOpacity="0.1" />
<path d="M 12,14 C 4,14 2,10 8,8 C 12,7 15,11 12,14" />
<path d="M 28,14 C 36,14 38,10 32,8 C 28,7 25,11 28,14" />
</svg>
<div className="h-[1px] flex-1 bg-gradient-to-l from-transparent via-[#d8c396]/60 to-[#d8c396]" />
</div>
);
const MiniOrnament = () => (
<svg className="w-6 h-5 text-[#bc9e65] opacity-75 mt-3" viewBox="0 0 30 20" fill="none" stroke="currentColor" strokeWidth="1.2">
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" fill="currentColor" fillOpacity="0.1" />
<path d="M 15,8 C 9,10 9,15 15,16" />
<path d="M 15,8 C 21,10 21,15 15,16" />
</svg>
);
const BoardCornerDecor = ({ position }: { position: "tl" | "tr" | "bl" | "br" }) => {
const styles = {
tl: "top-4 left-4 rotate-0",
tr: "top-4 right-4 -scale-x-100",
bl: "bottom-4 left-4 -scale-y-100",
br: "bottom-4 right-4 scale-[-1]"
};
return (
<svg
className={`absolute ${styles[position]} w-10 h-10 md:w-12 md:h-12 text-[#bc9e65]/60 pointer-events-none z-10`}
viewBox="0 0 50 50"
fill="none"
stroke="currentColor"
strokeWidth="1.2"
>
<path d="M 2,12 C 2,6 6,2 12,2 L 30,2" />
<path d="M 12,2 C 6,2 2,6 2,12 L 2,30" />
<path d="M 6,18 C 6,12 12,6 18,6 L 24,6" />
<path d="M 18,6 C 12,6 6,12 6,18 L 6,24" />
<path d="M 4,4 C 8,8 8,8 12,12 C 14,14 16,13 16,10 C 16,7 13,8 11,11" />
<circle cx="16" cy="16" r="1.5" fill="currentColor" />
</svg>
);
};
const CategoryPill = ({ tag, type }: { tag: string; type: "green" | "gold" | "orange" }) => {
const styles = {
green: {
bg: "bg-[#188754]/5",
text: "text-[#188754]",
border: "border-[#188754]/25",
iconPath: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" // Checkmark
bg: "bg-[#e8f5e9]/95 text-[#1b5e20] border-[#a5d6a7]/70",
icon: "✓"
},
gold: {
bg: "bg-[#d8c396]/8",
text: "text-[#bc9e65]",
border: "border-[#d8c396]/40",
iconPath: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" // Star
bg: "bg-[#fff8e1]/95 text-[#b78103] border-[#ffe082]/70",
icon: "★"
},
orange: {
bg: "bg-[#e07a5f]/5",
text: "text-[#e07a5f]",
border: "border-[#e07a5f]/25",
iconPath: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 10h3l-4 4-4-4h3V8h2v4z" // Classic downward arrow badge
bg: "bg-[#fbe9e7]/95 text-[#c62828] border-[#ffab91]/70",
icon: "●"
}
};
const current = styles[type] || styles.green;
const style = styles[type];
return (
<div className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full border ${current.bg} ${current.text} ${current.border} text-[9px] font-sans font-bold tracking-wider uppercase shadow-[inset_0_1px_2px_rgba(255,255,255,0.4)] select-none transition-transform duration-300 hover:scale-105`}>
<svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 24 24">
<path d={current.iconPath} />
</svg>
<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}
</div>
</span>
);
};
const MenuItemRow = ({ name, desc, tag, type }: MenuItemProps) => (
const MenuItemCard = ({ name, desc, tag, type, img }: MenuItemProps) => (
<motion.div
whileHover={{ x: 6 }}
transition={{ duration: 0.3 }}
className="group flex justify-between items-center py-4 px-3 border-b border-[#d8c396]/15 hover:border-[#0a4a2b]/35 hover:bg-[#0a4a2b]/3 rounded-lg transition-all duration-300 cursor-pointer shadow-[0_0_0_rgba(0,0,0,0)] hover:shadow-[0_4px_15px_rgba(28,45,36,0.02)]"
whileHover={{ y: -2, scale: 1.01 }}
transition={{ duration: 0.25 }}
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"
>
<div className="flex-1 pr-4">
<div className="flex items-center">
{/* Double Arrow Indicator */}
<span className="text-[#188754] font-serif font-bold text-xs tracking-tighter mr-2 transition-transform duration-300 group-hover:translate-x-1.5 inline-block select-none">
..&gt;
</span>
<h3 className="font-serif text-[13px] sm:text-[14px] lg:text-[15px] font-black text-stone-800 tracking-wider group-hover:text-[#0a4a2b] transition-colors duration-300 uppercase">
{name}
</h3>
{/* Inner decorative inset line */}
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none" />
{/* Classic inset corner notched borders using background-matching circular masks with hover support */}
<div className="absolute -top-[1px] -left-[1px] w-3.5 h-3.5 bg-[#fbfaf5] rounded-br-full border-r border-b border-[#d8c396]/45 group-hover:border-[#bc9e65] z-20 pointer-events-none transition-colors duration-300" />
<div className="absolute -top-[1px] -right-[1px] w-3.5 h-3.5 bg-[#fbfaf5] rounded-bl-full border-l border-b border-[#d8c396]/45 group-hover:border-[#bc9e65] z-20 pointer-events-none transition-colors duration-300" />
<div className="absolute -bottom-[1px] -left-[1px] w-3.5 h-3.5 bg-[#fbfaf5] rounded-tr-full border-r border-t border-[#d8c396]/45 group-hover:border-[#bc9e65] z-20 pointer-events-none transition-colors duration-300" />
<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">
{/* 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 */}
<div className="absolute inset-0 bg-gradient-to-br from-[#388e3c] to-[#1b5e20] opacity-95" />
{/* Food Image */}
<div className="w-full h-full rounded-full overflow-hidden relative z-10">
<Image
src={img}
alt={name}
fill
sizes="80px"
className="object-cover transition-transform duration-500 group-hover:scale-112"
/>
</div>
</div>
<p className="font-sans text-[11px] sm:text-[12px] text-stone-500 leading-relaxed mt-2.5 pl-6 font-medium">
{desc}
</p>
</div>
{/* Category Pill */}
<div className="flex-shrink-0 pl-2">
<CategoryPill tag={tag} type={type} />
{/* Content Section */}
<div className="relative z-10 flex flex-col gap-1 w-full pl-2">
{/* Name and Pill Badge */}
<div className="flex items-start justify-between gap-3 w-full">
<h3 className="font-serif text-[12px] sm:text-[13px] font-bold text-[#0a4a2b] tracking-wider uppercase transition-colors duration-300 group-hover:text-[#bc9e65]">
{name}
</h3>
<CategoryPill tag={tag} type={type} />
</div>
{/* Description */}
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[95%]">
{desc}
</p>
</div>
</motion.div>
);
@ -76,47 +153,41 @@ const MenuItemRow = ({ name, desc, tag, type }: MenuItemProps) => (
export default function MenuPreview() {
const sectionRef = useRef<HTMLDivElement>(null);
// Parallax scroll effects for background sketch watermarks
const { scrollYProgress } = useScroll({
target: sectionRef,
offset: ["start end", "end start"],
});
const gopuramY = useTransform(scrollYProgress, [0, 1], ["0px", "-40px"]);
const gopuramX = useTransform(scrollYProgress, [0, 1], ["0px", "-15px"]);
const palaceY = useTransform(scrollYProgress, [0, 1], ["0px", "40px"]);
const palaceX = useTransform(scrollYProgress, [0, 1], ["0px", "15px"]);
const leftColumnItems: MenuItemProps[] = [
{
name: "ONION RAVA DOSA",
desc: "Crispy semolina crepe with onions, herbs & spices.",
tag: "RAVA SPL",
type: "green"
type: "green",
img: "/images/masala_dosa_luxury.png"
},
{
name: "IDLI SAMBAR (2 PCS)",
desc: "Steamed fluffy rice & lentil cakes with hot sambar.",
tag: "TIFFIN SPL",
type: "gold"
type: "gold",
img: "/images/my_dosa_place_food.png"
},
{
name: "MYSORE MASALA DOSA",
desc: "Rice crepe spread with spicy chutney & potato masala.",
tag: "CLASSIC",
type: "orange"
type: "orange",
img: "/images/masala_dosa_luxury.png"
},
{
name: "RAVA MASALA DOSA",
desc: "Crispy semolina crepe filled with spiced potato masala.",
tag: "RAVA SPL",
type: "green"
type: "green",
img: "/images/masala_dosa_luxury.png"
},
{
name: "PURI BHAJI (3 PCS)",
desc: "Golden fluffy deep-fried puris with flavorful potato bhaji.",
tag: "TIFFIN SPL",
type: "gold"
type: "gold",
img: "/images/royal_dining_experience.png"
}
];
@ -125,177 +196,213 @@ export default function MenuPreview() {
name: "MASALA DOSA",
desc: "Crispy thin rice & lentil crepe stuffed with potato masala.",
tag: "CLASSIC",
type: "orange"
type: "orange",
img: "/images/masala_dosa_luxury.png"
},
{
name: "ONION RAVA MASALA DOSA",
desc: "Semolina crepe with onions and spiced potato filling.",
tag: "RAVA SPL",
type: "green"
type: "green",
img: "/images/masala_dosa_luxury.png"
},
{
name: "MEDU VADA (2 PCS)",
desc: "Deep fried crispy lentil donuts served with sambar & chutney.",
tag: "TIFFIN SPL",
type: "gold"
type: "gold",
img: "/images/south_indian_thali_luxury.png"
},
{
name: "PAPER ROAST DOSA",
desc: "Extra large, paper-thin, crispy dosa served hot.",
tag: "CLASSIC",
type: "orange"
type: "orange",
img: "/images/masala_dosa_luxury.png"
},
{
name: "RAVA PLAIN DOSA",
desc: "Crispy semolina crepe served with chutney & sambar.",
tag: "RAVA SPL",
type: "green"
type: "green",
img: "/images/masala_dosa_luxury.png"
}
];
return (
<section
ref={sectionRef}
className="relative min-h-screen py-20 md:py-28 px-6 sm:px-12 md:px-24 bg-[#f6f3ea] overflow-hidden select-none"
className="relative min-h-screen py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none"
>
{/* Traditional Background Image containing pre-composed sketches, leaves, and brass pots */}
<Image
src="/images/menu_bg_traditional.png"
alt="Traditional South Indian Menu Background"
fill
priority
className="object-fill pointer-events-none select-none z-0"
/>
{/* Traditional Temple Borders */}
<div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-25" />
{/* Parallax Background Gopuram sketch (Left Watermark) */}
<motion.div
style={{ y: gopuramY, x: gopuramX }}
className="absolute top-12 left-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-auto mix-blend-multiply z-0"
>
<motion.div
initial={{ opacity: 0, scale: 0.92, rotate: -2, x: -30 }}
whileInView={{
opacity: 0.14,
scale: 1,
rotate: 0,
x: 0,
transition: { duration: 1.6, ease: "easeOut" }
}}
viewport={{ once: true }}
animate={{
y: [0, -6, 3, -6, 0],
x: [0, 3, -3, 2, 0],
rotate: [0, 1.2, -1.2, 0.6, 0]
}}
transition={{
y: { repeat: Infinity, duration: 8, ease: "easeInOut" },
x: { repeat: Infinity, duration: 10, ease: "easeInOut" },
rotate: { repeat: Infinity, duration: 12, ease: "easeInOut" }
}}
whileHover={{
scale: 1.05,
opacity: 0.28,
filter: "sepia(0.4) saturate(1.3) drop-shadow(0 10px 15px rgba(216,195,150,0.15))"
}}
className="w-full h-full relative cursor-pointer"
>
<Image
src="/images/menu_gopuram_sketch.png"
alt="Gopuram Sketch"
fill
priority
sizes="(max-width: 768px) 30vw, 20vw"
className="object-contain filter grayscale transition-all duration-300"
/>
</motion.div>
</motion.div>
{/* Parallax Background Palace sketch (Right Watermark) */}
<motion.div
style={{ y: palaceY, x: palaceX }}
className="absolute top-12 right-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-auto mix-blend-multiply z-0"
>
<motion.div
initial={{ opacity: 0, scale: 0.92, rotate: 2, x: 30 }}
whileInView={{
opacity: 0.14,
scale: 1,
rotate: 0,
x: 0,
transition: { duration: 1.6, ease: "easeOut" }
}}
viewport={{ once: true }}
animate={{
y: [0, 6, -3, 6, 0],
x: [0, -3, 3, -2, 0],
rotate: [0, -1.2, 1.2, -0.6, 0]
}}
transition={{
y: { repeat: Infinity, duration: 9, ease: "easeInOut" },
x: { repeat: Infinity, duration: 11, ease: "easeInOut" },
rotate: { repeat: Infinity, duration: 13, ease: "easeInOut" }
}}
whileHover={{
scale: 1.05,
opacity: 0.28,
filter: "sepia(0.4) saturate(1.3) drop-shadow(0 10px 15px rgba(216,195,150,0.15))"
}}
className="w-full h-full relative cursor-pointer"
>
<Image
src="/images/menu_palace_sketch.png"
alt="Palace Sketch"
fill
priority
sizes="(max-width: 768px) 30vw, 20vw"
className="object-contain filter grayscale transition-all duration-300"
/>
</motion.div>
</motion.div>
<div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-30 z-10" />
<div className="max-w-6xl mx-auto relative z-10">
{/* Header Elements */}
<div className="mb-16 flex flex-col items-center text-center">
{/* Top traditional gold design element */}
<div className="text-gold-dark text-xl mb-1">⚜</div>
<div className="w-16 h-[1px] bg-[#d8c396] mb-3" />
<div className="mb-14 flex flex-col items-center text-center">
<LotusOrnament />
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wide text-[#188754] uppercase">
<h2 className="font-serif text-4xl sm:text-5xl lg:text-6xl font-bold tracking-wider text-[#0a4a2b] uppercase">
Our Menu
</h2>
{/* Double line with diamond ornament */}
<div className="flex items-center gap-3 w-44 justify-center mt-3">
<div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#d8c396]" />
<span className="text-[#d8c396] text-[8px]">◆</span>
<div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#d8c396]" />
</div>
<TitleDivider />
<p className="font-sans text-xs sm:text-sm text-stone-600 max-w-lg mt-6 leading-relaxed tracking-wider italic font-medium">
<p className="font-sans text-xs sm:text-[13px] text-stone-700 max-w-xl 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>
</div>
{/* 2-Column Menu Layout wrapper */}
<div className="relative grid grid-cols-1 md:grid-cols-2 gap-x-12 lg:gap-x-16 gap-y-4 px-2 md:px-6">
{/* Vertical Dotted Separator in the center (Desktop only) */}
<div className="hidden md:block absolute left-1/2 top-4 bottom-4 w-[1px] border-l border-dashed border-[#d8c396]/60 -translate-x-1/2 pointer-events-none" />
<MiniOrnament />
</div>
{/* Left Column Items */}
<div className="flex flex-col gap-2">
{leftColumnItems.map((item, index) => (
<MenuItemRow key={index} {...item} />
))}
{/* Menu Board Container */}
<div className="bg-[#fbfaf5]/95 border border-[#d8c396]/60 rounded-3xl p-6 sm:p-10 md:p-14 shadow-2xl relative backdrop-blur-xs">
{/* Inner border line overlay */}
<div className="absolute inset-2 border border-[#d8c396]/35 rounded-2xl pointer-events-none" />
{/* Corner decorative scrolls */}
<BoardCornerDecor position="tl" />
<BoardCornerDecor position="tr" />
<BoardCornerDecor position="bl" />
<BoardCornerDecor position="br" />
{/* Banner Badge - Dosa Specialties */}
<div className="flex justify-center mb-12 relative z-20">
<div className="relative inline-flex items-center justify-center select-none">
{/* Left Scroll */}
<svg className="w-8 h-4 text-[#bc9e65] mr-2 hidden sm:block" viewBox="0 0 30 15" fill="currentColor">
<path d="M 0,7.5 C 5,7.5 15,3 15,3 C 15,3 12,7.5 25,7.5 L 30,7.5 C 28,9 25,12 15,12 C 5,12 0,7.5 0,7.5 Z" />
</svg>
<div className="bg-[#0a4a2b] border border-[#d8c396]/80 px-8 py-2.5 rounded-full z-10 font-serif font-bold text-xs sm:text-sm tracking-[0.25em] text-[#fcfaf2] uppercase shadow-lg flex items-center gap-3">
<span className="text-[#d8c396] text-[8px] opacity-75">✦</span>
Dosa Specialties
<span className="text-[#d8c396] text-[8px] opacity-75">✦</span>
</div>
{/* Right Scroll */}
<svg className="w-8 h-4 text-[#bc9e65] ml-2 hidden sm:block scale-x-[-1]" viewBox="0 0 30 15" fill="currentColor">
<path d="M 0,7.5 C 5,7.5 15,3 15,3 C 15,3 12,7.5 25,7.5 L 30,7.5 C 28,9 25,12 15,12 C 5,12 0,7.5 0,7.5 Z" />
</svg>
</div>
</div>
{/* Right Column Items */}
<div className="flex flex-col gap-2">
{rightColumnItems.map((item, index) => (
<MenuItemRow key={index} {...item} />
))}
{/* 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">
{/* 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="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" />
<path d="M 10,5 L 10,14" />
<path d="M 10,26 L 10,35" />
<path d="M 6,10 C 10,12 10,12 14,10" />
<path d="M 6,30 C 10,28 10,28 14,30" />
</svg>
<div className="w-[1px] flex-1 border-l border-dashed border-[#d8c396]/55" />
</div>
{/* Left Column Item Cards */}
<div className="flex flex-col gap-6 pl-2 pr-2 md:pl-4">
{leftColumnItems.map((item, index) => (
<MenuItemCard key={index} {...item} />
))}
</div>
{/* Right Column Item Cards */}
<div className="flex flex-col gap-6 pl-2 pr-2 md:pr-4">
{rightColumnItems.map((item, index) => (
<MenuItemCard key={index} {...item} />
))}
</div>
</div>
</div>
{/* Bottom Section Core Pillars Feature Bar */}
<BottomFeatures />
</div>
</section>
);
}
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">
{/* 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">
<svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<circle cx="12" cy="12" r="10" />
<path d="M12 18V12" />
<path d="M12 12C12 10 14 9 16 9" />
<path d="M12 14C12 12 10 11 8 11" />
</svg>
</div>
<div className="text-left">
<h5 className="font-sans text-[10px] sm:text-[11px] font-bold text-stone-850 tracking-wider uppercase">100% Vegetarian</h5>
<p className="font-sans text-[9px] sm:text-[10px] text-stone-500 mt-0.5">Pure Veg. Good Food</p>
</div>
</div>
{/* Feature 2 */}
<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">
<svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M4 10h16c0 5-2.5 8-8 8s-8-3-8-8z" />
<path d="M12 4v4" />
<path d="M6 8h12" />
<path d="M2 10h20" />
</svg>
</div>
<div className="text-left">
<h5 className="font-sans text-[10px] sm:text-[11px] font-bold text-stone-850 tracking-wider uppercase">Authentic Recipes</h5>
<p className="font-sans text-[9px] sm:text-[10px] text-stone-500 mt-0.5">Traditional Taste</p>
</div>
</div>
{/* Feature 3 */}
<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">
<svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M12 20V4" />
<path d="M12 7c4 0 6 2 6 5s-2 3-6 3" />
<path d="M12 11c-4 0-6 2-6 5s2 3 6 3" />
<path d="M12 15c4 0 6-2 6-5s-2-2-6-2" />
</svg>
</div>
<div className="text-left">
<h5 className="font-sans text-[10px] sm:text-[11px] font-bold text-stone-850 tracking-wider uppercase">Finest Ingredients</h5>
<p className="font-sans text-[9px] sm:text-[10px] text-stone-500 mt-0.5">Always Fresh</p>
</div>
</div>
{/* Feature 4 */}
<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">
<svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<circle cx="12" cy="12" r="10" />
<path d="M12 16.5s-4-2.5-4-4.5c0-1.2.8-2 2-2 1 0 1.5.5 2 1 .5-.5 1-1 2-1 1.2 0 2 .8 2 2 0 2-4 4.5-4 4.5z" fill="currentColor" fillOpacity="0.1" />
</svg>
</div>
<div className="text-left">
<h5 className="font-sans text-[10px] sm:text-[11px] font-bold text-stone-850 tracking-wider uppercase">Made With Love</h5>
<p className="font-sans text-[9px] sm:text-[10px] text-stone-500 mt-0.5">For You</p>
</div>
</div>
</div>
);

254
src/components/RestaurantStory.tsx
View File

@ -2,120 +2,138 @@
import Image from "next/image";
const StoryPreTitleOrnament = () => (
<svg className="w-4 h-4 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
</svg>
);
const StoryLotusDivider = () => (
<div className="flex items-center gap-4 my-5 justify-center w-full max-w-[280px] pointer-events-none select-none">
<div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#d8c396]" />
<svg className="w-6 h-5 text-[#bc9e65]" viewBox="0 0 30 20" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" fill="currentColor" fillOpacity="0.1" />
<path d="M 15,8 C 9,10 9,15 15,16" />
<path d="M 15,8 C 21,10 21,15 15,16" />
</svg>
<div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#d8c396]" />
</div>
);
export default function RestaurantStory() {
return (
<section className="relative py-20 md:py-28 px-6 sm:px-12 md:px-24 bg-[#f6f3ea] overflow-hidden select-none">
{/* Traditional Temple Borders */}
<div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-25" />
<section className="relative py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none">
{/* Traditional Background Image containing pre-composed sketches and mandalas */}
<Image
src="/images/story_bg.png"
alt="Traditional South Indian Story Background"
fill
priority
className="object-fill pointer-events-none select-none z-0"
/>
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-16 relative z-10">
{/* Traditional Temple Borders */}
<div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-30 z-10" />
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-8 relative z-10">
{/* Left Side: Story & Features Details (Fully Center-Aligned) */}
<div className="w-full lg:w-[53%] flex flex-col items-center text-center justify-center">
<div className="w-full lg:w-[50%] flex flex-col items-center text-center justify-center">
{/* Badge Pre-title with Gold Crest */}
<div className="flex flex-col items-center mb-4">
{/* Gold Lamp/Lotus Crest */}
<svg className="w-8 h-8 text-[#d8c396] mb-2" viewBox="0 0 100 100" fill="none">
<path d="M50 15 C52 35 70 45 75 50 C65 55 55 58 50 75 C45 58 35 55 25 50 C30 45 48 35 50 15 Z" fill="currentColor" />
<circle cx="50" cy="50" r="4.5" fill="#8b2635" />
<path d="M35 78 L65 78" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
</svg>
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#8b2635] font-bold block">
{/* Pre-title with Gold Crest */}
<div className="flex flex-col items-center mb-2">
<StoryPreTitleOrnament />
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
••••• OUR STORY •••••
</span>
</div>
{/* Main Headline */}
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wide text-[#0a4a2b] leading-tight">
A Tradition Served<br /> with Love
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase">
A Tradition Served<br />
<span className="text-[#0a4a2b] font-extrabold block mt-1">With Love</span>
</h2>
{/* Traditional Gold Divider */}
<div className="flex items-center gap-4 my-6 justify-center">
<div className="w-16 h-[1.5px] bg-gradient-to-r from-transparent to-[#d8c396]" />
<div className="w-2.5 h-2.5 rotate-45 border border-[#d8c396] bg-[#8b2635]" />
<div className="w-16 h-[1.5px] bg-gradient-to-l from-transparent to-[#d8c396]" />
</div>
<StoryLotusDivider />
{/* Paragraph Narrative */}
<p className="font-sans text-xs sm:text-sm lg:text-base text-stone-700 leading-relaxed max-w-xl text-center tracking-wide mb-8">
<p className="font-sans text-xs sm:text-sm lg:text-[15px] text-stone-700 leading-relaxed max-w-xl text-center tracking-wider mb-2 italic font-semibold">
At My Dosa Place, food is more than just a meal, it's a tradition passed down through generations. From authentic recipes to warm hospitality, we bring the true essence of South India to your table.
</p>
{/* Traditional Bottom Gold Divider */}
<div className="flex items-center gap-4 mb-10 justify-center">
<div className="w-16 h-[1.5px] bg-gradient-to-r from-transparent to-[#d8c396]" />
<div className="w-2.5 h-2.5 rotate-45 border border-[#d8c396] bg-[#8b2635]" />
<div className="w-16 h-[1.5px] bg-gradient-to-l from-transparent to-[#d8c396]" />
</div>
<StoryLotusDivider />
{/* Grid of 4 Key Features */}
<div className="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-4 w-full">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-4 w-full mt-4">
{/* Feature 1: Veg */}
<div className="flex flex-col items-center text-center group">
<div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
<svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 3.5 1 9a7 7 0 0 1-9 9z" />
<path d="M19 2c-2.26 4.33-5.27 7.14-8 10" />
<div className="flex flex-col items-center text-center group select-text">
<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">
<svg className="w-6 h-6 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10" />
<path d="M12 18V12" />
<path d="M12 12C12 10 14 9 16 9" />
<path d="M12 14C12 12 10 11 8 11" />
</svg>
</div>
<h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
<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-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
<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>
</div>
{/* Feature 2: Recipes */}
<div className="flex flex-col items-center text-center group">
<div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
<svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
<path d="M3 12h18" />
<path d="M5 12v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-6" />
<path d="M12 3v3" />
<path d="M8 4v2" />
<path d="M16 4v2" />
<div className="flex flex-col items-center text-center group select-text">
<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">
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
<path d="M4 10h16c0 5-2.5 8-8 8s-8-3-8-8z" />
<path d="M12 4v4" />
<path d="M6 8h12" />
<path d="M2 10h20" />
</svg>
</div>
<h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
<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-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
<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>
</div>
{/* Feature 3: Hospitality */}
<div className="flex flex-col items-center text-center group">
<div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
<svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
<path d="M12 3c-1.5 3-4 4.5-4 7.5a4 4 0 0 0 8 0c0-3-2.5-4.5-4-7.5z" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6 18h12v2H6z" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9 20v2h6v-2z" strokeLinecap="round" strokeLinejoin="round" />
<div className="flex flex-col items-center text-center group select-text">
<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">
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
<path d="M12 20V4" />
<path d="M12 7c4 0 6 2 6 5s-2 3-6 3" />
<path d="M12 11c-4 0-6 2-6 5s2 3 6 3" />
<path d="M12 15c4 0 6-2 6-5s-2-2-6-2" />
</svg>
</div>
<h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
<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-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
<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>
</div>
{/* Feature 4: Love */}
<div className="flex flex-col items-center text-center group">
<div className="w-12 h-12 rounded-full border border-[#188754]/30 flex items-center justify-center mb-3 bg-[#fcfaf2] transition-transform duration-300 group-hover:scale-110 shadow-sm">
<svg className="w-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
<div className="flex flex-col items-center text-center group select-text">
<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">
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
<circle cx="12" cy="12" r="10" />
<path d="M12 16.5s-4-2.5-4-4.5c0-1.2.8-2 2-2 1 0 1.5.5 2 1 .5-.5 1-1 2-1 1.2 0 2 .8 2 2 0 2-4 4.5-4 4.5z" fill="currentColor" fillOpacity="0.1" />
</svg>
</div>
<h4 className="font-sans text-[11px] sm:text-xs font-bold text-[#0a4a2b] tracking-wider uppercase mb-1">
<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-[10px] sm:text-[11px] text-stone-600 leading-relaxed max-w-[120px]">
<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>
</div>
@ -124,116 +142,22 @@ export default function RestaurantStory() {
</div>
{/* Right Side: Larger Gopuram Arched Frame Counter Image */}
<div className="w-full lg:w-[42%] flex justify-center relative">
{/* Ambient Glow */}
<div className="absolute w-[400px] h-[400px] rounded-full bg-gold/10 blur-[80px] -z-10 pointer-events-none" />
{/* Shield frame backing shadow */}
<div className="absolute inset-y-0 w-full max-w-[420px] bg-[#fcf9f2]/75 border border-gold/15 rounded-t-[200px] -z-10 shadow-md" />
{/* Gopuram Arch Masked Image Wrapper */}
<div
className="w-[340px] h-[420px] sm:w-[420px] sm:h-[520px] relative overflow-hidden shadow-2xl z-10"
style={{
clipPath: "url(#gopuram-arch)",
WebkitClipPath: "url(#gopuram-arch)",
}}
>
<div className="w-full h-full relative group">
<Image
src="/images/chettinad_interior.png"
alt="My Dosa Place Dining Counter"
fill
sizes="(max-width: 1024px) 100vw, 40vw"
className="object-cover brightness-[0.98] transition-transform duration-700 group-hover:scale-105"
priority
/>
</div>
{/* Inset Double Border Stroke Overlay */}
<svg
className="absolute inset-0 w-full h-full pointer-events-none z-30"
viewBox="0 0 100 100"
preserveAspectRatio="none"
>
<path
d="M 50,1.5
C 64,1.5 71.5,7 71.5,15
C 71.5,18 73,19 75,20
C 83.5,22 86.5,28 86.5,34
C 86.5,37 88.5,38 90.5,39
C 95.5,41 97.5,47 97.5,54
L 97.5,98.5
L 2.5,98.5
L 2.5,54
C 2.5,47 4.5,41 9.5,39
C 11.5,38 13.5,37 13.5,34
C 13.5,28 16.5,22 25,20
C 27,19 28.5,18 28.5,15
C 28.5,7 36,1.5 50,1.5 Z"
fill="none"
stroke="#d8c396"
strokeWidth="1.2"
strokeLinecap="round"
opacity="0.85"
/>
<path
d="M 50,3.5
C 62.5,3.5 69.5,8.5 69.5,16
C 69.5,18.5 71,19.5 73,20.5
C 81,22.5 84,28 84,33.5
C 84,36 86,37 88,38
C 93,40 94.5,45.5 94.5,52
L 94.5,96
L 5.5,96
L 5.5,52
C 5.5,45.5 7,40 12,38
C 14,37 16,36 16,33.5
C 16,28 19,22.5 27,20.5
C 29,19.5 30.5,18.5 30.5,16
C 30.5,8.5 37.5,3.5 50,3.5 Z"
fill="none"
stroke="#d8c396"
strokeWidth="0.5"
strokeLinecap="round"
opacity="0.45"
/>
</svg>
{/* Right Side: Mockup Gopuram Archway thali frame */}
<div className="w-full lg:w-[46%] flex justify-center lg:justify-end relative z-10">
{/* Crop-extracted story thali arch image */}
<div className="w-[340px] h-[340px] sm:w-[480px] sm:h-[480px] md:w-[500px] md:h-[500px] relative pointer-events-none select-none">
<Image
src="/images/story_arch.png"
alt="My Dosa Place Traditional Dining Feast"
fill
sizes="(max-width: 1024px) 100vw, 46vw"
className="object-contain"
priority
/>
</div>
{/* Arch Caption Label Overlay */}
<div className="absolute bottom-[-16px] z-20">
<div className="bg-[#8b2635] border border-gold/45 px-5 py-1 text-[10px] tracking-[0.25em] text-[#fcfaf2] uppercase font-serif font-semibold shadow-md whitespace-nowrap">
Heritage Sanctuary
</div>
</div>
</div>
</div>
{/* SVG ClipPath Definition for the Gopuram Temple Arch frame */}
<svg width="0" height="0" className="absolute pointer-events-none">
<defs>
<clipPath id="gopuram-arch" clipPathUnits="objectBoundingBox">
<path d="M 0.5,0
C 0.65,0 0.72,0.06 0.72,0.15
C 0.72,0.18 0.74,0.19 0.76,0.2
C 0.85,0.22 0.88,0.28 0.88,0.35
C 0.88,0.38 0.9,0.39 0.92,0.4
C 0.98,0.42 1,0.48 1,0.55
L 1,1
L 0,1
C 0,0.48 0.02,0.42 0.08,0.4
C 0.1,0.39 0.12,0.38 0.12,0.35
C 0.12,0.28 0.15,0.22 0.24,0.2
C 0.26,0.19 0.28,0.18 0.28,0.15
C 0.28,0.06 0.35,0 0.5,0 Z" />
</clipPath>
</defs>
</svg>
</section>
);
}