{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/decor-icon"],"name":"features-4","description":"Modern feature cards with extended borders, corner decorators, and detailed feature breakdown.","categories":["features"],"files":[{"path":"registry/blocks/features/4/feature-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport type React from \"react\";\nimport { DecorIcon } from \"@/components/decor-icon\";\n\ntype FeatureType = {\n\ttitle: string;\n\ticon: React.ReactNode;\n\tdescription: string;\n};\n\nexport function FeatureSection() {\n\treturn (\n\t\t<div className=\"mx-auto flex min-h-screen w-full max-w-5xl flex-col justify-center gap-12 px-4 py-12 md:px-8\">\n\t\t\t<div className=\"mx-auto max-w-2xl space-y-2 text-center\">\n\t\t\t\t<h2 className=\"font-medium text-3xl tracking-tight md:text-5xl\">\n\t\t\t\t\tBuild apps faster\n\t\t\t\t</h2>\n\t\t\t\t<p className=\"text-muted-foreground text-sm leading-relaxed md:text-base\">\n\t\t\t\t\tThe complete platform for secure, scalable apps. You code, we handle\n\t\t\t\t\tthe rest.\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t<div className=\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4\">\n\t\t\t\t{features.map((feature) => (\n\t\t\t\t\t<FeatureCard feature={feature} key={feature.title} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction FeatureCard({\n\tfeature,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tfeature: FeatureType;\n}) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex flex-col justify-between gap-6 bg-background px-6 pt-8 pb-6 shadow-xs\",\n\t\t\t\t// Gradient inspired by testimonials\n\t\t\t\t\"dark:bg-[radial-gradient(50%_80%_at_25%_0%,--theme(--color-foreground/.1),transparent)]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{/* Extended Borders */}\n\t\t\t<div className=\"absolute -inset-y-4 -left-px w-px bg-border\" />\n\t\t\t<div className=\"absolute -inset-y-4 -right-px w-px bg-border\" />\n\t\t\t<div className=\"absolute -inset-x-4 -top-px h-px bg-border\" />\n\t\t\t<div className=\"absolute -right-4 -bottom-px -left-4 h-px bg-border\" />\n\n\t\t\t{/* Corner Decor */}\n\t\t\t<DecorIcon className=\"size-3.5\" position=\"top-left\" />\n\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative z-10 flex w-fit items-center justify-center rounded-lg border bg-muted/20 p-3\",\n\t\t\t\t\t\"[&_svg]:size-5 [&_svg]:stroke-[1.5] [&_svg]:text-foreground\"\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{feature.icon}\n\t\t\t</div>\n\n\t\t\t<div className=\"relative z-10 space-y-2\">\n\t\t\t\t<h3 className=\"font-medium text-base text-foreground\">\n\t\t\t\t\t{feature.title}\n\t\t\t\t</h3>\n\t\t\t\t<p className=\"text-muted-foreground text-xs leading-relaxed\">\n\t\t\t\t\t{feature.description}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nconst features: FeatureType[] = [\n\t{\n\t\ttitle: \"Interactive Dashboard\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"DashboardSquare01Icon\"\n\t\t\t\tlucide=\"LayoutDashboardIcon\"\n\t\t\t\tphosphor=\"SquaresFourIcon\"\n\t\t\t\tremixicon=\"RiLayoutGridLine\"\n\t\t\t\ttabler=\"IconLayoutDashboard\"\n\t\t\t/>\n\t\t),\n\t\tdescription: \"Visualize your data with drag-and-drop widgets.\",\n\t},\n\t{\n\t\ttitle: \"Instant API\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"CommandLineIcon\"\n\t\t\t\tlucide=\"TerminalIcon\"\n\t\t\t\tphosphor=\"TerminalIcon\"\n\t\t\t\tremixicon=\"RiTerminalLine\"\n\t\t\t\ttabler=\"IconTerminal2\"\n\t\t\t/>\n\t\t),\n\t\tdescription: \"Auto-generate REST and GraphQL APIs instantly.\",\n\t},\n\t{\n\t\ttitle: \"Role-Based Access\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"ShieldCheck\"\n\t\t\t\tlucide=\"ShieldCheckIcon\"\n\t\t\t\tphosphor=\"ShieldCheckIcon\"\n\t\t\t\tremixicon=\"RiShieldCheckLine\"\n\t\t\t\ttabler=\"IconShieldLock\"\n\t\t\t/>\n\t\t),\n\t\tdescription: \"Secure resources with granular permission controls.\",\n\t},\n\t{\n\t\ttitle: \"Audit Trails\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"FileSearchIcon\"\n\t\t\t\tlucide=\"FileTextIcon\"\n\t\t\t\tphosphor=\"FileTextIcon\"\n\t\t\t\tremixicon=\"RiFileTextLine\"\n\t\t\t\ttabler=\"IconFileText\"\n\t\t\t/>\n\t\t),\n\t\tdescription: \"Track every change with comprehensive logs.\",\n\t},\n];\n"}]}