4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Tcb0,export const heroSite = { name: "Nusaiba", namespace: "@nusaiba", domain: "nusaiba.dev", } as const; export const heroAnnouncement = { label: "Open registry", detail: "Motion-first shadcn blocks", } as const; export const heroCopy = { headline: "Sections built for motion.", subhead: "Preview every block live, install with the CLI, and keep source in your repo — no runtime lock-in.", primaryCta: { label: "Browse blocks", href: "/blocks" }, secondaryCta: { label: "View docs", href: "/docs" }, } as const; export const heroPosterCopy = { headline: ["Compose", "landing", "pages", "with", "intent."], subhead: "Editorial sections for developers who care about rhythm, type, and installable motion — not another SaaS template.", } as const; export const heroArchitectureCopy = { eyebrow: "Registry", headline: "Invisible grid. Visible craft.", subhead: "Each block ships as files you own. Wire copy, tokens, and motion to the product story you are telling.", } as const; export const heroMagazineCopy = { issue: "Vol. 03", headline: "Motion is the interface.", pullQuote: "Less decoration. More composition.", subhead: "Heroes, pricing, FAQs, footers — staged for scroll-reveal, stagger, and purposeful negative space.", trustLabel: "Installs beside", } as const; export const heroMagazineTrustBrands = [ { name: "Next.js", domain: "nextjs.org" }, { name: "Vercel", domain: "vercel.com" }, { name: "Linear", domain: "linear.app" }, { name: "Notion", domain: "notion.so" }, ] as const; export const heroFilmCopy = { headline: "A library that reads like a magazine.", subhead: "Scan live previews, copy a prompt, or pull a section with one command. Every layout is a distinct archetype.", } as const; export const heroPerspectiveCopy = { headline: "Depth before decoration.", subhead: "Layers imply movement before animation runs — perspective, overlap, and reveal composition baked into the layout.", } as const; export const heroGalleryCopy = { headline: "Ten families. One install path.", subhead: "From heroes to footers, each category explores a different visual narrative for landing pages.", } as const; export const heroDiagonalCopy = { headline: "Cut against the grid.", subhead: "Diagonal rhythm and masked stages — editorial tension without gradients, blobs, or stock dashboards.", } as const; export const heroFramedCopy = { headline: "Framed for the fold.", subhead: "Museum-grade spacing, decor corners, and a motion stage that feels exhibition-ready on first paint.", } as const; export const heroShowcaseBlocks = [ { id: "hero", label: "Hero", pattern: "scroll-reveal" }, { id: "pricing", label: "Pricing", pattern: "focus-shift" }, { id: "faqs", label: "FAQs", pattern: "blur-focus" }, { id: "cta", label: "CTA", pattern: "expand-grid" }, { id: "footer", label: "Footer", pattern: "fade-mask" }, ] as const; export const heroGalleryTiles = [ { id: "motion", title: "Motion patterns", caption: "Linked to live blocks" }, { id: "cli", title: "shadcn CLI", caption: "npx shadcn@latest add" }, { id: "prompt", title: "Copy prompt", caption: "Registry-native handoff" }, { id: "pro", title: "Pro license", caption: "Commercial client work" }, ] as const; 51:T1766,"use client"; import Link from "next/link"; import { useRef, useState } from "react"; import { ArrowRightIcon } from "lucide-react"; import { motion, useInView, useReducedMotion } from "motion/react"; import { Badge } from "@/components/ui/badge"; import { buttonVariants } from "@/components/ui/button"; import { BrandFonts, BrandWordmark } from "@/lib/brand-typography"; import { motionStagger, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import { heroAnnouncement, heroCopy } from "./hero-data"; const springPress = "active:scale-[0.96] transition-transform"; const logoIconClass = "size-5 shrink-0 object-contain outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10"; function getLogoDevUrl(domain: string) { const token = process.env.NEXT_PUBLIC_LOGO_DEV_PUBLISHABLE_KEY; if (!token) return null; const params = new URLSearchParams({ token, size: "80", format: "png", retina: "true", fallback: "monogram", }); return `https://img.logo.dev/${domain}?${params}`; } export function HeroAnnouncement({ className, detail = heroAnnouncement.detail, label = heroAnnouncement.label, }: { className?: string; detail?: string; label?: string; }) { return (

{label} {detail}

); } export function HeroCtaRow({ className, primary = heroCopy.primaryCta, secondary = heroCopy.secondaryCta, }: { className?: string; primary?: { label: string; href: string }; secondary?: { label: string; href: string }; }) { return (

{primary.label} {secondary.label}

); } export function MotionShowcaseFrame({ children, className, label, }: { children: React.ReactNode; className?: string; label?: string; }) { return (

{label ? (

{label}

) : null} {children}

); } export function BlockStripChip({ label, pattern, }: { label: string; pattern: string; }) { return (

{label}

{pattern}

); } export function SwissRule({ className }: { className?: string }) { return

; } export function HeroInlineLogoStrip({ brands, className, label, }: { brands: readonly { name: string; domain: string }[]; className?: string; label: string; }) { const reduceMotion = useReducedMotion(); const listRef = useRef(null); const inView = useInView(listRef, motionViewport); const [focused, setFocused] = useState(null); const itemVariants = reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, filter: "blur(4px)", y: 6 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: { type: "spring" as const, duration: 0.35, bounce: 0 } }, }; return (

{label}

setFocused(null)} ref={listRef} variants={{ hidden: {}, visible: { transition: { staggerChildren: motionStagger.item, delayChildren: 0.04 }, }, }} > {brands.map((brand) => { const src = getLogoDevUrl(brand.domain); const isFocused = focused === brand.domain; const dimmed = focused !== null && !isFocused; return ( setFocused((current) => (current === brand.domain ? null : current))} onFocus={() => setFocused(brand.domain)} onMouseEnter={() => setFocused(brand.domain)} transition={{ type: "spring", duration: 0.3, bounce: 0 }} type="button" > {src ? (

) : null} ); })}

); } 52:Tef2,"use client"; import { useRef } from "react"; import { motion, useInView, useReducedMotion } from "motion/react"; import { ContentRail, SectionShell } from "@/components/layout-contract"; import { motionStagger, motionViewport } from "@/lib/motion-tokens"; import { cn } from "@/lib/utils"; import { heroArchitectureCopy, heroCopy } from "../hero-data"; import { HeroAnnouncement, HeroCtaRow, MotionShowcaseFrame, SwissRule, } from "../hero-primitives"; const spring = { type: "spring" as const, duration: 0.35, bounce: 0 }; const gridFrames = [ { label: "hero-4", span: "col-span-2 row-span-2" }, { label: "pricing-2", span: "col-span-1" }, { label: "faqs-2", span: "col-span-1" }, { label: "cta-3", span: "col-span-2" }, ] as const; export function HeroArchitectureSection() { const reduceMotion = useReducedMotion(); const ref = useRef(null); const inView = useInView(ref, motionViewport); const itemVariants = reduceMotion ? { hidden: { opacity: 1 }, visible: { opacity: 1 } } : { hidden: { opacity: 0, filter: "blur(4px)", y: 12 }, visible: { opacity: 1, filter: "blur(0px)", y: 0, transition: spring }, }; return (

{heroArchitectureCopy.eyebrow} {heroArchitectureCopy.headline} {heroArchitectureCopy.subhead}

{gridFrames.map((frame) => ( {frame.label} ))}

{heroCopy.subhead.slice(0, 64)}…

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@nusaiba","registryDependencies":["@nusaiba/foundation","badge","button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/hero/hero-data.ts","content":"$50","type":"registry:lib"},{"path":"registry/blocks/hero/hero-primitives.tsx","content":"$51","type":"registry:lib"},{"path":"registry/blocks/hero/9/hero-section.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]