stlyes fixes
This commit is contained in:
IGNY8 VPS (Salman)
@@ -80,17 +80,17 @@ const CaseStudies: React.FC = () => {
|
||||
<SEO meta={getMetaTags("caseStudies")} />
|
||||
<div className="bg-white">
|
||||
{/* HERO SECTION */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
|
||||
<section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-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">
|
||||
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-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">
|
||||
<h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-gray-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">
|
||||
<p className="text-xl md:text-2xl text-gray-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>
|
||||
@@ -100,26 +100,26 @@ const CaseStudies: React.FC = () => {
|
||||
<section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
|
||||
{caseStudies.map((cs, idx) => {
|
||||
const metricColors = [
|
||||
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[var(--color-primary)]" },
|
||||
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0bbf87]" },
|
||||
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
|
||||
{ border: "border-gray-200", bg: "from-white to-gray-50/50", text: "text-[var(--color-primary)]" },
|
||||
{ border: "border-gray-200", bg: "from-white to-gray-50/50", text: "text-[var(--color-success)]" },
|
||||
{ border: "border-gray-200", bg: "from-white to-gray-50/50", text: "text-[var(--color-warning)]" },
|
||||
];
|
||||
return (
|
||||
<div
|
||||
key={cs.company}
|
||||
className="rounded-3xl border-2 border-slate-200 bg-white p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all"
|
||||
className="rounded-3xl border-2 border-gray-200 bg-white 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="flex items-center gap-3">
|
||||
<div className={`size-12 rounded-xl bg-gradient-to-br ${cs.iconColor} flex items-center justify-center text-white shadow-lg`}>
|
||||
<CheckCircleIcon className="h-6 w-6" />
|
||||
</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">
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-gray-100 text-gray-600">
|
||||
{cs.company}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-3xl md:text-4xl font-bold text-slate-900">{cs.headline}</h3>
|
||||
<p className="text-base text-slate-600 leading-relaxed">{cs.summary}</p>
|
||||
<h3 className="text-3xl md:text-4xl font-bold text-gray-900">{cs.headline}</h3>
|
||||
<p className="text-base text-gray-600 leading-relaxed">{cs.summary}</p>
|
||||
<div className="grid grid-cols-3 gap-4 pt-4">
|
||||
{cs.metrics.map((metric, metricIdx) => {
|
||||
const metricColor = metricColors[metricIdx % metricColors.length];
|
||||
@@ -131,7 +131,7 @@ const CaseStudies: React.FC = () => {
|
||||
<div className={`text-2xl md:text-3xl font-bold ${metricColor.text}`}>
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
|
||||
<div className="text-xs uppercase tracking-[0.2em] text-gray-600 font-semibold">
|
||||
{metric.label}
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,7 +140,7 @@ const CaseStudies: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-lg">
|
||||
<div className="rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white overflow-hidden shadow-lg">
|
||||
<img
|
||||
src={`/marketing/images/${cs.image}`}
|
||||
alt={`${cs.company} case study`}
|
||||
@@ -154,22 +154,22 @@ const CaseStudies: React.FC = () => {
|
||||
</section>
|
||||
|
||||
{/* RESULTS & ADVISORY BOARD */}
|
||||
<section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
|
||||
<section className="bg-gradient-to-b from-white via-gray-50/30 to-white py-24">
|
||||
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
|
||||
<div className="rounded-2xl border-2 border-gray-200 bg-white p-8 space-y-6 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<CheckCircleIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<h4 className="text-2xl font-bold text-slate-900">
|
||||
<h4 className="text-2xl font-bold text-gray-900">
|
||||
Results you can expect
|
||||
</h4>
|
||||
</div>
|
||||
<ul className="space-y-4 text-sm text-slate-700">
|
||||
<ul className="space-y-4 text-sm text-gray-700">
|
||||
{[
|
||||
{ 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: "Clear ROI dashboards tying automation to revenue outcomes.", color: "bg-[#ff7a00]" },
|
||||
{ text: "30-60 day onboarding to deploy automation and Thinker governance.", color: "bg-[var(--color-primary)]" },
|
||||
{ text: "3-5× increase in content throughput without sacrificing editorial quality.", color: "bg-[var(--color-success)]" },
|
||||
{ text: "Clear ROI dashboards tying automation to revenue outcomes.", color: "bg-[var(--color-warning)]" },
|
||||
].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`} />
|
||||
@@ -178,16 +178,16 @@ const CaseStudies: React.FC = () => {
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
|
||||
<div className="rounded-2xl border-2 border-gray-200 bg-white p-8 space-y-6 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
|
||||
<CheckCircleIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<h4 className="text-2xl font-bold text-slate-900">
|
||||
<h4 className="text-2xl font-bold text-gray-900">
|
||||
Customer advisory board
|
||||
</h4>
|
||||
</div>
|
||||
<p className="text-base text-slate-700 leading-relaxed">
|
||||
<p className="text-base text-gray-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.
|
||||
</p>
|
||||
<button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
|
||||
@@ -199,7 +199,7 @@ const CaseStudies: React.FC = () => {
|
||||
</section>
|
||||
|
||||
{/* FINAL CTA */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
|
||||
{/* Radial glow */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user