website refactor
This commit is contained in:
@@ -5,6 +5,10 @@ import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Input } from '@/ui/Input';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { SponsorHero } from '@/components/sponsors/SponsorHero';
|
||||
import { SponsorWorkflowMockup } from '@/components/sponsors/SponsorWorkflowMockup';
|
||||
import { SponsorBenefitCard } from '@/components/sponsors/SponsorBenefitCard';
|
||||
@@ -25,7 +29,6 @@ import {
|
||||
BarChart3,
|
||||
Shield,
|
||||
CheckCircle2,
|
||||
Star,
|
||||
Megaphone
|
||||
} from 'lucide-react';
|
||||
|
||||
@@ -238,13 +241,13 @@ export default function SponsorSignupPage() {
|
||||
// Landing page for sponsors
|
||||
if (mode === 'landing') {
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite">
|
||||
<Box minHeight="screen" bg="bg-deep-graphite">
|
||||
{/* Hero Section */}
|
||||
<SponsorHero
|
||||
title="Connect Your Brand with Sim Racing"
|
||||
subtitle="Reach passionate racing communities through league, team, driver, and race sponsorships. Real exposure, measurable results."
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Stack direction={{ base: 'col', md: 'row' }} gap={4} justify="center">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => setMode('signup')}
|
||||
@@ -261,12 +264,12 @@ export default function SponsorSignupPage() {
|
||||
Sign In
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</Stack>
|
||||
</SponsorHero>
|
||||
|
||||
{/* Platform Stats */}
|
||||
<div className="max-w-6xl mx-auto px-4 -mt-8 relative z-10">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<Box maxWidth="6xl" mx="auto" px={4} mt={-8} position="relative" zIndex={10}>
|
||||
<Box display="grid" gridCols={{ base: 2, md: 4 }} gap={4}>
|
||||
{PLATFORM_STATS.map((stat, index) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
@@ -275,27 +278,27 @@ export default function SponsorSignupPage() {
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="text-center p-4 bg-iron-gray/80 backdrop-blur-sm">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-white mb-1">{stat.value}</div>
|
||||
<div className="text-xs sm:text-sm text-gray-400">{stat.label}</div>
|
||||
<Text size={{ base: '2xl', sm: '3xl' }} weight="bold" color="text-white" block mb={1}>{stat.value}</Text>
|
||||
<Text size={{ base: 'xs', sm: 'sm' }} color="text-gray-400">{stat.label}</Text>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Sponsorship Types Section */}
|
||||
<section className="max-w-6xl mx-auto px-4 py-16 sm:py-24">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
<Box as="section" maxWidth="6xl" mx="auto" px={4} py={{ base: 16, md: 24 }}>
|
||||
<Box textAlign="center" mb={12}>
|
||||
<Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4}>
|
||||
Sponsorship Opportunities
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
</Heading>
|
||||
<Text color="text-gray-400" maxWidth="2xl" mx="auto" block>
|
||||
Choose how you want to connect with the sim racing community.
|
||||
Multiple sponsorship tiers and types to fit every budget and goal.
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
|
||||
{SPONSORSHIP_TYPES.map((type, index) => (
|
||||
<motion.div
|
||||
key={type.id}
|
||||
@@ -304,60 +307,60 @@ export default function SponsorSignupPage() {
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="h-full hover:border-primary-blue/50 transition-all duration-300 group">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className={`w-12 h-12 rounded-xl bg-iron-gray border border-charcoal-outline flex items-center justify-center group-hover:border-primary-blue/50 transition-colors`}>
|
||||
<Stack direction="row" align="start" gap={4} mb={4}>
|
||||
<Box w="12" h="12" rounded="xl" bg="bg-iron-gray" border borderColor="border-charcoal-outline" display="flex" alignItems="center" justifyContent="center" group hoverBorderColor="primary-blue/50" transition>
|
||||
<type.icon className={`w-6 h-6 ${type.color}`} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">{type.title}</h3>
|
||||
<p className="text-sm text-primary-blue font-medium">{type.priceRange}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={3} fontSize="lg" weight="semibold" color="text-white">{type.title}</Heading>
|
||||
<Text size="sm" color="text-primary-blue" weight="medium" block>{type.priceRange}</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<p className="text-sm text-gray-400 mb-4">{type.description}</p>
|
||||
<Text size="sm" color="text-gray-400" block mb={4}>{type.description}</Text>
|
||||
|
||||
<ul className="space-y-2">
|
||||
<Box as="ul" className="space-y-2">
|
||||
{type.benefits.map((benefit, i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm text-gray-300">
|
||||
<Box as="li" key={i} display="flex" alignItems="center" gap={2}>
|
||||
<CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0" />
|
||||
{benefit}
|
||||
</li>
|
||||
<Text size="sm" color="text-gray-300">{benefit}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</ul>
|
||||
</Box>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Workflow Mockup Section */}
|
||||
<section className="bg-iron-gray/30 py-16 sm:py-24">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
<Box as="section" bg="bg-iron-gray/30" py={{ base: 16, md: 24 }}>
|
||||
<Box maxWidth="6xl" mx="auto" px={4}>
|
||||
<Box textAlign="center" mb={12}>
|
||||
<Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4}>
|
||||
How It Works
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
</Heading>
|
||||
<Text color="text-gray-400" maxWidth="2xl" mx="auto" block>
|
||||
From discovery to results tracking — a seamless sponsorship experience.
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<SponsorWorkflowMockup />
|
||||
</div>
|
||||
</section>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Benefits Grid */}
|
||||
<section className="max-w-6xl mx-auto px-4 py-16 sm:py-24">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
<Box as="section" maxWidth="6xl" mx="auto" px={4} py={{ base: 16, md: 24 }}>
|
||||
<Box textAlign="center" mb={12}>
|
||||
<Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4}>
|
||||
Why Sponsor on GridPilot?
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
</Heading>
|
||||
<Text color="text-gray-400" maxWidth="2xl" mx="auto" block>
|
||||
Professional tools and genuine community engagement make your sponsorship worthwhile.
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
|
||||
<SponsorBenefitCard
|
||||
icon={Eye}
|
||||
title="Real Visibility"
|
||||
@@ -395,18 +398,18 @@ export default function SponsorSignupPage() {
|
||||
description="Scale your sponsorships as you see results. Start small or go big from day one."
|
||||
delay={0.5}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="max-w-4xl mx-auto px-4 py-16 sm:py-24 text-center">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
<Box as="section" maxWidth="4xl" mx="auto" px={4} py={{ base: 16, md: 24 }} textAlign="center">
|
||||
<Heading level={2} fontSize={{ base: '3xl', md: '4xl' }} weight="bold" color="text-white" mb={4}>
|
||||
Ready to Grow Your Brand?
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto mb-8">
|
||||
</Heading>
|
||||
<Text color="text-gray-400" maxWidth="2xl" mx="auto" block mb={8}>
|
||||
Join sponsors connecting with sim racing communities worldwide.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
</Text>
|
||||
<Stack direction={{ base: 'col', md: 'row' }} gap={4} justify="center">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => setMode('signup')}
|
||||
@@ -424,45 +427,45 @@ export default function SponsorSignupPage() {
|
||||
<Mail className="w-5 h-5 mr-2" />
|
||||
Contact Sales
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Login form
|
||||
if (mode === 'login') {
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-8">
|
||||
<Box minHeight="screen" bg="bg-deep-graphite" display="flex" alignItems="center" justifyContent="center" px={4} py={12}>
|
||||
<Box fullWidth maxWidth="md">
|
||||
<Box mb={8}>
|
||||
<button
|
||||
onClick={() => setMode('landing')}
|
||||
className="text-sm text-gray-400 hover:text-white mb-6 flex items-center gap-2"
|
||||
className="text-sm text-gray-400 hover:text-white mb-6 flex items-center gap-2 bg-transparent border-0 cursor-pointer"
|
||||
>
|
||||
<ArrowRight className="w-4 h-4 rotate-180" />
|
||||
Back to overview
|
||||
</button>
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20">
|
||||
<Stack direction="row" align="center" gap={4} mb={2}>
|
||||
<Box display="flex" h="14" w="14" alignItems="center" justifyContent="center" rounded="2xl" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20">
|
||||
<Building2 className="w-7 h-7 text-primary-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Sponsor Sign In</h1>
|
||||
<p className="text-sm text-gray-400">Access your sponsor dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={1} fontSize="2xl" weight="bold" color="text-white">Sponsor Sign In</Heading>
|
||||
<Text size="sm" color="text-gray-400">Access your sponsor dashboard</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Card className="p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Box as="form" onSubmit={handleSubmit} className="space-y-5">
|
||||
<Box>
|
||||
<Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Mail className="w-4 h-4 text-gray-500" />
|
||||
Email Address
|
||||
</div>
|
||||
</label>
|
||||
</Stack>
|
||||
</Text>
|
||||
<Input
|
||||
type="email"
|
||||
value={formData.contactEmail}
|
||||
@@ -471,12 +474,12 @@ export default function SponsorSignupPage() {
|
||||
variant={errors.contactEmail ? 'error' : 'default'}
|
||||
errorMessage={errors.contactEmail}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<Box>
|
||||
<Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
|
||||
Password
|
||||
</label>
|
||||
</Text>
|
||||
<Input
|
||||
type="password"
|
||||
value={formData.password}
|
||||
@@ -485,17 +488,17 @@ export default function SponsorSignupPage() {
|
||||
variant={errors.password ? 'error' : 'default'}
|
||||
errorMessage={errors.password}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<label className="flex items-center gap-2 text-gray-400">
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Text as="label" display="flex" alignItems="center" gap={2} color="text-gray-400">
|
||||
<input type="checkbox" className="rounded border-charcoal-outline bg-iron-gray" />
|
||||
Remember me
|
||||
</label>
|
||||
<button type="button" className="text-primary-blue hover:underline">
|
||||
</Text>
|
||||
<button type="button" className="text-primary-blue hover:underline bg-transparent border-0 cursor-pointer">
|
||||
Forgot password?
|
||||
</button>
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
@@ -505,63 +508,62 @@ export default function SponsorSignupPage() {
|
||||
>
|
||||
{submitting ? 'Signing in...' : 'Sign In'}
|
||||
</Button>
|
||||
</form>
|
||||
</Box>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-charcoal-outline">
|
||||
<p className="text-sm text-gray-400 text-center mb-4">
|
||||
<Box mt={6} pt={6} borderTop borderColor="border-charcoal-outline">
|
||||
<Text size="sm" color="text-gray-400" align="center" block mb={4}>
|
||||
Don't have an account?{' '}
|
||||
<button
|
||||
onClick={() => setMode('signup')}
|
||||
className="text-primary-blue hover:underline"
|
||||
className="text-primary-blue hover:underline bg-transparent border-0 cursor-pointer"
|
||||
>
|
||||
Create one
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Signup form
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite py-12 px-4">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Box minHeight="screen" bg="bg-deep-graphite" py={12} px={4}>
|
||||
<Box maxWidth="2xl" mx="auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<Box mb={8}>
|
||||
<button
|
||||
onClick={() => setMode('landing')}
|
||||
className="text-sm text-gray-400 hover:text-white mb-6 flex items-center gap-2"
|
||||
className="text-sm text-gray-400 hover:text-white mb-6 flex items-center gap-2 bg-transparent border-0 cursor-pointer"
|
||||
>
|
||||
<ArrowRight className="w-4 h-4 rotate-180" />
|
||||
Back to overview
|
||||
</button>
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-blue/10 border border-primary-blue/20">
|
||||
<Stack direction="row" align="center" gap={4} mb={2}>
|
||||
<Box display="flex" h="14" w="14" alignItems="center" justifyContent="center" rounded="2xl" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20">
|
||||
<Building2 className="w-7 h-7 text-primary-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Create Sponsor Account</h1>
|
||||
<p className="text-sm text-gray-400">Register your company to sponsor racing entities</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={1} fontSize="2xl" weight="bold" color="text-white">Create Sponsor Account</Heading>
|
||||
<Text size="sm" color="text-gray-400">Register your company to sponsor racing entities</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Card className="p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<Box as="form" onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Company Information */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Building2 className="w-5 h-5 text-primary-blue" />
|
||||
<Box>
|
||||
<Heading level={3} fontSize="lg" weight="semibold" color="text-white" mb={4} icon={<Building2 className="w-5 h-5 text-primary-blue" />}>
|
||||
Company Information
|
||||
</h3>
|
||||
</Heading>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2 }} gap={4}>
|
||||
<Box colSpan={{ base: 1, md: 2 }}>
|
||||
<Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
|
||||
Company Name *
|
||||
</label>
|
||||
</Text>
|
||||
<Input
|
||||
type="text"
|
||||
value={formData.companyName}
|
||||
@@ -570,15 +572,15 @@ export default function SponsorSignupPage() {
|
||||
variant={errors.companyName ? 'error' : 'default'}
|
||||
errorMessage={errors.companyName}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Box>
|
||||
<Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Mail className="w-4 h-4 text-gray-500" />
|
||||
Contact Email *
|
||||
</div>
|
||||
</label>
|
||||
</Stack>
|
||||
</Text>
|
||||
<Input
|
||||
type="email"
|
||||
value={formData.contactEmail}
|
||||
@@ -587,36 +589,35 @@ export default function SponsorSignupPage() {
|
||||
variant={errors.contactEmail ? 'error' : 'default'}
|
||||
errorMessage={errors.contactEmail}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Box>
|
||||
<Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Globe className="w-4 h-4 text-gray-500" />
|
||||
Website URL
|
||||
</div>
|
||||
</label>
|
||||
</Stack>
|
||||
</Text>
|
||||
<Input
|
||||
type="url"
|
||||
value={formData.websiteUrl}
|
||||
onChange={(e) => setFormData({ ...formData, websiteUrl: e.target.value })}
|
||||
placeholder="https://company.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Sponsorship Interests */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Target className="w-5 h-5 text-purple-400" />
|
||||
<Box>
|
||||
<Heading level={3} fontSize="lg" weight="semibold" color="text-white" mb={4} icon={<Target className="w-5 h-5 text-purple-400" />}>
|
||||
Sponsorship Interests
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400 mb-4">
|
||||
</Heading>
|
||||
<Text size="sm" color="text-gray-400" block mb={4}>
|
||||
Select the types of sponsorships you're interested in (optional)
|
||||
</p>
|
||||
</Text>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
||||
<Box display="grid" gridCols={{ base: 2, sm: 3 }} gap={3}>
|
||||
{SPONSORSHIP_TYPES.map((type) => {
|
||||
const isSelected = formData.interests.includes(type.id);
|
||||
return (
|
||||
@@ -633,28 +634,28 @@ export default function SponsorSignupPage() {
|
||||
`}
|
||||
>
|
||||
<type.icon className={`w-5 h-5 ${isSelected ? type.color : 'text-gray-500'} mb-2`} />
|
||||
<p className={`text-sm font-medium ${isSelected ? 'text-white' : 'text-gray-400'}`}>
|
||||
<Text size="sm" weight="medium" color={isSelected ? 'text-white' : 'text-gray-400'} block>
|
||||
{type.title.replace(' Sponsorship', '').replace(' Advertising', '')}
|
||||
</p>
|
||||
</Text>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Company Logo */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Box>
|
||||
<Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Upload className="w-4 h-4 text-gray-500" />
|
||||
Company Logo (optional)
|
||||
</div>
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-16 h-16 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center flex-shrink-0">
|
||||
</Stack>
|
||||
</Text>
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
<Box w="16" h="16" rounded="lg" bg="bg-iron-gray" border borderColor="border-charcoal-outline" display="flex" alignItems="center" justifyContent="center" flexShrink={0}>
|
||||
<Building2 className="w-6 h-6 text-gray-500" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
</Box>
|
||||
<Box flexGrow={1}>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/svg+xml"
|
||||
@@ -664,25 +665,24 @@ export default function SponsorSignupPage() {
|
||||
}}
|
||||
className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
<Text size="xs" color="text-gray-500" block mt={1}>
|
||||
PNG, JPEG, or SVG. Recommended: 500x500px transparent background.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Account Security */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-performance-green" />
|
||||
<Box>
|
||||
<Heading level={3} fontSize="lg" weight="semibold" color="text-white" mb={4} icon={<Shield className="w-5 h-5 text-performance-green" />}>
|
||||
Account Security
|
||||
</h3>
|
||||
</Heading>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2 }} gap={4}>
|
||||
<Box>
|
||||
<Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
|
||||
Password *
|
||||
</label>
|
||||
</Text>
|
||||
<Input
|
||||
type="password"
|
||||
value={formData.password}
|
||||
@@ -691,12 +691,12 @@ export default function SponsorSignupPage() {
|
||||
variant={errors.password ? 'error' : 'default'}
|
||||
errorMessage={errors.password}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<Box>
|
||||
<Text as="label" block size="sm" weight="medium" color="text-gray-300" mb={2}>
|
||||
Confirm Password *
|
||||
</label>
|
||||
</Text>
|
||||
<Input
|
||||
type="password"
|
||||
value={formData.confirmPassword}
|
||||
@@ -705,49 +705,49 @@ export default function SponsorSignupPage() {
|
||||
variant={errors.confirmPassword ? 'error' : 'default'}
|
||||
errorMessage={errors.confirmPassword}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Legal Agreements */}
|
||||
<div className="space-y-3 pt-4 border-t border-charcoal-outline">
|
||||
<label className="flex items-start gap-3 cursor-pointer">
|
||||
<Stack gap={3} pt={4} borderTop borderColor="border-charcoal-outline">
|
||||
<Text as="label" display="flex" alignItems="start" gap={3} cursor="pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.acceptTerms}
|
||||
onChange={(e) => setFormData({ ...formData, acceptTerms: e.target.checked })}
|
||||
className="mt-1 rounded border-charcoal-outline bg-iron-gray text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
<span className="text-sm text-gray-400">
|
||||
<Text size="sm" color="text-gray-400">
|
||||
I accept the{' '}
|
||||
<a href="/legal/terms" className="text-primary-blue hover:underline">Terms of Service</a>
|
||||
{' '}and{' '}
|
||||
<a href="/legal/privacy" className="text-primary-blue hover:underline">Privacy Policy</a>
|
||||
{' '}*
|
||||
</span>
|
||||
</label>
|
||||
</Text>
|
||||
</Text>
|
||||
{errors.acceptTerms && (
|
||||
<p className="text-sm text-warning-amber">{errors.acceptTerms}</p>
|
||||
<Text size="sm" color="text-warning-amber">{errors.acceptTerms}</Text>
|
||||
)}
|
||||
|
||||
<label className="flex items-start gap-3 cursor-pointer">
|
||||
<Text as="label" display="flex" alignItems="start" gap={3} cursor="pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.acceptVat}
|
||||
onChange={(e) => setFormData({ ...formData, acceptVat: e.target.checked })}
|
||||
className="mt-1 rounded border-charcoal-outline bg-iron-gray text-primary-blue focus:ring-primary-blue"
|
||||
/>
|
||||
<span className="text-sm text-gray-400">
|
||||
<Text size="sm" color="text-gray-400">
|
||||
{siteConfig.vat.notice} A {siteConfig.fees.platformFeePercent}% platform fee applies to all sponsorships. *
|
||||
</span>
|
||||
</label>
|
||||
</Text>
|
||||
</Text>
|
||||
{errors.acceptVat && (
|
||||
<p className="text-sm text-warning-amber">{errors.acceptVat}</p>
|
||||
<Text size="sm" color="text-warning-amber">{errors.acceptVat}</Text>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Stack direction="row" gap={3} pt={4}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
@@ -764,22 +764,22 @@ export default function SponsorSignupPage() {
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-charcoal-outline text-center">
|
||||
<p className="text-sm text-gray-400">
|
||||
<Box mt={6} pt={6} borderTop="1px solid" borderColor="border-charcoal-outline" textAlign="center">
|
||||
<Text size="sm" color="text-gray-400">
|
||||
Already have an account?{' '}
|
||||
<button
|
||||
onClick={() => setMode('login')}
|
||||
className="text-primary-blue hover:underline"
|
||||
className="text-primary-blue hover:underline bg-transparent border-0 cursor-pointer"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user