Initial frontend import

src/components/HeroVisual.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { ArkLogoMark } from "./ArkLogoMark";
+
+const HERO_JPEG = "/assets/ark-library/media/jpeg/hero.jpg";
+
+/** Hero: branded JPEG when present; otherwise gold mark + glow (previous behaviour). */
+export function HeroVisual() {
+  const [usePhoto, setUsePhoto] = useState(false);
+
+  useEffect(() => {
+    const im = new Image();
+    im.onload = () => setUsePhoto(true);
+    im.onerror = () => setUsePhoto(false);
+    im.src = HERO_JPEG;
+  }, []);
+
+  if (usePhoto) {
+    return (
+      <div className="relative flex min-h-[220px] md:min-h-[280px] items-center justify-center md:justify-end">
+        <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-3xl">
+          <div className="absolute -right-8 top-1/2 h-[140%] w-[90%] -translate-y-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(212,175,55,0.18)_0%,transparent_68%)]" />
+        </div>
+        <img
+          src={HERO_JPEG}
+          alt=""
+          className="relative z-10 max-h-[min(340px,52vh)] w-full max-w-lg rounded-2xl object-contain shadow-[0_0_48px_rgba(212,175,55,0.22)]"
+          loading="eager"
+          decoding="async"
+          onError={() => setUsePhoto(false)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex min-h-[220px] md:min-h-[280px] items-center justify-center md:justify-end">
+      <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-3xl">
+        <div className="absolute -right-8 top-1/2 h-[140%] w-[90%] -translate-y-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(212,175,55,0.22)_0%,transparent_68%)]" />
+        <div className="absolute right-[12%] top-[8%] h-3 w-3 rotate-12 rounded-sm border border-ark-gold/40 bg-ark-gold/10" />
+        <div className="absolute right-[22%] top-[18%] h-2 w-2 -rotate-6 rounded-sm border border-ark-gold/30" />
+        <div className="absolute right-[8%] bottom-[28%] h-2.5 w-2.5 rotate-45 rounded-sm bg-ark-gold/15" />
+      </div>
+
+      <div className="relative flex flex-col items-center">
+        <div className="relative drop-shadow-[0_0_40px_rgba(212,175,55,0.35)]">
+          <ArkLogoMark className="h-36 w-36 md:h-44 md:w-44" />
+          <div className="absolute -bottom-2 left-1/2 h-16 w-28 -translate-x-1/2 rounded-[100%] bg-gradient-to-t from-ark-gold/25 via-ark-gold/08 to-transparent blur-md" />
+        </div>
+        <div
+          className="-mt-1 h-3 w-40 rounded-[100%] bg-gradient-to-r from-transparent via-ark-gold/35 to-transparent shadow-[0_0_24px_rgba(212,175,55,0.25)]"
+          aria-hidden
+        />
+      </div>
+    </div>
+  );
+}