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

design

Browse Source
This commit is contained in:
Desktop
2025-11-14 03:40:32 +05:00
parent 02e15a9046
commit 99b35d7b3a
2 changed files with 367 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
frontend/src/marketing/pages/CaseStudies.tsx
View File

@@ -1,65 +1,103 @@
import React from "react"; import React from "react";
import SectionHeading from "../components/SectionHeading"; import { Link } from "react-router-dom";
import CTASection from "../components/CTASection"; import {
RocketLaunchIcon,
const caseStudies = [ ChatBubbleLeftRightIcon,
{ ArrowRightIcon,
company: "Lumen Publishing", CheckCircleIcon,
headline: "From 40 to 220 articles/month with 3× SERP visibility.", } from "@heroicons/react/24/outline";
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 = () => { 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 ( return (
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900"> <div className="bg-white">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16"> {/* HERO SECTION */}
<SectionHeading <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
eyebrow="Proof" <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
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="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>
<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) => { {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 = [ const metricColors = [
{ border: "border-[#0693e3]/30", bg: "from-[#0693e3]/10 to-white", text: "text-[#0693e3]" }, { 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]" }, { border: "border-[#0bbf87]/30", bg: "from-[#0bbf87]/10 to-white", text: "text-[#0bbf87]" },
@@ -68,26 +106,26 @@ const CaseStudies: React.FC = () => {
return ( return (
<div <div
key={cs.company} 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"> <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} {cs.company}
</span> </span>
<h3 className="text-2xl font-semibold text-slate-900">{cs.headline}</h3> <h3 className="text-3xl md:text-4xl font-bold text-slate-900">{cs.headline}</h3>
<p className="text-sm text-slate-600 leading-relaxed">{cs.summary}</p> <p className="text-base text-slate-600 leading-relaxed">{cs.summary}</p>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4 pt-4">
{cs.metrics.map((metric, metricIdx) => { {cs.metrics.map((metric, metricIdx) => {
const metricColor = metricColors[metricIdx % metricColors.length]; const metricColor = metricColors[metricIdx % metricColors.length];
return ( return (
<div <div
key={metric.label} 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} {metric.value}
</div> </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} {metric.label}
</div> </div>
</div> </div>
@@ -95,62 +133,99 @@ const CaseStudies: React.FC = () => {
})} })}
</div> </div>
</div> </div>
<div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner"> <div className="relative">
<img <div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-lg">
src={`/marketing/images/${cs.image}`} <img
alt={`${cs.company} case study`} src={`/marketing/images/${cs.image}`}
className="w-full h-full object-cover" 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>
</div> </div>
); );
})} })}
</section> </section>
<section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20"> {/* RESULTS & ADVISORY BOARD */}
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12"> <section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
<div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 to-white p-8 space-y-4"> <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2"> <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">
<span className="size-2 rounded-full bg-[#0693e3]"></span> <div className="flex items-center gap-3">
Results you can expect <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
</h4> <CheckCircleIcon className="h-6 w-6" />
<ul className="space-y-3 text-sm text-slate-600"> </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: "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: "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]" }, { 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"> <li key={item.text} className="flex gap-3">
<span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} /> <span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
{item.text} <span>{item.text}</span>
</li> </li>
))} ))}
</ul> </ul>
</div> </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"> <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">
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2"> <div className="flex items-center gap-3">
<span className="size-2 rounded-full bg-[#0bbf87]"></span> <div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
Customer advisory board <CheckCircleIcon className="h-6 w-6" />
</h4> </div>
<p> <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. 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> </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 Join the CAB waitlist
<ArrowRightIcon className="h-4 w-4" />
</button> </button>
</div> </div>
</div> </div>
</section> </section>
<CTASection {/* FINAL CTA */}
title="Let’s document your Igny8 success story next." <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
description="Share your goals and we’ll map an automation blueprint specific to your team, then track and celebrate the wins together." {/* Radial glow */}
primaryCta={{ label: "Book strategy session", href: "/contact" }} <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
secondaryCta={{ label: "Download case study pack", href: "/resources" }}
/> <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> </div>
); );
}; };
export default CaseStudies; export default CaseStudies;

