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:

Create 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:

Use Iconify {icon_set_name} for all icons.

| Icon Set | Style | Best For | |----------|-------|----------| | Lucide | Clean, minimal | General use | | Solar | Modern, bold | SaaS products | | HeroIcons | Outlined/solid | Professional apps | | Iconoir | Thin, elegant | Design tools | | Phosphor | Versatile weights | Flexible needs |

3. Animations

Entry animations (add to hero and each section):

Animate 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:

Add 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:

Add 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:

Change 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:

Adapt 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

| Task | Prompt | |------|--------| | Hero | Create hero section for {app} in style of {reference} | | Icons | Use Iconify {Solar/Lucide/Phosphor} | | Entry animation | Animate fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. | | Logo marquee | Animate logos with marquee animation looping infinitely using duplicated items and alpha mask | | Beam effect | Add beam animation connecting {a} to {b} with subtle sonar decorations | | New section | Adapt a new {type} section, match existing styles |

Common Mistakes

| Mistake | Fix | |---------|-----| | Starting with features instead of hero | Hero first - it sets the design system | | Using default buttons | Reference UIVerse/CodePen for standout CTAs | | Generic animations | Use specific animation prompts with both fill mode | | Inconsistent new sections | Always reference existing design or screenshot | | Skipping social proof | Add ratings, logos, or testimonials in/near hero | | Over-animating | Subtle > flashy. Entry animations + 1-2 special effects |

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

/* 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; }
/* ... */