File size: 9,615 Bytes
9fb46c9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel's IT Consulting</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="font-sans antialiased">
<!-- Hero Section -->
<section class="gradient-bg text-white py-20 px-4">
<div class="container mx-auto max-w-6xl text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Transforming Ideas Into Digital Reality</h1>
<p class="text-xl md:text-2xl mb-12">Expert IT Consulting for Startups and Enterprises</p>
<a href="#contact" class="bg-white text-indigo-700 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 inline-block">Get In Touch</a>
</div>
</section>
<!-- Services Section -->
<section class="py-20 px-4 bg-gray-50">
<div class="container mx-auto max-w-6xl">
<h2 class="text-3xl font-bold text-center mb-16 text-gray-800">Our Services</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- DevOps Card -->
<div class="bg-white rounded-lg shadow-lg p-8 card-hover transition duration-300">
<div class="text-indigo-600 mb-4">
<i class="fas fa-server text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-4 text-gray-800">DevOps Solutions</h3>
<p class="text-gray-600">Streamline your development process with our CI/CD pipelines, containerization, and cloud infrastructure expertise.</p>
</div>
<!-- Full Stack Card -->
<div class="bg-white rounded-lg shadow-lg p-8 card-hover transition duration-300">
<div class="text-indigo-600 mb-4">
<i class="fas fa-code text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-4 text-gray-800">Full Stack Development</h3>
<p class="text-gray-600">End-to-end web and application development with modern frameworks and best practices.</p>
</div>
<!-- QA Card -->
<div class="bg-white rounded-lg shadow-lg p-8 card-hover transition duration-300">
<div class="text-indigo-600 mb-4">
<i class="fas fa-bug text-4xl"></i>
</div>
<h3 class="text-xl font-bold mb-4 text-gray-800">Quality Assurance</h3>
<p class="text-gray-600">Comprehensive testing strategies to ensure your product meets the highest quality standards.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 px-4 bg-white">
<div class="container mx-auto max-w-6xl">
<h2 class="text-3xl font-bold text-center mb-16 text-gray-800">What Our Clients Say</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="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>
<p class="text-gray-600 italic mb-6">"Daniel's team transformed our deployment process, reducing our release cycles from weeks to days. Their DevOps expertise is unmatched!"</p>
<div class="flex items-center">
<img src="http://static.photos/people/200x200/42" alt="Client" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Sarah Johnson</h4>
<p class="text-gray-500 text-sm">CTO, TechStart Inc.</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="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>
<p class="text-gray-600 italic mb-6">"The web application they developed exceeded our expectations. Their full stack team delivered on time and within budget."</p>
<div class="flex items-center">
<img src="http://static.photos/people/200x200/43" alt="Client" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold text-gray-800">Michael Chen</h4>
<p class="text-gray-500 text-sm">Product Manager, Enterprise Corp</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 px-4 bg-gray-800 text-white">
<div class="container mx-auto max-w-6xl">
<h2 class="text-3xl font-bold text-center mb-16">Get In Touch</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<h3 class="text-xl font-bold mb-6">Contact Information</h3>
<div class="space-y-4">
<div class="flex items-start">
<i class="fas fa-envelope mt-1 mr-4"></i>
<span>contact@danielsitconsulting.com</span>
</div>
<div class="flex items-start">
<i class="fas fa-phone mt-1 mr-4"></i>
<span>+1 (555) 123-4567</span>
</div>
<div class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 mr-4"></i>
<span>123 Tech Street, Silicon Valley, CA 94025</span>
</div>
</div>
<div class="mt-8">
<h4 class="font-bold mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-indigo-300"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="text-white hover:text-indigo-300"><i class="fab fa-linkedin text-xl"></i></a>
<a href="#" class="text-white hover:text-indigo-300"><i class="fab fa-github text-xl"></i></a>
</div>
</div>
</div>
<div>
<form class="space-y-4">
<div>
<label for="name" class="block mb-2">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-indigo-400">
</div>
<div>
<label for="email" class="block mb-2">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-indigo-400">
</div>
<div>
<label for="message" class="block mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-indigo-400"></textarea>
</div>
<button type="submit" class="bg-indigo-600 text-white py-2 px-6 rounded hover:bg-indigo-700 transition duration-300">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-8 px-4">
<div class="container mx-auto max-w-6xl text-center">
<p>© 2023 Daniel's IT Consulting. All rights reserved.</p>
</div>
</footer>
<script>
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html> |