feat(site): redesign home, login and register with premium dark gaming theme
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.
This commit is contained in:
1 parent
4d720ee03c
commit
741f01e897
8 files changed
+694
-657
No files matched your search
@@ -0,0 +1,32 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user