File size: 7,337 Bytes
99fe73b 7764813 99fe73b 7764813 99fe73b 7764813 99fe73b | 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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PixelPulse | Creative Digital Solutions</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#8b5cf6',
}
}
}
}
</script>
</head>
<body class="bg-gray-50 font-sans">
<!-- Navigation Component -->
<custom-navbar></custom-navbar>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-primary to-secondary text-white py-20">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Crafting Digital Excellence</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">We transform ideas into stunning digital experiences that drive results.</p>
<a href="#contact" class="bg-white text-primary font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 inline-block">Get Started</a>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our Projects</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div id="projects-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Projects will be loaded here via JavaScript -->
</div>
</div>
</section>
<!-- Clients Section -->
<section id="clients" class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Happy Clients</h2>
<div class="w-20 h-1 bg-primary mx-auto"></div>
</div>
<div id="clients-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Clients will be loaded here via JavaScript -->
</div>
</div>
</section>
<!-- Contact Form -->
<section id="contact" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-md overflow-hidden p-8">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold text-gray-800 mb-2">Get In Touch</h2>
<p class="text-gray-600">Have a project in mind? Let's discuss how we can help.</p>
</div>
<form id="contact-form" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="name" class="block text-gray-700 mb-2">Full Name</label>
<input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label for="email" class="block text-gray-700 mb-2">Email Address</label>
<input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="phone" class="block text-gray-700 mb-2">Mobile Number</label>
<input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label for="city" class="block text-gray-700 mb-2">City</label>
<input type="text" id="city" name="city" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
</div>
<div class="pt-4">
<div class="mb-4">
<label for="attachments" class="block text-gray-700 mb-2">Attach Files (optional)</label>
<input type="file" id="attachments" name="attachments" multiple class="w-full px-4 py-2 border border-gray-300 rounded-lg">
<file-preview></file-preview>
<p class="text-sm text-gray-500 mt-1">Max 5 files, 5MB each (PDF, JPG, PNG, DOC, PPT)</p>
</div>
<button type="submit" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-lg hover:bg-primary-600 transition duration-300">
Submit
</button>
</div>
</form>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="py-16 bg-gradient-to-r from-primary to-secondary text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-2xl md:text-3xl font-bold mb-6">Subscribe to Our Newsletter</h2>
<p class="mb-8 max-w-2xl mx-auto">Stay updated with our latest projects, news and exclusive offers.</p>
<form id="newsletter-form" class="max-w-md mx-auto flex">
<input type="email" id="newsletter-email" placeholder="Your email address" required class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">
<button type="submit" class="bg-white text-primary font-bold py-3 px-6 rounded-r-lg hover:bg-gray-100 transition duration-300">
Subscribe
</button>
</form>
</div>
</section>
<!-- Footer Component -->
<custom-footer></custom-footer>
<!-- Scripts -->
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/file-preview.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// Load projects and clients when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
loadProjects();
loadClients();
// Form submissions
document.getElementById('contact-form').addEventListener('submit', handleContactSubmit);
document.getElementById('newsletter-form').addEventListener('submit', handleNewsletterSubmit);
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |