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

feat: integrate Framer Motion scroll entrance animations for Heritage Story, Menu Items, Chef Showcase details, and Events Accordion sections

Browse Source
This commit is contained in:
Alaguraj0361 2026-07-15 17:34:33 +05:30
parent 21d327d33c
commit 899400173d
4 changed files with 113 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/ChefShowcase.tsx
View File

@ -145,7 +145,13 @@ export default function ChefShowcase() {
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
{/* 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">
<motion.div
initial={{ opacity: 0, x: -45 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.8, ease: "easeOut" }}
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 />
@ -187,10 +193,16 @@ export default function ChefShowcase() {
</span>
</div>
</div>
</motion.div>
{/* Right Column: Chef Cooking Portrait with Overlay Badge */}
<div className="lg:col-span-5 flex justify-center relative">
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 30 }}
whileInView={{ opacity: 1, scale: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.85, ease: "easeOut" }}
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-black/45 backdrop-blur-md z-30 shadow-2xl flex flex-col items-center justify-center text-center p-3 select-none pointer-events-none">
@ -224,12 +236,18 @@ export default function ChefShowcase() {
/>
</div>
</div>
</motion.div>
</div>
{/* Middle Highlights Card Section */}
<div 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">
<motion.div
initial={{ opacity: 0, y: 25 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
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"
>
{/* Feature 1: Authentic Recipes */}
<div className="flex flex-col items-center text-center px-4 py-3 md:py-0 select-text">
@ -274,13 +292,19 @@ export default function ChefShowcase() {
<p className="font-sans text-[10px] sm:text-[11px] text-stone-300 leading-relaxed max-w-[150px] mx-auto">Every dish is prepared with care, devotion & warmth.</p>
</div>
</div>
</motion.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">
<motion.div
initial={{ opacity: 0, x: -35 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, ease: "easeOut" }}
className="lg:col-span-5 relative flex flex-col justify-center min-h-[160px] pl-4 sm:pl-6 select-text"
>
{/* Quote details */}
<div className="relative z-10 select-text text-left">
<span className="text-[#c62828] text-7xl font-serif leading-none select-none block -mb-4">“</span>
@ -297,10 +321,16 @@ export default function ChefShowcase() {
<div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
</div>
</div>
</div>
</motion.div>
{/* Bottom Right: Spices Parchment Card */}
<div className="lg:col-span-7 flex justify-end">
<motion.div
initial={{ opacity: 0, x: 35 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, ease: "easeOut" }}
className="lg:col-span-7 flex justify-end"
>
<div className="w-full max-w-[620px] relative bg-[#fdfcf7]/95 border border-[#d8c396]/55 rounded-none p-5 sm:p-8 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 */}
@ -340,7 +370,7 @@ export default function ChefShowcase() {
</div>
</div>
</motion.div>
</div>

21
src/components/EventsAccordion.tsx
View File

@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import { motion } from "framer-motion";
import Image from "next/image";
// Custom Ornate Gold Category SVG Icons
@ -150,7 +151,13 @@ export default function EventsAccordion() {
<div className="container max-w-6xl mx-auto relative z-10 flex flex-col h-full">
{/* Title Block Header */}
<div className="mb-12 flex flex-col items-center text-center select-text">
<motion.div
initial={{ opacity: 0, y: 35 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-80px" }}
transition={{ duration: 0.75, ease: "easeOut" }}
className="mb-12 flex flex-col items-center text-center select-text"
>
{/* Gold Star/Diamond Emblem header */}
<div className="flex flex-col items-center mb-2 pointer-events-none select-none">
<svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
@ -184,10 +191,16 @@ export default function EventsAccordion() {
<p className="font-sans text-xs sm:text-sm text-stone-700 leading-relaxed tracking-wider max-w-xl mx-auto">
From intimate royal gatherings to grand celebrations, experience curated culinary journeys that leave lasting impressions.
</p>
</div>
</motion.div>
{/* Horizontal Accordion Track */}
<div className="flex flex-col lg:flex-row gap-5 h-[620px] lg:h-[460px] w-full items-stretch relative z-20">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
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"
>
{events.map((event, idx) => {
const isActive = idx === activeIdx;
const CategoryIcon = event.icon;
@ -322,7 +335,7 @@ export default function EventsAccordion() {
</div>
);
})}
</div>
</motion.div>
</div>
</section>

11
src/components/MenuPreview.tsx
View File

@ -97,10 +97,13 @@ const CategoryPill = ({ tag, type }: { tag: string; type: "green" | "gold" | "or
);
};
const MenuItemCard = ({ name, desc, tag, type, img }: MenuItemProps) => (
const MenuItemCard = ({ name, desc, tag, type, img, index }: MenuItemProps & { index: number }) => (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.5, delay: (index % 5) * 0.08, ease: "easeOut" }}
whileHover={{ y: -2, scale: 1.01 }}
transition={{ duration: 0.25 }}
className="group relative bg-[#fdfcf9] border border-[#d8c396]/45 rounded-none p-4 pl-22 pr-4 min-h-[96px] shadow-[0_4px_12px_rgba(10,74,43,0.03)] hover:shadow-[0_8px_20px_rgba(10,74,43,0.07)] hover:border-[#bc9e65] flex flex-col justify-center select-text overflow-visible"
>
{/* Inner decorative inset line */}
@ -319,14 +322,14 @@ export default function MenuPreview() {
{/* Left Column Item Cards */}
<div className="flex flex-col gap-6 pl-2 pr-2 md:pl-4">
{leftColumnItems.map((item, index) => (
<MenuItemCard key={index} {...item} />
<MenuItemCard key={index} {...item} index={index} />
))}
</div>
{/* Right Column Item Cards */}
<div className="flex flex-col gap-6 pl-2 pr-2 md:pr-4">
{rightColumnItems.map((item, index) => (
<MenuItemCard key={index} {...item} />
<MenuItemCard key={index} {...item} index={index} />
))}
</div>

61
src/components/RestaurantStory.tsx
View File

@ -1,6 +1,7 @@
"use client";
import Image from "next/image";
import { motion } from "framer-motion";
const StoryPreTitleOrnament = () => (
<svg className="w-4 h-4 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
@ -38,7 +39,13 @@ export default function RestaurantStory() {
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-8 relative z-10">
{/* Left Side: Story & Features Details (Fully Center-Aligned) */}
<div className="w-full lg:w-[50%] flex flex-col items-center text-center justify-center">
<motion.div
initial={{ opacity: 0, y: 35 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-80px" }}
transition={{ duration: 0.75, ease: "easeOut" }}
className="w-full lg:w-[50%] flex flex-col items-center text-center justify-center"
>
{/* Pre-title with Gold Crest */}
<div className="flex flex-col items-center mb-2">
@ -69,7 +76,13 @@ export default function RestaurantStory() {
<div className="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-4 w-full mt-4">
{/* Feature 1: Veg */}
<div className="flex flex-col items-center text-center group select-text">
<motion.div
initial={{ opacity: 0, scale: 0.9, y: 15 }}
whileInView={{ opacity: 1, scale: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1, ease: "easeOut" }}
className="flex flex-col items-center text-center group select-text"
>
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
<svg className="w-6 h-6 text-[#188754]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="10" />
@ -84,10 +97,16 @@ export default function RestaurantStory() {
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
Pure vegetarian food made with the finest ingredients.
</p>
</div>
</motion.div>
{/* Feature 2: Recipes */}
<div className="flex flex-col items-center text-center group select-text">
<motion.div
initial={{ opacity: 0, scale: 0.9, y: 15 }}
whileInView={{ opacity: 1, scale: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
className="flex flex-col items-center text-center group select-text"
>
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
<path d="M4 10h16c0 5-2.5 8-8 8s-8-3-8-8z" />
@ -102,10 +121,16 @@ export default function RestaurantStory() {
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
Traditional recipes crafted with authentic South Indian flavors.
</p>
</div>
</motion.div>
{/* Feature 3: Hospitality */}
<div className="flex flex-col items-center text-center group select-text">
<motion.div
initial={{ opacity: 0, scale: 0.9, y: 15 }}
whileInView={{ opacity: 1, scale: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
className="flex flex-col items-center text-center group select-text"
>
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
<path d="M12 20V4" />
@ -120,10 +145,16 @@ export default function RestaurantStory() {
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
A homely environment with friendly service and a smile.
</p>
</div>
</motion.div>
{/* Feature 4: Love */}
<div className="flex flex-col items-center text-center group select-text">
<motion.div
initial={{ opacity: 0, scale: 0.9, y: 15 }}
whileInView={{ opacity: 1, scale: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
className="flex flex-col items-center text-center group select-text"
>
<div className="w-14 h-14 rounded-full border border-[#d8c396] flex items-center justify-center mb-3 bg-[#fcfaf2]/70 shadow-sm transition-transform duration-300 group-hover:scale-110 pointer-events-none select-none">
<svg className="w-6 h-6 text-[#bc9e65]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
<circle cx="12" cy="12" r="10" />
@ -136,14 +167,20 @@ export default function RestaurantStory() {
<p className="font-sans text-[10px] sm:text-[11px] text-stone-550 leading-relaxed max-w-[130px] mx-auto">
Every dish is prepared with love, care and traditional values.
</p>
</div>
</motion.div>
</div>
</div>
</motion.div>
{/* Right Side: Mockup Gopuram Archway thali frame */}
<div className="w-full lg:w-[46%] flex justify-center lg:justify-end relative z-10">
<motion.div
initial={{ opacity: 0, x: 45, scale: 0.96 }}
whileInView={{ opacity: 1, x: 0, scale: 1 }}
viewport={{ once: true, margin: "-80px" }}
transition={{ duration: 0.85, ease: "easeOut" }}
className="w-full lg:w-[46%] flex justify-center lg:justify-end relative z-10"
>
{/* Crop-extracted story thali arch image */}
<div className="w-[340px] h-[340px] sm:w-[480px] sm:h-[480px] md:w-[500px] md:h-[500px] relative pointer-events-none select-none">
<Image
@ -155,7 +192,7 @@ export default function RestaurantStory() {
priority
/>
</div>
</div>
</motion.div>
</div>
</section>