Skip to content

Commit

Permalink
refactor: moved join us to main page (#95)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KostLinux
KostLinux authored Oct 10, 2024
1 parent ac0aef5 commit 2302285
Show file tree
Hide file tree
Showing 7 changed files with 313 additions and 542 deletions.
167 changes: 155 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,27 @@
</head>

<body class="lookinlabs-body-bg">
<!-- Success Banner -->
<div id="success-banner"
class="mt-24 hidden fixed top-0 left-1/2 w-3/5 mx-auto max-w-7xl bg-green-500 text-white px-6 py-3 justify-between items-center z-50 rounded transform -translate-x-1/2"
data-translation-key="banner_success_email_sent">
<div>Success! Email was sent.</div>
</div>

<!-- Fail Banner -->
<div id="fail-banner"
class="mt-24 hidden fixed top-0 left-1/2 w-3/5 mx-auto max-w-7xl bg-red-500 text-white px-6 py-3 justify-between items-center z-50 rounded transform -translate-x-1/2"
data-translation-key="banner_failure_email_sent">
<div>Email was not sent, please try again.</div>
</div>

<!-- Terms Banner -->
<div id="terms-banner"
class="mt-24 hidden fixed top-0 left-1/2 w-3/5 mx-auto max-w-7xl bg-red-500 text-white px-6 py-3 justify-between items-center z-50 rounded transform -translate-x-1/2"
data-translation-key="banner_please_check_terms_and_conditions">
<div>Please check out LookinLabs Terms & Conditions and Privacy Policy.</div>
</div>

<!-- Loader -->
<section id="refreshLoader" class="bg-white dark:bg-black flex justify-center items-center h-screen">
<div class="spinner bg-pink-200 rounded-full w-40 h-40 flex justify-center items-center">
Expand Down Expand Up @@ -85,12 +106,12 @@
<a href="#offer"
class="block py-2 px-3 md:hover:bg-transparent md:border-0 md:hover:text-purple-400 md:p-0 text-white md:dark:hover:text-purple-400 hover:bg-gray-700 hover:text-white md:dark:hover:bg-transparent"
data-translation-key="navbar_offer">What
do we offer?</a>
we offer?</a>
</li>
<li>
<a href="./resources/pages/join-us/"
<a href="#contact"
class="block py-2 px-3 md:hover:bg-transparent md:border-0 md:hover:text-purple-400 md:p-0 text-white md:dark:hover:text-purple-400 hover:bg-gray-700 hover:text-white md:dark:hover:bg-transparent"
data-translation-key="navbar_join">Join Us</a>
data-translation-key="navbar_contact">Join Us</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -156,16 +177,57 @@ <h1 class="text-2xl font-bold my-6 underline w-full" data-translation-key="secti
</section>

<section id="offer" class="sm:w-auto md:w-auto lg:w-auto xl:w-auto flex flex-wrap pt-16">
<h1 class="text-2xl font-bold my-6 underline w-full" data-translation-key="section_offer_title">What Do We
Offer?
<h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translation-key="section_offer_title">What We
Offer
</h1>
<p class="w-full text-justify leading-6" data-translation-key="offer_description">
LookinLabs is a self-development organization primarily targeting junior to mid-level developers, providing
them with the opportunity to learn through a project-based learning approach. During projects, developers have
the opportunity to acquire all the necessary skills for a career path in software engineering.
We also practice apprenticeship, giving more experienced developers the opportunity to mentor and share their
knowledge.
</p>
</section>
<section id="kpis" class="pt-16">
<div class="container mx-auto">
<div class="flex flex-wrap justify-center">
<!-- First Icon Column -->
<div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8 sm:mb-0">
<div class="text-center">
<i class="fas fa-book-open text-6xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
<h3 data-translation-key="what_do_we_offer_book_icon" class="text-xl font-semibold mb-2">Comprehensive knowledge</h3>
<p data-translation-key="what_do_we_offer_book_icon_description" class="text-gray-600">Master in-demand skills across different technologies</p>
</div>
</div>
<!-- Second Icon Column -->
<div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8 sm:mb-0">
<div class="text-center">
<i class="fas fa-users text-6xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
<h3 data-translation-key="what_do_we_offer_users_icon" class="text-xl font-semibold mb-2">Expert Guidance</h3>
<p data-translation-key="what_do_we_offer_users_icon_description" class="text-gray-600">Learn from top-rated experts with hands-on experience</p>
</div>
</div>
<!-- Third Icon Column -->
<div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8 sm:mb-0">
<div class="text-center">
<i class="fas fa-laptop-code text-6xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
<h3 data-translation-key="what_do_we_offer_tools_icon" class="text-xl font-semibold mb-2">Project Based Learning</h3>
<p data-translation-key="what_do_we_offer_tools_icon_description" class="text-gray-600">Develop real projects and learn by doing</p>
</div>
</div>
</div>
<div class="flex flex-wrap justify-center mt-8">
<!-- Fourth Icon Column -->
<div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8 sm:mb-0">
<div class="text-center">
<i class="fas fa-tools text-6xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
<h3 data-translation-key="what_do_we_offer_laptop_icon" class="text-xl font-semibold mb-2">Performance Tracking</h3>
<p data-translation-key="what_do_we_offer_laptop_icon_description" class="text-gray-600">Monitor your progress with detailed analytics</p>
</div>
</div>
<!-- Fifth Icon Column -->
<div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8 sm:mb-0">
<div class="text-center">
<i class="fas fa-infinity text-6xl text-transparent bg-clip-text bg-gradient-to-r from-emerald-700 via-indigo-700 to-purple-900 mb-4"></i>
<h3 data-translation-key="what_do_we_offer_infinity_icon" class="text-xl font-semibold mb-2">Certification</h3>
<p data-translation-key="what_do_we_offer_infinity_icon_description" class="text-gray-600">Earn certificates to showcase your skills</p>
</div>
</div>
</div>
</div>
</section>
<section id="partners" class="flex flex-col items-center justify-center p-4 pt-16">
<h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translation-key="section_partners_title">Our Partners</h1>
Expand All @@ -182,6 +244,87 @@ <h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translatio
</div>
</div>
</section>
<section id="contact" class="flex flex-col items-center justify-center pt-24">
<h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translation-key="section_contact_title">Join
Us</h1>
<form id="contactForm"
class="space-y-6 w-full lg:w-2/3 bg-gray-900 bg-opacity-30 border border-gray-600 p-8 rounded-lg shadow-xl dark:bg-opacity-30 dark:border-gray-700">
<input type="text" id="username" name="username" placeholder="Username" required
class="w-full p-3 border bg-gray-900 bg-opacity-30 border-gray-600 rounded text-white dark:text-white dark:bg-gray-700 dark:bg-opacity-30 focus:outline-none focus:ring-2 focus:ring-blue-400"
data-translation-key="contact_form_username_placeholder">
<input type="email" id="email" name="email" placeholder="Email" required
class="w-full p-3 border border-gray-600 bg-opacity-30 rounded text-white dark:text-white dark:bg-gray-700 dark:bg-opacity-30 focus:outline-none focus:ring-2 focus:ring-blue-400"
data-translation-key="contact_form_email_placeholder">
<input type="text" id="title" name="title" placeholder="Your role (e.g Software Engineer, DevOps Engineer etc)"
required
class="w-full p-3 border border-gray-600 bg-opacity-30 rounded text-white dark:text-white dark:bg-gray-700 dark:bg-opacity-30 focus:outline-none focus:ring-2 focus:ring-blue-400"
data-translation-key="contact_form_role_placeholder">
<textarea id="description" name="description" placeholder="Share your knowledge" required rows="5"
class="w-full p-3 border border-gray-600 bg-opacity-30 rounded text-white dark:text-white dark:bg-gray-700 dark:bg-opacity-30 focus:outline-none focus:ring-2 focus:ring-blue-400"
data-translation-key="contact_form_description_placeholder"></textarea>
<div class="flex justify-center">
<label class="inline-flex items-center mt-3">
<input id="termsCheckbox" type="checkbox" class="form-checkbox h-5 w-5 text-purple-400 dark:text-white">
<span class="ml-2 text-white dark:text-white" data-translation-key="contact_form_agree_checkbox_label">
I agree to
<a href="/resources/terms/en/terms_and_conditions.pdf" target="_blank" class="text-blue-500 hover:underline">Terms
&
Conditions</a>
and
<a href="/resources/terms/en/privacy_policy.pdf" target="_blank" class="text-blue-500 hover:underline">Privacy
Policy</a>
</span>
</label>
</div>
<div class="flex justify-center">
<div class="g-recaptcha" data-sitekey="6LdxhqIpAAAAACETruL2Z0WJmCi0hcNo9k6wCk_-"></div>
</div>
<div class="flex justify-center">
<button type="submit"
class="p-3 bg-opacity-30 bg-purple-600 hover:bg-green-500 hover:bg-opacity-70 text-white rounded"
data-translation-key="contact_form_submit_button_text">
Join Us!
</button>
</div>
</form>
</section>

<!-- Loader Section -->
<section id="loader" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog"
aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-green-600 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"
data-translation-key="contact_form_loader_modal_title">
Sending email...
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500" data-translation-key="contact_form_loader_modal_description">
Please wait... Don't press submit second time, otherwise it will fail.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="sm:w-auto md:w-auto lg:w-auto xl:w-auto flex justify-center mt-4">
<footer class="w-full mt-20 p-2 bg-gray-900 border-gray-200 text-center text-white">
Expand Down
95 changes: 94 additions & 1 deletion resources/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,98 @@
//Home Page Script
// EmailJS
(function () {
emailjs.init("ySaIap3hTf1eHrMKa");
})();

document.addEventListener("DOMContentLoaded", function () {
const contactForm = document.getElementById("contactForm");
const loader = document.getElementById("loader");
const successBanner = document.getElementById("success-banner");
const failBanner = document.getElementById("fail-banner");
const termsBanner = document.getElementById("terms-banner");

if (contactForm) {
contactForm.addEventListener("submit", function (event) {
event.preventDefault();

// Check if the terms checkbox is checked
const termsCheckbox = document.getElementById("termsCheckbox");
if (termsCheckbox && termsCheckbox.checked) {
// Show loader
if (loader) loader.classList.remove("hidden");

let formData = new FormData(this);
let username = formData.get("username");
let email = formData.get("email");
let title = formData.get("title");
let description = formData.get("description");
let captcha_response = grecaptcha.getResponse();

let templateParams = {
username: username,
email: email,
title: title,
description: description,
"g-recaptcha-response": captcha_response,
};

emailjs
.send("lookinlabs_zoho", "lookinlabs_template_id", templateParams)
.then(
function () {
// Hide contact form
contactForm.reset();

// Show success banner
if (successBanner) {
successBanner.classList.remove("hidden");
successBanner.classList.add("flex");
setTimeout(function () {
successBanner.classList.add("hidden");
successBanner.classList.remove("flex");
}, 5000); // Hide after 5 seconds
}
},
function (error) {
// Show fail banner
if (failBanner) {
failBanner.classList.remove("hidden");
failBanner.classList.add("flex");
setTimeout(function () {
failBanner.classList.add("hidden");
failBanner.classList.remove("flex");
}, 5000); // Hide after 5 seconds
}
}
)
.finally(function () {
// Hide loader
if (loader) loader.classList.add("hidden");
});
} else {
// Show terms banner
if (termsBanner) {
termsBanner.classList.remove("hidden");
termsBanner.classList.add("flex");
setTimeout(function () {
termsBanner.classList.add("hidden");
termsBanner.classList.remove("flex");
}, 5000); // Hide after 5 seconds
}
}
});
}

// Add event listeners to close buttons on banners
document.querySelectorAll(".banner-close").forEach(function (button) {
button.addEventListener("click", function () {
const banner = this.closest("div");
if (banner) {
banner.classList.add("hidden");
banner.classList.remove("flex");
}
});
});

document.querySelector("#navbar-toggler").addEventListener("click", () => {
const navLinks = document.querySelector("#navbar-default");
navLinks.classList.toggle("hidden");
Expand Down
Loading

0 comments on commit 2302285

Please sign in to comment.