|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PixelPerfect WebCraft | Web Development Services</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
|
|
|
.tech-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tech-icon:hover { |
|
|
transform: translateY(-5px); |
|
|
filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.1)); |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-20 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/2024/04/Fida-Jadoon-logo.png" alt="Logo" class="h-12"> |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Home</a> |
|
|
<a href="#services" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Services</a> |
|
|
<a href="#portfolio" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Portfolio</a> |
|
|
<a href="#contact" class="text-gray-700 hover:text-indigo-600 px-3 py-2 font-medium">Contact</a> |
|
|
<a href="#contact" class="bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700 transition duration-300"> |
|
|
Free Consultation |
|
|
</a> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button class="text-gray-700"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6"> |
|
|
Transform Your Digital Presence |
|
|
</h1> |
|
|
<p class="text-lg md:text-xl mb-8 opacity-90"> |
|
|
Cutting-edge web solutions designed to captivate your audience and drive meaningful results. From responsive design to robust functionality, we craft websites that work as hard as you do. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="#contact" class="bg-white text-indigo-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition duration-300"> |
|
|
Get Started |
|
|
</a> |
|
|
<a href="#portfolio" class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-600 transition duration-300"> |
|
|
View Our Work |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/2025/09/web-development-1.webp" alt="Web Development" class="rounded-lg shadow-2xl max-w-full h-auto"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4"> |
|
|
Comprehensive Web Development Services |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
We offer end-to-end web solutions tailored to your business needs |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="layout" class="text-indigo-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">UI/UX Web Design</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Creating exceptional user experiences with aesthetic appeal and functional design principles to engage visitors and convert them into customers. |
|
|
</p> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center"> |
|
|
Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="code" class="text-indigo-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Frontend Development</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Bringing designs to life with clean, efficient code and modern web technologies for flawless performance across all devices. |
|
|
</p> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center"> |
|
|
Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="server" class="text-indigo-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Backend Development</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Architecting secure and scalable server-side solutions with efficient data processing and robust API functionality. |
|
|
</p> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center"> |
|
|
Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="cpu" class="text-indigo-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Full Stack Development</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Comprehensive end-to-end web solutions with dynamic capabilities across channels for a cohesive user experience. |
|
|
</p> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center"> |
|
|
Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="zap" class="text-indigo-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">No/Low Code Development</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Accelerating development with no-code and low-code platforms to quickly build and deploy web applications. |
|
|
</p> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center"> |
|
|
Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-8 service-card transition duration-300"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="cloud" class="text-indigo-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Cloud Development</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Optimizing web applications for performance, security, and scalability with cloud computing solutions. |
|
|
</p> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center"> |
|
|
Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4"> |
|
|
Our Technology Stack |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
We leverage the latest technologies to build robust, scalable websites |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-8"> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/HTML5_Badge_512-rc6zfp93q98pd2m9zrwfcfqef1rpa4cemrnlw1gd3w.png" alt="HTML5" class="h-16 w-16"> |
|
|
<span class="mt-2 text-sm font-medium text-gray-700">HTML5</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/css3-rc6zfndfcl64pup0ar367g7h8a0yuq4xyicmxhj5gc.png" alt="CSS3" class="h-16 w-16"> |
|
|
<span class="mt-2 text-sm font-medium text-gray-700">CSS3</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/2025/09/jquery-4.svg" alt="jQuery" class="h-16 w-16"> |
|
|
<span class="mt-2 text-sm font-medium text-gray-700">jQuery</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/java-coffee-cup-logo-rc6zm4hefi18p5aehjundtdsju3zvnudik51y3xil8.png" alt="Java" class="h-16 w-16"> |
|
|
<span class="mt-2 text-sm font-medium text-gray-700">Java</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/Unofficial_JavaScript_logo_2.svg-rc6zm7ax0053nz6b132j3ao6bzq3ir5kiy3idxtc2k.png" alt="JavaScript" class="h-16 w-16"> |
|
|
<span class="mt-2 text-sm font-medium text-gray-700">JavaScript</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/Python-Emblem-scaled-rc6zfuw4v9gfaqe32uc6reb5zczwkaysnjkirp802k.png" alt="Python" class="h-16 w-16"> |
|
|
<span class="mt-2 text-sm font-medium text-gray-700">Python</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/Wordpress_Blue_logo-rc70lucm4uxhvpelwzoa4swd6y24dln6fclagmyy58.png" alt="WordPress" class="h-16 w-16"> |
|
|
<span class="mt-2 text-sm font-medium text-gray-700">WordPress</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center tech-icon"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/elementor/thumbs/Angular_full_color_logo.svg-rc70o44kng1fxs3tnh0tnq9gvgv1z9ntqlcj7plp3w.png" alt="Angular" class="h-16 w-16"> |
|
|
<span class="mt-2 text-sm font-medium text-gray-700">Angular</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="portfolio" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4"> |
|
|
Our Recent Work |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
See how we've helped businesses transform their digital presence |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/2025/08/Primary-Care-Provider-East-Windsor-NJ-Family-Doctor-Medical-Weight-Loss-08-29-2025_11_47_PM-scaled.png" alt="Prime Health of NJ" class="w-full h-64 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Prime Health of NJ</h3> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Website Design</span> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Enhanced UX/UI</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center"> |
|
|
View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/2025/08/pic-5-scaled.webp" alt="Beyond Infinity ABA" class="w-full h-64 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Beyond Infinity ABA</h3> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Website Design</span> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Content Strategy</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center"> |
|
|
View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/2025/08/pic-6-scaled.webp" alt="Green Wellness PLLC" class="w-full h-64 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Green Wellness PLLC</h3> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Enhanced UX/UI</span> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Responsiveness</span> |
|
|
</div> |
|
|
<a href="#" class="text-indigo-600 font-medium flex items-center"> |
|
|
View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300"> |
|
|
View All Projects |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-3 gap-8 text-center"> |
|
|
<div class="p-8"> |
|
|
<div class="text-5xl font-bold mb-2">10+</div> |
|
|
<div class="text-xl font-medium">Years of Experience</div> |
|
|
</div> |
|
|
<div class="p-8"> |
|
|
<div class="text-5xl font-bold mb-2">100+</div> |
|
|
<div class="text-xl font-medium">Projects Delivered</div> |
|
|
</div> |
|
|
<div class="p-8"> |
|
|
<div class="text-5xl font-bold mb-2">$5M+</div> |
|
|
<div class="text-xl font-medium">Revenue Generated</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4"> |
|
|
What Our Clients Say |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
Don't just take our word for it - hear from our satisfied clients |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Sarah Johnson</h4> |
|
|
<p class="text-gray-600">CEO, Prime Health</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 italic"> |
|
|
"Working with PixelPerfect WebCraft transformed our online presence. Their attention to detail and user experience design increased our patient inquiries by 40%." |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Michael Chen</h4> |
|
|
<p class="text-gray-600">Director, Beyond Infinity</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 italic"> |
|
|
"The team delivered our project on time and exceeded our expectations. Their technical expertise and creative solutions were exactly what we needed." |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Lisa Rodriguez</h4> |
|
|
<p class="text-gray-600">Founder, Green Wellness</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 italic"> |
|
|
"From initial concept to final implementation, the communication was excellent. Our new website has significantly improved our online conversions." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="bg-indigo-600 rounded-2xl px-8 py-12 md:p-16 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6"> |
|
|
Ready to Transform Your Digital Presence? |
|
|
</h2> |
|
|
<p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto"> |
|
|
Let's discuss how we can create a website that drives results for your business. |
|
|
</p> |
|
|
<a href="#contact" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-full text-indigo-600 bg-white hover:bg-gray-100 transition duration-300"> |
|
|
Get Started Today |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6"> |
|
|
Get In Touch |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
Have a project in mind or questions about our services? Reach out to us and we'll get back to you within 24 hours. |
|
|
</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="phone" class="text-indigo-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-base text-gray-600">+92 3149858699</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="mail" class="text-indigo-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-base text-gray-600">info@fidajadoon.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i data-feather="map-pin" class="text-indigo-600 w-6 h-6"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-base text-gray-600">Islamabad, Pakistan</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg"> |
|
|
<form> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">Your Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Address</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-2">Your Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div class="md:col-span-2"> |
|
|
<a href="#" class="flex items-center mb-6"> |
|
|
<img src="https://fidajadoon.com/wp-content/uploads/2024/04/Fida-Jadoon-logo-1024x196.png" alt="Logo" class="h-12"> |
|
|
</a> |
|
|
<p class="text-gray-400 mb-6"> |
|
|
We offer end-to-end digital marketing solutions from custom websites to SEO, paid ads, social media, branding, and email campaigns. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="facebook" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="twitter" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="linkedin" class="w-5 h-5"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i data-feather="instagram" class="w-5 h-5"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> |
|
|
<li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li> |
|
|
<li><a href="#portfolio" class="text-gray-400 hover:text-white">Portfolio</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Services</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Web Design</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Development</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">SEO</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Digital Marketing</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
© 2025 PixelPerfect WebCraft. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6 mt-4 md:mt-0"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
