mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
feat(login): rebuild the branding panel and the sign-in moment around it
The panel dropped the eight feature tiles and the self-hosted line — they read as a spec sheet on a screen whose job is to get you in. What is left is the mark, the tagline and one line of copy, centred over the map, each with a soft dark halo so the dots cannot eat the type. The tagline and subtitle never wrap: they scale with the panel instead, since it is a fixed share of the viewport. The takeoff after sign-in used to tell a different story than the screen it came from — cloud ellipses, a lone plane, a contrail. It now picks the panel up and escalates it: the same map, every route departing at once, the logo landing as the network completes, then a soft hand-off into the app.
This commit is contained in:
Maurice
+192
-412
@@ -1,28 +1,41 @@
|
||||
import {
|
||||
BookMarked,
|
||||
CheckSquare,
|
||||
ChevronDown,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Fingerprint,
|
||||
FolderOpen,
|
||||
Globe,
|
||||
KeyRound,
|
||||
Lock,
|
||||
Mail,
|
||||
Map,
|
||||
Plane,
|
||||
Route,
|
||||
Shield,
|
||||
User,
|
||||
Users,
|
||||
Wallet,
|
||||
Zap,
|
||||
} from 'lucide-react';
|
||||
import React from 'react';
|
||||
import ToggleSwitch from '../components/Settings/ToggleSwitch';
|
||||
import { SUPPORTED_LANGUAGES, useTranslation } from '../i18n';
|
||||
import { useLogin } from './login/useLogin';
|
||||
import LoginWorld from './login/LoginWorld';
|
||||
|
||||
/** Fixed so the sky does not reshuffle on every render. */
|
||||
const STARFIELD = [
|
||||
{ top: 6, left: 12, size: 1, opacity: 0.3, delay: 0 },
|
||||
{ top: 11, left: 68, size: 2, opacity: 0.22, delay: 1.4 },
|
||||
{ top: 17, left: 34, size: 1, opacity: 0.35, delay: 2.6 },
|
||||
{ top: 22, left: 84, size: 1, opacity: 0.25, delay: 0.7 },
|
||||
{ top: 28, left: 19, size: 2, opacity: 0.2, delay: 3.1 },
|
||||
{ top: 33, left: 57, size: 1, opacity: 0.32, delay: 1.9 },
|
||||
{ top: 39, left: 91, size: 1, opacity: 0.24, delay: 2.2 },
|
||||
{ top: 46, left: 8, size: 1, opacity: 0.28, delay: 0.4 },
|
||||
{ top: 52, left: 73, size: 2, opacity: 0.18, delay: 3.6 },
|
||||
{ top: 58, left: 42, size: 1, opacity: 0.3, delay: 1.1 },
|
||||
{ top: 64, left: 88, size: 1, opacity: 0.26, delay: 2.9 },
|
||||
{ top: 71, left: 26, size: 1, opacity: 0.22, delay: 0.9 },
|
||||
{ top: 77, left: 63, size: 1, opacity: 0.3, delay: 3.3 },
|
||||
{ top: 83, left: 15, size: 2, opacity: 0.2, delay: 1.7 },
|
||||
{ top: 88, left: 79, size: 1, opacity: 0.27, delay: 2.4 },
|
||||
{ top: 93, left: 48, size: 1, opacity: 0.23, delay: 0.2 },
|
||||
];
|
||||
|
||||
export default function LoginPage(): React.ReactElement {
|
||||
const { t, language } = useTranslation();
|
||||
@@ -96,190 +109,110 @@ export default function LoginPage(): React.ReactElement {
|
||||
|
||||
if (showTakeoff) {
|
||||
return (
|
||||
<div className="takeoff-overlay" style={{ position: 'fixed', inset: 0, zIndex: 99999, overflow: 'hidden' }}>
|
||||
{/* Sky gradient */}
|
||||
<div className="takeoff-sky" style={{ position: 'absolute', inset: 0 }} />
|
||||
|
||||
{/* Stars */}
|
||||
{Array.from({ length: 60 }, (_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="takeoff-star"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: Math.random() > 0.7 ? 3 : 1.5,
|
||||
height: Math.random() > 0.7 ? 3 : 1.5,
|
||||
borderRadius: '50%',
|
||||
background: 'white',
|
||||
top: `${Math.random() * 100}%`,
|
||||
left: `${Math.random() * 100}%`,
|
||||
animationDelay: `${0.3 + Math.random() * 0.5}s, ${Math.random() * 1}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Clouds rushing past */}
|
||||
{[0, 1, 2, 3, 4].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="takeoff-cloud"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: 120 + i * 40,
|
||||
height: 40 + i * 10,
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.15)',
|
||||
filter: 'blur(8px)',
|
||||
right: -200,
|
||||
top: `${25 + i * 12}%`,
|
||||
animationDelay: `${0.3 + i * 0.25}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Speed lines */}
|
||||
{Array.from({ length: 12 }, (_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="takeoff-speedline"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: 80 + Math.random() * 120,
|
||||
height: 1.5,
|
||||
background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
|
||||
top: `${10 + Math.random() * 80}%`,
|
||||
right: -200,
|
||||
animationDelay: `${0.5 + i * 0.12}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Plane */}
|
||||
<div
|
||||
className="takeoff-plane"
|
||||
style={{ position: 'absolute', left: '50%', bottom: '10%', transform: 'translate(-50%, 0)' }}
|
||||
>
|
||||
<svg viewBox="0 0 480 120" style={{ width: 200, filter: 'drop-shadow(0 0 20px rgba(255,255,255,0.3))' }}>
|
||||
<g fill="white" transform="translate(240,60) rotate(-12)">
|
||||
<ellipse cx="0" cy="0" rx="120" ry="12" />
|
||||
<path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
|
||||
<path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
|
||||
<path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
|
||||
<path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
|
||||
<ellipse cx="60" cy="0" rx="18" ry="8" />
|
||||
</g>
|
||||
</svg>
|
||||
<div
|
||||
className="takeoff-overlay"
|
||||
style={{ position: 'fixed', inset: 0, zIndex: 99999, overflow: 'hidden', background: '#070c1a' }}
|
||||
>
|
||||
{/* Signing in picks up exactly where the login panel left off: the same dot
|
||||
map, except now every route departs at once. The network finishing is
|
||||
the moment — no separate imagery, no plane flying off alone. */}
|
||||
<div className="takeoff-world">
|
||||
<LoginWorld variant="takeoff" />
|
||||
</div>
|
||||
|
||||
{/* Contrail */}
|
||||
<div
|
||||
className="takeoff-trail"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
bottom: '8%',
|
||||
width: 3,
|
||||
height: 0,
|
||||
background: 'linear-gradient(to top, transparent, rgba(255,255,255,0.5))',
|
||||
transformOrigin: 'bottom center',
|
||||
}}
|
||||
/>
|
||||
{/* The colour rises with the departures rather than sitting there from the start. */}
|
||||
<div className="takeoff-aurora takeoff-aurora-a" />
|
||||
<div className="takeoff-aurora takeoff-aurora-b" />
|
||||
|
||||
{/* Logo fade in + burst */}
|
||||
<div
|
||||
className="takeoff-logo"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<img src="/logo-light.svg" alt="TREK" style={{ height: 72 }} />
|
||||
<div className="takeoff-mark">
|
||||
<img src="/logo-light.svg" alt="TREK" style={{ height: 'clamp(58px, 5.2vw, 84px)' }} />
|
||||
<p
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: 'calc(20px * var(--fs-scale-title, 1))',
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
margin: '12px 0 0',
|
||||
fontSize: 'calc(clamp(15px, 1.35vw, 21px) * var(--fs-scale-title, 1))',
|
||||
color: 'rgba(255,255,255,0.62)',
|
||||
fontFamily: "'MuseoModerno', sans-serif",
|
||||
textTransform: 'lowercase',
|
||||
whiteSpace: 'nowrap',
|
||||
textShadow: '0 2px 10px rgba(4,8,20,0.6)',
|
||||
}}
|
||||
>
|
||||
{t('login.tagline')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Hands over to the app instead of cutting to it. */}
|
||||
<div className="takeoff-veil" />
|
||||
|
||||
<style>{`
|
||||
.takeoff-sky {
|
||||
background: linear-gradient(to top, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #0a0a23 100%);
|
||||
animation: skyShift 2.6s ease-in-out forwards;
|
||||
}
|
||||
@keyframes skyShift {
|
||||
0% { background: linear-gradient(to top, #0a0a23 0%, #0f172a 40%, #111827 100%); }
|
||||
100% { background: linear-gradient(to top, #000011 0%, #000016 50%, #000011 100%); }
|
||||
}
|
||||
|
||||
.takeoff-star {
|
||||
.takeoff-world {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
animation: starAppear 0.5s ease-out forwards, starTwinkle 2s ease-in-out infinite alternate;
|
||||
animation: takeoffWorld 2600ms cubic-bezier(0.22,1,0.36,1) forwards;
|
||||
}
|
||||
@keyframes starAppear {
|
||||
0% { opacity: 0; transform: scale(0); }
|
||||
100% { opacity: 0.7; transform: scale(1); }
|
||||
}
|
||||
@keyframes starTwinkle {
|
||||
0% { opacity: 0.3; }
|
||||
100% { opacity: 0.9; }
|
||||
@keyframes takeoffWorld {
|
||||
0% { opacity: 0; transform: scale(1.14); }
|
||||
18% { opacity: 1; }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.takeoff-cloud {
|
||||
animation: cloudRush 0.6s ease-in forwards;
|
||||
}
|
||||
@keyframes cloudRush {
|
||||
0% { right: -200px; opacity: 0; }
|
||||
20% { opacity: 0.4; }
|
||||
100% { right: 120%; opacity: 0; }
|
||||
}
|
||||
|
||||
.takeoff-speedline {
|
||||
animation: speedRush 0.4s ease-in forwards;
|
||||
}
|
||||
@keyframes speedRush {
|
||||
0% { right: -200px; opacity: 0; }
|
||||
30% { opacity: 0.6; }
|
||||
100% { right: 120%; opacity: 0; }
|
||||
}
|
||||
|
||||
.takeoff-plane {
|
||||
animation: planeUp 1s ease-in forwards;
|
||||
}
|
||||
@keyframes planeUp {
|
||||
0% { transform: translate(-50%, 0) rotate(0deg) scale(1); bottom: 8%; left: 50%; opacity: 1; }
|
||||
100% { transform: translate(-50%, 0) rotate(-22deg) scale(0.15); bottom: 120%; left: 58%; opacity: 0; }
|
||||
}
|
||||
|
||||
.takeoff-trail {
|
||||
animation: trailGrow 0.9s ease-out 0.15s forwards;
|
||||
}
|
||||
@keyframes trailGrow {
|
||||
0% { height: 0; opacity: 0; transform: translateX(-50%) rotate(-5deg); }
|
||||
30% { height: 150px; opacity: 0.6; }
|
||||
60% { height: 350px; opacity: 0.4; }
|
||||
100% { height: 600px; opacity: 0; transform: translateX(-50%) rotate(-8deg); }
|
||||
}
|
||||
|
||||
.takeoff-logo {
|
||||
.takeoff-aurora {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(110px);
|
||||
opacity: 0;
|
||||
animation: logoReveal 0.5s ease-out 0.9s forwards;
|
||||
}
|
||||
@keyframes logoReveal {
|
||||
0% { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
|
||||
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
.takeoff-aurora-a {
|
||||
width: 46vw; height: 46vw; top: -8%; left: 4%;
|
||||
background: radial-gradient(circle, rgba(79,70,229,0.55) 0%, rgba(79,70,229,0) 70%);
|
||||
animation: takeoffGlow 2600ms ease-out forwards;
|
||||
}
|
||||
.takeoff-aurora-b {
|
||||
width: 38vw; height: 38vw; bottom: -10%; right: 6%;
|
||||
background: radial-gradient(circle, rgba(6,182,212,0.4) 0%, rgba(6,182,212,0) 72%);
|
||||
animation: takeoffGlow 2600ms ease-out 220ms forwards;
|
||||
}
|
||||
@keyframes takeoffGlow {
|
||||
0% { opacity: 0; }
|
||||
55% { opacity: 1; }
|
||||
100% { opacity: 0.75; }
|
||||
}
|
||||
|
||||
.takeoff-mark {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
filter: drop-shadow(0 2px 12px rgba(4,8,20,0.6)) drop-shadow(0 0 40px rgba(4,8,20,0.5));
|
||||
animation: takeoffMark 2600ms cubic-bezier(0.22,1,0.36,1) forwards;
|
||||
}
|
||||
@keyframes takeoffMark {
|
||||
0%, 22% { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
|
||||
48% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
||||
100% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
|
||||
}
|
||||
|
||||
.takeoff-veil {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #f9fafb;
|
||||
opacity: 0;
|
||||
animation: takeoffVeil 2600ms ease-in forwards;
|
||||
}
|
||||
@keyframes takeoffVeil {
|
||||
0%, 82% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.takeoff-world, .takeoff-aurora, .takeoff-mark { animation: none; opacity: 1; transform: none; }
|
||||
.takeoff-mark { transform: translate(-50%, -50%); }
|
||||
.takeoff-veil { animation: takeoffVeil 2600ms linear forwards; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
@@ -389,7 +322,7 @@ export default function LoginPage(): React.ReactElement {
|
||||
style={{
|
||||
display: 'none',
|
||||
width: '55%',
|
||||
background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)',
|
||||
background: '#070c1a',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
@@ -401,240 +334,87 @@ export default function LoginPage(): React.ReactElement {
|
||||
>
|
||||
<style>{`@media(min-width:1024px){.lg-panel{display:flex!important}}`}</style>
|
||||
|
||||
{/* Stars */}
|
||||
{/* Aurora — three drifting colour fields. They are the whole background:
|
||||
deep indigo, a cold cyan and a warm violet, blurred past recognition so
|
||||
what is left is the gradient, not the shapes. */}
|
||||
<div className="login-aurora login-aurora-a" />
|
||||
<div className="login-aurora login-aurora-b" />
|
||||
<div className="login-aurora login-aurora-c" />
|
||||
|
||||
{/* Depth: a handful of pinpricks, far enough back to read as distance. */}
|
||||
<div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
|
||||
{Array.from({ length: 40 }, (_, i) => (
|
||||
{STARFIELD.map((s, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="login-star"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: Math.random() > 0.7 ? 2 : 1,
|
||||
height: Math.random() > 0.7 ? 2 : 1,
|
||||
width: s.size,
|
||||
height: s.size,
|
||||
borderRadius: '50%',
|
||||
background: 'white',
|
||||
opacity: 0.15 + Math.random() * 0.25,
|
||||
top: `${Math.random() * 70}%`,
|
||||
left: `${Math.random() * 100}%`,
|
||||
animationDelay: `${Math.random() * 4}s`,
|
||||
opacity: s.opacity,
|
||||
top: `${s.top}%`,
|
||||
left: `${s.left}%`,
|
||||
animationDelay: `${s.delay}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Animated glow orbs */}
|
||||
<div
|
||||
className="login-orb1"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: 500,
|
||||
height: 500,
|
||||
borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%)',
|
||||
filter: 'blur(80px)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="login-orb2"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: 350,
|
||||
height: 350,
|
||||
borderRadius: '50%',
|
||||
background: 'radial-gradient(circle, rgba(14,165,233,0.08) 0%, transparent 70%)',
|
||||
filter: 'blur(60px)',
|
||||
}}
|
||||
/>
|
||||
{/* Coastlines as a dot map, with routes lighting up between cities across
|
||||
it. The geometry is TREK's own Atlas bundle, baked in at build time
|
||||
because this screen is unauthenticated. */}
|
||||
<LoginWorld />
|
||||
|
||||
{/* Animated planes — realistic silhouettes at different sizes/speeds */}
|
||||
<div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
|
||||
{/* Plane 1 — large, slow, foreground */}
|
||||
<svg
|
||||
className="login-plane1"
|
||||
viewBox="0 0 480 120"
|
||||
style={{ position: 'absolute', width: 48, opacity: 0.12 }}
|
||||
>
|
||||
<g fill="white" transform="translate(240,60) rotate(-12)">
|
||||
<ellipse cx="0" cy="0" rx="120" ry="12" />
|
||||
<path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
|
||||
<path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
|
||||
<path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
|
||||
<path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
|
||||
<ellipse cx="60" cy="0" rx="18" ry="8" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{/* Plane 2 — small, faster, higher */}
|
||||
<svg
|
||||
className="login-plane2"
|
||||
viewBox="0 0 480 120"
|
||||
style={{ position: 'absolute', width: 24, opacity: 0.08 }}
|
||||
>
|
||||
<g fill="white" transform="translate(240,60) rotate(-12)">
|
||||
<ellipse cx="0" cy="0" rx="120" ry="12" />
|
||||
<path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
|
||||
<path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
|
||||
<ellipse cx="60" cy="0" rx="18" ry="8" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{/* Plane 3 — medium, mid-speed */}
|
||||
<svg
|
||||
className="login-plane3"
|
||||
viewBox="0 0 480 120"
|
||||
style={{ position: 'absolute', width: 32, opacity: 0.06 }}
|
||||
>
|
||||
<g fill="white" transform="translate(240,60) rotate(-5)">
|
||||
<ellipse cx="0" cy="0" rx="120" ry="12" />
|
||||
<path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
|
||||
<path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
|
||||
<path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
|
||||
<path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
|
||||
<ellipse cx="60" cy="0" rx="18" ry="8" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{/* Plane 4 — tiny, fast, high */}
|
||||
<svg
|
||||
className="login-plane4"
|
||||
viewBox="0 0 480 120"
|
||||
style={{ position: 'absolute', width: 16, opacity: 0.07 }}
|
||||
>
|
||||
<g fill="white" transform="translate(240,60) rotate(-10)">
|
||||
<ellipse cx="0" cy="0" rx="120" ry="12" />
|
||||
<path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
|
||||
<path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
|
||||
<ellipse cx="60" cy="0" rx="18" ry="8" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{/* Plane 5 — medium, right to left, lower */}
|
||||
<svg
|
||||
className="login-plane5"
|
||||
viewBox="0 0 480 120"
|
||||
style={{ position: 'absolute', width: 28, opacity: 0.05 }}
|
||||
>
|
||||
<g fill="white" transform="translate(240,60) rotate(8) scale(-1,1)">
|
||||
<ellipse cx="0" cy="0" rx="120" ry="12" />
|
||||
<path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
|
||||
<path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
|
||||
<path d="M-100,-5 L-120,-30 L-108,-30 L-90,-8 Z" />
|
||||
<path d="M-100,5 L-120,30 L-108,30 L-90,8 Z" />
|
||||
<ellipse cx="60" cy="0" rx="18" ry="8" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{/* Plane 6 — tiny distant */}
|
||||
<svg
|
||||
className="login-plane6"
|
||||
viewBox="0 0 480 120"
|
||||
style={{ position: 'absolute', width: 12, opacity: 0.04 }}
|
||||
>
|
||||
<g fill="white" transform="translate(240,60) rotate(-15)">
|
||||
<ellipse cx="0" cy="0" rx="120" ry="12" />
|
||||
<path d="M-20,-10 L-60,-55 L-40,-55 L0,-15 Z" />
|
||||
<path d="M-20,10 L-60,55 L-40,55 L0,15 Z" />
|
||||
<ellipse cx="60" cy="0" rx="18" ry="8" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 1, maxWidth: 560, textAlign: 'center' }}>
|
||||
{/* Logo */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 48 }}>
|
||||
<img src="/logo-light.svg" alt="TREK" style={{ height: 64 }} />
|
||||
{/* No max-width: the tagline stays on one line, so the block is allowed to
|
||||
use the whole panel rather than wrapping inside it. */}
|
||||
<div style={{ position: 'relative', zIndex: 1, maxWidth: '100%', textAlign: 'center' }}>
|
||||
{/* Logo. The soft dark halo is what separates it from the dot map behind —
|
||||
wide and low-opacity rather than a hard drop shadow, so it reads as the
|
||||
map dimming around the mark instead of an outline. */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
|
||||
<img
|
||||
src="/logo-light.svg"
|
||||
alt="TREK"
|
||||
style={{
|
||||
height: 'clamp(58px, 5.2vw, 84px)',
|
||||
filter: 'drop-shadow(0 2px 10px rgba(4,8,20,0.55)) drop-shadow(0 0 34px rgba(4,8,20,0.45))',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
style={{
|
||||
margin: '0 0 12px',
|
||||
fontSize: 'calc(36px * var(--fs-scale-title, 1))',
|
||||
margin: 0,
|
||||
// Scales with the panel so it stays on one line in every language.
|
||||
fontSize: 'calc(clamp(32px, 2.95vw, 46px) * var(--fs-scale-title, 1))',
|
||||
fontWeight: 700,
|
||||
color: 'white',
|
||||
lineHeight: 1.15,
|
||||
letterSpacing: '-0.02em',
|
||||
fontFamily: "'MuseoModerno', sans-serif",
|
||||
textTransform: 'lowercase',
|
||||
whiteSpace: 'nowrap',
|
||||
textShadow: '0 2px 10px rgba(4,8,20,0.55), 0 0 34px rgba(4,8,20,0.5)',
|
||||
}}
|
||||
>
|
||||
{t('login.tagline')}
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
margin: '0 0 44px',
|
||||
fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))',
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
margin: '10px 0 0',
|
||||
// Must never wrap: the panel is a fixed share of the viewport, so the
|
||||
// size follows it and a long translation shrinks instead of breaking.
|
||||
fontSize: 'calc(clamp(11px, 1.05vw, 16px) * var(--fs-scale-subtitle, 1))',
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'rgba(255,255,255,0.62)',
|
||||
lineHeight: 1.7,
|
||||
textShadow: '0 1px 8px rgba(4,8,20,0.6), 0 0 24px rgba(4,8,20,0.45)',
|
||||
}}
|
||||
>
|
||||
{t('login.description')}
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
|
||||
{[
|
||||
{ Icon: Map, label: t('login.features.maps'), desc: t('login.features.mapsDesc') },
|
||||
{ Icon: Zap, label: t('login.features.realtime'), desc: t('login.features.realtimeDesc') },
|
||||
{ Icon: Wallet, label: t('login.features.budget'), desc: t('login.features.budgetDesc') },
|
||||
{ Icon: Users, label: t('login.features.collab'), desc: t('login.features.collabDesc') },
|
||||
{ Icon: CheckSquare, label: t('login.features.packing'), desc: t('login.features.packingDesc') },
|
||||
{ Icon: BookMarked, label: t('login.features.bookings'), desc: t('login.features.bookingsDesc') },
|
||||
{ Icon: FolderOpen, label: t('login.features.files'), desc: t('login.features.filesDesc') },
|
||||
{ Icon: Route, label: t('login.features.routes'), desc: t('login.features.routesDesc') },
|
||||
].map(({ Icon, label, desc }) => (
|
||||
<div
|
||||
key={label}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.04)',
|
||||
borderRadius: 14,
|
||||
padding: '14px 12px',
|
||||
border: '1px solid rgba(255,255,255,0.06)',
|
||||
textAlign: 'left',
|
||||
transition:
|
||||
'background 200ms cubic-bezier(0.23,1,0.32,1), border-color 200ms cubic-bezier(0.23,1,0.32,1)',
|
||||
}}
|
||||
onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
|
||||
e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)';
|
||||
}}
|
||||
onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
|
||||
e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)';
|
||||
}}
|
||||
>
|
||||
<Icon size={17} style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 7 }} />
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'calc(12.5px * var(--fs-scale-body, 1))',
|
||||
color: 'white',
|
||||
fontWeight: 600,
|
||||
marginBottom: 2,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
|
||||
color: 'rgba(255,255,255,0.35)',
|
||||
lineHeight: 1.4,
|
||||
}}
|
||||
>
|
||||
{desc}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p
|
||||
style={{
|
||||
marginTop: 36,
|
||||
fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))',
|
||||
color: 'rgba(255,255,255,0.25)',
|
||||
letterSpacing: '0.03em',
|
||||
}}
|
||||
>
|
||||
{t('login.selfHosted')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1441,20 +1221,45 @@ export default function LoginPage(): React.ReactElement {
|
||||
|
||||
<style>{`
|
||||
@keyframes spin { to { transform: rotate(360deg) } }
|
||||
@keyframes orbFloat1 {
|
||||
0%, 100% { top: 15%; left: 30%; }
|
||||
25% { top: 25%; left: 55%; }
|
||||
50% { top: 45%; left: 40%; }
|
||||
75% { top: 20%; left: 20%; }
|
||||
|
||||
/* ── Branding panel ──────────────────────────────────────────────────
|
||||
Aurora: three colour fields, blurred far past their own shape, drifting
|
||||
on different periods so the gradient never repeats a frame exactly. */
|
||||
.login-aurora {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(90px);
|
||||
will-change: transform;
|
||||
}
|
||||
@keyframes orbFloat2 {
|
||||
0%, 100% { bottom: 20%; right: 15%; }
|
||||
25% { bottom: 35%; right: 35%; }
|
||||
50% { bottom: 15%; right: 45%; }
|
||||
75% { bottom: 40%; right: 20%; }
|
||||
.login-aurora-a {
|
||||
width: 620px; height: 620px; top: -12%; left: -14%;
|
||||
background: radial-gradient(circle, rgba(79,70,229,0.55) 0%, rgba(79,70,229,0) 68%);
|
||||
animation: auroraA 34s ease-in-out infinite;
|
||||
}
|
||||
.login-aurora-b {
|
||||
width: 520px; height: 520px; bottom: -16%; right: -10%;
|
||||
background: radial-gradient(circle, rgba(6,182,212,0.4) 0%, rgba(6,182,212,0) 70%);
|
||||
animation: auroraB 44s ease-in-out infinite;
|
||||
}
|
||||
.login-aurora-c {
|
||||
width: 460px; height: 460px; top: 42%; left: 34%;
|
||||
background: radial-gradient(circle, rgba(168,85,247,0.32) 0%, rgba(168,85,247,0) 72%);
|
||||
animation: auroraC 52s ease-in-out infinite;
|
||||
}
|
||||
@keyframes auroraA {
|
||||
0%, 100% { transform: translate3d(0,0,0) scale(1); }
|
||||
33% { transform: translate3d(14%, 18%, 0) scale(1.14); }
|
||||
66% { transform: translate3d(26%, 4%, 0) scale(0.94); }
|
||||
}
|
||||
@keyframes auroraB {
|
||||
0%, 100% { transform: translate3d(0,0,0) scale(1.05); }
|
||||
40% { transform: translate3d(-22%, -14%, 0) scale(0.9); }
|
||||
70% { transform: translate3d(-8%, -28%, 0) scale(1.2); }
|
||||
}
|
||||
@keyframes auroraC {
|
||||
0%, 100% { transform: translate3d(0,0,0) scale(0.95); }
|
||||
50% { transform: translate3d(-18%, 12%, 0) scale(1.25); }
|
||||
}
|
||||
.login-orb1 { animation: orbFloat1 20s ease-in-out infinite; }
|
||||
.login-orb2 { animation: orbFloat2 25s ease-in-out infinite; }
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.15; }
|
||||
@@ -1462,36 +1267,11 @@ export default function LoginPage(): React.ReactElement {
|
||||
}
|
||||
.login-star { animation: twinkle 3s ease-in-out infinite; }
|
||||
|
||||
@keyframes plane1Move {
|
||||
0% { left: -8%; top: 30%; transform: rotate(-8deg); }
|
||||
100% { left: 108%; top: 10%; transform: rotate(-12deg); }
|
||||
|
||||
/* Ambient only — the world map holds still. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.login-aurora, .login-star { animation: none; }
|
||||
}
|
||||
@keyframes plane2Move {
|
||||
0% { right: -5%; top: 18%; transform: rotate(5deg); }
|
||||
100% { right: 110%; top: 8%; transform: rotate(3deg); }
|
||||
}
|
||||
@keyframes plane3Move {
|
||||
0% { left: -6%; top: 55%; transform: rotate(-10deg); }
|
||||
100% { left: 110%; top: 35%; transform: rotate(-6deg); }
|
||||
}
|
||||
@keyframes plane4Move {
|
||||
0% { left: -4%; top: 8%; transform: rotate(-3deg); }
|
||||
100% { left: 110%; top: 5%; transform: rotate(-5deg); }
|
||||
}
|
||||
@keyframes plane5Move {
|
||||
0% { right: -6%; top: 65%; transform: rotate(3deg); }
|
||||
100% { right: 110%; top: 50%; transform: rotate(-2deg); }
|
||||
}
|
||||
@keyframes plane6Move {
|
||||
0% { left: -3%; top: 75%; transform: rotate(-7deg); }
|
||||
100% { left: 110%; top: 58%; transform: rotate(-5deg); }
|
||||
}
|
||||
.login-plane1 { animation: plane1Move 24s ease-in-out infinite; }
|
||||
.login-plane2 { animation: plane2Move 18s ease-in-out infinite; animation-delay: 6s; }
|
||||
.login-plane3 { animation: plane3Move 30s ease-in-out infinite; animation-delay: 12s; }
|
||||
.login-plane4 { animation: plane4Move 14s ease-in-out infinite; animation-delay: 3s; }
|
||||
.login-plane5 { animation: plane5Move 22s ease-in-out infinite; animation-delay: 9s; }
|
||||
.login-plane6 { animation: plane6Move 32s ease-in-out infinite; animation-delay: 16s; }
|
||||
|
||||
`}</style>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user