From c604b76a965bedf6afe1731a98516985bfbf0576 Mon Sep 17 00:00:00 2001
From: YNazymko12 <yulychka12@gmail.com>
Date: Sun, 1 Feb 2026 18:42:51 +0100
Subject: [PATCH] refactor(home): update button, cards, and online counter UI

Improve primary button styles
Fix card overflow and add subtle highlights
Redesign online users counter and reduce font size
---
 frontend/app/globals.css                      |  95 +---------
 frontend/components/home/CodeCard.tsx         |  25 ++-
 frontend/components/home/HeroCodeCards.tsx    |   4 +-
 frontend/components/home/HeroSection.tsx      |   8 +-
 .../components/home/InteractiveCTAButton.tsx  | 178 ++++++++++++++----
 .../components/shared/OnlineCounterPopup.tsx  | 124 +++++++-----
 6 files changed, 252 insertions(+), 182 deletions(-)

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 2743a7c1..ccc119f9 100644
--- a/frontend/app/globals.css
+++ b/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);
diff --git a/frontend/components/home/CodeCard.tsx b/frontend/components/home/CodeCard.tsx
index 6f3b1157..f66efbf2 100644
--- a/frontend/components/home/CodeCard.tsx
+++ b/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>
diff --git a/frontend/components/home/HeroCodeCards.tsx b/frontend/components/home/HeroCodeCards.tsx
index 7c4fd1b6..8e696b93 100644
--- a/frontend/components/home/HeroCodeCards.tsx
+++ b/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(
diff --git a/frontend/components/home/HeroSection.tsx b/frontend/components/home/HeroSection.tsx
index 78946cce..8fee2a71 100644
--- a/frontend/components/home/HeroSection.tsx
+++ b/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>
 
diff --git a/frontend/components/home/InteractiveCTAButton.tsx b/frontend/components/home/InteractiveCTAButton.tsx
index f6c84014..d0426479 100644
--- a/frontend/components/home/InteractiveCTAButton.tsx
+++ b/frontend/components/home/InteractiveCTAButton.tsx
@@ -3,73 +3,181 @@
 import React from 'react';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
-import { createCTAVariants } from '@/lib/home/cta-variants';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Heart } from 'lucide-react';
 
 export function InteractiveCTAButton() {
   const t = useTranslations('homepage');
 
-  const [index, setIndex] = React.useState(0);
+  const [variantIndex, setVariantIndex] = React.useState(1);
   const [isHovered, setIsHovered] = React.useState(false);
 
-  const variants = createCTAVariants(t('cta'));
-  const current = variants[index];
-  const nextIndex = (index + 1) % variants.length;
-  const next = variants[nextIndex];
+  // Тимчасово для тестування - цифри замість текстів
+  const textVariants = [
+    `${t('cta')} 1`,
+    `${t('cta')} 2`,
+    `${t('cta')} 3`,
+    `${t('cta')} 4`,
+    `${t('cta')} 5`,
+  ];
+
+  const defaultVariant = t('cta');
+  const hoverVariant = textVariants[variantIndex];
 
   const handleEnter = () => {
     if (!window.matchMedia('(hover: hover)').matches) return;
-    if (isHovered) return;
     setIsHovered(true);
   };
 
   const handleLeave = () => {
     if (!window.matchMedia('(hover: hover)').matches) return;
-    if (!isHovered) return;
-    setIndex(nextIndex);
     setIsHovered(false);
+    setVariantIndex(prev => (prev + 1) % textVariants.length);
   };
 
+  // Орбітальні частинки
+  const particles = Array.from({ length: 12 }, (_, i) => ({
+    id: i,
+    angle: (i * 360) / 8,
+  }));
+
   return (
     <Link
       href="/q&a"
       onMouseEnter={handleEnter}
       onMouseLeave={handleLeave}
-      className={`
-        group relative inline-flex items-center overflow-hidden rounded-2xl
+      className="
+        group relative inline-flex items-center justify-center overflow-visible rounded-2xl
         px-8 sm:px-10 md:px-12 py-3 md:py-3.5 lg:py-4
         text-xs md:text-sm font-semibold tracking-[0.25em] uppercase text-white
-        ${current.shadow} ${current.shadowDark}
-        transition-shadow duration-700 ease-out
+        shadow-[0_18px_45px_rgba(30,94,255,0.35)]
+        dark:shadow-[0_22px_60px_rgba(255,45,85,0.5)]
+        hover:shadow-[0_22px_55px_rgba(30,94,255,0.45)]
+        dark:hover:shadow-[0_28px_70px_rgba(255,45,85,0.6)]
+        transition-shadow duration-500 ease-out
         active:scale-95
-active:brightness-110
-active:shadow-xl
-
-        focus-visible:outline-none focus-visible:ring-2 ${current.ring} focus-visible:ring-offset-2
-      `}
+        active:brightness-110
+        active:shadow-xl
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-primary)] focus-visible:ring-offset-2
+      "
     >
