115 lines
4.9 KiB
TypeScript
115 lines
4.9 KiB
TypeScript
import React from "react";
|
||
import SectionHeading from "../components/SectionHeading";
|
||
import CTASection from "../components/CTASection";
|
||
import SEO from "../components/SEO";
|
||
import { getMetaTags } from "../config/metaTags";
|
||
import InputField from "../../components/form/input/InputField";
|
||
import TextArea from "../../components/form/input/TextArea";
|
||
import Button from "../../components/ui/button/Button";
|
||
|
||
const roadmapItems = [
|
||
{
|
||
title: "One-click workflows",
|
||
description: "Trigger keywords → ideas → drafts directly inside Planner and Writer with new automation toggles.",
|
||
},
|
||
{
|
||
title: "Schedule intelligence",
|
||
description: "Plan automation cycles by day and time with credit-aware throttling and fallback rules.",
|
||
},
|
||
{
|
||
title: "AI quality scoring",
|
||
description: "Monitor readability, compliance, and SERP alignment across AI-generated content with automated fixes.",
|
||
},
|
||
];
|
||
|
||
const Waitlist: React.FC = () => {
|
||
return (
|
||
<>
|
||
<SEO meta={getMetaTags("waitlist")} />
|
||
<div className="bg-gradient-to-b from-white via-gray-50/30 to-white text-gray-900">
|
||
<section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
|
||
<SectionHeading
|
||
eyebrow="Roadmap preview"
|
||
title="Get early access to upcoming Igny8 releases."
|
||
description="We’re releasing a wave of automation upgrades and AI scoring tools. Join the waitlist to test features before they ship."
|
||
/>
|
||
</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-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-10 space-y-6 shadow-lg">
|
||
<h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||
<span className="size-2 rounded-full bg-[var(--color-primary)]"></span>
|
||
Join the waitlist
|
||
</h3>
|
||
<p className="text-sm text-gray-600">
|
||
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">
|
||
<InputField
|
||
type="text"
|
||
placeholder="Name"
|
||
/>
|
||
<InputField
|
||
type="email"
|
||
placeholder="Work email"
|
||
/>
|
||
<TextArea
|
||
rows={4}
|
||
placeholder="Tell us about your current workflow and why you're excited."
|
||
/>
|
||
<Button
|
||
type="submit"
|
||
variant="primary"
|
||
className="w-full"
|
||
>
|
||
Join waitlist
|
||
</Button>
|
||
</form>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/10 to-white p-8 space-y-4">
|
||
<h4 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||
<span className="size-2 rounded-full bg-[var(--color-success)]"></span>
|
||
What's coming
|
||
</h4>
|
||
<ul className="space-y-3 text-sm text-gray-600">
|
||
{roadmapItems.map((item, idx) => {
|
||
const colors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]"];
|
||
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-gray-900">{item.title}</div>
|
||
<div>{item.description}</div>
|
||
</div>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</div>
|
||
<div className="rounded-3xl border-2 border-[var(--color-warning)]/30 bg-gradient-to-br from-[var(--color-warning)]/10 to-white p-8 text-sm text-gray-600 space-y-3">
|
||
<h4 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||
<span className="size-2 rounded-full bg-[var(--color-warning)]"></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>
|
||
</section>
|
||
|
||
<CTASection
|
||
title="Prefer to explore now?"
|
||
description="Start your Igny8 trial and you’ll get notified the moment new automation releases are ready."
|
||
primaryCta={{ label: "Start free", href: "https://app.igny8.com/signup" }}
|
||
secondaryCta={{ label: "Contact us", href: "/contact" }}
|
||
/>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Waitlist;
|
||
|