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

components/cards/TasksCard.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { CheckSquare, Square, Plus } from "lucide-react";
+import { CheckCircle2, Circle, Plus, ListTodo } from "lucide-react";
 import { createTask, toggleTask } from "@/lib/api";
 import AddTaskModal from "../AddTaskModal";
 
@@ -49,57 +49,84 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
   return (
     <>
       <motion.div
-        className="glass-card p-5 h-full flex flex-col"
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
+        className="glass-card p-6 h-full flex flex-col"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35, delay: 0.14 }}
         whileHover={{ scale: 1.005 }}
       >
+        {/* Header */}
         <div className="flex items-center justify-between mb-4">
-          <div>
-            <div className="flex items-center gap-2">
-              <CheckSquare size={18} color="#6366f1" />
-              <span
-                className="text-sm font-semibold"
+          <div className="flex items-center gap-3">
+            <div
+              className="w-10 h-10 rounded-xl flex items-center justify-center"
+              style={{
+                background: "rgba(139,92,246,0.18)",
+                boxShadow: "0 0 18px rgba(139,92,246,0.3)",
+              }}
+            >
+              <ListTodo size={20} color="#8b5cf6" />
+            </div>
+            <div>
+              <div
+                className="text-base font-bold"
                 style={{ color: "var(--text-primary)" }}
               >
-                Задачи сегодня
-              </span>
-            </div>
-            <div
-              className="text-xs mt-0.5"
-              style={{ color: "var(--text-secondary)" }}
-            >
-              {pending.length} осталось из {localTasks.length}
+                Задачи
+              </div>
+              <div
+                className="text-xs"
+                style={{ color: "var(--text-secondary)" }}
+              >
+                {pending.length > 0
+                  ? `${pending.length} из ${localTasks.length} осталось`
+                  : "Всё готово!"}
+              </div>
             </div>
           </div>
+
+          {/* Add button */}
           <motion.button
             onClick={() => setModalOpen(true)}
-            className="w-8 h-8 rounded-lg flex items-center justify-center"
+            className="w-10 h-10 rounded-xl flex items-center justify-center"
             style={{
-              background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
-              boxShadow: "0 0 12px rgba(99,102,241,0.4)",
+              background: "linear-gradient(135deg, #8b5cf6, #6366f1)",
+              boxShadow: "0 0 18px rgba(139,92,246,0.45)",
             }}
-            whileTap={{ scale: 0.85 }}
+            whileTap={{ scale: 0.82 }}
           >
-            <Plus size={16} color="white" />
+            <Plus size={20} color="white" strokeWidth={2.5} />
           </motion.button>
         </div>
 
-        <div className="flex-1 overflow-y-auto space-y-2 pr-1">
-          <AnimatePresence>
+        {/* Task list */}
+        <div className="flex-1 overflow-y-auto space-y-2 pr-0.5">
+          <AnimatePresence initial={false}>
             {localTasks.length === 0 && (
               <motion.div
-                className="text-center py-8"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
+                className="flex flex-col items-center justify-center h-full py-8 gap-3"
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
               >
-                <div className="text-3xl mb-2">🎉</div>
+                <div className="text-4xl">🎉</div>
                 <div
-                  className="text-sm"
+                  className="text-sm font-medium"
                   style={{ color: "var(--text-secondary)" }}
                 >
-                  Всё сделано!
+                  Всё сделано на сегодня!
                 </div>
+                <motion.button
+                  onClick={() => setModalOpen(true)}
+                  className="mt-2 px-5 py-2.5 rounded-xl text-sm font-semibold"
+                  style={{
+                    background: "linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2))",
+                    border: "1px solid rgba(139,92,246,0.35)",
+                    color: "#8b5cf6",
+                  }}
+                  whileTap={{ scale: 0.9 }}
+                >
+                  + Добавить задачу
+                </motion.button>
               </motion.div>
             )}
 
@@ -107,32 +134,36 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
               <motion.div
                 key={task.id}
                 layout
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: 10, height: 0 }}
-                className="flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer"
+                initial={{ opacity: 0, x: -12, height: 0 }}
+                animate={{ opacity: 1, x: 0, height: "auto" }}
+                exit={{ opacity: 0, x: 12, height: 0 }}
+                transition={{ duration: 0.2 }}
+                className="flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
                 style={{
                   background: task.done
-                    ? "rgba(16,185,129,0.06)"
+                    ? "rgba(139,92,246,0.05)"
                     : "rgba(255,255,255,0.04)",
                   border: task.done
-                    ? "1px solid rgba(16,185,129,0.15)"
+                    ? "1px solid rgba(139,92,246,0.15)"
                     : "1px solid rgba(255,255,255,0.06)",
                 }}
                 onClick={() => handleToggle(task)}
                 whileTap={{ scale: 0.97 }}
               >
-                {task.done ? (
-                  <CheckSquare size={16} color="#10b981" />
-                ) : (
-                  <Square size={16} color="var(--text-secondary)" />
-                )}
+                <motion.div
+                  initial={{ scale: 0.8 }}
+                  animate={{ scale: 1 }}
+                >
+                  {task.done ? (
+                    <CheckCircle2 size={20} color="#8b5cf6" strokeWidth={2} />
+                  ) : (
+                    <Circle size={20} color="rgba(255,255,255,0.3)" strokeWidth={1.5} />
+                  )}
+                </motion.div>
                 <span
-                  className="text-xs font-medium flex-1 leading-snug"
+                  className="text-sm font-medium flex-1 leading-snug"
                   style={{
-                    color: task.done
-                      ? "var(--text-secondary)"
-                      : "var(--text-primary)",
+                    color: task.done ? "var(--text-secondary)" : "var(--text-primary)",
                     textDecoration: task.done ? "line-through" : "none",
                   }}
                 >