63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T183e,import type { CommunityHeroProps } from "@/components/crowdwall-hero"; /* Demo portraits from Unsplash (free to use under the Unsplash License), cropped to 4:3 around the face. Swap in photos of your own community: a path in public/ or any image URL works. */ const unsplash = (photo: string) => `https://images.unsplash.com/${photo}?w=320&h=240&fit=crop&crop=faces&auto=format&q=70`; export const crowdwallPhotos = [ { src: unsplash("photo-1494790108377-be9c29b29330"), alt: "Woman with long dark hair laughing, in a red top" }, { src: unsplash("photo-1554454188-f84071b1695f"), alt: "Man in glasses laughing outdoors" }, { src: unsplash("photo-1689600944138-da3b150d9cb8"), alt: "Woman with dark hair smiling outdoors" }, { src: unsplash("photo-1500648767791-00dcc994a43e"), alt: "Man with dark hair and a soft smile" }, { src: unsplash("photo-1611432579699-484f7990b127"), alt: "Woman with short natural hair smiling, in a white top" }, { src: unsplash("photo-1622124549569-734d5a66859d"), alt: "Man in glasses with his hand on his chin" }, { src: unsplash("photo-1573497491765-dccce02b29df"), alt: "Woman with natural curly hair smiling, in a yellow patterned top" }, { src: unsplash("photo-1595211877493-41a4e5f236b3"), alt: "Man in glasses smiling, in a black top" }, { src: unsplash("photo-1574842537689-5407308d37bb"), alt: "Woman with a dark bob in a white shirt" }, { src: unsplash("photo-1758685734511-4f49ce9a382b"), alt: "Older man with glasses smiling in front of a chalkboard" }, { src: unsplash("photo-1655249493799-9cee4fe983bb"), alt: "Woman with shoulder-length dark hair in a gray sweater" }, { src: unsplash("photo-1757744705465-ea08b0ddc38a"), alt: "Young man in a dark blue sweater laughing" }, { src: unsplash("photo-1604904612715-47bf9d9bc670"), alt: "Woman with long hair in a gray blazer" }, { src: unsplash("photo-1705645930353-0e335311ef20"), alt: "Man with short dark hair smiling" }, { src: unsplash("photo-1685760259914-ee8d2c92d2e0"), alt: "Woman with auburn hair in a navy blazer smiling" }, { src: unsplash("photo-1507003211169-0a1dd7228f2d"), alt: "Man with a short beard smiling broadly" }, { src: unsplash("photo-1615538785945-6625ccdb4b25"), alt: "Woman with red hair and glasses in a red jacket" }, { src: unsplash("photo-1617386124435-9eb3935b1e11"), alt: "Man with a beard in a black hoodie" }, { src: unsplash("photo-1595085610978-b5e35eb24dcf"), alt: "Woman with long dark hair smiling warmly" }, { src: unsplash("photo-1568602471122-7832951cc4c5"), alt: "Man with curly hair, glasses and a beard smiling" }, { src: unsplash("photo-1619431667975-e93b820cde63"), alt: "Young woman with long dark hair outdoors" }, { src: unsplash("photo-1790386436843-76ff0b8fcfca"), alt: "Man with a beard in a black turtleneck" }, { src: unsplash("photo-1609436132311-e4b0c9370469"), alt: "Woman with long dark hair looking at the camera" }, { src: unsplash("photo-1789757287443-59c4df41e6e5"), alt: "Man with a beard smiling at his desk" }, { src: unsplash("photo-1662850886700-4ec19bd30d11"), alt: "Woman with curly hair smiling, her hand in her hair" }, { src: unsplash("photo-1615263787251-a9a7c6c26cf1"), alt: "Young man in glasses and a gray hoodie" }, { src: unsplash("photo-1611432579402-7037e3e2c1e4"), alt: "Woman with short natural hair in a yellow blazer" }, { src: unsplash("photo-1692197393247-c76e1bd8f29e"), alt: "Man with a beard smiling, in a white shirt" }, { src: unsplash("photo-1758600587815-b654d1405e83"), alt: "Woman with long dark hair smiling in front of a colorful wall" }, { src: unsplash("photo-1656338997878-279d71d48f6e"), alt: "Older man with a gray beard smiling" }, { src: unsplash("photo-1652471949169-9c587e8898cd"), alt: "Woman with blonde hair smiling, in a red top and black jacket" }, { src: unsplash("photo-1522529599102-193c0d76b5b6"), alt: "Man smiling outdoors in a gray T-shirt" }, { src: unsplash("photo-1758600587728-9bde755354ad"), alt: "Woman in glasses smiling with her arms crossed" }, { src: unsplash("photo-1566492031773-4f4e44671857"), alt: "Man in round glasses resting his chin on his hand" }, { src: unsplash("photo-1607746882042-944635dfe10e"), alt: "Woman with dark hair in a checked shirt, smiling softly" }, { src: unsplash("photo-1625241152315-4a698f74ceb7"), alt: "Young man with dark hair smiling" }, { src: unsplash("photo-1671029773094-faae1c044b40"), alt: "Woman with short bleached hair laughing outdoors" }, { src: unsplash("photo-1600878459138-e1123b37cb30"), alt: "Man in a dark suit smiling" }, { src: unsplash("photo-1758685848602-09e52ef9c7d3"), alt: "Woman in a lab coat and glasses in front of a blackboard" }, { src: unsplash("photo-1544168190-79c17527004f"), alt: "Man in a light denim shirt" }, { src: unsplash("photo-1623594675959-02360202d4d6"), alt: "Woman with her hair in a bun smiling against an orange wall" }, { src: unsplash("photo-1622319107576-cca7c8a906f7"), alt: "Young person with curly hair and glasses smiling outdoors" }, { src: unsplash("photo-1517256673644-36ad11246d21"), alt: "Woman in round glasses in front of a graffiti wall" }, { src: unsplash("photo-1656337789708-cdf37b07112d"), alt: "Man with a ginger beard smiling, hand on his chin" }, { src: unsplash("photo-1590441613122-d8777e0b4445"), alt: "Woman laughing with her hands on her cheeks" }, { src: unsplash("photo-1603559822934-c01e9aa89708"), alt: "Bald man with a big smile" }, { src: unsplash("photo-1627161683077-e34782c24d81"), alt: "Woman with long dark hair smiling, in a burgundy cardigan" }, { src: unsplash("photo-1676989859871-150f3579862a"), alt: "Man with a beard in a white shirt" }, ]; /** The demo's content. Spread it on the section, then change what you need: */ export const communityHero = { badge: "Global Network", title: "Join 50,000+ cognitive pioneers from 180+ countries", description: "Connect with neuroscience researchers, peak performers, and cognitive enhancement enthusiasts pushing the boundaries of human potential.", cta: { label: "Join Neural Network", href: "#join" }, images: crowdwallPhotos, } satisfies CommunityHeroProps; 66:T129e,import { ArrowRight } from "lucide-react"; import { cn } from "@/lib/utils"; import { PhotoMarquee, type MarqueeDirection, type MarqueeImage, type MarqueeTheme } from "@/components/crowdwall-marquee"; export type CommunityHeroProps = { badge?: string; title: string; description?: string; cta?: { label: string; href: string }; images: MarqueeImage[]; /** Number of photo rows. Default 3. */ rows?: number; /** Seconds the longest row takes to slide by one copy of its photos; the others keep its speed. Default 60. */ durationSeconds?: number; /** Direction of the first row. Default "left". */ direction?: MarqueeDirection; /** Every other row runs the opposite way. Default true. */ alternate?: boolean; /** One direction per row, repeated if shorter than `rows`. Overrides `direction` and `alternate`. */ rowDirections?: MarqueeDirection[]; /** Hovering the photos pauses them. Default false. */ pauseOnHover?: boolean; /** "auto" follows your site's `dark:` variant and background; "light" and "dark" fix the look. Default "auto". */ theme?: MarqueeTheme; headingAs?: "h1" | "h2"; className?: string; }; /* Every color of the section, per theme. "auto" sits on your site's background, with dark: overrides. */ const themes: Record = { auto: { section: "bg-background", badge: "border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-300", title: "text-zinc-950 dark:text-white", description: "text-zinc-600 dark:text-zinc-300", cta: "bg-violet-600 shadow-[0_0_40px_-8px_rgba(124,58,237,0.55)] hover:bg-violet-700 focus-visible:outline-violet-600 " + "dark:bg-violet-500 dark:shadow-[0_0_40px_-8px_rgba(139,92,246,0.7)] dark:hover:bg-violet-400 dark:focus-visible:outline-violet-300", }, light: { section: "bg-white", badge: "border-violet-500/30 bg-violet-500/10 text-violet-700", title: "text-zinc-950", description: "text-zinc-600", cta: "bg-violet-600 shadow-[0_0_40px_-8px_rgba(124,58,237,0.55)] hover:bg-violet-700 focus-visible:outline-violet-600", }, dark: { section: "bg-black", badge: "border-violet-500/30 bg-violet-500/10 text-violet-300", title: "text-white", description: "text-zinc-300", cta: "bg-violet-500 shadow-[0_0_40px_-8px_rgba(139,92,246,0.7)] hover:bg-violet-400 focus-visible:outline-violet-300", }, }; /** * A centered hero (badge, headline, text, call to action) over an endless wall of community photos * whose rows slide in alternating directions. Works as a Server Component: the motion is pure CSS. */ export function CommunityHero({ badge, title, description, cta, images, rows = 3, durationSeconds = 60, direction = "left", alternate = true, rowDirections, pauseOnHover = false, theme = "auto", headingAs: Heading = "h1", className, }: CommunityHeroProps) { const t = themes[theme]; return (

{badge && ( {badge} )} {title} {description && (

{description}

)} {cta && ( {cta.label} )}

); } 67:T17c3,import { cn } from "@/lib/utils"; /** A photo: a path or URL, and a description of who's in it. */ export type MarqueeImage = { src: string; alt: string }; export type MarqueeDirection = "left" | "right"; /** "auto" follows your site's `dark:` variant (a `.dark` class or the system setting). */ export type MarqueeTheme = "auto" | "light" | "dark"; export type PhotoMarqueeProps = { images: MarqueeImage[]; /** Number of rows. Default 3. */ rows?: number; /** Seconds the longest row takes to slide by one copy of its photos; the others keep its speed. Default 60. */ durationSeconds?: number; /** Direction of the first row. Default "left". */ direction?: MarqueeDirection; /** Every other row runs the opposite way. Default true. */ alternate?: boolean; /** One direction per row, repeated if shorter than `rows`. Overrides `direction` and `alternate`. */ rowDirections?: MarqueeDirection[]; /** Hovering the wall pauses every row. Default false. */ pauseOnHover?: boolean; /** Card colors. Default "auto". */ theme?: MarqueeTheme; className?: string; }; /** One copy of a row must outrun a 2560px screen: 16 × (160px card + 16px gap) = 2816px. */ const MIN_CARDS_PER_ROW = 16; /* The slide: a row moves by exactly one copy of its photos, then starts over where nobody can tell. */ const KEYFRAMES = "@keyframes crowdwall-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}"; /* Eased (smoothstep) stops, so neither fade shows a line where it starts. */ const EDGE_FADE = "linear-gradient(to right, transparent, rgb(0 0 0 / 0.16) 2.5%, rgb(0 0 0 / 0.5) 5%, rgb(0 0 0 / 0.84) 7.5%, #000 10%, #000 90%, rgb(0 0 0 / 0.84) 92.5%, rgb(0 0 0 / 0.5) 95%, rgb(0 0 0 / 0.16) 97.5%, transparent)"; const BOTTOM_FADE = "linear-gradient(to bottom, #000 60%, rgb(0 0 0 / 0.84) 70%, rgb(0 0 0 / 0.5) 80%, rgb(0 0 0 / 0.16) 90%, transparent)"; const cardTheme: Record = { auto: "border-zinc-950/10 bg-zinc-950/5 dark:border-white/10 dark:bg-white/5", light: "border-zinc-950/10 bg-zinc-950/5", dark: "border-white/10 bg-white/5", }; /** * Deals the photos out to the rows like cards (photo 1 to row 1, photo 2 to row 2, and so on), so a face * is never on two rows at once even as the rows slide past each other. A row then repeats its photos * until one copy is wider than the widest screen. */ function buildRows(images: MarqueeImage[], rowCount: number): MarqueeImage[][] { if (images.length === 0) return []; return Array.from({ length: rowCount }, (_, row) => { const own = images.filter((_, i) => i % rowCount === row); const photos = own.length > 0 ? own : images; return Array.from({ length: Math.ceil(MIN_CARDS_PER_ROW / photos.length) }, () => photos).flat(); }); } function directionOf( row: number, direction: MarqueeDirection, alternate: boolean, rowDirections?: MarqueeDirection[], ): MarqueeDirection { if (rowDirections?.length) return rowDirections[row % rowDirections.length]; if (!alternate || row % 2 === 0) return direction; return direction === "left" ? "right" : "left"; } /** * An endless wall of photos in rows, each row sliding on its own (by default every other row the * opposite way). Pure CSS: a transform-only animation, no client JavaScript. */ export function PhotoMarquee({ images, rows = 3, durationSeconds = 60, direction = "left", alternate = true, rowDirections, pauseOnHover = false, theme = "auto", className, }: PhotoMarqueeProps) { const rowList = buildRows(images, Math.max(1, Math.floor(rows))); const longest = Math.max(...rowList.map((row) => row.length)); // Screen readers hear each photo once: repeats and the duplicate copies get an empty alt. const described = new Set(); const altsByRow = rowList.map((row) => row.map((image) => { if (described.has(image.src)) return ""; described.add(image.src); return image.alt; }), ); return (

{rowList.map((row, rowIndex) => (

))}

); } /** One copy of a row. Its right padding equals the gap, so the copy after it starts exactly one gap away. */ function RowCopy({ images, alts, cardClassName, hidden = false, }: { images: MarqueeImage[]; alts?: string[]; cardClassName: string; hidden?: boolean; }) { return (

{images.map((image, i) => (

))}

); } 62:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L63",null,{"namespace":"@upfork","registryDependencies":[]}]]}],null]}],["$","$L64",null,{"files":[{"path":"components/crowdwall-data.ts","content":"$65","type":"registry:component"},{"path":"components/crowdwall-hero.tsx","content":"$66","type":"registry:component"},{"path":"components/crowdwall-marquee.tsx","content":"$67","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]