26:I[422844,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"ThemeToggle"] 27:I[276592,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"AccountMenu"] 28:I[32297,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"MobileNav"] 29:I[505014,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"default"] 2a:I[729657,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"FavoriteButton"] 2b:I[534073,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"InstallCommand"] 2c:I[868814,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"BlockPreview"] 39:I[713354,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/06i3fiwh2ze7u.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/0tiwao3lsaj0n.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/43utqc8hd7aex.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/3al3szhba0yjk.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/2szak1lgin6pk.js","/_next/static/chunks/1pt4bo4g47prw.js"],"Toaster"] 1b:["$","$L1a","/themes",{"href":"/themes","children":"Themes","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1c:["$","$L1a","/styles",{"href":"/styles","children":"Styles","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1d:["$","$L1a","/components",{"href":"/components","children":"Components","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1e:["$","$L1a","/docs",{"href":"/docs","children":"Docs","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1f:["$","$L1a","/changelog",{"href":"/changelog","children":"Changelog","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 20:["$","$L1a","/#pricing",{"href":"/#pricing","children":"Pricing","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 21:["$","div",null,{"className":"ml-auto flex items-center gap-1","children":[["$","$L26",null,{}],["$","$L27",null,{}],["$","$L1a",null,{"href":"/blocks","children":"Browse blocks","data-slot":"button","data-variant":"default","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 max-sm:hidden","ref":null}],["$","$L28",null,{"title":"lib","links":[{"href":"/blocks","label":"Blocks"},{"href":"/examples","label":"Examples"},{"href":"/builder","label":"Builder"},{"href":"/themes","label":"Themes"},{"href":"/styles","label":"Styles"},{"href":"/components","label":"Components"},{"href":"/docs","label":"Docs"},{"href":"/changelog","label":"Changelog"},{"href":"/#pricing","label":"Pricing"}],"primary":{"label":"Browse blocks","href":"/blocks"},"secondary":{"label":"Open the builder","href":"/builder"},"className":"md:inline-flex lg:hidden"}]]}] 22:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blocks\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hero\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/hero\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Hero 05: With stats\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/hero/hero-05\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Hero 05: With stats\",\"description\":\"Framed centered hero with a joined strip of key numbers.\",\"url\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/hero/hero-05\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"version\":\"1.0.0\",\"isAccessibleForFree\":true,\"publisher\":{\"@type\":\"Organization\",\"name\":\"lib\"}}]"}}] 2d:T541,

import { Hero05 } from "@/components/hero-05"

export default function Page() {
  return <Hero05 />
}

2e:T997,// @lib/hero-05@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import { ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import { GridPattern } from "@/components/grid-pattern" import { PlusCorners } from "@/components/section-frame" import { RevealStyles, reveal } from "@/components/reveal" const stats = [ { value: "$2.1B", label: "revenue tracked each month" }, { value: "2,000+", label: "subscription businesses" }, { value: "5 min", label: "between two syncs" }, { value: "99.99%", label: "uptime last 12 months" }, ] export function Hero05() { return (

The revenue dashboard founders open first

Every subscription metric in one place, explained in plain words, ready for your next board meeting.

{stat.label}: {stat.value}

) } 2f:T4e87,

// @lib/hero-05@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import { ArrowRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { GridPattern } from "@/components/grid-pattern"
import { PlusCorners } from "@/components/section-frame"
import { RevealStyles, reveal } from "@/components/reveal"

const stats = [
  { value: "$2.1B", label: "revenue tracked each month" },
  { value: "2,000+", label: "subscription businesses" },
  { value: "5 min", label: "between two syncs" },
  { value: "99.99%", label: "uptime last 12 months" },
]

export function Hero05() {
  return (
    <section className="border-b px-4 sm:px-6">
      <RevealStyles />
      <div className="relative isolate mx-auto flex max-w-6xl flex-col border-x">
        <PlusCorners />
        <GridPattern size={56} fade="top" />
        <div className="flex flex-col items-center gap-6 px-6 py-24 text-center sm:py-32">
          <h1 {...reveal("load")} className="max-w-3xl font-heading text-5xl leading-[1.02] font-semibold tracking-tighter text-balance sm:text-7xl">
            The revenue dashboard founders open first
          </h1>
          <p {...reveal("load", 1)} className="max-w-xl text-lg text-pretty text-muted-foreground">
            Every subscription metric in one place, explained in plain words, ready for your next board
            meeting.
          </p>
          <div {...reveal("load", 2)} className="flex flex-wrap justify-center gap-3">
            <Button size="lg" className="rounded-full" asChild>
              <a href="#">
                Start free trial
                <ArrowRight data-icon="inline-end" />
              </a>
            </Button>
            <Button size="lg" variant="ghost" className="rounded-full" asChild>
              <a href="#">Talk to sales</a>
            </Button>
          </div>
        </div>
        <dl className="grid grid-cols-2 border-t bg-background lg:grid-cols-4">
          {stats.map((stat) => (
            <div key={stat.label} className="flex flex-col gap-1 border-b p-6 not-nth-[2n+1]:border-l lg:border-b-0 lg:not-first:border-l max-lg:nth-last-[-n+2]:border-b-0">
              <dt className="order-2 text-sm text-muted-foreground">{stat.label}</dt>
              <dd className="order-1 font-heading text-3xl font-semibold tracking-tight tabular-nums">{stat.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  )
}

30:T5bb,// @lib/grid-pattern@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import * as React from "react" import { cn } from "@/lib/utils" type GridPatternProps = React.ComponentProps<"div"> & { /** Size of one cell in pixels */ size?: number variant?: "lines" | "dots" /** Where the pattern stays visible before fading out */ fade?: "center" | "top" | "bottom" | "none" } const fades = { center: "[mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]", top: "[mask-image:radial-gradient(ellipse_80%_60%_at_50%_0%,black,transparent)]", bottom: "[mask-image:linear-gradient(to_top,black,transparent)]", none: "", } /** Decorative background grid or dots, drawn with theme borders so it works in light and dark. */ function GridPattern({ size = 48, variant = "lines", fade = "center", className, style, ...props }: GridPatternProps) { const background = variant === "lines" ? "linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px)" : "radial-gradient(var(--border) 1.2px, transparent 1.2px)" return (

) } export { GridPattern, type GridPatternProps } 31:T2b54,

// @lib/grid-pattern@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import * as React from "react"

import { cn } from "@/lib/utils"

type GridPatternProps = React.ComponentProps<"div"> & {
  /** Size of one cell in pixels */
  size?: number
  variant?: "lines" | "dots"
  /** Where the pattern stays visible before fading out */
  fade?: "center" | "top" | "bottom" | "none"
}

const fades = {
  center: "[mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]",
  top: "[mask-image:radial-gradient(ellipse_80%_60%_at_50%_0%,black,transparent)]",
  bottom: "[mask-image:linear-gradient(to_top,black,transparent)]",
  none: "",
}

/** Decorative background grid or dots, drawn with theme borders so it works in light and dark. */
function GridPattern({ size = 48, variant = "lines", fade = "center", className, style, ...props }: GridPatternProps) {
  const background =
    variant === "lines"
      ? "linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px)"
      : "radial-gradient(var(--border) 1.2px, transparent 1.2px)"

  return (
    <div
      aria-hidden
      data-slot="grid-pattern"
      className={cn("pointer-events-none absolute inset-0 -z-10", fades[fade], className)}
      style={{ backgroundImage: background, backgroundSize: `${size}px ${size}px`, ...style }}
      {...props}
    />
  )
}

export { GridPattern, type GridPatternProps }

32:Tb2f,// @lib/reveal@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import * as React from "react" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" /** * Entrance animations without JavaScript. * - on="scroll" fades and lifts an element as it enters the viewport, driven by the scroll position * (CSS scroll-driven animations). Browsers without them show the element as is. * - on="load" plays once when the page loads, for content above the fold such as a hero. * Nothing moves for people who ask for reduced motion. */ const css = ` @keyframes lib-reveal { from { opacity: 0; translate: 0 var(--reveal-distance, 1.25rem); } } @media (prefers-reduced-motion: no-preference) { [data-reveal="load"] { animation: lib-reveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--reveal-index, 0) * 90ms); } @supports (animation-timeline: view()) { [data-reveal="scroll"], [data-reveal-children] > :not([data-slot="plus-corner"], style) { animation: lib-reveal linear both; animation-timeline: view(); animation-range: entry min(40%, calc(var(--reveal-index, 0) * 3rem)) entry min(100%, calc(12rem + var(--reveal-index, 0) * 3rem)); } [data-reveal-children] > :nth-child(3) { --reveal-index: 1; } [data-reveal-children] > :nth-child(n + 4) { --reveal-index: 2; } } } ` /** The keyframes and rules, rendered once per page however many times it appears. */ function RevealStyles() { return ( ) } type RevealProps = React.ComponentProps<"div"> & { on?: "scroll" | "load" /** Position in a group: later items start a little later */ index?: number /** Distance the element rises from, e.g. "2rem" */ distance?: string /** Animate the child element itself instead of wrapping it in a div */ asChild?: boolean } function Reveal({ on = "scroll", index = 0, distance, asChild = false, className, style, children, ...props }: RevealProps) { const Component = asChild ? Slot.Root : "div" return ( <> {children} ) } /** * Props to spread on an element you already have, e.g.

. * Render once in the same block. */ function reveal(on: "scroll" | "load" = "scroll", index = 0) { return { "data-reveal": on, style: (index ? { "--reveal-index": index } : undefined) as React.CSSProperties | undefined, } } export { Reveal, RevealStyles, reveal, type RevealProps } 33:T4f02,

// @lib/reveal@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import * as React from "react"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

/**
 * Entrance animations without JavaScript.
 * - on="scroll" fades and lifts an element as it enters the viewport, driven by the scroll position
 *   (CSS scroll-driven animations). Browsers without them show the element as is.
 * - on="load" plays once when the page loads, for content above the fold such as a hero.
 * Nothing moves for people who ask for reduced motion.
 */
const css = `
@keyframes lib-reveal {
  from { opacity: 0; translate: 0 var(--reveal-distance, 1.25rem); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-reveal="load"] {
    animation: lib-reveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--reveal-index, 0) * 90ms);
  }
  @supports (animation-timeline: view()) {
    [data-reveal="scroll"],
    [data-reveal-children] > :not([data-slot="plus-corner"], style) {
      animation: lib-reveal linear both;
      animation-timeline: view();
      animation-range: entry min(40%, calc(var(--reveal-index, 0) * 3rem)) entry min(100%, calc(12rem + var(--reveal-index, 0) * 3rem));
    }
    [data-reveal-children] > :nth-child(3) { --reveal-index: 1; }
    [data-reveal-children] > :nth-child(n + 4) { --reveal-index: 2; }
  }
}
`

/** The keyframes and rules, rendered once per page however many times it appears. */
function RevealStyles() {
  return (
    <style href="lib-reveal" precedence="default">
      {css}
    </style>
  )
}

type RevealProps = React.ComponentProps<"div"> & {
  on?: "scroll" | "load"
  /** Position in a group: later items start a little later */
  index?: number
  /** Distance the element rises from, e.g. "2rem" */
  distance?: string
  /** Animate the child element itself instead of wrapping it in a div */
  asChild?: boolean
}

function Reveal({ on = "scroll", index = 0, distance, asChild = false, className, style, children, ...props }: RevealProps) {
  const Component = asChild ? Slot.Root : "div"
  return (
    <>
      <RevealStyles />
      <Component
        data-slot="reveal"
        data-reveal={on}
        className={cn(className)}
        style={{ ...(index ? { "--reveal-index": index } : {}), ...(distance ? { "--reveal-distance": distance } : {}), ...style } as React.CSSProperties}
        {...props}
      >
        {children}
      </Component>
    </>
  )
}

/**
 * Props to spread on an element you already have, e.g. <h1 {...reveal("load")}>.
 * Render <RevealStyles /> once in the same block.
 */
function reveal(on: "scroll" | "load" = "scroll", index = 0) {
  return {
    "data-reveal": on,
    style: (index ? { "--reveal-index": index } : undefined) as React.CSSProperties | undefined,
  }
}

export { Reveal, RevealStyles, reveal, type RevealProps }

34:T842,

What it installs

Versions

More hero blocks