design: redesign menu & story sections and convert banquet card to box format
This commit is contained in:
Alaguraj0361
parent
f2d308e890
commit
52a2e183fc
BIN
public/images/menu_bg_traditional.png
Normal file
BIN
public/images/menu_bg_traditional.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 875 KiB |
BIN
public/images/menu_brass_pot.png
Normal file
BIN
public/images/menu_brass_pot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 727 KiB |
BIN
public/images/menu_brass_pot_clean.png
Normal file
BIN
public/images/menu_brass_pot_clean.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
BIN
public/images/menu_green_cloth.png
Normal file
BIN
public/images/menu_green_cloth.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 900 KiB |
BIN
public/images/menu_green_cloth_clean.png
Normal file
BIN
public/images/menu_green_cloth_clean.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 827 KiB |
BIN
public/images/menu_leaf_clean.png
Normal file
BIN
public/images/menu_leaf_clean.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 489 KiB |
BIN
public/images/menu_leaf_left.png
Normal file
BIN
public/images/menu_leaf_left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 552 KiB |
BIN
public/images/menu_leaf_right.png
Normal file
BIN
public/images/menu_leaf_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 424 KiB |
BIN
public/images/menu_left.png
Normal file
BIN
public/images/menu_left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
public/images/menu_right.png
Normal file
BIN
public/images/menu_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
public/images/story_arch.png
Normal file
BIN
public/images/story_arch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 548 KiB |
BIN
public/images/story_bg.png
Normal file
BIN
public/images/story_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 899 KiB |
@ -373,22 +373,12 @@ export default function EntranceExperience() {
|
|||||||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||||
exit={{ opacity: 0, x: -50, scale: 0.95 }}
|
exit={{ opacity: 0, x: -50, scale: 0.95 }}
|
||||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
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"
|
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"
|
||||||
style={{
|
|
||||||
borderTopLeftRadius: "180px 150px",
|
|
||||||
borderTopRightRadius: "180px 150px",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{/* Inner traditional gold frame matching the arch dome */}
|
{/* Inner traditional gold frame */}
|
||||||
<div
|
<div className="absolute top-2 left-2 right-2 bottom-2 border border-gold/15 pointer-events-none rounded-[22px]" />
|
||||||
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",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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
|
P U R E V E G E T A R I A N F E A S T
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
import { motion, useScroll, useTransform } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
|
||||||
interface MenuItemProps {
|
interface MenuItemProps {
|
||||||
@ -9,66 +9,143 @@ interface MenuItemProps {
|
|||||||
desc: string;
|
desc: string;
|
||||||
tag: string;
|
tag: string;
|
||||||
type: "green" | "gold" | "orange";
|
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 CategoryPill = ({ tag, type }: { tag: string; type: "green" | "gold" | "orange" }) => {
|
||||||
const styles = {
|
const styles = {
|
||||||
green: {
|
green: {
|
||||||
bg: "bg-[#188754]/5",
|
bg: "bg-[#e8f5e9]/95 text-[#1b5e20] border-[#a5d6a7]/70",
|
||||||
text: "text-[#188754]",
|
icon: "✓"
|
||||||
border: "border-[#188754]/25",
|
|
||||||
iconPath: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" // Checkmark
|
|
||||||
},
|
},
|
||||||
gold: {
|
gold: {
|
||||||
bg: "bg-[#d8c396]/8",
|
bg: "bg-[#fff8e1]/95 text-[#b78103] border-[#ffe082]/70",
|
||||||
text: "text-[#bc9e65]",
|
icon: "★"
|
||||||
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
|
|
||||||
},
|
},
|
||||||
orange: {
|
orange: {
|
||||||
bg: "bg-[#e07a5f]/5",
|
bg: "bg-[#fbe9e7]/95 text-[#c62828] border-[#ffab91]/70",
|
||||||
text: "text-[#e07a5f]",
|
icon: "●"
|
||||||
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
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const style = styles[type];
|
||||||
const current = styles[type] || styles.green;
|
|
||||||
|
|
||||||
return (
|
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`}>
|
<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}`}>
|
||||||
<svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 24 24">
|
<span className="text-[10px] leading-none font-extrabold">{style.icon}</span>
|
||||||
<path d={current.iconPath} />
|
|
||||||
</svg>
|
|
||||||
{tag}
|
{tag}
|
||||||
</div>
|
</span>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const MenuItemRow = ({ name, desc, tag, type }: MenuItemProps) => (
|
const MenuItemCard = ({ name, desc, tag, type, img }: MenuItemProps) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
whileHover={{ x: 6 }}
|
whileHover={{ y: -2, scale: 1.01 }}
|
||||||
transition={{ duration: 0.3 }}
|
transition={{ duration: 0.25 }}
|
||||||
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)]"
|
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">
|
{/* Inner decorative inset line */}
|
||||||
<div className="flex items-center">
|
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none" />
|
||||||
{/* 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">
|
{/* 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" />
|
||||||
</span>
|
<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" />
|
||||||
<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">
|
<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" />
|
||||||
{name}
|
<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" />
|
||||||
</h3>
|
|
||||||
|
{/* 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>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Category Pill */}
|
{/* Content Section */}
|
||||||
<div className="flex-shrink-0 pl-2">
|
<div className="relative z-10 flex flex-col gap-1 w-full pl-2">
|
||||||
<CategoryPill tag={tag} type={type} />
|
{/* 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>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
@ -76,47 +153,41 @@ const MenuItemRow = ({ name, desc, tag, type }: MenuItemProps) => (
|
|||||||
export default function MenuPreview() {
|
export default function MenuPreview() {
|
||||||
const sectionRef = useRef<HTMLDivElement>(null);
|
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[] = [
|
const leftColumnItems: MenuItemProps[] = [
|
||||||
{
|
{
|
||||||
name: "ONION RAVA DOSA",
|
name: "ONION RAVA DOSA",
|
||||||
desc: "Crispy semolina crepe with onions, herbs & spices.",
|
desc: "Crispy semolina crepe with onions, herbs & spices.",
|
||||||
tag: "RAVA SPL",
|
tag: "RAVA SPL",
|
||||||
type: "green"
|
type: "green",
|
||||||
|
img: "/images/masala_dosa_luxury.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "IDLI SAMBAR (2 PCS)",
|
name: "IDLI SAMBAR (2 PCS)",
|
||||||
desc: "Steamed fluffy rice & lentil cakes with hot sambar.",
|
desc: "Steamed fluffy rice & lentil cakes with hot sambar.",
|
||||||
tag: "TIFFIN SPL",
|
tag: "TIFFIN SPL",
|
||||||
type: "gold"
|
type: "gold",
|
||||||
|
img: "/images/my_dosa_place_food.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "MYSORE MASALA DOSA",
|
name: "MYSORE MASALA DOSA",
|
||||||
desc: "Rice crepe spread with spicy chutney & potato masala.",
|
desc: "Rice crepe spread with spicy chutney & potato masala.",
|
||||||
tag: "CLASSIC",
|
tag: "CLASSIC",
|
||||||
type: "orange"
|
type: "orange",
|
||||||
|
img: "/images/masala_dosa_luxury.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "RAVA MASALA DOSA",
|
name: "RAVA MASALA DOSA",
|
||||||
desc: "Crispy semolina crepe filled with spiced potato masala.",
|
desc: "Crispy semolina crepe filled with spiced potato masala.",
|
||||||
tag: "RAVA SPL",
|
tag: "RAVA SPL",
|
||||||
type: "green"
|
type: "green",
|
||||||
|
img: "/images/masala_dosa_luxury.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "PURI BHAJI (3 PCS)",
|
name: "PURI BHAJI (3 PCS)",
|
||||||
desc: "Golden fluffy deep-fried puris with flavorful potato bhaji.",
|
desc: "Golden fluffy deep-fried puris with flavorful potato bhaji.",
|
||||||
tag: "TIFFIN SPL",
|
tag: "TIFFIN SPL",
|
||||||
type: "gold"
|
type: "gold",
|
||||||
|
img: "/images/royal_dining_experience.png"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -125,177 +196,213 @@ export default function MenuPreview() {
|
|||||||
name: "MASALA DOSA",
|
name: "MASALA DOSA",
|
||||||
desc: "Crispy thin rice & lentil crepe stuffed with potato masala.",
|
desc: "Crispy thin rice & lentil crepe stuffed with potato masala.",
|
||||||
tag: "CLASSIC",
|
tag: "CLASSIC",
|
||||||
type: "orange"
|
type: "orange",
|
||||||
|
img: "/images/masala_dosa_luxury.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "ONION RAVA MASALA DOSA",
|
name: "ONION RAVA MASALA DOSA",
|
||||||
desc: "Semolina crepe with onions and spiced potato filling.",
|
desc: "Semolina crepe with onions and spiced potato filling.",
|
||||||
tag: "RAVA SPL",
|
tag: "RAVA SPL",
|
||||||
type: "green"
|
type: "green",
|
||||||
|
img: "/images/masala_dosa_luxury.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "MEDU VADA (2 PCS)",
|
name: "MEDU VADA (2 PCS)",
|
||||||
desc: "Deep fried crispy lentil donuts served with sambar & chutney.",
|
desc: "Deep fried crispy lentil donuts served with sambar & chutney.",
|
||||||
tag: "TIFFIN SPL",
|
tag: "TIFFIN SPL",
|
||||||
type: "gold"
|
type: "gold",
|
||||||
|
img: "/images/south_indian_thali_luxury.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "PAPER ROAST DOSA",
|
name: "PAPER ROAST DOSA",
|
||||||
desc: "Extra large, paper-thin, crispy dosa served hot.",
|
desc: "Extra large, paper-thin, crispy dosa served hot.",
|
||||||
tag: "CLASSIC",
|
tag: "CLASSIC",
|
||||||
type: "orange"
|
type: "orange",
|
||||||
|
img: "/images/masala_dosa_luxury.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "RAVA PLAIN DOSA",
|
name: "RAVA PLAIN DOSA",
|
||||||
desc: "Crispy semolina crepe served with chutney & sambar.",
|
desc: "Crispy semolina crepe served with chutney & sambar.",
|
||||||
tag: "RAVA SPL",
|
tag: "RAVA SPL",
|
||||||
type: "green"
|
type: "green",
|
||||||
|
img: "/images/masala_dosa_luxury.png"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
ref={sectionRef}
|
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 */}
|
{/* 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" />
|
<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" />
|
||||||
|
|
||||||
{/* 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="max-w-6xl mx-auto relative z-10">
|
<div className="max-w-6xl mx-auto relative z-10">
|
||||||
|
|
||||||
{/* Header Elements */}
|
{/* Header Elements */}
|
||||||
<div className="mb-16 flex flex-col items-center text-center">
|
<div className="mb-14 flex flex-col items-center text-center">
|
||||||
{/* Top traditional gold design element */}
|
<LotusOrnament />
|
||||||
<div className="text-gold-dark text-xl mb-1">⚜</div>
|
|
||||||
<div className="w-16 h-[1px] bg-[#d8c396] mb-3" />
|
|
||||||
|
|
||||||
<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
|
Our Menu
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
{/* Double line with diamond ornament */}
|
<TitleDivider />
|
||||||
<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>
|
|
||||||
|
|
||||||
<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" />
|
Explore a wide variety of authentic South Indian vegetarian dishes,<br className="hidden sm:inline" />
|
||||||
crafted with traditional recipes and the finest ingredients.
|
crafted with traditional recipes and the finest ingredients.
|
||||||
</p>
|
</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) */}
|
<MiniOrnament />
|
||||||
<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" />
|
</div>
|
||||||
|
|
||||||
{/* Left Column Items */}
|
{/* Menu Board Container */}
|
||||||
<div className="flex flex-col gap-2">
|
<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">
|
||||||
{leftColumnItems.map((item, index) => (
|
|
||||||
<MenuItemRow key={index} {...item} />
|
{/* 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>
|
</div>
|
||||||
|
|
||||||
{/* Right Column Items */}
|
{/* 2-Column Menu Layout grid */}
|
||||||
<div className="flex flex-col gap-2">
|
<div className="relative grid grid-cols-1 md:grid-cols-2 gap-x-14 gap-y-6 z-10 md:px-4">
|
||||||
{rightColumnItems.map((item, index) => (
|
|
||||||
<MenuItemRow key={index} {...item} />
|
{/* 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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Section Core Pillars Feature Bar */}
|
||||||
|
<BottomFeatures />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
||||||
|
);
|
||||||
|
|||||||
@ -2,120 +2,138 @@
|
|||||||
|
|
||||||
import Image from "next/image";
|
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() {
|
export default function RestaurantStory() {
|
||||||
return (
|
return (
|
||||||
<section className="relative py-20 md:py-28 px-6 sm:px-12 md:px-24 bg-[#f6f3ea] overflow-hidden select-none">
|
<section className="relative py-24 md:py-32 px-6 sm:px-12 md:px-24 overflow-hidden select-none">
|
||||||
{/* Traditional Temple Borders */}
|
{/* Traditional Background Image containing pre-composed sketches and mandalas */}
|
||||||
<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" />
|
<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) */}
|
{/* 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 */}
|
{/* Pre-title with Gold Crest */}
|
||||||
<div className="flex flex-col items-center mb-4">
|
<div className="flex flex-col items-center mb-2">
|
||||||
{/* Gold Lamp/Lotus Crest */}
|
<StoryPreTitleOrnament />
|
||||||
<svg className="w-8 h-8 text-[#d8c396] mb-2" viewBox="0 0 100 100" fill="none">
|
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||||
<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">
|
|
||||||
••••• OUR STORY •••••
|
••••• OUR STORY •••••
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main Headline */}
|
{/* Main Headline */}
|
||||||
<h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wide text-[#0a4a2b] leading-tight">
|
<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 /> with Love
|
A Tradition Served<br />
|
||||||
|
<span className="text-[#0a4a2b] font-extrabold block mt-1">With Love</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
{/* Traditional Gold Divider */}
|
{/* Traditional Gold Divider */}
|
||||||
<div className="flex items-center gap-4 my-6 justify-center">
|
<StoryLotusDivider />
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Paragraph Narrative */}
|
{/* 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.
|
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>
|
</p>
|
||||||
|
|
||||||
{/* Traditional Bottom Gold Divider */}
|
{/* Traditional Bottom Gold Divider */}
|
||||||
<div className="flex items-center gap-4 mb-10 justify-center">
|
<StoryLotusDivider />
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Grid of 4 Key Features */}
|
{/* 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 */}
|
{/* Feature 1: Veg */}
|
||||||
<div className="flex flex-col items-center text-center group">
|
<div className="flex flex-col items-center text-center group select-text">
|
||||||
<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">
|
<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-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
<svg className="w-6 h-6 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" 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" />
|
<circle cx="12" cy="12" r="10" />
|
||||||
<path d="M19 2c-2.26 4.33-5.27 7.14-8 10" />
|
<path d="M12 18V12" />
|
||||||
|
<path d="M12 12C12 10 14 9 16 9" />
|
||||||
|
<path d="M12 14C12 12 10 11 8 11" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</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
|
100% Pure Veg
|
||||||
</h4>
|
</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.
|
Pure vegetarian food made with the finest ingredients.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Feature 2: Recipes */}
|
{/* Feature 2: Recipes */}
|
||||||
<div className="flex flex-col items-center text-center group">
|
<div className="flex flex-col items-center text-center group select-text">
|
||||||
<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">
|
<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-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||||
<path d="M3 12h18" />
|
<path d="M4 10h16c0 5-2.5 8-8 8s-8-3-8-8z" />
|
||||||
<path d="M5 12v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-6" />
|
<path d="M12 4v4" />
|
||||||
<path d="M12 3v3" />
|
<path d="M6 8h12" />
|
||||||
<path d="M8 4v2" />
|
<path d="M2 10h20" />
|
||||||
<path d="M16 4v2" />
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</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
|
Authentic Recipes
|
||||||
</h4>
|
</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.
|
Traditional recipes crafted with authentic South Indian flavors.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Feature 3: Hospitality */}
|
{/* Feature 3: Hospitality */}
|
||||||
<div className="flex flex-col items-center text-center group">
|
<div className="flex flex-col items-center text-center group select-text">
|
||||||
<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">
|
<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-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
|
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||||
<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="M12 20V4" />
|
||||||
<path d="M6 18h12v2H6z" strokeLinecap="round" strokeLinejoin="round" />
|
<path d="M12 7c4 0 6 2 6 5s-2 3-6 3" />
|
||||||
<path d="M9 20v2h6v-2z" strokeLinecap="round" strokeLinejoin="round" />
|
<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>
|
</svg>
|
||||||
</div>
|
</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
|
Warm Hospitality
|
||||||
</h4>
|
</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.
|
A homely environment with friendly service and a smile.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Feature 4: Love */}
|
{/* Feature 4: Love */}
|
||||||
<div className="flex flex-col items-center text-center group">
|
<div className="flex flex-col items-center text-center group select-text">
|
||||||
<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">
|
<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-5 h-5 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||||
<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" />
|
<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>
|
</svg>
|
||||||
</div>
|
</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
|
Made With Love
|
||||||
</h4>
|
</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.
|
Every dish is prepared with love, care and traditional values.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -124,116 +142,22 @@ export default function RestaurantStory() {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Side: Larger Gopuram Arched Frame Counter Image */}
|
{/* Right Side: Mockup Gopuram Archway thali frame */}
|
||||||
<div className="w-full lg:w-[42%] flex justify-center relative">
|
<div className="w-full lg:w-[46%] flex justify-center lg:justify-end relative z-10">
|
||||||
|
{/* Crop-extracted story thali arch image */}
|
||||||
{/* Ambient Glow */}
|
<div className="w-[340px] h-[340px] sm:w-[480px] sm:h-[480px] md:w-[500px] md:h-[500px] relative pointer-events-none select-none">
|
||||||
<div className="absolute w-[400px] h-[400px] rounded-full bg-gold/10 blur-[80px] -z-10 pointer-events-none" />
|
<Image
|
||||||
|
src="/images/story_arch.png"
|
||||||
{/* Shield frame backing shadow */}
|
alt="My Dosa Place Traditional Dining Feast"
|
||||||
<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" />
|
fill
|
||||||
|
sizes="(max-width: 1024px) 100vw, 46vw"
|
||||||
{/* Gopuram Arch Masked Image Wrapper */}
|
className="object-contain"
|
||||||
<div
|
priority
|
||||||
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>
|
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
</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>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user