Hero

import { Hero } from '@nostromo/ui-marketing'
import { Button } from '@nostromo/ui-core'

export default function HeroExample() {
  return (
    <Hero
      title="Welcome to Nostromo UI"
      subtitle="A comprehensive UI library built with React, TypeScript and Tailwind CSS"
      cta={
        <div className="flex gap-4">
          <Button>Get Started</Button>
          <Button variant="outline">Learn More</Button>
        </div>
      }
    />
  )
}

import { Hero } from '@nostromo/ui-marketing'
import { Button } from '@nostromo/ui-core'

export default function HeroVariants() {
  return (
    <div className="space-y-8">
      <Hero
        title="Default Hero"
        subtitle="Standard hero section with center alignment"
        size="md"
        variant="default"
        cta={<Button>Get Started</Button>}
      />
      <Hero
        title="Accent Hero"
        subtitle="Hero with accent variant styling"
        size="lg"
        variant="accent"
        contentAlign="left"
        cta={<Button variant="outline">Learn More</Button>}
      />
    </div>
  )
}