Back to templates
Landing template

Apple Watch Landing

Hardware / device product landing — photo gallery, color picker, spec sections, reviews, multi-language support.

Next.jsTypeScriptTailwind CSSshadcn/uilanguage context

Clone it

terminalClone the template
git clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/blog-template ./apple-watch-landing
cd apple-watch-landing
pnpm install
pnpm dev

What's in the box

  • Product image carousel (5 photos)
  • Color / variant picker with named swatches
  • Spec sections + review stars
  • Multi-language context (i18n hook)
  • Contact form for inquiries

When to use

Use it

Hardware launches, physical products, device marketing, anywhere you need a polished product detail / launch page with image carousel and variant picker.

Skip it

Multi-product catalogs — use the Commerce template with Shopify instead.

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 prompt
    I want to customize the "Apple Watch Landing" 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 product imagery in `app/page.tsx`. Edit `colorOptions` array for variants. Replace marketing copy. To use i18n meaningfully, extend `contexts/language-context.tsx` with your locale dictionaries.
    
    SECTIONS:
    
    
    Begin with section 1 now.

    Other templates