salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Marketing Website

Browse Source
This commit is contained in:
Desktop
2025-11-13 16:51:48 +05:00
parent 224e32230c
commit 86f6886a13
27 changed files with 2149 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
frontend/src/marketing/pages/CaseStudies.tsx Normal file
View File

@@ -0,0 +1,136 @@
import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
const caseStudies = [
{
company: "Lumen Publishing",
headline: "From 40 to 220 articles/month with 3× SERP visibility.",
metrics: [
{ label: "Organic traffic", value: "+210%" },
{ label: "Time-to-publish", value: "-58%" },
{ label: "Cost per article", value: "-34%" },
],
summary:
"Publisher running 6 niche brands used Igny8 to centralize research, briefs, and AI-assisted writing. Automation recipes ensured every keyword moved to published content with minimal handoff friction.",
image: "case-lumen.png",
},
{
company: "Northbeam Digital",
headline: "Agency tripled client output without adding headcount.",
metrics: [
{ label: "Client satisfaction", value: "98%" },
{ label: "Deliverables/mo", value: "+175%" },
{ label: "Margin lift", value: "+22%" },
],
summary:
"Multi-client agency adopted Igny8 to standardize workflows, automate reporting, and launch custom Thinker playbooks. Teams now produce keyword research, content, and images for 20+ clients simultaneously.",
image: "case-northbeam.png",
},
{
company: "Arcadia SaaS",
headline: "In-house team built a 7-stage automation pipeline.",
metrics: [
{ label: "New keywords ranked", value: "1,040" },
{ label: "Automation coverage", value: "82%" },
{ label: "Time saved monthly", value: "120 hrs" },
],
summary:
"Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into WordPress and HubSpot.",
image: "case-arcadia.png",
},
];
const CaseStudies: React.FC = () => {
return (
<div className="bg-[#050913] text-white">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
<SectionHeading
eyebrow="Proof"
title="Stories from teams automating their way to category leadership."
description="See how publishers, agencies, and SaaS companies transformed their SEO and content operations with Igny8."
/>
</section>
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
{caseStudies.map((cs) => (
<div
key={cs.company}
className="rounded-3xl border border-white/10 bg-white/5 p-12 grid grid-cols-1 lg:grid-cols-2 gap-12"
>
<div className="space-y-6">
<span className="text-xs uppercase tracking-[0.3em] text-white/40">
{cs.company}
</span>
<h3 className="text-2xl font-semibold text-white">{cs.headline}</h3>
<p className="text-sm text-white/70 leading-relaxed">{cs.summary}</p>
<div className="grid grid-cols-3 gap-4">
{cs.metrics.map((metric) => (
<div
key={metric.label}
className="rounded-2xl border border-white/10 bg-white/5 p-4 text-center space-y-2"
>
<div className="text-xl font-semibold text-white">
{metric.value}
</div>
<div className="text-xs uppercase tracking-[0.2em] text-white/40">
{metric.label}
</div>
</div>
))}
</div>
</div>
<div className="rounded-3xl border border-white/10 bg-slate-900 overflow-hidden">
<img
src={`/marketing/images/${cs.image}`}
alt={`${cs.company} case study`}
className="w-full h-full object-cover"
/>
</div>
</div>
))}
</section>
<section className="bg-slate-950/70 border-y border-white/5">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="space-y-4">
<h4 className="text-lg font-semibold text-white">Results you can expect</h4>
<ul className="space-y-3 text-sm text-white/70">
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
30-60 day onboarding to deploy automation and Thinker governance.
</li>
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
3-5× increase in content throughput without sacrificing editorial quality.
</li>
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
Clear ROI dashboards tying automation to revenue outcomes.
</li>
</ul>
</div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-4 text-sm text-white/70">
<h4 className="text-lg font-semibold text-white">Customer advisory board</h4>
<p>
Igny8’s roadmap is shaped by an active community of customer strategists, agency partners, and product marketers. Join and get early access to features, template libraries, and industry benchmarks.
</p>
<button className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold">
Join the CAB waitlist
</button>
</div>
</div>
</section>
<CTASection
title="Let’s document your Igny8 success story next."
description="Share your goals and we’ll map an automation blueprint specific to your team, then track and celebrate the wins together."
primaryCta={{ label: "Book strategy session", href: "/contact" }}
secondaryCta={{ label: "Download case study pack", href: "/resources" }}
/>
</div>
);
};
export default CaseStudies;

118
frontend/src/marketing/pages/Contact.tsx Normal file
View File

