website poc

2025-12-02 01:31:31 +01:00
parent 747a77cb39
commit fd3b4171aa
15 changed files with 939 additions and 115 deletions
--- a/apps/website/components/landing/EmailCapture.tsx
+++ b/apps/website/components/landing/EmailCapture.tsx
@@ -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&apos;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&apos;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>