refactor(home): update button, cards, and online counter UI (#248)

Improve primary button styles
Fix card overflow and add subtle highlights
Redesign online users counter and reduce font size

Author: YNazymko12

frontend/app/globals.css

@@ -210,71 +210,6 @@
   }
 }
 
-@keyframes wave-slide-up {
-  0% {
-    clip-path: polygon(
-      0% 100%,
-      10% 100%,
-      20% 100%,
-      30% 100%,
-      40% 100%,
-      50% 100%,
-      60% 100%,
-      70% 100%,
-      80% 100%,
-      90% 100%,
-      100% 100%,
-      100% 100%,
-      0% 100%
-    );
-  }
-  50% {
-    clip-path: polygon(
-      0% 60%,
-      10% 50%,
-      20% 45%,
-      30% 48%,
-      40% 55%,
-      50% 50%,
-      60% 45%,
-      70% 48%,
-      80% 52%,
-      90% 50%,
-      100% 55%,
-      100% 100%,
-      0% 100%
-    );
-  }
-  100% {
-    clip-path: polygon(
-      0% 0%,
-      10% 0%,
-      20% 0%,
-      30% 0%,
-      40% 0%,
-      50% 0%,
-      60% 0%,
-      70% 0%,
-      80% 0%,
-      90% 0%,
-      100% 0%,
-      100% 100%,
-      0% 100%
-    );
-  }
-}
-
-@keyframes text-fade-in {
-  0% {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes card-breathe {
   0% {
     transform: translate(0, 0) scale(1) rotate(var(--card-rotate, 0deg));
@@ -297,36 +232,24 @@
     animation: slide-up-gradient 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }
 
-  .animate-wave-slide-up {
-    animation: wave-slide-up 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-
-  .animate-text-fade-in {
-    animation: text-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-
   .animate-card-breathe {
     animation: card-breathe 6s ease-in-out infinite;
     will-change: transform;
   }
 
-  .left-4 .animate-card-breathe,
-  .md\:left-6 .animate-card-breathe,
-  .lg\:left-8 .animate-card-breathe,
-  .xl\:left-12 .animate-card-breathe {
-    --card-x: -30px;
-    --card-y: -25px;
+  .lg\:left-16.animate-card-breathe {
+    transform: rotate(-10deg);
+    --card-x: -20px;
+    --card-y: -15px;
     --card-rotate: -10deg;
     --card-rotate-offset: -3deg;
     animation-delay: 0s;
   }
 
-  .right-4 .animate-card-breathe,
-  .md\:right-6 .animate-card-breathe,
-  .lg\:right-8 .animate-card-breathe,
-  .xl\:right-12 .animate-card-breathe {
-    --card-x: 30px;
-    --card-y: 25px;
+  .lg\:right-20.animate-card-breathe {
+    transform: rotate(8deg);
+    --card-x: 20px;
+    --card-y: 15px;
     --card-rotate: 8deg;
     --card-rotate-offset: 3deg;
     animation-delay: 0.8s;
@@ -376,7 +299,7 @@
 .shop-scope {
   /* keep shop rounding slightly tighter than platform */
   --radius: calc(var(--radius-base) - 2px);
-  
+
   /* Shop header/button accent in LIGHT: no platform blue */
   --accent-primary: var(--foreground);
   --accent-hover: color-mix(in oklab, var(--foreground) 92%, white);

frontend/components/home/CodeCard.tsx

@@ -9,19 +9,26 @@ interface CodeCardProps {
 export function CodeCard({ fileName, snippet, className }: CodeCardProps) {
   return (
     <div
-      className={`pointer-events-none absolute hidden md:block ${className}`}
+      className={`pointer-events-none absolute hidden lg:block ${className} animate-card-breathe`}
       aria-hidden="true"
     >
-      <div className="rounded-2xl border border-border bg-card/60 backdrop-blur-xl shadow-xl dark:shadow-black/50 px-5 py-4 min-w-[230px] animate-card-breathe">
-        <div className="flex items-center justify-between mb-3 text-[10px] text-muted-foreground">
-          <div className="flex items-center gap-1.5">
-            <span className="h-2 w-2 rounded-full bg-red-400/90" />
-            <span className="h-2 w-2 rounded-full bg-yellow-400/90" />
-            <span className="h-2 w-2 rounded-full bg-green-400/90" />
+      <div className="absolute top-1/3 -left-4 -right-4 -bottom-6 bg-[var(--accent-primary)]/8 rounded-3xl blur-2xl" />
+
+      <div className="absolute top-1/2 -left-2 -right-2 -bottom-4 bg-[var(--accent-primary)]/12 rounded-2xl blur-xl" />
+
+      <div className="absolute top-2/3 -left-1 -right-1 -bottom-2 bg-[var(--accent-primary)]/15 rounded-2xl blur-md" />
+
+      <div className="relative rounded-2xl border border-[var(--accent-primary)]/20 bg-card/90 backdrop-blur-xl shadow-2xl dark:shadow-[var(--accent-primary)]/10 px-3.5 py-3 min-w-[180px] max-w-[200px] overflow-hidden">
+        <div className="flex items-center justify-between mb-2 text-[9px] text-muted-foreground/80">
+          <div className="flex items-center gap-1">
+            <span className="h-1.5 w-1.5 rounded-full bg-red-400/80 shadow-sm" />
+            <span className="h-1.5 w-1.5 rounded-full bg-yellow-400/80 shadow-sm" />
+            <span className="h-1.5 w-1.5 rounded-full bg-green-400/80 shadow-sm" />
           </div>
-          <span className="font-medium">{fileName}</span>
+          <span className="font-medium text-[8.5px]">{fileName}</span>
         </div>
-        <code className="text-[11px] whitespace-pre leading-relaxed font-mono text-foreground/90">
+
+        <code className="text-[10px] whitespace-pre leading-relaxed font-mono text-foreground/85 block relative z-10">
           {snippet}
         </code>
       </div>

frontend/components/home/HeroCodeCards.tsx

@@ -5,7 +5,7 @@ export function HeroCodeCards() {
     <>
       <CodeCard
         fileName="arrays.ts"
-        className="left-4 md:left-10 lg:left-8 xl:left-12 -top-2 md:-top-12 lg:-top-8 xl:-top-12 rotate-[-10deg]"
+        className="lg:left-16 lg:top-0"
         snippet={
           <>
             <span className="text-[var(--accent-primary)]">type</span> Arr1 = [
@@ -31,7 +31,7 @@ export function HeroCodeCards() {
 
       <CodeCard
         fileName="utils.js"
-        className="right-4 md:right-4 lg:right-8 xl:right-12 -bottom-2 md:-bottom-6 lg:-bottom-8 xl:-bottom-12 rotate-[8deg]"
+        className="lg:right-20 lg:bottom-16"
         snippet={
           <>
             <span className="text-[var(--accent-primary)]">function</span> sum(

frontend/components/home/HeroSection.tsx

@@ -26,12 +26,12 @@ sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh]
       <div className="relative max-w-5xl mx-auto w-full px-6 py-8 sm:py-12 md:py-28 lg:py-[7.5rem] xl:py-32 flex flex-col items-center text-center">
         <HeroCodeCards />
 
-        <p className="text-[11px] sm:text-xs md:text-sm tracking-[0.35em] uppercase text-foreground font-bold">
+        <p className="text-[11px] sm:text-xs lg:text-sm tracking-[0.35em] uppercase text-foreground/90 font-bold">
           {t('subtitle')}
         </p>
 
-        <div className="mt-6 sm:mt-8 md:mt-14 lg:mt-16 relative inline-block">
-          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tight relative inline-block">
+        <div className="mt-6 sm:mt-8 lg:mt-14 relative inline-block">
+          <h1 className="min-[375px]:text-[3.5rem] text-5xl sm:text-7xl md:text-[5rem] lg:text-8xl xl:text-[100px] font-black tracking-tight relative inline-block px-4">
             <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">
               DevLovers
             </span>
@@ -45,7 +45,7 @@ sm:min-h-[calc(100vh-280px)] md:min-h-[85vh] lg:min-h-[100vh]
           </h1>
         </div>
 
-        <p className="mt-4 sm:mt-6 md:mt-10 lg:mt-12 max-w-2xl text-sm sm:text-base md:text-lg text-muted-foreground font-light">
+        <p className="mt-4 sm:mt-6 md:mt-10 lg:mt-12 md:max-w-xl lg:max-w-2xl text-sm sm:text-sm lg:text-base text-muted-foreground font-light">
           {t('description')}
         </p>