Build a single-page Next.js (App Router) website that acts as a Raksha Bandhan surprise gift reveal, moving through 4 sequential "scenes" on one page (no real routing — use state to switch scenes, with a smooth fade/slide transition between them). Mobile-first design, since it'll be opened on a phone. Warm festive palette (cream, blush pink, marigold orange/yellow, deep red accents) with a soft floral/mandala motif in the background (simple CSS shapes or subtle SVG patterns — no external images needed for decoration).
SCENE 1 — Intro:
- Center of screen: a large Shin Chan sticker/image placeholder (use a fun bordered circular or sticker-style frame with a slight wiggle/bounce animation, like a floating sticker).
- Below it, playful bold text: "Are you ready to see the amazing gift from me?"
- Two buttons: "Yes 💛" and "Not yet" — the "Not yet" button playfully dodges/moves away when hovered or tapped (small teasing animation), so she basically has to tap "Yes".
- Tapping "Yes" transitions to Scene 2.
SCENE 2 — Photos:
- A one-by-one photo reveal (like a slideshow/carousel) showing a set of photos of the two of us, styled like polaroid/scrapbook photo cards with a slight tilt and tape effect.
- Auto-advance every few seconds OR simple next/prev tap controls (swipeable on mobile).
- Small caption/heading above: "Us, through the years 💛" (or similar).
- A "Next" button at the bottom to continue once she's seen the photos, transitioning to Scene 3.
SCENE 3 — Video:
- Full-width embedded video player (use an HTML5 <video> element with custom-styled controls, placeholder src) with a decorative frame matching the theme.
- Heading above it: "I made this just for you"
- A "Next" button below to move to Scene 4 (letter).
SCENE 4 — The Letter:
- Styled like a handwritten/personal letter card — cream paper background, soft shadow, maybe a small ribbon/rakhi icon at the top corner.
- Display this exact letter text, preserving line breaks, in a warm handwriting-style Google Font (e.g., "Caveat" or "Dancing Script" for a personal touch, with a readable fallback):
"Yess didi
Bola hota na ki unique gift denar
This is it
So har varahi bas me rakhi gheto ajun kahi der nhi
Sorry
Male hamesha kahi tari different karo vatte but hot nhi
Ya vedi
I did it
Ekdam mast nhi aahe
But i didn't my best i swear
Happy rakshabandhan dide
And I promise ki next year le kahi tari sota vikat Gheun denar
Thankyou har eka goshthi sathi
Thankyou so much
Happy rakshabandhan"
- Below the letter, add a small celebratory closing element — e.g., confetti animation on load, or a rakhi/heart icon row, and a final line like "The End 💛".
GENERAL REQUIREMENTS:
- Use React state to manage which scene is active (scene 1 → 2 → 3 → 4), with each transition being a smooth animated fade/slide (Framer Motion is fine if available).
- Fully responsive, optimized for mobile screens first.
- Leave clearly marked placeholders for: the Shin Chan sticker image, the photo array (array of image URLs/paths I'll swap in), and the video file source — so I can easily drop in my own media.
- Keep the tone warm, playful, and personal throughout
2_20260827_201513_0001.png— this is a sibling gift, not a corporate site.
1_20260827_201513_0000.png FBeige and Gold Raksha Bandhan Mobile Video_20260827_202707_0000.mp4