techcommunity / index.html
Sangeethvr's picture
Add 3 files
c39c00b verified
Raw History Blame Contribute Delete
62.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TN TechConnect - Platform for Tamil Nadu Engineering Professionals</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, #1e3a8a 0%, #1e40af 50%, #1d4ed8 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);
}
.podcast-wave {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f8fafc' fill-opacity='1' d='M0,256L48,261.3C96,267,192,277,288,261.3C384,245,480,203,576,197.3C672,192,768,224,864,234.7C960,245,1056,235,1152,213.3C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.animated-underline {
position: relative;
display: inline-block;
}
.animated-underline::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: white;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.animated-underline:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Navigation -->
<nav class="gradient-bg text-white shadow-lg sticky top-0 z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<i class="fas fa-microchip text-3xl mr-2"></i>
<span class="text-xl font-bold">TN TechConnect</span>
</div>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#home" class="animated-underline">Home</a>
<a href="#internships" class="animated-underline">Internships</a>
<a href="#conferences" class="animated-underline">Tech Events</a>
<a href="#research" class="animated-underline">Research</a>
<a href="#community" class="animated-underline">Community</a>
<a href="#podcasts" class="animated-underline">Podcasts</a>
</div>
<div class="md:hidden">
<button class="mobile-menu-button p-2 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="mobile-menu hidden md:hidden gradient-bg pb-4">
<a href="#home" class="block py-2 px-4 hover:bg-blue-700">Home</a>
<a href="#internships" class="block py-2 px-4 hover:bg-blue-700">Internships</a>
<a href="#conferences" class="block py-2 px-4 hover:bg-blue-700">Tech Events</a>
<a href="#research" class="block py-2 px-4 hover:bg-blue-700">Research</a>
<a href="#community" class="block py-2 px-4 hover:bg-blue-700">Community</a>
<a href="#podcasts" class="block py-2 px-4 hover:bg-blue-700">Podcasts</a>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="gradient-bg text-white py-20">
<div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Connecting Tamil Nadu's Engineers to Global Tech Opportunities</h1>
<p class="text-xl mb-8">Your premier platform for tech internships, international opportunities, conferences, and collaborative projects.</p>
<div class="flex flex-wrap gap-4">
<a href="#internships" class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold transition duration-300">Explore Internships</a>
<a href="#community" class="border border-white text-white hover:bg-white hover:text-blue-800 px-6 py-3 rounded-lg font-semibold transition duration-300">Join Community</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://images.unsplash.com/photo-1622675363311-3e1904dc1885?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Engineering Professionals" class="rounded-lg shadow-2xl max-w-md w-full">
</div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="p-4">
<div class="text-4xl font-bold text-blue-800 mb-2">300+</div>
<div class="text-gray-600">Tech Internships</div>
</div>
<div class="p-4">
<div class="text-4xl font-bold text-blue-800 mb-2">80+</div>
<div class="text-gray-600">Upcoming Tech Events</div>
</div>
<div class="p-4">
<div class="text-4xl font-bold text-blue-800 mb-2">1000+</div>
<div class="text-gray-600">Active Members</div>
</div>
<div class="p-4">
<div class="text-4xl font-bold text-blue-800 mb-2">120+</div>
<div class="text-gray-600">Research Papers</div>
</div>
</div>
</div>
</section>
<!-- Internships Section -->
<section id="internships" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Global Internship Opportunities</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Discover prestigious internship programs at top tech companies with experiences from TN engineers.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Internship Card 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
<div class="h-48 bg-blue-100 flex items-center justify-center">
<i class="fas fa-robot text-6xl text-blue-600"></i>
</div>
<div class="p-6">
<div class="uppercase tracking-wide text-sm font-semibold text-blue-600">USA • 6 Months</div>
<h3 class="mt-2 text-xl font-semibold text-gray-800">AI Research Intern</h3>
<p class="mt-2 text-gray-600">Work on cutting-edge AI projects at Google's Mountain View campus with mentorship from top researchers.</p>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Priya">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Priya, Chennai</p>
<p class="text-sm text-gray-500">Completed 2022</p>
</div>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-300">
View Details & Experiences
</button>
</div>
</div>
<!-- Internship Card 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
<div class="h-48 bg-green-100 flex items-center justify-center">
<i class="fas fa-code text-6xl text-green-600"></i>
</div>
<div class="p-6">
<div class="uppercase tracking-wide text-sm font-semibold text-green-600">Germany • 1 Year</div>
<h3 class="mt-2 text-xl font-semibold text-gray-800">Software Engineering Intern</h3>
<p class="mt-2 text-gray-600">Develop scalable systems at SAP's Berlin office with exposure to enterprise software development.</p>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Arjun">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Arjun, Coimbatore</p>
<p class="text-sm text-gray-500">Completed 2021</p>
</div>
</div>
<button class="mt-4 w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition duration-300">
View Details & Experiences
</button>
</div>
</div>
<!-- Internship Card 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
<div class="h-48 bg-purple-100 flex items-center justify-center">
<i class="fas fa-bolt text-6xl text-purple-600"></i>
</div>
<div class="p-6">
<div class="uppercase tracking-wide text-sm font-semibold text-purple-600">Singapore • 8 Months</div>
<h3 class="mt-2 text-xl font-semibold text-gray-800">Hardware Engineering Intern</h3>
<p class="mt-2 text-gray-600">Work on next-gen semiconductor designs at TSMC's Singapore facility with industry experts.</p>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Meena">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Meena, Madurai</p>
<p class="text-sm text-gray-500">Completed 2023</p>
</div>
</div>
<button class="mt-4 w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition duration-300">
View Details & Experiences
</button>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-block bg-blue-800 hover:bg-blue-900 text-white px-6 py-3 rounded-lg font-semibold transition duration-300">
View All Internship Programs <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Tech Events Section -->
<section id="conferences" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Upcoming Tech Events & Hackathons</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Stay updated with the latest tech conferences, workshops, and competitions in your field.</p>
</div>
<div class="flex flex-wrap justify-center mb-8">
<button class="px-4 py-2 m-1 bg-blue-600 text-white rounded-full">All</button>
<button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">AI/ML</button>
<button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">Web Dev</button>
<button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">IoT</button>
<button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">Cybersecurity</button>
<button class="px-4 py-2 m-1 bg-gray-200 hover:bg-gray-300 rounded-full">Blockchain</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Event 1 -->
<div class="bg-gray-50 rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<span class="inline-block px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-100 rounded-full">AI/ML</span>
<h3 class="mt-3 text-xl font-semibold text-gray-800">AI Summit Chennai 2023</h3>
<p class="mt-2 text-gray-600">November 15-18, 2023 • Chennai, India</p>
</div>
<div class="text-right">
<div class="text-2xl font-bold text-blue-800">₹2,999</div>
<div class="text-sm text-gray-500">Early Bird</div>
</div>
</div>
<p class="mt-4 text-gray-700">Premier event for AI professionals featuring cutting-edge research and innovative applications from industry leaders.</p>
<div class="mt-6 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-users text-gray-500 mr-2"></i>
<span class="text-sm text-gray-600">800+ attendees</span>
</div>
<button class="text-blue-600 hover:text-blue-800 font-medium">
Register Now <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Event 2 -->
<div class="bg-gray-50 rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<span class="inline-block px-3 py-1 text-sm font-semibold text-green-800 bg-green-100 rounded-full">Web Dev</span>
<h3 class="mt-3 text-xl font-semibold text-gray-800">React Conf India</h3>
<p class="mt-2 text-gray-600">February 7-9, 2024 • Bangalore, India</p>
</div>
<div class="text-right">
<div class="text-2xl font-bold text-green-800">₹3,500</div>
<div class="text-sm text-gray-500">Standard</div>
</div>
</div>
<p class="mt-4 text-gray-700">Learn from React core team members and industry experts about the future of frontend development.</p>
<div class="mt-6 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-users text-gray-500 mr-2"></i>
<span class="text-sm text-gray-600">500+ attendees</span>
</div>
<button class="text-green-600 hover:text-green-800 font-medium">
Register Now <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- Event 3 -->
<div class="bg-gray-50 rounded-xl shadow-md overflow-hidden transition duration-300 card-hover">
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<span class="inline-block px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-100 rounded-full">Blockchain</span>
<h3 class="mt-3 text-xl font-semibold text-gray-800">ETHGlobal Chennai</h3>
<p class="mt-2 text-gray-600">December 1-3, 2023 • Chennai, India</p>
</div>
<div class="text-right">
<div class="text-2xl font-bold text-purple-800">Free</div>
<div class="text-sm text-gray-500">Hackathon</div>
</div>
</div>
<p class="mt-4 text-gray-700">48-hour blockchain hackathon with $50k in prizes and mentorship from Ethereum core developers.</p>
<div class="mt-6 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-users text-gray-500 mr-2"></i>
<span class="text-sm text-gray-600">300+ participants</span>
</div>
<button class="text-purple-600 hover:text-purple-800 font-medium">
Apply Now <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-block bg-blue-800 hover:bg-blue-900 text-white px-6 py-3 rounded-lg font-semibold transition duration-300">
View All Tech Events <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Research Section -->
<section id="research" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Engineering Research & Publications</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Showcasing groundbreaking research by Tamil Nadu engineering professionals.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<!-- Featured Research -->
<div class="bg-white p-8 rounded-xl shadow-lg">
<div class="flex items-center mb-4">
<span class="inline-block px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-100 rounded-full">Featured</span>
<span class="ml-3 text-sm text-gray-500">Published: June 2023</span>
</div>
<h3 class="text-2xl font-bold text-gray-800 mb-3">Novel AI Architecture for Tamil Language Processing</h3>
<p class="text-gray-700 mb-4">This research from Anna University presents a breakthrough neural network design specifically optimized for Tamil NLP tasks with 98% accuracy.</p>
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Dr. Karthik">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Dr. Karthik, et al.</p>
<p class="text-sm text-gray-500">Nature Machine Intelligence (Impact Factor: 15.5)</p>
</div>
</div>
<div class="mt-6 flex justify-between items-center">
<div class="flex space-x-4">
<span class="text-sm text-gray-600"><i class="fas fa-download mr-1"></i> 524 Downloads</span>
<span class="text-sm text-gray-600"><i class="fas fa-quote-right mr-1"></i> 38 Citations</span>
</div>
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">
Read Full Paper <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
<!-- Research Opportunities -->
<div class="bg-blue-800 text-white p-8 rounded-xl shadow-lg">
<h3 class="text-2xl font-bold mb-4">Research Collaboration Opportunities</h3>
<p class="mb-6">Connect with international researchers and tech companies for collaborative projects. Find funding opportunities and research positions.</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-microchip text-blue-300"></i>
</div>
<div class="ml-3">
<h4 class="font-semibold">Google Research India</h4>
<p class="text-blue-200 text-sm">Looking for collaborators in AI for social good projects</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-atom text-blue-300"></i>
</div>
<div class="ml-3">
<h4 class="font-semibold">MIT-Tamil Nadu Initiative</h4>
<p class="text-blue-200 text-sm">Grants available for sustainable technology research</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-brain text-blue-300"></i>
</div>
<div class="ml-3">
<h4 class="font-semibold">DeepMind Research</h4>
<p class="text-blue-200 text-sm">PhD positions in reinforcement learning at Cambridge</p>
</div>
</div>
</div>
<button class="mt-6 w-full bg-white hover:bg-gray-100 text-blue-800 py-2 px-4 rounded-lg font-medium transition duration-300">
Explore Research Opportunities
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Research Card 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover">
<div class="p-6">
<span class="inline-block px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Renewable Energy</span>
<h3 class="mt-2 text-lg font-semibold text-gray-800">Solar Panel Efficiency Breakthrough</h3>
<p class="mt-2 text-sm text-gray-600">New perovskite solar cell design achieves 32% efficiency in testing at IIT Madras labs.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-xs text-gray-500">Dr. Anitha et al. • Science Advances</span>
<a href="#" class="text-green-600 hover:text-green-800 text-sm font-medium">
View <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
<!-- Research Card 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover">
<div class="p-6">
<span class="inline-block px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">AI/ML</span>
<h3 class="mt-2 text-lg font-semibold text-gray-800">Federated Learning for Healthcare</h3>
<p class="mt-2 text-sm text-gray-600">Privacy-preserving AI model trained across multiple Tamil Nadu hospitals without data sharing.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-xs text-gray-500">Dr. Rajesh et al. • Nature Digital Medicine</span>
<a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium">
View <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
<!-- Research Card 3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover">
<div class="p-6">
<span class="inline-block px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full">Materials Science</span>
<h3 class="mt-2 text-lg font-semibold text-gray-800">Graphene Production Innovation</h3>
<p class="mt-2 text-sm text-gray-600">Low-cost method for mass production of graphene developed at PSG Tech with commercial applications.</p>
<div class="mt-4 flex justify-between items-center">
<span class="text-xs text-gray-500">Dr. Malar et al. • Advanced Materials</span>
<a href="#" class="text-red-600 hover:text-red-800 text-sm font-medium">
View <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-block bg-blue-800 hover:bg-blue-900 text-white px-6 py-3 rounded-lg font-semibold transition duration-300">
Browse All Publications <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Community Section -->
<section id="community" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Tech Community Network</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Connect with fellow TN engineering professionals, share experiences, and get mentorship.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<!-- Discussion Forum -->
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Discussion Forums</h3>
<div class="space-y-6">
<!-- Forum Topic 1 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex justify-between items-start">
<div>
<span class="inline-block px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full">Internship</span>
<h4 class="mt-2 font-medium text-gray-800">Google Summer Internship - Application Tips</h4>
</div>
<span class="text-xs text-gray-500">2h ago</span>
</div>
<p class="mt-3 text-sm text-gray-600">Sharing my experience applying to Google STEP internship including resume tips and technical interview preparation.</p>
<div class="mt-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<i class="fas fa-comment-alt text-gray-400 mr-1"></i>
<span class="text-xs text-gray-600">24 comments</span>
</div>
<div class="flex items-center">
<i class="fas fa-eye text-gray-400 mr-1"></i>
<span class="text-xs text-gray-600">356 views</span>
</div>
</div>
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Suresh">
</div>
</div>
</div>
<!-- Forum Topic 2 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex justify-between items-start">
<div>
<span class="inline-block px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Career</span>
<h4 class="mt-2 font-medium text-gray-800">Transitioning from Service to Product Companies</h4>
</div>
<span class="text-xs text-gray-500">1d ago</span>
</div>
<p class="mt-3 text-sm text-gray-600">How I moved from TCS to a product startup in 6 months - skills to learn and interview strategies that worked.</p>
<div class="mt-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<i class="fas fa-comment-alt text-gray-400 mr-1"></i>
<span class="text-xs text-gray-600">18 comments</span>
</div>
<div class="flex items-center">
<i class="fas fa-eye text-gray-400 mr-1"></i>
<span class="text-xs text-gray-600">289 views</span>
</div>
</div>
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Lakshmi">
</div>
</div>
</div>
<!-- Forum Topic 3 -->
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<div class="flex justify-between items-start">
<div>
<span class="inline-block px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">Research</span>
<h4 class="mt-2 font-medium text-gray-800">Seeking Collaborators for AI in Agriculture Project</h4>
</div>
<span class="text-xs text-gray-500">3d ago</span>
</div>
<p class="mt-3 text-sm text-gray-600">Looking for ML engineers and agri-tech specialists across TN to participate in DST-funded research on crop yield prediction.</p>
<div class="mt-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<div class="flex items-center">
<i class="fas fa-comment-alt text-gray-400 mr-1"></i>
<span class="text-xs text-gray-600">15 comments</span>
</div>
<div class="flex items-center">
<i class="fas fa-eye text-gray-400 mr-1"></i>
<span class="text-xs text-gray-600">247 views</span>
</div>
</div>
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Karthik">
</div>
</div>
</div>
</div>
<button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
Join Discussion Forum
</button>
</div>
<!-- Mentorship Program -->
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Mentorship Program</h3>
<div class="bg-blue-50 p-6 rounded-lg mb-8">
<h4 class="text-lg font-semibold text-blue-800 mb-3">Connect with Experienced Professionals</h4>
<p class="text-gray-700 mb-4">Our mentorship program pairs early-career engineers with senior professionals at top tech companies.</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-laptop-code text-blue-600"></i>
</div>
<div class="ml-3">
<h4 class="font-medium text-gray-800">One-on-One Guidance</h4>
<p class="text-sm text-gray-600">Personalized advice on career growth, technical skills, and interview preparation.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-globe-americas text-blue-600"></i>
</div>
<div class="ml-3">
<h4 class="font-medium text-gray-800">Global Network</h4>
<p class="text-sm text-gray-600">Access to mentors working at FAANG companies and top startups worldwide.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 mt-1">
<i class="fas fa-handshake text-blue-600"></i>
</div>
<div class="ml-3">
<h4 class="font-medium text-gray-800">Specialty Matching</h4>
<p class="text-sm text-gray-600">Get matched with mentors in your specific tech domain (AI, Web, Cloud, etc.).</p>
</div>
</div>
</div>
</div>
<h4 class="text-lg font-semibold text-gray-800 mb-4">Featured Mentors</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Mentor 1 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Deepa">
</div>
<div class="ml-4">
<h5 class="font-medium text-gray-800">Deepa</h5>
<p class="text-sm text-gray-600">Senior Engineer • Google (ex-Microsoft)</p>
<div class="mt-1 flex space-x-2">
<span class="inline-block px-2 py-0.5 text-xs font-medium text-blue-800 bg-blue-100 rounded-full">Mentoring: 3</span>
<span class="inline-block px-2 py-0.5 text-xs font-medium text-green-800 bg-green-100 rounded-full">Available</span>
</div>
</div>
</div>
<!-- Mentor 2 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Vijay">
</div>
<div class="ml-4">
<h5 class="font-medium text-gray-800">Vijay</h5>
<p class="text-sm text-gray-600">CTO • AI Startup (ex-Apple)</p>
<div class="mt-1 flex space-x-2">
<span class="inline-block px-2 py-0.5 text-xs font-medium text-blue-800 bg-blue-100 rounded-full">Mentoring: 5</span>
<span class="inline-block px-2 py-0.5 text-xs font-medium text-green-800 bg-green-100 rounded-full">Available</span>
</div>
</div>
</div>
<!-- Mentor 3 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Priya">
</div>
<div class="ml-4">
<h5 class="font-medium text-gray-800">Priya</h5>
<p class="text-sm text-gray-600">Engineering Manager • Amazon</p>
<div class="mt-1 flex space-x-2">
<span class="inline-block px-2 py-0.5 text-xs font-medium text-blue-800 bg-blue-100 rounded-full">Mentoring: 2</span>
<span class="inline-block px-2 py-0.5 text-xs font-medium text-yellow-800 bg-yellow-100 rounded-full">Limited</span>
</div>
</div>
</div>
<!-- Mentor 4 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Arvind">
</div>
<div class="ml-4">
<h5 class="font-medium text-gray-800">Arvind</h5>
<p class="text-sm text-gray-600">Principal Engineer • Microsoft</p>
<div class="mt-1 flex space-x-2">
<span class="inline-block px-2 py-0.5 text-xs font-medium text-blue-800 bg-blue-100 rounded-full">Mentoring: 4</span>
<span class="inline-block px-2 py-0.5 text-xs font-medium text-green-800 bg-green-100 rounded-full">Available</span>
</div>
</div>
</div>
</div>
<button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
Find a Mentor
</button>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 gradient-bg text-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Success Stories</h2>
<p class="text-xl max-w-3xl mx-auto">Hear from Tamil Nadu engineers who have pursued global opportunities and advanced their careers.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="testimonial-card rounded-xl p-8 transition duration-300 card-hover">
<div class="flex items-center mb-6">
<div class="flex-shrink-0">
<img class="h-14 w-14 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sharmila">
</div>
<div class="ml-4">
<h4 class="font-bold">Sharmila</h4>
<p class="text-blue-200">AI Engineer at Google</p>
</div>
</div>
<p class="italic mb-6">"The mentorship I received through TN TechConnect was invaluable in securing my internship at Google Zurich. The mock interviews and resume reviews made all the difference in my application process."</p>
<div class="flex items-center">
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card rounded-xl p-8 transition duration-300 card-hover">
<div class="flex items-center mb-6">
<div class="flex-shrink-0">
<img class="h-14 w-14 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Ramesh">
</div>
<div class="ml-4">
<h4 class="font-bold">Ramesh</h4>
<p class="text-blue-200">CTO at HealthTech Startup</p>
</div>
</div>
<p class="italic mb-6">"After working at Amazon Seattle for 5 years, I wanted to give back. Through this platform, I've mentored 6 young engineers from Tamil Nadu who are now working at top tech companies globally."</p>
<div class="flex items-center">
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card rounded-xl p-8 transition duration-300 card-hover">
<div class="flex items-center mb-6">
<div class="flex-shrink-0">
<img class="h-14 w-14 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Meena">
</div>
<div class="ml-4">
<h4 class="font-bold">Meena</h4>
<p class="text-blue-200">Hardware Engineer at Intel</p>
</div>
</div>
<p class="italic mb-6">"The research collaboration I found through TN TechConnect led to my current position at Intel Oregon. The platform connected me with the right people at the right time in my career."</p>
<div class="flex items-center">
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star text-yellow-300 mr-1"></i>
<i class="fas fa-star-half-alt text-yellow-300"></i>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-block bg-white hover:bg-gray-100 text-blue-800 px-6 py-3 rounded-lg font-semibold transition duration-300">
Read More Success Stories
</a>
</div>
</div>
</section>
<!-- Podcasts Section -->
<section id="podcasts" class="py-20 bg-white podcast-wave">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">TN TechConnect Podcast</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Listen to conversations with Tamil Nadu engineers who have worked at top global tech companies.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Podcast 1 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover">
<div class="relative">
<img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Podcast Cover" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-blue-800 opacity-20"></div>
<div class="absolute bottom-4 left-4 bg-blue-600 text-white p-2 rounded-full">
<i class="fas fa-play text-lg"></i>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-2">
<span class="inline-block px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full">Episode 23</span>
<span class="text-xs text-gray-500">45 min</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-3">From Coimbatore to Google AI</h3>
<p class="text-gray-600 mb-4">Karthik shares his journey from PSG Tech to leading AI projects at Google's Zurich office.</p>
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Karthik">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Karthik</p>
<p class="text-sm text-gray-500">AI Researcher</p>
</div>
</div>
</div>
</div>
<!-- Podcast 2 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover">
<div class="relative">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Podcast Cover" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-green-800 opacity-20"></div>
<div class="absolute bottom-4 left-4 bg-green-600 text-white p-2 rounded-full">
<i class="fas fa-play text-lg"></i>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-2">
<span class="inline-block px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Episode 22</span>
<span class="text-xs text-gray-500">52 min</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-3">Building a Cybersecurity Career</h3>
<p class="text-gray-600 mb-4">Anitha discusses her transition from Chennai to leading security projects at Palo Alto Networks.</p>
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/33.jpg" alt="Anitha">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Anitha</p>
<p class="text-sm text-gray-500">Security Engineer</p>
</div>
</div>
</div>
</div>
<!-- Podcast 3 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover">
<div class="relative">
<img src="https://images.unsplash.com/photo-1622675363311-3e1904dc1885?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Podcast Cover" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-purple-800 opacity-20"></div>
<div class="absolute bottom-4 left-4 bg-purple-600 text-white p-2 rounded-full">
<i class="fas fa-play text-lg"></i>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-2">
<span class="inline-block px-2 py-1 text-xs font-semibold text-purple-800 bg-purple-100 rounded-full">Episode 21</span>
<span class="text-xs text-gray-500">38 min</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-3">From TN to Silicon Valley</h3>
<p class="text-gray-600 mb-4">Suresh reflects on his journey from Anna University to founding a successful AI startup in California.</p>
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Suresh">
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Suresh</p>
<p class="text-sm text-gray-500">Startup Founder</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-flex items-center bg-blue-800 hover:bg-blue-900 text-white px-6 py-3 rounded-lg font-semibold transition duration-300">
<i class="fas fa-headphones mr-2"></i> Browse All Episodes
</a>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-gray-900 text-white">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Advance Your Engineering Career?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto">Join our growing community of Tamil Nadu engineering professionals accessing global opportunities.</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition duration-300">
Create Free Account
</a>
<a href="#" class="border border-white hover:bg-white hover:text-gray-900 text-white px-8 py-4 rounded-lg font-semibold text-lg transition duration-300">
Learn More
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white pt-12 pb-6">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-xl font-bold mb-4">TN TechConnect</h3>
<p class="mb-4">Empowering Tamil Nadu's engineering professionals with global opportunities and connections.</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>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-300">Home</a></li>
<li><a href="#" class="hover:text-blue-300">Internships</a></li>
<li><a href="#" class="hover:text-blue-300">Tech Events</a></li>
<li><a href="#" class="hover:text-blue-300">Research</a></li>
<li><a href="#" class="hover:text-blue-300">Community</a></li>
<li><a href="#" class="hover:text-blue-300">Podcasts</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-300">Internship Guide</a></li>
<li><a href="#" class="hover:text-blue-300">Tech Event Calendar</a></li>
<li><a href="#" class="hover:text-blue-300">Research Grants</a></li>
<li><a href="#" class="hover:text-blue-300">Mentorship Program</a></li>
<li><a href="#" class="hover:text-blue-300">Engineer Directory</a></li>
<li><a href="#" class="hover:text-blue-300">FAQ</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contact Us</h4>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-300"></i>
<span>123 Tech Park, Chennai, Tamil Nadu 600001</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt mr-3 text-blue-300"></i>
<span>+91 98765 43210</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope mr-3 text-blue-300"></i>
<span>contact@tntechconnect.org</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 TN TechConnect. 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">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// 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'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
});
});
// Sticky header on scroll
window.addEventListener('scroll', function() {
const nav = document.querySelector('nav');
if (window.scrollY > 50) {
nav.classList.add('shadow-xl');
} else {
nav.classList.remove('shadow-xl');
}
});
</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=rocknlight/tn25" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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=Sangeethvr/techcom" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>