responsive updated
This commit is contained in:
parent
7d73605a74
commit
39fd538a68
BIN
public/images/inner-banner/1.webp
Normal file
BIN
public/images/inner-banner/1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
public/images/inner-banner/2.webp
Normal file
BIN
public/images/inner-banner/2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
public/images/inner-banner/3.webp
Normal file
BIN
public/images/inner-banner/3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
public/images/inner-banner/4.webp
Normal file
BIN
public/images/inner-banner/4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
public/images/inner-banner/5.webp
Normal file
BIN
public/images/inner-banner/5.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
public/images/inner-banner/6.webp
Normal file
BIN
public/images/inner-banner/6.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
@ -79,9 +79,10 @@ export default function AboutPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SubpageLayout>
|
<SubpageLayout>
|
||||||
|
<div className="w-full overflow-x-hidden">
|
||||||
|
|
||||||
{/* ── Inner Banner ── */}
|
{/* ── Inner Banner ── */}
|
||||||
<InnerBanner pageName="About" />
|
<InnerBanner pageName="About" bgImage="/images/inner-banner/1.webp" />
|
||||||
|
|
||||||
{/* ══════════════════════════════════════════
|
{/* ══════════════════════════════════════════
|
||||||
SECTION 1 — Welcome & Features (Image match)
|
SECTION 1 — Welcome & Features (Image match)
|
||||||
@ -92,7 +93,7 @@ export default function AboutPage() {
|
|||||||
<Image src="/images/story_bg.png" alt="" fill priority className="object-cover object-left mix-blend-multiply" />
|
<Image src="/images/story_bg.png" alt="" fill priority className="object-cover object-left mix-blend-multiply" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative z-10 max-w-7xl mx-auto px-6">
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6">
|
||||||
{/* Top Row: 3 columns (Left Text, Center Arch, Right Card) */}
|
{/* Top Row: 3 columns (Left Text, Center Arch, Right Card) */}
|
||||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-10">
|
<div className="flex flex-col lg:flex-row items-center justify-between gap-10">
|
||||||
|
|
||||||
@ -153,84 +154,89 @@ export default function AboutPage() {
|
|||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
|
|
||||||
{/* CENTER & RIGHT ARCH/CARD COMPOSITION */}
|
{/* CENTER & RIGHT ARCH/CARD COMPOSITION */}
|
||||||
<div className="flex-1 flex justify-center lg:justify-end items-center mt-12 lg:mt-0 lg:pl-10">
|
<div className="flex-1 flex justify-center items-center mt-12 lg:mt-0 w-full">
|
||||||
|
|
||||||
<div className="relative"> {/* The Arch Group Container */}
|
{/* px buffer on mobile/tablet so absolute badges don't overflow viewport */}
|
||||||
{/* Outer arch line decoration */}
|
<div className="relative px-[70px] lg:px-0">
|
||||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[340px] h-[500px] sm:w-[420px] sm:h-[570px] rounded-t-full border-t border-l border-r border-[#bc9e65]/40 z-0 pointer-events-none" />
|
<div className="relative overflow-visible"> {/* The Arch Group Container */}
|
||||||
|
|
||||||
{/* The Arch Image container */}
|
{/* Outer arch line decoration */}
|
||||||
<AnimatedSection variant="scaleUp" delay={0.2}>
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[280px] h-[420px] sm:w-[340px] sm:h-[480px] lg:w-[420px] lg:h-[570px] rounded-t-full border-t border-l border-r border-[#bc9e65]/40 z-0 pointer-events-none" />
|
||||||
<div className="relative w-[320px] h-[480px] sm:w-[400px] sm:h-[550px] rounded-t-full overflow-hidden border-[6px] border-[#fdfaf4] shadow-[0_0_40px_rgba(0,0,0,0.1)] z-10">
|
|
||||||
<div className="absolute inset-0 rounded-t-full border border-[#bc9e65]/30 z-20 pointer-events-none" />
|
|
||||||
<Image
|
|
||||||
src="/images/story_arch.png"
|
|
||||||
alt="My Dosa Place"
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</AnimatedSection>
|
|
||||||
|
|
||||||
{/* Made With Love Badge (Overlapping left of arch) */}
|
{/* The Arch Image container */}
|
||||||
<AnimatedSection variant="fadeRight" delay={0.4} className="absolute top-1/2 -translate-y-1/2 -left-8 lg:-left-12 z-20">
|
<AnimatedSection variant="scaleUp" delay={0.2}>
|
||||||
<div className="bg-[#0a4a2b] border border-[#bc9e65] rounded-2xl p-4 flex flex-col items-center justify-center w-[110px] h-[160px] shadow-xl relative">
|
<div className="relative w-[260px] h-[380px] sm:w-[320px] sm:h-[460px] lg:w-[400px] lg:h-[550px] rounded-t-full overflow-hidden border-[6px] border-[#fdfaf4] shadow-[0_0_40px_rgba(0,0,0,0.1)] z-10">
|
||||||
<div className="absolute inset-1.5 border border-[#bc9e65]/40 rounded-xl pointer-events-none" />
|
<div className="absolute inset-0 rounded-t-full border border-[#bc9e65]/30 z-20 pointer-events-none" />
|
||||||
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
|
<Image
|
||||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
src="/images/story_arch.png"
|
||||||
</svg>
|
alt="My Dosa Place"
|
||||||
<span className="font-sans text-[11px] tracking-widest text-white uppercase text-center font-bold leading-tight mb-3">
|
fill
|
||||||
MADE<br />WITH<br />LOVE
|
className="object-cover"
|
||||||
</span>
|
/>
|
||||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
</div>
|
||||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
</AnimatedSection>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</AnimatedSection>
|
|
||||||
|
|
||||||
{/* Right Card (Overlapping right of arch) */}
|
{/* Made With Love Badge (Overlapping left of arch) */}
|
||||||
<AnimatedSection variant="fadeLeft" delay={0.5} className="absolute top-10 -right-4 lg:-right-24 z-20 hidden md:block">
|
<AnimatedSection variant="fadeRight" delay={0.4} className="absolute top-1/2 -translate-y-1/2 -left-6 sm:-left-16 lg:-left-16 z-20">
|
||||||
<div className="bg-[#fdfaf4] border border-[#bc9e65] rounded-3xl p-8 w-[260px] shadow-2xl relative">
|
<div className="bg-[#0a4a2b] border border-[#bc9e65] rounded-2xl p-4 flex flex-col items-center justify-center w-[110px] h-[160px] shadow-xl relative">
|
||||||
<div className="absolute inset-1.5 border border-[#bc9e65]/30 rounded-[20px] pointer-events-none" />
|
<div className="absolute inset-1.5 border border-[#bc9e65]/40 rounded-xl pointer-events-none" />
|
||||||
|
<svg className="w-6 h-6 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||||
|
</svg>
|
||||||
|
<span className="font-sans text-[11px] tracking-widest text-white uppercase text-center font-bold leading-tight mb-3">
|
||||||
|
MADE<br />WITH<br />LOVE
|
||||||
|
</span>
|
||||||
|
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</AnimatedSection>
|
||||||
|
|
||||||
<div className="relative z-10 flex flex-col items-center text-center pt-2">
|
{/* Right Card — only at lg+ where two-column layout provides horizontal space */}
|
||||||
<p className="font-serif italic text-[#bc9e65] text-lg mb-1">A Taste of</p>
|
<AnimatedSection variant="fadeLeft" delay={0.5} className="absolute top-10 -right-35 lg:-right-20 z-20 hidden md:block">
|
||||||
<h4 className="font-serif text-[#0a4a2b] text-lg font-bold leading-snug tracking-wide uppercase mb-3">
|
<div className="bg-[#fdfaf4] border border-[#bc9e65] rounded-3xl p-8 w-[260px] shadow-2xl relative">
|
||||||
TRADITION<br />MADE WITH<br />PASSION
|
<div className="absolute inset-1.5 border border-[#bc9e65]/30 rounded-[20px] pointer-events-none" />
|
||||||
</h4>
|
|
||||||
|
|
||||||
{/* Divider */}
|
<div className="relative z-10 flex flex-col items-center text-center pt-2">
|
||||||
<div className="flex items-center gap-2 w-full justify-center mb-6">
|
<p className="font-serif italic text-[#bc9e65] text-lg mb-1">A Taste of</p>
|
||||||
<div className="h-[1px] w-8 bg-[#bc9e65]" />
|
<h4 className="font-serif text-[#0a4a2b] text-lg font-bold leading-snug tracking-wide uppercase mb-3">
|
||||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
TRADITION<br />MADE WITH<br />PASSION
|
||||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
</h4>
|
||||||
</svg>
|
|
||||||
<div className="h-[1px] w-8 bg-[#bc9e65]" />
|
{/* Divider */}
|
||||||
|
<div className="flex items-center gap-2 w-full justify-center mb-6">
|
||||||
|
<div className="h-[1px] w-8 bg-[#bc9e65]" />
|
||||||
|
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||||
|
</svg>
|
||||||
|
<div className="h-[1px] w-8 bg-[#bc9e65]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="w-full flex flex-col gap-4 text-left">
|
||||||
|
<li className="flex items-center gap-4">
|
||||||
|
<svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z M12 12v6 m-4-3h8" /></svg>
|
||||||
|
<span className="font-sans text-sm text-[#0a4a2b] font-medium">Every meal.</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-4">
|
||||||
|
<svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
||||||
|
<span className="font-sans text-sm text-[#0a4a2b] font-medium">Every guest.</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-4">
|
||||||
|
<svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
|
||||||
|
<span className="font-sans text-sm text-[#0a4a2b] font-medium">Every time.</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul className="w-full flex flex-col gap-4 text-left">
|
{/* Leaves bg bottom right */}
|
||||||
<li className="flex items-center gap-4">
|
<div className="absolute bottom-0 right-0 w-24 h-24 opacity-30 pointer-events-none rounded-br-3xl overflow-hidden">
|
||||||
<svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 2v2m-6 4h12l-1 10H7L6 8z M12 12v6 m-4-3h8" /></svg>
|
<Image src="/images/menu_leaf_clean.png" alt="" fill className="object-cover" />
|
||||||
<span className="font-sans text-sm text-[#0a4a2b] font-medium">Every meal.</span>
|
</div>
|
||||||
</li>
|
|
||||||
<li className="flex items-center gap-4">
|
|
||||||
<svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
|
||||||
<span className="font-sans text-sm text-[#0a4a2b] font-medium">Every guest.</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-center gap-4">
|
|
||||||
<svg className="w-5 h-5 text-[#bc9e65]" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
|
|
||||||
<span className="font-sans text-sm text-[#0a4a2b] font-medium">Every time.</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
</AnimatedSection>
|
||||||
|
|
||||||
{/* Leaves bg bottom right */}
|
</div>{/* end arch group */}
|
||||||
<div className="absolute bottom-0 right-0 w-24 h-24 opacity-30 pointer-events-none rounded-br-3xl overflow-hidden">
|
</div>{/* end padding wrapper */}
|
||||||
<Image src="/images/menu_leaf_clean.png" alt="" fill className="object-cover" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AnimatedSection>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -335,9 +341,9 @@ export default function AboutPage() {
|
|||||||
Rooted in tradition. Crafted with passion.<br />Served with love.
|
Rooted in tradition. Crafted with passion.<br />Served with love.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex justify-center mt-6 mb-16">
|
<div className="flex justify-center mt-6 mb-16">
|
||||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
{/* <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||||
</svg>
|
</svg> */}
|
||||||
</div>
|
</div>
|
||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
|
|
||||||
@ -366,14 +372,14 @@ export default function AboutPage() {
|
|||||||
{v.icon}
|
{v.icon}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 className="font-serif text-white text-xl sm:text-2xl uppercase tracking-widest mb-4">
|
<h3 className="font-serif text-white text-xl uppercase tracking-widest mb-4">
|
||||||
{v.label}
|
{v.label}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex justify-center mb-5">
|
{/* <div className="flex justify-center mb-5">
|
||||||
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
<svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
|
||||||
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
<path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div> */}
|
||||||
<p className="font-sans text-stone-200 text-sm leading-relaxed px-2">
|
<p className="font-sans text-stone-200 text-sm leading-relaxed px-2">
|
||||||
{v.desc}
|
{v.desc}
|
||||||
</p>
|
</p>
|
||||||
@ -481,7 +487,7 @@ export default function AboutPage() {
|
|||||||
<Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
|
<Image src="/images/category_bg.jpg" alt="" fill className="object-cover object-center" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative max-w-[1400px] mx-auto min-h-[850px] flex flex-col lg:flex-row shadow-2xl rounded-xl lg:rounded-3xl overflow-hidden mb-12">
|
<div className="relative max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 min-h-[850px] flex flex-col lg:flex-row shadow-2xl rounded-xl lg:rounded-3xl overflow-hidden mb-12">
|
||||||
|
|
||||||
{/* ── LEFT: Ornate dark green panel ── */}
|
{/* ── LEFT: Ornate dark green panel ── */}
|
||||||
<div className="relative flex-[1.2] lg:flex-none lg:w-[60%] bg-[#062013] z-20 p-6 sm:p-10 lg:p-16 flex flex-col justify-center">
|
<div className="relative flex-[1.2] lg:flex-none lg:w-[60%] bg-[#062013] z-20 p-6 sm:p-10 lg:p-16 flex flex-col justify-center">
|
||||||
@ -654,7 +660,7 @@ export default function AboutPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ── BOTTOM FEATURE BAR ── */}
|
{/* ── BOTTOM FEATURE BAR ── */}
|
||||||
<div className="relative max-w-[1400px] mx-auto w-[78%] bg-[#062013] border border-[#bc9e65] rounded-full px-8 py-6 shadow-2xl z-30 mb-8 mt-4">
|
<div className="relative max-w-[1400px] mx-auto w-[90%] sm:w-[85%] lg:w-[78%] bg-[#062013] border border-[#bc9e65] rounded-2xl lg:rounded-full px-6 sm:px-8 py-6 shadow-2xl z-30 mb-8 mt-4">
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 relative z-10">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 relative z-10">
|
||||||
{/* Feature 1 */}
|
{/* Feature 1 */}
|
||||||
<div className="flex items-center gap-4 lg:border-r border-[#bc9e65]/30">
|
<div className="flex items-center gap-4 lg:border-r border-[#bc9e65]/30">
|
||||||
@ -760,11 +766,11 @@ export default function AboutPage() {
|
|||||||
Come Dine With Us
|
Come Dine With Us
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2 className="font-serif text-2xl sm:text-4xl lg:text-6xl text-[#1a3a25] tracking-wide leading-tight mb-2">
|
<h2 className="font-serif text-xl sm:text-3xl lg:text-5xl text-[#1a3a25] tracking-wide leading-tight mb-2">
|
||||||
EXPERIENCE THE TASTE OF
|
EXPERIENCE THE TASTE OF
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<h2 className="font-serif text-5xl sm:text-7xl lg:text-[100px] text-transparent bg-clip-text bg-gradient-to-b from-[#d9b876] to-[#8a6c3a] tracking-widest leading-none mb-6 drop-shadow-sm font-bold" style={{ textShadow: "0px 4px 15px rgba(188,158,101,0.3)" }}>
|
<h2 className="font-serif text-4xl sm:text-6xl lg:text-[90px] text-transparent bg-clip-text bg-gradient-to-b from-[#d9b876] to-[#8a6c3a] tracking-widest leading-none mb-6 drop-shadow-sm font-bold" style={{ textShadow: "0px 4px 15px rgba(188,158,101,0.3)" }}>
|
||||||
TRADITION
|
TRADITION
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
@ -853,6 +859,7 @@ export default function AboutPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>{/* end overflow-x-hidden wrapper */}
|
||||||
</SubpageLayout>
|
</SubpageLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -28,7 +28,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
|
|||||||
return (
|
return (
|
||||||
<SubpageLayout>
|
<SubpageLayout>
|
||||||
{/* Inner Banner */}
|
{/* Inner Banner */}
|
||||||
<InnerBanner pageName="Blog Details" />
|
<InnerBanner pageName="Blog Details" bgImage="/images/inner-banner/4.webp" />
|
||||||
|
|
||||||
<div className="w-full bg-[#fbfaf4] relative z-10">
|
<div className="w-full bg-[#fbfaf4] relative z-10">
|
||||||
<div className="max-w-7xl mx-auto px-6 py-12 lg:py-20 flex flex-col lg:flex-row gap-12">
|
<div className="max-w-7xl mx-auto px-6 py-12 lg:py-20 flex flex-col lg:flex-row gap-12">
|
||||||
|
|||||||
@ -27,7 +27,7 @@ const CornerOrnaments = () => (
|
|||||||
export default function BlogPage() {
|
export default function BlogPage() {
|
||||||
return (
|
return (
|
||||||
<SubpageLayout>
|
<SubpageLayout>
|
||||||
<InnerBanner pageName="Blog" />
|
<InnerBanner pageName="Blog" bgImage="/images/inner-banner/3.webp" />
|
||||||
|
|
||||||
<div className="w-full bg-[#f5efe0] relative z-10">
|
<div className="w-full bg-[#f5efe0] relative z-10">
|
||||||
{/* Subtle background texture */}
|
{/* Subtle background texture */}
|
||||||
|
|||||||
@ -43,7 +43,7 @@ export default function ContactPage() {
|
|||||||
<SubpageLayout>
|
<SubpageLayout>
|
||||||
|
|
||||||
{/* ── Inner Banner ── */}
|
{/* ── Inner Banner ── */}
|
||||||
<InnerBanner pageName="Contact" />
|
<InnerBanner pageName="Contact" bgImage="/images/inner-banner/5.webp" />
|
||||||
|
|
||||||
{/* ── TOP SECTION: Sandstone bg — Info + Form ── */}
|
{/* ── TOP SECTION: Sandstone bg — Info + Form ── */}
|
||||||
<div className="relative w-full bg-[#fdfaf4] overflow-hidden">
|
<div className="relative w-full bg-[#fdfaf4] overflow-hidden">
|
||||||
|
|||||||
@ -16,6 +16,9 @@
|
|||||||
|
|
||||||
--font-serif: var(--font-cinzel);
|
--font-serif: var(--font-cinzel);
|
||||||
--font-sans: var(--font-montserrat);
|
--font-sans: var(--font-montserrat);
|
||||||
|
|
||||||
|
/* Custom breakpoint: show desktop nav above 992px */
|
||||||
|
--breakpoint-desk: 62rem; /* 992px */
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|||||||
@ -10,7 +10,7 @@ export default function MenuPage() {
|
|||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
|
|
||||||
{/* Inner Banner */}
|
{/* Inner Banner */}
|
||||||
<InnerBanner pageName="Menu" />
|
<InnerBanner pageName="Menu" bgImage="/images/inner-banner/2.webp" />
|
||||||
|
|
||||||
<MenuPageContent />
|
<MenuPageContent />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -30,7 +30,7 @@ export default function ReservationPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<SubpageLayout>
|
<SubpageLayout>
|
||||||
<InnerBanner pageName="Reservation" />
|
<InnerBanner pageName="Reservation" bgImage="/images/inner-banner/6.webp" />
|
||||||
<div className="relative w-full bg-[#fdfaf4] overflow-hidden flex flex-col justify-center py-24">
|
<div className="relative w-full bg-[#fdfaf4] overflow-hidden flex flex-col justify-center py-24">
|
||||||
|
|
||||||
{/* Full Page Background with Pots and Temple */}
|
{/* Full Page Background with Pots and Temple */}
|
||||||
|
|||||||
@ -246,7 +246,7 @@ export default function ChefShowcase() {
|
|||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.7, delay: 0.1, ease: "easeOut" }}
|
transition={{ duration: 0.7, delay: 0.1, ease: "easeOut" }}
|
||||||
className="bg-black/25 backdrop-blur-sm border border-[#d8c396]/30 rounded-2xl p-6 sm:p-8 mt-4 shadow-2xl relative z-10 divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/20 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 select-text"
|
className="bg-black/25 backdrop-blur-sm border border-[#d8c396]/30 rounded-2xl p-6 sm:p-8 mt-4 shadow-2xl relative z-10 divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/20 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 select-text"
|
||||||
>
|
>
|
||||||
|
|
||||||
{/* Feature 1: Authentic Recipes */}
|
{/* Feature 1: Authentic Recipes */}
|
||||||
|
|||||||
@ -226,7 +226,7 @@ export default function CulinaryCategories() {
|
|||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.6 }}
|
||||||
className="col-span-1 md:col-span-2 lg:col-span-2 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-6 pt-8 rounded-none shadow-2xl flex flex-col sm:flex-row items-center gap-6 group overflow-visible min-h-[220px]"
|
className="col-span-1 md:col-span-2 lg:col-span-2 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-6 pt-8 rounded-none shadow-2xl flex flex-col sm:flex-row lg:flex-col xl:flex-row items-center gap-6 group overflow-visible min-h-[220px]"
|
||||||
>
|
>
|
||||||
{/* Inner gold design outline and corner leaves */}
|
{/* Inner gold design outline and corner leaves */}
|
||||||
<div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none" />
|
<div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none" />
|
||||||
@ -243,7 +243,7 @@ export default function CulinaryCategories() {
|
|||||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,_rgba(188,158,101,0.08)_0%,_transparent_75%)] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none z-0" />
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,_rgba(188,158,101,0.08)_0%,_transparent_75%)] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none z-0" />
|
||||||
|
|
||||||
{/* Left: circular thali image with slow rotating mandala border */}
|
{/* Left: circular thali image with slow rotating mandala border */}
|
||||||
<div className="relative w-36 h-36 sm:w-40 sm:h-40 flex-shrink-0 z-10">
|
<div className="relative w-36 h-36 sm:w-40 sm:h-40 lg:w-36 lg:h-36 xl:w-40 xl:h-40 flex-shrink-0 z-10">
|
||||||
{/* Spin ring behind thali */}
|
{/* Spin ring behind thali */}
|
||||||
<div className="absolute inset-[-6px] border border-dashed border-[#bc9e65]/25 rounded-full animate-[spin_60s_linear_infinite]" />
|
<div className="absolute inset-[-6px] border border-dashed border-[#bc9e65]/25 rounded-full animate-[spin_60s_linear_infinite]" />
|
||||||
|
|
||||||
@ -261,7 +261,7 @@ export default function CulinaryCategories() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right: details */}
|
{/* Right: details */}
|
||||||
<div className="flex flex-col text-center sm:text-left items-center sm:items-start flex-1 select-text relative z-10">
|
<div className="flex flex-col text-center sm:text-left lg:text-center xl:text-left items-center sm:items-start lg:items-center xl:items-start flex-1 select-text relative z-10 mt-4 sm:mt-0 lg:mt-4 xl:mt-0">
|
||||||
<span className="font-sans text-[9px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mb-1">
|
<span className="font-sans text-[9px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mb-1">
|
||||||
{cat.subtitle}
|
{cat.subtitle}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -28,7 +28,7 @@ export default function EventsAccordion() {
|
|||||||
title: "Royal Feasts",
|
title: "Royal Feasts",
|
||||||
tamilTitle: "கல்யாண விருந்து",
|
tamilTitle: "கல்யாண விருந்து",
|
||||||
subtitle: "WEDDING BANQUETS",
|
subtitle: "WEDDING BANQUETS",
|
||||||
desc: "Our South Indian catering service in Waterloo brings the same authentic flavours to your celebrations—whether it's a wedding, family gathering, or corporate event. Enjoy traditional multi-course menus with the option of classic banana leaf-style presentation for a truly authentic South Indian dining experience. ",
|
desc: "Our South Indian catering service in Waterloo brings authentic flavours to weddings, family gatherings, and corporate events. Enjoy traditional multi-course menus with optional banana leaf-style presentation for a true South Indian dining experience.",
|
||||||
icon: RoyalFeastsIcon,
|
icon: RoyalFeastsIcon,
|
||||||
bgImage: "/images/home/royal/cards/royal-feast.webp",
|
bgImage: "/images/home/royal/cards/royal-feast.webp",
|
||||||
},
|
},
|
||||||
@ -44,7 +44,7 @@ export default function EventsAccordion() {
|
|||||||
title: "Private Gatherings",
|
title: "Private Gatherings",
|
||||||
tamilTitle: "சபை கூட்டங்கள்",
|
tamilTitle: "சபை கூட்டங்கள்",
|
||||||
subtitle: "CORPORATE COLLABORATIONS",
|
subtitle: "CORPORATE COLLABORATIONS",
|
||||||
desc: "Looking for a distinctive corporate event venue in Waterloo? Host partners and executives in our private boardroom venue, crafted from vintage rosewood for a refined, professional setting. Our executive dining venue is designed for high-level meetings, client presentations, and business discussions — paired seamlessly with gourmet South Indian catering. From strategic sessions to celebratory close-outs, our private meeting space with catering brings substance and style together.",
|
desc: "Looking for a corporate event venue in Waterloo? Host meetings, presentations, and executive dining in our private rosewood boardroom, complemented by gourmet South Indian catering for a refined and professional experience.",
|
||||||
icon: PrivateGatheringsIcon,
|
icon: PrivateGatheringsIcon,
|
||||||
bgImage: "/images/home/royal/cards/private-gatherings.webp",
|
bgImage: "/images/home/royal/cards/private-gatherings.webp",
|
||||||
},
|
},
|
||||||
@ -177,13 +177,12 @@ export default function EventsAccordion() {
|
|||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Horizontal Accordion Track */}
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }}
|
transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }}
|
||||||
className="flex flex-col lg:flex-row gap-5 h-[620px] lg:h-[460px] w-full items-stretch relative z-20"
|
className="flex flex-col lg:flex-row gap-5 h-[680px] lg:h-[460px] w-full items-stretch relative z-20"
|
||||||
>
|
>
|
||||||
{events.map((event, idx) => {
|
{events.map((event, idx) => {
|
||||||
const isActive = idx === activeIdx;
|
const isActive = idx === activeIdx;
|
||||||
@ -191,8 +190,8 @@ export default function EventsAccordion() {
|
|||||||
|
|
||||||
// Compute dynamic width flex basis classes
|
// Compute dynamic width flex basis classes
|
||||||
const flexClass = isActive
|
const flexClass = isActive
|
||||||
? "lg:flex-[3.5] bg-opacity-100"
|
? "flex-[4] lg:flex-[3.5] bg-opacity-100"
|
||||||
: "lg:flex-[0.8] opacity-80 lg:opacity-95 hover:opacity-100";
|
: "flex-[0.8] lg:flex-[0.8] opacity-80 lg:opacity-95 hover:opacity-100";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -216,38 +215,38 @@ export default function EventsAccordion() {
|
|||||||
{/* Thin inner Gold border outline frame */}
|
{/* Thin inner Gold border outline frame */}
|
||||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
|
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
|
||||||
|
|
||||||
{/* Left side green accent strip (only in hover/active) */}
|
{/* Accent strip (horizontal on mobile, vertical on desktop) */}
|
||||||
<div
|
<div
|
||||||
className="absolute left-0 top-0 bottom-0 w-[4px] bg-[#0a4a2b] transition-opacity duration-500"
|
className="absolute left-0 top-0 lg:bottom-0 w-full h-[4px] lg:w-[4px] lg:h-full bg-[#0a4a2b] transition-opacity duration-500"
|
||||||
style={{ opacity: isActive ? 1 : 0 }}
|
style={{ opacity: isActive ? 1 : 0 }}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* ==================== CLOSED VIEW CARD ==================== */}
|
{/* ==================== CLOSED VIEW CARD ==================== */}
|
||||||
{!isActive && (
|
{!isActive && (
|
||||||
<div className="flex flex-col justify-between items-center h-full w-full py-8 pointer-events-none select-none relative z-10">
|
<div className="flex flex-row lg:flex-col justify-between items-center h-full w-full px-3 sm:px-6 py-4 lg:py-8 lg:px-0 pointer-events-none select-none relative z-10 gap-2">
|
||||||
|
|
||||||
{/* Circle icon container at top */}
|
{/* Circle icon container */}
|
||||||
<div className="w-11 h-11 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/50 flex items-center justify-center shadow-sm">
|
<div className="w-10 h-10 sm:w-11 sm:h-11 flex-shrink-0 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/50 flex items-center justify-center shadow-sm">
|
||||||
<CategoryIcon />
|
<CategoryIcon />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Vertical upward title text */}
|
{/* Title text */}
|
||||||
<div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 origin-center -rotate-90 whitespace-nowrap">
|
<div className="relative lg:absolute lg:left-1/2 lg:-translate-x-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:origin-center lg:-rotate-90 whitespace-nowrap text-center overflow-hidden">
|
||||||
<h3 className="font-serif text-sm sm:text-base font-bold tracking-[0.3em] uppercase text-[#0a4a2b]">
|
<h3 className="font-serif text-xs sm:text-sm lg:text-base font-bold tracking-[0.1em] sm:tracking-[0.2em] lg:tracking-[0.3em] uppercase text-[#0a4a2b] truncate">
|
||||||
{event.title}
|
{event.title}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Lotus watermark at bottom */}
|
{/* Lotus watermark at bottom (Desktop only) */}
|
||||||
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-8 h-8 text-[#bc9e65] opacity-[0.06] pointer-events-none">
|
<div className="hidden lg:block absolute bottom-16 left-1/2 -translate-x-1/2 w-8 h-8 text-[#bc9e65] opacity-[0.06] pointer-events-none">
|
||||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||||
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
<path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Circle number badge at bottom */}
|
{/* Circle number badge */}
|
||||||
<div className="w-7 h-7 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/40 flex items-center justify-center shadow-sm">
|
<div className="w-6 h-6 sm:w-7 sm:h-7 flex-shrink-0 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/40 flex items-center justify-center shadow-sm">
|
||||||
<span className="font-serif text-base font-bold text-[#bc9e65]">
|
<span className="font-serif text-xs sm:text-base font-bold text-[#bc9e65]">
|
||||||
0{idx + 1}
|
0{idx + 1}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -257,7 +256,7 @@ export default function EventsAccordion() {
|
|||||||
|
|
||||||
{/* ==================== OPENED VIEW CARD ==================== */}
|
{/* ==================== OPENED VIEW CARD ==================== */}
|
||||||
{isActive && (
|
{isActive && (
|
||||||
<div className="p-8 flex flex-col justify-between h-full select-text text-left relative z-10 w-full">
|
<div className="p-6 lg:p-8 flex flex-col justify-between h-full select-text text-left relative z-10 w-full overflow-hidden">
|
||||||
|
|
||||||
{/* Top Notch Shield Overlay */}
|
{/* Top Notch Shield Overlay */}
|
||||||
<div className="absolute -top-[1px] left-1/2 -translate-x-1/2 w-12 h-6 bg-[#0a4a2b] border-b border-r border-l border-[#bc9e65]/40 rounded-b-xl flex items-center justify-center z-20">
|
<div className="absolute -top-[1px] left-1/2 -translate-x-1/2 w-12 h-6 bg-[#0a4a2b] border-b border-r border-l border-[#bc9e65]/40 rounded-b-xl flex items-center justify-center z-20">
|
||||||
@ -267,24 +266,24 @@ export default function EventsAccordion() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Details content section */}
|
{/* Details content section */}
|
||||||
<div className="flex flex-col items-start gap-4">
|
<div className="flex flex-col items-start gap-3 lg:gap-4 h-full justify-center overflow-y-auto custom-scrollbar pr-2">
|
||||||
|
|
||||||
{/* Double gold-rim circle icon container */}
|
{/* Double gold-rim circle icon container */}
|
||||||
<div className="w-14 h-14 rounded-full border border-[#bc9e65]/45 flex items-center justify-center bg-transparent shadow-sm">
|
<div className="w-12 h-12 lg:w-14 lg:h-14 rounded-full border border-[#bc9e65]/45 flex flex-shrink-0 items-center justify-center bg-transparent shadow-sm mb-1 lg:mb-0">
|
||||||
<div className="w-12 h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center">
|
<div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center">
|
||||||
<CategoryIcon />
|
<CategoryIcon />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Header subtitles */}
|
{/* Header subtitles */}
|
||||||
<div>
|
<div>
|
||||||
<span className="font-sans text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase block mb-1 pointer-events-none select-none">
|
<span className="font-sans text-xs lg:text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase block mb-1 pointer-events-none select-none">
|
||||||
{event.subtitle}
|
{event.subtitle}
|
||||||
</span>
|
</span>
|
||||||
<h3 className="font-serif text-2xl sm:text-3xl font-bold text-[#0a4a2b] uppercase tracking-wider mb-1">
|
<h3 className="font-serif text-xl sm:text-2xl lg:text-3xl font-bold text-[#0a4a2b] uppercase tracking-wider mb-1">
|
||||||
{event.title}
|
{event.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="font-serif text-sm text-[#bc9e65] font-medium tracking-wide mb-3 pointer-events-none select-none">
|
<p className="font-serif text-xs lg:text-sm text-[#bc9e65] font-medium tracking-wide mb-2 lg:mb-3 pointer-events-none select-none">
|
||||||
— {event.tamilTitle} —
|
— {event.tamilTitle} —
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -294,10 +293,10 @@ export default function EventsAccordion() {
|
|||||||
{event.desc}
|
{event.desc}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* Notched Enquire CTA Button with modern CSS clip-path notches */}
|
{/* Notched Enquire CTA Button */}
|
||||||
<div className="mt-4 select-none">
|
<div className="mt-2 lg:mt-4 select-none">
|
||||||
<button
|
<button
|
||||||
className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-6 py-2.5 uppercase font-sans font-bold text-base tracking-wider relative hover:bg-[#0c5030] transition-colors duration-300 shadow-md"
|
className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-5 py-2 lg:px-6 lg:py-2.5 uppercase font-sans font-bold text-sm lg:text-base tracking-wider relative hover:bg-[#0c5030] transition-colors duration-300 shadow-md"
|
||||||
style={{
|
style={{
|
||||||
clipPath: "polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px)"
|
clipPath: "polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px)"
|
||||||
}}
|
}}
|
||||||
@ -309,7 +308,7 @@ export default function EventsAccordion() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bottom Right Card Number Indicator */}
|
{/* Bottom Right Card Number Indicator */}
|
||||||
<div className="absolute bottom-6 right-8 font-serif text-3xl font-bold text-[#bc9e65]/35 pointer-events-none select-none">
|
<div className="absolute bottom-4 right-6 lg:bottom-6 lg:right-8 font-serif text-2xl lg:text-3xl font-bold text-[#bc9e65]/35 pointer-events-none select-none">
|
||||||
0{idx + 1}
|
0{idx + 1}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,88 +1,159 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
import { Menu, X } from "lucide-react";
|
import { Menu, X } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
export default function Header({ visible }: { visible: boolean }) {
|
export default function Header({ visible }: { visible: boolean }) {
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
// Close mobile menu when route changes
|
// Close mobile menu when route changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setIsMobileMenuOpen(false);
|
setIsMobileMenuOpen(false);
|
||||||
}, [pathname]);
|
}, [pathname]);
|
||||||
|
|
||||||
return (
|
// Prevent body scroll when mobile menu is open
|
||||||
<header
|
useEffect(() => {
|
||||||
className={`fixed top-0 left-0 w-full h-22 bg-[#06120c]/90 border-b border-[#bc9e65]/20 backdrop-blur-md transition-transform duration-500 ease-in-out ${
|
if (isMobileMenuOpen) {
|
||||||
visible ? "translate-y-0" : "-translate-y-full"
|
document.body.style.overflow = "hidden";
|
||||||
} ${isMobileMenuOpen ? "z-[60]" : "z-40"}`}
|
} else {
|
||||||
>
|
document.body.style.overflow = "";
|
||||||
<div className="max-w-7xl mx-auto h-full px-6 flex items-center justify-between">
|
}
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = "";
|
||||||
|
};
|
||||||
|
}, [isMobileMenuOpen]);
|
||||||
|
|
||||||
{/* Left Side: Brand Logo */}
|
const mobileMenu = (
|
||||||
<Link href="/" className="clickable flex items-center gap-2.5 select-none relative z-[70]">
|
<div
|
||||||
<Image
|
className={`fixed inset-0 z-[9999] flex flex-col items-center justify-center transition-all duration-300 desk:hidden ${
|
||||||
src="/images/logo.png"
|
isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
|
||||||
alt="My Dosa Place"
|
}`}
|
||||||
width={160}
|
style={{ backgroundColor: "#06120c" }}
|
||||||
height={60}
|
>
|
||||||
className="h-10 sm:h-12 w-auto pointer-events-none"
|
{/* Close button */}
|
||||||
priority
|
<button
|
||||||
/>
|
className="absolute top-12 right-6 p-2 text-[#bc9e65] hover:text-white transition-colors"
|
||||||
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
|
aria-label="Close Menu"
|
||||||
|
>
|
||||||
|
<X size={32} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Logo inside overlay */}
|
||||||
|
<Link href="/" className="mb-10 select-none" onClick={() => setIsMobileMenuOpen(false)}>
|
||||||
|
<Image
|
||||||
|
src="/images/logo.png"
|
||||||
|
alt="My Dosa Place"
|
||||||
|
width={160}
|
||||||
|
height={60}
|
||||||
|
className="h-14 w-auto pointer-events-none"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<nav className="flex flex-col items-center gap-8 text-center">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/about"
|
||||||
|
className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
|
||||||
|
>
|
||||||
|
About
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/menu"
|
||||||
|
className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Menu
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/blog"
|
||||||
|
className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Blog
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/contact"
|
||||||
|
className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Contact
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Center: Navigation Links (Desktop) */}
|
<Link
|
||||||
<nav className="hidden lg:flex items-center gap-8">
|
href="/reservation"
|
||||||
<Link href="/" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Home</Link>
|
className="mt-8 px-8 py-3 border border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#06120c] bg-[#bc9e65] transition-all duration-300 shadow-md hover:bg-[#d8c396]"
|
||||||
<Link href="/about" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">About</Link>
|
>
|
||||||
<Link href="/menu" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Menu</Link>
|
RESERVE TABLE
|
||||||
<Link href="/blog" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Blog</Link>
|
</Link>
|
||||||
<Link href="/contact" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Contact</Link>
|
</nav>
|
||||||
</nav>
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
{/* Right Side: Reservation Button & Hamburger */}
|
return (
|
||||||
<div className="flex items-center gap-4 relative z-[70]">
|
<>
|
||||||
<Link
|
<header
|
||||||
href="/reservation"
|
className={`fixed top-0 left-0 w-full h-22 bg-[#06120c]/90 border-b border-[#bc9e65]/20 backdrop-blur-md transition-transform duration-500 ease-in-out z-40 ${
|
||||||
className="hidden lg:inline-block clickable px-4 sm:px-5 py-2 border border-[#bc9e65]/50 hover:border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] transition-all duration-300 shadow-md"
|
visible ? "translate-y-0" : "-translate-y-full"
|
||||||
>
|
|
||||||
RESERVE TABLE
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<button
|
|
||||||
className="lg:hidden p-2 text-[#bc9e65] hover:text-white transition-colors"
|
|
||||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
||||||
aria-label="Toggle Menu"
|
|
||||||
>
|
|
||||||
{isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile Menu Overlay */}
|
|
||||||
<div
|
|
||||||
className={`fixed inset-0 bg-[#06120c] z-[60] flex flex-col items-center justify-center transition-all duration-300 lg:hidden ${
|
|
||||||
isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<nav className="flex flex-col items-center gap-8 text-center mt-12">
|
<div className="max-w-7xl mx-auto h-full px-6 flex items-center justify-between">
|
||||||
<Link href="/" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">Home</Link>
|
|
||||||
<Link href="/about" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">About</Link>
|
{/* Left Side: Brand Logo */}
|
||||||
<Link href="/menu" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">Menu</Link>
|
<Link href="/" className="clickable flex items-center gap-2.5 select-none">
|
||||||
<Link href="/blog" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">Blog</Link>
|
<Image
|
||||||
<Link href="/contact" className="font-serif text-3xl tracking-widest uppercase text-[#e8dcb5] hover:text-[#bc9e65] transition-colors duration-300">Contact</Link>
|
src="/images/logo.png"
|
||||||
|
alt="My Dosa Place"
|
||||||
<Link
|
width={160}
|
||||||
href="/reservation"
|
height={60}
|
||||||
className="mt-8 px-8 py-3 border border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#06120c] bg-[#bc9e65] transition-all duration-300 shadow-md"
|
className="h-10 sm:h-12 w-auto pointer-events-none"
|
||||||
>
|
priority
|
||||||
RESERVE TABLE
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
</nav>
|
|
||||||
</div>
|
{/* Center: Navigation Links (Desktop — visible above 992px) */}
|
||||||
</header>
|
<nav className="hidden desk:flex items-center gap-8">
|
||||||
|
<Link href="/" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Home</Link>
|
||||||
|
<Link href="/about" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">About</Link>
|
||||||
|
<Link href="/menu" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Menu</Link>
|
||||||
|
<Link href="/blog" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Blog</Link>
|
||||||
|
<Link href="/contact" className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold">Contact</Link>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Right Side: Reservation Button & Hamburger */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Link
|
||||||
|
href="/reservation"
|
||||||
|
className="hidden desk:inline-block clickable px-4 sm:px-5 py-2 border border-[#bc9e65]/50 hover:border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] transition-all duration-300 shadow-md"
|
||||||
|
>
|
||||||
|
RESERVE TABLE
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Hamburger — hidden above 992px */}
|
||||||
|
<button
|
||||||
|
className="desk:hidden p-2 text-[#bc9e65] hover:text-white transition-colors"
|
||||||
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||||
|
aria-label="Toggle Menu"
|
||||||
|
>
|
||||||
|
{isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Mobile menu rendered in document.body via portal to avoid transform stacking context */}
|
||||||
|
{mounted && createPortal(mobileMenu, document.body)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,19 +3,20 @@ import Link from "next/link";
|
|||||||
|
|
||||||
interface InnerBannerProps {
|
interface InnerBannerProps {
|
||||||
pageName: string;
|
pageName: string;
|
||||||
|
bgImage?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function InnerBanner({ pageName }: InnerBannerProps) {
|
export default function InnerBanner({ pageName, bgImage = "/images/inner-banner.png" }: InnerBannerProps) {
|
||||||
return (
|
return (
|
||||||
<div className="relative w-full h-[320px] sm:h-[450px] flex items-center justify-center overflow-hidden">
|
<div className="relative w-full h-[320px] sm:h-[450px] flex items-center justify-center overflow-hidden">
|
||||||
{/* Background Image */}
|
{/* Background Image */}
|
||||||
<div className="absolute inset-0 z-0">
|
<div className="absolute inset-0 z-0">
|
||||||
<Image
|
<Image
|
||||||
src="/images/inner-banner.png"
|
src={bgImage}
|
||||||
alt={`${pageName} banner`}
|
alt={`${pageName} banner`}
|
||||||
fill
|
fill
|
||||||
priority
|
priority
|
||||||
className="object-cover object-[center_-300px]"
|
className="object-cover object-center"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -105,7 +105,7 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
|
|||||||
viewport={{ once: true, margin: "-50px" }}
|
viewport={{ once: true, margin: "-50px" }}
|
||||||
transition={{ duration: 0.5, delay: (index % 5) * 0.08, ease: "easeOut" }}
|
transition={{ duration: 0.5, delay: (index % 5) * 0.08, ease: "easeOut" }}
|
||||||
whileHover={{ y: -2, scale: 1.01 }}
|
whileHover={{ y: -2, scale: 1.01 }}
|
||||||
className="group relative bg-[#fdfcf9] border border-[#d8c396]/45 rounded-none p-4 pl-22 pr-4 min-h-[96px] shadow-[0_4px_12px_rgba(10,74,43,0.03)] hover:shadow-[0_8px_20px_rgba(10,74,43,0.07)] hover:border-[#bc9e65] flex flex-col justify-center select-text overflow-visible"
|
className="group relative bg-[#fdfcf9] border border-[#d8c396]/45 rounded-none p-5 sm:p-4 sm:pl-22 sm:pr-4 min-h-[96px] shadow-[0_4px_12px_rgba(10,74,43,0.03)] hover:shadow-[0_8px_20px_rgba(10,74,43,0.07)] hover:border-[#bc9e65] flex flex-col justify-center select-text overflow-visible"
|
||||||
>
|
>
|
||||||
{/* Inner decorative inset line */}
|
{/* Inner decorative inset line */}
|
||||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none" />
|
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none" />
|
||||||
@ -117,7 +117,7 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
|
|||||||
<div className="absolute -bottom-[1px] -right-[1px] w-3.5 h-3.5 bg-[#fbfaf5] rounded-tl-full border-l border-t border-[#d8c396]/45 group-hover:border-[#bc9e65] z-20 pointer-events-none transition-colors duration-300" />
|
<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 */}
|
{/* Protruding traditional brass thali container */}
|
||||||
<div className="absolute -left-6 top-1/2 -translate-y-1/2 w-20 h-20 sm:w-[86px] sm:h-[86px] rounded-full p-1.5 bg-gradient-to-br from-[#bc9e65] via-[#fcfaf2] to-[#aa771c] shadow-lg flex-shrink-0 z-10 flex items-center justify-center">
|
<div className="relative sm:absolute sm:-left-6 sm:top-1/2 sm:-translate-y-1/2 mx-auto sm:mx-0 mb-4 sm:mb-0 w-20 h-20 sm:w-[86px] sm:h-[86px] rounded-full p-1.5 bg-gradient-to-br from-[#bc9e65] via-[#fcfaf2] to-[#aa771c] shadow-lg flex-shrink-0 z-10 flex items-center justify-center">
|
||||||
{/* Inner Rim of the Plate */}
|
{/* 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">
|
<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 */}
|
{/* Green Banana Leaf Inner Liner */}
|
||||||
@ -137,9 +137,9 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Content Section */}
|
{/* Content Section */}
|
||||||
<div className="relative z-10 flex flex-col gap-1 w-full pl-2">
|
<div className="relative z-10 flex flex-col gap-2 sm:gap-1 w-full sm:pl-2 items-center sm:items-start text-center sm:text-left">
|
||||||
{/* Name and Pill Badge */}
|
{/* Name and Pill Badge */}
|
||||||
<div className="flex items-start justify-between gap-3 w-full">
|
<div className="flex flex-col sm:flex-row items-center sm:items-start sm:justify-between gap-2 sm:gap-3 w-full">
|
||||||
<h3 className="font-serif text-lg sm:text-[15.5px] font-bold text-[#0a4a2b] tracking-wider uppercase transition-colors duration-300 group-hover:text-[#bc9e65]">
|
<h3 className="font-serif text-lg sm:text-[15.5px] font-bold text-[#0a4a2b] tracking-wider uppercase transition-colors duration-300 group-hover:text-[#bc9e65]">
|
||||||
{name}
|
{name}
|
||||||
</h3>
|
</h3>
|
||||||
@ -147,7 +147,7 @@ const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { i
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-[95%]">
|
<p className="font-sans text-base sm:text-base text-stone-550 leading-relaxed max-w-full sm:max-w-[95%]">
|
||||||
{desc}
|
{desc}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -305,10 +305,10 @@ export default function MenuPreview() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 2-Column Menu Layout grid */}
|
{/* 2-Column Menu Layout grid */}
|
||||||
<div className="relative grid grid-cols-1 md:grid-cols-2 gap-x-14 gap-y-6 z-10 md:px-4">
|
<div className="relative grid grid-cols-1 lg:grid-cols-2 gap-x-14 gap-y-6 z-10 lg:px-4">
|
||||||
|
|
||||||
{/* Vertical separator in the center (Desktop only) */}
|
{/* Vertical separator in the center (Desktop only) */}
|
||||||
<div className="hidden md:flex absolute left-1/2 top-4 bottom-4 w-[1px] flex-col items-center justify-between -translate-x-1/2 pointer-events-none z-15">
|
<div className="hidden lg:flex absolute left-1/2 top-4 bottom-4 w-[1px] flex-col items-center justify-between -translate-x-1/2 pointer-events-none z-15">
|
||||||
<div className="w-[1px] flex-1 border-l border-dashed border-[#d8c396]/55" />
|
<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">
|
<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" />
|
<circle cx="10" cy="20" r="3" fill="currentColor" />
|
||||||
@ -321,14 +321,14 @@ export default function MenuPreview() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left Column Item Cards */}
|
{/* Left Column Item Cards */}
|
||||||
<div className="flex flex-col gap-6 pl-2 pr-2 md:pl-4">
|
<div className="flex flex-col gap-6 pl-2 pr-2 lg:pl-4">
|
||||||
{leftColumnItems.map((item, index) => (
|
{leftColumnItems.map((item, index) => (
|
||||||
<MenuItemCard key={index} {...item} index={index} />
|
<MenuItemCard key={index} {...item} index={index} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Column Item Cards */}
|
{/* Right Column Item Cards */}
|
||||||
<div className="flex flex-col gap-6 pl-2 pr-2 md:pr-4">
|
<div className="flex flex-col gap-6 pl-2 pr-2 lg:pr-4">
|
||||||
{rightColumnItems.map((item, index) => (
|
{rightColumnItems.map((item, index) => (
|
||||||
<MenuItemCard key={index} {...item} index={index} />
|
<MenuItemCard key={index} {...item} index={index} />
|
||||||
))}
|
))}
|
||||||
@ -347,9 +347,9 @@ export default function MenuPreview() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const BottomFeatures = () => (
|
const BottomFeatures = () => (
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 mt-16 bg-[#faf8f2]/95 border border-[#d8c396]/45 rounded-2xl p-6 shadow-lg mx-auto z-10 relative divide-y md:divide-y-0 md:divide-x divide-[#d8c396]/25 select-text">
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-0 mt-16 bg-[#faf8f2]/95 border border-[#d8c396]/45 rounded-2xl p-6 shadow-lg mx-auto z-10 relative lg:divide-x divide-[#d8c396]/25 select-text">
|
||||||
{/* Feature 1 */}
|
{/* Feature 1 */}
|
||||||
<div className="flex items-center gap-3.5 justify-center px-4 py-3 md:py-0">
|
<div className="flex items-center gap-3.5 justify-start sm:justify-center px-2 sm:px-4 py-2 lg:py-0">
|
||||||
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||||
<Image src="/images/home/menu/icons/menu-pure-veg.webp" alt="100% Vegetarian" width={24} height={24} className="object-contain" />
|
<Image src="/images/home/menu/icons/menu-pure-veg.webp" alt="100% Vegetarian" width={24} height={24} className="object-contain" />
|
||||||
</div>
|
</div>
|
||||||
@ -360,7 +360,7 @@ const BottomFeatures = () => (
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Feature 2 */}
|
{/* Feature 2 */}
|
||||||
<div className="flex items-center gap-3.5 justify-center px-4 py-3 md:py-0">
|
<div className="flex items-center gap-3.5 justify-start sm:justify-center px-2 sm:px-4 py-2 lg:py-0">
|
||||||
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||||
<Image src="/images/home/menu/icons/menu-authentic.webp" alt="Authentic Recipes" width={24} height={24} className="object-contain" />
|
<Image src="/images/home/menu/icons/menu-authentic.webp" alt="Authentic Recipes" width={24} height={24} className="object-contain" />
|
||||||
</div>
|
</div>
|
||||||
@ -371,7 +371,7 @@ const BottomFeatures = () => (
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Feature 3 */}
|
{/* Feature 3 */}
|
||||||
<div className="flex items-center gap-3.5 justify-center px-4 py-3 md:py-0">
|
<div className="flex items-center gap-3.5 justify-start sm:justify-center px-2 sm:px-4 py-2 lg:py-0">
|
||||||
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||||
<Image src="/images/home/menu/icons/menu-ingredients.webp" alt="Finest Ingredients" width={24} height={24} className="object-contain" />
|
<Image src="/images/home/menu/icons/menu-ingredients.webp" alt="Finest Ingredients" width={24} height={24} className="object-contain" />
|
||||||
</div>
|
</div>
|
||||||
@ -382,7 +382,7 @@ const BottomFeatures = () => (
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Feature 4 */}
|
{/* Feature 4 */}
|
||||||
<div className="flex items-center gap-3.5 justify-center px-4 py-3 md:py-0">
|
<div className="flex items-center gap-3.5 justify-start sm:justify-center px-2 sm:px-4 py-2 lg:py-0">
|
||||||
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
<div className="w-10 h-10 rounded-full bg-[#188754]/8 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
|
||||||
<Image src="/images/home/menu/icons/menu-love.webp" alt="Made With Love" width={24} height={24} className="object-contain" />
|
<Image src="/images/home/menu/icons/menu-love.webp" alt="Made With Love" width={24} height={24} className="object-contain" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user