feat: working glow

apps/landing/src/app/homepage/_components/Emailformanimated.tsx

@@ -0,0 +1,98 @@
+import { useState, useEffect } from 'react';
+
+export default function EmailFormDemo() {
+  const [email, setEmail] = useState('');
+  const [isPropertyRegistered, setIsPropertyRegistered] = useState(false);
+
+  // Register CSS property in component body (before render)
+  if (typeof window !== 'undefined' && 'CSS' in window && 'registerProperty' in CSS) {
+    try {
+      CSS.registerProperty({
+        name: '--form-angle',
+        syntax: '<angle>',
+        initialValue: '0deg',
+        inherits: false,
+      });
+    } catch (e) {
+      // Property may already be registered
+    }
+  }
+
+  useEffect(() => {
+    // Trigger second render to add style tag
+    setIsPropertyRegistered(true);
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    alert(`Email submitted: ${email}`);
+  };
+
+  return (
+    <>
+      {isPropertyRegistered && (
+        <style>{`
+        @keyframes form-glow-rotate {
+          to {
+            --form-angle: 360deg;
+          }
+        }
+
+        .email-form-wrapper {
+          background: linear-gradient(#0a0612, #0a0612) padding-box,
+                      conic-gradient(from var(--form-angle, 0deg),
+                          rgba(99, 102, 241, 0.5),
+                          rgba(139, 92, 246, 1),
+                          rgba(236, 72, 153, 0.8),
+                          rgba(34, 211, 238, 1),
+                          rgba(99, 102, 241, 0.5)
+                      ) border-box;
+          animation: form-glow-rotate 4s linear infinite;
+        }
+
+        .email-form-wrapper::before {
+          content: '';
+          position: absolute;
+          inset: -3px;
+          border-radius: 15px;
+          background: conic-gradient(from var(--form-angle, 0deg),
+                          rgba(99, 102, 241, 0.2),
+                          rgba(139, 92, 246, 0.7),
+                          rgba(236, 72, 153, 0.5),
+                          rgba(34, 211, 238, 0.7),
+                          rgba(99, 102, 241, 0.2)
+                      );
+          filter: blur(20px);
+          opacity: 0.8;
+          z-index: -1;
+          animation: form-glow-rotate 4s linear infinite;
+        }
+      `}</style>
+      )}
+
+      <div className="h-60 flex items-center justify-center p-4">
+        <div className="email-form-wrapper relative isolate max-w-md w-full mx-auto p-[2px] rounded-xl">
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
+            style={{ background: 'rgba(10, 6, 18, 0.95)' }}
+          >
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="your@email.com"
+              className="flex-1 px-4 py-3 bg-transparent border-none rounded-md text-white outline-none placeholder:text-white/40 focus:bg-white/[0.03]"
+            />
+            <button
+              type="submit"
+              className="px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 rounded-md text-white font-semibold cursor-pointer transition-all whitespace-nowrap"
+            >
+              Get Early Access
+            </button>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}

apps/landing/src/app/homepage/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { AnimatedGradientBorder } from './components/AnimatedGradientBorder';
+import { AnimatedGradientBorder } from './_components/AnimatedGradientBorder';
 import {
   Zap,
   Globe,
@@ -35,6 +35,7 @@ import {
   Award,
   ArrowRight,
 } from 'lucide-react';
+import EmailFormDemo from './_components/Emailformanimated';
 
 // ============================================================================
 // STYLES (CSS-in-JS for custom styles not available in Tailwind)
@@ -208,6 +209,8 @@ function HeroSection() {
 
         <p className="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
 
+        <EmailFormDemo />
+
         {/* Badges */}
         <div className="flex flex-nowrap gap-5 justify-center">
           {badges.map((badge, i) => (