Spaces:
Running
Running
File size: 6,132 Bytes
02af07c fce0ff8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!DOCTYPE html>
<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>
|