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

@@ -1,78 +0,0 @@
-import { useState, useEffect, ReactNode } from 'react';
-
-export default function GlowEffect({ children }: { children: ReactNode }) {
-  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);
-  }, []);
-
-  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(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 12s 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(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(18px);
-          opacity: 0.75;
-          z-index: -1;
-          animation: form-glow-rotate 12s linear infinite;
-        }
-      `}</style>
-      )}
-
-      <div className="flex items-center justify-center p-4">
-        <div className="email-form-wrapper relative isolate max-w-lg w-full mx-auto p-[2px] rounded-xl">
-          {children}
-        </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,7 +35,6 @@ import {
   Award,
   ArrowRight,
 } from 'lucide-react';
-import GlowEffect from './_components/GlowEffect';
 
 // ============================================================================
 // STYLES (CSS-in-JS for custom styles not available in Tailwind)
@@ -50,7 +49,7 @@ const customStyles = `
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    animation: gradient-shift 6s ease-in-out infinite;
+    animation: gradient-shift 4s ease-in-out infinite;
   }
 
   @keyframes gradient-shift {
@@ -189,12 +188,8 @@ function HeroSection() {
         </p>
 
         {/* Email Form */}
-       <GlowEffect>
-          <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)' }}
-          >
+       <div className="email-form-wrapper mb-4">
+          <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">
             <input
               type="email"
               value={email}
@@ -204,17 +199,15 @@ 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 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 border-none rounded-md text-white font-semibold cursor-pointer transition-all whitespace-nowrap"
             >
               Get Early Access
             </button>
           </form>
-        </GlowEffect>
+        </div>
 
         <p className="text-sm text-gray-500 mb-10">Free early access. No credit card required.</p>
 
-
-
         {/* Badges */}
         <div className="flex flex-nowrap gap-5 justify-center">
           {badges.map((badge, i) => (