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:T1d97,'use client' import { AnimatePresence, motion } from 'motion/react' import { useEffect, useState } from 'react' export interface Content05Item { image: string title: string description: string defaultFocus?: boolean } export interface Content05Props { title?: string description?: string items: Content05Item[] dimUnfocused?: boolean descriptionOnFocus?: boolean } // ─── Constants ─────────────────────────────────────────────────────────────── const BREAKPOINTS = { md: 768, lg: 1024 } as const const COLS = { sm: 1, md: 2, lg: 3 } as const const GAP_REM = 1 // ─── Hooks ─────────────────────────────────────────────────────────────────── function useColsPerRow(): number | undefined { const [cols, setCols] = useState(undefined) useEffect(() => { const update = () => { const width = window.innerWidth if (width >= BREAKPOINTS.lg) setCols(COLS.lg) else if (width >= BREAKPOINTS.md) setCols(COLS.md) else setCols(COLS.sm) } update() window.addEventListener('resize', update) return () => window.removeEventListener('resize', update) }, []) return cols } // ─── Utilities ─────────────────────────────────────────────────────────────── function chunk(array: T[], size: number): T[][] { return Array.from({ length: Math.ceil(array.length / size) }, (_, i) => array.slice(i * size, i * size + size), ) } function getItemWidth( isFocused: boolean, rowSize: number, hasRowFocus: boolean, ): string { if (rowSize === 1) return '100%' const gapTotal = (rowSize - 1) * GAP_REM if (!hasRowFocus) return `calc((100% - ${gapTotal}rem) / ${rowSize})` const focusedFraction = 2 / (rowSize + 1) const otherFraction = (1 - focusedFraction) / (rowSize - 1) const fraction = isFocused ? focusedFraction : otherFraction return `calc((100% - ${gapTotal}rem) * ${fraction})` } // ─── ItemCard ───────────────────────────────────────────────────────────────── type ItemCardProps = Readonly<{ item: Content05Item isFocused?: boolean dimmed?: boolean showDescription?: boolean width?: string onActivate?: () => void }> function ItemCard({ item, isFocused = false, dimmed = false, showDescription = true, width, onActivate, }: ItemCardProps) { return ( ) } // ─── Content05 ──────────────────────────────────────────────────────────────── export function Content05({ title, description, items, dimUnfocused = false, descriptionOnFocus = false, }: Readonly) { const [focusedIndex, setFocusedIndex] = useState(() => items.findIndex((item) => item.defaultFocus), ) const colsPerRow = useColsPerRow() const isMobile = colsPerRow === COLS.sm const rows = colsPerRow === undefined ? [] : chunk(items, colsPerRow) const hasFocusedItem = focusedIndex !== -1 const toggle = (index: number) => setFocusedIndex((prev) => (prev === index ? -1 : index)) if (colsPerRow === undefined) return null if (isMobile) { return (

{items.map((item) => ( ))}

) } return (

{(title || description) && (

{title &&

{title}

} {description && (

{description}

)}

{rows.map((row, rowIndex) => { const rowStartIndex = rowIndex * colsPerRow const hasRowFocus = focusedIndex >= rowStartIndex && focusedIndex < rowStartIndex + row.length return (

{row.map((item, colIndex) => { const globalIndex = rowStartIndex + colIndex const isFocused = focusedIndex === globalIndex return ( toggle(globalIndex)} /> ) })}

) })}

) } 51:T821,import { Content05, type Content05Props } from './content-05' export const values = { title: 'Our process', description: 'From idea to launch—click each phase to see how we work.', dimUnfocused: false, descriptionOnFocus: true, items: [ { image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=1099&auto=format&fit=crop', title: 'Discovery', description: 'We start by understanding your goals, your users, and the constraints you face.', defaultFocus: true, }, { image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=1170&auto=format&fit=crop', title: 'Design', description: 'Clean interfaces and clear flows that people love to use every day.', }, { image: 'https://images.unsplash.com/photo-1587563871167-1ee9c731aefb?q=80&w=1131&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', title: 'Build', description: 'Solid, accessible code that scales with your product and your team.', }, { image: 'https://images.unsplash.com/photo-1713623069173-3afa89926882?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', title: 'Test', description: 'We validate everything with real users before launch, so nothing is left to chance.', }, { image: 'https://images.unsplash.com/photo-1625245488600-f03fef636a3c?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', title: 'Launch', description: 'Go live with confidence, with support and iteration when you need it.', }, ], } satisfies Content05Props export function Content05Example() { return ( ) } 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":"@flx","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/content/content-05/content-05.tsx","content":"$50","type":"registry:component","target":"components/flx/blocks/content/content-05/content-05.tsx"},{"path":"registry/blocks/content/content-05/content-05-example.tsx","content":"$51","type":"registry:component","target":"components/flx/blocks/content/content-05/content-05-example.tsx"}],"className":"h-[70svh] min-h-80"}]]}]

{item.title}

{title}