6f8b8da151
All checks were successful
Deploy to Production / deploy (push) Successful in 1m1s
Two coordinated polish moves: 1. **<PulseLink> / <PulseButton>** — new `apps/web/components/pulse.tsx`. Click anywhere on a wrapped link or button and a small indigo dot detonates from the click point, scaling 1x→80x over 650ms before fading to transparent. Same visual language as the hero load-in glow — the click effectively says "this is the brand reaching back." The dot lives in a `pointer-events: none` overlay, so it never blocks the underlying navigation. `overflow-hidden + relative` are added to the host so the bloom stays inside the rounded shape. `glow-pulse` keyframe sits in globals.css next to the existing `pulse-dot` / `shimmer` / `fade-in` definitions; reduced-motion suppresses the animation to instant-opacity-0 so the click flow is preserved without the bloom. Wired into the highest-conversion CTAs only — the user explicitly asked "wo's Sinn macht": - Hero "Start building free" + "Read the docs" - Marketing header Login / Dashboard button - Dashboard header "+ New server" pill Deliberately NOT applied to dashboard nav links, logout, destructive buttons, form internals, carousel dots — pulse on every click would be noise. 2. **Hero fills 100svh − nav** (`min-height: calc(100svh - 3rem)`). `svh` (small viewport height) instead of `vh` so the hero doesn't jump when the mobile address bar hides/shows. The 3rem subtracts the sticky marketing nav (h-12 = 48px), so the hero ends right at the loadscreen's natural bottom edge. `flex items-center` plus the inner grid's existing `md:items-center` keep the content vertically centred inside the tall section. The ParticleHero background now has cinematic-scale room and the indigo radial-glow + dot-mask read as the dominant background motif — which is the effect the user loved at load-in. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { PulseLink } from '@/components/pulse';
|
|
import { apiFetch } from '@/lib/api';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
/**
|
|
* Marketing-header CTA that reflects the session: logged-out visitors see a
|
|
* "Login" button, signed-in users see "Dashboard". Same button slot so the
|
|
* header layout doesn't shift between states.
|
|
*
|
|
* While the auth probe is in flight (`authed === null`) we default to the
|
|
* logged-out label — most marketing-page visitors are anonymous, so this
|
|
* avoids a "Dashboard → Login" flicker for them. Authed users see a single
|
|
* "Login → Dashboard" swap once the /v1/auth/me round-trip completes.
|
|
*/
|
|
export function MarketingAuthButtons() {
|
|
const [authed, setAuthed] = useState<boolean | null>(null);
|
|
|
|
useEffect(() => {
|
|
apiFetch('/v1/auth/me')
|
|
.then(() => setAuthed(true))
|
|
.catch(() => setAuthed(false));
|
|
}, []);
|
|
|
|
const showDashboard = authed === true;
|
|
|
|
return (
|
|
<PulseLink
|
|
href={showDashboard ? '/dashboard' : '/login'}
|
|
className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
|
|
>
|
|
{showDashboard ? 'Dashboard' : 'Login'}
|
|
</PulseLink>
|
|
);
|
|
}
|