144 lines
4.5 KiB
TypeScript
144 lines
4.5 KiB
TypeScript
'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>
|
|
);
|
|
} |