Hero AI Infrastructure

'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<HTMLDivElement>(null)
  const isMobile = useMediaQuery('(max-width: 768px)')

  return (
    <section
      ref={timelineRef}
      className="relative min-h-screen flex flex-col bg-black text-white w-full overflow-hidden"
    >
      <Suspense>
        <ShaderGradientCanvas
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100vw',
            height: '120vh',
          }}
          lazyLoad={undefined}
          fov={undefined}
          pixelDensity={1}
          pointerEvents="none"
        >
          <ShaderGradient
            animate="on"
            type="sphere"
            wireframe={false}
            shader="defaults"
            uTime={0}
            uSpeed={0.3}
            uStrength={0.4}
            uDensity={0.8}
            uFrequency={5.5}
            uAmplitude={7}
            positionX={0}
            positionY={0}
            positionZ={0}
            rotationX={0}
            rotationY={0}
            rotationZ={140}
            color1="#1f469a"
            color2="#000000"
            color3="#000000"
            reflection={0.5}
            // View (camera) props
            cAzimuthAngle={250}
            cPolarAngle={140}
            cDistance={1.5}
            cameraZoom={12.5}
            // Effect props
            lightType="3d"
            brightness={1.5}
            envPreset="city"
            grain="on"
            // Tool props
            toggleAxis={false}
            zoomOut={false}
            hoverState=""
            // Optional - if using transition features
            enableTransition={false}
          />
        </ShaderGradientCanvas>
      </Suspense>
      {isMobile && (
        <div className="flex gap-4 justify-between items-center px-10 pt-4">
          <MotionDrawer
            direction="left"
            width={300}
            backgroundColor={'#000000'}
            clsBtnClassName="bg-neutral-800 border-r border-neutral-900 text-white"
            contentClassName="bg-black border-r border-neutral-900 text-white"
            btnClassName="bg-white text-black relative w-fit p-2 left-0 top-0"
          >
            <nav className="space-y-4 ">
              <div className="flex items-center gap-2 text-white">
                <svg
                  className="fill-white w-8 h-8"
                  width="97"
                  height="108"
                  viewBox="0 0 97 108"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z" />
                </svg>
                <span>UI-Layouts</span>
              </div>
              <a
                href="#"
                className="block p-2 hover:bg-neutral-100 hover:text-black rounded-sm"
              >
                Products
              </a>
              <a
                href="#"
                className="block p-2 hover:bg-neutral-100 hover:text-black rounded-sm"
              >
                Leaderboards
              </a>
              <a
                href="#"
                className="block p-2 hover:bg-neutral-100 hover:text-black rounded-sm"
              >
                Enterprise
              </a>
              <a
                href="#"
                className="block p-2 hover:bg-neutral-100 hover:text-black rounded-sm"
              >
                Government
              </a>
              <a
                href="#"
                className="block p-2 hover:bg-neutral-100 hover:text-black rounded-sm"
              >
                Customers
              </a>
            </nav>
          </MotionDrawer>
          <TimelineAnimation
            as="button"
            timelineRef={timelineRef}
            animationNum={2}
            className="cursor-pointer bg-white/10 hover:bg-white/20 transition px-2 py-2 rounded text-sm font-medium border border-white/10 backdrop-blur-md"
          >
            Register For Free
          </TimelineAnimation>
        </div>
      )}
      {!isMobile && (
        <header className="relative z-10 flex items-center max-w-7xl mx-auto w-full justify-between px-8 py-6">
          <TimelineAnimation
            timelineRef={timelineRef}
            animationNum={1}
            className="flex items-center gap-5"
          >
            <div className="text-2xl font-semibold tracking-tight">
              <svg
                className="fill-white w-8 h-8"
                width="97"
                height="108"
                viewBox="0 0 97 108"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z" />
              </svg>
            </div>
            <nav className="hidden md:flex items-center gap-6 text-md text-neutral-300">
              <a href="#" className="hover:text-white transition">
                Products
              </a>
              <a href="#" className="hover:text-white transition">
                Leaderboards
              </a>
              <a href="#" className="hover:text-white transition">
                Enterprise
              </a>
              <a href="#" className="hover:text-white transition">
                Government
              </a>
              <a href="#" className="hover:text-white transition">
                Customers
              </a>
            </nav>
          </TimelineAnimation>
          <div className="flex items-center gap-4">
            <TimelineAnimation
              as="button"
              timelineRef={timelineRef}
              animationNum={2}
              className="cursor-pointer bg-white/10 hover:bg-white/20 transition px-2 py-2 rounded text-sm font-medium border border-white/10 backdrop-blur-md"
            >
              Register For Free
            </TimelineAnimation>
          </div>
        </header>
      )}

      {/* Main Content */}
      <div className="relative z-10 grow flex flex-col items-center justify-center text-center px-4 pt-24 mb-10">
        <TimelineAnimation
          timelineRef={timelineRef}
          animationNum={3}
          className="border border-blue-800 flex items-center gap-2 rounded-2xl p-1 pr-3 bg-blue-800/50 backdrop-blur-lg"
        >
          <span className="py-0.5 px-1 rounded-lg bg-blue-600 text-white">
            New
          </span>
          <span>Trusted by 999+ growing B2B teams</span>
        </TimelineAnimation>
        <TimelineAnimation
          timelineRef={timelineRef}
          as="h1"
          animationNum={4}
          className="text-5xl md:text-7xl font-medium tracking-tight leading-[120%] max-w-5xl my-5"
        >
          Powering the Next <br />
          Generation of AI
          <br />
          Infrastructure
        </TimelineAnimation>

        <TimelineAnimation
          timelineRef={timelineRef}
          as="p"
          animationNum={5}
          className="text-neutral-300 text-lg md:text-xl max-w-xl mb-10 font-light"
        >
          High-quality data, scalable tooling, and reliable infrastructure to
          build, train, and deploy AI systems faster and with confidence.
        </TimelineAnimation>

        <div className="flex flex-col sm:flex-row gap-4 items-center">
          <TimelineAnimation
            timelineRef={timelineRef}
            as="button"
            animationNum={6}
            className="cursor-pointer bg-white text-black px-6 py-3 rounded-sm font-semibold flex items-center gap-2 hover:bg-neutral-200 transition"
          >
            Book a Free Demo <ArrowRight size={18} />
          </TimelineAnimation>
          <TimelineAnimation
            timelineRef={timelineRef}
            as="button"
            animationNum={7}
            className="cursor-pointer relative bg-white/10 hover:bg-white/20 transition px-8 py-3 rounded-sm font-semibold border border-white/20 backdrop-blur-md"
          >
            Build With AI
          </TimelineAnimation>
        </div>
      </div>

      {/* Trusted By Logos */}
      <div className="relative z-10 py-16 flex flex-col items-center">
        <TimelineAnimation
          timelineRef={timelineRef}
          as="p"
          animationNum={7}
          className="text-neutral-400 md:text-xl text-nd text-center mb-8"
        >
          Scale works with{' '}
          <span className="text-white font-medium">
            Generative AI Companies
          </span>
          , U.S. Government Agencies & Enterprises
        </TimelineAnimation>
        <div className="flex flex-wrap justify-center items-center gap-12 opacity-60">
          <TimelineAnimation
            timelineRef={timelineRef}
            as="img"
            animationNum={8}
            src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
            className="h-8"
            alt="google"
          />
          <TimelineAnimation
            timelineRef={timelineRef}
            animationNum={9}
            className="flex gap-2 text-2xl items-center"
          >
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg"
              className="h-6"
              alt="Microsoft"
            />
            <span>Microsoft</span>
          </TimelineAnimation>
          <TimelineAnimation
            timelineRef={timelineRef}
            animationNum={10}
            className="flex gap-2 text-2xl items-center"
          >
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/3/33/Figma-logo.svg"
              className="h-6"
              alt="figma"
            />
            <span>Figma</span>
          </TimelineAnimation>
          <TimelineAnimation
            timelineRef={timelineRef}
            as="img"
            animationNum={11}
            src="https://upload.wikimedia.org/wikipedia/en/1/1f/Reddit_logo_2023.svg"
            className="h-6 invert"
            alt="reddit"
          />
        </div>
      </div>
    </section>
  )
}

