design
This commit is contained in:
Desktop
@@ -1,65 +1,103 @@
|
||||
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",
|
||||
},
|
||||
];
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
RocketLaunchIcon,
|
||||
ChatBubbleLeftRightIcon,
|
||||
ArrowRightIcon,
|
||||
CheckCircleIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
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",
|
||||
color: "from-[#0693e3]/10 to-white",
|
||||
borderColor: "border-[#0693e3]/30",
|
||||
},
|
||||
{
|
||||
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",
|
||||
color: "from-[#0bbf87]/10 to-white",
|
||||
borderColor: "border-[#0bbf87]/30",
|
||||
},
|
||||
{
|
||||
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",
|
||||
color: "from-[#5d4ae3]/10 to-white",
|
||||
borderColor: "border-[#5d4ae3]/30",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
|
||||
<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."
|
||||
/>
|
||||
<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>
|
||||
|
||||
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
|
||||
{/* CASE STUDIES GRID */}
|
||||
<section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
|
||||
{caseStudies.map((cs, idx) => {
|
||||
const gradients = [
|
||||
{ border: "border-[#0693e3]/40", bg: "from-[#0693e3]/10 via-white to-[#0bbf87]/5" },
|
||||
{ border: "border-[#0bbf87]/40", bg: "from-[#0bbf87]/10 via-white to-[#ff7a00]/5" },
|
||||
{ border: "border-[#5d4ae3]/40", bg: "from-[#5d4ae3]/10 via-white to-[#0693e3]/5" },
|
||||
];
|
||||
const gradient = gradients[idx % gradients.length];
|
||||
const metricColors = [
|
||||
{ border: "border-[#0693e3]/30", bg: "from-[#0693e3]/10 to-white", text: "text-[#0693e3]" },
|
||||
{ border: "border-[#0bbf87]/30", bg: "from-[#0bbf87]/10 to-white", text: "text-[#0bbf87]" },
|
||||
@@ -68,26 +106,26 @@ const CaseStudies: React.FC = () => {
|
||||
return (
|
||||
<div
|
||||
key={cs.company}
|
||||
className={`rounded-3xl border-2 ${gradient.border} bg-gradient-to-br ${gradient.bg} p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl transition-all`}
|
||||
className={`rounded-3xl border-2 ${cs.borderColor} bg-gradient-to-br ${cs.color} 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">
|
||||
<span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
|
||||
<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>
|
||||
<h3 className="text-2xl font-semibold text-slate-900">{cs.headline}</h3>
|
||||
<p className="text-sm text-slate-600 leading-relaxed">{cs.summary}</p>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<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-4 text-center space-y-2 hover:shadow-lg transition-all`}
|
||||
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-xl font-semibold ${metricColor.text}`}>
|
||||
<div className={`text-2xl md:text-3xl font-bold ${metricColor.text}`}>
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
||||
<div className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
|
||||
{metric.label}
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,62 +133,99 @@ const CaseStudies: React.FC = () => {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner">
|
||||
<img
|
||||
src={`/marketing/images/${cs.image}`}
|
||||
alt={`${cs.company} case study`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<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>
|
||||
{/* Subtle glow */}
|
||||
<div className={`absolute -inset-2 bg-gradient-to-br ${cs.color} rounded-3xl opacity-20 blur-xl -z-10`} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
|
||||
<section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
|
||||
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 to-white p-8 space-y-4">
|
||||
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<span className="size-2 rounded-full bg-[#0693e3]"></span>
|
||||
Results you can expect
|
||||
</h4>
|
||||
<ul className="space-y-3 text-sm text-slate-600">
|
||||
{/* 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-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-8 space-y-6 shadow-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] 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) => (
|
||||
].map((item, index) => (
|
||||
<li key={item.text} className="flex gap-3">
|
||||
<span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} />
|
||||
{item.text}
|
||||
<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-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-10 space-y-4 text-sm text-slate-600">
|
||||
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<span className="size-2 rounded-full bg-[#0bbf87]"></span>
|
||||
Customer advisory board
|
||||
</h4>
|
||||
<p>
|
||||
<div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 via-white to-[#5d4ae3]/5 p-8 space-y-6 shadow-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] 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 rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-5 py-2 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all">
|
||||
<button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] 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>
|
||||
|
||||
<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" }}
|
||||
/>
|
||||
{/* 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-[#0693e3] 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;
|
||||
|
||||
|
||||
@@ -1,105 +1,185 @@
|
||||
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.",
|
||||
],
|
||||
},
|
||||
];
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
RocketLaunchIcon,
|
||||
ChatBubbleLeftRightIcon,
|
||||
ArrowRightIcon,
|
||||
CheckCircleIcon,
|
||||
CodeBracketIcon,
|
||||
WrenchScrewdriverIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
const Partners: 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 tiers = [
|
||||
{
|
||||
title: "Certified Agency",
|
||||
description: "For agencies delivering content services at scale",
|
||||
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",
|
||||
],
|
||||
icon: CheckCircleIcon,
|
||||
color: "from-[#0693e3] to-[#0472b8]",
|
||||
borderColor: "border-[#0693e3]/30",
|
||||
bgColor: "from-[#0693e3]/10 to-white",
|
||||
},
|
||||
{
|
||||
title: "Technology Partner",
|
||||
description: "For platforms building integrations with IGNY8",
|
||||
benefits: [
|
||||
"API access, sandbox environments, and technical documentation",
|
||||
"Joint integration roadmap planning and go-to-market support",
|
||||
"Shared lead programs and launch promotion campaigns",
|
||||
],
|
||||
icon: CodeBracketIcon,
|
||||
color: "from-[#0bbf87] to-[#08966b]",
|
||||
borderColor: "border-[#0bbf87]/30",
|
||||
bgColor: "from-[#0bbf87]/10 to-white",
|
||||
},
|
||||
{
|
||||
title: "Affiliate & Advocate",
|
||||
description: "For individuals and teams referring IGNY8",
|
||||
benefits: [
|
||||
"Performance-based revenue share with lifetime attribution",
|
||||
"Early access to new features and partner community channels",
|
||||
"Custom reporting dashboards to track referred accounts",
|
||||
],
|
||||
icon: RocketLaunchIcon,
|
||||
color: "from-[#ff7a00] to-[#cc5f00]",
|
||||
borderColor: "border-[#ff7a00]/30",
|
||||
bgColor: "from-[#ff7a00]/10 to-white",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
|
||||
<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."
|
||||
/>
|
||||
<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">
|
||||
Partners
|
||||
</span>
|
||||
<h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
|
||||
Grow faster together—build services and solutions on Igny8.
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
Join our partner ecosystem to co-create automations, deliver measurable results, and co-market AI-driven success stories.
|
||||
</p>
|
||||
</div>
|
||||
</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, idx) => {
|
||||
const colors = [
|
||||
{ border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white", dot: "bg-[#0693e3]" },
|
||||
{ border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white", dot: "bg-[#0bbf87]" },
|
||||
{ border: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white", dot: "bg-[#ff7a00]" },
|
||||
];
|
||||
const colorScheme = colors[idx % colors.length];
|
||||
return (
|
||||
<div
|
||||
key={tier.title}
|
||||
className={`rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-8 flex flex-col gap-5 hover:shadow-xl transition-all hover:-translate-y-1`}
|
||||
>
|
||||
<span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
|
||||
Program
|
||||
</span>
|
||||
<h3 className="text-xl font-semibold text-slate-900">{tier.title}</h3>
|
||||
<ul className="space-y-3 text-sm text-slate-600">
|
||||
{tier.benefits.map((benefit, benefitIdx) => {
|
||||
const benefitColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
|
||||
return (
|
||||
<li key={benefit} className="flex gap-3">
|
||||
<span className={`mt-1 size-1.5 rounded-full ${benefitColors[benefitIdx % benefitColors.length]} shadow-sm`} />
|
||||
{benefit}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{/* PARTNER TIERS */}
|
||||
<section className="max-w-7xl mx-auto px-6 pb-24">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{tiers.map((tier, idx) => {
|
||||
const Icon = tier.icon;
|
||||
return (
|
||||
<div
|
||||
key={tier.title}
|
||||
className={`rounded-3xl border-2 ${tier.borderColor} bg-gradient-to-br ${tier.bgColor} p-8 flex flex-col gap-6 hover:shadow-xl hover:-translate-y-1 transition-all`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${tier.color} items-center justify-center text-white shadow-lg`}>
|
||||
<Icon className="h-7 w-7" />
|
||||
</div>
|
||||
<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 mb-2">
|
||||
Program
|
||||
</span>
|
||||
<h3 className="text-2xl font-bold text-slate-900">{tier.title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600 font-medium">{tier.description}</p>
|
||||
<ul className="space-y-4 text-sm text-slate-700 flex-1">
|
||||
{tier.benefits.map((benefit, benefitIdx) => {
|
||||
const dotColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
|
||||
return (
|
||||
<li key={benefit} className="flex gap-3">
|
||||
<span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />
|
||||
<span>{benefit}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
|
||||
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* API & INTEGRATIONS + PARTNER RESOURCES */}
|
||||
<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-12">
|
||||
{/* Left: API & Integrations */}
|
||||
<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-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 to-white p-6 text-sm text-slate-600 shadow-lg">
|
||||
API docs placeholder (download at `/marketing/images/api-docs.png`, 1100×720).
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
|
||||
<CodeBracketIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<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 mb-2">
|
||||
API & Integrations
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">
|
||||
Embed Igny8 intelligence into your workflows.
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-lg text-slate-600 leading-relaxed">
|
||||
Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting.
|
||||
</p>
|
||||
<div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 to-white p-8 shadow-lg">
|
||||
<div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white h-64 flex items-center justify-center text-sm text-slate-400 shadow-inner">
|
||||
API docs placeholder
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-10 space-y-6">
|
||||
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
||||
<span className="size-2 rounded-full bg-[#0bbf87]"></span>
|
||||
Partner resources
|
||||
</h4>
|
||||
<ul className="space-y-4 text-sm text-slate-600">
|
||||
|
||||
{/* Right: Partner Resources */}
|
||||
<div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 via-white to-[#5d4ae3]/5 p-10 space-y-6 shadow-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
|
||||
<WrenchScrewdriverIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<h4 className="text-2xl font-bold text-slate-900">
|
||||
Partner resources
|
||||
</h4>
|
||||
</div>
|
||||
<ul className="space-y-4 text-sm text-slate-700">
|
||||
{[
|
||||
{ text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[#0693e3]" },
|
||||
{ text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[#0bbf87]" },
|
||||
{ text: "Quarterly partner labs to showcase launches and integrations.", color: "bg-[#ff7a00]" },
|
||||
].map((item) => (
|
||||
].map((item, index) => (
|
||||
<li key={item.text} className="flex gap-3">
|
||||
<span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} />
|
||||
{item.text}
|
||||
<span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
|
||||
<span>{item.text}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -107,15 +187,40 @@ const Partners: React.FC = () => {
|
||||
</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" }}
|
||||
/>
|
||||
{/* 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">
|
||||
Become an Igny8 partner.
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
|
||||
Apply today to co-create automations, launch integrations, and grow with our shared go-to-market engine.
|
||||
</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" />
|
||||
Apply now
|
||||
</Link>
|
||||
<a
|
||||
href="/marketing/images/partner-program.png"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] 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 partner deck
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Partners;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user