feat: add class modal with descriptions, photos and remove email from contacts

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

src/app/styles/components.css

@@ -47,6 +47,26 @@
   @apply dark:text-neutral-400 dark:hover:text-white;
 }
 
+/* ===== Scrollbar ===== */
+
+.modal-content {
+  scrollbar-color: rgb(163 163 163) transparent;
+}
+
+.modal-content * {
+  scrollbar-color: rgb(163 163 163) transparent;
+}
+
+@variant dark {
+  .modal-content {
+    scrollbar-color: rgb(64 64 64) transparent;
+  }
+
+  .modal-content * {
+    scrollbar-color: rgb(64 64 64) transparent;
+  }
+}
+
 /* ===== Contact ===== */
 
 .contact-item {

src/components/sections/Classes.tsx

@@ -1,7 +1,12 @@
+"use client";
+
+import { useState } from "react";
 import { Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
+import { ClassModal } from "@/components/ui/ClassModal";
+import type { ClassItem } from "@/types";
 
 const iconMap: Record<string, React.ReactNode> = {
   flame: <Flame size={32} />,
@@ -14,6 +19,7 @@ const iconMap: Record<string, React.ReactNode> = {
 
 export function Classes() {
   const { classes } = siteContent;
+  const [selectedClass, setSelectedClass] = useState<ClassItem | null>(null);
 
   return (
     <section id="classes" className="surface-muted section-padding">
@@ -24,8 +30,11 @@ export function Classes() {
 
         <div className="mt-12 grid gap-6 sm:grid-cols-2">
           {classes.items.map((item) => (
-            <Reveal key={item.name}>
-              <div className="card">
+            <Reveal key={item.name} className="h-full">
+              <div
+                className="card h-full flex flex-col cursor-pointer transition-transform hover:scale-[1.02]"
+                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>
@@ -34,6 +43,11 @@ export function Classes() {
           ))}
         </div>
       </div>
+
+      <ClassModal
+        classItem={selectedClass}
+        onClose={() => setSelectedClass(null)}
+      />
     </section>
   );
 }

src/components/sections/Contact.tsx

@@ -1,4 +1,4 @@
-import { MapPin, Phone, Mail, Clock, Instagram } from "lucide-react";
+import { MapPin, Phone, Clock, Instagram } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { BRAND } from "@/lib/constants";
 import { SectionHeading } from "@/components/ui/SectionHeading";
@@ -28,13 +28,6 @@ export function Contact() {
               </a>
             </div>
 
-            <div className="contact-item">
-              <Mail size={20} className="contact-icon" />
-              <a href={`mailto:${contact.email}`} className="nav-link text-base">
-                {contact.email}
-              </a>
-            </div>
-
             <div className="contact-item">
               <Clock size={20} className="contact-icon" />
               <p className="body-text">{contact.workingHours}</p>

src/components/ui/ClassModal.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+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} />,
+};
+
+interface ClassModalProps {
+  classItem: ClassItem | null;
+  onClose: () => void;
+}
+
+export function ClassModal({ classItem, onClose }: ClassModalProps) {
+  useEffect(() => {
+    if (!classItem) return;
+
+    document.body.style.overflow = "hidden";
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [classItem, onClose]);
+
+  if (!classItem) return null;
+
+  return (
+    <div
+      className="modal-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-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"
+        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>
+
+        <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>
+          </div>
+
+          {classItem.detailedDescription && (
+            <div className="body-text mt-4 text-sm leading-relaxed whitespace-pre-line">
+              {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>
+  );
+}

src/data/content.ts

@@ -136,35 +136,53 @@ export const siteContent: SiteContent = {
         description:
           "Чувственная хореография с элементами pole dance в каблуках.",
         icon: "sparkles",
+        detailedDescription:
+          "Чувственный, эстетичный, сексуальный вид танца. Он богат на плавные линии, манящие прогибы и развитие вашей женственности.\n\nВы получаете:\n— уверенность в себе,\n— красивую фигуру и развитие всех групп мышц,\n— раскрытие себя с новой стороны и возможность влюбиться заново,\n— вы учитесь наслаждаться собой.",
+        images: ["/images/classes/exot.webp", "/images/classes/exot-w.webp"],
       },
       {
         name: "Pole Dance",
         description:
           "Сила, грация и пластика на пилоне. Для любого уровня подготовки.",
         icon: "flame",
+        detailedDescription:
+          "Пилон — это отличный тренажер для рук, ног, спины и пресса. Pole Dance учит красиво двигаться, улучшает растяжку, силовые показатели и выдержку.\n\nВы получите:\n— силу и грацию,\n— прекрасную растяжку,\n— правильную осанку,\n— прекрасное настроение.",
+        images: ["/images/classes/pole-dance.webp"],
       },
       {
         name: "Body Plastic",
         description:
           "Танцевальное направление, раскрывающее женственность и пластику тела.",
         icon: "wind",
+        detailedDescription:
+          "Растяжка — это искусство, которое позволяет вам не только улучшить гибкость, но и раскрыть истинную красоту вашего тела. Это больше, чем просто упражнения — это плавные движения, которые учат вас слушать своё тело и чувствовать его.\n\nЗанимаясь растяжкой, вы получите:\n— уверенность в себе,\n— красивую осанку и гибкость,\n— улучшение общего тонуса тела и расслабление мышц,\n— возможность открыть новые грани своей чувственности и женственности,\n— умение наслаждаться каждым движением и моментом.\n\nРастяжка помогает вам не только достигнуть физического совершенства, но и найти внутреннюю гармонию и любовь к себе.",
+        images: ["/images/classes/body-plastic.webp"],
       },
       {
         name: "Партерная акробатика",
         description:
           "Акробатические элементы в партере для развития силы и гибкости.",
         icon: "zap",
+        detailedDescription:
+          "Партерная акробатика — это завораживающее сочетание силы, гибкости и грации, которое раскрывает безграничные возможности вашего тела. Этот вид искусства позволяет вам воплотить в жизнь самые смелые акробатические элементы, создавая уникальные и впечатляющие комбинации на полу.\n\nЗанимаясь партерной акробатикой, вы получите:\n— невероятную физическую силу и выносливость,\n— улучшение координации и равновесия,\n— развитие всех групп мышц и повышение гибкости,\n— возможность выразить себя через мощные и динамичные движения,\n— уверенность в своих возможностях и преодоление собственных границ.\n\nПартерная акробатика — это путь к совершенству тела и духа, который дарит ощущение полёта и свободы на земле.",
+        images: ["/images/classes/parter-1.webp", "/images/classes/parter-2.webp"],
       },
       {
         name: "Мастер классы",
         description:
           "Уникальные занятия с приглашёнными топовыми тренерами.",
         icon: "star",
+        detailedDescription:
+          "Мастер-классы — это уникальная возможность погрузиться в чувственный мир танца, где каждое движение наполнено грацией и страстью. Наши мастер-классы созданы для тех, кто хочет открыть в себе новые грани женственности и научиться выражать свои эмоции через танец.\n\nПриходя на наши мастер-классы, вы получите:\n— уверенность в себе и своих возможностях,\n— возможность раскрыть свою чувственность и сексуальность,\n— умение наслаждаться каждым моментом и каждым движением,\n— опыт от профессиональных тренеров, которые помогут вам достичь новых высот.\n\nНаши мастер-классы — это не просто тренировки, это путь к самопознанию и любви к своему телу. Присоединяйтесь к нам и откройте для себя мир танца, где каждый шаг приносит удовольствие и уверенность.",
+        images: ["/images/classes/master-class-1.webp", "/images/classes/master-class-2.webp", "/images/classes/master-class-3.webp"],
       },
       {
         name: "Онлайн занятия",
         description: "Тренировки в удобное время из любой точки мира.",
         icon: "monitor",
+        detailedDescription:
+          "Если вы находитесь не в Минске, у вас всё равно есть уникальная возможность тренироваться, расти и развиваться с нами! Мы предлагаем занятия онлайн по следующим направлениям: партерная акробатика, Pole Dance, Exotic Pole Dance, Exo-tricks, полёты.\n\nМы предлагаем два способа работы: самостоятельный и VIP. В самостоятельный тариф входит доступ к видеозаписям уроков по выбранному направлению, в VIP-тарифе вы также получите доступ к чату с куратором в Telegram, который подскажет и скорректирует в случае трудностей в процессе изучения материала.",
+        images: ["/images/classes/online-classes.webp"],
       },
     ],
   },
@@ -175,7 +193,6 @@ export const siteContent: SiteContent = {
       "г. Минск, Притыцкого, 62к1",
     ],
     phone: "+375 29 389-70-01",
-    email: "info@blackheartdance.by",
     instagram: "https://instagram.com/blackheartdancehouse/",
     mapEmbedUrl:
       "https://yandex.ru/map-widget/v1/?ll=27.512%2C53.912&z=12&l=map&pt=27.5656%2C53.91583%2Cpm2rdm~27.45974%2C53.90832%2Cpm2rdm",

src/types/content.ts

@@ -2,6 +2,8 @@ export interface ClassItem {
   name: string;
   description: string;
   icon: string;
+  detailedDescription?: string;
+  images?: string[];
 }
 
 export interface TeamMember {
@@ -16,7 +18,6 @@ export interface ContactInfo {
   title: string;
   addresses: string[];
   phone: string;
-  email: string;
   instagram: string;
   mapEmbedUrl: string;
   workingHours: string;