landing-page

Gradient Hero Section

A bold hero section with animated gradient background.

hero gradient landing cta | Claude 4.6 Opus

Prompt 

# Role
You are a Senior Frontend Engineer and Conversion Specialist with expertise in high-impact landing page design and CSS animation.

# Objective
Design a bold, full-width hero section with an animated gradient background, attention-grabbing typography, and dual CTA buttons — optimized for conversions and visual impact.

# Instructions
1. Create a full-viewport hero section (`min-height: 100vh`):
   - Animated gradient background using `@keyframes` with slow color shift
   - Use `background-size: 400% 400%` for smooth, seamless animation
   - Animation duration: 15–20 seconds, infinite loop
2. Add centered content with vertical alignment:
   - Large headline with gradient text effect (`background-clip: text`)
   - Keep headline under 8 words for maximum impact
   - Subtitle beneath in muted secondary color, max 2 lines
   - Optional: small badge or label above the headline (e.g., "New Release" or "v2.0")
3. Add two CTA buttons side by side:
   - Primary button: filled with accent color, bold text, hover brightness increase
   - Secondary button: outline/ghost style with border, hover fill transition
   - Both buttons with rounded corners and consistent padding
4. Responsive behavior:
   - Desktop: content centered with max-width constraint
   - Mobile: stack buttons vertically, reduce headline font size
   - Maintain comfortable padding on all screen sizes

# Constraints
- Dark mode first design — no light mode variant needed
- Pure CSS animations — no JavaScript for the gradient effect
- Use semantic HTML: `<section>`, `<h1>`, `<p>`, `<a>` or `<button>`
- Headline must use `background-clip: text` with `-webkit-background-clip: text` for gradient text
- Ensure text remains readable over the animated gradient at all animation frames
- No external dependencies

# Output Format
- Single HTML file with embedded `<style>` block
- Include realistic placeholder content (SaaS or product launch theme)
- Well-commented CSS with named `@keyframes` animation
- Responsive breakpoints at 640px and 1024px

Notes

Prompt

Role

You are a Senior Frontend Engineer and Conversion Specialist with expertise in high-impact landing page design and CSS animation.

Objective

Design a bold, full-width hero section with an animated gradient background, attention-grabbing typography, and dual CTA buttons — optimized for conversions and visual impact.

Instructions

  1. Create a full-viewport hero section (min-height: 100vh):
    • Animated gradient background using @keyframes with slow color shift
    • Use background-size: 400% 400% for smooth, seamless animation
    • Animation duration: 15–20 seconds, infinite loop
  2. Add centered content with vertical alignment:
    • Large headline with gradient text effect (background-clip: text)
    • Keep headline under 8 words for maximum impact
    • Subtitle beneath in muted secondary color, max 2 lines
    • Optional: small badge or label above the headline (e.g., “New Release” or “v2.0”)
  3. Add two CTA buttons side by side:
    • Primary button: filled with accent color, bold text, hover brightness increase
    • Secondary button: outline/ghost style with border, hover fill transition
    • Both buttons with rounded corners and consistent padding
  4. Responsive behavior:
    • Desktop: content centered with max-width constraint
    • Mobile: stack buttons vertically, reduce headline font size
    • Maintain comfortable padding on all screen sizes

Constraints

  • Dark mode first design — no light mode variant needed
  • Pure CSS animations — no JavaScript for the gradient effect
  • Use semantic HTML: <section>, <h1>, <p>, <a> or <button>
  • Headline must use background-clip: text with -webkit-background-clip: text for gradient text
  • Ensure text remains readable over the animated gradient at all animation frames
  • No external dependencies

Output Format

  • Single HTML file with embedded <style> block
  • Include realistic placeholder content (SaaS or product launch theme)
  • Well-commented CSS with named @keyframes animation
  • Responsive breakpoints at 640px and 1024px

Notes

  • Use background-size: 400% with @keyframes for smooth gradient animation.
  • Keep headline under 8 words for maximum impact and readability.
  • Test gradient text readability against the animated background at all frames.

Related Prompts

View prompt details

Feature Showcase Section

Icon-based feature grid with hover lift effect.

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in landing page design and visual hierarchy optimization. # Objective Build a feature showcase section that presents product or service features in a visually compelling 3-column grid with icon-driven cards, hover interactions, and responsive behavior. # Instructions 1. Create a section with a centered heading and subheading: - Section title: bold, large (e.g., "Why Choose Us" or "Features") - Subtitle: muted, descriptive one-liner beneath the title 2. Build a 3-column grid of feature cards: - Each card contains: - Icon container: 48x48px circle or rounded square with gradient background - SVG icon inside the container (use Lucide or Heroicons style) - Feature title: bold, concise (3–5 words) - Feature description: muted text, 1–2 sentences (under 20 words) 3. Add hover interactions on each card: - Subtle upward lift (`translateY(-4px)`) - Increased `box-shadow` for depth - Smooth transition (200ms ease) 4. Style with a dark-mode-first design: - Dark card backgrounds with subtle borders - Gradient icon containers using brand-compatible accent colors - Consistent spacing and alignment across all cards 5. Ensure responsive layout: - 1 column on mobile (<640px) - 2 columns on tablet (640px–1024px) - 3 columns on desktop (>1024px) # Constraints - Use semantic HTML (`<section>`, `<article>`, `<h3>`, `<p>`) - CSS Grid or Flexbox for layout — no JavaScript required - Use inline SVG icons or placeholder icon containers — do not rely on external icon CDNs - Keep all descriptions under 20 words for scannability - 6 feature cards total (2 rows of 3) for visual balance # Output Format - Single HTML file with embedded `<style>` block - Include 6 placeholder features with realistic SaaS content - Well-indented code with comments for each section

features icons grid +1
GPT 5.3 Ultra
View prompt details

Testimonial Carousel

Auto-scrolling customer testimonial slider.

# Role You are a Senior Frontend Engineer and Conversion Specialist with expertise in social proof components, CSS scroll mechanics, and lightweight interactive UI. # Objective Create an auto-scrolling testimonial carousel using CSS scroll-snap for smooth, native-feeling slide transitions — with minimal JavaScript for auto-advance and pause-on-hover functionality. # Instructions 1. Build the carousel container: - Horizontal scroll container with `scroll-snap-type: x mandatory` - Hide scrollbar using `::-webkit-scrollbar` and `scrollbar-width: none` - Show exactly 1 testimonial at a time (full-width slides) 2. Create each testimonial slide: - Large quote text (in quotation marks or with a quote icon) - Author section below the quote: - Avatar (circular, 48px) - Author name (bold) - Role and company (muted text) - Each slide snaps with `scroll-snap-align: center` 3. Add navigation dots: - Horizontal row of dots below the carousel - Active dot: filled accent color, slightly larger - Inactive dots: muted outline or smaller - Clicking a dot scrolls to the corresponding slide 4. Implement auto-advance behavior: - Auto-scroll to the next slide every 5 seconds - Pause auto-advance on hover - Resume auto-advance when mouse leaves - Loop back to the first slide after the last 5. Style in dark mode: - Dark background for the carousel section - Quote text in light color, author details in muted tones - Subtle card or section background to frame each testimonial # Constraints - CSS-first approach: use `scroll-snap` for sliding — not JavaScript-based transforms - Minimal JavaScript: only for auto-advance timer and dot click handlers - No external dependencies or frameworks - Show exactly 1 testimonial at a time for maximum focus - Include 4–5 testimonial slides with realistic placeholder content - Accessible: `aria-label` on the carousel, `role="tablist"` on dots # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include 4–5 realistic testimonials (SaaS or tech product theme) - Well-commented code with clear sections for layout, animation, and interaction

testimonial carousel social-proof +1
Gemini 3.1 Pro
View prompt details

Stripe-style Animated Hero

Modern SaaS hero with gradients and motion

# Role You are a Senior Frontend Developer and Animation Expert specializing in premium SaaS landing pages, motion design, and high-fidelity UI implementation. # Objective Create a modern SaaS landing page hero section inspired by Stripe's design language — featuring smooth gradient backgrounds, animated wave elements, clean typography, and a visually dense layered dark-mode aesthetic. # Instructions 1. Build a full-viewport hero section: - Dark background with layered gradient effects (multiple overlapping gradients) - Animated wave or mesh elements using CSS or SVG (subtle, continuous motion) - Depth through overlapping translucent layers 2. Add the content area (centered, max-width constrained): - Overline text: small label or badge (e.g., "Now Available" or "v2.0") - Headline: large, bold, clean typography with a modern font stack - Subtitle: 1–2 lines in muted color beneath the headline - Dual CTA buttons: primary (filled gradient) and secondary (ghost/outline) 3. Implement animated elements: - Smooth gradient background shift (slow, infinite animation) - Floating wave or blob shapes in the background (CSS animation or SVG) - Optional: subtle particle or dot grid effect 4. Typography requirements: - Modern font stack: `Inter`, `-apple-system`, `BlinkMacSystemFont`, `sans-serif` - Large headline: `clamp(2.5rem, 5vw, 4.5rem)` for responsive sizing - Proper font weights: 700–800 for headline, 400 for body 5. Ensure visual density: - Multiple overlapping layers create depth (not flat or sparse) - Accent glow effects behind CTAs or headline - Subtle noise texture overlay (optional) for richness # Constraints - Tailwind CSS for layout and typography; custom CSS for animations - Dark mode only — no light mode variant - Animations must be smooth and GPU-accelerated (`will-change`, `transform`) - Performance: no heavy libraries — CSS animations and SVG only - Responsive: works on all screen sizes with fluid typography - Keep animations subtle — they should enhance, not distract # Output Format - Single HTML file with Tailwind CSS CDN and embedded `<style>` for animations - Include realistic SaaS placeholder content (fintech or developer platform theme) - Well-commented code separating layout, animations, and content sections

stripe animation gradient
Claude 4.6 Opus