175 lines
7.6 KiB
TypeScript
175 lines
7.6 KiB
TypeScript
import React from "react";
|
|
import {
|
|
BoltIcon,
|
|
SparklesIcon,
|
|
ChartBarIcon,
|
|
PhotoIcon,
|
|
} from "@heroicons/react/24/outline";
|
|
import HeroSection from "../components/HeroSection";
|
|
import MetricsBar from "../components/MetricsBar";
|
|
import { heroMetrics, workflowSteps } from "../data/metrics";
|
|
import LogoCloud from "../components/LogoCloud";
|
|
import WorkflowSteps from "../components/WorkflowSteps";
|
|
import FeatureGrid from "../components/FeatureGrid";
|
|
import SectionHeading from "../components/SectionHeading";
|
|
import TestimonialSlider from "../components/TestimonialSlider";
|
|
import CTASection from "../components/CTASection";
|
|
|
|
const Home: React.FC = () => {
|
|
return (
|
|
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white">
|
|
<HeroSection
|
|
image="hero-dashboard.png"
|
|
headline="Scale SEO content from keyword discovery to AI-crafted outputs."
|
|
subheadline="Igny8 automates your entire growth workflow—from market intelligence to publishing-ready content and imagery—so your team builds momentum, not spreadsheets."
|
|
primaryCta={{
|
|
label: "Start free trial",
|
|
href: "https://app.igny8.com/signup",
|
|
}}
|
|
secondaryCta={{
|
|
label: "Book a live tour",
|
|
href: "/tour",
|
|
}}
|
|
/>
|
|
|
|
<MetricsBar metrics={heroMetrics} />
|
|
|
|
<LogoCloud />
|
|
|
|
<section className="max-w-6xl mx-auto px-6 py-24 space-y-12">
|
|
<SectionHeading
|
|
eyebrow="Unified growth engine"
|
|
title="Four deeply connected products deliver one end-to-end workflow."
|
|
description="Every step compounds the next—from keyword intelligence to AI-powered writing and design. Automations keep your pipeline moving while strategy stays in your control."
|
|
/>
|
|
<FeatureGrid
|
|
features={[
|
|
{
|
|
title: "Planner · Market intelligence",
|
|
description:
|
|
"Tap into a living keyword database, cluster at scale, and prioritize opportunities with AI scoring. Build topical maps in minutes, not days.",
|
|
icon: <ChartBarIcon className="h-6 w-6" />,
|
|
link: { label: "See Planner", href: "/product#planner" },
|
|
},
|
|
{
|
|
title: "Writer · AI content studio",
|
|
description:
|
|
"Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools.",
|
|
icon: <SparklesIcon className="h-6 w-6" />,
|
|
link: { label: "See Writer", href: "/product#writer" },
|
|
},
|
|
{
|
|
title: "Thinker · Strategy OS",
|
|
description:
|
|
"Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates.",
|
|
icon: <BoltIcon className="h-6 w-6" />,
|
|
link: { label: "See Thinker", href: "/product#thinker" },
|
|
},
|
|
{
|
|
title: "Automation · Always-on execution",
|
|
description:
|
|
"Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence.",
|
|
icon: <PhotoIcon className="h-6 w-6" />,
|
|
link: { label: "See Automation", href: "/product#automation" },
|
|
},
|
|
]}
|
|
/>
|
|
</section>
|
|
|
|
<WorkflowSteps steps={workflowSteps} />
|
|
|
|
<section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
<div className="space-y-6">
|
|
<SectionHeading
|
|
eyebrow="Full visibility"
|
|
title="See the entire pipeline—from keyword intake to published content—in one dashboard."
|
|
description="Monitor velocity, quality, and automation coverage across every site. Use filters to dive into sectors, teams, and campaigns. Igny8 keeps leadership confident and operations aligned."
|
|
align="left"
|
|
/>
|
|
<ul className="space-y-4 text-sm text-slate-600">
|
|
<li className="flex gap-3">
|
|
<span className="mt-1 size-2 rounded-full bg-[#0693e3] shadow-sm shadow-[#0693e3]/30" />
|
|
Real-time metrics on keyword additions, clusters formed, briefs generated, and content shipped.
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="mt-1 size-2 rounded-full bg-[#0bbf87] shadow-sm shadow-[#0bbf87]/30" />
|
|
Drill into automation logs to understand every AI action, approvals, and handoffs.
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="mt-1 size-2 rounded-full bg-[#ff7a00] shadow-sm shadow-[#ff7a00]/30" />
|
|
Export-ready visuals for leadership updates and client reporting.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="rounded-3xl border border-slate-200 bg-white overflow-hidden shadow-lg">
|
|
<img
|
|
src="/marketing/images/workflow-overview.png"
|
|
alt="Workflow overview"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="absolute -bottom-8 -left-8 md:-left-12 bg-white border border-slate-200 rounded-3xl p-6 w-64 shadow-lg">
|
|
<h4 className="text-sm font-semibold text-slate-900">Automation snapshot</h4>
|
|
<p className="text-xs text-slate-600 mt-2">
|
|
87 keywords → 63 briefs → 48 articles → 48 image sets generated this week.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<TestimonialSlider />
|
|
|
|
<section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
title: "Deploy anywhere",
|
|
description:
|
|
"Publish directly to WordPress with Igny8 automations or export polished assets to CMS, docs, or project tools.",
|
|
},
|
|
{
|
|
title: "Collaborate cross-team",
|
|
description:
|
|
"Give SEO, content, and creative teams a shared workspace—complete with approvals, version history, and assignments.",
|
|
},
|
|
{
|
|
title: "Stay on-brand and compliant",
|
|
description:
|
|
"Govern prompts, author voices, and AI usage with centralized policies and audit-ready histories.",
|
|
},
|
|
].map((item, index) => {
|
|
const gradients = [
|
|
"from-[#0693e3]/10 to-[#0472b8]/5",
|
|
"from-[#0bbf87]/10 to-[#08966b]/5",
|
|
"from-[#5d4ae3]/10 to-[#3a2f94]/5",
|
|
];
|
|
const borders = [
|
|
"border-[#0693e3]/30",
|
|
"border-[#0bbf87]/30",
|
|
"border-[#5d4ae3]/30",
|
|
];
|
|
return (
|
|
<div
|
|
key={item.title}
|
|
className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${gradients[index]} bg-white/50 backdrop-blur-sm p-8 space-y-4 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all`}
|
|
>
|
|
<h3 className="text-lg font-semibold text-slate-900">{item.title}</h3>
|
|
<p className="text-sm text-slate-600 leading-relaxed">{item.description}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</section>
|
|
|
|
<CTASection
|
|
title="Ready to orchestrate SEO, content, and creative in one AI engine?"
|
|
description="Launch Igny8 in minutes. Start automating your workflow, or book a white-glove onboarding session with our team."
|
|
primaryCta={{ label: "Start free trial", href: "https://app.igny8.com/signup" }}
|
|
secondaryCta={{ label: "Talk to sales", href: "/contact" }}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|
|
|