18:I[14624,["798","static/chunks/798-64566febefb4a99f.js","748","static/chunks/748-7ca528afe0df4742.js","141","static/chunks/app/(home)/blocks/%5Bcategory%5D/page-063128b870d89aa0.js"],"BlockEntry"] 19:T5c2,"use client"; import { cn } from "@/lib/utils"; import { Button, buttonVariants } from "@/components/ui/button"; import { Logo } from "./logo"; import { useScroll } from "./hooks/use-scroll"; import { MobileNav } from "./mobile-nav"; export const navLinks = [ { label: "Features", href: "#", }, { label: "Pricing", href: "#", }, { label: "About", href: "#", }, ]; export function Header() { const scrolled = useScroll(10); return (

); } 1a:Tddb,import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { RocketIcon, ArrowRightIcon, PhoneCallIcon } from "lucide-react"; export function HeroSection() { return (

shipped new features!

Building Teams Help
You Scale and Lead

Conecting you with world-class talent
to scale, innovate and lead

); } 1b:T4da,import { InfiniteSlider } from "./ui/infinite-slider"; export function LogoCloud() { return (

{logos.map((logo) => (

))}

); } const logos = [ { src: "/blocks/hero-1/nvidia.svg", alt: "Nvidia Logo", }, { src: "/blocks/hero-1/supabase.svg", alt: "Supabase Logo", }, { src: "/blocks/hero-1/openai.svg", alt: "OpenAI Logo", }, { src: "/blocks/hero-1/turso.svg", alt: "Turso Logo", }, { src: "/blocks/hero-1/vercel.svg", alt: "Vercel Logo", }, { src: "/blocks/hero-1/github.svg", alt: "GitHub Logo", }, { src: "/blocks/hero-1/claude.svg", alt: "Claude AI Logo", }, { src: "/blocks/hero-1/clerk.svg", alt: "Clerk Logo", }, ]; 1c:T735,"use client"; import { cn } from "@/lib/utils"; import React from "react"; import { Button, buttonVariants } from "@/components/ui/button"; import { Portal, PortalBackdrop } from "./portal"; import { navLinks } from "./header"; import { XIcon, MenuIcon } from "lucide-react"; export function MobileNav() { const [open, setOpen] = React.useState(false); return (

{open && ( )}

); } 1d:T570,import { cn } from "@/lib/utils"; import React from "react"; import { createPortal } from "react-dom"; function Portal({ className, ...props }: React.ComponentProps<"div">) { const [mounted, setMounted] = React.useState(false); React.useEffect(() => { setMounted(true); const originalStyle = window.getComputedStyle(document.body).overflow; const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; const originalPaddingRight = document.body.style.paddingRight; document.body.style.overflow = "hidden"; if (scrollbarWidth > 0) { document.body.style.paddingRight = `${scrollbarWidth}px`; } return () => { document.body.style.overflow = originalStyle; document.body.style.paddingRight = originalPaddingRight; }; }, []); if (!mounted) { return null; } return createPortal(

, document.body ); } function PortalBackdrop({ className, ...props }: React.ComponentProps<"div">) { return (

); } export { Portal, PortalBackdrop }; 1e:T9d8,"use client"; import { cn } from "@/lib/utils"; import { animate, motion, useMotionValue } from "motion/react"; import { useEffect, useState } from "react"; import useMeasure from "react-use-measure"; export type InfiniteSliderProps = { children: React.ReactNode; gap?: number; speed?: number; speedOnHover?: number; direction?: "horizontal" | "vertical"; reverse?: boolean; className?: string; }; export function InfiniteSlider({ children, gap = 16, speed = 100, speedOnHover, direction = "horizontal", reverse = false, className, }: InfiniteSliderProps) { const [currentSpeed, setCurrentSpeed] = useState(speed); const [ref, { width, height }] = useMeasure(); const translation = useMotionValue(0); const [isTransitioning, setIsTransitioning] = useState(false); useEffect(() => { let controls: ReturnType | undefined; const size = direction === "horizontal" ? width : height; const contentSize = size + gap; const from = reverse ? -contentSize / 2 : 0; const to = reverse ? 0 : -contentSize / 2; const distanceToTravel = Math.abs(to - from); const duration = distanceToTravel / currentSpeed; if (isTransitioning) { const remainingDistance = Math.abs(translation.get() - to); const transitionDuration = remainingDistance / currentSpeed; controls = animate(translation, [translation.get(), to], { ease: "linear", duration: transitionDuration, onComplete: () => { setIsTransitioning(false); }, }); } else { controls = animate(translation, [from, to], { ease: "linear", duration, repeat: Number.POSITIVE_INFINITY, repeatType: "loop", repeatDelay: 0, onRepeat: () => { translation.set(from); }, }); } return controls?.stop; }, [ translation, currentSpeed, width, height, gap, isTransitioning, direction, reverse, ]); const hoverProps = speedOnHover ? { onHoverStart: () => { setIsTransitioning(true); setCurrentSpeed(speedOnHover); }, onHoverEnd: () => { setIsTransitioning(true); setCurrentSpeed(speed); }, } : {}; return (

{children} {children}

); } 1f:T8e0,20:T16a5, 21:T902, 22:T866, 23:Te26,24:T66a,25:T1145,26:Tbcf,10:["$","main",null,{"className":"pt-24 pb-10 sm:pt-28 md:pt-32 lg:pb-20","children":["$","div",null,{"className":"mx-auto w-full min-w-0 max-w-screen-2xl px-4 sm:px-6 lg:px-8","children":[["$","$Ld",null,{"href":"/blocks","className":"inline-flex items-center gap-1.5 text-sm font-bold text-zinc-600 transition-colors hover:text-zinc-950","children":[["$","span",null,{"aria-hidden":true,"children":"←"}]," Back to Blocks"]}],["$","div",null,{"className":"mx-auto max-w-2xl pt-6 pb-12 text-center md:pb-16","children":[["$","h1",null,{"className":"heading-display","children":["Explore ","Hero Sections"]}],["$","p",null,{"className":"mx-auto mt-6 max-w-xl text-lg text-zinc-600","children":["Discover ",3," beautifully crafted"," ","hero sections"," blocks. Ready to copy, customize, and drop into your next project."]}]]}],["$","div",null,{"className":"space-y-20 md:space-y-28","children":[["$","$L18","hero-1",{"sample":{"id":"hero-1","name":"hero 1","description":"Centered hero with announcement badge and dual call to action","registry":"@luminix/hero-1","prompt":"Build a centered React hero section with an announcement badge, a large headline, supporting subcopy, and two call to action buttons.","dark":true,"files":[{"label":"components/blocks/hero-1/index.tsx","path":"components/blocks/samples/hero-1/index.tsx"},{"label":"components/blocks/hero-1/header.tsx","path":"components/blocks/samples/hero-1/header.tsx"},{"label":"components/blocks/hero-1/hero.tsx","path":"components/blocks/samples/hero-1/hero.tsx"},{"label":"components/blocks/hero-1/logos-section.tsx","path":"components/blocks/samples/hero-1/logos-section.tsx"},{"label":"components/blocks/hero-1/logo-cloud.tsx","path":"components/blocks/samples/hero-1/logo-cloud.tsx"},{"label":"components/blocks/hero-1/logo.tsx","path":"components/blocks/samples/hero-1/logo.tsx"},{"label":"components/blocks/hero-1/mobile-nav.tsx","path":"components/blocks/samples/hero-1/mobile-nav.tsx"},{"label":"components/blocks/hero-1/portal.tsx","path":"components/blocks/samples/hero-1/portal.tsx"},{"label":"components/blocks/hero-1/ui/infinite-slider.tsx","path":"components/blocks/samples/hero-1/ui/infinite-slider.tsx"},{"label":"components/blocks/hero-1/hooks/use-scroll.ts","path":"components/blocks/samples/hero-1/hooks/use-scroll.ts"},{"label":"public/blocks/hero-1/nvidia.svg","path":"components/blocks/samples/hero-1/logos/nvidia.svg"},{"label":"public/blocks/hero-1/supabase.svg","path":"components/blocks/samples/hero-1/logos/supabase.svg"},{"label":"public/blocks/hero-1/openai.svg","path":"components/blocks/samples/hero-1/logos/openai.svg"},{"label":"public/blocks/hero-1/turso.svg","path":"components/blocks/samples/hero-1/logos/turso.svg"},{"label":"public/blocks/hero-1/vercel.svg","path":"components/blocks/samples/hero-1/logos/vercel.svg"},{"label":"public/blocks/hero-1/github.svg","path":"components/blocks/samples/hero-1/logos/github.svg"},{"label":"public/blocks/hero-1/claude.svg","path":"components/blocks/samples/hero-1/logos/claude.svg"},{"label":"public/blocks/hero-1/clerk.svg","path":"components/blocks/samples/hero-1/logos/clerk.svg"}],"dependencies":["lucide-react","motion","react-use-measure"],"registryDependencies":["button"]},"files":[{"label":"components/blocks/hero-1/index.tsx","source":"\"use client\";\n\nimport { Header } from \"./header\";\nimport { HeroSection } from \"./hero\";\nimport { LogosSection } from \"./logos-section\";\n\nexport default function Hero1() {\n return (\n <>\n

\n \n \n

\n \n );\n}\n"},{"label":"components/blocks/hero-1/header.tsx","source":"$19"},{"label":"components/blocks/hero-1/hero.tsx","source":"$1a"},{"label":"components/blocks/hero-1/logos-section.tsx","source":"import { LogoCloud } from \"./logo-cloud\";\n\nexport function LogosSection() {\n return (\n

\n Trusted by experts\n

\n \n

\n );\n}\n"},{"label":"components/blocks/hero-1/logo-cloud.tsx","source":"$1b"},{"label":"components/blocks/hero-1/logo.tsx","source":"import type { HTMLAttributes, SVGProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function LogoIcon({ className, ...props }: SVGProps) {\n return (\n \n \n \n );\n}\n\nexport function Logo({ className, ...props }: HTMLAttributes) {\n return (\n \n \n Luminix\n \n );\n}\n"},{"label":"components/blocks/hero-1/mobile-nav.tsx","source":"$1c"},{"label":"components/blocks/hero-1/portal.tsx","source":"$1d"},{"label":"components/blocks/hero-1/ui/infinite-slider.tsx","source":"$1e"},{"label":"components/blocks/hero-1/hooks/use-scroll.ts","source":"\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport function useScroll(downThreshold: number, upThreshold?: number) {\n\tconst [scrolled, setScrolled] = useState(false);\n\tconst scrollUpThreshold = upThreshold ?? downThreshold / 2;\n\n\tuseEffect(() => {\n\t\tconst handleScroll = () => {\n\t\t\tconst y = window.scrollY;\n\t\t\t// Hysteresis: different thresholds for up/down to prevent flickering\n\t\t\tsetScrolled((prev) => {\n\t\t\t\tif (prev) {\n\t\t\t\t\t// Currently scrolled - only unscroll when below lower threshold\n\t\t\t\t\treturn y > scrollUpThreshold;\n\t\t\t\t}\n\t\t\t\t// Currently not scrolled - only scroll when above higher threshold\n\t\t\t\treturn y > downThreshold;\n\t\t\t});\n\t\t};\n\n\t\twindow.addEventListener(\"scroll\", handleScroll, { passive: true });\n\t\thandleScroll();\n\t\treturn () => window.removeEventListener(\"scroll\", handleScroll);\n\t}, [downThreshold, scrollUpThreshold]);\n\n\treturn scrolled;\n}\n"},{"label":"public/blocks/hero-1/nvidia.svg","source":"$1f"},{"label":"public/blocks/hero-1/supabase.svg","source":"$20"},{"label":"public/blocks/hero-1/openai.svg","source":"$21"},{"label":"public/blocks/hero-1/turso.svg","source":"$22"},{"label":"public/blocks/hero-1/vercel.svg","source":"$23"},{"label":"public/blocks/hero-1/github.svg","source":"$24"},{"label":"public/blocks/hero-1/claude.svg","source":"$25"},{"label":"public/blocks/hero-1/clerk.svg","source":"$26"}],"categoryId":"hero"}],"$L27","$L28"]}]]}]}]

Explore Hero Sections

hero 1

hero 2

hero 3