From 0db1896ec9dee6593197a672b819ebb90dbea05e Mon Sep 17 00:00:00 2001
From: Hardik Sankhla <datascientist.hardiksankhla@gmail.com>
Date: Fri, 26 Sep 2025 05:02:30 +0530
Subject: [PATCH] fix: Correct progress bar logic to show exclusivity
 percentage

- Display percentage remaining (99% when 5 registered)
- Progress bar width matches display percentage
- Use Math.floor for more precise percentage display
- Bar shows decreasing exclusivity as registrations increase
- Maintains visual consistency between text and bar
---
 src/components/LiveCounter.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/LiveCounter.tsx b/src/components/LiveCounter.tsx
index 8576bb2..a585994 100644
--- a/src/components/LiveCounter.tsx
+++ b/src/components/LiveCounter.tsx
@@ -17,7 +17,9 @@ const LiveCounter: React.FC<LiveCounterProps> = ({ onJoinWaitlist, onOpenLogin }
   }, [remainingSpots, totalSpots]);
 
   const isLive = remainingSpots > 0;
-    const percentageLeft = (remainingSpots / totalSpots) * 100;
+  const takenSpots = totalSpots - remainingSpots;
+  const percentageTaken = (takenSpots / totalSpots) * 100;
+  const displayPercentage = 100 - percentageTaken;
 
   return (
     <div className="fixed top-6 right-6 z-50 group">
@@ -59,13 +61,13 @@ const LiveCounter: React.FC<LiveCounterProps> = ({ onJoinWaitlist, onOpenLogin }
             <div className="flex justify-between items-center mb-2">
               <span className="text-cream/50 font-elegant-sans text-xs">Progress</span>
               <span className="text-luxury-gold font-elegant-sans text-xs font-medium">
-                {Math.round(percentageLeft)}%
+                {Math.floor(displayPercentage)}%
               </span>
             </div>
             <div className="w-full bg-deep-forest/50 rounded-full h-2 overflow-hidden">
               <div 
                 className="bg-gradient-to-r from-luxury-gold via-cream to-luxury-gold h-2 rounded-full transition-all duration-1000 ease-out relative"
-                style={{ width: `${percentageLeft}%` }}
+                style={{ width: `${displayPercentage}%` }}
               >
                 <div className="absolute inset-0 bg-white/20 animate-pulse"></div>
               </div>