217 lines
10 KiB
TypeScript
217 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, FormEvent } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useInject } from '@/lib/di/hooks/useInject';
|
|
import { LANDING_SERVICE_TOKEN } from '@/lib/di/tokens';
|
|
|
|
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 [feedback, setFeedback] = useState<FeedbackState>({ type: 'idle' });
|
|
const landingService = useInject(LANDING_SERVICE_TOKEN);
|
|
|
|
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
if (!email) {
|
|
setFeedback({ type: 'error', message: "That email doesn't look right." });
|
|
return;
|
|
}
|
|
|
|
setFeedback({ type: 'loading' });
|
|
|
|
try {
|
|
const result = await landingService.signup(email);
|
|
|
|
if (result.status === 'success') {
|
|
setFeedback({ type: 'success', message: result.message });
|
|
setEmail('');
|
|
setTimeout(() => setFeedback({ type: 'idle' }), 5000);
|
|
} else if (result.status === 'info') {
|
|
setFeedback({ type: 'info', message: result.message });
|
|
setTimeout(() => setFeedback({ type: 'idle' }), 4000);
|
|
} else {
|
|
setFeedback({
|
|
type: 'error',
|
|
message: result.message,
|
|
canRetry: true
|
|
});
|
|
}
|
|
} catch (error) {
|
|
setFeedback({
|
|
type: 'error',
|
|
message: 'Something broke. Try again?',
|
|
canRetry: true
|
|
});
|
|
console.error('Signup error:', error);
|
|
}
|
|
};
|
|
|
|
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">
|
|
{feedback.type === 'success' ? (
|
|
<motion.div
|
|
key="success"
|
|
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.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">{feedback.message}</h2>
|
|
<p className="text-base text-gray-400 font-light">
|
|
I'll send updates as I build. Zero spam, zero BS.
|
|
</p>
|
|
</motion.div>
|
|
) : (
|
|
<motion.div
|
|
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 transition-shadow duration-300 ${getGlowColor()}`}
|
|
>
|
|
<div className="text-center mb-10">
|
|
<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 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 relative">
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => {
|
|
setEmail(e.target.value);
|
|
if (feedback.type !== 'loading') {
|
|
setFeedback({ type: 'idle' });
|
|
}
|
|
}}
|
|
placeholder="your@email.com"
|
|
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 ${
|
|
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"
|
|
/>
|
|
<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>
|
|
<motion.button
|
|
type="submit"
|
|
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"
|
|
>
|
|
{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" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
Joining...
|
|
</span>
|
|
) : (
|
|
'Count me in'
|
|
)}
|
|
</motion.button>
|
|
</div>
|
|
</form>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="mt-8 flex flex-col sm:flex-row gap-4 justify-center text-sm text-gray-400 font-light"
|
|
>
|
|
<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>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>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>Zero spam, zero BS</span>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |