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

sd

Browse Source
This commit is contained in:
Desktop
2025-11-14 07:24:20 +05:00
parent 74c8a57dc3
commit 628620406d
22 changed files with 303 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,9 +39,9 @@ const CTASection: React.FC<CTASectionProps> = ({
return ( 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-slate-50 to-white">
<div className="max-w-5xl mx-auto px-6"> <div className="max-w-5xl mx-auto px-6">
<div className="relative overflow-hidden rounded-3xl border-2 border-[#0693e3]/20 bg-gradient-to-br from-[#0693e3]/5 via-[#5d4ae3]/5 to-[#0bbf87]/5 p-10 md:p-14 shadow-xl"> <div className="relative overflow-hidden rounded-3xl border-2 border-[var(--igny8-blue)]/20 bg-gradient-to-br from-[var(--igny8-blue)]/5 via-[var(--igny8-purple)]/5 to-[var(--igny8-green)]/5 p-10 md:p-14 shadow-xl">
<div className="absolute inset-0 bg-gradient-to-r from-[#0693e3]/10 via-transparent to-[#5d4ae3]/10" /> <div className="absolute inset-0 bg-gradient-to-r from-[var(--igny8-blue)]/10 via-transparent to-[var(--igny8-purple)]/10" />
<div className="absolute -inset-1 bg-gradient-to-r from-[#0693e3]/20 via-[#5d4ae3]/20 to-[#0bbf87]/20 rounded-3xl blur-xl -z-10 opacity-50" /> <div className="absolute -inset-1 bg-gradient-to-r from-[var(--igny8-blue)]/20 via-[var(--igny8-purple)]/20 to-[var(--igny8-green)]/20 rounded-3xl blur-xl -z-10 opacity-50" />
<div className="relative flex flex-col gap-6"> <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-slate-900 leading-tight">
{title} {title}
@@ -53,7 +53,7 @@ const CTASection: React.FC<CTASectionProps> = ({
{renderAnchor( {renderAnchor(
primaryCta.label, primaryCta.label,
primaryCta.href, primaryCta.href,
"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 md:text-base font-semibold transition shadow-lg shadow-[#0693e3]/30" "inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] hover:from-[var(--igny8-blue-dark)] hover:to-[var(--igny8-blue)] text-white px-6 py-3 text-sm md:text-base font-semibold transition shadow-lg shadow-[var(--igny8-blue)]/30"
)} )}
{secondaryCta && ( {secondaryCta && (
renderAnchor( renderAnchor(

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

@@ -14,10 +14,10 @@ interface FeatureGridProps {
const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => { const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
const iconColors = [ const iconColors = [
"from-[#0693e3] to-[#0472b8]", // Blue "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]", // Blue
"from-[#0bbf87] to-[#08966b]", // Green "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]", // Green
"from-[#ff7a00] to-[#cc5f00]", // Amber "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]", // Amber
"from-[#5d4ae3] to-[#3a2f94]", // Purple "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]", // Purple
]; ];
return ( return (

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

@@ -41,11 +41,11 @@ const HeroSection: React.FC<HeroSectionProps> = ({
return ( 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-[#0d1b2a] via-[#142b3f] to-[#1a3a5a]">
<div className="absolute inset-0 bg-gradient-to-br from-[#0693e3]/10 via-transparent to-[#5d4ae3]/10" /> <div className="absolute inset-0 bg-gradient-to-br from-[var(--igny8-blue)]/10 via-transparent to-[var(--igny8-purple)]/10" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(6,147,227,0.15),transparent_50%)]" /> <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"> <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">
<div className="flex-1 flex flex-col gap-6"> <div className="flex-1 flex flex-col gap-6">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-[#0693e3] bg-[#0693e3]/10 px-4 py-2 rounded-full border border-[#0693e3]/20"> <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-[var(--igny8-blue)] bg-[var(--igny8-blue)]/10 px-4 py-2 rounded-full border border-[var(--igny8-blue)]/20">
AI + SEO PLATFORM AI + SEO PLATFORM
</span> </span>
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white"> <h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
@@ -57,7 +57,7 @@ const HeroSection: React.FC<HeroSectionProps> = ({
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
{renderCta( {renderCta(
primaryCta, primaryCta,
"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 md:text-base font-semibold transition shadow-lg shadow-[#0693e3]/30" "inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] hover:from-[var(--igny8-blue-dark)] hover:to-[var(--igny8-blue)] text-white px-6 py-3 text-sm md:text-base font-semibold transition shadow-lg shadow-[var(--igny8-blue)]/30"
)} )}
{secondaryCta && renderCta( {secondaryCta && renderCta(
secondaryCta, secondaryCta,
@@ -66,15 +66,15 @@ const HeroSection: React.FC<HeroSectionProps> = ({
</div> </div>
</div> </div>
<div className="flex-1 w-full"> <div className="flex-1 w-full">
<div className="relative rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[#0693e3]/20"> <div className="relative rounded-3xl border-2 border-[var(--igny8-blue)]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[var(--igny8-blue)]/20">
<div className="absolute -inset-1 bg-gradient-to-r from-[#0693e3]/20 via-[#5d4ae3]/20 to-[#0bbf87]/20 rounded-3xl blur-xl -z-10" /> <div className="absolute -inset-1 bg-gradient-to-r from-[#0693e3]/20 via-[var(--igny8-purple)]/20 to-[var(--igny8-green)]/20 rounded-3xl blur-xl -z-10" />
<img <img
src={`/marketing/images/${image}`} src={`/marketing/images/${image}`}
alt="Igny8 dashboard preview" alt="Igny8 dashboard preview"
className="w-full h-full object-cover rounded-3xl" className="w-full h-full object-cover rounded-3xl"
/> />
<div className="absolute bottom-6 left-6 bg-gradient-to-br from-[#0d1b2a]/95 to-[#142b3f]/95 backdrop-blur-lg border border-[#0693e3]/30 rounded-2xl px-6 py-4 flex flex-col gap-1 shadow-xl"> <div className="absolute bottom-6 left-6 bg-gradient-to-br from-[#0d1b2a]/95 to-[#142b3f]/95 backdrop-blur-lg border border-[var(--igny8-blue)]/30 rounded-2xl px-6 py-4 flex flex-col gap-1 shadow-xl">
<span className="text-xs uppercase tracking-[0.2em] text-[#0693e3]"> <span className="text-xs uppercase tracking-[0.2em] text-[var(--igny8-blue)]">
End-to-end automation End-to-end automation
</span> </span>
<span className="text-lg font-semibold text-white"> <span className="text-lg font-semibold text-white">

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

@@ -11,9 +11,9 @@ interface MetricsBarProps {
const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => { const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
const accentColors = [ const accentColors = [
"from-[#0693e3] to-[#0472b8]", "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
"from-[#0bbf87] to-[#08966b]", "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
"from-[#ff7a00] to-[#cc5f00]", "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
]; ];
return ( return (

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

@@ -11,10 +11,10 @@ interface WorkflowStepsProps {
const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => { const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
const stepColors = [ const stepColors = [
"from-[#0693e3] to-[#0472b8]", "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
"from-[#0bbf87] to-[#08966b]", "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
"from-[#ff7a00] to-[#cc5f00]", "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
"from-[#5d4ae3] to-[#3a2f94]", "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
]; ];
return ( return (
@@ -25,12 +25,12 @@ const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
return ( return (
<div <div
key={step.title} 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-[#0693e3]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1 group" 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(--igny8-blue)]/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`}> <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} {index + 1}
</div> </div>
<h3 className="text-lg font-semibold text-slate-900 leading-snug group-hover:text-[#0693e3] transition"> <h3 className="text-lg font-semibold text-slate-900 leading-snug group-hover:text-[var(--igny8-blue)] transition">
{step.title} {step.title}
</h3> </h3>
<p className="text-sm text-slate-600 leading-relaxed"> <p className="text-sm text-slate-600 leading-relaxed">

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

@@ -19,7 +19,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<header className="sticky top-0 z-[1100] backdrop-blur-xl bg-white/95 border-b border-slate-200 shadow-sm"> <header className="sticky top-0 z-[1100] backdrop-blur-xl bg-white/95 border-b border-slate-200 shadow-sm">
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between"> <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}> <Link to="/" className="flex items-center gap-3" onClick={closeMobile}>
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[#0693e3]/30"> <span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[var(--igny8-blue)]/30">
IG IG
</span> </span>
<div className="flex flex-col leading-tight"> <div className="flex flex-col leading-tight">
@@ -37,7 +37,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<Link <Link
key={link.name} key={link.name}
to={link.path} to={link.path}
className={`transition hover:text-[#0693e3] ${isActive ? "text-[#0693e3] font-semibold" : "text-slate-700"}`} className={`transition hover:text-[var(--igny8-blue)] ${isActive ? "text-[var(--igny8-blue)] font-semibold" : "text-slate-700"}`}
> >
{link.name} {link.name}
</Link> </Link>
@@ -54,7 +54,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
</a> </a>
<a <a
href="https://app.igny8.com/signup" href="https://app.igny8.com/signup"
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-5 py-2 text-sm font-semibold transition shadow-md shadow-[#0693e3]/30" className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] hover:from-[var(--igny8-blue-dark)] hover:to-[var(--igny8-blue)] text-white px-5 py-2 text-sm font-semibold transition shadow-md shadow-[var(--igny8-blue)]/30"
> >
Start Free Start Free
</a> </a>
@@ -93,7 +93,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
</a> </a>
<a <a
href="https://app.igny8.com/signup" href="https://app.igny8.com/signup"
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-5 py-2 text-sm font-semibold transition shadow-md shadow-[#0693e3]/30" className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] hover:from-[var(--igny8-blue-dark)] hover:to-[var(--igny8-blue)] text-white px-5 py-2 text-sm font-semibold transition shadow-md shadow-[var(--igny8-blue)]/30"
onClick={closeMobile} onClick={closeMobile}
> >
Start Free Start Free
@@ -109,7 +109,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<div className="max-w-6xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-4 gap-12"> <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"> <div className="space-y-4">
<Link to="/" className="inline-flex items-center gap-3"> <Link to="/" className="inline-flex items-center gap-3">
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[#0693e3]/30"> <span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[var(--igny8-blue)]/30">
IG IG
</span> </span>
<div className="flex flex-col leading-tight"> <div className="flex flex-col leading-tight">
@@ -137,7 +137,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<ul className="space-y-3 text-sm text-slate-300"> <ul className="space-y-3 text-sm text-slate-300">
{group.links.map((link) => ( {group.links.map((link) => (
<li key={link.name}> <li key={link.name}>
<Link to={link.path} className="hover:text-[#0693e3] transition"> <Link to={link.path} className="hover:text-[var(--igny8-blue)] transition">
{link.name} {link.name}
</Link> </Link>
</li> </li>

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

@@ -43,7 +43,7 @@ const CaseStudies: React.FC = () => {
summary: summary:
"Publisher running 6 niche brands used Igny8 to centralize research, briefs, and AI-assisted writing. Automation recipes ensured every keyword moved to published content with minimal handoff friction.", "Publisher running 6 niche brands used Igny8 to centralize research, briefs, and AI-assisted writing. Automation recipes ensured every keyword moved to published content with minimal handoff friction.",
image: "case-lumen.png", image: "case-lumen.png",
iconColor: "from-[#0693e3] to-[#0472b8]", iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
}, },
{ {
company: "Northbeam Digital", company: "Northbeam Digital",
@@ -56,7 +56,7 @@ const CaseStudies: React.FC = () => {
summary: summary:
"Multi-client agency adopted Igny8 to standardize workflows, automate reporting, and launch custom Thinker playbooks. Teams now produce keyword research, content, and images for 20+ clients simultaneously.", "Multi-client agency adopted Igny8 to standardize workflows, automate reporting, and launch custom Thinker playbooks. Teams now produce keyword research, content, and images for 20+ clients simultaneously.",
image: "case-northbeam.png", image: "case-northbeam.png",
iconColor: "from-[#0bbf87] to-[#08966b]", iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
}, },
{ {
company: "Arcadia SaaS", company: "Arcadia SaaS",
@@ -69,7 +69,7 @@ const CaseStudies: React.FC = () => {
summary: summary:
"Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into WordPress and HubSpot.", "Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into WordPress and HubSpot.",
image: "case-arcadia.png", image: "case-arcadia.png",
iconColor: "from-[#5d4ae3] to-[#3a2f94]", iconColor: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
}, },
]; ];
@@ -96,7 +96,7 @@ const CaseStudies: React.FC = () => {
<section className="max-w-7xl mx-auto px-6 pb-24 space-y-16"> <section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
{caseStudies.map((cs, idx) => { {caseStudies.map((cs, idx) => {
const metricColors = [ const metricColors = [
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0693e3]" }, { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[var(--igny8-blue)]" },
{ 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-[#0bbf87]" },
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" }, { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
]; ];
@@ -154,7 +154,7 @@ const CaseStudies: React.FC = () => {
<div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-8"> <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-slate-200 bg-white p-8 space-y-6 shadow-sm">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
<CheckCircleIcon className="h-6 w-6" /> <CheckCircleIcon className="h-6 w-6" />
</div> </div>
<h4 className="text-2xl font-bold text-slate-900"> <h4 className="text-2xl font-bold text-slate-900">
@@ -176,7 +176,7 @@ const CaseStudies: React.FC = () => {
</div> </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-slate-200 bg-white p-8 space-y-6 shadow-sm">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-lg">
<CheckCircleIcon className="h-6 w-6" /> <CheckCircleIcon className="h-6 w-6" />
</div> </div>
<h4 className="text-2xl font-bold text-slate-900"> <h4 className="text-2xl font-bold text-slate-900">
@@ -186,7 +186,7 @@ const CaseStudies: React.FC = () => {
<p className="text-base text-slate-700 leading-relaxed"> <p className="text-base text-slate-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. 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> </p>
<button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition"> <button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
Join the CAB waitlist Join the CAB waitlist
<ArrowRightIcon className="h-4 w-4" /> <ArrowRightIcon className="h-4 w-4" />
</button> </button>
@@ -216,7 +216,7 @@ const CaseStudies: React.FC = () => {
</Link> </Link>
<Link <Link
to="/resources" to="/resources"
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(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
> >
<RocketLaunchIcon className="h-5 w-5" /> <RocketLaunchIcon className="h-5 w-5" />
Download case study pack Download case study pack

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

@@ -14,14 +14,14 @@ const Contact: React.FC = () => {
</section> </section>
<section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12"> <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-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-10 space-y-6 shadow-lg"> <form className="rounded-3xl border-2 border-[var(--igny8-blue)]/30 bg-gradient-to-br from-[var(--igny8-blue)]/10 via-white to-[var(--igny8-green)]/5 p-10 space-y-6 shadow-lg">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <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-slate-600">
First name First name
<input <input
type="text" type="text"
placeholder="Alex" 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-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20" 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(--igny8-blue)] focus:ring-2 focus:ring-[var(--igny8-blue)]/20"
/> />
</label> </label>
<label className="flex flex-col gap-2 text-sm text-slate-600"> <label className="flex flex-col gap-2 text-sm text-slate-600">
@@ -29,7 +29,7 @@ const Contact: React.FC = () => {
<input <input
type="text" type="text"
placeholder="Rivera" 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-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20" 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(--igny8-blue)] focus:ring-2 focus:ring-[var(--igny8-blue)]/20"
/> />
</label> </label>
</div> </div>
@@ -39,7 +39,7 @@ const Contact: React.FC = () => {
<input <input
type="email" type="email"
placeholder="you@company.com" 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-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20" 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(--igny8-blue)] focus:ring-2 focus:ring-[var(--igny8-blue)]/20"
/> />
</label> </label>
@@ -48,7 +48,7 @@ const Contact: React.FC = () => {
<input <input
type="text" type="text"
placeholder="Company name" 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-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20" 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(--igny8-blue)] focus:ring-2 focus:ring-[var(--igny8-blue)]/20"
/> />
</label> </label>
@@ -57,7 +57,7 @@ const Contact: React.FC = () => {
<textarea <textarea
rows={4} rows={4}
placeholder="Tell us about your current workflow, challenges, and goals." 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-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20 resize-none" 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(--igny8-blue)] focus:ring-2 focus:ring-[var(--igny8-blue)]/20 resize-none"
/> />
</label> </label>

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

@@ -40,13 +40,13 @@ const Home: React.FC = () => {
}; };
const workflowSteps = [ const workflowSteps = [
{ name: "Keywords", icon: ListBulletIcon, color: "from-[#0693e3] to-[#0472b8]" }, { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[#5d4ae3] to-[#3a2f94]" }, { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]" },
{ name: "Ideas", icon: LightBulbIcon, color: "from-[#ff7a00] to-[#cc5f00]" }, { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]" },
{ name: "Tasks", icon: DocumentTextIcon, color: "from-[#0bbf87] to-[#08966b]" }, { name: "Tasks", icon: DocumentTextIcon, color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]" },
{ name: "Content", icon: SparklesIcon, color: "from-[#0693e3] to-[#0472b8]" }, { name: "Content", icon: SparklesIcon, color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]" },
{ name: "Images", icon: PhotoIcon, color: "from-[#5d4ae3] to-[#3a2f94]" }, { name: "Images", icon: PhotoIcon, color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]" },
{ name: "Publish", icon: BoltIcon, color: "from-[#0bbf87] to-[#08966b]" }, { name: "Publish", icon: BoltIcon, color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]" },
]; ];
const productModules = [ const productModules = [
@@ -60,7 +60,7 @@ const Home: React.FC = () => {
"Priority scoring based on opportunity and competition", "Priority scoring based on opportunity and competition",
], ],
icon: ChartBarIcon, icon: ChartBarIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
image: "planner-dashboard.png", image: "planner-dashboard.png",
link: "/product#planner", link: "/product#planner",
align: "left", align: "left",
@@ -75,7 +75,7 @@ const Home: React.FC = () => {
"Collaborative editing and approval workflows", "Collaborative editing and approval workflows",
], ],
icon: SparklesIcon, icon: SparklesIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
image: "writer-dashboard.png", image: "writer-dashboard.png",
link: "/product#writer", link: "/product#writer",
align: "right", align: "right",
@@ -90,7 +90,7 @@ const Home: React.FC = () => {
"Automated guideline enforcement across all content", "Automated guideline enforcement across all content",
], ],
icon: BoltIcon, icon: BoltIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
image: "thinker-dashboard.png", image: "thinker-dashboard.png",
link: "/product#thinker", link: "/product#thinker",
align: "left", align: "left",
@@ -105,7 +105,7 @@ const Home: React.FC = () => {
"Real-time monitoring and error handling", "Real-time monitoring and error handling",
], ],
icon: PhotoIcon, icon: PhotoIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
image: "automation-dashboard.png", image: "automation-dashboard.png",
link: "/product#automation", link: "/product#automation",
align: "right", align: "right",
@@ -115,7 +115,7 @@ const Home: React.FC = () => {
return ( return (
<div className="bg-white"> <div className="bg-white">
{/* HERO SECTION */} {/* HERO SECTION */}
<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(--igny8-blue)] via-[var(--igny8-purple)] to-[#8b5cf6]">
{/* Radial glow behind headline */} {/* 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_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" /> <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
@@ -136,7 +136,7 @@ const Home: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-4 mt-2"> <div className="flex flex-col sm:flex-row gap-4 mt-2">
{renderCta( {renderCta(
{ label: "Start Free", href: "https://app.igny8.com/signup" }, { label: "Start Free", href: "https://app.igny8.com/signup" },
"inline-flex items-center justify-center rounded-xl bg-white text-[#0693e3] px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5" "inline-flex items-center justify-center rounded-xl bg-white text-[var(--igny8-blue)] px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
)} )}
{renderCta( {renderCta(
{ label: "Book Demo", href: "/contact" }, { label: "Book Demo", href: "/contact" },
@@ -149,7 +149,7 @@ const Home: React.FC = () => {
<div className="relative z-10"> <div className="relative z-10">
<div className="relative scale-110 lg:scale-125"> <div className="relative scale-110 lg:scale-125">
{/* Soft glow behind screenshot */} {/* Soft glow behind screenshot */}
<div className="absolute -inset-8 bg-gradient-to-br from-white/30 via-[#0693e3]/20 to-[#5d4ae3]/20 rounded-3xl blur-3xl" /> <div className="absolute -inset-8 bg-gradient-to-br from-white/30 via-[var(--igny8-blue)]/20 to-[var(--igny8-purple)]/20 rounded-3xl blur-3xl" />
{/* Device frame effect */} {/* Device frame effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" /> <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="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-2xl overflow-hidden">
@@ -167,7 +167,7 @@ const Home: React.FC = () => {
/> />
</div> </div>
{/* Soft shadow */} {/* Soft shadow */}
<div className="absolute -bottom-8 -left-8 right-8 h-32 bg-gradient-to-t from-[#0693e3]/20 to-transparent blur-3xl -z-10" /> <div className="absolute -bottom-8 -left-8 right-8 h-32 bg-gradient-to-t from-[var(--igny8-blue)]/20 to-transparent blur-3xl -z-10" />
</div> </div>
</div> </div>
</div> </div>
@@ -200,7 +200,7 @@ const Home: React.FC = () => {
</section> </section>
{/* HOW IGNY8 WORKS (PIPELINE) */} {/* HOW IGNY8 WORKS (PIPELINE) */}
<section className="py-24 bg-gradient-to-b from-white via-[#0693e3]/3 to-[#5d4ae3]/3"> <section className="py-24 bg-gradient-to-b from-white via-[var(--igny8-blue)]/3 to-[var(--igny8-purple)]/3">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16"> <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-slate-900 mb-4">
@@ -214,7 +214,7 @@ const Home: React.FC = () => {
{/* Horizontal Timeline */} {/* Horizontal Timeline */}
<div className="relative"> <div className="relative">
{/* Enhanced connecting line with shadow */} {/* Enhanced connecting line with shadow */}
<div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[#0693e3] via-[#5d4ae3] via-[#ff7a00] via-[#0bbf87] to-[#0693e3] opacity-25 hidden md:block shadow-lg shadow-[#0693e3]/20" /> <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[var(--igny8-blue)] via-[var(--igny8-purple)] via-[var(--igny8-amber)] via-[var(--igny8-green)] to-[var(--igny8-blue)] opacity-25 hidden md:block shadow-lg shadow-[var(--igny8-blue)]/20" />
<div className="grid grid-cols-2 md:grid-cols-7 gap-6 md:gap-4"> <div className="grid grid-cols-2 md:grid-cols-7 gap-6 md:gap-4">
{workflowSteps.map((step, index) => { {workflowSteps.map((step, index) => {
@@ -241,9 +241,9 @@ const Home: React.FC = () => {
const isLeft = module.align === "left"; const isLeft = module.align === "left";
const backgroundTints = [ const backgroundTints = [
"bg-white", "bg-white",
"bg-gradient-to-b from-[#0693e3]/1 to-white", "bg-gradient-to-b from-[var(--igny8-blue)]/1 to-white",
"bg-gradient-to-b from-[#0bbf87]/1 to-white", "bg-gradient-to-b from-[var(--igny8-green)]/1 to-white",
"bg-gradient-to-b from-[#5d4ae3]/1 to-white", "bg-gradient-to-b from-[var(--igny8-purple)]/1 to-white",
]; ];
return ( return (
@@ -322,7 +322,7 @@ const Home: React.FC = () => {
{/* Left: Content */} {/* Left: Content */}
<div className="z-10"> <div className="z-10">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#5d4ae3] flex items-center justify-center text-white shadow-lg shadow-[#0693e3]/30"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-purple)] flex items-center justify-center text-white shadow-lg shadow-[var(--igny8-blue)]/30">
<BoltIcon className="h-6 w-6" /> <BoltIcon className="h-6 w-6" />
</div> </div>
<h2 className="text-4xl md:text-5xl font-bold text-white"> <h2 className="text-4xl md:text-5xl font-bold text-white">
@@ -336,12 +336,12 @@ const Home: React.FC = () => {
{/* Automation Timeline with neon glows */} {/* Automation Timeline with neon glows */}
<div className="space-y-6 mb-8"> <div className="space-y-6 mb-8">
{[ {[
{ from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" }, { from: "Keywords", to: "Clusters", icon: "→", color: "from-[var(--igny8-blue)] to-[var(--igny8-purple)]", glow: "shadow-[var(--igny8-blue)]/50" },
{ from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" }, { from: "Clusters", to: "Ideas", icon: "→", color: "from-[var(--igny8-purple)] to-[var(--igny8-amber)]", glow: "shadow-[var(--igny8-purple)]/50" },
{ from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" }, { from: "Ideas", to: "Tasks", icon: "→", color: "from-[var(--igny8-amber)] to-[var(--igny8-green)]", glow: "shadow-[var(--igny8-amber)]/50" },
{ from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" }, { from: "Tasks", to: "Content", icon: "→", color: "from-[var(--igny8-green)] to-[var(--igny8-blue)]", glow: "shadow-[var(--igny8-green)]/50" },
{ from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" }, { from: "Content", to: "Images", icon: "→", color: "from-[var(--igny8-blue)] to-[var(--igny8-purple)]", glow: "shadow-[var(--igny8-blue)]/50" },
{ from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" }, { from: "Images", to: "Publish", icon: "→", color: "from-[var(--igny8-purple)] to-[var(--igny8-green)]", glow: "shadow-[var(--igny8-purple)]/50" },
].map((handoff, i) => ( ].map((handoff, i) => (
<div key={i} className="flex items-center gap-4"> <div key={i} className="flex items-center gap-4">
<div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}> <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
@@ -387,7 +387,7 @@ const Home: React.FC = () => {
/> />
</div> </div>
{/* Glow effect */} {/* Glow effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-[#0693e3]/20 to-[#5d4ae3]/20 rounded-2xl blur-2xl -z-10" /> <div className="absolute -inset-4 bg-gradient-to-br from-[var(--igny8-blue)]/20 to-[var(--igny8-purple)]/20 rounded-2xl blur-2xl -z-10" />
</div> </div>
</div> </div>
</div> </div>
@@ -397,7 +397,7 @@ const Home: React.FC = () => {
<section className="py-24 bg-white"> <section className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-12"> <div className="text-center mb-12">
<span className="inline-flex items-center rounded-full border border-[#0693e3]/20 bg-[#0693e3]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[#0693e3] mb-4"> <span className="inline-flex items-center rounded-full border border-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--igny8-blue)] mb-4">
Loved by scaling teams Loved by scaling teams
</span> </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-slate-900 mb-4">
@@ -408,14 +408,14 @@ const Home: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{testimonials.map((testimonial, index) => { {testimonials.map((testimonial, index) => {
const gradientColors = [ const gradientColors = [
"from-[#0693e3]/20 to-[#0472b8]/10", "from-[var(--igny8-blue)]/20 to-[var(--igny8-blue-dark)]/10",
"from-[#0bbf87]/20 to-[#08966b]/10", "from-[var(--igny8-green)]/20 to-[var(--igny8-green-dark)]/10",
"from-[#5d4ae3]/20 to-[#3a2f94]/10", "from-[var(--igny8-purple)]/20 to-[var(--igny8-purple-dark)]/10",
]; ];
const borderColors = [ const borderColors = [
"border-[#0693e3]/30", "border-[var(--igny8-blue)]/30",
"border-[#0bbf87]/30", "border-[var(--igny8-green)]/30",
"border-[#5d4ae3]/30", "border-[var(--igny8-purple)]/30",
]; ];
return ( return (
@@ -453,7 +453,7 @@ const Home: React.FC = () => {
</section> </section>
{/* FINAL CTA */} {/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[#8b5cf6] via-[#5d4ae3] to-[#0693e3]"> <section className="relative overflow-hidden bg-gradient-to-br from-[#8b5cf6] via-[var(--igny8-purple)] to-[var(--igny8-blue)]">
{/* Dashboard overlay in background */} {/* Dashboard overlay in background */}
<div className="absolute inset-0 opacity-10"> <div className="absolute inset-0 opacity-10">
<div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" /> <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
@@ -474,7 +474,7 @@ const Home: React.FC = () => {
href="https://app.igny8.com/signup" href="https://app.igny8.com/signup"
target="_blank" target="_blank"
rel="noreferrer" 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(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
> >
<RocketLaunchIcon className="h-5 w-5" /> <RocketLaunchIcon className="h-5 w-5" />
Start Free Start Free

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

@@ -43,7 +43,7 @@ const Partners: React.FC = () => {
"Access to automation templates and think tank sessions", "Access to automation templates and think tank sessions",
], ],
icon: CheckCircleIcon, icon: CheckCircleIcon,
iconColor: "from-[#0693e3] to-[#0472b8]", iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
}, },
{ {
title: "Technology Partner", title: "Technology Partner",
@@ -54,7 +54,7 @@ const Partners: React.FC = () => {
"Shared lead programs and launch promotion campaigns", "Shared lead programs and launch promotion campaigns",
], ],
icon: CodeBracketIcon, icon: CodeBracketIcon,
iconColor: "from-[#0bbf87] to-[#08966b]", iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
}, },
{ {
title: "Affiliate & Advocate", title: "Affiliate & Advocate",
@@ -65,7 +65,7 @@ const Partners: React.FC = () => {
"Custom reporting dashboards to track referred accounts", "Custom reporting dashboards to track referred accounts",
], ],
icon: RocketLaunchIcon, icon: RocketLaunchIcon,
iconColor: "from-[#ff7a00] to-[#cc5f00]", iconColor: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
}, },
]; ];
@@ -112,7 +112,7 @@ const Partners: React.FC = () => {
<p className="text-sm text-slate-600 font-medium">{tier.description}</p> <p className="text-sm text-slate-600 font-medium">{tier.description}</p>
<ul className="space-y-4 text-sm text-slate-700 flex-1"> <ul className="space-y-4 text-sm text-slate-700 flex-1">
{tier.benefits.map((benefit, benefitIdx) => { {tier.benefits.map((benefit, benefitIdx) => {
const dotColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"]; const dotColors = ["bg-[var(--igny8-blue)]", "bg-[var(--igny8-green)]", "bg-[var(--igny8-amber)]", "bg-[var(--igny8-purple)]"];
return ( return (
<li key={benefit} className="flex gap-3"> <li key={benefit} className="flex gap-3">
<span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} /> <span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />
@@ -133,7 +133,7 @@ const Partners: React.FC = () => {
{/* Left: API & Integrations */} {/* Left: API & Integrations */}
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
<CodeBracketIcon className="h-6 w-6" /> <CodeBracketIcon className="h-6 w-6" />
</div> </div>
<div> <div>
@@ -158,7 +158,7 @@ const Partners: React.FC = () => {
{/* Right: Partner Resources */} {/* 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-slate-200 bg-white p-10 space-y-6 shadow-sm">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-lg">
<WrenchScrewdriverIcon className="h-6 w-6" /> <WrenchScrewdriverIcon className="h-6 w-6" />
</div> </div>
<h4 className="text-2xl font-bold text-slate-900"> <h4 className="text-2xl font-bold text-slate-900">
@@ -167,9 +167,9 @@ const Partners: React.FC = () => {
</div> </div>
<ul className="space-y-4 text-sm text-slate-700"> <ul className="space-y-4 text-sm text-slate-700">
{[ {[
{ text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[#0693e3]" }, { text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[var(--igny8-blue)]" },
{ text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[#0bbf87]" }, { text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[var(--igny8-green)]" },
{ text: "Quarterly partner labs to showcase launches and integrations.", color: "bg-[#ff7a00]" }, { text: "Quarterly partner labs to showcase launches and integrations.", color: "bg-[var(--igny8-amber)]" },
].map((item, index) => ( ].map((item, index) => (
<li key={item.text} className="flex gap-3"> <li key={item.text} className="flex gap-3">
<span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} /> <span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />

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

@@ -45,7 +45,7 @@ const Pricing: React.FC = () => {
cadence: "per month", cadence: "per month",
description: "For small teams starting workflows.", description: "For small teams starting workflows.",
icon: SparklesIcon, icon: SparklesIcon,
iconColor: "from-[#0693e3] to-[#0472b8]", iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
features: [ features: [
"3 sites", "3 sites",
"5 users", "5 users",
@@ -69,7 +69,7 @@ const Pricing: React.FC = () => {
cadence: "per month", cadence: "per month",
description: "For teams automating multiple workflows.", description: "For teams automating multiple workflows.",
icon: BoltIcon, icon: BoltIcon,
iconColor: "from-[#0bbf87] to-[#08966b]", iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
features: [ features: [
"10 sites", "10 sites",
"10 users", "10 users",
@@ -95,7 +95,7 @@ const Pricing: React.FC = () => {
cadence: "per month", cadence: "per month",
description: "For publishers and large orgs needing deeper control.", description: "For publishers and large orgs needing deeper control.",
icon: ChartBarIcon, icon: ChartBarIcon,
iconColor: "from-[#5d4ae3] to-[#3a2f94]", iconColor: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
features: [ features: [
"25 sites", "25 sites",
"25 users", "25 users",
@@ -239,7 +239,7 @@ const Pricing: React.FC = () => {
key={tier.name} key={tier.name}
className={`relative rounded-3xl border-2 ${ className={`relative rounded-3xl border-2 ${
tier.featured tier.featured
? "border-[#0693e3]/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]" ? "border-[var(--igny8-blue)]/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]"
: "border-slate-200 bg-gradient-to-br from-white to-slate-50/50" : "border-slate-200 bg-gradient-to-br from-white to-slate-50/50"
} p-10 flex flex-col gap-6 hover:shadow-xl transition-all group ${ } p-10 flex flex-col gap-6 hover:shadow-xl transition-all group ${
tier.featured ? "lg:scale-105" : "hover:-translate-y-1" tier.featured ? "lg:scale-105" : "hover:-translate-y-1"
@@ -258,8 +258,8 @@ const Pricing: React.FC = () => {
<span <span
className={`inline-flex items-center rounded-full border px-3 py-1 text-[10px] uppercase tracking-[0.25em] mb-2 ${ className={`inline-flex items-center rounded-full border px-3 py-1 text-[10px] uppercase tracking-[0.25em] mb-2 ${
tier.featured tier.featured
? "border-[#0693e3]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]" ? "border-[var(--igny8-blue)]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]"
: "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[#0693e3]" : "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[var(--igny8-blue)]"
}`} }`}
> >
{tier.badge} {tier.badge}
@@ -287,7 +287,7 @@ const Pricing: React.FC = () => {
{tier.features.map((feature, idx) => { {tier.features.map((feature, idx) => {
// Subtle check icons: light bg with dark check for starter/scale, colored for growth // Subtle check icons: light bg with dark check for starter/scale, colored for growth
const checkStyle = tier.featured const checkStyle = tier.featured
? "bg-[#0bbf87]/10 text-[#0bbf87]" ? "bg-[var(--igny8-green)]/10 text-[#0bbf87]"
: "bg-slate-100 text-slate-600"; : "bg-slate-100 text-slate-600";
return ( return (
<li key={feature} className="flex gap-3 items-start"> <li key={feature} className="flex gap-3 items-start">
@@ -304,8 +304,8 @@ const Pricing: React.FC = () => {
href="https://app.igny8.com/signup" href="https://app.igny8.com/signup"
className={`inline-flex w-full items-center justify-center rounded-full px-6 py-3 text-sm font-semibold transition ${ className={`inline-flex w-full items-center justify-center rounded-full px-6 py-3 text-sm font-semibold transition ${
tier.featured tier.featured
? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30" ? "bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30"
: "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-[#0693e3] hover:bg-white" : "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-[var(--igny8-blue)] hover:bg-white"
}`} }`}
> >
Start free trial Start free trial
@@ -329,7 +329,7 @@ const Pricing: React.FC = () => {
<tr> <tr>
<th className="px-6 py-4 text-left font-semibold text-slate-900">Capability</th> <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-slate-900">Starter</th>
<th className="px-6 py-4 text-center font-semibold text-[#0693e3] bg-gradient-to-br from-[#0693e3]/5 to-transparent"> <th className="px-6 py-4 text-center font-semibold text-[var(--igny8-blue)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
Growth Growth
</th> </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-slate-900">Scale</th>
@@ -349,19 +349,19 @@ const Pricing: React.FC = () => {
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" /> <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
) : ( ) : (
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[#0693e3]"></span> <span className="size-1.5 rounded-full bg-[var(--igny8-blue)]"></span>
{row.starter} {row.starter}
</span> </span>
)} )}
</td> </td>
<td className="px-6 py-5 text-center font-medium text-[#0693e3] bg-gradient-to-br from-[#0693e3]/5 to-transparent"> <td className="px-6 py-5 text-center font-medium text-[var(--igny8-blue)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
{row.growth === true ? ( {row.growth === true ? (
<CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" /> <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
) : row.growth === false ? ( ) : row.growth === false ? (
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" /> <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
) : ( ) : (
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[#0693e3]"></span> <span className="size-1.5 rounded-full bg-[var(--igny8-blue)]"></span>
{row.growth} {row.growth}
</span> </span>
)} )}
@@ -389,9 +389,9 @@ const Pricing: React.FC = () => {
{/* INFO BLOCKS SECTION */} {/* 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-slate-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="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-[#0693e3]/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(--igny8-blue)]/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="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="size-12 rounded-full bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-full bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
<CreditCardIcon className="h-6 w-6" /> <CreditCardIcon className="h-6 w-6" />
</div> </div>
<h4 className="text-lg font-semibold text-slate-900"> <h4 className="text-lg font-semibold text-slate-900">
@@ -407,7 +407,7 @@ const Pricing: React.FC = () => {
</div> </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-[#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="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<div className="size-12 rounded-full bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-full bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-lg">
<ShieldCheckIcon className="h-6 w-6" /> <ShieldCheckIcon className="h-6 w-6" />
</div> </div>
<h4 className="text-lg font-semibold text-slate-900"> <h4 className="text-lg font-semibold text-slate-900">
@@ -422,7 +422,7 @@ const Pricing: React.FC = () => {
</section> </section>
{/* FINAL CTA */} {/* 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(--igny8-blue)] via-[var(--igny8-purple)] to-[#8b5cf6]">
{/* Radial glow */} {/* Radial glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" /> <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
@@ -445,7 +445,7 @@ const Pricing: React.FC = () => {
href="https://app.igny8.com/signup" href="https://app.igny8.com/signup"
target="_blank" target="_blank"
rel="noreferrer" 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(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
> >
<RocketLaunchIcon className="h-5 w-5" /> <RocketLaunchIcon className="h-5 w-5" />
Start free trial Start free trial

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

@@ -40,12 +40,12 @@ const Product: React.FC = () => {
}; };
const workflowSteps = [ const workflowSteps = [
{ name: "Keywords", icon: ListBulletIcon, color: "from-[#0693e3] to-[#0472b8]" }, { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[#5d4ae3] to-[#3a2f94]" }, { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]" },
{ name: "Ideas", icon: LightBulbIcon, color: "from-[#ff7a00] to-[#cc5f00]" }, { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]" },
{ name: "Tasks", icon: DocumentTextIcon, color: "from-[#0bbf87] to-[#08966b]" }, { name: "Tasks", icon: DocumentTextIcon, color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]" },
{ name: "Content", icon: SparklesIcon, color: "from-[#0693e3] to-[#0472b8]" }, { name: "Content", icon: SparklesIcon, color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]" },
{ name: "Publish", icon: BoltIcon, color: "from-[#0bbf87] to-[#08966b]" }, { name: "Publish", icon: BoltIcon, color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]" },
]; ];
const productModules = [ const productModules = [
@@ -61,7 +61,7 @@ const Product: React.FC = () => {
"Alerts for emerging opportunities, competitive gaps, and seasonality shifts", "Alerts for emerging opportunities, competitive gaps, and seasonality shifts",
], ],
icon: ChartBarIcon, icon: ChartBarIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
image: "planner-dashboard.png", image: "planner-dashboard.png",
link: "#planner", link: "#planner",
}, },
@@ -77,7 +77,7 @@ const Product: React.FC = () => {
"Editorial workspace with comments, approvals, and WordPress publishing", "Editorial workspace with comments, approvals, and WordPress publishing",
], ],
icon: SparklesIcon, icon: SparklesIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
image: "writer-dashboard.png", image: "writer-dashboard.png",
link: "#writer", link: "#writer",
}, },
@@ -93,7 +93,7 @@ const Product: React.FC = () => {
"Version control for AI instructions and playbooks across teams", "Version control for AI instructions and playbooks across teams",
], ],
icon: BoltIcon, icon: BoltIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
image: "thinker-dashboard.png", image: "thinker-dashboard.png",
link: "#thinker", link: "#thinker",
}, },
@@ -109,7 +109,7 @@ const Product: React.FC = () => {
"Monitor every automation with audit logs and manual override controls", "Monitor every automation with audit logs and manual override controls",
], ],
icon: PhotoIcon, icon: PhotoIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
image: "automation-dashboard.png", image: "automation-dashboard.png",
link: "#automation", link: "#automation",
}, },
@@ -134,11 +134,11 @@ const Product: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
{renderCta( {renderCta(
{ label: "Start free", href: "https://app.igny8.com/signup" }, { label: "Start free", href: "https://app.igny8.com/signup" },
"inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md" "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
)} )}
{renderCta( {renderCta(
{ label: "Book a demo", href: "/contact" }, { 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-[#0693e3] hover:text-[#0693e3] transition" "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(--igny8-blue)] hover:text-[var(--igny8-blue)] transition"
)} )}
</div> </div>
</div> </div>
@@ -159,7 +159,7 @@ const Product: React.FC = () => {
{/* Horizontal Timeline */} {/* Horizontal Timeline */}
<div className="relative"> <div className="relative">
{/* Enhanced connecting line with shadow */} {/* Enhanced connecting line with shadow */}
<div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[#0693e3] via-[#5d4ae3] via-[#ff7a00] via-[#0bbf87] to-[#0693e3] opacity-25 hidden md:block shadow-lg shadow-[#0693e3]/20" /> <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[var(--igny8-blue)] via-[var(--igny8-purple)] via-[var(--igny8-amber)] via-[var(--igny8-green)] to-[var(--igny8-blue)] opacity-25 hidden md:block shadow-lg shadow-[var(--igny8-blue)]/20" />
<div className="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-4"> <div className="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-4">
{workflowSteps.map((step, index) => { {workflowSteps.map((step, index) => {
@@ -186,9 +186,9 @@ const Product: React.FC = () => {
const isLeft = index % 2 === 0; const isLeft = index % 2 === 0;
const backgroundTints = [ const backgroundTints = [
"bg-white", "bg-white",
"bg-gradient-to-b from-[#0693e3]/1 to-white", "bg-gradient-to-b from-[var(--igny8-blue)]/1 to-white",
"bg-gradient-to-b from-[#0bbf87]/1 to-white", "bg-gradient-to-b from-[var(--igny8-green)]/1 to-white",
"bg-gradient-to-b from-[#5d4ae3]/1 to-white", "bg-gradient-to-b from-[var(--igny8-purple)]/1 to-white",
]; ];
return ( return (
@@ -267,7 +267,7 @@ const Product: React.FC = () => {
{/* Left: Content */} {/* Left: Content */}
<div className="z-10"> <div className="z-10">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#5d4ae3] flex items-center justify-center text-white shadow-lg shadow-[#0693e3]/30"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-purple)] flex items-center justify-center text-white shadow-lg shadow-[var(--igny8-blue)]/30">
<BoltIcon className="h-6 w-6" /> <BoltIcon className="h-6 w-6" />
</div> </div>
<h2 className="text-4xl md:text-5xl font-bold text-white"> <h2 className="text-4xl md:text-5xl font-bold text-white">
@@ -281,12 +281,12 @@ const Product: React.FC = () => {
{/* Automation Timeline with neon glows */} {/* Automation Timeline with neon glows */}
<div className="space-y-6"> <div className="space-y-6">
{[ {[
{ from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" }, { from: "Keywords", to: "Clusters", icon: "→", color: "from-[var(--igny8-blue)] to-[var(--igny8-purple)]", glow: "shadow-[var(--igny8-blue)]/50" },
{ from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" }, { from: "Clusters", to: "Ideas", icon: "→", color: "from-[var(--igny8-purple)] to-[var(--igny8-amber)]", glow: "shadow-[var(--igny8-purple)]/50" },
{ from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" }, { from: "Ideas", to: "Tasks", icon: "→", color: "from-[var(--igny8-amber)] to-[var(--igny8-green)]", glow: "shadow-[var(--igny8-amber)]/50" },
{ from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" }, { from: "Tasks", to: "Content", icon: "→", color: "from-[var(--igny8-green)] to-[var(--igny8-blue)]", glow: "shadow-[var(--igny8-green)]/50" },
{ from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" }, { from: "Content", to: "Images", icon: "→", color: "from-[var(--igny8-blue)] to-[var(--igny8-purple)]", glow: "shadow-[var(--igny8-blue)]/50" },
{ from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" }, { from: "Images", to: "Publish", icon: "→", color: "from-[var(--igny8-purple)] to-[var(--igny8-green)]", glow: "shadow-[var(--igny8-purple)]/50" },
].map((handoff, i) => ( ].map((handoff, i) => (
<div key={i} className="flex items-center gap-4"> <div key={i} className="flex items-center gap-4">
<div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}> <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
@@ -320,7 +320,7 @@ const Product: React.FC = () => {
/> />
</div> </div>
{/* Glow effect */} {/* Glow effect */}
<div className="absolute -inset-4 bg-gradient-to-br from-[#0693e3]/20 to-[#5d4ae3]/20 rounded-2xl blur-2xl -z-10" /> <div className="absolute -inset-4 bg-gradient-to-br from-[var(--igny8-blue)]/20 to-[var(--igny8-purple)]/20 rounded-2xl blur-2xl -z-10" />
</div> </div>
</div> </div>
@@ -344,7 +344,7 @@ const Product: React.FC = () => {
<section className="py-24 bg-white"> <section className="py-24 bg-white">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-12"> <div className="text-center mb-12">
<span className="inline-flex items-center rounded-full border border-[#0693e3]/20 bg-[#0693e3]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[#0693e3] mb-4"> <span className="inline-flex items-center rounded-full border border-[var(--igny8-blue)]/20 bg-[var(--igny8-blue)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--igny8-blue)] mb-4">
Loved by scaling teams Loved by scaling teams
</span> </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-slate-900 mb-4">
@@ -355,14 +355,14 @@ const Product: React.FC = () => {
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{testimonials.map((testimonial, index) => { {testimonials.map((testimonial, index) => {
const gradientColors = [ const gradientColors = [
"from-[#0693e3]/20 to-[#0472b8]/10", "from-[var(--igny8-blue)]/20 to-[var(--igny8-blue-dark)]/10",
"from-[#0bbf87]/20 to-[#08966b]/10", "from-[var(--igny8-green)]/20 to-[var(--igny8-green-dark)]/10",
"from-[#5d4ae3]/20 to-[#3a2f94]/10", "from-[var(--igny8-purple)]/20 to-[var(--igny8-purple-dark)]/10",
]; ];
const borderColors = [ const borderColors = [
"border-[#0693e3]/30", "border-[var(--igny8-blue)]/30",
"border-[#0bbf87]/30", "border-[var(--igny8-green)]/30",
"border-[#5d4ae3]/30", "border-[var(--igny8-purple)]/30",
]; ];
return ( return (
@@ -400,7 +400,7 @@ const Product: React.FC = () => {
</section> </section>
{/* FINAL CTA */} {/* 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(--igny8-blue)] via-[var(--igny8-purple)] to-[#8b5cf6]">
{/* Dashboard overlay in background */} {/* Dashboard overlay in background */}
<div className="absolute inset-0 opacity-10"> <div className="absolute inset-0 opacity-10">
<div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" /> <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
@@ -421,7 +421,7 @@ const Product: React.FC = () => {
href="https://app.igny8.com/signup" href="https://app.igny8.com/signup"
target="_blank" target="_blank"
rel="noreferrer" 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(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
> >
<RocketLaunchIcon className="h-5 w-5" /> <RocketLaunchIcon className="h-5 w-5" />
Start free Start free

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

@@ -50,7 +50,7 @@ const Resources: React.FC = () => {
type: "Article", type: "Article",
tag: "Strategy", tag: "Strategy",
icon: ChartBarIcon, icon: ChartBarIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
}, },
{ {
title: "The Complete Framework for AI Content Quality", title: "The Complete Framework for AI Content Quality",
@@ -58,7 +58,7 @@ const Resources: React.FC = () => {
type: "Framework Guide", type: "Framework Guide",
tag: "Strategy", tag: "Strategy",
icon: AcademicCapIcon, icon: AcademicCapIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
}, },
{ {
title: "SERP-Guided Content Planning Playbook", title: "SERP-Guided Content Planning Playbook",
@@ -66,7 +66,7 @@ const Resources: React.FC = () => {
type: "PDF Guide", type: "PDF Guide",
tag: "Strategy", tag: "Strategy",
icon: BookOpenIcon, icon: BookOpenIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
}, },
]; ];
@@ -77,7 +77,7 @@ const Resources: React.FC = () => {
type: "Template", type: "Template",
tags: ["Template", "System"], tags: ["Template", "System"],
icon: CalendarIcon, icon: CalendarIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
}, },
{ {
title: "Airtable Keyword Cluster System", title: "Airtable Keyword Cluster System",
@@ -85,7 +85,7 @@ const Resources: React.FC = () => {
type: "System", type: "System",
tags: ["System", "Workflow"], tags: ["System", "Workflow"],
icon: ChartBarIcon, icon: ChartBarIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
}, },
{ {
title: "Content Calendar Kit (Excel)", title: "Content Calendar Kit (Excel)",
@@ -93,7 +93,7 @@ const Resources: React.FC = () => {
type: "Template", type: "Template",
tags: ["Template", "Workflow"], tags: ["Template", "Workflow"],
icon: DocumentTextIcon, icon: DocumentTextIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
}, },
{ {
title: "Cluster Mapping Board", title: "Cluster Mapping Board",
@@ -101,7 +101,7 @@ const Resources: React.FC = () => {
type: "Template", type: "Template",
tags: ["Template", "System"], tags: ["Template", "System"],
icon: SparklesIcon, icon: SparklesIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
}, },
]; ];
@@ -113,7 +113,7 @@ const Resources: React.FC = () => {
type: "Workshop", type: "Workshop",
tag: "Live", tag: "Live",
icon: BoltIcon, icon: BoltIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
}, },
{ {
title: "From Keywords to Conversions: Dashboard Deep-Dive", title: "From Keywords to Conversions: Dashboard Deep-Dive",
@@ -122,7 +122,7 @@ const Resources: React.FC = () => {
type: "Workshop", type: "Workshop",
tag: "Live", tag: "Live",
icon: ChartBarIcon, icon: ChartBarIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
}, },
{ {
title: "Automating Cluster Research at Scale", title: "Automating Cluster Research at Scale",
@@ -130,7 +130,7 @@ const Resources: React.FC = () => {
type: "Replay", type: "Replay",
tag: "Replay", tag: "Replay",
icon: PlayIcon, icon: PlayIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
}, },
{ {
title: "Editorial Control and AI Tone Systems", title: "Editorial Control and AI Tone Systems",
@@ -138,7 +138,7 @@ const Resources: React.FC = () => {
type: "Replay", type: "Replay",
tag: "Replay", tag: "Replay",
icon: BookOpenIcon, icon: BookOpenIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
}, },
]; ];
@@ -149,7 +149,7 @@ const Resources: React.FC = () => {
type: "Quick-Start", type: "Quick-Start",
tags: ["Checklist", "Execution"], tags: ["Checklist", "Execution"],
icon: RocketLaunchIcon, icon: RocketLaunchIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
}, },
{ {
title: "SEO Content Quality Checklist", title: "SEO Content Quality Checklist",
@@ -157,7 +157,7 @@ const Resources: React.FC = () => {
type: "Checklist", type: "Checklist",
tags: ["Checklist", "Execution"], tags: ["Checklist", "Execution"],
icon: ClipboardDocumentCheckIcon, icon: ClipboardDocumentCheckIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
}, },
{ {
title: "Content Production SOPs Pack", title: "Content Production SOPs Pack",
@@ -165,7 +165,7 @@ const Resources: React.FC = () => {
type: "SOP Pack", type: "SOP Pack",
tags: ["Execution", "Prompt Pack"], tags: ["Execution", "Prompt Pack"],
icon: ListBulletIcon, icon: ListBulletIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
}, },
{ {
title: "AI Prompt Library for Content Teams", title: "AI Prompt Library for Content Teams",
@@ -173,7 +173,7 @@ const Resources: React.FC = () => {
type: "Prompt Pack", type: "Prompt Pack",
tags: ["Prompt Pack", "Execution"], tags: ["Prompt Pack", "Execution"],
icon: SparklesIcon, icon: SparklesIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
}, },
]; ];
@@ -196,7 +196,7 @@ const Resources: React.FC = () => {
<div className="flex justify-center"> <div className="flex justify-center">
{renderCta( {renderCta(
{ label: "Explore All Resources", href: "#learn" }, { label: "Explore All Resources", href: "#learn" },
"inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md" "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
)} )}
</div> </div>
</div> </div>
@@ -235,7 +235,7 @@ const Resources: React.FC = () => {
<p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p> <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
<a <a
href="#" href="#"
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group" className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--igny8-blue)] hover:text-[var(--igny8-blue-dark)] group"
> >
{resource.type.includes("PDF") ? "Download" : "Read"} {resource.type.toLowerCase().includes("article") ? "article" : "guide"} {resource.type.includes("PDF") ? "Download" : "Read"} {resource.type.toLowerCase().includes("article") ? "article" : "guide"}
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" /> <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
@@ -247,7 +247,7 @@ const Resources: React.FC = () => {
<div className="text-center mt-12"> <div className="text-center mt-12">
<a <a
href="#" href="#"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition" className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--igny8-blue)] transition"
> >
View All Guides View All Guides
<ArrowRightIcon className="h-5 w-5" /> <ArrowRightIcon className="h-5 w-5" />
@@ -270,10 +270,10 @@ const Resources: React.FC = () => {
{buildSystemResources.map((resource, index) => { {buildSystemResources.map((resource, index) => {
const Icon = resource.icon; const Icon = resource.icon;
const colors = [ const colors = [
"from-[#0693e3]/10 to-white", "from-[var(--igny8-blue)]/10 to-white",
"from-[#0bbf87]/10 to-white", "from-[var(--igny8-green)]/10 to-white",
"from-[#5d4ae3]/10 to-white", "from-[var(--igny8-purple)]/10 to-white",
"from-[#ff7a00]/10 to-white", "from-[var(--igny8-amber)]/10 to-white",
]; ];
const borders = [ const borders = [
"border-[#0693e3]/30", "border-[#0693e3]/30",
@@ -308,7 +308,7 @@ const Resources: React.FC = () => {
<p className="text-sm text-slate-600 leading-relaxed mb-4">{resource.description}</p> <p className="text-sm text-slate-600 leading-relaxed mb-4">{resource.description}</p>
<a <a
href="#" href="#"
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group" className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--igny8-blue)] hover:text-[var(--igny8-blue-dark)] group"
> >
<ArrowDownTrayIcon className="h-4 w-4" /> <ArrowDownTrayIcon className="h-4 w-4" />
Download {resource.type.toLowerCase()} Download {resource.type.toLowerCase()}
@@ -323,7 +323,7 @@ const Resources: React.FC = () => {
<div className="text-center mt-12"> <div className="text-center mt-12">
<a <a
href="#" href="#"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition" className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--igny8-blue)] transition"
> >
Explore Templates Explore Templates
<ArrowRightIcon className="h-5 w-5" /> <ArrowRightIcon className="h-5 w-5" />
@@ -347,10 +347,10 @@ const Resources: React.FC = () => {
{attendWatchResources.map((resource, index) => { {attendWatchResources.map((resource, index) => {
const Icon = resource.icon; const Icon = resource.icon;
const colors = [ const colors = [
"from-[#0693e3]/10 to-white", "from-[var(--igny8-blue)]/10 to-white",
"from-[#0bbf87]/10 to-white", "from-[var(--igny8-green)]/10 to-white",
"from-[#5d4ae3]/10 to-white", "from-[var(--igny8-purple)]/10 to-white",
"from-[#ff7a00]/10 to-white", "from-[var(--igny8-amber)]/10 to-white",
]; ];
const borders = [ const borders = [
"border-[#0693e3]/30", "border-[#0693e3]/30",
@@ -391,8 +391,8 @@ const Resources: React.FC = () => {
<button <button
className={`inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${ className={`inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
resource.tag === "Live" resource.tag === "Live"
? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white hover:shadow-lg" ? "bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white hover:shadow-lg"
: "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[#0693e3]" : "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[var(--igny8-blue)]"
}`} }`}
> >
{resource.tag === "Live" ? ( {resource.tag === "Live" ? (
@@ -414,7 +414,7 @@ const Resources: React.FC = () => {
<div className="text-center mt-12"> <div className="text-center mt-12">
<a <a
href="#" href="#"
className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition" className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--igny8-blue)] transition"
> >
View Schedule View Schedule
<ArrowRightIcon className="h-5 w-5" /> <ArrowRightIcon className="h-5 w-5" />
@@ -462,7 +462,7 @@ const Resources: React.FC = () => {
<p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p> <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
<a <a
href="#" href="#"
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group" className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--igny8-blue)] hover:text-[var(--igny8-blue-dark)] group"
> >
<ArrowDownTrayIcon className="h-4 w-4" /> <ArrowDownTrayIcon className="h-4 w-4" />
Download Now Download Now
@@ -487,7 +487,7 @@ const Resources: React.FC = () => {
<div> <div>
<a <a
href="#" href="#"
className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[#0bbf87] to-[#08966b] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md" className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[var(--igny8-green)] to-[var(--igny8-green-dark)] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
> >
Browse Toolkits Browse Toolkits
<ArrowRightIcon className="h-5 w-5" /> <ArrowRightIcon className="h-5 w-5" />
@@ -511,7 +511,7 @@ const Resources: React.FC = () => {
href="https://app.igny8.com/signup" href="https://app.igny8.com/signup"
target="_blank" target="_blank"
rel="noreferrer" 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(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
> >
<RocketLaunchIcon className="h-5 w-5" /> <RocketLaunchIcon className="h-5 w-5" />
Start for $1 Start for $1

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

@@ -55,11 +55,11 @@ const Solutions: React.FC = () => {
"Keep editors in control with approvals and Thinker playbooks", "Keep editors in control with approvals and Thinker playbooks",
"Automate image generation and WordPress publishing by site", "Automate image generation and WordPress publishing by site",
], ],
color: "from-[#0693e3]/5 to-white", color: "from-[var(--igny8-blue)]/5 to-white",
borderColor: "border-[#0693e3]/20", borderColor: "border-[var(--igny8-blue)]/20",
iconColor: "from-[#0693e3] to-[#0472b8]", iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
painColor: "bg-rose-500", painColor: "bg-rose-500",
outcomeColor: "bg-[#0693e3]", outcomeColor: "bg-[var(--igny8-blue)]",
}, },
{ {
name: "Agencies & Consultancies", name: "Agencies & Consultancies",
@@ -75,11 +75,11 @@ const Solutions: React.FC = () => {
"Real-time dashboards to prove impact and showcase velocity", "Real-time dashboards to prove impact and showcase velocity",
"Reusable Thinker libraries to standardize tone and strategy", "Reusable Thinker libraries to standardize tone and strategy",
], ],
color: "from-[#0bbf87]/5 to-white", color: "from-[var(--igny8-green)]/5 to-white",
borderColor: "border-[#0bbf87]/20", borderColor: "border-[var(--igny8-green)]/20",
iconColor: "from-[#0bbf87] to-[#08966b]", iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
painColor: "bg-rose-500", painColor: "bg-rose-500",
outcomeColor: "bg-[#0bbf87]", outcomeColor: "bg-[var(--igny8-green)]",
}, },
{ {
name: "In-house Marketing Teams", name: "In-house Marketing Teams",
@@ -95,11 +95,11 @@ const Solutions: React.FC = () => {
"Dashboards that unite SEO, writers, designers, and leadership", "Dashboards that unite SEO, writers, designers, and leadership",
"Insights to reallocate focus when campaigns spike or drop", "Insights to reallocate focus when campaigns spike or drop",
], ],
color: "from-[#5d4ae3]/5 to-white", color: "from-[var(--igny8-purple)]/5 to-white",
borderColor: "border-[#5d4ae3]/20", borderColor: "border-[var(--igny8-purple)]/20",
iconColor: "from-[#5d4ae3] to-[#3a2f94]", iconColor: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
painColor: "bg-rose-500", painColor: "bg-rose-500",
outcomeColor: "bg-[#5d4ae3]", outcomeColor: "bg-[var(--igny8-purple)]",
}, },
]; ];
@@ -108,37 +108,37 @@ const Solutions: React.FC = () => {
title: "Keyword Research", title: "Keyword Research",
description: "Discover high-opportunity keywords from a global database with real-time volumes and difficulty scores.", description: "Discover high-opportunity keywords from a global database with real-time volumes and difficulty scores.",
icon: ChartBarIcon, icon: ChartBarIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
}, },
{ {
title: "Content Briefs", title: "Content Briefs",
description: "Generate comprehensive briefs with outlines, talking points, and internal link suggestions.", description: "Generate comprehensive briefs with outlines, talking points, and internal link suggestions.",
icon: DocumentTextIcon, icon: DocumentTextIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
}, },
{ {
title: "Content Writing", title: "Content Writing",
description: "Create long-form articles aligned to your brand voice, compliance rules, and target SERP.", description: "Create long-form articles aligned to your brand voice, compliance rules, and target SERP.",
icon: SparklesIcon, icon: SparklesIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
}, },
{ {
title: "Cluster Analysis", title: "Cluster Analysis",
description: "AI-powered semantic clustering to group related keywords and build topical authority maps.", description: "AI-powered semantic clustering to group related keywords and build topical authority maps.",
icon: UserGroupIcon, icon: UserGroupIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
}, },
{ {
title: "Image Generation", title: "Image Generation",
description: "AI-generated featured and in-article images based on your content with brand consistency.", description: "AI-generated featured and in-article images based on your content with brand consistency.",
icon: PhotoIcon, icon: PhotoIcon,
color: "from-[#0693e3] to-[#5d4ae3]", color: "from-[var(--igny8-blue)] to-[var(--igny8-purple)]",
}, },
{ {
title: "Workflow Automation", title: "Workflow Automation",
description: "End-to-end automation from keywords to published content with intelligent handoffs.", description: "End-to-end automation from keywords to published content with intelligent handoffs.",
icon: BoltIcon, icon: BoltIcon,
color: "from-[#0bbf87] to-[#0693e3]", color: "from-[var(--igny8-green)] to-[var(--igny8-blue)]",
}, },
]; ];
@@ -161,11 +161,11 @@ const Solutions: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
{renderCta( {renderCta(
{ label: "See use cases", href: "#use-cases" }, { label: "See use cases", href: "#use-cases" },
"inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md" "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
)} )}
{renderCta( {renderCta(
{ label: "Talk to sales", href: "/contact" }, { 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-[#0693e3] hover:text-[#0693e3] transition" "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(--igny8-blue)] hover:text-[var(--igny8-blue)] transition"
)} )}
</div> </div>
</div> </div>
@@ -215,8 +215,8 @@ const Solutions: React.FC = () => {
{/* Right: IGNY8 Outcomes */} {/* 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-slate-200 p-8 shadow-sm">
<div className="flex items-center gap-2 mb-6"> <div className="flex items-center gap-2 mb-6">
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`} /> <CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--igny8-blue)]' ? 'text-[var(--igny8-blue)]' : persona.outcomeColor === 'bg-[var(--igny8-green)]' ? 'text-[var(--igny8-green)]' : 'text-[var(--igny8-purple)]'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`}> <h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--igny8-blue)]' ? 'text-[var(--igny8-blue)]' : persona.outcomeColor === 'bg-[var(--igny8-green)]' ? 'text-[var(--igny8-green)]' : 'text-[var(--igny8-purple)]'}`}>
IGNY8 Outcomes IGNY8 Outcomes
</h4> </h4>
</div> </div>
@@ -244,24 +244,24 @@ const Solutions: React.FC = () => {
label: "organic lift", label: "organic lift",
description: "Average lift in organic traffic within 90 days", description: "Average lift in organic traffic within 90 days",
icon: ArrowTrendingUpIcon, icon: ArrowTrendingUpIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
glow: "shadow-[#0693e3]/30", glow: "shadow-[var(--igny8-blue)]/30",
}, },
{ {
metric: "48%", metric: "48%",
label: "reduction in time to publish", label: "reduction in time to publish",
description: "Faster time-to-publish from keyword discovery", description: "Faster time-to-publish from keyword discovery",
icon: ClockIcon, icon: ClockIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
glow: "shadow-[#0bbf87]/30", glow: "shadow-[var(--igny8-green)]/30",
}, },
{ {
metric: "4 tools", metric: "4 tools",
label: "replaced", label: "replaced",
description: "Average number of point solutions replaced by Igny8", description: "Average number of point solutions replaced by Igny8",
icon: WrenchScrewdriverIcon, icon: WrenchScrewdriverIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
glow: "shadow-[#ff7a00]/30", glow: "shadow-[var(--igny8-amber)]/30",
}, },
].map((stat, index) => { ].map((stat, index) => {
const Icon = stat.icon; const Icon = stat.icon;
@@ -344,7 +344,7 @@ const Solutions: React.FC = () => {
</section> </section>
{/* FINAL CTA */} {/* 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(--igny8-blue)] via-[var(--igny8-purple)] to-[#8b5cf6]">
{/* Radial glow */} {/* Radial glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" /> <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
@@ -360,7 +360,7 @@ const Solutions: React.FC = () => {
href="https://app.igny8.com/signup" href="https://app.igny8.com/signup"
target="_blank" target="_blank"
rel="noreferrer" 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(--igny8-blue)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
> >
<RocketLaunchIcon className="h-5 w-5" /> <RocketLaunchIcon className="h-5 w-5" />
Start free Start free

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

@@ -38,7 +38,7 @@ const Tour: React.FC = () => {
title="Experience the entire Igny8 journey in minutes." title="Experience the entire Igny8 journey in minutes."
description="Walk through the workflow that moves market intelligence into production-ready content. Each step builds toward an automated growth flywheel." 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-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-8 shadow-lg"> <div className="rounded-3xl border-2 border-[var(--igny8-blue)]/30 bg-gradient-to-br from-[var(--igny8-blue)]/10 via-white to-[var(--igny8-green)]/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-slate-200 bg-gradient-to-br from-slate-50 to-white flex items-center justify-center text-slate-500 text-sm shadow-inner">
Video walkthrough placeholder (embed demo or Loom) Video walkthrough placeholder (embed demo or Loom)
</div> </div>
@@ -48,9 +48,9 @@ const Tour: React.FC = () => {
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-12"> <section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
{tourSteps.map((step, index) => { {tourSteps.map((step, index) => {
const colors = [ const colors = [
{ border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white", dot: "bg-[#0693e3]" }, { border: "border-[var(--igny8-blue)]/40", gradient: "from-[var(--igny8-blue)]/10 to-white", dot: "bg-[var(--igny8-blue)]" },
{ border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white", dot: "bg-[#0bbf87]" }, { border: "border-[var(--igny8-green)]/40", gradient: "from-[var(--igny8-green)]/10 to-white", dot: "bg-[var(--igny8-green)]" },
{ border: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white", dot: "bg-[#ff7a00]" }, { border: "border-[var(--igny8-amber)]/40", gradient: "from-[var(--igny8-amber)]/10 to-white", dot: "bg-[var(--igny8-amber)]" },
{ border: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white", dot: "bg-[#5d4ae3]" }, { border: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white", dot: "bg-[#5d4ae3]" },
]; ];
const colorScheme = colors[index % colors.length]; const colorScheme = colors[index % colors.length];
@@ -79,7 +79,7 @@ const Tour: React.FC = () => {
})} })}
</section> </section>
<section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20"> <section className="bg-gradient-to-br from-[var(--igny8-blue)]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
<div className="max-w-6xl mx-auto px-6 py-24 space-y-10"> <div className="max-w-6xl mx-auto px-6 py-24 space-y-10">
<SectionHeading <SectionHeading
eyebrow="Automation recipes" eyebrow="Automation recipes"
@@ -88,12 +88,12 @@ const Tour: React.FC = () => {
/> />
<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-slate-600">
{[ {[
{ name: "Keywords → Ideas", time: "Nightly", highlight: "Targets new opportunities", color: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white" }, { name: "Keywords → Ideas", time: "Nightly", highlight: "Targets new opportunities", color: "border-[var(--igny8-blue)]/40", gradient: "from-[var(--igny8-blue)]/10 to-white" },
{ name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically", color: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white" }, { name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically", color: "border-[var(--igny8-green)]/40", gradient: "from-[var(--igny8-green)]/10 to-white" },
{ name: "Tasks → Content", time: "Hourly", highlight: "Generate & queue drafts", color: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white" }, { name: "Tasks → Content", time: "Hourly", highlight: "Generate & queue drafts", color: "border-[var(--igny8-amber)]/40", gradient: "from-[var(--igny8-amber)]/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-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white" },
{ name: "Content → WordPress", time: "Manual launch", highlight: "One-click publish", color: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white" }, { name: "Content → WordPress", time: "Manual launch", highlight: "One-click publish", color: "border-[var(--igny8-blue)]/40", gradient: "from-[var(--igny8-blue)]/10 to-white" },
{ name: "SERP Win/Loss Alerts", time: "Real-time", highlight: "Trigger optimizations", color: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white" }, { name: "SERP Win/Loss Alerts", time: "Real-time", highlight: "Trigger optimizations", color: "border-[var(--igny8-green)]/40", gradient: "from-[var(--igny8-green)]/10 to-white" },
].map((recipe) => ( ].map((recipe) => (
<div <div
key={recipe.name} key={recipe.name}

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

@@ -29,9 +29,9 @@ const Waitlist: React.FC = () => {
</section> </section>
<section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12"> <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-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-10 space-y-6 shadow-lg"> <div className="rounded-3xl border-2 border-[var(--igny8-blue)]/30 bg-gradient-to-br from-[var(--igny8-blue)]/10 via-white to-[var(--igny8-green)]/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-slate-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[#0693e3]"></span> <span className="size-2 rounded-full bg-[var(--igny8-blue)]"></span>
Join the waitlist Join the waitlist
</h3> </h3>
<p className="text-sm text-slate-600"> <p className="text-sm text-slate-600">
@@ -41,17 +41,17 @@ const Waitlist: React.FC = () => {
<input <input
type="text" type="text"
placeholder="Name" 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-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20" 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(--igny8-blue)] focus:ring-2 focus:ring-[var(--igny8-blue)]/20"
/> />
<input <input
type="email" type="email"
placeholder="Work 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-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20" 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(--igny8-blue)] focus:ring-2 focus:ring-[var(--igny8-blue)]/20"
/> />
<textarea <textarea
rows={4} rows={4}
placeholder="Tell us about your current workflow and why you're excited." 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-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20 resize-none" 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(--igny8-blue)] focus:ring-2 focus:ring-[var(--igny8-blue)]/20 resize-none"
/> />
<button <button
type="submit" type="submit"
@@ -70,7 +70,7 @@ const Waitlist: React.FC = () => {
</h4> </h4>
<ul className="space-y-3 text-sm text-slate-600"> <ul className="space-y-3 text-sm text-slate-600">
{roadmapItems.map((item, idx) => { {roadmapItems.map((item, idx) => {
const colors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]"]; const colors = ["bg-[var(--igny8-blue)]", "bg-[#0bbf87]", "bg-[#ff7a00]"];
return ( return (
<li key={item.title} className="flex gap-3"> <li key={item.title} className="flex gap-3">
<span className={`mt-1 size-1.5 rounded-full ${colors[idx % colors.length]} shadow-sm`} /> <span className={`mt-1 size-1.5 rounded-full ${colors[idx % colors.length]} shadow-sm`} />

28
frontend/src/pages/Automation/Dashboard.tsx
View File

@@ -123,7 +123,7 @@ export default function AutomationDashboard() {
nextRun: "4 hours", nextRun: "4 hours",
coverage: 85, coverage: 85,
icon: PaperPlaneIcon, icon: PaperPlaneIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
}, },
{ {
id: 2, id: 2,
@@ -135,7 +135,7 @@ export default function AutomationDashboard() {
nextRun: "2 hours", nextRun: "2 hours",
coverage: 92, coverage: 92,
icon: FileTextIcon, icon: FileTextIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
}, },
{ {
id: 3, id: 3,
@@ -147,7 +147,7 @@ export default function AutomationDashboard() {
nextRun: "3 hours", nextRun: "3 hours",
coverage: 78, coverage: 78,
icon: ListIcon, icon: ListIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
}, },
]; ];
@@ -225,7 +225,7 @@ export default function AutomationDashboard() {
position: "top", position: "top",
labels: { colors: "#6b7280" }, labels: { colors: "#6b7280" },
}, },
colors: ["#0693e3", "#0bbf87", "#5d4ae3"], colors: ["var(--igny8-blue)", "var(--igny8-green)", "var(--igny8-purple)"],
grid: { grid: {
borderColor: "#e5e7eb", borderColor: "#e5e7eb",
}, },
@@ -319,7 +319,7 @@ export default function AutomationDashboard() {
</div> </div>
<div className="flex items-center justify-between text-xs text-slate-600"> <div className="flex items-center justify-between text-xs text-slate-600">
<span>Next Run:</span> <span>Next Run:</span>
<span className="font-semibold text-[#0693e3]">{workflow.nextRun}</span> <span className="font-semibold text-[var(--igny8-blue)]">{workflow.nextRun}</span>
</div> </div>
</div> </div>
<div className="mb-4"> <div className="mb-4">
@@ -334,7 +334,7 @@ export default function AutomationDashboard() {
<CloseIcon className="h-4 w-4" /> <CloseIcon className="h-4 w-4" />
Pause Pause
</button> </button>
<button className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-4 py-2 text-sm font-semibold hover:shadow-lg transition"> <button className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white px-4 py-2 text-sm font-semibold hover:shadow-lg transition">
<PaperPlaneIcon className="h-4 w-4" /> <PaperPlaneIcon className="h-4 w-4" />
Run Now Run Now
</button> </button>
@@ -360,14 +360,14 @@ export default function AutomationDashboard() {
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<div className={`inline-flex size-10 rounded-lg bg-gradient-to-br ${ <div className={`inline-flex size-10 rounded-lg bg-gradient-to-br ${
isEnabled isEnabled
? "from-[#0bbf87] to-[#08966b]" ? "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]"
: "from-slate-300 to-slate-400" : "from-slate-300 to-slate-400"
} items-center justify-center text-white shadow-md`}> } items-center justify-center text-white shadow-md`}>
<Icon className="h-5 w-5" /> <Icon className="h-5 w-5" />
</div> </div>
<div className={`size-5 rounded-full border-2 flex items-center justify-center ${ <div className={`size-5 rounded-full border-2 flex items-center justify-center ${
isEnabled isEnabled
? "border-[#0bbf87] bg-[#0bbf87]" ? "border-[var(--igny8-green)] bg-[var(--igny8-green)]"
: "border-slate-300 bg-white" : "border-slate-300 bg-white"
}`}> }`}>
{isEnabled && <CheckCircleIcon className="h-3 w-3 text-white" />} {isEnabled && <CheckCircleIcon className="h-3 w-3 text-white" />}
@@ -375,7 +375,7 @@ export default function AutomationDashboard() {
</div> </div>
<h4 className="font-semibold text-slate-900 mb-1">{step.step}</h4> <h4 className="font-semibold text-slate-900 mb-1">{step.step}</h4>
<p className="text-xs text-slate-600">{step.description}</p> <p className="text-xs text-slate-600">{step.description}</p>
<div className="mt-3 flex items-center gap-1 text-xs text-[#0693e3] opacity-0 group-hover:opacity-100 transition"> <div className="mt-3 flex items-center gap-1 text-xs text-[var(--igny8-blue)] opacity-0 group-hover:opacity-100 transition">
<span>Configure</span> <span>Configure</span>
<ArrowRightIcon className="h-3 w-3" /> <ArrowRightIcon className="h-3 w-3" />
</div> </div>
@@ -401,7 +401,7 @@ export default function AutomationDashboard() {
key={activity.id} key={activity.id}
className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white" className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white"
> >
<div className="size-10 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-md"> <div className="size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-md">
<BoltIcon className="h-5 w-5" /> <BoltIcon className="h-5 w-5" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
@@ -434,21 +434,21 @@ export default function AutomationDashboard() {
onClick={() => navigate("/planner/keyword-opportunities")} onClick={() => navigate("/planner/keyword-opportunities")}
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
<ListIcon className="h-6 w-6" /> <ListIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
<h4 className="font-semibold text-slate-900 mb-1">Run Planner Workflow</h4> <h4 className="font-semibold text-slate-900 mb-1">Run Planner Workflow</h4>
<p className="text-sm text-slate-600">Keywords → Clusters → Ideas</p> <p className="text-sm text-slate-600">Keywords → Clusters → Ideas</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] transition" /> <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] transition" />
</button> </button>
<button <button
onClick={() => navigate("/writer/tasks")} onClick={() => navigate("/writer/tasks")}
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-lg">
<FileTextIcon className="h-6 w-6" /> <FileTextIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
@@ -462,7 +462,7 @@ export default function AutomationDashboard() {
onClick={() => navigate("/writer/published")} onClick={() => navigate("/writer/published")}
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)] flex items-center justify-center text-white shadow-lg">
<PaperPlaneIcon className="h-6 w-6" /> <PaperPlaneIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">

24
frontend/src/pages/Dashboard/Home.tsx
View File

@@ -125,7 +125,7 @@ export default function Home() {
title: "Planner", title: "Planner",
description: "Keyword research, clustering, and content planning", description: "Keyword research, clustering, and content planning",
icon: PieChartIcon, icon: PieChartIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
path: "/planner", path: "/planner",
count: insights?.totalClusters || 0, count: insights?.totalClusters || 0,
status: "active", status: "active",
@@ -135,7 +135,7 @@ export default function Home() {
title: "Writer", title: "Writer",
description: "AI content generation, editing, and publishing", description: "AI content generation, editing, and publishing",
icon: PencilIcon, icon: PencilIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
path: "/writer", path: "/writer",
count: insights?.totalContent || 0, count: insights?.totalContent || 0,
status: "active", status: "active",
@@ -145,7 +145,7 @@ export default function Home() {
title: "Thinker", title: "Thinker",
description: "Prompts, author profiles, and content strategies", description: "Prompts, author profiles, and content strategies",
icon: BoltIcon, icon: BoltIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
path: "/thinker", path: "/thinker",
count: 0, count: 0,
status: "active", status: "active",
@@ -155,7 +155,7 @@ export default function Home() {
title: "Automation", title: "Automation",
description: "Workflow automation and scheduled tasks", description: "Workflow automation and scheduled tasks",
icon: PlugInIcon, icon: PlugInIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
path: "/automation", path: "/automation",
count: 0, count: 0,
status: "active", status: "active",
@@ -272,7 +272,7 @@ export default function Home() {
position: "top", position: "top",
labels: { colors: "#6b7280" }, labels: { colors: "#6b7280" },
}, },
colors: ["#0693e3", "#0bbf87", "#5d4ae3"], colors: ["var(--igny8-blue)", "var(--igny8-green)", "var(--igny8-purple)"],
grid: { grid: {
borderColor: "#e5e7eb", borderColor: "#e5e7eb",
}, },
@@ -421,7 +421,7 @@ export default function Home() {
<div className="text-2xl font-bold text-slate-900">{module.count}</div> <div className="text-2xl font-bold text-slate-900">{module.count}</div>
<div className="text-xs text-slate-500">{module.metric}</div> <div className="text-xs text-slate-500">{module.metric}</div>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] group-hover:translate-x-1 transition" /> <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] group-hover:translate-x-1 transition" />
</div> </div>
</Link> </Link>
); );
@@ -510,23 +510,23 @@ export default function Home() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<Link <Link
to="/planner/keyword-opportunities" to="/planner/keyword-opportunities"
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-md transition group" className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[var(--igny8-blue)] hover:shadow-md transition group"
> >
<div className="size-12 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white"> <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white">
<ListIcon className="h-6 w-6" /> <ListIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h4 className="font-semibold text-slate-900">Add Keywords</h4> <h4 className="font-semibold text-slate-900">Add Keywords</h4>
<p className="text-xs text-slate-600">Discover new opportunities</p> <p className="text-xs text-slate-600">Discover new opportunities</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] transition" /> <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] transition" />
</Link> </Link>
<Link <Link
to="/writer/tasks" to="/writer/tasks"
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-md transition group" className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-md transition group"
> >
<div className="size-12 rounded-lg bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white"> <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white">
<FileTextIcon className="h-6 w-6" /> <FileTextIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
@@ -540,7 +540,7 @@ export default function Home() {
to="/automation" to="/automation"
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-md transition group" className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-md transition group"
> >
<div className="size-12 rounded-lg bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white"> <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)] flex items-center justify-center text-white">
<PlugInIcon className="h-6 w-6" /> <PlugInIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
@@ -554,7 +554,7 @@ export default function Home() {
to="/thinker/prompts" to="/thinker/prompts"
className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-md transition group" className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-md transition group"
> >
<div className="size-12 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white"> <div className="size-12 rounded-lg bg-gradient-to-br from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)] flex items-center justify-center text-white">
<BoltIcon className="h-6 w-6" /> <BoltIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1"> <div className="flex-1">

30
frontend/src/pages/Planner/Dashboard.tsx
View File

@@ -192,7 +192,7 @@ export default function PlannerDashboard() {
title: "Keywords", title: "Keywords",
description: "Manage and discover keywords", description: "Manage and discover keywords",
icon: ListIcon, icon: ListIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
path: "/planner/keywords", path: "/planner/keywords",
count: stats?.keywords.total || 0, count: stats?.keywords.total || 0,
metric: `${stats?.keywords.mapped || 0} mapped`, metric: `${stats?.keywords.mapped || 0} mapped`,
@@ -201,7 +201,7 @@ export default function PlannerDashboard() {
title: "Clusters", title: "Clusters",
description: "Keyword clusters and groups", description: "Keyword clusters and groups",
icon: GroupIcon, icon: GroupIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
path: "/planner/clusters", path: "/planner/clusters",
count: stats?.clusters.total || 0, count: stats?.clusters.total || 0,
metric: `${stats?.clusters.totalVolume.toLocaleString() || 0} volume`, metric: `${stats?.clusters.totalVolume.toLocaleString() || 0} volume`,
@@ -210,7 +210,7 @@ export default function PlannerDashboard() {
title: "Ideas", title: "Ideas",
description: "Content ideas and concepts", description: "Content ideas and concepts",
icon: BoltIcon, icon: BoltIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
path: "/planner/ideas", path: "/planner/ideas",
count: stats?.ideas.total || 0, count: stats?.ideas.total || 0,
metric: `${stats?.ideas.queued || 0} queued`, metric: `${stats?.ideas.queued || 0} queued`,
@@ -219,7 +219,7 @@ export default function PlannerDashboard() {
title: "Keyword Opportunities", title: "Keyword Opportunities",
description: "Discover new keyword opportunities", description: "Discover new keyword opportunities",
icon: PieChartIcon, icon: PieChartIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
path: "/planner/keyword-opportunities", path: "/planner/keyword-opportunities",
count: 0, count: 0,
metric: "Discover new keywords", metric: "Discover new keywords",
@@ -275,7 +275,7 @@ export default function PlannerDashboard() {
position: "top", position: "top",
labels: { colors: "#6b7280" }, labels: { colors: "#6b7280" },
}, },
colors: ["#0693e3", "#0bbf87", "#ff7a00"], colors: ["var(--igny8-blue)", "var(--igny8-green)", "var(--igny8-amber)"],
grid: { grid: {
borderColor: "#e5e7eb", borderColor: "#e5e7eb",
}, },
@@ -522,7 +522,7 @@ export default function PlannerDashboard() {
<div className="text-2xl font-bold text-slate-900">{module.count}</div> <div className="text-2xl font-bold text-slate-900">{module.count}</div>
<div className="text-xs text-slate-500">{module.metric}</div> <div className="text-xs text-slate-500">{module.metric}</div>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] group-hover:translate-x-1 transition" /> <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] group-hover:translate-x-1 transition" />
</div> </div>
</Link> </Link>
); );
@@ -636,23 +636,23 @@ export default function PlannerDashboard() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<Link <Link
to="/planner/keyword-opportunities" to="/planner/keyword-opportunities"
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--igny8-blue)] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
<ListIcon className="h-6 w-6" /> <ListIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
<h4 className="font-semibold text-slate-900 mb-1">Add Keywords</h4> <h4 className="font-semibold text-slate-900 mb-1">Add Keywords</h4>
<p className="text-sm text-slate-600">Discover opportunities</p> <p className="text-sm text-slate-600">Discover opportunities</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] transition" /> <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] transition" />
</Link> </Link>
<Link <Link
to="/planner/clusters" to="/planner/clusters"
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-lg">
<GroupIcon className="h-6 w-6" /> <GroupIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
@@ -666,7 +666,7 @@ export default function PlannerDashboard() {
to="/planner/ideas" to="/planner/ideas"
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)] flex items-center justify-center text-white shadow-lg">
<BoltIcon className="h-6 w-6" /> <BoltIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
@@ -680,7 +680,7 @@ export default function PlannerDashboard() {
to="/automation" to="/automation"
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)] flex items-center justify-center text-white shadow-lg">
<PlugInIcon className="h-6 w-6" /> <PlugInIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
@@ -697,7 +697,7 @@ export default function PlannerDashboard() {
<ComponentCard title="How Planner Works" desc="Understanding the planning workflow"> <ComponentCard title="How Planner Works" desc="Understanding the planning workflow">
<div className="space-y-4"> <div className="space-y-4">
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-md"> <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-md">
<ListIcon className="h-5 w-5" /> <ListIcon className="h-5 w-5" />
</div> </div>
<div> <div>
@@ -708,7 +708,7 @@ export default function PlannerDashboard() {
</div> </div>
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-md"> <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-md">
<GroupIcon className="h-5 w-5" /> <GroupIcon className="h-5 w-5" />
</div> </div>
<div> <div>
@@ -719,7 +719,7 @@ export default function PlannerDashboard() {
</div> </div>
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-md"> <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)] flex items-center justify-center text-white shadow-md">
<BoltIcon className="h-5 w-5" /> <BoltIcon className="h-5 w-5" />
</div> </div>
<div> <div>

32
frontend/src/pages/Thinker/Dashboard.tsx
View File

@@ -67,7 +67,7 @@ export default function ThinkerDashboard() {
title: "Prompt Library", title: "Prompt Library",
description: "Centralized prompt templates and AI instructions", description: "Centralized prompt templates and AI instructions",
icon: FileTextIcon, icon: FileTextIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
path: "/thinker/prompts", path: "/thinker/prompts",
count: stats?.totalPrompts || 0, count: stats?.totalPrompts || 0,
status: "active", status: "active",
@@ -76,7 +76,7 @@ export default function ThinkerDashboard() {
title: "Author Profiles", title: "Author Profiles",
description: "Voice templates and writing style guides", description: "Voice templates and writing style guides",
icon: UserIcon, icon: UserIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
path: "/thinker/profiles", path: "/thinker/profiles",
count: stats?.activeProfiles || 0, count: stats?.activeProfiles || 0,
status: "active", status: "active",
@@ -85,7 +85,7 @@ export default function ThinkerDashboard() {
title: "Content Strategies", title: "Content Strategies",
description: "Brand playbooks and content frameworks", description: "Brand playbooks and content frameworks",
icon: ShootingStarIcon, icon: ShootingStarIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
path: "/thinker/strategies", path: "/thinker/strategies",
count: stats?.strategies || 0, count: stats?.strategies || 0,
status: "active", status: "active",
@@ -94,7 +94,7 @@ export default function ThinkerDashboard() {
title: "Governance", title: "Governance",
description: "Track AI usage, compliance, and version control", description: "Track AI usage, compliance, and version control",
icon: PieChartIcon, icon: PieChartIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
path: "/thinker/governance", path: "/thinker/governance",
count: 0, count: 0,
status: "coming-soon", status: "coming-soon",
@@ -131,7 +131,7 @@ export default function ThinkerDashboard() {
height: 300, height: 300,
}, },
labels: ["Content Generation", "Content Planning", "Image Prompts", "Other"], labels: ["Content Generation", "Content Planning", "Image Prompts", "Other"],
colors: ["#ff7a00", "#0693e3", "#5d4ae3", "#0bbf87"], colors: ["var(--igny8-amber)", "var(--igny8-blue)", "var(--igny8-purple)", "var(--igny8-green)"],
legend: { legend: {
position: "bottom", position: "bottom",
labels: { colors: "#6b7280" }, labels: { colors: "#6b7280" },
@@ -208,7 +208,7 @@ export default function ThinkerDashboard() {
{module.count > 0 && ( {module.count > 0 && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-2xl font-bold text-slate-900">{module.count}</span> <span className="text-2xl font-bold text-slate-900">{module.count}</span>
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] group-hover:translate-x-1 transition" /> <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] group-hover:translate-x-1 transition" />
</div> </div>
)} )}
{module.status === "coming-soon" && ( {module.status === "coming-soon" && (
@@ -237,13 +237,13 @@ export default function ThinkerDashboard() {
key={prompt.id} key={prompt.id}
className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-md transition" className="flex items-center gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:shadow-md transition"
> >
<div className="size-10 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-md"> <div className="size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)] flex items-center justify-center text-white shadow-md">
<FileTextIcon className="h-5 w-5" /> <FileTextIcon className="h-5 w-5" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-1">
<h4 className="font-semibold text-slate-900">{prompt.name}</h4> <h4 className="font-semibold text-slate-900">{prompt.name}</h4>
<span className="text-xs font-semibold text-[#0693e3]">{prompt.usage} uses</span> <span className="text-xs font-semibold text-[var(--igny8-blue)]">{prompt.usage} uses</span>
</div> </div>
<div className="flex items-center gap-3 text-xs text-slate-600"> <div className="flex items-center gap-3 text-xs text-slate-600">
<span>{prompt.category}</span> <span>{prompt.category}</span>
@@ -262,9 +262,9 @@ export default function ThinkerDashboard() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<button <button
onClick={() => navigate("/thinker/prompts")} onClick={() => navigate("/thinker/prompts")}
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--igny8-amber)] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)] flex items-center justify-center text-white shadow-lg">
<PlusIcon className="h-6 w-6" /> <PlusIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
@@ -278,21 +278,21 @@ export default function ThinkerDashboard() {
onClick={() => navigate("/thinker/profiles")} onClick={() => navigate("/thinker/profiles")}
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
<PlusIcon className="h-6 w-6" /> <PlusIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
<h4 className="font-semibold text-slate-900 mb-1">New Author Profile</h4> <h4 className="font-semibold text-slate-900 mb-1">New Author Profile</h4>
<p className="text-sm text-slate-600">Define a writing voice and style</p> <p className="text-sm text-slate-600">Define a writing voice and style</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] transition" /> <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] transition" />
</button> </button>
<button <button
onClick={() => navigate("/thinker/strategies")} onClick={() => navigate("/thinker/strategies")}
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)] flex items-center justify-center text-white shadow-lg">
<PlusIcon className="h-6 w-6" /> <PlusIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
@@ -309,7 +309,7 @@ export default function ThinkerDashboard() {
<ComponentCard title="How Thinker Works" desc="Understanding the strategic OS"> <ComponentCard title="How Thinker Works" desc="Understanding the strategic OS">
<div className="space-y-4"> <div className="space-y-4">
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-md"> <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)] flex items-center justify-center text-white shadow-md">
<BoltIcon className="h-5 w-5" /> <BoltIcon className="h-5 w-5" />
</div> </div>
<div> <div>
@@ -320,7 +320,7 @@ export default function ThinkerDashboard() {
</div> </div>
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-md"> <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-md">
<CheckCircleIcon className="h-5 w-5" /> <CheckCircleIcon className="h-5 w-5" />
</div> </div>
<div> <div>
@@ -331,7 +331,7 @@ export default function ThinkerDashboard() {
</div> </div>
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-md"> <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-md">
<ShootingStarIcon className="h-5 w-5" /> <ShootingStarIcon className="h-5 w-5" />
</div> </div>
<div> <div>

30
frontend/src/pages/Writer/Dashboard.tsx
View File

@@ -207,7 +207,7 @@ export default function WriterDashboard() {
title: "Tasks", title: "Tasks",
description: "Content writing tasks and assignments", description: "Content writing tasks and assignments",
icon: FileTextIcon, icon: FileTextIcon,
color: "from-[#0693e3] to-[#0472b8]", color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
path: "/writer/tasks", path: "/writer/tasks",
count: stats?.tasks.total || 0, count: stats?.tasks.total || 0,
metric: `${stats?.tasks.completed || 0} completed`, metric: `${stats?.tasks.completed || 0} completed`,
@@ -216,7 +216,7 @@ export default function WriterDashboard() {
title: "Content", title: "Content",
description: "Generated content and drafts", description: "Generated content and drafts",
icon: PencilIcon, icon: PencilIcon,
color: "from-[#0bbf87] to-[#08966b]", color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
path: "/writer/content", path: "/writer/content",
count: stats?.content.total || 0, count: stats?.content.total || 0,
metric: `${stats?.content.published || 0} published`, metric: `${stats?.content.published || 0} published`,
@@ -225,7 +225,7 @@ export default function WriterDashboard() {
title: "Images", title: "Images",
description: "Generated images and assets", description: "Generated images and assets",
icon: BoxIcon, icon: BoxIcon,
color: "from-[#ff7a00] to-[#cc5f00]", color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
path: "/writer/images", path: "/writer/images",
count: stats?.images.generated || 0, count: stats?.images.generated || 0,
metric: `${stats?.images.pending || 0} pending`, metric: `${stats?.images.pending || 0} pending`,
@@ -234,7 +234,7 @@ export default function WriterDashboard() {
title: "Published", title: "Published",
description: "Published content and posts", description: "Published content and posts",
icon: PaperPlaneIcon, icon: PaperPlaneIcon,
color: "from-[#5d4ae3] to-[#3a2f94]", color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
path: "/writer/published", path: "/writer/published",
count: stats?.content.published || 0, count: stats?.content.published || 0,
metric: "View all published", metric: "View all published",
@@ -290,7 +290,7 @@ export default function WriterDashboard() {
position: "top", position: "top",
labels: { colors: "#6b7280" }, labels: { colors: "#6b7280" },
}, },
colors: ["#0693e3", "#0bbf87", "#ff7a00"], colors: ["var(--igny8-blue)", "var(--igny8-green)", "var(--igny8-amber)"],
grid: { grid: {
borderColor: "#e5e7eb", borderColor: "#e5e7eb",
}, },
@@ -530,7 +530,7 @@ export default function WriterDashboard() {
<div className="text-2xl font-bold text-slate-900">{module.count}</div> <div className="text-2xl font-bold text-slate-900">{module.count}</div>
<div className="text-xs text-slate-500">{module.metric}</div> <div className="text-xs text-slate-500">{module.metric}</div>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] group-hover:translate-x-1 transition" /> <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] group-hover:translate-x-1 transition" />
</div> </div>
</Link> </Link>
); );
@@ -650,23 +650,23 @@ export default function WriterDashboard() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<Link <Link
to="/writer/tasks" to="/writer/tasks"
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0693e3] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[var(--igny8-blue)] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
<FileTextIcon className="h-6 w-6" /> <FileTextIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
<h4 className="font-semibold text-slate-900 mb-1">Create Task</h4> <h4 className="font-semibold text-slate-900 mb-1">Create Task</h4>
<p className="text-sm text-slate-600">New writing task</p> <p className="text-sm text-slate-600">New writing task</p>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[#0693e3] transition" /> <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-[var(--igny8-blue)] transition" />
</Link> </Link>
<Link <Link
to="/writer/content" to="/writer/content"
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#0bbf87] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-lg">
<PencilIcon className="h-6 w-6" /> <PencilIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
@@ -680,7 +680,7 @@ export default function WriterDashboard() {
to="/writer/images" to="/writer/images"
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#ff7a00] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)] flex items-center justify-center text-white shadow-lg">
<BoxIcon className="h-6 w-6" /> <BoxIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
@@ -694,7 +694,7 @@ export default function WriterDashboard() {
to="/writer/published" to="/writer/published"
className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group" className="flex items-center gap-4 p-6 rounded-xl border-2 border-slate-200 bg-white hover:border-[#5d4ae3] hover:shadow-lg transition-all group"
> >
<div className="size-12 rounded-xl bg-gradient-to-br from-[#5d4ae3] to-[#3a2f94] flex items-center justify-center text-white shadow-lg"> <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)] flex items-center justify-center text-white shadow-lg">
<PaperPlaneIcon className="h-6 w-6" /> <PaperPlaneIcon className="h-6 w-6" />
</div> </div>
<div className="flex-1 text-left"> <div className="flex-1 text-left">
@@ -711,7 +711,7 @@ export default function WriterDashboard() {
<ComponentCard title="How Writer Works" desc="Understanding the content creation workflow"> <ComponentCard title="How Writer Works" desc="Understanding the content creation workflow">
<div className="space-y-4"> <div className="space-y-4">
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-md"> <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-md">
<FileTextIcon className="h-5 w-5" /> <FileTextIcon className="h-5 w-5" />
</div> </div>
<div> <div>
@@ -722,7 +722,7 @@ export default function WriterDashboard() {
</div> </div>
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-md"> <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-md">
<PencilIcon className="h-5 w-5" /> <PencilIcon className="h-5 w-5" />
</div> </div>
<div> <div>
@@ -733,7 +733,7 @@ export default function WriterDashboard() {
</div> </div>
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[#ff7a00] to-[#cc5f00] flex items-center justify-center text-white shadow-md"> <div className="flex-shrink-0 size-10 rounded-lg bg-gradient-to-br from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)] flex items-center justify-center text-white shadow-md">
<BoxIcon className="h-5 w-5" /> <BoxIcon className="h-5 w-5" />
</div> </div>
<div> <div>

10
frontend/src/styles/igny8-colors.css
View File

@@ -125,6 +125,16 @@
.igny8-gradient-purple { background: var(--igny8-gradient-purple); } .igny8-gradient-purple { background: var(--igny8-gradient-purple); }
.igny8-gradient-panel { background: var(--igny8-gradient-panel); } .igny8-gradient-panel { background: var(--igny8-gradient-panel); }
/* === Tailwind Gradient Utilities (for use with bg-gradient-to-*) === */
.igny8-from-blue { --tw-gradient-from: var(--igny8-blue); --tw-gradient-to: var(--igny8-blue-dark); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.igny8-to-blue-dark { --tw-gradient-to: var(--igny8-blue-dark); }
.igny8-from-green { --tw-gradient-from: var(--igny8-green); --tw-gradient-to: var(--igny8-green-dark); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.igny8-to-green-dark { --tw-gradient-to: var(--igny8-green-dark); }
.igny8-from-amber { --tw-gradient-from: var(--igny8-amber); --tw-gradient-to: var(--igny8-amber-dark); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.igny8-to-amber-dark { --tw-gradient-to: var(--igny8-amber-dark); }
.igny8-from-purple { --tw-gradient-from: var(--igny8-purple); --tw-gradient-to: var(--igny8-purple-dark); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.igny8-to-purple-dark { --tw-gradient-to: var(--igny8-purple-dark); }
/* === Border Radius === */ /* === Border Radius === */
.igny8-rounded { border-radius: var(--igny8-radius); } .igny8-rounded { border-radius: var(--igny8-radius); }
.igny8-rounded-xl { border-radius: calc(var(--igny8-radius) * 2); } .igny8-rounded-xl { border-radius: calc(var(--igny8-radius) * 2); }