Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Invoice Wizardry | Smart Billing Solutions</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> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.15); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-100"> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <nav class="bg-white/80 shadow-sm backdrop-blur-lg sticky top-0 z-50"> | |
| <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"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="file-text" class="text-primary h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-800">Invoice Wizardry</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-4"> | |
| <a href="#" class="text-primary px-3 py-2 rounded-md text-sm font-medium bg-primary/10">Home</a> | |
| <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Pricing</a> | |
| <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Contact</a> | |
| <a href="login.html" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Login</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="relative"> | |
| <!-- Hero Section --> | |
| <section class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="glass-card rounded-2xl p-8 md:p-12 lg:flex lg:items-center lg:justify-between"> | |
| <div class="lg:w-1/2"> | |
| <h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 mb-6"> | |
| Create Professional <span class="text-primary">Invoices</span> in Seconds | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Simplify your billing process with our intuitive invoicing tool. Generate, send, and track invoices effortlessly. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#" class="bg-primary hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg shadow-md transition duration-300 flex items-center justify-center"> | |
| <i data-feather="plus" class="mr-2"></i> Create Invoice | |
| </a> | |
| <a href="#" class="bg-white hover:bg-gray-50 text-gray-800 font-medium py-3 px-6 rounded-lg shadow transition duration-300 flex items-center justify-center"> | |
| <i data-feather="play" class="mr-2"></i> Watch Demo | |
| </a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 mt-12 lg:mt-0"> | |
| <div class="relative bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <img src="http://static.photos/office/1024x576/42" alt="Invoice Example" class="w-full h-auto"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-white/90 via-white/50 to-transparent"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Powerful Features for <span class="text-primary">Your Business</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Everything you need to manage your invoices efficiently | |
| </p> | |
| </div> | |
| <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mb-4"> | |
| <i data-feather="zap" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Quick Creation</h3> | |
| <p class="text-gray-600"> | |
| Generate professional invoices in under a minute with our intuitive interface. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-secondary/10 text-secondary mb-4"> | |
| <i data-feather="send" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Instant Delivery</h3> | |
| <p class="text-gray-600"> | |
| Send invoices directly to clients via email with just one click. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mb-4"> | |
| <i data-feather="dollar-sign" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Payment Tracking</h3> | |
| <p class="text-gray-600"> | |
| Monitor invoice status and get notified when payments are received. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-secondary/10 text-secondary mb-4"> | |
| <i data-feather="cloud" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Cloud Storage</h3> | |
| <p class="text-gray-600"> | |
| Access your invoices from anywhere, anytime with secure cloud storage. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 text-primary mb-4"> | |
| <i data-feather="trending-up" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Reports & Analytics</h3> | |
| <p class="text-gray-600"> | |
| Gain insights into your business with detailed reports and analytics. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-secondary/10 text-secondary mb-4"> | |
| <i data-feather="smartphone" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Mobile Friendly</h3> | |
| <p class="text-gray-600"> | |
| Create and manage invoices on the go with our mobile-optimized interface. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="bg-primary py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Ready to simplify your billing? | |
| </h2> | |
| <p class="mt-4 text-xl text-primary-100 max-w-2xl mx-auto"> | |
| Join thousands of businesses using Invoice Wizardry to save time and get paid faster. | |
| </p> | |
| <div class="mt-8"> | |
| <a href="register.html" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 shadow-md transition duration-300"> | |
| Get Started - It's Free | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Features</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Templates</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Support</a></li | |
| </body> | |
| </html> |