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

stlyes fixes

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-29 19:52:51 +00:00
parent c91175fdcb
commit 4f7ab9c606
155 changed files with 1576 additions and 2489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,7 +151,7 @@ const Pricing: React.FC = () => {
/* Badge component styles */
.badge-success {
background-color: #10b981;
background-color: var(--color-success, #2CA18E);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 0.375rem;
@@ -161,19 +161,19 @@ const Pricing: React.FC = () => {
}
.badge-primary {
background: linear-gradient(135deg, #0693e3 0%, #0578c2 100%);
background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
color: white;
padding: 0.375rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
box-shadow: 0 2px 8px rgba(6, 147, 227, 0.3);
box-shadow: 0 2px 8px color-mix(in oklch, var(--color-primary) 30%, transparent);
}
/* Primary button styles */
.btn-primary {
background: linear-gradient(135deg, #0693e3 0%, #0578c2 100%);
background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
@@ -183,12 +183,12 @@ const Pricing: React.FC = () => {
border: none;
cursor: pointer;
width: 100%;
box-shadow: 0 4px 12px rgba(6, 147, 227, 0.3);
box-shadow: 0 4px 12px color-mix(in oklch, var(--color-primary) 30%, transparent);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(6, 147, 227, 0.4);
box-shadow: 0 6px 16px color-mix(in oklch, var(--color-primary) 40%, transparent);
}
.btn-primary:active:not(:disabled) {
@@ -203,21 +203,21 @@ const Pricing: React.FC = () => {
/* Outline button styles */
.btn-outline {
background-color: #1e293b;
background-color: var(--color-gray-800, #1e293b);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
transition: all 0.2s ease;
border: 2px solid #334155;
border: 2px solid var(--color-gray-700, #334155);
cursor: pointer;
width: 100%;
}
.btn-outline:hover:not(:disabled) {
background-color: #334155;
border-color: #475569;
background-color: var(--color-gray-700, #334155);
border-color: var(--color-gray-600, #475569);
transform: translateY(-2px);
}
@@ -233,7 +233,7 @@ const Pricing: React.FC = () => {
/* Featured plan highlight */
.pricing-card-featured {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
background: linear-gradient(135deg, var(--color-gray-800, #1e293b) 0%, var(--color-gray-700, #334155) 100%) !important;
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
@@ -245,20 +245,20 @@ const Pricing: React.FC = () => {
.pricing-card-featured p,
.pricing-card-featured span:not(.badge-primary):not(.btn-primary) {
color: #e2e8f0 !important;
color: var(--color-gray-200, #e2e8f0) !important;
}
.pricing-card-featured li span {
color: #e2e8f0 !important;
color: var(--color-gray-200, #e2e8f0) !important;
}
.pricing-card-featured .line-through {
color: #94a3b8 !important;
color: var(--color-gray-400, #94a3b8) !important;
}
/* Check icon colors */
.pricing-card-featured svg {
color: #10b981 !important;
color: var(--color-success, #2CA18E) !important;
}
/* Strikethrough price */
@@ -269,42 +269,42 @@ const Pricing: React.FC = () => {
`}</style>
<div className="bg-white">
{/* PRICING HERO SECTION */}
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/30 to-white">
<section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-50/30 to-white">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.02),transparent_60%)]" />
<div className="relative max-w-4xl mx-auto px-6 pt-12 md:pt-16 pb-6 text-center z-10">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
Pricing
</span>
<h1 className="text-4xl md:text-5xl font-bold leading-tight text-slate-900 mb-0">
<h1 className="text-4xl md:text-5xl font-bold leading-tight text-gray-900 mb-0">
Simple plans that scale with your automation goals.
</h1>
</div>
{/* SPECIAL PROMO BANNER */}
<div className="relative max-w-5xl mx-auto px-6 z-10">
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-amber-500 via-orange-500 to-red-500 p-[2px] shadow-xl">
<div className="relative bg-gradient-to-r from-amber-50 via-orange-50 to-red-50 rounded-2xl px-6 py-4 flex items-center justify-center gap-3">
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-warning-500 via-warning-500 to-error-500 p-[2px] shadow-xl">
<div className="relative bg-gradient-to-r from-warning-50 via-warning-50 to-error-50 rounded-2xl px-6 py-4 flex items-center justify-center gap-3">
{/* Fire Icon */}
<svg className="w-6 h-6 text-orange-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
</svg>
{/* Message Text */}
<div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-3">
<span className="inline-flex items-center gap-2 bg-gradient-to-r from-amber-600 to-orange-600 text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-lg">
<span className="inline-flex items-center gap-2 bg-gradient-to-r from-warning-600 to-warning-600 text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-lg">
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
</svg>
Limited Time
</span>
<p className="text-base sm:text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-700 via-orange-700 to-red-700">
<p className="text-base sm:text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-warning-700 via-warning-700 to-error-700">
Lifetime Discount on all Plans for First 100 Users!
</p>
</div>
{/* Fire Icon */}
<svg className="w-6 h-6 text-orange-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
</svg>
</div>
@@ -317,7 +317,7 @@ const Pricing: React.FC = () => {
<section className="max-w-7xl mx-auto px-6 pb-24">
<div className="text-center py-12">
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
<p className="mt-4 text-slate-600">Loading pricing plans...</p>
<p className="mt-4 text-gray-600">Loading pricing plans...</p>
</div>
</section>
)}
@@ -325,7 +325,7 @@ const Pricing: React.FC = () => {
{error && (
<section className="max-w-7xl mx-auto px-6 pb-24">
<div className="text-center py-12">
<p className="text-red-600">{error}</p>
<p className="text-error-600">{error}</p>
<button
onClick={() => window.location.reload()}
className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)]"
@@ -351,7 +351,7 @@ const Pricing: React.FC = () => {
{/* What's Included Explanation */}
<div className="max-w-5xl mx-auto mt-8 text-center">
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
<p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
Every content piece includes High-Opportunity Keywords, AI clustering, idea generation, standard/premium images, Automation, WP publishing, SEO optimization, and internal linking.
</p>
</div>
@@ -361,20 +361,20 @@ const Pricing: React.FC = () => {
{/* COMPARISON TABLE SECTION REMOVED */}
{!loading && !error && false && (
<section className="max-w-7xl mx-auto px-6 pb-24 pt-16">
<h3 className="text-3xl font-bold text-slate-900 mb-8 text-center">
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">
Compare plan capabilities
</h3>
<div className="overflow-hidden rounded-3xl border-2 border-slate-200 bg-white shadow-lg">
<div className="overflow-hidden rounded-3xl border-2 border-gray-200 bg-white shadow-lg">
<div className="overflow-x-auto">
<table className="min-w-full text-sm">
<thead className="bg-gradient-to-r from-[#0693e3]/10 via-[#5d4ae3]/10 to-[#0bbf87]/10 sticky top-0">
<thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-purple)]/10 to-[var(--color-success)]/10 sticky top-0">
<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 text-[var(--color-primary)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
<th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
<th className="px-6 py-4 text-center font-semibold text-gray-900">Starter</th>
<th className="px-6 py-4 text-center font-semibold text-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
Growth
</th>
<th className="px-6 py-4 text-center font-semibold text-slate-900">Scale</th>
<th className="px-6 py-4 text-center font-semibold text-gray-900">Scale</th>
</tr>
</thead>
<tbody>
@@ -382,8 +382,8 @@ const Pricing: React.FC = () => {
// Category row styling
if (row.isCategory) {
return (
<tr key={row.feature} className="bg-gradient-to-r from-slate-100 to-slate-50">
<td colSpan={4} className="px-6 py-4 text-sm font-bold text-slate-900 uppercase tracking-wider">
<tr key={row.feature} className="bg-gradient-to-r from-gray-100 to-gray-50">
<td colSpan={4} className="px-6 py-4 text-sm font-bold text-gray-900 uppercase tracking-wider">
{row.feature}
</td>
</tr>
@@ -393,16 +393,16 @@ const Pricing: React.FC = () => {
return (
<tr
key={row.feature}
className={index % 2 === 0 ? "bg-white" : "bg-slate-50/50"}
className={index % 2 === 0 ? "bg-white" : "bg-gray-50/50"}
>
<td className="px-6 py-5 text-slate-900 font-medium">{row.feature}</td>
<td className="px-6 py-5 text-center text-slate-700">
<td className="px-6 py-5 text-gray-900 font-medium">{row.feature}</td>
<td className="px-6 py-5 text-center text-gray-700">
{row.starter === true ? (
<CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
<CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
) : row.starter === false ? (
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
<XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
) : row.starter === null ? (
<span className="text-slate-400">—</span>
<span className="text-gray-400">—</span>
) : (
<span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
@@ -410,13 +410,13 @@ const Pricing: React.FC = () => {
</span>
)}
</td>
<td className="px-6 py-5 text-center font-medium text-[var(--color-primary)] 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-[var(--color-primary)]/5 to-transparent">
{row.growth === true ? (
<CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
<CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
) : row.growth === false ? (
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
<XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
) : row.growth === null ? (
<span className="text-slate-400">—</span>
<span className="text-gray-400">—</span>
) : (
<span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
@@ -424,16 +424,16 @@ const Pricing: React.FC = () => {
</span>
)}
</td>
<td className="px-6 py-5 text-center text-slate-700">
<td className="px-6 py-5 text-center text-gray-700">
{row.scale === true ? (
<CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
<CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
) : row.scale === false ? (
<XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
<XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
) : row.scale === null ? (
<span className="text-slate-400">—</span>
<span className="text-gray-400">—</span>
) : (
<span className="inline-flex items-center gap-1">
<span className="size-1.5 rounded-full bg-[#5d4ae3]"></span>
<span className="size-1.5 rounded-full bg-[var(--color-purple)]"></span>
{row.scale}
</span>
)}
@@ -449,34 +449,34 @@ const Pricing: React.FC = () => {
)}
{/* INFO BLOCKS SECTION */}
<section className="bg-gradient-to-b from-white via-slate-50/30 to-white">
<section className="bg-gradient-to-b from-white via-gray-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 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="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/5 via-white to-[var(--color-success)]/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(--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">
<h4 className="text-lg font-semibold text-gray-900">
Usage-based credits explained
</h4>
</div>
<p className="text-sm text-slate-600 leading-relaxed">
<p className="text-sm text-gray-600 leading-relaxed">
Igny8 credits cover AI-generated drafts, clustering, and image creation. Monitor usage in real time from your dashboard. Credits roll over for 30 days.
</p>
<p className="text-sm text-slate-600 leading-relaxed">
<p className="text-sm text-gray-600 leading-relaxed">
Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
</p>
</div>
<div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/5 via-white to-[#5d4ae3]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
<div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-purple)]/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(--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">
<h4 className="text-lg font-semibold text-gray-900">
Security & compliance
</h4>
</div>
<p className="text-sm text-slate-600 leading-relaxed">
<p className="text-sm text-gray-600 leading-relaxed">
Igny8 supports granular access controls, SSO, audit logging, and data residency requests. Enterprise plans include SOC 2 documentation and custom security reviews.
</p>
</div>
@@ -484,7 +484,7 @@ const Pricing: React.FC = () => {
</section>
{/* FINAL CTA */}
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
{/* Radial glow */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />