dealroom/templates/signup.templ

115 lines
7.4 KiB
Plaintext

package templates
templ Signup() {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dealspace AI - Organization Sign Up</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen flex">
<!-- Left: 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">Create an Organization</h1>
<p class="text-gray-500 mb-8">Set up your workspace to manage deals, invite your team, and collaborate with buyers securely.</p>
<!-- Signup Form -->
<form action="/auth/signup" method="POST" class="space-y-4">
<div>
<label class="block text-xs font-medium text-gray-600 uppercase tracking-wider mb-1.5">Organization Name</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="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>
<input type="text" name="org_name" placeholder="e.g. Apex Capital Partners" 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">Organization Type</label>
<select name="org_type" class="w-full h-11 px-4 rounded-lg border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/50 focus:border-teal-500 bg-white">
<option value="company">Company</option>
<option value="bank">Investment Bank</option>
<option value="pe_vc">PE / VC Firm</option>
</select>
</div>
<div>
<label class="block text-xs font-medium text-gray-600 uppercase tracking-wider mb-1.5">Your Name</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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
<input type="text" name="name" placeholder="John Doe" 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">Work 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>
<div class="pt-2">
<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">
Create Organization
<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>
</div>
<div class="text-center pt-4">
<span class="text-sm text-gray-500">Already have an account? </span>
<a href="/login" class="text-sm font-medium text-teal-600 hover:text-teal-500 transition-colors">Sign in</a>
</div>
</form>
</div>
</div>
<!-- Right: Features Panel -->
<div class="flex-1 bg-gray-50 flex items-center justify-center p-8 hidden lg:flex">
<div class="max-w-md space-y-6">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Everything you need to close</h2>
<div class="flex gap-4">
<div class="w-10 h-10 shrink-0 rounded-full bg-teal-100 flex items-center justify-center">
<svg class="w-5 h-5 text-teal-600" 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>
</div>
<div>
<h3 class="font-medium text-gray-900">Bank-grade Security</h3>
<p class="text-sm text-gray-500 mt-1">AES-256-GCM encryption, granular role-based access, and comprehensive audit logs.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-10 h-10 shrink-0 rounded-full bg-teal-100 flex items-center justify-center">
<svg class="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
</div>
<div>
<h3 class="font-medium text-gray-900">Multi-tenant Architecture</h3>
<p class="text-sm text-gray-500 mt-1">Manage multiple deals simultaneously. Keep buyers isolated and analytics centralized.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-10 h-10 shrink-0 rounded-full bg-teal-100 flex items-center justify-center">
<svg class="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<div>
<h3 class="font-medium text-gray-900">Atlas AI Assistant</h3>
<p class="text-sm text-gray-500 mt-1">Automated diligence tracking, instant document search, and intelligent summaries.</p>
</div>
</div>
</div>
</div>
</body>
</html>
}