|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>A-R-E-A | Find Your Dream Job</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> |
|
|
<style> |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-10px); } |
|
|
} |
|
|
.floating { animation: float 3s ease-in-out infinite; } |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
.custom-shape-divider-bottom-1720171877 { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
overflow: hidden; |
|
|
line-height: 0; |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
.custom-shape-divider-bottom-1720171877 svg { |
|
|
position: relative; |
|
|
display: block; |
|
|
width: calc(100% + 1.3px); |
|
|
height: 80px; |
|
|
} |
|
|
.custom-shape-divider-bottom-1720171877 .shape-fill { |
|
|
fill: #FFFFFF; |
|
|
} |
|
|
.job-card-hover { |
|
|
transition: all 0.3s ease; |
|
|
transform-origin: center; |
|
|
} |
|
|
.job-card-hover:hover { |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
.form-control:focus { |
|
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans antialiased"> |
|
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<a href="#" class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center"> |
|
|
<span class="text-white font-bold text-xl">A</span> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold gradient-text">A-R-E-A</h1> |
|
|
</a> |
|
|
|
|
|
<nav class="hidden md:block"> |
|
|
<ul class="flex space-x-8"> |
|
|
<li><a href="index.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group"> |
|
|
Home |
|
|
<span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span> |
|
|
</a></li> |
|
|
<li><a href="jobs.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group"> |
|
|
Jobs |
|
|
<span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span> |
|
|
</a></li> |
|
|
<li><a href="companies.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group"> |
|
|
Companies |
|
|
<span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span> |
|
|
</a></li> |
|
|
<li><a href="about.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group"> |
|
|
About |
|
|
<span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span> |
|
|
</a></li> |
|
|
<li><a href="contact.html" class="text-gray-600 hover:text-indigo-600 transition font-medium relative group"> |
|
|
Contact |
|
|
<span class="absolute left-0 -bottom-1 w-0 h-0.5 bg-indigo-600 transition-all group-hover:w-full"></span> |
|
|
</a></li> |
|
|
<li><a href="#" class="px-6 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition font-medium shadow-md"> |
|
|
Find a Job |
|
|
</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<button class="md:hidden text-gray-700 focus:outline-none" id="mobile-menu-button"> |
|
|
<ion-icon name="menu-outline" class="text-2xl"></ion-icon> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="relative bg-gradient-to-r from-indigo-600 to-blue-500 text-white overflow-hidden"> |
|
|
<div class="container mx-auto px-4 py-20 md:py-32 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-6"> |
|
|
Discover Your Next <span class="gradient-text bg-clip-text text-transparent bg-white">Career Move</span> |
|
|
</h1> |
|
|
<p class="text-xl mb-8 opacity-90 hero-p"> |
|
|
Join thousands of professionals who found their dream jobs through our platform. We connect talent with opportunity. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 hero-buttons"> |
|
|
<a href="#job-listings" class="px-8 py-3 bg-white text-indigo-600 rounded-full font-bold hover:bg-gray-100 transition shadow-lg text-center"> |
|
|
Browse Jobs |
|
|
</a> |
|
|
<a href="#cv-submission" class="px-8 py-3 border-2 border-white text-white rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition text-center"> |
|
|
Submit Resume |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 flex justify-center relative"> |
|
|
<div class="relative floating w-full max-w-md"> |
|
|
<img src="https://img.freepik.com/free-vector/business-team-putting-together-jigsaw-puzzle-isolated-flat-vector-illustration-cartoon-partners-working-connection-teamwork-partnership-cooperation-concept_74855-9814.jpg" alt="Career illustration" class="w-full h-auto rounded-lg shadow-xl"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="custom-shape-divider-bottom-1720171877"> |
|
|
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> |
|
|
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path> |
|
|
</svg> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition"> |
|
|
<div class="text-indigo-600 text-4xl font-bold mb-4">2,500+</div> |
|
|
<h3 class="text-xl font-bold mb-2">Job Openings</h3> |
|
|
<p class="text-gray-600">From top companies across all industries</p> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition"> |
|
|
<div class="text-indigo-600 text-4xl font-bold mb-4">15K+</div> |
|
|
<h3 class="text-xl font-bold mb-2">Candidates Hired</h3> |
|
|
<p class="text-gray-600">Successfully placed in their dream jobs</p> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition"> |
|
|
<div class="text-indigo-600 text-4xl font-bold mb-4">95%</div> |
|
|
<h3 class="text-xl font-bold mb-2">Satisfaction Rate</h3> |
|
|
<p class="text-gray-600">From both job seekers and employers</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="job-listings" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Current Openings</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Browse through our latest job listings and find the perfect match for your skills and experience.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden job-card-hover hover:border-indigo-500 border-l-4 border-transparent transition"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<ion-icon name="code-slash-outline" class="text-indigo-600 text-2xl"></ion-icon> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Senior Software Engineer</h3> |
|
|
<p class="text-indigo-600">Company A - Singapore</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Looking for a skilled software engineer with 5+ years experience in Python, Django, and React. Leadership experience preferred.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Python</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Django</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">React</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-500">$90k - $120k</span> |
|
|
<a href="#" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-medium transition flex items-center"> |
|
|
Apply Now |
|
|
<ion-icon name="arrow-forward-outline" class="ml-2"></ion-icon> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden job-card-hover hover:border-indigo-500 border-l-4 border-transparent transition"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<ion-icon name="megaphone-outline" class="text-indigo-600 text-2xl"></ion-icon> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Marketing Manager</h3> |
|
|
<p class="text-indigo-600">Company B - Singapore</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Experienced marketing manager needed to lead our global campaigns, with expertise in digital marketing and branding.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Marketing</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">SEO</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Branding</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-500">$75k - $95k</span> |
|
|
<a href="#" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-medium transition flex items-center"> |
|
|
Apply Now |
|
|
<ion-icon name="arrow-forward-outline" class="ml-2"></ion-icon> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden job-card-hover hover:border-indigo-500 border-l-4 border-transparent transition"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<ion-icon name="analytics-outline" class="text-indigo-600 text-2xl"></ion-icon> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Data Scientist</h3> |
|
|
<p class="text-indigo-600">Company C - Remote</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Looking for a data scientist with experience in ML models and data visualization. Experience with Python and TensorFlow required.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Python</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">TensorFlow</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Data Science</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-500">$85k - $110k</span> |
|
|
<a href="#" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-medium transition flex items-center"> |
|
|
Apply Now |
|
|
<ion-icon name="arrow-forward-outline" class="ml-2"></ion-icon> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden job-card-hover hover:border-indigo-500 border-l-4 border-transparent transition"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<ion-icon name="people-outline" class="text-indigo-600 text-2xl"></ion-icon> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">HR Manager</h3> |
|
|
<p class="text-indigo-600">Company D - Singapore</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">HR professional with 5+ years experience needed to lead our HR department. PHR/SPHR certification preferred.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">HR</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Recruiting</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Management</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-500">$65k - $85k</span> |
|
|
<a href="#" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-medium transition flex items-center"> |
|
|
Apply Now |
|
|
<ion-icon name="arrow-forward-outline" class="ml-2"></ion-icon> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden job-card-hover hover:border-indigo-500 border-l-4 border-transparent transition"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<ion-icon name="cash-outline" class="text-indigo-600 text-2xl"></ion-icon> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">Financial Analyst</h3> |
|
|
<p class="text-indigo-600">Company E - Singapore</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Experienced analyst needed for financial modeling and forecasting. CFA certification is a plus.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Finance</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Accounting</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Excel</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-500">$70k - $90k</span> |
|
|
<a href="#" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-medium transition flex items-center"> |
|
|
Apply Now |
|
|
<ion-icon name="arrow-forward-outline" class="ml-2"></ion-icon> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden job-card-hover hover:border-indigo-500 border-l-4 border-transparent transition"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mr-4"> |
|
|
<ion-icon name="brush-outline" class="text-indigo-600 text-2xl"></ion-icon> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold">UI/UX Designer</h3> |
|
|
<p class="text-indigo-600">Company F - Remote</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Creative designer with portfolio demonstrating user-centered design principles. Experience with Figma required.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-6"> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Figma</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">UX</span> |
|
|
<span class="px-3 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm">Prototyping</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-500">$80k - $100k</span> |
|
|
<a href="#" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-medium transition flex items-center"> |
|
|
Apply Now |
|
|
<ion-icon name="arrow-forward-outline" class="ml-2"></ion-icon> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="px-6 py-3 bg-white text-indigo-600 rounded-full font-bold hover:bg-indigo-50 hover:shadow-md transition inline-flex items-center"> |
|
|
View All Jobs |
|
|
<ion-icon name="chevron-forward-outline" class="ml-2"></ion-icon> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="cv-submission" class="py-16 bg-indigo-600 text-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Can't find what you're looking for?</h2> |
|
|
<p class="text-xl opacity-90">Submit your CV, and our expert recruiters will match you with suitable opportunities.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-2xl overflow-hidden"> |
|
|
<div class="p-8"> |
|
|
|
|
|
<div id="form-message" class="hidden mb-6 p-4 rounded-lg"></div> |
|
|
|
|
|
<form id="cv-form" class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label> |
|
|
<input type="text" id="name" name="name" required |
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">Email</label> |
|
|
<input type="email" id="email" name="email" required |
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label> |
|
|
<input type="tel" id="phone" name="phone" |
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="job-types" class="block text-gray-700 font-medium mb-2">Job Types Interested In</label> |
|
|
<select id="job-types" name="job-types" multiple |
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
<option value="software">Software Development</option> |
|
|
<option value="marketing">Marketing</option> |
|
|
<option value="finance">Finance</option> |
|
|
<option value="design">Design</option> |
|
|
<option value="hr">Human Resources</option> |
|
|
<option value="data">Data Science</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="cv" class="block text-gray-700 font-medium mb-2">Upload CV (PDF, DOC, DOCX, up to 5MB)</label> |
|
|
<div class="flex items-center justify-center w-full"> |
|
|
<label for="cv" class="flex flex-col w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer hover:bg-gray-50"> |
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6"> |
|
|
<ion-icon name="cloud-upload-outline" class="text-gray-500 text-3xl mb-2"></ion-icon> |
|
|
<p class="text-sm text-gray-500"> |
|
|
<span class="font-semibold">Click to upload</span> or drag and drop |
|
|
</p> |
|
|
<p class="text-xs text-gray-500">PDF, DOC, DOCX (MAX. 5MB)</p> |
|
|
</div> |
|
|
<input id="cv" name="cv" type="file" class="hidden" accept=".pdf,.doc,.docx" required /> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="cover-letter" class="block text-gray-700 font-medium mb-2">Cover Letter (Optional)</label> |
|
|
<textarea id="cover-letter" name="cover-letter" rows="4" |
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input id="agree-terms" name="agree-terms" type="checkbox" required |
|
|
class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"> |
|
|
<label for="agree-terms" class="ml-2 block text-sm text-gray-700"> |
|
|
I agree to the <a href="#" class="text-indigo-600 hover:underline">Terms & Conditions</a> and <a href="#" class="text-indigo-600 hover:underline">Privacy Policy</a> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<button type="submit" class="w-full py-3 px-6 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-lg transition flex items-center justify-center"> |
|
|
Submit Application |
|
|
<ion-icon name="paper-plane-outline" class="ml-2"></ion-icon> |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Success Stories</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Don't just take our word for it. Here's what our candidates say about their experience with A-R-E-A.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4"> |
|
|
<ion-icon name="person-outline" class="text-indigo-600 text-xl"></ion-icon> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah Johnson</h4> |
|
|
<p class="text-sm text-gray-500">Marketing Director</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"A-R-E-A helped me find my dream job in just 3 weeks. Their recruiters really understood what I was looking for and matched me with the perfect company."</p> |
|
|
<div class="flex mt-4"> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4"> |
|
|
<ion-icon name="person-outline" class="text-indigo-600 text-xl"></ion-icon> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Michael Chen</h4> |
|
|
<p class="text-sm text-gray-500">Senior Software Engineer</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"I was skeptical at first, but A-R-E-A found me a position with better pay and benefits than I could have negotiated on my own. Highly recommend!"</p> |
|
|
<div class="flex mt-4"> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star-half-outline" class="text-yellow-400"></ion-icon> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4"> |
|
|
<ion-icon name="person-outline" class="text-indigo-600 text-xl"></ion-icon> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Elena Rodriguez</h4> |
|
|
<p class="text-sm text-gray-500">UX Designer</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"The career advice and interview preparation I received were invaluable. A-R-E-A didn't just find me a job—they helped advance my entire career."</p> |
|
|
<div class="flex mt-4"> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
<ion-icon name="star" class="text-yellow-400"></ion-icon> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-indigo-50"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to take the next step in your career?</h2> |
|
|
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">Join thousands of professionals who have already found their dream jobs through A-R-E-A.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#job-listings" class="px-8 py-3 bg-indigo-600 text-white rounded-full font-bold hover:bg-indigo-700 transition shadow-lg inline-flex items-center justify-center"> |
|
|
Browse Open Positions |
|
|
<ion-icon name="search-outline" class="ml-2"></ion-icon> |
|
|
</a> |
|
|
<a href="#cv-submission" class="px-8 py-3 border-2 border-indigo-600 text-indigo-600 rounded-full font-bold hover:bg-white transition inline-flex items-center justify-center"> |
|
|
Submit Your Resume |
|
|
<ion-icon name="document-attach-outline" class="ml-2"></ion-icon> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-16 pb-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<span class="w-8 h-8 bg-white rounded-lg flex items-center justify-center mr-2"> |
|
|
<span class="text-gray-900 font-bold text-sm">A</span> |
|
|
</span> |
|
|
A-R-E-A |
|
|
</h3> |
|
|
<p class="text-gray-400 mb-4">Connecting talent with opportunity since 2015.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<ion-icon name="logo-facebook" class="text-xl"></ion-icon> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<ion-icon name="logo-twitter" class="text-xl"></ion-icon> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<ion-icon name="logo-linkedin" class="text-xl"></ion-icon> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<ion-icon name="logo-instagram" class="text-xl"></ion-icon> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">For Job Seekers</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Browse Jobs</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Career Advice</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Resume Builder</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Interview Tips</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">For Employers</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Post a Job</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Browse Candidates</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Recruiting Solutions</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Contact Us</h3> |
|
|
<address class="not-italic text-gray-400 space-y-2"> |
|
|
<p>123 Recruitment St, Singapore 123456</p> |
|
|
<p>Email: <a href="mailto:info@area.com" class="hover:text-white transition">info@area.com</a></p> |
|
|
<p>Phone: +65 1234 5678</p> |
|
|
</address> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 A-R-E-A. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
gsap.registerPlugin(ScrollTrigger); |
|
|
|
|
|
|
|
|
gsap.from('header', { |
|
|
duration: 0.8, |
|
|
y: -50, |
|
|
opacity: 0, |
|
|
ease: "back.out(1.2)" |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.from("h1 span", { |
|
|
duration: 1.5, |
|
|
x: -50, |
|
|
opacity: 0, |
|
|
stagger: 0.2, |
|
|
ease: "power4.out" |
|
|
}); |
|
|
|
|
|
gsap.from(".hero-p, .hero-buttons", { |
|
|
duration: 1, |
|
|
y: 40, |
|
|
opacity: 0, |
|
|
stagger: 0.2, |
|
|
delay: 0.6, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
|
|
|
gsap.to('.floating', { |
|
|
y: -20, |
|
|
duration: 2, |
|
|
repeat: -1, |
|
|
yoyo: true, |
|
|
ease: "sine.inOut" |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.to('.floating', { |
|
|
rotation: 2, |
|
|
duration: 6, |
|
|
repeat: -1, |
|
|
yoyo: true, |
|
|
ease: "sine.inOut" |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.from(".bg-white.p-8", { |
|
|
scrollTrigger: { |
|
|
trigger: ".bg-white.p-8", |
|
|
start: "top 90%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
scale: 0.8, |
|
|
opacity: 0, |
|
|
y: 30, |
|
|
duration: 1, |
|
|
stagger: 0.2, |
|
|
ease: "back.out(1)" |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.utils.toArray('section').forEach((section, i) => { |
|
|
gsap.from(section, { |
|
|
scrollTrigger: { |
|
|
trigger: section, |
|
|
start: "top 85%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
opacity: 0, |
|
|
y: i % 2 === 0 ? 50 : -50, |
|
|
duration: 0.8, |
|
|
delay: i * 0.1, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.utils.toArray('.job-card-hover').forEach((card, i) => { |
|
|
gsap.from(card, { |
|
|
scrollTrigger: { |
|
|
trigger: card, |
|
|
start: "top 90%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
opacity: 0, |
|
|
y: 30, |
|
|
scale: 0.9, |
|
|
duration: 0.8, |
|
|
delay: i * 0.1, |
|
|
ease: "back.out(1)" |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.utils.toArray(".form-control", 1).forEach((field, i) => { |
|
|
gsap.from(field, { |
|
|
scrollTrigger: { |
|
|
trigger: "#cv-form", |
|
|
start: "top 90%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
opacity: 0, |
|
|
y: 20, |
|
|
duration: 0.6, |
|
|
delay: i * 0.1, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.utils.toArray('.bg-gray-50').forEach((testimonial, i) => { |
|
|
gsap.from(testimonial, { |
|
|
scrollTrigger: { |
|
|
trigger: testimonial, |
|
|
start: "top 80%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
opacity: 0, |
|
|
x: i % 2 === 0 ? -50 : 50, |
|
|
rotation: i % 2 === 0 ? -5 : 5, |
|
|
duration: 1, |
|
|
ease: "elastic.out(1, 0.5)" |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const cvForm = document.getElementById('cv-form'); |
|
|
const formMessage = document.getElementById('form-message'); |
|
|
|
|
|
cvForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const name = document.getElementById('name').value.trim(); |
|
|
const email = document.getElementById('email').value.trim(); |
|
|
const cvFile = document.getElementById('cv').files[0]; |
|
|
|
|
|
if (!name || !email || !cvFile) { |
|
|
showMessage('Please fill in all required fields.', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']; |
|
|
const maxSize = 5 * 1024 * 1024; |
|
|
|
|
|
if (!allowedTypes.includes(cvFile.type)) { |
|
|
showMessage('Please upload a valid file (PDF, DOC, DOCX).', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (cvFile.size > maxSize) { |
|
|
showMessage('File size exceeds 5MB limit.', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
showMessage('Your application has been submitted successfully! Our team will review your CV and contact you soon.', 'success'); |
|
|
|
|
|
|
|
|
cvForm.reset(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
function showMessage(message, type) { |
|
|
formMessage.textContent = message; |
|
|
formMessage.className = `mb-6 p-4 rounded-lg ${type === 'success' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`; |
|
|
formMessage.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
formMessage.classList.add('hidden'); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
|
|
|
|
|
|
const mobileMenu = document.createElement('div'); |
|
|
mobileMenu.id = 'mobile-menu'; |
|
|
mobileMenu.className = 'hidden fixed inset-0 bg-white z-50 flex flex-col items-center justify-center'; |
|
|
mobileMenu.innerHTML = ` |
|
|
<div class="absolute top-4 right-4"> |
|
|
<button id="close-mobile-menu" class="text-gray-700 focus:outline-none"> |
|
|
<ion-icon name="close-outline" class="text-3xl"></ion-icon> |
|
|
</button> |
|
|
</div> |
|
|
<ul class="text-center space-y-8 px-4"> |
|
|
<li><a href="index.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">Home</a></li> |
|
|
<li><a href="jobs.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">Jobs</a></li> |
|
|
<li><a href="companies.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">Companies</a></li> |
|
|
<li><a href="about.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">About</a></li> |
|
|
<li><a href="contact.html" class="text-2xl font-medium text-gray-700 hover:text-indigo-600 transition-colors">Contact</a></li> |
|
|
<li><a href="jobs.html" class="text-2xl font-medium px-8 py-3 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition inline-block">Find a Job</a></li> |
|
|
</ul> |
|
|
`; |
|
|
document.body.appendChild(mobileMenu); |
|
|
|
|
|
|
|
|
function toggleMobileMenu(show) { |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (show) { |
|
|
mobileMenu.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
|
|
|
|
|
|
gsap.from(mobileMenu, { |
|
|
opacity: 0, |
|
|
duration: 0.2, |
|
|
ease: "power2.out" |
|
|
}); |
|
|
} else { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => toggleMobileMenu(true)); |
|
|
|
|
|
document.getElementById('close-mobile-menu').addEventListener('click', () => toggleMobileMenu(false)); |
|
|
|
|
|
|
|
|
mobileMenu.querySelectorAll('a').forEach(link => { |
|
|
link.addEventListener('click', () => toggleMobileMenu(false)); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
if (this.getAttribute('href') === '#') return; |
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
gsap.to(window, { |
|
|
duration: 1, |
|
|
scrollTo: { |
|
|
y: targetElement, |
|
|
offsetY: 80 |
|
|
}, |
|
|
ease: "power2.inOut" |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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=RFox11709/byclient" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
