Files
igny8/frontend/src/marketing/pages/Resources.tsx
2025-11-14 15:58:45 +05:00

532 lines
24 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import React from "react";
import { Link } from "react-router-dom";
import {
RocketLaunchIcon,
ArrowRightIcon,
ArrowDownTrayIcon,
PlayIcon,
BookOpenIcon,
SparklesIcon,
ChartBarIcon,
BoltIcon,
DocumentTextIcon,
WrenchScrewdriverIcon,
ClipboardDocumentCheckIcon,
AcademicCapIcon,
CalendarIcon,
ClockIcon,
CheckCircleIcon,
ListBulletIcon,
} from "@heroicons/react/24/outline";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";
const Resources: 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 learnAIResources = [
{
title: "AI SEO: Building Topical Authority at Scale",
description: "A comprehensive guide on how AI systems accelerate research, map thousands of keywords into authoritative clusters, and streamline content production for rapid growth. Learn the frameworks that top-performing teams use to dominate search results.",
type: "Article",
tag: "Strategy",
icon: ChartBarIcon,
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
},
{
title: "The Complete Framework for AI Content Quality",
description: "Deep dive into measuring accuracy, consistency, and editorial control across all AI-generated outputs. Includes frameworks for tracking performance, maintaining brand voice, and ensuring compliance at scale.",
type: "Framework Guide",
tag: "Strategy",
icon: AcademicCapIcon,
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
},
{
title: "SERP-Guided Content Planning Playbook",
description: "Learn how context-aware scoring improves prioritization and publishing velocity. This downloadable PDF covers everything from keyword opportunity analysis to content brief generation using SERP insights.",
type: "PDF Guide",
tag: "Strategy",
icon: BookOpenIcon,
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
},
];
const buildSystemResources = [
{
title: "Notion Content Calendar Template",
description: "A complete Notion workspace template for managing your content pipeline from keywords to published posts. Includes automation tracking, editorial calendars, and team collaboration boards.",
type: "Template",
tags: ["Template", "System"],
icon: CalendarIcon,
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
},
{
title: "Airtable Keyword Cluster System",
description: "Pre-built Airtable base for organizing keywords, clusters, and content ideas. Includes formulas for opportunity scoring, status tracking, and automated workflows that sync with IGNY8.",
type: "System",
tags: ["System", "Workflow"],
icon: ChartBarIcon,
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
},
{
title: "Content Calendar Kit (Excel)",
description: "Downloadable Excel template with macros for content planning, publishing schedules, and performance tracking. Perfect for teams that prefer spreadsheet-based workflows.",
type: "Template",
tags: ["Template", "Workflow"],
icon: DocumentTextIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
},
{
title: "Cluster Mapping Board",
description: "Visual board template for mapping keyword relationships and building topical authority maps. Works with Miro, Figma, or any whiteboard tool. Includes starter frameworks and examples.",
type: "Template",
tags: ["Template", "System"],
icon: SparklesIcon,
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
},
];
const attendWatchResources = [
{
title: "Building an Automation-First Content Ops Team",
description: "Live strategy session with IGNY8 specialists covering workflow design, team structure, and automation best practices.",
date: "November 21, 2025",
type: "Workshop",
tag: "Live",
icon: BoltIcon,
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
},
{
title: "From Keywords to Conversions: Dashboard Deep-Dive",
description: "A full walkthrough of reporting and insights that prove ROI. Learn how to build executive-ready dashboards that showcase content impact.",
date: "December 5, 2025",
type: "Workshop",
tag: "Live",
icon: ChartBarIcon,
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
},
{
title: "Automating Cluster Research at Scale",
description: "Replay of our most popular session on using AI to group thousands of keywords into strategic clusters. Includes Q&A with automation experts.",
type: "Replay",
tag: "Replay",
icon: PlayIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
},
{
title: "Editorial Control and AI Tone Systems",
description: "Deep-dive content audit session covering brand voice management, tone consistency, and editorial workflows for AI-generated content.",
type: "Replay",
tag: "Replay",
icon: BookOpenIcon,
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
},
];
const executeFasterResources = [
{
title: "IGNY8 Quick-Start Documentation",
description: "Get up and running in 30 minutes with our step-by-step quick-start guide. Covers account setup, first keyword import, and basic automation configuration.",
type: "Quick-Start",
tags: ["Checklist", "Execution"],
icon: RocketLaunchIcon,
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
},
{
title: "SEO Content Quality Checklist",
description: "A comprehensive checklist for ensuring every piece of AI-generated content meets editorial standards. Includes SERP analysis, keyword optimization, and compliance checks.",
type: "Checklist",
tags: ["Checklist", "Execution"],
icon: ClipboardDocumentCheckIcon,
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
},
{
title: "Content Production SOPs Pack",
description: "Standard operating procedures for content teams using IGNY8. Includes workflows for brief generation, content review, image creation, and publishing.",
type: "SOP Pack",
tags: ["Execution", "Prompt Pack"],
icon: ListBulletIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
},
{
title: "AI Prompt Library for Content Teams",
description: "Pre-built prompt templates for clustering, brief generation, content writing, and image creation. Customize these prompts to match your brand voice and editorial standards.",
type: "Prompt Pack",
tags: ["Prompt Pack", "Execution"],
icon: SparklesIcon,
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
},
];
return (
<>
<SEO meta={getMetaTags("resources")} />
<div className="bg-white">
{/* HERO SECTION */}
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-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">
Resources
</span>
<h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
Resources to Power Your AI SEO Journey
</h1>
<p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
Templates, Guides, Workflows & Tools Built for High-Scale Content Teams
</p>
<div className="flex justify-center">
{renderCta(
{ label: "Explore All Resources", href: "#learn" },
"inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
)}
</div>
</div>
</section>
{/* CONTENT GROUP 1: Learn AI SEO */}
<section id="learn" className="max-w-7xl mx-auto px-6 py-24">
<div className="mb-12">
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
Learn AI SEO
</h2>
<p className="text-lg text-slate-600 max-w-2xl">
Editorial guidance, frameworks, and strategic insights to master AI-powered content creation.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{learnAIResources.map((resource, index) => {
const Icon = resource.icon;
return (
<div
key={resource.title}
className={`rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
>
<div className="flex items-center justify-between mb-2">
<div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
<Icon 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.1em] bg-slate-100 text-slate-600">
{resource.tag}
</span>
</div>
<div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
{resource.type}
</div>
<h3 className="text-xl font-semibold text-slate-900">{resource.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
<a
href="#"
className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] group"
>
{resource.type.includes("PDF") ? "Download" : "Read"} {resource.type.toLowerCase().includes("article") ? "article" : "guide"}
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
</a>
</div>
);
})}
</div>
<div className="text-center mt-12">
<a
href="#"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--color-primary)] transition"
>
View All Guides
<ArrowRightIcon className="h-5 w-5" />
</a>
</div>
</section>
{/* CONTENT GROUP 2: Build Your System */}
<section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
<div className="max-w-7xl mx-auto px-6">
<div className="mb-12">
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
Build Your System
</h2>
<p className="text-lg text-slate-600 max-w-2xl">
Help users operationalize their workflows with ready-to-use templates and systems.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{buildSystemResources.map((resource, index) => {
const Icon = resource.icon;
const colors = [
"from-[var(--color-primary)]/10 to-white",
"from-[var(--color-success)]/10 to-white",
"from-[var(--color-purple)]/10 to-white",
"from-[var(--color-warning)]/10 to-white",
];
const borders = [
"border-[#0693e3]/30",
"border-[#0bbf87]/30",
"border-[#5d4ae3]/30",
"border-[#ff7a00]/30",
];
return (
<div
key={resource.title}
className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${colors[index]} p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
>
<div className="flex items-start gap-4">
<div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg flex-shrink-0`}>
<Icon className="h-6 w-6" />
</div>
<div className="flex-1">
<div className="flex flex-wrap gap-2 mb-2">
{resource.tags.map((tag) => (
<span
key={tag}
className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-white/80 text-slate-600 border border-slate-200"
>
{tag}
</span>
))}
</div>
<div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold mb-2">
{resource.type}
</div>
<h3 className="text-xl font-semibold text-slate-900 mb-3">{resource.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed mb-4">{resource.description}</p>
<a
href="#"
className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] group"
>
<ArrowDownTrayIcon className="h-4 w-4" />
Download {resource.type.toLowerCase()}
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
</a>
</div>
</div>
</div>
);
})}
</div>
<div className="text-center mt-12">
<a
href="#"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--color-primary)] transition"
>
Explore Templates
<ArrowRightIcon className="h-5 w-5" />
</a>
</div>
</div>
</section>
{/* CONTENT GROUP 3: Attend or Watch */}
<section className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-6">
<div className="mb-12">
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
Attend or Watch
</h2>
<p className="text-lg text-slate-600 max-w-2xl">
Live + recorded teaching sessions to accelerate your AI content operations.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{attendWatchResources.map((resource, index) => {
const Icon = resource.icon;
const colors = [
"from-[var(--color-primary)]/10 to-white",
"from-[var(--color-success)]/10 to-white",
"from-[var(--color-purple)]/10 to-white",
"from-[var(--color-warning)]/10 to-white",
];
const borders = [
"border-[#0693e3]/30",
"border-[#0bbf87]/30",
"border-[#5d4ae3]/30",
"border-[#ff7a00]/30",
];
return (
<div
key={resource.title}
className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${colors[index]} p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
>
<div className="flex items-start justify-between mb-2">
<div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
<Icon 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.1em] ${
resource.tag === "Live"
? "bg-[#0bbf87]/10 text-[#0bbf87] border border-[#0bbf87]/30"
: "bg-[#5d4ae3]/10 text-[#5d4ae3] border border-[#5d4ae3]/30"
}`}
>
{resource.tag}
</span>
</div>
{resource.date && (
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
<ClockIcon className="h-4 w-4" />
{resource.date}
</div>
)}
<div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
{resource.type}
</div>
<h3 className="text-xl font-semibold text-slate-900">{resource.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
<button
className={`inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
resource.tag === "Live"
? "bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white hover:shadow-lg"
: "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[var(--color-primary)]"
}`}
>
{resource.tag === "Live" ? (
<>
<CalendarIcon className="h-4 w-4" />
Register now
</>
) : (
<>
<PlayIcon className="h-4 w-4" />
Watch replay
</>
)}
</button>
</div>
);
})}
</div>
<div className="text-center mt-12">
<a
href="#"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--color-primary)] transition"
>
View Schedule
<ArrowRightIcon className="h-5 w-5" />
</a>
</div>
</div>
</section>
{/* CONTENT GROUP 4: Execute Faster */}
<section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
<div className="max-w-7xl mx-auto px-6">
<div className="mb-12">
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
Execute Faster
</h2>
<p className="text-lg text-slate-600 max-w-2xl">
Done-for-you components, fast-start kits, and execution tools to get you running immediately.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{executeFasterResources.map((resource, index) => {
const Icon = resource.icon;
return (
<div
key={resource.title}
className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all"
>
<div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
<Icon className="h-6 w-6" />
</div>
<div className="flex flex-wrap gap-2 mb-2">
{resource.tags.map((tag) => (
<span
key={tag}
className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-slate-100 text-slate-600"
>
{tag}
</span>
))}
</div>
<div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
{resource.type}
</div>
<h3 className="text-lg font-semibold text-slate-900">{resource.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
<a
href="#"
className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] group"
>
<ArrowDownTrayIcon className="h-4 w-4" />
Download Now
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
</a>
</div>
);
})}
</div>
</div>
</section>
{/* CROSS-MODULE TOOLKIT BANNER */}
<section className="py-16 bg-gradient-to-r from-[#0bbf87]/10 via-[#0693e3]/10 to-[#0bbf87]/10 border-y border-[#0bbf87]/20">
<div className="max-w-7xl mx-auto px-6">
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
<div className="flex-1">
<p className="text-lg md:text-xl text-slate-900 font-medium leading-relaxed">
Build your full-stack AI content engine with our toolkits from every module Planner, Writer, Thinker & beyond.
</p>
</div>
<div>
<a
href="#"
className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[var(--color-success)] to-[var(--color-success-dark)] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
>
Browse Toolkits
<ArrowRightIcon className="h-5 w-5" />
</a>
</div>
</div>
</div>
</section>
{/* FINAL CTA - Dark Background */}
<section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
{/* Radial glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,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">
Everything you need to plan, write, and grow with AI in one ecosystem.
</h2>
<div className="flex justify-center mt-10">
<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-[var(--color-primary)] 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 for $1
</a>
</div>
</div>
</section>
</div>
</>
);
};
export default Resources;