design: redesign Chef Sundaram Iyer section to match premium mockup
This commit is contained in:
Alaguraj0361
parent
52a2e183fc
commit
fb669ef89c
BIN
public/images/chef_spices.png
Normal file
BIN
public/images/chef_spices.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 927 KiB |
@ -1,35 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import { Sparkles, Flame, ShieldAlert } from "lucide-react";
|
||||
|
||||
const ChefLotusOrnament = () => (
|
||||
<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">
|
||||
<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" />
|
||||
<path d="M 60,18 C 45,20 44,32 60,35" />
|
||||
<path d="M 60,18 C 75,20 76,32 60,35" />
|
||||
<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" />
|
||||
<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 StoryLotusDivider = () => (
|
||||
<div className="flex items-center gap-4 my-4 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 ChefShowcase() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [activeSpice, setActiveSpice] = useState(0);
|
||||
|
||||
// Spices database
|
||||
const spices = [
|
||||
{
|
||||
name: "Tellicherry Black Pepper",
|
||||
role: "The Emperor of Heat",
|
||||
desc: "Sourced from the high ranges of Malabar, these late-harvest vine berries provide a complex, fruity heat rather than a sharp sting, forming the backbone of our chettinad gravies.",
|
||||
},
|
||||
{
|
||||
name: "Green Cardamom",
|
||||
role: "The Floral Note",
|
||||
desc: "Harvested from the slopes of the Western Ghats. Cardamom pods are split by hand at dawn to capture the volatile essential oils that impart sweet floral notes to our Payasam.",
|
||||
},
|
||||
{
|
||||
name: "Star Anise",
|
||||
role: "The Licorice Sweetness",
|
||||
desc: "Imported since ancient times through maritime trade. It releases a warming, woody-licorice fragrance when roasted dry on iron pans for our heritage rice dishes.",
|
||||
},
|
||||
];
|
||||
|
||||
// Sparks and Embers Canvas Animation
|
||||
// Sparks and Embers Canvas Animation (Overlaying chef image)
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
@ -37,8 +39,8 @@ export default function ChefShowcase() {
|
||||
if (!ctx) return;
|
||||
|
||||
let animId: number;
|
||||
let width = (canvas.width = canvas.parentElement?.clientWidth || 500);
|
||||
let height = (canvas.height = canvas.parentElement?.clientHeight || 600);
|
||||
let width = (canvas.width = canvas.parentElement?.clientWidth || 450);
|
||||
let height = (canvas.height = canvas.parentElement?.clientHeight || 560);
|
||||
|
||||
const handleResize = () => {
|
||||
if (!canvas.parentElement) return;
|
||||
@ -58,23 +60,22 @@ export default function ChefShowcase() {
|
||||
color: string;
|
||||
|
||||
constructor() {
|
||||
// start near the bottom-center of the image (simulating cooking pan)
|
||||
this.x = width * 0.5 + (Math.random() - 0.5) * 150;
|
||||
this.y = height * 0.75 + (Math.random() - 0.5) * 50;
|
||||
this.vx = (Math.random() - 0.5) * 1.5;
|
||||
this.vy = -Math.random() * 2.5 - 1.0;
|
||||
this.size = Math.random() * 2.5 + 1.0;
|
||||
this.maxLife = Math.random() * 80 + 40;
|
||||
// Start near the bottom-center of the cooking thali image
|
||||
this.x = width * 0.5 + (Math.random() - 0.5) * 160;
|
||||
this.y = height * 0.78 + (Math.random() - 0.5) * 40;
|
||||
this.vx = (Math.random() - 0.5) * 1.6;
|
||||
this.vy = -Math.random() * 2.8 - 1.2;
|
||||
this.size = Math.random() * 2.2 + 1.2;
|
||||
this.maxLife = Math.random() * 90 + 50;
|
||||
this.life = 0;
|
||||
this.color = Math.random() > 0.4 ? "243, 229, 171" : "230, 126, 34"; // Gold or Orange sparks
|
||||
this.color = Math.random() > 0.4 ? "244, 180, 26" : "230, 92, 23"; // Gold or Fire sparks
|
||||
}
|
||||
|
||||
update() {
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
this.life++;
|
||||
// Add draft wind effect
|
||||
this.vx += (Math.random() - 0.5) * 0.1;
|
||||
this.vx += (Math.random() - 0.5) * 0.12;
|
||||
}
|
||||
|
||||
draw(c: CanvasRenderingContext2D) {
|
||||
@ -82,7 +83,7 @@ export default function ChefShowcase() {
|
||||
c.save();
|
||||
c.beginPath();
|
||||
c.fillStyle = `rgba(${this.color}, ${opacity})`;
|
||||
c.shadowBlur = 8;
|
||||
c.shadowBlur = 6;
|
||||
c.shadowColor = `rgb(${this.color})`;
|
||||
c.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
c.fill();
|
||||
@ -91,17 +92,15 @@ export default function ChefShowcase() {
|
||||
}
|
||||
|
||||
const embers: Ember[] = [];
|
||||
const maxEmbers = 40;
|
||||
const maxEmbers = 45;
|
||||
|
||||
const render = () => {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Spawn new embers
|
||||
if (embers.length < maxEmbers && Math.random() > 0.4) {
|
||||
if (embers.length < maxEmbers && Math.random() > 0.35) {
|
||||
embers.push(new Ember());
|
||||
}
|
||||
|
||||
// Update and draw embers
|
||||
for (let i = embers.length - 1; i >= 0; i--) {
|
||||
const e = embers[i];
|
||||
e.update();
|
||||
@ -126,114 +125,262 @@ export default function ChefShowcase() {
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center bg-darkbg border-b border-gold/10"
|
||||
className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center bg-[#060b08] border-b border-gold/10 overflow-hidden"
|
||||
>
|
||||
<div className="container max-w-6xl mx-auto relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
||||
{/* Background Subtle Traditional Overlay */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_rgba(12,20,16,0.8)_0%,_rgba(6,11,8,1)_80%)] z-0 pointer-events-none" />
|
||||
|
||||
<div className="container max-w-6xl mx-auto relative z-10 flex flex-col gap-12 sm:gap-16">
|
||||
|
||||
{/* Left Side: Chef Info & Spice Selection */}
|
||||
<div className="lg:col-span-6 flex flex-col justify-center">
|
||||
<span className="font-sans text-[10px] tracking-[0.4em] uppercase text-gold font-semibold flex items-center gap-2 mb-3">
|
||||
<Flame size={12} className="text-orange animate-pulse" /> T H E M A S T E R A L C H E M I S T
|
||||
</span>
|
||||
{/* Main 2-Column Info & Portrait Header */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
||||
|
||||
<h2 className="font-serif text-4xl md:text-6xl font-bold tracking-wide text-[#1c2d24] uppercase mb-6 leading-tight">
|
||||
CHEF SUNDARAM <br />
|
||||
<span className="bg-gradient-to-r from-maroon-dark via-maroon to-maroon-light bg-clip-text text-transparent">
|
||||
IYER
|
||||
{/* Left Column: Chef Details */}
|
||||
<div className="lg:col-span-7 flex flex-col items-center lg:items-start text-center lg:text-left justify-center select-text">
|
||||
|
||||
<div className="flex flex-col items-center lg:items-start mb-2">
|
||||
<ChefLotusOrnament />
|
||||
<span className="font-sans text-[10px] sm:text-[11px] tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
|
||||
— OUR MASTER CHEF —
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="font-serif text-4xl sm:text-5xl lg:text-6xl font-bold tracking-wider text-white uppercase leading-tight mb-4 select-text">
|
||||
CHEF <br />
|
||||
SUNDARAM <br />
|
||||
<span className="text-[#bc9e65] flex items-center justify-center lg:justify-start gap-3">
|
||||
IYER
|
||||
<svg className="w-7 h-7 text-[#bc9e65]/80 inline-block" 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" />
|
||||
<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>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<span className="font-sans text-[#bc9e65] text-xs sm:text-[13px] tracking-[0.3em] font-bold block mb-6 uppercase">
|
||||
Heritage. Passion. Perfection.
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="font-sans text-sm md:text-base text-stone-700 leading-relaxed tracking-wide mb-8 max-w-xl">
|
||||
With three decades of culinary devotion, Chef Sundaram has traversed the villages of Tamil Nadu,
|
||||
uncovering regional temple recipes and masterfully blending heritage masalas. He believes that true
|
||||
gastronomy is a spiritual act, uniting soil, tradition, and warm wood fire.
|
||||
</p>
|
||||
|
||||
{/* Interactive Spice Guide Wrapper */}
|
||||
<div className="border border-gold/30 p-6 md:p-8 rounded-lg bg-white/80 backdrop-blur-md relative overflow-hidden shadow-xl">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,_var(--tw-gradient-stops))] from-maroon/5 via-transparent to-transparent pointer-events-none" />
|
||||
<h3 className="font-serif text-maroon text-lg tracking-widest uppercase mb-6 border-b border-gold/15 pb-3 flex items-center gap-2 font-bold">
|
||||
<Sparkles size={16} /> Heritage Spice Altar
|
||||
</h3>
|
||||
<StoryLotusDivider />
|
||||
|
||||
{/* Spice Tabs Selector */}
|
||||
<div className="flex gap-3 mb-6 overflow-x-auto pb-2 scrollbar-thin">
|
||||
{spices.map((spice, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => setActiveSpice(idx)}
|
||||
className={`clickable font-serif text-xs tracking-wider uppercase px-4 py-2 border rounded-full whitespace-nowrap transition-all duration-300 ${
|
||||
activeSpice === idx
|
||||
? "bg-maroon text-white border-maroon shadow-[0_0_15px_rgba(24,135,84,0.2)]"
|
||||
: "bg-transparent text-stone-500 border-stone-200 hover:border-maroon/40 hover:text-maroon"
|
||||
}`}
|
||||
>
|
||||
{spice.name.split(" ")[0]}
|
||||
</button>
|
||||
))}
|
||||
<p className="font-sans text-xs sm:text-sm text-stone-300 leading-relaxed tracking-wider max-w-xl mb-8">
|
||||
With three decades of culinary devotion, Chef Sundaram Iyer has traversed the villages of Tamil Nadu, uncovering regional temple recipes and masterfully blending heritage masalas. He believes that true gastronomy is a spiritual act, uniting soil, tradition, and warm wood fire.
|
||||
</p>
|
||||
|
||||
{/* Cursive Signature */}
|
||||
<div className="mt-2 h-12 flex items-center">
|
||||
<span
|
||||
className="text-[#bc9e65] text-3xl md:text-4xl pointer-events-none select-none"
|
||||
style={{ fontFamily: '"Playball", "Great Vibes", "Brush Script MT", cursive' }}
|
||||
>
|
||||
Sundaram Iyer
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Content pane with slide/fade animation */}
|
||||
<div className="min-h-[140px] flex flex-col justify-between">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeSpice}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<span className="font-sans text-[10px] tracking-[0.2em] uppercase text-orange font-bold block mb-1">
|
||||
{spices[activeSpice].role}
|
||||
</span>
|
||||
<h4 className="font-serif text-stone-900 text-lg tracking-wide uppercase mb-3 font-bold">
|
||||
{spices[activeSpice].name}
|
||||
</h4>
|
||||
<p className="font-sans text-xs md:text-sm text-stone-700 leading-relaxed tracking-wider">
|
||||
{spices[activeSpice].desc}
|
||||
</p>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Chef Cooking Portrait with Overlay Badge */}
|
||||
<div className="lg:col-span-5 flex justify-center relative">
|
||||
|
||||
{/* 30+ Years Experience Badge Overlay */}
|
||||
<div className="absolute -top-6 -right-6 w-24 h-24 sm:w-28 sm:h-28 rounded-full border border-[#bc9e65]/80 bg-[#060b08]/95 z-30 shadow-2xl flex flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
|
||||
<div className="absolute inset-1.5 border border-[#bc9e65]/35 rounded-full pointer-events-none" />
|
||||
{/* Gold Flower Icon */}
|
||||
<svg className="w-4 h-4 text-[#bc9e65] opacity-85 mb-0.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 2L11.5 7L16 8L11.5 9L10 14L8.5 9L4 8L8.5 7Z" />
|
||||
</svg>
|
||||
<span className="font-serif text-[15px] sm:text-[18px] font-bold text-[#bc9e65] leading-none">30+</span>
|
||||
<span className="font-sans text-[7px] sm:text-[8px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mt-0.5">Years</span>
|
||||
<span className="font-sans text-[6px] sm:text-[7px] tracking-[0.1em] text-white/90 uppercase font-semibold leading-relaxed mt-0.5 max-w-[80px]">Of Culinary Excellence</span>
|
||||
</div>
|
||||
|
||||
{/* Framed Image Container */}
|
||||
<div className="relative w-full max-w-[380px] sm:max-w-[420px] aspect-[4/5] border-4 border-[#0c140f] bg-[#0c140f] p-1.5 shadow-[0_25px_50px_rgba(0,0,0,0.85)] overflow-hidden rounded-2xl group">
|
||||
{/* Inner Double Gold Frame overlay */}
|
||||
<div className="absolute inset-1 border border-[#bc9e65]/30 z-10 rounded-xl pointer-events-none" />
|
||||
|
||||
{/* Portrait Image */}
|
||||
<div className="w-full h-full relative overflow-hidden rounded-lg">
|
||||
<Image
|
||||
src="/images/chef_cooking.png"
|
||||
alt="Chef Sundaram Iyer Cooking with Fire"
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, 35vw"
|
||||
className="object-cover group-hover:scale-103 transition-transform duration-[2s] brightness-[0.82] contrast-[1.08]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sparks/Embers Canvas Overlay */}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 z-20 pointer-events-none mix-blend-screen"
|
||||
/>
|
||||
|
||||
{/* Heat wave color gradient filter overlay */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-[#bc9e65]/10 to-transparent z-15 pointer-events-none" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Side: Chef Cooking Portrait with embers canvas */}
|
||||
<div className="lg:col-span-6 flex justify-center items-center relative">
|
||||
{/* Middle Highlights Card Section */}
|
||||
<div className="bg-[#0b100d]/75 border border-[#d8c396]/35 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">
|
||||
|
||||
{/* Framed Image Container */}
|
||||
<div className="relative w-full max-w-[450px] aspect-[4/5] border-8 border-wood bg-darkbg p-2 shadow-[0_30px_60px_rgba(0,0,0,0.8)] overflow-hidden group">
|
||||
{/* Brass Inner Frame Border */}
|
||||
<div className="absolute inset-1 border-2 border-double border-gold-dark/40 z-10 pointer-events-none" />
|
||||
|
||||
{/* Action Portrait */}
|
||||
<div className="w-full h-full relative overflow-hidden">
|
||||
<Image
|
||||
src="/images/chef_cooking.png"
|
||||
alt="Chef Sundaram Cooking with fire"
|
||||
fill
|
||||
priority
|
||||
sizes="(max-width: 768px) 100vw, 40vw"
|
||||
className="object-cover group-hover:scale-105 transition-transform duration-[2s] brightness-[0.85] contrast-[1.05]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sparks/Embers Canvas Overlay */}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 z-20 pointer-events-none mix-blend-screen"
|
||||
/>
|
||||
|
||||
{/* Subtle heat wave distortion visual overlay */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-orange/15 to-transparent z-15 pointer-events-none animate-pulse" />
|
||||
{/* Feature 1: Authentic Recipes */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<svg className="w-7 h-7 text-[#bc9e65] mb-2.5" 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>
|
||||
<h5 className="font-serif text-[11px] sm:text-xs font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Authentic Recipes</h5>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-400 leading-relaxed max-w-[150px] mx-auto">Traditional recipes passed down through generations.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 2: Pure Vegetarian */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<svg className="w-7 h-7 text-[#bc9e65] mb-2.5" 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>
|
||||
<h5 className="font-serif text-[11px] sm:text-xs font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Pure Vegetarian</h5>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-400 leading-relaxed max-w-[150px] mx-auto">100% pure veg, made with the finest natural ingredients.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 3: Wood Fire Cooking */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<svg className="w-7 h-7 text-[#bc9e65] mb-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 3z" />
|
||||
</svg>
|
||||
<h5 className="font-serif text-[11px] sm:text-xs font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Wood Fire Cooking</h5>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-400 leading-relaxed max-w-[150px] mx-auto">Infused with the aroma of wood fire and heritage.</p>
|
||||
</div>
|
||||
|
||||
{/* Feature 4: Cooked With Love */}
|
||||
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
|
||||
<svg className="w-7 h-7 text-[#bc9e65] mb-2.5" 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>
|
||||
<h5 className="font-serif text-[11px] sm:text-xs font-bold text-[#bc9e65] tracking-wider uppercase mb-1">Cooked With Love</h5>
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-400 leading-relaxed max-w-[150px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom Section: Quote on the Left & Spices Parchment Card on the Right */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center mt-6">
|
||||
|
||||
{/* Bottom Left: Gopuram Sketch Background & Large Narrative Quote */}
|
||||
<div className="lg:col-span-5 relative flex flex-col justify-center min-h-[160px] pl-4 sm:pl-6 select-text">
|
||||
{/* Gopuram Sketch watermark */}
|
||||
<div className="absolute left-[-20px] bottom-[-20px] w-[200px] h-[250px] pointer-events-none select-none opacity-8 mix-blend-screen">
|
||||
<Image
|
||||
src="/images/menu_left.png"
|
||||
alt="Heritage Gopuram Background Sketch"
|
||||
fill
|
||||
sizes="200px"
|
||||
className="object-contain filter invert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quote details */}
|
||||
<div className="relative z-10 select-text">
|
||||
<span className="text-[#a83232] text-6xl font-serif leading-none select-none block mb-1">“</span>
|
||||
<p className="font-sans text-stone-300 text-xs sm:text-sm lg:text-[15px] leading-relaxed tracking-wider font-semibold italic max-w-[85%]">
|
||||
Food is not just to satisfy hunger, it is to honor our roots, our culture and the land that nourishes us.
|
||||
</p>
|
||||
|
||||
{/* Gold Ornament Divider */}
|
||||
<div className="flex items-center gap-3 w-32 mt-4 select-none pointer-events-none">
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
|
||||
<svg className="w-5 h-4 text-[#bc9e65] opacity-75" 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" />
|
||||
</svg>
|
||||
<div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Right: Spices Parchment Card */}
|
||||
<div className="lg:col-span-7 flex justify-end">
|
||||
<div className="w-full max-w-[620px] relative bg-[#fdfcf7] border border-[#d8c396]/55 rounded-none p-5 sm:p-7 pr-32 min-h-[160px] shadow-[0_15px_30px_rgba(0,0,0,0.5)] flex flex-col justify-center overflow-visible select-text text-left">
|
||||
|
||||
{/* Inner border line overlay */}
|
||||
<div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none" />
|
||||
|
||||
{/* Notched corners masks */}
|
||||
<div className="absolute -top-[1px] -left-[1px] w-3 h-3 bg-[#060b08] rounded-br-full border-r border-b border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
<div className="absolute -top-[1px] -right-[1px] w-3 h-3 bg-[#060b08] rounded-bl-full border-l border-b border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
<div className="absolute -bottom-[1px] -left-[1px] w-3 h-3 bg-[#060b08] rounded-tr-full border-r border-t border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
<div className="absolute -bottom-[1px] -right-[1px] w-3 h-3 bg-[#060b08] rounded-tl-full border-l border-t border-[#d8c396]/55 z-20 pointer-events-none" />
|
||||
|
||||
{/* Text content details */}
|
||||
<div className="relative z-10 flex flex-col gap-1.5 pl-2 max-w-[95%]">
|
||||
<span className="font-sans text-[9px] sm:text-[10px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase pointer-events-none select-none">
|
||||
— THE ESSENCE OF —
|
||||
</span>
|
||||
|
||||
<h4 className="font-serif text-[14px] sm:text-[16px] font-bold text-[#a83232] tracking-wider uppercase mb-1">
|
||||
Heritage Spices
|
||||
</h4>
|
||||
|
||||
<p className="font-sans text-[10px] sm:text-[11px] text-stone-700 leading-relaxed max-w-[85%]">
|
||||
Handpicked spices from the best regions of India, blended with time-honored techniques to create unforgettable flavors.
|
||||
</p>
|
||||
|
||||
{/* Explorer Button */}
|
||||
<div className="mt-3 select-none">
|
||||
<a
|
||||
href="#menu"
|
||||
className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-[#0a4a2b] border border-[#d8c396]/80 text-[10px] font-sans font-bold text-[#fcfaf2] tracking-[0.15em] uppercase hover:bg-[#0c5030] hover:border-[#bc9e65] transition-all duration-300 shadow-md"
|
||||
>
|
||||
Explore Our Menu →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overlapping circular thali spices container */}
|
||||
<div className="absolute -right-10 top-1/2 -translate-y-1/2 w-32 h-32 sm:w-[150px] sm:h-[150px] rounded-full p-1.5 bg-gradient-to-br from-[#bc9e65] via-[#fcfaf2] to-[#aa771c] shadow-2xl flex-shrink-0 z-10 flex items-center justify-center pointer-events-none select-none">
|
||||
<div className="w-full h-full rounded-full p-[3px] bg-[#0c5030] relative overflow-hidden flex items-center justify-center">
|
||||
{/* Banana leaf background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#388e3c] to-[#1b5e20] opacity-95" />
|
||||
|
||||
{/* Spices image */}
|
||||
<div className="w-full h-full rounded-full overflow-hidden relative z-10">
|
||||
<Image
|
||||
src="/images/chef_spices.png"
|
||||
alt="South Indian Heritage Spices Platter"
|
||||
fill
|
||||
sizes="150px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative Corner Filigrees outside */}
|
||||
<div className="absolute -top-4 -left-4 w-12 h-12 border-t border-l border-gold/40 pointer-events-none hidden md:block" />
|
||||
<div className="absolute -bottom-4 -right-4 w-12 h-12 border-b border-r border-gold/40 pointer-events-none hidden md:block" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Rooted Traditional Footer Banner */}
|
||||
<div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-3 pointer-events-none select-none z-10">
|
||||
<div className="container max-w-6xl mx-auto px-6 text-center">
|
||||
<span className="font-serif text-[9px] sm:text-[11px] tracking-[0.25em] text-[#bc9e65] font-semibold uppercase flex items-center justify-center gap-2">
|
||||
❧ ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE ☙
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user