@@ -0,0 +1,118 @@
import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
const Contact: React.FC = () => {
return (
<div className="bg-[#050913] text-white">
<section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
<SectionHeading
eyebrow="Contact"
title="Talk with an Igny8 strategist."
description="Share your goals, current stack, and timeline. We’ll map automation opportunities, project ROI, and plan your launch."
/>
</section>
<section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
<form className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<label className="flex flex-col gap-2 text-sm text-white/70">
First name
<input
type="text"
placeholder="Alex"
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400"
/>
</label>
<label className="flex flex-col gap-2 text-sm text-white/70">
Last name
<input
type="text"
placeholder="Rivera"
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400"
/>
</label>
</div>
<label className="flex flex-col gap-2 text-sm text-white/70">
Work email
<input
type="email"
placeholder="you@company.com"
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400"
/>
</label>
<label className="flex flex-col gap-2 text-sm text-white/70">
Company
<input
type="text"
placeholder="Company name"
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400"
/>
</label>
<label className="flex flex-col gap-2 text-sm text-white/70">
How can we help?
<textarea
rows={4}
placeholder="Tell us about your current workflow, challenges, and goals."
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400 resize-none"
/>
</label>
<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"
>
Book strategy call
</button>
</form>
<div className="space-y-8">
<div className="rounded-3xl border border-white/10 bg-white/5 p-8 space-y-4 text-sm text-white/70">
<h3 className="text-lg font-semibold text-white">Calendly placeholder</h3>
<div className="aspect-[4/3] rounded-2xl border border-white/10 bg-slate-900 flex items-center justify-center text-xs text-white/40">
Embed Calendly iframe here
</div>
<p>
Prefer async? Email us at{" "}
<a href="mailto:hello@igny8.com" className="text-brand-200 hover:text-brand-100">
hello@igny8.com
</a>{" "}
or join our community Slack.
</p>
</div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-8 space-y-4">
<h3 className="text-lg font-semibold text-white">Support perks</h3>
<ul className="space-y-3 text-sm text-white/70">
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
24-hour response time on all Launch+ plans.
</li>
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
Dedicated success architect for Scale and Enterprise.
</li>
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
Migration services when replacing legacy content stacks.
</li>
</ul>
</div>
</div>
</section>
<CTASection
title="Need instant access?"
description="Start a free trial to explore Igny8 in minutes—no credit card, no setup required."
primaryCta={{ label: "Start free trial", href: "https://app.igny8.com/signup" }}
secondaryCta={{ label: "Visit help center", href: "/resources" }}
/>
</div>
);
};
export default Contact;

162
frontend/src/marketing/pages/Home.tsx Normal file
View File

