dealroom/templates/login.templ

114 lines
6.0 KiB
Plaintext

package templates
templ Login() {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dealspace AI - Sign In</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
atlas: '#14B8A6',
}
}
}
}
</script>
</head>
<body class="min-h-screen flex">
<!-- Left: Login Form -->
<div class="flex-1 flex items-center justify-center p-8">
<div class="w-full max-w-md">
<!-- Brand -->
<div class="flex items-center gap-2 mb-8">
<div class="w-10 h-10 rounded-xl bg-teal-500 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
</div>
<span class="text-xl font-bold text-gray-900">Dealspace AI</span>
</div>
<h1 class="text-3xl font-bold text-gray-900 mb-2">Welcome back</h1>
<p class="text-gray-500 mb-8">Sign in to access your deal rooms.</p>
<!-- Login Form -->
<form action="/auth/login" method="POST" class="space-y-4">
<div>
<label class="block text-xs font-medium text-gray-600 uppercase tracking-wider mb-1.5">Email</label>
<div class="relative">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<input type="email" name="email" placeholder="you@company.com" class="w-full h-11 pl-10 pr-4 rounded-lg border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-teal-500"/>
</div>
</div>
<div>
<label class="block text-xs font-medium text-gray-600 uppercase tracking-wider mb-1.5">Password</label>
<div class="relative">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
<input type="password" name="password" placeholder="••••••••" class="w-full h-11 pl-10 pr-4 rounded-lg border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-teal-500"/>
</div>
</div>
<button type="submit" class="w-full h-11 rounded-lg bg-teal-500 text-white font-medium text-sm hover:bg-teal-600 transition flex items-center justify-center gap-2">
Sign In
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</button>
</form>
<!-- Divider -->
<div class="flex items-center gap-3 my-6">
<div class="flex-1 h-px bg-gray-200"></div>
<span class="text-xs text-gray-400">or</span>
<div class="flex-1 h-px bg-gray-200"></div>
</div>
<!-- Demo Buttons -->
<div class="grid grid-cols-2 gap-3">
<form action="/auth/demo" method="POST">
<input type="hidden" name="role" value="seller"/>
<button type="submit" class="w-full h-11 rounded-lg border border-gray-200 text-sm font-medium text-gray-700 hover:bg-gray-50 transition flex items-center justify-center gap-2">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
Seller Demo
</button>
</form>
<form action="/auth/demo" method="POST">
<input type="hidden" name="role" value="buyer"/>
<button type="submit" class="w-full h-11 rounded-lg border border-gray-200 text-sm font-medium text-gray-700 hover:bg-gray-50 transition flex items-center justify-center gap-2">
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"></path></svg>
Buyer Demo
</button>
</form>
</div>
</div>
</div>
<!-- Right: Marketing Panel -->
<div class="flex-1 bg-gray-50 flex items-center justify-center p-8 hidden lg:flex">
<div class="text-center max-w-md">
<div class="w-20 h-20 rounded-full border-4 border-teal-500/20 flex items-center justify-center mx-auto mb-8">
<svg class="w-8 h-8 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-4">AI-Powered Virtual Data Rooms</h2>
<p class="text-gray-500 mb-8">The most intelligent VDR platform for M&amp;A, PE, and capital markets. Atlas AI understands your documents, tracks diligence completeness, and surfaces insights automatically.</p>
<div class="flex justify-center gap-12">
<div>
<div class="text-2xl font-bold text-teal-500">500+</div>
<div class="text-xs text-gray-500">Active Rooms</div>
</div>
<div>
<div class="text-2xl font-bold text-teal-500">2M+</div>
<div class="text-xs text-gray-500">Documents</div>
</div>
<div>
<div class="text-2xl font-bold text-teal-500">99.9%</div>
<div class="text-xs text-gray-500">Uptime</div>
</div>
</div>
</div>
</div>
</body>
</html>
}