redesign: glassmorphism UI with big cards, 3-col layout, ambient orbs

components/cards/WeatherCard.tsx

@@ -30,14 +30,11 @@ export default function WeatherCard({ weather }: Props) {
   if (!weather) {
     return (
       <motion.div
-        className="glass-card p-5 h-full flex items-center justify-center"
+        className="glass-card p-6 h-full flex items-center justify-center"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
       >
-        <div
-          className="text-sm"
-          style={{ color: "var(--text-secondary)" }}
-        >
+        <div className="text-sm" style={{ color: "var(--text-secondary)" }}>
           Загрузка погоды...
         </div>
       </motion.div>
@@ -46,91 +43,93 @@ export default function WeatherCard({ weather }: Props) {
 
   return (
     <motion.div
-      className="glass-card p-5 h-full flex flex-col"
+      className="glass-card p-6 h-full flex flex-col"
       style={{
-        background: "rgba(6,182,212,0.04)",
-        border: "1px solid rgba(6,182,212,0.12)",
+        background: "rgba(59,130,246,0.05)",
+        border: "1px solid rgba(59,130,246,0.15)",
       }}
-      initial={{ opacity: 0, scale: 0.95 }}
-      animate={{ opacity: 1, scale: 1 }}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.35, delay: 0.21 }}
       whileHover={{ scale: 1.01 }}
     >
-      <div className="flex items-start justify-between mb-4">
+      {/* Location */}
+      <div
+        className="text-sm font-medium mb-3"
+        style={{ color: "var(--text-secondary)" }}
+      >
+        📍 Санкт-Петербург
+      </div>
+
+      {/* Current weather */}
+      <div className="flex items-center gap-4 mb-4">
+        <div className="text-5xl leading-none">
+          {getWeatherEmoji(weather.weatherCode)}
+        </div>
         <div>
           <div
-            className="text-sm font-semibold"
-            style={{ color: "var(--text-primary)" }}
+            className="font-black leading-none"
+            style={{ fontSize: "44px", color: "var(--text-primary)" }}
           >
-            🌍 Санкт-Петербург
+            {weather.temp}°
           </div>
-          <div className="flex items-center gap-3 mt-2">
-            <span className="text-3xl font-bold" style={{ color: "var(--text-primary)" }}>
-              {getWeatherEmoji(weather.weatherCode)}
-            </span>
-            <div>
-              <div
-                className="text-2xl font-bold"
-                style={{ color: "var(--text-primary)" }}
-              >
-                {weather.temp}°C
-              </div>
-              <div
-                className="text-xs"
-                style={{ color: "var(--text-secondary)" }}
-              >
-                {weather.desc}
-              </div>
-            </div>
+          <div
+            className="text-sm mt-1"
+            style={{ color: "var(--text-secondary)" }}
+          >
+            {weather.desc}
           </div>
         </div>
-        <div className="text-right space-y-1">
-          <div className="flex items-center gap-1 justify-end">
-            <Droplets size={12} color="#06b6d4" />
-            <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
-              {weather.humidity}%
-            </span>
-          </div>
-          <div className="flex items-center gap-1 justify-end">
-            <Wind size={12} color="#8b5cf6" />
-            <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
-              {weather.windSpeed} км/ч
-            </span>
-          </div>
+      </div>
+
+      {/* Stats */}
+      <div className="flex gap-4 mb-4">
+        <div className="flex items-center gap-1.5">
+          <Droplets size={14} color="#3b82f6" />
+          <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
+            {weather.humidity}%
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Wind size={14} color="#8b5cf6" />
+          <span className="text-xs" style={{ color: "var(--text-secondary)" }}>
+            {weather.windSpeed} км/ч
+          </span>
+        </div>
+        <div
+          className="text-xs"
+          style={{ color: "var(--text-secondary)" }}
+        >
+          Ощущается {weather.feelsLike}°
         </div>
       </div>
 
       {/* Forecast */}
       <div className="flex gap-2 mt-auto">
-        {(weather.forecast || []).map((day: any, i: number) => (
+        {(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
           <motion.div
             key={day.date}
-            className="flex-1 rounded-xl p-3 text-center"
+            className="flex-1 rounded-2xl p-2.5 text-center"
             style={{
-              background: i === 0
-                ? "rgba(99,102,241,0.12)"
-                : "rgba(255,255,255,0.04)",
-              border: i === 0
-                ? "1px solid rgba(99,102,241,0.25)"
-                : "1px solid rgba(255,255,255,0.06)",
+              background: i === 0 ? "rgba(59,130,246,0.14)" : "rgba(255,255,255,0.04)",
+              border: i === 0 ? "1px solid rgba(59,130,246,0.28)" : "1px solid rgba(255,255,255,0.06)",
             }}
-            initial={{ opacity: 0, y: 10 }}
+            initial={{ opacity: 0, y: 8 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: i * 0.1 }}
+            transition={{ delay: 0.3 + i * 0.08 }}
           >
             <div
               className="text-xs mb-1 font-medium"
               style={{ color: "var(--text-secondary)" }}
             >
-              {i === 0 ? "Сегодня" : formatDate(day.date)}
-            </div>
-            <div className="text-lg mb-1">
-              {getWeatherEmoji(day.weatherCode)}
+              {i === 0 ? "Сег." : formatDate(day.date)}
             </div>
+            <div className="text-lg mb-1">{getWeatherEmoji(day.weatherCode)}</div>
             <div
-              className="text-xs font-semibold"
+              className="text-xs font-bold"
               style={{ color: "var(--text-primary)" }}
             >
-              {day.maxTemp}° / {day.minTemp}°
+              {day.maxTemp}°/{day.minTemp}°
             </div>
           </motion.div>
         ))}