Creative cards fan hero with dot grid background, 10 perspective fan cards, and dark search bar
Hero template for AI product and SaaS landing pages with a dot grid background, a fan of five perspective-rotated gradient cards, a prompt preview block, and a dark search bar. Paste into Bolt, Claude Code, Replit, or Lovable.
About this vibe coding template
A centred hero on a warm dot grid background in light grey. The serif display headline sits above ten gradient cards arranged in a staggered fan using perspective transforms and progressive rotation angles. Each card uses a different gradient from a six-colour palette. Below the fan, a white prompt preview box shows a sample AI prompt that demonstrates the product. Below that, a dark search bar with a blue button acts as the primary CTA. The combination of the fan, the prompt, and the search bar together communicates an AI product or template library without any screenshots. The dot grid background adds texture without competing with the foreground content. All transforms are CSS only with no animation library.
Common questions about this template
How do I change the card gradients?
Ask your vibe coding tool to update the background property on each .card:nth-child() rule. Each card has its own gradient defined on separate lines. Replace the gradient stops with your brand colours or a unified palette to match your product identity.
How do I change the prompt text?
Ask Bolt, Claude Code, Replit, or Lovable to update the text inside the .prompt-text div. Replace the sample prompt with a real prompt from your product to show users exactly what they can do with it.
How do I change the search bar placeholder and button label?
Ask your vibe coding tool to update the placeholder attribute on the .search-input element and the text inside the .search-btn button. Wire the button to your search or browse route.
Use this AI coding template for
- ·AI product and template library landing pages where a fan of gradient cards communicates variety and quality
- ·SaaS and creative tool heroes that want a centred layout with both a visual and a functional search CTA
- ·Vibe coding tool and AI development platform pages where showing a real prompt increases trust and conversion