fix(landing): highlight Open Source as Most Popular tier (#462)

Move the Most Popular badge and featured card treatment to the Open Source tier; Enterprise becomes the plain card.
This commit is contained in:
SnapOtter
2026-07-07 19:11:49 +08:00
committed by GitHub
parent c2c9a9ed9b
commit e468cef6c0
+11 -11
View File
@@ -18,7 +18,13 @@ const checkIcon =
<div class="mx-auto grid max-w-4xl gap-8 md:grid-cols-2"> <div class="mx-auto grid max-w-4xl gap-8 md:grid-cols-2">
<!-- Open Source (Free) --> <!-- Open Source (Free) -->
<div class="reveal flex flex-col rounded-2xl border border-border bg-surface p-8"> <div class="reveal glow-warm relative flex flex-col overflow-hidden rounded-2xl border-2 border-primary/40 bg-surface p-8 md:scale-[1.03]">
<div class="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-primary/[0.04] to-transparent"></div>
<div class="relative">
<span class="mb-4 inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
Most Popular
</span>
<h3 class="font-display text-2xl font-bold">Open Source</h3> <h3 class="font-display text-2xl font-bold">Open Source</h3>
<div class="mt-2 flex items-baseline gap-1"> <div class="mt-2 flex items-baseline gap-1">
<span class="font-display text-4xl font-extrabold">Free</span> <span class="font-display text-4xl font-extrabold">Free</span>
@@ -32,7 +38,7 @@ const checkIcon =
href="https://docs.snapotter.com/guide/getting-started" href="https://docs.snapotter.com/guide/getting-started"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="btn-outline mt-6 block rounded-xl px-6 py-3 text-center text-sm font-semibold" class="btn-primary mt-6 block rounded-xl px-6 py-3 text-center text-sm font-semibold"
> >
Deploy Now Deploy Now
</a> </a>
@@ -59,15 +65,10 @@ const checkIcon =
))} ))}
</ul> </ul>
</div> </div>
</div>
<!-- Enterprise --> <!-- Enterprise -->
<div class="reveal glow-warm relative flex flex-col overflow-hidden rounded-2xl border-2 border-primary/40 bg-surface p-8 md:scale-[1.03]"> <div class="reveal flex flex-col rounded-2xl border border-border bg-surface p-8">
<div class="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-primary/[0.04] to-transparent"></div>
<div class="relative">
<span class="mb-4 inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
Most Popular
</span>
<h3 class="font-display text-2xl font-bold">Enterprise</h3> <h3 class="font-display text-2xl font-bold">Enterprise</h3>
<div class="mt-2 flex items-baseline gap-1"> <div class="mt-2 flex items-baseline gap-1">
<span class="font-display text-4xl font-extrabold">Custom</span> <span class="font-display text-4xl font-extrabold">Custom</span>
@@ -78,7 +79,7 @@ const checkIcon =
<a <a
href="/contact" href="/contact"
class="btn-primary mt-6 block rounded-xl px-6 py-3 text-center text-sm font-semibold" class="btn-outline mt-6 block rounded-xl px-6 py-3 text-center text-sm font-semibold"
> >
Let's talk Let's talk
</a> </a>
@@ -106,5 +107,4 @@ const checkIcon =
</ul> </ul>
</div> </div>
</div> </div>
</div>
</section> </section>