Component Library

Fly Super includes a comprehensive library of 35+ professionally designed components across 13 categories. Each component is conversion-optimized, mobile-responsive, and fully customizable.

How Components Work

Component Structure

Every component in Fly Super has:

• Category: The general type (hero, features, pricing, etc.)
• Variant: The specific design variation (simple, split, grid, etc.)
• Schema: Configurable properties (text, images, buttons, settings)
• Responsive: Automatically adapts to mobile, tablet, and desktop

Using Components

Components can be:

• AI-Selected: AI picks appropriate variants during generation
• Swapped: Change to different variant in Edit Mode
• Customized: Edit properties (text, images, colors, etc.)
• Reordered: Drag-and-drop sections in Edit Mode

---

Component Categories

1. Navigation

Purpose: Headers and navigation menus for the top of your page

Available Variants

Simple

• Clean horizontal menu
• Logo + navigation links
• CTA button on right
• Best for: Simple marketing sites

With CTA

• Prominent call-to-action button
• Secondary button option
• Multiple navigation items
• Best for: Lead generation pages

Dropdown

• Multi-level menu support
• Dropdown for product categories
• Mobile hamburger menu
• Best for: Sites with many pages

Mega Menu

• Large dropdown with categories
• Featured items and descriptions
• Icon support
• Best for: Complex products with multiple offerings

---

2. Hero

Purpose: Large opening section that grabs attention and communicates value

Available Variants

Simple

• Headline + subheadline
• Primary and secondary CTAs
• Optional image/illustration
• Best for: Clear, focused messaging

Split

• Text on one side, visual on other
• Balanced layout
• Great for product screenshots
• Best for: Showcasing product UI

Video

• Auto-playing background video
• Text overlay
• Strong visual impact
• Best for: Product demos, brand storytelling

Form Hero

• Hero with embedded form
• Capture leads immediately
• Reduces friction
• Best for: Webinar registration, lead capture

Bento Grid

• Modular grid layout
• Multiple content blocks
• Modern, visual design
• Best for: Multiple features or benefits

Animated

• Motion effects and transitions
• Eye-catching entrance
• Modern aesthetic
• Best for: Tech products, app launches

---

3. Social Proof

Purpose: Build trust with testimonials, reviews, and customer logos

Available Variants

Logo Cloud

• Grid of customer/partner logos
• Grayscale or color options
• Horizontal scrolling
• Best for: Showing brand partnerships

Testimonials Grid

• Multiple customer quotes
• Photos and names
• Star ratings
• Best for: Highlighting customer satisfaction

Testimonials Carousel

• Rotating testimonials
• Auto-play or manual navigation
• Full quotes with context
• Best for: Detailed customer stories

Reviews

• Star ratings prominent
• Quote snippets
• Platform badges (G2, Capterra, etc.)
• Best for: Showing verified reviews

Stats

• Large numbers with context
• "10,000+ customers", "$1M+ saved"
• Visual impact
• Best for: Quantifiable achievements

---

4. Trust

Purpose: Build credibility with security, compliance, and guarantees

Available Variants

Security Badges

• SSL, encryption icons
• Compliance logos (SOC2, GDPR, ISO)
• Trust seals
• Best for: B2B SaaS, ecommerce

Guarantees

• Money-back guarantee
• Free trial messaging
• Risk-free language
• Best for: Reducing purchase anxiety

Certifications

• Official certifications
• Industry accreditations
• Award badges
• Best for: Enterprise sales, regulated industries

As Seen In

• Media logos
• Press mentions
• Publication features
• Best for: PR and brand authority

---

5. Features

Purpose: Highlight product capabilities and benefits

Available Variants

Feature Grid

• 3-6 feature cards
• Icons or images
• Short descriptions
• Best for: Overview of key features

Feature List

• Vertical list layout
• Icons + headlines + descriptions
• Checkmarks or bullet points
• Best for: Detailed feature breakdown

Feature Tabs

• Tabbed navigation
• Different feature categories
• Interactive exploration
• Best for: Complex products with feature sets

Bento Features

• Modular grid layout
• Mixed sizes and styles
• Visual variety
• Best for: Modern, design-forward pages

Comparison Table

• Your product vs competitors
• Feature-by-feature comparison
• Checkmarks and X's
• Best for: Competitive positioning

Screenshot Features

• Large product screenshots
• Annotated with callouts
• Shows actual product
• Best for: SaaS and app products

---

6. Pricing

Purpose: Present pricing tiers, plans, and payment options

Available Variants

Pricing Cards

• 2-4 pricing tiers
• Feature lists per plan
• CTA buttons
• Best for: SaaS, subscription products

Pricing Table

• Detailed feature comparison
• Multiple columns for plans
• Toggle for monthly/annual
• Best for: Complex pricing with many features

Simple Pricing

• Single price point
• Clear and minimal
• One CTA
• Best for: Single product, straightforward pricing

Pricing with FAQ

• Pricing cards + FAQ section
• Answers common pricing questions
• Reduces friction
• Best for: Complex pricing that needs explanation

Usage-Based Pricing

• Slider or calculator
• Dynamic pricing display
• Shows cost based on usage
• Best for: API products, usage-based models

---

7. FAQ

Purpose: Answer common questions and reduce support burden

Available Variants

Accordion

• Click to expand answers
• Vertical list
• Clean, organized
• Best for: Many questions (10+)

Grid

• Questions and answers visible
• 2-column layout
• Scannable
• Best for: Fewer questions (4-8)

Tabbed FAQ

• Categories of questions
• Tabs for different topics
• Organized by theme
• Best for: Multiple question categories

With Search

