auth rework
This commit is contained in:
97
apps/website/components/sponsors/SponsorBenefitCard.tsx
Normal file
97
apps/website/components/sponsors/SponsorBenefitCard.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { ReactNode, useEffect, useState } from 'react';
|
||||
import { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface SponsorBenefitCardProps {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
stats?: {
|
||||
value: string;
|
||||
label: string;
|
||||
};
|
||||
variant?: 'default' | 'highlight';
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export default function SponsorBenefitCard({
|
||||
icon: Icon,
|
||||
title,
|
||||
description,
|
||||
stats,
|
||||
variant = 'default',
|
||||
delay = 0,
|
||||
}: SponsorBenefitCardProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
const isHighlight = variant === 'highlight';
|
||||
|
||||
const cardContent = (
|
||||
<div
|
||||
className={`
|
||||
relative h-full rounded-xl p-6 transition-all duration-300
|
||||
${isHighlight
|
||||
? 'bg-gradient-to-br from-primary-blue/10 to-primary-blue/5 border border-primary-blue/30'
|
||||
: 'bg-iron-gray/50 border border-charcoal-outline hover:border-charcoal-outline/80'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div
|
||||
className={`
|
||||
w-12 h-12 rounded-xl flex items-center justify-center mb-4
|
||||
${isHighlight
|
||||
? 'bg-primary-blue/20'
|
||||
: 'bg-iron-gray border border-charcoal-outline'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Icon className={`w-6 h-6 ${isHighlight ? 'text-primary-blue' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
|
||||
<p className="text-sm text-gray-400 leading-relaxed">{description}</p>
|
||||
|
||||
{/* Stats */}
|
||||
{stats && (
|
||||
<div className="mt-4 pt-4 border-t border-charcoal-outline/50">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className={`text-2xl font-bold ${isHighlight ? 'text-primary-blue' : 'text-white'}`}>
|
||||
{stats.value}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">{stats.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Highlight Glow Effect */}
|
||||
{isHighlight && (
|
||||
<div className="absolute -inset-px rounded-xl bg-gradient-to-br from-primary-blue/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!isMounted || shouldReduceMotion) {
|
||||
return <div className="group">{cardContent}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="group"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay }}
|
||||
whileHover={{ y: -4, transition: { duration: 0.2 } }}
|
||||
>
|
||||
{cardContent}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
144
apps/website/components/sponsors/SponsorHero.tsx
Normal file
144
apps/website/components/sponsors/SponsorHero.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
196
apps/website/components/sponsors/SponsorWorkflowMockup.tsx
Normal file
196
apps/website/components/sponsors/SponsorWorkflowMockup.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Search,
|
||||
MousePointer,
|
||||
CreditCard,
|
||||
CheckCircle2,
|
||||
Car,
|
||||
Eye,
|
||||
TrendingUp,
|
||||
Building2
|
||||
} from 'lucide-react';
|
||||
|
||||
interface WorkflowStep {
|
||||
id: number;
|
||||
icon: typeof Search;
|
||||
title: string;
|
||||
description: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const WORKFLOW_STEPS: WorkflowStep[] = [
|
||||
{
|
||||
id: 1,
|
||||
icon: Search,
|
||||
title: 'Browse Leagues',
|
||||
description: 'Find leagues that match your target audience',
|
||||
color: 'text-primary-blue',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: MousePointer,
|
||||
title: 'Select Tier',
|
||||
description: 'Choose main or secondary sponsorship slot',
|
||||
color: 'text-purple-400',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: CreditCard,
|
||||
title: 'Complete Payment',
|
||||
description: 'Secure payment with automatic invoicing',
|
||||
color: 'text-warning-amber',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: Car,
|
||||
title: 'Logo Placement',
|
||||
description: 'Your brand on liveries and league pages',
|
||||
color: 'text-performance-green',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: TrendingUp,
|
||||
title: 'Track Results',
|
||||
description: 'Monitor impressions and engagement',
|
||||
color: 'text-primary-blue',
|
||||
},
|
||||
];
|
||||
|
||||
export default function SponsorWorkflowMockup() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setActiveStep((prev) => (prev + 1) % WORKFLOW_STEPS.length);
|
||||
}, 3000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isMounted]);
|
||||
|
||||
if (!isMounted) {
|
||||
return (
|
||||
<div className="relative w-full max-w-4xl mx-auto">
|
||||
<div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-8">
|
||||
<div className="grid grid-cols-5 gap-4">
|
||||
{WORKFLOW_STEPS.map((step) => (
|
||||
<div key={step.id} className="flex flex-col items-center text-center">
|
||||
<div className="w-14 h-14 rounded-xl bg-iron-gray border border-charcoal-outline flex items-center justify-center mb-3">
|
||||
<step.icon className={`w-6 h-6 ${step.color}`} />
|
||||
</div>
|
||||
<h4 className="text-sm font-medium text-white mb-1">{step.title}</h4>
|
||||
<p className="text-xs text-gray-500">{step.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-4xl mx-auto">
|
||||
<div className="bg-iron-gray/50 rounded-2xl border border-charcoal-outline p-6 sm:p-8 overflow-hidden">
|
||||
{/* Connection Lines */}
|
||||
<div className="absolute top-[4.5rem] left-[10%] right-[10%] hidden sm:block">
|
||||
<div className="h-0.5 bg-charcoal-outline relative">
|
||||
<motion.div
|
||||
className="absolute h-full bg-gradient-to-r from-primary-blue to-performance-green"
|
||||
initial={{ width: '0%' }}
|
||||
animate={{ width: `${(activeStep / (WORKFLOW_STEPS.length - 1)) * 100}%` }}
|
||||
transition={{ duration: 0.5, ease: 'easeInOut' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-5 gap-4 relative">
|
||||
{WORKFLOW_STEPS.map((step, index) => {
|
||||
const isActive = index === activeStep;
|
||||
const isCompleted = index < activeStep;
|
||||
const StepIcon = step.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={step.id}
|
||||
className="flex flex-col items-center text-center cursor-pointer"
|
||||
onClick={() => setActiveStep(index)}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<motion.div
|
||||
className={`w-14 h-14 rounded-xl border flex items-center justify-center mb-3 transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_20px_rgba(25,140,255,0.3)]'
|
||||
: isCompleted
|
||||
? 'bg-performance-green/20 border-performance-green/50'
|
||||
: 'bg-iron-gray border-charcoal-outline'
|
||||
}`}
|
||||
animate={isActive && !shouldReduceMotion ? {
|
||||
scale: [1, 1.1, 1],
|
||||
transition: { duration: 1, repeat: Infinity }
|
||||
} : {}}
|
||||
>
|
||||
{isCompleted ? (
|
||||
<CheckCircle2 className="w-6 h-6 text-performance-green" />
|
||||
) : (
|
||||
<StepIcon className={`w-6 h-6 ${isActive ? step.color : 'text-gray-500'}`} />
|
||||
)}
|
||||
</motion.div>
|
||||
<h4 className={`text-sm font-medium mb-1 transition-colors ${
|
||||
isActive ? 'text-white' : 'text-gray-400'
|
||||
}`}>
|
||||
{step.title}
|
||||
</h4>
|
||||
<p className={`text-xs transition-colors ${
|
||||
isActive ? 'text-gray-300' : 'text-gray-600'
|
||||
}`}>
|
||||
{step.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Active Step Preview */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeStep}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="mt-8 pt-6 border-t border-charcoal-outline"
|
||||
>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<div className={`w-8 h-8 rounded-lg bg-iron-gray flex items-center justify-center`}>
|
||||
{(() => {
|
||||
const Icon = WORKFLOW_STEPS[activeStep].icon;
|
||||
return <Icon className={`w-4 h-4 ${WORKFLOW_STEPS[activeStep].color}`} />;
|
||||
})()}
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-sm text-gray-400">
|
||||
Step {activeStep + 1} of {WORKFLOW_STEPS.length}
|
||||
</p>
|
||||
<p className="text-white font-medium">
|
||||
{WORKFLOW_STEPS[activeStep].title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user