Upload folder using huggingface_hub

client/src/pages/WeeklyPractice.tsx

@@ -1425,20 +1425,32 @@ const WeeklyPractice: React.FC = () => {
 
         {/* Week Selector */}
         <div className="mb-6">
-          <div className="flex space-x-2 overflow-x-auto pb-2">
-            {weeks.map((week) => (
-              <button
-                key={week}
-                onClick={() => handleWeekChange(week)}
-                className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-all duration-200 ease-in-out ${
-                  selectedWeek === week
-                    ? 'bg-ui-neonPink text-white'  // differentiate from Tutorial (blue)
-                    : 'bg-ui-panel text-ui-text hover:bg-white border border-ui-border'
-                }`}
-              >
-                Week {week}
-              </button>
-            ))}
+          <div className="flex space-x-3 overflow-x-auto pb-2">
+            {weeks.map((week) => {
+              const isActive = selectedWeek === week;
+              return (
+                <button
+                  key={week}
+                  onClick={() => handleWeekChange(week)}
+                  className={`relative inline-flex items-center justify-center rounded-2xl px-4 py-1.5 whitespace-nowrap transition-all duration-300 ease-out ring-1 ring-inset ${isActive ? 'ring-white/50 backdrop-brightness-110 backdrop-saturate-150' : 'ring-white/30'} backdrop-blur-md isolate shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)]`}
+                  style={{ background: 'rgba(255,255,255,0.10)' }}
+                >
+                  {/* Rim washes */}
+                  <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
+                  {/* Soft glossy wash */}
+                  <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
+                  {/* Tiny hotspot near TL */}
+                  <div className="pointer-events-none absolute rounded-full" style={{ width: '28px', height: '28px', left: '8px', top: '6px', background: 'radial-gradient(16px_16px_at_10px_10px,rgba(255,255,255,0.5),rgba(255,255,255,0)_60%)', opacity: 0.45 }} />
+                  {/* Center darken for depth on unselected only */}
+                  {!isActive && (
+                    <div className="pointer-events-none absolute inset-0 rounded-2xl" style={{ background: 'radial-gradient(120%_120%_at_50%_55%,rgba(0,0,0,0.04),rgba(0,0,0,0)_60%)', opacity: 0.9 }} />
+                  )}
+                  {/* Pink tint overlay to match Weekly Practice identity */}
+                  <div className={`pointer-events-none absolute inset-0 rounded-2xl ${isActive ? 'bg-pink-600/70 mix-blend-normal opacity-100' : 'bg-pink-500/30 mix-blend-overlay opacity-35'}`} />
+                  <span className={`relative z-10 text-sm font-medium ${isActive ? 'text-white' : 'text-black'}`}>Week {week}</span>
+                </button>
+              );
+            })}
           </div>
         </div>