Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelPilot Pro Studio | Digital Design</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-16"> | |
| <section class="hero min-h-[80vh] flex items-center"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <span class="inline-block px-4 py-2 mb-6 text-sm font-medium rounded-full bg-indigo-100 text-indigo-600">Crafting Digital Experiences</span> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 text-gray-900 leading-tight">Pixel-Perfect Designs <br>That <span class="text-indigo-600">Convert</span></h1> | |
| <p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">I transform ideas into visually stunning digital experiences that engage users and drive results.</p> | |
| <div class="flex justify-center gap-4"> | |
| <a href="#work" class="px-8 py-4 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">View Work</a> | |
| <a href="#contact" class="px-8 py-4 border-2 border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-100 transition">Contact Me</a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="work" class="py-20"> | |
| <div class="max-w-4xl mx-auto text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4 text-gray-900">Featured Projects</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Selected work that showcases my design approach and problem-solving skills.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="http://static.photos/design/1200x630/1" alt="E-commerce Redesign" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-900">E-commerce Platform Redesign</h3> | |
| <p class="text-gray-600 mb-4">Increased conversions by 35% through improved UX/UI design.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 text-xs rounded-full bg-indigo-100 text-indigo-600">UI Design</span> | |
| <span class="px-3 py-1 text-xs rounded-full bg-indigo-100 text-indigo-600">UX Research</span> | |
| <span class="px-3 py-1 text-xs rounded-full bg-indigo-100 text-indigo-600">Prototyping</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition"> | |
| <img src="http://static.photos/design/1200x630/2" alt="Mobile App" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-gray-900">Fitness Mobile App</h3> | |
| <p class="text-gray-600 mb-4">Designed an intuitive workout tracking experience for iOS and Android.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-3 py-1 text-xs rounded-full bg-indigo-100 text-indigo-600">Mobile App</span> | |
| <span class="px-3 py-1 text-xs rounded-full bg-indigo-100 text-indigo-600">UI/UX</span> | |
| <span class="px-3 py-1 text-xs rounded-full bg-indigo-100 text-indigo-600">Branding</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="py-20 bg-white rounded-2xl shadow-sm"> | |
| <div class="max-w-4xl mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4 text-gray-900">Let's Work Together</h2> | |
| <p class="text-gray-600 max-w-xl mx-auto">Have a project in mind? I'd love to hear about it!</p> | |
| </div> | |
| <form class="max-w-xl mx-auto"> | |
| <div class="mb-6"> | |
| <label for="name" class="block mb-2 text-sm font-medium text-gray-700">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block mb-2 text-sm font-medium text-gray-700">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block mb-2 text-sm font-medium text-gray-700">Project Details</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-4 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition">Send Message</button> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |