demo / index.html
Smantech's picture
undefined - Initial Deployment
3e4cfbd verified
Raw History Blame Contribute Delete
45.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmanTech | Professional Computer Repair Services</title>
<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">
<style>
.gradient-bg {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.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);
}
.certificate-hover:hover {
transform: scale(1.05);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #3b82f6;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-md 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-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-laptop-code text-blue-500 text-2xl mr-2"></i>
<span class="text-xl font-bold text-gray-900">Sman<span class="text-blue-500">Tech</span></span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#home" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Home</a>
<a href="#services" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Services</a>
<a href="#about" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">About Us</a>
<a href="#certificates" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Certifications</a>
<a href="#contact" class="nav-link text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Get Help</a>
</div>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="hidden md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">Home</a>
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">Services</a>
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">About Us</a>
<a href="#certificates" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">Certifications</a>
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="gradient-bg text-white py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex md:items-center md:justify-between">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Expert Computer Repair Services</h1>
<p class="text-xl mb-8">Fast, reliable, and affordable tech solutions for students, individuals, and businesses since 2021.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#contact" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold text-center transition duration-300">Get a Free Quote</a>
<a href="#services" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-md text-lg font-semibold text-center transition duration-300">Our Services</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://images.unsplash.com/photo-1551033406-611cf9a28f67?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Computer Repair" class="rounded-lg shadow-2xl max-w-full h-auto">
</div>
</div>
</div>
</section>
<!-- Trust Indicators -->
<section class="bg-gray-50 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="p-4">
<div class="text-blue-600 text-4xl font-bold mb-2">500+</div>
<div class="text-gray-600">Satisfied Clients</div>
</div>
<div class="p-4">
<div class="text-blue-600 text-4xl font-bold mb-2">99%</div>
<div class="text-gray-600">Success Rate</div>
</div>
<div class="p-4">
<div class="text-blue-600 text-4xl font-bold mb-2">24/7</div>
<div class="text-gray-600">Support Available</div>
</div>
<div class="p-4">
<div class="text-blue-600 text-4xl font-bold mb-2">1h</div>
<div class="text-gray-600">Average Response Time</div>
</div>
</div>
</div>
</section>
<!-- Services 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 font-bold text-gray-900 mb-4">Our Professional Services</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Comprehensive tech solutions tailored to meet your specific needs</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service Card 1 -->
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-microchip text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900">Hardware Repair</h3>
</div>
<p class="text-gray-600 mb-4">From screen replacements to motherboard repairs, our certified technicians handle all hardware issues with precision.</p>
<ul class="text-gray-600 space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Laptop & Desktop Repairs</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Component Replacement</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Data Recovery</li>
</ul>
</div>
</div>
<!-- Service Card 2 -->
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-bug text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900">Virus Removal</h3>
</div>
<p class="text-gray-600 mb-4">Protect your data and privacy with our thorough malware removal and prevention services.</p>
<ul class="text-gray-600 space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Malware & Spyware Removal</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> System Disinfection</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Security Setup</li>
</ul>
</div>
</div>
<!-- Service Card 3 -->
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-tools text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900">System Optimization</h3>
</div>
<p class="text-gray-600 mb-4">Boost your computer's performance with our comprehensive optimization services.</p>
<ul class="text-gray-600 space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Speed Up Slow Computers</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Software Cleanup</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Startup Management</li>
</ul>
</div>
</div>
<!-- Service Card 4 -->
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-desktop text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900">Custom PC Builds</h3>
</div>
<p class="text-gray-600 mb-4">Get a high-performance computer tailored to your specific needs and budget.</p>
<ul class="text-gray-600 space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Gaming Rigs</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Workstations</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Budget Builds</li>
</ul>
</div>
</div>
<!-- Service Card 5 -->
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-building text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900">Business Solutions</h3>
</div>
<p class="text-gray-600 mb-4">Keep your business running smoothly with our professional IT support services.</p>
<ul class="text-gray-600 space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Office Maintenance</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Network Setup</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> IT Consulting</li>
</ul>
</div>
</div>
<!-- Service Card 6 -->
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-wifi text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-gray-900">Remote Support</h3>
</div>
<p class="text-gray-600 mb-4">Get instant help from our technicians without leaving your home or office.</p>
<ul class="text-gray-600 space-y-2 mb-4">
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Quick Problem Solving</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Software Installation</li>
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Troubleshooting</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Why Choose Us -->
<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 font-bold text-gray-900 mb-4">Why Choose SmanTech?</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">We go above and beyond to deliver exceptional service</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-award text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Certified Experts</h3>
<p class="text-gray-600">Our technicians hold multiple certifications and undergo continuous training to stay ahead of technology trends.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-clock text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Fast Turnaround</h3>
<p class="text-gray-600">Most repairs completed within 24 hours. We understand you can't afford long downtimes.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Warranty Protection</h3>
<p class="text-gray-600">All our repairs come with a 90-day warranty. We stand behind our work.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-dollar-sign text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Transparent Pricing</h3>
<p class="text-gray-600">No hidden fees. We provide upfront pricing before any work begins.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-user-tie text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Personalized Service</h3>
<p class="text-gray-600">We treat every customer as our only customer, with customized solutions for your needs.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-heart text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Community Focused</h3>
<p class="text-gray-600">We support local schools and offer student discounts because we care about our community.</p>
</div>
</div>
</div>
</section>
<!-- About Us Section -->
<section id="about" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex md:items-center md:space-x-12">
<div class="md:w-1/2 mb-10 md:mb-0">
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Our Team" class="rounded-lg shadow-xl w-full">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl font-bold text-gray-900 mb-6">About SmanTech</h2>
<p class="text-gray-600 mb-4">Founded in 2021 and actively serving since 2023, SmanTech was born out of a passion for technology and a desire to provide honest, reliable computer repair services to our community.</p>
<p class="text-gray-600 mb-4">What started as a small operation has grown into a trusted name in computer repair, serving hundreds of satisfied customers including students, families, and local businesses.</p>
<p class="text-gray-600 mb-6">Our mission is simple: to provide fast, affordable, and professional tech solutions while building lasting relationships with our customers.</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-check-circle text-green-500"></i>
</div>
<p class="ml-3 text-gray-600">100% satisfaction guarantee on all services</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-check-circle text-green-500"></i>
</div>
<p class="ml-3 text-gray-600">Ethical business practices with no unnecessary upsells</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-check-circle text-green-500"></i>
</div>
<p class="ml-3 text-gray-600">Continuous training to stay current with technology trends</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Certifications Section -->
<section id="certificates" 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 font-bold text-gray-900 mb-4">Our Certifications</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Recognized expertise you can trust</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
<div class="certificate-hover bg-white p-6 rounded-lg shadow-md flex items-center justify-center transition duration-300">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/CompTIA_logo.svg/1200px-CompTIA_logo.svg.png" alt="CompTIA" class="h-16 object-contain">
</div>
<div class="certificate-hover bg-white p-6 rounded-lg shadow-md flex items-center justify-center transition duration-300">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Microsoft_Certified_Professional_logo.png/640px-Microsoft_Certified_Professional_logo.png" alt="Microsoft Certified" class="h-16 object-contain">
</div>
<div class="certificate-hover bg-white p-6 rounded-lg shadow-md flex items-center justify-center transition duration-300">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Apple_Computer_Logo_rainbow.svg/1200px-Apple_Computer_Logo_rainbow.svg.png" alt="Apple Certified" class="h-16 object-contain">
</div>
<div class="certificate-hover bg-white p-6 rounded-lg shadow-md flex items-center justify-center transition duration-300">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png" alt="Google IT Certified" class="h-16 object-contain">
</div>
<div class="certificate-hover bg-white p-6 rounded-lg shadow-md flex items-center justify-center transition duration-300">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Cisco_logo.svg/1200px-Cisco_logo.svg.png" alt="Cisco Certified" class="h-16 object-contain">
</div>
</div>
<div class="mt-12 text-center">
<h3 class="text-xl font-semibold mb-4">Local Business Recognition</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
<div class="certificate-hover bg-white p-6 rounded-lg shadow-md flex items-center justify-center transition duration-300">
<div class="text-center">
<div class="text-blue-600 text-4xl mb-2"><i class="fas fa-medal"></i></div>
<p class="font-medium">2023 Best Tech Startup</p>
</div>
</div>
<div class="certificate-hover bg-white p-6 rounded-lg shadow-md flex items-center justify-center transition duration-300">
<div class="text-center">
<div class="text-blue-600 text-4xl mb-2"><i class="fas fa-thumbs-up"></i></div>
<p class="font-medium">Community Excellence Award</p>
</div>
</div>
<div class="certificate-hover bg-white p-6 rounded-lg shadow-md flex items-center justify-center transition duration-300">
<div class="text-center">
<div class="text-blue-600 text-4xl mb-2"><i class="fas fa-star"></i></div>
<p class="font-medium">Customer Service Excellence</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-blue-600 text-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 font-bold mb-4">What Our Clients Say</h2>
<p class="text-xl opacity-90 max-w-3xl mx-auto">Don't just take our word for it - hear from our satisfied customers</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white bg-opacity-10 p-8 rounded-lg backdrop-filter backdrop-blur-sm">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-xl mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="mb-6">"SmanTech saved my business when our server crashed. They responded immediately and had us back up and running in no time. Their professionalism and expertise are unmatched."</p>
<div class="flex items-center">
<div class="bg-white text-blue-600 rounded-full w-12 h-12 flex items-center justify-center font-bold text-lg mr-4">JD</div>
<div>
<h4 class="font-semibold">John D.</h4>
<p class="text-sm opacity-80">Small Business Owner</p>
</div>
</div>
</div>
<div class="bg-white bg-opacity-10 p-8 rounded-lg backdrop-filter backdrop-blur-sm">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-xl mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="mb-6">"As a student, I appreciate their affordable prices and student discount. They fixed my laptop quickly and explained everything in terms I could understand. Highly recommend!"</p>
<div class="flex items-center">
<div class="bg-white text-blue-600 rounded-full w-12 h-12 flex items-center justify-center font-bold text-lg mr-4">SM</div>
<div>
<h4 class="font-semibold">Sarah M.</h4>
<p class="text-sm opacity-80">University Student</p>
</div>
</div>
</div>
<div class="bg-white bg-opacity-10 p-8 rounded-lg backdrop-filter backdrop-blur-sm">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-xl mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="mb-6">"The custom gaming PC they built for me is incredible! They took the time to understand exactly what I needed and delivered beyond my expectations. Will definitely use them again."</p>
<div class="flex items-center">
<div class="bg-white text-blue-600 rounded-full w-12 h-12 flex items-center justify-center font-bold text-lg mr-4">AR</div>
<div>
<h4 class="font-semibold">Alex R.</h4>
<p class="text-sm opacity-80">Gaming Enthusiast</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex md:items-start md:space-x-12">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-3xl font-bold text-gray-900 mb-6">Get In Touch</h2>
<p class="text-gray-600 mb-8">Have questions or need immediate assistance? Fill out the form and our team will get back to you promptly.</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-map-marker-alt text-blue-600"></i>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold text-gray-900">Our Location</h4>
<p class="text-gray-600">123 Tech Street, Suite 456<br>Innovation City, IC 78910</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-phone-alt text-blue-600"></i>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold text-gray-900">Call Us</h4>
<p class="text-gray-600">+1 (555) 123-4567<br>Mon-Fri: 8am-6pm | Sat: 9am-3pm</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-envelope text-blue-600"></i>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold text-gray-900">Email Us</h4>
<p class="text-gray-600">support@smantech.com<br>quotes@smantech.com</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-clock text-blue-600"></i>
</div>
<div class="ml-4">
<h4 class="text-lg font-semibold text-gray-900">Emergency Support</h4>
<p class="text-gray-600">Available 24/7 for critical business systems<br>+1 (555) 987-6543</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="text-lg font-semibold mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="bg-blue-100 text-blue-600 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-blue-100 text-blue-600 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="bg-blue-100 text-blue-600 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="bg-blue-100 text-blue-600 hover:bg-blue-200 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="md:w-1/2">
<form class="bg-gray-50 p-8 rounded-lg shadow-md">
<div class="mb-6">
<label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your name">
</div>
<div class="mb-6">
<label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="your@email.com">
</div>
<div class="mb-6">
<label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
<input type="tel" id="phone" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="(555) 123-4567">
</div>
<div class="mb-6">
<label for="service" class="block text-gray-700 font-medium mb-2">Service Needed</label>
<select id="service" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<option value="">Select a service</option>
<option value="hardware">Hardware Repair</option>
<option value="virus">Virus Removal</option>
<option value="optimization">System Optimization</option>
<option value="custom">Custom PC Build</option>
<option value="business">Business Solutions</option>
<option value="remote">Remote Support</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
<textarea id="message" rows="5" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Describe your issue or request..."></textarea>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md transition duration-300">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="gradient-bg text-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-6">Ready to Get Your Tech Fixed?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto">Don't let computer problems slow you down. Contact us today for fast, reliable service.</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#contact" class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 rounded-md text-lg font-semibold transition duration-300"><i class="fas fa-envelope mr-2"></i> Email Us</a>
<a href="tel:+15551234567" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 rounded-md text-lg font-semibold transition duration-300"><i class="fas fa-phone-alt mr-2"></i> Call Now</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-laptop-code text-blue-500 text-2xl mr-2"></i>
<span>Sman<span class="text-blue-500">Tech</span></span>
</h3>
<p class="text-gray-400 mb-4">Professional computer repair services since 2021. Serving students, individuals, and businesses with expert tech solutions.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
<li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
<li><a href="#certificates" class="text-gray-400 hover:text-white transition duration-300">Certifications</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Hardware Repair</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Virus Removal</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">System Optimization</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Custom PC Builds</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Business Solutions</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Newsletter</h4>
<p class="text-gray-400 mb-4">Subscribe to our newsletter for tech tips and special offers.</p>
<form class="flex">
<input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md focus:outline-none text-gray-900 w-full">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-md transition duration-300"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 SmanTech Computer Repair Services. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Sitemap</a>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition duration-300 opacity-0 invisible">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Back to top button
const backToTopButton = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('opacity-0', 'invisible');
backToTopButton.classList.add('opacity-100', 'visible');
} else {
backToTopButton.classList.remove('opacity-100', 'visible');
backToTopButton.classList.add('opacity-0', 'invisible');
}
});
backToTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Smantech/demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>