Download index.html from Smantech/demo: direct link, hf CLI and curl.
- Browser
- Download file 45.6 kB
-
https://huggingface.co/spaces/Smantech/demo/resolve/main/index.html
- Command line
-
hf download hf://spaces/Smantech/demo/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Smantech/demo/resolve/main/index.html
45.6 kB
| <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> |