-      <span
-        className={`absolute inset-0 bg-gradient-to-r ${current.gradient} ${current.gradientDark}`}
+      {/* Базовий градієнт з анімацією */}
+      <motion.span
+        className="absolute inset-0 rounded-2xl"
+        style={{
+          background:
+            'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+        }}
+        animate={{
+          background: isHovered
+            ? [
+                'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+                'linear-gradient(225deg, var(--accent-hover) 0%, var(--accent-primary) 100%)',
+                'linear-gradient(315deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+                'linear-gradient(45deg, var(--accent-hover) 0%, var(--accent-primary) 100%)',
+              ]
+            : 'linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-hover) 100%)',
+        }}
+        transition={{
+          duration: 2,
+          repeat: isHovered ? Infinity : 0,
+          ease: 'linear',
+        }}
+      />
+
+      {/* М'яка неонова підсвітка */}
+      <motion.span
+        className="absolute inset-0 rounded-2xl pointer-events-none"
+        initial={{ opacity: 0 }}
+        animate={{
+          opacity: isHovered ? [0.15, 0.25, 0.15] : 0,
+        }}
+        transition={{
+          duration: 2.5,
+          repeat: isHovered ? Infinity : 0,
+          ease: 'easeInOut',
+        }}
+        style={{
+          boxShadow: `
+            0 0 30px 3px var(--accent-primary),
+            0 0 50px 5px var(--accent-hover)
+          `,
+        }}
       />
 
-      {isHovered && (
-        <span
-          className={`absolute inset-0 bg-gradient-to-r ${next.gradient} ${next.gradientDark} animate-wave-slide-up`}
-        />
-      )}
+      {/* Орбітальні частинки - БЛИЗЬКО навколо кнопки */}
+      <AnimatePresence>
+        {isHovered &&
+          particles.map(particle => (
+            <motion.span
+              key={particle.id}
+              className="absolute w-3 h-3 pointer-events-none"
+              style={{
+                left: '50%',
+                top: '50%',
+                marginLeft: '-6px',
+                marginTop: '-6px',
+              }}
+              initial={{ x: 0, y: 0, scale: 0, opacity: 0 }}
+              animate={{
+                x: [0, Math.cos((particle.angle * Math.PI) / 180) * 160, 0],
+                y: [0, Math.sin((particle.angle * Math.PI) / 180) * 60, 0],
+                scale: [0.7, 1, 0.7],
+                opacity: [0, 0.9, 0],
+              }}
+              transition={{
+                duration: 2,
+                repeat: Infinity,
+                ease: 'easeInOut',
+                delay: particle.id * 0.1,
+              }}
+            >
+              <Heart
+                size={14}
+                fill="var(--accent-primary)"
+                color="var(--accent-primary)"
+                style={{
+                  filter: 'drop-shadow(0 0 6px var(--accent-primary))',
+                }}
+              />
+            </motion.span>
+          ))}
+      </AnimatePresence>
 
+      {/* Внутрішній shine overlay */}
       <span
-        className="pointer-events-none absolute inset-[2px] rounded-2xl
-        bg-gradient-to-r from-white/20 via-white/5 to-white/20
-        opacity-40 supports-[hover:hover]:group-hover:opacity-60 transition-opacity"
+        className="pointer-events-none absolute inset-[1px] rounded-2xl"
+        style={{
+          background:
+            'linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)',
+        }}
       />
 
-      <span className="relative z-10">
-        <span
-          key={isHovered ? nextIndex : index}
-          className={`inline-block ${isHovered ? 'animate-text-fade-in' : ''}`}
-        >
-          {isHovered ? next.text : current.text}
-        </span>
+      {/* Текст з анімацією */}
+      <span className="relative z-10 flex items-center justify-center">
+        <AnimatePresence mode="wait">
+          {!isHovered ? (
+            <motion.span
+              key="default"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+            >
+              {defaultVariant}
+            </motion.span>
+          ) : (
+            <motion.span
+              key={`hover-${variantIndex}`}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+            >
+              {hoverVariant}
+            </motion.span>
+          )}
+        </AnimatePresence>
       </span>
     </Link>
   );
diff --git a/frontend/components/shared/OnlineCounterPopup.tsx b/frontend/components/shared/OnlineCounterPopup.tsx
index 206285e1..b2a79739 100644
--- a/frontend/components/shared/OnlineCounterPopup.tsx
+++ b/frontend/components/shared/OnlineCounterPopup.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { Users, Sparkles } from 'lucide-react';
+import { Users } from 'lucide-react';
 
 export function OnlineCounterPopup() {
   const t = useTranslations('onlineCounter');
@@ -25,14 +25,6 @@ export function OnlineCounterPopup() {
 
   if (!online) return null;
 
-  const getEmoji = (count: number) => {
-    if (count === 1) return '🎯';
-    if (count === 2) return '💼';
-    if (count <= 5) return '🚀';
-    if (count <= 10) return '⚡';
-    return '⭐';
-  };
-
   const getText = (count: number) => {
     if (count === 1) return t('one');
     if (count === 2) return t('two');
@@ -42,7 +34,7 @@ export function OnlineCounterPopup() {
   };
 
   return (
-    <div className="fixed bottom-12 right-12 z-50 max-w-md">
+    <div className="fixed bottom-[30vh] left-0 right-0 md:bottom-[10vh] md:left-auto md:right-12 z-50 flex justify-center md:justify-end md:pr-0">
       <div
         className={`
           transition-all duration-500 ease-out
@@ -53,51 +45,91 @@ export function OnlineCounterPopup() {
           }
         `}
       >
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-pink-400/20 dark:from-blue-500/30 dark:via-purple-500/30 dark:to-pink-500/30 blur-2xl animate-pulse" />
+        <div className="relative">
+          <div className="absolute -inset-1.5 sm:-inset-2 bg-[var(--accent-primary)]/15 dark:bg-[var(--accent-primary)]/20 blur-xl rounded-3xl" />
 
-        <div className="relative inline-flex items-center gap-3 px-5 py-3.5 rounded-2xl bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-600 dark:via-purple-600 dark:to-pink-600 shadow-2xl">
-          <div className="relative flex-shrink-0">
-            <div className="w-10 h-10 rounded-xl bg-white/30 dark:bg-white/25 backdrop-blur-sm flex items-center justify-center">
-              <Users className="w-5 h-5 text-white" />
+          <div className="relative inline-flex items-center gap-2.5 sm:gap-2.5 md:gap-3 pl-3 sm:pl-3 md:pl-3.5 pr-3.5 sm:pr-3.5 md:pr-4 py-2.5 sm:py-2.5 md:py-3 rounded-xl sm:rounded-xl md:rounded-2xl bg-card/95 backdrop-blur-xl border border-[var(--accent-primary)]/20 shadow-2xl overflow-hidden">
+            <div className="absolute inset-0 opacity-40">
+              <div className="absolute inset-0 bg-gradient-to-br from-[var(--accent-primary)]/10 via-[var(--accent-primary)]/5 to-transparent" />
+              <div
+                className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,var(--accent-primary)_0%,transparent_2%)] opacity-30"
+                style={{ backgroundSize: '20px 20px' }}
+              />
             </div>
-            <Sparkles
-              className="absolute -top-1 -right-1 w-4 h-4 text-yellow-300 dark:text-yellow-200 animate-spin"
-              style={{ animationDuration: '3s' }}
-            />
-          </div>
 
-          <div className="flex items-baseline gap-2">
-            <span className="text-xl">{getEmoji(online)}</span>
-            <div className="flex items-baseline gap-1.5">
-              <span className="text-2xl font-black text-white dark:text-yellow-100 drop-shadow-sm">
-                {online}
-              </span>
-              <span className="text-base font-semibold text-white/95 dark:text-white/90 whitespace-nowrap">
-                {getText(online)}
+            <div className="relative flex-shrink-0 z-10">
+              <div className="w-9 h-9 sm:w-9 sm:h-9 md:w-10 md:h-10 rounded-lg sm:rounded-lg md:rounded-xl bg-[var(--accent-primary)]/10 dark:bg-[var(--accent-primary)]/15 backdrop-blur-sm flex items-center justify-center border border-[var(--accent-primary)]/20 relative overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-tr from-[var(--accent-primary)]/20 to-transparent animate-pulse" />
+                <Users className="w-4 h-4 sm:w-4 sm:h-4 md:w-5 md:h-5 text-[var(--accent-primary)] relative z-10" />
+              </div>
+            </div>
+
+            <div className="flex items-baseline gap-1.5 sm:gap-1.5 md:gap-2 relative z-10">
+              <div className="flex items-baseline gap-1 sm:gap-1 md:gap-1.5">
+                <span className="text-2xl sm:text-xl md:text-2xl font-black text-[var(--accent-primary)] dark:text-[var(--accent-primary)]">
+                  {online}
+                </span>
+                <span className="text-xs sm:text-xs md:text-sm font-semibold text-foreground/80 dark:text-foreground/90 whitespace-nowrap">
+                  {getText(online)}
+                </span>
+              </div>
+            </div>
+
+            <div className="ml-auto flex-shrink-0 relative z-10">
+              <span className="relative flex h-2.5 w-2.5 sm:h-2.5 sm:w-2.5 md:h-3 md:w-3">
+                <span
+                  className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent-primary)]/60"
+                  style={{ animationDuration: '1.5s' }}
+                />
+                <span
+                  className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent-primary)]/40"
+                  style={{ animationDuration: '2s', animationDelay: '0.5s' }}
+                />
+                <span className="relative inline-flex rounded-full h-2.5 w-2.5 sm:h-2.5 sm:w-2.5 md:h-3 md:w-3 bg-[var(--accent-primary)] shadow-lg shadow-[var(--accent-primary)]/50" />
               </span>
             </div>
