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/sections/Classes.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState } from "react";
-import { Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
+import Image from "next/image";
+import { Flame, Sparkles, Wind, Zap, Star, Monitor, ArrowRight } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
@@ -9,12 +10,12 @@ import { ClassModal } from "@/components/ui/ClassModal";
 import type { ClassItem } from "@/types";
 
 const iconMap: Record<string, React.ReactNode> = {
-  flame: <Flame size={32} />,
-  sparkles: <Sparkles size={32} />,
-  wind: <Wind size={32} />,
-  zap: <Zap size={32} />,
-  star: <Star size={32} />,
-  monitor: <Monitor size={32} />,
+  flame: <Flame size={20} />,
+  sparkles: <Sparkles size={20} />,
+  wind: <Wind size={20} />,
+  zap: <Zap size={20} />,
+  star: <Star size={20} />,
+  monitor: <Monitor size={20} />,
 };
 
 export function Classes() {
@@ -22,22 +23,57 @@ export function Classes() {
   const [selectedClass, setSelectedClass] = useState<ClassItem | null>(null);
 
   return (
-    <section id="classes" className="surface-muted section-padding">
+    <section id="classes" className="relative section-padding bg-neutral-100 dark:bg-[#0a0a0a]">
+      <div className="section-divider absolute top-0 left-0 right-0" />
       <div className="section-container">
         <Reveal>
           <SectionHeading>{classes.title}</SectionHeading>
         </Reveal>
 
-        <div className="mt-12 grid gap-6 sm:grid-cols-2">
+        <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {classes.items.map((item) => (
             <Reveal key={item.name} className="h-full">
               <div
-                className="card h-full flex flex-col cursor-pointer transition-transform hover:scale-[1.02]"
+                className="group relative h-full min-h-[280px] cursor-pointer overflow-hidden rounded-2xl"
                 onClick={() => setSelectedClass(item)}
               >
-                <div className="heading-text">{iconMap[item.icon]}</div>
-                <h3 className="heading-text mt-4 text-xl font-semibold">{item.name}</h3>
-                <p className="body-text mt-2">{item.description}</p>
+                {/* Background image */}
+                {item.images && item.images[0] && (
+                  <Image
+                    src={item.images[0]}
+                    alt={item.name}
+                    fill
+                    className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+                  />
+                )}
+
+                {/* Dark gradient overlay */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-black/10 transition-all duration-500 group-hover:from-black/95 group-hover:via-black/50" />
+
+                {/* Rose tint on hover */}
+                <div className="absolute inset-0 bg-rose-900/0 transition-all duration-500 group-hover:bg-rose-900/10" />
+
+                {/* Content */}
+                <div className="relative flex h-full flex-col justify-end p-6">
+                  {/* Icon badge */}
+                  <div className="mb-3 inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 text-white backdrop-blur-sm transition-all duration-300 group-hover:bg-rose-500/20 group-hover:text-rose-300">
+                    {iconMap[item.icon]}
+                  </div>
+
+                  <h3 className="text-xl font-semibold text-white">
+                    {item.name}
+                  </h3>
+
+                  <p className="mt-1.5 text-sm leading-relaxed text-white/60 line-clamp-2">
+                    {item.description}
+                  </p>
+
+                  {/* Hover arrow */}
+                  <div className="mt-3 flex items-center gap-1.5 text-sm font-medium text-rose-400 opacity-0 translate-y-2 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0">
+                    <span>Подробнее</span>
+                    <ArrowRight size={14} />
+                  </div>
+                </div>
               </div>
             </Reveal>
           ))}