@@ -0,0 +1,162 @@
import React from "react";
import {
BoltIcon,
SparklesIcon,
ChartBarIcon,
PhotoIcon,
} from "@heroicons/react/24/outline";
import HeroSection from "../components/HeroSection";
import MetricsBar from "../components/MetricsBar";
import { heroMetrics, workflowSteps } from "../data/metrics";
import LogoCloud from "../components/LogoCloud";
import WorkflowSteps from "../components/WorkflowSteps";
import FeatureGrid from "../components/FeatureGrid";
import SectionHeading from "../components/SectionHeading";
import TestimonialSlider from "../components/TestimonialSlider";
import CTASection from "../components/CTASection";
const Home: React.FC = () => {
return (
<div className="bg-[#050913]">
<HeroSection
image="hero-dashboard.png"
headline="Scale SEO content from keyword discovery to AI-crafted outputs."
subheadline="Igny8 automates your entire growth workflow—from market intelligence to publishing-ready content and imagery—so your team builds momentum, not spreadsheets."
primaryCta={{
label: "Start free trial",
href: "https://app.igny8.com/signup",
}}
secondaryCta={{
label: "Book a live tour",
href: "/tour",
}}
/>
<MetricsBar metrics={heroMetrics} />
<LogoCloud />
<section className="max-w-6xl mx-auto px-6 py-24 space-y-12">
<SectionHeading
eyebrow="Unified growth engine"
title="Four deeply connected products deliver one end-to-end workflow."
description="Every step compounds the next—from keyword intelligence to AI-powered writing and design. Automations keep your pipeline moving while strategy stays in your control."
/>
<FeatureGrid
features={[
{
title: "Planner · Market intelligence",
description:
"Tap into a living keyword database, cluster at scale, and prioritize opportunities with AI scoring. Build topical maps in minutes, not days.",
icon: <ChartBarIcon className="h-6 w-6" />,
link: { label: "See Planner", href: "/product#planner" },
},
{
title: "Writer · AI content studio",
description:
"Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools.",
icon: <SparklesIcon className="h-6 w-6" />,
link: { label: "See Writer", href: "/product#writer" },
},
{
title: "Thinker · Strategy OS",
description:
"Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates.",
icon: <BoltIcon className="h-6 w-6" />,
link: { label: "See Thinker", href: "/product#thinker" },
},
{
title: "Automation · Always-on execution",
description:
"Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence.",
icon: <PhotoIcon className="h-6 w-6" />,
link: { label: "See Automation", href: "/product#automation" },
},
]}
/>
</section>
<WorkflowSteps steps={workflowSteps} />
<section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div className="space-y-6">
<SectionHeading
eyebrow="Full visibility"
title="See the entire pipeline—from keyword intake to published content—in one dashboard."
description="Monitor velocity, quality, and automation coverage across every site. Use filters to dive into sectors, teams, and campaigns. Igny8 keeps leadership confident and operations aligned."
align="left"
/>
<ul className="space-y-4 text-sm text-white/70">
<li className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" />
Real-time metrics on keyword additions, clusters formed, briefs generated, and content shipped.
</li>
<li className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" />
Drill into automation logs to understand every AI action, approvals, and handoffs.
</li>
<li className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" />
Export-ready visuals for leadership updates and client reporting.
</li>
</ul>
</div>
<div className="relative">
<div className="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
<img
src="/marketing/images/workflow-overview.png"
alt="Workflow overview"
className="w-full h-full object-cover"
/>
</div>
<div className="absolute -bottom-8 -left-8 md:-left-12 bg-slate-950/80 border border-white/10 rounded-3xl p-6 w-64">
<h4 className="text-sm font-semibold text-white/80">Automation snapshot</h4>
<p className="text-xs text-white/60 mt-2">
87 keywords → 63 briefs → 48 articles → 48 image sets generated this week.
</p>
</div>
</div>
</section>
<TestimonialSlider />
<section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-3 gap-8">
{[
{
title: "Deploy anywhere",
description:
"Publish directly to WordPress with Igny8 automations or export polished assets to CMS, docs, or project tools.",
},
{
title: "Collaborate cross-team",
description:
"Give SEO, content, and creative teams a shared workspace—complete with approvals, version history, and assignments.",
},
{
title: "Stay on-brand and compliant",
description:
"Govern prompts, author voices, and AI usage with centralized policies and audit-ready histories.",
},
].map((item) => (
<div
key={item.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 space-y-4"
>
<h3 className="text-lg font-semibold text-white">{item.title}</h3>
<p className="text-sm text-white/60 leading-relaxed">{item.description}</p>
</div>
))}
</section>
<CTASection
title="Ready to orchestrate SEO, content, and creative in one AI engine?"
description="Launch Igny8 in minutes. Start automating your workflow, or book a white-glove onboarding session with our team."
primaryCta={{ label: "Start free trial", href: "https://app.igny8.com/signup" }}
secondaryCta={{ label: "Talk to sales", href: "/contact" }}
/>
</div>
);
};
export default Home;

109
frontend/src/marketing/pages/Partners.tsx Normal file
View File

@@ -0,0 +1,109 @@
import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
const tiers = [
{
title: "Certified Agency",
benefits: [
"Co-branded marketing assets and listing in partner directory.",
"Dedicated partner manager and quarterly business reviews.",
"Access to automation templates and think tank sessions.",
],
},
{
title: "Technology Partner",
benefits: [
"API access, sandbox environments, and technical documentation.",
"Joint integration roadmap planning and go-to-market support.",
"Shared lead programs and launch promotion campaigns.",
],
},
{
title: "Affiliate & Advocate",
benefits: [
"Performance-based revenue share with lifetime attribution.",
"Early access to new features and partner community channels.",
"Custom reporting dashboards to track referred accounts.",
],
},
];
const Partners: React.FC = () => {
return (
<div className="bg-[#050913] text-white">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
<SectionHeading
eyebrow="Partners"
title="Grow faster together—build services and solutions on Igny8."
description="Join our partner ecosystem to co-create automations, deliver measurable results, and co-market AI-driven success stories."
/>
</section>
<section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-3 gap-8">
{tiers.map((tier) => (
<div
key={tier.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 flex flex-col gap-5"
>
<span className="text-xs uppercase tracking-[0.3em] text-white/40">
Program
</span>
<h3 className="text-xl font-semibold text-white">{tier.title}</h3>
<ul className="space-y-3 text-sm text-white/70">
{tier.benefits.map((benefit) => (
<li key={benefit} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
{benefit}
</li>
))}
</ul>
</div>
))}
</section>
<section className="bg-slate-950/70 border-y border-white/5">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
<div className="space-y-6">
<SectionHeading
eyebrow="API & integrations"
title="Embed Igny8 intelligence into your workflows."
description="Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting."
align="left"
/>
<div className="rounded-3xl border border-white/10 bg-white/5 p-6 text-sm text-white/60">
API docs placeholder (download at `/marketing/images/api-docs.png`, 1100×720).
</div>
</div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-6">
<h4 className="text-lg font-semibold text-white">Partner resources</h4>
<ul className="space-y-4 text-sm text-white/70">
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
Sales playbooks, ROI calculators, and demo environments.
</li>
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
Shared Slack channels with Igny8 product and marketing teams.
</li>
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
Quarterly partner labs to showcase launches and integrations.
</li>
</ul>
</div>
</div>
</section>
<CTASection
title="Become an Igny8 partner."
description="Apply today to co-create automations, launch integrations, and grow with our shared go-to-market engine."
primaryCta={{ label: "Apply now", href: "/contact" }}
secondaryCta={{ label: "Download partner deck", href: "/marketing/images/partner-program.png" }}
/>
</div>
);
};
export default Partners;

214
frontend/src/marketing/pages/Pricing.tsx Normal file
View File

@@ -0,0 +1,214 @@
import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
const tiers = [
{
name: "Launch",
price: "$199",
cadence: "per month",
description: "For emerging teams launching AI-assisted content operations.",
features: [
"Up to 5 team seats",
"Planner + Writer modules",
"3 automation recipes",
"2,500 AI credits / month",
"Email support",
],
badge: "Most popular for startups",
},
{
name: "Scale",
price: "$499",
cadence: "per month",
description: "For growing organizations automating multi-site workflows.",
features: [
"Unlimited seats",
"Planner + Writer + Thinker",
"All automation recipes",
"10,000 AI credits / month",
"Priority support & onboarding",
],
featured: true,
badge: "Best value",
},
{
name: "Enterprise",
price: "Let’s talk",
cadence: "",
description: "For publishers and agencies needing advanced governance.",
features: [
"Custom SLAs and SSO",
"Private automation recipes",
"Dedicated success architect",
"Credit scaling & on-prem options",
"Security reviews & compliance support",
],
badge: "Tailored programs",
},
];
const featureMatrix = [
{
feature: "Global keyword database",
launch: true,
scale: true,
enterprise: true,
},
{
feature: "AI clustering & topical maps",
launch: "10k keywords",
scale: "100k keywords",
enterprise: "Unlimited",
},
{
feature: "Automation recipes",
launch: "3 core",
scale: "All 12",
enterprise: "Custom",
},
{
feature: "WordPress publishing",
launch: "Manual",
scale: "Automated",
enterprise: "Automated + custom CMS",
},
{
feature: "Support",
launch: "Email + docs",
scale: "Priority + onboarding",
enterprise: "Dedicated CSM",
},
];
const Pricing: React.FC = () => {
return (
<div className="bg-[#050913] text-white">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-8">
<SectionHeading
eyebrow="Pricing"
title="Simple plans that scale with your automation ambitions."
description="Transparent pricing for the entire Igny8 platform. No seat-based penalties—every teammate can collaborate freely."
/>
<div className="rounded-3xl border border-white/10 bg-white/5 p-6 text-sm text-white/60 text-center">
Looking to migrate from an existing AI content stack? Ask about our migration credit and onboarding accelerator.
</div>
</section>
<section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-3 gap-8">
{tiers.map((tier) => (
<div
key={tier.name}
className={`relative rounded-3xl border ${tier.featured ? "border-brand-500/60 bg-brand-500/10 shadow-[0_0_70px_rgba(59,130,246,0.25)]" : "border-white/10 bg-white/5"} p-10 flex flex-col gap-6`}
>
{tier.badge && (
<span className="inline-flex items-center self-start rounded-full border border-white/15 bg-white/10 px-4 py-1 text-[11px] uppercase tracking-[0.25em] text-brand-100">
{tier.badge}
</span>
)}
<div>
<h3 className="text-2xl font-semibold text-white">{tier.name}</h3>
<p className="text-sm text-white/60 mt-2">{tier.description}</p>
</div>
<div className="text-4xl font-semibold text-white">
{tier.price}
{tier.cadence && (
<span className="text-sm font-normal text-white/50 ml-2">
{tier.cadence}
</span>
)}
</div>
<ul className="space-y-3 text-sm text-white/70">
{tier.features.map((feature) => (
<li key={feature} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
{feature}
</li>
))}
</ul>
<div className="pt-4">
<a
href={tier.name === "Enterprise" ? "/contact" : "https://app.igny8.com/signup"}
className={`inline-flex w-full items-center justify-center rounded-full px-6 py-3 text-sm font-semibold transition ${
tier.featured
? "bg-white text-slate-950 hover:bg-brand-100"
: "border border-white/30 text-white hover:border-white/60"
}`}
>
{tier.name === "Enterprise" ? "Contact sales" : "Start free trial"}
</a>
</div>
</div>
))}
</section>
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-10">
<h3 className="text-xl font-semibold text-white">
Compare plan capabilities
</h3>
<div className="overflow-hidden rounded-3xl border border-white/10 bg-white/5">
<table className="min-w-full text-sm text-white/70">
<thead className="bg-white/5 text-white/60 uppercase text-xs tracking-[0.3em]">
<tr>
<th className="px-6 py-4 text-left">Capability</th>
<th className="px-6 py-4 text-center">Launch</th>
<th className="px-6 py-4 text-center">Scale</th>
<th className="px-6 py-4 text-center">Enterprise</th>
</tr>
</thead>
<tbody>
{featureMatrix.map((row, index) => (
<tr key={row.feature} className={index % 2 === 0 ? "bg-white/3" : ""}>
<td className="px-6 py-5 text-white font-medium">{row.feature}</td>
<td className="px-6 py-5 text-center">
{row.launch === true ? "Included" : row.launch}
</td>
<td className="px-6 py-5 text-center">
{row.scale === true ? "Included" : row.scale}
</td>
<td className="px-6 py-5 text-center">
{row.enterprise === true ? "Included" : row.enterprise}
</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
<section className="bg-slate-950/70 border-y border-white/5">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12 text-sm text-white/70">
<div className="space-y-4">
<h4 className="text-lg font-semibold text-white">
Usage-based credits explained
</h4>
<p>
Igny8 credits cover AI-generated drafts, clustering, and image creation. Monitor usage in real time from your dashboard. Credits roll over for 30 days.
</p>
<p>
Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
</p>
</div>
<div className="space-y-4">
<h4 className="text-lg font-semibold text-white">
Security & compliance
</h4>
<p>
Igny8 supports granular access controls, SSO, audit logging, and data residency requests. Enterprise plans include SOC 2 documentation and custom security reviews.
</p>
</div>
</div>
</section>
<CTASection
title="Let’s build a plan tailored to your content velocity goals."
description="Our team will help you forecast automation impact, map migrations, and launch Igny8 within days."
primaryCta={{ label: "Talk to sales", href: "/contact" }}
secondaryCta={{ label: "Start free trial", href: "https://app.igny8.com/signup" }}
/>
</div>
);
};
export default Pricing;

169
frontend/src/marketing/pages/Product.tsx Normal file
View File

@@ -0,0 +1,169 @@
import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
const Product: React.FC = () => {
return (
<div className="bg-[#050913] text-white">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div className="space-y-6">
<SectionHeading
eyebrow="Platform overview"
title="One operating system for keyword intelligence, AI content production, and automation."
description="Planner, Writer, Thinker, and Automation act as one cohesive system. Each module is powerful on its own—together they deliver a compounding growth engine."
align="left"
/>
<div className="rounded-3xl border border-white/10 bg-white/5 p-6 space-y-4 text-sm text-white/70">
<div className="flex items-center justify-between text-white">
<span className="font-semibold">Modules included</span>
<span>4 products · 12 automation recipes</span>
</div>
<ul className="space-y-3">
{[
"Planner → Find, cluster, and prioritize keywords with AI scoring and SERP insights.",
"Writer → Generate on-brand long-form content from briefs with tone, audience, and compliance controls.",
"Thinker → Manage prompts, author profiles, and brand playbooks that feed every generation.",
"Automation → Run scheduled workflows that move keywords to ideas, tasks, content, and images automatically.",
].map((point) => (
<li key={point} className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" />
{point}
</li>
))}
</ul>
</div>
</div>
<div className="relative">
<div className="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
<img
src="/marketing/images/planner-keywords.png"
alt="Planner module screenshot"
className="w-full h-full object-cover"
/>
</div>
</div>
</div>
</section>
<section className="max-w-6xl mx-auto px-6 py-24 space-y-12">
<SectionHeading
eyebrow="Module deep dive"
title="Everything you need to research, create, deploy, and measure."
description="We designed Igny8 so your team can centralize strategy, remove bottlenecks, and trust AI with execution while maintaining full visibility."
/>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
{[
{
title: "Planner",
copy: [
"Global keyword database with opportunity scoring, SERP overlays, and traffic estimates.",
"Drag-and-drop topical mapping. Auto-cluster thousands of terms in minutes.",
"Alerts for emerging opportunities, competitive gaps, and seasonality shifts.",
],
image: "planner-strategy.png",
},
{
title: "Writer",
copy: [
"AI briefs with outlines, talking points, and internal link suggestions.",
"Long-form drafts aligned to your brand voice, compliance rules, and target SERP.",
"Editorial workspace with comments, approvals, and WordPress publishing.",
],
image: "writer-editor.png",
},
{
title: "Thinker",
copy: [
"Centralize prompts, tone profiles, and persona guidance.",
"Version control for AI instructions and playbooks across teams.",
"Governance dashboards showing who generated what, when, and with which inputs.",
],
image: "thinker-prompts.png",
},
{
title: "Automation",
copy: [
"Schedule keywords → ideas → tasks → content → images in fully automated cycles.",
"Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability.",
"Monitor every automation with audit logs and manual override controls.",
],
image: "automation-timeline.png",
},
].map((module) => (
<div
key={module.title}
className="rounded-3xl border border-white/10 bg-white/5 p-10 flex flex-col gap-6"
>
<div className="flex items-center gap-3 text-sm uppercase tracking-[0.3em] text-white/40">
<span className="size-2 rounded-full bg-brand-300" />
{module.title}
</div>
<h3 className="text-2xl font-semibold text-white">{module.title} platform</h3>
<ul className="space-y-3 text-sm text-white/65">
{module.copy.map((line) => (
<li key={line} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-200" />
{line}
</li>
))}
</ul>
<div className="rounded-2xl border border-white/10 bg-slate-900 overflow-hidden">
<img
src={`/marketing/images/${module.image}`}
alt={`${module.title} module`}
className="w-full h-full object-cover"
/>
</div>
</div>
))}
</div>
</section>
<section className="max-w-6xl mx-auto px-6 py-24">
<div className="rounded-3xl border border-white/10 bg-gradient-to-br from-white/5 via-transparent to-slate-950/60 p-10 md:p-16 flex flex-col lg:flex-row gap-16">
<div className="flex-1 space-y-6">
<SectionHeading
eyebrow="Automation timeline"
title="Visualize every automated handoff—and take control at any point."
description="Igny8 timelines map dependencies across your workflow so you can see how AI is powering each deliverable. Pause or accelerate with confidence."
align="left"
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-white/70">
{[
"Real-time status for every automation recipe with success rates and manual interventions logged.",
"Smart recommendations to rebalance workloads, add credits, or adjust prompts when performance shifts.",
"Exportable reports to share results with leadership or clients in one click.",
"Granular permissions so teams can automate while leadership maintains oversight.",
].map((item) => (
<div key={item} className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" />
{item}
</div>
))}
</div>
</div>
<div className="flex-1">
<div className="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
<img
src="/marketing/images/automation-timeline.png"
alt="Automation timeline"
className="w-full h-full object-cover"
/>
</div>
</div>
</div>
</section>
<CTASection
title="Unify search intelligence, AI content, and automation in one platform."
description="Start with 14 days on us or book a bespoke walkthrough with our team to map Igny8 to your workflows."
primaryCta={{ label: "Start your trial", href: "https://app.igny8.com/signup" }}
secondaryCta={{ label: "Book a tour", href: "/tour" }}
/>
</div>
);
};
export default Product;

143
frontend/src/marketing/pages/Resources.tsx Normal file
View File

@@ -0,0 +1,143 @@
import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
const articles = [
{
title: "AI + SEO: Building topical authority at scale",
description:
"How Igny8 customers map thousands of keywords into authoritative clusters that rank faster.",
date: "October 2025",
},
{
title: "Automating the content supply chain",
description:
"A playbook for connecting keyword research, briefs, writing, and imagery without human bottlenecks.",
date: "September 2025",
},
{
title: "Measuring AI-generated content quality",
description:
"Frameworks for tracking performance, editorial standards, and compliance across large AI programs.",
date: "August 2025",
},
];
const webinars = [
{
title: "Building an automation-first content ops team",
description: "Live strategy session with Igny8 specialists and customer panel.",
date: "November 21, 2025",
},
{
title: "From keywords to conversions: dashboards that prove ROI",
description: "Hands-on walkthrough of Igny8 dashboards and reporting exports.",
date: "On-demand replay",
},
];
const Resources: React.FC = () => {
return (
<div className="bg-[#050913] text-white">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
<SectionHeading
eyebrow="Resources"
title="Insights, playbooks, and events for AI-led growth teams."
description="Stay ahead of the curve with strategic content, live sessions, and practical guides built by the Igny8 team."
/>
</section>
<section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-3 gap-6">
{articles.map((article) => (
<article
key={article.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 flex flex-col gap-6"
>
<span className="text-xs uppercase tracking-[0.3em] text-white/40">
{article.date}
</span>
<h3 className="text-xl font-semibold text-white">{article.title}</h3>
<p className="text-sm text-white/70 leading-relaxed">{article.description}</p>
<div className="rounded-2xl border border-white/10 bg-slate-900 h-40 flex items-center justify-center text-xs text-white/40">
Article cover placeholder (800×600) → /marketing/images/resource-hero.png
</div>
</article>
))}
</section>
<section className="bg-slate-950/70 border-y border-white/5">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
{webinars.map((webinar) => (
<div
key={webinar.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 flex flex-col gap-4"
>
<span className="text-xs uppercase tracking-[0.3em] text-white/40">
{webinar.date}
</span>
<h3 className="text-lg font-semibold text-white">{webinar.title}</h3>
<p className="text-sm text-white/70">{webinar.description}</p>
<button className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold">
Save my seat
</button>
</div>
))}
</div>
</section>
<section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div className="space-y-4">
<SectionHeading
eyebrow="Help center"
title="Get instant answers and product walkthroughs."
description="Dive into documentation, watch quickstart videos, or join live onboarding cohorts."
align="left"
/>
<ul className="space-y-3 text-sm text-white/70">
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
Help Center → `/help`
</li>
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
Documentation → `/help#docs`
</li>
<li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
API Reference → `/partners#api`
</li>
</ul>
</div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-6">
<h3 className="text-2xl font-semibold text-white">Join the Igny8 newsletter</h3>
<p className="text-sm text-white/60">
Monthly insights on AI, SEO, and automation. No fluff—just tactical guidance and event invites.
</p>
<form className="flex flex-col sm:flex-row gap-3">
<input
type="email"
placeholder="you@company.com"
className="flex-1 rounded-full border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400"
/>
<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"
>
Subscribe
</button>
</form>
</div>
</section>
<CTASection
title="Want deeper access? Join our monthly live strategy lab."
description="Reserve your seat for upcoming webinars and office hours to learn how teams automate their growth pipeline with Igny8."
primaryCta={{ label: "Reserve seat", href: "/contact" }}
secondaryCta={{ label: "Browse articles", href: "/resources" }}
/>
</div>
);
};
export default Resources;

148
frontend/src/marketing/pages/Solutions.tsx Normal file
View File

@@ -0,0 +1,148 @@
import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
const personas = [
{
name: "Publishers & Media",
pains: [
"Monthly content quotas and strict editorial standards.",
"Need faster research without sacrificing topical authority.",
"Multiple brands and verticals competing for attention.",
],
outcomes: [
"Launch keyword → content automation that protects brand voice.",
"Keep editors in control with approvals and Thinker playbooks.",
"Automate image generation and WordPress publishing by site.",
],
image: "solutions-publisher.png",
},
{
name: "Agencies & Consultancies",
pains: [
"Manual reporting and slow client deliverables.",
"Disjointed tool stack for research, writing, and visuals.",
"Scaling teams across time zones with consistent quality.",
],
outcomes: [
"Shared workspaces for each client with automation templates.",
"Real-time dashboards to prove impact and showcase velocity.",
"Reusable Thinker libraries to standardize tone and strategy.",
],
image: "solutions-agency.png",
},
{
name: "In-house Marketing Teams",
pains: [
"Demand for multi-channel content with lean resources.",
"Difficulty aligning SEO, content, and creative workflows.",
"Pressure to report results to leadership quickly.",
],
outcomes: [
"Automated pipeline from keyword intake to published content.",
"Dashboards that unite SEO, writers, designers, and leadership.",
"Insights to reallocate focus when campaigns spike or drop.",
],
image: "solutions-inhouse.png",
},
];
const Solutions: React.FC = () => {
return (
<div className="bg-[#050913] text-white">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
<SectionHeading
eyebrow="Solutions"
title="Designed for every team that owns growth."
description="Igny8 adapts to your operating model—agency, publisher, or in-house. Automate repetitive work, keep strategy centralized, and connect every team to outcomes."
/>
</section>
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
{personas.map((persona) => (
<div
key={persona.name}
className="rounded-3xl border border-white/10 bg-white/5 p-10 md:p-16 grid grid-cols-1 lg:grid-cols-3 gap-12"
>
<div className="lg:col-span-1 space-y-4">
<span className="text-xs uppercase tracking-[0.3em] text-white/50">
Persona
</span>
<h3 className="text-2xl font-semibold">{persona.name}</h3>
<div className="rounded-2xl border border-white/10 bg-slate-900 overflow-hidden">
<img
src={`/marketing/images/${persona.image}`}
alt={`${persona.name} workflow`}
className="w-full h-full object-cover"
/>
</div>
</div>
<div className="space-y-6">
<h4 className="text-sm uppercase tracking-[0.3em] text-white/40">
Pain points
</h4>
<ul className="space-y-4 text-sm text-white/70">
{persona.pains.map((pain) => (
<li key={pain} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-rose-300" />
{pain}
</li>
))}
</ul>
</div>
<div className="space-y-6">
<h4 className="text-sm uppercase tracking-[0.3em] text-white/40">
Outcomes with Igny8
</h4>
<ul className="space-y-4 text-sm text-white/70">
{persona.outcomes.map((outcome) => (
<li key={outcome} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
{outcome}
</li>
))}
</ul>
</div>
</div>
))}
</section>
<section className="bg-slate-950/70 border-y border-white/5">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-3 gap-8">
{[
{
metric: "3.2×",
label: "Average lift in organic traffic within 90 days.",
},
{
metric: "48%",
label: "Reduction in time-to-publish from keyword discovery.",
},
{
metric: "4 tools",
label: "Average number of point solutions replaced by Igny8.",
},
].map((item) => (
<div
key={item.metric}
className="rounded-3xl border border-white/10 bg-white/5 p-8 text-center space-y-4"
>
<div className="text-4xl font-semibold">{item.metric}</div>
<p className="text-sm text-white/60">{item.label}</p>
</div>
))}
</div>
</section>
<CTASection
title="Let’s tailor Igny8 to your growth targets."
description="Book a session with our team to map Igny8 to your use cases. We’ll uncover ROI, automation recommendations, and the fastest path to value."
primaryCta={{ label: "Talk to sales", href: "/contact" }}
secondaryCta={{ label: "See pricing", href: "/pricing" }}
/>
</div>
);
};
export default Solutions;

114
frontend/src/marketing/pages/Tour.tsx Normal file
View File

@@ -0,0 +1,114 @@
import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
const tourSteps = [
{
title: "Kick off in the Dashboard",
description:
"Get instant visibility into automation coverage, credit usage, and pipeline health with filters for every site and team.",
image: "tour-dash.png",
},
{
title: "Research in Planner",
description:
"Explore the global keyword graph, build clustering blueprints, and score opportunities with AI to set your roadmap.",
image: "tour-planner.png",
},
{
title: "Generate briefs and drafts in Writer",
description:
"Create detailed briefs, assign tasks, and produce on-brand drafts tuned to your tone, format, and competitive insights.",
image: "tour-writer.png",
},
{
title: "Automate delivery",
description:
"Configure recipes that move keywords to ideas, content, and imagery. Publish to WordPress or notify your CMS automatically.",
image: "tour-automation.png",
},
];
const Tour: React.FC = () => {
return (
<div className="bg-[#050913] text-white">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
<SectionHeading
eyebrow="Guided Tour"
title="Experience the entire Igny8 journey in minutes."
description="Walk through the workflow that moves market intelligence into production-ready content. Each step builds toward an automated growth flywheel."
/>
<div className="rounded-3xl border border-white/10 bg-white/5 p-8">
<div className="aspect-video rounded-2xl border border-white/10 bg-slate-900 flex items-center justify-center text-white/40 text-sm">
Video walkthrough placeholder (embed demo or Loom)
</div>
</div>
</section>
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
{tourSteps.map((step, index) => (
<div
key={step.title}
className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${index % 2 === 1 ? "lg:flex-row-reverse" : ""}`}
>
<div className="space-y-4">
<span className="text-xs uppercase tracking-[0.3em] text-white/50">
Step {index + 1}
</span>
<h3 className="text-2xl font-semibold">{step.title}</h3>
<p className="text-sm text-white/70 leading-relaxed">{step.description}</p>
</div>
<div className="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
<img
src={`/marketing/images/${step.image}`}
alt={step.title}
className="w-full h-full object-cover"
/>
</div>
</div>
))}
</section>
<section className="bg-slate-950/70 border-y border-white/5">
<div className="max-w-6xl mx-auto px-6 py-24 space-y-10">
<SectionHeading
eyebrow="Automation recipes"
title="Pre-built workflows you can launch on day one."
description="Activate automation templates or customize them in minutes. Igny8 tracks dependencies, statuses, and handoffs."
/>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-white/70">
{[
{ name: "Keywords → Ideas", time: "Nightly", highlight: "Targets new opportunities" },
{ name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically" },
{ name: "Tasks → Content", time: "Hourly", highlight: "Generate & queue drafts" },
{ name: "Content → Images", time: "On approval", highlight: "Produce branded visuals" },
{ name: "Content → WordPress", time: "Manual launch", highlight: "One-click publish" },
{ name: "SERP Win/Loss Alerts", time: "Real-time", highlight: "Trigger optimizations" },
].map((recipe) => (
<div
key={recipe.name}
className="rounded-3xl border border-white/10 bg-white/5 p-6 space-y-3"
>
<h4 className="text-base font-semibold text-white">{recipe.name}</h4>
<div className="text-xs uppercase tracking-[0.3em] text-white/40">
{recipe.time}
</div>
<p>{recipe.highlight}</p>
</div>
))}
</div>
</div>
</section>
<CTASection
title="See Igny8 in action with a live strategist."
description="Book a walkthrough and we’ll tailor the tour to your stack, data sources, and growth targets."
primaryCta={{ label: "Book live tour", href: "/contact" }}
secondaryCta={{ label: "Start free", href: "https://app.igny8.com/signup" }}
/>
</div>
);
};
export default Tour;

96
frontend/src/marketing/pages/Waitlist.tsx Normal file
View File

@@ -0,0 +1,96 @@
import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
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 (
<div className="bg-[#050913] text-white">
<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 border-white/10 bg-white/5 p-10 space-y-6">
<h3 className="text-lg font-semibold text-white">Join the waitlist</h3>
<p className="text-sm text-white/70">
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-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400"
/>
<input
type="email"
placeholder="Work email"
className="w-full rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400"
/>
<textarea
rows={4}
placeholder="Tell us about your current workflow and why you're excited."
className="w-full rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400 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"
>
Join waitlist
</button>
</form>
</div>
<div className="space-y-6">
<div className="rounded-3xl border border-white/10 bg-white/5 p-8 space-y-4">
<h4 className="text-lg font-semibold text-white">What’s coming</h4>
<ul className="space-y-3 text-sm text-white/70">
{roadmapItems.map((item) => (
<li key={item.title} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
<div>
<div className="font-semibold text-white">{item.title}</div>
<div>{item.description}</div>
</div>
</li>
))}
</ul>
</div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-8 text-sm text-white/70 space-y-3">
<h4 className="text-lg font-semibold text-white">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;