237 lines
11 KiB
TypeScript
237 lines
11 KiB
TypeScript
import React from "react";
|
||
import { Link } from "react-router-dom";
|
||
import {
|
||
RocketLaunchIcon,
|
||
ChatBubbleLeftRightIcon,
|
||
ArrowRightIcon,
|
||
CheckCircleIcon,
|
||
} from "@heroicons/react/24/outline";
|
||
import SEO from "../components/SEO";
|
||
import { getMetaTags } from "../config/metaTags";
|
||
|
||
const CaseStudies: React.FC = () => {
|
||
const renderCta = (cta: { label: string; href: string }, className: string) => {
|
||
const isExternal = cta.href.startsWith("http");
|
||
|
||
if (isExternal) {
|
||
return (
|
||
<a
|
||
href={cta.href}
|
||
className={className}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
>
|
||
{cta.label}
|
||
</a>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Link to={cta.href} className={className}>
|
||
{cta.label}
|
||
</Link>
|
||
);
|
||
};
|
||
|
||
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",
|
||
iconColor: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
|
||
},
|
||
{
|
||
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",
|
||
iconColor: "from-[var(--color-success)] to-[var(--color-success-dark)]",
|
||
},
|
||
{
|
||
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",
|
||
iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<SEO meta={getMetaTags("caseStudies")} />
|
||
<div className="bg-white">
|
||
{/* HERO SECTION */}
|
||
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
|
||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
|
||
|
||
<div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
|
||
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
|
||
Case Studies
|
||
</span>
|
||
<h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
|
||
Stories from teams automating their way to category leadership.
|
||
</h1>
|
||
<p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||
See how publishers, agencies, and SaaS companies transformed their SEO and content operations with Igny8.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CASE STUDIES GRID */}
|
||
<section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
|
||
{caseStudies.map((cs, idx) => {
|
||
const metricColors = [
|
||
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[var(--color-primary)]" },
|
||
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0bbf87]" },
|
||
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
|
||
];
|
||
return (
|
||
<div
|
||
key={cs.company}
|
||
className="rounded-3xl border-2 border-slate-200 bg-white p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all"
|
||
>
|
||
<div className="space-y-6">
|
||
<div className="flex items-center gap-3">
|
||
<div className={`size-12 rounded-xl bg-gradient-to-br ${cs.iconColor} flex items-center justify-center text-white shadow-lg`}>
|
||
<CheckCircleIcon className="h-6 w-6" />
|
||
</div>
|
||
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600">
|
||
{cs.company}
|
||
</span>
|
||
</div>
|
||
<h3 className="text-3xl md:text-4xl font-bold text-slate-900">{cs.headline}</h3>
|
||
<p className="text-base text-slate-600 leading-relaxed">{cs.summary}</p>
|
||
<div className="grid grid-cols-3 gap-4 pt-4">
|
||
{cs.metrics.map((metric, metricIdx) => {
|
||
const metricColor = metricColors[metricIdx % metricColors.length];
|
||
return (
|
||
<div
|
||
key={metric.label}
|
||
className={`rounded-2xl border-2 ${metricColor.border} bg-gradient-to-br ${metricColor.bg} p-5 text-center space-y-2 hover:shadow-lg transition-all`}
|
||
>
|
||
<div className={`text-2xl md:text-3xl font-bold ${metricColor.text}`}>
|
||
{metric.value}
|
||
</div>
|
||
<div className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
|
||
{metric.label}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div className="relative">
|
||
<div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-lg">
|
||
<img
|
||
src={`/marketing/images/${cs.image}`}
|
||
alt={`${cs.company} case study`}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</section>
|
||
|
||
{/* RESULTS & ADVISORY BOARD */}
|
||
<section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
|
||
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
|
||
<div className="flex items-center gap-3">
|
||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
|
||
<CheckCircleIcon className="h-6 w-6" />
|
||
</div>
|
||
<h4 className="text-2xl font-bold text-slate-900">
|
||
Results you can expect
|
||
</h4>
|
||
</div>
|
||
<ul className="space-y-4 text-sm text-slate-700">
|
||
{[
|
||
{ text: "30-60 day onboarding to deploy automation and Thinker governance.", color: "bg-[#0693e3]" },
|
||
{ text: "3-5× increase in content throughput without sacrificing editorial quality.", color: "bg-[#0bbf87]" },
|
||
{ text: "Clear ROI dashboards tying automation to revenue outcomes.", color: "bg-[#ff7a00]" },
|
||
].map((item, index) => (
|
||
<li key={item.text} className="flex gap-3">
|
||
<span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
|
||
<span>{item.text}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
<div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
|
||
<div className="flex items-center gap-3">
|
||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
|
||
<CheckCircleIcon className="h-6 w-6" />
|
||
</div>
|
||
<h4 className="text-2xl font-bold text-slate-900">
|
||
Customer advisory board
|
||
</h4>
|
||
</div>
|
||
<p className="text-base text-slate-700 leading-relaxed">
|
||
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 gap-2 rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
|
||
Join the CAB waitlist
|
||
<ArrowRightIcon className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FINAL CTA */}
|
||
<section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
|
||
{/* Radial glow */}
|
||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
||
|
||
<div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
|
||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight">
|
||
Let's document your Igny8 success story next.
|
||
</h2>
|
||
<p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
|
||
Share your goals and we'll map an automation blueprint specific to your team, then track and celebrate the wins together.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-5 justify-center">
|
||
<Link
|
||
to="/contact"
|
||
className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-10 py-5 text-lg font-bold hover:bg-white/20 hover:border-white/50 transition"
|
||
>
|
||
<ChatBubbleLeftRightIcon className="h-5 w-5" />
|
||
Book strategy session
|
||
</Link>
|
||
<Link
|
||
to="/resources"
|
||
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--color-primary)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
|
||
>
|
||
<RocketLaunchIcon className="h-5 w-5" />
|
||
Download case study pack
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default CaseStudies;
|