rstmcanada/undefined
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>SignaSphere AI - Secure Digital Signatures</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script>10 tailwind.config = {11 theme: {12 extend: {13 colors: {14 primary: {15 50: '#eff6ff',16 100: '#dbeafe',17 200: '#bfdbfe',18 300: '#93c5fd',19 400: '#60a5fa',20 500: '#3b82f6',21 600: '#2563eb',22 700: '#1d4ed8',23 800: '#1e40af',24 900: '#1e3a8a'25 },26 secondary: {27 50: '#f0f9ff',28 100: '#e0f2fe',29 200: '#bae6fd',30 300: '#7dd3fc',31 400: '#38bdf8',32 500: '#0ea5e9',33 600: '#0284c7',34 700: '#0369a1',35 800: '#075985',36 900: '#0c4a6e'37 }38 }39 }40 }41 }42 </script>43 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>44 <script src="https://unpkg.com/feather-icons"></script>45 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>46 <style>47 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');48 49 * {50 font-family: 'Inter', sans-serif;51 }52 53 .hero-gradient {54 background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);55 }56 57 .feature-card:hover {58 transform: translateY(-5px);59 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);60 }61 62 .signature-canvas {63 border: 2px dashed #d1d5db;64 border-radius: 0.5rem;65 background: #f9fafb;66 }67 68 .document-preview {69 box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);70 }71 </style>72</head>73<body class="bg-gray-50">74 <!-- Navigation -->75 <nav class="bg-white shadow-lg fixed w-full top-0 z-50">76 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">77 <div class="flex justify-between h-16">78 <div class="flex items-center">79 <div class="flex-shrink-0 flex items-center">80 <i data-feather="edit-3" class="h-8 w-8 text-primary-600"></i>81 <span class="ml-2 text-xl font-bold text-gray-900">SignaSphere AI</span>82 </div>83 <div class="hidden md:ml-6 md:flex md:space-x-8">84 <a href="#" class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>85 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a>86 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a>87 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>88 </div>89 </div>90 <div class="flex items-center">91 <a href="/login.html" class="bg-gray-100 text-gray-900 hover:bg-gray-200 px-4 py-2 rounded-md text-sm font-medium transition duration-200">Sign In</a>92 <a href="/register.html" class="ml-4 bg-primary-600 text-white hover:bg-primary-700 px-4 py-2 rounded-md text-sm font-medium transition duration-200">Get Started Free</a>93 </div>94 </div>95 </div>96 </nav>97 98 <!-- Hero Section -->99 <div id="vanta-bg" class="min-h-screen flex items-center justify-center hero-gradient pt-16">100 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">101 <div class="text-center">102 <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">103 Sign Documents Securely with AI Power104 </h1>105 <p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto">106 The most advanced electronic signature platform for Canadian businesses. 107 AI-powered, legally compliant, and enterprise-grade secure.108 </p>109 <div class="flex flex-col sm:flex-row gap-4 justify-center">110 <a href="/dashboard.html" class="bg-white text-primary-600 hover:bg-gray-100 px-8 py-4 rounded-lg text-lg font-semibold transition duration-200 shadow-lg">111 Start Signing Now112 </a>113<a href="#features" class="border-2 border-white text-white hover:bg-white hover:text-primary-600 px-8 py-4 rounded-lg text-lg font-semibold transition duration-200">114 Watch Demo115 </a>116 </div>117 </div>118 </div>119 </div>120 121 <!-- Features Section -->122 <section id="features" class="py-20 bg-white">123 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">124 <div class="text-center mb-16">125 <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">126 Powerful Features for Modern Businesses127 </h2>128 <p class="text-xl text-gray-600 max-w-3xl mx-auto">129 Everything you need to sign, send, and manage documents with confidence130 </p>131 </div>132 133 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">134 <!-- Feature 1 -->135 <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300">136 <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">137 <i data-feather="upload-cloud" class="h-6 w-6 text-primary-600"></i>138 </div>139 <h3 class="text-xl font-semibold text-gray-900 mb-3">Secure Document Upload</h3>140 <p class="text-gray-600">Upload PDF, DOCX, and other formats with end-to-end encryption and secure cloud storage.</p>141 </div>142 143 <!-- Feature 2 -->144 <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300">145 <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">146 <i data-feather="cpu" class="h-6 w-6 text-primary-600"></i>147 </div>148 <h3 class="text-xl font-semibold text-gray-900 mb-3">AI-Powered Field Detection</h3>149 <p class="text-gray-600">Our AI automatically detects signature fields, dates, and names using advanced computer vision.</p>150 </div>151 152 <!-- Feature 3 -->153 <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300">154 <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">155 <i data-feather="shield" class="h-6 w-6 text-primary-600"></i>156 </div>157 <h3 class="text-xl font-semibold text-gray-900 mb-3">Legal Compliance</h3>158 <p class="text-gray-600">Fully compliant with PIPEDA, ESIGN Act, and eIDAS regulations for legally binding signatures.</p>159 </div>160 161 <!-- Feature 4 -->162 <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300">163 <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">164 <i data-feather="users" class="h-6 w-6 text-primary-600"></i>165 </div>166 <h3 class="text-xl font-semibold text-gray-900 mb-3">Multi-Party Signing</h3>167 <p class="text-gray-600">Send documents to multiple signers with custom signing orders and real-time progress tracking.</p>168 </div>169 170 <!-- Feature 5 -->171 <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300">172 <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">173 <i data-feather="bar-chart-2" class="h-6 w-6 text-primary-600"></i>174 </div>175 <h3 class="text-xl font-semibold text-gray-900 mb-3">Advanced Analytics</h3>176 <p class="text-gray-600">Track document status, generate reports, and gain insights into your signing workflows.</p>177 </div>178 179 <!-- Feature 6 -->180 <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300">181 <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">182 <i data-feather="code" class="h-6 w-6 text-primary-600"></i>183 </div>184 <h3 class="text-xl font-semibold text-gray-900 mb-3">API Integration</h3>185 <p class="text-gray-600">Seamlessly integrate with your existing CRM, HR systems, and business applications.</p>186 </div>187 </div>188 </div>189 </section>190 191 <!-- Demo Section -->192 <section class="py-20 bg-gray-100">193 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">194 <div class="grid lg:grid-cols-2 gap-12 items-center">195 <div>196 <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">197 See How It Works198 </h2>199 <p class="text-lg text-gray-600 mb-8">200 Experience the power of AI-driven electronic signatures with our intuitive interface. 201 Upload, sign, and send documents in minutes, not days.202 </p>203 <div class="space-y-4">204 <div class="flex items-center">205 <div class="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center mr-4">206 <span class="text-white font-bold">1</span>207 </div>208 <span class="text-lg font-medium text-gray-900">Upload your document</span>209 </div>210 <div class="flex items-center">211 <div class="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center mr-4">212 <span class="text-white font-bold">2</span>213 </div>214 <span class="text-lg font-medium text-gray-900">AI detects signature fields automatically</span>215 </div>216 <div class="flex items-center">217 <div class="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center mr-4">218 <span class="text-white font-bold">3</span>219 </div>220 <span class="text-lg font-medium text-gray-900">Add your signature securely</span>221 </div>222 <div class="flex items-center">223 <div class="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center mr-4">224 <span class="text-white font-bold">4</span>225 </div>226 <span class="text-lg font-medium text-gray-900">Send for signing and track progress</span>227 </div>228 </div>229 </div>230 <div class="relative">231 <div class="document-preview bg-white p-6 rounded-xl">232 <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">233 <i data-feather="file-text" class="h-12 w-12 text-gray-400 mx-auto mb-4"></i>234 <p class="text-gray-600 mb-4">Document preview area</p>235 <div class="signature-canvas mx-auto w-48 h-24 mb-4 flex items-center justify-center">236 <span class="text-gray-500">Your signature will appear here</span>237 </div>238 <button class="bg-primary-600 text-white px-6 py-2 rounded-lg hover:bg-primary-700 transition duration-200">239 Sign Document240 </button>241 </div>242 </div>243 </div>244 </div>245 </div>246 </section>247 248 <!-- Security Section -->249 <section class="py-20 bg-white">250 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">251 <div class="text-center mb-16">252 <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">253 Enterprise-Grade Security254 </h2>255 <p class="text-xl text-gray-600 max-w-3xl mx-auto">256 Your documents and signatures are protected with the highest security standards257 </p>258 </div>259 260 <div class="grid md:grid-cols-3 gap-8">261 <div class="text-center">262 <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">263 <i data-feather="lock" class="h-8 w-8 text-green-600"></i>264 </div>265 <h3 class="text-xl font-semibold text-gray-900 mb-3">End-to-End Encryption</h3>266 <p class="text-gray-600">All documents are encrypted with AES-256 encryption both in transit and at rest.</p>267 </div>268 269 <div class="text-center">270 <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">271 <i data-feather="shield" class="h-8 w-8 text-blue-600"></i>272 </div>273 <h3 class="text-xl font-semibold text-gray-900 mb-3">SHA-256 Hashing</h3>274 <p class="text-gray-600">Every signature is cryptographically hashed to prevent tampering and ensure integrity.</p>275 </div>276 277 <div class="text-center">278 <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">279 <i data-feather="award" class="h-8 w-8 text-purple-600"></i>280 </div>281 <h3 class="text-xl font-semibold text-gray-900 mb-3">Legal Compliance</h3>282 <p class="text-gray-600">Fully compliant with Canadian PIPEDA, US ESIGN Act, and EU eIDAS regulations.</p>283 </div>284 </div>285 </div>286 </section>287 288 <!-- CTA Section -->289 <section class="py-20 bg-primary-600">290 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">291 <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">292 Ready to Transform Your Document Signing?293 </h2>294 <p class="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">295 Join thousands of Canadian businesses that trust SignaSphere AI for their electronic signature needs.296 </p>297 <div class="flex flex-col sm:flex-row gap-4 justify-center">298 <a href="/register.html" class="bg-white text-primary-600 hover:bg-gray-100 px-8 py-4 rounded-lg text-lg font-semibold transition duration-200">299 Start Free Trial300 </a>301 <a href="#" class="border-2 border-white text-white hover:bg-white hover:text-primary-600 px-8 py-4 rounded-lg text-lg font-semibold transition duration-200">302 Contact Sales303 </a>304 </div>305 </div>306 </section>307 308 <!-- Footer -->309 <footer class="bg-gray-900 text-white py-12">310 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">311 <div class="grid md:grid-cols-4 gap-8">312 <div>313 <div class="flex items-center mb-4">314 <i data-feather="edit-3" class="h-6 w-6 text-primary-400"></i>315 <span class="ml-2 text-lg font-bold">SignaSphere AI</span>316 </div>317 <p class="text-gray-400">The future of electronic signatures powered by artificial intelligence.</p>318 </div>319 <div>320 <h3 class="text-lg font-semibold mb-4">Product</h3>321 <ul class="space-y-2 text-gray-400">322 <li><a href="#" class="hover:text-white">Features</a></li>323 <li><a href="#" class="hover:text-white">Pricing</a></li>324 <li><a href="#" class="hover:text-white">Security</a></li>325 <li><a href="#" class="hover:text-white">API</a></li>326 </ul>327 </div>328 <div>329 <h3 class="text-lg font-semibold mb-4">Company</h3>330 <ul class="space-y-2 text-gray-400">331 <li><a href="#" class="hover:text-white">About</a></li>332 <li><a href="#" class="hover:text-white">Blog</a></li>333 <li><a href="#" class="hover:text-white">Careers</a></li>334 <li><a href="#" class="hover:text-white">Contact</a></li>335 </ul>336 </div>337 <div>338 <h3 class="text-lg font-semibold mb-4">Legal</h3>339 <ul class="space-y-2 text-gray-400">340 <li><a href="#" class="hover:text-white">Privacy Policy</a></li>341 <li><a href="#" class="hover:text-white">Terms of Service</a></li>342 <li><a href="#" class="hover:text-white">Compliance</a></li>343 <li><a href="#" class="hover:text-white">Support</a></li>344 </ul>345 </div>346 </div>347 <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">348 <p class="text-gray-400">© 2024 SignaSphere AI. All rights reserved.</p>349 <div class="flex space-x-4 mt-4 md:mt-0">350 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>351 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>352 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>353 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>354 </div>355 </div>356 </div>357 </footer>358 359 <script>360 // Initialize Vanta.js globe background361 VANTA.GLOBE({362 el: "#vanta-bg",363 mouseControls: true,364 touchControls: true,365 gyroControls: false,366 minHeight: 200.00,367 minWidth: 200.00,368 scale: 1.00,369 scaleMobile: 1.00,370 color: 0x3b82f6,371 backgroundColor: 0x0ea5e9,372 size: 0.8373 });374 375 // Initialize Feather Icons376 feather.replace();377 </script>378</body>379</html>380