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.

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

Create hero section for {app} in style of {reference}

Use Iconify {Solar/Lucide/Phosphor}

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

Animate logos with marquee animation looping infinitely using duplicated items and alpha mask

Add beam animation connecting {a} to {b} with subtle sonar decorations

Adapt a new {type} section, match existing styles

Common Mistakes

both

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