diff --git a/src/app/styles/animations.css b/src/app/styles/animations.css index 4b138dc..fe76c6d 100644 --- a/src/app/styles/animations.css +++ b/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; + } } diff --git a/src/components/sections/Team.tsx b/src/components/sections/Team.tsx index 70bb932..3c0fa99 100644 --- a/src/components/sections/Team.tsx +++ b/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(null); return (
@@ -17,7 +23,10 @@ export function Team() {
{team.members.map((member, i) => ( -
+
+ + setSelectedMember(null)} + />
); } diff --git a/src/components/ui/TeamMemberModal.tsx b/src/components/ui/TeamMemberModal.tsx new file mode 100644 index 0000000..272b1fb --- /dev/null +++ b/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 ( +
+
e.stopPropagation()} + > + + +
+
+
+ {member.name} +
+ +

+ {member.name} +

+ + {member.instagram && ( + + + {member.instagram.split("/").filter(Boolean).pop()} + + )} +
+ + {member.description && ( +
+

+ {member.description} +

+
+ )} +
+
+
+ ); +} diff --git a/src/data/content.ts b/src/data/content.ts index 75ae5ee..d306695 100644 --- a/src/data/content.ts +++ b/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 и смогла не только осуществить свою мечту, но и стать тренером! Постоянно совершенствую навыки, посещаю интенсивы и мастер-классы, регулярно участвую в соревнованиях. Мой стиль преподавания объединяет элементы танца, стретчинга, акробатики и силовых упражнений. Стараюсь создать комфортную атмосферу, чтобы каждая ученица могла наслаждаться процессом обучения!", }, ], }, diff --git a/src/types/content.ts b/src/types/content.ts index d71f3c6..996cd17 100644 --- a/src/types/content.ts +++ b/src/types/content.ts @@ -9,6 +9,7 @@ export interface TeamMember { role: string; image: string; instagram?: string; + description?: string; } export interface ContactInfo {