feat: manage splash logo media via payload
This commit is contained in:
@@ -156,7 +156,13 @@ const Layout: React.FC<LayoutProps> = ({ children, header = defaultHeaderData, f
|
|||||||
style={{ paddingTop: 60, paddingLeft: 0 }}
|
style={{ paddingTop: 60, paddingLeft: 0 }}
|
||||||
className="min-h-screen flex flex-col bg-background text-foreground font-body"
|
className="min-h-screen flex flex-col bg-background text-foreground font-body"
|
||||||
>
|
>
|
||||||
{showLoader && <LoadingScreen onDone={() => setShowLoader(false)} />}
|
{showLoader && (
|
||||||
|
<LoadingScreen
|
||||||
|
logoAlt={header.logo?.alt || header.overlayLogoAlt}
|
||||||
|
logoSrc={logo}
|
||||||
|
onDone={() => setShowLoader(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* ── GLOBAL BAYERN CSS ────────────────────────── */}
|
{/* ── GLOBAL BAYERN CSS ────────────────────────── */}
|
||||||
<style>{`
|
<style>{`
|
||||||
|
|||||||
@@ -12,7 +12,15 @@ const SHARDS = [
|
|||||||
{ clip: 'polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%)', tx: 60, ty: 60 },
|
{ clip: 'polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%)', tx: 60, ty: 60 },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function LoadingScreen({ onDone }: { onDone: () => void }) {
|
export default function LoadingScreen({
|
||||||
|
logoAlt,
|
||||||
|
logoSrc,
|
||||||
|
onDone,
|
||||||
|
}: {
|
||||||
|
logoAlt: string
|
||||||
|
logoSrc: string
|
||||||
|
onDone: () => void
|
||||||
|
}) {
|
||||||
const [phase, setPhase] = useState<'logo' | 'progress' | 'shatter' | 'gone'>('logo');
|
const [phase, setPhase] = useState<'logo' | 'progress' | 'shatter' | 'gone'>('logo');
|
||||||
const called = useRef(false);
|
const called = useRef(false);
|
||||||
|
|
||||||
@@ -56,8 +64,8 @@ export default function LoadingScreen({ onDone }: { onDone: () => void }) {
|
|||||||
alignItems: 'center', justifyContent: 'center', gap: 36,
|
alignItems: 'center', justifyContent: 'center', gap: 36,
|
||||||
}}>
|
}}>
|
||||||
<motion.img
|
<motion.img
|
||||||
src="/bmp-logo.png"
|
src={logoSrc}
|
||||||
alt="BMP"
|
alt={logoAlt}
|
||||||
initial={{ opacity: 0, scale: 0.86, y: 16 }}
|
initial={{ opacity: 0, scale: 0.86, y: 16 }}
|
||||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||||
transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
|
transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
|
||||||
@@ -122,7 +130,7 @@ export default function LoadingScreen({ onDone }: { onDone: () => void }) {
|
|||||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||||
}}>
|
}}>
|
||||||
<Image unoptimized
|
<Image unoptimized
|
||||||
src="/bmp-logo.png"
|
src={logoSrc}
|
||||||
alt=""
|
alt=""
|
||||||
aria-hidden
|
aria-hidden
|
||||||
style={{ width: 'clamp(260px, 32vw, 480px)', height: 'auto', opacity: 0.9 }}
|
style={{ width: 'clamp(260px, 32vw, 480px)', height: 'auto', opacity: 0.9 }}
|
||||||
|
|||||||
Reference in New Issue
Block a user