291
frontend/src/marketing/pages/Partners.tsx
View File

@@ -1,105 +1,185 @@
import React from "react"; import React from "react";
import SectionHeading from "../components/SectionHeading"; import { Link } from "react-router-dom";
import CTASection from "../components/CTASection"; import {
RocketLaunchIcon,
const tiers = [ ChatBubbleLeftRightIcon,
{ ArrowRightIcon,
title: "Certified Agency", CheckCircleIcon,
benefits: [ CodeBracketIcon,
"Co-branded marketing assets and listing in partner directory.", WrenchScrewdriverIcon,
"Dedicated partner manager and quarterly business reviews.", } from "@heroicons/react/24/outline";
"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 = () => { 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 ( return (
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900"> <div className="bg-white">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16"> {/* HERO SECTION */}
<SectionHeading <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
eyebrow="Partners" <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
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="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>
<section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-3 gap-8"> {/* PARTNER TIERS */}
{tiers.map((tier, idx) => { <section className="max-w-7xl mx-auto px-6 pb-24">
const colors = [ <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{ border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white", dot: "bg-[#0693e3]" }, {tiers.map((tier, idx) => {
{ border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white", dot: "bg-[#0bbf87]" }, const Icon = tier.icon;
{ border: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white", dot: "bg-[#ff7a00]" }, return (
]; <div
const colorScheme = colors[idx % colors.length]; key={tier.title}
return ( 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 >
key={tier.title} <div className="flex items-center gap-4">
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`} <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" />
<span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold"> </div>
Program <div>
</span> <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">
<h3 className="text-xl font-semibold text-slate-900">{tier.title}</h3> Program
<ul className="space-y-3 text-sm text-slate-600"> </span>
{tier.benefits.map((benefit, benefitIdx) => { <h3 className="text-2xl font-bold text-slate-900">{tier.title}</h3>
const benefitColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"]; </div>
return ( </div>
<li key={benefit} className="flex gap-3"> <p className="text-sm text-slate-600 font-medium">{tier.description}</p>
<span className={`mt-1 size-1.5 rounded-full ${benefitColors[benefitIdx % benefitColors.length]} shadow-sm`} /> <ul className="space-y-4 text-sm text-slate-700 flex-1">
{benefit} {tier.benefits.map((benefit, benefitIdx) => {
</li> const dotColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
); return (
})} <li key={benefit} className="flex gap-3">
</ul> <span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />
</div> <span>{benefit}</span>
); </li>
})} );
})}
</ul>
</div>
);
})}
</div>
</section> </section>
<section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20"> {/* API & INTEGRATIONS + PARTNER RESOURCES */}
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-12"> <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"> <div className="space-y-6">
<SectionHeading <div className="flex items-center gap-3 mb-4">
eyebrow="API & integrations" <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
title="Embed Igny8 intelligence into your workflows." <CodeBracketIcon className="h-6 w-6" />
description="Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting." </div>
align="left" <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">
<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 & Integrations
API docs placeholder (download at `/marketing/images/api-docs.png`, 1100×720). </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> </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"> {/* Right: Partner Resources */}
<span className="size-2 rounded-full bg-[#0bbf87]"></span> <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">
Partner resources <div className="flex items-center gap-3">
</h4> <div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
<ul className="space-y-4 text-sm text-slate-600"> <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: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[#0693e3]" },
{ text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[#0bbf87]" }, { 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]" }, { 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"> <li key={item.text} className="flex gap-3">
<span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} /> <span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
{item.text} <span>{item.text}</span>
</li> </li>
))} ))}
</ul> </ul>
@@ -107,15 +187,40 @@ const Partners: React.FC = () => {
</div> </div>
</section> </section>
<CTASection {/* FINAL CTA */}
title="Become an Igny8 partner." <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
description="Apply today to co-create automations, launch integrations, and grow with our shared go-to-market engine." {/* Radial glow */}
primaryCta={{ label: "Apply now", href: "/contact" }} <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
secondaryCta={{ label: "Download partner deck", href: "/marketing/images/partner-program.png" }}
/> <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> </div>
); );
}; };
export default Partners; export default Partners;