</ iframe ></noscript> <!-- For Large Screens header _InnerLayout_FullWidth_B4_V2_TW--> <div class="bg-[#010413] h-[3.4rem] z-[110] w-full shadow-lg lg:!block hidden relative"> <nav class=" flex items-center justify-between custom-container"> <div class="mx-auto flex justify-between w-full"> <div class="flex items-center space-x-4 w-full my-1"> <main-search class="w-full" [showLogo]="true"></main-search> </div> <!-- LoggedUserHiddenVars Partial --> <input type="hidden" id="ImageCDN" data-value="https://cdn-images-gf-dev.azureedge.net" /> <input type="hidden" id="Username" data-value="" /> <input type="hidden" id="UserRoleInSelectedCompany" data-value="" /> <input type="hidden" id="ShowSetupCompanyLink4CompanyAdmin" data-value="" /> <input type="hidden" id="SelectedCompanyPackageId" data-value="-1" /> <input type="hidden" id="SelectedCompanyPackageName" data-value="" /> <input type="hidden" id="UpgradeLinkUrl" data-value="" /> <input type="hidden" id="UpgradeLinkTitle" data-value="" /> <input type="hidden" id="ChangeCompanyLink" data-value="" /> <input type="hidden" id="DebugMode" data-value="" /> <input type="hidden" id="ShowSwitchToPreviousUser" data-value="" /> <input type="hidden" id="PreviousUser" data-value="" /> <input type="hidden" id="CartItemCount" data-value="" /> <div class="hidden lg:flex items-center"> <!-- For Large Screens --> <div class="hidden lg:flex items-center"> <style> .Image-icon-xs { height: 40px; width: 40px; } .topdrpheadercolor { background: black; color: white; } .topdrpCard-top { border-top: 4px solid #00b9bd; } .viewcartdrp-menu { left: auto; right: 21%; min-width: 25%; } .cartitemscount { border-radius: 50%; color: #fff; display: inline-block; font-size: 12px; height: 18px; line-height: 16px; padding: 2px; position: relative; text-align: center; float: right; min-width: 20px; background: red; } </style> <ul class="flex space-x-2 my-1 "> <li> <a class="inline-flex items-center px-4 py-[10px] text-white border border-orange-500 bg-[#000]-600 rounded-[4px] text-sm font-semibold transition duration-200 whitespace-nowrap" href="/account/login"> Login </a> </li> <li> <a class="inline-flex items-center px-4 py-[10px] text-white border border-orange-500 bg-[#e56932] rounded-[4px] text-sm font-semibold transition duration-200 whitespace-nowrap" href="/Account/Register"> Get Started </a> </li> </ul> <div id="changeCompanyModal" class="normal-width-popup" style="display:none;"> <div class="modal-overlay"> <div class="modal-container lg:w-[70%] w-full"> <div class="modal-content mt-[15px]"> <div class="modal-header"> <h3 class="text-2xl font-semibold p-3 py-4">Change Company</h3> <button class="p-0 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none" id="CloseModelIcon" onclick="closeChangeCompany()"> <span id="popupCloseIcon" class="text-white text-2xl block outline-none focus:outline-none p-3 py-4 bg-[#c94d4d] rounded-tr-lg">×</span> </button> </div> <div> <app-change-company></app-change-company> </div> </div> </div> </div> </div> <script> function openChangeCompany(isRoleChange) { const changeCompanyModal = document.getElementById("changeCompanyModal"); if (changeCompanyModal) { changeCompanyModal.style.display = "block"; } // ✅ Must match exactly 'openChangeCompanyModal' window.dispatchEvent(new CustomEvent('openChangeCompanyModal', { detail: isRoleChange })); } function closeChangeCompany() { const changeCompanyModal = document.getElementById("changeCompanyModal"); if (changeCompanyModal) { changeCompanyModal.style.display = "none"; } } document.addEventListener("DOMContentLoaded", function () { // Get modal elements const changeCompanyModal = document.getElementById("changeCompanyModal"); const closeModelIcon = document.getElementById("CloseModelIcon"); // Get dropdown elements const cartButton = document.getElementById("cartButton"); const cartDropdown = document.getElementById("cartDropdown"); const topHeaderIcon = document.getElementById("topHeaderIcon"); const topHeaderdropdown = document.getElementById("topHeaderdropdown"); const closeDropdownIcon = document.getElementById("closeDropdown"); // Close modal when clicking the close icon if (closeModelIcon && changeCompanyModal) { closeModelIcon.addEventListener("click", function () { changeCompanyModal.style.display = "none"; }); } // Toggle cart dropdown visibility if (cartButton && cartDropdown) { cartButton.addEventListener("click", function (e) { e.stopPropagation(); const isVisible = cartDropdown.classList.contains("opacity-100"); cartDropdown.classList.toggle("opacity-100", !isVisible); cartDropdown.classList.toggle("visible", !isVisible); cartDropdown.classList.toggle("opacity-0", isVisible); cartDropdown.classList.toggle("invisible", isVisible); }); } // Toggle top header dropdown visibility if (topHeaderIcon && topHeaderdropdown) { topHeaderIcon.addEventListener("click", function (e) { e.stopPropagation(); const isVisible = topHeaderdropdown.classList.contains("opacity-100"); topHeaderdropdown.classList.toggle("opacity-100", !isVisible); topHeaderdropdown.classList.toggle("visible", !isVisible); topHeaderdropdown.classList.toggle("opacity-0", isVisible); topHeaderdropdown.classList.toggle("invisible", isVisible); }); } // Close dropdowns when clicking outside document.addEventListener("click", function () { if (cartDropdown) { cartDropdown.classList.add("opacity-0", "invisible"); cartDropdown.classList.remove("opacity-100", "visible"); } if (topHeaderdropdown) { topHeaderdropdown.classList.add("opacity-0", "invisible"); topHeaderdropdown.classList.remove("opacity-100", "visible"); } }); // Close cart dropdown when clicking the close icon if (closeDropdownIcon && cartDropdown) { closeDropdownIcon.addEventListener("click", function () { cartDropdown.classList.add("opacity-0", "invisible"); cartDropdown.classList.remove("opacity-100", "visible"); }); } }); </script> </div> </div> </div> </nav> </div> <!-- For Small Screens header _InnerLayout_FullWidth_B4_V2_TW--> <div class="lg:hidden flex bg-[#010413] fixed top-0 right-0 left-0 z-[555]"> <div class="w-full flex justify-between items-center relative py-1 px-2 gap-0.5"> <div class="w-full"> <div class="flex items-center space-x-4"> <main-search class="w-full" [showLogo]="true"></main-search> </div> </div> <div class=""> <!-- For Small Screens --> <div class="lg:hidden flex justify-end right-1"> <style> .Image-icon-xs { height: 40px; width: 40px; } .topdrpheadercolor { background: black; color: white; } .topdrpCard-top { border-top: 4px solid #00b9bd; } .viewcartdrp-menu { left: auto; } .drpMenuLeft { left: auto; right: 0; } .moreLinks .dropdown-toggle::after { display: none; } .moreLinks .dropdown-menu { min-width: 15rem; } .moreLinks small { font-size: 65%; } .cursor-pointer { position: relative; z-index: 10; } </style> <div class="flex gap-1 items-center"> <!-- Login Button --> <div class="my-auto"> <a href="/account/login" class="inline-flex items-center justify-center px-1.5 py-2 border bg-white border-orange-500 text-orange-500 rounded-md hover:bg-orange-500 hover:text-white transition-colors duration-200" title="Login"> <i class="fa-solid fa-right-to-bracket"></i> </a> </div> <!-- Register Button --> <div class="my-auto"> <a href="/account/register" class="inline-flex items-center justify-center px-1.5 py-2 border hover:bg-white border-[#6dd5c0] hover:!text-[#6dd5c0] rounded-md bg-[#6dd5c0] text-white transition-colors duration-200" title="Register"> <i class="fa-solid fa-user-plus"></i> </a> </div> </div> <div id="changeCompanyModalsmall" class="normal-width-popup hidden"> <div class="modal-overlay"> <div class="modal-container lg:w-[70%] w-full"> <div class="modal-content"> <div class="modal-header"> <h3 class="text-2xl font-semibold p-3 py-4">Change Company</h3> <button class="p-0 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none" id="CloseModelIconsmall" onclick="closeChangeCompanySmall()"> <span id="popupCloseIconsmall" class="text-white text-2xl block outline-none focus:outline-none p-3 py-4 bg-[#c94d4d] rounded-tr-lg">×</span> </button> </div> <div> <app-change-company></app-change-company> </div> </div> </div> </div> </div> <script> function openChangeCompanySmall(isRoleChange) { const changeCompanyModal = document.getElementById("changeCompanyModalsmall"); if (changeCompanyModal) { changeCompanyModal.style.display = "block"; } // ✅ Must match exactly 'openChangeCompanyModal' window.dispatchEvent(new CustomEvent('openChangeCompanyModal', { detail: isRoleChange })); } function closeChangeCompanySmall() { const changeCompanyModal = document.getElementById("changeCompanyModalsmall"); if (changeCompanyModal) { changeCompanyModal.style.display = "none"; } } document.addEventListener("DOMContentLoaded", function () { const toggleButton = document.getElementById("dropdownToggle"); const dropdownContent = document.getElementById("dropdownContent"); const dropdownButton = document.getElementById('dropdownheaderButton'); const dropdownMenu = document.getElementById('dropdownMenu'); const topHeaderIcon = document.getElementById('topHeaderIcon'); const closeModelIcon = document.getElementById('CloseModelIcon'); const topHeaderdropdown = document.getElementById('topHeaderdropdown'); // Toggle top header dropdown visibility if (dropdownButton && topHeaderdropdown) { dropdownButton.addEventListener('click', function (e) { e.stopPropagation(); const isVisible = topHeaderdropdown.classList.contains('opacity-100'); topHeaderdropdown.classList.toggle('opacity-100', !isVisible); topHeaderdropdown.classList.toggle('visible', !isVisible); topHeaderdropdown.classList.toggle('opacity-0', isVisible); topHeaderdropdown.classList.toggle('invisible', isVisible); }); } // Toggle dropdown visibility if (toggleButton && dropdownContent) { toggleButton.addEventListener("click", function (event) { event.stopPropagation(); dropdownContent.classList.toggle("hidden"); if (dropdownMenu) dropdownMenu.classList.add("hidden"); }); } // Toggle dropdown menu visibility if (dropdownButton && dropdownMenu) { dropdownButton.addEventListener("click", function (event) { event.stopPropagation(); dropdownMenu.classList.toggle("hidden"); }); } // Close all dropdowns when clicking outside document.addEventListener("click", function () { if (dropdownContent) dropdownContent.classList.add("hidden"); if (dropdownMenu) dropdownMenu.classList.add("hidden"); if (topHeaderdropdown) { topHeaderdropdown.classList.add('opacity-0', 'invisible'); topHeaderdropdown.classList.remove('opacity-100', 'visible'); } }); // Close dropdowns when clicking inside if (dropdownContent) { dropdownContent.addEventListener("click", function () { dropdownContent.classList.add("hidden"); }); } if (dropdownMenu) { dropdownMenu.addEventListener("click", function () { dropdownMenu.classList.add("hidden"); }); } }); </script> <!-- Show on small screens --> </div> </div> </div> </div> <!-- Start-Global messaging --> <div id="global-messaging" class="container" > <div id="valSummary" class="alert alert-danger error hide" style="color:Green;display:none;"> </div> <div id="lblSuccess" class="alert alert-success confirmation hide"></div> <div id="lblInformation" class="alert alert-info notice hide"></div> <div id="lblAlert" class="alert alert-warning alerts hide"></div> </div> <!-- End- Global messaging --> <style> /* Custom animations for progress bars */ .progress-line { background-color: #00b9bd; animation: bg-move 2s linear infinite; position: relative; transition: width 2s ease-in-out; } @keyframes bg-move { from { background-position: 50% 0; } to { background-position: -50% 0; } } </style> <div class="bg-white pb-4"> <div class="w-full py-4 bg-gray-100"> <nav aria-label="breadcrumb" class="custom-container"> <ol class="flex text-gray-600 text-sm mb-0 list-none"> <li><a href="/" class="hover:text-blue-600 flex items-center gap-1 transition-colors"><i class="fa fa-home"></i> Home</a></li> <li class="mx-2">/</li> <li class="text-gray-400" aria-current="page">About Us</li> </ol> </nav> </div> <div class="custom-container"> <div class="flex flex-wrap pt-12 justify-center"> <div class="w-full text-center"> <h1 class="text-4xl font-bold text-gray-900"> <span>About Us</span> </h1> <p class="text-gray-500 mt-2 text-lg"> What we offer to the community? </p> </div> </div> <div class="flex flex-wrap pt-12 justify-center"> <div class="w-full text-center"> <img src="https://cdn-images-gf-dev.azureedge.net/aboutus_header.png" class="mx-auto max-w-full h-auto" /> </div> </div> </div> </div> <div class="custom-container"> <!-- ABOUT --> <div class="py-24"> <div class="flex flex-wrap pt-12"> <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0"> <h4 class="text-2xl font-medium mb-4 text-gray-800"> Our History </h4> <p class="text-gray-600 leading-relaxed text-base"> Guruface is your complete online platform for learning, teaching, and training. Our mission is to provide a state of the art online training platform for students, freelance teachers, corporate trainers, and small to mid-size companies worldwide. We have a foundation of highly talented professional trainers who specialize in a variety of subject areas. </p> </div> <div class="w-full md:w-1/2 px-4"> <div> <h4 class="text-2xl font-medium mb-4 text-gray-800">Training Areas</h4> <p class="flex flex-wrap gap-2"> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">goihs</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Latest Category 1</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">new category</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">SAFe Lean Agile</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">shsa</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Risk Management</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">sample1</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">sample</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Book Keeping</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Finance</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Personal Development</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Language Learning</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">SAFe Lean Leadership</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Budgeting</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Trignometry</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Sample 1</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Science</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Data Science1</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Mathematics</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Information Technology</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Project Management</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Geometry</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Statistics</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Calculus</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Computer Science And Engineering</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Differential Equations</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Computer Skills and Office Productivity</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Programming Languages</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Software Testing and QA</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Data Science</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Web Design</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">QA and Process Improvement</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Accounting</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Business</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Digital Marketing</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Automobile Engineering</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Teacher Training</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Healthcare and Fitness</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Fine Arts and Crafts</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Culinary Arts</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Music</a> <a class="inline-block px-3 py-1 border border-gray-300 rounded hover:border-gray-400 text-[#624f4f] text-[13px] tracking-wide leading-tight font-medium bg-white hover:bg-gray-50 transition-colors no-underline">Other</a> </p> </div> </div> </div> </div> </div> <div class="w-full relative" style="background-color: #284644;"> <div class="custom-container py-20"> <div class="flex flex-wrap items-center"> <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0 relative z-10"> <div class="bg-white rounded-lg shadow-xl p-8 max-w-lg mx-auto md:mx-0"> <div class="flex items-center mb-6"> <img src="/images/No-Image.gif" class="w-[70px] h-[70px] rounded-full object-cover border-2 border-gray-100" alt="Profile" /> </div> <p class="text-gray-600 text-justify mb-6 leading-relaxed"> Staying ahead of the future of work helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collation of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop-in-house. </p> <div> <h6 class="font-medium text-lg text-gray-900"> Ben Xavier<br /> <small class="text-gray-500 font-normal">CEO | Guruface</small> </h6> </div> </div> </div> <div class="w-full md:w-1/2 px-4 text-white pl-4 md:pl-12"> <h3 class="text-3xl font-medium mb-10">Our Features</h3> <div class="mb-8 flex"> <div class="mr-6 shrink-0"> <h5 class="text-2xl font-medium text-[#6dd5c0]">01</h5> </div> <div> <h5 class="text-xl font-medium mb-2">24/7 Training and Support</h5> <p class="text-gray-300 leading-relaxed">Our world-class customer support team provide all around the clock assistance to all your queries.</p> </div> </div> <div class="mb-8 flex"> <div class="mr-6 shrink-0"> <h5 class="text-2xl font-medium text-[#6dd5c0]">02</h5> </div> <div> <h5 class="text-xl font-medium mb-2">Flexible Business Packages</h5> <p class="text-gray-300 leading-relaxed">Custom made business solutions that suits budget and training requirements of corporate companies.</p> </div> </div> <div class="mb-8 flex"> <div class="mr-6 shrink-0"> <h5 class="text-2xl font-medium text-[#6dd5c0]">03</h5> </div> <div> <h5 class="text-xl font-medium mb-2">14 days free trial</h5> <p class="text-gray-300 leading-relaxed">You can try any of our solutions for 14 days without any limitations!</p> </div> </div> </div> </div> </div> </div> <div class="custom-container py-24"> <div class="flex flex-wrap justify-between items-center mb-12"> <div class="w-full md:w-5/12 mb-4 md:mb-0"> <h2 class="text-3xl font-medium text-gray-900">Our global reach</h2> </div> <div class="w-full md:w-6/12"> <p class="text-gray-500 text-lg leading-relaxed"> Guruface is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. </p> </div> </div> <div class="flex flex-wrap -mx-4"> <div class="w-full lg:w-3/4 px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-gray-50 rounded-xl p-8 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer border border-transparent hover:border-gray-100"> <h3 class="font-medium text-3xl text-gray-800 mb-1">2M</h3> <p class="text-gray-500 font-medium">Learners</p> </div> <div class="bg-gray-50 rounded-xl p-8 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer border border-transparent hover:border-gray-100"> <h3 class="font-medium text-3xl text-gray-800 mb-1">6000+</h3> <p class="text-gray-500 font-medium">Instructors</p> </div> <div class="bg-gray-50 rounded-xl p-8 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer border border-transparent hover:border-gray-100"> <h3 class="font-medium text-3xl text-gray-800 mb-1">1000+</h3> <p class="text-gray-500 font-medium">Courses</p> </div> <div class="bg-gray-50 rounded-xl p-8 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer border border-transparent hover:border-gray-100"> <h3 class="font-medium text-3xl text-gray-800 mb-1">65+</h3> <p class="text-gray-500 font-medium">Languages</p> </div> <div class="bg-gray-50 rounded-xl p-8 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer border border-transparent hover:border-gray-100"> <h3 class="font-medium text-3xl text-gray-800 mb-1">115M</h3> <p class="text-gray-500 font-medium">Video</p> </div> <div class="bg-gray-50 rounded-xl p-8 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer border border-transparent hover:border-gray-100"> <h3 class="font-medium text-3xl text-gray-800 mb-1">200+</h3> <p class="text-gray-500 font-medium">Categories</p> </div> </div> </div> <div class="w-full lg:w-1/4 px-4 mt-6 lg:mt-0"> <div class="bg-[#f86708] rounded-xl p-6 text-center text-white h-full flex flex-col justify-center items-center hover:shadow-xl transition-shadow duration-300 cursor-pointer min-h-[250px]"> <h3 class="font-medium text-4xl mb-2">1000+</h3> <p class="text-lg opacity-90">Enterprise customers</p> </div> </div> </div> </div> <div class="relative bg-[#6dd5c0] mt-12 overflow-hidden"> <div class="custom-container py-20 relative z-10"> <div class="flex flex-wrap items-center"> <div class="w-full lg:w-7/12 mb-8 lg:mb-0"> <img src="https://cdn-images-gf-dev.azureedge.net/try_about_us.jpg" alt="About Us" class="rounded-xl shadow-2xl w-full object-cover h-[450px]"> </div> <div class="w-full lg:w-5/12 lg:absolute right-0 top-1/2 lg:-translate-y-1/2 lg:pr-12 lg:pl-0 pl-0 flex justify-end"> <div class="bg-white rounded-xl shadow-2xl p-8 w-full max-w-[400px] mx-auto lg:mr-0"> <div class="text-center"> <h2 class="text-2xl font-medium text-gray-900 mb-2">Wanna try us out?</h2> <p class="text-gray-500 mb-8 font-medium">Improving Lives Through Learning</p> <div class="flex justify-between gap-4"> <a href="/find-courses" class="flex-1 flex flex-col items-center group text-[#f86708] hover:text-[#d55606] transition-colors no-underline"> <i class="fa fa-check-circle text-3xl mb-3 group-hover:scale-110 transition-transform"></i> <span class="font-medium text-sm">View Courses</span> </a> <div class="w-px bg-gray-200"></div> <a href="/" class="flex-1 flex flex-col items-center group text-[#f86708] hover:text-[#d55606] transition-colors no-underline"> <i class="fa fa-chevron-circle-right text-3xl mb-3 group-hover:scale-110 transition-transform"></i> <span class="font-medium text-sm">View Home Page</span> </a> </div> </div> </div> </div> </div> </div> </div> <div class="hidden"> <!-- Unused Team Section --> </div> <div class="custom-container py-24"> <div class="lg:!flex gap-12"> <div class="w-full lg:!w-1/2"> <h4 class="text-2xl font-medium mb-8 text-gray-800">Why Guruface?</h4> <div class="border border-gray-200 rounded-lg overflow-hidden mb-2"> <div class="bg-gray-50"> <button class="w-full text-left px-5 py-4 font-semibold text-gray-700 flex justify-between items-center" type="button" onclick="toggleAccordion('collapse0', this)"> <span>24/7 training and support</span> <span class="text-xl text-gray-400 accordion-icon">+</span> </button> </div> <div id="collapse0" class="hidden"> <div class="p-5 bg-white border-t border-gray-200 text-gray-600"> Our world-class customer support team provide all around the clock assistance to all your queries. </div> </div> </div> <div class="border border-gray-200 rounded-lg overflow-hidden mb-2"> <div class="bg-gray-50"> <button class="w-full text-left px-5 py-4 font-semibold text-gray-700 flex justify-between items-center" type="button" onclick="toggleAccordion('collapse1', this)"> <span>Get trained direct from Gurus online.</span> <span class="text-xl text-gray-400 accordion-icon">+</span> </button> </div> <div id="collapse1" class="hidden"> <div class="p-5 bg-white border-t border-gray-200 text-gray-600"> Our gurus will train you directly through online classrooms. </div> </div> </div> <div class="border border-gray-200 rounded-lg overflow-hidden mb-2"> <div class="bg-gray-50"> <button class="w-full text-left px-5 py-4 font-semibold text-gray-700 flex justify-between items-center" type="button" onclick="toggleAccordion('collapse2', this)"> <span>Unique learning platform for corporate employees</span> <span class="text-xl text-gray-400 accordion-icon">+</span> </button> </div> <div id="collapse2" class="hidden"> <div class="p-5 bg-white border-t border-gray-200 text-gray-600"> Guruface helps employees upgrade their skills. </div> </div> </div> <div class="border border-gray-200 rounded-lg overflow-hidden mb-2"> <div class="bg-gray-50"> <button class="w-full text-left px-5 py-4 font-semibold text-gray-700 flex justify-between items-center" type="button" onclick="toggleAccordion('collapse3', this)"> <span>Client management system for corporate trainers</span> <span class="text-xl text-gray-400 accordion-icon">+</span> </button> </div> <div id="collapse3" class="hidden"> <div class="p-5 bg-white border-t border-gray-200 text-gray-600"> Manage client profiles easily. </div> </div> </div> <div class="border border-gray-200 rounded-lg overflow-hidden mb-2"> <div class="bg-gray-50"> <button class="w-full text-left px-5 py-4 font-semibold text-gray-700 flex justify-between items-center" type="button" onclick="toggleAccordion('collapse4', this)"> <span>High quality training by leading industry trainers.</span> <span class="text-xl text-gray-400 accordion-icon">+</span> </button> </div> <div id="collapse4" class="hidden"> <div class="p-5 bg-white border-t border-gray-200 text-gray-600"> Industry experts train you. </div> </div> </div> <div class="border border-gray-200 rounded-lg overflow-hidden mb-2"> <div class="bg-gray-50"> <button class="w-full text-left px-5 py-4 font-semibold text-gray-700 flex justify-between items-center" type="button" onclick="toggleAccordion('collapse5', this)"> <span>Excellent student performance tracking system.</span> <span class="text-xl text-gray-400 accordion-icon">+</span> </button> </div> <div id="collapse5" class="hidden"> <div class="p-5 bg-white border-t border-gray-200 text-gray-600"> Track student performance. </div> </div> </div> <div class="border border-gray-200 rounded-lg overflow-hidden mb-2"> <div class="bg-gray-50"> <button class="w-full text-left px-5 py-4 font-semibold text-gray-700 flex justify-between items-center" type="button" onclick="toggleAccordion('collapse6', this)"> <span>Own e-learning website for institutions and universities</span> <span class="text-xl text-gray-400 accordion-icon">+</span> </button> </div> <div id="collapse6" class="hidden"> <div class="p-5 bg-white border-t border-gray-200 text-gray-600"> Institutions can own e-learning websites. </div> </div> </div> <div class="border border-gray-200 rounded-lg overflow-hidden mb-2"> <div class="bg-gray-50"> <button class="w-full text-left px-5 py-4 font-semibold text-gray-700 flex justify-between items-center" type="button" onclick="toggleAccordion('collapse7', this)"> <span>Option to rate and review trainers.</span> <span class="text-xl text-gray-400 accordion-icon">+</span> </button> </div> <div id="collapse7" class="hidden"> <div class="p-5 bg-white border-t border-gray-200 text-gray-600"> Students can rate and review trainers. </div> </div> </div> </div> <div class="w-full lg:!w-1/2"> <h4 class="text-2xl font-bold mb-8 text-gray-800">Guruface Advantages</h4> <div class="space-y-6"> <div> <div class="text-gray-700 mb-2 font-medium">Learn anytime, anywhere.</div> <div class="w-full bg-gray-100 rounded-full h-2"> <div class="bg-[#00b9bd] h-3 rounded-full progress-line" style="width: 95%"></div> </div> </div> <div> <div class="text-gray-700 mb-2 font-medium">Find suitable Gurus to learn from.</div> <div class="w-full bg-gray-100 rounded-full h-2"> <div class="bg-[#00b9bd] h-3 rounded-full progress-line" style="width: 90%"></div> </div> </div> <div> <div class="text-gray-700 mb-2 font-medium">Supports both self-paced and trainer-led courses</div> <div class="w-full bg-gray-100 rounded-full h-2"> <div class="bg-[#00b9bd] h-3 rounded-full progress-line" style="width: 85%"></div> </div> </div> <div> <div class="text-gray-700 mb-2 font-medium">Join to upcoming training events or request your own.</div> <div class="w-full bg-gray-100 rounded-full h-2"> <div class="bg-[#00b9bd] h-3 rounded-full progress-line" style="width: 80%"></div> </div> </div> <div> <div class="text-gray-700 mb-2 font-medium">Customizable e-learning platform for small-to-mid size companies.</div> <div class="w-full bg-gray-100 rounded-full h-2"> <div class="bg-[#00b9bd] h-3 rounded-full progress-line" style="width: 75%"></div> </div> </div> <div> <div class="text-gray-700 mb-2 font-medium">Network with your connections and learn.</div> <div class="w-full bg-gray-100 rounded-full h-2"> <div class="bg-[#00b9bd] h-3 rounded-full progress-line" style="width: 80%"></div> </div> </div> <div> <div class="text-gray-700 mb-2 font-medium">Import your social medial contacts.</div> <div class="w-full bg-gray-100 rounded-full h-2"> <div class="bg-[#00b9bd] h-3 rounded-full progress-line" style="width: 85%"></div> </div> </div> <div> <div class="text-gray-700 mb-2 font-medium">Social media for learning.</div> <div class="w-full bg-gray-100 rounded-full h-2"> <div class="bg-[#00b9bd] h-3 rounded-full progress-line" style="width: 90%"></div> </div> </div> <div> <div class="text-gray-700 mb-2 font-medium">Strong collaboration platform.</div> <div class="w-full bg-gray-100 rounded-full h-2"> <div class="bg-[#00b9bd] h-3 rounded-full progress-line" style="width: 95%"></div> </div> </div> </div> </div> <script> function toggleAccordion(targetId, btn) { // Toggle content visibility const content = document.getElementById(targetId); content.classList.toggle('hidden'); // Toggle icon const icon = btn.querySelector('.accordion-icon'); if (content.classList.contains('hidden')) { icon.textContent = '+'; } else { icon.textContent = '-'; } } </script> </div> </div> <app-root></app-root> <link rel="stylesheet" href="/css/user-context-tw-app.css" /> <script src="/js/user-context-tw-app.js"></script> <div class="bg-[#152f4f] py-4 text-white"> <div class="custom-container "> <div class="flex flex-col items-center text-center"> <!-- Copyright --> <p> © Copyright 2026 Guruface Inc. Designed by <a href="http://www.guruface.com" target="_blank">Guruface Inc.</a> </p> <!-- Icons under the text --> <div class="mt-3 space-x-4 text-xl"> <a class="fab fa-twitter text-white hover:text-gray-400"></a> <a class="fab fa-facebook-f text-white hover:text-gray-400"></a> <a class="fab fa-linkedin-in text-white hover:text-gray-400"></a> <!-- Uncomment if needed --> <!-- <a class="fa fa-google-plus text-gray-600 hover:text-gray-400" href=""></a> <a class="fa fa-dribbble text-gray-600 hover:text-gray-400" href="#"></a> <a class="fa fa-skype text-gray-600 hover:text-gray-400" href="#"></a> <a class="fa fa-behance text-gray-600 hover:text-gray-400" href="#"></a> <a class="fa fa-stumbleupon text-gray-600 hover:text-gray-400" href="#"></a> <a class="fa fa-rss text-gray-600 hover:text-gray-400" href="#"></a> --> </div> <!-- App Version Display Section --> </div> </div> </div> <script src="/js/tailwind/tailwind.js"></script> </body> </html>