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

phase 1-3 css refactor

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

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

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