feat: move form to a separate component
This commit is contained in:
parent
b7801ef528
commit
42893a515c
|
|
@ -1,10 +1,5 @@
|
||||||
'use client';
|
import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
|
||||||
|
import { WaitlistEmailForm } from './WaitlistEmailForm';
|
||||||
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';
|
|
||||||
|
|
||||||
const styles = `
|
const styles = `
|
||||||
.gradient-text {
|
.gradient-text {
|
||||||
|
|
@ -35,44 +30,6 @@ const styles = `
|
||||||
0%, 100% { opacity: 1; }
|
0%, 100% { opacity: 1; }
|
||||||
50% { opacity: 0.5; }
|
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 = [
|
const badges = [
|
||||||
|
|
@ -83,133 +40,52 @@ const badges = [
|
||||||
{ icon: Link, text: 'Prompt URLs', variant: 'cyan' },
|
{ icon: Link, text: 'Prompt URLs', variant: 'cyan' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
|
||||||
|
|
||||||
export function HeroSection() {
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<style dangerouslySetInnerHTML={{ __html: styles }} />
|
<style dangerouslySetInnerHTML={{ __html: styles }} />
|
||||||
<section className="relative pt-20 pb-20 px-6">
|
<section className="relative pt-20 pb-20 px-6">
|
||||||
<div className="max-w-4xl mx-auto text-center">
|
<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">
|
<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" />
|
<span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
|
||||||
In Active Development
|
In Active Development
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight">
|
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight">
|
||||||
AI Image Generation
|
AI Image Generation
|
||||||
<br />
|
<br />
|
||||||
<span className="gradient-text">Inside Your Workflow</span>
|
<span className="gradient-text">Inside Your Workflow</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
|
<p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
|
||||||
Generate images via API, SDK, CLI, Lab, or live URLs.
|
Generate images via API, SDK, CLI, Lab, or live URLs.
|
||||||
<br />
|
<br />
|
||||||
Production-ready CDN delivery in seconds.
|
Production-ready CDN delivery in seconds.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<GlowEffect>
|
<WaitlistEmailForm />
|
||||||
{isSubmitted ? (
|
|
||||||
<div
|
<p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
|
||||||
className="flex items-center justify-center gap-3 px-4 py-3 rounded-[10px]"
|
|
||||||
style={{ background: 'rgba(10, 6, 18, 0.95)' }}
|
<div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
|
||||||
>
|
{badges.map((badge, i) => (
|
||||||
<div className="success-checkmark-ring">
|
<span
|
||||||
<div className="success-checkmark-inner">
|
key={i}
|
||||||
<Check className="w-3 h-3 text-white" strokeWidth={3} />
|
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 ${
|
||||||
</div>
|
badge.variant === 'cyan'
|
||||||
</div>
|
? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
|
||||||
<span className="text-white font-medium">Done! You're in the list</span>
|
: 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
|
||||||
</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
|
<badge.icon
|
||||||
</button>
|
className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
|
||||||
</form>
|
/>
|
||||||
)}
|
{badge.text}
|
||||||
</GlowEffect>
|
</span>
|
||||||
|
))}
|
||||||
<p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
|
</div>
|
||||||
|
|
||||||
<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>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<WaitlistPopup
|
|
||||||
isOpen={showPopup}
|
|
||||||
onClose={handlePopupClose}
|
|
||||||
onSubmit={handleWaitlistSubmit}
|
|
||||||
/>
|
|
||||||
</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