Site design updates
This commit is contained in:
@@ -19,7 +19,7 @@ const roadmapItems = [
|
||||
|
||||
const Waitlist: React.FC = () => {
|
||||
return (
|
||||
<div className="bg-white text-slate-900">
|
||||
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
|
||||
<section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
|
||||
<SectionHeading
|
||||
eyebrow="Roadmap preview"
|
||||
@@ -29,30 +29,33 @@ const Waitlist: React.FC = () => {
|
||||
</section>
|
||||
|
||||
<section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div className="rounded-3xl border border-slate-200 bg-white p-10 space-y-6">
|
||||
<h3 className="text-lg font-semibold text-slate-900">Join the waitlist</h3>
|
||||
<div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-10 space-y-6 shadow-lg">
|
||||
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<span className="size-2 rounded-full bg-[#0693e3]"></span>
|
||||
Join the waitlist
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
Share your details and we’ll invite you to beta cohorts with onboarding resources and direct feedback loops to our product team.
|
||||
Share your details and we'll invite you to beta cohorts with onboarding resources and direct feedback loops to our product team.
|
||||
</p>
|
||||
<form className="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
className="w-full rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
|
||||
className="w-full rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20"
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Work email"
|
||||
className="w-full rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
|
||||
className="w-full rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20"
|
||||
/>
|
||||
<textarea
|
||||
rows={4}
|
||||
placeholder="Tell us about your current workflow and why you're excited."
|
||||
className="w-full rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400 resize-none"
|
||||
className="w-full rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20 resize-none"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm font-semibold"
|
||||
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all w-full"
|
||||
>
|
||||
Join waitlist
|
||||
</button>
|
||||
@@ -60,23 +63,32 @@ const Waitlist: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-3xl border border-slate-200 bg-white p-8 space-y-4">
|
||||
<h4 className="text-lg font-semibold text-slate-900">What's coming</h4>
|
||||
<div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-8 space-y-4">
|
||||
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<span className="size-2 rounded-full bg-[#0bbf87]"></span>
|
||||
What's coming
|
||||
</h4>
|
||||
<ul className="space-y-3 text-sm text-slate-600">
|
||||
{roadmapItems.map((item) => (
|
||||
<li key={item.title} className="flex gap-3">
|
||||
<span className="mt-1 size-1.5 rounded-full bg-brand-500" />
|
||||
<div>
|
||||
<div className="font-semibold text-slate-900">{item.title}</div>
|
||||
<div>{item.description}</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{roadmapItems.map((item, idx) => {
|
||||
const colors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]"];
|
||||
return (
|
||||
<li key={item.title} className="flex gap-3">
|
||||
<span className={`mt-1 size-1.5 rounded-full ${colors[idx % colors.length]} shadow-sm`} />
|
||||
<div>
|
||||
<div className="font-semibold text-slate-900">{item.title}</div>
|
||||
<div>{item.description}</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="rounded-3xl border border-slate-200 bg-white p-8 text-sm text-slate-600 space-y-3">
|
||||
<h4 className="text-lg font-semibold text-slate-900">How the beta works</h4>
|
||||
<p>We onboard new features to the waitlist in weekly waves. You’ll receive playbooks, sample workflows, and a feedback channel with our product team.</p>
|
||||
<div className="rounded-3xl border-2 border-[#ff7a00]/30 bg-gradient-to-br from-[#ff7a00]/10 to-white p-8 text-sm text-slate-600 space-y-3">
|
||||
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<span className="size-2 rounded-full bg-[#ff7a00]"></span>
|
||||
How the beta works
|
||||
</h4>
|
||||
<p>We onboard new features to the waitlist in weekly waves. You'll receive playbooks, sample workflows, and a feedback channel with our product team.</p>
|
||||
<p>Participants also get extended credits to experiment with automation scenarios.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user