Landing Page Sections

A collection of common landing page section patterns for building high-converting marketing pages. Each section is designed to be composable, responsive, and production-ready using Aidash components.

Hero Section

A full-width hero with large heading, subtitle text, and call-to-action buttons. The hero is often the first thing visitors see.

Now in Public Beta

Build beautiful apps at lightning speed

Production-ready components, hand-crafted animations, and a design system that scales with your team.

Hero Section

tsx

<section className="bg-linear-to-br from-brand-600 via-brand-500 to-blue-500 px-8 py-20 text-center">
  <Badge variant="subtle">Now in Public Beta</Badge>
  <h1 className="text-4xl font-bold text-white mb-4">
    Build beautiful apps at lightning speed
  </h1>
  <p className="text-lg text-white/75 max-w-2xl mx-auto mb-8">
    Production-ready components, hand-crafted animations,
    and a design system that scales with your team.
  </p>
  <div className="flex gap-3 justify-center">
    <Button variant="solid" size="lg">Get Started Free</Button>
    <Button variant="outline" size="lg">View Demo</Button>
  </div>
</section>

Features Grid

A responsive 3-column grid of feature cards with icons, titles, and descriptions. Great for highlighting product capabilities.

Lightning Fast

Optimized for performance with lazy loading, tree-shaking, and minimal bundle size.

Secure by Default

Built with security best practices including CSRF protection and input sanitization.

Beautiful Design

Hand-crafted components with smooth animations and consistent design language.

Features Grid

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  {features.map((feature) => (
    <Card key={feature.title} className="p-6">
      <div className="w-12 h-12 rounded-xl bg-brand-500/10 flex items-center justify-center mb-4">
        <HugeiconsIcon icon={feature.icon} size={20} className="text-brand-500" />
      </div>
      <h3 className="text-base font-semibold mb-2">{feature.title}</h3>
      <p className="text-sm text-muted">{feature.description}</p>
    </Card>
  ))}
</div>

Stats Bar

A horizontal bar of key metrics and social proof numbers. Builds trust and credibility with visitors.

10K+

Active Users

99.9%

Uptime SLA

50+

Components

4.9/5

User Rating

Stats Bar

tsx

<section className="py-12 border-y border-border">
  <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
    {stats.map((stat) => (
      <div key={stat.label}>
        <p className="text-3xl font-bold text-brand-500">{stat.value}</p>
        <p className="text-sm text-muted mt-1">{stat.label}</p>
      </div>
    ))}
  </div>
</section>

Testimonials

Testimonial cards featuring quotes, avatars, and attribution. Social proof that converts visitors into users.

“Aidash Components cut our development time in half. The design quality is outstanding and the API is incredibly intuitive.”

Sarah Chen

CTO at TechFlow

“We shipped our entire landing page in a single day using these patterns. The animations are butter-smooth.”

Marcus Johnson

Lead Developer at StartupXYZ

Testimonials

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  {testimonials.map((t) => (
    <Card key={t.name} className="p-6">
      <div className="flex gap-1 mb-3">
        {Array(5).fill(null).map((_, i) => (
          <StarIcon key={i} className="text-warn-400" size={14} />
        ))}
      </div>
      <p className="text-sm text-muted italic mb-4">"{t.quote}"</p>
      <div className="flex items-center gap-3">
        <Avatar src={t.avatar} size="sm" />
        <div>
          <p className="text-sm font-semibold">{t.name}</p>
          <p className="text-xs text-muted">{t.role}</p>
        </div>
      </div>
    </Card>
  ))}
</div>

Pricing Cards

A 3-tier pricing comparison layout with feature lists, highlighting the recommended plan. Standard pattern for SaaS landing pages.

Free

For personal projects

$0/month

5 components
Community support
Basic themes

Pro

For growing teams

$19/month

All components
Priority support
Custom themes
Figma access

Enterprise

For large organizations

$49/month

Everything in Pro
Dedicated support
SSO & SAML
SLA guarantee
Custom builds

Pricing Cards

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  {plans.map((plan) => (
    <Card
      key={plan.name}
      className={plan.highlighted ? 'border-brand-500 ring-2 ring-brand-500/20' : ''}
    >
      {plan.highlighted && <Badge>Most Popular</Badge>}
      <h3 className="text-lg font-semibold">{plan.name}</h3>
      <p className="text-3xl font-bold">{plan.price}<span className="text-sm">/mo</span></p>
      <ul className="space-y-2 my-6">
        {plan.features.map((f) => (
          <li key={f} className="flex items-center gap-2">
            <CheckmarkCircle02Icon size={16} /> {f}
          </li>
        ))}
      </ul>
      <Button variant={plan.highlighted ? 'solid' : 'outline'} className="w-full">
        {plan.cta}
      </Button>
    </Card>
  ))}
