Spaces:
Running
Running
File size: 29,186 Bytes
4f91b68 | 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 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PixelPulse Creatives | Digital Agency</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',
dark: '#1e293b',
light: '#f8fafc'
},
animation: {
'float': 'float 6s ease-in-out infinite',
'float-reverse': 'float-reverse 5s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite'
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
},
'float-reverse': {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(15px)' },
}
}
}
}
}
</script>
</head>
<body class="bg-light text-dark font-sans antialiased">
<!-- Navigation -->
<custom-navbar></custom-navbar>
<!-- Hero Section -->
<section class="relative h-screen overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-primary to-secondary opacity-90 z-0"></div>
<div class="absolute inset-0 flex items-center justify-center z-10 px-6">
<div class="text-center max-w-4xl mx-auto">
<h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fade-in">We Create Digital Magic</h1>
<p class="text-xl md:text-2xl text-white/90 mb-10 max-w-2xl mx-auto">PixelPulse transforms ideas into immersive digital experiences that captivate and convert.</p>
<div class="flex gap-4 justify-center">
<a href="#work" class="px-8 py-3 bg-white text-primary rounded-full font-semibold hover:bg-opacity-90 transition-all hover:shadow-lg">View Work</a>
<a href="#contact" class="px-8 py-3 bg-transparent border-2 border-white text-white rounded-full font-semibold hover:bg-white hover:text-primary transition-all">Get in Touch</a>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 flex justify-center z-10 pb-10">
<a href="#about" class="text-white animate-bounce">
<i data-feather="chevron-down" class="w-10 h-10"></i>
</a>
</div>
<div class="absolute top-20 right-20 w-32 h-32 rounded-full bg-white/10 animate-float"></div>
<div class="absolute bottom-40 left-20 w-24 h-24 rounded-full bg-white/15 animate-float-reverse"></div>
<div class="absolute top-1/3 left-1/4 w-16 h-16 rounded-full bg-white/20 animate-pulse-slow"></div>
</section>
<!-- Featured Projects -->
<section id="work" class="py-20 px-6 bg-white">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<span class="text-primary font-semibold">OUR WORK</span>
<h2 class="text-4xl font-bold mt-2 mb-4">Featured Projects</h2>
<p class="text-lg text-dark/70 max-w-2xl mx-auto">Explore our portfolio of digital masterpieces that have helped brands stand out and scale.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 -->
<div class="project-card group relative overflow-hidden rounded-xl shadow-lg">
<img src="http://static.photos/technology/1024x576/1" alt="Project 1" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-dark/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div>
<h3 class="text-white text-xl font-bold">Nebula Design System</h3>
<p class="text-white/80 mt-2">UI/UX Design, Frontend Development</p>
<a href="#" class="text-primary font-semibold inline-block mt-4 hover:underline">View Case Study</a>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="project-card group relative overflow-hidden rounded-xl shadow-lg">
<img src="http://static.photos/workspace/1024x576/2" alt="Project 2" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-dark/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div>
<h3 class="text-white text-xl font-bold">Omni Commerce Platform</h3>
<p class="text-white/80 mt-2">Web Development, E-commerce</p>
<a href="#" class="text-primary font-semibold inline-block mt-4 hover:underline">View Case Study</a>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="project-card group relative overflow-hidden rounded-xl shadow-lg">
<img src="http://static.photos/minimal/1024x576/3" alt="Project 3" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-dark/90 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div>
<h3 class="text-white text-xl font-bold">Aurora Brand Identity</h3>
<p class="text-white/80 mt-2">Branding, Visual Design</p>
<a href="#" class="text-primary font-semibold inline-block mt-4 hover:underline">View Case Study</a>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="portfolio.html" class="inline-flex items-center gap-2 px-6 py-3 border border-primary text-primary rounded-full font-semibold hover:bg-primary hover:text-white transition-all">
View All Projects
<i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</section>
<!-- Services -->
<section class="py-20 px-6 bg-gradient-to-br from-primary/5 to-secondary/5">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<span class="text-primary font-semibold">WHAT WE DO</span>
<h2 class="text-4xl font-bold mt-2 mb-4">Our Services</h2>
<p class="text-lg text-dark/70 max-w-2xl mx-auto">Comprehensive digital solutions tailored to your business needs.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Service 1 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
<div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
<i data-feather="layout" class="w-6 h-6 text-primary"></i>
</div>
<h3 class="text-xl font-bold mb-3">UI/UX Design</h3>
<p class="text-dark/70 mb-4">Beautiful, intuitive interfaces designed for optimal user experience and conversion.</p>
<a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 hover:underline">
Learn more <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Service 2 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
<div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
<i data-feather="code" class="w-6 h-6 text-primary"></i>
</div>
<h3 class="text-xl font-bold mb-3">Web Development</h3>
<p class="text-dark/70 mb-4">Custom websites and web applications built with cutting-edge technologies.</p>
<a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 hover:underline">
Learn more <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Service 3 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
<div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
<i data-feather="smartphone" class="w-6 h-6 text-primary"></i>
</div>
<h3 class="text-xl font-bold mb-3">Mobile Apps</h3>
<p class="text-dark/70 mb-4">Native and cross-platform mobile applications for iOS and Android.</p>
<a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 hover:underline">
Learn more <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Service 4 -->
<div class="service-card bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300">
<div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
<i data-feather="bar-chart-2" class="w-6 h-6 text-primary"></i>
</div>
<h3 class="text-xl font-bold mb-3">Digital Marketing</h3>
<p class="text-dark/70 mb-4">Data-driven strategies to grow your online presence and customer base.</p>
<a href="#" class="text-primary font-semibold text-sm flex items-center gap-1 hover:underline">
Learn more <i data-feather="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Team -->
<section id="about" class="py-20 px-6 bg-white">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<span class="text-primary font-semibold">OUR TEAM</span>
<h2 class="text-4xl font-bold mt-2 mb-4">Meet the Experts</h2>
<p class="text-lg text-dark/70 max-w-2xl mx-auto">The creative minds behind PixelPulse's success.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Team Member 1 -->
<div class="team-member text-center">
<div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary/10">
<img src="http://static.photos/people/320x240/1" alt="Alex Chen" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold">Alex Chen</h3>
<p class="text-primary font-medium mb-2">Creative Director</p>
<p class="text-dark/70 text-sm">Visionary designer with 10+ years experience in digital product design.</p>
<div class="flex justify-center gap-3 mt-4">
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="twitter"></i></a>
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="linkedin"></i></a>
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="dribbble"></i></a>
</div>
</div>
<!-- Team Member 2 -->
<div class="team-member text-center">
<div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary/10">
<img src="http://static.photos/people/320x240/2" alt="Jamie Rivera" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold">Jamie Rivera</h3>
<p class="text-primary font-medium mb-2">Lead Developer</p>
<p class="text-dark/70 text-sm">Full-stack wizard specializing in React, Node.js, and cloud architecture.</p>
<div class="flex justify-center gap-3 mt-4">
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="github"></i></a>
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="twitter"></i></a>
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="linkedin"></i></a>
</div>
</div>
<!-- Team Member 3 -->
<div class="team-member text-center">
<div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary/10">
<img src="http://static.photos/people/320x240/3" alt="Taylor Wong" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold">Taylor Wong</h3>
<p class="text-primary font-medium mb-2">UX Researcher</p>
<p class="text-dark/70 text-sm">Human-centered design advocate with psychology background.</p>
<div class="flex justify-center gap-3 mt-4">
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="twitter"></i></a>
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="linkedin"></i></a>
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="instagram"></i></a>
</div>
</div>
<!-- Team Member 4 -->
<div class="team-member text-center">
<div class="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-primary/10">
<img src="http://static.photos/people/320x240/4" alt="Morgan Patel" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold">Morgan Patel</h3>
<p class="text-primary font-medium mb-2">Marketing Strategist</p>
<p class="text-dark/70 text-sm">Growth hacker with expertise in digital campaigns and analytics.</p>
<div class="flex justify-center gap-3 mt-4">
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="twitter"></i></a>
<a href="#" class="text-dark/50 hover:text-primary"><i data-feather="linkedin"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 px-6 bg-gradient-to-br from-primary to-secondary">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<span class="text-white/80 font-semibold">CLIENT LOVE</span>
<h2 class="text-4xl font-bold mt-2 mb-4 text-white">Testimonials</h2>
</div>
<div class="testimonial-slider relative">
<div class="flex overflow-hidden">
<!-- Testimonial 1 -->
<div class="testimonial-slide min-w-full px-4">
<div class="bg-white p-8 rounded-xl max-w-3xl mx-auto relative">
<div class="absolute -top-4 left-8 text-primary">
<i data-feather="quote" class="w-8 h-8"></i>
</div>
<p class="text-lg text-dark/80 mb-6">"PixelPulse transformed our digital presence completely. Their team delivered a website that not only looks stunning but has increased our conversion rate by 140%."</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/1" alt="Sarah Johnson" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Sarah Johnson</h4>
<p class="text-sm text-dark/60">CEO, NovaTech</p>
</div>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-slide min-w-full px-4">
<div class="bg-white p-8 rounded-xl max-w-3xl mx-auto relative">
<div class="absolute -top-4 left-8 text-primary">
<i data-feather="quote" class="w-8 h-8"></i>
</div>
<p class="text-lg text-dark/80 mb-6">"Working with PixelPulse has been a game-changer for our brand. Their creative approach to our mobile app resulted in the highest user retention we've ever seen."</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/2" alt="Michael Rodriguez" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">Michael Rodriguez</h4>
<p class="text-sm text-dark/60">CMO, UrbanFit</p>
</div>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-slide min-w-full px-4">
<div class="bg-white p-8 rounded-xl max-w-3xl mx-auto relative">
<div class="absolute -top-4 left-8 text-primary">
<i data-feather="quote" class="w-8 h-8"></i>
</div>
<p class="text-lg text-dark/80 mb-6">"The e-commerce platform PixelPulse built for us exceeded all expectations. Their technical expertise and attention to detail are truly exceptional."</p>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/3" alt="David Kim" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold">David Kim</h4>
<p class="text-sm text-dark/60">Founder, CraftedGoods</p>
</div>
</div>
</div>
</div>
</div>
<button class="testimonial-prev absolute left-0 top-1/2 -translate-y-1/2 -ml-2 bg-white/80 text-primary p-2 rounded-full shadow-md hover:bg-white z-10">
<i data-feather="chevron-left" class="w-6 h-6"></i>
</button>
<button class="testimonial-next absolute right-0 top-1/2 -translate-y-1/2 -mr-2 bg-white/80 text-primary p-2 rounded-full shadow-md hover:bg-white z-10">
<i data-feather="chevron-right" class="w-6 h-6"></i>
</button>
<div class="flex justify-center gap-2 mt-8">
<button class="testimonial-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all"></button>
<button class="testimonial-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all"></button>
<button class="testimonial-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all"></button>
</div>
</div>
</div>
</section>
<!-- Awards & Recognition -->
<section class="py-20 px-6 bg-white">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<span class="text-primary font-semibold">OUR ACHIEVEMENTS</span>
<h2 class="text-4xl font-bold mt-2 mb-4">Awards & Recognition</h2>
<p class="text-lg text-dark/70 max-w-2xl mx-auto">Industry recognition for our innovative work and client impact.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="flex flex-col items-center text-center p-6">
<div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-4">
<i data-feather="award" class="w-8 h-8 text-primary"></i>
</div>
<h3 class="font-bold text-lg">Webby Awards</h3>
<p class="text-sm text-dark/70 mt-1">Best UX Design 2023</p>
</div>
<div class="flex flex-col items-center text-center p-6">
<div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-4">
<i data-feather="star" class="w-8 h-8 text-primary"></i>
</div>
<h3 class="font-bold text-lg">Awwwards</h3>
<p class="text-sm text-dark/70 mt-1">Site of the Month</p>
</div>
<div class="flex flex-col items-center text-center p-6">
<div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-4">
<i data-feather="trophy" class="w-8 h-8 text-primary"></i>
</div>
<h3 class="font-bold text-lg">CSS Design Awards</h3>
<p class="text-sm text-dark/70 mt-1">Innovation Excellence</p>
</div>
<div class="flex flex-col items-center text-center p-6">
<div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mb-4">
<i data-feather="medal" class="w-8 h-8 text-primary"></i>
</div>
<h3 class="font-bold text-lg">Clutch</h3>
<p class="text-sm text-dark/70 mt-1">Top Design Firm 2023</p>
</div>
</div>
</div>
</section>
<!-- Contact Form -->
<section id="contact" class="py-20 px-6 bg-gradient-to-br from-primary/5 to-secondary/5">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<h2 class="text-4xl font-bold mb-6">Let's Work Together</h2>
<p class="text-lg text-dark/70 mb-8">Ready to bring your vision to life? Get in touch and let's create something amazing together.</p>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
<i data-feather="mail" class="w-5 h-5 text-primary"></i>
</div>
<div>
<h4 class="font-bold">Email Us</h4>
<a href="mailto:hello@pixelpulse.com" class="text-primary hover:underline">hello@pixelpulse.com</a>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
<i data-feather="phone" class="w-5 h-5 text-primary"></i>
</div>
<div>
<h4 class="font-bold">Call Us</h4>
<a href="tel:+18005551234" class="text-primary hover:underline">+1 (800) 555-1234</a>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
<i data-feather="map-pin" class="w-5 h-5 text-primary"></i>
</div>
<div>
<h4 class="font-bold">Visit Us</h4>
<p>123 Creative Lane<br>San Francisco, CA 94107</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<form class="bg-white p-8 rounded-xl shadow-md">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label for="name" class="block text-sm font-medium mb-2">Name</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-dark/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your name">
</div>
<div>
<label for="email" class="block text-sm font-medium mb-2">Email</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-dark/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your email">
</div>
</div>
<div class="mb-6">
<label for="subject" class="block text-sm font-medium mb-2">Subject</label>
<input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-dark/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="How can we help?">
</div>
<div class="mb-6">
<label for="message" class="block text-sm font-medium mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-dark/20 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Tell us about your project..."></textarea>
</div>
<button type="submit" class="w-full py-3 px-6 bg-gradient-to-r from-primary to-secondary text-white font-semibold rounded-lg hover:opacity-90 transition-opacity">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<custom-footer></custom-footer>
<!-- Component Scripts -->
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<!-- Main Script -->
<script src="script.js"></script>
<!-- Feather Icons -->
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |