4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T2d71,'use client' import React, { Suspense, useRef } from 'react' import { ArrowRight } from 'lucide-react' import { ShaderGradient, ShaderGradientCanvas } from '@shadergradient/react' import { TimelineAnimation } from '@/components/ui/timeline-animation' import { useMediaQuery } from '@/hooks/use-media-query' import MotionDrawer from '@/components/ui/motion-drawer' export const HeroAiInfrastructure = () => { const timelineRef = useRef(null) const isMobile = useMediaQuery('(max-width: 768px)') return (

{isMobile && (

)} {!isMobile && (

)} {/* Main Content */}

New Trusted by 999+ growing B2B teams Powering the Next
Generation of AI
Infrastructure High-quality data, scalable tooling, and reliable infrastructure to build, train, and deploy AI systems faster and with confidence.

Book a Free Demo Build With AI

{/* Trusted By Logos */}

Scale works with{' '} Generative AI Companies , U.S. Government Agencies & Enterprises

Microsoft

Figma

) } 52:T1c21,'use client'; import { cn } from '@/lib/utils'; import { Menu, X } from 'lucide-react'; import { AnimatePresence, motion } from 'motion/react'; import type React from 'react'; import { useState } from 'react'; export type SideMenuDirection = 'left' | 'right'; export type ButtonOpeningVariants = 'push' | 'merge' | 'stay'; interface SideMenuProps { // Appearance overlayColor?: string; width?: number; direction?: SideMenuDirection; backgroundColor?: string; // Content children: React.ReactNode; // Behavior isOpen?: boolean; onToggle?: (isOpen: boolean) => void; showToggleButton?: boolean; toggleButtonText?: { open: string; close: string; }; // Styling btnClassName?: string; className?: string; contentClassName?: string; clsBtnClassName?: string; overlayClassName?: string; // Animation animationConfig?: { type?: 'spring' | 'tween'; damping?: number; stiffness?: number; duration?: number; }; // Drag behavior enableDrag?: boolean; dragThreshold?: number; // New prop buttonOpeningVariants?: ButtonOpeningVariants; } const getOpenButtonVariants = ( direction: SideMenuDirection, width: number, type: ButtonOpeningVariants ) => { switch (type) { case 'merge': return direction === 'left' ? { closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' }, open: { x: width - 68, opacity: 0, scale: 1, borderRadius: '0rem', }, } : { closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' }, open: { x: 68 - width, opacity: 0, scale: 1, borderRadius: '0rem', }, }; case 'push': return direction === 'left' ? { closed: { x: 0, opacity: 1 }, open: { x: width + 20, opacity: 0 } } : { closed: { x: 0, opacity: 1 }, open: { x: -(width + 20), opacity: 0 }, }; case 'stay': default: return { closed: { x: 0, opacity: 1 }, open: { x: 0, opacity: 0 }, }; } }; const MotionDrawer: React.FC = ({ // Appearance overlayColor = 'rgba(0, 0, 0, 0.3)', width = 250, direction = 'left', backgroundColor = '#ffffff', // Content children, // Behavior isOpen: controlledIsOpen, onToggle, showToggleButton = true, // Styling btnClassName = '', clsBtnClassName = '', className = '', contentClassName = '', overlayClassName = '', // Animation animationConfig = { type: 'spring', damping: 25, stiffness: 120, }, // Drag behavior enableDrag = true, dragThreshold = 0.3, buttonOpeningVariants = 'merge', }) => { const [internalIsOpen, setInternalIsOpen] = useState(false); const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen; const setIsOpen = (value: boolean) => { if (controlledIsOpen === undefined) { setInternalIsOpen(value); } onToggle?.(value); }; const getDrawerVariants = () => { if (direction === 'left') { return { closed: { x: -width }, open: { x: 0 }, }; } else { return { closed: { x: width }, open: { x: 0 }, }; } }; const buttonVariants = getOpenButtonVariants(direction, width, buttonOpeningVariants); const getDragConstraints = () => { if (direction === 'left') { return { left: -width, right: 0 }; } else { return { left: 0, right: width }; } }; const handleDragEnd = (_event: any, info: any) => { if (!enableDrag) return; const threshold = width * dragThreshold; const dragDistance = Math.abs(info.offset.x); if (direction === 'left') { const isDraggingLeft = info.offset.x < 0; if (isDraggingLeft && dragDistance > threshold && isOpen) { setIsOpen(false); } else if (!isDraggingLeft && dragDistance > threshold && !isOpen) { setIsOpen(true); } } else { const isDraggingRight = info.offset.x > 0; if (isDraggingRight && dragDistance > threshold && isOpen) { setIsOpen(false); } else if (!isDraggingRight && dragDistance > threshold && !isOpen) { setIsOpen(true); } } }; const drawerPositionClasses = direction === 'left' ? 'left-0' : 'right-0'; const openButtonPositionClasses = direction === 'left' ? 'top-4 left-4' : 'top-4 right-4'; return ( <> {showToggleButton && ( setIsOpen(true)} variants={buttonVariants} animate={isOpen ? 'open' : 'closed'} transition={animationConfig} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > {/* Open */} )} {isOpen && (

{/* Overlay */} setIsOpen(false)} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }} /> {/* Drawer */} {/* Close Button */} {showToggleButton && ( setIsOpen(false)} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} transition={{ duration: 0.2 }} > {/* Close */} )} {/* Content */}

{children}

)} ); }; export default MotionDrawer; 53:T582,import type { Variants } from 'motion/react'; import { type HTMLMotionProps, motion, useInView } from 'motion/react'; import type React from 'react'; type TimelineContentProps = { children?: React.ReactNode; animationNum: number; className?: string; timelineRef: React.RefObject; as?: T; customVariants?: Variants; once?: boolean; } & HTMLMotionProps; export const TimelineAnimation = ({ children, animationNum, timelineRef, className, as, customVariants, once = true, ...props }: TimelineContentProps) => { const defaultSequenceVariants = { visible: (i: number) => ({ filter: 'blur(0px)', y: 0, opacity: 1, transition: { delay: i * 0.5, duration: 0.5, }, }), hidden: { filter: 'blur(20px)', y: 0, opacity: 0, }, }; const sequenceVariants = customVariants || defaultSequenceVariants; const isInView = useInView(timelineRef, { once, }); const MotionComponent = motion[as || 'div'] as React.ElementType; return ( {children} ); }; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui-layouts.com/r/hero-ai-infrastructure.json","proxyUrl":"https://shadcnregistry.com/r/ui-layouts/hero-ai-infrastructure","itemId":"@ui-layouts/hero-ai-infrastructure"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"../../packages/blocks/src/hero-section/hero-ai-infrastructure.tsx","content":"$51","type":"registry:block"},{"path":"./components/ui/motion-drawer.tsx","content":"$52","type":"registry:component"},{"path":"./components/ui/timeline-animation.tsx","content":"$53","type":"registry:component"},{"path":"./hooks/use-media-query.tsx","content":"'use client';\nimport { useEffect, useState } from 'react';\n\nexport function useMediaQuery(query: string) {\n const [value, setValue] = useState(false);\n\n useEffect(() => {\n function onChange(event: MediaQueryListEvent) {\n setValue(event.matches);\n }\n\n const result = matchMedia(query);\n result.addEventListener('change', onChange);\n setValue(result.matches);\n\n return () => result.removeEventListener('change', onChange);\n }, [query]);\n\n return value;\n}\n","type":"registry:component"}]}]]}],"$L54"]}]

Hero Ai Infrastructure

Installation

Files

components

Styles