{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["button","@efferd/header-3","@efferd/logo-cloud-5"],"name":"hero-3","description":"Left-aligned hero with dashboard screenshot preview","categories":["hero"],"files":[{"path":"registry/blocks/hero/3/hero.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function HeroSection() {\n\treturn (\n\t\t<section className=\"mx-auto w-full max-w-5xl overflow-hidden pt-16\">\n\t\t\t{/* Shades */}\n\t\t\t<div\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"absolute inset-0 size-full overflow-hidden\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute inset-0 isolate -z-10\",\n\t\t\t\t\t\t\"bg-[radial-gradient(20%_80%_at_20%_0%,--theme(--color-foreground/.1),transparent)]\"\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className=\"relative z-10 flex max-w-2xl flex-col gap-5 px-4\">\n\t\t\t\t<a\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"group flex w-fit items-center gap-3 rounded-sm border bg-card p-1 shadow-xs\",\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\"text-balance font-medium text-4xl text-foreground leading-tight md:text-5xl\",\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-muted-foreground text-sm tracking-wider sm:text-lg md:text-xl\",\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, development <br /> 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<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"absolute -inset-x-20 inset-y-0 -translate-y-1/3 scale-120 rounded-full\",\n\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\"blur-[50px]\"\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"mask-b-from-60% relative mt-8 -mr-56 overflow-hidden px-2 sm:mt-12 sm:mr-0 md:mt-20\",\n\t\t\t\t\t\t\"fade-in slide-in-from-bottom-5 animate-in fill-mode-backwards delay-100 duration-1000 ease-out\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"relative inset-shadow-2xs inset-shadow-foreground/10 mx-auto max-w-5xl overflow-hidden rounded-lg border bg-background p-2 shadow-xl ring-1 ring-card dark:inset-shadow-foreground/20 dark:inset-shadow-xs\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\talt=\"app screen\"\n\t\t\t\t\t\t\tclassName=\"z-2 aspect-video rounded-lg border dark:hidden\"\n\t\t\t\t\t\t\theight=\"1080\"\n\t\t\t\t\t\t\tsrc=\"https://storage.efferd.com/screen/dashboard-light.webp\"\n\t\t\t\t\t\t\twidth=\"1920\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\talt=\"app screen\"\n\t\t\t\t\t\t\tclassName=\"hidden aspect-video rounded-lg bg-background dark:block\"\n\t\t\t\t\t\t\theight=\"1080\"\n\t\t\t\t\t\t\tsrc=\"https://storage.efferd.com/screen/dashboard-dark.webp\"\n\t\t\t\t\t\t\twidth=\"1920\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n"},{"path":"registry/blocks/hero/3/logos-section.tsx","type":"registry:component","content":"import { LogoCloud } from \"@/components/logo-cloud\"; // @efferd/logo-cloud-5\n\nexport function LogosSection() {\n\treturn (\n\t\t<section className=\"mx-auto h-full max-w-3xl space-y-4 px-4 py-10 md:px-8\">\n\t\t\t<h2 className=\"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<LogoCloud />\n\t\t</section>\n\t);\n}\n"}]}