26:I[422844,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"ThemeToggle"] 27:I[276592,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"AccountMenu"] 28:I[32297,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"MobileNav"] 29:I[505014,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"default"] 2a:I[729657,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"FavoriteButton"] 2b:I[534073,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"InstallCommand"] 2c:I[868814,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"BlockPreview"] 35:I[713354,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.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\":\"Features\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/features\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Features 01: Divided grid\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/features/features-01\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Features 01: Divided grid\",\"description\":\"Six features in a joined grid on guide lines, the first one with a visual.\",\"url\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/features/features-01\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"version\":\"1.0.0\",\"isAccessibleForFree\":true,\"publisher\":{\"@type\":\"Organization\",\"name\":\"lib\"}}]"}}] 2d:T54d,

import { Features01 } from "@/components/features-01"

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

2e:Tfe7,// @lib/features-01@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import * as React from "react" import { BellRing, ChartLine, FileSpreadsheet, Layers, PlugZap, Users } from "lucide-react" import { cn } from "@/lib/utils" import { SectionFrame } from "@/components/section-frame" type Feature = { title: string description: string icon?: React.ElementType /** Optional illustration rendered under the text. The first feature spans two columns. */ visual?: React.ReactNode } type Features01Props = { title?: React.ReactNode description?: React.ReactNode features?: Feature[] className?: string } function PlanBars() { const plans = [ { name: "Scale", value: 82, amount: "$24,300" }, { name: "Growth", value: 63, amount: "$18,620" }, { name: "Starter", value: 18, amount: "$2,311" }, ] return (

{plans.map((plan) => (

{plan.name} {plan.amount}

))}

) } const defaultFeatures: Feature[] = [ { title: "Revenue by plan, not just in total", description: "Split MRR into new, expansion, contraction and churn for each plan, so you know which one pays for the others.", icon: ChartLine, visual: , }, { title: "Cohorts in one click", description: "Compare retention by signup month, country or acquisition channel.", icon: Users, }, { title: "Alerts before it hurts", description: "Get a message when failed payments or cancellations spike.", icon: BellRing, }, { title: "Connect your billing", description: "Stripe, Paddle and Chargebee sync every five minutes.", icon: PlugZap, }, { title: "Export anything", description: "Send any chart to CSV or Google Sheets for your board deck.", icon: FileSpreadsheet, }, { title: "Workspaces per product", description: "Track several products separately, then compare them side by side.", icon: Layers, }, ] export function Features01({ title = "Everything you check on Monday morning", description = "The numbers your team asks about, already calculated and kept up to date.", features = defaultFeatures, className, }: Features01Props) { return (

{title}

{description}

{features.map(({ title, description, icon: Icon, visual }, index) => (

{Icon && ( )}

{title}

{description}

{visual &&

{visual}

}

))}

) } 2f:T7ec2,

// @lib/features-01@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
import * as React from "react"
import { BellRing, ChartLine, FileSpreadsheet, Layers, PlugZap, Users } from "lucide-react"

import { cn } from "@/lib/utils"
import { SectionFrame } from "@/components/section-frame"

type Feature = {
  title: string
  description: string
  icon?: React.ElementType
  /** Optional illustration rendered under the text. The first feature spans two columns. */
  visual?: React.ReactNode
}

type Features01Props = {
  title?: React.ReactNode
  description?: React.ReactNode
  features?: Feature[]
  className?: string
}

function PlanBars() {
  const plans = [
    { name: "Scale", value: 82, amount: "$24,300" },
    { name: "Growth", value: 63, amount: "$18,620" },
    { name: "Starter", value: 18, amount: "$2,311" },
  ]
  return (
    <div aria-hidden className="flex flex-col gap-3 rounded-lg border bg-muted/30 p-4 text-xs">
      {plans.map((plan) => (
        <div key={plan.name} className="grid grid-cols-[4rem_1fr_4rem] items-center gap-3">
          <span className="text-muted-foreground">{plan.name}</span>
          <span className="h-2 overflow-hidden rounded-full bg-muted">
            <span className="block h-full rounded-full bg-foreground/80" style={{ width: `${plan.value}%` }} />
          </span>
          <span className="text-right font-medium tabular-nums">{plan.amount}</span>
        </div>
      ))}
    </div>
  )
}

const defaultFeatures: Feature[] = [
  {
    title: "Revenue by plan, not just in total",
    description:
      "Split MRR into new, expansion, contraction and churn for each plan, so you know which one pays for the others.",
    icon: ChartLine,
    visual: <PlanBars />,
  },
  {
    title: "Cohorts in one click",
    description: "Compare retention by signup month, country or acquisition channel.",
    icon: Users,
  },
  {
    title: "Alerts before it hurts",
    description: "Get a message when failed payments or cancellations spike.",
    icon: BellRing,
  },
  {
    title: "Connect your billing",
    description: "Stripe, Paddle and Chargebee sync every five minutes.",
    icon: PlugZap,
  },
  {
    title: "Export anything",
    description: "Send any chart to CSV or Google Sheets for your board deck.",
    icon: FileSpreadsheet,
  },
  {
    title: "Workspaces per product",
    description: "Track several products separately, then compare them side by side.",
    icon: Layers,
  },
]