'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<SideMenuProps> = ({
  // 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<boolean>(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 && (
        <motion.button
          className={cn(
            `fixed z-99 text-primary cursor-pointer ${openButtonPositionClasses}`,
            btnClassName
          )}
          onClick={() => setIsOpen(true)}
          variants={buttonVariants}
          animate={isOpen ? 'open' : 'closed'}
          transition={animationConfig}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <Menu />
          {/* Open */}
        </motion.button>
      )}

      <AnimatePresence>
        {isOpen && (
          <div className={`fixed w-full h-full top-0 left-0 z-9999 ${className}`}>
            {/* Overlay */}
            <motion.div
              className={`absolute w-full h-full top-0 left-0 ${overlayClassName}`}
              style={{ backgroundColor: overlayColor }}
              onClick={() => setIsOpen(false)}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.3 }}
            />

            {/* Drawer */}
            <motion.div
              className={`absolute h-full shadow-[8px_1px_21px_0px_rgba(17,17,26,0.1)] ${drawerPositionClasses} ${contentClassName}`}
              style={{
                backgroundColor,
                width: `${width}px`,
                padding: '60px 30px 30px 30px',
                boxSizing: 'border-box',
              }}
              drag={enableDrag ? 'x' : false}
              dragElastic={0.1}
              dragConstraints={getDragConstraints()}
              dragMomentum={false}
              onDragEnd={handleDragEnd}
              variants={getDrawerVariants()}
              initial='closed'
              animate='open'
              exit='closed'
              transition={animationConfig}
            >
              {/* Close Button */}
              {showToggleButton && (
                <motion.button
                  className={cn(
                    'absolute top-2 right-8 p-2 text-black cursor-pointer',
                    clsBtnClassName
                  )}
                  onClick={() => setIsOpen(false)}
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.9 }}
                  transition={{ duration: 0.2 }}
                >
                  <X size={20} /> {/* Close */}
                </motion.button>
              )}

              {/* Content */}
              <div className='h-full overflow-y-auto'>{children}</div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  );
};

export default MotionDrawer;

import type { Variants } from 'motion/react';
import { type HTMLMotionProps, motion, useInView } from 'motion/react';
import type React from 'react';

type TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {
  children?: React.ReactNode;
  animationNum: number;
  className?: string;
  timelineRef: React.RefObject<HTMLElement | null>;
  as?: T;
  customVariants?: Variants;
  once?: boolean;
} & HTMLMotionProps<T>;

export const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({
  children,
  animationNum,
  timelineRef,
  className,
  as,
  customVariants,
  once = true,
  ...props
}: TimelineContentProps<T>) => {
  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 (
    <MotionComponent
      initial='hidden'
      animate={isInView ? 'visible' : 'hidden'}
      custom={animationNum}
      variants={sequenceVariants}
      className={className}
      {...props}
    >
      {children}
    </MotionComponent>
  );
};

'use client';
import { useEffect, useState } from 'react';

export function useMediaQuery(query: string) {
  const [value, setValue] = useState(false);

  useEffect(() => {
    function onChange(event: MediaQueryListEvent) {
      setValue(event.matches);
    }

    const result = matchMedia(query);
    result.addEventListener('change', onChange);
    setValue(result.matches);

    return () => result.removeEventListener('change', onChange);
  }, [query]);

  return value;
}