usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: use gloweffect

This commit is contained in:
Oleg Proskurin 2025-12-04 13:12:16 +07:00
parent d688c5890a
commit 7f37a5667b
2 changed files with 22 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
apps/landing/src/app/homepage/_components/Emailformanimated.tsx → apps/landing/src/app/homepage/_components/GlowEffect.tsx
View File

@ -1,7 +1,6 @@
import { useState, useEffect } from 'react';
export default function EmailFormDemo() {
const [email, setEmail] = useState('');
export default function GlowEffect({children}) {
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);
opacity: 0.8;
filter: blur(18px);
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="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 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>
</>

16
apps/landing/src/app/homepage/page.tsx
View File

@ -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">
<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">
<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)' }}
>
<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">