feat: dark luxury redesign with black heart branding

Complete visual overhaul: dark-only mode, rose/crimson accent system,
glassmorphism header, animated hero with floating hearts and glow orbs,
photo-backed cards, infinite team carousel with drag support,
redesigned modals with hero images, black heart logo with rose glow silhouette.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ui/ClassModal.tsx

@@ -6,12 +6,12 @@ import { X, Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
 import type { ClassItem } from "@/types";
 
 const iconMap: Record<string, React.ReactNode> = {
-  flame: <Flame size={40} />,
-  sparkles: <Sparkles size={40} />,
-  wind: <Wind size={40} />,
-  zap: <Zap size={40} />,
-  star: <Star size={40} />,
-  monitor: <Monitor size={40} />,
+  flame: <Flame size={20} />,
+  sparkles: <Sparkles size={20} />,
+  wind: <Wind size={20} />,
+  zap: <Zap size={20} />,
+  star: <Star size={20} />,
+  monitor: <Monitor size={20} />,
 };
 
 interface ClassModalProps {
@@ -38,55 +38,80 @@ export function ClassModal({ classItem, onClose }: ClassModalProps) {
 
   if (!classItem) return null;
 
+  const heroImage = classItem.images?.[0];
+
   return (
     <div
-      className="modal-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+      className="modal-overlay fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-lg sm:items-center sm:p-4"
       onClick={onClose}
     >
       <div
-        className="modal-content surface-base relative w-full max-w-md md:max-w-2xl max-h-[85vh] flex flex-col rounded-2xl shadow-xl"
+        className="modal-content relative flex w-full max-h-[90vh] flex-col overflow-hidden rounded-t-3xl bg-white sm:max-w-2xl sm:rounded-3xl dark:bg-[#111]"
         onClick={(e) => e.stopPropagation()}
       >
-        <button
-          onClick={onClose}
-          className="heading-text absolute right-4 top-4 z-10 rounded-full p-1 transition-opacity hover:opacity-70"
-          aria-label="Закрыть"
-        >
-          <X size={20} />
-        </button>
+        {/* Hero image banner */}
+        {heroImage && (
+          <div className="relative h-52 w-full shrink-0 sm:h-64">
+            <Image
+              src={heroImage}
+              alt={classItem.name}
+              fill
+              className="object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
 
-        <div className="overflow-y-auto p-6">
-          <div className="flex items-center gap-4">
-            <div className="heading-text shrink-0">{iconMap[classItem.icon]}</div>
-            <h3 className="heading-text text-xl font-semibold">
-              {classItem.name}
-            </h3>
+            {/* Close button */}
+            <button
+              onClick={onClose}
+              className="absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white/80 backdrop-blur-sm transition-all hover:bg-black/60 hover:text-white"
+              aria-label="Закрыть"
+            >
+              <X size={16} />
+            </button>
+
+            {/* Title on image */}
+            <div className="absolute bottom-0 left-0 right-0 p-6">
+              <div className="flex items-center gap-3">
+                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-white/15 text-white backdrop-blur-sm">
+                  {iconMap[classItem.icon]}
+                </div>
+                <h3 className="text-2xl font-bold text-white">
+                  {classItem.name}
+                </h3>
+              </div>
+            </div>
           </div>
+        )}
+
+        {/* Content */}
+        <div className="overflow-y-auto">
+          {/* Title fallback when no image */}
+          {!heroImage && (
+            <div className="flex items-center justify-between p-6 pb-0">
+              <div className="flex items-center gap-3">
+                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400">
+                  {iconMap[classItem.icon]}
+                </div>
+                <h3 className="heading-text text-xl font-bold">
+                  {classItem.name}
+                </h3>
+              </div>
+              <button
+                onClick={onClose}
+                className="rounded-full p-1.5 text-neutral-400 transition-all hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-500 dark:hover:bg-white/[0.05] dark:hover:text-white"
+                aria-label="Закрыть"
+              >
+                <X size={18} />
+              </button>
+            </div>
+          )}
 
           {classItem.detailedDescription && (
-            <div className="body-text mt-4 text-sm leading-relaxed whitespace-pre-line">
+            <div className="p-6 text-sm leading-relaxed whitespace-pre-line text-neutral-600 dark:text-neutral-400">
               {classItem.detailedDescription}
             </div>
           )}
 
-          {classItem.images && classItem.images.length > 0 && (
-            <div className={`mt-6 flex gap-3 pb-2 ${classItem.images.length === 1 ? "justify-center" : "overflow-x-auto"}`}>
-              {classItem.images.map((src, i) => (
-                <div
-                  key={i}
-                  className="h-48 w-72 shrink-0 overflow-hidden rounded-xl"
-                >
-                  <Image
-                    src={src}
-                    alt={`${classItem.name} ${i + 1}`}
-                    width={288}
-                    height={192}
-                    className="h-full w-full object-cover"
-                  />
-                </div>
-              ))}
-            </div>
-          )}
         </div>
       </div>
     </div>