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/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
-                    href={member.instagram}
-                    target="_blank"
-                    rel="noopener noreferrer"
+                  <span
                     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>
+  );
+}