feat: use gloweffect

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

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 
-export default function EmailFormDemo() {
+export default function GlowEffect({children}) {
-  const [email, setEmail] = useState('');
   const [isPropertyRegistered, setIsPropertyRegistered] = useState(false);
 
   // Register CSS property in component body (before render)
@@ -23,11 +22,6 @@ export default function EmailFormDemo() {
     setIsPropertyRegistered(true);
   }, []);
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    alert(`Email submitted: ${email}`);
-  };
-
   return (
     <>
       {isPropertyRegistered && (
@@ -43,11 +37,13 @@ export default function EmailFormDemo() {
                       conic-gradient(from var(--form-angle, 0deg),
                           rgba(99, 102, 241, 0.5),
                           rgba(139, 92, 246, 1),
+                          rgba(99, 102, 241, 0.5),
                           rgba(236, 72, 153, 0.8),
+                          rgba(99, 102, 241, 0.5),
                           rgba(34, 211, 238, 1),
                           rgba(99, 102, 241, 0.5)
                       ) border-box;
-          animation: form-glow-rotate 4s linear infinite;
+          animation: form-glow-rotate 12s linear infinite;
         }
 
         .email-form-wrapper::before {
@@ -58,39 +54,23 @@ export default function EmailFormDemo() {
           background: conic-gradient(from var(--form-angle, 0deg),
                           rgba(99, 102, 241, 0.2),
                           rgba(139, 92, 246, 0.7),
+                          rgba(99, 102, 241, 0.2),
                           rgba(236, 72, 153, 0.5),
+                          rgba(99, 102, 241, 0.2),
                           rgba(34, 211, 238, 0.7),
                           rgba(99, 102, 241, 0.2)
                       );
-          filter: blur(20px);
+          filter: blur(18px);
-          opacity: 0.8;
+          opacity: 0.75;
           z-index: -1;
-          animation: form-glow-rotate 4s linear infinite;
+          animation: form-glow-rotate 12s linear infinite;
         }
       `}</style>
       )}
 
-      <div className="h-60 flex items-center justify-center p-4">
+      <div className="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">
+        <div className="email-form-wrapper relative isolate max-w-lg w-full mx-auto p-[2px] rounded-xl">
-          <form
+          {children}
-            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

@@ -35,7 +35,7 @@ import {
   Award,
   ArrowRight,
 } from 'lucide-react';
-import EmailFormDemo from './_components/Emailformanimated';
+import GlowEffect from './_components/GlowEffect';
 
 // ============================================================================
 // STYLES (CSS-in-JS for custom styles not available in Tailwind)
@@ -189,8 +189,12 @@ function HeroSection() {
         </p>
 
         {/* Email Form */}
-       <div className="email-form-wrapper mb-4">
+       <GlowEffect>
-          <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-2 bg-[rgba(10,6,18,0.95)] rounded-[10px] p-1.5 sm:p-1.5 sm:pl-3">
+          <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}
@@ -200,16 +204,16 @@ function HeroSection() {
             />
             <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 border-none rounded-md text-white font-semibold cursor-pointer transition-all whitespace-nowrap"
+              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>
+        </GlowEffect>
 
         <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">