4a: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T1333,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/ds-badge" import { Skeleton } from "@/components/ui/skeleton" // ── Types ── export interface HeroLayersItem { src: string alt: string } export interface HeroLayersProps extends React.HTMLAttributes, VariantProps { badge?: string title?: string description?: string actions?: React.ReactNode layers?: HeroLayersItem[] loading?: boolean } // ── Variants ── export const heroLayersVariants = cva( "relative flex w-full flex-col items-center overflow-hidden bg-background px-4 py-12 text-center sm:px-6 sm:py-16", { variants: { inset: { true: "mx-auto max-w-6xl rounded-3xl border bg-card shadow-sm", false: "", }, }, defaultVariants: { inset: false, }, } ) // ── Component ── export function HeroLayers({ className, inset = false, badge = "Launch UI v2 is out!", title = "Give your big idea the design it deserves", description = "Professionally designed blocks and templates built with React, shadcn/ui and Tailwind that will help your product stand out.", actions, layers, loading = false, ...props }: HeroLayersProps) { const defaultLayers: HeroLayersItem[] = [ { src: "https://picsum.photos/seed/layers1/1200/700", alt: "Dashboard preview", }, { src: "https://picsum.photos/seed/layers2/900/600", alt: "Tasks preview" }, { src: "https://picsum.photos/seed/layers3/700/500", alt: "Mobile preview", }, ] const items = layers ?? defaultLayers if (loading) { return (

) } return (

{badge && ( {badge} )}

{title}

{description}

{actions && (

{actions}

)} {/* Layers stack — inspired by Launch UI Hero Layers */}

{/* base layer */}

{/* eslint-disable-next-line @next/next/no-img-element */} {items[0]?.alt

{/* second layer — offset top right */} {items[1] && (

{/* eslint-disable-next-line @next/next/no-img-element */} {items[1].alt}

)} {/* third layer — bottom left */} {items[2] && (

{/* eslint-disable-next-line @next/next/no-img-element */} {items[2].alt}

)}

) } 49:["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L4a",null,{"namespace":"@lema-ds","registryDependencies":["badge","skeleton"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"components/ds/hero-layers.tsx","content":"$4c","type":"registry:block","target":"components/ui/ds-hero-layers.tsx"}],"className":"h-[70svh] min-h-80"}]]}]