Update Solutions.tsx
This commit is contained in:
Desktop
@@ -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,
|
||||||
const personas = [
|
ChatBubbleLeftRightIcon,
|
||||||
{
|
ChartBarIcon,
|
||||||
name: "Publishers & Media",
|
DocumentTextIcon,
|
||||||
pains: [
|
SparklesIcon,
|
||||||
"Monthly content quotas and strict editorial standards.",
|
UserGroupIcon,
|
||||||
"Need faster research without sacrificing topical authority.",
|
PhotoIcon,
|
||||||
"Multiple brands and verticals competing for attention.",
|
BoltIcon,
|
||||||
],
|
ArrowTrendingUpIcon,
|
||||||
outcomes: [
|
ClockIcon,
|
||||||
"Launch keyword → content automation that protects brand voice.",
|
WrenchScrewdriverIcon,
|
||||||
"Keep editors in control with approvals and Thinker playbooks.",
|
ExclamationTriangleIcon,
|
||||||
"Automate image generation and WordPress publishing by site.",
|
CheckCircleIcon,
|
||||||
],
|
} from "@heroicons/react/24/outline";
|
||||||
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",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const Solutions: React.FC = () => {
|
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 (
|
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}
|
Persona
|
||||||
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`}
|
</span>
|
||||||
>
|
</div>
|
||||||
<div className="lg:col-span-1 space-y-4">
|
<div>
|
||||||
<span className="text-xs uppercase tracking-[0.3em] text-slate-500">
|
<h3 className="text-3xl md:text-4xl font-bold text-slate-900 mb-3">
|
||||||
Persona
|
{persona.name}
|
||||||
</span>
|
</h3>
|
||||||
<h3 className="text-2xl font-semibold">{persona.name}</h3>
|
<p className="text-lg text-slate-600 leading-relaxed">
|
||||||
<div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner">
|
{persona.description}
|
||||||
<img
|
</p>
|
||||||
src={`/marketing/images/${persona.image}`}
|
|
||||||
alt={`${persona.name} workflow`}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
/>
|
|
||||||
</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">
|
||||||
</h4>
|
<ExclamationTriangleIcon className="h-5 w-5 text-rose-500" />
|
||||||
<ul className="space-y-4 text-sm text-slate-600">
|
<h4 className="text-sm uppercase tracking-[0.2em] text-rose-600 font-semibold">
|
||||||
{persona.pains.map((pain) => (
|
Pain Points
|
||||||
<li key={pain} className="flex gap-3">
|
</h4>
|
||||||
<span className="mt-1 size-1.5 rounded-full bg-rose-400 shadow-sm" />
|
</div>
|
||||||
{pain}
|
<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>
|
</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">
|
||||||
</h4>
|
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`} />
|
||||||
<ul className="space-y-4 text-sm text-slate-600">
|
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`}>
|
||||||
{persona.outcomes.map((outcome, outcomeIdx) => {
|
IGNY8 Outcomes
|
||||||
const outcomeColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]"];
|
</h4>
|
||||||
return (
|
</div>
|
||||||
<li key={outcome} className="flex gap-3">
|
<ul className="space-y-4">
|
||||||
<span className={`mt-1 size-1.5 rounded-full ${outcomeColors[outcomeIdx % outcomeColors.length]} shadow-sm`} />
|
{persona.outcomes.map((outcome, i) => (
|
||||||
{outcome}
|
<li key={i} className="flex gap-3 text-slate-700">
|
||||||
</li>
|
<span className={`mt-1.5 size-2 rounded-full ${persona.outcomeColor} shadow-sm flex-shrink-0`} />
|
||||||
);
|
<span>{outcome}</span>
|
||||||
})}
|
</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×",
|
{[
|
||||||
label: "Average lift in organic traffic within 90 days.",
|
{
|
||||||
color: "border-[#0693e3]/40",
|
metric: "3.2×",
|
||||||
gradient: "from-[#0693e3]/10 to-white",
|
label: "organic lift",
|
||||||
textColor: "text-[#0693e3]",
|
description: "Average lift in organic traffic within 90 days",
|
||||||
},
|
icon: ArrowTrendingUpIcon,
|
||||||
{
|
color: "from-[#0693e3] to-[#0472b8]",
|
||||||
metric: "48%",
|
glow: "shadow-[#0693e3]/30",
|
||||||
label: "Reduction in time-to-publish from keyword discovery.",
|
},
|
||||||
color: "border-[#0bbf87]/40",
|
{
|
||||||
gradient: "from-[#0bbf87]/10 to-white",
|
metric: "48%",
|
||||||
textColor: "text-[#0bbf87]",
|
label: "reduction in time to publish",
|
||||||
},
|
description: "Faster time-to-publish from keyword discovery",
|
||||||
{
|
icon: ClockIcon,
|
||||||
metric: "4 tools",
|
color: "from-[#0bbf87] to-[#08966b]",
|
||||||
label: "Average number of point solutions replaced by Igny8.",
|
glow: "shadow-[#0bbf87]/30",
|
||||||
color: "border-[#ff7a00]/40",
|
},
|
||||||
gradient: "from-[#ff7a00]/10 to-white",
|
{
|
||||||
textColor: "text-[#ff7a00]",
|
metric: "4 tools",
|
||||||
},
|
label: "replaced",
|
||||||
].map((item) => (
|
description: "Average number of point solutions replaced by Igny8",
|
||||||
<div
|
icon: WrenchScrewdriverIcon,
|
||||||
key={item.metric}
|
color: "from-[#ff7a00] to-[#cc5f00]",
|
||||||
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`}
|
glow: "shadow-[#ff7a00]/30",
|
||||||
>
|
},
|
||||||
<div className={`text-4xl font-semibold ${item.textColor}`}>{item.metric}</div>
|
].map((stat, index) => {
|
||||||
<p className="text-sm text-slate-600">{item.label}</p>
|
const Icon = stat.icon;
|
||||||
</div>
|
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>
|
</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;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user