export function Features01({
  title = "Everything you check on Monday morning",
  description = "The numbers your team asks about, already calculated and kept up to date.",
  features = defaultFeatures,
  className,
}: Features01Props) {
  return (
    <SectionFrame className={className}>
      <div className="flex max-w-2xl flex-col gap-4 px-6 py-14 sm:px-10">
        <h2 className="font-heading text-3xl font-semibold tracking-tighter text-balance sm:text-4xl">{title}</h2>
        <p className="text-lg text-pretty text-muted-foreground">{description}</p>
      </div>
      <div className="grid grid-cols-1 gap-px border-t bg-border sm:grid-cols-2 lg:grid-cols-3">
        {features.map(({ title, description, icon: Icon, visual }, index) => (
          <div
            key={title}
            className={cn(
              "group flex flex-col gap-3 bg-background p-6 transition-colors hover:bg-muted/30 sm:p-8",
              index === 0 && "sm:col-span-2 lg:row-span-2"
            )}
          >
            {Icon && (
              <span className="flex size-9 items-center justify-center rounded-md border bg-muted/50 shadow-xs">
                <Icon aria-hidden className="size-4" />
              </span>
            )}
            <h3 className={cn("font-medium", index === 0 && "font-heading text-xl tracking-tight")}>{title}</h3>
            <p className="max-w-prose text-sm text-pretty text-muted-foreground">{description}</p>
            {visual && <div className="mt-auto min-w-0 pt-4">{visual}</div>}
          </div>
        ))}
      </div>
    </SectionFrame>
  )
}

30:T842,// @lib/section-frame@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog import * as React from "react" import { cn } from "@/lib/utils" import { RevealStyles } from "@/components/reveal" /** Small plus marks on the four corners of the nearest positioned parent. */ function PlusCorners({ className }: { className?: string }) { const positions = ["-top-px -left-px", "-top-px -right-px", "-bottom-px -left-px", "-bottom-px -right-px"] return ( <> {positions.map((position) => ( ))} ) } type SectionFrameProps = React.ComponentProps<"section"> & { /** Classes for the framed inner container */ containerClassName?: string /** Show plus marks on the container corners */ corners?: boolean /** Fade in the container's parts as they scroll into view (off for reduced motion) */ reveal?: boolean } /** A section with full-height guide lines on the container edges, like a blueprint. */ function SectionFrame({ className, containerClassName, corners = true, reveal = true, children, ...props }: SectionFrameProps) { return (

{reveal && }

{corners && } {children}

) } export { PlusCorners, SectionFrame, type SectionFrameProps } 31:T429a,

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

import { cn } from "@/lib/utils"
import { RevealStyles } from "@/components/reveal"

/** Small plus marks on the four corners of the nearest positioned parent. */
function PlusCorners({ className }: { className?: string }) {
  const positions = ["-top-px -left-px", "-top-px -right-px", "-bottom-px -left-px", "-bottom-px -right-px"]
  return (
    <>
      {positions.map((position) => (
        <span
          key={position}
          aria-hidden
          data-slot="plus-corner"
          className={cn(
            "pointer-events-none absolute z-10 size-3 translate-x-[-50%] translate-y-[-50%] text-muted-foreground/60",
            position.includes("right") && "translate-x-[50%]",
            position.includes("bottom") && "translate-y-[50%]",
            position,
            className
          )}
        >
          <span className="absolute top-1/2 left-0 h-px w-full bg-current" />
          <span className="absolute top-0 left-1/2 h-full w-px bg-current" />
        </span>
      ))}
    </>
  )
}

type SectionFrameProps = React.ComponentProps<"section"> & {
  /** Classes for the framed inner container */
  containerClassName?: string
  /** Show plus marks on the container corners */
  corners?: boolean
  /** Fade in the container's parts as they scroll into view (off for reduced motion) */
  reveal?: boolean
}

/** A section with full-height guide lines on the container edges, like a blueprint. */
function SectionFrame({ className, containerClassName, corners = true, reveal = true, children, ...props }: SectionFrameProps) {
  return (
    <section data-slot="section-frame" className={cn("relative border-b px-4 sm:px-6", className)} {...props}>
      {reveal && <RevealStyles />}
      <div data-reveal-children={reveal || undefined} className={cn("relative mx-auto max-w-6xl border-x", containerClassName)}>
        {corners && <PlusCorners />}
        {children}
      </div>
    </section>
  )
}

export { PlusCorners, SectionFrame, type SectionFrameProps }

32:Tb2f,

What it installs

Versions

More features blocks