feat: move form to a separate component
This commit is contained in:
parent
b7801ef528
commit
42893a515c
|
|
@ -1,10 +1,5 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Zap, Globe, FlaskConical, AtSign, Link, Check } from 'lucide-react';
|
||||
import GlowEffect from './GlowEffect';
|
||||
import WaitlistPopup from './WaitlistPopup';
|
||||
import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';
|
||||
import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
|
||||
import { WaitlistEmailForm } from './WaitlistEmailForm';
|
||||
|
||||
const styles = `
|
||||
.gradient-text {
|
||||
|
|
@ -35,44 +30,6 @@ const styles = `
|
|||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.hero-btn {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.hero-btn.enabled {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hero-btn.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.hero-btn.disabled:hover {
|
||||
background: rgba(100, 100, 120, 0.4) !important;
|
||||
}
|
||||
|
||||
.success-checkmark-ring {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.success-checkmark-inner {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const badges = [
|
||||
|
|
@ -83,133 +40,52 @@ const badges = [
|
|||
{ icon: Link, text: 'Prompt URLs', variant: 'cyan' },
|
||||
];
|
||||
|
||||
const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
|
||||
export function HeroSection() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [isInvalid, setIsInvalid] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
|
||||
const isEnabled = email.length > 0 && isValidEmail(email);
|
||||
|
||||
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setEmail(e.target.value);
|
||||
if (isInvalid) setIsInvalid(false);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!isValidEmail(email)) {
|
||||
setIsInvalid(true);
|
||||
return;
|
||||
}
|
||||
setIsInvalid(false);
|
||||
|
||||
// Fire and forget - don't block popup on logging failure
|
||||
submitEmail(email).catch(console.error);
|
||||
setShowPopup(true);
|
||||
};
|
||||
|
||||
const handlePopupClose = () => {
|
||||
setShowPopup(false);
|
||||
setIsSubmitted(true);
|
||||
};
|
||||
|
||||
const handleWaitlistSubmit = (data: { selected: string[]; other: string }) => {
|
||||
// Fire and forget - don't block on logging failure
|
||||
submitWaitlistData(email, data).catch(console.error);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: styles }} />
|
||||
<section className="relative pt-20 pb-20 px-6">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-6">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
|
||||
In Active Development
|
||||
</div>
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-6">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
|
||||
In Active Development
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight">
|
||||
AI Image Generation
|
||||
<br />
|
||||
<span className="gradient-text">Inside Your Workflow</span>
|
||||
</h1>
|
||||
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight">
|
||||
AI Image Generation
|
||||
<br />
|
||||
<span className="gradient-text">Inside Your Workflow</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
|
||||
Generate images via API, SDK, CLI, Lab, or live URLs.
|
||||
<br />
|
||||
Production-ready CDN delivery in seconds.
|
||||
</p>
|
||||
<p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
|
||||
Generate images via API, SDK, CLI, Lab, or live URLs.
|
||||
<br />
|
||||
Production-ready CDN delivery in seconds.
|
||||
</p>
|
||||
|
||||
<GlowEffect>
|
||||
{isSubmitted ? (
|
||||
<div
|
||||
className="flex items-center justify-center gap-3 px-4 py-3 rounded-[10px]"
|
||||
style={{ background: 'rgba(10, 6, 18, 0.95)' }}
|
||||
>
|
||||
<div className="success-checkmark-ring">
|
||||
<div className="success-checkmark-inner">
|
||||
<Check className="w-3 h-3 text-white" strokeWidth={3} />
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-white font-medium">Done! You're in the list</span>
|
||||
</div>
|
||||
) : (
|
||||
<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={handleEmailChange}
|
||||
placeholder="your@email.com"
|
||||
className={`flex-1 px-4 py-3 bg-transparent border-none rounded-md outline-none placeholder:text-white/40 focus:bg-white/[0.03] ${
|
||||
isInvalid ? 'text-red-400' : 'text-white'
|
||||
}`}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isEnabled}
|
||||
className={`hero-btn px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-md text-white font-semibold transition-all whitespace-nowrap ${
|
||||
isEnabled ? 'enabled hover:from-indigo-600 hover:to-purple-600' : 'disabled'
|
||||
<WaitlistEmailForm />
|
||||
|
||||
<p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
|
||||
{badges.map((badge, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm flex items-center gap-2 sm:gap-2.5 whitespace-nowrap ${
|
||||
badge.variant === 'cyan'
|
||||
? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
|
||||
: 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
|
||||
}`}
|
||||
>
|
||||
Get Early Access
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</GlowEffect>
|
||||
|
||||
<p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
|
||||
{badges.map((badge, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm flex items-center gap-2 sm:gap-2.5 whitespace-nowrap ${
|
||||
badge.variant === 'cyan'
|
||||
? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
|
||||
: 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
|
||||
}`}
|
||||
>
|
||||
<badge.icon
|
||||
className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
|
||||
/>
|
||||
{badge.text}
|
||||
</span>
|
||||
))}
|
||||
<badge.icon
|
||||
className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
|
||||
/>
|
||||
{badge.text}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<WaitlistPopup
|
||||
isOpen={showPopup}
|
||||
onClose={handlePopupClose}
|
||||
onSubmit={handleWaitlistSubmit}
|
||||
/>
|
||||
</section>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Check } from 'lucide-react';
|
||||
import GlowEffect from './GlowEffect';
|
||||
import WaitlistPopup from './WaitlistPopup';
|
||||
import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';
|
||||
|
||||
const styles = `
|
||||
.hero-btn {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.hero-btn.enabled {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hero-btn.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.hero-btn.disabled:hover {
|
||||
background: rgba(100, 100, 120, 0.4) !important;
|
||||
}
|
||||
|
||||
.success-checkmark-ring {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.success-checkmark-inner {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
|
||||
export function WaitlistEmailForm() {
|
||||
const [email, setEmail] = useState('');
|
||||
const [isInvalid, setIsInvalid] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
|
||||
const isEnabled = email.length > 0 && isValidEmail(email);
|
||||
|
||||
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setEmail(e.target.value);
|
||||
if (isInvalid) setIsInvalid(false);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!isValidEmail(email)) {
|
||||
setIsInvalid(true);
|
||||
return;
|
||||
}
|
||||
setIsInvalid(false);
|
||||
|
||||
submitEmail(email).catch(console.error);
|
||||
setShowPopup(true);
|
||||
};
|
||||
|
||||
const handlePopupClose = () => {
|
||||
setShowPopup(false);
|
||||
setIsSubmitted(true);
|
||||
};
|
||||
|
||||
const handleWaitlistSubmit = (data: { selected: string[]; other: string }) => {
|
||||
submitWaitlistData(email, data).catch(console.error);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<style dangerouslySetInnerHTML={{ __html: styles }} />
|
||||
<GlowEffect>
|
||||
{isSubmitted ? (
|
||||
<div
|
||||
className="flex items-center justify-center gap-3 px-4 py-3 rounded-[10px]"
|
||||
style={{ background: 'rgba(10, 6, 18, 0.95)' }}
|
||||
>
|
||||
<div className="success-checkmark-ring">
|
||||
<div className="success-checkmark-inner">
|
||||
<Check className="w-3 h-3 text-white" strokeWidth={3} />
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-white font-medium">Done! You're in the list</span>
|
||||
</div>
|
||||
) : (
|
||||
<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={handleEmailChange}
|
||||
placeholder="your@email.com"
|
||||
className={`flex-1 px-4 py-3 bg-transparent border-none rounded-md outline-none placeholder:text-white/40 focus:bg-white/[0.03] ${
|
||||
isInvalid ? 'text-red-400' : 'text-white'
|
||||
}`}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isEnabled}
|
||||
className={`hero-btn px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-md text-white font-semibold transition-all whitespace-nowrap ${
|
||||
isEnabled ? 'enabled hover:from-indigo-600 hover:to-purple-600' : 'disabled'
|
||||
}`}
|
||||
>
|
||||
Get Early Access
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</GlowEffect>
|
||||
<WaitlistPopup isOpen={showPopup} onClose={handlePopupClose} onSubmit={handleWaitlistSubmit} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue