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

site rebuild

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-13 15:33:49 +00:00
parent 5a747181c1
commit b8645c0ada
141 changed files with 458 additions and 1371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -13,32 +13,42 @@ interface FeatureGridProps {
}
const FeatureGrid: React.FC<FeatureGridProps> = ({ features }) => {
const iconColors = [
"from-[#0693e3] to-[#0472b8]", // Blue
"from-[#0bbf87] to-[#08966b]", // Green
"from-[#ff7a00] to-[#cc5f00]", // Amber
"from-[#5d4ae3] to-[#3a2f94]", // Purple
];
return (
<div className="max-w-6xl mx-auto px-6 py-24">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{features.map((feature) => (
<div
key={feature.title}
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-100 border border-brand-300 flex items-center justify-center text-brand-600">
{feature.icon}
{features.map((feature, index) => {
const gradient = iconColors[index % iconColors.length];
return (
<div
key={feature.title}
className="relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 flex flex-col gap-4 group hover:border-[#0693e3]/50 transition-all shadow-sm hover:shadow-xl hover:-translate-y-1"
>
<div className={`size-12 rounded-2xl bg-gradient-to-br ${gradient} flex items-center justify-center text-white shadow-lg`}>
{feature.icon}
</div>
<h3 className="text-xl font-semibold text-slate-900">{feature.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed">
{feature.description}
</p>
{feature.link && (
<a
href={feature.link.href}
className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group-hover:gap-3 transition-all"
>
{feature.link.label}
<ArrowUpRightIcon className="h-4 w-4" />
</a>
)}
</div>
<h3 className="text-xl font-semibold text-slate-900">{feature.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed">
{feature.description}
</p>
{feature.link && (
<a
href={feature.link.href}
className="inline-flex items-center gap-2 text-sm font-semibold text-brand-600 hover:text-brand-700"
>
{feature.link.label}
<ArrowUpRightIcon className="h-4 w-4" />
</a>
)}
</div>
))}
);
})}
</div>
</div>
);

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

@@ -40,42 +40,44 @@ const HeroSection: React.FC<HeroSectionProps> = ({
};
return (
<section className="relative overflow-hidden bg-white">
<div className="absolute inset-0 bg-gradient-to-br from-brand-50/50 via-white to-slate-50/50" />
<section className="relative overflow-hidden bg-gradient-to-br from-[#0d1b2a] via-[#142b3f] to-[#1a3a5a]">
<div className="absolute inset-0 bg-gradient-to-br from-[#0693e3]/10 via-transparent to-[#5d4ae3]/10" />
<div className="absolute inset-0 bg-[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-brand-600">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-[#0693e3] bg-[#0693e3]/10 px-4 py-2 rounded-full border border-[#0693e3]/20">
AI + SEO PLATFORM
</span>
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-slate-900">
<h1 className="text-4xl md:text-6xl font-semibold leading-tight text-white">
{headline}
</h1>
<p className="text-lg md:text-xl text-slate-600 leading-relaxed max-w-xl">
<p className="text-lg md:text-xl text-slate-300 leading-relaxed max-w-xl">
{subheadline}
</p>
<div className="flex flex-col sm:flex-row gap-4">
{renderCta(
primaryCta,
"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"
"inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-6 py-3 text-sm md:text-base font-semibold transition shadow-lg shadow-[#0693e3]/30"
)}
{secondaryCta && renderCta(
secondaryCta,
"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"
"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"
)}
</div>
</div>
<div className="flex-1 w-full">
<div className="relative rounded-3xl border border-slate-200 bg-white shadow-xl">
<div className="relative rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-sm shadow-2xl shadow-[#0693e3]/20">
<div className="absolute -inset-1 bg-gradient-to-r from-[#0693e3]/20 via-[#5d4ae3]/20 to-[#0bbf87]/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-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-slate-500">
<div className="absolute bottom-6 left-6 bg-gradient-to-br from-[#0d1b2a]/95 to-[#142b3f]/95 backdrop-blur-lg border border-[#0693e3]/30 rounded-2xl px-6 py-4 flex flex-col gap-1 shadow-xl">
<span className="text-xs uppercase tracking-[0.2em] text-[#0693e3]">
End-to-end automation
</span>
<span className="text-lg font-semibold text-slate-900">
<span className="text-lg font-semibold text-white">
Keywords ➝ Ideas ➝ Tasks ➝ Content ➝ Images
</span>
</div>

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

@@ -10,17 +10,31 @@ interface MetricsBarProps {
}
const MetricsBar: React.FC<MetricsBarProps> = ({ metrics }) => {
const accentColors = [
"from-[#0693e3] to-[#0472b8]",
"from-[#0bbf87] to-[#08966b]",
"from-[#ff7a00] to-[#cc5f00]",
];
return (
<div className="max-w-5xl mx-auto -mt-12 sm:-mt-16 px-6">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border border-slate-200 bg-white shadow-lg p-6">
{metrics.map((metric) => (
<div key={metric.label} className="text-center sm:text-left">
<div className="text-3xl font-semibold text-slate-900">{metric.value}</div>
<div className="text-sm uppercase tracking-[0.2em] text-slate-500 mt-2">
{metric.label}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 shadow-xl p-6 backdrop-blur-sm">
{metrics.map((metric, index) => {
const gradient = accentColors[index % accentColors.length];
return (
<div key={metric.label} className="text-center sm:text-left relative">
<div className={`absolute left-0 top-0 w-1 h-full bg-gradient-to-b ${gradient} rounded-full`} />
<div className="pl-4">
<div className={`text-3xl font-semibold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>
{metric.value}
</div>
<div className="text-sm uppercase tracking-[0.2em] text-slate-500 mt-2">
{metric.label}
</div>
</div>
</div>
</div>
))}
);
})}
</div>
</div>
);

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

@@ -10,25 +10,35 @@ interface WorkflowStepsProps {
}
const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ steps }) => {
const stepColors = [
"from-[#0693e3] to-[#0472b8]",
"from-[#0bbf87] to-[#08966b]",
"from-[#ff7a00] to-[#cc5f00]",
"from-[#5d4ae3] to-[#3a2f94]",
];
return (
<div className="max-w-6xl mx-auto px-6 py-24">
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
{steps.map((step, index) => (
<div
key={step.title}
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-100 border border-brand-300 flex items-center justify-center font-semibold text-brand-600 text-xl">
{index + 1}
{steps.map((step, index) => {
const gradient = stepColors[index % stepColors.length];
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-[#0693e3]/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-[#0693e3] transition">
{step.title}
</h3>
<p className="text-sm text-slate-600 leading-relaxed">
{step.subtitle}
</p>
</div>
<h3 className="text-lg font-semibold text-slate-900 leading-snug">
{step.title}
</h3>
<p className="text-sm text-slate-600 leading-relaxed">
{step.subtitle}
</p>
</div>
))}
);
})}
</div>
</div>
);

BIN
frontend/src/marketing/images/hero-dashboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 351 KiB

3
frontend/src/marketing/index.tsx
View File

@@ -2,7 +2,8 @@ import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import MarketingApp from "./MarketingApp";
import "../styles/global.css";
import "./styles/marketing.css";
import "../styles/igny8-colors.css";
const container = document.getElementById("root");

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

@@ -15,11 +15,11 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
const closeMobile = () => setMobileOpen(false);
return (
<div className="min-h-screen flex flex-col bg-white text-slate-900">
<header className="sticky top-0 z-[1100] backdrop-blur-xl bg-white/95 border-b border-slate-200">
<div className="min-h-screen flex flex-col bg-gradient-to-b from-white via-slate-50 to-white text-slate-900">
<header className="sticky top-0 z-[1100] backdrop-blur-xl bg-white/95 border-b border-slate-200 shadow-sm">
<div className="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-brand-400 to-brand-600 flex items-center justify-center text-lg font-bold text-white">
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[#0693e3]/30">
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-brand-600 ${isActive ? "text-brand-600" : "text-slate-700"}`}
className={`transition hover:text-[#0693e3] ${isActive ? "text-[#0693e3] 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-brand-500 hover:bg-brand-600 text-white px-5 py-2 text-sm font-semibold transition"
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-5 py-2 text-sm font-semibold transition shadow-md shadow-[#0693e3]/30"
>
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-brand-500 hover:bg-brand-600 text-white px-5 py-2 text-sm font-semibold transition"
className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-5 py-2 text-sm font-semibold transition shadow-md shadow-[#0693e3]/30"
onClick={closeMobile}
>
Start Free
@@ -105,39 +105,39 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
<main className="flex-1">{children}</main>
<footer className="bg-slate-50 border-t border-slate-200">
<footer className="bg-gradient-to-br from-[#0d1b2a] via-[#142b3f] to-[#0d1b2a] border-t border-[#0693e3]/20">
<div className="max-w-6xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-4 gap-12">
<div className="space-y-4">
<Link to="/" className="inline-flex items-center gap-3">
<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">
<span className="h-10 w-10 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-lg font-bold text-white shadow-lg shadow-[#0693e3]/30">
IG
</span>
<div className="flex flex-col leading-tight">
<span className="font-semibold tracking-wide text-slate-900 uppercase">
<span className="font-semibold tracking-wide text-white uppercase">
Igny8
</span>
<span className="text-xs text-slate-600">
<span className="text-xs text-slate-300">
AI + SEO automation suite
</span>
</div>
</Link>
<p className="text-sm text-slate-600 max-w-xs">
<p className="text-sm text-slate-300 max-w-xs">
Automate keyword intelligence, clustering, content production, and image creation in one unified growth engine.
</p>
<div className="text-xs text-slate-500">
<div className="text-xs text-slate-400">
© {new Date().getFullYear()} Igny8 Labs. All rights reserved.
</div>
</div>
{footerNavGroups.map((group) => (
<div key={group.title}>
<h4 className="text-sm font-semibold text-slate-900 uppercase tracking-wide mb-4">
<h4 className="text-sm font-semibold text-white uppercase tracking-wide mb-4">
{group.title}
</h4>
<ul className="space-y-3 text-sm text-slate-600">
<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-slate-900 transition">
<Link to={link.path} className="hover:text-[#0693e3] transition">
{link.name}
</Link>
</li>
@@ -146,7 +146,7 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children }) => {
</div>
))}
</div>
<div className="border-t border-slate-200 py-6 px-6 text-center text-xs text-slate-500">
<div className="border-t border-[#0693e3]/20 py-6 px-6 text-center text-xs text-slate-400">
Built for marketers who automate growth with AI.
</div>
</footer>

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

@@ -17,7 +17,7 @@ import CTASection from "../components/CTASection";
const Home: React.FC = () => {
return (
<div className="bg-white">
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white">
<HeroSection
image="hero-dashboard.png"
headline="Scale SEO content from keyword discovery to AI-crafted outputs."
@@ -88,15 +88,15 @@ const Home: React.FC = () => {
/>
<ul className="space-y-4 text-sm text-slate-600">
<li className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-500" />
<span className="mt-1 size-2 rounded-full bg-[#0693e3] shadow-sm shadow-[#0693e3]/30" />
Real-time metrics on keyword additions, clusters formed, briefs generated, and content shipped.
</li>
<li className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-500" />
<span className="mt-1 size-2 rounded-full bg-[#0bbf87] shadow-sm shadow-[#0bbf87]/30" />
Drill into automation logs to understand every AI action, approvals, and handoffs.
</li>
<li className="flex gap-3">
<span className="mt-1 size-2 rounded-full bg-brand-500" />
<span className="mt-1 size-2 rounded-full bg-[#ff7a00] shadow-sm shadow-[#ff7a00]/30" />
Export-ready visuals for leadership updates and client reporting.
</li>
</ul>
@@ -137,15 +137,27 @@ const Home: React.FC = () => {
description:
"Govern prompts, author voices, and AI usage with centralized policies and audit-ready histories.",
},
].map((item) => (
<div
key={item.title}
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-slate-900">{item.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed">{item.description}</p>
</div>
))}
].map((item, index) => {
const gradients = [
"from-[#0693e3]/10 to-[#0472b8]/5",
"from-[#0bbf87]/10 to-[#08966b]/5",
"from-[#5d4ae3]/10 to-[#3a2f94]/5",
];
const borders = [
"border-[#0693e3]/30",
"border-[#0bbf87]/30",
"border-[#5d4ae3]/30",
];
return (
<div
key={item.title}
className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${gradients[index]} bg-white/50 backdrop-blur-sm p-8 space-y-4 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all`}
>
<h3 className="text-lg font-semibold text-slate-900">{item.title}</h3>
<p className="text-sm text-slate-600 leading-relaxed">{item.description}</p>
</div>
);
})}
</section>
<CTASection

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

@@ -83,14 +83,14 @@ const featureMatrix = [
const Pricing: React.FC = () => {
return (
<div className="bg-white text-slate-900">
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-8">
<SectionHeading
eyebrow="Pricing"
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."
/>
<div className="rounded-3xl border border-slate-200 bg-white p-6 text-sm text-slate-600 text-center">
<div className="rounded-3xl border-2 border-[#0693e3]/20 bg-gradient-to-br from-[#0693e3]/5 via-[#5d4ae3]/5 to-[#0bbf87]/5 p-6 text-sm text-slate-600 text-center backdrop-blur-sm">
Looking to migrate from an existing AI content stack? Ask about our migration credit and onboarding accelerator.
</div>
</section>
@@ -99,10 +99,10 @@ const Pricing: React.FC = () => {
{tiers.map((tier) => (
<div
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-slate-200 bg-white"} p-10 flex flex-col gap-6`}
className={`relative rounded-3xl border-2 ${tier.featured ? "border-[#0693e3]/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]" : "border-slate-200 bg-gradient-to-br from-white to-slate-50/50"} p-10 flex flex-col gap-6 hover:shadow-xl transition-all ${tier.featured ? "" : "hover:-translate-y-1"}`}
>
{tier.badge && (
<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">
<span className={`inline-flex items-center self-start rounded-full border px-4 py-1 text-[11px] uppercase tracking-[0.25em] ${tier.featured ? "border-[#0693e3]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]" : "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[#0693e3]"}`}>
{tier.badge}
</span>
)}
@@ -119,20 +119,23 @@ const Pricing: React.FC = () => {
)}
</div>
<ul className="space-y-3 text-sm text-slate-600">
{tier.features.map((feature) => (
<li key={feature} className="flex gap-3">
<span className="mt-1 size-1.5 rounded-full bg-brand-500" />
{feature}
</li>
))}
{tier.features.map((feature, idx) => {
const colors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
return (
<li key={feature} className="flex gap-3">
<span className={`mt-1 size-1.5 rounded-full ${colors[idx % colors.length]} shadow-sm`} />
{feature}
</li>
);
})}
</ul>
<div className="pt-4">
<a
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 ${
tier.featured
? "bg-white text-slate-900 hover:bg-brand-100"
: "border border-slate-300 text-slate-900 hover:border-white/60"
? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30"
: "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-[#0693e3] hover:bg-white"
}`}
>
{tier.name === "Enterprise" ? "Contact sales" : "Start free trial"}
@@ -176,7 +179,7 @@ const Pricing: React.FC = () => {
</div>
</section>
<section className="bg-slate-50/70 border-y border-slate-200">
<section className="bg-gradient-to-br from-[#0693e3]/5 via-slate-50/70 to-[#0bbf87]/5 border-y border-[#0693e3]/10">
<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">
<h4 className="text-lg font-semibold text-slate-900">

31
frontend/src/marketing/styles/marketing.css Normal file
View File

@@ -0,0 +1,31 @@
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap")
layer(base);
@import "tailwindcss";
@layer base {
*,
::before,
::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: Outfit, sans-serif;
background-color: #ffffff;
color: #1e293b;
}
body {
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
}