website poc
This commit is contained in:
88
apps/website/components/landing/AlternatingSection.tsx
Normal file
88
apps/website/components/landing/AlternatingSection.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import { ReactNode } from 'react';
|
||||
import Container from '@/components/ui/Container';
|
||||
|
||||
interface AlternatingSectionProps {
|
||||
heading: string;
|
||||
description: string | ReactNode;
|
||||
mockup: ReactNode;
|
||||
layout: 'text-left' | 'text-right';
|
||||
backgroundImage?: string;
|
||||
}
|
||||
|
||||
export default function AlternatingSection({
|
||||
heading,
|
||||
description,
|
||||
mockup,
|
||||
layout,
|
||||
backgroundImage
|
||||
}: AlternatingSectionProps) {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-deep-graphite px-6 py-24 sm:py-32 lg:px-8">
|
||||
{backgroundImage && (
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: `url(${backgroundImage})`,
|
||||
maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)',
|
||||
WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Container size="lg" className="relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
{layout === 'text-left' ? (
|
||||
<>
|
||||
{/* Text Content - Left */}
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
|
||||
{heading}
|
||||
</h2>
|
||||
<div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mockup - Right (fade right) */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="w-full h-[400px] lg:h-[500px]"
|
||||
style={{
|
||||
maskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
|
||||
WebkitMaskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
|
||||
}}
|
||||
>
|
||||
{mockup}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Mockup - Left (fade left) */}
|
||||
<div className="relative order-2 lg:order-1">
|
||||
<div
|
||||
className="w-full h-[400px] lg:h-[500px]"
|
||||
style={{
|
||||
maskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
|
||||
WebkitMaskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
|
||||
}}
|
||||
>
|
||||
{mockup}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Text Content - Right */}
|
||||
<div className="space-y-6 order-1 lg:order-2">
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
|
||||
{heading}
|
||||
</h2>
|
||||
<div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -3,24 +3,26 @@
|
||||
import { useState, FormEvent } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
type FeedbackState =
|
||||
| { type: 'idle' }
|
||||
| { type: 'loading' }
|
||||
| { type: 'success'; message: string }
|
||||
| { type: 'error'; message: string; canRetry?: boolean; retryAfter?: number }
|
||||
| { type: 'info'; message: string };
|
||||
|
||||
export default function EmailCapture() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [isValid, setIsValid] = useState(true);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const [feedback, setFeedback] = useState<FeedbackState>({ type: 'idle' });
|
||||
|
||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!email) {
|
||||
setIsValid(false);
|
||||
setErrorMessage('Email is required');
|
||||
setFeedback({ type: 'error', message: "That email doesn't look right." });
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setErrorMessage('');
|
||||
setFeedback({ type: 'loading' });
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/signup', {
|
||||
@@ -34,47 +36,80 @@ export default function EmailCapture() {
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setIsValid(false);
|
||||
setErrorMessage(data.error || 'Failed to submit email');
|
||||
if (response.status === 429) {
|
||||
setFeedback({
|
||||
type: 'error',
|
||||
message: data.error,
|
||||
retryAfter: data.retryAfter
|
||||
});
|
||||
} else if (response.status === 409) {
|
||||
setFeedback({ type: 'info', message: data.error });
|
||||
setTimeout(() => setFeedback({ type: 'idle' }), 4000);
|
||||
} else {
|
||||
setFeedback({
|
||||
type: 'error',
|
||||
message: data.error || 'Something broke. Try again?',
|
||||
canRetry: true
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitted(true);
|
||||
setFeedback({ type: 'success', message: data.message });
|
||||
setEmail('');
|
||||
setTimeout(() => setFeedback({ type: 'idle' }), 5000);
|
||||
} catch (error) {
|
||||
setIsValid(false);
|
||||
setErrorMessage('Network error. Please try again.');
|
||||
setFeedback({
|
||||
type: 'error',
|
||||
message: 'Something broke. Try again?',
|
||||
canRetry: true
|
||||
});
|
||||
console.error('Signup error:', error);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getMessageColor = () => {
|
||||
if (feedback.type === 'success') return 'text-performance-green';
|
||||
if (feedback.type === 'info') return 'text-gray-400';
|
||||
if (feedback.type === 'error' && feedback.retryAfter) return 'text-warning-amber';
|
||||
if (feedback.type === 'error') return 'text-red-400';
|
||||
return '';
|
||||
};
|
||||
|
||||
const getGlowColor = () => {
|
||||
if (feedback.type === 'success') return 'shadow-[0_0_80px_rgba(111,227,122,0.15)]';
|
||||
if (feedback.type === 'info') return 'shadow-[0_0_80px_rgba(34,38,42,0.15)]';
|
||||
if (feedback.type === 'error' && feedback.retryAfter) return 'shadow-[0_0_80px_rgba(255,197,86,0.15)]';
|
||||
if (feedback.type === 'error') return 'shadow-[0_0_80px_rgba(248,113,113,0.15)]';
|
||||
return 'shadow-[0_0_80px_rgba(25,140,255,0.15)]';
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="early-access" className="relative py-24 bg-gradient-to-b from-deep-graphite to-iron-gray">
|
||||
<div className="max-w-2xl mx-auto px-6">
|
||||
<AnimatePresence mode="wait">
|
||||
{submitted ? (
|
||||
{feedback.type === 'success' ? (
|
||||
<motion.div
|
||||
key="success"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-12 text-center border border-charcoal-outline shadow-[0_0_80px_rgba(111,227,122,0.15)]"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className={`relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-12 text-center border border-charcoal-outline ${getGlowColor()}`}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
|
||||
transition={{ delay: 0.15, type: 'spring', stiffness: 200, damping: 15 }}
|
||||
className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-performance-green/20 mb-6"
|
||||
>
|
||||
<svg className="w-8 h-8 text-performance-green" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
<h2 className="text-3xl font-semibold text-white mb-4">You're on the list!</h2>
|
||||
<h2 className="text-3xl font-semibold text-white mb-4">{feedback.message}</h2>
|
||||
<p className="text-base text-gray-400 font-light">
|
||||
Check your email for confirmation. We'll notify you when GridPilot launches.
|
||||
I'll send updates as I build. Zero spam, zero BS.
|
||||
</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
@@ -82,48 +117,72 @@ export default function EmailCapture() {
|
||||
key="form"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-8 md:p-16 border border-charcoal-outline shadow-[0_0_80px_rgba(25,140,255,0.15)]"
|
||||
className={`relative rounded-xl bg-gradient-to-br from-iron-gray via-deep-graphite to-iron-gray p-8 md:p-16 border border-charcoal-outline transition-shadow duration-300 ${getGlowColor()}`}
|
||||
>
|
||||
<div className="text-center mb-10">
|
||||
<h2 className="text-4xl md:text-5xl font-semibold text-white mb-3">
|
||||
Join the Waitlist
|
||||
<h2 className="text-3xl md:text-4xl font-semibold text-white mb-3">
|
||||
Let me know if this resonates
|
||||
</h2>
|
||||
<div className="w-32 h-1 bg-gradient-to-r from-primary-blue to-neon-aqua mx-auto mb-6 rounded-full" />
|
||||
<p className="text-lg text-gray-400 font-light max-w-lg mx-auto">
|
||||
Be among the first to experience GridPilot when we launch early access.
|
||||
<p className="text-lg text-gray-400 font-light max-w-lg mx-auto mb-4">
|
||||
I'm building GridPilot because I got tired of the chaos. If this resonates with you, drop your email.
|
||||
</p>
|
||||
<p className="text-base text-gray-400/80 font-light max-w-lg mx-auto">
|
||||
It means someone out there cares about the same problems. That keeps me going.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex-1 relative">
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => {
|
||||
setEmail(e.target.value);
|
||||
setIsValid(true);
|
||||
setErrorMessage('');
|
||||
if (feedback.type !== 'loading') {
|
||||
setFeedback({ type: 'idle' });
|
||||
}
|
||||
}}
|
||||
placeholder="your@email.com"
|
||||
disabled={isSubmitting}
|
||||
disabled={feedback.type === 'loading'}
|
||||
className={`w-full px-6 py-4 rounded-lg bg-iron-gray text-white placeholder-gray-500 border transition-all duration-150 ${
|
||||
!isValid
|
||||
feedback.type === 'error' && !feedback.retryAfter
|
||||
? 'border-red-500 focus:ring-2 focus:ring-red-500'
|
||||
: feedback.type === 'error' && feedback.retryAfter
|
||||
? 'border-warning-amber focus:ring-2 focus:ring-warning-amber/50'
|
||||
: 'border-charcoal-outline focus:border-neon-aqua focus:ring-2 focus:ring-neon-aqua/50'
|
||||
} hover:scale-[1.01] disabled:opacity-50 disabled:cursor-not-allowed`}
|
||||
aria-label="Email address"
|
||||
/>
|
||||
{!isValid && errorMessage && (
|
||||
<p className="mt-2 text-sm text-red-400">{errorMessage}</p>
|
||||
)}
|
||||
<AnimatePresence>
|
||||
{(feedback.type === 'error' || feedback.type === 'info') && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className={`mt-2 text-sm ${getMessageColor()}`}
|
||||
>
|
||||
{feedback.message}
|
||||
{feedback.type === 'error' && feedback.retryAfter && (
|
||||
<span className="block mt-1 text-xs text-gray-500">
|
||||
Retry in {feedback.retryAfter}s
|
||||
</span>
|
||||
)}
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<button
|
||||
<motion.button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-8 py-4 rounded-full bg-gradient-to-r from-primary-blue to-neon-aqua text-white font-semibold transition-all duration-150 hover:shadow-glow-strong hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 whitespace-nowrap"
|
||||
disabled={feedback.type === 'loading'}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="px-8 py-4 rounded-full bg-gradient-to-r from-primary-blue to-neon-aqua text-white font-semibold transition-all duration-150 hover:shadow-glow-strong active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 whitespace-nowrap"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
{feedback.type === 'loading' ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
@@ -132,9 +191,9 @@ export default function EmailCapture() {
|
||||
Joining...
|
||||
</span>
|
||||
) : (
|
||||
'Get Early Access'
|
||||
'Count me in'
|
||||
)}
|
||||
</button>
|
||||
</motion.button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -148,19 +207,19 @@ export default function EmailCapture() {
|
||||
<svg className="w-4 h-4 text-performance-green" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>No spam, ever</span>
|
||||
<span>I'll send updates as I build</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-performance-green" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Early feature access</span>
|
||||
<span>You can tell me what matters most</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 text-performance-green" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Priority support</span>
|
||||
<span>Zero spam, zero BS</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
@@ -16,16 +16,6 @@ export default function Footer() {
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Product</h4>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#features" className="text-sm text-gray-400 hover:text-primary-blue transition-colors duration-150 font-light">
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
|
||||
Pricing <span className="text-xs">(coming soon)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
|
||||
Roadmap <span className="text-xs">(coming soon)</span>
|
||||
@@ -52,11 +42,6 @@ export default function Footer() {
|
||||
Terms <span className="text-xs">(coming soon)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-sm text-gray-400 font-light cursor-not-allowed opacity-50">
|
||||
Status <span className="text-xs">(coming soon)</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,18 @@ import Heading from '@/components/ui/Heading';
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-deep-graphite px-6 py-24 sm:py-32 lg:px-8">
|
||||
{/* Background image layer */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: 'url(/images/porsche.jpeg)',
|
||||
maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.08) 40%, transparent 70%)',
|
||||
WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.08) 40%, transparent 70%)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Subtle radial gradient overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-radial from-primary-blue/10 via-transparent to-transparent opacity-40" />
|
||||
<div className="absolute inset-0 bg-gradient-radial from-primary-blue/10 via-transparent to-transparent opacity-40 pointer-events-none" />
|
||||
|
||||
{/* Optional motorsport grid pattern */}
|
||||
<div className="absolute inset-0 opacity-[0.015]" style={{
|
||||
@@ -15,14 +25,39 @@ export default function Hero() {
|
||||
backgroundSize: '40px 40px'
|
||||
}} />
|
||||
|
||||
<Container size="sm" center>
|
||||
<Container size="sm" center className="relative z-10">
|
||||
<Heading level={1} className="text-white leading-tight tracking-tight">
|
||||
Where iRacing League Racing Finally Comes Together
|
||||
League racing is incredible. What's missing is everything around it.
|
||||
</Heading>
|
||||
<p className="mt-8 text-lg leading-relaxed text-slate-400 font-light">
|
||||
No more Discord chaos. No more spreadsheets. No more manual standings.
|
||||
GridPilot is the dedicated home for serious iRacing leagues that want structure over chaos.
|
||||
</p>
|
||||
<div className="mt-8 text-lg leading-relaxed text-slate-400 font-light">
|
||||
<p>
|
||||
If you've been in any league, you know the feeling:
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-6 max-w-2xl mx-auto">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-primary-blue text-xl">•</span>
|
||||
<span>Results scattered across Discord</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-primary-blue text-xl">•</span>
|
||||
<span>No long-term identity</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-primary-blue text-xl">•</span>
|
||||
<span>No career progression</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-primary-blue text-xl">•</span>
|
||||
<span>Forgotten after each season</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-8">
|
||||
The ecosystem isn't built for this.
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
<strong className="text-white">GridPilot gives your league racing a real home.</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12 flex items-center justify-center">
|
||||
<Button as="a" href="#early-access" className="shadow-glow hover:shadow-glow-strong transition-shadow duration-300">
|
||||
Get Early Access
|
||||
|
||||
Reference in New Issue
Block a user