remco/Epicnabbo-Catalogus-Updated-Daily
1
0 Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(landing): add micro-interactions and polish public pages

Browse Source
This commit is contained in:
openhands committed 2026-10-06 22:59:03 +02:00
1 parent 57710a7fe3
commit 3265c149da
8 files changed
+235 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/login/page.tsx
+25 -1
View File
@@ -47,7 +47,31 @@ export default async function LoginPage() {
return (
<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
<AuthTopBar hotelName={hotelName} logo={logo} />
<div className="relative">
<div
aria-hidden="true"
className="pointer-events-none absolute -inset-x-16 -top-24 overflow-hidden"
>
<div
className="aurora-blob -left-20 top-0 h-80 w-80"
style={{
background:
"color-mix(in srgb, var(--color-primary) 34%, transparent)",
opacity: 0.45,
}}
/>
<div
className="aurora-blob -right-20 top-6 h-72 w-72"
style={{
background:
"color-mix(in srgb, var(--color-accent) 30%, transparent)",
animationDelay: "-7s",
opacity: 0.4,
}}
/>
</div>
<AuthTopBar hotelName={hotelName} logo={logo} />
</div>
<Reveal>
<div className="flex flex-col gap-8 lg:flex-row lg:items-start">
src/app/(site)/page.tsx
+26 -17
View File
File diff suppressed because it is too large. Load diff
src/app/(site)/register/page.tsx
+25 -1
View File
@@ -57,7 +57,31 @@ export default async function RegisterPage() {
return (
<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
<AuthTopBar hotelName={hotelName} logo={logo} />
<div className="relative">
<div
aria-hidden="true"
className="pointer-events-none absolute -inset-x-16 -top-24 overflow-hidden"
>
<div
className="aurora-blob -left-20 top-0 h-80 w-80"
style={{
background:
"color-mix(in srgb, var(--color-primary) 34%, transparent)",
opacity: 0.45,
}}
/>
<div
className="aurora-blob -right-20 top-6 h-72 w-72"
style={{
background:
"color-mix(in srgb, var(--color-accent) 30%, transparent)",
animationDelay: "-7s",
opacity: 0.4,
}}
/>
</div>
<AuthTopBar hotelName={hotelName} logo={logo} />
</div>
<Reveal>
<div className="flex flex-col gap-8 lg:flex-row lg:items-start">
src/app/globals.css
+54
View File
@@ -2837,3 +2837,57 @@ html {
background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
}
}
/* Mouse-tracking spotlight glow for premium cards. The dot position comes
from CSS custom properties updated on pointermove (see SpotlightCard). */
.spotlight {
position: relative;
isolation: isolate;
}
.spotlight::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
background: radial-gradient(
340px circle at var(--spot-x, 50%) var(--spot-y, 50%),
color-mix(in srgb, var(--color-primary) 20%, transparent),
transparent 70%
);
z-index: -1;
}
.spotlight:hover::before,
.spotlight:focus-within::before {
opacity: 1;
}
/* Section number mark (01 / 02 / …) used as a faint watermark in headers. */
.number-mark {
font-family: var(--font-nunito);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
background: linear-gradient(
120deg,
color-mix(in srgb, var(--color-primary) 65%, transparent),
color-mix(in srgb, var(--color-accent) 50%, transparent)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
.spotlight::before {
transition: none;
}
.animate-fade-in-up,
.animate-scale-in,
.animate-count {
animation: none;
}
}