Site design updates

This commit is contained in:
Desktop
2025-11-14 01:16:08 +05:00
parent f8bab8d432
commit e74c048f46
17 changed files with 429 additions and 1618 deletions

View File

@@ -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 well 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. Youll 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>