|
|
<!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="IndoTech Foundation empowers women and youth through skill development and entrepreneurship training in Mumbai and Maharashtra."> |
|
|
<meta name="keywords" content="women empowerment, skill development, entrepreneurship training, IndoTech Foundation, vocational training, Maharashtra"> |
|
|
<title>IndoTech Foundation - Empowering Women Through Skills</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
-webkit-user-select: none; |
|
|
-moz-user-select: none; |
|
|
-ms-user-select: none; |
|
|
user-select: none; |
|
|
} |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
.glossy-effect { |
|
|
background: linear-gradient(145deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.3) 100%); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255,255,255,0.2); |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.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); |
|
|
} |
|
|
.vanta-container { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg 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"> |
|
|
<img src="http://static.photos/education/200x200/42" alt="IndoTech Foundation Logo" class="h-8 w-8 mr-2 rounded-full"> |
|
|
<span class="font-bold text-xl text-gray-800">IndoTech Foundation</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#about" class="text-gray-600 hover:text-purple-600 transition-colors">About Us</a> |
|
|
<a href="#programs" class="text-gray-600 hover:text-purple-600 transition-colors">Programs</a> |
|
|
<a href="#locations" class="text-gray-600 hover:text-purple-600 transition-colors">Locations</a> |
|
|
<a href="#contact" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">Get Involved</a> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button id="menu-btn" class="text-gray-600" aria-label="Toggle menu"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> |
|
|
<div class="flex flex-col space-y-4 p-4"> |
|
|
<a href="#about" class="text-gray-600 hover:text-purple-600 transition-colors">About Us</a> |
|
|
<a href="#programs" class="text-gray-600 hover:text-purple-600 transition-colors">Programs</a> |
|
|
<a href="#locations" class="text-gray-600 hover:text-purple-600 transition-colors">Locations</a> |
|
|
<a href="#contact" class="text-gray-600 hover:text-purple-600 transition-colors">Get Involved</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="relative min-h-screen flex items-center justify-center overflow-hidden"> |
|
|
<div id="vanta-bg" class="vanta-container"></div> |
|
|
<div class="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto"> |
|
|
<div class="glossy-effect rounded-3xl p-8 md:p-12 shadow-2xl"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6"> |
|
|
Skill is <span class="text-yellow-300">Power</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl text-white mb-8 opacity-90 font-semibold"> |
|
|
Empowering women and youth through employability skills and entrepreneurship training since 2013 |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center"> |
|
|
<a href="#contact" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors glossy-effect"> |
|
|
Join Our Mission |
|
|
</a> |
|
|
<a href="#about" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition-colors glossy-effect"> |
|
|
Learn More |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</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="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">About IndoTech Foundation</h2> |
|
|
<div class="w-24 h-1 bg-purple-600 mx-auto"></div> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Transforming Lives Since 2013</h3> |
|
|
<p class="text-gray-600 mb-6 text-lg leading-relaxed"> |
|
|
Founded in 2013, IndoTech Foundation is a registered non-profit organization dedicated to empowering girls, women, and youth with employability skills, self-employment training, and small-scale entrepreneurship support. |
|
|
</p> |
|
|
<p class="text-gray-600 mb-8 text-lg leading-relaxed"> |
|
|
Over the past decade, we've positively impacted thousands of women across Mumbai, Thane, Raigad, Palghar, Nashik, and other urban and rural communities, guiding them toward economic independence and sustainable livelihoods. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="text-center p-4 bg-purple-50 rounded-lg"> |
|
|
<div class="text-3xl font-bold text-purple-600">10+</div> |
|
|
<div class="text-gray-600">Years of Service</div> |
|
|
</div> |
|
|
<div class="text-center p-4 bg-purple-50 rounded-lg"> |
|
|
<div class="text-3xl font-bold text-purple-600">1000+</div> |
|
|
<div class="text-gray-600">Lives Transformed</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<img src="http://static.photos/people/640x360/42" alt="Group of women participating in IndoTech Foundation training" class="rounded-2xl shadow-xl w-full h-96 object-cover"> |
|
|
<div class="absolute -bottom-6 -left-6 bg-purple-600 text-white p-6 rounded-2xl shadow-lg"> |
|
|
<i data-feather="target" class="h-8 w-8 mb-2"></i> |
|
|
<h4 class="font-semibold">Our Mission</h4> |
|
|
<p class="text-sm">Economic empowerment through skills</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="programs" 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 md:text-4xl font-bold text-gray-800 mb-4">Our Training Programs</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Completely free skill-development courses focusing on practical, income-generating skills</p> |
|
|
<div class="w-24 h-1 bg-purple-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg card-hover glossy-effect"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="scissors" class="text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Beauty & Bridal Services</h3> |
|
|
<p class="text-gray-600">Professional beauty salon services, bridal makeup, and hairstyling training</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg card-hover glossy-effect"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="shopping-bag" class="text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Fashion & Design</h3> |
|
|
<p class="text-gray-600">Sewing, fashion design, and fabric bag making for creative entrepreneurs</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg card-hover glossy-effect"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="coffee" class="text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Food & Hospitality</h3> |
|
|
<p class="text-gray-600">Fast food preparation, bakery production, and basic hotel management</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg card-hover glossy-effect"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="monitor" class="text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Digital Skills</h3> |
|
|
<p class="text-gray-600">Computer basics, data entry, and digital marketing for modern careers</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg card-hover glossy-effect"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="truck" class="text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Auto-rickshaw Driving</h3> |
|
|
<p class="text-gray-600">Empowering women through professional driving training</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg card-hover glossy-effect"> |
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="user-plus" class="text-purple-600"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-3">Personality Development</h3> |
|
|
<p class="text-gray-600">Soft skills and personality enhancement for career success</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="locations" 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 md:text-4xl font-bold text-gray-800 mb-4">Where We Work</h2> |
|
|
<p class="text-xl text-gray-600">Serving communities across Mumbai metropolitan area and Maharashtra</p> |
|
|
<div class="w-24 h-1 bg-purple-600 mx-auto mt-4"></div> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Urban Areas</h3> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Kurla</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Ghatkopar</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Dharavi</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Parel</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Andheri</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Borivali</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Kalyan-Dombivli</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Panvel</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Rural & Sub-district Areas</h3> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Thane</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Raigad</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Palghar</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Nashik</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Igatpuri</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Wada</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg">Karjat</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-purple-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 md:text-4xl font-bold mb-4">Join Our Mission</h2> |
|
|
<p class="text-xl opacity-90 max-w-3xl mx-auto">Partner with us, sponsor a training batch, or enroll participants in our life-changing programs</p> |
|
|
<div class="w-24 h-1 bg-yellow-300 mx-auto mt-4"></div> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto"> |
|
|
<div class="text-center glossy-effect rounded-2xl p-6"> |
|
|
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="mail" class="h-8 w-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Email Us</h3> |
|
|
<p class="opacity-90">[email protected]</p> |
|
|
</div> |
|
|
<div class="text-center glossy-effect rounded-2xl p-6"> |
|
|
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="phone" class="h-8 w-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Call Us</h3> |
|
|
<p class="opacity-90">+91-9876543210</p> |
|
|
</div> |
|
|
<div class="text-center glossy-effect rounded-2xl p-6"> |
|
|
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="map-pin" class="h-8 w-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Visit Us</h3> |
|
|
<p class="opacity-90">Multiple locations across Maharashtra</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 max-w-lg mx-auto"> |
|
|
<form action="/submit" method="POST" class="space-y-4"> |
|
|
<input type="text" name="name" placeholder="Your Name" class="w-full p-3 rounded-lg" required> |
|
|
<input type="email" name="email" placeholder="Your Email" class="w-full p-3 rounded-lg" required> |
|
|
<textarea name="message" placeholder="Your Message" class="w-full p-3 rounded-lg h-32" required></textarea> |
|
|
<button type="submit" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">Submit</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div class="glossy-effect rounded-2xl p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="http://static.photos/education/200x200/42" alt="IndoTech Foundation Logo" class="h-6 w-6 mr-2 rounded-full"> |
|
|
<span class="font-bold text-lg">IndoTech Foundation</span> |
|
|
</div> |
|
|
<p class="text-gray-400 text-sm">Empowering women and youth through skills training since 2013.</p> |
|
|
</div> |
|
|
<div class="glossy-effect rounded-2xl p-6"> |
|
|
<h4 class="font-semibold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#about" class="hover:text-white transition-colors">About Us</a></li> |
|
|
<li><a href="#programs" class="hover:text-white transition-colors">Programs</a></li> |
|
|
<li><a href="#locations" class="hover:text-white transition-colors">Locations</a></li> |
|
|
<li><a href="#contact" class="hover:text-white transition-colors">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="glossy-effect rounded-2xl p-6"> |
|
|
<h4 class="font-semibold mb-4">Our Vision</h4> |
|
|
<p class="text-gray-400 text-sm">Equip every woman and young person with practical skills for economic independence and sustainable livelihoods.</p> |
|
|
</div> |
|
|
<div class="glossy-effect rounded-2xl p-6"> |
|
|
<h4 class="font-semibold mb-4">Follow Us</h4> |
|
|
<div class="flex space-x-4" |
|
|
<a href="https://facebook.com" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="https://instagram.com" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="https://twitter.com" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="https://linkedin.com" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© <span id="current-year"></span> IndoTech Foundation. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
<script> |
|
|
|
|
|
document.addEventListener('contextmenu', function(e) { |
|
|
e.preventDefault(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('copy', function(e) { |
|
|
e.preventDefault(); |
|
|
}); |
|
|
|
|
|
document.getElementById('menu-btn')?.addEventListener('click', function() { |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
target.scrollIntoView({ |
|
|
behavior: 'smooth', |
|
|
block: 'start' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('current-year').textContent = new Date().getFullYear(); |
|
|
|
|
|
|
|
|
if (typeof VANTA !== 'undefined' && VANTA.NET) { |
|
|
VANTA.NET({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0xe91e63, |
|
|
backgroundColor: 0xf3e8ff, |
|
|
points: 8.00, |
|
|
maxDistance: 20.00, |
|
|
spacing: 15.00 |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
