From 8be3984d72f1e7daef91fa6fbf2d19fbd47d1f54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sun, 22 Feb 2026 20:46:11 +0000
Subject: [PATCH] fix: modernize badges and fix gauge spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Redesign SectionBadge: remove border/shadow, use subtle primary tint bg
- Simplify hero badge: remove dated star + divider pattern
- Fix gauge dial overlapping color band: shift arc up (cy 100→88), increase gap

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/modules/marketing/home/hero.tsx         |  8 --------
 .../src/modules/marketing/home/report-preview.tsx    | 12 ++++++------
 apps/web/src/modules/marketing/layout/section.tsx    |  2 +-
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/modules/marketing/home/hero.tsx b/apps/web/src/modules/marketing/home/hero.tsx
index 5eac570..7ef41de 100644
--- a/apps/web/src/modules/marketing/home/hero.tsx
+++ b/apps/web/src/modules/marketing/home/hero.tsx
@@ -21,14 +21,6 @@ export const Hero = async () => {
       />
       <div className="animate-fade-in -translate-y-4 opacity-0">
         <SectionBadge>
-          <div className="w-fit py-0.5 text-center text-xs sm:text-sm">
-            ★
-          </div>
-          <div
-            data-orientation="vertical"
-            role="none"
-            className="bg-border mx-2 h-full w-px shrink-0"
-          ></div>
           {t("announcement")}
         </SectionBadge>
       </div>
diff --git a/apps/web/src/modules/marketing/home/report-preview.tsx b/apps/web/src/modules/marketing/home/report-preview.tsx
index f90c777..eacc0dd 100644
--- a/apps/web/src/modules/marketing/home/report-preview.tsx
+++ b/apps/web/src/modules/marketing/home/report-preview.tsx
@@ -104,23 +104,23 @@ function ScoreTab() {
   const radius = 80;
   const stroke = 12;
   const cx = 100;
-  const cy = 100;
+  const cy = 88;
   const circumference = Math.PI * radius;
   const offset = circumference - (SCORE / 100) * circumference;
 
   return (
     <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start sm:gap-10">
       {/* Left: Gauge + band */}
-      <div className="flex shrink-0 flex-col items-center gap-3">
+      <div className="flex shrink-0 flex-col items-center gap-5">
         <span className="text-muted-foreground text-xs tracking-wide uppercase">
           {t("reportPreview.demo.businessName")}
         </span>
 
-        <div className="relative" style={{ width: 200, height: 130 }}>
+        <div className="relative" style={{ width: 200, height: 112 }}>
           <svg
             width="200"
-            height="130"
-            viewBox="0 0 200 130"
+            height="112"
+            viewBox="0 0 200 112"
             className="overflow-visible"
           >
             <circle
@@ -150,7 +150,7 @@ function ScoreTab() {
               className="transition-all duration-1000 ease-out"
             />
           </svg>
-          <div className="absolute inset-0 flex flex-col items-center justify-end pb-3">
+          <div className="absolute inset-0 flex flex-col items-center justify-end pb-1">
             <span
               className="text-6xl font-bold tabular-nums"
               style={{ color: SCORE_COLOR }}
diff --git a/apps/web/src/modules/marketing/layout/section.tsx b/apps/web/src/modules/marketing/layout/section.tsx
index abd7270..88dc922 100644
--- a/apps/web/src/modules/marketing/layout/section.tsx
+++ b/apps/web/src/modules/marketing/layout/section.tsx
@@ -37,7 +37,7 @@ export const SectionBadge = ({
   return (
     <div
       className={cn(
-        "group text-foreground hover:bg-accent/50 focus:ring-ring inline-flex h-8 items-center rounded-full border px-3 py-0.5 text-xs font-medium shadow-xs transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none sm:text-sm",
+        "inline-flex items-center gap-1.5 rounded-full bg-primary/[0.08] px-3.5 py-1.5 text-xs font-medium tracking-wide text-primary/90 sm:text-sm",
         className,
       )}
       {...props}