• Search functionality
• Filter questions
• Instant results
• Best for: Very large FAQ sections (20+)

---

8. CTA (Call-to-Action)

Purpose: Drive conversions with compelling calls-to-action

Available Variants

Simple CTA

• Headline + button
• Clean and focused
• No distractions
• Best for: Final page CTA

Split CTA

• Text on one side, button on other
• Balanced layout
• Visual appeal
• Best for: Mid-page CTAs

Form CTA

• CTA with embedded form
• Immediate capture
• Low friction
• Best for: Newsletter signup, lead capture

Urgency CTA

• Countdown timer
• Limited availability
• Scarcity messaging
• Best for: Time-sensitive offers

Multi-CTA

• Multiple action options
• Primary and secondary buttons
• Different user paths
• Best for: Different audience segments

---

9. Footer

Purpose: Site navigation, legal links, and contact information

Available Variants

Simple Footer

• Minimal design
• Logo + essential links
• Copyright notice
• Best for: Single-page sites

Multi-Column Footer

• Organized link sections
• Product, Company, Resources, etc.
• Social media icons
• Best for: Comprehensive navigation

Newsletter Footer

• Email signup form
• Social media links
• Brief description
• Best for: Building email list

App Download Footer

• App store badges
• QR code option
• Download links
• Best for: Mobile apps

---

10. Content

Purpose: Text content, images, galleries, and media sections

Available Variants

Text + Image

• Content block with image
• Left/right layout options
• Rich text support
• Best for: Product explanations, about sections

Gallery

• Image grid or carousel
• Lightbox on click
• Captions support
• Best for: Portfolio, product photos

Video Embed

• YouTube/Vimeo embed
• Responsive player
• Autoplay options
• Best for: Product demos, testimonials

Rich Text

• Formatted content block
• Headings, lists, quotes
• Clean typography
• Best for: Blog-style content, long-form

Timeline

• Chronological content
• Steps or milestones
• Visual flow
• Best for: Process, history, roadmap

---

11. Contact

Purpose: Contact forms, maps, and contact information

Available Variants

Contact Form

• Name, email, message fields
• Validation and error handling
• Success confirmation
• Best for: General inquiries

Form with Info

• Form + contact details sidebar
• Email, phone, address
• Business hours
• Best for: Service businesses

Map + Form

• Embedded map
• Location marker
• Form for inquiries
• Best for: Physical locations

Multi-Step Form

• Wizard-style form
• Progress indicator
• Conditional fields
• Best for: Complex lead qualification

---

12. Modal

Purpose: Popups, overlays, and dialogs for focused interactions

Available Variants

Announcement Modal

• Pop-up announcements
• Dismiss button
• Timed appearance
• Best for: News, updates, offers

Video Modal

• Click-to-play video
• Overlay player
• Close button
• Best for: Demos, explainers

Form Modal

• Popup lead capture
• Exit intent
• Timed trigger
• Best for: Newsletter signup, offers

Cookie Consent

• GDPR-compliant notice
• Accept/decline options
• Cookie preferences
• Best for: Compliance requirements

---

13. Product

Purpose: Product showcases, demos, and feature highlights

Available Variants

Product Showcase

• Large product image
• Feature callouts
• 360° view option
• Best for: Physical products, ecommerce

Product Comparison

• Side-by-side comparison
• Feature matrix
• "Choose this if..." guidance
• Best for: Multiple product options

Demo Section

• Interactive demo
• Try before you buy
• Sandbox environment
• Best for: Software products

Product Tour

• Step-by-step walkthrough
• Screenshots with annotations
• Numbered steps
• Best for: Complex software, onboarding

---

Component Properties

Common Properties

Most components support these configurable properties:

Text Content

• Headlines, subheadlines, body text
• Button labels and links
• Descriptions and captions

Images

• Feature images, logos, icons
• Background images
• Product screenshots
• Alt text for accessibility

Buttons

• Button text and links
• Primary/secondary styles
• Multiple CTA options
• Target (same window, new tab)

Layout Options

• Alignment (left, center, right)
• Order (image left/right in split layouts)
• Spacing and padding
• Background colors

Settings

• Visibility toggles
• Animation options
• Responsive behavior
• Custom classes for advanced styling

---

Swapping Components

In Edit Mode

1. Click the component you want to change
2. Look for the "Component Type" dropdown in the properties panel
3. Select a different variant from the same category
4. The component will swap while preserving content where possible

Example: Swap from "Hero Simple" to "Hero Split" to add an image alongside your headline.

Best Practices

• Keep Purpose Aligned: Don't swap a hero for a footer
• Preview After Swapping: Check layout and content fit
• Adjust Properties: New variant may have different property options
• Mobile Check: Preview on mobile after swapping

---

Tips for Choosing Components

For Maximum Conversions

1. Hero: Use Form Hero or Video Hero for highest engagement
2. Social Proof: Place early (after hero) to build immediate trust
3. Features: Use visual variants (Bento, Screenshots) over plain lists
4. Pricing: Include FAQ below pricing to reduce friction
5. CTA: Add urgency elements for time-sensitive offers

For Mobile Experience

1. Avoid: Mega menus, complex comparison tables
2. Prefer: Simple navigation, card-based layouts, accordions
3. Test: Always preview on mobile devices

For Page Speed

1. Limit: Heavy components like video backgrounds, large galleries
2. Optimize: Images should be compressed and properly sized
3. Defer: Consider loading non-critical components later

---

What's Next?

• Creating Pages - Generate pages with AI
• Editing Pages - Customize components in Edit Mode
• Design Systems - Apply consistent branding
• Publishing - Make your page live

---

Quick Reference

Total: 36 components across 13 categories, all fully customizable!