Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PropWizard - Modern Property Management</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| .chat-bubble { | |
| border-radius: 1.5rem 1.5rem 1.5rem 0; | |
| } | |
| .chat-bubble-right { | |
| border-radius: 1.5rem 1.5rem 0 1.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Cookie Consent Banner --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg z-50 p-4 border-t border-gray-200"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-col md:flex-row md:items-center justify-between gap-4"> | |
| <p class="text-gray-700 text-sm">By clicking "Accept", you agree to the storage of cookies on your device to improve website navigation, analyse website usage and assist with our marketing efforts.</p> | |
| <div class="flex gap-2"> | |
| <button class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100">Preferences</button> | |
| <button class="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100">Deny</button> | |
| <button class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">Accept</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-40"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/654a4eca1f8c2ba5f4a71159_Logo.svg" alt="PropWizard Logo" class="h-8"> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <div class="relative group"> | |
| <button class="text-gray-700 hover:text-indigo-600 flex items-center gap-1"> | |
| Features <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-lg mt-2 py-2 w-48 z-50"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Service Hub</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Property Management</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Supplier Portal</a> | |
| </div> | |
| </div> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Pricing</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Integrations</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Company</a> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 hidden md:block">Log In</a> | |
| <a href="#" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Request Demo</a> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Spend time on your tenants, not administration – with AI as an assistant</h1> | |
| <p class="text-xl mb-8 text-indigo-100">The property platform for owners, admins, and tenants</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#" class="px-6 py-3 bg-white text-indigo-600 font-medium rounded-lg hover:bg-gray-100 text-center">Get in touch</a> | |
| <a href="#" class="px-6 py-3 border border-white text-white font-medium rounded-lg hover:bg-white hover:text-indigo-600 text-center">Watch demo</a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -top-8 -left-8 w-32 h-32 bg-indigo-400 rounded-full opacity-20"></div> | |
| <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-indigo-400 rounded-full opacity-20"></div> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/65f94da667d0dcbb9ccdb075_Browser%20-%20EN.png" alt="PropWizard Dashboard" class="relative z-10 rounded-lg shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Chat Examples --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Chat Example 1 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-sm"> | |
| <div class="flex mb-6"> | |
| <div class="bg-indigo-100 p-3 rounded-full"> | |
| <i data-feather="user" class="text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="bg-gray-200 px-4 py-2 rounded-lg chat-bubble max-w-xs"> | |
| Can't find my lease agreement. Can you send me a copy? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mb-6"> | |
| <div class="mr-4"> | |
| <div class="bg-indigo-100 px-4 py-2 rounded-lg chat-bubble-right max-w-xs"> | |
| I'll send you a copy right away. | |
| </div> | |
| </div> | |
| <div class="bg-indigo-600 p-3 rounded-full text-white"> | |
| <i data-feather="check"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/6693b09ba1887dc99c412718_Checkmark%20badge.svg" alt="Checkmark" class="w-4 h-4 mr-2"> | |
| Inquiry complete | |
| </div> | |
| </div> | |
| <!-- Chat Example 2 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-sm"> | |
| <div class="flex mb-6"> | |
| <div class="bg-indigo-100 p-3 rounded-full"> | |
| <i data-feather="user" class="text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="bg-gray-200 px-4 py-2 rounded-lg chat-bubble max-w-xs"> | |
| I locked myself out of my apartment | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mb-6"> | |
| <div class="mr-4"> | |
| <div class="bg-indigo-100 px-4 py-2 rounded-lg chat-bubble-right max-w-xs"> | |
| We'll arrange for a locksmith to assist you | |
| </div> | |
| </div> | |
| <div class="bg-indigo-600 p-3 rounded-full text-white"> | |
| <i data-feather="check"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/6693b09ba1887dc99c412718_Checkmark%20badge.svg" alt="Checkmark" class="w-4 h-4 mr-2"> | |
| Janitor assigned | |
| </div> | |
| </div> | |
| <!-- Chat Example 3 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-sm"> | |
| <div class="flex mb-6"> | |
| <div class="bg-indigo-100 p-3 rounded-full"> | |
| <i data-feather="user" class="text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="bg-gray-200 px-4 py-2 rounded-lg chat-bubble max-w-xs"> | |
| My washer is overflowing! Can you send a technician? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mb-6"> | |
| <div class="mr-4"> | |
| <div class="bg-indigo-100 px-4 py-2 rounded-lg chat-bubble-right max-w-xs"> | |
| The technician is on their way! | |
| </div> | |
| </div> | |
| <div class="bg-indigo-600 p-3 rounded-full text-white"> | |
| <i data-feather="check"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/6693b09ba1887dc99c412718_Checkmark%20badge.svg" alt="Checkmark" class="w-4 h-4 mr-2"> | |
| Supplier assigned | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">All-in-one Property solution</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">The property platform for owners, admins, and tenants</p> | |
| </div> | |
| <!-- Feature 1 --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">ServiceHub</h3> | |
| <p class="text-lg text-gray-600 mb-6">Optimize your rental communication with two-way communication with tenants, suppliers and owners across inquiries, assignments, properties and documents - now intelligently supported by AI.</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div> | |
| <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/67d29c08b226c78e63db7fd0_features-image-1-EN-desktop.png" alt="ServiceHub" class="relative z-10 rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20"> | |
| <div class="md:order-2"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Property management</h3> | |
| <p class="text-lg text-gray-600 mb-6">Optimize real estate operations in your portfolio. Keep track of maintenance tasks and service agreements with an integrated solution that ensures efficient asset management.</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="relative md:order-1"> | |
| <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div> | |
| <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/67d15e3c4a82933aa69e74d0_features-image-3-EN.png" alt="Property Management" class="relative z-10 rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Supplier management</h3> | |
| <p class="text-lg text-gray-600 mb-6">Easy and efficient supplier management. Send requisitions directly to suppliers, follow up on cases, and communicate easily for a smooth and efficient workflow.</p> | |
| <a href="#" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Read more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -top-6 -left-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div> | |
| <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-100 rounded-full opacity-50"></div> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/67d15e4cea8765bb91e50d51_features-image-2-EN.png" alt="Supplier Management" class="relative z-10 rounded-lg shadow-lg"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Modern real estate teams run on PropWizard</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-sm"> | |
| <p class="text-lg text-gray-600 mb-6">"With PropWizard, we can now offer our employees and tenants even more streamlined communication and sustainable property management."</p> | |
| <div class="flex items-center"> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/66cc80f457d6428670aa9f14_Thomas%20E..jpeg" alt="Thomas Elefsen" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Thomas Elefsen</h4> | |
| <p class="text-sm text-gray-500">Adm. Direktør, Norhjem Administration</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-sm"> | |
| <p class="text-lg text-gray-600 mb-6">"The platform's comprehensive features promote sustainable and efficient property management, enabling us to optimise and integrate all aspects of our property administration."</p> | |
| <div class="flex items-center"> | |
| <img src="https://cdn.prod.website-files.com/654a4eca1f8c2ba5f4a71133/ | |
| </body> | |
| </html> |