UI ComponentsMarketing
LandingPage
Complete landing page layout with hero, features, testimonials, pricing, and CTA
Complete landing page composition that combines Hero, Features, Testimonials, Pricing, FAQ, and CTA sections.
Structure
┌─────────────────────────────────────────────────────┐
│ hero-section │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <Hero /> │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ logos-section (optional) │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Trusted by: [logo] [logo] [logo] [logo] │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ features-section │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <Features /> │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ stats-section (optional) │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <Stats /> │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ testimonials-section │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <Testimonials /> │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ pricing-section │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <Pricing /> │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ faq-section │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <FAQ /> │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ cta-section │
│ ┌─────────────────────────────────────────────────┐ │
│ │ <CTA /> │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Usage
<LandingPage
hero={{
title: 'Build something amazing',
subtitle: 'The complete platform for modern web development',
primaryAction: { label: 'Get Started', href: '/signup' },
secondaryAction: { label: 'Learn More', href: '/features' },
}}
features={{
title: 'Everything you need',
items: [
{ title: 'Fast', description: 'Optimized for speed', icon: 'zap' },
{ title: 'Secure', description: 'Enterprise-grade security', icon: 'shield' },
{ title: 'Scalable', description: 'Grows with you', icon: 'trending-up' },
],
}}
testimonials={{
title: 'Loved by developers',
items: [
{ quote: 'Best tool ever!', author: { name: 'Jane', title: 'CTO' } },
],
}}
pricing={{
title: 'Simple pricing',
tiers: [
{ name: 'Starter', price: 'Free', features: ['1 project', 'Basic support'] },
{ name: 'Pro', price: '$29/mo', features: ['Unlimited', 'Priority support'], featured: true },
],
}}
faq={{
title: 'Questions?',
items: [
{ question: 'How do I get started?', answer: 'Sign up and follow the guide.' },
],
}}
cta={{
title: 'Ready to build?',
primaryAction: { label: 'Start Free', href: '/signup' },
}}
/>