export default function AlbaGrayLeadPage() {
return (
{/* NAVBAR */}
ALBA GRAY — PROMPTS
BenefitsCategoriesHow it worksFAQ
{/* HERO */}
<section className="relative overflow-hidden">
<div className="max-w-7xl mx-auto px-4 sm:px-6 py-16 lg:py-24 grid lg:grid-cols-2 gap-10 items-center">
<motion.div initial={{opacity:0,y:20}} animate={{opacity:1,y:0}} transition={{duration:0.6}}>
<h1 className="text-4xl sm:text-5xl font-extrabold leading-tight tracking-tight">
Premium AI Prompts to <span className="text-amber-600">Launch, Sell, and Grow</span>
</h1>
<p className="mt-4 text-lg text-slate-600">
Curated, field‑tested prompts by <span className="font-semibold">Alba Gray</span> for creators, consultants, and Christian entrepreneurs. Get landing pages, ads, immigration letters, YouTube scripts, music prompts, and more — in minutes, not weeks.
</p>
<ul className="mt-6 space-y-2 text-slate-700">
{[
"100+ ready-to-use prompt packs (ES/EN)",
"High-converting copy + exact instructions",
"For ChatGPT, Canva, Suno, HumanPal, & more",
].map((t) => (
<li key={t} className="flex gap-2 items-center"><CheckCircle2 className="h-5 w-5 text-emerald-600" /> {t}</li>
))}
</ul>
{/* FORM */}
<div id="signup" className="mt-8">
<div className="p-3 sm:p-4 rounded-2xl bg-white border border-slate-200 shadow-sm">
<form
className="flex flex-col sm:flex-row gap-3"
method="POST"
action="#"
onSubmit={(e)=>{e.preventDefault(); alert('Thanks! You\'re on the list. Replace the form action with your ESP (e.g., Mailchimp/ConvertKit/Beehiiv).');}}
>
<div className="flex-1">
<label htmlFor="email" className="sr-only">Email</label>
<div className="flex items-center gap-2 rounded-xl border border-slate-300 px-3 py-2 bg-slate-50">
<Mail className="h-5 w-5 text-slate-500"/>
<input id="email" required type="email" placeholder="Enter your email to get launch access"
className="w-full bg-transparent outline-none placeholder:text-slate-400"/>
</div>
</div>
<button type="submit" className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-amber-500 text-white font-semibold shadow hover:bg-amber-600">
Get early access <ArrowRight className="h-5 w-5"/>
</button>
</form>
<p className="mt-2 text-xs text-slate-500">No spam. Unsubscribe anytime. Founder pricing for early subscribers.</p>
</div>
</div>
<div className="mt-6 flex items-center gap-6 text-sm text-slate-600">
<div className="flex items-center gap-2"><Shield className="h-4 w-4"/> Secure & private</div>
<div className="flex items-center gap-2"><Rocket className="h-4 w-4"/> Fast results</div>
<div className="flex items-center gap-2"><Star className="h-4 w-4"/> Field-tested</div>
</div>
</motion.div>
<motion.div initial={{opacity:0,y:20}} animate={{opacity:1,y:0}} transition={{duration:0.6, delay:0.1}}>
<div className="relative rounded-3xl p-1 bg-gradient-to-br from-amber-200 via-rose-200 to-indigo-200 shadow-inner">
<div className="rounded-3xl bg-white p-6 sm:p-8">
<div className="grid sm:grid-cols-2 gap-4">
{[
{icon: <Globe2 className="h-5 w-5"/>, title: "Landing Pages", text: "One‑prompt funnels that convert."},
{icon: <PlayCircle className="h-5 w-5"/>, title: "YouTube Scripts", text: "Hooks, outlines, and SEO."},
{icon: <Smartphone className="h-5 w-5"/>, title: "Social Ads", text: "Meta/TikTok ready copy."},
{icon: <Sparkles className="h-5 w-5"/>, title: "Suno Prompts", text: "Worship & commercial tracks."},
{icon: <Shield className="h-5 w-5"/>, title: "Immigration Letters", text: "Professional templates."},
{icon: <Rocket className="h-5 w-5"/>, title: "Freelancer Kits", text: "Proposals, invoices, SOPs."},
].map((c, i) => (
<div key={i} className="rounded-2xl border border-slate-200 p-4 hover:shadow-sm transition">
<div className="flex items-center gap-2 font-semibold">{c.icon} {c.title}</div>
<p className="text-sm text-slate-600 mt-1">{c.text}</p>
</div>
))}
</div>
<div className="mt-6">
<div className="rounded-2xl bg-slate-50 p-4 border border-slate-200">
<p className="text-sm text-slate-700">“Alba’s prompts helped me launch a high‑converting funnel in a weekend. Worth every penny.”</p>
<p className="text-xs text-slate-500 mt-1">— Happy Founder</p>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</section>
{/* BENEFITS */}
<section id="benefits" className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<h2 className="text-3xl font-bold tracking-tight">Why join the Founders List?</h2>
<div className="mt-8 grid md:grid-cols-3 gap-6">
{[{
title: "Founder pricing",
desc: "Lifetime discount for early supporters and first access to prompt drops.",
},{
title: "Bilingual library (ES/EN)",
desc: "Prompts crafted for North America + LatAm audiences with cultural nuance.",
},{
title: "Battle‑tested",
desc: "Built from Alba’s real client work in marketing, immigration, education & ministry.",
}].map((b,i)=> (
<div key={i} className="p-6 rounded-2xl border border-slate-200 bg-slate-50">
<h3 className="font-semibold">{b.title}</h3>
<p className="text-slate-600 mt-2 text-sm">{b.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* CATEGORIES */}
<section id="categories" className="py-16 bg-gradient-to-b from-slate-50 to-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<h2 className="text-3xl font-bold tracking-tight">Prompt Collections</h2>
<p className="text-slate-600 mt-2">Launch-ready packs with instructions, variations, and tone controls.</p>
<div className="mt-8 grid lg:grid-cols-3 gap-6">
{[
{name:"Funnels & Landing Pages", points:["Hero hooks & angles","Social proof & FAQs","One-prompt page builders"]},
{name:"Ads & Social Content", points:["TikTok/Meta/YouTube ads","Carousels & shorts scripts","Daily content calendar"]},
{name:"Immigration & Legal Drafts", points:["H&C narratives","Employer offers","Cover letters & affidavits"]},
{name:"Education & Courses", points:["Syllabi & modules","Quizzes & homework","Email drip campaigns"]},
{name:"Music & Media (Suno/Canva)", points:["Lyrics & structure","Style prompts","Album art briefs"]},
{name:"Sales & Client Service", points:["DM frameworks","Discovery scripts","Proposals & invoices"]},
].map((pack, i)=> (
<div key={i} className="rounded-2xl border border-slate-200 bg-white p-6">
<h3 className="font-semibold">{pack.name}</h3>
<ul className="mt-3 space-y-1 text-sm text-slate-600">
{pack.points.map((p,idx)=> (
<li key={idx} className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-600"/> {p}</li>
))}
</ul>
</div>
))}
</div>
</div>
</section>
{/* HOW IT WORKS */}
<section id="how" className="py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<h2 className="text-3xl font-bold tracking-tight">How it works</h2>
<div className="mt-8 grid md:grid-cols-3 gap-6">
{[
{step:"1", title:"Join the list", text:"Get immediate access to the free Starter Pack + launch updates."},
{step:"2", title:"Pick a pack", text:"Choose a prompt pack for your goal: sales, content, immigration, or music."},
{step:"3", title:"Copy • Paste • Profit", text:"Use the exact prompt wording with your tools. Follow the included SOPs."},
].map((s, i)=> (
<div key={i} className="p-6 rounded-2xl border border-slate-200 bg-slate-50">
<div className="text-amber-600 font-extrabold text-2xl">{s.step}</div>
<div className="font-semibold mt-1">{s.title}</div>
<p className="text-slate-600 text-sm mt-2">{s.text}</p>
</div>
))}
</div>
{/* CTA */}
<div className="mt-10 p-6 sm:p-8 rounded-3xl border border-amber-300 bg-amber-50">
<div className="grid md:grid-cols-2 gap-6 items-center">
<div>
<h3 className="text-2xl font-bold">Founder Launch: Limited Spots</h3>
<p className="text-slate-700 mt-2">Lock in lifetime pricing and get the <span className="font-semibold">Bilingual Starter Pack</span> (ES/EN) with 25 prompts for funnels, ads, and emails.</p>
</div>
<form className="flex flex-col sm:flex-row gap-3" onSubmit={(e)=>{e.preventDefault(); alert('You\'re in! Replace this with your ESP action URL.');}}>
<input required type="email" placeholder="your@email.com" className="flex-1 rounded-xl border border-slate-300 px-3 py-3 bg-white"/>
<button type="submit" className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-amber-600 text-white font-semibold shadow hover:bg-amber-700">Claim Founder Access <ArrowRight className="h-5 w-5"/></button>
</form>
</div>
</div>
</div>
</section>
{/* FAQ */}
<section id="faq" className="pb-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<h2 className="text-3xl font-bold tracking-tight">FAQ</h2>
<div className="mt-8 grid md:grid-cols-2 gap-6">
{[
{q:"What tools are these prompts for?", a:"ChatGPT, Canva, Suno, HumanPal, Extendify/WordPress, and more. Each pack includes tool‑specific variants."},
{q:"Are prompts bilingual?", a:"Yes. Most packs include Spanish (LatAm) and English versions, tuned for both markets."},
{q:"Will this work for my niche?", a:"Prompts are designed to be modular with tone and persona controls. They’ve been used in immigration, education, ministry, cleaning services, consulting, and e‑commerce."},
{q:"When is launch?", a:"Soon. Join the list to get early access and founder pricing."},
].map((f,i)=> (
<div key={i} className="rounded-2xl border border-slate-200 p-6 bg-white">
<div className="font-semibold">{f.q}</div>
<p className="text-slate-600 text-sm mt-2">{f.a}</p>
</div>
))}
</div>
</div>
</section>
<footer className="border-t border-slate-200/70 py-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 text-sm text-slate-600 flex flex-col sm:flex-row items-center justify-between gap-3">
<p>© {new Date().getFullYear()} Alba Gray. All rights reserved.</p>
<div className="flex items-center gap-4">
<a className="hover:text-amber-600" href="#">Privacy</a>
<a className="hover:text-amber-600" href="#">Terms</a>
<a className="hover:text-amber-600" href="#">Contact</a>
</div>
</div>
</footer>
</div>);
}