devindulitha/shopnest-commerce-cloud
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Sign Up | ShopNest</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11</head>12<body class="bg-gray-50">13 <custom-navbar></custom-navbar>14 15 <main class="flex items-center justify-center min-h-[calc(100vh-160px)]">16 <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-sm">17 <div class="text-center mb-8">18 <i data-feather="user-plus" class="w-12 h-12 mx-auto text-blue-600 mb-4"></i>19 <h1 class="text-2xl font-bold text-gray-900">Create your account</h1>20 <p class="text-gray-600 mt-2">Get started with your 14-day free trial</p>21 </div>22 23 <form class="space-y-4" id="signupForm">24 <div class="grid grid-cols-2 gap-4">25 <div>26 <label for="firstName" class="block text-sm font-medium text-gray-700 mb-1">First name</label>27 <input type="text" id="firstName" name="firstName" required 28 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">29 </div>30 <div>31 <label for="lastName" class="block text-sm font-medium text-gray-700 mb-1">Last name</label>32 <input type="text" id="lastName" name="lastName" required 33 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">34 </div>35 </div>36 37 <div>38 <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email address</label>39 <div class="relative">40 <input type="email" id="email" name="email" required 41 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"42 placeholder="you@example.com">43 <i data-feather="mail" class="absolute right-3 top-3 text-gray-400"></i>44 </div>45 </div>46 47 <div>48 <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>49 <div class="relative">50 <input type="password" id="password" name="password" required 51 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"52 placeholder="••••••••">53 <i data-feather="lock" class="absolute right-3 top-3 text-gray-400"></i>54 </div>55 <p class="mt-1 text-xs text-gray-500">Must be at least 8 characters</p>56 </div>57 58 <div>59 <label for="company" class="block text-sm font-medium text-gray-700 mb-1">Company name</label>60 <input type="text" id="company" name="company" 61 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">62 </div>63 64 <div class="flex items-center">65 <input type="checkbox" id="terms" name="terms" required 66 class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">67 <label for="terms" class="ml-2 block text-sm text-gray-700">68 I agree to the <a href="/terms" class="text-blue-600">Terms</a> and <a href="/privacy" class="text-blue-600">Privacy Policy</a>69 </label>70 </div>71 72 <button type="submit" 73 class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition-colors flex justify-center items-center gap-2">74 <i data-feather="user-plus" class="w-4 h-4"></i>75 Create Account76 </button>77 78 <div class="text-center text-sm text-gray-600">79 Already have an account? <a href="/login" class="text-blue-600 hover:text-blue-500">Sign in</a>80 </div>81 </form>82 </div>83 </main>84 85 <custom-footer></custom-footer>86 87 <script src="components/navbar.js"></script>88 <script src="components/footer.js"></script>89 <script src="script.js"></script>90 <script>91 feather.replace();92 </script>93</body>94</html>