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

phase 1-3 css refactor

Browse Source
This commit is contained in:
Desktop
2025-11-14 15:04:47 +05:00
parent 9eee5168bb
commit 27465457d5
26 changed files with 818 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,6 @@
import React from "react";
import Button from "../../components/ui/button/Button";
import { Link } from "react-router-dom";
interface CTASectionProps {
title: string;
description: string;
@@ -12,36 +14,53 @@ const CTASection: React.FC<CTASectionProps> = ({
primaryCta,
secondaryCta,
}) => {
const renderAnchor = (label: string, href: string, className: string) => {
const renderCta = (label: string, href: string, isPrimary: boolean) => {
const isExternal = href.startsWith("http");
const buttonClasses = isPrimary
? "shadow-lg shadow-[var(--color-primary)]/30"
: "";
if (isExternal) {
return (
<a
<Button
key={href}
as="a"
href={href}
className={className}
target="_blank"
rel="noreferrer"
variant={isPrimary ? "gradient" : "outline"}
tone={isPrimary ? "brand" : "neutral"}
shape="pill"
size="lg"
className={buttonClasses}
>
{label}
</a>
</Button>
);
}
return (
<a key={href} href={href} className={className}>
<Button
key={href}
as={Link}
to={href}
variant={isPrimary ? "gradient" : "outline"}
tone={isPrimary ? "brand" : "neutral"}
shape="pill"
size="lg"
className={buttonClasses}
>
{label}
</a>
</Button>
);
};
return (
<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="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-[var(--igny8-blue)]/10 via-transparent to-[var(--igny8-purple)]/10" />
<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 overflow-hidden rounded-3xl border-2 border-[var(--color-primary)]/20 bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-purple)]/5 to-[var(--color-success)]/5 p-10 md:p-14 shadow-xl">
<div className="absolute inset-0 bg-gradient-to-r from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10 opacity-50" />
<div className="relative flex flex-col gap-6">
<h3 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight">
{title}
@@ -50,18 +69,8 @@ const CTASection: React.FC<CTASectionProps> = ({
{description}
</p>
<div className="flex flex-col sm:flex-row gap-4">
{renderAnchor(
primaryCta.label,
primaryCta.href,
"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 && (
renderAnchor(
secondaryCta.label,
secondaryCta.href,
"inline-flex items-center justify-center rounded-full border-2 border-slate-300 bg-white/50 backdrop-blur-sm px-6 py-3 text-sm md:text-base font-semibold text-slate-700 hover:text-slate-900 hover:border-[#0693e3] hover:bg-white transition"
)
)}
{renderCta(primaryCta.label, primaryCta.href, true)}
{secondaryCta && renderCta(secondaryCta.label, secondaryCta.href, false)}
</div>
</div>
</div>

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

@@ -14,10 +14,10 @@ interface FeatureGridProps {
const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
const iconColors = [
"from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]", // Blue
"from-[var(--igny8-green)] to-[var(--igny8-green-dark)]", // Green
"from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]", // Amber
"from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]", // Purple
"from-[var(--color-primary)] to-[var(--color-primary-dark)]", // Blue
"from-[var(--color-success)] to-[var(--color-success-dark)]", // Green
"from-[var(--color-warning)] to-[var(--color-warning-dark)]", // Amber
"from-[var(--color-purple)] to-[var(--color-purple-dark)]", // Purple
];
return (

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

@@ -1,5 +1,7 @@
import React from "react";
import { Link } from "react-router-dom";
import Button from "../../components/ui/button/Button";
import Badge from "../../components/ui/badge/Badge";
interface HeroSectionProps {
image: string;
@@ -16,38 +18,59 @@ const HeroSection: React.FC<HeroSectionProps> = ({
primaryCta,
secondaryCta,
}) => {
const renderCta = (cta: { label: string; href: string }, className: string) => {
const renderCta = (cta: { label: string; href: string }, isPrimary: boolean) => {
const isExternal = cta.href.startsWith("http");
const buttonClasses = isPrimary
? "shadow-lg shadow-[var(--color-primary)]/30"
: "border-white/30 bg-white/5 backdrop-blur-sm text-white hover:bg-white/10 hover:border-white/50";
if (isExternal) {
return (
<a
<Button
as="a"
href={cta.href}
className={className}
target="_blank"
rel="noreferrer"
variant={isPrimary ? "gradient" : "outline"}
tone={isPrimary ? "brand" : "neutral"}
shape="pill"
size="lg"
className={buttonClasses}
>
{cta.label}
</a>
</Button>
);
}
return (
<Link to={cta.href} className={className}>
<Button
as={Link}
to={cta.href}
variant={isPrimary ? "gradient" : "outline"}
tone={isPrimary ? "brand" : "neutral"}
shape="pill"
size="lg"
className={buttonClasses}
>
{cta.label}
</Link>
</Button>
);
};
return (
<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-[var(--igny8-blue)]/10 via-transparent to-[var(--igny8-purple)]/10" />
<div className="absolute inset-0 bg-gradient-to-br from-[var(--color-primary)]/10 via-transparent to-[var(--color-purple)]/10" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(6,147,227,0.15),transparent_50%)]" />
<div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center">
<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-[var(--igny8-blue)] bg-[var(--igny8-blue)]/10 px-4 py-2 rounded-full border border-[var(--igny8-blue)]/20">
<Badge
variant="soft"
tone="primary"
size="sm"
className="uppercase tracking-[0.28em] border border-[var(--color-primary)]/20"
>
AI + SEO PLATFORM
</span>
</Badge>
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
{headline}
</h1>
@@ -55,26 +78,20 @@ const HeroSection: React.FC<HeroSectionProps> = ({
{subheadline}
</p>
<div className="flex flex-col sm:flex-row gap-4">
{renderCta(
primaryCta,
"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,
"inline-flex items-center justify-center rounded-full border-2 border-white/30 bg-white/5 backdrop-blur-sm px-6 py-3 text-sm md:text-base font-semibold text-white hover:bg-white/10 hover:border-white/50 transition"
)}
{renderCta(primaryCta, true)}
{secondaryCta && renderCta(secondaryCta, false)}
</div>
</div>
<div className="flex-1 w-full">
<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-[var(--igny8-purple)]/20 to-[var(--igny8-green)]/20 rounded-3xl blur-xl -z-10" />
<div className="relative rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[var(--color-primary)]/20">
<div className="absolute -inset-1 bg-gradient-to-r from-[var(--color-primary)]/20 via-[var(--color-purple)]/20 to-[var(--color-success)]/20 rounded-3xl blur-xl -z-10" />
<img
src={`/marketing/images/${image}`}
alt="Igny8 dashboard preview"
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-[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-[var(--igny8-blue)]">
<div className="absolute bottom-6 left-6 bg-gradient-to-br from-[#0d1b2a]/95 to-[#142b3f]/95 backdrop-blur-lg border border-[var(--color-primary)]/30 rounded-2xl px-6 py-4 flex flex-col gap-1 shadow-xl">
<span className="text-xs uppercase tracking-[0.2em] text-[var(--color-primary)]">
End-to-end automation
</span>
<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 accentColors = [
"from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
"from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
"from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
"from-[var(--color-primary)] to-[var(--color-primary-dark)]",
"from-[var(--color-success)] to-[var(--color-success-dark)]",
"from-[var(--color-warning)] to-[var(--color-warning-dark)]",
];
return (

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

@@ -11,10 +11,10 @@ interface WorkflowStepsProps {
const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
const stepColors = [
"from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
"from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
"from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
"from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
"from-[var(--color-primary)] to-[var(--color-primary-dark)]",
"from-[var(--color-success)] to-[var(--color-success-dark)]",
"from-[var(--color-warning)] to-[var(--color-warning-dark)]",
"from-[var(--color-purple)] to-[var(--color-purple-dark)]",
];
return (
@@ -25,12 +25,12 @@ const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
return (
<div
key={step.title}
className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-6 flex flex-col gap-4 hover:border-[var(--igny8-blue)]/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(--color-primary)]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1 group"
>
<div className={`h-12 w-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center font-semibold text-white text-xl shadow-lg`}>
{index + 1}
</div>
<h3 className="text-lg font-semibold text-slate-900 leading-snug group-hover:text-[var(--igny8-blue)] transition">
<h3 className="text-lg font-semibold text-slate-900 leading-snug group-hover:text-[var(--color-primary)] transition">
{step.title}
</h3>
<p className="text-sm text-slate-600 leading-relaxed">

14
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">
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<Link to="/" className="flex items-center gap-3" onClick={closeMobile}>
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[var(--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">
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[var(--color-primary)]/30">
IG
</span>
<div className="flex flex-col leading-tight">
@@ -37,7 +37,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<Link
key={link.name}
to={link.path}
className={`transition hover:text-[var(--igny8-blue)] ${isActive ? "text-[var(--igny8-blue)] font-semibold" : "text-slate-700"}`}
className={`transition hover:text-[var(--color-primary)] ${isActive ? "text-[var(--color-primary)] font-semibold" : "text-slate-700"}`}
>
{link.name}
</Link>
@@ -54,7 +54,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
</a>
<a
href="https://app.igny8.com/signup"
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"
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] hover:from-[var(--color-primary-dark)] hover:to-[var(--color-primary)] text-white px-5 py-2 text-sm font-semibold transition shadow-md shadow-[var(--color-primary)]/30"
>
Start Free
</a>
@@ -93,7 +93,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
</a>
<a
href="https://app.igny8.com/signup"
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"
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] hover:from-[var(--color-primary-dark)] hover:to-[var(--color-primary)] text-white px-5 py-2 text-sm font-semibold transition shadow-md shadow-[var(--color-primary)]/30"
onClick={closeMobile}
>
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="space-y-4">
<Link to="/" className="inline-flex items-center gap-3">
<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">
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[var(--color-primary)]/30">
IG
</span>
<div className="flex flex-col leading-tight">
@@ -137,7 +137,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<ul className="space-y-3 text-sm text-slate-300">
{group.links.map((link) => (
<li key={link.name}>
<Link to={link.path} className="hover:text-[var(--igny8-blue)] transition">
<Link to={link.path} className="hover:text-[var(--color-primary)] transition">
{link.name}
</Link>
</li>
@@ -146,7 +146,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
</div>
))}
</div>
<div className="border-t border-[#0693e3]/20 py-6 px-6 text-center text-xs text-slate-400">
<div className="border-t border-[var(--color-primary)]/20 py-6 px-6 text-center text-xs text-slate-400">
Built for marketers who automate growth with AI.
</div>
</footer>

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

@@ -43,7 +43,7 @@ const CaseStudies: React.FC = () => {
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.",
image: "case-lumen.png",
iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
iconColor: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
},
{
company: "Northbeam Digital",
@@ -56,7 +56,7 @@ const CaseStudies: React.FC = () => {
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.",
image: "case-northbeam.png",
iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
iconColor: "from-[var(--color-success)] to-[var(--color-success-dark)]",
},
{
company: "Arcadia SaaS",
@@ -69,7 +69,7 @@ const CaseStudies: React.FC = () => {
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.",
image: "case-arcadia.png",
iconColor: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
},
];
@@ -96,7 +96,7 @@ const CaseStudies: React.FC = () => {
<section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
{caseStudies.map((cs, idx) => {
const metricColors = [
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "igny8-text-blue" },
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[var(--color-primary)]" },
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0bbf87]" },
{ border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
];
@@ -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="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="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">
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
<CheckCircleIcon className="h-6 w-6" />
</div>
<h4 className="text-2xl font-bold text-slate-900">
@@ -176,7 +176,7 @@ const CaseStudies: React.FC = () => {
</div>
<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="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">
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
<CheckCircleIcon className="h-6 w-6" />
</div>
<h4 className="text-2xl font-bold text-slate-900">
@@ -186,7 +186,7 @@ const CaseStudies: React.FC = () => {
<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.
</p>
<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">
<button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
Join the CAB waitlist
<ArrowRightIcon className="h-4 w-4" />
</button>
@@ -216,7 +216,7 @@ const CaseStudies: React.FC = () => {
</Link>
<Link
to="/resources"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--color-primary)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
>
<RocketLaunchIcon className="h-5 w-5" />
Download case study pack

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

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

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

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

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

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

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

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

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

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

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

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

58
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",
"Automate image generation and WordPress publishing by site",
],
color: "from-[var(--igny8-blue)]/5 to-white",
borderColor: "border-[var(--igny8-blue)]/20",
iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
color: "from-[var(--color-primary)]/5 to-white",
borderColor: "border-[var(--color-primary)]/20",
iconColor: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
painColor: "bg-rose-500",
outcomeColor: "igny8-bg-blue",
outcomeColor: "bg-[var(--color-primary)]",
},
{
name: "Agencies & Consultancies",
@@ -75,11 +75,11 @@ const Solutions: React.FC = () => {
"Real-time dashboards to prove impact and showcase velocity",
"Reusable Thinker libraries to standardize tone and strategy",
],
color: "from-[var(--igny8-green)]/5 to-white",
borderColor: "border-[var(--igny8-green)]/20",
iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
color: "from-[var(--color-success)]/5 to-white",
borderColor: "border-[var(--color-success)]/20",
iconColor: "from-[var(--color-success)] to-[var(--color-success-dark)]",
painColor: "bg-rose-500",
outcomeColor: "igny8-bg-green",
outcomeColor: "bg-[var(--color-success)]",
},
{
name: "In-house Marketing Teams",
@@ -95,9 +95,9 @@ const Solutions: React.FC = () => {
"Dashboards that unite SEO, writers, designers, and leadership",
"Insights to reallocate focus when campaigns spike or drop",
],
color: "from-[var(--igny8-purple)]/5 to-white",
borderColor: "border-[var(--igny8-purple)]/20",
iconColor: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
color: "from-[var(--color-purple)]/5 to-white",
borderColor: "border-[var(--color-purple)]/20",
iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
painColor: "bg-rose-500",
outcomeColor: "igny8-bg-purple",
},
@@ -108,37 +108,37 @@ const Solutions: React.FC = () => {
title: "Keyword Research",
description: "Discover high-opportunity keywords from a global database with real-time volumes and difficulty scores.",
icon: ChartBarIcon,
color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
},
{
title: "Content Briefs",
description: "Generate comprehensive briefs with outlines, talking points, and internal link suggestions.",
icon: DocumentTextIcon,
color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
},
{
title: "Content Writing",
description: "Create long-form articles aligned to your brand voice, compliance rules, and target SERP.",
icon: SparklesIcon,
color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
},
{
title: "Cluster Analysis",
description: "AI-powered semantic clustering to group related keywords and build topical authority maps.",
icon: UserGroupIcon,
color: "from-[var(--igny8-purple)] to-[var(--igny8-purple-dark)]",
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
},
{
title: "Image Generation",
description: "AI-generated featured and in-article images based on your content with brand consistency.",
icon: PhotoIcon,
color: "from-[var(--igny8-blue)] to-[var(--igny8-purple)]",
color: "from-[var(--color-primary)] to-[var(--color-purple)]",
},
{
title: "Workflow Automation",
description: "End-to-end automation from keywords to published content with intelligent handoffs.",
icon: BoltIcon,
color: "from-[var(--igny8-green)] to-[var(--igny8-blue)]",
color: "from-[var(--color-success)] to-[var(--color-primary)]",
},
];
@@ -161,11 +161,11 @@ const Solutions: React.FC = () => {
<div className="flex flex-col sm:flex-row gap-4 justify-center">
{renderCta(
{ label: "See use cases", href: "#use-cases" },
"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"
"inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
)}
{renderCta(
{ label: "Talk to sales", href: "/contact" },
"inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[var(--igny8-blue)] hover:igny8-text-blue 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(--color-primary)] hover:text-[var(--color-primary)] transition"
)}
</div>
</div>
@@ -215,8 +215,8 @@ const Solutions: React.FC = () => {
{/* Right: IGNY8 Outcomes */}
<div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
<div className="flex items-center gap-2 mb-6">
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'igny8-bg-blue' ? 'igny8-text-blue' : persona.outcomeColor === 'igny8-bg-green' ? 'igny8-text-green' : 'igny8-text-purple'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'igny8-bg-blue' ? 'igny8-text-blue' : persona.outcomeColor === 'igny8-bg-green' ? 'igny8-text-green' : 'igny8-text-purple'}`}>
<CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'igny8-text-green' : 'igny8-text-purple'}`} />
<h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'igny8-text-green' : 'igny8-text-purple'}`}>
IGNY8 Outcomes
</h4>
</div>
@@ -244,24 +244,24 @@ const Solutions: React.FC = () => {
label: "organic lift",
description: "Average lift in organic traffic within 90 days",
icon: ArrowTrendingUpIcon,
color: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
glow: "shadow-[var(--igny8-blue)]/30",
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
glow: "shadow-[var(--color-primary)]/30",
},
{
metric: "48%",
label: "reduction in time to publish",
description: "Faster time-to-publish from keyword discovery",
icon: ClockIcon,
color: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
glow: "shadow-[var(--igny8-green)]/30",
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
glow: "shadow-[var(--color-success)]/30",
},
{
metric: "4 tools",
label: "replaced",
description: "Average number of point solutions replaced by Igny8",
icon: WrenchScrewdriverIcon,
color: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
glow: "shadow-[var(--igny8-amber)]/30",
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
glow: "shadow-[var(--color-warning)]/30",
},
].map((stat, index) => {
const Icon = stat.icon;
@@ -344,7 +344,7 @@ const Solutions: React.FC = () => {
</section>
{/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--igny8-blue)] via-[var(--igny8-purple)] to-[#8b5cf6]">
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
{/* Radial glow */}
<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"
target="_blank"
rel="noreferrer"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white igny8-text-blue px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--color-primary)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
>
<RocketLaunchIcon className="h-5 w-5" />
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."
description="Walk through the workflow that moves market intelligence into production-ready content. Each step builds toward an automated growth flywheel."
/>
<div className="rounded-3xl border-2 border-[var(--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="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-8 shadow-lg">
<div className="aspect-video rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white flex items-center justify-center text-slate-500 text-sm shadow-inner">
Video walkthrough placeholder (embed demo or Loom)
</div>
@@ -48,9 +48,9 @@ const Tour: React.FC = () => {
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
{tourSteps.map((step, index) => {
const colors = [
{ border: "border-[var(--igny8-blue)]/40", gradient: "from-[var(--igny8-blue)]/10 to-white", dot: "bg-[var(--igny8-blue)]" },
{ border: "border-[var(--igny8-green)]/40", gradient: "from-[var(--igny8-green)]/10 to-white", dot: "bg-[var(--igny8-green)]" },
{ border: "border-[var(--igny8-amber)]/40", gradient: "from-[var(--igny8-amber)]/10 to-white", dot: "bg-[var(--igny8-amber)]" },
{ border: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white", dot: "bg-[var(--color-primary)]" },
{ border: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white", dot: "bg-[var(--color-success)]" },
{ border: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white", dot: "bg-[var(--color-warning)]" },
{ border: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white", dot: "bg-[#5d4ae3]" },
];
const colorScheme = colors[index % colors.length];
@@ -79,7 +79,7 @@ const Tour: React.FC = () => {
})}
</section>
<section className="bg-gradient-to-br from-[var(--igny8-blue)]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
<section className="bg-gradient-to-br from-[var(--color-primary)]/10 via-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">
<SectionHeading
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">
{[
{ 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-[var(--igny8-green)]/40", gradient: "from-[var(--igny8-green)]/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: "Keywords → Ideas", time: "Nightly", highlight: "Targets new opportunities", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
{ name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
{ name: "Tasks → Content", time: "Hourly", highlight: "Generate & queue drafts", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" },
{ name: "Content → Images", time: "On approval", highlight: "Produce branded visuals", color: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white" },
{ name: "Content → 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-[var(--igny8-green)]/40", gradient: "from-[var(--igny8-green)]/10 to-white" },
{ name: "Content → WordPress", time: "Manual launch", highlight: "One-click publish", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
{ name: "SERP Win/Loss Alerts", time: "Real-time", highlight: "Trigger optimizations", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
].map((recipe) => (
<div
key={recipe.name}

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

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

1
frontend/src/marketing/styles/marketing.css
View File

@@ -1,6 +1,7 @@
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap")
layer(base);
@import "../../styles/tokens.css";
@import "tailwindcss";
@layer base {