Site design updates

This commit is contained in:
Desktop
2025-11-14 01:16:08 +05:00
parent f8bab8d432
commit e74c048f46
17 changed files with 429 additions and 1618 deletions

View File

@@ -149,28 +149,28 @@ const Pricing: React.FC = () => {
<h3 className="text-xl font-semibold text-slate-900">
Compare plan capabilities
</h3>
<div className="overflow-hidden rounded-3xl border border-slate-200 bg-white">
<div className="overflow-hidden rounded-3xl border-2 border-[#0693e3]/20 bg-gradient-to-br from-white via-[#0693e3]/5 to-[#0bbf87]/5 shadow-lg">
<table className="min-w-full text-sm text-slate-600">
<thead className="bg-white text-slate-600 uppercase text-xs tracking-[0.3em]">
<thead className="bg-gradient-to-r from-[#0693e3]/10 via-[#5d4ae3]/10 to-[#0bbf87]/10 text-slate-700 uppercase text-xs tracking-[0.3em]">
<tr>
<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">Scale</th>
<th className="px-6 py-4 text-center">Enterprise</th>
<th className="px-6 py-4 text-left font-semibold">Capability</th>
<th className="px-6 py-4 text-center font-semibold">Launch</th>
<th className="px-6 py-4 text-center font-semibold text-[#0693e3]">Scale</th>
<th className="px-6 py-4 text-center font-semibold">Enterprise</th>
</tr>
</thead>
<tbody>
{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/50" : "bg-gradient-to-r from-white/30 to-transparent"}>
<td className="px-6 py-5 text-slate-900 font-medium">{row.feature}</td>
<td className="px-6 py-5 text-center">
{row.launch === true ? "Included" : row.launch}
{row.launch === true ? <span className="inline-flex items-center gap-1"><span className="size-1.5 rounded-full bg-[#0bbf87]"></span>Included</span> : row.launch}
</td>
<td className="px-6 py-5 text-center font-medium text-[#0693e3]">
{row.scale === true ? <span className="inline-flex items-center gap-1"><span className="size-1.5 rounded-full bg-[#0693e3]"></span>Included</span> : row.scale}
</td>
<td className="px-6 py-5 text-center">
{row.scale === true ? "Included" : row.scale}
</td>
<td className="px-6 py-5 text-center">
{row.enterprise === true ? "Included" : row.enterprise}
{row.enterprise === true ? <span className="inline-flex items-center gap-1"><span className="size-1.5 rounded-full bg-[#5d4ae3]"></span>Included</span> : row.enterprise}
</td>
</tr>
))}
@@ -179,10 +179,11 @@ const Pricing: React.FC = () => {
</div>
</section>
<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">
<section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/5 to-white p-8 space-y-4 text-sm text-slate-600">
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[#0693e3]"></span>
Usage-based credits explained
</h4>
<p>
@@ -192,8 +193,9 @@ const Pricing: React.FC = () => {
Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
</p>
</div>
<div className="space-y-4">
<h4 className="text-lg font-semibold text-slate-900">
<div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/5 to-white p-8 space-y-4 text-sm text-slate-600">
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
<span className="size-2 rounded-full bg-[#0bbf87]"></span>
Security & compliance
</h4>
<p>