import { Sparkles, ArrowRight } from "lucide-react";
import { Button, Chip } from "@sisyphos-ui/react";

export function MarketingHero() {
  return (
    <section className="relative overflow-hidden bg-white px-6 py-28 text-center">
      <div className="relative mx-auto flex max-w-2xl flex-col items-center">
        <Chip
          variant="soft"
          color="primary"
          size="sm"
          startIcon={<Sparkles className="size-3.5" />}
        >
          New · v2.0
        </Chip>

        <h1 className="mt-6 text-balance text-6xl font-bold leading-[1.05] tracking-tight">
          The framework you{" "}
          <span className="bg-gradient-to-r from-orange-700 via-orange-500 to-orange-700 bg-clip-text text-transparent">
            already love.
          </span>
        </h1>

        <p className="mt-5 max-w-xl text-balance text-zinc-600">
          Drop into your codebase in under a minute. Theme with your tokens,
          ship with your stack — no rewrites, no rebuilds.
        </p>

        <div className="mt-8 flex gap-3">
          <Button size="lg" endIcon={<ArrowRight className="size-4" />}>
            Get started
          </Button>
          <Button size="lg" variant="outlined">
            Watch demo
          </Button>
        </div>
      </div>
    </section>
  );
}
Components used

Used in templates
