57 lines
2.6 KiB
TypeScript
57 lines
2.6 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|