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

color scheme update

Browse Source
This commit is contained in:
Desktop
2025-11-14 06:24:25 +05:00
parent 1ed3c482ad
commit 99ea23baa5
11 changed files with 200 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/index.css
View File

@@ -153,6 +153,16 @@ layer(base);
--color-theme-purple-500: #7a5af8; --color-theme-purple-500: #7a5af8;
/* IGNY8 Brand Colors - Use these for consistent branding */
--color-igny8-blue: #0693e3;
--color-igny8-blue-dark: #0472b8;
--color-igny8-green: #0bbf87;
--color-igny8-green-dark: #08966b;
--color-igny8-amber: #ff7a00;
--color-igny8-amber-dark: #cc5f00;
--color-igny8-purple: #5d4ae3;
--color-igny8-purple-dark: #3a2f94;
--shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), --shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
0px 2px 4px -2px rgba(16, 24, 40, 0.06); 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
--shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), --shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),

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-igny8-blue to-igny8-blue-dark" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[#5d4ae3] to-[#3a2f94]" }, { name: "Clusters", icon: UserGroupIcon, color: "from-igny8-purple to-igny8-purple-dark" },
{ name: "Ideas", icon: LightBulbIcon, color: "from-[#ff7a00] to-[#cc5f00]" }, { name: "Ideas", icon: LightBulbIcon, color: "from-igny8-amber to-igny8-amber-dark" },
{ name: "Tasks", icon: DocumentTextIcon, color: "from-[#0bbf87] to-[#08966b]" }, { name: "Tasks", icon: DocumentTextIcon, color: "from-igny8-green to-igny8-green-dark" },
{ name: "Content", icon: SparklesIcon, color: "from-[#0693e3] to-[#0472b8]" }, { name: "Content", icon: SparklesIcon, color: "from-igny8-blue to-igny8-blue-dark" },
{ name: "Images", icon: PhotoIcon, color: "from-[#5d4ae3] to-[#3a2f94]" }, { name: "Images", icon: PhotoIcon, color: "from-igny8-purple to-igny8-purple-dark" },
{ name: "Publish", icon: BoltIcon, color: "from-[#0bbf87] to-[#08966b]" }, { name: "Publish", icon: BoltIcon, color: "from-igny8-green to-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-igny8-blue to-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-igny8-green to-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-igny8-amber to-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-igny8-purple to-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-igny8-blue via-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-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-igny8-blue/20 to-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-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-igny8-blue/3 to-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-igny8-blue via-igny8-purple via-igny8-amber via-igny8-green to-igny8-blue opacity-25 hidden md:block shadow-lg shadow-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-igny8-blue/1 to-white",
"bg-gradient-to-b from-[#0bbf87]/1 to-white", "bg-gradient-to-b from-igny8-green/1 to-white",
"bg-gradient-to-b from-[#5d4ae3]/1 to-white", "bg-gradient-to-b from-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-igny8-blue to-igny8-purple flex items-center justify-center text-white shadow-lg shadow-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-igny8-blue to-igny8-purple", glow: "shadow-igny8-blue/50" },
{ from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" }, { from: "Clusters", to: "Ideas", icon: "→", color: "from-igny8-purple to-igny8-amber", glow: "shadow-igny8-purple/50" },
{ from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" }, { from: "Ideas", to: "Tasks", icon: "→", color: "from-igny8-amber to-igny8-green", glow: "shadow-igny8-amber/50" },
{ from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" }, { from: "Tasks", to: "Content", icon: "→", color: "from-igny8-green to-igny8-blue", glow: "shadow-igny8-green/50" },
{ from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" }, { from: "Content", to: "Images", icon: "→", color: "from-igny8-blue to-igny8-purple", glow: "shadow-igny8-blue/50" },
{ from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" }, { from: "Images", to: "Publish", icon: "→", color: "from-igny8-purple to-igny8-green", glow: "shadow-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-igny8-blue/20 to-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-igny8-blue/20 bg-igny8-blue/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-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-igny8-blue/20 to-igny8-blue-dark/10",
"from-[#0bbf87]/20 to-[#08966b]/10", "from-igny8-green/20 to-igny8-green-dark/10",
"from-[#5d4ae3]/20 to-[#3a2f94]/10", "from-igny8-purple/20 to-igny8-purple-dark/10",
]; ];
const borderColors = [ const borderColors = [
"border-[#0693e3]/30", "border-igny8-blue/30",
"border-[#0bbf87]/30", "border-igny8-green/30",
"border-[#5d4ae3]/30", "border-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-igny8-purple to-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-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

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-igny8-blue to-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-igny8-green to-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-igny8-purple to-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-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-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-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-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-igny8-blue to-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-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-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-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-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-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-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-igny8-blue to-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-igny8-green to-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-igny8-blue via-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-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-igny8-blue to-igny8-blue-dark" },
{ name: "Clusters", icon: UserGroupIcon, color: "from-[#5d4ae3] to-[#3a2f94]" }, { name: "Clusters", icon: UserGroupIcon, color: "from-igny8-purple to-igny8-purple-dark" },
{ name: "Ideas", icon: LightBulbIcon, color: "from-[#ff7a00] to-[#cc5f00]" }, { name: "Ideas", icon: LightBulbIcon, color: "from-igny8-amber to-igny8-amber-dark" },
{ name: "Tasks", icon: DocumentTextIcon, color: "from-[#0bbf87] to-[#08966b]" }, { name: "Tasks", icon: DocumentTextIcon, color: "from-igny8-green to-igny8-green-dark" },
{ name: "Content", icon: SparklesIcon, color: "from-[#0693e3] to-[#0472b8]" }, { name: "Content", icon: SparklesIcon, color: "from-igny8-blue to-igny8-blue-dark" },
{ name: "Publish", icon: BoltIcon, color: "from-[#0bbf87] to-[#08966b]" }, { name: "Publish", icon: BoltIcon, color: "from-igny8-green to-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-igny8-blue to-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-igny8-green to-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-igny8-amber to-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-igny8-purple to-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-igny8-blue to-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-igny8-blue hover:text-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-igny8-blue via-igny8-purple via-igny8-amber via-igny8-green to-igny8-blue opacity-25 hidden md:block shadow-lg shadow-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-igny8-blue/1 to-white",
"bg-gradient-to-b from-[#0bbf87]/1 to-white", "bg-gradient-to-b from-igny8-green/1 to-white",
"bg-gradient-to-b from-[#5d4ae3]/1 to-white", "bg-gradient-to-b from-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-igny8-blue to-igny8-purple flex items-center justify-center text-white shadow-lg shadow-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-igny8-blue to-igny8-purple", glow: "shadow-igny8-blue/50" },
{ from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" }, { from: "Clusters", to: "Ideas", icon: "→", color: "from-igny8-purple to-igny8-amber", glow: "shadow-igny8-purple/50" },
{ from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" }, { from: "Ideas", to: "Tasks", icon: "→", color: "from-igny8-amber to-igny8-green", glow: "shadow-igny8-amber/50" },
{ from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" }, { from: "Tasks", to: "Content", icon: "→", color: "from-igny8-green to-igny8-blue", glow: "shadow-igny8-green/50" },
{ from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" }, { from: "Content", to: "Images", icon: "→", color: "from-igny8-blue to-igny8-purple", glow: "shadow-igny8-blue/50" },
{ from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" }, { from: "Images", to: "Publish", icon: "→", color: "from-igny8-purple to-igny8-green", glow: "shadow-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-igny8-blue/20 to-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-igny8-blue/20 bg-igny8-blue/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-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-igny8-blue/20 to-igny8-blue-dark/10",
"from-[#0bbf87]/20 to-[#08966b]/10", "from-igny8-green/20 to-igny8-green-dark/10",
"from-[#5d4ae3]/20 to-[#3a2f94]/10", "from-igny8-purple/20 to-igny8-purple-dark/10",
]; ];
const borderColors = [ const borderColors = [
"border-[#0693e3]/30", "border-igny8-blue/30",
"border-[#0bbf87]/30", "border-igny8-green/30",
"border-[#5d4ae3]/30", "border-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-igny8-blue via-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-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

44
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-igny8-blue to-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-igny8-green to-igny8-green-dark",
}, },
{ {
title: "SERP-Guided Content Planning Playbook", title: "SERP-Guided Content Planning Playbook",
@@ -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-igny8-blue to-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-igny8-green to-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-igny8-purple to-igny8-purple-dark",
}, },
{ {
title: "Cluster Mapping Board", title: "Cluster Mapping Board",
@@ -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-igny8-blue to-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-igny8-green to-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-igny8-purple to-igny8-purple-dark",
}, },
{ {
title: "Editorial Control and AI Tone Systems", title: "Editorial Control and AI Tone Systems",
@@ -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-igny8-blue to-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-igny8-green to-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-igny8-purple to-igny8-purple-dark",
}, },
{ {
title: "AI Prompt Library for Content Teams", title: "AI Prompt Library for Content Teams",
@@ -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-igny8-blue to-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-igny8-blue hover:text-[#0472b8] 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-igny8-blue transition"
> >
View All Guides View All Guides
<ArrowRightIcon className="h-5 w-5" /> <ArrowRightIcon className="h-5 w-5" />
@@ -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-igny8-blue hover:text-[#0472b8] 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-igny8-blue transition"
> >
Explore Templates Explore Templates
<ArrowRightIcon className="h-5 w-5" /> <ArrowRightIcon className="h-5 w-5" />
@@ -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-igny8-blue to-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-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-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-igny8-blue hover:text-[#0472b8] 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-igny8-green to-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-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-igny8-blue/5 to-white",
borderColor: "border-[#0693e3]/20", borderColor: "border-igny8-blue/20",
iconColor: "from-[#0693e3] to-[#0472b8]", iconColor: "from-igny8-blue to-igny8-blue-dark",
painColor: "bg-rose-500", painColor: "bg-rose-500",
outcomeColor: "bg-[#0693e3]", outcomeColor: "bg-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-igny8-green/5 to-white",
borderColor: "border-[#0bbf87]/20", borderColor: "border-igny8-green/20",
iconColor: "from-[#0bbf87] to-[#08966b]", iconColor: "from-igny8-green to-igny8-green-dark",
painColor: "bg-rose-500", painColor: "bg-rose-500",
outcomeColor: "bg-[#0bbf87]", outcomeColor: "bg-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-igny8-purple/5 to-white",
borderColor: "border-[#5d4ae3]/20", borderColor: "border-igny8-purple/20",
iconColor: "from-[#5d4ae3] to-[#3a2f94]", iconColor: "from-igny8-purple to-igny8-purple-dark",
painColor: "bg-rose-500", painColor: "bg-rose-500",
outcomeColor: "bg-[#5d4ae3]", outcomeColor: "bg-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-igny8-blue to-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-igny8-green to-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-igny8-amber to-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-igny8-purple to-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-igny8-blue to-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-igny8-green to-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-igny8-blue to-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-igny8-blue hover:text-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-igny8-blue' ? 'text-igny8-blue' : persona.outcomeColor === 'bg-igny8-green' ? 'text-igny8-green' : 'text-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-igny8-blue' ? 'text-igny8-blue' : persona.outcomeColor === 'bg-igny8-green' ? 'text-igny8-green' : 'text-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-igny8-blue to-igny8-blue-dark",
glow: "shadow-[#0693e3]/30", glow: "shadow-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-igny8-green to-igny8-green-dark",
glow: "shadow-[#0bbf87]/30", glow: "shadow-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-igny8-amber to-igny8-amber-dark",
glow: "shadow-[#ff7a00]/30", glow: "shadow-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-igny8-blue via-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-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/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-igny8-purple to-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-igny8-green to-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-igny8-blue to-igny8-blue-dark",
}, },
]; ];
@@ -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-igny8-blue to-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,7 +360,7 @@ 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-igny8-green to-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" />
@@ -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-igny8-blue to-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,7 +434,7 @@ 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-igny8-blue to-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">
@@ -448,7 +448,7 @@ export default function AutomationDashboard() {
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-igny8-green to-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-igny8-purple to-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">

16
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-igny8-blue to-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-igny8-green to-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-igny8-amber to-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-igny8-purple to-igny8-purple-dark",
path: "/automation", path: "/automation",
count: 0, count: 0,
status: "active", status: "active",
@@ -512,7 +512,7 @@ export default function Home() {
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-[#0693e3] 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-igny8-blue to-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">
@@ -526,7 +526,7 @@ export default function Home() {
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-igny8-green to-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-igny8-purple to-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-igny8-amber to-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">

22
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-igny8-blue to-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-igny8-green to-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-igny8-amber to-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-igny8-purple to-igny8-purple-dark",
path: "/planner/keyword-opportunities", path: "/planner/keyword-opportunities",
count: 0, count: 0,
metric: "Discover new keywords", metric: "Discover new keywords",
@@ -638,7 +638,7 @@ export default function PlannerDashboard() {
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-[#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-igny8-blue to-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">
@@ -652,7 +652,7 @@ export default function PlannerDashboard() {
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-igny8-green to-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-igny8-amber to-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-igny8-purple to-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-igny8-blue to-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-igny8-green to-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-igny8-amber to-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>

22
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-igny8-amber to-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-igny8-blue to-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-igny8-purple to-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-igny8-green to-igny8-green-dark",
path: "/thinker/governance", path: "/thinker/governance",
count: 0, count: 0,
status: "coming-soon", status: "coming-soon",
@@ -237,7 +237,7 @@ 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-igny8-amber to-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">
@@ -264,7 +264,7 @@ export default function ThinkerDashboard() {
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-[#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-igny8-amber to-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,7 +278,7 @@ 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-igny8-blue to-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">
@@ -292,7 +292,7 @@ export default function ThinkerDashboard() {
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-igny8-purple to-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-igny8-amber to-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-igny8-blue to-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-igny8-green to-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>

22
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-igny8-blue to-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-igny8-green to-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-igny8-amber to-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-igny8-purple to-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",
@@ -652,7 +652,7 @@ export default function WriterDashboard() {
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-[#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-igny8-blue to-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">
@@ -666,7 +666,7 @@ export default function WriterDashboard() {
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-igny8-green to-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-igny8-amber to-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-igny8-purple to-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-igny8-blue to-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-igny8-green to-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-igny8-amber to-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>