diff --git a/public/images/menu_bg_traditional.png b/public/images/menu_bg_traditional.png new file mode 100644 index 0000000..7a514e7 Binary files /dev/null and b/public/images/menu_bg_traditional.png differ diff --git a/public/images/menu_brass_pot.png b/public/images/menu_brass_pot.png new file mode 100644 index 0000000..31f41ee Binary files /dev/null and b/public/images/menu_brass_pot.png differ diff --git a/public/images/menu_brass_pot_clean.png b/public/images/menu_brass_pot_clean.png new file mode 100644 index 0000000..08e8b83 Binary files /dev/null and b/public/images/menu_brass_pot_clean.png differ diff --git a/public/images/menu_green_cloth.png b/public/images/menu_green_cloth.png new file mode 100644 index 0000000..c6c4c9f Binary files /dev/null and b/public/images/menu_green_cloth.png differ diff --git a/public/images/menu_green_cloth_clean.png b/public/images/menu_green_cloth_clean.png new file mode 100644 index 0000000..0192959 Binary files /dev/null and b/public/images/menu_green_cloth_clean.png differ diff --git a/public/images/menu_leaf_clean.png b/public/images/menu_leaf_clean.png new file mode 100644 index 0000000..6661f24 Binary files /dev/null and b/public/images/menu_leaf_clean.png differ diff --git a/public/images/menu_leaf_left.png b/public/images/menu_leaf_left.png new file mode 100644 index 0000000..564f790 Binary files /dev/null and b/public/images/menu_leaf_left.png differ diff --git a/public/images/menu_leaf_right.png b/public/images/menu_leaf_right.png new file mode 100644 index 0000000..8c1e7c8 Binary files /dev/null and b/public/images/menu_leaf_right.png differ diff --git a/public/images/menu_left.png b/public/images/menu_left.png new file mode 100644 index 0000000..2a23723 Binary files /dev/null and b/public/images/menu_left.png differ diff --git a/public/images/menu_right.png b/public/images/menu_right.png new file mode 100644 index 0000000..af3f22f Binary files /dev/null and b/public/images/menu_right.png differ diff --git a/public/images/story_arch.png b/public/images/story_arch.png new file mode 100644 index 0000000..80ae0ac Binary files /dev/null and b/public/images/story_arch.png differ diff --git a/public/images/story_bg.png b/public/images/story_bg.png new file mode 100644 index 0000000..64cfc7e Binary files /dev/null and b/public/images/story_bg.png differ diff --git a/src/components/EntranceExperience.tsx b/src/components/EntranceExperience.tsx index a9cf56f..e8c7595 100644 --- a/src/components/EntranceExperience.tsx +++ b/src/components/EntranceExperience.tsx @@ -373,22 +373,12 @@ export default function EntranceExperience() { animate={{ opacity: 1, x: 0, scale: 1 }} exit={{ opacity: 0, x: -50, scale: 0.95 }} transition={{ duration: 0.8, ease: "easeOut" }} - className="absolute top-28 left-8 z-30 w-[340px] sm:w-[400px] max-w-[calc(100vw-32px)] max-sm:top-auto max-sm:bottom-16 max-sm:left-4 max-sm:right-4 max-sm:mx-auto bg-[#fcfaf2]/95 border-2 border-double border-gold/45 rounded-b-lg p-6 sm:p-8 pt-10 sm:pt-12 shadow-2xl pointer-events-none" - style={{ - borderTopLeftRadius: "180px 150px", - borderTopRightRadius: "180px 150px", - }} + className="absolute top-28 left-8 z-30 w-[340px] sm:w-[400px] max-w-[calc(100vw-32px)] max-sm:top-auto max-sm:bottom-16 max-sm:left-4 max-sm:right-4 max-sm:mx-auto bg-[#fcfaf2]/95 border-2 border-double border-gold/45 rounded-3xl p-6 sm:p-8 shadow-2xl pointer-events-none" > - {/* Inner traditional gold frame matching the arch dome */} -
+ {/* Inner traditional gold frame */} +
- + P U R E V E G E T A R I A N F E A S T diff --git a/src/components/MenuPreview.tsx b/src/components/MenuPreview.tsx index a24ce7b..85a9f97 100644 --- a/src/components/MenuPreview.tsx +++ b/src/components/MenuPreview.tsx @@ -1,7 +1,7 @@ "use client"; import { useRef } from "react"; -import { motion, useScroll, useTransform } from "framer-motion"; +import { motion } from "framer-motion"; import Image from "next/image"; interface MenuItemProps { @@ -9,66 +9,143 @@ interface MenuItemProps { desc: string; tag: string; type: "green" | "gold" | "orange"; + img: string; } +const LotusOrnament = () => ( + + {/* Center Petal */} + + {/* Left Petal */} + + {/* Right Petal */} + + {/* Left scroll wing */} + + {/* Right scroll wing */} + + + +); + +const TitleDivider = () => ( +
+
+ + + + + +
+
+); + +const MiniOrnament = () => ( + + + + + +); + +const BoardCornerDecor = ({ position }: { position: "tl" | "tr" | "bl" | "br" }) => { + const styles = { + tl: "top-4 left-4 rotate-0", + tr: "top-4 right-4 -scale-x-100", + bl: "bottom-4 left-4 -scale-y-100", + br: "bottom-4 right-4 scale-[-1]" + }; + return ( + + + + + + + + + ); +}; + const CategoryPill = ({ tag, type }: { tag: string; type: "green" | "gold" | "orange" }) => { const styles = { green: { - bg: "bg-[#188754]/5", - text: "text-[#188754]", - border: "border-[#188754]/25", - iconPath: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" // Checkmark + bg: "bg-[#e8f5e9]/95 text-[#1b5e20] border-[#a5d6a7]/70", + icon: "✓" }, gold: { - bg: "bg-[#d8c396]/8", - text: "text-[#bc9e65]", - border: "border-[#d8c396]/40", - iconPath: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" // Star + bg: "bg-[#fff8e1]/95 text-[#b78103] border-[#ffe082]/70", + icon: "★" }, orange: { - bg: "bg-[#e07a5f]/5", - text: "text-[#e07a5f]", - border: "border-[#e07a5f]/25", - iconPath: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 10h3l-4 4-4-4h3V8h2v4z" // Classic downward arrow badge + bg: "bg-[#fbe9e7]/95 text-[#c62828] border-[#ffab91]/70", + icon: "●" } }; - - const current = styles[type] || styles.green; - + const style = styles[type]; return ( -
- - - + + {style.icon} {tag} -
+ ); }; -const MenuItemRow = ({ name, desc, tag, type }: MenuItemProps) => ( +const MenuItemCard = ({ name, desc, tag, type, img }: MenuItemProps) => ( -
-
- {/* Double Arrow Indicator */} - - ..> - -

- {name} -

+ {/* Inner decorative inset line */} +
+ + {/* Classic inset corner notched borders using background-matching circular masks with hover support */} +
+
+
+
+ + {/* Protruding traditional brass thali container */} +
+ {/* Inner Rim of the Plate */} +
+ {/* Green Banana Leaf Inner Liner */} +
+ + {/* Food Image */} +
+ {name} +
-

- {desc} -

- {/* Category Pill */} -
- + {/* Content Section */} +
+ {/* Name and Pill Badge */} +
+

+ {name} +

+ +
+ + {/* Description */} +

+ {desc} +

); @@ -76,47 +153,41 @@ const MenuItemRow = ({ name, desc, tag, type }: MenuItemProps) => ( export default function MenuPreview() { const sectionRef = useRef(null); - // Parallax scroll effects for background sketch watermarks - const { scrollYProgress } = useScroll({ - target: sectionRef, - offset: ["start end", "end start"], - }); - - const gopuramY = useTransform(scrollYProgress, [0, 1], ["0px", "-40px"]); - const gopuramX = useTransform(scrollYProgress, [0, 1], ["0px", "-15px"]); - const palaceY = useTransform(scrollYProgress, [0, 1], ["0px", "40px"]); - const palaceX = useTransform(scrollYProgress, [0, 1], ["0px", "15px"]); - const leftColumnItems: MenuItemProps[] = [ { name: "ONION RAVA DOSA", desc: "Crispy semolina crepe with onions, herbs & spices.", tag: "RAVA SPL", - type: "green" + type: "green", + img: "/images/masala_dosa_luxury.png" }, { name: "IDLI SAMBAR (2 PCS)", desc: "Steamed fluffy rice & lentil cakes with hot sambar.", tag: "TIFFIN SPL", - type: "gold" + type: "gold", + img: "/images/my_dosa_place_food.png" }, { name: "MYSORE MASALA DOSA", desc: "Rice crepe spread with spicy chutney & potato masala.", tag: "CLASSIC", - type: "orange" + type: "orange", + img: "/images/masala_dosa_luxury.png" }, { name: "RAVA MASALA DOSA", desc: "Crispy semolina crepe filled with spiced potato masala.", tag: "RAVA SPL", - type: "green" + type: "green", + img: "/images/masala_dosa_luxury.png" }, { name: "PURI BHAJI (3 PCS)", desc: "Golden fluffy deep-fried puris with flavorful potato bhaji.", tag: "TIFFIN SPL", - type: "gold" + type: "gold", + img: "/images/royal_dining_experience.png" } ]; @@ -125,177 +196,213 @@ export default function MenuPreview() { name: "MASALA DOSA", desc: "Crispy thin rice & lentil crepe stuffed with potato masala.", tag: "CLASSIC", - type: "orange" + type: "orange", + img: "/images/masala_dosa_luxury.png" }, { name: "ONION RAVA MASALA DOSA", desc: "Semolina crepe with onions and spiced potato filling.", tag: "RAVA SPL", - type: "green" + type: "green", + img: "/images/masala_dosa_luxury.png" }, { name: "MEDU VADA (2 PCS)", desc: "Deep fried crispy lentil donuts served with sambar & chutney.", tag: "TIFFIN SPL", - type: "gold" + type: "gold", + img: "/images/south_indian_thali_luxury.png" }, { name: "PAPER ROAST DOSA", desc: "Extra large, paper-thin, crispy dosa served hot.", tag: "CLASSIC", - type: "orange" + type: "orange", + img: "/images/masala_dosa_luxury.png" }, { name: "RAVA PLAIN DOSA", desc: "Crispy semolina crepe served with chutney & sambar.", tag: "RAVA SPL", - type: "green" + type: "green", + img: "/images/masala_dosa_luxury.png" } ]; return (
- + {/* Traditional Background Image containing pre-composed sketches, leaves, and brass pots */} + Traditional South Indian Menu Background + {/* Traditional Temple Borders */} -
- - {/* Parallax Background Gopuram sketch (Left Watermark) */} - - - Gopuram Sketch - - - - {/* Parallax Background Palace sketch (Right Watermark) */} - - - Palace Sketch - - +
{/* Header Elements */} -
- {/* Top traditional gold design element */} -
⚜
-
+
+ -

+

Our Menu

- {/* Double line with diamond ornament */} -
-
- ◆ -
-
+ -

+

Explore a wide variety of authentic South Indian vegetarian dishes,
crafted with traditional recipes and the finest ingredients.

-
- - {/* 2-Column Menu Layout wrapper */} -
- {/* Vertical Dotted Separator in the center (Desktop only) */} -
+ +
- {/* Left Column Items */} -
- {leftColumnItems.map((item, index) => ( - - ))} + {/* Menu Board Container */} +
+ + {/* Inner border line overlay */} +
+ + {/* Corner decorative scrolls */} + + + + + + {/* Banner Badge - Dosa Specialties */} +
+
+ {/* Left Scroll */} + + + + +
+ ✦ + Dosa Specialties + ✦ +
+ + {/* Right Scroll */} + + + +
- {/* Right Column Items */} -
- {rightColumnItems.map((item, index) => ( - - ))} + {/* 2-Column Menu Layout grid */} +
+ + {/* Vertical separator in the center (Desktop only) */} +
+
+ + + + + + + +
+
+ + {/* Left Column Item Cards */} +
+ {leftColumnItems.map((item, index) => ( + + ))} +
+ + {/* Right Column Item Cards */} +
+ {rightColumnItems.map((item, index) => ( + + ))} +
+
+ {/* Bottom Section Core Pillars Feature Bar */} + +
); } + +const BottomFeatures = () => ( +
+ {/* Feature 1 */} +
+
+ + + + + + +
+
+
100% Vegetarian
+

Pure Veg. Good Food

+
+
+ + {/* Feature 2 */} +
+
+ + + + + + +
+
+
Authentic Recipes
+

Traditional Taste

+
+
+ + {/* Feature 3 */} +
+
+ + + + + + +
+
+
Finest Ingredients
+

Always Fresh

+
+
+ + {/* Feature 4 */} +
+
+ + + + +
+
+
Made With Love
+

For You

+
+
+
+); diff --git a/src/components/RestaurantStory.tsx b/src/components/RestaurantStory.tsx index 2967607..67fa7e6 100644 --- a/src/components/RestaurantStory.tsx +++ b/src/components/RestaurantStory.tsx @@ -2,120 +2,138 @@ import Image from "next/image"; +const StoryPreTitleOrnament = () => ( + + + +); + +const StoryLotusDivider = () => ( +
+
+ + + + + +
+
+); + export default function RestaurantStory() { return ( -
- {/* Traditional Temple Borders */} -
+
+ {/* Traditional Background Image containing pre-composed sketches and mandalas */} + Traditional South Indian Story Background -
+ {/* Traditional Temple Borders */} +
+ +
{/* Left Side: Story & Features Details (Fully Center-Aligned) */} -
+
- {/* Badge Pre-title with Gold Crest */} -
- {/* Gold Lamp/Lotus Crest */} - - - - - - + {/* Pre-title with Gold Crest */} +
+ + ••••• OUR STORY •••••
{/* Main Headline */} -

- A Tradition Served
with Love +

+ A Tradition Served
+ With Love

{/* Traditional Gold Divider */} -
-
-
-
-
+ {/* Paragraph Narrative */} -

+

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.

{/* Traditional Bottom Gold Divider */} -
-
-
-
-
+ {/* Grid of 4 Key Features */} -
+
{/* Feature 1: Veg */} -
-
- - - +
+
+ + + + +
-

+

100% Pure Veg

-

+

Pure vegetarian food made with the finest ingredients.

{/* Feature 2: Recipes */} -
-
- - - - - - +
+
+ + + + +
-

+

Authentic Recipes

-

+

Traditional recipes crafted with authentic South Indian flavors.

{/* Feature 3: Hospitality */} -
-
- - - - +
+
+ + + + +
-

+

Warm Hospitality

-

+

A homely environment with friendly service and a smile.

{/* Feature 4: Love */} -
-
- - +
+
+ + +
-

+

Made With Love

-

+

Every dish is prepared with love, care and traditional values.

@@ -124,116 +142,22 @@ export default function RestaurantStory() {
- {/* Right Side: Larger Gopuram Arched Frame Counter Image */} -
- - {/* Ambient Glow */} -
- - {/* Shield frame backing shadow */} -
- - {/* Gopuram Arch Masked Image Wrapper */} -
-
- My Dosa Place Dining Counter -
- - {/* Inset Double Border Stroke Overlay */} - - - - + {/* Right Side: Mockup Gopuram Archway thali frame */} +
+ {/* Crop-extracted story thali arch image */} +
+ My Dosa Place Traditional Dining Feast
- - {/* Arch Caption Label Overlay */} -
-
- Heritage Sanctuary -
-
-
- - {/* SVG ClipPath Definition for the Gopuram Temple Arch frame */} - - - - - - -
); }