<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>TalentConnect – Professional Matching Platform</title>
<script src=”https://cdn.tailwindcss.com”></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; }
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.file-upload { position: relative; overflow: hidden; display: inline-block; }
.file-upload input[type=file] { position: absolute; left: -9999px; }
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
</style>
</head>
<body class=”bg-gray-50″>
<!– Header –>
<header class=”gradient-bg text-white py-16″>
<div class=”container mx-auto px-6 text-center”>
<div class=”animate-float inline-block mb-6″>
<svg class=”w-16 h-16 mx-auto” fill=”currentColor” viewBox=”0 0 20 20″>
<path d=”M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z”/>
</svg>
</div>
<h1 class=”text-5xl font-bold mb-4″>TalentConnect</h1>
<p class=”text-xl opacity-90 max-w-2xl mx-auto”>The premier platform connecting exceptional talent with outstanding opportunities. Whether you’re a company seeking talent or an individual pursuing your next career move.</p>
</div>
</header>
<!– Navigation Tabs –>
<div class=”container mx-auto px-6 -mt-8″>
<div class=”bg-white rounded-lg shadow-lg p-2 flex max-w-md mx-auto”>
<button onclick=”showTab(‘company’)” id=”companyTab” class=”flex-1 py-3 px-6 rounded-md font-semibold transition-all duration-300 bg-blue-600 text-white”>
For Companies
</button>
<button onclick=”showTab(‘individual’)” id=”individualTab” class=”flex-1 py-3 px-6 rounded-md font-semibold transition-all duration-300 text-gray-600 hover:text-blue-600″>
For Individuals
</button>
</div>
</div>
<!– Company Form –>
<div id=”companyForm” class=”container mx-auto px-6 py-12″>
<div class=”max-w-4xl mx-auto”>
<div class=”bg-white rounded-2xl shadow-xl p-8 card-hover”>
<div class=”text-center mb-8″>
<h2 class=”text-3xl font-bold text-gray-800 mb-4″>Post Your Opportunity</h2>
<p class=”text-gray-600″>Connect with talented individuals for internships, jobs, and programs</p>
</div>
<form id=”companySubmissionForm” class=”space-y-6″>
<div class=”grid md:grid-cols-2 gap-6″>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Company Name *</label>
<input type=”text” required class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”Your Company Name”>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Contact Person *</label>
<input type=”text” required class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”Full Name”>
</div>
</div>
<div class=”grid md:grid-cols-2 gap-6″>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Email Address *</label>
<input type=”email” required class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”[email protected]”>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Phone Number</label>
<input type=”tel” class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”+1 (555) 123-4567″>
</div>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Opportunity Type *</label>
<div class=”grid grid-cols-2 md:grid-cols-4 gap-3″>
<label class=”flex items-center space-x-2 cursor-pointer”>
<input type=”checkbox” name=”opportunityType” value=”internship” class=”rounded text-blue-600 focus:ring-blue-500″>
<span class=”text-sm”>Internship</span>
</label>
<label class=”flex items-center space-x-2 cursor-pointer”>
<input type=”checkbox” name=”opportunityType” value=”fulltime” class=”rounded text-blue-600 focus:ring-blue-500″>
<span class=”text-sm”>Full-time Job</span>
</label>
<label class=”flex items-center space-x-2 cursor-pointer”>
<input type=”checkbox” name=”opportunityType” value=”parttime” class=”rounded text-blue-600 focus:ring-blue-500″>
<span class=”text-sm”>Part-time Job</span>
</label>
<label class=”flex items-center space-x-2 cursor-pointer”>
<input type=”checkbox” name=”opportunityType” value=”erasmus” class=”rounded text-blue-600 focus:ring-blue-500″>
<span class=”text-sm”>Erasmus Program</span>
</label>
</div>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Company Description *</label>
<textarea required rows=”4″ class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”Tell us about your company, industry, and what makes you unique…”></textarea>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Position Description *</label>
<textarea required rows=”4″ class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”Describe the role, responsibilities, requirements, and what you’re looking for in a candidate…”></textarea>
</div>
<div class=”grid md:grid-cols-2 gap-6″>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Location</label>
<input type=”text” class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”City, Country”>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Duration (if applicable)</label>
<input type=”text” class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”e.g., 3 months, 6 months”>
</div>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Upload Company Documents</label>
<div class=”border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors duration-300″>
<svg class=”mx-auto h-12 w-12 text-gray-400 mb-4″ stroke=”currentColor” fill=”none” viewBox=”0 0 48 48″>
<path d=”M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02″ stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round”/>
</svg>
<div class=”file-upload”>
<label class=”cursor-pointer”>
<input type=”file” multiple accept=”.pdf,.doc,.docx,.xls,.xlsx”>
<span class=”bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-300″>Choose Files</span>
</label>
</div>
<p class=”text-sm text-gray-500 mt-2″>Upload CV, company profile, or Excel documentation (PDF, DOC, XLS)</p>
</div>
</div>
<button type=”submit” class=”w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-4 px-8 rounded-lg hover:from-blue-700 hover:to-purple-700 transform hover:scale-105 transition-all duration-300 shadow-lg”>
Post Opportunity
</button>
</form>
</div>
</div>
</div>
<!– Individual Form –>
<div id=”individualForm” class=”container mx-auto px-6 py-12 hidden”>
<div class=”max-w-4xl mx-auto”>
<div class=”bg-white rounded-2xl shadow-xl p-8 card-hover”>
<div class=”text-center mb-8″>
<h2 class=”text-3xl font-bold text-gray-800 mb-4″>Apply for Opportunities</h2>
<p class=”text-gray-600″>Submit your profile and connect with amazing companies and programs</p>
</div>
<form id=”individualSubmissionForm” class=”space-y-6″>
<div class=”grid md:grid-cols-2 gap-6″>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Full Name *</label>
<input type=”text” required class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”Your Full Name”>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Email Address *</label>
<input type=”email” required class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”[email protected]”>
</div>
</div>
<div class=”grid md:grid-cols-2 gap-6″>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Phone Number</label>
<input type=”tel” class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”+1 (555) 123-4567″>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Current Location</label>
<input type=”text” class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”City, Country”>
</div>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>I’m interested in *</label>
<div class=”grid grid-cols-2 md:grid-cols-4 gap-3″>
<label class=”flex items-center space-x-2 cursor-pointer”>
<input type=”checkbox” name=”interests” value=”internship” class=”rounded text-blue-600 focus:ring-blue-500″>
<span class=”text-sm”>Internships</span>
</label>
<label class=”flex items-center space-x-2 cursor-pointer”>
<input type=”checkbox” name=”interests” value=”fulltime” class=”rounded text-blue-600 focus:ring-blue-500″>
<span class=”text-sm”>Full-time Jobs</span>
</label>
<label class=”flex items-center space-x-2 cursor-pointer”>
<input type=”checkbox” name=”interests” value=”workshops” class=”rounded text-blue-600 focus:ring-blue-500″>
<span class=”text-sm”>Workshops</span>
</label>
<label class=”flex items-center space-x-2 cursor-pointer”>
<input type=”checkbox” name=”interests” value=”erasmus” class=”rounded text-blue-600 focus:ring-blue-500″>
<span class=”text-sm”>Erasmus Programs</span>
</label>
</div>
</div>
<div class=”grid md:grid-cols-2 gap-6″>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Field of Study/Work</label>
<input type=”text” class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”e.g., Computer Science, Marketing”>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Experience Level</label>
<select class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″>
<option value=””>Select Level</option>
<option value=”student”>Student</option>
<option value=”entry”>Entry Level</option>
<option value=”mid”>Mid Level</option>
<option value=”senior”>Senior Level</option>
</select>
</div>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Personal Statement *</label>
<textarea required rows=”4″ class=”w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300″ placeholder=”Tell us about yourself, your goals, and what you’re looking for…”></textarea>
</div>
<div>
<label class=”block text-sm font-semibold text-gray-700 mb-2″>Upload Your Documents *</label>
<div class=”border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors duration-300″>
<svg class=”mx-auto h-12 w-12 text-gray-400 mb-4″ stroke=”currentColor” fill=”none” viewBox=”0 0 48 48″>
<path d=”M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02″ stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round”/>
</svg>
<div class=”file-upload”>
<label class=”cursor-pointer”>
<input type=”file” multiple accept=”.pdf,.doc,.docx” required>
<span class=”bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-300″>Choose Files</span>
</label>
</div>
<p class=”text-sm text-gray-500 mt-2″>Upload CV, motivation letter, business plan (PDF, DOC)</p>
</div>
</div>
<button type=”submit” class=”w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white font-semibold py-4 px-8 rounded-lg hover:from-purple-700 hover:to-blue-700 transform hover:scale-105 transition-all duration-300 shadow-lg”>
Submit Application
</button>
</form>
</div>
</div>
</div>
<!– Success Message –>
<div id=”successMessage” class=”fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden”>
<div class=”bg-white rounded-2xl p-8 max-w-md mx-4 text-center transform scale-95 transition-transform duration-300″>
<div class=”w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4″>
<svg class=”w-8 h-8 text-green-600″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
</div>
<h3 class=”text-xl font-bold text-gray-800 mb-2″>Submission Successful!</h3>
<p class=”text-gray-600 mb-6″>Thank you for your submission. We’ll review your information and get back to you soon.</p>
<button onclick=”closeSuccessMessage()” class=”bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-300″>
Close
</button>
</div>
</div>
<!– Footer –>
<footer class=”bg-gray-800 text-white py-12″>
<div class=”container mx-auto px-6 text-center”>
<h3 class=”text-2xl font-bold mb-4″>TalentConnect</h3>
<p class=”text-gray-400 mb-6″>Bridging the gap between exceptional talent and outstanding opportunities</p>
<div class=”flex justify-center space-x-6″>
<a href=”#” class=”text-gray-400 hover:text-white transition-colors duration-300″>Privacy Policy</a>
<a href=”#” class=”text-gray-400 hover:text-white transition-colors duration-300″>Terms of Service</a>
<a href=”#” class=”text-gray-400 hover:text-white transition-colors duration-300″>Contact Us</a>
</div>
</div>
</footer>
<script>
function showTab(tab) {
const companyForm = document.getElementById(‘companyForm’);
const individualForm = document.getElementById(‘individualForm’);
const companyTab = document.getElementById(‘companyTab’);
const individualTab = document.getElementById(‘individualTab’);
if (tab === ‘company’) {
companyForm.classList.remove(‘hidden’);
individualForm.classList.add(‘hidden’);
companyTab.classList.add(‘bg-blue-600’, ‘text-white’);
companyTab.classList.remove(‘text-gray-600’);
individualTab.classList.remove(‘bg-blue-600’, ‘text-white’);
individualTab.classList.add(‘text-gray-600’);
} else {
individualForm.classList.remove(‘hidden’);
companyForm.classList.add(‘hidden’);
individualTab.classList.add(‘bg-blue-600’, ‘text-white’);
individualTab.classList.remove(‘text-gray-600’);
companyTab.classList.remove(‘bg-blue-600’, ‘text-white’);
companyTab.classList.add(‘text-gray-600’);
}
}
function showSuccessMessage() {
const modal = document.getElementById(‘successMessage’);
modal.classList.remove(‘hidden’);
setTimeout(() => {
modal.querySelector(‘div’).classList.add(‘scale-100’);
modal.querySelector(‘div’).classList.remove(‘scale-95’);
}, 10);
}
function closeSuccessMessage() {
const modal = document.getElementById(‘successMessage’);
modal.querySelector(‘div’).classList.add(‘scale-95’);
modal.querySelector(‘div’).classList.remove(‘scale-100’);
setTimeout(() => {
modal.classList.add(‘hidden’);
}, 300);
}
// Handle form submissions
document.getElementById(‘companySubmissionForm’).addEventListener(‘submit’, function(e) {
e.preventDefault();
// Collect form data
const formData = new FormData(this);
const data = {
type: ‘company’,
companyName: formData.get(‘companyName’) || this.querySelector(‘input[placeholder=”Your Company Name”]’).value,
contactPerson: formData.get(‘contactPerson’) || this.querySelector(‘input[placeholder=”Full Name”]’).value,
email: formData.get(’email’) || this.querySelector(‘input[type=”email”]’).value,
phone: formData.get(‘phone’) || this.querySelector(‘input[type=”tel”]’).value,
opportunityTypes: Array.from(this.querySelectorAll(‘input[name=”opportunityType”]:checked’)).map(cb => cb.value),
companyDescription: this.querySelector(‘textarea[placeholder*=”company”]’).value,
positionDescription: this.querySelector(‘textarea[placeholder*=”role”]’).value,
location: this.querySelector(‘input[placeholder=”City, Country”]’).value,
duration: this.querySelector(‘input[placeholder*=”months”]’).value,
files: this.querySelector(‘input[type=”file”]’).files,
timestamp: new Date().toISOString()
};
// Here you would normally send to your backend/Google Drive
console.log(‘Company submission:’, data);
// Show success message
showSuccessMessage();
// Reset form
this.reset();
});
document.getElementById(‘individualSubmissionForm’).addEventListener(‘submit’, function(e) {
e.preventDefault();
// Collect form data
const formData = new FormData(this);
const data = {
type: ‘individual’,
fullName: this.querySelector(‘input[placeholder=”Your Full Name”]’).value,
email: this.querySelector(‘input[placeholder*=”your.email”]’).value,
phone: this.querySelector(‘input[type=”tel”]’).value,
location: this.querySelector(‘input[placeholder=”City, Country”]’).value,
interests: Array.from(this.querySelectorAll(‘input[name=”interests”]:checked’)).map(cb => cb.value),
fieldOfStudy: this.querySelector(‘input[placeholder*=”Computer Science”]’).value,
experienceLevel: this.querySelector(‘select’).value,
personalStatement: this.querySelector(‘textarea’).value,
files: this.querySelector(‘input[type=”file”]’).files,
timestamp: new Date().toISOString()
};
// Here you would normally send to your backend/Google Drive
console.log(‘Individual submission:’, data);
// Show success message
showSuccessMessage();
// Reset form
this.reset();
});
// File upload feedback
document.querySelectorAll(‘input[type=”file”]’).forEach(input => {
input.addEventListener(‘change’, function() {
const fileCount = this.files.length;
const label = this.parentElement.querySelector(‘span’);
if (fileCount > 0) {
label.textContent = `${fileCount} file${fileCount > 1 ? ‘s’ : ”} selected`;
label.classList.add(‘bg-green-600’);
label.classList.remove(‘bg-blue-600’);
} else {
label.textContent = ‘Choose Files’;
label.classList.add(‘bg-blue-600’);
label.classList.remove(‘bg-green-600’);
}
});
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement(‘script’);d.innerHTML=”window.__CF$cv$params={r:’967c9838516c193a’,t:’MTc1Mzk1OTY1My4wMDAwMDA=’};var a=document.createElement(‘script’);a.nonce=”;a.src=’/cdn-cgi/challenge-platform/scripts/jsd/main.js’;document.getElementsByTagName(‘head’)[0].appendChild(a);”;b.getElementsByTagName(‘head’)[0].appendChild(d)}}if(document.body){var a=document.createElement(‘iframe’);a.height=1;a.width=1;a.style.position=’absolute’;a.style.top=0;a.style.left=0;a.style.border=’none’;a.style.visibility=’hidden’;document.body.appendChild(a);if(‘loading’!==document.readyState)c();else if(window.addEventListener)document.addEventListener(‘DOMContentLoaded’,c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);’loading’!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>