auth rework

2025-12-17 15:34:56 +01:00
parent a213a5cf9f
commit 75eaa1aa9f
24 changed files with 6115 additions and 1992 deletions
--- a/apps/website/components/sponsors/SponsorHero.tsx
+++ b/apps/website/components/sponsors/SponsorHero.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import { motion, useReducedMotion } from 'framer-motion';
+import { ReactNode, useEffect, useState } from 'react';
+import { Building2, TrendingUp, Eye, Users, ChevronRight } from 'lucide-react';
+
+interface SponsorHeroProps {
+  title: string;
+  subtitle: string;
+  children?: ReactNode;
+}
+
+export default 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' },
+    },
+  };
+
+  if (!isMounted || shouldReduceMotion) {
+    return (
+      <div className="relative overflow-hidden">
+        {/* Background Pattern */}
+        <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-transparent" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary-blue/10 via-transparent to-transparent" />
+        
+        {/* Grid Pattern */}
+        <div 
+          className="absolute inset-0 opacity-5"
+          style={{
+            backgroundImage: `
+              linear-gradient(to right, #198CFF 1px, transparent 1px),
+              linear-gradient(to bottom, #198CFF 1px, transparent 1px)
+            `,
+            backgroundSize: '40px 40px',
+          }}
+        />
+
+        <div className="relative max-w-5xl mx-auto px-4 py-16 sm:py-24">
+          <div className="text-center">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-blue/10 border border-primary-blue/20 mb-6">
+              <Building2 className="w-4 h-4 text-primary-blue" />
+              <span className="text-sm text-primary-blue font-medium">Sponsor Portal</span>
+            </div>
+            
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight">
+              {title}
+            </h1>
+            
+            <p className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto mb-10">
+              {subtitle}
+            </p>
+
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      className="relative overflow-hidden"
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+    >
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-transparent" />
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary-blue/10 via-transparent to-transparent" />
+      
+      {/* Animated Grid Pattern */}
+      <motion.div 
+        className="absolute inset-0 opacity-5"
+        style={{
+          backgroundImage: `
+            linear-gradient(to right, #198CFF 1px, transparent 1px),
+            linear-gradient(to bottom, #198CFF 1px, transparent 1px)
+          `,
+          backgroundSize: '40px 40px',
+        }}
+        animate={{
+          backgroundPosition: ['0px 0px', '40px 40px'],
+        }}
+        transition={{
+          duration: 20,
+          repeat: Infinity,
+          ease: 'linear',
+        }}
+      />
+
+      <div className="relative max-w-5xl mx-auto px-4 py-16 sm:py-24">
+        <div className="text-center">
+          <motion.div 
+            variants={itemVariants}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-blue/10 border border-primary-blue/20 mb-6"
+          >
+            <Building2 className="w-4 h-4 text-primary-blue" />
+            <span className="text-sm text-primary-blue font-medium">Sponsor Portal</span>
+          </motion.div>
+          
+          <motion.h1 
+            variants={itemVariants}
+            className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight"
+          >
+            {title}
+          </motion.h1>
+          
+          <motion.p 
+            variants={itemVariants}
+            className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto mb-10"
+          >
+            {subtitle}
+          </motion.p>
+
+          <motion.div variants={itemVariants}>
+            {children}
+          </motion.div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}