</div>

FAQ Section

Accordion-style frequently asked questions with expandable answers. Reduces support tickets and answers common concerns.

Frequently Asked Questions

Yes! Our free plan includes access to 5 core components with community support. Perfect for personal projects and experimentation.

Absolutely. All plans include a commercial license. You can use our components in unlimited client projects and SaaS applications.

We offer a 30-day money-back guarantee on all paid plans. If you're not satisfied, contact support for a full refund.

FAQ Section

tsx

<section className="py-16 max-w-2xl mx-auto">
  <h2 className="text-2xl font-bold text-center mb-8">
    Frequently Asked Questions
  </h2>
  <Accordion
    variant="separated"
    items={[
      { id: 'faq-1', title: 'Is there a free plan?', content: '...' },
      { id: 'faq-2', title: 'Commercial use?', content: '...' },
      { id: 'faq-3', title: 'Refund policy?', content: '...' },
    ]}
  />
</section>

CTA Section

A full-width call-to-action block with gradient background, compelling heading, and action button. Drives conversion at the bottom of the page.

Ready to build something amazing?

Join thousands of developers shipping beautiful products faster with Aidash Components.

CTA Section

tsx

<section className="bg-linear-to-r from-brand-600 to-purple-600 py-20 text-center">
  <h2 className="text-3xl font-bold text-white mb-4">
    Ready to build something amazing?
  </h2>
  <p className="text-lg text-white/70 max-w-lg mx-auto mb-8">
    Join thousands of developers shipping beautiful products faster.
  </p>
  <div className="flex gap-3 justify-center">
    <Button variant="solid" size="lg" className="bg-white text-brand-600">
      Start Building Free
    </Button>
    <Button variant="outline" size="lg" className="border-white text-white">
      Talk to Sales
    </Button>
  </div>
</section>

Footer

A multi-column footer with navigation links, company info, and social icons. The standard closing section for every landing page.

Aidash

Build better products with modern components.

Product

Components
Templates
Pricing

Resources

Docs
Blog
Changelog

Company

About
Careers
Contact

PrivacyTerms

Footer

tsx

<footer className="border-t py-12">
  <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
    <div>
      <Logo />
      <p className="text-sm text-muted mt-2">Build better products.</p>
    </div>
    {footerColumns.map((col) => (
      <div key={col.title}>
        <h4 className="text-sm font-semibold uppercase tracking-wider mb-3">
          {col.title}
        </h4>
        <ul className="space-y-2">
          {col.links.map((link) => (
            <li key={link.label}>
              <a href={link.href} className="text-sm text-muted hover:text-foreground">
                {link.label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    ))}
  </div>
  <div className="border-t pt-6 flex justify-between">
    <p className="text-xs text-muted">&copy; 2026 Company. All rights reserved.</p>
    <SocialIcons />
  </div>
</footer>

Best Practices

Tips and guidelines for building effective, high-converting landing pages.

Lead with value

Your hero section should clearly communicate what the product does and why it matters. Avoid jargon and focus on the benefit to the user.

Use social proof early

Place stats, logos, or testimonials near the top of the page. Trust signals above the fold significantly improve conversion rates.

One primary CTA per section

Each section should guide visitors toward a single action. Too many competing CTAs dilute focus and reduce click-through.

Keep pricing transparent

Clearly display pricing tiers with feature comparisons. Highlight the recommended plan with visual emphasis.

Optimize for mobile first

Over 60% of landing page traffic comes from mobile devices. Ensure all sections stack cleanly and buttons are tap-friendly.

Address objections with FAQ

Anticipate common concerns and address them in a FAQ section. This reduces friction and support burden.

Pro tip

Combine these sections in a logical flow: Hero → Social Proof (Stats) → Features → Testimonials → Pricing → FAQ → CTA → Footer. This follows the natural decision-making process of your visitors.

Core components commonly used when building landing page sections.

Card

Flexible container for grouping related content and actions.

Button

Versatile button component for primary actions and CTAs.

Badge

Small labels for status indicators, tags, and categories.

Hero Section

Build beautiful apps at lightning speed

Features Grid

Lightning Fast

Secure by Default

Beautiful Design

Stats Bar

Testimonials

Pricing Cards

Free

Pro

Enterprise

FAQ Section

Frequently Asked Questions

CTA Section

Ready to build something amazing?

Footer

Product

Resources

Company

Best Practices

Related

Card

Button

Badge