-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
367 lines (348 loc) · 21.9 KB
/
index.html
File metadata and controls
367 lines (348 loc) · 21.9 KB
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="MithTechX - Expert freelance services in Web Development, Graphic Design, Logo Design, Finite Element Analysis (FEA), and Data Processing.">
<title>MithTechX Freelance Tech Services • Web • Design • FEA • Data</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
.tailwind-ready * { font-family: 'Inter', system_ui, sans-serif; }
.heading-font { font-family: 'Space Grotesk', sans-serif; }
.hero-bg {
background: linear-gradient(135deg, #0f172a 0%, #1e2937 100%);
}
.nav-link {
position: relative;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #22d3ee;
transition: width 0.3s ease;
}
.nav-link:hover:after { width: 100%; }
.service-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover {
transform: translateY(-12px);
box-shadow: 0 25px 50px -12px rgb(0 180 216 / 0.15);
}
</style>
</head>
<body class="tailwind-ready">
<!-- NAVBAR -->
<nav class="bg-slate-950 text-white border-b border-slate-800 sticky top-0 z-50">
<div class="max-w-screen-2xl mx-auto px-8 py-5 flex items-center justify-between">
<div class="flex items-center gap-x-3">
<img src="https://i.postimg.cc/pVsFJWh1/logo-png.png" alt="MithTechX Logo" class="h-10 w-auto">
<span class="heading-font text-3xl tracking-[-1px] text-white hidden sm:block">MithTechX</span>
</div>
<div class="hidden lg:flex items-center gap-x-10 text-base font-medium">
<a href="#services" class="nav-link">Services</a>
<a href="#projects" class="nav-link">Projects</a>
<a href="#about" class="nav-link">About</a>
<a href="testimonial.html" class="nav-link">Testimonials</a>
<a href="#why-us" class="nav-link">Why Us</a>
<a href="#terms" class="nav-link">Terms</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
<a href="https://wa.me/918261039902" target="_blank"
class="flex items-center gap-x-2 bg-emerald-500 hover:bg-emerald-600 px-6 py-3 rounded-3xl text-sm font-semibold shadow-lg">
<i class="fa-brands fa-whatsapp text-xl"></i>
<span>WhatsApp</span>
</a>
<button id="mobile-menu-btn" class="lg:hidden text-3xl">
<i id="hamburger-icon" class="fa-solid fa-bars"></i>
</button>
</div>
<div id="mobile-menu" class="hidden lg:hidden px-8 pb-8 border-t border-slate-800 bg-slate-950">
<div class="flex flex-col gap-y-6 pt-6 text-lg font-medium">
<a href="#services" onclick="toggleMobileMenu()">Services</a>
<a href="#projects" onclick="toggleMobileMenu()">Projects Delivered</a>
<a href="#about" onclick="toggleMobileMenu()">About</a>
<a href="testimonial.html" onclick="toggleMobileMenu()">Testimonials</a>
<a href="#why-us" onclick="toggleMobileMenu()">Why Us</a>
<a href="#terms" onclick="toggleMobileMenu()">Terms</a>
<a href="#contact" onclick="toggleMobileMenu()">Contact</a>
</div>
</div>
</nav>
<!-- HERO SECTION -->
<header class="hero-bg text-white py-28 lg:py-36">
<div class="max-w-screen-2xl mx-auto px-8">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div>
<div class="inline-flex items-center gap-2 bg-white/10 px-6 py-3 rounded-3xl mb-6 backdrop-blur-md">
<div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
Pune, Maharashtra • Global Projects
</div>
<h1 class="heading-font text-6xl lg:text-7xl leading-none tracking-tighter">
Engineering Excellence.<br>Digital Precision.
</h1>
<p class="mt-8 text-2xl text-slate-200 max-w-lg">
Professional freelance services in Web Development, Graphic Design,
Finite Element Analysis (FEA), and Data Processing.
</p>
<div class="mt-10 text-lg text-slate-300 leading-relaxed max-w-xl">
Hi, I'm MithTechX — a passionate freelance professional from Pune, India.
I combine technical expertise with creative design to deliver high-quality
solutions that are fast, reliable, and tailored to your needs.
</div>
<div class="mt-12 flex flex-wrap gap-4">
<a href="#contact" class="inline-flex items-center justify-center bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-semibold text-lg px-10 py-6 rounded-3xl shadow-2xl shadow-cyan-500/40">
Start Your Project
<i class="fa-solid fa-arrow-right ml-3"></i>
</a>
<a href="#projects" class="inline-flex items-center justify-center border-2 border-white/70 hover:border-white text-white font-semibold text-lg px-10 py-6 rounded-3xl">
View Projects
</a>
</div>
</div>
<div class="hidden lg:flex justify-end relative">
<div class="w-96 h-96 bg-gradient-to-br from-cyan-400/20 to-orange-400/20 rounded-[4rem] rotate-12 flex items-center justify-center backdrop-blur-3xl border border-white/10">
<div class="w-80 h-80 bg-white rounded-3xl shadow-2xl p-8 -rotate-12 text-slate-950 flex flex-col justify-center items-center">
<div class="text-7xl mb-6">🛠️</div>
<h3 class="heading-font text-4xl leading-tight text-center">Turning Ideas<br>Into Reality</h3>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- SERVICES SECTION -->
<section id="services" class="py-24 bg-slate-100">
<div class="max-w-screen-2xl mx-auto px-8">
<div class="text-center mb-16">
<span class="uppercase text-cyan-600 font-semibold tracking-widest">Our Expertise</span>
<h2 class="heading-font text-5xl mt-4">Professional Services</h2>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="service-card bg-white p-8 rounded-3xl shadow-xl">
<div class="w-14 h-14 bg-cyan-500 text-white rounded-2xl flex items-center justify-center text-4xl mb-6">🌐</div>
<h3 class="text-2xl font-semibold heading-font">Web & Mobile Development</h3>
</div>
<div class="service-card bg-white p-8 rounded-3xl shadow-xl">
<div class="w-14 h-14 bg-pink-500 text-white rounded-2xl flex items-center justify-center text-4xl mb-6">🎨</div>
<h3 class="text-2xl font-semibold heading-font">Graphic & Logo Design</h3>
</div>
<div class="service-card bg-white p-8 rounded-3xl shadow-xl border-2 border-orange-400">
<div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-500 text-white rounded-2xl flex items-center justify-center text-4xl mb-6">🔬</div>
<h3 class="text-2xl font-semibold heading-font">Finite Element Analysis (FEA)</h3>
</div>
<div class="service-card bg-white p-8 rounded-3xl shadow-xl">
<div class="w-14 h-14 bg-emerald-500 text-white rounded-2xl flex items-center justify-center text-4xl mb-6">📊</div>
<h3 class="text-2xl font-semibold heading-font">Data Processing</h3>
</div>
</div>
</div>
</section>
<!-- PROJECTS DELIVERED -->
<section id="projects" class="py-24 bg-white">
<div class="max-w-screen-2xl mx-auto px-8">
<div class="text-center mb-16">
<span class="text-emerald-600 font-semibold text-sm tracking-widest">TRACK RECORD</span>
<h2 class="heading-font text-5xl mt-4">Projects Delivered Successfully</h2>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-gradient-to-br from-cyan-50 to-blue-50 border border-cyan-100 p-10 rounded-3xl text-center">
<div class="text-7xl mb-6">🌐</div>
<div class="text-6xl font-bold text-cyan-600 heading-font">50+</div>
<p class="text-xl font-semibold mt-2">Web & Mobile Developments</p>
</div>
<div class="bg-gradient-to-br from-pink-50 to-violet-50 border border-pink-100 p-10 rounded-3xl text-center">
<div class="text-7xl mb-6">🎨</div>
<div class="text-6xl font-bold text-pink-600 heading-font">100+</div>
<p class="text-xl font-semibold mt-2">Graphic & Logo Designs</p>
</div>
<div class="bg-gradient-to-br from-orange-50 to-red-50 border border-orange-100 p-10 rounded-3xl text-center relative">
<div class="text-7xl mb-6">🔬</div>
<div class="text-6xl font-bold text-orange-600 heading-font">50+</div>
<p class="text-xl font-semibold mt-2">Finite Element Analysis</p>
<div class="absolute -top-4 -right-4 bg-orange-500 text-white text-xs font-bold px-5 py-1 rounded-3xl">Most Demanded</div>
</div>
</div>
<div class="text-center mt-12">
<p class="text-2xl font-medium text-slate-700">...and counting <span class="text-emerald-500 font-bold">+</span></p>
</div>
</div>
</section>
<!-- TESTIMONIALS BUTTON SECTION -->
<section class="py-16 bg-white border-t border-b border-slate-100">
<div class="max-w-screen-2xl mx-auto px-8 text-center">
<div class="max-w-md mx-auto">
<h3 class="text-2xl font-semibold mb-4">Hear From Our Happy Clients</h3>
<p class="text-slate-600 mb-8">Real stories from real clients who trusted MithTechX with their projects.</p>
<a href="testimonial.html"
class="inline-flex items-center gap-3 bg-slate-900 hover:bg-slate-800 text-white font-semibold text-lg px-10 py-5 rounded-3xl transition-all duration-300 shadow-lg">
<i class="fa-solid fa-quote-left text-xl"></i>
Read All Testimonials
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
</section>
<!-- SEE PLANS SECTION -->
<section class="py-20 bg-gradient-to-br from-slate-950 to-slate-900 text-white">
<div class="max-w-screen-2xl mx-auto px-8 text-center">
<h2 class="heading-font text-5xl mb-6">See Our Plans & Pricing</h2>
<p class="text-xl text-slate-300 max-w-2xl mx-auto">Choose from clear, fixed-price packages. No hidden fees. Instant 10% off with WELCOME10 coupon.</p>
<div class="mt-12">
<a href="plans.html" class="inline-flex items-center gap-4 bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-semibold text-2xl px-12 py-7 rounded-3xl shadow-2xl shadow-cyan-500/50">
Browse All Plans & Packages
<i class="fa-solid fa-arrow-right text-3xl"></i>
</a>
</div>
<p class="text-sm text-slate-400 mt-8">Logo Design • Website Development • FEA • Graphic Design • Data Processing</p>
</div>
</section>
<!-- ABOUT US SECTION - Clean Interface -->
<section id="about" class="py-24 bg-white">
<div class="max-w-screen-2xl mx-auto px-8">
<div class="grid lg:grid-cols-12 gap-16 items-center">
<div class="lg:col-span-7">
<span class="uppercase text-cyan-600 font-semibold tracking-widest">KNOW US</span>
<h2 class="heading-font text-5xl mt-4">Hi, I’m MithTechX</h2>
<div class="mt-8 text-lg text-slate-600 leading-relaxed max-w-2xl">
<p>I'm a freelance professional from Pune, India, specializing in Web Development, Graphic & Logo Design, Finite Element Analysis (FEA), and Data Processing.</p>
<p class="mt-4">I deliver clean, reliable solutions with clear communication and fast turnaround times.</p>
</div>
<!-- Enquiry Form -->
<div class="mt-10 bg-slate-50 border border-slate-200 rounded-3xl p-8">
<h3 class="text-xl font-semibold mb-6">Enquire About Us</h3>
<form id="about-enquiry-form">
<div class="grid grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium mb-2">Your Name *</label>
<input type="text" id="about-name" required class="w-full border border-slate-300 rounded-2xl px-5 py-4 text-lg">
</div>
<div>
<label class="block text-sm font-medium mb-2">Email Address *</label>
<input type="email" id="about-email" required class="w-full border border-slate-300 rounded-2xl px-5 py-4 text-lg">
</div>
</div>
<div class="mt-6">
<label class="block text-sm font-medium mb-2">Service Interested In</label>
<select id="about-service" class="w-full border border-slate-300 rounded-2xl px-5 py-4 text-lg">
<option value="">Select Service...</option>
<option value="Logo Design">Logo Design</option>
<option value="Graphic Design">Graphic Design</option>
<option value="Web Development">Web & Mobile Development</option>
<option value="FEA">Finite Element Analysis (FEA)</option>
<option value="Data Processing">Data Processing</option>
</select>
</div>
<div class="mt-6">
<label class="block text-sm font-medium mb-2">Project Details / Message</label>
<textarea id="about-message" rows="4" class="w-full border border-slate-300 rounded-2xl px-5 py-4 text-lg resize-none"></textarea>
</div>
<button type="button" onclick="submitAboutEnquiry()"
class="mt-8 w-full bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-5 rounded-3xl text-lg">
Send Enquiry on WhatsApp
</button>
</form>
</div>
</div>
<div class="lg:col-span-5">
<div class="bg-slate-100 rounded-3xl p-10 text-center">
<div class="text-7xl mb-6">🛠️</div>
<h3 class="text-3xl font-semibold">Professional Freelance Services</h3>
<p class="text-slate-600 mt-4">Pune, Maharashtra, India</p>
</div>
</div>
</div>
</div>
</section>
<!-- TERMS & CONDITIONS -->
<section id="terms" class="py-24 bg-slate-950 text-white">
<div class="max-w-screen-2xl mx-auto px-8">
<div class="max-w-3xl mx-auto">
<div class="text-center mb-16">
<span class="inline-block px-6 py-2 bg-white/10 text-cyan-400 text-sm font-semibold rounded-3xl tracking-widest">SERVICE AGREEMENT</span>
<h2 class="heading-font text-5xl mt-6 text-white">Terms & Conditions</h2>
<p class="text-slate-400 mt-4 text-lg">Please read the following terms carefully before starting any project with MithTechX</p>
</div>
<div class="space-y-10">
<div class="flex gap-8">
<div class="w-10 h-10 flex-shrink-0 bg-cyan-500 text-slate-950 font-bold rounded-2xl flex items-center justify-center text-xl">1</div>
<div>
<h4 class="text-xl font-semibold text-white">Service Delivery</h4>
<p class="text-slate-300 mt-3 leading-relaxed">Services are delivered as per the agreed requirements and scope defined in the project quote.</p>
</div>
</div>
<div class="flex gap-8">
<div class="w-10 h-10 flex-shrink-0 bg-cyan-500 text-slate-950 font-bold rounded-2xl flex items-center justify-center text-xl">2</div>
<div>
<h4 class="text-xl font-semibold text-white">Payment Policy</h4>
<p class="text-slate-300 mt-3 leading-relaxed">Payments are non-refundable after project initiation. 50% advance is required to start work.</p>
</div>
</div>
<div class="flex gap-8">
<div class="w-10 h-10 flex-shrink-0 bg-cyan-500 text-slate-950 font-bold rounded-2xl flex items-center justify-center text-xl">3</div>
<div>
<h4 class="text-xl font-semibold text-white">Project Timeline</h4>
<p class="text-slate-300 mt-3 leading-relaxed">Timelines depend on project scope and client’s timely feedback.</p>
</div>
</div>
<div class="flex gap-8">
<div class="w-10 h-10 flex-shrink-0 bg-cyan-500 text-slate-950 font-bold rounded-2xl flex items-center justify-center text-xl">4</div>
<div>
<h4 class="text-xl font-semibold text-white">Client Responsibilities</h4>
<p class="text-slate-300 mt-3 leading-relaxed">Clients must provide accurate inputs and feedback on time.</p>
</div>
</div>
<div class="flex gap-8">
<div class="w-10 h-10 flex-shrink-0 bg-cyan-500 text-slate-950 font-bold rounded-2xl flex items-center justify-center text-xl">5</div>
<div>
<h4 class="text-xl font-semibold text-white">Final Delivery</h4>
<p class="text-slate-300 mt-3 leading-relaxed">All final files will be delivered only after full payment.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-black text-slate-400 py-12 text-center">
<p>© 2025 MithTechX • Made by MithTechX • All Rights Reserved</p>
<p class="text-xs mt-2">Professional Freelance Services • Pune, Maharashtra, India</p>
</footer>
<script>
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
const icon = document.getElementById('hamburger-icon');
if (menu.classList.contains('hidden')) {
menu.classList.remove('hidden');
icon.classList.replace('fa-bars', 'fa-xmark');
} else {
menu.classList.add('hidden');
icon.classList.replace('fa-xmark', 'fa-bars');
}
}
document.getElementById('mobile-menu-btn').addEventListener('click', toggleMobileMenu);
// About Enquiry Function
function submitAboutEnquiry() {
const name = document.getElementById('about-name').value.trim();
const email = document.getElementById('about-email').value.trim();
const service = document.getElementById('about-service').value;
const message = document.getElementById('about-message').value.trim();
if (!name || !email) {
alert("Please fill Name and Email");
return;
}
// Open WhatsApp with details
const whatsappText = `Hi MithTechX,%0AName: ${name}%0AEmail: ${email}%0AService: ${service}%0AMessage: ${message || "General Enquiry"}`;
window.open(`https://wa.me/918261039902?text=${whatsappText}`, '_blank');
// Optional: Clear form after sending
document.getElementById('about-enquiry-form').reset();
}
</script>
</body>
</html>