gridpilot.gg/apps/website/components/sponsors/SponsorHero.tsx

import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { motion, useReducedMotion } from 'framer-motion';
import { Building2 } from 'lucide-react';
import { useEffect, useState } from 'react';

interface SponsorHeroProps {
  title: string;
  subtitle: string;
  children?: React.ReactNode;
}

export function SponsorHero({ title, subtitle, children }: SponsorHeroProps) {
  const shouldReduceMotion = useReducedMotion();
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.4, ease: 'easeOut' as const },
    },
  };

  const gridStyle = {
    backgroundImage: `
      linear-gradient(to right, #198CFF 1px, transparent 1px),
      linear-gradient(to bottom, #198CFF 1px, transparent 1px)
    `,
    backgroundSize: '40px 40px',
  };

  if (!isMounted || shouldReduceMotion) {
    return (
      <Box position="relative" overflow="hidden">
        {/* Background Pattern */}
        <Box position="absolute" inset="0" bg="bg-gradient-to-br from-primary-blue/5 via-transparent to-transparent" />
        <Box position="absolute" inset="0" bg="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary-blue/10 via-transparent to-transparent" />
        
        {/* Grid Pattern */}
        <Box 
          position="absolute" 
          inset="0" 
          bgOpacity={0.05}
          style={gridStyle}
        />

        <Box position="relative" maxWidth="5xl" mx="auto" px={4} py={{ base: 16, sm: 24 }}>
          <Box textAlign="center">
            <Box display="inline-flex" alignItems="center" gap={2} px={4} py={2} rounded="full" bg="bg-primary-blue/10" border={true} borderColor="border-primary-blue/20" mb={6}>
              <Icon icon={Building2} size={4} color="text-primary-blue" />
              <Text size="sm" color="text-primary-blue" weight="medium">Sponsor Portal</Text>
            </Box>
            
            <Heading level={1} mb={6} className="tracking-tight">
              {title}
            </Heading>
            
            <Text size="lg" color="text-gray-400" maxWidth="2xl" mx="auto" block mb={10}>
              {subtitle}
            </Text>

            {children}
          </Box>
        </Box>
      </Box>
    );
  }

  return (
    <Box
      as={motion.div}
      position="relative"
      overflow="hidden"
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {/* Background Pattern */}
      <Box position="absolute" inset="0" bg="bg-gradient-to-br from-primary-blue/5 via-transparent to-transparent" />
      <Box position="absolute" inset="0" bg="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary-blue/10 via-transparent to-transparent" />
      
      {/* Animated Grid Pattern */}
      <Box 
        as={motion.div}
        position="absolute" 
        inset="0" 
        bgOpacity={0.05}
        style={gridStyle}
        animate={{
          backgroundPosition: ['0px 0px', '40px 40px'],
        }}
        transition={{
          duration: 20,
          repeat: Infinity,
          ease: 'linear' as const,
        }}
      />

      <Box position="relative" maxWidth="5xl" mx="auto" px={4} py={{ base: 16, sm: 24 }}>
        <Box textAlign="center">
          <Box 
            as={motion.div}
            variants={itemVariants}
            display="inline-flex" 
            alignItems="center" 
            gap={2} 
            px={4} 
            py={2} 
            rounded="full" 
            bg="bg-primary-blue/10" 
            border={true} 
            borderColor="border-primary-blue/20" 
            mb={6}
          >
            <Icon icon={Building2} size={4} color="text-primary-blue" />
            <Text size="sm" color="text-primary-blue" weight="medium">Sponsor Portal</Text>
          </Box>
          
          <Box
            as={motion.h1}
            variants={itemVariants}
            className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight"
          >
            {title}
          </Box>
          
          <Box
            as={motion.p}
            variants={itemVariants}
            className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto mb-10"
          >
            {subtitle}
          </Box>

          <Box as={motion.div} variants={itemVariants}>
            {children}
          </Box>
        </Box>
      </Box>
    </Box>
  );
}