|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TechNova | Premium IT Solutions</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> |
|
|
@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, #6e8efb, #a777e3); |
|
|
} |
|
|
|
|
|
.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); |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
background-color: #4f46e5; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.contact-input:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 2px #6366f1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg fixed w-full 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"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-laptop-code text-indigo-600 text-3xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">TechNova</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-center space-x-8"> |
|
|
<a href="#home" class="nav-link text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Home</a> |
|
|
<a href="#services" class="nav-link text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Services</a> |
|
|
<a href="#about" class="nav-link text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a> |
|
|
<a href="#testimonials" class="nav-link text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Testimonials</a> |
|
|
<a href="#contact" class="nav-link text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button id="mobile-menu-button" class="text-gray-900 hover:text-indigo-600 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600">Home</a> |
|
|
<a href="#services" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600">Services</a> |
|
|
<a href="#about" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600">About</a> |
|
|
<a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600">Testimonials</a> |
|
|
<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:flex items-center justify-between"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Innovative Tech Solutions for Your Business</h1> |
|
|
<p class="text-lg md:text-xl mb-8 opacity-90">We deliver cutting-edge technology services to help your business grow and thrive in the digital age.</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-indigo-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">Get Started</a> |
|
|
<a href="#services" class="border-2 border-white text-white hover:bg-white hover:text-indigo-600 px-8 py-3 rounded-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://cdn-icons-png.flaticon.com/512/3242/3242257.png" alt="Tech Services" class="hero-image w-3/4 md:w-full max-w-md"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> |
|
|
<div class="p-6 rounded-xl bg-gray-50 hover:shadow-lg transition duration-300"> |
|
|
<div class="text-indigo-600 text-4xl mb-4"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold text-gray-900 mb-2">500+</h3> |
|
|
<p class="text-gray-600">Satisfied Clients</p> |
|
|
</div> |
|
|
<div class="p-6 rounded-xl bg-gray-50 hover:shadow-lg transition duration-300"> |
|
|
<div class="text-indigo-600 text-4xl mb-4"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold text-gray-900 mb-2">1200+</h3> |
|
|
<p class="text-gray-600">Projects Completed</p> |
|
|
</div> |
|
|
<div class="p-6 rounded-xl bg-gray-50 hover:shadow-lg transition duration-300"> |
|
|
<div class="text-indigo-600 text-4xl mb-4"> |
|
|
<i class="fas fa-headset"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold text-gray-900 mb-2">24/7</h3> |
|
|
<p class="text-gray-600">Support Available</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-16 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-900 mb-4">Our Services</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">We offer a comprehensive range of technology services to meet all your business needs.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> |
|
|
<div class="text-indigo-600 text-4xl mb-6"> |
|
|
<i class="fas fa-globe"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Web Development</h3> |
|
|
<p class="text-gray-600 mb-6">Custom websites and web applications built with modern technologies to drive your business forward.</p> |
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Responsive Design</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>SEO Optimized</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>E-commerce Solutions</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-indigo-600 font-semibold hover:text-indigo-800 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> |
|
|
<div class="text-indigo-600 text-4xl mb-6"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Mobile App Development</h3> |
|
|
<p class="text-gray-600 mb-6">Native and cross-platform mobile applications for iOS and Android that engage your customers.</p> |
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>iOS & Android</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>React Native & Flutter</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>App Store Optimization</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-indigo-600 font-semibold hover:text-indigo-800 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> |
|
|
<div class="text-indigo-600 text-4xl mb-6"> |
|
|
<i class="fas fa-cloud"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Cloud Solutions</h3> |
|
|
<p class="text-gray-600 mb-6">Scalable cloud infrastructure and services to ensure your business is always available and secure.</p> |
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>AWS, Azure & Google Cloud</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Migration Services</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>24/7 Monitoring</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-indigo-600 font-semibold hover:text-indigo-800 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> |
|
|
<div class="text-indigo-600 text-4xl mb-6"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Cyber Security</h3> |
|
|
<p class="text-gray-600 mb-6">Comprehensive security solutions to protect your business from evolving digital threats.</p> |
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Vulnerability Assessment</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Penetration Testing</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Security Training</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-indigo-600 font-semibold hover:text-indigo-800 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> |
|
|
<div class="text-indigo-600 text-4xl mb-6"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Data Analytics</h3> |
|
|
<p class="text-gray-600 mb-6">Transform your data into actionable insights with our advanced analytics solutions.</p> |
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Business Intelligence</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Predictive Analytics</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Custom Dashboards</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-indigo-600 font-semibold hover:text-indigo-800 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white p-8 rounded-xl shadow-md transition duration-300"> |
|
|
<div class="text-indigo-600 text-4xl mb-6"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">AI & Automation</h3> |
|
|
<p class="text-gray-600 mb-6">Leverage artificial intelligence and automation to streamline your business processes.</p> |
|
|
<ul class="space-y-2 mb-6"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Chatbots & Virtual Assistants</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Process Automation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Machine Learning Models</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#contact" class="text-indigo-600 font-semibold hover:text-indigo-800 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:flex items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/3242/3242255.png" alt="About TechNova" class="w-full max-w-md mx-auto rounded-lg shadow-lg"> |
|
|
</div> |
|
|
<div class="md:w-1/2 md:pl-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">About TechNova</h2> |
|
|
<p class="text-gray-600 mb-6">Founded in 2015, TechNova has grown from a small startup to a leading technology services provider with a global client base. Our mission is to empower businesses through innovative technology solutions.</p> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="text-indigo-600 mr-4 mt-1"> |
|
|
<i class="fas fa-bullseye text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-2">Our Vision</h4> |
|
|
<p class="text-gray-600">To be the most trusted technology partner for businesses worldwide, driving digital transformation and innovation.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="text-indigo-600 mr-4 mt-1"> |
|
|
<i class="fas fa-hand-holding-heart text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-2">Our Values</h4> |
|
|
<p class="text-gray-600">Innovation, Integrity, Excellence, and Customer Success are at the core of everything we do.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-indigo-600 mr-4 mt-1"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-2">Our Team</h4> |
|
|
<p class="text-gray-600">A diverse team of 150+ experts in software development, cloud computing, cybersecurity, and data science.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="flex items-center bg-gray-50 px-4 py-2 rounded-lg"> |
|
|
<i class="fas fa-medal text-indigo-600 mr-2"></i> |
|
|
<span class="text-sm font-medium">ISO 27001 Certified</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-50 px-4 py-2 rounded-lg"> |
|
|
<i class="fas fa-award text-indigo-600 mr-2"></i> |
|
|
<span class="text-sm font-medium">AWS Partner</span> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-50 px-4 py-2 rounded-lg"> |
|
|
<i class="fas fa-trophy text-indigo-600 mr-2"></i> |
|
|
<span class="text-sm font-medium">Top Developer 2023</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="py-16 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-900 mb-4">What Our Clients Say</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Don't just take our word for it. Here's what our clients have to say about working with us.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-gray-900">Sarah Johnson</h4> |
|
|
<p class="text-indigo-600">CEO, Digital Solutions Inc.</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"TechNova transformed our e-commerce platform, resulting in a 40% increase in sales within three months. Their team was professional, responsive, and delivered beyond our expectations."</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-gray-900">Michael Chen</h4> |
|
|
<p class="text-indigo-600">CTO, FinTech Innovations</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"The mobile app developed by TechNova has been downloaded over 500,000 times with a 4.8-star rating. Their attention to detail and user experience design is exceptional."</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez"> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold text-gray-900">Emma Rodriguez</h4> |
|
|
<p class="text-indigo-600">Director, HealthCare Systems</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">"TechNova's cloud migration services saved us 30% on infrastructure costs while improving system reliability. Their security expertise gave us complete peace of mind."</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300"> |
|
|
Get in Touch <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 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-900 mb-4">Get In Touch</h2> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Ready to start your next project with us? Send us a message and we'll get back to you within 24 hours.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 gradient-bg text-white p-12"> |
|
|
<h3 class="text-2xl font-bold mb-6">Contact Information</h3> |
|
|
<p class="mb-8 opacity-90">Fill out the form or reach out to us directly using the contact details below.</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-map-marker-alt text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold">Our Office</h4> |
|
|
<p class="opacity-90">123 Tech Street, Silicon Valley, CA 94025</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold">Email Us</h4> |
|
|
<p class="opacity-90">info@technova.com<br>support@technova.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-phone-alt text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-semibold">Call Us</h4> |
|
|
<p class="opacity-90">+1 (555) 123-4567<br>Mon-Fri, 9am-6pm PST</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<h4 class="text-lg font-semibold mb-4">Follow Us</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-white hover:text-gray-200 text-xl"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-white hover:text-gray-200 text-xl"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-white hover:text-gray-200 text-xl"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="text-white hover:text-gray-200 text-xl"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-white hover:text-gray-200 text-xl"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 p-12"> |
|
|
<form id="contactForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
|
|
<input type="text" id="name" name="name" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600" required> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
|
|
<input type="email" id="email" name="email" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600" required> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> |
|
|
<input type="tel" id="phone" name="phone" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="service" class="block text-sm font-medium text-gray-700 mb-1">Service Interested In</label> |
|
|
<select id="service" name="service" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600"> |
|
|
<option value="">Select a service</option> |
|
|
<option value="web-development">Web Development</option> |
|
|
<option value="mobile-app">Mobile App Development</option> |
|
|
<option value="cloud-solutions">Cloud Solutions</option> |
|
|
<option value="cyber-security">Cyber Security</option> |
|
|
<option value="data-analytics">Data Analytics</option> |
|
|
<option value="ai-automation">AI & Automation</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Your Message</label> |
|
|
<textarea id="message" name="message" rows="4" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600"></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<button type="submit" class="w-full flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300"> |
|
|
Send Message <i class="fas fa-paper-plane ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Subscribe to Our Newsletter</h2> |
|
|
<p class="text-lg opacity-90 max-w-2xl mx-auto mb-8">Stay updated with the latest technology trends, company news, and special offers.</p> |
|
|
|
|
|
<form class="max-w-md mx-auto flex flex-col sm:flex-row gap-4"> |
|
|
<input type="email" placeholder="Enter your email" class="flex-grow px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-white text-gray-900"> |
|
|
<button type="submit" class="px-6 py-3 bg-white text-indigo-600 font-semibold rounded-lg hover:bg-gray-100 transition duration-300"> |
|
|
Subscribe |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<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-2 lg:grid-cols-4 gap-10"> |
|
|
<div> |
|
|
<div class="flex items-center mb-6"> |
|
|
<i class="fas fa-laptop-code text-indigo-500 text-3xl mr-2"></i> |
|
|
<span class="text-xl font-bold">TechNova</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-6">Innovative technology solutions for businesses of all sizes.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-6">Services</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Web Development</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Mobile App Development</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Cloud Solutions</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Cyber Security</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Data Analytics</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-6">Company</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-white">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Press</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-6">Support</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">API Status</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Community</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">System Status</a></li> |
|
|
</ul> |
|
|
</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 TechNova. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="backToTop" class="fixed bottom-8 right-8 bg-indigo-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-indigo-700"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('backToTop'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
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', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const contactForm = document.getElementById('contactForm'); |
|
|
|
|
|
contactForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const name = document.getElementById('name').value; |
|
|
const email = document.getElementById('email').value; |
|
|
const message = document.getElementById('message').value; |
|
|
|
|
|
|
|
|
|
|
|
alert(`Thank you, ${name}! Your message has been received. We'll contact you at ${email} soon.`); |
|
|
|
|
|
|
|
|
contactForm.reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1 |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animate__animated', 'animate__fadeInUp'); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.service-card, .testimonial-card').forEach(card => { |
|
|
observer.observe(card); |
|
|
}); |
|
|
</script> |
|
|
<p><a href="https://enzostvs-deepsite.hf.space?remix=Howie254/web-demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
