Back to guide/General Productivity

Landing Page Hero

Provides exact text content, layout structure, and animation details so v0 generates a complete, shippable hero section rather than a wireframe-level placeholder.

v0-promptsproduct_typenav_linksvisual_element
Edit View
Prompt
Create a hero section for a {{product_type}} landing page.\n\nStructure:\n- Navigation bar: logo left, {{nav_links}} center, "Get Started" button right\n- Hero: Split layout — left side has headline, description, two CTA buttons; right side has {{visual_element}}\n- Headline: "{{headline}}" (text-5xl, font-bold, tracking-tight)\n- Description: "{{description}}" (text-lg, text-gray-600, max-w-lg)\n- Primary CTA: "{{primary_cta}}" — {{accent_color}} bg, white text, large\n- Secondary CTA: "{{secondary_cta}}" — outline style\n\nBelow the fold: Logo bar with "Trusted by" and 5 placeholder company logos (gray, grayscale filter).\n\nDesign: Clean and modern. White background, generous whitespace. Subtle gradient orb behind the hero visual. Smooth entrance animation (fade up, 600ms stagger).

Variables to customize

{{product_type}}{{nav_links}}{{visual_element}}{{headline}}{{description}}{{primary_cta}}{{secondary_cta}}{{accent_color}}

Why this prompt works

Provides exact text content, layout structure, and animation details so v0 generates a complete, shippable hero section rather than a wireframe-level placeholder.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.