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

stlyes fixes

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-29 19:52:51 +00:00
parent c91175fdcb
commit 4f7ab9c606
155 changed files with 1576 additions and 2489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/marketing/components/CTASection.tsx
View File

@@ -56,16 +56,16 @@ const CTASection: React.FC<CTASectionProps> = ({
};
return (
<section className="py-24 bg-gradient-to-b from-white via-slate-50 to-white">
<section className="py-24 bg-gradient-to-b from-white via-gray-50 to-white">
<div className="max-w-5xl mx-auto px-6">
<div className="relative overflow-hidden rounded-3xl border-2 border-[var(--color-primary)]/20 bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-purple)]/5 to-[var(--color-success)]/5 p-10 md:p-14 shadow-xl">
<div className="absolute inset-0 bg-gradient-to-r from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10 opacity-50" />
<div className="relative flex flex-col gap-6">
<h3 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight">
<h3 className="text-3xl md:text-4xl font-semibold text-gray-900 leading-tight">
{title}
</h3>
<p className="text-slate-600 text-base md:text-lg max-w-2xl">
<p className="text-gray-600 text-base md:text-lg max-w-2xl">
{description}
</p>
<div className="flex flex-col sm:flex-row gap-4">

8
frontend/src/marketing/components/FeatureGrid.tsx
View File

@@ -28,19 +28,19 @@ const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
return (
<div
key={feature.title}
className="relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 flex flex-col gap-4 group hover:border-[#0693e3]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1"
className="relative rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 p-8 flex flex-col gap-4 group hover:border-[var(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1"
>
<div className={`size-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center text-white shadow-lg`}>
{feature.icon}
</div>
<h3 className="text-xl font-semibold text-slate-900">{feature.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed">
<h3 className="text-xl font-semibold text-gray-900">{feature.title}</h3>
<p className="text-sm text-gray-600 leading-relaxed">
{feature.description}
</p>
{feature.link && (
<a
href={feature.link.href}
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group-hover:gap-3 transition-all"
className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-brand-700)] group-hover:gap-3 transition-all"
>
{feature.link.label}
<ArrowUpRightIcon className="h-4 w-4" />

4
frontend/src/marketing/components/HeroSection.tsx
View File

@@ -58,7 +58,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
};
return (
<section className="relative overflow-hidden bg-gradient-to-br from-[#0d1b2a] via-[#142b3f] to-[#1a3a5a]">
<section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
<div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(6,147,227,0.15),transparent_50%)]" />
<div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center">
@@ -74,7 +74,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
{headline}
</h1>
<p className="text-lg md:text-xl text-slate-300 leading-relaxed max-w-xl">
<p className="text-lg md:text-xl text-gray-300 leading-relaxed max-w-xl">
{subheadline}
</p>
<div className="flex flex-col sm:flex-row gap-4">

2
frontend/src/marketing/components/LoadingPage.tsx
View File

@@ -2,7 +2,7 @@ import React from "react";
const LoadingPage: React.FC = () => {
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-white text-slate-900">
<div className="min-h-screen flex flex-col items-center justify-center bg-white text-gray-900">
<div className="flex items-center gap-3 text-lg font-semibold tracking-wide uppercase">
<span className="h-3 w-3 rounded-full bg-brand-500 animate-pulse" />
Loading experience…

2
frontend/src/marketing/components/LogoCloud.tsx
View File

@@ -14,7 +14,7 @@ const LogoCloud: React.FC = () => {
<section className="py-12 bg-white">
<div className="max-w-6xl mx-auto px-6">
<div className="flex flex-col gap-6 items-center">
<span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-medium">
<span className="text-xs uppercase tracking-[0.28em] text-gray-500 font-medium">
Trusted by modern organic teams
</span>
<div className="flex flex-wrap justify-center gap-8 md:gap-12 items-center">

4
frontend/src/marketing/components/MetricsBar.tsx
View File

@@ -18,7 +18,7 @@ const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
return (
<div className="max-w-5xl mx-auto -mt-12 sm:-mt-16 px-6">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 shadow-xl p-6 backdrop-blur-sm">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 shadow-xl p-6 backdrop-blur-sm">
{metrics.map((metric, index) => {
const gradient = accentColors[index % accentColors.length];
return (
@@ -28,7 +28,7 @@ const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
<div className={`text-3xl font-semibold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>
{metric.value}
</div>
<div className="text-sm uppercase tracking-[0.2em] text-slate-500 mt-2">
<div className="text-sm uppercase tracking-[0.2em] text-gray-500 mt-2">
{metric.label}
</div>
</div>

4
frontend/src/marketing/components/SectionHeading.tsx
View File

@@ -22,11 +22,11 @@ const SectionHeading: React.FC<SectionHeadingProps> = ({
{eyebrow}
</span>
)}
<h2 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight max-w-3xl">
<h2 className="text-3xl md:text-4xl font-semibold text-gray-900 leading-tight max-w-3xl">
{title}
</h2>
{description && (
<p className="text-slate-600 max-w-2xl text-base md:text-lg leading-relaxed">
<p className="text-gray-600 max-w-2xl text-base md:text-lg leading-relaxed">
{description}
</p>
)}

12
frontend/src/marketing/components/TestimonialSlider.tsx
View File

@@ -3,13 +3,13 @@ import { testimonials } from "../data/testimonials";
const TestimonialSlider: React.FC = () => {
return (
<section className="bg-slate-50">
<section className="bg-gray-50">
<div className="max-w-6xl mx-auto px-6 py-24 space-y-12">
<div className="flex flex-col items-center gap-4 text-center">
<span className="inline-flex items-center rounded-full border border-brand-200 bg-brand-50 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
Loved by scaling teams
</span>
<h2 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight max-w-2xl">
<h2 className="text-3xl md:text-4xl font-semibold text-gray-900 leading-tight max-w-2xl">
Teams ship more content, capture more demand, and see faster ROI with Igny8.
</h2>
</div>
@@ -17,14 +17,14 @@ const TestimonialSlider: React.FC = () => {
{testimonials.map((testimonial) => (
<div
key={testimonial.name}
className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-6 relative overflow-hidden shadow-sm hover:shadow-md transition"
className="rounded-3xl border border-gray-200 bg-white p-8 flex flex-col gap-6 relative overflow-hidden shadow-sm hover:shadow-md transition"
>
<div className="absolute -top-16 left-1/2 -translate-x-1/2 h-32 w-[140%] rounded-[50%] bg-brand-100 blur-3xl pointer-events-none" />
<p className="text-base text-slate-700 leading-relaxed relative z-10">
<p className="text-base text-gray-700 leading-relaxed relative z-10">
"{testimonial.quote}"
</p>
<div className="flex flex-col text-sm text-slate-600 relative z-10">
<span className="font-semibold text-slate-900">{testimonial.name}</span>
<div className="flex flex-col text-sm text-gray-600 relative z-10">
<span className="font-semibold text-gray-900">{testimonial.name}</span>
<span>
{testimonial.title} · {testimonial.company}
</span>

6
frontend/src/marketing/components/WorkflowSteps.tsx
View File

@@ -25,15 +25,15 @@ const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
return (
<div
key={step.title}
className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-6 flex flex-col gap-4 hover:border-[var(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1 group"
className="rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 p-6 flex flex-col gap-4 hover:border-[var(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1 group"
>
<div className={`h-12 w-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center font-semibold text-white text-xl shadow-lg`}>
{index + 1}
</div>
<h3 className="text-lg font-semibold text-slate-900 leading-snug group-hover:text-[var(--color-primary)] transition">
<h3 className="text-lg font-semibold text-gray-900 leading-snug group-hover:text-[var(--color-primary)] transition">
{step.title}
</h3>
<p className="text-sm text-slate-600 leading-relaxed">
<p className="text-sm text-gray-600 leading-relaxed">
{step.subtitle}
</p>
</div>

32
frontend/src/marketing/layout/MarketingLayout.tsx
View File

@@ -15,18 +15,18 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
const closeMobile = () => setMobileOpen(false);
return (
<div className="min-h-screen flex flex-col bg-gradient-to-b from-white via-slate-50 to-white text-slate-900">
<header className="sticky top-0 z-[1100] backdrop-blur-xl bg-white/95 border-b border-slate-200 shadow-sm">
<div className="min-h-screen flex flex-col bg-gradient-to-b from-white via-gray-50 to-white text-gray-900">
<header className="sticky top-0 z-[1100] backdrop-blur-xl bg-white/95 border-b border-gray-200 shadow-sm">
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<Link to="/" className="flex items-center gap-3" onClick={closeMobile}>
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[var(--color-primary)]/30">
IG
</span>
<div className="flex flex-col leading-tight">
<span className="font-semibold tracking-wide text-slate-900 uppercase">
<span className="font-semibold tracking-wide text-gray-900 uppercase">
Igny8
</span>
<span className="text-xs text-slate-600">AI growth engine</span>
<span className="text-xs text-gray-600">AI growth engine</span>
</div>
</Link>
@@ -37,7 +37,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<Link
key={link.name}
to={link.path}
className={`transition hover:text-[var(--color-primary)] ${isActive ? "text-[var(--color-primary)] font-semibold" : "text-slate-700"}`}
className={`transition hover:text-[var(--color-primary)] ${isActive ? "text-[var(--color-primary)] font-semibold" : "text-gray-700"}`}
>
{link.name}
</Link>
@@ -48,7 +48,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<div className="hidden lg:flex items-center gap-4">
<a
href="https://app.igny8.com/login"
className="text-sm font-medium text-slate-700 hover:text-slate-900 transition"
className="text-sm font-medium text-gray-700 hover:text-gray-900 transition"
>
Log in
</a>
@@ -61,7 +61,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
</div>
<button
className="lg:hidden inline-flex items-center justify-center rounded-lg border border-slate-200 p-2 text-slate-700"
className="lg:hidden inline-flex items-center justify-center rounded-lg border border-gray-200 p-2 text-gray-700"
onClick={toggleMobile}
aria-label="Toggle navigation"
>
@@ -70,14 +70,14 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
</div>
{mobileOpen && (
<div className="lg:hidden border-t border-slate-200 bg-white backdrop-blur-xl">
<div className="lg:hidden border-t border-gray-200 bg-white backdrop-blur-xl">
<nav className="px-6 py-4 flex flex-col gap-3">
{primaryNav.map((link) => (
<Link
key={link.name}
to={link.path}
onClick={closeMobile}
className="text-sm font-medium text-slate-700 hover:text-slate-900 transition"
className="text-sm font-medium text-gray-700 hover:text-gray-900 transition"
>
{link.name}
</Link>
@@ -86,7 +86,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<div className="px-6 pb-6 flex flex-col gap-3">
<a
href="https://app.igny8.com/login"
className="text-sm font-medium text-slate-700 hover:text-slate-900 transition"
className="text-sm font-medium text-gray-700 hover:text-gray-900 transition"
onClick={closeMobile}
>
Log in
@@ -105,7 +105,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<main className="flex-1">{children}</main>
<footer className="bg-gradient-to-br from-[#0d1b2a] via-[#142b3f] to-[#0d1b2a] border-t border-[#0693e3]/20">
<footer className="bg-gradient-to-br from-[#0d1b2a] via-[#142b3f] to-[#0d1b2a] border-t border-[var(--color-primary)]/20">
<div className="max-w-6xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-4 gap-12">
<div className="space-y-4">
<Link to="/" className="inline-flex items-center gap-3">
@@ -116,15 +116,15 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<span className="font-semibold tracking-wide text-white uppercase">
Igny8
</span>
<span className="text-xs text-slate-300">
<span className="text-xs text-gray-300">
AI + SEO automation suite
</span>
</div>
</Link>
<p className="text-sm text-slate-300 max-w-xs">
<p className="text-sm text-gray-300 max-w-xs">
Automate keyword intelligence, clustering, content production, and image creation in one unified growth engine.
</p>
<div className="text-xs text-slate-400">
<div className="text-xs text-gray-400">
© {new Date().getFullYear()} Igny8 Labs. All rights reserved.
</div>
</div>
@@ -134,7 +134,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<h4 className="text-sm font-semibold text-white uppercase tracking-wide mb-4">
{group.title}
</h4>
<ul className="space-y-3 text-sm text-slate-300">
<ul className="space-y-3 text-sm text-gray-300">
{group.links.map((link) => (
<li key={link.name}>
<Link to={link.path} className="hover:text-[var(--color-primary)] transition">
@@ -146,7 +146,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
</div>
))}
</div>
<div className="border-t border-[var(--color-primary)]/20 py-6 px-6 text-center text-xs text-slate-400">
<div className="border-t border-[var(--color-primary)]/20 py-6 px-6 text-center text-xs text-gray-400">
Built for marketers who automate growth with AI.
</div>
</footer>

48
frontend/src/marketing/pages/CaseStudies.tsx
View File

@@ -80,17 +80,17 @@ const CaseStudies: React.FC = () => {
<SEO meta={getMetaTags("caseStudies")} />
<div className="bg-white">
{/* HERO SECTION */}
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
<section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-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">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
Case Studies
</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-gray-900 mb-6">
Stories from teams automating their way to category leadership.
</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-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
See how publishers, agencies, and SaaS companies transformed their SEO and content operations with Igny8.
</p>
</div>
@@ -100,26 +100,26 @@ const CaseStudies: React.FC = () => {
<section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
{caseStudies.map((cs, idx) => {
const metricColors = [
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[var(--color-primary)]" },
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0bbf87]" },
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
{ border: "border-gray-200", bg: "from-white to-gray-50/50", text: "text-[var(--color-primary)]" },
{ border: "border-gray-200", bg: "from-white to-gray-50/50", text: "text-[var(--color-success)]" },
{ border: "border-gray-200", bg: "from-white to-gray-50/50", text: "text-[var(--color-warning)]" },
];
return (
<div
key={cs.company}
className="rounded-3xl border-2 border-slate-200 bg-white p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all"
className="rounded-3xl border-2 border-gray-200 bg-white p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all"
>
<div className="space-y-6">
<div className="flex items-center gap-3">
<div className={`size-12 rounded-xl bg-gradient-to-br ${cs.iconColor} flex items-center justify-center text-white shadow-lg`}>
<CheckCircleIcon 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.2em] bg-slate-100 text-slate-600">
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-gray-100 text-gray-600">
{cs.company}
</span>
</div>
<h3 className="text-3xl md:text-4xl font-bold text-slate-900">{cs.headline}</h3>
<p className="text-base text-slate-600 leading-relaxed">{cs.summary}</p>
<h3 className="text-3xl md:text-4xl font-bold text-gray-900">{cs.headline}</h3>
<p className="text-base text-gray-600 leading-relaxed">{cs.summary}</p>
<div className="grid grid-cols-3 gap-4 pt-4">
{cs.metrics.map((metric, metricIdx) => {
const metricColor = metricColors[metricIdx % metricColors.length];
@@ -131,7 +131,7 @@ const CaseStudies: React.FC = () => {
<div className={`text-2xl md:text-3xl font-bold ${metricColor.text}`}>
{metric.value}
</div>
<div className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
<div className="text-xs uppercase tracking-[0.2em] text-gray-600 font-semibold">
{metric.label}
</div>
</div>
@@ -140,7 +140,7 @@ const CaseStudies: React.FC = () => {
</div>
</div>
<div className="relative">
<div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-lg">
<div className="rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white overflow-hidden shadow-lg">
<img
src={`/marketing/images/${cs.image}`}
alt={`${cs.company} case study`}
@@ -154,22 +154,22 @@ const CaseStudies: React.FC = () => {
</section>
{/* RESULTS & ADVISORY BOARD */}
<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-gray-50/30 to-white py-24">
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
<div className="rounded-2xl border-2 border-gray-200 bg-white p-8 space-y-6 shadow-sm">
<div className="flex items-center gap-3">
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
<CheckCircleIcon className="h-6 w-6" />
</div>
<h4 className="text-2xl font-bold text-slate-900">
<h4 className="text-2xl font-bold text-gray-900">
Results you can expect
</h4>
</div>
<ul className="space-y-4 text-sm text-slate-700">
<ul className="space-y-4 text-sm text-gray-700">
{[
{ text: "30-60 day onboarding to deploy automation and Thinker governance.", color: "bg-[#0693e3]" },
{ text: "3-5× increase in content throughput without sacrificing editorial quality.", color: "bg-[#0bbf87]" },
{ text: "Clear ROI dashboards tying automation to revenue outcomes.", color: "bg-[#ff7a00]" },
{ text: "30-60 day onboarding to deploy automation and Thinker governance.", color: "bg-[var(--color-primary)]" },
{ text: "3-5× increase in content throughput without sacrificing editorial quality.", color: "bg-[var(--color-success)]" },
{ text: "Clear ROI dashboards tying automation to revenue outcomes.", color: "bg-[var(--color-warning)]" },
].map((item, index) => (
<li key={item.text} className="flex gap-3">
<span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
@@ -178,16 +178,16 @@ const CaseStudies: React.FC = () => {
))}
</ul>
</div>
<div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
<div className="rounded-2xl border-2 border-gray-200 bg-white p-8 space-y-6 shadow-sm">
<div className="flex items-center gap-3">
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
<CheckCircleIcon className="h-6 w-6" />
</div>
<h4 className="text-2xl font-bold text-slate-900">
<h4 className="text-2xl font-bold text-gray-900">
Customer advisory board
</h4>
</div>
<p className="text-base text-slate-700 leading-relaxed">
<p className="text-base text-gray-700 leading-relaxed">
Igny8's roadmap is shaped by an active community of customer strategists, agency partners, and product marketers. Join and get early access to features, template libraries, and industry benchmarks.
</p>
<button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
@@ -199,7 +199,7 @@ const CaseStudies: React.FC = () => {
</section>
{/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
{/* Radial glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />

48
frontend/src/marketing/pages/Contact.tsx
View File

@@ -8,7 +8,7 @@ const Contact: React.FC = () => {
return (
<>
<SEO meta={getMetaTags("contact")} />
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
<div className="bg-gradient-to-b from-white via-gray-50/30 to-white text-gray-900">
<section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
<SectionHeading
eyebrow="Contact"
@@ -20,87 +20,87 @@ const Contact: React.FC = () => {
<section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
<form className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-10 space-y-6 shadow-lg">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<label className="flex flex-col gap-2 text-sm text-slate-600">
<label className="flex flex-col gap-2 text-sm text-gray-600">
First name
<input
type="text"
placeholder="Alex"
className="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-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
/>
</label>
<label className="flex flex-col gap-2 text-sm text-slate-600">
<label className="flex flex-col gap-2 text-sm text-gray-600">
Last name
<input
type="text"
placeholder="Rivera"
className="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-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
/>
</label>
</div>
<label className="flex flex-col gap-2 text-sm text-slate-600">
<label className="flex flex-col gap-2 text-sm text-gray-600">
Work email
<input
type="email"
placeholder="you@company.com"
className="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-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
/>
</label>
<label className="flex flex-col gap-2 text-sm text-slate-600">
<label className="flex flex-col gap-2 text-sm text-gray-600">
Company
<input
type="text"
placeholder="Company name"
className="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-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
/>
</label>
<label className="flex flex-col gap-2 text-sm text-slate-600">
<label className="flex flex-col gap-2 text-sm text-gray-600">
How can we help?
<textarea
rows={4}
placeholder="Tell us about your current workflow, challenges, and goals."
className="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-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
className="rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
/>
</label>
<button
type="submit"
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all w-full"
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-brand-700)] hover:from-[var(--color-brand-700)] hover:to-[var(--color-primary)] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[var(--color-primary)]/30 transition-all w-full"
>
Book strategy call
</button>
</form>
<div className="space-y-8">
<div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-8 space-y-4 text-sm text-slate-600">
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[#0bbf87]"></span>
<div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/10 to-white p-8 space-y-4 text-sm text-gray-600">
<h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[var(--color-success)]"></span>
Calendly placeholder
</h3>
<div className="aspect-[4/3] rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white flex items-center justify-center text-xs text-slate-500 shadow-inner">
<div className="aspect-[4/3] rounded-2xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white flex items-center justify-center text-xs text-gray-500 shadow-inner">
Embed Calendly iframe here
</div>
<p>
Prefer async? Email us at{" "}
<a href="mailto:hello@igny8.com" className="text-[#0693e3] hover:text-[#0472b8] font-semibold">
<a href="mailto:hello@igny8.com" className="text-[var(--color-primary)] hover:text-[var(--color-brand-700)] font-semibold">
hello@igny8.com
</a>{" "}
or join our community Slack.
</p>
</div>
<div className="rounded-3xl border-2 border-[#ff7a00]/30 bg-gradient-to-br from-[#ff7a00]/10 to-white p-8 space-y-4">
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[#ff7a00]"></span>
<div className="rounded-3xl border-2 border-[var(--color-warning)]/30 bg-gradient-to-br from-[var(--color-warning)]/10 to-white p-8 space-y-4">
<h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[var(--color-warning)]"></span>
Support perks
</h3>
<ul className="space-y-3 text-sm text-slate-600">
<ul className="space-y-3 text-sm text-gray-600">
{[
{ text: "24-hour response time on all Launch+ plans.", color: "bg-[#0693e3]" },
{ text: "Dedicated success architect for Scale and Enterprise.", color: "bg-[#0bbf87]" },
{ text: "Migration services when replacing legacy content stacks.", color: "bg-[#ff7a00]" },
{ text: "24-hour response time on all Launch+ plans.", color: "bg-[var(--color-primary)]" },
{ text: "Dedicated success architect for Scale and Enterprise.", color: "bg-[var(--color-success)]" },
{ text: "Migration services when replacing legacy content stacks.", color: "bg-[var(--color-warning)]" },
].map((item) => (
<li key={item.text} className="flex gap-3">
<span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} />

68
frontend/src/marketing/pages/Home.tsx
View File

@@ -119,7 +119,7 @@ const Home: React.FC = () => {
<SEO meta={getMetaTags("home")} />
<div className="bg-white">
{/* HERO SECTION */}
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
{/* 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%)]" />
@@ -157,11 +157,11 @@ const Home: React.FC = () => {
{/* 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="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-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 className="w-3 h-3 rounded-full bg-error-500/50" />
<div className="w-3 h-3 rounded-full bg-warning-500/50" />
<div className="w-3 h-3 rounded-full bg-success-500/50" />
</div>
</div>
<img
@@ -179,10 +179,10 @@ const Home: React.FC = () => {
</section>
{/* SOCIAL PROOF LOGOS */}
<section className="py-8 bg-white border-b border-slate-100">
<section className="py-8 bg-white border-b border-gray-100">
<div className="max-w-6xl mx-auto px-6">
<div className="flex flex-col gap-4 items-center">
<span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-medium">
<span className="text-xs uppercase tracking-[0.28em] text-gray-500 font-medium">
Trusted by modern organic teams
</span>
<div className="flex flex-wrap justify-center gap-8 md:gap-10 items-center">
@@ -207,10 +207,10 @@ const Home: React.FC = () => {
<section className="py-24 bg-gradient-to-b from-white via-[var(--color-primary)]/3 to-[var(--color-purple)]/3">
<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">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
How Igny8 Works
</h2>
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
A seamless pipeline from keyword discovery to published content
</p>
</div>
@@ -230,7 +230,7 @@ const Home: React.FC = () => {
{/* 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>
<span className="text-sm font-semibold text-gray-900 text-center">{step.name}</span>
</div>
);
})}
@@ -259,12 +259,12 @@ const Home: React.FC = () => {
<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-10 blur-xl`} />
<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="relative rounded-2xl border-2 border-gray-200 bg-white shadow-2xl overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-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 className="w-3 h-3 rounded-full bg-error-500/50" />
<div className="w-3 h-3 rounded-full bg-warning-500/50" />
<div className="w-3 h-3 rounded-full bg-success-500/50" />
</div>
</div>
<img
@@ -285,16 +285,16 @@ const Home: React.FC = () => {
<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>
<h3 className="text-3xl md:text-4xl font-bold text-gray-900">{module.title}</h3>
<p className="text-sm text-gray-600 mt-1">{module.subtitle}</p>
</div>
</div>
<p className="text-lg text-slate-700 mb-6 leading-relaxed">
<p className="text-lg text-gray-700 mb-6 leading-relaxed">
{module.description}
</p>
<ul className="space-y-3 mb-8">
{module.bullets.map((bullet, i) => (
<li key={i} className="flex gap-3 text-slate-700">
<li key={i} className="flex gap-3 text-gray-700">
<span className={`mt-2 size-2 rounded-full bg-gradient-to-br ${module.color} shadow-sm flex-shrink-0`} />
<span>{bullet}</span>
</li>
@@ -315,7 +315,7 @@ const Home: React.FC = () => {
})}
{/* AUTOMATION SNAPSHOT SECTION */}
<section className="py-24 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
<section className="py-24 bg-gradient-to-br from-gray-950 via-gray-900 to-gray-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%)]" />
@@ -333,7 +333,7 @@ const Home: React.FC = () => {
Automation Engine
</h2>
</div>
<p className="text-xl text-slate-200 mb-8 leading-relaxed font-medium">
<p className="text-xl text-gray-200 mb-8 leading-relaxed font-medium">
Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute.
</p>
@@ -355,7 +355,7 @@ const Home: React.FC = () => {
</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 className="text-sm text-gray-300">Automated handoff with quality checks</div>
</div>
</div>
))}
@@ -365,11 +365,11 @@ const Home: React.FC = () => {
<div className="grid grid-cols-2 gap-4">
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
<div className="text-3xl font-bold text-white mb-1">87%</div>
<div className="text-sm text-slate-400">Completion Rate</div>
<div className="text-sm text-gray-400">Completion Rate</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
<div className="text-3xl font-bold text-white mb-1">6×</div>
<div className="text-sm text-slate-400">Faster Velocity</div>
<div className="text-sm text-gray-400">Faster Velocity</div>
</div>
</div>
</div>
@@ -377,11 +377,11 @@ const Home: React.FC = () => {
{/* 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="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-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 className="w-3 h-3 rounded-full bg-error-500/50" />
<div className="w-3 h-3 rounded-full bg-warning-500/50" />
<div className="w-3 h-3 rounded-full bg-success-500/50" />
</div>
</div>
<img
@@ -404,7 +404,7 @@ const Home: React.FC = () => {
<span className="inline-flex items-center rounded-full border border-[var(--color-primary)]/20 bg-[var(--color-primary)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-primary)] mb-4">
Loved by scaling teams
</span>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
Teams ship more content, capture more demand, and see faster ROI with Igny8.
</h2>
</div>
@@ -432,19 +432,19 @@ const Home: React.FC = () => {
{testimonial.name.charAt(0)}
</div>
<p className="text-base text-slate-800 leading-relaxed font-semibold flex-1">
<p className="text-base text-gray-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">
<span className="font-bold text-gray-900 text-lg">{testimonial.name}</span>
<span className="text-sm text-gray-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`}>
<div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-gray-800 text-xs font-bold w-fit shadow-sm`}>
<span>3× faster</span>
<span>•</span>
<span>+132% lift</span>
@@ -457,7 +457,7 @@ const Home: React.FC = () => {
</section>
{/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[#8b5cf6] via-[var(--color-purple)] to-[var(--color-primary)]">
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-purple-400)] via-[var(--color-purple)] to-[var(--color-primary)]">
{/* 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" />

40
frontend/src/marketing/pages/Partners.tsx
View File

@@ -76,17 +76,17 @@ const Partners: React.FC = () => {
<SEO meta={getMetaTags("partners")} />
<div className="bg-white">
{/* HERO SECTION */}
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
<section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-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">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
Partners
</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-gray-900 mb-6">
Grow faster together—build services and solutions on Igny8.
</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-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
Join our partner ecosystem to co-create automations, deliver measurable results, and co-market AI-driven success stories.
</p>
</div>
@@ -100,21 +100,21 @@ const Partners: React.FC = () => {
return (
<div
key={tier.title}
className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-6 hover:shadow-xl hover:-translate-y-1 transition-all"
className="rounded-3xl border-2 border-gray-200 bg-white p-8 flex flex-col gap-6 hover:shadow-xl hover:-translate-y-1 transition-all"
>
<div className="flex items-center gap-4">
<div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${tier.iconColor} items-center justify-center text-white shadow-lg`}>
<Icon className="h-7 w-7" />
</div>
<div>
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600 mb-2">
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-gray-100 text-gray-600 mb-2">
Program
</span>
<h3 className="text-2xl font-bold text-slate-900">{tier.title}</h3>
<h3 className="text-2xl font-bold text-gray-900">{tier.title}</h3>
</div>
</div>
<p className="text-sm text-slate-600 font-medium">{tier.description}</p>
<ul className="space-y-4 text-sm text-slate-700 flex-1">
<p className="text-sm text-gray-600 font-medium">{tier.description}</p>
<ul className="space-y-4 text-sm text-gray-700 flex-1">
{tier.benefits.map((benefit, benefitIdx) => {
const dotColors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]", "bg-[var(--color-purple)]"];
return (
@@ -132,7 +132,7 @@ const Partners: React.FC = () => {
</section>
{/* API & INTEGRATIONS + PARTNER RESOURCES */}
<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-gray-50/30 to-white py-24">
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Left: API & Integrations */}
<div className="space-y-6">
@@ -141,35 +141,35 @@ const Partners: React.FC = () => {
<CodeBracketIcon className="h-6 w-6" />
</div>
<div>
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600 mb-2">
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-gray-100 text-gray-600 mb-2">
API & Integrations
</span>
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">
Embed Igny8 intelligence into your workflows.
</h2>
</div>
</div>
<p className="text-lg text-slate-600 leading-relaxed">
<p className="text-lg text-gray-600 leading-relaxed">
Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting.
</p>
<div className="rounded-2xl border-2 border-slate-200 bg-white p-8 shadow-sm">
<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">
<div className="rounded-2xl border-2 border-gray-200 bg-white p-8 shadow-sm">
<div className="rounded-2xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white h-64 flex items-center justify-center text-sm text-gray-400 shadow-inner">
API docs placeholder
</div>
</div>
</div>
{/* Right: Partner Resources */}
<div className="rounded-2xl border-2 border-slate-200 bg-white p-10 space-y-6 shadow-sm">
<div className="rounded-2xl border-2 border-gray-200 bg-white p-10 space-y-6 shadow-sm">
<div className="flex items-center gap-3">
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
<WrenchScrewdriverIcon className="h-6 w-6" />
</div>
<h4 className="text-2xl font-bold text-slate-900">
<h4 className="text-2xl font-bold text-gray-900">
Partner resources
</h4>
</div>
<ul className="space-y-4 text-sm text-slate-700">
<ul className="space-y-4 text-sm text-gray-700">
{[
{ text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[var(--color-primary)]" },
{ text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[var(--color-success)]" },
@@ -186,7 +186,7 @@ const Partners: React.FC = () => {
</section>
{/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
{/* Radial glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
@@ -209,7 +209,7 @@ const Partners: React.FC = () => {
href="/marketing/images/partner-program.png"
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-[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" />
Download partner deck

120
frontend/src/marketing/pages/Pricing.tsx
View File

@@ -151,7 +151,7 @@ const Pricing: React.FC = () => {
/* Badge component styles */
.badge-success {
background-color: #10b981;
background-color: var(--color-success, #2CA18E);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
@@ -161,19 +161,19 @@ const Pricing: React.FC = () => {
}
.badge-primary {
background: linear-gradient(135deg, #0693e3 0%, #0578c2 100%);
background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
color: white;
padding: 0.375rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
box-shadow: 0 2px 8px rgba(6, 147, 227, 0.3);
box-shadow: 0 2px 8px color-mix(in oklch, var(--color-primary) 30%, transparent);
}
/* Primary button styles */
.btn-primary {
background: linear-gradient(135deg, #0693e3 0%, #0578c2 100%);
background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
@@ -183,12 +183,12 @@ const Pricing: React.FC = () => {
border: none;
cursor: pointer;
width: 100%;
box-shadow: 0 4px 12px rgba(6, 147, 227, 0.3);
box-shadow: 0 4px 12px color-mix(in oklch, var(--color-primary) 30%, transparent);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(6, 147, 227, 0.4);
box-shadow: 0 6px 16px color-mix(in oklch, var(--color-primary) 40%, transparent);
}
.btn-primary:active:not(:disabled) {
@@ -203,21 +203,21 @@ const Pricing: React.FC = () => {
/* Outline button styles */
.btn-outline {
background-color: #1e293b;
background-color: var(--color-gray-800, #1e293b);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
transition: all 0.2s ease;
border: 2px solid #334155;
border: 2px solid var(--color-gray-700, #334155);
cursor: pointer;
width: 100%;
}
.btn-outline:hover:not(:disabled) {
background-color: #334155;
border-color: #475569;
background-color: var(--color-gray-700, #334155);
border-color: var(--color-gray-600, #475569);
transform: translateY(-2px);
}
@@ -233,7 +233,7 @@ const Pricing: React.FC = () => {
/* Featured plan highlight */
.pricing-card-featured {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
background: linear-gradient(135deg, var(--color-gray-800, #1e293b) 0%, var(--color-gray-700, #334155) 100%) !important;
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
@@ -245,20 +245,20 @@ const Pricing: React.FC = () => {
.pricing-card-featured p,
.pricing-card-featured span:not(.badge-primary):not(.btn-primary) {
color: #e2e8f0 !important;
color: var(--color-gray-200, #e2e8f0) !important;
}
.pricing-card-featured li span {
color: #e2e8f0 !important;
color: var(--color-gray-200, #e2e8f0) !important;
}
.pricing-card-featured .line-through {
color: #94a3b8 !important;
color: var(--color-gray-400, #94a3b8) !important;
}
/* Check icon colors */
.pricing-card-featured svg {
color: #10b981 !important;
color: var(--color-success, #2CA18E) !important;
}
/* Strikethrough price */
@@ -269,42 +269,42 @@ const Pricing: React.FC = () => {
`}</style>
<div className="bg-white">
{/* PRICING HERO SECTION */}
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/30 to-white">
<section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-50/30 to-white">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.02),transparent_60%)]" />
<div className="relative max-w-4xl mx-auto px-6 pt-12 md:pt-16 pb-6 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">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
Pricing
</span>
<h1 className="text-4xl md:text-5xl font-bold leading-tight text-slate-900 mb-0">
<h1 className="text-4xl md:text-5xl font-bold leading-tight text-gray-900 mb-0">
Simple plans that scale with your automation goals.
</h1>
</div>
{/* SPECIAL PROMO BANNER */}
<div className="relative max-w-5xl mx-auto px-6 z-10">
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-amber-500 via-orange-500 to-red-500 p-[2px] shadow-xl">
<div className="relative bg-gradient-to-r from-amber-50 via-orange-50 to-red-50 rounded-2xl px-6 py-4 flex items-center justify-center gap-3">
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-warning-500 via-warning-500 to-error-500 p-[2px] shadow-xl">
<div className="relative bg-gradient-to-r from-warning-50 via-warning-50 to-error-50 rounded-2xl px-6 py-4 flex items-center justify-center gap-3">
{/* Fire Icon */}
<svg className="w-6 h-6 text-orange-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
</svg>
{/* Message Text */}
<div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-3">
<span className="inline-flex items-center gap-2 bg-gradient-to-r from-amber-600 to-orange-600 text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-lg">
<span className="inline-flex items-center gap-2 bg-gradient-to-r from-warning-600 to-warning-600 text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-lg">
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
Limited Time
</span>
<p className="text-base sm:text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-700 via-orange-700 to-red-700">
<p className="text-base sm:text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-warning-700 via-warning-700 to-error-700">
Lifetime Discount on all Plans for First 100 Users!
</p>
</div>
{/* Fire Icon */}
<svg className="w-6 h-6 text-orange-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
</svg>
</div>
@@ -317,7 +317,7 @@ const Pricing: React.FC = () => {
<section className="max-w-7xl mx-auto px-6 pb-24">
<div className="text-center py-12">
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
<p className="mt-4 text-slate-600">Loading pricing plans...</p>
<p className="mt-4 text-gray-600">Loading pricing plans...</p>
</div>
</section>
)}
@@ -325,7 +325,7 @@ const Pricing: React.FC = () => {
{error && (
<section className="max-w-7xl mx-auto px-6 pb-24">
<div className="text-center py-12">
<p className="text-red-600">{error}</p>
<p className="text-error-600">{error}</p>
<button
onClick={() => window.location.reload()}
className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)]"
@@ -351,7 +351,7 @@ const Pricing: React.FC = () => {
{/* What's Included Explanation */}
<div className="max-w-5xl mx-auto mt-8 text-center">
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
<p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Every content piece includes High-Opportunity Keywords, AI clustering, idea generation, standard/premium images, Automation, WP publishing, SEO optimization, and internal linking.
</p>
</div>
@@ -361,20 +361,20 @@ const Pricing: React.FC = () => {
{/* COMPARISON TABLE SECTION REMOVED */}
{!loading && !error && false && (
<section className="max-w-7xl mx-auto px-6 pb-24 pt-16">
<h3 className="text-3xl font-bold text-slate-900 mb-8 text-center">
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">
Compare plan capabilities
</h3>
<div className="overflow-hidden rounded-3xl border-2 border-slate-200 bg-white shadow-lg">
<div className="overflow-hidden rounded-3xl border-2 border-gray-200 bg-white shadow-lg">
<div className="overflow-x-auto">
<table className="min-w-full text-sm">
<thead className="bg-gradient-to-r from-[#0693e3]/10 via-[#5d4ae3]/10 to-[#0bbf87]/10 sticky top-0">
<thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-purple)]/10 to-[var(--color-success)]/10 sticky top-0">
<tr>
<th className="px-6 py-4 text-left font-semibold text-slate-900">Capability</th>
<th className="px-6 py-4 text-center font-semibold text-slate-900">Starter</th>
<th className="px-6 py-4 text-center font-semibold text-[var(--color-primary)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
<th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
<th className="px-6 py-4 text-center font-semibold text-gray-900">Starter</th>
<th className="px-6 py-4 text-center font-semibold text-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
Growth
</th>
<th className="px-6 py-4 text-center font-semibold text-slate-900">Scale</th>
<th className="px-6 py-4 text-center font-semibold text-gray-900">Scale</th>
</tr>
</thead>
<tbody>
@@ -382,8 +382,8 @@ const Pricing: React.FC = () => {
// Category row styling
if (row.isCategory) {
return (
<tr key={row.feature} className="bg-gradient-to-r from-slate-100 to-slate-50">
<td colSpan={4} className="px-6 py-4 text-sm font-bold text-slate-900 uppercase tracking-wider">
<tr key={row.feature} className="bg-gradient-to-r from-gray-100 to-gray-50">
<td colSpan={4} className="px-6 py-4 text-sm font-bold text-gray-900 uppercase tracking-wider">
{row.feature}
</td>
</tr>
@@ -393,16 +393,16 @@ const Pricing: React.FC = () => {
return (
<tr
key={row.feature}
className={index % 2 === 0 ? "bg-white" : "bg-slate-50/50"}
className={index % 2 === 0 ? "bg-white" : "bg-gray-50/50"}
>
<td className="px-6 py-5 text-slate-900 font-medium">{row.feature}</td>
<td className="px-6 py-5 text-center text-slate-700">
<td className="px-6 py-5 text-gray-900 font-medium">{row.feature}</td>
<td className="px-6 py-5 text-center text-gray-700">
{row.starter === true ? (
<CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
<CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
) : row.starter === false ? (
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
<XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
) : row.starter === null ? (
<span className="text-slate-400">—</span>
<span className="text-gray-400">—</span>
) : (
<span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
@@ -410,13 +410,13 @@ const Pricing: React.FC = () => {
</span>
)}
</td>
<td className="px-6 py-5 text-center font-medium text-[var(--color-primary)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
<td className="px-6 py-5 text-center font-medium text-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
{row.growth === true ? (
<CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
<CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
) : row.growth === false ? (
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
<XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
) : row.growth === null ? (
<span className="text-slate-400">—</span>
<span className="text-gray-400">—</span>
) : (
<span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
@@ -424,16 +424,16 @@ const Pricing: React.FC = () => {
</span>
)}
</td>
<td className="px-6 py-5 text-center text-slate-700">
<td className="px-6 py-5 text-center text-gray-700">
{row.scale === true ? (
<CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
<CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
) : row.scale === false ? (
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
<XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
) : row.scale === null ? (
<span className="text-slate-400">—</span>
<span className="text-gray-400">—</span>
) : (
<span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[#5d4ae3]"></span>
<span className="size-1.5 rounded-full bg-[var(--color-purple)]"></span>
{row.scale}
</span>
)}
@@ -449,34 +449,34 @@ const Pricing: React.FC = () => {
)}
{/* INFO BLOCKS SECTION */}
<section className="bg-gradient-to-b from-white via-slate-50/30 to-white">
<section className="bg-gradient-to-b from-white via-gray-50/30 to-white">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[#0693e3]/5 via-white to-[#0bbf87]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/5 via-white to-[var(--color-success)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="flex items-center gap-3 mb-4">
<div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
<CreditCardIcon className="h-6 w-6" />
</div>
<h4 className="text-lg font-semibold text-slate-900">
<h4 className="text-lg font-semibold text-gray-900">
Usage-based credits explained
</h4>
</div>
<p className="text-sm text-slate-600 leading-relaxed">
<p className="text-sm text-gray-600 leading-relaxed">
Igny8 credits cover AI-generated drafts, clustering, and image creation. Monitor usage in real time from your dashboard. Credits roll over for 30 days.
</p>
<p className="text-sm text-slate-600 leading-relaxed">
<p className="text-sm text-gray-600 leading-relaxed">
Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
</p>
</div>
<div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/5 via-white to-[#5d4ae3]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-purple)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="flex items-center gap-3 mb-4">
<div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
<ShieldCheckIcon className="h-6 w-6" />
</div>
<h4 className="text-lg font-semibold text-slate-900">
<h4 className="text-lg font-semibold text-gray-900">
Security & compliance
</h4>
</div>
<p className="text-sm text-slate-600 leading-relaxed">
<p className="text-sm text-gray-600 leading-relaxed">
Igny8 supports granular access controls, SSO, audit logging, and data residency requests. Enterprise plans include SOC 2 documentation and custom security reviews.
</p>
</div>
@@ -484,7 +484,7 @@ const Pricing: React.FC = () => {
</section>
{/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
{/* Radial glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />

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

@@ -122,17 +122,17 @@ const Product: React.FC = () => {
<SEO meta={getMetaTags("product")} />
<div className="bg-white">
{/* HERO SECTION */}
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
<section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-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">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
Product
</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-gray-900 mb-6">
One platform for keyword intelligence, AI content, and workflow automation.
</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-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
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 justify-center">
@@ -142,7 +142,7 @@ const Product: React.FC = () => {
)}
{renderCta(
{ label: "Book a demo", href: "/contact" },
"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-[var(--color-primary)] hover:text-[var(--color-primary)] transition"
"inline-flex items-center justify-center rounded-xl border-2 border-gray-300 bg-white text-gray-700 px-8 py-4 text-base font-semibold hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition"
)}
</div>
</div>
@@ -152,10 +152,10 @@ const Product: React.FC = () => {
<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">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
How the IGNY8 Engine Works
</h2>
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
A seamless pipeline from keyword discovery to published content
</p>
</div>
@@ -175,7 +175,7 @@ const Product: React.FC = () => {
{/* 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>
<span className="text-sm font-semibold text-gray-900 text-center">{step.name}</span>
</div>
);
})}
@@ -204,12 +204,12 @@ const Product: React.FC = () => {
<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="relative rounded-2xl border-2 border-gray-200 bg-white shadow-2xl overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-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 className="w-3 h-3 rounded-full bg-error-500/50" />
<div className="w-3 h-3 rounded-full bg-warning-500/50" />
<div className="w-3 h-3 rounded-full bg-success-500/50" />
</div>
</div>
<img
@@ -230,16 +230,16 @@ const Product: React.FC = () => {
<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>
<h3 className="text-3xl md:text-4xl font-bold text-gray-900">{module.title}</h3>
<p className="text-sm text-gray-600 mt-1">{module.subtitle}</p>
</div>
</div>
<p className="text-lg text-slate-700 mb-6 leading-relaxed">
<p className="text-lg text-gray-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">
<li key={i} className="flex gap-3 text-gray-700">
<span className={`mt-2 size-2 rounded-full bg-gradient-to-br ${module.color} shadow-sm flex-shrink-0`} />
<span>{feature}</span>
</li>
@@ -260,7 +260,7 @@ const Product: React.FC = () => {
})}
{/* UNIFIED AUTOMATION ENGINE SECTION */}
<section className="py-24 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
<section className="py-24 bg-gradient-to-br from-gray-950 via-gray-900 to-gray-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%)]" />
@@ -278,7 +278,7 @@ const Product: React.FC = () => {
Unified Automation Engine
</h2>
</div>
<p className="text-xl text-slate-200 mb-8 leading-relaxed font-medium">
<p className="text-xl text-gray-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>
@@ -300,7 +300,7 @@ const Product: React.FC = () => {
</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 className="text-sm text-gray-300">Automated handoff with quality checks</div>
</div>
</div>
))}
@@ -310,11 +310,11 @@ const Product: React.FC = () => {
{/* 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="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-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 className="w-3 h-3 rounded-full bg-error-500/50" />
<div className="w-3 h-3 rounded-full bg-warning-500/50" />
<div className="w-3 h-3 rounded-full bg-success-500/50" />
</div>
</div>
<img
@@ -332,13 +332,13 @@ const Product: React.FC = () => {
<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 className="text-sm text-gray-400">Completion Rate</div>
<div className="text-xs text-gray-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 className="text-sm text-gray-400">Faster Velocity</div>
<div className="text-xs text-gray-500 mt-2">Content creation speed compared to manual processes</div>
</div>
</div>
</div>
@@ -351,7 +351,7 @@ const Product: React.FC = () => {
<span className="inline-flex items-center rounded-full border border-[var(--color-primary)]/20 bg-[var(--color-primary)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-primary)] mb-4">
Loved by scaling teams
</span>
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-4">
Teams ship more content, capture more demand, and see faster ROI with Igny8.
</h2>
</div>
@@ -379,19 +379,19 @@ const Product: React.FC = () => {
{testimonial.name.charAt(0)}
</div>
<p className="text-base text-slate-800 leading-relaxed font-semibold flex-1">
<p className="text-base text-gray-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">
<span className="font-bold text-gray-900 text-lg">{testimonial.name}</span>
<span className="text-sm text-gray-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`}>
<div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-gray-800 text-xs font-bold w-fit shadow-sm`}>
<span>3× faster</span>
<span>•</span>
<span>+132% lift</span>
@@ -404,7 +404,7 @@ const Product: React.FC = () => {
</section>
{/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
{/* 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" />

98
frontend/src/marketing/pages/Resources.tsx
View File

@@ -184,17 +184,17 @@ const Resources: React.FC = () => {
<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">
<section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-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">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-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">
<h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-gray-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">
<p className="text-xl md:text-2xl text-gray-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">
@@ -209,10 +209,10 @@ const Resources: React.FC = () => {
{/* 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">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Learn AI SEO
</h2>
<p className="text-lg text-slate-600 max-w-2xl">
<p className="text-lg text-gray-600 max-w-2xl">
Editorial guidance, frameworks, and strategic insights to master AI-powered content creation.
</p>
</div>
@@ -222,21 +222,21 @@ const Resources: React.FC = () => {
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`}
className={`rounded-3xl border-2 border-gray-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">
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-gray-100 text-gray-600">
{resource.tag}
</span>
</div>
<div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
<div className="text-xs uppercase tracking-[0.2em] text-gray-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>
<h3 className="text-xl font-semibold text-gray-900">{resource.title}</h3>
<p className="text-sm text-gray-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"
@@ -251,7 +251,7 @@ const Resources: React.FC = () => {
<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"
className="inline-flex items-center gap-2 text-base font-semibold text-gray-700 hover:text-[var(--color-primary)] transition"
>
View All Guides
<ArrowRightIcon className="h-5 w-5" />
@@ -260,13 +260,13 @@ const Resources: React.FC = () => {
</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-gray-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">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Build Your System
</h2>
<p className="text-lg text-slate-600 max-w-2xl">
<p className="text-lg text-gray-600 max-w-2xl">
Help users operationalize their workflows with ready-to-use templates and systems.
</p>
</div>
@@ -280,10 +280,10 @@ const Resources: React.FC = () => {
"from-[var(--color-warning)]/10 to-white",
];
const borders = [
"border-[#0693e3]/30",
"border-[#0bbf87]/30",
"border-[#5d4ae3]/30",
"border-[#ff7a00]/30",
"border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30",
"border-[var(--color-warning)]/30",
];
return (
<div
@@ -299,17 +299,17 @@ const Resources: React.FC = () => {
{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"
className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-white/80 text-gray-600 border border-gray-200"
>
{tag}
</span>
))}
</div>
<div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold mb-2">
<div className="text-xs uppercase tracking-[0.2em] text-gray-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>
<h3 className="text-xl font-semibold text-gray-900 mb-3">{resource.title}</h3>
<p className="text-sm text-gray-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"
@@ -327,7 +327,7 @@ const Resources: React.FC = () => {
<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"
className="inline-flex items-center gap-2 text-base font-semibold text-gray-700 hover:text-[var(--color-primary)] transition"
>
Explore Templates
<ArrowRightIcon className="h-5 w-5" />
@@ -340,10 +340,10 @@ const Resources: React.FC = () => {
<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">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Attend or Watch
</h2>
<p className="text-lg text-slate-600 max-w-2xl">
<p className="text-lg text-gray-600 max-w-2xl">
Live + recorded teaching sessions to accelerate your AI content operations.
</p>
</div>
@@ -357,10 +357,10 @@ const Resources: React.FC = () => {
"from-[var(--color-warning)]/10 to-white",
];
const borders = [
"border-[#0693e3]/30",
"border-[#0bbf87]/30",
"border-[#5d4ae3]/30",
"border-[#ff7a00]/30",
"border-[var(--color-primary)]/30",
"border-[var(--color-success)]/30",
"border-[var(--color-purple)]/30",
"border-[var(--color-warning)]/30",
];
return (
<div
@@ -374,29 +374,29 @@ const Resources: React.FC = () => {
<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"
? "bg-[var(--color-success)]/10 text-[var(--color-success)] border border-[var(--color-success)]/30"
: "bg-[var(--color-purple)]/10 text-[var(--color-purple)] border border-[var(--color-purple)]/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">
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-gray-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">
<div className="text-xs uppercase tracking-[0.2em] text-gray-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>
<h3 className="text-xl font-semibold text-gray-900">{resource.title}</h3>
<p className="text-sm text-gray-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)]"
: "border-2 border-gray-300 bg-white text-gray-700 hover:border-[var(--color-primary)] hover:text-[var(--color-primary)]"
}`}
>
{resource.tag === "Live" ? (
@@ -418,7 +418,7 @@ const Resources: React.FC = () => {
<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"
className="inline-flex items-center gap-2 text-base font-semibold text-gray-700 hover:text-[var(--color-primary)] transition"
>
View Schedule
<ArrowRightIcon className="h-5 w-5" />
@@ -428,13 +428,13 @@ const Resources: React.FC = () => {
</section>
{/* 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-gray-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">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Execute Faster
</h2>
<p className="text-lg text-slate-600 max-w-2xl">
<p className="text-lg text-gray-600 max-w-2xl">
Done-for-you components, fast-start kits, and execution tools to get you running immediately.
</p>
</div>
@@ -444,7 +444,7 @@ const Resources: React.FC = () => {
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"
className="rounded-3xl border-2 border-gray-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" />
@@ -453,17 +453,17 @@ const Resources: React.FC = () => {
{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"
className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-gray-100 text-gray-600"
>
{tag}
</span>
))}
</div>
<div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
<div className="text-xs uppercase tracking-[0.2em] text-gray-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>
<h3 className="text-lg font-semibold text-gray-900">{resource.title}</h3>
<p className="text-sm text-gray-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"
@@ -480,11 +480,11 @@ const Resources: React.FC = () => {
</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">
<section className="py-16 bg-gradient-to-r from-[var(--color-success)]/10 via-[var(--color-primary)]/10 to-[var(--color-success)]/10 border-y border-[var(--color-success)]/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">
<p className="text-lg md:text-xl text-gray-900 font-medium leading-relaxed">
Build your full-stack AI content engine with our toolkits from every module — Planner, Writer, Thinker & beyond.
</p>
</div>
@@ -502,7 +502,7 @@ const Resources: React.FC = () => {
</section>
{/* FINAL CTA - Dark Background */}
<section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
<section className="relative overflow-hidden bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
{/* Radial glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.1),transparent_70%)]" />

56
frontend/src/marketing/pages/Solutions.tsx
View File

@@ -60,7 +60,7 @@ const Solutions: React.FC = () => {
color: "from-[var(--color-primary)]/5 to-white",
borderColor: "border-[var(--color-primary)]/20",
iconColor: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
painColor: "bg-rose-500",
painColor: "bg-error-500",
outcomeColor: "bg-[var(--color-primary)]",
},
{
@@ -80,7 +80,7 @@ const Solutions: React.FC = () => {
color: "from-[var(--color-success)]/5 to-white",
borderColor: "border-[var(--color-success)]/20",
iconColor: "from-[var(--color-success)] to-[var(--color-success-dark)]",
painColor: "bg-rose-500",
painColor: "bg-error-500",
outcomeColor: "bg-[var(--color-success)]",
},
{
@@ -100,7 +100,7 @@ const Solutions: React.FC = () => {
color: "from-[var(--color-purple)]/5 to-white",
borderColor: "border-[var(--color-purple)]/20",
iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
painColor: "bg-rose-500",
painColor: "bg-error-500",
outcomeColor: "bg-[var(--color-purple)]",
},
];
@@ -149,17 +149,17 @@ const Solutions: React.FC = () => {
<SEO meta={getMetaTags("solutions")} />
<div className="bg-white">
{/* LIGHT HERO SECTION */}
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
<section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-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">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
Solutions
</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-gray-900 mb-6">
Designed for teams that operate at scale.
</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-gray-600 mb-10 max-w-2xl mx-auto leading-relaxed">
IGNY8 adapts to agencies, publishers, and in-house teams. Automate repetitive work, unify strategy, and accelerate content velocity with AI.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
@@ -169,7 +169,7 @@ const Solutions: React.FC = () => {
)}
{renderCta(
{ label: "Talk to sales", href: "/contact" },
"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-[var(--color-primary)] hover:text-[var(--color-primary)] transition"
"inline-flex items-center justify-center rounded-xl border-2 border-gray-300 bg-white text-gray-700 px-8 py-4 text-base font-semibold hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition"
)}
</div>
</div>
@@ -182,33 +182,33 @@ const Solutions: React.FC = () => {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16">
{/* Left: Persona Badge & Info */}
<div className="space-y-6">
<div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white border-2 border-slate-200 shadow-sm">
<div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white border-2 border-gray-200 shadow-sm">
<div className={`size-3 rounded-full bg-gradient-to-br ${persona.iconColor}`} />
<span className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
<span className="text-xs uppercase tracking-[0.2em] text-gray-600 font-semibold">
Persona
</span>
</div>
<div>
<h3 className="text-3xl md:text-4xl font-bold text-slate-900 mb-3">
<h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
{persona.name}
</h3>
<p className="text-lg text-slate-600 leading-relaxed">
<p className="text-lg text-gray-600 leading-relaxed">
{persona.description}
</p>
</div>
</div>
{/* Middle: Pain Points */}
<div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
<div className="bg-white rounded-2xl border-2 border-gray-200 p-8 shadow-sm">
<div className="flex items-center gap-2 mb-6">
<ExclamationTriangleIcon className="h-5 w-5 text-rose-500" />
<h4 className="text-sm uppercase tracking-[0.2em] text-rose-600 font-semibold">
<ExclamationTriangleIcon className="h-5 w-5 text-error-500" />
<h4 className="text-sm uppercase tracking-[0.2em] text-error-600 font-semibold">
Pain Points
</h4>
</div>
<ul className="space-y-4">
{persona.pains.map((pain, i) => (
<li key={i} className="flex gap-3 text-slate-700">
<li key={i} className="flex gap-3 text-gray-700">
<span className={`mt-1.5 size-2 rounded-full ${persona.painColor} shadow-sm flex-shrink-0`} />
<span>{pain}</span>
</li>
@@ -217,7 +217,7 @@ const Solutions: React.FC = () => {
</div>
{/* Right: IGNY8 Outcomes */}
<div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
<div className="bg-white rounded-2xl border-2 border-gray-200 p-8 shadow-sm">
<div className="flex items-center gap-2 mb-6">
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`}>
@@ -226,7 +226,7 @@ const Solutions: React.FC = () => {
</div>
<ul className="space-y-4">
{persona.outcomes.map((outcome, i) => (
<li key={i} className="flex gap-3 text-slate-700">
<li key={i} className="flex gap-3 text-gray-700">
<span className={`mt-1.5 size-2 rounded-full ${persona.outcomeColor} shadow-sm flex-shrink-0`} />
<span>{outcome}</span>
</li>
@@ -239,7 +239,7 @@ const Solutions: React.FC = () => {
))}
{/* BENEFITS STATISTICS SECTION */}
<section className="py-24 bg-gradient-to-b from-white via-slate-50/30 to-white">
<section className="py-24 bg-gradient-to-b from-white via-gray-50/30 to-white">
<div className="max-w-6xl mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[
@@ -272,7 +272,7 @@ const Solutions: React.FC = () => {
return (
<div
key={index}
className="relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 text-center space-y-4 hover:shadow-2xl hover:-translate-y-1 transition-all group"
className="relative rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-white to-gray-50/50 p-8 text-center space-y-4 hover:shadow-2xl hover:-translate-y-1 transition-all group"
>
{/* Glow effect */}
<div className={`absolute -inset-1 bg-gradient-to-br ${stat.color} rounded-3xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity -z-10 ${stat.glow}`} />
@@ -288,12 +288,12 @@ const Solutions: React.FC = () => {
</div>
{/* Label */}
<div className="text-lg font-semibold text-slate-900">
<div className="text-lg font-semibold text-gray-900">
{stat.label}
</div>
{/* Description */}
<p className="text-sm text-slate-600">
<p className="text-sm text-gray-600">
{stat.description}
</p>
</div>
@@ -307,10 +307,10 @@ const Solutions: React.FC = () => {
<section id="use-cases" 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">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
Use Cases
</h2>
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
Practical applications that help teams scale content production and accelerate growth
</p>
</div>
@@ -321,7 +321,7 @@ const Solutions: React.FC = () => {
return (
<div
key={useCase.title}
className="relative rounded-2xl border-2 border-slate-200 bg-white p-6 space-y-4 hover:shadow-xl hover:-translate-y-1 transition-all group"
className="relative rounded-2xl border-2 border-gray-200 bg-white p-6 space-y-4 hover:shadow-xl hover:-translate-y-1 transition-all group"
>
{/* Icon */}
<div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${useCase.color} items-center justify-center text-white shadow-md`}>
@@ -329,12 +329,12 @@ const Solutions: React.FC = () => {
</div>
{/* Title */}
<h3 className="text-xl font-semibold text-slate-900">
<h3 className="text-xl font-semibold text-gray-900">
{useCase.title}
</h3>
{/* Description */}
<p className="text-sm text-slate-600 leading-relaxed">
<p className="text-sm text-gray-600 leading-relaxed">
{useCase.description}
</p>
@@ -348,7 +348,7 @@ const Solutions: React.FC = () => {
</section>
{/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
{/* Radial glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />

22
frontend/src/marketing/pages/Tour.tsx
View File

@@ -35,7 +35,7 @@ const Tour: React.FC = () => {
return (
<>
<SEO meta={getMetaTags("tour")} />
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
<div className="bg-gradient-to-b from-white via-gray-50/30 to-white text-gray-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
<SectionHeading
eyebrow="Guided Tour"
@@ -43,7 +43,7 @@ const Tour: React.FC = () => {
description="Walk through the workflow that moves market intelligence into production-ready content. Each step builds toward an automated growth flywheel."
/>
<div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-8 shadow-lg">
<div className="aspect-video rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white flex items-center justify-center text-slate-500 text-sm shadow-inner">
<div className="aspect-video rounded-2xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white flex items-center justify-center text-gray-500 text-sm shadow-inner">
Video walkthrough placeholder (embed demo or Loom)
</div>
</div>
@@ -55,7 +55,7 @@ const Tour: React.FC = () => {
{ border: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white", dot: "bg-[var(--color-primary)]" },
{ border: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white", dot: "bg-[var(--color-success)]" },
{ border: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white", dot: "bg-[var(--color-warning)]" },
{ border: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white", dot: "bg-[#5d4ae3]" },
{ border: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white", dot: "bg-[var(--color-purple)]" },
];
const colorScheme = colors[index % colors.length];
return (
@@ -64,14 +64,14 @@ const Tour: React.FC = () => {
className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-8 hover:shadow-xl transition-all`}
>
<div className={`space-y-4 ${index % 2 === 1 ? "lg:order-2" : ""}`}>
<span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold flex items-center gap-2">
<span className="text-xs uppercase tracking-[0.3em] text-gray-500 font-semibold flex items-center gap-2">
<span className={`size-1.5 rounded-full ${colorScheme.dot}`}></span>
Step {index + 1}
</span>
<h3 className="text-2xl font-semibold">{step.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed">{step.description}</p>
<p className="text-sm text-gray-600 leading-relaxed">{step.description}</p>
</div>
<div className={`rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner ${index % 2 === 1 ? "lg:order-1" : ""}`}>
<div className={`rounded-3xl border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white overflow-hidden shadow-inner ${index % 2 === 1 ? "lg:order-1" : ""}`}>
<img
src={`/marketing/images/${step.image}`}
alt={step.title}
@@ -83,19 +83,19 @@ const Tour: React.FC = () => {
})}
</section>
<section className="bg-gradient-to-br from-[var(--color-primary)]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
<section className="bg-gradient-to-br from-[var(--color-primary)]/10 via-gray-50/70 to-[var(--color-success)]/10 border-y border-[var(--color-primary)]/20">
<div className="max-w-6xl mx-auto px-6 py-24 space-y-10">
<SectionHeading
eyebrow="Automation recipes"
title="Pre-built workflows you can launch on day one."
description="Activate automation templates or customize them in minutes. Igny8 tracks dependencies, statuses, and handoffs."
/>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-slate-600">
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-gray-600">
{[
{ name: "Keywords → Ideas", time: "Nightly", highlight: "Targets new opportunities", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
{ name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
{ name: "Tasks → Content", time: "Hourly", highlight: "Generate & queue drafts", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" },
{ name: "Content → Images", time: "On approval", highlight: "Produce branded visuals", color: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white" },
{ name: "Content → Images", time: "On approval", highlight: "Produce branded visuals", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" },
{ name: "Content → WordPress", time: "Manual launch", highlight: "One-click publish", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
{ name: "SERP Win/Loss Alerts", time: "Real-time", highlight: "Trigger optimizations", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
].map((recipe) => (
@@ -103,8 +103,8 @@ const Tour: React.FC = () => {
key={recipe.name}
className={`rounded-3xl border-2 ${recipe.color} bg-gradient-to-br ${recipe.gradient} p-6 space-y-3 hover:shadow-xl transition-all hover:-translate-y-1`}
>
<h4 className="text-base font-semibold text-slate-900">{recipe.name}</h4>
<div className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
<h4 className="text-base font-semibold text-gray-900">{recipe.name}</h4>
<div className="text-xs uppercase tracking-[0.3em] text-gray-500 font-semibold">
{recipe.time}
</div>
<p>{recipe.highlight}</p>

32
frontend/src/marketing/pages/Waitlist.tsx
View File

@@ -23,7 +23,7 @@ const Waitlist: React.FC = () => {
return (
<>
<SEO meta={getMetaTags("waitlist")} />
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
<div className="bg-gradient-to-b from-white via-gray-50/30 to-white text-gray-900">
<section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
<SectionHeading
eyebrow="Roadmap preview"
@@ -34,32 +34,32 @@ const Waitlist: React.FC = () => {
<section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
<div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-10 space-y-6 shadow-lg">
<h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
<h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[var(--color-primary)]"></span>
Join the waitlist
</h3>
<p className="text-sm text-slate-600">
<p className="text-sm text-gray-600">
Share your details and we'll invite you to beta cohorts with onboarding resources and direct feedback loops to our product team.
</p>
<form className="space-y-4">
<input
type="text"
placeholder="Name"
className="w-full 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-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
className="w-full rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
/>
<input
type="email"
placeholder="Work email"
className="w-full 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-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
className="w-full rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
/>
<textarea
rows={4}
placeholder="Tell us about your current workflow and why you're excited."
className="w-full 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-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
className="w-full rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
/>
<button
type="submit"
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all w-full"
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-brand-700)] hover:from-[var(--color-brand-700)] hover:to-[var(--color-primary)] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[var(--color-primary)]/30 transition-all w-full"
>
Join waitlist
</button>
@@ -67,19 +67,19 @@ const Waitlist: React.FC = () => {
</div>
<div className="space-y-6">
<div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-8 space-y-4">
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[#0bbf87]"></span>
<div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/10 to-white p-8 space-y-4">
<h4 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[var(--color-success)]"></span>
What's coming
</h4>
<ul className="space-y-3 text-sm text-slate-600">
<ul className="space-y-3 text-sm text-gray-600">
{roadmapItems.map((item, idx) => {
const colors = ["bg-[var(--color-primary)]", "bg-[#0bbf87]", "bg-[#ff7a00]"];
const colors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]"];
return (
<li key={item.title} className="flex gap-3">
<span className={`mt-1 size-1.5 rounded-full ${colors[idx % colors.length]} shadow-sm`} />
<div>
<div className="font-semibold text-slate-900">{item.title}</div>
<div className="font-semibold text-gray-900">{item.title}</div>
<div>{item.description}</div>
</div>
</li>
@@ -87,9 +87,9 @@ const Waitlist: React.FC = () => {
})}
</ul>
</div>
<div className="rounded-3xl border-2 border-[#ff7a00]/30 bg-gradient-to-br from-[#ff7a00]/10 to-white p-8 text-sm text-slate-600 space-y-3">
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[#ff7a00]"></span>
<div className="rounded-3xl border-2 border-[var(--color-warning)]/30 bg-gradient-to-br from-[var(--color-warning)]/10 to-white p-8 text-sm text-gray-600 space-y-3">
<h4 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[var(--color-warning)]"></span>
How the beta works
</h4>
<p>We onboard new features to the waitlist in weekly waves. You'll receive playbooks, sample workflows, and a feedback channel with our product team.</p>