| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Ubuntu Connect Launch Registration</title> |
| <link rel="icon" type="image/x-icon" href="/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap'); |
| |
| :root { |
| --text-primary: #2b2a16; |
| --accent: #ab8037; |
| } |
| |
| body { |
| font-family: 'Ubuntu', sans-serif; |
| color: var(--text-primary); |
| } |
| |
| .form-input:focus { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px rgba(171, 128, 55, 0.2); |
| } |
| |
| .btn-primary { |
| background-color: var(--accent); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary:hover { |
| background-color: #9a7230; |
| transform: translateY(-2px); |
| } |
| |
| .input-group { |
| position: relative; |
| } |
| |
| .input-icon { |
| position: absolute; |
| left: 15px; |
| top: 50%; |
| transform: translateY(-50%); |
| color: var(--accent); |
| } |
| |
| .animate-float { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| </style> |
| </head> |
| <body class="bg-white min-h-screen"> |
| |
| <header class="bg-white shadow-sm py-6"> |
| <div class="container mx-auto px-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i data-feather="cpu" class="text-accent mr-2" stroke="#ab8037"></i> |
| <h1 class="text-2xl font-bold">Ubuntu Connect</h1> |
| </div> |
| <nav> |
| <ul class="flex space-x-6"> |
| <li><a href="#" class="hover:text-accent">Home</a></li> |
| <li><a href="#" class="hover:text-accent">About</a></li> |
| <li><a href="#" class="hover:text-accent">Contact</a></li> |
| </ul> |
| </nav> |
| </div> |
| </header> |
| |
| <main class="container mx-auto px-4 py-12 relative z-0"> |
| <div class="max-w-6xl mx-auto grid md:grid-cols-[1.5fr_1fr] gap-12 items-stretch min-h-[600px]"> |
| |
| <div class="hidden md:block animate-float h-full"> |
| <img src="http://static.photos/technology/1024x576/42" alt="Ubuntu Connect" class="rounded-lg shadow-xl h-full w-full object-cover"> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 h-full flex flex-col justify-center"> |
| <div class="text-center mb-8"> |
| <h2 class="text-3xl font-bold mb-2">RSVP for the Launch</h2> |
| <p class="text-gray-600 mb-4">Register now to join Ubuntu Connect's launch event</p> |
| <div class="text-sm bg-gray-50 p-4 rounded-lg mb-4"> |
| <p><strong>Date:</strong> October 10, 2025</p> |
| <p><strong>Venue:</strong> TreeHaus, Block 5</p> |
| <p><strong>RSVP by:</strong> October 06, 2025</p> |
| <p><strong>Contact:</strong> Thatobo (Cell & Email) | Refilwe Kerekang (Cell: 76359950, Email)</p> |
| <p class="text-xs italic mt-2">*This invite admits 1 person.</p> |
| </div> |
| </div> |
| |
| <form id="registrationForm" class="space-y-6"> |
| <div class="input-group"> |
| <i data-feather="user" class="input-icon"></i> |
| <input type="text" placeholder="Full Name" class="form-input pl-12 w-full py-3 border border-gray-300 rounded-lg focus:outline-none" required> |
| </div> |
|
|
| <div class="input-group"> |
| <i data-feather="briefcase" class="input-icon"></i> |
| <input type="text" placeholder="Company" class="form-input pl-12 w-full py-3 border border-gray-300 rounded-lg focus:outline-none" required> |
| </div> |
|
|
| <div class="input-group"> |
| <i data-feather="award" class="input-icon"></i> |
| <input type="text" placeholder="Job Title" class="form-input pl-12 w-full py-3 border border-gray-300 rounded-lg focus:outline-none" required> |
| </div> |
| |
| <div class="input-group"> |
| <i data-feather="mail" class="input-icon"></i> |
| <input type="email" placeholder="Email Address" class="form-input pl-12 w-full py-3 border border-gray-300 rounded-lg focus:outline-none" required> |
| </div> |
|
|
| <div class="input-group"> |
| <i data-feather="phone" class="input-icon"></i> |
| <input type="tel" placeholder="Cell Phone" class="form-input pl-12 w-full py-3 border border-gray-300 rounded-lg focus:outline-none" required> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="terms" class="mr-2 h-5 w-5 text-accent rounded focus:ring-accent"> |
| <label for="terms" class="text-sm">I agree to the <a href="#" class="text-accent hover:underline">Terms & Conditions</a></label> |
| </div> |
| |
| <button type="submit" class="btn-primary w-full py-3 text-white font-semibold rounded-lg shadow-md"> |
| Register Now |
| <i data-feather="arrow-right" class="ml-2 inline"></i> |
| </button> |
| |
| <div class="text-center text-sm"> |
| <p>See you on October 10, 2025!</p> |
| </div> |
| </form> |
| </div> |
| </div> |
| </main> |
| |
| <footer class="bg-gray-50 py-8 mt-12 relative z-10"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i data-feather="cpu" class="text-accent mr-2" stroke="#ab8037"></i> |
| <span class="font-medium">Ubuntu Connect © 2023</span> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#"><i data-feather="github" class="text-gray-600 hover:text-accent"></i></a> |
| <a href="#"><i data-feather="twitter" class="text-gray-600 hover:text-accent"></i></a> |
| <a href="#"><i data-feather="linkedin" class="text-gray-600 hover:text-accent"></i></a> |
| <a href="#"><i data-feather="facebook" class="text-gray-600 hover:text-accent"></i></a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <script> |
| |
| document.getElementById('registrationForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| const name = this.elements[0].value; |
| const company = this.elements[1].value; |
| const jobTitle = this.elements[2].value; |
| const email = this.elements[3].value; |
| const phone = this.elements[4].value; |
| const terms = this.elements[5].checked; |
| |
| if (!terms) { |
| alert('Please agree to the terms and conditions'); |
| return; |
| } |
| |
| |
| console.log('Registration submitted:', { name, company, jobTitle, email, phone }); |
| |
| alert('Registration successful! Welcome to Ubuntu Connect.'); |
| this.reset(); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
