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

new theme for site

Browse Source
This commit is contained in:
Desktop
2025-11-13 19:55:27 +05:00
parent 3c100be1cf
commit 7ff05f616f
21 changed files with 225 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/marketing.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Igny8 · AI Growth Engine</title> <title>Igny8 · AI Growth Engine</title>
</head> </head>
<body class="bg-[#050913]"> <body class="bg-white">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/marketing/index.tsx"></script> <script type="module" src="/src/marketing/index.tsx"></script>
</body> </body>

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

@@ -37,28 +37,27 @@ const CTASection: React.FC<CTASectionProps> = ({
}; };
return ( return (
<section className="py-24"> <section className="py-24 bg-white">
<div className="max-w-5xl mx-auto px-6"> <div className="max-w-5xl mx-auto px-6">
<div className="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-brand-500/30 via-brand-600/20 to-transparent p-10 md:p-14"> <div className="relative overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-brand-50 via-brand-100/50 to-white p-10 md:p-14">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.12),_transparent_60%)] pointer-events-none" />
<div className="relative flex flex-col gap-6"> <div className="relative flex flex-col gap-6">
<h3 className="text-3xl md:text-4xl font-semibold text-white leading-tight"> <h3 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight">
{title} {title}
</h3> </h3>
<p className="text-white/70 text-base md:text-lg max-w-2xl"> <p className="text-slate-600 text-base md:text-lg max-w-2xl">
{description} {description}
</p> </p>
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
{renderAnchor( {renderAnchor(
primaryCta.label, primaryCta.label,
primaryCta.href, primaryCta.href,
"inline-flex items-center justify-center rounded-full bg-white text-slate-950 px-6 py-3 text-sm md:text-base font-semibold hover:bg-brand-100 transition" "inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-600 text-white px-6 py-3 text-sm md:text-base font-semibold transition"
)} )}
{secondaryCta && ( {secondaryCta && (
renderAnchor( renderAnchor(
secondaryCta.label, secondaryCta.label,
secondaryCta.href, secondaryCta.href,
"inline-flex items-center justify-center rounded-full border border-white/40 px-6 py-3 text-sm md:text-base font-semibold text-white hover:border-white/60 transition" "inline-flex items-center justify-center rounded-full border border-slate-300 px-6 py-3 text-sm md:text-base font-semibold text-slate-700 hover:text-slate-900 hover:border-slate-400 transition"
) )
)} )}
</div> </div>

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

@@ -19,25 +19,24 @@ const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
{features.map((feature) => ( {features.map((feature) => (
<div <div
key={feature.title} key={feature.title}
className="relative rounded-3xl border border-white/10 bg-gradient-to-br from-white/8 via-transparent to-white/0 p-8 flex flex-col gap-4 group hover:border-brand-400/40 transition" className="relative rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-4 group hover:border-brand-400 transition shadow-sm hover:shadow-md"
> >
<div className="size-12 rounded-2xl bg-brand-500/10 border border-brand-500/30 flex items-center justify-center text-brand-200"> <div className="size-12 rounded-2xl bg-brand-100 border border-brand-300 flex items-center justify-center text-brand-600">
{feature.icon} {feature.icon}
</div> </div>
<h3 className="text-xl font-semibold text-white">{feature.title}</h3> <h3 className="text-xl font-semibold text-slate-900">{feature.title}</h3>
<p className="text-sm text-white/60 leading-relaxed"> <p className="text-sm text-slate-600 leading-relaxed">
{feature.description} {feature.description}
</p> </p>
{feature.link && ( {feature.link && (
<a <a
href={feature.link.href} href={feature.link.href}
className="inline-flex items-center gap-2 text-sm font-semibold text-brand-200 hover:text-brand-100" className="inline-flex items-center gap-2 text-sm font-semibold text-brand-600 hover:text-brand-700"
> >
{feature.link.label} {feature.link.label}
<ArrowUpRightIcon className="h-4 w-4" /> <ArrowUpRightIcon className="h-4 w-4" />
</a> </a>
)} )}
<div className="absolute inset-0 rounded-3xl border border-white/0 group-hover:border-brand-500/30 transition" />
</div> </div>
))} ))}
</div> </div>

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

@@ -40,43 +40,42 @@ const HeroSection: React.FC<HeroSectionProps> = ({
}; };
return ( return (
<section className="relative overflow-hidden"> <section className="relative overflow-hidden bg-white">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(66,133,244,0.25),_rgba(9,14,26,0.9))]" /> <div className="absolute inset-0 bg-gradient-to-br from-brand-50/50 via-white to-slate-50/50" />
<div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center"> <div className="relative max-w-6xl mx-auto px-6 py-24 md:py-32 flex flex-col lg:flex-row gap-16 items-center">
<div className="flex-1 flex flex-col gap-6"> <div className="flex-1 flex flex-col gap-6">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-brand-200"> <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-brand-600">
AI + SEO PLATFORM AI + SEO PLATFORM
</span> </span>
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white"> <h1 className="text-4xl md:text-6xl font-semibold leading-tight text-slate-900">
{headline} {headline}
</h1> </h1>
<p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-xl"> <p className="text-lg md:text-xl text-slate-600 leading-relaxed max-w-xl">
{subheadline} {subheadline}
</p> </p>
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
{renderCta( {renderCta(
primaryCta, primaryCta,
"inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm md:text-base font-semibold transition" "inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-600 text-white px-6 py-3 text-sm md:text-base font-semibold transition"
)} )}
{secondaryCta && renderCta( {secondaryCta && renderCta(
secondaryCta, secondaryCta,
"inline-flex items-center justify-center rounded-full border border-white/20 px-6 py-3 text-sm md:text-base font-semibold text-white/80 hover:text-white hover:border-white/40 transition" "inline-flex items-center justify-center rounded-full border border-slate-300 px-6 py-3 text-sm md:text-base font-semibold text-slate-700 hover:text-slate-900 hover:border-slate-400 transition"
)} )}
</div> </div>
</div> </div>
<div className="flex-1 w-full"> <div className="flex-1 w-full">
<div className="relative rounded-3xl border border-white/10 bg-white/5 shadow-[0_0_60px_rgba(88,166,255,0.1)]"> <div className="relative rounded-3xl border border-slate-200 bg-white shadow-xl">
<div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-white/10 via-transparent to-white/0 pointer-events-none" />
<img <img
src={`/marketing/images/${image}`} src={`/marketing/images/${image}`}
alt="Igny8 dashboard preview" alt="Igny8 dashboard preview"
className="w-full h-full object-cover rounded-3xl" className="w-full h-full object-cover rounded-3xl"
/> />
<div className="absolute bottom-6 left-6 bg-slate-950/70 backdrop-blur-lg border border-white/10 rounded-2xl px-6 py-4 flex flex-col gap-1"> <div className="absolute bottom-6 left-6 bg-white/95 backdrop-blur-lg border border-slate-200 rounded-2xl px-6 py-4 flex flex-col gap-1 shadow-lg">
<span className="text-xs uppercase tracking-[0.2em] text-white/50"> <span className="text-xs uppercase tracking-[0.2em] text-slate-500">
End-to-end automation End-to-end automation
</span> </span>
<span className="text-lg font-semibold text-white"> <span className="text-lg font-semibold text-slate-900">
Keywords ➝ Ideas ➝ Tasks ➝ Content ➝ Images Keywords ➝ Ideas ➝ Tasks ➝ Content ➝ Images
</span> </span>
</div> </div>

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

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

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

