NovaDesk Signup

Build a full-screen sign-up page as a single-page React + TypeScript + Tailwind CSS + Vite app. Use lucide-react icons only. No additional UI libraries.

Background:

• Full-viewport autoplaying, muted, looping, playsInline HTML5 <video> element covering the entire screen (absolute inset-0 w-full h-full object-cover).
• Video source URL (exact): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_191911_e7dc783e-a580-4974-8971-9796ecffd3bd.mp4
• Page root: relative min-h-screen w-screen overflow-x-hidden flex items-center justify-center bg-black py-6 sm:py-0 sm:h-screen sm:overflow-hidden.

Layout:

• Centered two-column card, max-w-4xl mx-4 rounded-2xl overflow-hidden shadow-2xl, fixed height sm:h-[660px], stacked column on mobile, row sm:flex-row on desktop, z-index 10.

Left column (form, 50% width on desktop, full width on mobile):

• Background: rgba(10, 10, 10, 0.92) (dark opaque).
• Padding: px-6 sm:px-10 py-8 sm:py-10. Flex column.
• Top: Brand lockup — custom SVG logo (36px) next to the word "NovaDesk" in brand color #DA3F23, font-semibold tracking-tight text-lg, gap-2.
• Logo SVG (viewBox 0 0 256 256, fill #DA3F23), path: M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 96 95 L 63.5 128 L 64 128 L 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 64 L 64 0 L 192 0 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z
• Form group: flex flex-col gap-5 mt-8 sm:mt-auto (pushed to bottom on desktop).
• Heading: h1 text "Sign up", text-white text-2xl font-semibold tracking-tight.
• Subtext: "Set up your profile and jump in right now.", text-zinc-400 text-sm mt-1.5 leading-relaxed.
• Email input: placeholder "Input Email", w-full bg-zinc-800/70 text-white placeholder-zinc-500 text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-1 focus:ring-zinc-500 transition-colors.
• Password input: placeholder "Choose Password", same styling plus pr-11; trailing eye/eye-off toggle button (lucide-react Eye/EyeOff, size 16, text-zinc-500 hover:text-zinc-300 transition-colors, absolute right-3, vertically centered).
• Custom checkbox + terms: hidden native input (sr-only), 16x16 rounded border square, unchecked border-zinc-600 bg-transparent, checked bg-white border-white with black SVG check mark. Label: "I Agree On The [Rules] & [Privacy Notice]" with underlined links text-zinc-200 hover:text-white. Text text-zinc-400 text-xs leading-relaxed.
• Submit button: "Launch Account", w-full bg-white text-black text-sm font-semibold rounded-lg py-2.5 hover:bg-zinc-100 active:bg-zinc-200 transition-colors.
• Divider: two flex-1 h-px bg-zinc-700/60 lines with centered "or join us via" text-zinc-500 text-xs.
• Three social buttons in a row (equal flex): Google (Chrome icon), Apple (Apple icon), Twitter (Twitter icon), each flex-1 bg-zinc-800/60 rounded-lg py-2 text-zinc-300 text-sm hover:bg-zinc-700/60 hover:text-white transition-colors, icon size 15.
• Footer line: text-zinc-500 text-xs text-center — "Already Hold An Account? [Enter]" with text-zinc-200 hover:text-white font-medium.

Right column (desktop only, 50% width):

• hidden sm:flex items-center justify-center.
• Background: rgba(255, 255, 255, 0.05) with 1px rgba(255,255,255,0.08) border on all sides (glass panel over the video).
• Contains the logo SVG at size 34, offset upward with inline style marginTop: -70px.

State (React useState):

• email, password (strings), agreed (bool), showPassword (bool).

Fonts: default Tailwind system font stack (no custom font imports). Weights used: 500 (font-medium), 600 (font-semibold). Tracking tracking-tight on headings and brand.

Animations: all transitions via Tailwind transition-colors on hover/active states for inputs, buttons, links, and checkbox. No keyframe animations.

Colors:

• Brand: #DA3F23
• Surfaces: bg-black, rgba(10,10,10,0.92), bg-zinc-800/70, bg-zinc-800/60, bg-zinc-700/60
• Text: white, zinc-200, zinc-300, zinc-400, zinc-500
• Borders: zinc-600, rgba(255,255,255,0.08)