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]/services/ServicesContent.tsx
+5 -5
View File
@@ -67,7 +67,7 @@ export default function ServicesContent({
>
<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"
>
{t.badge}
</motion.span>
@@ -114,7 +114,7 @@ export default function ServicesContent({
>
<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"
>
{t.offeringsLabel}
</motion.span>
@@ -198,7 +198,7 @@ export default function ServicesContent({
className="grid grid-cols-1 gap-8 lg:grid-cols-5"
>
<motion.div variants={fadeUp} className="lg:col-span-3">
<span className="mb-4 inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-emerald-300 backdrop-blur-md">
<span className="mb-4 inline-flex items-center gap-2 rhomboid rhomboid-emerald px-5 py-1.5 font-mono text-xs tracking-tight text-emerald-300">
<span className="relative flex h-2 w-2">
<span className="absolute inset-0 animate-ping rounded-full bg-emerald-400 opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.6)]" />
@@ -255,7 +255,7 @@ export default function ServicesContent({
>
<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"
>
{t.processLabel}
</motion.span>
@@ -329,7 +329,7 @@ export default function ServicesContent({
<div className="relative grid grid-cols-1 gap-8 px-8 py-12 sm:px-16 sm:py-16 lg:grid-cols-2 lg:gap-16">
<motion.div variants={fadeUp}>
<span className="mb-4 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">
<span className="mb-4 inline-flex items-center gap-2 rhomboid px-5 py-1.5 font-mono text-xs tracking-tight text-purple-300">
{t.pricingLabel}
</span>
<h2 className="mt-4 font-display text-3xl font-medium tracking-tight text-gradient-fade sm:text-4xl">