website refactor

apps/website/ui/SponsorHero.tsx

@@ -0,0 +1,158 @@
+
+
+import { motion, useReducedMotion } from 'framer-motion';
+import { Building2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Box } from './Box';
+import { Heading } from './Heading';
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+
+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>
+  );
+}