import {
  Activity,
  ArrowRight,
  CheckCircle2,
  Sparkles,
  TrendingUp,
} from "lucide-react"

import { Button } from "@/components/ui/button"

export default function Hero04() {
  return (
    <section className="relative isolate overflow-hidden bg-background py-24 sm:py-32">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 [mask-image:radial-gradient(ellipse_60%_50%_at_50%_45%,black,transparent_85%)]"
        style={{
          backgroundImage:
            "radial-gradient(currentColor 0.5px, transparent 0.5px)",
          backgroundSize: "22px 22px",
          color: "hsl(var(--muted-foreground) / 0.2)",
        }}
      />

      <div className="relative mx-auto flex max-w-4xl flex-col items-center gap-7 px-6 text-center">
        <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card/60 px-3 py-1 text-xs font-medium text-muted-foreground">
          <Sparkles className="size-3 text-amber-500" />
          Beta builders shipping today
        </span>

        <h1 className="text-balance font-semibold text-4xl tracking-tight sm:text-5xl md:text-6xl">
          The fastest way from{" "}
          <span className="text-muted-foreground">design tab</span> to{" "}
          <span className="text-muted-foreground">deployed site</span>.
        </h1>

        <p className="max-w-xl text-pretty text-muted-foreground sm:text-lg">
          A catalog of crafted sections you can drop into any React project.
          Inspect the preview, copy the code, ship before standup.
        </p>

        <div className="flex flex-col gap-3 sm:flex-row">
          <Button size="lg" className="rounded-full">
            Start building
            <ArrowRight />
          </Button>
          <Button size="lg" variant="outline" className="rounded-full">
            See pricing
          </Button>
        </div>
      </div>

      <div className="pointer-events-none absolute inset-x-0 top-1/2 hidden -translate-y-1/2 md:block">
        <div className="relative mx-auto h-0 max-w-6xl">
          <FloatingCard
            className="-left-2 top-[-180px] -rotate-6 sm:-left-4 md:-left-2 lg:left-4"
            tone="emerald"
          >
            <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
              <CheckCircle2 className="size-4 text-emerald-500" />
              build passed
            </div>
            <p className="mt-2 font-mono text-[11px] text-muted-foreground">
              deploy · 12.4s · 0 errors
            </p>
          </FloatingCard>

          <FloatingCard
            className="-right-2 top-[-220px] rotate-6 sm:-right-4 md:-right-2 lg:right-4"
            tone="sky"
          >
            <div className="flex items-center justify-between gap-3 text-xs">
              <span className="font-medium text-foreground">MRR</span>
              <span className="flex items-center gap-1 text-emerald-500">
                <TrendingUp className="size-3" />
                +18%
              </span>
            </div>
            <div className="mt-3 flex h-9 items-end gap-1">
              {[40, 55, 38, 64, 80, 72, 90].map((h, i) => (
                <span
                  key={i}
                  className="flex-1 rounded-sm bg-foreground/60"
                  style={{ height: `${h}%` }}
                />
              ))}
            </div>
          </FloatingCard>

          <FloatingCard
            className="-bottom-[80px] left-1/2 -translate-x-1/2 rotate-3"
            tone="violet"
          >
            <div className="flex items-center gap-2 text-xs">
              <span className="grid size-5 place-items-center rounded-full bg-violet-500/20 text-violet-500">
                <Activity className="size-3" />
              </span>
              <span className="font-medium text-foreground">
                3 new signups
              </span>
            </div>
            <div className="mt-3 flex -space-x-2">
              {["#fb7185", "#60a5fa", "#a78bfa"].map((color) => (
                <span
                  key={color}
                  className="inline-block size-6 rounded-full ring-2 ring-card"
                  style={{ background: color }}
                />
              ))}
            </div>
          </FloatingCard>
        </div>
      </div>
    </section>
  )
}

function FloatingCard({
  className,
  tone,
  children,
}: {
  className?: string
  tone: "emerald" | "sky" | "violet"
  children: React.ReactNode
}) {
  const toneRing: Record<typeof tone, string> = {
    emerald: "before:bg-emerald-500/10",
    sky: "before:bg-sky-500/10",
    violet: "before:bg-violet-500/10",
  }
  return (
    <div
      className={[
        "pointer-events-none absolute w-[230px] rounded-xl border border-border bg-card p-4 shadow-2xl shadow-black/10 before:absolute before:inset-0 before:-z-10 before:rounded-2xl before:blur-2xl",
        toneRing[tone],
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {children}
    </div>
  )
}
Hero

Product

More

Legal
