{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["button","@efferd/decor-icon","@efferd/full-width-divider","@efferd/header-2","@efferd/logo-cloud-2"],"name":"hero-2","description":"Hero with vertical border accents and gradient text effect","categories":["hero"],"files":[{"path":"registry/blocks/hero/2/hero.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { DecorIcon } from \"@/components/decor-icon\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\n\nexport function HeroSection() {\n\treturn (\n\t\t<section>\n\t\t\t<div className=\"relative flex flex-col items-center justify-center gap-5 px-4 py-12 md:px-4 md:py-24 lg:py-28\">\n\t\t\t\t{/* X Faded Borders & Shades */}\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"absolute inset-0 -z-1 size-full overflow-hidden\"\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"absolute -inset-x-20 inset-y-0 z-0 rounded-full\",\n\t\t\t\t\t\t\t\"bg-[radial-gradient(ellipse_at_center,theme(--color-foreground/.1),transparent,transparent)]\",\n\t\t\t\t\t\t\t\"blur-[50px]\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"absolute inset-y-0 left-4 w-px bg-linear-to-b from-transparent via-border to-border md:left-8\" />\n\t\t\t\t\t<div className=\"absolute inset-y-0 right-4 w-px bg-linear-to-b from-transparent via-border to-border md:right-8\" />\n\t\t\t\t\t<div className=\"absolute inset-y-0 left-8 w-px bg-linear-to-b from-transparent via-border/50 to-border/50 md:left-12\" />\n\t\t\t\t\t<div className=\"absolute inset-y-0 right-8 w-px bg-linear-to-b from-transparent via-border/50 to-border/50 md:right-12\" />\n\t\t\t\t</div>\n\t\t\t\t<a\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"group mx-auto flex w-fit items-center gap-3 rounded-sm border bg-card p-1 shadow\",\n\t\t\t\t\t\t\"fade-in slide-in-from-bottom-10 animate-in fill-mode-backwards transition-all delay-500 duration-500 ease-out\"\n\t\t\t\t\t)}\n\t\t\t\t\thref=\"#link\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"rounded-xs border bg-card px-1.5 py-0.5 shadow-sm\">\n\t\t\t\t\t\t<p className=\"font-mono text-xs\">NOW</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<span className=\"text-xs\">accepting new client projects</span>\n\t\t\t\t\t<span className=\"block h-5 border-l\" />\n\n\t\t\t\t\t<div className=\"pr-1\">\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\tclassName=\"size-3 -translate-x-0.5 duration-150 ease-out group-hover:translate-x-0.5\"\n\t\t\t\t\t\t\thugeicons=\"ArrowRight02Icon\"\n\t\t\t\t\t\t\tlucide=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tphosphor=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiArrowRightLine\"\n\t\t\t\t\t\t\ttabler=\"IconArrowRight\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<h1\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"max-w-2xl text-balance text-center text-3xl text-foreground md:text-5xl lg:text-6xl\",\n\t\t\t\t\t\t\"fade-in slide-in-from-bottom-10 animate-in fill-mode-backwards delay-100 duration-500 ease-out\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\tBuilding Digital Experiences That Drive Growth\n\t\t\t\t</h1>\n\n\t\t\t\t<p\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"text-center text-muted-foreground text-sm tracking-wider sm:text-lg\",\n\t\t\t\t\t\t\"fade-in slide-in-from-bottom-10 animate-in fill-mode-backwards delay-200 duration-500 ease-out\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\tWe help brands scale faster through design, <br /> development and\n\t\t\t\t\tstrategic execution.\n\t\t\t\t</p>\n\n\t\t\t\t<div className=\"fade-in slide-in-from-bottom-10 flex w-fit animate-in items-center justify-center gap-3 fill-mode-backwards pt-2 delay-300 duration-500 ease-out\">\n\t\t\t\t\t<Button variant=\"outline\">\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\tdata-icon=\"inline-start\"\n\t\t\t\t\t\t\thugeicons=\"Call02Icon\"\n\t\t\t\t\t\t\tlucide=\"PhoneCallIcon\"\n\t\t\t\t\t\t\tphosphor=\"PhoneCallIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiPhoneLine\"\n\t\t\t\t\t\t\ttabler=\"IconPhone\"\n\t\t\t\t\t\t/>{\" \"}\n\t\t\t\t\t\tBook a Call\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button>\n\t\t\t\t\t\tGet started{\" \"}\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\tdata-icon=\"inline-end\"\n\t\t\t\t\t\t\thugeicons=\"ArrowRight02Icon\"\n\t\t\t\t\t\t\tlucide=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tphosphor=\"ArrowRightIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiArrowRightLine\"\n\t\t\t\t\t\t\ttabler=\"IconArrowRight\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"relative\">\n\t\t\t\t<DecorIcon className=\"size-4\" position=\"top-left\" />\n\t\t\t\t<DecorIcon className=\"size-4\" position=\"top-right\" />\n\t\t\t\t<DecorIcon className=\"size-4\" position=\"bottom-left\" />\n\t\t\t\t<DecorIcon className=\"size-4\" position=\"bottom-right\" />\n\n\t\t\t\t<FullWidthDivider className=\"-top-px\" />\n\t\t\t\t<div className=\"overflow-hidden *:pointer-events-none *:aspect-video *:select-none\">\n\t\t\t\t\t<img\n\t\t\t\t\t\talt=\"light app screen\"\n\t\t\t\t\t\tclassName=\"dark:hidden\"\n\t\t\t\t\t\theight=\"auto\"\n\t\t\t\t\t\tsrc=\"https://storage.efferd.com/screen/dashboard-light.webp\"\n\t\t\t\t\t\twidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t\t<img\n\t\t\t\t\t\talt=\"dark app screen\"\n\t\t\t\t\t\tclassName=\"hidden dark:block\"\n\t\t\t\t\t\theight=\"auto\"\n\t\t\t\t\t\tsrc=\"https://storage.efferd.com/screen/dashboard-dark.webp\"\n\t\t\t\t\t\twidth=\"auto\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<FullWidthDivider className=\"-bottom-px\" />\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n"},{"path":"registry/blocks/hero/2/logos-section.tsx","type":"registry:component","content":"import { LogoCloud } from \"@/components/logo-cloud\"; // @efferd/logo-cloud-2\nimport { DecorIcon } from \"@/components/decor-icon\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\n\nexport function LogosSection() {\n\treturn (\n\t\t<section className=\"mb-12\">\n\t\t\t<h2 className=\"py-6 text-center font-medium text-lg text-muted-foreground tracking-tight md:text-xl\">\n\t\t\t\tTrusted by <span className=\"text-foreground\">experts</span>\n\t\t\t</h2>\n\t\t\t<div className=\"relative *:border-0\">\n\t\t\t\t<DecorIcon className=\"size-4\" position=\"top-left\" />\n\t\t\t\t<DecorIcon className=\"size-4\" position=\"top-right\" />\n\t\t\t\t<DecorIcon className=\"size-4\" position=\"bottom-left\" />\n\t\t\t\t<DecorIcon className=\"size-4\" position=\"bottom-right\" />\n\n\t\t\t\t<FullWidthDivider className=\"-top-px\" />\n\t\t\t\t<LogoCloud />\n\t\t\t\t<FullWidthDivider className=\"-bottom-px\" />\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n"}]}