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

Update Solutions.tsx

Browse Source
This commit is contained in:
Desktop
2025-11-14 02:33:45 +05:00
parent bf5d8246af
commit 75d3da8669
1 changed files with 355 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

501
frontend/src/marketing/pages/Solutions.tsx
View File

@@ -1,170 +1,379 @@
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",
},
];
import { Link } from "react-router-dom";
import {
RocketLaunchIcon,
ChatBubbleLeftRightIcon,
ChartBarIcon,
DocumentTextIcon,
SparklesIcon,
UserGroupIcon,
PhotoIcon,
BoltIcon,
ArrowTrendingUpIcon,
ClockIcon,
WrenchScrewdriverIcon,
ExclamationTriangleIcon,
CheckCircleIcon,
} from "@heroicons/react/24/outline";
const Solutions: 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 personas = [
{
name: "Publishers & Media",
description: "Scale content production while maintaining editorial standards and brand voice across multiple verticals.",
pains: [
"Monthly content quotas and strict editorial standards",
"Need faster research without sacrificing topical authority",
"Multiple brands and verticals competing for attention",
"Manual image sourcing and WordPress publishing bottlenecks",
],
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",
],
color: "from-[#0693e3]/5 to-white",
borderColor: "border-[#0693e3]/20",
iconColor: "from-[#0693e3] to-[#0472b8]",
painColor: "bg-rose-500",
outcomeColor: "bg-[#0693e3]",
},
{
name: "Agencies & Consultancies",
description: "Deliver consistent, high-quality content at scale across client accounts with unified workflows.",
pains: [
"Manual reporting and slow client deliverables",
"Disjointed tool stack for research, writing, and visuals",
"Scaling teams across time zones with consistent quality",
"Client-specific brand guidelines and tone management",
],
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",
],
color: "from-[#0bbf87]/5 to-white",
borderColor: "border-[#0bbf87]/20",
iconColor: "from-[#0bbf87] to-[#08966b]",
painColor: "bg-rose-500",
outcomeColor: "bg-[#0bbf87]",
},
{
name: "In-house Marketing Teams",
description: "Unify SEO, content, and creative workflows to accelerate output with limited resources.",
pains: [
"Demand for multi-channel content with lean resources",
"Difficulty aligning SEO, content, and creative workflows",
"Pressure to report results to leadership quickly",
"Tool sprawl creating visibility gaps",
],
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",
],
color: "from-[#5d4ae3]/5 to-white",
borderColor: "border-[#5d4ae3]/20",
iconColor: "from-[#5d4ae3] to-[#3a2f94]",
painColor: "bg-rose-500",
outcomeColor: "bg-[#5d4ae3]",
},
];
const useCases = [
{
title: "Keyword Research",
description: "Discover high-opportunity keywords from a global database with real-time volumes and difficulty scores.",
icon: ChartBarIcon,
color: "from-[#0693e3] to-[#0472b8]",
},
{
title: "Content Briefs",
description: "Generate comprehensive briefs with outlines, talking points, and internal link suggestions.",
icon: DocumentTextIcon,
color: "from-[#0bbf87] to-[#08966b]",
},
{
title: "Content Writing",
description: "Create long-form articles aligned to your brand voice, compliance rules, and target SERP.",
icon: SparklesIcon,
color: "from-[#ff7a00] to-[#cc5f00]",
},
{
title: "Cluster Analysis",
description: "AI-powered semantic clustering to group related keywords and build topical authority maps.",
icon: UserGroupIcon,
color: "from-[#5d4ae3] to-[#3a2f94]",
},
{
title: "Image Generation",
description: "AI-generated featured and in-article images based on your content with brand consistency.",
icon: PhotoIcon,
color: "from-[#0693e3] to-[#5d4ae3]",
},
{
title: "Workflow Automation",
description: "End-to-end automation from keywords to published content with intelligent handoffs.",
icon: BoltIcon,
color: "from-[#0bbf87] to-[#0693e3]",
},
];
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="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."
/>
<div className="bg-white">
{/* LIGHT 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">
<h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
Designed for teams that operate at scale.
</h1>
<p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
IGNY8 adapts to agencies, publishers, and in-house teams. Automate repetitive work, unify strategy, and accelerate content velocity with AI.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
{renderCta(
{ label: "See use cases", href: "#use-cases" },
"inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
)}
{renderCta(
{ label: "Talk to sales", href: "/contact" },
"inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[#0693e3] hover:text-[#0693e3] transition"
)}
</div>
</div>
</section>
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
{personas.map((persona, 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];
return (
<div
key={persona.name}
className={`rounded-3xl border-2 ${gradient.border} bg-gradient-to-br ${gradient.bg} p-10 md:p-16 grid grid-cols-1 lg:grid-cols-3 gap-12 hover:shadow-xl transition-all`}
>
<div className="lg:col-span-1 space-y-4">
<span className="text-xs uppercase tracking-[0.3em] text-slate-500">
Persona
</span>
<h3 className="text-2xl font-semibold">{persona.name}</h3>
<div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner">
<img
src={`/marketing/images/${persona.image}`}
alt={`${persona.name} workflow`}
className="w-full h-full object-cover"
/>
{/* PERSONAS SECTIONS */}
{personas.map((persona, index) => (
<section key={persona.name} className={`py-24 bg-gradient-to-b ${persona.color}`}>
<div className="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16">
{/* Left: Persona Badge & Info */}
<div className="space-y-6">
<div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white border-2 border-slate-200 shadow-sm">
<div className={`size-3 rounded-full bg-gradient-to-br ${persona.iconColor}`} />
<span className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
Persona
</span>
</div>
<div>
<h3 className="text-3xl md:text-4xl font-bold text-slate-900 mb-3">
{persona.name}
</h3>
<p className="text-lg text-slate-600 leading-relaxed">
{persona.description}
</p>
</div>
</div>
<div className="space-y-6">
<h4 className="text-sm uppercase tracking-[0.3em] text-rose-600 font-semibold flex items-center gap-2">
<span className="size-1.5 rounded-full bg-rose-400"></span>
Pain points
</h4>
<ul className="space-y-4 text-sm text-slate-600">
{persona.pains.map((pain) => (
<li key={pain} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-rose-400 shadow-sm" />
{pain}
{/* Middle: Pain Points */}
<div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
<div className="flex items-center gap-2 mb-6">
<ExclamationTriangleIcon className="h-5 w-5 text-rose-500" />
<h4 className="text-sm uppercase tracking-[0.2em] text-rose-600 font-semibold">
Pain Points
</h4>
</div>
<ul className="space-y-4">
{persona.pains.map((pain, i) => (
<li key={i} className="flex gap-3 text-slate-700">
<span className={`mt-1.5 size-2 rounded-full ${persona.painColor} shadow-sm flex-shrink-0`} />
<span>{pain}</span>
</li>
))}
</ul>
</div>
<div className="space-y-6">
<h4 className="text-sm uppercase tracking-[0.3em] text-[#0693e3] font-semibold flex items-center gap-2">
<span className="size-1.5 rounded-full bg-[#0693e3]"></span>
Outcomes with Igny8
</h4>
<ul className="space-y-4 text-sm text-slate-600">
{persona.outcomes.map((outcome, outcomeIdx) => {
const outcomeColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]"];
return (
<li key={outcome} className="flex gap-3">
<span className={`mt-1 size-1.5 rounded-full ${outcomeColors[outcomeIdx % outcomeColors.length]} shadow-sm`} />
{outcome}
</li>
);
})}
{/* Right: IGNY8 Outcomes */}
<div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
<div className="flex items-center gap-2 mb-6">
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`}>
IGNY8 Outcomes
</h4>
</div>
<ul className="space-y-4">
{persona.outcomes.map((outcome, i) => (
<li key={i} className="flex gap-3 text-slate-700">
<span className={`mt-1.5 size-2 rounded-full ${persona.outcomeColor} shadow-sm flex-shrink-0`} />
<span>{outcome}</span>
</li>
))}
</ul>
</div>
</div>
);
})}
</section>
</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-3 gap-8">
{[
{
metric: "3.2×",
label: "Average lift in organic traffic within 90 days.",
color: "border-[#0693e3]/40",
gradient: "from-[#0693e3]/10 to-white",
textColor: "text-[#0693e3]",
},
{
metric: "48%",
label: "Reduction in time-to-publish from keyword discovery.",
color: "border-[#0bbf87]/40",
gradient: "from-[#0bbf87]/10 to-white",
textColor: "text-[#0bbf87]",
},
{
metric: "4 tools",
label: "Average number of point solutions replaced by Igny8.",
color: "border-[#ff7a00]/40",
gradient: "from-[#ff7a00]/10 to-white",
textColor: "text-[#ff7a00]",
},
].map((item) => (
<div
key={item.metric}
className={`rounded-3xl border-2 ${item.color} bg-gradient-to-br ${item.gradient} p-8 text-center space-y-4 hover:shadow-xl transition-all hover:-translate-y-1`}
>
<div className={`text-4xl font-semibold ${item.textColor}`}>{item.metric}</div>
<p className="text-sm text-slate-600">{item.label}</p>
</div>
))}
{/* BENEFITS STATISTICS SECTION */}
<section className="py-24 bg-gradient-to-b from-white via-slate-50/30 to-white">
<div className="max-w-6xl mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[
{
metric: "3.2×",
label: "organic lift",
description: "Average lift in organic traffic within 90 days",
icon: ArrowTrendingUpIcon,
color: "from-[#0693e3] to-[#0472b8]",
glow: "shadow-[#0693e3]/30",
},
{
metric: "48%",
label: "reduction in time to publish",
description: "Faster time-to-publish from keyword discovery",
icon: ClockIcon,
color: "from-[#0bbf87] to-[#08966b]",
glow: "shadow-[#0bbf87]/30",
},
{
metric: "4 tools",
label: "replaced",
description: "Average number of point solutions replaced by Igny8",
icon: WrenchScrewdriverIcon,
color: "from-[#ff7a00] to-[#cc5f00]",
glow: "shadow-[#ff7a00]/30",
},
].map((stat, index) => {
const Icon = stat.icon;
return (
<div
key={index}
className="relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 text-center space-y-4 hover:shadow-2xl hover:-translate-y-1 transition-all group"
>
{/* Glow effect */}
<div className={`absolute -inset-1 bg-gradient-to-br ${stat.color} rounded-3xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity -z-10 ${stat.glow}`} />
{/* Icon */}
<div className={`inline-flex size-16 rounded-2xl bg-gradient-to-br ${stat.color} items-center justify-center text-white shadow-lg mb-2`}>
<Icon className="h-8 w-8" />
</div>
{/* Metric */}
<div className={`text-5xl md:text-6xl font-bold bg-gradient-to-br ${stat.color} bg-clip-text text-transparent`}>
{stat.metric}
</div>
{/* Label */}
<div className="text-lg font-semibold text-slate-900">
{stat.label}
</div>
{/* Description */}
<p className="text-sm text-slate-600">
{stat.description}
</p>
</div>
);
})}
</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" }}
/>
{/* USE CASES OVERVIEW */}
<section id="use-cases" className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
Use Cases
</h2>
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
Practical applications that help teams scale content production and accelerate growth
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{useCases.map((useCase, index) => {
const Icon = useCase.icon;
return (
<div
key={useCase.title}
className="relative rounded-2xl border-2 border-slate-200 bg-white p-6 space-y-4 hover:shadow-xl hover:-translate-y-1 transition-all group"
>
{/* Icon */}
<div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${useCase.color} items-center justify-center text-white shadow-md`}>
<Icon className="h-6 w-6" />
</div>
{/* Title */}
<h3 className="text-xl font-semibold text-slate-900">
{useCase.title}
</h3>
{/* Description */}
<p className="text-sm text-slate-600 leading-relaxed">
{useCase.description}
</p>
{/* Subtle gradient on hover */}
<div className={`absolute -inset-0.5 bg-gradient-to-br ${useCase.color} rounded-2xl opacity-0 group-hover:opacity-10 blur transition-opacity -z-10`} />
</div>
);
})}
</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">
Start automating your content engine today.
</h2>
<p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
Book a strategy session or start a trial to explore IGNY8 for your team.
</p>
<div className="flex flex-col sm:flex-row gap-5 justify-center">
<a
href="https://app.igny8.com/signup"
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" />
Start free
</a>
<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" />
Talk to sales
</Link>
</div>
</div>
</section>
</div>
);
};
export default Solutions;