221 lines
9.9 KiB
TypeScript
221 lines
9.9 KiB
TypeScript
import React from "react";
|
|
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,
|
|
iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
|
|
},
|
|
{
|
|
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,
|
|
iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
|
|
},
|
|
{
|
|
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,
|
|
iconColor: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<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>
|
|
|
|
{/* 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 border-slate-200 bg-white 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.iconColor} 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-[var(--igny8-blue)]", "bg-[var(--igny8-green)]", "bg-[var(--igny8-amber)]", "bg-[var(--igny8-purple)]"];
|
|
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>
|
|
|
|
{/* 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">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] 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-2xl border-2 border-slate-200 bg-white p-8 shadow-sm">
|
|
<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>
|
|
|
|
{/* Right: Partner Resources */}
|
|
<div className="rounded-2xl border-2 border-slate-200 bg-white p-10 space-y-6 shadow-sm">
|
|
<div className="flex items-center gap-3">
|
|
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] 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-[var(--igny8-blue)]" },
|
|
{ text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[var(--igny8-green)]" },
|
|
{ text: "Quarterly partner labs to showcase launches and integrations.", color: "bg-[var(--igny8-amber)]" },
|
|
].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>
|
|
</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">
|
|
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;
|