Spaces:
Running
Running
| <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> |