feat: add team member modal with descriptions

Click on a team card to see a popup with larger photo, Instagram link,
and personal description. All 13 team members now have descriptions.

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

src/app/styles/animations.css

@@ -57,6 +57,36 @@
   transform: translateY(0);
 }
 
+/* ===== Modal ===== */
+
+@keyframes modal-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes modal-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal-overlay {
+  animation: modal-overlay-in 0.2s ease-out;
+}
+
+.modal-content {
+  animation: modal-fade-in 0.3s ease-out;
+}
+
 /* ===== Reduced Motion ===== */
 
 @media (prefers-reduced-motion: reduce) {
@@ -73,4 +103,9 @@
     transform: none !important;
     transition: none !important;
   }
+
+  .modal-overlay,
+  .modal-content {
+    animation: none !important;
+  }
 }

src/components/sections/Team.tsx

@@ -1,11 +1,17 @@
+"use client";
+
+import { useState } from "react";
 import Image from "next/image";
 import { Instagram } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
+import { TeamMemberModal } from "@/components/ui/TeamMemberModal";
+import type { TeamMember } from "@/types";
 
 export function Team() {
   const { team } = siteContent;
+  const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
 
   return (
     <section id="team" className="surface-base section-padding">
@@ -17,7 +23,10 @@ export function Team() {
         <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
           {team.members.map((member, i) => (
             <Reveal key={i}>
-              <div className="card flex h-full flex-col items-center text-center">
+              <div
+                className="card flex h-full cursor-pointer flex-col items-center text-center transition-transform hover:scale-[1.02]"
+                onClick={() => setSelectedMember(member)}
+              >
                 <div className="mx-auto h-32 w-32 overflow-hidden rounded-full">
                   <Image
                     src={member.image}
@@ -29,21 +38,30 @@ export function Team() {
                 </div>
                 <h3 className="heading-text mt-4 text-lg font-semibold">{member.name}</h3>
                 {member.instagram && (
-                  <a
+                  <span
-                    href={member.instagram}
-                    target="_blank"
-                    rel="noopener noreferrer"
                     className="nav-link mt-1 inline-flex gap-1.5 text-sm"
+                    onClick={(e) => e.stopPropagation()}
                   >
                     <Instagram size={14} className="shrink-0 mt-[3px]" />
-                    <span>{member.instagram.split("/").filter(Boolean).pop()}</span>
+                    <a
-                  </a>
+                      href={member.instagram}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {member.instagram.split("/").filter(Boolean).pop()}
+                    </a>
+                  </span>
                 )}
               </div>
             </Reveal>
           ))}
         </div>
       </div>
+
+      <TeamMemberModal
+        member={selectedMember}
+        onClose={() => setSelectedMember(null)}
+      />
     </section>
   );
 }

src/components/ui/TeamMemberModal.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+import { X, Instagram } from "lucide-react";
+import type { TeamMember } from "@/types";
+
+interface TeamMemberModalProps {
+  member: TeamMember | null;
+  onClose: () => void;
+}
+
+export function TeamMemberModal({ member, onClose }: TeamMemberModalProps) {
+  useEffect(() => {
+    if (!member) 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);
+    };
+  }, [member, onClose]);
+
+  if (!member) 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="flex flex-col md:flex-row overflow-y-auto p-6 gap-6">
+          <div className="flex flex-col items-center md:items-start shrink-0">
+            <div className="h-40 w-40 md:h-48 md:w-48 overflow-hidden rounded-full ring-2 ring-rose-500/30">
+              <Image
+                src={member.image}
+                alt={member.name}
+                width={192}
+                height={192}
+                className="h-full w-full object-cover"
+              />
+            </div>
+
+            <h3 className="heading-text mt-4 text-xl font-semibold text-center md:text-left w-full">
+              {member.name}
+            </h3>
+
+            {member.instagram && (
+              <a
+                href={member.instagram}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="nav-link mt-1 inline-flex gap-1.5 text-sm"
+              >
+                <Instagram size={14} className="shrink-0 mt-[3px]" />
+                <span>{member.instagram.split("/").filter(Boolean).pop()}</span>
+              </a>
+            )}
+          </div>
+
+          {member.description && (
+            <div className="md:border-l md:theme-border md:pl-6 flex items-center">
+              <p className="body-text text-sm leading-relaxed">
+                {member.description}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/data/content.ts

@@ -28,77 +28,103 @@ export const siteContent: SiteContent = {
         role: "Тренер",
         image: "/images/team/viktor-artyomov.webp",
         instagram: "https://instagram.com/viktor.artyomov/",
+        description:
+          "Я тренер со специальной методикой для подготовки учеников в Pole Fitness, Pole Exotic и Strip хореографии. Научу вас базовым стойкам, перекатам, а также более сложным комбинациям и трюкам. В спорте более 30 лет — спортивная гимнастика, тайский бокс, артистическая деятельность. Призёр внутренних и международных чемпионатов по пилону и фитнесу. Судья чемпионатов по пилону и танцам. Основатель студии Black Heart Dance House.",
       },
       {
         name: "Анна Тарыба",
         role: "Тренер",
         image: "/images/team/anna-taryba.webp",
         instagram: "https://instagram.com/annataryba/",
+        description:
+          "Я смогла в кратчайшие сроки достичь высочайших вершин в Exotic Pole Dance. Многократная призёрка чемпионатов в различных категориях. Основала свою команду ExoTeAM, где готовлю учениц к выходу на сцену. Люблю создавать хореографии в разных жанрах — от ярких и сложных до выразительных и плавных. Веду учеников от начального уровня до выступлений и медалей. Помогу освоить любые элементы и достичь идеальных линий!",
       },
       {
         name: "Анастасия Чалей",
         role: "Тренер",
         image: "/images/team/anastasia-chaley.webp",
         instagram: "https://instagram.com/nastya_chaley/",
+        description:
+          "Я тренер-хореограф по Exotic Pole Dance и Strip. Танцевала абсолютно разные стили — хип-хоп, джаз-фанк, вог, хаус, поппинг, крамп, дэнсхолл, тверк — поэтому мои хореографии не похожи одна на другую. Люблю как яркие и акцентные танцы, так и плавные и тягучие. Со мной вы сможете насладиться всеми сторонами своей личности. Призёрка множества чемпионатов. Приходите на занятия — танцы это радость!",
       },
       {
         name: "Ольга Демидова",
         role: "Тренер",
         image: "/images/team/olga-demidova.webp",
         instagram: "https://instagram.com/don_olga_red/",
+        description:
+          "Я начала заниматься Pole Dance 5 лет назад с нуля. За это время участвовала и становилась призёром чемпионатов по Pole Art, Pole Sport и Exotic Pole Dance. У меня крепкая трюковая база, я знаю, как повысить гибкость, и всему этому смогу научить вас на своих занятиях. Люблю свою работу и жду вас на тренировках!",
       },
       {
         name: "Галина Савицкая",
         role: "Тренер",
         image: "/images/team/galina-savitskaya.webp",
+        description:
+          "Безумно люблю растяжку и помогу полюбить её и вам! Использую упражнения ЛФК и точечные лайфхаки для удобных положений при растяжке ног, спины и плеч. Научу тянуться в паре и чувствовать безопасное расслабление и напряжение. 10 лет занимаюсь растяжкой в условиях пилонного спорта и танца.",
       },
       {
         name: "Ирина Третьюкович",
         role: "Тренер",
         image: "/images/team/irina-tretyukovich.webp",
         instagram: "https://instagram.com/irkatretya/",
+        description:
+          "Я тренер по Exotic Pole Dance. За короткий период смогла выйти на профессиональный уровень и поучаствовать во многих чемпионатах, в том числе международных — конечно же, не без призовых мест! Моя сильная сторона — трюковые комбинации на пилоне и их использование в танцевальных связках. Если вам нужны сильные руки, красивое подтянутое тело, музыкальность и пластичность — буду ждать на своих тренировках!",
       },
       {
-        name: "Надежда Сух",
+        name: "Надежда Сыч",
         role: "Тренер",
         image: "/images/team/nadezhda-sukh.webp",
         instagram: "https://instagram.com/nadja.dance/",
+        description:
+          "Я обучаю партерной акробатике, балансам, трюковому пилону и сексуальным танцам. Занятия у меня — это волшебное путешествие, где вы научитесь основам акробатических элементов, разовьёте навыки в балансах и стойках, а флаги и трюковые комбинации с пилоном не будут казаться чем-то недостижимым. Вы раскроете свою индивидуальность через чувственные танцы, наполненные грацией и пластикой. Присоединяйтесь и окунитесь в мир, где танец становится искусством!",
       },
       {
         name: "Ирина Карпусь",
         role: "Тренер",
         image: "/images/team/irina-karpus.webp",
         instagram: "https://instagram.com/karpus_iri/",
+        description:
+          "Я пришла в Exotic Pole Dance относительно недавно и полюбила его навсегда. В танце люблю и стремлюсь к красивым линиям и элегантности, но никогда не забываю про силовую часть и трюки. На занятиях стараюсь найти к каждому индивидуальный подход, чтобы тренировка была комфортной и продуктивной. Помогу раскрыть ваши сильные стороны и полюбить танец. Буду ждать вас на занятиях!",
       },
       {
         name: "Юлия Книга",
         role: "Тренер",
         image: "/images/team/yuliya-kniga.webp",
         instagram: "https://instagram.com/knigynzel/",
+        description:
+          "Я тренер по Exotic Pole Dance. В прошлом была танцовщицей эротического жанра, откуда и пошла моя любовь к танцам. Я точно знаю все техники раскрепощения, научу тебя быть плавной, музыкальной и сексуальной. Мои хореографии могут быть как быстрыми и динамичными с трюковыми элементами, так и медленными, томными и манящими. Помогу раскрыть тебя как танцора со всех сторон!",
       },
       {
-        name: "Елена Чигилейчик",
+        name: "Алена Чигилейчик",
         role: "Тренер",
         image: "/images/team/elena-chigileychik.webp",
         instagram: "https://instagram.com/alenachygi/",
+        description:
+          "За несколько лет я смогла самостоятельно обучиться Exotic Pole Dance и занять 3 место в категории профи. Имею отличную спортивную базу. Танцую в основном flow, но всегда ищу новое и меняю стили хореографий. Обожаю эмоциональную подачу и точность в движениях, ощущение каждого сантиметра тела и то, как музыка позволяет раскрываться в танце. Научу чувствовать себя с музыкой одним целым!",
       },
       {
         name: "Елена Тарасевич",
         role: "Тренер",
         image: "/images/team/elena-tarasevic.webp",
         instagram: "https://instagram.com/cerceia/",
+        description:
+          "Я воздушный гимнаст, практик акройоги и тренер по стретчингу и Airyoga. В спорте и танцах более 15 лет, стаж тренера — около 9 лет. Многократный призёр соревнований по воздушно-спортивному эквилибру России, стран СНГ и международных фестивалей. Прошла обучение у чемпионки мира по воздушной гимнастике, цирковых акробатов, балерин и художественных гимнастов. За плечами более 30 семинаров по функциональной анатомии, биомеханике и йогатерапии.",
       },
       {
         name: "Ольга Грабовец",
         role: "Тренер",
         image: "/images/team/olga-grabovets.webp",
         instagram: "https://instagram.com/lo_woolf/",
+        description:
+          "Я амбассадор красивых линий и натянутых стоп! За 1,5 года выросла от новичка до тренера по Exotic Pole Dance. Многократный призёр чемпионатов. Для меня в танце очень важна музыкальность, и я стараюсь это почерпнуть у разных педагогов — не только наших, но и зарубежных.",
       },
       {
         name: "Кристина Войтович",
         role: "Тренер",
         image: "/images/team/kristina-voytovich.webp",
         instagram: "https://instagram.com/chris_voytovich/",
+        description:
+          "Я всегда мечтала заниматься Exotic Pole Dance и смогла не только осуществить свою мечту, но и стать тренером! Постоянно совершенствую навыки, посещаю интенсивы и мастер-классы, регулярно участвую в соревнованиях. Мой стиль преподавания объединяет элементы танца, стретчинга, акробатики и силовых упражнений. Стараюсь создать комфортную атмосферу, чтобы каждая ученица могла наслаждаться процессом обучения!",
       },
     ],
   },

src/types/content.ts

@@ -9,6 +9,7 @@ export interface TeamMember {
   role: string;
   image: string;
   instagram?: string;
+  description?: string;
 }
 
 export interface ContactInfo {