Back to templates
Landing template
Wadada Hero
Editorial scroll-driven landing — text-gradient scroll, timeline, stagger testimonials, smooth-scroll hero, embedded chatbot.
Next.jsTypeScriptTailwind CSSFramer Motionshadcn/ui
Clone it
terminalClone the templategit clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/blog-template ./wadada-hero
cd wadada-hero
pnpm install
pnpm devWhat's in the box
- Smooth-scroll hero with motion blur photography
- Text-gradient-scroll mission statement
- Timeline with alternating layout
- Stagger testimonials carousel
- Floating chatbot widget
When to use
Use it
Mission-driven brands, run clubs, fitness, lifestyle communities, anywhere you want long-scroll storytelling with photography and emotion.
Skip it
Information-dense product pages — Wadada is narrative, not feature-list.
The 0 customization sections
When you ask your AI agent to customize this template, it will walk through these sections in order, asking you the questions for each. The agent only edits the files needed to apply your answers — no restructuring.
Customization prompt — paste into your AI agent
After you clone, open the project in Claude Code, Cursor, Cline, or any agent that reads files. Paste this prompt to start the section-by-section interview:
paste into your AI agentCustomization interview promptI want to customize the "Wadada Hero" template using the VibeKit customization guide.
Walk me through the 0 sections one at a time. For each section, ask the questions defined in the guide below, wait for my answers, then move on.
After all sections are answered, edit ONLY the files needed to apply my answers — config files, content, branding. Don't restructure the project.
CUSTOMIZATION GUIDE:
Swap photography URLs in `app/page.tsx`. Edit mission statement text. Re-author timeline entries (image, alt, title, description, layout). Customise testimonials in `components/ui/stagger-testimonials.tsx`.
SECTIONS:
Begin with section 1 now.