Update Resources.tsx
This commit is contained in:
Desktop
@@ -1,27 +1,25 @@
|
|||||||
import React, { useState } from "react";
|
import React from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
RocketLaunchIcon,
|
RocketLaunchIcon,
|
||||||
ChatBubbleLeftRightIcon,
|
|
||||||
ArrowRightIcon,
|
ArrowRightIcon,
|
||||||
ArrowDownTrayIcon,
|
ArrowDownTrayIcon,
|
||||||
PlayIcon,
|
PlayIcon,
|
||||||
CalculatorIcon,
|
|
||||||
BookOpenIcon,
|
BookOpenIcon,
|
||||||
SparklesIcon,
|
SparklesIcon,
|
||||||
ChartBarIcon,
|
ChartBarIcon,
|
||||||
BoltIcon,
|
BoltIcon,
|
||||||
PhotoIcon,
|
|
||||||
DocumentTextIcon,
|
DocumentTextIcon,
|
||||||
WrenchScrewdriverIcon,
|
WrenchScrewdriverIcon,
|
||||||
ArrowTrendingUpIcon,
|
ClipboardDocumentCheckIcon,
|
||||||
|
AcademicCapIcon,
|
||||||
|
CalendarIcon,
|
||||||
ClockIcon,
|
ClockIcon,
|
||||||
|
CheckCircleIcon,
|
||||||
|
ListBulletIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
|
|
||||||
const Resources: React.FC = () => {
|
const Resources: React.FC = () => {
|
||||||
const [selectedCategory, setSelectedCategory] = useState("Articles");
|
|
||||||
const [webinarTab, setWebinarTab] = useState<"upcoming" | "ondemand">("upcoming");
|
|
||||||
|
|
||||||
const renderCta = (cta: { label: string; href: string }, className: string) => {
|
const renderCta = (cta: { label: string; href: string }, className: string) => {
|
||||||
const isExternal = cta.href.startsWith("http");
|
const isExternal = cta.href.startsWith("http");
|
||||||
|
|
||||||
@@ -45,160 +43,137 @@ const Resources: React.FC = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const categories = [
|
const learnAIResources = [
|
||||||
"Articles",
|
|
||||||
"Playbooks",
|
|
||||||
"Webinars",
|
|
||||||
"Templates",
|
|
||||||
"Tools",
|
|
||||||
"Case Studies",
|
|
||||||
"Product Updates",
|
|
||||||
];
|
|
||||||
|
|
||||||
const articles = [
|
|
||||||
{
|
{
|
||||||
title: "AI SEO: Building topical authority at scale",
|
title: "AI SEO: Building Topical Authority at Scale",
|
||||||
description: "Short intro about mapping thousands of keywords at speed.",
|
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.",
|
||||||
category: "Articles",
|
type: "Article",
|
||||||
},
|
tag: "Strategy",
|
||||||
{
|
|
||||||
title: "Automating the content supply chain",
|
|
||||||
description: "How to orchestrate keyword research, briefs, writing, imagery, and publishing.",
|
|
||||||
category: "Articles",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Measuring AI generated content quality",
|
|
||||||
description: "Frameworks for accuracy, consistency, and editorial control across all outputs.",
|
|
||||||
category: "Articles",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "SERP-guided content planning for growth",
|
|
||||||
description: "How context aware scoring improves prioritization and publishing velocity.",
|
|
||||||
category: "Articles",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Scaling briefs with AI editorial logic",
|
|
||||||
description: "A system for generating consistent, on brand briefs with automatic depth.",
|
|
||||||
category: "Articles",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Upgrading workflows with cluster automation",
|
|
||||||
description: "Practical steps to enable automation across the entire research to publish pipeline.",
|
|
||||||
category: "Articles",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const playbooks = [
|
|
||||||
{
|
|
||||||
title: "AI SEO Acceleration Playbook",
|
|
||||||
description: "A complete framework for lifting organic traffic by expanding cluster depth and publishing volume.",
|
|
||||||
icon: ChartBarIcon,
|
icon: ChartBarIcon,
|
||||||
color: "from-[#0693e3] to-[#0472b8]",
|
color: "from-[#0693e3] to-[#0472b8]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Automated Content Supply Chain Blueprint",
|
title: "The Complete Framework for AI Content Quality",
|
||||||
description: "A step by step path for unifying research, briefs, writing, imagery, and publishing.",
|
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.",
|
||||||
icon: BoltIcon,
|
type: "Framework Guide",
|
||||||
|
tag: "Strategy",
|
||||||
|
icon: AcademicCapIcon,
|
||||||
color: "from-[#0bbf87] to-[#08966b]",
|
color: "from-[#0bbf87] to-[#08966b]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Editorial Standards for AI Content",
|
title: "SERP-Guided Content Planning Playbook",
|
||||||
description: "Guidelines for tone, structure, consistency, and narrative control at scale.",
|
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.",
|
||||||
icon: DocumentTextIcon,
|
type: "PDF Guide",
|
||||||
color: "from-[#ff7a00] to-[#cc5f00]",
|
tag: "Strategy",
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Topic Authority Framework",
|
|
||||||
description: "A methodology for building dominance across entire keyword clusters.",
|
|
||||||
icon: SparklesIcon,
|
|
||||||
color: "from-[#5d4ae3] to-[#3a2f94]",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const upcomingWebinars = [
|
|
||||||
{
|
|
||||||
title: "Building an automation first content ops team",
|
|
||||||
description: "Live strategy session with IGNY8 specialists.",
|
|
||||||
date: "November 21, 2025",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "From keywords to conversions: dashboards that prove ROI",
|
|
||||||
description: "A full walkthrough of reporting and insights.",
|
|
||||||
date: "December 5, 2025",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const onDemandWebinars = [
|
|
||||||
{
|
|
||||||
title: "Automating cluster research",
|
|
||||||
description: "Learn how to automate keyword clustering at scale.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Editorial control and AI tone systems",
|
|
||||||
description: "Master brand voice and tone management in AI content.",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const templates = [
|
|
||||||
{
|
|
||||||
title: "AI Brief Template",
|
|
||||||
description: "Structured format for generating consistent content briefs.",
|
|
||||||
icon: DocumentTextIcon,
|
|
||||||
color: "from-[#0693e3] to-[#0472b8]",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Cluster Outline Template",
|
|
||||||
description: "Long form outline template aligned with IGNY8 Writer standards.",
|
|
||||||
icon: ArrowDownTrayIcon,
|
|
||||||
color: "from-[#0bbf87] to-[#08966b]",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Image Prompt Template",
|
|
||||||
description: "A ready to use structure for generating high quality image prompts.",
|
|
||||||
icon: PhotoIcon,
|
|
||||||
color: "from-[#ff7a00] to-[#cc5f00]",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Editorial Style Guide Template",
|
|
||||||
description: "A flexible guide for managing tone and brand voice.",
|
|
||||||
icon: BookOpenIcon,
|
icon: BookOpenIcon,
|
||||||
color: "from-[#5d4ae3] to-[#3a2f94]",
|
color: "from-[#ff7a00] to-[#cc5f00]",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const tools = [
|
const buildSystemResources = [
|
||||||
{
|
{
|
||||||
title: "Content Velocity Calculator",
|
title: "Notion Content Calendar Template",
|
||||||
description: "Estimate the volume of content needed to achieve specific traffic goals.",
|
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.",
|
||||||
icon: CalculatorIcon,
|
type: "Template",
|
||||||
|
tags: ["Template", "System"],
|
||||||
|
icon: CalendarIcon,
|
||||||
color: "from-[#0693e3] to-[#0472b8]",
|
color: "from-[#0693e3] to-[#0472b8]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Keyword Opportunity Score",
|
title: "Airtable Keyword Cluster System",
|
||||||
description: "A utility to evaluate keyword value based on difficulty, volume, and intent.",
|
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.",
|
||||||
icon: ArrowTrendingUpIcon,
|
type: "System",
|
||||||
|
tags: ["System", "Workflow"],
|
||||||
|
icon: ChartBarIcon,
|
||||||
color: "from-[#0bbf87] to-[#08966b]",
|
color: "from-[#0bbf87] to-[#08966b]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Automation ROI Calculator",
|
title: "Content Calendar Kit (Excel)",
|
||||||
description: "Measure the productivity gains achievable through workflow automation.",
|
description: "Downloadable Excel template with macros for content planning, publishing schedules, and performance tracking. Perfect for teams that prefer spreadsheet-based workflows.",
|
||||||
icon: ChartBarIcon,
|
type: "Template",
|
||||||
|
tags: ["Template", "Workflow"],
|
||||||
|
icon: DocumentTextIcon,
|
||||||
color: "from-[#5d4ae3] to-[#3a2f94]",
|
color: "from-[#5d4ae3] to-[#3a2f94]",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
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-[#ff7a00] to-[#cc5f00]",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const caseStudies = [
|
const attendWatchResources = [
|
||||||
{
|
{
|
||||||
title: "Publisher increases content velocity by 3x",
|
title: "Building an Automation-First Content Ops Team",
|
||||||
description: "Short note on how IGNY8 unified research and writing workflows.",
|
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-[#0693e3] to-[#0472b8]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Agency cuts production time by 48 percent",
|
title: "From Keywords to Conversions: Dashboard Deep-Dive",
|
||||||
description: "Insight into how automation reduced cycles from research to publish.",
|
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-[#0bbf87] to-[#08966b]",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Marketing team consolidates 4 tools into one",
|
title: "Automating Cluster Research at Scale",
|
||||||
description: "Story on reducing platform complexity while scaling content output.",
|
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-[#5d4ae3] to-[#3a2f94]",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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-[#ff7a00] to-[#cc5f00]",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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-[#0693e3] to-[#0472b8]",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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-[#0bbf87] to-[#08966b]",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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-[#5d4ae3] to-[#3a2f94]",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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-[#ff7a00] to-[#cc5f00]",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -213,114 +188,59 @@ const Resources: React.FC = () => {
|
|||||||
Resources
|
Resources
|
||||||
</span>
|
</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-slate-900 mb-6">
|
||||||
Insights, playbooks, and tools for AI led growth teams.
|
Resources to Power Your AI SEO Journey
|
||||||
</h1>
|
</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-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||||
Stay ahead with strategic content, templates, and live sessions that help you scale output, unify your workflows, and maximize automation impact.
|
Templates, Guides, Workflows & Tools – Built for High-Scale Content Teams
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
<div className="flex justify-center">
|
||||||
{renderCta(
|
{renderCta(
|
||||||
{ label: "Browse articles", href: "#articles" },
|
{ label: "Explore All Resources", href: "#learn" },
|
||||||
"inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
|
"inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
|
||||||
)}
|
)}
|
||||||
{renderCta(
|
|
||||||
{ label: "Join newsletter", href: "#newsletter" },
|
|
||||||
"inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[#0693e3] hover:text-[#0693e3] transition"
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* FEATURED RESOURCE SPOTLIGHT */}
|
{/* CONTENT GROUP 1: Learn AI SEO */}
|
||||||
<section className="max-w-7xl mx-auto px-6 pb-24">
|
<section id="learn" className="max-w-7xl mx-auto px-6 py-24">
|
||||||
<div className="mb-8">
|
<div className="mb-12">
|
||||||
<span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-semibold">Featured Resource</span>
|
|
||||||
</div>
|
|
||||||
<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-12 shadow-xl hover:shadow-2xl transition-all">
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">
|
|
||||||
AI SEO: Building topical authority at scale
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-slate-600 leading-relaxed">
|
|
||||||
A deep dive into how AI systems accelerate research, map thousands of keywords into authoritative clusters, and streamline content production for rapid growth.
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="inline-flex items-center gap-2 text-base font-semibold text-[#0693e3] hover:text-[#0472b8] group"
|
|
||||||
>
|
|
||||||
Read full guide
|
|
||||||
<ArrowRightIcon className="h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white h-64 flex items-center justify-center text-sm text-slate-400 shadow-inner">
|
|
||||||
Featured resource image placeholder
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* RESOURCE CATEGORY FILTERS */}
|
|
||||||
<section className="bg-white border-y border-slate-200">
|
|
||||||
<div className="max-w-7xl mx-auto px-6 py-6">
|
|
||||||
<div className="flex flex-wrap gap-3 justify-center">
|
|
||||||
{categories.map((category) => (
|
|
||||||
<button
|
|
||||||
key={category}
|
|
||||||
onClick={() => setSelectedCategory(category)}
|
|
||||||
className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${
|
|
||||||
selectedCategory === category
|
|
||||||
? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white shadow-md"
|
|
||||||
: "bg-slate-100 text-slate-600 hover:bg-slate-200"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{category}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* ARTICLES GRID */}
|
|
||||||
<section id="articles" className="max-w-7xl mx-auto px-6 py-24">
|
|
||||||
<div className="text-center mb-12">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||||
Latest Articles
|
Learn AI SEO
|
||||||
</h2>
|
</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>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{articles.map((article, index) => {
|
{learnAIResources.map((resource, index) => {
|
||||||
const colors = [
|
const Icon = resource.icon;
|
||||||
"from-[#0693e3]/10 to-white",
|
|
||||||
"from-[#0bbf87]/10 to-white",
|
|
||||||
"from-[#ff7a00]/10 to-white",
|
|
||||||
"from-[#5d4ae3]/10 to-white",
|
|
||||||
"from-[#0693e3]/10 to-white",
|
|
||||||
"from-[#0bbf87]/10 to-white",
|
|
||||||
];
|
|
||||||
const borders = [
|
|
||||||
"border-[#0693e3]/30",
|
|
||||||
"border-[#0bbf87]/30",
|
|
||||||
"border-[#ff7a00]/30",
|
|
||||||
"border-[#5d4ae3]/30",
|
|
||||||
"border-[#0693e3]/30",
|
|
||||||
"border-[#0bbf87]/30",
|
|
||||||
];
|
|
||||||
return (
|
return (
|
||||||
<article
|
<div
|
||||||
key={article.title}
|
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`}
|
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`}
|
||||||
>
|
>
|
||||||
<h3 className="text-xl font-semibold text-slate-900">{article.title}</h3>
|
<div className="flex items-center justify-between mb-2">
|
||||||
<p className="text-sm text-slate-600 leading-relaxed flex-1">{article.description}</p>
|
<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
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
|
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
|
||||||
>
|
>
|
||||||
Read article
|
{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" />
|
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
||||||
</a>
|
</a>
|
||||||
</article>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
@@ -329,183 +249,223 @@ const Resources: React.FC = () => {
|
|||||||
href="#"
|
href="#"
|
||||||
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
|
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
|
||||||
>
|
>
|
||||||
View all articles
|
View All Guides
|
||||||
<ArrowRightIcon className="h-5 w-5" />
|
<ArrowRightIcon className="h-5 w-5" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* PLAYBOOKS SECTION */}
|
{/* CONTENT GROUP 2: Build Your System */}
|
||||||
<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-slate-50/30 to-white py-24">
|
||||||
<div className="max-w-7xl mx-auto px-6">
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
<div className="text-center mb-12">
|
<div className="mb-12">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||||
Playbooks and Strategic Guides
|
Build Your System
|
||||||
</h2>
|
</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>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
{playbooks.map((playbook, index) => {
|
{buildSystemResources.map((resource, index) => {
|
||||||
const Icon = playbook.icon;
|
const Icon = resource.icon;
|
||||||
|
const colors = [
|
||||||
|
"from-[#0693e3]/10 to-white",
|
||||||
|
"from-[#0bbf87]/10 to-white",
|
||||||
|
"from-[#5d4ae3]/10 to-white",
|
||||||
|
"from-[#ff7a00]/10 to-white",
|
||||||
|
];
|
||||||
|
const borders = [
|
||||||
|
"border-[#0693e3]/30",
|
||||||
|
"border-[#0bbf87]/30",
|
||||||
|
"border-[#5d4ae3]/30",
|
||||||
|
"border-[#ff7a00]/30",
|
||||||
|
];
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={playbook.title}
|
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"
|
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={`inline-flex size-12 rounded-xl bg-gradient-to-br ${playbook.color} items-center justify-center text-white shadow-lg`}>
|
<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" />
|
<Icon className="h-6 w-6" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-semibold text-slate-900">{playbook.title}</h3>
|
<div className="flex-1">
|
||||||
<p className="text-sm text-slate-600 leading-relaxed flex-1">{playbook.description}</p>
|
<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
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
|
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
|
||||||
>
|
>
|
||||||
<ArrowDownTrayIcon className="h-4 w-4" />
|
<ArrowDownTrayIcon className="h-4 w-4" />
|
||||||
Download {playbook.title.toLowerCase().includes("playbook") ? "playbook" : playbook.title.toLowerCase().includes("blueprint") ? "blueprint" : playbook.title.toLowerCase().includes("guide") ? "guide" : "framework"}
|
Download {resource.type.toLowerCase()}
|
||||||
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</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-[#0693e3] transition"
|
||||||
|
>
|
||||||
|
Explore Templates
|
||||||
|
<ArrowRightIcon className="h-5 w-5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* WEBINARS AND REPLAYS */}
|
{/* CONTENT GROUP 3: Attend or Watch */}
|
||||||
<section className="py-24 bg-white">
|
<section className="py-24 bg-white">
|
||||||
<div className="max-w-7xl mx-auto px-6">
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
<div className="text-center mb-12">
|
<div className="mb-12">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||||
Live Sessions and On demand Replays
|
Attend or Watch
|
||||||
</h2>
|
</h2>
|
||||||
|
<p className="text-lg text-slate-600 max-w-2xl">
|
||||||
|
Live + recorded teaching sessions to accelerate your AI content operations.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tabs */}
|
|
||||||
<div className="flex justify-center gap-4 mb-8">
|
|
||||||
<button
|
|
||||||
onClick={() => setWebinarTab("upcoming")}
|
|
||||||
className={`px-6 py-3 rounded-xl font-semibold transition-all ${
|
|
||||||
webinarTab === "upcoming"
|
|
||||||
? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white shadow-md"
|
|
||||||
: "bg-slate-100 text-slate-600 hover:bg-slate-200"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Upcoming
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setWebinarTab("ondemand")}
|
|
||||||
className={`px-6 py-3 rounded-xl font-semibold transition-all ${
|
|
||||||
webinarTab === "ondemand"
|
|
||||||
? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white shadow-md"
|
|
||||||
: "bg-slate-100 text-slate-600 hover:bg-slate-200"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
On demand
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
{webinarTab === "upcoming" ? (
|
{attendWatchResources.map((resource, index) => {
|
||||||
<>
|
const Icon = resource.icon;
|
||||||
{upcomingWebinars.map((webinar, index) => {
|
|
||||||
const colors = [
|
const colors = [
|
||||||
"from-[#0693e3]/10 to-white",
|
"from-[#0693e3]/10 to-white",
|
||||||
"from-[#0bbf87]/10 to-white",
|
"from-[#0bbf87]/10 to-white",
|
||||||
|
"from-[#5d4ae3]/10 to-white",
|
||||||
|
"from-[#ff7a00]/10 to-white",
|
||||||
];
|
];
|
||||||
const borders = [
|
const borders = [
|
||||||
"border-[#0693e3]/30",
|
"border-[#0693e3]/30",
|
||||||
"border-[#0bbf87]/30",
|
"border-[#0bbf87]/30",
|
||||||
|
"border-[#5d4ae3]/30",
|
||||||
|
"border-[#ff7a00]/30",
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={webinar.title}
|
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`}
|
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-center gap-2 text-xs uppercase tracking-[0.2em] text-slate-500">
|
<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" />
|
<ClockIcon className="h-4 w-4" />
|
||||||
{webinar.date}
|
{resource.date}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-semibold text-slate-900">{webinar.title}</h3>
|
)}
|
||||||
<p className="text-sm text-slate-600 leading-relaxed flex-1">{webinar.description}</p>
|
<div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
|
||||||
<button className="inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
|
{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-[#0693e3] to-[#0472b8] text-white hover:shadow-lg"
|
||||||
|
: "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[#0693e3]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{resource.tag === "Live" ? (
|
||||||
|
<>
|
||||||
|
<CalendarIcon className="h-4 w-4" />
|
||||||
Register now
|
Register now
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{onDemandWebinars.map((webinar, index) => {
|
|
||||||
const colors = [
|
|
||||||
"from-[#5d4ae3]/10 to-white",
|
|
||||||
"from-[#ff7a00]/10 to-white",
|
|
||||||
];
|
|
||||||
const borders = [
|
|
||||||
"border-[#5d4ae3]/30",
|
|
||||||
"border-[#ff7a00]/30",
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={webinar.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-center gap-2 text-xs uppercase tracking-[0.2em] text-slate-500">
|
|
||||||
<PlayIcon className="h-4 w-4" />
|
|
||||||
Replay
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-semibold text-slate-900">{webinar.title}</h3>
|
|
||||||
<p className="text-sm text-slate-600 leading-relaxed flex-1">{webinar.description}</p>
|
|
||||||
<button className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-6 py-3 text-sm font-semibold hover:border-[#0693e3] hover:text-[#0693e3] transition">
|
|
||||||
<PlayIcon className="h-4 w-4" />
|
<PlayIcon className="h-4 w-4" />
|
||||||
Watch replay
|
Watch replay
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center mt-12">
|
<div className="text-center mt-12">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
|
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
|
||||||
>
|
>
|
||||||
View all events
|
View Schedule
|
||||||
<ArrowRightIcon className="h-5 w-5" />
|
<ArrowRightIcon className="h-5 w-5" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* TEMPLATE LIBRARY */}
|
{/* CONTENT GROUP 4: Execute Faster */}
|
||||||
<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-slate-50/30 to-white py-24">
|
||||||
<div className="max-w-7xl mx-auto px-6">
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
<div className="text-center mb-12">
|
<div className="mb-12">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
||||||
Templates for Fast Execution
|
Execute Faster
|
||||||
</h2>
|
</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>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
{templates.map((template, index) => {
|
{executeFasterResources.map((resource, index) => {
|
||||||
const Icon = template.icon;
|
const Icon = resource.icon;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={template.title}
|
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"
|
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 ${template.color} items-center justify-center text-white shadow-lg`}>
|
<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" />
|
<Icon className="h-6 w-6" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-semibold text-slate-900">{template.title}</h3>
|
<div className="flex flex-wrap gap-2 mb-2">
|
||||||
<p className="text-sm text-slate-600 leading-relaxed flex-1">{template.description}</p>
|
{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
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
|
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
|
||||||
>
|
>
|
||||||
<ArrowDownTrayIcon className="h-4 w-4" />
|
<ArrowDownTrayIcon className="h-4 w-4" />
|
||||||
Download template
|
Download Now
|
||||||
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -515,185 +475,46 @@ const Resources: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* TOOLS AND CALCULATORS */}
|
{/* CROSS-MODULE TOOLKIT BANNER */}
|
||||||
<section className="py-24 bg-white">
|
<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="max-w-7xl mx-auto px-6">
|
||||||
<div className="text-center mb-12">
|
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
<div className="flex-1">
|
||||||
Tools to Support Your Growth Pipeline
|
<p className="text-lg md:text-xl text-slate-900 font-medium leading-relaxed">
|
||||||
</h2>
|
Build your full-stack AI content engine with our toolkits from every module — Planner, Writer, Thinker & beyond.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<div>
|
||||||
{tools.map((tool, index) => {
|
|
||||||
const Icon = tool.icon;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={tool.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 ${tool.color} items-center justify-center text-white shadow-lg`}>
|
|
||||||
<Icon className="h-6 w-6" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-slate-900">{tool.title}</h3>
|
|
||||||
<p className="text-sm text-slate-600 leading-relaxed flex-1">{tool.description}</p>
|
|
||||||
<button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
|
|
||||||
<WrenchScrewdriverIcon className="h-4 w-4" />
|
|
||||||
Open tool
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* CASE STUDIES PREVIEW */}
|
|
||||||
<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="text-center mb-12">
|
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
|
|
||||||
How Teams Scale Output With IGNY8
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
{caseStudies.map((study, index) => {
|
|
||||||
const colors = [
|
|
||||||
"from-[#0693e3]/10 to-white",
|
|
||||||
"from-[#0bbf87]/10 to-white",
|
|
||||||
"from-[#5d4ae3]/10 to-white",
|
|
||||||
];
|
|
||||||
const borders = [
|
|
||||||
"border-[#0693e3]/30",
|
|
||||||
"border-[#0bbf87]/30",
|
|
||||||
"border-[#5d4ae3]/30",
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={study.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`}
|
|
||||||
>
|
|
||||||
<h3 className="text-xl font-semibold text-slate-900">{study.title}</h3>
|
|
||||||
<p className="text-sm text-slate-600 leading-relaxed flex-1">{study.description}</p>
|
|
||||||
<a
|
<a
|
||||||
href="/case-studies"
|
href="#"
|
||||||
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
|
className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[#0bbf87] to-[#08966b] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
|
||||||
>
|
>
|
||||||
Read case study
|
Browse Toolkits
|
||||||
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
<ArrowRightIcon className="h-5 w-5" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className="text-center mt-12">
|
|
||||||
<Link
|
|
||||||
to="/case-studies"
|
|
||||||
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
|
|
||||||
>
|
|
||||||
View all case studies
|
|
||||||
<ArrowRightIcon className="h-5 w-5" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* HELP CENTER PREVIEW */}
|
{/* FINAL CTA - Dark Background */}
|
||||||
<section className="py-24 bg-white">
|
<section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
|
||||||
<div className="max-w-7xl mx-auto px-6">
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
||||||
{/* Left Column */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
|
|
||||||
Help Center
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-slate-600 mb-8">
|
|
||||||
Get instant answers and product walkthroughs.
|
|
||||||
</p>
|
|
||||||
<ul className="space-y-4">
|
|
||||||
{[
|
|
||||||
{ label: "Quickstart guide", href: "/help#getting-started" },
|
|
||||||
{ label: "Documentation", href: "/help" },
|
|
||||||
{ label: "API Reference", href: "/partners#api" },
|
|
||||||
{ label: "Troubleshooting", href: "/help#faq" },
|
|
||||||
].map((link, index) => {
|
|
||||||
const dotColors = [
|
|
||||||
"bg-[#0693e3]",
|
|
||||||
"bg-[#0bbf87]",
|
|
||||||
"bg-[#ff7a00]",
|
|
||||||
"bg-[#5d4ae3]",
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<li key={link.label} className="flex items-center gap-3">
|
|
||||||
<span className={`size-2 rounded-full ${dotColors[index]} shadow-sm flex-shrink-0`} />
|
|
||||||
<Link
|
|
||||||
to={link.href}
|
|
||||||
className="text-base text-slate-700 hover:text-[#0693e3] font-medium transition"
|
|
||||||
>
|
|
||||||
{link.label}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right Column - Newsletter Signup */}
|
|
||||||
<div id="newsletter" className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-10 space-y-6 shadow-lg">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
|
|
||||||
<SparklesIcon className="h-6 w-6" />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-2xl font-semibold text-slate-900">
|
|
||||||
Newsletter Signup
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-slate-600 leading-relaxed">
|
|
||||||
Monthly insights on AI, SEO, automation, and workflows.
|
|
||||||
</p>
|
|
||||||
<form className="flex flex-col sm:flex-row gap-3">
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
placeholder="you@company.com"
|
|
||||||
className="flex-1 rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition"
|
|
||||||
>
|
|
||||||
Subscribe
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* FINAL CTA */}
|
|
||||||
<section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
|
|
||||||
{/* Radial glow */}
|
{/* Radial glow */}
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
<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">
|
<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">
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight">
|
||||||
Want deeper access? Join our monthly live strategy lab.
|
Everything you need to plan, write, and grow with AI — in one ecosystem.
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
|
<div className="flex justify-center mt-10">
|
||||||
Reserve your seat to learn how teams automate their full growth pipeline.
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-col sm:flex-row gap-5 justify-center">
|
|
||||||
<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" />
|
|
||||||
Reserve seat
|
|
||||||
</Link>
|
|
||||||
<a
|
<a
|
||||||
href="#articles"
|
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"
|
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" />
|
<RocketLaunchIcon className="h-5 w-5" />
|
||||||
Browse articles
|
Start for $1
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user