---

name: creating-landing-pages description: Use when building marketing landing pages or SaaS homepages - provides a systematic workflow for hero-first design, animation patterns, social proof, and section expansion that creates consistent, professional results

Creating Landing Pages

Overview

Build landing pages hero-first. The hero section sets colors, typography, and spacing that AI uses consistently for the rest of the site. Spend 50% of effort here.

When to Use

• Building a new marketing site or SaaS landing page
• Redesigning an existing homepage
• Creating product launch pages
• Need consistent design across multiple sections

Workflow

1. Hero Section (50% of time)

Start with a reference-based prompt:

CopyCreate the hero section for my {app_type} called {name} in the style of {reference_site}.

Include:
- Nav bar with logo and links
- Eyebrow text (small label above headline)
- Headline and subheadline
- Primary and secondary CTA buttons
- Social proof element
- Hero visual/illustration

Pro tip: Include a screenshot of the reference site for significantly better results.

2. Icons

Use Iconify with a specific icon set:

CopyUse Iconify {icon_set_name} for all icons.

3. Animations

Entry animations (add to hero and each section):

CopyAnimate fade in, slide in, blur in, element by element.
Use 'both' instead of 'forwards'.
Don't use opacity 0.

Why these specifics:

• animation-fill-mode: both - Applies styles before AND after animation
• Avoiding opacity: 0 - Prevents flash of invisible content
• Element-by-element - Creates professional staggered reveal

Advanced animations:

CopyAdd beam animation connecting {element_a} to {element_b}.
Add subtle sonar pulse effect on the {element}.
Add gradient border that animates on hover.

4. Social Proof

Place in hero or immediately below:

CopyAdd social proof with {star_rating} and {review_count}.
Include logo marquee with {company_logos}.
Animate the logos with marquee animation looping infinitely
using duplicated items and alpha mask.

5. CTAs and Buttons

Default buttons are basic. Stand out with:

CopyChange main button to {paste_code_from_uiverse_or_codepen}.
Add a 1px border beam animation around the pill-shaped
main button on hover.

Resources for unique buttons:

• UIVerse - Copy-paste button components
• CodePen - Search "button animation"

6. Background Effects

For animated backgrounds, use Unicorn Studio:

1. Remix an existing template
2. Export and embed
3. Layer behind hero content

7. Section Expansion

Once hero is complete, add sections by referencing the existing design:

CopyAdapt a new {section_type} section. Match the existing
color scheme, typography, and spacing. Change texts,
names and numbers to fit {your_content}.

Common section types:

• Features (grid or alternating)
• How it works / Action plan
• Pricing table
• Testimonials
• FAQ accordion
• Final CTA
• Footer

Pro tip: Insert a screenshot of your current hero when prompting for new sections.

8. Human Touch

AI creates structure. You refine:

• Headlines - Use ChatGPT to brainstorm alternatives
• Feature copy - Make benefits specific, not generic
• CTAs - Test different action verbs
• Images - Use Midjourney + Nano Banana Pro for custom visuals

Quick Reference Prompts

Common Mistakes

Section Checklist

• Hero with all elements (nav, eyebrow, headline, CTA, social proof, visual)
• Consistent icon set throughout
• Entry animations on each section
• Social proof visible above fold
• Unique button styling
• Features section
• How it works / process
• Testimonials or case studies
• Pricing (if applicable)
• FAQ
• Final CTA
• Footer with links

Animation CSS Reference

Copy/* Entry animation base */
@keyframes fadeSlideIn {
  from {
    opacity: 0.01; /* Not 0 - prevents flash */
    transform: translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.animate-entry {
  animation: fadeSlideIn 0.6s ease-out both;
}

/* Stagger children */
.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }
/* ... */