File size: 49,382 Bytes
b99f65d 883bf7e b99f65d 883bf7e b99f65d 883bf7e b99f65d 883bf7e b99f65d 1b1ac8b b99f65d 1b1ac8b a7ed29f b99f65d a7ed29f b99f65d ec4c8e7 b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 1b1ac8b b99f65d 883bf7e b99f65d 883bf7e b99f65d 883bf7e b99f65d 883bf7e b99f65d 883bf7e b99f65d 883bf7e b99f65d 883bf7e b99f65d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 | <!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/Navbar -->
<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>
<!-- Hero Section -->
<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>
<!-- Stats 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>
<!-- Job Listings 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">
<!-- Job Card 1 -->
<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>
<!-- Job Card 2 -->
<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>
<!-- Job Card 3 -->
<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>
<!-- Job Card 4 -->
<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>
<!-- Job Card 5 -->
<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>
<!-- Job Card 6 -->
<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>
<!-- CV Submission 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">
<!-- Success/Error Message Placeholder -->
<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>
<!-- Testimonials 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>
<!-- CTA 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 -->
<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 Animations
gsap.registerPlugin(ScrollTrigger);
// Enhanced header animation
gsap.from('header', {
duration: 0.8,
y: -50,
opacity: 0,
ease: "back.out(1.2)"
});
// Hero text animation
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"
});
// Floating animation with rotation for hero image
gsap.to('.floating', {
rotation: 2,
duration: 6,
repeat: -1,
yoyo: true,
ease: "sine.inOut"
});
// Stats cards animation
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)"
});
// Section animations with more personality
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"
});
});
// Enhanced job cards animation with scale
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)"
});
});
// Form fields animation
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"
});
});
// Testimonials animation with rotation
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)"
});
});
// CV Form Submission
const cvForm = document.getElementById('cv-form');
const formMessage = document.getElementById('form-message');
cvForm.addEventListener('submit', function(e) {
e.preventDefault();
// Form validation
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;
}
// File validation
const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
const maxSize = 5 * 1024 * 1024; // 5MB
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;
}
// Simulate form submission
showMessage('Your application has been submitted successfully! Our team will review your CV and contact you soon.', 'success');
// Reset form
cvForm.reset();
// In a real scenario, you would send the form data to the server:
/*
const formData = new FormData(cvForm);
fetch('/api/submit-cv', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
showMessage(data.message, 'success');
cvForm.reset();
})
.catch(error => {
showMessage('An error occurred. Please try again.', 'error');
});
*/
});
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');
// Hide message after 5 seconds
setTimeout(() => {
formMessage.classList.add('hidden');
}, 5000);
}
// Mobile menu functionality
const mobileMenuButton = document.getElementById('mobile-menu-button');
// Create mobile menu overlay
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);
// Toggle menu function
function toggleMobileMenu(show) {
const mobileMenu = document.getElementById('mobile-menu');
if (show) {
mobileMenu.classList.remove('hidden');
document.body.style.overflow = 'hidden';
// Animate menu appearance
gsap.from(mobileMenu, {
opacity: 0,
duration: 0.2,
ease: "power2.out"
});
} else {
mobileMenu.classList.add('hidden');
document.body.style.overflow = 'auto';
}
}
// Event listeners
mobileMenuButton.addEventListener('click', () => toggleMobileMenu(true));
document.getElementById('close-mobile-menu').addEventListener('click', () => toggleMobileMenu(false));
// Close when clicking on a link
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => toggleMobileMenu(false));
});
// Smooth scrolling for anchor links
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> |