hero-01

A centered marketing hero with a badge, a large display headline, supporting copy and two calls to action. Use as the top of a landing page.
Code

import * as React from "react"
import { ArrowRightIcon, StarIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function Hero({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      className={cn(
        "mx-auto flex w-full max-w-4xl flex-col items-center gap-6 px-6 py-24 text-center",
        className
      )}
      {...props}
    >
      <Badge variant="secondary" className="gap-1.5 rounded-full">
        <StarIcon className="size-3" />
        v0.2 is out
      </Badge>
      <h1 className="font-heading max-w-3xl text-4xl font-bold tracking-tighter text-balance md:text-6xl md:leading-[1.05]">
        The design system that ships with the code
      </h1>
      <p className="text-muted-foreground max-w-xl text-lg text-balance">
        A monochrome, dark-first component registry you copy into your project.
        Open source, framework-agnostic, and built to be read by humans and
        agents alike.
      </p>
      <div className="flex flex-wrap items-center justify-center gap-3">
        <Button size="lg">
          Get started
          <ArrowRightIcon className="size-4" />
        </Button>
        <Button size="lg" variant="outline">
          Browse components
        </Button>
      </div>
      <p className="text-muted-foreground font-mono text-xs">
        npx logic2b@latest init
      </p>
    </div>
  )
}