Landing Components

Landing components are designed for marketing pages and conversion-focused layouts.

Hero

Main hero section with headline and CTA:

---
import Hero from '@/components/landing/Hero.astro';
---

<Hero
  title="Build Faster with Velocity"
  subtitle="A production-ready Astro starterkit with 56 components"
  primaryCta={{ label: 'Get Started', href: '/signup' }}
  secondaryCta={{ label: 'View Demo', href: '/demo' }}
/>

Credibility

Social proof and trust indicators:

---
import Credibility from '@/components/landing/Credibility.astro';
---

<Credibility
  title="Trusted by developers worldwide"
  logos={[
    { src: '/logos/company1.svg', alt: 'Company 1' },
    { src: '/logos/company2.svg', alt: 'Company 2' },
  ]}
/>

LighthouseScores

Performance metrics display:

---
import LighthouseScores from '@/components/landing/LighthouseScores.astro';
---

<LighthouseScores
  performance={100}
  accessibility={100}
  bestPractices={100}
  seo={100}
/>

TechStack

Technology showcase:

---
import TechStack from '@/components/landing/TechStack.astro';
---

<TechStack
  title="Built with modern technologies"
  technologies={[
    { name: 'Astro', icon: 'astro', description: 'Web framework' },
    { name: 'Tailwind', icon: 'tailwind', description: 'CSS framework' },
    { name: 'TypeScript', icon: 'typescript', description: 'Type safety' },
  ]}
/>

FeatureTabs

Interactive feature showcase (React component):

---
import FeatureTabs from '@/components/landing/FeatureTabs';
---

<FeatureTabs
  client:visible
  features={[
    {
      id: 'components',
      title: '56 Components',
      description: 'Production-ready UI components',
      image: '/features/components.png',
    },
    {
      id: 'theming',
      title: 'Design System',
      description: 'Complete design token system',
      image: '/features/theming.png',
    },
  ]}
/>

Navbar

Landing-specific navigation:

---
import Navbar from '@/components/landing/Navbar.astro';
---

<Navbar
  links={[
    { label: 'Features', href: '#features' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'Docs', href: '/docs' },
  ]}
  cta={{ label: 'Get Started', href: '/signup' }}
/>

LandingFooter

Landing-specific footer:

---
import LandingFooter from '@/components/landing/LandingFooter.astro';
---

<LandingFooter
  cta={{
    title: 'Ready to get started?',
    description: 'Start building with Velocity today.',
    buttonText: 'Start Free Trial',
    href: '/signup',
  }}
/>

CTA

Call-to-action section:

---
import CTA from '@/components/landing/CTA.astro';
---

<CTA
  title="Start Building Today"
  description="Join thousands of developers using Velocity"
  buttonText="Get Started Free"
  href="/signup"
/>

Example Landing Page

---
import LandingLayout from '@/layouts/LandingLayout.astro';
import Hero from '@/components/landing/Hero.astro';
import Credibility from '@/components/landing/Credibility.astro';
import FeatureTabs from '@/components/landing/FeatureTabs';
import LighthouseScores from '@/components/landing/LighthouseScores.astro';
import TechStack from '@/components/landing/TechStack.astro';
import CTA from '@/components/landing/CTA.astro';
---

<LandingLayout title="Velocity">
  <Hero
    title="Build Faster with Velocity"
    subtitle="Production-ready Astro starterkit"
  />

  <Credibility title="Trusted by developers" />

  <FeatureTabs client:visible features={[...]} />

  <LighthouseScores />

  <TechStack technologies={[...]} />

  <CTA
    title="Ready to Start?"
    description="Get up and running in minutes"
    buttonText="Start Free"
  />
</LandingLayout>