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