'use client' import { useState } from 'react' import { Eye, EyeOff, LogIn, Mail, Lock, Check } from 'lucide-react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { cn } from '@/lib/utils' import { AndroidIcon, AppleIcon, ChromeIcon, EdgeIcon, GoogleIcon, LinkedInIcon, MessengerIcon, MicrosoftIcon, OutlookIcon, PixelMark, YahooIcon, } from "@/components/brand-icons" /* Orbit satellites — left/top are percentages within the square orbit field. */ const SATELLITES = [ { id: 'edge', Icon: EdgeIcon, left: 50, top: 5, size: 12.5 }, { id: 'outlook', Icon: OutlookIcon, left: 43, top: 25, size: 11.5 }, { id: 'android', Icon: AndroidIcon, left: 9, top: 33, size: 11.5 }, { id: 'messenger', Icon: MessengerIcon, left: 87, top: 37, size: 12.5 }, { id: 'chrome', Icon: ChromeIcon, left: 18, top: 70, size: 12.5 }, { id: 'apple', Icon: AppleIcon, left: 92, top: 64, size: 11.5 }, { id: 'yahoo', Icon: YahooIcon, left: 47, top: 80, size: 11 }, { id: 'linkedin', Icon: LinkedInIcon, left: 64, top: 95, size: 11.5 }, ] as const /* Softly-tinted cells scattered through the decorative grid (px on a 34px grid), * spread around the icon — above, beside and below — not just the top band. */ const GRID_CELLS = [ { x: 102, y: 0 }, { x: 340, y: 0 }, { x: 204, y: 34 }, { x: 408, y: 34 }, { x: 68, y: 68 }, { x: 374, y: 102 }, { x: 136, y: 102 }, { x: 272, y: 68 }, ] export default function LoginPage() { const [showPassword, setShowPassword] = useState(false) const [remember, setRemember] = useState(false) return (

{/* ───────────────────────────── Left · form ───────────────────────────── */}

{/* Brand lockup */}

Pixelcode

{/* Decorative grid + icon */}

{GRID_CELLS.map((c) => ( ))}

Login to your account!

Enter your registered email address and password to login!

e.preventDefault()}> {/* Email */}

{/* Password */}

Password

{/* Remember / forgot */}

Forgot Password ?

{/* Submit */} {/* Divider */}

Or login with

{/* Social */}

{/* ──────────────────────────── Right · showcase ───────────────────────── */}

{/* center glow */}

Write Better Everywhere

{/* Orbit */}

{/* rings */} {[100, 72, 44].map((s) => ( ))} {/* hub */}

{/* satellites */} {SATELLITES.map(({ id, Icon, left, top, size }) => ( ))}

Compatible with Gmail, Outlook Web, LinkedIn and most web editors for a smooth writing experience anywhere online.

{/* carousel dots */}

) } function SocialButton({ label, children }: { label: string; children: React.ReactNode }) { return ( ) }