Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AppName - Modern Web/App Solution</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="flex-grow"> | |
| <section class="hero-section relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> | |
| <div class="hero-content text-center md:text-left max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6">Build Amazing Things <span class="text-primary">Faster</span></h1> | |
| <p class="text-xl text-gray-600 mb-8 max-w-lg mx-auto md:mx-0"> | |
| The all-in-one platform for developers to create, deploy, and scale applications with ease. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start"> | |
| <a href="/signup.html" class="btn-primary">Get Started Free</a> | |
| <a href="/demo.html" class="btn-secondary">Live Demo</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero-image absolute top-0 right-0 w-full md:w-1/2 h-full"> | |
| <div class="app-preview bg-gray-100 rounded-xl shadow-xl absolute transform -translate-y-1/2 top-1/2 left-1/2 -translate-x-1/2 w-full max-w-md"> | |
| <div class="app-header bg-white p-3 rounded-t-xl flex items-center"> | |
| <div class="flex space-x-2"> | |
| <span class="w-3 h-3 rounded-full bg-red-500"></span> | |
| <span class="w-3 h-3 rounded-full bg-yellow-500"></span> | |
| <span class="w-3 h-3 rounded-full bg-green-500"></span> | |
| </div> | |
| <div class="mock-url mx-auto bg-gray-100 rounded text-xs px-2 py-1"> | |
| app.example.com/dashboard | |
| </div> | |
| </div> | |
| <div class="app-content h-72 bg-white rounded-b-xl"> | |
| <img src="http://static.photos/technology/640x360/1" alt="App Preview" class="w-full h-full object-cover rounded-b-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="py-20 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-800 mb-4">Why Choose Our Platform</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Designed for both web and mobile with a seamless experience everywhere | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="feature-card p-6 bg-white rounded-xl shadow-md"> | |
| <div class="feature-icon text-primary mb-4 text-4xl"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Lightning Fast</h3> | |
| <p class="text-gray-600">Optimized for performance with instant loading times and smooth transitions.</p> | |
| </div> | |
| <div class="feature-card p-6 bg-white rounded-xl shadow-md"> | |
| <div class="feature-icon text-primary mb-4 text-4xl"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Fully Responsive</h3> | |
| <p class="text-gray-600">Works perfectly on any device from mobile phones to large desktop screens.</p> | |
| </div> | |
| <div class="feature-card p-6 bg-white rounded-xl shadow-md"> | |
| <div class="feature-icon text-primary mb-4 text-4xl"> | |
| <i class="fas fa-cogs"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Powerful Tools</h3> | |
| <p class="text-gray-600">All the features you need to build and deploy professional applications.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |