{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/decor-icon"],"name":"features-2","description":"Three-column grid with decorative corner icons and dashed lines highlighting workflow features.","categories":["features"],"files":[{"path":"registry/blocks/features/2/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 max-w-5xl\">\n\t\t\t<h2 className=\"mb-5 text-center font-medium text-2xl md:text-3xl\">\n\t\t\t\tEnsuring your speedy workflow\n\t\t\t</h2>\n\n\t\t\t<div className=\"relative\">\n\t\t\t\t{/* Corner Icons */}\n\t\t\t\t<DecorIcon\n\t\t\t\t\tclassName=\"size-6 stroke-2 stroke-border\"\n\t\t\t\t\tposition=\"top-left\"\n\t\t\t\t/>\n\t\t\t\t<DecorIcon\n\t\t\t\t\tclassName=\"size-6 stroke-2 stroke-border\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t/>\n\t\t\t\t<DecorIcon\n\t\t\t\t\tclassName=\"size-6 stroke-2 stroke-border\"\n\t\t\t\t\tposition=\"bottom-left\"\n\t\t\t\t/>\n\t\t\t\t<DecorIcon\n\t\t\t\t\tclassName=\"size-6 stroke-2 stroke-border\"\n\t\t\t\t\tposition=\"bottom-right\"\n\t\t\t\t/>\n\n\t\t\t\t<DashedLine className=\"-top-[1.5px] right-3 left-3\" />\n\t\t\t\t<DashedLine className=\"top-3 -right-[1.5px] bottom-3\" />\n\t\t\t\t<DashedLine className=\"top-3 bottom-3 -left-[1.5px]\" />\n\t\t\t\t<DashedLine className=\"right-3 -bottom-[1.5px] left-3\" />\n\n\t\t\t\t<div className=\"grid grid-cols-1 md:grid-cols-3\">\n\t\t\t\t\t{features.map((feature) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"group [&_svg]:mask-b-from-0% relative p-8 [&_svg]:size-7 [&_svg]:text-muted-foreground\"\n\t\t\t\t\t\t\tkey={feature.title}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{feature.icon}\n\t\t\t\t\t\t\t<h3 className=\"font-medium text-lg\">{feature.title}</h3>\n\t\t\t\t\t\t\t<p className=\"text-muted-foreground text-sm leading-relaxed\">\n\t\t\t\t\t\t\t\t{feature.description}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<DashedLine className=\"right-5 bottom-0 left-5 group-last:hidden md:top-5 md:right-0 md:bottom-5 md:left-full\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction DashedLine({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"absolute border-collapse border border-dashed\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst features: FeatureType[] = [\n\t{\n\t\ttitle: \"Auto-Save Everything\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"Time01Icon\"\n\t\t\t\tlucide=\"HistoryIcon\"\n\t\t\t\tphosphor=\"ClockCounterClockwiseIcon\"\n\t\t\t\tremixicon=\"RiHistoryLine\"\n\t\t\t\ttabler=\"IconHistory\"\n\t\t\t/>\n\t\t),\n\t\tdescription: \"Write without worry, every time.\",\n\t},\n\t{\n\t\ttitle: \"Drag-and-Drop Blocks\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"SquareDashed\"\n\t\t\t\tlucide=\"SquareDashedIcon\"\n\t\t\t\tphosphor=\"SquareIcon\"\n\t\t\t\tremixicon=\"RiCheckboxBlankLine\"\n\t\t\t\ttabler=\"IconSquareDashed\"\n\t\t\t/>\n\t\t),\n\t\tdescription: \"Rearrange sections with the block editor.\",\n\t},\n\t{\n\t\ttitle: \"Keyboard Shortcuts\",\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"CommandIcon\"\n\t\t\t\tlucide=\"CommandIcon\"\n\t\t\t\tphosphor=\"CommandIcon\"\n\t\t\t\tremixicon=\"RiCommandLine\"\n\t\t\t\ttabler=\"IconCommand\"\n\t\t\t/>\n\t\t),\n\t\tdescription: \"Speed up your workflow with quick keys.\",\n\t},\n];\n"}]}