From 9485daf99e714ea34e65a453538ddb4b869c2d70 Mon Sep 17 00:00:00 2001
From: Ksan <djordje@ksan.dev>
Date: Mon, 31 Aug 2026 12:12:04 +0200
Subject: [PATCH] Give section badge pills a rhomboid shape

---
 app/[locale]/about/AboutContent.tsx        |  2 +-
 app/[locale]/contact/page.tsx              |  2 +-
 app/[locale]/plans/[code]/PlansContent.tsx |  4 +--
 app/[locale]/projects/page.tsx             |  2 +-
 app/[locale]/services/ServicesContent.tsx  | 10 +++----
 app/globals.css                            | 32 ++++++++++++++++++++++
 components/sections/ProjectsCarousel.tsx   |  2 +-
 components/sections/Services.tsx           |  2 +-
 components/sections/TechStack.tsx          |  2 +-
 9 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/app/[locale]/about/AboutContent.tsx b/app/[locale]/about/AboutContent.tsx
index 2da144b..1e147cb 100644
--- a/app/[locale]/about/AboutContent.tsx
+++ b/app/[locale]/about/AboutContent.tsx
@@ -54,7 +54,7 @@ export default function AboutContent({ locale, dict }: AboutContentProps) {
             <motion.span
               initial={{ opacity: 0, y: -8 }}
               animate={{ opacity: 1, y: 0 }}
-              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>
diff --git a/app/[locale]/contact/page.tsx b/app/[locale]/contact/page.tsx
index ff2590c..9de90d5 100644
--- a/app/[locale]/contact/page.tsx
+++ b/app/[locale]/contact/page.tsx
@@ -36,7 +36,7 @@ export default async function ContactPage({
 
         <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-3xl text-center">
-            <span className="mb-6 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-6 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-1.5 w-1.5">
                 <span className="absolute inset-0 animate-ping rounded-full bg-emerald-400 opacity-75" />
                 <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400" />
diff --git a/app/[locale]/plans/[code]/PlansContent.tsx b/app/[locale]/plans/[code]/PlansContent.tsx
index af8ed67..7cb99b1 100644
--- a/app/[locale]/plans/[code]/PlansContent.tsx
+++ b/app/[locale]/plans/[code]/PlansContent.tsx
@@ -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>
diff --git a/app/[locale]/projects/page.tsx b/app/[locale]/projects/page.tsx
index b2a1241..4a5f2f5 100644
--- a/app/[locale]/projects/page.tsx
+++ b/app/[locale]/projects/page.tsx
@@ -37,7 +37,7 @@ export default async function ProjectsPage({
 
         <div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
           <div className="mx-auto max-w-3xl text-center">
-            <span 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">
+            <span 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}
             </span>
 
diff --git a/app/[locale]/services/ServicesContent.tsx b/app/[locale]/services/ServicesContent.tsx
index e72050f..8957434 100644
--- a/app/[locale]/services/ServicesContent.tsx
+++ b/app/[locale]/services/ServicesContent.tsx
@@ -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">
diff --git a/app/globals.css b/app/globals.css
index c12c067..f1a61ac 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -210,6 +210,38 @@
   );
 }
 
+@utility rhomboid {
+  /* Rhomboid (skewed parallelogram) chrome drawn on a pseudo-element so the
+     label itself stays upright. Colors come from --rhomboid-* (see the
+     rhomboid-emerald / rhomboid-strong modifiers). */
+  position: relative;
+  isolation: isolate;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    transform: skewX(-12deg);
+    /* Rounded before the skew, so the slanted points read as soft corners
+       rather than blades. */
+    border-radius: var(--rhomboid-radius, 6px);
+    border: 1px solid var(--rhomboid-border, rgba(167, 139, 250, 0.3));
+    background: var(--rhomboid-bg, rgba(139, 92, 246, 0.1));
+    backdrop-filter: blur(12px);
+  }
+}
+
+@utility rhomboid-emerald {
+  --rhomboid-border: rgba(52, 211, 153, 0.3);
+  --rhomboid-bg: rgba(16, 185, 129, 0.1);
+}
+
+@utility rhomboid-strong {
+  --rhomboid-border: rgba(167, 139, 250, 0.4);
+  --rhomboid-bg: rgba(139, 92, 246, 0.2);
+}
+
 @utility vignette {
   box-shadow: inset 0 0 200px 50px rgba(0, 0, 0, 0.5);
 }
diff --git a/components/sections/ProjectsCarousel.tsx b/components/sections/ProjectsCarousel.tsx
index 4a49f93..8aa260b 100644
--- a/components/sections/ProjectsCarousel.tsx
+++ b/components/sections/ProjectsCarousel.tsx
@@ -274,7 +274,7 @@ export default function ProjectsCarousel({
           <div>
             <motion.span
               variants={fadeUp}
-              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 backdrop-blur-md"
+              className="mb-4 inline-flex items-center gap-2 rhomboid px-5 py-1.5 font-mono text-xs tracking-tight text-purple-300"
             >
               {dict.projects.badge}
             </motion.span>
diff --git a/components/sections/Services.tsx b/components/sections/Services.tsx
index b488219..92b8776 100644
--- a/components/sections/Services.tsx
+++ b/components/sections/Services.tsx
@@ -32,7 +32,7 @@ export default function Services({ dict }: ServicesProps) {
         >
           <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"
           >
             {dict.services.badge}
           </motion.span>
diff --git a/components/sections/TechStack.tsx b/components/sections/TechStack.tsx
index 5060e4b..e08b47c 100644
--- a/components/sections/TechStack.tsx
+++ b/components/sections/TechStack.tsx
@@ -68,7 +68,7 @@ export default function TechStack({ dict }: TechStackProps) {
         >
           <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"
           >
             {dict.techStack.badge}
           </motion.span>