feat(frontend): redesign race dashboard

frontend/src/pages/DashboardPage.tsx

@@ -132,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">
@@ -152,12 +157,43 @@ export function DashboardPage(): JSX.Element {
 
   return (
     <section className="page page--dashboard">
-      <h1 className="page__title">Обзор</h1>
-      <p className="page__subtitle">Ключевые метрики по вашему календарю стартов.</p>
+      <section className="dashboard-hero" aria-label="Обзор сезона">
+        <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${dashboardMetrics.nextRace ? " dashboard-card--linked" : ""}`}
+          className={`dashboard-card dashboard-card--accent-blue${dashboardMetrics.nextRace ? " dashboard-card--linked" : ""}`}
         >
           {dashboardMetrics.nextRace ? (
             <Link
@@ -182,7 +218,7 @@ export function DashboardPage(): JSX.Element {
         </article>
 
         <article
-          className={`dashboard-card${dashboardMetrics.lastResult ? " dashboard-card--linked" : ""}`}
+          className={`dashboard-card dashboard-card--accent-coral${dashboardMetrics.lastResult ? " dashboard-card--linked" : ""}`}
         >
           {dashboardMetrics.lastResult ? (
             <Link
@@ -206,7 +242,7 @@ export function DashboardPage(): JSX.Element {
         </article>
 
         <article
-          className={`dashboard-card${dashboardMetrics.lastPersonalRecord ? " dashboard-card--linked" : ""}`}
+          className={`dashboard-card dashboard-card--accent-lime${dashboardMetrics.lastPersonalRecord ? " dashboard-card--linked" : ""}`}
         >
           {dashboardMetrics.lastPersonalRecord ? (
             <Link
@@ -232,11 +268,14 @@ export function DashboardPage(): JSX.Element {
           )}
         </article>
 
-        <article className="dashboard-card">
+        <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>
-        <p className="page__subtitle">
+        <div className="race-day-hero">
+          <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>
-      <h1 className="page__title">{heading}</h1>
+        <p className="race-day-hero__eyebrow">Старты дня</p>
+        <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) => (
-            <li key={race.id} className="race-day__item">
-              <Link className="race-day__link" to={`/races/${race.id}`}>
-                {race.title}
-              </Link>
-              <span className="race-day__meta">
-                {formatDistance(race.distanceKm)} ·{" "}
-                <span className={getRaceStatusClassName(race.status, race.date)}>
-                  {getRaceStatusLabel(race.status, race.date)}
-                </span>
-              </span>
-            </li>
-          ))}
+          {races.map((race) => {
+            const visual = getRaceVisual(race);
+
+            return (
+              <li key={race.id} className="race-day__item">
+                <Link className="race-day__link" to={`/races/${race.id}`}>
+                  <img
+                    className={`race-day__image${
+                      visual.imageFit === "contain" ? " race-day__image--contain" : ""
+                    }`}
+                    src={visual.imageSrc}
+                    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">
-        <div className="race-details-header__main">
+      <section className={`race-details-hero race-details-hero--${visual.variant}`} aria-label="Карточка старта">
+        <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>
-      </div>
+      </section>
 
       {raceNeedsResultEntry(race) ? (
         <p className="race-details-past-hint" role="status">

frontend/src/pages/RaceFormPage.tsx

@@ -2,7 +2,7 @@ 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, parseFinishTimeToSeconds } from "../lib";
 
 function slugify(text: string): string {
@@ -274,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
-              className="race-form__input"
-              type="date"
+            <DatePickerField
               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,8 +6,10 @@ import { RacesCalendar } from "../components/RacesCalendar";
 import {
   formatDistance,
   formatRaceDate,
+  getRaceVisual,
   getRaceStatusClassName,
   getRaceStatusLabel,
+  parseRaceDate,
   splitRacesByDate,
 } from "../lib";
 
@@ -66,27 +68,60 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
       <h2 className="race-list__title">{title}</h2>
       {races.length > 0 ? (
         <ul className="race-list__items">
-          {races.map((race) => (
-            <li key={race.id} className="race-card race-card--action">
-              <Link
-                className="race-card__link-surface"
-                to={`/races/${race.id}`}
-                aria-label={`Старт: ${race.title}`}
-              >
-                <div className="race-card__main">
-                  <p className="race-card__title">
-                    <span className="race-card__title-text">{race.title}</span>
-                  </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>
-              </Link>
-            </li>
-          ))}
+          {races.map((race) => {
+            const visual = getRaceVisual(race);
+            const parsedDate = parseRaceDate(race.date);
+            const day = parsedDate.toLocaleDateString("ru-RU", { day: "2-digit" });
+            const month = parsedDate.toLocaleDateString("ru-RU", { month: "short" });
+
+            return (
+              <li key={race.id} className={`race-card race-card--action race-card--poster race-card--${visual.variant}`}>
+                <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>
+                      <p className="race-card__meta">
+                        {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
+                      </p>
+                    </div>
+                    <div className="race-card__footer">
+                      <span className={getRaceStatusClassName(race.status, race.date)}>
+                        {getRaceStatusLabel(race.status, race.date)}
+                      </span>
+                      <span className="race-card__cta">Открыть</span>
+                    </div>
+                  </div>
+                </Link>
+              </li>
+            );
+          })}
         </ul>
       ) : (
         <p className="race-list__empty">Пока нет данных в этом разделе.</p>
@@ -198,25 +233,66 @@ export function RacesPage(): JSX.Element {
 
   return (
     <section className="page page--races">
-      <h1 className="page__title">Календарь стартов</h1>
-      <p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
-
-      <div className="races-view-toggle" role="group" aria-label="Вид отображения">
-        <button
-          type="button"
-          className={`races-view-toggle__btn${viewMode === "list" ? " races-view-toggle__btn--active" : ""}`}
-          onClick={handleViewList}
-        >
-          Список
-        </button>
-        <button
-          type="button"
-          className={`races-view-toggle__btn${viewMode === "calendar" ? " races-view-toggle__btn--active" : ""}`}
-          onClick={handleViewCalendar}
-        >
-          Календарь
-        </button>
-      </div>
+      <section className="races-hero" aria-label="Календарь стартов">
+        <div className="races-hero__content">
+          <p className="races-hero__eyebrow">Сезонная афиша</p>
+          <h1 className="page__title">Календарь стартов</h1>
+          <p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
+          <div className="races-view-toggle" role="group" aria-label="Вид отображения">
+            <button
+              type="button"
+              className={`races-view-toggle__btn${viewMode === "list" ? " races-view-toggle__btn--active" : ""}`}
+              onClick={handleViewList}
+            >
+              Список
+            </button>
+            <button
+              type="button"
+              className={`races-view-toggle__btn${viewMode === "calendar" ? " races-view-toggle__btn--active" : ""}`}
+              onClick={handleViewCalendar}
+            >
+              Календарь
+            </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)" }}>
@@ -224,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}