Merge pull request #343 from DevLoversTeam/feature/leaderboard-logic-update

feat: update sponsor button style and improve leaderboard display logic

Author: ViktorSvertoka

frontend/app/globals.css

@@ -70,6 +70,9 @@
 
   --accent-primary: #1e5eff;
   --accent-hover: #174ad6;
+
+  --sponsor: #bf3989;
+  --sponsor-hover: #9a2f6e;
 }
 
 .dark {
@@ -108,6 +111,43 @@
 
   --accent-primary: #ff2d55;
   --accent-hover: #e0264b;
+
+  --sponsor: #db61a2;
+  --sponsor-hover: #bf3989;
+}
+
+html {
+  overflow-x: hidden;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
+}
+
+:is(.dark) *::-webkit-scrollbar-thumb,
+.dark::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+@supports (-moz-appearance: none) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+  }
+
+  :is(.dark) * {
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+  }
 }
 
 @layer base {
@@ -130,6 +170,7 @@
   .btn {
     background-color: var(--accent-primary);
   }
+
   .btn:hover {
     background-color: var(--accent-hover);
   }
@@ -158,6 +199,7 @@
   from {
     width: 100%;
   }
+
   to {
     width: 0%;
   }
@@ -167,45 +209,45 @@
   from {
     transform: scaleX(1);
   }
+
   to {
     transform: scaleX(0);
   }
 }
 
 @keyframes wave-clip {
+
   0%,
   100% {
-    clip-path: polygon(
-      0% 50%,
-      15% 48%,
-      32% 52%,
-      54% 60%,
-      70% 62%,
-      84% 60%,
-      100% 55%,
-      100% 100%,
-      0% 100%
-    );
+    clip-path: polygon(0% 50%,
+        15% 48%,
+        32% 52%,
+        54% 60%,
+        70% 62%,
+        84% 60%,
+        100% 55%,
+        100% 100%,
+        0% 100%);
   }
+
   50% {
-    clip-path: polygon(
-      0% 65%,
-      16% 70%,
-      34% 72%,
-      51% 68%,
-      67% 58%,
-      84% 52%,
-      100% 48%,
-      100% 100%,
-      0% 100%
-    );
+    clip-path: polygon(0% 65%,
+        16% 70%,
+        34% 72%,
+        51% 68%,
+        67% 58%,
+        84% 52%,
+        100% 48%,
+        100% 100%,
+        0% 100%);
   }
 }
 
 @keyframes slide-up-gradient {
   0% {
     clip-path: inset(100% 0 0 0);
   }
+
   100% {
     clip-path: inset(0 0 0 0);
   }
@@ -215,10 +257,11 @@
   0% {
     transform: translate(0, 0) scale(1) rotate(var(--card-rotate, 0deg));
   }
+
   50% {
-    transform: translate(var(--card-x, 0), var(--card-y, 0)) scale(1.05)
-      rotate(calc(var(--card-rotate, 0deg) + var(--card-rotate-offset, 0deg)));
+    transform: translate(var(--card-x, 0), var(--card-y, 0)) scale(1.05) rotate(calc(var(--card-rotate, 0deg) + var(--card-rotate-offset, 0deg)));
   }
+
   100% {
     transform: translate(0, 0) scale(1) rotate(var(--card-rotate, 0deg));
   }
@@ -293,10 +336,12 @@
 }
 
 @keyframes float {
+
   0%,
   100% {
     transform: translateY(0);
   }
+
   50% {
     transform: translateY(-8px);
   }
@@ -306,6 +351,7 @@
   0% {
     stroke-dashoffset: 0;
   }
+
   100% {
     stroke-dashoffset: 20;
   }
@@ -359,16 +405,12 @@
     0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 7px rgba(0, 0, 0, 0.1),
     0 22px 60px rgba(0, 0, 0, 0.28);
 
-  --shop-hero-btn-success-bg: color-mix(
-    in oklab,
-    var(--shop-hero-btn-bg) 88%,
-    white
-  );
-  --shop-hero-btn-success-bg-hover: color-mix(
-    in oklab,
-    var(--shop-hero-btn-bg) 80%,
-    white
-  );
+  --shop-hero-btn-success-bg: color-mix(in oklab,
+      var(--shop-hero-btn-bg) 88%,
+      white);
+  --shop-hero-btn-success-bg-hover: color-mix(in oklab,
+      var(--shop-hero-btn-bg) 80%,
+      white);
   --shop-hero-btn-success-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
   --shop-hero-btn-success-shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.32);
 }
@@ -421,16 +463,12 @@
     0 0 0 2px rgba(255, 45, 85, 0.7), 0 0 0 7px rgba(255, 45, 85, 0.22),
     0 22px 70px rgba(255, 45, 85, 0.38);
 
