feat(frontend): redesign race dashboard

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}