feat(frontend): redesign race dashboard

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">