@@ -11,9 +11,9 @@ const logos = [
const LogoCloud: React.FC = () => { const LogoCloud: React.FC = () => {
return ( return (
<section className="py-16 bg-slate-950/70 border-y border-white/5"> <section className="py-16 bg-slate-50 border-y border-slate-200">
<div className="max-w-5xl mx-auto px-6 flex flex-col gap-6 items-center"> <div className="max-w-5xl mx-auto px-6 flex flex-col gap-6 items-center">
<span className="text-xs uppercase tracking-[0.28em] text-white/40"> <span className="text-xs uppercase tracking-[0.28em] text-slate-500">
Trusted by modern SEO + content teams Trusted by modern SEO + content teams
</span> </span>
<div className="flex flex-wrap justify-center gap-8 md:gap-12"> <div className="flex flex-wrap justify-center gap-8 md:gap-12">

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

@@ -12,11 +12,11 @@ interface MetricsBarProps {
const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => { const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
return ( return (
<div className="max-w-5xl mx-auto -mt-12 sm:-mt-16 px-6"> <div className="max-w-5xl mx-auto -mt-12 sm:-mt-16 px-6">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border border-white/10 bg-slate-950/70 backdrop-blur-2xl p-6"> <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border border-slate-200 bg-white shadow-lg p-6">
{metrics.map((metric) => ( {metrics.map((metric) => (
<div key={metric.label} className="text-center sm:text-left"> <div key={metric.label} className="text-center sm:text-left">
<div className="text-3xl font-semibold text-white">{metric.value}</div> <div className="text-3xl font-semibold text-slate-900">{metric.value}</div>
<div className="text-sm uppercase tracking-[0.2em] text-white/50 mt-2"> <div className="text-sm uppercase tracking-[0.2em] text-slate-500 mt-2">
{metric.label} {metric.label}
</div> </div>
</div> </div>

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

@@ -18,15 +18,15 @@ const SectionHeading: React.FC<SectionHeadingProps> = ({
className={`flex flex-col gap-4 ${align === "center" ? "items-center text-center" : "items-start text-left"}`} className={`flex flex-col gap-4 ${align === "center" ? "items-center text-center" : "items-start text-left"}`}
> >
{eyebrow && ( {eyebrow && (
<span className="inline-flex items-center rounded-full border border-white/15 bg-white/5 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-brand-200"> <span className="inline-flex items-center rounded-full border border-brand-200 bg-brand-50 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
{eyebrow} {eyebrow}
</span> </span>
)} )}
<h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight max-w-3xl"> <h2 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight max-w-3xl">
{title} {title}
</h2> </h2>
{description && ( {description && (
<p className="text-white/60 max-w-2xl text-base md:text-lg leading-relaxed"> <p className="text-slate-600 max-w-2xl text-base md:text-lg leading-relaxed">
{description} {description}
</p> </p>
)} )}

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

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

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

@@ -16,15 +16,15 @@ const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
{steps.map((step, index) => ( {steps.map((step, index) => (
<div <div
key={step.title} key={step.title}
className="rounded-3xl border border-white/10 bg-white/5 p-6 flex flex-col gap-4 hover:border-brand-400/40 transition" className="rounded-3xl border border-slate-200 bg-white p-6 flex flex-col gap-4 hover:border-brand-400 transition shadow-sm hover:shadow-md"
> >
<div className="h-12 w-12 rounded-2xl bg-brand-500/10 border border-brand-500/30 flex items-center justify-center font-semibold text-brand-200 text-xl"> <div className="h-12 w-12 rounded-2xl bg-brand-100 border border-brand-300 flex items-center justify-center font-semibold text-brand-600 text-xl">
{index + 1} {index + 1}
</div> </div>
<h3 className="text-lg font-semibold text-white leading-snug"> <h3 className="text-lg font-semibold text-slate-900 leading-snug">
{step.title} {step.title}
</h3> </h3>
<p className="text-sm text-white/60 leading-relaxed"> <p className="text-sm text-slate-600 leading-relaxed">
{step.subtitle} {step.subtitle}
</p> </p>
</div> </div>

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

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

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

@@ -43,7 +43,7 @@ const caseStudies = [
const CaseStudies: React.FC = () => { const CaseStudies: React.FC = () => {
return ( return (
<div className="bg-[#050913] text-white"> <div className="bg-white text-slate-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16"> <section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
<SectionHeading <SectionHeading
eyebrow="Proof" eyebrow="Proof"
@@ -56,31 +56,31 @@ const CaseStudies: React.FC = () => {
{caseStudies.map((cs) => ( {caseStudies.map((cs) => (
<div <div
key={cs.company} key={cs.company}
className="rounded-3xl border border-white/10 bg-white/5 p-12 grid grid-cols-1 lg:grid-cols-2 gap-12" className="rounded-3xl border border-slate-200 bg-white p-12 grid grid-cols-1 lg:grid-cols-2 gap-12"
> >
<div className="space-y-6"> <div className="space-y-6">
<span className="text-xs uppercase tracking-[0.3em] text-white/40"> <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
{cs.company} {cs.company}
</span> </span>
<h3 className="text-2xl font-semibold text-white">{cs.headline}</h3> <h3 className="text-2xl font-semibold text-slate-900">{cs.headline}</h3>
<p className="text-sm text-white/70 leading-relaxed">{cs.summary}</p> <p className="text-sm text-slate-600 leading-relaxed">{cs.summary}</p>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
{cs.metrics.map((metric) => ( {cs.metrics.map((metric) => (
<div <div
key={metric.label} key={metric.label}
className="rounded-2xl border border-white/10 bg-white/5 p-4 text-center space-y-2" className="rounded-2xl border border-slate-200 bg-white p-4 text-center space-y-2"
> >
<div className="text-xl font-semibold text-white"> <div className="text-xl font-semibold text-slate-900">
{metric.value} {metric.value}
</div> </div>
<div className="text-xs uppercase tracking-[0.2em] text-white/40"> <div className="text-xs uppercase tracking-[0.2em] text-slate-500">
{metric.label} {metric.label}
</div> </div>
</div> </div>
))} ))}
</div> </div>
</div> </div>
<div className="rounded-3xl border border-white/10 bg-slate-900 overflow-hidden"> <div className="rounded-3xl border border-slate-200 bg-slate-100 overflow-hidden">
<img <img
src={`/marketing/images/${cs.image}`} src={`/marketing/images/${cs.image}`}
alt={`${cs.company} case study`} alt={`${cs.company} case study`}
@@ -91,27 +91,27 @@ const CaseStudies: React.FC = () => {
))} ))}
</section> </section>
<section className="bg-slate-950/70 border-y border-white/5"> <section className="bg-slate-50/70 border-y border-slate-200">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12"> <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="space-y-4"> <div className="space-y-4">
<h4 className="text-lg font-semibold text-white">Results you can expect</h4> <h4 className="text-lg font-semibold text-slate-900">Results you can expect</h4>
<ul className="space-y-3 text-sm text-white/70"> <ul className="space-y-3 text-sm text-slate-600">
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
30-60 day onboarding to deploy automation and Thinker governance. 30-60 day onboarding to deploy automation and Thinker governance.
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
3-5× increase in content throughput without sacrificing editorial quality. 3-5× increase in content throughput without sacrificing editorial quality.
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
Clear ROI dashboards tying automation to revenue outcomes. Clear ROI dashboards tying automation to revenue outcomes.
</li> </li>
</ul> </ul>
</div> </div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-4 text-sm text-white/70"> <div className="rounded-3xl border border-slate-200 bg-white p-10 space-y-4 text-sm text-slate-600">
<h4 className="text-lg font-semibold text-white">Customer advisory board</h4> <h4 className="text-lg font-semibold text-slate-900">Customer advisory board</h4>
<p> <p>
Igny8’s roadmap is shaped by an active community of customer strategists, agency partners, and product marketers. Join and get early access to features, template libraries, and industry benchmarks. Igny8’s roadmap is shaped by an active community of customer strategists, agency partners, and product marketers. Join and get early access to features, template libraries, and industry benchmarks.
</p> </p>

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

@@ -4,7 +4,7 @@ import CTASection from "../components/CTASection";
const Contact: React.FC = () => { const Contact: React.FC = () => {
return ( return (
<div className="bg-[#050913] text-white"> <div className="bg-white text-slate-900">
<section className="max-w-4xl mx-auto px-6 pt-24 pb-12"> <section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
<SectionHeading <SectionHeading
eyebrow="Contact" eyebrow="Contact"
@@ -14,50 +14,50 @@ const Contact: React.FC = () => {
</section> </section>
<section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12"> <section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
<form className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-6"> <form className="rounded-3xl border border-slate-200 bg-white p-10 space-y-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<label className="flex flex-col gap-2 text-sm text-white/70"> <label className="flex flex-col gap-2 text-sm text-slate-600">
First name First name
<input <input
type="text" type="text"
placeholder="Alex" placeholder="Alex"
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400" className="rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
/> />
</label> </label>
<label className="flex flex-col gap-2 text-sm text-white/70"> <label className="flex flex-col gap-2 text-sm text-slate-600">
Last name Last name
<input <input
type="text" type="text"
placeholder="Rivera" placeholder="Rivera"
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400" className="rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
/> />
</label> </label>
</div> </div>
<label className="flex flex-col gap-2 text-sm text-white/70"> <label className="flex flex-col gap-2 text-sm text-slate-600">
Work email Work email
<input <input
type="email" type="email"
placeholder="you@company.com" placeholder="you@company.com"
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400" className="rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
/> />
</label> </label>
<label className="flex flex-col gap-2 text-sm text-white/70"> <label className="flex flex-col gap-2 text-sm text-slate-600">
Company Company
<input <input
type="text" type="text"
placeholder="Company name" placeholder="Company name"
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400" className="rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
/> />
</label> </label>
<label className="flex flex-col gap-2 text-sm text-white/70"> <label className="flex flex-col gap-2 text-sm text-slate-600">
How can we help? How can we help?
<textarea <textarea
rows={4} rows={4}
placeholder="Tell us about your current workflow, challenges, and goals." placeholder="Tell us about your current workflow, challenges, and goals."
className="rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400 resize-none" className="rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400 resize-none"
/> />
</label> </label>
@@ -70,9 +70,9 @@ const Contact: React.FC = () => {
</form> </form>
<div className="space-y-8"> <div className="space-y-8">
<div className="rounded-3xl border border-white/10 bg-white/5 p-8 space-y-4 text-sm text-white/70"> <div className="rounded-3xl border border-slate-200 bg-white p-8 space-y-4 text-sm text-slate-600">
<h3 className="text-lg font-semibold text-white">Calendly placeholder</h3> <h3 className="text-lg font-semibold text-slate-900">Calendly placeholder</h3>
<div className="aspect-[4/3] rounded-2xl border border-white/10 bg-slate-900 flex items-center justify-center text-xs text-white/40"> <div className="aspect-[4/3] rounded-2xl border border-slate-200 bg-slate-100 flex items-center justify-center text-xs text-slate-500">
Embed Calendly iframe here Embed Calendly iframe here
</div> </div>
<p> <p>
@@ -84,19 +84,19 @@ const Contact: React.FC = () => {
</p> </p>
</div> </div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-8 space-y-4"> <div className="rounded-3xl border border-slate-200 bg-white p-8 space-y-4">
<h3 className="text-lg font-semibold text-white">Support perks</h3> <h3 className="text-lg font-semibold text-slate-900">Support perks</h3>
<ul className="space-y-3 text-sm text-white/70"> <ul className="space-y-3 text-sm text-slate-600">
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
24-hour response time on all Launch+ plans. 24-hour response time on all Launch+ plans.
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
Dedicated success architect for Scale and Enterprise. Dedicated success architect for Scale and Enterprise.
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
Migration services when replacing legacy content stacks. Migration services when replacing legacy content stacks.
</li> </li>
</ul> </ul>

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

@@ -17,7 +17,7 @@ import CTASection from "../components/CTASection";
const Home: React.FC = () => { const Home: React.FC = () => {
return ( return (
<div className="bg-[#050913]"> <div className="bg-white">
<HeroSection <HeroSection
image="hero-dashboard.png" image="hero-dashboard.png"
headline="Scale SEO content from keyword discovery to AI-crafted outputs." headline="Scale SEO content from keyword discovery to AI-crafted outputs."
@@ -86,32 +86,32 @@ const Home: React.FC = () => {
description="Monitor velocity, quality, and automation coverage across every site. Use filters to dive into sectors, teams, and campaigns. Igny8 keeps leadership confident and operations aligned." description="Monitor velocity, quality, and automation coverage across every site. Use filters to dive into sectors, teams, and campaigns. Igny8 keeps leadership confident and operations aligned."
align="left" align="left"
/> />
<ul className="space-y-4 text-sm text-white/70"> <ul className="space-y-4 text-sm text-slate-600">
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" /> <span className="mt-1 size-2 rounded-full bg-brand-500" />
Real-time metrics on keyword additions, clusters formed, briefs generated, and content shipped. Real-time metrics on keyword additions, clusters formed, briefs generated, and content shipped.
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" /> <span className="mt-1 size-2 rounded-full bg-brand-500" />
Drill into automation logs to understand every AI action, approvals, and handoffs. Drill into automation logs to understand every AI action, approvals, and handoffs.
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" /> <span className="mt-1 size-2 rounded-full bg-brand-500" />
Export-ready visuals for leadership updates and client reporting. Export-ready visuals for leadership updates and client reporting.
</li> </li>
</ul> </ul>
</div> </div>
<div className="relative"> <div className="relative">
<div className="rounded-3xl border border-white/10 bg-white/5 overflow-hidden"> <div className="rounded-3xl border border-slate-200 bg-white overflow-hidden shadow-lg">
<img <img
src="/marketing/images/workflow-overview.png" src="/marketing/images/workflow-overview.png"
alt="Workflow overview" alt="Workflow overview"
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
<div className="absolute -bottom-8 -left-8 md:-left-12 bg-slate-950/80 border border-white/10 rounded-3xl p-6 w-64"> <div className="absolute -bottom-8 -left-8 md:-left-12 bg-white border border-slate-200 rounded-3xl p-6 w-64 shadow-lg">
<h4 className="text-sm font-semibold text-white/80">Automation snapshot</h4> <h4 className="text-sm font-semibold text-slate-900">Automation snapshot</h4>
<p className="text-xs text-white/60 mt-2"> <p className="text-xs text-slate-600 mt-2">
87 keywords → 63 briefs → 48 articles → 48 image sets generated this week. 87 keywords → 63 briefs → 48 articles → 48 image sets generated this week.
</p> </p>
</div> </div>
@@ -140,10 +140,10 @@ const Home: React.FC = () => {
].map((item) => ( ].map((item) => (
<div <div
key={item.title} key={item.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 space-y-4" className="rounded-3xl border border-slate-200 bg-white p-8 space-y-4 shadow-sm hover:shadow-md transition"
> >
<h3 className="text-lg font-semibold text-white">{item.title}</h3> <h3 className="text-lg font-semibold text-slate-900">{item.title}</h3>
<p className="text-sm text-white/60 leading-relaxed">{item.description}</p> <p className="text-sm text-slate-600 leading-relaxed">{item.description}</p>
</div> </div>
))} ))}
</section> </section>

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

@@ -31,7 +31,7 @@ const tiers = [
const Partners: React.FC = () => { const Partners: React.FC = () => {
return ( return (
<div className="bg-[#050913] text-white"> <div className="bg-white text-slate-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16"> <section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
<SectionHeading <SectionHeading
eyebrow="Partners" eyebrow="Partners"
@@ -44,16 +44,16 @@ const Partners: React.FC = () => {
{tiers.map((tier) => ( {tiers.map((tier) => (
<div <div
key={tier.title} key={tier.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 flex flex-col gap-5" className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-5"
> >
<span className="text-xs uppercase tracking-[0.3em] text-white/40"> <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
Program Program
</span> </span>
<h3 className="text-xl font-semibold text-white">{tier.title}</h3> <h3 className="text-xl font-semibold text-slate-900">{tier.title}</h3>
<ul className="space-y-3 text-sm text-white/70"> <ul className="space-y-3 text-sm text-slate-600">
{tier.benefits.map((benefit) => ( {tier.benefits.map((benefit) => (
<li key={benefit} className="flex gap-3"> <li key={benefit} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
{benefit} {benefit}
</li> </li>
))} ))}
@@ -62,7 +62,7 @@ const Partners: React.FC = () => {
))} ))}
</section> </section>
<section className="bg-slate-950/70 border-y border-white/5"> <section className="bg-slate-50/70 border-y border-slate-200">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-12"> <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
<div className="space-y-6"> <div className="space-y-6">
<SectionHeading <SectionHeading
@@ -71,23 +71,23 @@ const Partners: React.FC = () => {
description="Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting." description="Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting."
align="left" align="left"
/> />
<div className="rounded-3xl border border-white/10 bg-white/5 p-6 text-sm text-white/60"> <div className="rounded-3xl border border-slate-200 bg-white p-6 text-sm text-slate-600">
API docs placeholder (download at `/marketing/images/api-docs.png`, 1100×720). API docs placeholder (download at `/marketing/images/api-docs.png`, 1100×720).
</div> </div>
</div> </div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-6"> <div className="rounded-3xl border border-slate-200 bg-white p-10 space-y-6">
<h4 className="text-lg font-semibold text-white">Partner resources</h4> <h4 className="text-lg font-semibold text-slate-900">Partner resources</h4>
<ul className="space-y-4 text-sm text-white/70"> <ul className="space-y-4 text-sm text-slate-600">
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
Sales playbooks, ROI calculators, and demo environments. Sales playbooks, ROI calculators, and demo environments.
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
Shared Slack channels with Igny8 product and marketing teams. Shared Slack channels with Igny8 product and marketing teams.
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
Quarterly partner labs to showcase launches and integrations. Quarterly partner labs to showcase launches and integrations.
</li> </li>
</ul> </ul>

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

@@ -83,14 +83,14 @@ const featureMatrix = [
const Pricing: React.FC = () => { const Pricing: React.FC = () => {
return ( return (
<div className="bg-[#050913] text-white"> <div className="bg-white text-slate-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-8"> <section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-8">
<SectionHeading <SectionHeading
eyebrow="Pricing" eyebrow="Pricing"
title="Simple plans that scale with your automation ambitions." title="Simple plans that scale with your automation ambitions."
description="Transparent pricing for the entire Igny8 platform. No seat-based penalties—every teammate can collaborate freely." description="Transparent pricing for the entire Igny8 platform. No seat-based penalties—every teammate can collaborate freely."
/> />
<div className="rounded-3xl border border-white/10 bg-white/5 p-6 text-sm text-white/60 text-center"> <div className="rounded-3xl border border-slate-200 bg-white p-6 text-sm text-slate-600 text-center">
Looking to migrate from an existing AI content stack? Ask about our migration credit and onboarding accelerator. Looking to migrate from an existing AI content stack? Ask about our migration credit and onboarding accelerator.
</div> </div>
</section> </section>
@@ -99,29 +99,29 @@ const Pricing: React.FC = () => {
{tiers.map((tier) => ( {tiers.map((tier) => (
<div <div
key={tier.name} key={tier.name}
className={`relative rounded-3xl border ${tier.featured ? "border-brand-500/60 bg-brand-500/10 shadow-[0_0_70px_rgba(59,130,246,0.25)]" : "border-white/10 bg-white/5"} p-10 flex flex-col gap-6`} className={`relative rounded-3xl border ${tier.featured ? "border-brand-500/60 bg-brand-500/10 shadow-[0_0_70px_rgba(59,130,246,0.25)]" : "border-slate-200 bg-white"} p-10 flex flex-col gap-6`}
> >
{tier.badge && ( {tier.badge && (
<span className="inline-flex items-center self-start rounded-full border border-white/15 bg-white/10 px-4 py-1 text-[11px] uppercase tracking-[0.25em] text-brand-100"> <span className="inline-flex items-center self-start rounded-full border border-slate-200 bg-brand-50 px-4 py-1 text-[11px] uppercase tracking-[0.25em] text-brand-700">
{tier.badge} {tier.badge}
</span> </span>
)} )}
<div> <div>
<h3 className="text-2xl font-semibold text-white">{tier.name}</h3> <h3 className="text-2xl font-semibold text-slate-900">{tier.name}</h3>
<p className="text-sm text-white/60 mt-2">{tier.description}</p> <p className="text-sm text-slate-600 mt-2">{tier.description}</p>
</div> </div>
<div className="text-4xl font-semibold text-white"> <div className="text-4xl font-semibold text-slate-900">
{tier.price} {tier.price}
{tier.cadence && ( {tier.cadence && (
<span className="text-sm font-normal text-white/50 ml-2"> <span className="text-sm font-normal text-slate-500 ml-2">
{tier.cadence} {tier.cadence}
</span> </span>
)} )}
</div> </div>
<ul className="space-y-3 text-sm text-white/70"> <ul className="space-y-3 text-sm text-slate-600">
{tier.features.map((feature) => ( {tier.features.map((feature) => (
<li key={feature} className="flex gap-3"> <li key={feature} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
{feature} {feature}
</li> </li>
))} ))}
@@ -131,8 +131,8 @@ const Pricing: React.FC = () => {
href={tier.name === "Enterprise" ? "/contact" : "https://app.igny8.com/signup"} href={tier.name === "Enterprise" ? "/contact" : "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-white text-slate-950 hover:bg-brand-100" ? "bg-white text-slate-900 hover:bg-brand-100"
: "border border-white/30 text-white hover:border-white/60" : "border border-slate-300 text-slate-900 hover:border-white/60"
}`} }`}
> >
{tier.name === "Enterprise" ? "Contact sales" : "Start free trial"} {tier.name === "Enterprise" ? "Contact sales" : "Start free trial"}
@@ -143,12 +143,12 @@ const Pricing: React.FC = () => {
</section> </section>
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-10"> <section className="max-w-6xl mx-auto px-6 pb-24 space-y-10">
<h3 className="text-xl font-semibold text-white"> <h3 className="text-xl font-semibold text-slate-900">
Compare plan capabilities Compare plan capabilities
</h3> </h3>
<div className="overflow-hidden rounded-3xl border border-white/10 bg-white/5"> <div className="overflow-hidden rounded-3xl border border-slate-200 bg-white">
<table className="min-w-full text-sm text-white/70"> <table className="min-w-full text-sm text-slate-600">
<thead className="bg-white/5 text-white/60 uppercase text-xs tracking-[0.3em]"> <thead className="bg-white text-slate-600 uppercase text-xs tracking-[0.3em]">
<tr> <tr>
<th className="px-6 py-4 text-left">Capability</th> <th className="px-6 py-4 text-left">Capability</th>
<th className="px-6 py-4 text-center">Launch</th> <th className="px-6 py-4 text-center">Launch</th>
@@ -159,7 +159,7 @@ const Pricing: React.FC = () => {
<tbody> <tbody>
{featureMatrix.map((row, index) => ( {featureMatrix.map((row, index) => (
<tr key={row.feature} className={index % 2 === 0 ? "bg-white/3" : ""}> <tr key={row.feature} className={index % 2 === 0 ? "bg-white/3" : ""}>
<td className="px-6 py-5 text-white font-medium">{row.feature}</td> <td className="px-6 py-5 text-slate-900 font-medium">{row.feature}</td>
<td className="px-6 py-5 text-center"> <td className="px-6 py-5 text-center">
{row.launch === true ? "Included" : row.launch} {row.launch === true ? "Included" : row.launch}
</td> </td>
@@ -176,10 +176,10 @@ const Pricing: React.FC = () => {
</div> </div>
</section> </section>
<section className="bg-slate-950/70 border-y border-white/5"> <section className="bg-slate-50/70 border-y border-slate-200">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12 text-sm text-white/70"> <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12 text-sm text-slate-600">
<div className="space-y-4"> <div className="space-y-4">
<h4 className="text-lg font-semibold text-white"> <h4 className="text-lg font-semibold text-slate-900">
Usage-based credits explained Usage-based credits explained
</h4> </h4>
<p> <p>
@@ -190,7 +190,7 @@ const Pricing: React.FC = () => {
</p> </p>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<h4 className="text-lg font-semibold text-white"> <h4 className="text-lg font-semibold text-slate-900">
Security & compliance Security & compliance
</h4> </h4>
<p> <p>

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

@@ -4,7 +4,7 @@ import CTASection from "../components/CTASection";
const Product: React.FC = () => { const Product: React.FC = () => {
return ( return (
<div className="bg-[#050913] text-white"> <div className="bg-white text-slate-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16"> <section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div className="space-y-6"> <div className="space-y-6">
@@ -14,8 +14,8 @@ const Product: React.FC = () => {
description="Planner, Writer, Thinker, and Automation act as one cohesive system. Each module is powerful on its own—together they deliver a compounding growth engine." description="Planner, Writer, Thinker, and Automation act as one cohesive system. Each module is powerful on its own—together they deliver a compounding growth engine."
align="left" align="left"
/> />
<div className="rounded-3xl border border-white/10 bg-white/5 p-6 space-y-4 text-sm text-white/70"> <div className="rounded-3xl border border-slate-200 bg-white p-6 space-y-4 text-sm text-slate-600">
<div className="flex items-center justify-between text-white"> <div className="flex items-center justify-between text-slate-900">
<span className="font-semibold">Modules included</span> <span className="font-semibold">Modules included</span>
<span>4 products · 12 automation recipes</span> <span>4 products · 12 automation recipes</span>
</div> </div>
@@ -27,7 +27,7 @@ const Product: React.FC = () => {
"Automation → Run scheduled workflows that move keywords to ideas, tasks, content, and images automatically.", "Automation → Run scheduled workflows that move keywords to ideas, tasks, content, and images automatically.",
].map((point) => ( ].map((point) => (
<li key={point} className="flex gap-3"> <li key={point} className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" /> <span className="mt-1 size-2 rounded-full bg-brand-500" />
{point} {point}
</li> </li>
))} ))}
@@ -35,7 +35,7 @@ const Product: React.FC = () => {
</div> </div>
</div> </div>
<div className="relative"> <div className="relative">
<div className="rounded-3xl border border-white/10 bg-white/5 overflow-hidden"> <div className="rounded-3xl border border-slate-200 bg-white overflow-hidden">
<img <img
src="/marketing/images/planner-keywords.png" src="/marketing/images/planner-keywords.png"
alt="Planner module screenshot" alt="Planner module screenshot"
@@ -93,22 +93,22 @@ const Product: React.FC = () => {
].map((module) => ( ].map((module) => (
<div <div
key={module.title} key={module.title}
className="rounded-3xl border border-white/10 bg-white/5 p-10 flex flex-col gap-6" className="rounded-3xl border border-slate-200 bg-white p-10 flex flex-col gap-6"
> >
<div className="flex items-center gap-3 text-sm uppercase tracking-[0.3em] text-white/40"> <div className="flex items-center gap-3 text-sm uppercase tracking-[0.3em] text-slate-900/40">
<span className="size-2 rounded-full bg-brand-300" /> <span className="size-2 rounded-full bg-brand-500" />
{module.title} {module.title}
</div> </div>
<h3 className="text-2xl font-semibold text-white">{module.title} platform</h3> <h3 className="text-2xl font-semibold text-slate-900">{module.title} platform</h3>
<ul className="space-y-3 text-sm text-white/65"> <ul className="space-y-3 text-sm text-slate-900/65">
{module.copy.map((line) => ( {module.copy.map((line) => (
<li key={line} className="flex gap-3"> <li key={line} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-200" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
{line} {line}
</li> </li>
))} ))}
</ul> </ul>
<div className="rounded-2xl border border-white/10 bg-slate-900 overflow-hidden"> <div className="rounded-2xl border border-slate-200 bg-slate-100 overflow-hidden">
<img <img
src={`/marketing/images/${module.image}`} src={`/marketing/images/${module.image}`}
alt={`${module.title} module`} alt={`${module.title} module`}
@@ -121,7 +121,7 @@ const Product: React.FC = () => {
</section> </section>
<section className="max-w-6xl mx-auto px-6 py-24"> <section className="max-w-6xl mx-auto px-6 py-24">
<div className="rounded-3xl border border-white/10 bg-gradient-to-br from-white/5 via-transparent to-slate-950/60 p-10 md:p-16 flex flex-col lg:flex-row gap-16"> <div className="rounded-3xl border border-slate-200 bg-gradient-to-br from-brand-50 via-white to-slate-50 p-10 md:p-16 flex flex-col lg:flex-row gap-16">
<div className="flex-1 space-y-6"> <div className="flex-1 space-y-6">
<SectionHeading <SectionHeading
eyebrow="Automation timeline" eyebrow="Automation timeline"
@@ -129,7 +129,7 @@ const Product: React.FC = () => {
description="Igny8 timelines map dependencies across your workflow so you can see how AI is powering each deliverable. Pause or accelerate with confidence." description="Igny8 timelines map dependencies across your workflow so you can see how AI is powering each deliverable. Pause or accelerate with confidence."
align="left" align="left"
/> />
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-white/70"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-slate-600">
{[ {[
"Real-time status for every automation recipe with success rates and manual interventions logged.", "Real-time status for every automation recipe with success rates and manual interventions logged.",
"Smart recommendations to rebalance workloads, add credits, or adjust prompts when performance shifts.", "Smart recommendations to rebalance workloads, add credits, or adjust prompts when performance shifts.",
@@ -137,14 +137,14 @@ const Product: React.FC = () => {
"Granular permissions so teams can automate while leadership maintains oversight.", "Granular permissions so teams can automate while leadership maintains oversight.",
].map((item) => ( ].map((item) => (
<div key={item} className="flex gap-3"> <div key={item} className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-300" /> <span className="mt-1 size-2 rounded-full bg-brand-500" />
{item} {item}
</div> </div>
))} ))}
</div> </div>
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="rounded-3xl border border-white/10 bg-white/5 overflow-hidden"> <div className="rounded-3xl border border-slate-200 bg-white overflow-hidden">
<img <img
src="/marketing/images/automation-timeline.png" src="/marketing/images/automation-timeline.png"
alt="Automation timeline" alt="Automation timeline"

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

@@ -38,7 +38,7 @@ const webinars = [
const Resources: React.FC = () => { const Resources: React.FC = () => {
return ( return (
<div className="bg-[#050913] text-white"> <div className="bg-white text-slate-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6"> <section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
<SectionHeading <SectionHeading
eyebrow="Resources" eyebrow="Resources"
@@ -51,32 +51,32 @@ const Resources: React.FC = () => {
{articles.map((article) => ( {articles.map((article) => (
<article <article
key={article.title} key={article.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 flex flex-col gap-6" className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-6"
> >
<span className="text-xs uppercase tracking-[0.3em] text-white/40"> <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
{article.date} {article.date}
</span> </span>
<h3 className="text-xl font-semibold text-white">{article.title}</h3> <h3 className="text-xl font-semibold text-slate-900">{article.title}</h3>
<p className="text-sm text-white/70 leading-relaxed">{article.description}</p> <p className="text-sm text-slate-600 leading-relaxed">{article.description}</p>
<div className="rounded-2xl border border-white/10 bg-slate-900 h-40 flex items-center justify-center text-xs text-white/40"> <div className="rounded-2xl border border-slate-200 bg-slate-100 h-40 flex items-center justify-center text-xs text-slate-500">
Article cover placeholder (800×600) → /marketing/images/resource-hero.png Article cover placeholder (800×600) → /marketing/images/resource-hero.png
</div> </div>
</article> </article>
))} ))}
</section> </section>
<section className="bg-slate-950/70 border-y border-white/5"> <section className="bg-slate-50/70 border-y border-slate-200">
<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">
{webinars.map((webinar) => ( {webinars.map((webinar) => (
<div <div
key={webinar.title} key={webinar.title}
className="rounded-3xl border border-white/10 bg-white/5 p-8 flex flex-col gap-4" className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-4"
> >
<span className="text-xs uppercase tracking-[0.3em] text-white/40"> <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
{webinar.date} {webinar.date}
</span> </span>
<h3 className="text-lg font-semibold text-white">{webinar.title}</h3> <h3 className="text-lg font-semibold text-slate-900">{webinar.title}</h3>
<p className="text-sm text-white/70">{webinar.description}</p> <p className="text-sm text-slate-600">{webinar.description}</p>
<button className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold"> <button className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold">
Save my seat Save my seat
</button> </button>
@@ -93,31 +93,31 @@ const Resources: React.FC = () => {
description="Dive into documentation, watch quickstart videos, or join live onboarding cohorts." description="Dive into documentation, watch quickstart videos, or join live onboarding cohorts."
align="left" align="left"
/> />
<ul className="space-y-3 text-sm text-white/70"> <ul className="space-y-3 text-sm text-slate-600">
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
Help Center → `/help` Help Center → `/help`
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
Documentation → `/help#docs` Documentation → `/help#docs`
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
API Reference → `/partners#api` API Reference → `/partners#api`
</li> </li>
</ul> </ul>
</div> </div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-6"> <div className="rounded-3xl border border-slate-200 bg-white p-10 space-y-6">
<h3 className="text-2xl font-semibold text-white">Join the Igny8 newsletter</h3> <h3 className="text-2xl font-semibold text-slate-900">Join the Igny8 newsletter</h3>
<p className="text-sm text-white/60"> <p className="text-sm text-slate-600">
Monthly insights on AI, SEO, and automation. No fluff—just tactical guidance and event invites. Monthly insights on AI, SEO, and automation. No fluff—just tactical guidance and event invites.
</p> </p>
<form className="flex flex-col sm:flex-row gap-3"> <form className="flex flex-col sm:flex-row gap-3">
<input <input
type="email" type="email"
placeholder="you@company.com" placeholder="you@company.com"
className="flex-1 rounded-full border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400" className="flex-1 rounded-full border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
/> />
<button <button
type="submit" type="submit"

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

@@ -49,7 +49,7 @@ const personas = [
const Solutions: React.FC = () => { const Solutions: React.FC = () => {
return ( return (
<div className="bg-[#050913] text-white"> <div className="bg-white text-slate-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16"> <section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
<SectionHeading <SectionHeading
eyebrow="Solutions" eyebrow="Solutions"
@@ -62,14 +62,14 @@ const Solutions: React.FC = () => {
{personas.map((persona) => ( {personas.map((persona) => (
<div <div
key={persona.name} key={persona.name}
className="rounded-3xl border border-white/10 bg-white/5 p-10 md:p-16 grid grid-cols-1 lg:grid-cols-3 gap-12" className="rounded-3xl border border-slate-200 bg-white p-10 md:p-16 grid grid-cols-1 lg:grid-cols-3 gap-12"
> >
<div className="lg:col-span-1 space-y-4"> <div className="lg:col-span-1 space-y-4">
<span className="text-xs uppercase tracking-[0.3em] text-white/50"> <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
Persona Persona
</span> </span>
<h3 className="text-2xl font-semibold">{persona.name}</h3> <h3 className="text-2xl font-semibold">{persona.name}</h3>
<div className="rounded-2xl border border-white/10 bg-slate-900 overflow-hidden"> <div className="rounded-2xl border border-slate-200 bg-slate-100 overflow-hidden">
<img <img
src={`/marketing/images/${persona.image}`} src={`/marketing/images/${persona.image}`}
alt={`${persona.name} workflow`} alt={`${persona.name} workflow`}
@@ -78,10 +78,10 @@ const Solutions: React.FC = () => {
</div> </div>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h4 className="text-sm uppercase tracking-[0.3em] text-white/40"> <h4 className="text-sm uppercase tracking-[0.3em] text-slate-500">
Pain points Pain points
</h4> </h4>
<ul className="space-y-4 text-sm text-white/70"> <ul className="space-y-4 text-sm text-slate-600">
{persona.pains.map((pain) => ( {persona.pains.map((pain) => (
<li key={pain} className="flex gap-3"> <li key={pain} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-rose-300" /> <span className="mt-1 size-1.5 rounded-full bg-rose-300" />
@@ -91,13 +91,13 @@ const Solutions: React.FC = () => {
</ul> </ul>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<h4 className="text-sm uppercase tracking-[0.3em] text-white/40"> <h4 className="text-sm uppercase tracking-[0.3em] text-slate-500">
Outcomes with Igny8 Outcomes with Igny8
</h4> </h4>
<ul className="space-y-4 text-sm text-white/70"> <ul className="space-y-4 text-sm text-slate-600">
{persona.outcomes.map((outcome) => ( {persona.outcomes.map((outcome) => (
<li key={outcome} className="flex gap-3"> <li key={outcome} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
{outcome} {outcome}
</li> </li>
))} ))}
@@ -107,7 +107,7 @@ const Solutions: React.FC = () => {
))} ))}
</section> </section>
<section className="bg-slate-950/70 border-y border-white/5"> <section className="bg-slate-50/70 border-y border-slate-200">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-3 gap-8">
{[ {[
{ {
@@ -125,10 +125,10 @@ const Solutions: React.FC = () => {
].map((item) => ( ].map((item) => (
<div <div
key={item.metric} key={item.metric}
className="rounded-3xl border border-white/10 bg-white/5 p-8 text-center space-y-4" className="rounded-3xl border border-slate-200 bg-white p-8 text-center space-y-4"
> >
<div className="text-4xl font-semibold">{item.metric}</div> <div className="text-4xl font-semibold">{item.metric}</div>
<p className="text-sm text-white/60">{item.label}</p> <p className="text-sm text-slate-600">{item.label}</p>
</div> </div>
))} ))}
</div> </div>

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

@@ -31,15 +31,15 @@ const tourSteps = [
const Tour: React.FC = () => { const Tour: React.FC = () => {
return ( return (
<div className="bg-[#050913] text-white"> <div className="bg-white text-slate-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6"> <section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
<SectionHeading <SectionHeading
eyebrow="Guided Tour" eyebrow="Guided Tour"
title="Experience the entire Igny8 journey in minutes." title="Experience the entire Igny8 journey in minutes."
description="Walk through the workflow that moves market intelligence into production-ready content. Each step builds toward an automated growth flywheel." description="Walk through the workflow that moves market intelligence into production-ready content. Each step builds toward an automated growth flywheel."
/> />
<div className="rounded-3xl border border-white/10 bg-white/5 p-8"> <div className="rounded-3xl border border-slate-200 bg-white p-8">
<div className="aspect-video rounded-2xl border border-white/10 bg-slate-900 flex items-center justify-center text-white/40 text-sm"> <div className="aspect-video rounded-2xl border border-slate-200 bg-slate-100 flex items-center justify-center text-slate-500 text-sm">
Video walkthrough placeholder (embed demo or Loom) Video walkthrough placeholder (embed demo or Loom)
</div> </div>
</div> </div>
@@ -52,13 +52,13 @@ const Tour: React.FC = () => {
className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center" className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
> >
<div className={`space-y-4 ${index % 2 === 1 ? "lg:order-2" : ""}`}> <div className={`space-y-4 ${index % 2 === 1 ? "lg:order-2" : ""}`}>
<span className="text-xs uppercase tracking-[0.3em] text-white/50"> <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
Step {index + 1} Step {index + 1}
</span> </span>
<h3 className="text-2xl font-semibold">{step.title}</h3> <h3 className="text-2xl font-semibold">{step.title}</h3>
<p className="text-sm text-white/70 leading-relaxed">{step.description}</p> <p className="text-sm text-slate-600 leading-relaxed">{step.description}</p>
</div> </div>
<div className={`rounded-3xl border border-white/10 bg-white/5 overflow-hidden ${index % 2 === 1 ? "lg:order-1" : ""}`}> <div className={`rounded-3xl border border-slate-200 bg-white overflow-hidden ${index % 2 === 1 ? "lg:order-1" : ""}`}>
<img <img
src={`/marketing/images/${step.image}`} src={`/marketing/images/${step.image}`}
alt={step.title} alt={step.title}
@@ -69,14 +69,14 @@ const Tour: React.FC = () => {
))} ))}
</section> </section>
<section className="bg-slate-950/70 border-y border-white/5"> <section className="bg-slate-50/70 border-y border-slate-200">
<div className="max-w-6xl mx-auto px-6 py-24 space-y-10"> <div className="max-w-6xl mx-auto px-6 py-24 space-y-10">
<SectionHeading <SectionHeading
eyebrow="Automation recipes" eyebrow="Automation recipes"
title="Pre-built workflows you can launch on day one." title="Pre-built workflows you can launch on day one."
description="Activate automation templates or customize them in minutes. Igny8 tracks dependencies, statuses, and handoffs." description="Activate automation templates or customize them in minutes. Igny8 tracks dependencies, statuses, and handoffs."
/> />
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-white/70"> <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" }, { name: "Keywords → Ideas", time: "Nightly", highlight: "Targets new opportunities" },
{ name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically" }, { name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically" },
@@ -87,10 +87,10 @@ const Tour: React.FC = () => {
].map((recipe) => ( ].map((recipe) => (
<div <div
key={recipe.name} key={recipe.name}
className="rounded-3xl border border-white/10 bg-white/5 p-6 space-y-3" className="rounded-3xl border border-slate-200 bg-white p-6 space-y-3"
> >
<h4 className="text-base font-semibold text-white">{recipe.name}</h4> <h4 className="text-base font-semibold text-slate-900">{recipe.name}</h4>
<div className="text-xs uppercase tracking-[0.3em] text-white/40"> <div className="text-xs uppercase tracking-[0.3em] text-slate-500">
{recipe.time} {recipe.time}
</div> </div>
<p>{recipe.highlight}</p> <p>{recipe.highlight}</p>

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

@@ -19,7 +19,7 @@ const roadmapItems = [
const Waitlist: React.FC = () => { const Waitlist: React.FC = () => {
return ( return (
<div className="bg-[#050913] text-white"> <div className="bg-white text-slate-900">
<section className="max-w-4xl mx-auto px-6 pt-24 pb-12"> <section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
<SectionHeading <SectionHeading
eyebrow="Roadmap preview" eyebrow="Roadmap preview"
@@ -29,26 +29,26 @@ const Waitlist: React.FC = () => {
</section> </section>
<section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12"> <section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
<div className="rounded-3xl border border-white/10 bg-white/5 p-10 space-y-6"> <div className="rounded-3xl border border-slate-200 bg-white p-10 space-y-6">
<h3 className="text-lg font-semibold text-white">Join the waitlist</h3> <h3 className="text-lg font-semibold text-slate-900">Join the waitlist</h3>
<p className="text-sm text-white/70"> <p className="text-sm text-slate-600">
Share your details and we’ll invite you to beta cohorts with onboarding resources and direct feedback loops to our product team. Share your details and we’ll invite you to beta cohorts with onboarding resources and direct feedback loops to our product team.
</p> </p>
<form className="space-y-4"> <form className="space-y-4">
<input <input
type="text" type="text"
placeholder="Name" placeholder="Name"
className="w-full rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400" className="w-full rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
/> />
<input <input
type="email" type="email"
placeholder="Work email" placeholder="Work email"
className="w-full rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400" className="w-full rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
/> />
<textarea <textarea
rows={4} rows={4}
placeholder="Tell us about your current workflow and why you're excited." placeholder="Tell us about your current workflow and why you're excited."
className="w-full rounded-xl border border-white/15 bg-slate-950/60 px-4 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-brand-400 resize-none" className="w-full rounded-xl border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400 resize-none"
/> />
<button <button
type="submit" type="submit"
@@ -60,22 +60,22 @@ const Waitlist: React.FC = () => {
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<div className="rounded-3xl border border-white/10 bg-white/5 p-8 space-y-4"> <div className="rounded-3xl border border-slate-200 bg-white p-8 space-y-4">
<h4 className="text-lg font-semibold text-white">What’s coming</h4> <h4 className="text-lg font-semibold text-slate-900">What's coming</h4>
<ul className="space-y-3 text-sm text-white/70"> <ul className="space-y-3 text-sm text-slate-600">
{roadmapItems.map((item) => ( {roadmapItems.map((item) => (
<li key={item.title} className="flex gap-3"> <li key={item.title} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-300" /> <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
<div> <div>
<div className="font-semibold text-white">{item.title}</div> <div className="font-semibold text-slate-900">{item.title}</div>
<div>{item.description}</div> <div>{item.description}</div>
</div> </div>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
<div className="rounded-3xl border border-white/10 bg-white/5 p-8 text-sm text-white/70 space-y-3"> <div className="rounded-3xl border border-slate-200 bg-white p-8 text-sm text-slate-600 space-y-3">
<h4 className="text-lg font-semibold text-white">How the beta works</h4> <h4 className="text-lg font-semibold text-slate-900">How the beta works</h4>
<p>We onboard new features to the waitlist in weekly waves. You’ll receive playbooks, sample workflows, and a feedback channel with our product team.</p> <p>We onboard new features to the waitlist in weekly waves. You’ll receive playbooks, sample workflows, and a feedback channel with our product team.</p>
<p>Participants also get extended credits to experiment with automation scenarios.</p> <p>Participants also get extended credits to experiment with automation scenarios.</p>
</div> </div>