1. PROJECT TYPE & PURPOSE
This is a modern, high-end restaurant landing page designed for a fictional
Japanese sushi brand called “Caverta.” It was built as a demo/showcase
website to present a premium dining experience online. The design draws
heavy inspiration from the reference website (caverta.matchthemes.com/sushi/)
but elevates it with richer animations, better typography, and a more
sophisticated dark color palette.

2. DESIGN SYSTEM & VISUAL IDENTITY
• Color Palette: Dark charcoal backgrounds with warm ember (#E07040 range)
accents, creating a moody, premium atmosphere reminiscent of a candle-lit
omakase counter.
• Typography: Cormorant Garamond for elegant display headings, Inter for
clean body text, and Shippori Mincho for Japanese character accents.
• Visual Effects: Grain texture overlay, ember glow pulsing on CTAs,
gradient text effects, deep shadow layers, and glassmorphism cards.
• CSS Architecture: Custom semantic design tokens defined in OKLCH color space
within src/styles.css — no hardcoded colors in components.

3. SECTIONS & FEATURES
The homepage is organized into 12 distinct sections rendered in sequence:

a) Navigation Bar — Fixed top header with scroll-driven background/blur
transition, split navigation links, and a “Reserve” CTA button.

b) Hero Banner — Full-viewport section with parallax background image,
letter-by-letter animated headline “Outstanding Japanese Sushi”,
gradient subtitle, call-to-action buttons, and an animated scroll
indicator.

c) Marquee Strip — Infinite horizontally scrolling text strip showcasing
Japanese culinary terms (Omakase, Nigiri, Sashimi, Maki, etc.).

d) Our Story / Tradition — Two-column layout with brand history (since 1896),
statistics counter (128 years, 4 generations), a hover-scaling image,
floating open-hours card, and a 4-column feature grid with icons.

e) Parallax Banner — Full-width parallax image section with scroll-driven
vertical movement, gradient overlay, and seasonal promotion text.

f) Interactive Menu — Tabbed menu system (Sushi Rolls, Main Dishes,
Desserts, Drinks) with animated image switching, staggered item reveals,
dotted price separators, and a “See Full Menu” button.

g) Philosophy / Essence — Two-column layout showcasing the restaurant’s
wabi-sabi philosophy with a rotating “since 1896” badge, images of
sushi platters, and descriptive text.

h) Events & Gallery — Wedding/event hosting section with a gallery of 4
images featuring hover lift and zoom effects, plus gradient overlays.

i) Table Reservation Form — Centered card with glassmorphism glow effect,
7 input fields (name, email, phone, guests, date, time, special requests),
and a styled submit button.

j) Reviews — 4.9/5 star rating display, testimonial quote from a fictional
food editor, and animated star icons.

k) News / Blog — 3-column card grid with category tags, dates, hover color
transitions, and “Read more” links.

l) Footer — 3-column layout with brand info, social media icons, location
addresses, business hours, phone number, and copyright.

4. ANIMATION & MOTION EFFECTS
• Scroll-triggered reveals: Every section uses a custom <Reveal> component
that animates elements in via fade-up when they enter the viewport.
• Parallax scrolling: Hero background and banner image shift at different
speeds relative to scroll position.
• Spring physics: Buttons, cards, and popup use spring-based hover/tap
animations (scale, bounce).
• Text animations: Hero headline letters animate in individually with
staggered delays; gradient text fades in smoothly.
• Gallery hover: Images scale up while cards lift upward on hover.
• Idle floating: The demo popup card has a continuous gentle floating
animation (y-axis oscillation).
• Menu transitions: Tab switching triggers crossfade image swaps and
staggered list item entrances.

5. DEMO POPUP CARD (Floating)
• Position: Fixed bottom-right corner, z-index 100.
• Style: Glassmorphism card with backdrop blur, semi-transparent gradient
background, 12px border radius, and soft shadow.
• Animation: Spring-entrance bounce on page load + continuous idle floating.
• Content: “Demo Website” status badge, title, description, two clickable
logo buttons (pabitra.net and Brown Fox IT), and a close (X) button.
• Responsive: 300px width on mobile, 340px on desktop.

6. TECHNOLOGY STACK
• Framework: React 19 + TanStack Start (Vite-based full-stack React framework)
• Language: TypeScript (strict mode)
• Styling: Tailwind CSS v4 with custom @theme tokens in src/styles.css
• Animation: Framer Motion (via motion/react package)
• Icons: Lucide React
• Fonts: Google Fonts (Cormorant Garamond, Inter, Shippori Mincho)
• Build Tool: Vite 7

7. ASSETS INCLUDED
All images are demo/stock photography:
• hero-sushi.jpg — Hero background image
• sushi-tradition.jpg — Our Story section image
• sushi-leaf.jpg — Parallax banner image
• sushi-rolls.jpg — Menu section image
• sushi-platter.jpg — Philosophy section image
• sushi-essence.jpg — Tasting menu image
• gallery-1.jpg through gallery-4.jpg — Photo gallery images
• pabitra-logo.png — Developer branding logo 1
• brownfox-logo.png — Developer branding logo 2

8. STATIC BUILD FOR CPANEL
A fully static, standalone build was generated in /tmp/static-build/ for
deployment on traditional shared hosting (cPanel):
• Removed all TanStack Router / server-function dependencies.
• Compiled to plain HTML/CSS/JS into a dist/ folder.
• Includes .htaccess with SPA routing fallback (RewriteRule).
• Available as both .zip and .tar.gz archives.
• No Node.js, database, or serverless runtime required — runs on any
Apache/Nginx shared host.

9. SEO & META TAGS
• Page Title: “Caverta — Outstanding Japanese Sushi Experience”
• Meta Description: “Traditional Japanese sushi crafted by master chefs
since 1896. Reserve your table in Brooklyn or Manhattan.”
• Open Graph tags for social sharing.
• Twitter Card support.
• Smooth scroll behavior and selection styling.

10. RESPONSIVE BREAKPOINTS
• Mobile-first design with fluid typography using CSS clamp().
• Grid layouts adapt from single column (mobile) to multi-column (desktop).
• Navigation collapses gracefully on smaller screens.
• Demo popup adjusts width for mobile vs desktop.

11. DEVELOPER / CREDITS
This is a demo website created for portfolio/showcase purposes.
Developer branding appears in the floating popup:
• pabitra.net
• brownfoxit.com

12. CURRENT STATUS
• Frontend: COMPLETE — All sections, animations, and responsive behavior
are fully implemented and visually polished.
• Backend: NOT IMPLEMENTED — The user indicated backend development will
be handled in a future phase.
• Booking Form: UI-complete but non-functional (no API endpoint).
• Menu Data: Static demo data; no CMS or database connection.