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

Update Product.tsx

Browse Source
This commit is contained in:
Desktop
2025-11-14 02:22:07 +05:00
parent 64c8b4e31c
commit bf5d8246af
1 changed files with 449 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

606
frontend/src/marketing/pages/Product.tsx
View File

@@ -1,181 +1,473 @@
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 {
BoltIcon,
SparklesIcon,
ChartBarIcon,
PhotoIcon,
ListBulletIcon,
UserGroupIcon,
LightBulbIcon,
DocumentTextIcon,
ArrowRightIcon,
RocketLaunchIcon,
ChatBubbleLeftRightIcon,
} from "@heroicons/react/24/outline";
import { testimonials } from "../data/testimonials";
const Product: React.FC = () => { const Product: React.FC = () => {
return ( const renderCta = (cta: { label: string; href: string }, className: string) => {
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900"> const isExternal = cta.href.startsWith("http");
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> if (isExternal) {
<div className="space-y-6"> return (
<SectionHeading <a
eyebrow="Platform overview" href={cta.href}
title="One operating system for keyword intelligence, AI content production, and automation." className={className}
description="Planner, Writer, Thinker, and Automation act as one cohesive system. Each module is powerful on its own—together they deliver a compounding growth engine." target="_blank"
align="left" rel="noreferrer"
/> >
<div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-6 space-y-4 text-sm text-slate-600 shadow-lg"> {cta.label}
<div className="flex items-center justify-between text-slate-900"> </a>
<span className="font-semibold">Modules included</span> );
<span className="text-xs uppercase tracking-wider text-[#0693e3] font-semibold">4 products · 12 automation recipes</span> }
</div>
<ul className="space-y-3"> return (
{[ <Link to={cta.href} className={className}>
{ text: "Planner → Find, cluster, and prioritize keywords with AI scoring and SERP insights.", color: "bg-[#0693e3]" }, {cta.label}
{ text: "Writer → Generate on-brand long-form content from briefs with tone, audience, and compliance controls.", color: "bg-[#0bbf87]" }, </Link>
{ text: "Thinker → Manage prompts, author profiles, and brand playbooks that feed every generation.", color: "bg-[#ff7a00]" }, );
{ text: "Automation → Run scheduled workflows that move keywords to ideas, tasks, content, and images automatically.", color: "bg-[#5d4ae3]" }, };
].map((point) => (
<li key={point.text} className="flex gap-3">
<span className={`mt-1 size-2 rounded-full ${point.color} shadow-sm`} />
{point.text}
</li>
))}
</ul>
</div>
</div>
<div className="relative">
<div className="rounded-3xl border border-slate-200 bg-white overflow-hidden">
<img
src="/marketing/images/planner-keywords.png"
alt="Planner module screenshot"
className="w-full h-full object-cover"
/>
</div>
</div>
</div>
</section>
<section className="max-w-6xl mx-auto px-6 py-24 space-y-12"> const workflowSteps = [
<SectionHeading { name: "Keywords", icon: ListBulletIcon, color: "from-[#0693e3] to-[#0472b8]" },
eyebrow="Module deep dive" { name: "Clusters", icon: UserGroupIcon, color: "from-[#5d4ae3] to-[#3a2f94]" },
title="Everything you need to research, create, deploy, and measure." { name: "Ideas", icon: LightBulbIcon, color: "from-[#ff7a00] to-[#cc5f00]" },
description="We designed Igny8 so your team can centralize strategy, remove bottlenecks, and trust AI with execution while maintaining full visibility." { name: "Tasks", icon: DocumentTextIcon, color: "from-[#0bbf87] to-[#08966b]" },
/> { name: "Content", icon: SparklesIcon, color: "from-[#0693e3] to-[#0472b8]" },
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10"> { name: "Publish", icon: BoltIcon, color: "from-[#0bbf87] to-[#08966b]" },
{[ ];
{
title: "Planner", const productModules = [
copy: [ {
"Global keyword database with opportunity scoring, SERP overlays, and traffic estimates.", title: "Planner",
"Drag-and-drop topical mapping. Auto-cluster thousands of terms in minutes.", subtitle: "Market intelligence and keyword → cluster engine",
"Alerts for emerging opportunities, competitive gaps, and seasonality shifts.", description: "Tap into a living keyword database with real-time search volumes, difficulty scores, and intent classification. Use AI-powered clustering to automatically group related keywords into strategic clusters. Build topical authority maps in minutes, not days.",
], features: [
image: "planner-strategy.png", "Global keyword database with opportunity scoring, SERP overlays, and traffic estimates",
}, "AI-powered semantic clustering that groups related keywords automatically",
{ "Drag-and-drop topical mapping with visual cluster organization",
title: "Writer", "Priority scoring based on opportunity, competition, and search intent",
copy: [ "Alerts for emerging opportunities, competitive gaps, and seasonality shifts",
"AI briefs with outlines, talking points, and internal link suggestions.", ],
"Long-form drafts aligned to your brand voice, compliance rules, and target SERP.", icon: ChartBarIcon,
"Editorial workspace with comments, approvals, and WordPress publishing.", color: "from-[#0693e3] to-[#0472b8]",
], image: "planner-dashboard.png",
image: "writer-editor.png", link: "#planner",
}, },
{ {
title: "Thinker", title: "Writer",
copy: [ subtitle: "AI writing system with brand rules and editorial logic",
"Centralize prompts, tone profiles, and persona guidance.", description: "Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools. Create content that aligns with your brand voice, compliance rules, and target search results.",
"Version control for AI instructions and playbooks across teams.", features: [
"Governance dashboards showing who generated what, when, and with which inputs.", "AI briefs with outlines, talking points, and internal link suggestions",
], "Context-aware content generation with SERP analysis and competitor insights",
image: "thinker-prompts.png", "Long-form drafts aligned to your brand voice, compliance rules, and target SERP",
}, "Brand voice and tone controls for consistency across all content",
{ "Editorial workspace with comments, approvals, and WordPress publishing",
title: "Automation", ],
copy: [ icon: SparklesIcon,
"Schedule keywords → ideas → tasks → content → images in fully automated cycles.", color: "from-[#0bbf87] to-[#08966b]",
"Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability.", image: "writer-dashboard.png",
"Monitor every automation with audit logs and manual override controls.", link: "#writer",
], },
image: "automation-timeline.png", {
}, title: "Thinker",
].map((module, idx) => { subtitle: "Strategic OS and thinking engine",
const colors = [ description: "Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates. Manage AI instructions, writing styles, and content strategies in one place.",
{ border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white", dot: "bg-[#0693e3]" }, features: [
{ border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white", dot: "bg-[#0bbf87]" }, "Centralized prompt library and brand playbooks with version control",
{ border: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white", dot: "bg-[#ff7a00]" }, "Author voice templates and style guides for consistent content",
{ border: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white", dot: "bg-[#5d4ae3]" }, "Automated guideline enforcement across all content generation",
]; "Governance dashboards showing who generated what, when, and with which inputs",
const colorScheme = colors[idx % colors.length]; "Version control for AI instructions and playbooks across teams",
return ( ],
<div icon: BoltIcon,
key={module.title} color: "from-[#ff7a00] to-[#cc5f00]",
className={`rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-10 flex flex-col gap-6 hover:shadow-xl transition-all hover:-translate-y-1`} image: "thinker-dashboard.png",
> link: "#thinker",
<div className="flex items-center gap-3 text-sm uppercase tracking-[0.3em] text-slate-700 font-semibold"> },
<span className={`size-2 rounded-full ${colorScheme.dot} shadow-sm`} /> {
{module.title} title: "Automation",
</div> subtitle: "Always-on execution engine",
<h3 className="text-2xl font-semibold text-slate-900">{module.title} platform</h3> description: "Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence. Set it once, and watch it execute with intelligent handoffs between modules.",
<ul className="space-y-3 text-sm text-slate-900/65"> features: [
{module.copy.map((line, lineIdx) => { "Schedule keywords → ideas → tasks → content → images in fully automated cycles",
const dotColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"]; "End-to-end workflow automation with custom triggers and conditions",
return ( "Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability",
<li key={line} className="flex gap-3"> "Multi-step handoffs between modules with quality checks at each stage",
<span className={`mt-1 size-1.5 rounded-full ${dotColors[lineIdx % dotColors.length]} shadow-sm`} /> "Monitor every automation with audit logs and manual override controls",
{line} ],
</li> icon: PhotoIcon,
); color: "from-[#5d4ae3] to-[#3a2f94]",
})} image: "automation-dashboard.png",
</ul> link: "#automation",
<div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner"> },
];
return (
<div className="bg-white">
{/* HERO SECTION */}
<section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
{/* Radial glow behind headline */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
<div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32 lg:py-40">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
{/* Left: Text Content */}
<div className="flex flex-col gap-6 z-10">
<h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-white">
One platform for keyword intelligence, AI content, and workflow automation.
</h1>
<p className="text-lg md:text-xl text-white/85 leading-relaxed max-w-xl">
IGNY8 unifies research, writing, images, and automation so your team creates more output with less effort. Start manual or run fully automated.
</p>
<div className="flex flex-col sm:flex-row gap-4 mt-2">
{renderCta(
{ label: "Start free", href: "https://app.igny8.com/signup" },
"inline-flex items-center justify-center rounded-xl bg-white text-[#0693e3] px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
)}
{renderCta(
{ label: "Book a demo", href: "/contact" },
"inline-flex items-center justify-center rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-8 py-4 text-base font-semibold hover:bg-white/20 hover:border-white/50 transition"
)}
</div>
</div>
{/* Right: Product Dashboard Screenshot */}
<div className="relative z-10">
<div className="relative scale-110 lg:scale-125">
{/* Soft glow behind screenshot */}
<div className="absolute -inset-8 bg-gradient-to-br from-white/30 via-[#0693e3]/20 to-[#5d4ae3]/20 rounded-3xl blur-3xl" />
{/* Device frame effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" />
<div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-2xl overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/50 to-transparent flex items-center gap-2 px-4">
<div className="flex gap-2">
<div className="w-3 h-3 rounded-full bg-red-500/50" />
<div className="w-3 h-3 rounded-full bg-yellow-500/50" />
<div className="w-3 h-3 rounded-full bg-green-500/50" />
</div>
</div>
<img <img
src={`/marketing/images/${module.image}`} src="/marketing/images/hero-dashboard.png"
alt={`${module.title} module`} alt="Igny8 product dashboard"
className="w-full h-full object-cover" className="w-full h-auto object-cover mt-12"
/> />
</div> </div>
{/* Soft shadow */}
<div className="absolute -bottom-8 -left-8 right-8 h-32 bg-gradient-to-t from-[#0693e3]/20 to-transparent blur-3xl -z-10" />
</div> </div>
); </div>
})} </div>
</div> </div>
</section> </section>
<section className="max-w-6xl mx-auto px-6 py-24"> {/* SYSTEM OVERVIEW - How the IGNY8 Engine Works */}
<div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-10 md:p-16 flex flex-col lg:flex-row gap-16 shadow-xl"> <section className="py-24 bg-white">
<div className="flex-1 space-y-6"> <div className="max-w-7xl mx-auto px-6">
<SectionHeading <div className="text-center mb-16">
eyebrow="Automation timeline" <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
title="Visualize every automated handoff—and take control at any point." How the IGNY8 Engine Works
description="Igny8 timelines map dependencies across your workflow so you can see how AI is powering each deliverable. Pause or accelerate with confidence." </h2>
align="left" <p className="text-lg text-slate-600 max-w-2xl mx-auto">
/> A seamless pipeline from keyword discovery to published content
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-slate-600"> </p>
{[ </div>
{ text: "Real-time status for every automation recipe with success rates and manual interventions logged.", color: "bg-[#0693e3]" },
{ text: "Smart recommendations to rebalance workloads, add credits, or adjust prompts when performance shifts.", color: "bg-[#0bbf87]" }, {/* Horizontal Timeline */}
{ text: "Exportable reports to share results with leadership or clients in one click.", color: "bg-[#ff7a00]" }, <div className="relative">
{ text: "Granular permissions so teams can automate while leadership maintains oversight.", color: "bg-[#5d4ae3]" }, {/* Enhanced connecting line with shadow */}
].map((item) => ( <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[#0693e3] via-[#5d4ae3] via-[#ff7a00] via-[#0bbf87] to-[#0693e3] opacity-25 hidden md:block shadow-lg shadow-[#0693e3]/20" />
<div key={item.text} className="flex gap-3">
<span className={`mt-1 size-2 rounded-full ${item.color} shadow-sm`} /> <div className="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-4">
{item.text} {workflowSteps.map((step, index) => {
const Icon = step.icon;
return (
<div key={step.name} className="flex flex-col items-center gap-3">
<div className={`relative size-28 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center text-white shadow-xl z-10 group hover:scale-110 transition-transform`}>
<Icon className="h-12 w-12" />
{/* Glow effect */}
<div className={`absolute -inset-2 bg-gradient-to-br ${step.color} rounded-full opacity-0 group-hover:opacity-30 blur-xl transition-opacity -z-10`} />
</div>
<span className="text-sm font-semibold text-slate-900 text-center">{step.name}</span>
</div>
);
})}
</div>
</div>
</div>
</section>
{/* MODULE DEEP-DIVE SECTIONS */}
{productModules.map((module, index) => {
const Icon = module.icon;
const isLeft = index % 2 === 0;
const backgroundTints = [
"bg-white",
"bg-gradient-to-b from-[#0693e3]/1 to-white",
"bg-gradient-to-b from-[#0bbf87]/1 to-white",
"bg-gradient-to-b from-[#5d4ae3]/1 to-white",
];
return (
<section key={module.title} id={module.title.toLowerCase()} className={`py-32 ${backgroundTints[index]}`}>
<div className="max-w-7xl mx-auto px-6">
<div className={`grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center ${!isLeft ? "lg:grid-flow-dense" : ""}`}>
{/* Screenshot */}
<div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}>
<div className="relative scale-110 lg:scale-115">
{/* Gradient frame background with colored glow */}
<div className={`absolute -inset-6 bg-gradient-to-br ${module.color} rounded-3xl opacity-25 blur-3xl`} />
<div className="relative rounded-2xl border-2 border-slate-200 bg-white shadow-2xl overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/30 to-transparent flex items-center gap-2 px-4">
<div className="flex gap-2">
<div className="w-3 h-3 rounded-full bg-red-500/50" />
<div className="w-3 h-3 rounded-full bg-yellow-500/50" />
<div className="w-3 h-3 rounded-full bg-green-500/50" />
</div>
</div>
<img
src={`/marketing/images/${module.image}`}
alt={`${module.title} dashboard`}
className="w-full h-auto object-cover mt-12"
/>
</div>
{/* Overlap shadow with module color */}
<div className={`absolute -bottom-8 ${isLeft ? "-right-8" : "-left-8"} w-40 h-40 bg-gradient-to-br ${module.color} rounded-2xl opacity-15 blur-3xl -z-10`} />
</div>
</div> </div>
))}
{/* Text Content */}
<div className={`${!isLeft ? "lg:col-start-1" : ""}`}>
<div className="flex items-center gap-3 mb-4">
<div className={`size-12 rounded-xl bg-gradient-to-br ${module.color} flex items-center justify-center text-white shadow-lg`}>
<Icon className="h-6 w-6" />
</div>
<div>
<h3 className="text-3xl md:text-4xl font-bold text-slate-900">{module.title}</h3>
<p className="text-sm text-slate-600 mt-1">{module.subtitle}</p>
</div>
</div>
<p className="text-lg text-slate-700 mb-6 leading-relaxed">
{module.description}
</p>
<ul className="space-y-3 mb-8">
{module.features.map((feature, i) => (
<li key={i} className="flex gap-3 text-slate-700">
<span className={`mt-2 size-2 rounded-full bg-gradient-to-br ${module.color} shadow-sm flex-shrink-0`} />
<span>{feature}</span>
</li>
))}
</ul>
<a
href={module.link}
className={`inline-flex items-center gap-2 text-base font-semibold text-white px-6 py-3 rounded-xl bg-gradient-to-r ${module.color} hover:shadow-lg hover:-translate-y-0.5 transition-all`}
>
Learn more about {module.title}
<ArrowRightIcon className="h-5 w-5" />
</a>
</div>
</div>
</div>
</section>
);
})}
{/* UNIFIED AUTOMATION ENGINE SECTION */}
<section className="py-24 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
{/* Richer background pattern */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.15),transparent_70%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(11,191,135,0.1),transparent_50%)]" />
<div className="relative max-w-7xl mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-12">
{/* Left: Content */}
<div className="z-10">
<div className="flex items-center gap-3 mb-6">
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#5d4ae3] flex items-center justify-center text-white shadow-lg shadow-[#0693e3]/30">
<BoltIcon className="h-6 w-6" />
</div>
<h2 className="text-4xl md:text-5xl font-bold text-white">
Unified Automation Engine
</h2>
</div>
<p className="text-xl text-slate-200 mb-8 leading-relaxed font-medium">
Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute with compounding value at each stage.
</p>
{/* Automation Timeline with neon glows */}
<div className="space-y-6">
{[
{ from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
{ from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" },
{ from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" },
{ from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" },
{ from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
{ from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" },
].map((handoff, i) => (
<div key={i} className="flex items-center gap-4">
<div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
{handoff.icon}
{/* Neon glow effect */}
<div className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-xl opacity-0 group-hover:opacity-60 blur-md transition-opacity -z-10`} />
</div>
<div className="flex-1">
<div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div>
<div className="text-sm text-slate-300">Automated handoff with quality checks</div>
</div>
</div>
))}
</div>
</div>
{/* Right: Automation Dashboard Screenshot */}
<div className="relative z-10">
<div className="relative rounded-2xl border-2 border-white/20 bg-white/5 backdrop-blur-sm shadow-2xl overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/50 to-transparent flex items-center gap-2 px-4">
<div className="flex gap-2">
<div className="w-3 h-3 rounded-full bg-red-500/50" />
<div className="w-3 h-3 rounded-full bg-yellow-500/50" />
<div className="w-3 h-3 rounded-full bg-green-500/50" />
</div>
</div>
<img
src="/marketing/images/automation-dashboard.png"
alt="Automation dashboard"
className="w-full h-auto object-cover mt-12"
/>
</div>
{/* Glow effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-[#0693e3]/20 to-[#5d4ae3]/20 rounded-2xl blur-2xl -z-10" />
</div> </div>
</div> </div>
<div className="flex-1">
<div className="rounded-3xl border-2 border-slate-200 bg-white overflow-hidden shadow-lg"> {/* Performance KPIs */}
<img <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
src="/marketing/images/automation-timeline.png" <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
alt="Automation timeline" <div className="text-4xl font-bold text-white mb-2">87%</div>
className="w-full h-full object-cover" <div className="text-sm text-slate-400">Completion Rate</div>
/> <div className="text-xs text-slate-500 mt-2">Average automation success across all workflows</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
<div className="text-4xl font-bold text-white mb-2">6×</div>
<div className="text-sm text-slate-400">Faster Velocity</div>
<div className="text-xs text-slate-500 mt-2">Content creation speed compared to manual processes</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<CTASection {/* TESTIMONIALS */}
title="Unify search intelligence, AI content, and automation in one platform." <section className="py-24 bg-white">
description="Start with 14 days on us or book a bespoke walkthrough with our team to map Igny8 to your workflows." <div className="max-w-7xl mx-auto px-6">
primaryCta={{ label: "Start your trial", href: "https://app.igny8.com/signup" }} <div className="text-center mb-12">
secondaryCta={{ label: "Book a tour", href: "/tour" }} <span className="inline-flex items-center rounded-full border border-[#0693e3]/20 bg-[#0693e3]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[#0693e3] mb-4">
/> Loved by scaling teams
</span>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
Teams ship more content, capture more demand, and see faster ROI with Igny8.
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{testimonials.map((testimonial, index) => {
const gradientColors = [
"from-[#0693e3]/20 to-[#0472b8]/10",
"from-[#0bbf87]/20 to-[#08966b]/10",
"from-[#5d4ae3]/20 to-[#3a2f94]/10",
];
const borderColors = [
"border-[#0693e3]/30",
"border-[#0bbf87]/30",
"border-[#5d4ae3]/30",
];
return (
<div
key={testimonial.name}
className={`relative rounded-3xl border-2 ${borderColors[index]} bg-gradient-to-br ${gradientColors[index]} bg-white/80 backdrop-blur-sm p-8 flex flex-col gap-6 shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all`}
>
{/* Avatar placeholder with better contrast */}
<div className={`size-14 rounded-full bg-gradient-to-br ${gradientColors[index].split(" ")[0]} flex items-center justify-center text-white font-bold text-xl shadow-lg`}>
{testimonial.name.charAt(0)}
</div>
<p className="text-base text-slate-800 leading-relaxed font-semibold flex-1">
"{testimonial.quote}"
</p>
<div className="flex flex-col gap-1">
<span className="font-bold text-slate-900 text-lg">{testimonial.name}</span>
<span className="text-sm text-slate-700 font-medium">
{testimonial.title} · {testimonial.company}
</span>
</div>
{/* Metrics badge with better contrast */}
<div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-slate-800 text-xs font-bold w-fit shadow-sm`}>
<span>3× faster</span>
<span>•</span>
<span>+132% lift</span>
</div>
</div>
);
})}
</div>
</div>
</section>
{/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
{/* Dashboard overlay in background */}
<div className="absolute inset-0 opacity-10">
<div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
</div>
{/* 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">
Ready to unify your search intelligence, content, and automation?
</h2>
<p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
Start with 14 days on us or book a bespoke walkthrough with our team to map Igny8 to your workflows.
</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" />
Book a demo
</Link>
</div>
</div>
</section>
</div> </div>
); );
}; };
export default Product; export default Product;