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

css

Browse Source
This commit is contained in:
Desktop
2025-11-14 14:34:44 +05:00
parent 628620406d
commit 9eee5168bb
7 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -239,7 +239,7 @@ const Pricing: React.FC = () => {
key={tier.name}
className={`relative rounded-3xl border-2 ${
tier.featured
? "border-[var(--igny8-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)]"
? "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-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
? "border-[var(--igny8-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 text-[var(--igny8-blue)]"
? "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"
}`}
>
{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
? "bg-[var(--igny8-green)]/10 text-[#0bbf87]"
? "igny8-bg-green/10 text-[#0bbf87]"
: "bg-slate-100 text-slate-600";
return (
<li key={feature} className="flex gap-3 items-start">
@@ -305,7 +305,7 @@ const Pricing: React.FC = () => {
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:border-[var(--igny8-blue)] hover:bg-white"
: "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:igny8-border-blue 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 text-[var(--igny8-blue)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
<th className="px-6 py-4 text-center font-semibold igny8-text-blue 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 bg-[var(--igny8-blue)]"></span>
<span className="size-1.5 rounded-full igny8-bg-blue"></span>
{row.starter}
</span>
)}
</td>
<td className="px-6 py-5 text-center font-medium text-[var(--igny8-blue)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
<td className="px-6 py-5 text-center font-medium igny8-text-blue 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 bg-[var(--igny8-blue)]"></span>
<span className="size-1.5 rounded-full igny8-bg-blue"></span>
{row.growth}
</span>
)}
@@ -389,7 +389,7 @@ 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 border-[var(--igny8-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 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="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">
<CreditCardIcon className="h-6 w-6" />
@@ -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 text-[var(--igny8-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 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"
>
<RocketLaunchIcon className="h-5 w-5" />
Start free trial