-          </div>
 
-          <div className="ml-1 flex-shrink-0">
-            <span className="relative flex h-2.5 w-2.5">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-300 dark:bg-purple-200 opacity-75" />
-              <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-purple-400 dark:bg-purple-300" />
-            </span>
-          </div>
+            <div className="absolute bottom-0 left-0 right-0 h-0.5 sm:h-0.5 md:h-1 bg-[var(--accent-primary)]/10 rounded-b-xl sm:rounded-b-xl md:rounded-b-2xl overflow-hidden">
+              <div
+                className="h-full bg-gradient-to-r from-[var(--accent-primary)]/30 via-[var(--accent-primary)]/50 to-[var(--accent-primary)]/30"
+                style={{ animation: 'shrink 8s linear forwards' }}
+              />
+            </div>
+
+            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[var(--accent-primary)]/30 to-transparent" />
 
-          <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/25 dark:bg-white/20 rounded-b-2xl overflow-hidden">
-            <div
-              className="h-full bg-white/60 dark:bg-white/50"
-              style={{ animation: 'shrink 8s linear forwards' }}
-            />
+            <div className="absolute left-0 top-1/4 bottom-1/4 w-px bg-gradient-to-b from-transparent via-[var(--accent-primary)]/20 to-transparent" />
+            <div className="absolute right-0 top-1/4 bottom-1/4 w-px bg-gradient-to-b from-transparent via-[var(--accent-primary)]/20 to-transparent" />
           </div>
-        </div>
 
-        <div className="absolute -top-1 left-6 w-1.5 h-1.5 rounded-full bg-blue-400/60 dark:bg-blue-300/70 animate-ping" />
-        <div
-          className="absolute -top-2 right-8 w-1 h-1 rounded-full bg-purple-400/60 dark:bg-purple-300/70 animate-ping"
-          style={{ animationDelay: '0.5s' }}
-        />
+          <div className="absolute -top-1 left-4 sm:left-6 w-1 sm:w-1.5 h-1 sm:h-1.5 rounded-full bg-[var(--accent-primary)]/60 dark:bg-[var(--accent-primary)]/70 animate-ping" />
+          <div
+            className="absolute -top-2 right-6 sm:right-8 w-0.5 sm:w-1 h-0.5 sm:h-1 rounded-full bg-[var(--accent-primary)]/60 dark:bg-[var(--accent-primary)]/70 animate-ping"
+            style={{ animationDelay: '0.5s' }}
+          />
+          <div
+            className="absolute -top-1.5 left-1/3 w-1 h-1 rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60 animate-ping"
+            style={{ animationDelay: '1s' }}
+          />
+
+          <div
+            className="absolute top-1/4 -left-1 w-1 h-1 rounded-full bg-[var(--accent-primary)]/40 dark:bg-[var(--accent-primary)]/50 animate-ping"
+            style={{ animationDelay: '1.5s' }}
+          />
+          <div
+            className="absolute top-2/3 -right-1 w-1 h-1 rounded-full bg-[var(--accent-primary)]/40 dark:bg-[var(--accent-primary)]/50 animate-ping"
+            style={{ animationDelay: '2s' }}
+          />
+
+          <div
+            className="absolute -bottom-1 left-1/4 w-0.5 sm:w-1 h-0.5 sm:h-1 rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60 animate-ping"
+            style={{ animationDelay: '0.8s' }}
+          />
+          <div
+            className="absolute -bottom-1.5 right-1/3 w-1 h-1 rounded-full bg-[var(--accent-primary)]/50 dark:bg-[var(--accent-primary)]/60 animate-ping"
+            style={{ animationDelay: '1.2s' }}
+          />
+        </div>
       </div>
     </div>
   );