feat(frontend): redesign race dashboard

Reviewed-on: #25

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-frontend",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.4.0",
+      "version": "0.5.0",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "calendar-run-frontend",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/DatePickerField.tsx

@@ -0,0 +1,197 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { buildMonthCells, toYmd, WEEKDAY_LABELS_SHORT_RU } from "../lib";
+
+const MONTH_NAMES_RU = [
+  "Январь",
+  "Февраль",
+  "Март",
+  "Апрель",
+  "Май",
+  "Июнь",
+  "Июль",
+  "Август",
+  "Сентябрь",
+  "Октябрь",
+  "Ноябрь",
+  "Декабрь",
+];
+
+interface DatePickerFieldProps {
+  value: string;
+  name: string;
+  required?: boolean;
+  onChange: (value: string) => void;
+}
+
+function parseYmd(value: string): { year: number; monthIndex: number; day: number } | null {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return null;
+  }
+
+  const year = Number(value.slice(0, 4));
+  const monthIndex = Number(value.slice(5, 7)) - 1;
+  const day = Number(value.slice(8, 10));
+
+  if (!Number.isInteger(year) || !Number.isInteger(monthIndex) || !Number.isInteger(day)) {
+    return null;
+  }
+  if (monthIndex < 0 || monthIndex > 11) {
+    return null;
+  }
+
+  return { year, monthIndex, day };
+}
+
+function getInitialVisibleMonth(value: string): { year: number; monthIndex: number } {
+  const parsed = parseYmd(value);
+  if (parsed) {
+    return { year: parsed.year, monthIndex: parsed.monthIndex };
+  }
+
+  const now = new Date();
+  return { year: now.getFullYear(), monthIndex: now.getMonth() };
+}
+
+export function DatePickerField(props: DatePickerFieldProps): JSX.Element {
+  const { value, name, required, onChange } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [visibleMonth, setVisibleMonth] = useState(() => getInitialVisibleMonth(value));
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const parsed = parseYmd(value);
+    if (!parsed) {
+      return;
+    }
+    setVisibleMonth({ year: parsed.year, monthIndex: parsed.monthIndex });
+  }, [value]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    function handlePointerDown(event: MouseEvent): void {
+      if (rootRef.current?.contains(event.target as Node)) {
+        return;
+      }
+      setIsOpen(false);
+    }
+
+    function handleKeyDown(event: KeyboardEvent): void {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const selected = parseYmd(value);
+  const todayYmd = toYmd(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+  const cells = useMemo(
+    () => buildMonthCells(visibleMonth.year, visibleMonth.monthIndex),
+    [visibleMonth],
+  );
+  const monthTitle = `${MONTH_NAMES_RU[visibleMonth.monthIndex]} ${visibleMonth.year}`;
+
+  function shiftMonth(delta: number): void {
+    setVisibleMonth((prev) => {
+      const next = new Date(Date.UTC(prev.year, prev.monthIndex + delta, 1));
+      return { year: next.getUTCFullYear(), monthIndex: next.getUTCMonth() };
+    });
+  }
+
+  return (
+    <div className="date-picker" ref={rootRef}>
+      <div className="date-picker__control">
+        <input
+          className="race-form__input date-picker__input"
+          type="text"
+          inputMode="numeric"
+          name={name}
+          value={value}
+          onChange={(event) => {
+            onChange(event.target.value);
+          }}
+          onFocus={() => setIsOpen(true)}
+          placeholder="2026-05-03"
+          autoComplete="off"
+          required={required}
+        />
+        <button
+          className="date-picker__toggle"
+          type="button"
+          aria-label="Открыть календарь"
+          aria-expanded={isOpen}
+          onClick={() => setIsOpen((prev) => !prev)}
+        >
+          ▾
+        </button>
+      </div>
+
+      {isOpen ? (
+        <div className="date-picker__popover" role="dialog" aria-label="Выбор даты">
+          <div className="date-picker__header">
+            <button
+              className="date-picker__nav"
+              type="button"
+              aria-label="Предыдущий месяц"
+              onClick={() => shiftMonth(-1)}
+            >
+              ‹
+            </button>
+            <p className="date-picker__title">{monthTitle}</p>
+            <button
+              className="date-picker__nav"
+              type="button"
+              aria-label="Следующий месяц"
+              onClick={() => shiftMonth(1)}
+            >
+              ›
+            </button>
+          </div>
+          <div className="date-picker__weekdays" aria-hidden>
+            {WEEKDAY_LABELS_SHORT_RU.map((weekday) => (
+              <span key={weekday} className="date-picker__weekday">
+                {weekday}
+              </span>
+            ))}
+          </div>
+          <div className="date-picker__cells">
+            {cells.map((day, idx) => {
+              if (day === null) {
+                return <span key={`empty-${idx}`} className="date-picker__cell date-picker__cell--empty" />;
+              }
+
+              const ymd = toYmd(visibleMonth.year, visibleMonth.monthIndex, day);
+              const isSelected =
+                selected?.year === visibleMonth.year &&
+                selected.monthIndex === visibleMonth.monthIndex &&
+                selected.day === day;
+
+              return (
+                <button
+                  key={ymd}
+                  className={`date-picker__day${isSelected ? " date-picker__day--selected" : ""}${ymd === todayYmd ? " date-picker__day--today" : ""}`}
+                  type="button"
+                  onClick={() => {
+                    onChange(ymd);
+                    setIsOpen(false);
+                  }}
+                >
+                  {day}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

frontend/src/components/PaceTrendChart.tsx

@@ -55,16 +55,38 @@ export function PaceTrendChart(props: PaceTrendChartProps): JSX.Element {
     .join(" ");
 
   const last = series[series.length - 1]!;
+  const best = series.reduce((currentBest, item) => (item.minutes < currentBest.minutes ? item : currentBest), series[0]!);
+  const dotPoints = series.map((s, i) => {
+    const x = pad + (n === 1 ? innerW / 2 : (i / (n - 1)) * innerW);
+    const norm = (maxM - s.minutes) / range;
+    const y = pad + (1 - norm) * innerH;
+    return { x, y, id: s.race.id };
+  });
 
   return (
     <div className="pace-chart">
       <svg className="pace-chart__svg" viewBox={`0 0 ${w} ${h}`} role="img" aria-label="Динамика времени на дистанции">
+        <line className="pace-chart__grid-line" x1={pad} y1={pad} x2={w - pad} y2={pad} />
+        <line className="pace-chart__grid-line" x1={pad} y1={h - pad} x2={w - pad} y2={h - pad} />
         <polyline className="pace-chart__line" fill="none" points={points} />
+        {dotPoints.map((point, index) => (
+          <circle
+            key={point.id}
+            className={index === dotPoints.length - 1 ? "pace-chart__dot pace-chart__dot--last" : "pace-chart__dot"}
+            cx={point.x}
+            cy={point.y}
+            r="1.6"
+          />
+        ))}
       </svg>
-      <p className="pace-chart__caption">
+      <div className="pace-chart__stats">
-        Последний пункт: {formatRaceDate(last.race.date)} — {last.race.finishTime} (
+        <p className="pace-chart__caption">
-        {last.minutes.toFixed(1)} мин)
+          Последний: {formatRaceDate(last.race.date)} · {last.race.finishTime} · {last.minutes.toFixed(1)} мин
-      </p>
+        </p>
+        <p className="pace-chart__caption pace-chart__caption--best">
+          Лучший: {formatRaceDate(best.race.date)} · {best.race.finishTime} · {best.minutes.toFixed(1)} мин
+        </p>
+      </div>
     </div>
   );
 }

frontend/src/components/RacesCalendar.tsx

@@ -120,7 +120,7 @@ function CalendarMonthBlock(props: {
               className={`races-cal__cell${hasRaces ? " races-cal__cell--has-race" : ""}${isOpen ? " races-cal__cell--open" : ""}`}
               onMouseEnter={() => {
                 cancelClose();
-                setOpenYmd(ymd);
+                setOpenYmd(hasRaces ? ymd : null);
               }}
               onMouseLeave={scheduleClose}
             >
@@ -132,7 +132,7 @@ function CalendarMonthBlock(props: {
                 }}
                 onFocus={() => {
                   cancelClose();
-                  setOpenYmd(ymd);
+                  setOpenYmd(hasRaces ? ymd : null);
                 }}
                 onBlur={(e) => {
                   const next = e.relatedTarget as Node | null;
@@ -144,7 +144,7 @@ function CalendarMonthBlock(props: {
               >
                 {day}
               </button>
-              {isOpen ? (
+              {isOpen && hasRaces ? (
                 <DayPopover
                   ymd={ymd}
                   races={dayRaces}
@@ -187,7 +187,7 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
 
   return (
     <div className="races-cal">
-      <p className="races-cal__hint">Наведите на дату — краткая информация. Клик — страница дня.</p>
+      <p className="races-cal__hint">Наведите на дату с забегом — краткая информация. Клик — страница дня.</p>
       {focusedMonthIndex === null || Number.isNaN(focusedMonthIndex) ? (
         <div className="races-cal__year">
           {MONTH_NAMES_RU_SHORT.map((_, mi) => (

frontend/src/components/index.ts

@@ -1,3 +1,4 @@
+export { DatePickerField } from "./DatePickerField";
 export { PaceTrendChart } from "./PaceTrendChart";
 export { RacesCalendar } from "./RacesCalendar";
 export { StartTimeSelects } from "./StartTimeSelects";

frontend/src/lib/calendarUtils.ts

@@ -2,16 +2,20 @@ import type { Race } from "../api";
 
 export const WEEKDAY_LABELS_SHORT_RU: string[] = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
 
-/** Monday-based week: Mon=0 … Sun=6 */
+/** Monday-based week: Mon=0 ... Sun=6 */
+function mondayIndexFromJsDay(jsDay: number): number {
+  return (jsDay + 6) % 7;
+}
+
+/** Monday-based week: Mon=0 ... Sun=6 */
 export function mondayIndexFromDate(d: Date): number {
-  return (d.getDay() + 6) % 7;
+  return mondayIndexFromJsDay(d.getDay());
 }
 
 /** Grid cells for one month: `null` = empty, `1..31` = day of month. Padded to full weeks, at least 6 rows. */
 export function buildMonthCells(year: number, monthIndex: number): (number | null)[] {
-  const first = new Date(year, monthIndex, 1);
+  const lead = mondayIndexFromJsDay(new Date(Date.UTC(year, monthIndex, 1)).getUTCDay());
-  const lead = mondayIndexFromDate(first);
+  const dim = new Date(Date.UTC(year, monthIndex + 1, 0)).getUTCDate();
-  const dim = new Date(year, monthIndex + 1, 0).getDate();
   const cells: (number | null)[] = [];
   for (let i = 0; i < lead; i += 1) {
     cells.push(null);

frontend/src/lib/index.ts

@@ -16,3 +16,5 @@ export {
 } from "./raceMetrics";
 
 export { buildMonthCells, groupRacesByYmd, toYmd, WEEKDAY_LABELS_SHORT_RU } from "./calendarUtils";
+export { getRaceVisual } from "./raceVisuals";
+export type { RaceVisualVariant } from "./raceVisuals";

frontend/src/lib/raceVisuals.ts

@@ -0,0 +1,206 @@
+import type { Race } from "../api";
+
+export type RaceVisualVariant = "short" | "half" | "marathon" | "trail" | "night";
+export type RaceVisualFit = "cover" | "contain";
+
+interface RaceVisual {
+  variant: RaceVisualVariant;
+  imageSrc: string;
+  fallbackSrc: string;
+  imageFit: RaceVisualFit;
+  label: string;
+}
+
+interface OfficialRaceVisual {
+  keywords: string[];
+  imageSrc: string;
+  imageFit?: RaceVisualFit;
+  label: string;
+}
+
+const FALLBACK_VISUALS: Record<RaceVisualVariant, RaceVisual> = {
+  short: {
+    variant: "short",
+    imageSrc: "/images/race-short.png",
+    fallbackSrc: "/images/race-short.png",
+    imageFit: "cover",
+    label: "Городской темп",
+  },
+  half: {
+    variant: "half",
+    imageSrc: "/images/race-half.png",
+    fallbackSrc: "/images/race-half.png",
+    imageFit: "cover",
+    label: "Полумарафон",
+  },
+  marathon: {
+    variant: "marathon",
+    imageSrc: "/images/race-marathon.png",
+    fallbackSrc: "/images/race-marathon.png",
+    imageFit: "cover",
+    label: "Марафон",
+  },
+  trail: {
+    variant: "trail",
+    imageSrc: "/images/race-trail.png",
+    fallbackSrc: "/images/race-trail.png",
+    imageFit: "cover",
+    label: "Трейл",
+  },
+  night: {
+    variant: "night",
+    imageSrc: "/images/race-night.png",
+    fallbackSrc: "/images/race-night.png",
+    imageFit: "cover",
+    label: "Ночной старт",
+  },
+};
+
+const OFFICIAL_VISUALS: OfficialRaceVisual[] = [
+  {
+    keywords: ["забег апрель"],
+    imageSrc: "https://aprilrun5km.runc.run/uploads/page_card_photos/AprilRun_photo_1.jpg",
+    label: "Забег Апрель",
+  },
+  {
+    keywords: ["быстрый пес"],
+    imageSrc: "https://fastdogxc.runc.run/uploads/page_card_photos/Dog_spring_2026-5.jpg",
+    label: "Кросс",
+  },
+  {
+    keywords: ["лисья гора"],
+    imageSrc: "https://foxhillxc.runc.run/uploads/page_card_photos/Fox_Spring_2026-0.jpg",
+    label: "Кросс",
+  },
+  {
+    keywords: ["казанский марафон"],
+    imageSrc: "https://static.tildacdn.com/tild3961-6436-4462-b738-356665613039/Frame_2131327895.png",
+    imageFit: "contain",
+    label: "Казанский марафон",
+  },
+  {
+    keywords: ["мышкинский полумарафон", "по шести холмам"],
+    imageSrc: "https://static.tildacdn.com/tild6133-6137-4865-b166-623532313531/photo.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["забег.рф", "забег рф"],
+    imageSrc: "https://xn--80acghh.xn--p1ai/zabeg.jpg",
+    label: "ЗаБег.РФ",
+  },
+  {
+    keywords: ["переславский марафон", "александровские версты"],
+    imageSrc: "https://static.tildacdn.com/tild6432-3338-4533-b262-633339353335/photo_1.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["красочный забег"],
+    imageSrc: "https://colorrun5km.runc.run/uploads/page_card_photos/ColorRun2026-1.jpg",
+    label: "Красочный забег",
+  },
+  {
+    keywords: ["здорово кострома", "здорово, кострома"],
+    imageSrc: "https://static.tildacdn.com/tild6139-3539-4661-b232-386230336431/kostroma.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["ночной забег москва"],
+    imageSrc: "https://nightrun10km.runc.run/uploads/page_card_photos/NightRun_2026-9.jpg",
+    label: "Ночной забег",
+  },
+  {
+    keywords: ["белые ночи"],
+    imageSrc: "https://wnmarathon.runc.run/uploads/page_card_photos/WN_photo_01.jpg",
+    label: "Белые ночи",
+  },
+  {
+    keywords: ["сергиевым путем", "сергиевым путём"],
+    imageSrc: "https://static.tildacdn.com/tild6236-3466-4239-b666-393061326338/serg.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["ночной забег нижний новгород"],
+    imageSrc: "https://rrweb.russiarunning.com/-x740/generalimages/0531a1b8-3876-4620-8961-2fa374e474e5.png",
+    imageFit: "contain",
+    label: "Ночной забег",
+  },
+  {
+    keywords: ["suvorov extreme"],
+    imageSrc: "https://goldenultra.ru/grut/files/photos/100.jpg",
+    label: "Трейл",
+  },
+  {
+    keywords: ["рыбинский полумарафон", "великий хлебный путь"],
+    imageSrc: "https://static.tildacdn.com/tild6130-3230-4332-b932-366166366633/photo.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["ярославский полумарафон", "золотое кольцо"],
+    imageSrc: "https://static.tildacdn.com/tild6331-6333-4635-b635-376262373361/photo.jpg",
+    label: "Золотое кольцо",
+  },
+  {
+    keywords: ["моя столица"],
+    imageSrc: "https://static.tildacdn.com/tild3263-3036-4639-b830-653365663832/-min.jpg",
+    imageFit: "contain",
+    label: "Моя столица",
+  },
+];
+
+function normalizeTitle(value: string): string {
+  return value
+    .toLowerCase()
+    .replaceAll("ё", "е")
+    .replace(/[«»|]/g, " ")
+    .replace(/[^\p{L}\p{N}.&]+/gu, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function getFallbackRaceVisual(race: Race): RaceVisual {
+  const title = normalizeTitle(race.title);
+
+  if (title.includes("ночной")) {
+    return FALLBACK_VISUALS.night;
+  }
+
+  if (
+    title.includes("trail") ||
+    title.includes("extreme") ||
+    title.includes("suvorov") ||
+    title.includes("трейл") ||
+    title.includes("экстрим")
+  ) {
+    return FALLBACK_VISUALS.trail;
+  }
+
+  if (Math.abs(race.distanceKm - 42.2) < 0.8) {
+    return FALLBACK_VISUALS.marathon;
+  }
+
+  if (Math.abs(race.distanceKm - 21.1) < 0.4) {
+    return FALLBACK_VISUALS.half;
+  }
+
+  return FALLBACK_VISUALS.short;
+}
+
+export function getRaceVisual(race: Race): RaceVisual {
+  const fallback = getFallbackRaceVisual(race);
+  const title = normalizeTitle(race.title);
+  const official = OFFICIAL_VISUALS.find((visual) =>
+    visual.keywords.some((keyword) => title.includes(normalizeTitle(keyword))),
+  );
+
+  if (!official) {
+    return fallback;
+  }
+
+  return {
+    ...fallback,
+    imageSrc: official.imageSrc,
+    fallbackSrc: fallback.imageSrc,
+    imageFit: official.imageFit ?? fallback.imageFit,
+    label: official.label,
+  };
+}

frontend/src/pages/DashboardPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
 import type { Race } from "../api";
 import { ApiError, getRaces } from "../api";
 import { PaceTrendChart } from "../components";
@@ -61,26 +62,14 @@ export function DashboardPage(): JSX.Element {
 
   const dashboardMetrics = useMemo(() => {
     const { upcoming, past } = splitRacesByDate(races);
-    const completed = races.filter((race) => race.status === "completed");
 
     const nextRace = upcoming[0] ?? null;
     const lastResult = past.find((race) => race.status === "completed") ?? null;
 
-    let personalRecord: Race | null = null;
+    const lastPersonalRecord =
-    let personalRecordSeconds = Number.POSITIVE_INFINITY;
+      past.find(
-
+        (race) => race.status === "completed" && parseFinishTimeToSeconds(race.finishTime) !== null,
-    for (const race of completed) {
+      ) ?? null;
-      const finishSeconds = parseFinishTimeToSeconds(race.finishTime);
-      if (!finishSeconds) {
-        continue;
-      }
-
-      const candidate = finishSeconds / race.distanceKm;
-      if (candidate < personalRecordSeconds) {
-        personalRecordSeconds = candidate;
-        personalRecord = race;
-      }
-    }
 
     const currentYear = new Date().getFullYear();
     const seasonRaces = races.filter((race) => parseRaceDate(race.date).getFullYear() === currentYear);
@@ -89,7 +78,7 @@ export function DashboardPage(): JSX.Element {
     return {
       nextRace,
       lastResult,
-      personalRecord,
+      lastPersonalRecord,
       seasonTotal: seasonRaces.length,
       seasonCompletedCount: seasonCompleted.length,
     };
@@ -143,6 +132,11 @@ export function DashboardPage(): JSX.Element {
       .sort((left, right) => right.year - left.year || left.title.localeCompare(right.title, "ru-RU"));
   }, [races]);
 
+  const seasonProgress =
+    dashboardMetrics.seasonTotal > 0
+      ? Math.round((dashboardMetrics.seasonCompletedCount / dashboardMetrics.seasonTotal) * 100)
+      : 0;
+
   if (isLoading) {
     return (
       <section className="page page--dashboard" aria-busy="true">
@@ -163,60 +157,125 @@ export function DashboardPage(): JSX.Element {
 
   return (
     <section className="page page--dashboard">
-      <h1 className="page__title">Обзор</h1>
+      <section className="dashboard-hero" aria-label="Обзор сезона">
-      <p className="page__subtitle">Ключевые метрики по вашему календарю стартов.</p>
+        <div className="dashboard-hero__content">
+          <p className="dashboard-hero__eyebrow">Календарь сезона</p>
+          <h1 className="dashboard-hero__title">Беговой штаб</h1>
+          <p className="dashboard-hero__text">
+            Планируйте старты, держите фокус на ближайшей гонке и сравнивайте прогресс по дистанциям.
+          </p>
+          <div className="dashboard-hero__actions">
+            <Link className="btn btn--primary" to="/races">
+              Смотреть старты
+            </Link>
+            <Link className="btn btn--secondary dashboard-hero__secondary" to="/races/new">
+              Добавить старт
+            </Link>
+          </div>
+        </div>
+        <div className="dashboard-hero__panel">
+          <p className="dashboard-hero__panel-label">Ближайший старт</p>
+          {dashboardMetrics.nextRace ? (
+            <Link className="dashboard-hero__race-link" to={`/races/${dashboardMetrics.nextRace.id}`}>
+              <span className="dashboard-hero__race-title">{dashboardMetrics.nextRace.title}</span>
+              <span className="dashboard-hero__race-meta">
+                {formatRaceDate(dashboardMetrics.nextRace.date)} · {formatDistance(dashboardMetrics.nextRace.distanceKm)}
+              </span>
+              <span className="dashboard-hero__race-countdown">
+                {getRaceCountdownLabel(dashboardMetrics.nextRace.date)}
+              </span>
+            </Link>
+          ) : (
+            <p className="dashboard-hero__empty">Запланируйте первый старт сезона.</p>
+          )}
+        </div>
+      </section>
 
       <div className="dashboard-grid" aria-label="Ключевые метрики">
-        <article className="dashboard-card">
+        <article
-          <h2 className="dashboard-card__title">Ближайший старт</h2>
+          className={`dashboard-card dashboard-card--accent-blue${dashboardMetrics.nextRace ? " dashboard-card--linked" : ""}`}
+        >
           {dashboardMetrics.nextRace ? (
-            <>
+            <Link
+              className="dashboard-card__link-surface"
+              to={`/races/${dashboardMetrics.nextRace.id}`}
+              aria-label={`Ближайший старт: ${dashboardMetrics.nextRace.title}`}
+            >
+              <h2 className="dashboard-card__title">Ближайший старт</h2>
               <p className="dashboard-card__value">{dashboardMetrics.nextRace.title}</p>
               <p className="dashboard-card__meta">
-                {formatRaceDate(dashboardMetrics.nextRace.date)} · {formatDistance(dashboardMetrics.nextRace.distanceKm)}
+                {formatRaceDate(dashboardMetrics.nextRace.date)} ·{" "}
+                {formatDistance(dashboardMetrics.nextRace.distanceKm)}
               </p>
               <p className="dashboard-card__hint">{getRaceCountdownLabel(dashboardMetrics.nextRace.date)}</p>
-            </>
+            </Link>
           ) : (
-            <p className="dashboard-card__empty">Нет запланированных стартов.</p>
+            <>
+              <h2 className="dashboard-card__title">Ближайший старт</h2>
+              <p className="dashboard-card__empty">Нет запланированных стартов.</p>
+            </>
           )}
         </article>
 
-        <article className="dashboard-card">
+        <article
-          <h2 className="dashboard-card__title">Последний результат</h2>
+          className={`dashboard-card dashboard-card--accent-coral${dashboardMetrics.lastResult ? " dashboard-card--linked" : ""}`}
+        >
           {dashboardMetrics.lastResult ? (
-            <>
+            <Link
+              className="dashboard-card__link-surface"
+              to={`/races/${dashboardMetrics.lastResult.id}`}
+              aria-label={`Последний результат: ${dashboardMetrics.lastResult.title}`}
+            >
+              <h2 className="dashboard-card__title">Последний результат</h2>
               <p className="dashboard-card__value">{dashboardMetrics.lastResult.finishTime ?? "время не указано"}</p>
               <p className="dashboard-card__meta">
                 {dashboardMetrics.lastResult.title} · {formatDistance(dashboardMetrics.lastResult.distanceKm)}
               </p>
               <p className="dashboard-card__hint">{formatRaceDate(dashboardMetrics.lastResult.date)}</p>
-            </>
+            </Link>
           ) : (
-            <p className="dashboard-card__empty">Пока нет завершённых стартов.</p>
-          )}
-        </article>
-
-        <article className="dashboard-card">
-          <h2 className="dashboard-card__title">Личный рекорд</h2>
-          {dashboardMetrics.personalRecord ? (
             <>
-              <p className="dashboard-card__value">{dashboardMetrics.personalRecord.finishTime ?? "время не указано"}</p>
+              <h2 className="dashboard-card__title">Последний результат</h2>
-              <p className="dashboard-card__meta">
+              <p className="dashboard-card__empty">Пока нет завершённых стартов.</p>
-                {dashboardMetrics.personalRecord.title} · {formatDistance(dashboardMetrics.personalRecord.distanceKm)}
-              </p>
-              <p className="dashboard-card__hint">Лучший темп среди завершённых стартов.</p>
             </>
-          ) : (
-            <p className="dashboard-card__empty">Недостаточно данных для личного рекорда.</p>
           )}
         </article>
 
-        <article className="dashboard-card">
+        <article
+          className={`dashboard-card dashboard-card--accent-lime${dashboardMetrics.lastPersonalRecord ? " dashboard-card--linked" : ""}`}
+        >
+          {dashboardMetrics.lastPersonalRecord ? (
+            <Link
+              className="dashboard-card__link-surface"
+              to={`/races/${dashboardMetrics.lastPersonalRecord.id}`}
+              aria-label={`Последний личный рекорд: ${dashboardMetrics.lastPersonalRecord.title}`}
+            >
+              <h2 className="dashboard-card__title">Последний личный рекорд</h2>
+              <p className="dashboard-card__value">
+                {dashboardMetrics.lastPersonalRecord.finishTime ?? "время не указано"}
+              </p>
+              <p className="dashboard-card__meta">
+                {dashboardMetrics.lastPersonalRecord.title} ·{" "}
+                {formatDistance(dashboardMetrics.lastPersonalRecord.distanceKm)}
+              </p>
+              <p className="dashboard-card__hint">{formatRaceDate(dashboardMetrics.lastPersonalRecord.date)}</p>
+            </Link>
+          ) : (
+            <>
+              <h2 className="dashboard-card__title">Последний личный рекорд</h2>
+              <p className="dashboard-card__empty">Нет завершённых стартов с финишным временем.</p>
+            </>
+          )}
+        </article>
+
+        <article className="dashboard-card dashboard-card--season dashboard-card--accent-violet">
           <h2 className="dashboard-card__title">Сезон</h2>
           <p className="dashboard-card__value">{dashboardMetrics.seasonTotal}</p>
           <p className="dashboard-card__meta">стартов в этом году</p>
           <p className="dashboard-card__hint">Завершено: {dashboardMetrics.seasonCompletedCount}</p>
+          <div className="dashboard-card__progress" aria-label={`Сезон завершен на ${seasonProgress}%`}>
+            <span style={{ width: `${seasonProgress}%` }} />
+          </div>
         </article>
       </div>
 

frontend/src/pages/RaceDayPage.tsx

@@ -2,7 +2,14 @@ import { useEffect, useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import type { Race } from "../api";
 import { ApiError, getRaces } from "../api";
-import { formatDistance, formatRaceDate, getRaceStatusClassName, getRaceStatusLabel, sortByDateAsc } from "../lib";
+import {
+  formatDistance,
+  formatRaceDate,
+  getRaceStatusClassName,
+  getRaceStatusLabel,
+  getRaceVisual,
+  sortByDateAsc,
+} from "../lib";
 
 function getErrorMessage(error: unknown): string {
   if (error instanceof ApiError) {
@@ -70,24 +77,33 @@ export function RaceDayPage(): JSX.Element {
   if (!validYmd) {
     return (
       <section className="page page--race-day">
-        <h1 className="page__title">Некорректная дата</h1>
+        <div className="race-day-hero">
-        <p className="page__subtitle">
+          <p className="race-day-hero__eyebrow">Страница дня</p>
+          <h1 className="page__title">Некорректная дата</h1>
           <Link className="page-link" to="/races">
             Вернуться к календарю стартов
           </Link>
-        </p>
+        </div>
       </section>
     );
   }
 
   return (
     <section className="page page--race-day">
-      <p className="page__subtitle">
+      <section className="race-day-hero" aria-label="Старты дня">
         <Link className="page-link" to="/races">
           ← Календарь стартов
         </Link>
-      </p>
+        <p className="race-day-hero__eyebrow">Старты дня</p>
-      <h1 className="page__title">{heading}</h1>
+        <h1 className="page__title">{heading}</h1>
+        <p className="page__subtitle">
+          {isLoading
+            ? "Загружаем расписание..."
+            : races.length > 0
+              ? `Запланировано стартов: ${races.length}`
+              : "Проверьте расписание или добавьте старт на эту дату."}
+        </p>
+      </section>
 
       {errorMessage ? (
         <p className="page__subtitle page__subtitle--error" role="alert">
@@ -107,19 +123,40 @@ export function RaceDayPage(): JSX.Element {
 
       {!isLoading && races.length > 0 ? (
         <ul className="race-day__list">
-          {races.map((race) => (
+          {races.map((race) => {
-            <li key={race.id} className="race-day__item">
+            const visual = getRaceVisual(race);
-              <Link className="race-day__link" to={`/races/${race.id}`}>
+
-                {race.title}
+            return (
-              </Link>
+              <li key={race.id} className="race-day__item">
-              <span className="race-day__meta">
+                <Link className="race-day__link" to={`/races/${race.id}`}>
-                {formatDistance(race.distanceKm)} ·{" "}
+                  <img
-                <span className={getRaceStatusClassName(race.status, race.date)}>
+                    className={`race-day__image${
-                  {getRaceStatusLabel(race.status, race.date)}
+                      visual.imageFit === "contain" ? " race-day__image--contain" : ""
-                </span>
+                    }`}
-              </span>
+                    src={visual.imageSrc}
-            </li>
+                    alt=""
-          ))}
+                    loading="lazy"
+                    referrerPolicy="no-referrer"
+                    onError={(event) => {
+                      event.currentTarget.onerror = null;
+                      event.currentTarget.classList.remove("race-day__image--contain");
+                      event.currentTarget.src = visual.fallbackSrc;
+                    }}
+                  />
+                  <span className="race-day__body">
+                    <span className="race-day__kicker">{visual.label}</span>
+                    <span className="race-day__title">{race.title}</span>
+                    <span className="race-day__meta">
+                      {formatDistance(race.distanceKm)} ·{" "}
+                      <span className={getRaceStatusClassName(race.status, race.date)}>
+                        {getRaceStatusLabel(race.status, race.date)}
+                      </span>
+                    </span>
+                  </span>
+                </Link>
+              </li>
+            );
+          })}
         </ul>
       ) : null}
 

frontend/src/pages/RaceDetailsPage.tsx

@@ -7,6 +7,7 @@ import {
   getPaceLabel,
   getRaceStatusClassName,
   getRaceStatusLabel,
+  getRaceVisual,
   raceNeedsResultEntry,
 } from "../lib";
 import type { Race } from "../api";
@@ -139,18 +140,40 @@ export function RaceDetailsPage(): JSX.Element {
   }
 
   const isCompleted = race.status === "completed";
+  const visual = getRaceVisual(race);
 
   return (
     <section className="page page--race-details">
-      <div className="race-details-header">
+      <section className={`race-details-hero race-details-hero--${visual.variant}`} aria-label="Карточка старта">
-        <div className="race-details-header__main">
+        <img
+          className={`race-details-hero__image${
+            visual.imageFit === "contain" ? " race-details-hero__image--contain" : ""
+          }`}
+          src={visual.imageSrc}
+          alt=""
+          loading="eager"
+          referrerPolicy="no-referrer"
+          onError={(event) => {
+            event.currentTarget.onerror = null;
+            event.currentTarget.classList.remove("race-details-hero__image--contain");
+            event.currentTarget.src = visual.fallbackSrc;
+          }}
+        />
+        <div className="race-details-hero__shade" aria-hidden="true" />
+        <div className="race-details-hero__content">
+          <Link className="race-details-hero__back" to="/races">
+            ← Календарь стартов
+          </Link>
+          <p className="race-details-hero__eyebrow">{visual.label}</p>
           <h1 className="page__title">{race.title}</h1>
           <p className="page__subtitle">
             {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
           </p>
+          <span className={getRaceStatusClassName(race.status, race.date)}>
+            {getRaceStatusLabel(race.status, race.date)}
+          </span>
         </div>
-        <span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
+      </section>
-      </div>
 
       {raceNeedsResultEntry(race) ? (
         <p className="race-details-past-hint" role="status">

frontend/src/pages/RaceFormPage.tsx

@@ -2,8 +2,8 @@ import { useCallback, useEffect, useState } from "react";
 import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { ApiError, createRace, getRaceById, updateRace } from "../api";
 import type { CreateRacePayload, Race, RaceStatus, UpdateRacePayload } from "../api";
-import { StartTimeSelects } from "../components/StartTimeSelects";
+import { DatePickerField, StartTimeSelects } from "../components";
-import { isRaceDateInPast } from "../lib";
+import { isRaceDateInPast, parseFinishTimeToSeconds } from "../lib";
 
 function slugify(text: string): string {
   return text
@@ -151,7 +151,16 @@ export function RaceFormPage(): JSX.Element {
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
       const { name, value } = event.target;
-      setForm((prev) => ({ ...prev, [name]: value }));
+      setForm((prev) => {
+        const next = { ...prev, [name]: value };
+        if (name === "finishTime") {
+          const trimmed = value.trim();
+          if (trimmed !== "" && parseFinishTimeToSeconds(trimmed) !== null) {
+            return { ...next, status: "completed" };
+          }
+        }
+        return next;
+      });
     },
     [],
   );
@@ -170,10 +179,16 @@ export function RaceFormPage(): JSX.Element {
       setIsSaving(true);
 
       try {
-        const statusValue: RaceStatus | null =
+        const finishTrimmed = form.finishTime.trim();
+        const hasParsedFinish =
+          finishTrimmed !== "" && parseFinishTimeToSeconds(finishTrimmed) !== null;
+        let statusValue: RaceStatus | null =
           form.status === "planned" || form.status === "registered" || form.status === "completed"
             ? form.status
             : null;
+        if (hasParsedFinish) {
+          statusValue = "completed";
+        }
 
         if (isEditMode && raceId) {
           const payload: UpdateRacePayload = {
@@ -259,17 +274,17 @@ export function RaceFormPage(): JSX.Element {
         <fieldset className="race-form__group">
           <legend className="race-form__legend">Основная информация</legend>
 
-          <label className="race-form__field">
+          <div className="race-form__field">
             <span className="race-form__label">Дата *</span>
-            <input
+            <DatePickerField
-              className="race-form__input"
-              type="date"
               name="date"
               value={form.date}
-              onChange={handleChange}
+              onChange={(next) => {
+                setForm((prev) => ({ ...prev, date: next }));
+              }}
               required
             />
-          </label>
+          </div>
 
           <label className="race-form__field">
             <span className="race-form__label">Название *</span>

frontend/src/pages/RacesPage.tsx

@@ -6,9 +6,10 @@ import { RacesCalendar } from "../components/RacesCalendar";
 import {
   formatDistance,
   formatRaceDate,
+  getRaceVisual,
   getRaceStatusClassName,
   getRaceStatusLabel,
-  raceNeedsResultEntry,
+  parseRaceDate,
   splitRacesByDate,
 } from "../lib";
 
@@ -68,16 +69,41 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
       {races.length > 0 ? (
         <ul className="race-list__items">
           {races.map((race) => {
-            const needsResult = raceNeedsResultEntry(race);
+            const visual = getRaceVisual(race);
-            if (needsResult) {
+            const parsedDate = parseRaceDate(race.date);
-              return (
+            const day = parsedDate.toLocaleDateString("ru-RU", { day: "2-digit" });
-                <li key={race.id} className="race-card race-card--action">
+            const month = parsedDate.toLocaleDateString("ru-RU", { month: "short" });
-                  <Link
+
-                    className="race-card__link-surface"
+            return (
-                    to={`/races/${race.id}/edit`}
+              <li key={race.id} className={`race-card race-card--action race-card--poster race-card--${visual.variant}`}>
-                    aria-label={`${race.title}, внести результат`}
+                <Link
-                  >
+                  className="race-card__link-surface"
+                  to={`/races/${race.id}`}
+                  aria-label={`Старт: ${race.title}`}
+                >
+                  <div className="race-card__image-wrap">
+                    <img
+                      className={`race-card__image${
+                        visual.imageFit === "contain" ? " race-card__image--contain" : ""
+                      }`}
+                      src={visual.imageSrc}
+                      alt=""
+                      loading="lazy"
+                      referrerPolicy="no-referrer"
+                      onError={(event) => {
+                        event.currentTarget.onerror = null;
+                        event.currentTarget.classList.remove("race-card__image--contain");
+                        event.currentTarget.src = visual.fallbackSrc;
+                      }}
+                    />
+                    <span className="race-card__date-badge">
+                      <span>{day}</span>
+                      <span>{month}</span>
+                    </span>
+                  </div>
+                  <div className="race-card__content">
                     <div className="race-card__main">
+                      <p className="race-card__kicker">{visual.label}</p>
                       <p className="race-card__title">
                         <span className="race-card__title-text">{race.title}</span>
                       </p>
@@ -85,28 +111,14 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
                         {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
                       </p>
                     </div>
-                    <span className={getRaceStatusClassName(race.status, race.date)}>
+                    <div className="race-card__footer">
-                      {getRaceStatusLabel(race.status, race.date)}
+                      <span className={getRaceStatusClassName(race.status, race.date)}>
-                    </span>
+                        {getRaceStatusLabel(race.status, race.date)}
-                  </Link>
+                      </span>
-                </li>
+                      <span className="race-card__cta">Открыть</span>
-              );
+                    </div>
-            }
+                  </div>
-            return (
+                </Link>
-              <li key={race.id} className="race-card">
-                <div className="race-card__main">
-                  <p className="race-card__title">
-                    <Link className="race-card__link" to={`/races/${race.id}`}>
-                      {race.title}
-                    </Link>
-                  </p>
-                  <p className="race-card__meta">
-                    {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
-                  </p>
-                </div>
-                <span className={getRaceStatusClassName(race.status, race.date)}>
-                  {getRaceStatusLabel(race.status, race.date)}
-                </span>
               </li>
             );
           })}
@@ -221,25 +233,66 @@ export function RacesPage(): JSX.Element {
 
   return (
     <section className="page page--races">
-      <h1 className="page__title">Календарь стартов</h1>
+      <section className="races-hero" aria-label="Календарь стартов">
-      <p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
+        <div className="races-hero__content">
-
+          <p className="races-hero__eyebrow">Сезонная афиша</p>
-      <div className="races-view-toggle" role="group" aria-label="Вид отображения">
+          <h1 className="page__title">Календарь стартов</h1>
-        <button
+          <p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
-          type="button"
+          <div className="races-view-toggle" role="group" aria-label="Вид отображения">
-          className={`races-view-toggle__btn${viewMode === "list" ? " races-view-toggle__btn--active" : ""}`}
+            <button
-          onClick={handleViewList}
+              type="button"
-        >
+              className={`races-view-toggle__btn${viewMode === "list" ? " races-view-toggle__btn--active" : ""}`}
-          Список
+              onClick={handleViewList}
-        </button>
+            >
-        <button
+              Список
-          type="button"
+            </button>
-          className={`races-view-toggle__btn${viewMode === "calendar" ? " races-view-toggle__btn--active" : ""}`}
+            <button
-          onClick={handleViewCalendar}
+              type="button"
-        >
+              className={`races-view-toggle__btn${viewMode === "calendar" ? " races-view-toggle__btn--active" : ""}`}
-          Календарь
+              onClick={handleViewCalendar}
-        </button>
+            >
-      </div>
+              Календарь
+            </button>
+          </div>
+        </div>
+        <div className="races-hero__filters">
+          <div className="races-filter" role="search" aria-label="Фильтр по дате">
+            <label className="races-filter__field">
+              <span className="races-filter__label">Год</span>
+              <select
+                className="races-filter__select"
+                value={viewMode === "list" ? yearFilter : yearFilter || String(displayYear)}
+                onChange={(event) => {
+                  setYearFilter(event.target.value);
+                }}
+              >
+                {viewMode === "list" ? <option value="">Все года</option> : null}
+                {yearSelectOptions().map((y) => (
+                  <option key={y} value={String(y)}>
+                    {y}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="races-filter__field">
+              <span className="races-filter__label">Месяц</span>
+              <select
+                className="races-filter__select"
+                value={monthFilter}
+                onChange={(event) => {
+                  setMonthFilter(event.target.value);
+                }}
+              >
+                {MONTH_OPTIONS.map((opt) => (
+                  <option key={opt.value || "all"} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+        </div>
+      </section>
 
       {errorMessage && !isLoading ? (
         <p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
@@ -247,42 +300,6 @@ export function RacesPage(): JSX.Element {
         </p>
       ) : null}
 
-      <div className="races-filter" role="search" aria-label="Фильтр по дате">
-        <label className="races-filter__field">
-          <span className="races-filter__label">Год</span>
-          <select
-            className="races-filter__select"
-            value={viewMode === "list" ? yearFilter : yearFilter || String(displayYear)}
-            onChange={(event) => {
-              setYearFilter(event.target.value);
-            }}
-          >
-            {viewMode === "list" ? <option value="">Все года</option> : null}
-            {yearSelectOptions().map((y) => (
-              <option key={y} value={String(y)}>
-                {y}
-              </option>
-            ))}
-          </select>
-        </label>
-        <label className="races-filter__field">
-          <span className="races-filter__label">Месяц</span>
-          <select
-            className="races-filter__select"
-            value={monthFilter}
-            onChange={(event) => {
-              setMonthFilter(event.target.value);
-            }}
-          >
-            {MONTH_OPTIONS.map((opt) => (
-              <option key={opt.value || "all"} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        </label>
-      </div>
-
       {viewMode === "calendar" && monthFilter === "" ? (
         <p className="page__subtitle races-cal__filter-hint">Выберите месяц, чтобы увидеть его крупным планом.</p>
       ) : null}

frontend/src/styles/tokens.css

@@ -1,20 +1,26 @@
 :root {
-  --color-bg: #f3f5f7;
+  --color-bg: #edf3f6;
+  --color-bg-deep: #071927;
   --color-surface: #ffffff;
-  --color-text: #13202b;
+  --color-surface-soft: #f7fafc;
-  --color-text-muted: #5d6b77;
+  --color-text: #0e1f2d;
-  --color-accent: #1f7ae0;
+  --color-text-muted: #647483;
-  --color-border: #dce2e8;
+  --color-accent: #1168d8;
-  --color-success: #2f9e63;
+  --color-accent-strong: #0c48a0;
-  --color-warning: #c0821f;
+  --color-lime: #b9f24a;
-  --color-error: #cc3a3a;
+  --color-coral: #ff6f5e;
+  --color-violet: #6d5dfc;
+  --color-border: #d6e1ea;
+  --color-success: #168657;
+  --color-warning: #b77716;
+  --color-error: #c43333;
 
   --font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
-  --font-size-h1: 2rem;
+  --font-size-h1: 2.35rem;
-  --font-size-h2: 1.5rem;
+  --font-size-h2: 1.35rem;
   --font-size-body: 1rem;
   --font-size-caption: 0.875rem;
-  --line-height-base: 1.5;
+  --line-height-base: 1.45;
 
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -25,8 +31,10 @@
   --space-8: 2rem;
 
   --radius-sm: 0.375rem;
-  --radius-md: 0.75rem;
+  --radius-md: 0.625rem;
-  --radius-lg: 1rem;
+  --radius-lg: 0.75rem;
 
-  --shadow-card-lift: 0 6px 20px rgba(19, 32, 43, 0.12);
+  --shadow-card: 0 10px 30px rgba(14, 31, 45, 0.08);
+  --shadow-card-lift: 0 16px 34px rgba(14, 31, 45, 0.16);
+  --shadow-hero: 0 22px 60px rgba(7, 25, 39, 0.24);
 }