-  --shop-hero-btn-success-bg: color-mix(
-    in oklab,
-    var(--accent-primary) 82%,
-    black
-  );
-  --shop-hero-btn-success-bg-hover: color-mix(
-    in oklab,
-    var(--accent-primary) 72%,
-    black
-  );
+  --shop-hero-btn-success-bg: color-mix(in oklab,
+      var(--accent-primary) 82%,
+      black);
+  --shop-hero-btn-success-bg-hover: color-mix(in oklab,
+      var(--accent-primary) 72%,
+      black);
   --shop-hero-btn-success-shadow: 0 22px 60px rgba(255, 45, 85, 0.45);
   --shop-hero-btn-success-shadow-hover: 0 28px 80px rgba(255, 45, 85, 0.6);
 }
@@ -440,6 +478,7 @@
   from {
     transform: translateX(0);
   }
+
   to {
     transform: translateX(-100%);
   }
@@ -458,9 +497,12 @@
   0% {
     transform: translateY(0);
   }
+
   100% {
     transform: translateY(-50%);
-  } /* Рухаємось на 50%, бо контент дубльовано */
+  }
+
+  /* Рухаємось на 50%, бо контент дубльовано */
 }
 
 .animate-marquee-vertical {
@@ -474,18 +516,23 @@
 
 /* Hide scrollbar for horizontal scroll containers */
 .scrollbar-hide {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
+
 .scrollbar-hide::-webkit-scrollbar {
-  display: none; /* Chrome, Safari and Opera */
+  display: none;
+  /* Chrome, Safari and Opera */
 }
 
 @media (prefers-reduced-motion: reduce) {
+
   .animate-float,
   .animate-spin-slow,
   .animate-spin-slower,
   .animate-dash-flow {
     animation: none !important;
   }
-}
+}

frontend/components/dashboard/ProfileCard.tsx

@@ -64,17 +64,16 @@ export function ProfileCard({
           </p>
 
           <div className="mt-3 flex flex-wrap items-center gap-2">
-            {isSponsor ? (
+            <span className="inline-flex items-center rounded-full bg-(--accent-primary)/10 px-3 py-1 text-xs font-bold tracking-wider text-(--accent-primary) uppercase">
+              {user.role || t('defaultRole')}
+            </span>
+            {isSponsor && (
               <span
-                className="inline-flex items-center gap-1.5 rounded-full bg-amber-100 px-3 py-1 text-xs font-bold tracking-wider text-amber-700 uppercase dark:bg-amber-500/15 dark:text-amber-400"
+                className="inline-flex items-center gap-1.5 rounded-full bg-(--sponsor)/10 px-3 py-1 text-xs font-bold tracking-wider text-(--sponsor) uppercase dark:bg-(--sponsor)/15 dark:text-(--sponsor)"
               >
                 <Heart className="h-3 w-3 fill-current" />
                 {t('sponsor')}
               </span>
-            ) : (
-              <span className="inline-flex items-center rounded-full bg-(--accent-primary)/10 px-3 py-1 text-xs font-bold tracking-wider text-(--accent-primary) uppercase">
-                {user.role || t('defaultRole')}
-              </span>
             )}
           </div>
         </div>
@@ -107,10 +106,12 @@ export function ProfileCard({
             href="https://github.com/sponsors/DevLoversTeam"
             target="_blank"
             rel="noopener noreferrer"
-            className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full border border-emerald-200 bg-emerald-50 px-8 py-3 text-sm font-semibold tracking-widest uppercase text-emerald-700 transition-all hover:scale-105 hover:border-(--accent-primary) hover:bg-(--accent-primary) hover:text-white dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400 dark:hover:border-(--accent-primary) dark:hover:bg-(--accent-primary) dark:hover:text-white"
+            className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full border border-(--sponsor)/30 bg-(--sponsor)/10 px-8 py-3 text-sm font-semibold tracking-widest uppercase text-(--sponsor) transition-all hover:scale-105 hover:border-(--accent-primary)/30 hover:bg-(--accent-primary) hover:text-white dark:border-(--sponsor)/30 dark:bg-(--sponsor)/15 dark:text-(--sponsor) dark:hover:border-(--accent-primary)/30 dark:hover:bg-(--accent-primary) dark:hover:text-white"
           >
             <Heart className="h-4 w-4 fill-current group-hover:fill-none" />
-            <span className="grid">
+            {/* Mobile: static text, Desktop: text swap on hover */}
+            <span className="sm:hidden">{t('sponsorThanks')}</span>
+            <span className="hidden sm:grid">
               <span className="col-start-1 row-start-1 transition-all group-hover:translate-y-full group-hover:opacity-0">
                 {t('sponsorThanks')}
               </span>
@@ -124,7 +125,8 @@ export function ProfileCard({
             href="https://github.com/sponsors/DevLoversTeam"
             target="_blank"
             rel="noopener noreferrer"
-            className="group relative inline-flex items-center justify-center gap-2 rounded-full px-8 py-3 text-sm font-semibold tracking-widest uppercase text-white bg-(--accent-primary) hover:bg-(--accent-hover) transition-all hover:scale-105"
+            className="group relative inline-flex items-center justify-center gap-2 rounded-full bg-(--accent-primary) px-8 py-3 text-sm font-semibold tracking-widest uppercase text-white transition-all hover:scale-105 hover:bg-(--accent-hover)"
+
           >
             <Heart className="h-4 w-4" />
             <span className="relative z-10">{t('becomeSponsor')}</span>

frontend/components/home/WelcomeHeroSection.tsx

@@ -24,12 +24,12 @@ export default function WelcomeHeroSection() {
         </span>
         <div className="relative">
           <h1 className="select-none text-5xl font-extrabold tracking-tight sm:text-6xl md:text-7xl lg:text-8xl">
-            <span className="relative inline-block bg-gradient-to-r from-[var(--accent-primary)]/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-[var(--accent-hover)]/70 bg-clip-text text-transparent">
+            <span className="relative inline-block bg-linear-to-r from-(--accent-primary)/70 via-[color-mix(in_srgb,var(--accent-primary)_70%,white)]/70 to-(--accent-hover)/70 bg-clip-text text-transparent">
               DevLovers
             </span>
 
             <span
-              className="wave-text-gradient absolute inset-0 inline-block bg-gradient-to-r from-[var(--accent-primary)] via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-[var(--accent-hover)] bg-clip-text text-transparent"
+              className="wave-text-gradient absolute inset-0 inline-block bg-linear-to-r from-(--accent-primary) via-[color-mix(in_srgb,var(--accent-primary)_70%,white)] to-(--accent-hover) bg-clip-text text-transparent"
               aria-hidden="true"
             >
               DevLovers
@@ -48,26 +48,32 @@ export default function WelcomeHeroSection() {
 
       <OnlineCounterPopup ctaRef={ctaRef} />
 
-      <motion.div 
+      <motion.button
+        type="button"
+        onClick={() => {
+          const steps = document.querySelectorAll<HTMLElement>('[data-home-step]');
+          if (steps[1]) steps[1].scrollIntoView({ behavior: 'smooth' });
+        }}
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 1, duration: 1 }}
-        className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-gray-400 dark:text-white/50"
+        className="absolute bottom-8 left-1/2 -translate-x-1/2 flex cursor-pointer flex-col items-center gap-2 text-gray-400 transition-colors hover:text-(--accent-primary) dark:text-white/50 dark:hover:text-(--accent-primary)"
+        aria-label={t('scrollToNextSection')}
       >
-        <div className="relative h-8 w-5 rounded-full border-2 border-gray-300 p-1 dark:border-white/30">
-           <motion.div 
+        <div className="relative h-8 w-5 rounded-full border-2 border-current p-1 opacity-75">
+           <motion.div
               animate={{ y: [0, 8, 0] }}
               transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
-              className="mx-auto h-1.5 w-1 rounded-full bg-gray-400 dark:bg-white/70"
+              className="mx-auto h-1.5 w-1 rounded-full bg-current"
            />
         </div>
         <motion.div
            animate={{ y: [0, 4, 0] }}
            transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut", delay: 0.2 }}
         >
-            <ChevronDown className="h-4 w-4 text-gray-400 dark:text-white/50" />
+            <ChevronDown className="h-4 w-4" />
         </motion.div>
-      </motion.div>
+      </motion.button>
     </section>
   );
 }

frontend/components/leaderboard/LeaderboardPodium.tsx

@@ -117,7 +117,7 @@ export function LeaderboardPodium({ topThree }: { topThree: User[] }) {
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label={t('sponsor')}
-                  className="mt-0.5 inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-700 transition-colors hover:bg-amber-200 dark:bg-amber-500/15 dark:text-amber-400 dark:hover:bg-amber-500/25"
+                  className="mt-0.5 inline-flex items-center gap-1 rounded-full bg-(--sponsor)/10 px-2 py-0.5 text-[10px] font-bold text-(--sponsor) transition-colors hover:bg-(--sponsor)/20 dark:bg-(--sponsor)/15 dark:text-(--sponsor) dark:hover:bg-(--sponsor)/25"
                 >
                   <Heart className="h-2.5 w-2.5 fill-current" aria-hidden="true" />
                   <span className="hidden md:inline">{t('sponsor')}</span>