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

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

@@ -1,170 +1,379 @@
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,
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 = [ const personas = [
{ {
name: "Publishers & Media", name: "Publishers & Media",
description: "Scale content production while maintaining editorial standards and brand voice across multiple verticals.",
pains: [ pains: [
"Monthly content quotas and strict editorial standards.", "Monthly content quotas and strict editorial standards",
"Need faster research without sacrificing topical authority.", "Need faster research without sacrificing topical authority",
"Multiple brands and verticals competing for attention.", "Multiple brands and verticals competing for attention",
"Manual image sourcing and WordPress publishing bottlenecks",
], ],
outcomes: [ outcomes: [
"Launch keyword → content automation that protects brand voice.", "Launch keyword → content automation that protects brand voice",
"Keep editors in control with approvals and Thinker playbooks.", "Keep editors in control with approvals and Thinker playbooks",
"Automate image generation and WordPress publishing by site.", "Automate image generation and WordPress publishing by site",
], ],
image: "solutions-publisher.png", 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", name: "Agencies & Consultancies",
description: "Deliver consistent, high-quality content at scale across client accounts with unified workflows.",
pains: [ pains: [
"Manual reporting and slow client deliverables.", "Manual reporting and slow client deliverables",
"Disjointed tool stack for research, writing, and visuals.", "Disjointed tool stack for research, writing, and visuals",
"Scaling teams across time zones with consistent quality.", "Scaling teams across time zones with consistent quality",
"Client-specific brand guidelines and tone management",
], ],
outcomes: [ outcomes: [
"Shared workspaces for each client with automation templates.", "Shared workspaces for each client with automation templates",
"Real-time dashboards to prove impact and showcase velocity.", "Real-time dashboards to prove impact and showcase velocity",
"Reusable Thinker libraries to standardize tone and strategy.", "Reusable Thinker libraries to standardize tone and strategy",
], ],
image: "solutions-agency.png", 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", name: "In-house Marketing Teams",
description: "Unify SEO, content, and creative workflows to accelerate output with limited resources.",
pains: [ pains: [
"Demand for multi-channel content with lean resources.", "Demand for multi-channel content with lean resources",
"Difficulty aligning SEO, content, and creative workflows.", "Difficulty aligning SEO, content, and creative workflows",
"Pressure to report results to leadership quickly.", "Pressure to report results to leadership quickly",
"Tool sprawl creating visibility gaps",
], ],
outcomes: [ outcomes: [
"Automated pipeline from keyword intake to published content.", "Automated pipeline from keyword intake to published content",
"Dashboards that unite SEO, writers, designers, and leadership.", "Dashboards that unite SEO, writers, designers, and leadership",
"Insights to reallocate focus when campaigns spike or drop.", "Insights to reallocate focus when campaigns spike or drop",
], ],
image: "solutions-inhouse.png", 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]",
}, },
]; ];
const Solutions: React.FC = () => {
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"> {/* LIGHT HERO SECTION */}
<SectionHeading <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
eyebrow="Solutions" <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
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="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>
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-12"> {/* PERSONAS SECTIONS */}
{personas.map((persona, idx) => { {personas.map((persona, index) => (
const gradients = [ <section key={persona.name} className={`py-24 bg-gradient-to-b ${persona.color}`}>
{ border: "border-[#0693e3]/40", bg: "from-[#0693e3]/10 via-white to-[#0bbf87]/5" }, <div className="max-w-7xl mx-auto px-6">
{ border: "border-[#0bbf87]/40", bg: "from-[#0bbf87]/10 via-white to-[#ff7a00]/5" }, <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16">
{ border: "border-[#5d4ae3]/40", bg: "from-[#5d4ae3]/10 via-white to-[#0693e3]/5" }, {/* Left: Persona Badge & Info */}
]; <div className="space-y-6">
const gradient = gradients[idx % gradients.length]; <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white border-2 border-slate-200 shadow-sm">
return ( <div className={`size-3 rounded-full bg-gradient-to-br ${persona.iconColor}`} />
<div <span className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
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 Persona
</span> </span>
<h3 className="text-2xl font-semibold">{persona.name}</h3> </div>
<div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner"> <div>
<img <h3 className="text-3xl md:text-4xl font-bold text-slate-900 mb-3">
src={`/marketing/images/${persona.image}`} {persona.name}
alt={`${persona.name} workflow`} </h3>
className="w-full h-full object-cover" <p className="text-lg text-slate-600 leading-relaxed">
/> {persona.description}
</p>
</div> </div>
</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"> {/* Middle: Pain Points */}
<span className="size-1.5 rounded-full bg-rose-400"></span> <div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
Pain points <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> </h4>
<ul className="space-y-4 text-sm text-slate-600"> </div>
{persona.pains.map((pain) => ( <ul className="space-y-4">
<li key={pain} className="flex gap-3"> {persona.pains.map((pain, i) => (
<span className="mt-1 size-1.5 rounded-full bg-rose-400 shadow-sm" /> <li key={i} className="flex gap-3 text-slate-700">
{pain} <span className={`mt-1.5 size-2 rounded-full ${persona.painColor} shadow-sm flex-shrink-0`} />
<span>{pain}</span>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
<div className="space-y-6">
<h4 className="text-sm uppercase tracking-[0.3em] text-[#0693e3] font-semibold flex items-center gap-2"> {/* Right: IGNY8 Outcomes */}
<span className="size-1.5 rounded-full bg-[#0693e3]"></span> <div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
Outcomes with Igny8 <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> </h4>
<ul className="space-y-4 text-sm text-slate-600"> </div>
{persona.outcomes.map((outcome, outcomeIdx) => { <ul className="space-y-4">
const outcomeColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]"]; {persona.outcomes.map((outcome, i) => (
return ( <li key={i} className="flex gap-3 text-slate-700">
<li key={outcome} className="flex gap-3"> <span className={`mt-1.5 size-2 rounded-full ${persona.outcomeColor} shadow-sm flex-shrink-0`} />
<span className={`mt-1 size-1.5 rounded-full ${outcomeColors[outcomeIdx % outcomeColors.length]} shadow-sm`} /> <span>{outcome}</span>
{outcome}
</li> </li>
); ))}
})}
</ul> </ul>
</div> </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"> {/* BENEFITS STATISTICS SECTION */}
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-3 gap-8"> <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×", metric: "3.2×",
label: "Average lift in organic traffic within 90 days.", label: "organic lift",
color: "border-[#0693e3]/40", description: "Average lift in organic traffic within 90 days",
gradient: "from-[#0693e3]/10 to-white", icon: ArrowTrendingUpIcon,
textColor: "text-[#0693e3]", color: "from-[#0693e3] to-[#0472b8]",
glow: "shadow-[#0693e3]/30",
}, },
{ {
metric: "48%", metric: "48%",
label: "Reduction in time-to-publish from keyword discovery.", label: "reduction in time to publish",
color: "border-[#0bbf87]/40", description: "Faster time-to-publish from keyword discovery",
gradient: "from-[#0bbf87]/10 to-white", icon: ClockIcon,
textColor: "text-[#0bbf87]", color: "from-[#0bbf87] to-[#08966b]",
glow: "shadow-[#0bbf87]/30",
}, },
{ {
metric: "4 tools", metric: "4 tools",
label: "Average number of point solutions replaced by Igny8.", label: "replaced",
color: "border-[#ff7a00]/40", description: "Average number of point solutions replaced by Igny8",
gradient: "from-[#ff7a00]/10 to-white", icon: WrenchScrewdriverIcon,
textColor: "text-[#ff7a00]", color: "from-[#ff7a00] to-[#cc5f00]",
glow: "shadow-[#ff7a00]/30",
}, },
].map((item) => ( ].map((stat, index) => {
const Icon = stat.icon;
return (
<div <div
key={item.metric} key={index}
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`} 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"
> >
<div className={`text-4xl font-semibold ${item.textColor}`}>{item.metric}</div> {/* Glow effect */}
<p className="text-sm text-slate-600">{item.label}</p> <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>
))}
</div> </div>
</section> </section>
<CTASection {/* USE CASES OVERVIEW */}
title="Let’s tailor Igny8 to your growth targets." <section id="use-cases" className="py-24 bg-white">
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." <div className="max-w-7xl mx-auto px-6">
primaryCta={{ label: "Talk to sales", href: "/contact" }} <div className="text-center mb-16">
secondaryCta={{ label: "See pricing", href: "/pricing" }} <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> </div>
); );
}; };
export default Solutions; export default Solutions;