SARYA — Staged V0 Build Plan (Free-Tier Friendly)

Generate these as separate prompts, in order, in the same V0 project/chat so context carries over. Use the Mini model where possible to stretch credits further; switch to Pro only if a step’s output looks weak.

PROMPT 1 — Homepage v1 (send this first)

You are a senior product designer and frontend developer building a luxury agency homepage in Next.js + Tailwind + Framer Motion.

Build the SARYA homepage. Single page, fully responsive, production-quality code. No 3D yet — motion only. Do not add placeholder sections beyond what’s listed below. Do not use lorem ipsum.

Brand
Name: SARYA
Tagline: Digital Experiences Beyond Imagination.
Industry: Luxury 3D Digital Experience Studio

Colors
Background #050505 · Surface #0D0D0D · Text #F8F8F5 · Secondary #A8A8A8 · Accent Gold #C8A96A · Glass rgba(255,255,255,0.04) · Hairline border rgba(255,255,255,0.08)

Typography
Display: Cormorant Garamond. Body/UI: Inter. Large editorial headlines, generous whitespace, uppercase tracked eyebrows/labels.

Style
Editorial luxury, minimal, dark, cinematic. No gradients everywhere, no generic SaaS look. Every section full-bleed with strong vertical rhythm.

Sections (in order):

Hero — full viewport. Headline: “We Don’t Build Websites. We Build Digital Experiences.” Subheadline: “Luxury websites engineered to captivate audiences, increase conversions and elevate modern brands.” Two CTAs: “View Projects” / “Book Discovery Call” (magnetic hover). Simple animated gold-particle canvas or CSS/SVG background (no Three.js yet) with mouse parallax. Scroll indicator. Custom cursor (dot + trailing ring). Thin gold scroll-progress bar at top of page.
About — editorial split layout, large image placeholder area, short philosophy-driven copy (2 short paragraphs + one italic pull quote).
Services — 7 interactive cards (Luxury Website Design, 3D Web Experiences, UI/UX Design, Brand Identity, Creative Direction, Motion Design, High Performance Development), tilt-on-hover, gold border draw-in.
Featured Projects — 4 case study preview cards (image, category, client name, one-line description), hover zoom, alternating layout. Realistic premium copy, no lorem ipsum.
Why Choose SARYA — bento grid (Fast, Premium, Conversion Focused, SEO Optimized, Mobile First, Modern Technology, Luxury Design, Future Ready).
Statistics — animated scroll-triggered counters (Projects Completed, Happy Clients, Average Conversion Increase, Years Experience).
Testimonials — 3 glassmorphic cards, realistic named testimonials.
Contact — large typography contact form (Name, Email, Project Type, Message) with floating labels and gold focus states. Include: Ehsaan · ekathjoo@gmail.com · +91 94190 75057. “Book Discovery Call” button.
Footer — SARYA wordmark, nav, social icons, repeat contact line, copyright.

Motion: Framer Motion only for this pass (skip GSAP/Lenis/Three.js — added later). Scroll-reveal on all sections, staggered children, luxury easing [0.16, 1, 0.3, 1]. Respect prefers-reduced-motion.

Deliver full working code for this single page now.

PROMPT 2 — Add the 3D hero (send after Prompt 1 looks good)

In this same project, upgrade only the Hero section: replace the CSS/SVG particle background with a React Three Fiber scene — floating gold-glass particles reacting to mouse movement, soft bloom, one slowly rotating abstract glass/chrome sculptural object. Lazy-load it, cap at 60fps, provide a lightweight fallback for prefers-reduced-motion and low-power devices. Keep every other section unchanged.

PROMPT 3 — Case study pages (send after Prompt 2)

Using the same design system and colors, build 4 individual case study pages linked from the Featured Projects cards on the homepage. Each page: hero image, Category/Client header, Challenge / Solution / Results sections, full-width editorial layout, shared-element-style transition back to the homepage grid if feasible in Next.js routing.

PROMPT 4 — Polish pass (send last, optional)

Add: GSAP ScrollTrigger refinements, Lenis smooth scroll, process timeline section (Discover → Strategy → Design → Prototype → Development → Launch), FAQ accordion, Awards/craft-signal section, film-grain noise overlay site-wide. Keep all existing sections and copy exactly as-is — only add these.

Credit-saving tips

Keep each prompt scoped to what’s listed — don’t re-paste the full brand brief every time; V0 keeps chat context in the same project.
Review output before asking for changes; batch your feedback into one follow-up message instead of many small ones.
Use Mini for prompts 1, 3, and 4; consider Pro only for prompt 2 (the 3D work benefits most from the stronger model).