Update Product.tsx
This commit is contained in:
Desktop
@@ -1,181 +1,473 @@
|
||||
import React from "react";
|
||||
import SectionHeading from "../components/SectionHeading";
|
||||
import CTASection from "../components/CTASection";
|
||||
import { Link } from "react-router-dom";
|
||||
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 = () => {
|
||||
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">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="space-y-6">
|
||||
<SectionHeading
|
||||
eyebrow="Platform overview"
|
||||
title="One operating system for keyword intelligence, AI content production, and automation."
|
||||
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."
|
||||
align="left"
|
||||
/>
|
||||
<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">
|
||||
<div className="flex items-center justify-between text-slate-900">
|
||||
<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">
|
||||
{[
|
||||
{ text: "Planner → Find, cluster, and prioritize keywords with AI scoring and SERP insights.", color: "bg-[#0693e3]" },
|
||||
{ text: "Writer → Generate on-brand long-form content from briefs with tone, audience, and compliance controls.", color: "bg-[#0bbf87]" },
|
||||
{ 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>
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
<section className="max-w-6xl mx-auto px-6 py-24 space-y-12">
|
||||
<SectionHeading
|
||||
eyebrow="Module deep dive"
|
||||
title="Everything you need to research, create, deploy, and measure."
|
||||
description="We designed Igny8 so your team can centralize strategy, remove bottlenecks, and trust AI with execution while maintaining full visibility."
|
||||
/>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||
{[
|
||||
{
|
||||
title: "Planner",
|
||||
copy: [
|
||||
"Global keyword database with opportunity scoring, SERP overlays, and traffic estimates.",
|
||||
"Drag-and-drop topical mapping. Auto-cluster thousands of terms in minutes.",
|
||||
"Alerts for emerging opportunities, competitive gaps, and seasonality shifts.",
|
||||
],
|
||||
image: "planner-strategy.png",
|
||||
},
|
||||
{
|
||||
title: "Writer",
|
||||
copy: [
|
||||
"AI briefs with outlines, talking points, and internal link suggestions.",
|
||||
"Long-form drafts aligned to your brand voice, compliance rules, and target SERP.",
|
||||
"Editorial workspace with comments, approvals, and WordPress publishing.",
|
||||
],
|
||||
image: "writer-editor.png",
|
||||
},
|
||||
{
|
||||
title: "Thinker",
|
||||
copy: [
|
||||
"Centralize prompts, tone profiles, and persona guidance.",
|
||||
"Version control for AI instructions and playbooks across teams.",
|
||||
"Governance dashboards showing who generated what, when, and with which inputs.",
|
||||
],
|
||||
image: "thinker-prompts.png",
|
||||
},
|
||||
{
|
||||
title: "Automation",
|
||||
copy: [
|
||||
"Schedule keywords → ideas → tasks → content → images in fully automated cycles.",
|
||||
"Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability.",
|
||||
"Monitor every automation with audit logs and manual override controls.",
|
||||
],
|
||||
image: "automation-timeline.png",
|
||||
},
|
||||
].map((module, idx) => {
|
||||
const colors = [
|
||||
{ border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white", dot: "bg-[#0693e3]" },
|
||||
{ border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white", dot: "bg-[#0bbf87]" },
|
||||
{ border: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white", dot: "bg-[#ff7a00]" },
|
||||
{ border: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white", dot: "bg-[#5d4ae3]" },
|
||||
];
|
||||
const colorScheme = colors[idx % colors.length];
|
||||
return (
|
||||
<div
|
||||
key={module.title}
|
||||
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`}
|
||||
>
|
||||
<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}
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold text-slate-900">{module.title} platform</h3>
|
||||
<ul className="space-y-3 text-sm text-slate-900/65">
|
||||
{module.copy.map((line, lineIdx) => {
|
||||
const dotColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
|
||||
return (
|
||||
<li key={line} className="flex gap-3">
|
||||
<span className={`mt-1 size-1.5 rounded-full ${dotColors[lineIdx % dotColors.length]} shadow-sm`} />
|
||||
{line}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner">
|
||||
const workflowSteps = [
|
||||
{ name: "Keywords", icon: ListBulletIcon, color: "from-[#0693e3] to-[#0472b8]" },
|
||||
{ name: "Clusters", icon: UserGroupIcon, color: "from-[#5d4ae3] to-[#3a2f94]" },
|
||||
{ name: "Ideas", icon: LightBulbIcon, color: "from-[#ff7a00] to-[#cc5f00]" },
|
||||
{ name: "Tasks", icon: DocumentTextIcon, color: "from-[#0bbf87] to-[#08966b]" },
|
||||
{ name: "Content", icon: SparklesIcon, color: "from-[#0693e3] to-[#0472b8]" },
|
||||
{ name: "Publish", icon: BoltIcon, color: "from-[#0bbf87] to-[#08966b]" },
|
||||
];
|
||||
|
||||
const productModules = [
|
||||
{
|
||||
title: "Planner",
|
||||
subtitle: "Market intelligence and keyword → cluster engine",
|
||||
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: [
|
||||
"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",
|
||||
"Priority scoring based on opportunity, competition, and search intent",
|
||||
"Alerts for emerging opportunities, competitive gaps, and seasonality shifts",
|
||||
],
|
||||
icon: ChartBarIcon,
|
||||
color: "from-[#0693e3] to-[#0472b8]",
|
||||
image: "planner-dashboard.png",
|
||||
link: "#planner",
|
||||
},
|
||||
{
|
||||
title: "Writer",
|
||||
subtitle: "AI writing system with brand rules and editorial logic",
|
||||
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.",
|
||||
features: [
|
||||
"AI briefs with outlines, talking points, and internal link suggestions",
|
||||
"Context-aware content generation with SERP analysis and competitor insights",
|
||||
"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",
|
||||
],
|
||||
icon: SparklesIcon,
|
||||
color: "from-[#0bbf87] to-[#08966b]",
|
||||
image: "writer-dashboard.png",
|
||||
link: "#writer",
|
||||
},
|
||||
{
|
||||
title: "Thinker",
|
||||
subtitle: "Strategic OS and thinking engine",
|
||||
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.",
|
||||
features: [
|
||||
"Centralized prompt library and brand playbooks with version control",
|
||||
"Author voice templates and style guides for consistent content",
|
||||
"Automated guideline enforcement across all content generation",
|
||||
"Governance dashboards showing who generated what, when, and with which inputs",
|
||||
"Version control for AI instructions and playbooks across teams",
|
||||
],
|
||||
icon: BoltIcon,
|
||||
color: "from-[#ff7a00] to-[#cc5f00]",
|
||||
image: "thinker-dashboard.png",
|
||||
link: "#thinker",
|
||||
},
|
||||
{
|
||||
title: "Automation",
|
||||
subtitle: "Always-on execution engine",
|
||||
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.",
|
||||
features: [
|
||||
"Schedule keywords → ideas → tasks → content → images in fully automated cycles",
|
||||
"End-to-end workflow automation with custom triggers and conditions",
|
||||
"Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability",
|
||||
"Multi-step handoffs between modules with quality checks at each stage",
|
||||
"Monitor every automation with audit logs and manual override controls",
|
||||
],
|
||||
icon: PhotoIcon,
|
||||
color: "from-[#5d4ae3] to-[#3a2f94]",
|
||||
image: "automation-dashboard.png",
|
||||
link: "#automation",
|
||||
},
|
||||
];
|
||||
|
||||
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
|
||||
src={`/marketing/images/${module.image}`}
|
||||
alt={`${module.title} module`}
|
||||
className="w-full h-full object-cover"
|
||||
src="/marketing/images/hero-dashboard.png"
|
||||
alt="Igny8 product dashboard"
|
||||
className="w-full h-auto object-cover mt-12"
|
||||
/>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<section className="max-w-6xl mx-auto px-6 py-24">
|
||||
<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">
|
||||
<div className="flex-1 space-y-6">
|
||||
<SectionHeading
|
||||
eyebrow="Automation timeline"
|
||||
title="Visualize every automated handoff—and take control at any point."
|
||||
description="Igny8 timelines map dependencies across your workflow so you can see how AI is powering each deliverable. Pause or accelerate with confidence."
|
||||
align="left"
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-slate-600">
|
||||
{[
|
||||
{ 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]" },
|
||||
{ text: "Exportable reports to share results with leadership or clients in one click.", color: "bg-[#ff7a00]" },
|
||||
{ text: "Granular permissions so teams can automate while leadership maintains oversight.", color: "bg-[#5d4ae3]" },
|
||||
].map((item) => (
|
||||
<div key={item.text} className="flex gap-3">
|
||||
<span className={`mt-1 size-2 rounded-full ${item.color} shadow-sm`} />
|
||||
{item.text}
|
||||
{/* SYSTEM OVERVIEW - How the IGNY8 Engine Works */}
|
||||
<section 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">
|
||||
How the IGNY8 Engine Works
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
A seamless pipeline from keyword discovery to published content
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Timeline */}
|
||||
<div className="relative">
|
||||
{/* Enhanced connecting line with shadow */}
|
||||
<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 className="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-4">
|
||||
{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>
|
||||
))}
|
||||
|
||||
{/* 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 className="flex-1">
|
||||
<div className="rounded-3xl border-2 border-slate-200 bg-white overflow-hidden shadow-lg">
|
||||
<img
|
||||
src="/marketing/images/automation-timeline.png"
|
||||
alt="Automation timeline"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* Performance KPIs */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
|
||||
<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">87%</div>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<CTASection
|
||||
title="Unify search intelligence, AI content, and automation in one platform."
|
||||
description="Start with 14 days on us or book a bespoke walkthrough with our team to map Igny8 to your workflows."
|
||||
primaryCta={{ label: "Start your trial", href: "https://app.igny8.com/signup" }}
|
||||
secondaryCta={{ label: "Book a tour", href: "/tour" }}
|
||||
/>
|
||||
{/* TESTIMONIALS */}
|
||||
<section className="py-24 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="text-center mb-12">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Product;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user