ksan/ksan.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give section badge pills a rhomboid shape

Browse Source
This commit is contained in:
Ksan
2026-08-31 12:12:04 +02:00
parent d6dbc71071
commit 9485daf99e
9 changed files with 45 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/plans/[code]/PlansContent.tsx
+2 -2
View File
@@ -31,7 +31,7 @@ export default function PlansContent({ locale, plans }: PlansContentProps) {
>
<motion.span
variants={fadeUp}
className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
className="mb-6 inline-flex items-center gap-2 rhomboid px-5 py-1.5 font-mono text-xs tracking-tight text-purple-300"
>
<Lock className="h-3 w-3" strokeWidth={2} />
{t.badge}
@@ -92,7 +92,7 @@ export default function PlansContent({ locale, plans }: PlansContentProps) {
}`}
>
{tier.highlighted && (
<span className="absolute -top-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border border-purple-400/40 bg-purple-500/20 px-3 py-1 font-mono text-[10px] uppercase tracking-widest text-purple-200 backdrop-blur-md">
<span className="absolute -top-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-1.5 rhomboid rhomboid-strong px-4 py-1 font-mono text-[10px] uppercase tracking-widest text-purple-200">
<Sparkles className="h-3 w-3" />
{t.popularBadge}
</span>