Best for
Minimalist consumer-brand or wellness/lifestyle startup that wants a clean, visually focused landing page with smooth scroll animations and a lead-capture or waitlist section.
Stack
A ready-made Nua Landing Page UI you can fork, run, and customize with the prompt pack below.
What's actually inside
The honest engineer's breakdown — what the Nua Landing Pagetemplate does, how it's wired, and where it's opinionated.
Nua is a single-page scroll layout designed for consumer products that lead with aesthetics and earn trust through calm, well-spaced typography. The page opens with a HeroSection: a large typographic headline over a gradient or image background and a single primary CTA button. Immediately below the fold is BrandVideoOrImage — a full-bleed autoplay muted video or hero image that anchors brand identity without text competing for attention.
The BenefitsList follows with 3-4 horizontal or vertical cards, each pairing an icon with a short editorial line — no data tables, no bullet overload. TestimonialsRow surfaces 2-3 customer quotes with avatar, name, and one-line attribution, using Framer Motion scroll-triggered fade-in to make the social proof feel earned rather than dumped. The EmailSignupForm at the bottom is centred and minimal: email input, a shadcn/ui Button, and three explicit states — idle, loading, and success — so non-technical founders can see exactly what their visitors experience.
Honest caveat: the EmailSignupForm's loading state is set to true on submit and only cleared on a successful response — if the /api/waitlist route throws a network error, the button stays in a spinner state indefinitely. The third gotcha below has a one-prompt fix. A second caveat: the Framer Motion entrance animations on BenefitsList and TestimonialsRow can fire immediately on mobile because those elements are already in the viewport on a small screen. The final gotcha covers the viewport amount fix.
Key UI components
HeroSectionLarge typographic headline over a gradient or image background with a primary CTA button.
BrandVideoOrImageFull-bleed autoplay muted video or hero image below the fold to anchor brand identity.
BenefitsList3-4 benefit cards — icon plus short editorial copy — arranged horizontally or vertically.
TestimonialsRow2-3 customer quote cards with avatar, name, and one-line attribution, scroll-animated.
EmailSignupFormCentred email input and shadcn/ui Button with idle, loading, and success states.
FooterMinimalLogo, legal links, and social handles — intentionally minimal to keep the page focused.
Libraries it leans on
framer-motionScroll-triggered fade and slide-up on BenefitsList and TestimonialsRow cards.
shadcn/uiButton, Input, and Form components for the EmailSignupForm with validation and loading state.
Fork it and get it running
Forking the Nua Landing Page template is beginner-friendly — you can update brand colors, headline text, and publish a live URL entirely in your browser without writing a single line of code.
Open the template in V0
Navigate to https://v0.dev/chat/community/mMBXHA2AgoH in your browser. The preview loads immediately — scroll from the HeroSection through BenefitsList, TestimonialsRow, and EmailSignupForm to see the full scroll experience. Note the Framer Motion entrance animations on the benefit cards as you scroll.
Tip: Scroll slowly on the first pass to make sure all section animations play — this helps you spot any missing sections before you fork.
You should see: All six sections (Hero, BrandVideoOrImage, BenefitsList, TestimonialsRow, EmailSignupForm, FooterMinimal) are visible and animations trigger on scroll.
Fork the project
Click the Fork button in the top-right area of the V0 editor. V0 creates a private copy attached to your account and opens it in the chat interface with the full codebase loaded. Your fork is now independent — you can experiment freely without affecting the community original.
You should see: V0 opens your forked project with a new project name in the header and the editor and preview both active.
Update copy and colors in Design Mode
Press Option+D (Mac) to enter Design Mode. Click the hero headline to edit the text directly — change it to your brand name or product tagline. Open the Themes panel in Design Mode to update the primary color. All these changes are free; they do not consume V0 credits. This is the fastest path to a page that feels like yours.
Tip: Change the CTA button text in HeroSection and the EmailSignupForm button in the same Design Mode session to keep the messaging consistent.
You should see: Hero headline, primary color, and CTA button text reflect your brand without spending any credits.
Add email capture backend (optional)
If you want real email capture, open the Vars panel in the V0 sidebar and add your email provider key. For Supabase (recommended), add SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY. For Resend, add RESEND_API_KEY. If you only need a static demo — for a pitch deck or concept test — skip this step and the form's success state still triggers visually on submit.
You should see: Your environment variables are saved in the Vars panel and will be injected into the deployed build automatically.
Publish to production
Click Share in the top-right of V0, open the Publish tab, and click 'Publish to Production'. The deployment completes in under 60 seconds and you receive a live .vercel.app URL. Share this link directly — it works on all devices and the Framer Motion animations play correctly in production after hydration.
You should see: A live .vercel.app URL is returned; the EmailSignupForm, BenefitsList animations, and TestimonialsRow all render correctly.
Connect a custom domain
From the V0 project settings menu in the top-right, open the linked Vercel Dashboard. Navigate to Domains → Add domain, enter your domain name, and follow the CNAME or A record instructions shown on screen. SSL is provisioned automatically. After DNS propagation (minutes to a few hours depending on your registrar), your Nua landing page is live on your brand domain.
You should see: Your custom domain resolves to the Nua landing page with a valid SSL certificate and the full scroll animation experience intact.
The prompt pack
Copy-paste these straight into v0's chat to customize the Nua Landing Pagetemplate. Each one names this template's own components — no generic filler.
Update brand colors and hero headline
Propagates a new brand color and headline through HeroSection, BenefitsList icons, and EmailSignupForm in a single edit.
Change the HeroSection headline to 'Discover Your Balance' and update the primary brand color throughout the page from its current value to #4A90D9. Apply the new color to the CTA button in HeroSection, the active-state icons in BenefitsList, and the submit button in EmailSignupForm. Use Tailwind CSS custom color utilities — add the hex value to the theme.extend.colors section in tailwind.config.js.
Add a sticky NavBar with smooth-scroll links
Adds a sticky navigation bar that appears clean on load and gains a border after scrolling, with anchor links targeting BenefitsList, TestimonialsRow, and EmailSignupForm.
Add a sticky top navigation bar with the brand logo on the left and three anchor links on the right: 'Benefits', 'Testimonials', and 'Join Us'. Each link should smooth-scroll to the corresponding section using that section's HTML id attribute. The NavBar should use a white background with a subtle bottom border — the border should only appear after the user has scrolled 50px down the page, toggled via a useEffect scroll listener.
Animate BenefitsList cards with staggered entrance
Adds staggered scroll-entrance animations to BenefitsList cards that are mobile-safe — the amount: 0.3 viewport threshold prevents the animation from firing before the card is meaningfully visible.
Wrap each card in BenefitsList with a framer-motion motion.div. Start each card at opacity 0 and translateY 30px. Use the whileInView prop with viewport={{ once: true, amount: 0.3 }} to animate each card to full opacity and translateY 0 when at least 30% of the card is visible in the viewport. Apply a stagger delay of 0.15 seconds between cards using a delay prop derived from each card's index.Connect EmailSignupForm to a Supabase waitlist table
Wires the EmailSignupForm to a real Supabase waitlist table with duplicate detection, proper error handling, and a loading state that always resolves.
Create a Supabase table named nua_waitlist with columns: id (uuid, primary key), email (text, unique), created_at (timestamptz, default now()). Update the EmailSignupForm to POST to /api/waitlist with the email value. Create the route handler at app/api/waitlist/route.ts — it should insert the email using the Supabase service role key (never the anon key for writes), return a 409 status with a JSON error if the email already exists, and a 200 on success. Add error handling with try/catch/finally so the EmailSignupForm loading state is always cleared — show a red shadcn/ui Toast on network failure and re-enable the submit button. Store SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY in the Vars panel.
Add a Stripe early-access payment option
Adds a side-by-side free-waitlist and paid early-access CTA below EmailSignupForm, using a Stripe Payment Link for zero-backend payment collection.
Below the existing EmailSignupForm, add a two-option row: the current free waitlist signup form on the left, and a 'Get Early Access — $29' button on the right. Wire the paid button to a Stripe Payment Link URL stored in the env var NEXT_PUBLIC_STRIPE_PAYMENT_LINK — clicking the button should open the Stripe-hosted payment page in the same tab. After Stripe redirects back to /success, show a personalised success section replacing the HeroSection content (e.g., 'Welcome! Your early access is confirmed.'). Add NEXT_PUBLIC_STRIPE_PAYMENT_LINK to the Vars panel.
Gotchas when you extend it
The failures people actually hit when they push this template past its defaults — and the exact fix for each.
`ReferenceError: localStorage is not defined` during Vercel buildWhy: Framer Motion's useMotionValue or any brand-theme persistence code in HeroSection or EmailSignupForm may access localStorage during the server-side render pass. V0 preview does not flag this; Vercel deployment fails with this error at build time.
Fix: Move every localStorage.getItem and localStorage.setItem call inside a useEffect hook so they only run in the browser. Add 'use client' to the component file if it is currently a Server Component.
Find and fix all localStorage access in this project. Move each read into a useEffect hook so it only runs in the browser. Add 'use client' to the component file if not already present.
Tailwind v3/v4 version mismatch after local export causes missing stylesWhy: V0 targets Tailwind CSS v3.4.x. When you scaffold a Next.js project locally with create-next-app it now defaults to Tailwind v4, which removes tailwind.config.js and changes the configuration syntax — classes that worked in the V0 preview no longer apply.
Fix: When working locally, install `tailwindcss@3` explicitly and restore tailwind.config.js with the standard content array. Use `--legacy-peer-deps` if peer dependency conflicts appear.
This project uses Tailwind CSS v3. If you scaffolded locally with create-next-app, downgrade Tailwind to v3.4 and restore tailwind.config.js with the standard content paths array and plugins config so all classes from the V0 output work correctly.
EmailSignupForm submit button shows a loading spinner indefinitely after a network errorWhy: The form's loading state is set to true on submit but only cleared in the success branch — if the fetch to /api/waitlist throws or returns an unexpected status, the button stays in its loading state and the user is stuck.
Fix: Wrap the fetch call in try/catch/finally. Reset the loading state in the finally block so it always clears regardless of outcome. Show a shadcn/ui Toast error message and re-enable the submit button.
Add error handling to the EmailSignupForm submit handler. Use try/catch/finally so the loading state is always cleared — show a red shadcn/ui Toast on network failure or non-200 response and re-enable the submit button so the user can try again.
Framer Motion whileInView animations fire immediately on mobile without a visible entrance effectWhy: On small viewports, BenefitsList and TestimonialsRow elements are already partially in the viewport when the page loads. The whileInView animation completes instantly and the entrance effect is never seen.
Fix: Set amount: 0.3 in the viewport option of every whileInView motion.div so the animation only triggers when at least 30% of the element is visible, not the moment any pixel enters the screen.
Update all whileInView motion.div components in BenefitsList and TestimonialsRow to use viewport={{ once: true, amount: 0.3 }} so entrance animations only fire when the element is meaningfully visible on screen, including on mobile viewports.Template vs. custom — the honest call
A forked template gets you far, fast. Here's where it holds up, and where you'll outgrow it.
The template is enough when
- Consumer brand or wellness product launching an MVP landing page with email waitlist in under a day.
- Indie maker validating demand before building a full product — the EmailSignupForm is the only backend required.
- Freelancer or agency needing a clean client-facing landing page concept deliverable in hours.
- Design portfolio piece demonstrating a minimalist consumer landing page with scroll animations.
Go custom when
- Product requires a full CMS for editorial updates — blog posts, seasonal campaigns — that a non-technical team can edit without touching V0.
- Landing page needs server-side personalisation per user segment, geo, or traffic source.
- You need advanced analytics events (conversion funnels, heatmaps, A/B tests) beyond simple email capture.
- The brand has a custom design system with specific typography, motion tokens, and component variants that V0 will not preserve consistently across many edits.
If the Nua template is the starting point for a consumer product that will grow into a multi-page site with CMS, auth, and payments, RapidDev can extend the V0 prototype without breaking the visual language you have already established.
Frequently asked questions
Is the Nua V0 template free to use?
Yes. Community templates on v0.dev are free to fork. Forking consumes a small number of your V0 plan credits. The template code itself carries no licensing fee — your forked copy is yours.
Can I use this template commercially for a product I plan to sell?
Yes. V0 community templates are published under permissive terms that allow commercial use. Check the current v0.dev terms of service for the authoritative statement, as licensing terms can change.
Why does my fork show a blank screen after I deploy it to Vercel?
The two most common causes are (1) a localStorage access outside of useEffect that crashes the server-side render, and (2) a Tailwind v3/v4 version mismatch after local export. The first gotcha in the section above has a copy-paste fix prompt for the localStorage issue. For the Tailwind mismatch, install tailwindcss@3 explicitly when scaffolding locally.
How do I connect the EmailSignupForm to a real email list?
Use Prompt 4 in the pack: it walks V0 through creating a Supabase nua_waitlist table and a /api/waitlist route handler that inserts emails server-side with duplicate detection. You need SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY in the Vars panel.
The EmailSignupForm submit button gets stuck in a loading state — how do I fix it?
This happens when the fetch to /api/waitlist throws an error and the loading state is never reset. The fix is one try/catch/finally block around the fetch call. Paste the fix prompt from Gotcha 3 above into the V0 chat and it will add the error handling automatically.
The scroll animations don't play on mobile — what's happening?
On small screens, BenefitsList and TestimonialsRow elements are partially visible on load, so whileInView triggers immediately and the animation completes before the user scrolls to them. Set viewport={{ once: true, amount: 0.3 }} on all motion.div wrappers — Prompt 3 does this with the stagger animation update.
Can RapidDev customize the Nua template into a full multi-page site?
Yes. RapidDev regularly extends V0 landing pages into complete sites with CMS, auth, and payments. The Nua template is a clean starting point — we can add additional pages, a headless CMS integration, and production deployment without discarding the visual design.
Can I add a video to the BrandVideoOrImage section?
Yes. Ask V0: 'Update BrandVideoOrImage to use an HTML5 autoplay muted loop playsInline video tag pointing to [your video URL] instead of the current image. Keep the full-bleed aspect ratio and the same section height.' For hosted video, Cloudflare Stream or Mux are good choices for production use.
Outgrowing the template?
RapidDev turns v0 prototypes into production apps — real auth, database, and payments — at $13K–$25K.
Book a free consultation30-min call. No commitment.