Marketing Website
This commit is contained in:
Desktop
14
frontend/marketing.html
Normal file
14
frontend/marketing.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Igny8 · AI Growth Engine</title>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#050913]">
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/marketing/index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
39
frontend/src/marketing/MarketingApp.tsx
Normal file
39
frontend/src/marketing/MarketingApp.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import React, { Suspense, lazy } from "react";
|
||||||
|
import { Route, Routes } from "react-router-dom";
|
||||||
|
import MarketingLayout from "./layout/MarketingLayout";
|
||||||
|
import LoadingPage from "./components/LoadingPage";
|
||||||
|
|
||||||
|
const Home = lazy(() => import("./pages/Home"));
|
||||||
|
const Product = lazy(() => import("./pages/Product"));
|
||||||
|
const Solutions = lazy(() => import("./pages/Solutions"));
|
||||||
|
const Pricing = lazy(() => import("./pages/Pricing"));
|
||||||
|
const Tour = lazy(() => import("./pages/Tour"));
|
||||||
|
const Resources = lazy(() => import("./pages/Resources"));
|
||||||
|
const CaseStudies = lazy(() => import("./pages/CaseStudies"));
|
||||||
|
const Partners = lazy(() => import("./pages/Partners"));
|
||||||
|
const Contact = lazy(() => import("./pages/Contact"));
|
||||||
|
const Waitlist = lazy(() => import("./pages/Waitlist"));
|
||||||
|
|
||||||
|
const MarketingApp: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<MarketingLayout>
|
||||||
|
<Suspense fallback={<LoadingPage />}>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/product" element={<Product />} />
|
||||||
|
<Route path="/solutions" element={<Solutions />} />
|
||||||
|
<Route path="/pricing" element={<Pricing />} />
|
||||||
|
<Route path="/tour" element={<Tour />} />
|
||||||
|
<Route path="/resources" element={<Resources />} />
|
||||||
|
<Route path="/case-studies" element={<CaseStudies />} />
|
||||||
|
<Route path="/partners" element={<Partners />} />
|
||||||
|
<Route path="/contact" element={<Contact />} />
|
||||||
|
<Route path="/waitlist" element={<Waitlist />} />
|
||||||
|
</Routes>
|
||||||
|
</Suspense>
|
||||||
|
</MarketingLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MarketingApp;
|
||||||
|
|
||||||
73
frontend/src/marketing/components/CTASection.tsx
Normal file
73
frontend/src/marketing/components/CTASection.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import React from "react";
|
||||||
|
interface CTASectionProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
primaryCta: { label: string; href: string };
|
||||||
|
secondaryCta?: { label: string; href: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
const CTASection: React.FC<CTASectionProps> = ({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
primaryCta,
|
||||||
|
secondaryCta,
|
||||||
|
}) => {
|
||||||
|
const renderAnchor = (label: string, href: string, className: string) => {
|
||||||
|
const isExternal = href.startsWith("http");
|
||||||
|
|
||||||
|
if (isExternal) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={href}
|
||||||
|
href={href}
|
||||||
|
className={className}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a key={href} href={href} className={className}>
|
||||||
|
{label}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-24">
|
||||||
|
<div className="max-w-5xl mx-auto px-6">
|
||||||
|
<div className="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-brand-500/30 via-brand-600/20 to-transparent p-10 md:p-14">
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.12),_transparent_60%)] pointer-events-none" />
|
||||||
|
<div className="relative flex flex-col gap-6">
|
||||||
|
<h3 className="text-3xl md:text-4xl font-semibold text-white leading-tight">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-white/70 text-base md:text-lg max-w-2xl">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
{renderAnchor(
|
||||||
|
primaryCta.label,
|
||||||
|
primaryCta.href,
|
||||||
|
"inline-flex items-center justify-center rounded-full bg-white text-slate-950 px-6 py-3 text-sm md:text-base font-semibold hover:bg-brand-100 transition"
|
||||||
|
)}
|
||||||
|
{secondaryCta && (
|
||||||
|
renderAnchor(
|
||||||
|
secondaryCta.label,
|
||||||
|
secondaryCta.href,
|
||||||
|
"inline-flex items-center justify-center rounded-full border border-white/40 px-6 py-3 text-sm md:text-base font-semibold text-white hover:border-white/60 transition"
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CTASection;
|
||||||
|
|
||||||
49
frontend/src/marketing/components/FeatureGrid.tsx
Normal file
49
frontend/src/marketing/components/FeatureGrid.tsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { ArrowUpRightIcon } from "@heroicons/react/24/outline";
|
||||||
|
|
||||||
|
interface FeatureItem {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
link?: { label: string; href: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FeatureGridProps {
|
||||||
|
features: FeatureItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
|
||||||
|
return (
|
||||||
|
<div className="max-w-6xl mx-auto px-6 py-24">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{features.map((feature) => (
|
||||||
|
<div
|
||||||
|
key={feature.title}
|
||||||
|
className="relative rounded-3xl border border-white/10 bg-gradient-to-br from-white/8 via-transparent to-white/0 p-8 flex flex-col gap-4 group hover:border-brand-400/40 transition"
|
||||||
|
>
|
||||||
|
<div className="size-12 rounded-2xl bg-brand-500/10 border border-brand-500/30 flex items-center justify-center text-brand-200">
|
||||||
|
{feature.icon}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-white">{feature.title}</h3>
|
||||||
|
<p className="text-sm text-white/60 leading-relaxed">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
{feature.link && (
|
||||||
|
<a
|
||||||
|
href={feature.link.href}
|
||||||
|
className="inline-flex items-center gap-2 text-sm font-semibold text-brand-200 hover:text-brand-100"
|
||||||
|
>
|
||||||
|
{feature.link.label}
|
||||||
|
<ArrowUpRightIcon className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
<div className="absolute inset-0 rounded-3xl border border-white/0 group-hover:border-brand-500/30 transition" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FeatureGrid;
|
||||||
|
|
||||||
74
frontend/src/marketing/components/HeroSection.tsx
Normal file
74
frontend/src/marketing/components/HeroSection.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
interface HeroSectionProps {
|
||||||
|
image: string;
|
||||||
|
headline: string;
|
||||||
|
subheadline: string;
|
||||||
|
primaryCta: { label: string; href: string };
|
||||||
|
secondaryCta?: { label: string; href: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
const HeroSection: React.FC<HeroSectionProps> = ({
|
||||||
|
image,
|
||||||
|
headline,
|
||||||
|
subheadline,
|
||||||
|
primaryCta,
|
||||||
|
secondaryCta,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<section className="relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(66,133,244,0.25),_rgba(9,14,26,0.9))]" />
|
||||||
|
<div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center">
|
||||||
|
<div className="flex-1 flex flex-col gap-6">
|
||||||
|
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-brand-200">
|
||||||
|
AI + SEO PLATFORM
|
||||||
|
</span>
|
||||||
|
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
|
||||||
|
{headline}
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-xl">
|
||||||
|
{subheadline}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Link
|
||||||
|
to={primaryCta.href}
|
||||||
|
className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm md:text-base font-semibold transition"
|
||||||
|
>
|
||||||
|
{primaryCta.label}
|
||||||
|
</Link>
|
||||||
|
{secondaryCta && (
|
||||||
|
<Link
|
||||||
|
to={secondaryCta.href}
|
||||||
|
className="inline-flex items-center justify-center rounded-full border border-white/20 px-6 py-3 text-sm md:text-base font-semibold text-white/80 hover:text-white hover:border-white/40 transition"
|
||||||
|
>
|
||||||
|
{secondaryCta.label}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 w-full">
|
||||||
|
<div className="relative rounded-3xl border border-white/10 bg-white/5 shadow-[0_0_60px_rgba(88,166,255,0.1)]">
|
||||||
|
<div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-white/10 via-transparent to-white/0 pointer-events-none" />
|
||||||
|
<img
|
||||||
|
src={`/marketing/images/${image}`}
|
||||||
|
alt="Igny8 dashboard preview"
|
||||||
|
className="w-full h-full object-cover rounded-3xl"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-6 left-6 bg-slate-950/70 backdrop-blur-lg border border-white/10 rounded-2xl px-6 py-4 flex flex-col gap-1">
|
||||||
|
<span className="text-xs uppercase tracking-[0.2em] text-white/50">
|
||||||
|
End-to-end automation
|
||||||
|
</span>
|
||||||
|
<span className="text-lg font-semibold text-white">
|
||||||
|
Keywords ➝ Ideas ➝ Tasks ➝ Content ➝ Images
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HeroSection;
|
||||||
|
|
||||||
15
frontend/src/marketing/components/LoadingPage.tsx
Normal file
15
frontend/src/marketing/components/LoadingPage.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const LoadingPage: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col items-center justify-center bg-slate-950 text-white">
|
||||||
|
<div className="flex items-center gap-3 text-lg font-semibold tracking-wide uppercase">
|
||||||
|
<span className="h-3 w-3 rounded-full bg-brand-500 animate-pulse" />
|
||||||
|
Loading experience…
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoadingPage;
|
||||||
|
|
||||||
39
frontend/src/marketing/components/LogoCloud.tsx
Normal file
39
frontend/src/marketing/components/LogoCloud.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const logos = [
|
||||||
|
"launchpad",
|
||||||
|
"northbeam",
|
||||||
|
"scaleops",
|
||||||
|
"pathfinder",
|
||||||
|
"catalyst",
|
||||||
|
"orbit",
|
||||||
|
];
|
||||||
|
|
||||||
|
const LogoCloud: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-16 bg-slate-950/70 border-y border-white/5">
|
||||||
|
<div className="max-w-5xl mx-auto px-6 flex flex-col gap-6 items-center">
|
||||||
|
<span className="text-xs uppercase tracking-[0.28em] text-white/40">
|
||||||
|
Trusted by modern SEO + content teams
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-wrap justify-center gap-8 md:gap-12">
|
||||||
|
{logos.map((name) => (
|
||||||
|
<div
|
||||||
|
key={name}
|
||||||
|
className="h-8 md:h-10 opacity-70 hover:opacity-100 transition"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={`/marketing/images/logo-${name}.svg`}
|
||||||
|
alt={`${name} logo`}
|
||||||
|
className="h-full w-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LogoCloud;
|
||||||
|
|
||||||
30
frontend/src/marketing/components/MetricsBar.tsx
Normal file
30
frontend/src/marketing/components/MetricsBar.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface Metric {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MetricsBarProps {
|
||||||
|
metrics: Metric[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
|
||||||
|
return (
|
||||||
|
<div className="max-w-5xl mx-auto -mt-12 sm:-mt-16 px-6">
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border border-white/10 bg-slate-950/70 backdrop-blur-2xl p-6">
|
||||||
|
{metrics.map((metric) => (
|
||||||
|
<div key={metric.label} className="text-center sm:text-left">
|
||||||
|
<div className="text-3xl font-semibold text-white">{metric.value}</div>
|
||||||
|
<div className="text-sm uppercase tracking-[0.2em] text-white/50 mt-2">
|
||||||
|
{metric.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MetricsBar;
|
||||||
|
|
||||||
38
frontend/src/marketing/components/SectionHeading.tsx
Normal file
38
frontend/src/marketing/components/SectionHeading.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface SectionHeadingProps {
|
||||||
|
eyebrow?: string;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
align?: "left" | "center";
|
||||||
|
}
|
||||||
|
|
||||||
|
const SectionHeading: React.FC<SectionHeadingProps> = ({
|
||||||
|
eyebrow,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
align = "center",
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`flex flex-col gap-4 ${align === "center" ? "items-center text-center" : "items-start text-left"}`}
|
||||||
|
>
|
||||||
|
{eyebrow && (
|
||||||
|
<span className="inline-flex items-center rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-brand-200">
|
||||||
|
{eyebrow}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight max-w-3xl">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
{description && (
|
||||||
|
<p className="text-white/60 max-w-2xl text-base md:text-lg leading-relaxed">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SectionHeading;
|
||||||
|
|
||||||
41
frontend/src/marketing/components/TestimonialSlider.tsx
Normal file
41
frontend/src/marketing/components/TestimonialSlider.tsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { testimonials } from "../data/testimonials";
|
||||||
|
|
||||||
|
const TestimonialSlider: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="bg-slate-950">
|
||||||
|
<div className="max-w-6xl mx-auto px-6 py-24 space-y-12">
|
||||||
|
<div className="flex flex-col items-center gap-4 text-center">
|
||||||
|
<span className="inline-flex items-center rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-brand-200">
|
||||||
|
Loved by scaling teams
|
||||||
|
</span>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight max-w-2xl">
|
||||||
|
Teams ship more content, capture more demand, and see faster ROI with Igny8.
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{testimonials.map((testimonial) => (
|
||||||
|
<div
|
||||||
|
key={testimonial.name}
|
||||||
|
className="rounded-3xl border border-white/10 bg-white/5 p-8 flex flex-col gap-6 relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="absolute -top-16 left-1/2 -translate-x-1/2 h-32 w-[140%] rounded-[50%] bg-brand-500/10 blur-3xl pointer-events-none" />
|
||||||
|
<p className="text-base text-white/80 leading-relaxed">
|
||||||
|
“{testimonial.quote}”
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col text-sm text-white/60">
|
||||||
|
<span className="font-semibold text-white">{testimonial.name}</span>
|
||||||
|
<span>
|
||||||
|
{testimonial.title} · {testimonial.company}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TestimonialSlider;
|
||||||
|
|
||||||
38
frontend/src/marketing/components/WorkflowSteps.tsx
Normal file
38
frontend/src/marketing/components/WorkflowSteps.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface WorkflowStep {
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WorkflowStepsProps {
|
||||||
|
steps: WorkflowStep[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
|
||||||
|
return (
|
||||||
|
<div className="max-w-6xl mx-auto px-6 py-24">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||||
|
{steps.map((step, index) => (
|
||||||
|
<div
|
||||||
|
key={step.title}
|
||||||
|
className="rounded-3xl border border-white/10 bg-white/5 p-6 flex flex-col gap-4 hover:border-brand-400/40 transition"
|
||||||
|
>
|
||||||
|
<div className="h-12 w-12 rounded-2xl bg-brand-500/10 border border-brand-500/30 flex items-center justify-center font-semibold text-brand-200 text-xl">
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-white leading-snug">
|
||||||
|
{step.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-white/60 leading-relaxed">
|
||||||
|
{step.subtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WorkflowSteps;
|
||||||
|
|
||||||
25
frontend/src/marketing/data/metrics.ts
Normal file
25
frontend/src/marketing/data/metrics.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
export const heroMetrics = [
|
||||||
|
{ label: "Content velocity", value: "6× faster" },
|
||||||
|
{ label: "SERP lift", value: "+132%" },
|
||||||
|
{ label: "Automation coverage", value: "85%" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const workflowSteps = [
|
||||||
|
{
|
||||||
|
title: "Capture search intent",
|
||||||
|
subtitle: "Import keywords or pull from the global database with one click.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Cluster automatically",
|
||||||
|
subtitle: "Group related queries using Igny8 AI to map topical authority.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Generate briefs",
|
||||||
|
subtitle: "Turn clusters into on-brand, SEO-rich content briefs instantly.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Produce content",
|
||||||
|
subtitle: "Draft long-form content tailored to your tone, guidelines, and SERP data.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
42
frontend/src/marketing/data/navLinks.ts
Normal file
42
frontend/src/marketing/data/navLinks.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
export interface NavLinkItem {
|
||||||
|
name: string;
|
||||||
|
path: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const primaryNav: NavLinkItem[] = [
|
||||||
|
{ name: "Product", path: "/product" },
|
||||||
|
{ name: "Solutions", path: "/solutions" },
|
||||||
|
{ name: "Pricing", path: "/pricing" },
|
||||||
|
{ name: "Tour", path: "/tour" },
|
||||||
|
{ name: "Resources", path: "/resources" },
|
||||||
|
{ name: "Case Studies", path: "/case-studies" },
|
||||||
|
{ name: "Partners", path: "/partners" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const footerNavGroups: { title: string; links: NavLinkItem[] }[] = [
|
||||||
|
{
|
||||||
|
title: "Platform",
|
||||||
|
links: [
|
||||||
|
{ name: "Planner", path: "/product#planner" },
|
||||||
|
{ name: "Writer", path: "/product#writer" },
|
||||||
|
{ name: "Automation", path: "/product#automation" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Company",
|
||||||
|
links: [
|
||||||
|
{ name: "Case Studies", path: "/case-studies" },
|
||||||
|
{ name: "Partners", path: "/partners" },
|
||||||
|
{ name: "Contact", path: "/contact" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Resources",
|
||||||
|
links: [
|
||||||
|
{ name: "Help Center", path: "/resources#help" },
|
||||||
|
{ name: "Documentation", path: "/resources#docs" },
|
||||||
|
{ name: "Partner Program", path: "/partners" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
31
frontend/src/marketing/data/testimonials.ts
Normal file
31
frontend/src/marketing/data/testimonials.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
export interface Testimonial {
|
||||||
|
quote: string;
|
||||||
|
name: string;
|
||||||
|
title: string;
|
||||||
|
company: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const testimonials: Testimonial[] = [
|
||||||
|
{
|
||||||
|
quote:
|
||||||
|
"Igny8 replaced four tools for our content team. We now go from keywords to published content in hours, not weeks.",
|
||||||
|
name: "Maria Lopez",
|
||||||
|
title: "Head of Content",
|
||||||
|
company: "ScaleOps",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote:
|
||||||
|
"Cluster automation plus AI writing gave us a 3× lift in organic traffic. Igny8 is an unfair advantage.",
|
||||||
|
name: "James Patel",
|
||||||
|
title: "SEO Director",
|
||||||
|
company: "BrightOrbit",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote:
|
||||||
|
"From briefs to images, everything is automated. Our clients feel the impact every single month.",
|
||||||
|
name: "Lena Morris",
|
||||||
|
title: "Agency Founder",
|
||||||
|
company: "Northbeam Digital",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
22
frontend/src/marketing/index.tsx
Normal file
22
frontend/src/marketing/index.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
import MarketingApp from "./MarketingApp";
|
||||||
|
import "../styles/global.css";
|
||||||
|
|
||||||
|
const container = document.getElementById("root");
|
||||||
|
|
||||||
|
if (!container) {
|
||||||
|
throw new Error("Marketing root element not found");
|
||||||
|
}
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(container);
|
||||||
|
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<BrowserRouter>
|
||||||
|
<MarketingApp />
|
||||||
|
</BrowserRouter>
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
|
|
||||||
158
frontend/src/marketing/layout/MarketingLayout.tsx
Normal file
158
frontend/src/marketing/layout/MarketingLayout.tsx
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link, useLocation } from "react-router-dom";
|
||||||
|
import { primaryNav, footerNavGroups } from "../data/navLinks";
|
||||||
|
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||||
|
|
||||||
|
interface MarketingLayoutProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
|
||||||
|
const [mobileOpen, setMobileOpen] = useState(false);
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const toggleMobile = () => setMobileOpen((prev) => !prev);
|
||||||
|
const closeMobile = () => setMobileOpen(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col bg-[#090E1A] text-white">
|
||||||
|
<header className="sticky top-0 z-[1100] backdrop-blur-xl bg-slate-950/70 border-b border-white/10">
|
||||||
|
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||||
|
<Link to="/" className="flex items-center gap-3" onClick={closeMobile}>
|
||||||
|
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center text-lg font-bold">
|
||||||
|
IG
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-col leading-tight">
|
||||||
|
<span className="font-semibold tracking-wide text-white uppercase">
|
||||||
|
Igny8
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-white/60">AI growth engine</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<nav className="hidden lg:flex items-center gap-8 text-sm font-medium">
|
||||||
|
{primaryNav.map((link) => {
|
||||||
|
const isActive = location.pathname === link.path;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={link.name}
|
||||||
|
to={link.path}
|
||||||
|
className={`transition hover:text-brand-200 ${isActive ? "text-brand-200" : "text-white/70"}`}
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="hidden lg:flex items-center gap-4">
|
||||||
|
<a
|
||||||
|
href="https://app.igny8.com/login"
|
||||||
|
className="text-sm font-medium text-white/70 hover:text-white transition"
|
||||||
|
>
|
||||||
|
Log in
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://app.igny8.com/signup"
|
||||||
|
className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold transition"
|
||||||
|
>
|
||||||
|
Start Free
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="lg:hidden inline-flex items-center justify-center rounded-lg border border-white/10 p-2 text-white/80"
|
||||||
|
onClick={toggleMobile}
|
||||||
|
aria-label="Toggle navigation"
|
||||||
|
>
|
||||||
|
{mobileOpen ? <XMarkIcon className="h-6 w-6" /> : <Bars3Icon className="h-6 w-6" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{mobileOpen && (
|
||||||
|
<div className="lg:hidden border-t border-white/10 bg-slate-950/95 backdrop-blur-xl">
|
||||||
|
<nav className="px-6 py-4 flex flex-col gap-3">
|
||||||
|
{primaryNav.map((link) => (
|
||||||
|
<Link
|
||||||
|
key={link.name}
|
||||||
|
to={link.path}
|
||||||
|
onClick={closeMobile}
|
||||||
|
className="text-sm font-medium text-white/80 hover:text-white transition"
|
||||||
|
>
|
||||||
|
{link.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
<div className="px-6 pb-6 flex flex-col gap-3">
|
||||||
|
<a
|
||||||
|
href="https://app.igny8.com/login"
|
||||||
|
className="text-sm font-medium text-white/70 hover:text-white transition"
|
||||||
|
onClick={closeMobile}
|
||||||
|
>
|
||||||
|
Log in
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://app.igny8.com/signup"
|
||||||
|
className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold transition"
|
||||||
|
onClick={closeMobile}
|
||||||
|
>
|
||||||
|
Start Free
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="flex-1">{children}</main>
|
||||||
|
|
||||||
|
<footer className="bg-slate-950 border-t border-white/10">
|
||||||
|
<div className="max-w-6xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-4 gap-12">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Link to="/" className="inline-flex items-center gap-3">
|
||||||
|
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 flex items-center justify-center text-lg font-bold">
|
||||||
|
IG
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-col leading-tight">
|
||||||
|
<span className="font-semibold tracking-wide text-white uppercase">
|
||||||
|
Igny8
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-white/60">
|
||||||
|
AI + SEO automation suite
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<p className="text-sm text-white/60 max-w-xs">
|
||||||
|
Automate keyword intelligence, clustering, content production, and image creation in one unified growth engine.
|
||||||
|
</p>
|
||||||
|
<div className="text-xs text-white/40">
|
||||||
|
© {new Date().getFullYear()} Igny8 Labs. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{footerNavGroups.map((group) => (
|
||||||
|
<div key={group.title}>
|
||||||
|
<h4 className="text-sm font-semibold text-white uppercase tracking-wide mb-4">
|
||||||
|
{group.title}
|
||||||
|
</h4>
|
||||||
|
<ul className="space-y-3 text-sm text-white/60">
|
||||||
|
{group.links.map((link) => (
|
||||||
|
<li key={link.name}>
|
||||||
|
<Link to={link.path} className="hover:text-white transition">
|
||||||
|
{link.name}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="border-t border-white/10 py-6 px-6 text-center text-xs text-white/30">
|
||||||
|
Built for marketers who automate growth with AI.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MarketingLayout;
|
||||||
|
|
||||||
136
frontend/src/marketing/pages/CaseStudies.tsx
Normal file
136
frontend/src/marketing/pages/CaseStudies.tsx
Normal 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
118
frontend/src/marketing/pages/Contact.tsx
Normal 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
162
frontend/src/marketing/pages/Home.tsx
Normal 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
109
frontend/src/marketing/pages/Partners.tsx
Normal 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
214
frontend/src/marketing/pages/Pricing.tsx
Normal 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
169
frontend/src/marketing/pages/Product.tsx
Normal 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
143
frontend/src/marketing/pages/Resources.tsx
Normal 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
148
frontend/src/marketing/pages/Solutions.tsx
Normal 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
114
frontend/src/marketing/pages/Tour.tsx
Normal 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
96
frontend/src/marketing/pages/Waitlist.tsx
Normal 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;
|
||||||
|
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import { defineConfig } from "vite";
|
import { defineConfig } from "vite";
|
||||||
import react from "@vitejs/plugin-react";
|
import react from "@vitejs/plugin-react";
|
||||||
import svgr from "vite-plugin-svgr";
|
import svgr from "vite-plugin-svgr";
|
||||||
|
import { resolve } from "path";
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig(({ mode }) => {
|
export default defineConfig(({ mode }) => {
|
||||||
@@ -56,6 +57,10 @@ export default defineConfig(({ mode }) => {
|
|||||||
cssCodeSplit: true,
|
cssCodeSplit: true,
|
||||||
// Optimize chunk size
|
// Optimize chunk size
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: resolve(__dirname, "index.html"),
|
||||||
|
marketing: resolve(__dirname, "marketing.html"),
|
||||||
|
},
|
||||||
output: {
|
output: {
|
||||||
// Manual chunk splitting for better code splitting
|
// Manual chunk splitting for better code splitting
|
||||||
manualChunks: (id) => {
|
manualChunks: (id) => {
|
||||||
@@ -129,6 +134,13 @@ export default defineConfig(({ mode }) => {
|
|||||||
return `page-${pageName.toLowerCase()}`;
|
return `page-${pageName.toLowerCase()}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (id.includes('/marketing/')) {
|
||||||
|
const match = id.match(/\/marketing\/([^/]+)/);
|
||||||
|
if (match) {
|
||||||
|
const sectionName = match[1];
|
||||||
|
return `marketing-${sectionName.toLowerCase()}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
// Split icons into separate chunk (lazy load)
|
// Split icons into separate chunk (lazy load)
|
||||||
if (id.includes('/icons/') && id.endsWith('.svg')) {
|
if (id.includes('/icons/') && id.endsWith('.svg')) {
|
||||||
return 'icons';
|
return 'icons';
|
||||||
|
|||||||
Reference in New Issue
Block a user