openhands
741f01e897
Replaced the classic Habbo landing style on the home, login and register pages with a modern premium dark-gaming look: always-dark hero canvas with brand glows, grid overlay and ambient orbs, glass panels, gradient text and floating art. Adds shared LandingTopBar, AuthShell and BrandFrank components plus reusable premium CSS utilities. Build, typecheck and lint pass.
33 lines
1005 B
TypeScript
33 lines
1005 B
TypeScript
import Image from "next/image";
|
|
|
|
/**
|
|
* Floating brand art for the premium auth pages: the welcome character
|
|
* hovers over a pulsing primary halo with a faint slow-orbiting ring.
|
|
*/
|
|
export function BrandFrank({ size = 150 }: { size?: number }) {
|
|
return (
|
|
<div className="relative flex items-center justify-center">
|
|
<style>{`@keyframes spin-slow { to { transform: rotate(360deg); } }`}</style>
|
|
<span className="hero-halo h-40 w-40 sm:h-48 sm:w-48" />
|
|
<span
|
|
className="absolute h-52 w-52 rounded-full border border-dashed sm:h-64 sm:w-64"
|
|
style={{
|
|
borderColor: "color-mix(in srgb, #ffffff 16%, transparent)",
|
|
animation: "spin-slow 28s linear infinite",
|
|
}}
|
|
/>
|
|
<div className="animate-float relative z-10 drop-shadow-[0_20px_30px_rgba(0,0,0,0.45)]">
|
|
<Image
|
|
src="/assets/images/FrankwithBag.gif"
|
|
alt=""
|
|
width={size}
|
|
height={Math.round(size * 1.29)}
|
|
className="object-contain"
|
|
unoptimized
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|