feat: structured victories/education with photos, links, and editorial profile layout

- Add VictoryItem type (place, category, competition, location, date, image, link)
- Add RichListItem type for education with image/link support
- Backward-compatible DB parsing for old string[] formats
- Admin forms with structured fields and image upload per item
- Victory/education cards with photo overlay and lightbox
- Remove max-width constraint from trainer profile for full-width layout

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

src/app/admin/_components/FormField.tsx

@@ -1,5 +1,6 @@
 import { useRef, useEffect, useState } from "react";
-import { Plus, X } from "lucide-react";
+import { Plus, X, Upload, Loader2, Link, ImageIcon } from "lucide-react";
+import type { RichListItem, VictoryItem } from "@/types/content";
 
 interface InputFieldProps {
   label: string;
@@ -104,12 +105,10 @@ export function SelectField({
   const filtered = search
     ? options.filter((o) => {
         const q = search.toLowerCase();
-        // Match any word that starts with the search query
         return o.label.toLowerCase().split(/\s+/).some((word) => word.startsWith(q));
       })
     : options;
 
-  // Close on outside click
   useEffect(() => {
     if (!open) return;
     function handle(e: MouseEvent) {
@@ -188,7 +187,6 @@ interface TimeRangeFieldProps {
 }
 
 export function TimeRangeField({ label, value, onChange, onBlur }: TimeRangeFieldProps) {
-  // Parse "HH:MM–HH:MM" into start and end
   const parts = value.split("–");
   const start = parts[0]?.trim() || "";
   const end = parts[1]?.trim() || "";
@@ -204,7 +202,6 @@ export function TimeRangeField({ label, value, onChange, onBlur }: TimeRangeFiel
   }
 
   function handleStartChange(newStart: string) {
-    // Reset end if start >= end
     if (newStart && end && newStart >= end) {
       update(newStart, "");
     } else {
@@ -213,7 +210,6 @@ export function TimeRangeField({ label, value, onChange, onBlur }: TimeRangeFiel
   }
 
   function handleEndChange(newEnd: string) {
-    // Ignore if end <= start
     if (start && newEnd && newEnd <= start) return;
     update(start, newEnd);
   }
@@ -339,3 +335,265 @@ export function ListField({ label, items, onChange, placeholder }: ListFieldProp
     </div>
   );
 }
+
+interface VictoryListFieldProps {
+  label: string;
+  items: RichListItem[];
+  onChange: (items: RichListItem[]) => void;
+  placeholder?: string;
+}
+
+export function VictoryListField({ label, items, onChange, placeholder }: VictoryListFieldProps) {
+  const [draft, setDraft] = useState("");
+  const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
+
+  function add() {
+    const val = draft.trim();
+    if (!val) return;
+    onChange([...items, { text: val }]);
+    setDraft("");
+  }
+
+  function remove(index: number) {
+    onChange(items.filter((_, i) => i !== index));
+  }
+
+  function updateText(index: number, text: string) {
+    onChange(items.map((item, i) => (i === index ? { ...item, text } : item)));
+  }
+
+  function updateLink(index: number, link: string) {
+    onChange(items.map((item, i) => (i === index ? { ...item, link: link || undefined } : item)));
+  }
+
+  function removeImage(index: number) {
+    onChange(items.map((item, i) => (i === index ? { ...item, image: undefined } : item)));
+  }
+
+  async function handleUpload(index: number, e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploadingIndex(index);
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("folder", "team");
+    try {
+      const res = await fetch("/api/admin/upload", { method: "POST", body: formData });
+      const result = await res.json();
+      if (result.path) {
+        onChange(items.map((item, i) => (i === index ? { ...item, image: result.path } : item)));
+      }
+    } catch { /* upload failed */ } finally {
+      setUploadingIndex(null);
+    }
+  }
+
+  return (
+    <div>
+      <label className="block text-sm text-neutral-400 mb-1.5">{label}</label>
+      <div className="space-y-3">
+        {items.map((item, i) => (
+          <div key={i} className="rounded-lg border border-white/10 bg-neutral-800/50 p-3 space-y-2">
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={item.text}
+                onChange={(e) => updateText(i, e.target.value)}
+                className="flex-1 rounded-lg border border-white/10 bg-neutral-800 px-4 py-2 text-sm text-white outline-none focus:border-gold transition-colors"
+              />
+              <button
+                type="button"
+                onClick={() => remove(i)}
+                className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
+              >
+                <X size={14} />
+              </button>
+            </div>
+            <div className="flex items-center gap-2 pl-1">
+              {item.image ? (
+                <div className="flex items-center gap-1.5 rounded-md bg-neutral-700/50 px-2 py-1 text-xs text-neutral-300">
+                  <ImageIcon size={12} className="text-gold" />
+                  <span className="max-w-[120px] truncate">{item.image.split("/").pop()}</span>
+                  <button type="button" onClick={() => removeImage(i)} className="text-neutral-500 hover:text-red-400">
+                    <X size={10} />
+                  </button>
+                </div>
+              ) : (
+                <label className="flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs text-neutral-500 hover:text-neutral-300 transition-colors">
+                  {uploadingIndex === i ? <Loader2 size={12} className="animate-spin" /> : <Upload size={12} />}
+                  {uploadingIndex === i ? "Загрузка..." : "Фото"}
+                  <input type="file" accept="image/*" onChange={(e) => handleUpload(i, e)} className="hidden" />
+                </label>
+              )}
+              <div className="flex items-center gap-1.5">
+                <Link size={12} className="text-neutral-500" />
+                <input
+                  type="url"
+                  value={item.link || ""}
+                  onChange={(e) => updateLink(i, e.target.value)}
+                  placeholder="Ссылка..."
+                  className="w-48 rounded-md border border-white/5 bg-neutral-800 px-2 py-1 text-xs text-white placeholder-neutral-600 outline-none focus:border-gold/50 transition-colors"
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }}
+            placeholder={placeholder || "Добавить..."}
+            className="flex-1 rounded-lg border border-dashed border-white/10 bg-neutral-800/50 px-4 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold/50 transition-colors"
+          />
+          <button
+            type="button"
+            onClick={add}
+            disabled={!draft.trim()}
+            className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-gold transition-colors disabled:opacity-30"
+          >
+            <Plus size={14} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface VictoryItemListFieldProps {
+  label: string;
+  items: VictoryItem[];
+  onChange: (items: VictoryItem[]) => void;
+}
+
+export function VictoryItemListField({ label, items, onChange }: VictoryItemListFieldProps) {
+  const [uploadingIndex, setUploadingIndex] = useState<number | null>(null);
+
+  function add() {
+    onChange([...items, { place: "", category: "", competition: "" }]);
+  }
+
+  function remove(index: number) {
+    onChange(items.filter((_, i) => i !== index));
+  }
+
+  function update(index: number, field: keyof VictoryItem, value: string) {
+    onChange(items.map((item, i) => (i === index ? { ...item, [field]: value || undefined } : item)));
+  }
+
+  function removeImage(index: number) {
+    onChange(items.map((item, i) => (i === index ? { ...item, image: undefined } : item)));
+  }
+
+  async function handleUpload(index: number, e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploadingIndex(index);
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("folder", "team");
+    try {
+      const res = await fetch("/api/admin/upload", { method: "POST", body: formData });
+      const result = await res.json();
+      if (result.path) {
+        onChange(items.map((item, i) => (i === index ? { ...item, image: result.path } : item)));
+      }
+    } catch { /* upload failed */ } finally {
+      setUploadingIndex(null);
+    }
+  }
+
+  return (
+    <div>
+      <label className="block text-sm text-neutral-400 mb-1.5">{label}</label>
+      <div className="space-y-3">
+        {items.map((item, i) => (
+          <div key={i} className="rounded-lg border border-white/10 bg-neutral-800/50 p-3 space-y-2">
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={item.place || ""}
+                onChange={(e) => update(i, "place", e.target.value)}
+                placeholder="Место (🥇, 1 место...)"
+                className="w-32 rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+              />
+              <input
+                type="text"
+                value={item.category || ""}
+                onChange={(e) => update(i, "category", e.target.value)}
+                placeholder="Категория (Exotic Semi-Pro...)"
+                className="flex-1 rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+              />
+              <button
+                type="button"
+                onClick={() => remove(i)}
+                className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
+              >
+                <X size={14} />
+              </button>
+            </div>
+            <input
+              type="text"
+              value={item.competition || ""}
+              onChange={(e) => update(i, "competition", e.target.value)}
+              placeholder="Чемпионат (REVOLUTION 2025...)"
+              className="w-full rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+            />
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={item.location || ""}
+                onChange={(e) => update(i, "location", e.target.value)}
+                placeholder="Город, страна"
+                className="flex-1 rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+              />
+              <input
+                type="text"
+                value={item.date || ""}
+                onChange={(e) => update(i, "date", e.target.value)}
+                placeholder="Дата (22-23.02.2025)"
+                className="w-40 rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+              />
+            </div>
+            <div className="flex items-center gap-2 pl-1">
+              {item.image ? (
+                <div className="flex items-center gap-1.5 rounded-md bg-neutral-700/50 px-2 py-1 text-xs text-neutral-300">
+                  <ImageIcon size={12} className="text-gold" />
+                  <span className="max-w-[120px] truncate">{item.image.split("/").pop()}</span>
+                  <button type="button" onClick={() => removeImage(i)} className="text-neutral-500 hover:text-red-400">
+                    <X size={10} />
+                  </button>
+                </div>
+              ) : (
+                <label className="flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs text-neutral-500 hover:text-neutral-300 transition-colors">
+                  {uploadingIndex === i ? <Loader2 size={12} className="animate-spin" /> : <Upload size={12} />}
+                  {uploadingIndex === i ? "Загрузка..." : "Фото"}
+                  <input type="file" accept="image/*" onChange={(e) => handleUpload(i, e)} className="hidden" />
+                </label>
+              )}
+              <div className="flex items-center gap-1.5">
+                <Link size={12} className="text-neutral-500" />
+                <input
+                  type="url"
+                  value={item.link || ""}
+                  onChange={(e) => update(i, "link", e.target.value)}
+                  placeholder="Ссылка..."
+                  className="w-48 rounded-md border border-white/5 bg-neutral-800 px-2 py-1 text-xs text-white placeholder-neutral-600 outline-none focus:border-gold/50 transition-colors"
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={add}
+          className="flex items-center gap-2 rounded-lg border border-dashed border-white/10 bg-neutral-800/50 px-4 py-2 text-sm text-neutral-500 hover:text-gold hover:border-gold/30 transition-colors"
+        >
+          <Plus size={14} />
+          Добавить достижение
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/admin/team/[id]/page.tsx

@@ -4,7 +4,8 @@ import { useState, useEffect } from "react";
 import { useRouter, useParams } from "next/navigation";
 import Image from "next/image";
 import { Save, Loader2, Check, ArrowLeft, Upload } from "lucide-react";
-import { InputField, TextareaField, ListField } from "../../_components/FormField";
+import { InputField, TextareaField, ListField, VictoryListField, VictoryItemListField } from "../../_components/FormField";
+import type { RichListItem, VictoryItem } from "@/types/content";
 
 interface MemberForm {
   name: string;
@@ -13,8 +14,8 @@ interface MemberForm {
   instagram: string;
   description: string;
   experience: string[];
-  victories: string[];
+  victories: VictoryItem[];
-  education: string[];
+  education: RichListItem[];
 }
 
 export default function TeamMemberEditorPage() {
@@ -211,13 +212,12 @@ export default function TeamMemberEditorPage() {
                 onChange={(items) => setData({ ...data, experience: items })}
                 placeholder="Например: 10 лет в танцах"
               />
-              <ListField
+              <VictoryItemListField
                 label="Достижения"
                 items={data.victories}
                 onChange={(items) => setData({ ...data, victories: items })}
-                placeholder="Например: 1 место — чемпионат..."
               />
-              <ListField
+              <VictoryListField
                 label="Образование"
                 items={data.education}
                 onChange={(items) => setData({ ...data, education: items })}

src/app/api/admin/team/route.ts

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getTeamMembers, createTeamMember } from "@/lib/db";
 import { revalidatePath } from "next/cache";
+import type { RichListItem, VictoryItem } from "@/types/content";
 
 export async function GET() {
   const members = getTeamMembers();
@@ -15,8 +16,8 @@ export async function POST(request: NextRequest) {
     instagram?: string;
     description?: string;
     experience?: string[];
-    victories?: string[];
+    victories?: VictoryItem[];
-    education?: string[];
+    education?: RichListItem[];
   };
 
   if (!data.name || !data.role || !data.image) {

src/components/sections/Team.tsx

@@ -36,33 +36,35 @@ export function Team({ data: team }: TeamProps) {
         <Reveal>
           <SectionHeading centered>{team.title}</SectionHeading>
         </Reveal>
+      </div>
 
-        <Reveal>
+      <Reveal>
-          <div className="mt-10">
+        <div className="mt-10 px-4 sm:px-6">
-            {!showProfile ? (
+          {!showProfile ? (
-              <>
+            <>
-                <TeamCarousel
+              <TeamCarousel
-                  members={team.members}
+                members={team.members}
-                  activeIndex={activeIndex}
+                activeIndex={activeIndex}
-                  onActiveChange={setActiveIndex}
+                onActiveChange={setActiveIndex}
-                />
+              />
 
+              <div className="mx-auto max-w-6xl">
                 <TeamMemberInfo
                   members={team.members}
                   activeIndex={activeIndex}
                   onSelect={setActiveIndex}
                   onOpenBio={() => setShowProfile(true)}
                 />
-              </>
+              </div>
-            ) : (
+            </>
-              <TeamProfile
+          ) : (
-                member={team.members[activeIndex]}
+            <TeamProfile
-                onBack={() => setShowProfile(false)}
+              member={team.members[activeIndex]}
-              />
+              onBack={() => setShowProfile(false)}
-            )}
+            />
-          </div>
+          )}
-        </Reveal>
+        </div>
-      </div>
+      </Reveal>
     </section>
   );
 }

src/components/sections/team/TeamProfile.tsx

@@ -1,29 +1,26 @@
+import { useState } from "react";
 import Image from "next/image";
-import { ArrowLeft, Instagram, Trophy, Award, GraduationCap } from "lucide-react";
+import { ArrowLeft, Instagram, Trophy, GraduationCap, ExternalLink, X, MapPin, Calendar } from "lucide-react";
-import type { TeamMember } from "@/types/content";
+import type { TeamMember, RichListItem, VictoryItem } from "@/types/content";
 
 interface TeamProfileProps {
   member: TeamMember;
   onBack: () => void;
 }
 
-const BIO_SECTIONS = [
-  { key: "experience" as const, label: "Опыт", icon: Trophy },
-  { key: "victories" as const, label: "Достижения", icon: Award },
-  { key: "education" as const, label: "Образование", icon: GraduationCap },
-];
-
 export function TeamProfile({ member, onBack }: TeamProfileProps) {
-  const hasBio = BIO_SECTIONS.some(
+  const [lightbox, setLightbox] = useState<string | null>(null);
-    (s) => member[s.key] && member[s.key]!.length > 0
+  const hasVictories = member.victories && member.victories.length > 0;
-  );
+  const hasExperience = member.experience && member.experience.length > 0;
+  const hasEducation = member.education && member.education.length > 0;
+  const hasBio = hasVictories || hasExperience || hasEducation;
 
   return (
     <div
-      className="mx-auto max-w-3xl"
+      className="w-full"
       style={{ animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)" }}
     >
-      {/* Back button */}
+      {/* Back button — above card */}
       <button
         onClick={onBack}
         className="mb-6 inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light cursor-pointer"
@@ -32,78 +29,299 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
         Назад
       </button>
 
-      {/* Main: photo + info */}
+      {/* Two-column layout */}
-      <div className="flex flex-col items-center gap-8 sm:flex-row sm:items-start">
+      <div className="flex flex-col gap-8 sm:flex-row sm:items-start">
-        {/* Photo */}
+        {/* Photo with name overlay */}
-        <div className="relative w-full max-w-[260px] shrink-0 aspect-[3/4] overflow-hidden rounded-2xl border border-white/[0.06]">
+        <div className="relative shrink-0 w-full sm:w-[380px] aspect-[3/4] overflow-hidden rounded-xl border border-white/[0.06]">
           <Image
             src={member.image}
             alt={member.name}
             fill
-            sizes="260px"
+            sizes="(min-width: 640px) 380px, 100vw"
             className="object-cover"
           />
+          {/* Gradient overlay for text readability */}
+          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-transparent" />
+
+          {/* Name + role + instagram overlay */}
+          <div className="absolute top-0 left-0 right-0 p-6">
+            <h3
+              className="text-3xl sm:text-4xl font-bold text-white leading-tight"
+              style={{ textShadow: "0 2px 20px rgba(0,0,0,0.5)" }}
+            >
+              {member.name}
+            </h3>
+            <p
+              className="mt-1 text-sm font-medium text-gold-light"
+              style={{ textShadow: "0 1px 10px rgba(0,0,0,0.5)" }}
+            >
+              {member.role}
+            </p>
+            {member.instagram && (
+              <a
+                href={member.instagram}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-3 inline-flex items-center gap-1.5 text-sm text-white/70 transition-colors hover:text-gold-light"
+                style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}
+              >
+                <Instagram size={14} />
+                {member.instagram.split("/").filter(Boolean).pop()}
+              </a>
+            )}
+          </div>
         </div>
 
-        {/* Info */}
+        {/* Right column — bio content */}
-        <div className="text-center sm:text-left">
+        <div className="flex-1 min-w-0">
-          <h3 className="text-2xl font-bold text-white">{member.name}</h3>
+          {/* Victories as structured card grid */}
-          <p className="mt-1 text-sm font-medium text-gold-light">
+          {hasVictories && (
-            {member.role}
+            <div>
-          </p>
+              <span className="inline-block rounded-full border border-white/15 px-4 py-1.5 text-sm font-medium text-white">
-
+                Достижения:
-          {member.instagram && (
+              </span>
-            <a
+              <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
-              href={member.instagram}
+                {member.victories!.map((item, i) => (
-              target="_blank"
+                  <VictoryCard key={i} victory={item} onImageClick={setLightbox} />
-              rel="noopener noreferrer"
+                ))}
-              className="mt-3 inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light"
+              </div>
-            >
+            </div>
-              <Instagram size={14} />
-              {member.instagram.split("/").filter(Boolean).pop()}
-            </a>
           )}
 
+          {/* Education as card grid */}
+          {hasEducation && (
+            <div className={hasVictories ? "mt-8" : ""}>
+              <span className="inline-block rounded-full border border-white/15 px-4 py-1.5 text-sm font-medium text-white">
+                <GraduationCap size={14} className="inline -mt-0.5 mr-1.5" />
+                Образование:
+              </span>
+              <div className="mt-4 grid grid-cols-2 lg:grid-cols-3 gap-3">
+                {member.education!.map((item, i) => (
+                  <RichCard key={i} item={item} onImageClick={setLightbox} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Experience as text list */}
+          {hasExperience && (
+            <div className={hasVictories || hasEducation ? "mt-8" : ""}>
+              <div className="flex items-center gap-2 text-gold mb-3">
+                <Trophy size={15} />
+                <span className="text-xs font-semibold uppercase tracking-wider">
+                  Опыт
+                </span>
+              </div>
+              <ul className="space-y-2">
+                {member.experience!.map((item, i) => (
+                  <li
+                    key={i}
+                    className="flex items-start gap-2 text-sm text-white/60"
+                  >
+                    <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-gold/50" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Description */}
           {member.description && (
-            <p className="mt-4 text-sm leading-relaxed text-white/55">
+            <p className={`text-sm leading-relaxed text-white/50 ${hasBio ? "mt-8 border-t border-white/[0.06] pt-6" : ""}`}>
               {member.description}
             </p>
           )}
         </div>
       </div>
 
-      {/* Bio sections */}
+      {/* Image lightbox */}
-      {hasBio && (
+      {lightbox && (
-        <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
+        <div
-          {BIO_SECTIONS.map((section) => {
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
-            const items = member[section.key];
+          onClick={() => setLightbox(null)}
-            if (!items || items.length === 0) return null;
+        >
-            const Icon = section.icon;
+          <button
-
+            onClick={() => setLightbox(null)}
-            return (
+            className="absolute top-4 right-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors"
-              <div key={section.key}>
+          >
-                <div className="flex items-center gap-2 text-gold">
+            <X size={20} />
-                  <Icon size={16} />
+          </button>
-                  <span className="text-xs font-semibold uppercase tracking-wider">
+          <div className="relative max-h-[85vh] max-w-[90vw]">
-                    {section.label}
+            <Image
-                  </span>
+              src={lightbox}
-                </div>
+              alt="Достижение"
-                <ul className="mt-3 space-y-2">
+              width={900}
-                  {items.map((item, i) => (
+              height={900}
-                    <li
+              className="rounded-lg object-contain max-h-[85vh]"
-                      key={i}
+            />
-                      className="flex items-start gap-2 text-sm text-white/60"
+          </div>
-                    >
-                      <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-gold/50" />
-                      {item}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            );
-          })}
         </div>
       )}
     </div>
   );
 }
+
+function VictoryCard({ victory, onImageClick }: { victory: VictoryItem; onImageClick: (src: string) => void }) {
+  const hasImage = !!victory.image;
+  const hasLink = !!victory.link;
+
+  if (hasImage) {
+    return (
+      <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+        <button
+          onClick={() => onImageClick(victory.image!)}
+          className="relative w-full aspect-[3/4] overflow-hidden cursor-pointer"
+        >
+          <Image
+            src={victory.image!}
+            alt={victory.competition}
+            fill
+            sizes="(min-width: 640px) 200px, 45vw"
+            className="object-cover transition-transform group-hover:scale-105"
+          />
+          {/* Gradient overlay at bottom */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+          {/* Text overlay at bottom */}
+          <div className="absolute bottom-0 left-0 right-0 p-3 space-y-0.5">
+            {victory.place && (
+              <p className="text-lg font-bold text-gold" style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}>{victory.place}</p>
+            )}
+            {victory.category && (
+              <p className="text-xs font-medium uppercase tracking-wider text-white/90" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{victory.category}</p>
+            )}
+            <p className="text-sm text-white/70" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{victory.competition}</p>
+            {(victory.location || victory.date) && (
+              <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-0.5">
+                {victory.location && (
+                  <span className="inline-flex items-center gap-1 text-xs text-white/50">
+                    <MapPin size={10} />
+                    {victory.location}
+                  </span>
+                )}
+                {victory.date && (
+                  <span className="inline-flex items-center gap-1 text-xs text-white/50">
+                    <Calendar size={10} />
+                    {victory.date}
+                  </span>
+                )}
+              </div>
+            )}
+            {hasLink && (
+              <a
+                href={victory.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                className="mt-1 inline-flex items-center gap-1 text-xs text-gold/80 hover:text-gold transition-colors"
+              >
+                <ExternalLink size={11} />
+                Подробнее
+              </a>
+            )}
+          </div>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+      <div className="p-3 space-y-1">
+        {victory.place && (
+          <p className="text-lg font-bold text-gold">{victory.place}</p>
+        )}
+        {victory.category && (
+          <p className="text-xs font-medium uppercase tracking-wider text-white/80">{victory.category}</p>
+        )}
+        <p className="text-sm text-white/50">{victory.competition}</p>
+        {(victory.location || victory.date) && (
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-0.5">
+            {victory.location && (
+              <span className="inline-flex items-center gap-1 text-xs text-white/30">
+                <MapPin size={10} />
+                {victory.location}
+              </span>
+            )}
+            {victory.date && (
+              <span className="inline-flex items-center gap-1 text-xs text-white/30">
+                <Calendar size={10} />
+                {victory.date}
+              </span>
+            )}
+          </div>
+        )}
+        {hasLink && (
+          <a
+            href={victory.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-1 inline-flex items-center gap-1 text-xs text-gold/70 hover:text-gold transition-colors"
+          >
+            <ExternalLink size={11} />
+            Подробнее
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function RichCard({ item, onImageClick }: { item: RichListItem; onImageClick: (src: string) => void }) {
+  const hasImage = !!item.image;
+  const hasLink = !!item.link;
+
+  if (hasImage) {
+    return (
+      <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+        <button
+          onClick={() => onImageClick(item.image!)}
+          className="relative w-full aspect-[3/4] overflow-hidden cursor-pointer"
+        >
+          <Image
+            src={item.image!}
+            alt={item.text}
+            fill
+            sizes="(min-width: 1024px) 200px, (min-width: 640px) 160px, 45vw"
+            className="object-cover transition-transform group-hover:scale-105"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+          <div className="absolute bottom-0 left-0 right-0 p-3">
+            <p className="text-sm text-white/80" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{item.text}</p>
+            {hasLink && (
+              <a
+                href={item.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                className="mt-1 inline-flex items-center gap-1 text-xs text-gold/80 hover:text-gold transition-colors"
+              >
+                <ExternalLink size={11} />
+                Подробнее
+              </a>
+            )}
+          </div>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="group rounded-lg border border-white/[0.06] overflow-hidden">
+      <div className="p-3">
+        <p className="text-sm text-white/60">{item.text}</p>
+        {hasLink && (
+          <a
+            href={item.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-1.5 inline-flex items-center gap-1 text-xs text-gold/70 hover:text-gold transition-colors"
+          >
+            <ExternalLink size={11} />
+            Подробнее
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}

src/lib/db.ts

@@ -1,6 +1,6 @@
 import Database from "better-sqlite3";
 import path from "path";
-import type { SiteContent, TeamMember } from "@/types/content";
+import type { SiteContent, TeamMember, RichListItem, VictoryItem } from "@/types/content";
 
 const DB_PATH =
   process.env.DATABASE_PATH ||
@@ -88,6 +88,32 @@ function parseJsonArray(val: string | null): string[] | undefined {
   try { const arr = JSON.parse(val); return Array.isArray(arr) && arr.length > 0 ? arr : undefined; } catch { return undefined; }
 }
 
+function parseRichList(val: string | null): RichListItem[] | undefined {
+  if (!val) return undefined;
+  try {
+    const arr = JSON.parse(val);
+    if (!Array.isArray(arr) || arr.length === 0) return undefined;
+    // Handle both old string[] and new RichListItem[] formats
+    return arr.map((item: string | RichListItem) =>
+      typeof item === "string" ? { text: item } : item
+    );
+  } catch { return undefined; }
+}
+
+function parseVictories(val: string | null): VictoryItem[] | undefined {
+  if (!val) return undefined;
+  try {
+    const arr = JSON.parse(val);
+    if (!Array.isArray(arr) || arr.length === 0) return undefined;
+    // Handle old string[], old RichListItem[], and new VictoryItem[] formats
+    return arr.map((item: string | Record<string, unknown>) => {
+      if (typeof item === "string") return { place: "", category: "", competition: item };
+      if ("text" in item && !("competition" in item)) return { place: "", category: "", competition: item.text as string, image: item.image as string | undefined, link: item.link as string | undefined };
+      return item as unknown as VictoryItem;
+    });
+  } catch { return undefined; }
+}
+
 export function getTeamMembers(): (TeamMember & { id: number })[] {
   const db = getDb();
   const rows = db
@@ -101,8 +127,8 @@ export function getTeamMembers(): (TeamMember & { id: number })[] {
     instagram: r.instagram ?? undefined,
     description: r.description ?? undefined,
     experience: parseJsonArray(r.experience),
-    victories: parseJsonArray(r.victories),
+    victories: parseVictories(r.victories),
-    education: parseJsonArray(r.education),
+    education: parseRichList(r.education),
   }));
 }
 
@@ -122,8 +148,8 @@ export function getTeamMember(
     instagram: r.instagram ?? undefined,
     description: r.description ?? undefined,
     experience: parseJsonArray(r.experience),
-    victories: parseJsonArray(r.victories),
+    victories: parseVictories(r.victories),
-    education: parseJsonArray(r.education),
+    education: parseRichList(r.education),
   };
 }
 

src/types/content.ts

@@ -7,6 +7,22 @@ export interface ClassItem {
   color?: string;
 }
 
+export interface RichListItem {
+  text: string;
+  image?: string;
+  link?: string;
+}
+
+export interface VictoryItem {
+  place: string;
+  category: string;
+  competition: string;
+  location?: string;
+  date?: string;
+  image?: string;
+  link?: string;
+}
+
 export interface TeamMember {
   name: string;
   role: string;
@@ -14,8 +30,8 @@ export interface TeamMember {
   instagram?: string;
   description?: string;
   experience?: string[];
-  victories?: string[];
+  victories?: VictoryItem[];
-  education?: string[];
+  education?: RichListItem[];
 }
 
 export interface FAQItem {