{"id":750,"date":"2026-03-09T06:35:14","date_gmt":"2026-03-09T06:35:14","guid":{"rendered":"https:\/\/hithotprodcut.com\/?page_id=750"},"modified":"2026-03-10T09:18:24","modified_gmt":"2026-03-10T09:18:24","slug":"job","status":"publish","type":"page","link":"https:\/\/hithotprodcut.com\/index.php\/job\/","title":{"rendered":"job"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n rekroot \u00b7 login popup on visit<\/title>\r\n <!-- Google Fonts + Font Awesome 6 -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', sans-serif;\r\n }\r\n\r\n body {\r\n background: #f7f9fc;\r\n color: #1e293b;\r\n overflow-x: hidden;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* ---------- NAVBAR (glassmorphism + smooth) ---------- *\/\r\n header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 18px 70px;\r\n background: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.02);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n .logo {\r\n font-size: 26px;\r\n font-weight: 700;\r\n background: linear-gradient(145deg, #5b5bf0, #8a6cff);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n nav {\r\n display: flex;\r\n gap: 28px;\r\n }\r\n\r\n nav a {\r\n text-decoration: none;\r\n color: #2d3a5e;\r\n font-weight: 500;\r\n transition: 0.2s;\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n\r\n nav a:after {\r\n content: '';\r\n position: absolute;\r\n bottom: -5px;\r\n left: 0;\r\n width: 0%;\r\n height: 2.5px;\r\n background: #5b5bf0;\r\n border-radius: 4px;\r\n transition: 0.25s;\r\n }\r\n\r\n nav a:hover {\r\n color: #5b5bf0;\r\n }\r\n nav a:hover:after {\r\n width: 100%;\r\n }\r\n\r\n .post-btn {\r\n background: #5b5bf0;\r\n color: white;\r\n padding: 12px 28px;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n box-shadow: 0 10px 18px -8px #5b5bf0;\r\n transition: all 0.25s ease;\r\n cursor: default;\r\n border: 1px solid rgba(255,255,255,0.2);\r\n }\r\n .post-btn:hover {\r\n transform: scale(1.02) translateY(-3px);\r\n box-shadow: 0 18px 25px -10px #5b5bf0;\r\n background: #4a4ad0;\r\n }\r\n\r\n \/* ---------- HERO section (two\u2011column advanced) ---------- *\/\r\n .hero {\r\n display: grid;\r\n grid-template-columns: 1.2fr 0.9fr;\r\n align-items: center;\r\n padding: 60px 70px 50px;\r\n gap: 40px;\r\n position: relative;\r\n }\r\n\r\n \/* animated purple blob (background) *\/\r\n .shape-blob {\r\n position: absolute;\r\n left: -100px;\r\n top: -50px;\r\n width: 550px;\r\n height: 550px;\r\n background: radial-gradient(circle at 30% 30%, #9a6bff, #5b5bf0);\r\n border-radius: 42% 58% 70% 30% \/ 40% 50% 50% 60%;\r\n filter: blur(65px);\r\n opacity: 0.3;\r\n z-index: -1;\r\n animation: morph 14s infinite alternate ease-in-out;\r\n }\r\n\r\n @keyframes morph {\r\n 0% { border-radius: 42% 58% 70% 30% \/ 40% 50% 50% 60%; transform: rotate(0deg) scale(1); }\r\n 50% { border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%; transform: rotate(5deg) scale(1.05); }\r\n 100% { border-radius: 30% 70% 50% 50% \/ 30% 50% 50% 70%; transform: rotate(-5deg) scale(1); }\r\n }\r\n\r\n \/* left side *\/\r\n .hero-text h1 {\r\n font-size: 52px;\r\n font-weight: 700;\r\n line-height: 1.2;\r\n background: linear-gradient(145deg, #1e293b, #2d3a5e);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .hero-text span {\r\n background: linear-gradient(145deg, #5b5bf0, #a46bff);\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n .hero-text p {\r\n margin-top: 16px;\r\n color: #5f6c86;\r\n font-size: 1.2rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .hero-text p i {\r\n color: #5b5bf0;\r\n background: #e6e9ff;\r\n padding: 6px 10px;\r\n border-radius: 40px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* advanced search bar with icons *\/\r\n .search-bar {\r\n display: flex;\r\n margin-top: 35px;\r\n background: white;\r\n border-radius: 60px;\r\n box-shadow: 0 20px 35px -8px rgba(91, 91, 240, 0.2);\r\n padding: 5px 5px 5px 20px;\r\n align-items: center;\r\n transition: box-shadow 0.3s;\r\n }\r\n .search-bar:focus-within {\r\n box-shadow: 0 25px 40px -8px #5b5bf0;\r\n }\r\n\r\n .search-item {\r\n display: flex;\r\n align-items: center;\r\n flex: 1;\r\n padding: 0 10px;\r\n border-right: 1px solid #e0e5f0;\r\n }\r\n .search-item:last-of-type {\r\n border-right: none;\r\n }\r\n .search-item i {\r\n color: #8f9bb3;\r\n margin-right: 12px;\r\n font-size: 1.1rem;\r\n }\r\n .search-item input {\r\n border: none;\r\n padding: 16px 0;\r\n font-size: 1rem;\r\n width: 100%;\r\n outline: none;\r\n background: transparent;\r\n }\r\n .search-item input::placeholder {\r\n color: #b8c1d4;\r\n font-weight: 300;\r\n }\r\n\r\n .search-btn {\r\n background: #5b5bf0;\r\n border: none;\r\n color: white;\r\n font-weight: 600;\r\n padding: 14px 32px;\r\n border-radius: 60px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: 0.2s;\r\n white-space: nowrap;\r\n margin-left: 5px;\r\n font-size: 1rem;\r\n }\r\n .search-btn:hover {\r\n background: #4242d0;\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* right side \u2014 stats card (with Google login) *\/\r\n .stats-card {\r\n background: rgba(255,255,255,0.8);\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n border-radius: 35px;\r\n padding: 35px 28px;\r\n box-shadow: 0 35px 60px -15px rgba(91, 91, 240, 0.3);\r\n border: 1px solid rgba(255,255,255,0.5);\r\n transition: transform 0.4s;\r\n }\r\n .stats-card:hover {\r\n transform: translateY(-8px);\r\n }\r\n\r\n .stats-card h3 {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin-bottom: 20px;\r\n }\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n margin: 25px 0;\r\n }\r\n .stat-item {\r\n background: white;\r\n border-radius: 24px;\r\n padding: 18px 10px;\r\n text-align: center;\r\n box-shadow: 0 6px 16px rgba(0,0,0,0.02);\r\n }\r\n .stat-item .number {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n color: #5b5bf0;\r\n line-height: 1.2;\r\n }\r\n .stat-item .label {\r\n color: #5f6c86;\r\n font-size: 0.9rem;\r\n }\r\n .resume-btn {\r\n background: white;\r\n border: 1.5px solid #e0e5f0;\r\n padding: 16px;\r\n border-radius: 50px;\r\n width: 100%;\r\n font-weight: 600;\r\n color: #2d3a5e;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n transition: 0.2s;\r\n margin-top: 15px;\r\n cursor: default;\r\n }\r\n .resume-btn i {\r\n color: #5b5bf0;\r\n font-size: 1.2rem;\r\n }\r\n .resume-btn:hover {\r\n background: #f0f2ff;\r\n border-color: #5b5bf0;\r\n }\r\n\r\n \/* Google login button (styled) *\/\r\n .google-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n background: white;\r\n border: 1px solid #dadce0;\r\n border-radius: 50px;\r\n padding: 14px 16px;\r\n width: 100%;\r\n font-weight: 500;\r\n color: #3c4043;\r\n margin: 20px 0 12px;\r\n transition: all 0.2s ease;\r\n box-shadow: 0 2px 6px rgba(0,0,0,0.02);\r\n cursor: default;\r\n }\r\n .google-btn i {\r\n font-size: 1.4rem;\r\n color: #4285F4;\r\n }\r\n .google-btn:hover {\r\n background: #f8f9ff;\r\n border-color: #5b5bf0;\r\n box-shadow: 0 8px 16px -8px #4285F4;\r\n transform: scale(1.01);\r\n }\r\n\r\n \/* hero image (floating) *\/\r\n .hero-image {\r\n margin-top: 20px;\r\n border-radius: 30px;\r\n overflow: hidden;\r\n box-shadow: 0 30px 40px -20px rgba(0,0,0,0.3);\r\n animation: float 5s infinite alternate;\r\n }\r\n .hero-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n transition: transform 6s;\r\n }\r\n .hero-image img:hover {\r\n transform: scale(1.02);\r\n }\r\n\r\n @keyframes float {\r\n 0% { transform: translateY(0); }\r\n 100% { transform: translateY(-10px); }\r\n }\r\n\r\n \/* ---------- FEATURED JOBS section ---------- *\/\r\n .jobs-section {\r\n padding: 70px;\r\n background: white;\r\n }\r\n\r\n .section-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n margin-bottom: 40px;\r\n }\r\n .section-header h2 {\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n background: linear-gradient(145deg, #1e293b, #3b4a6b);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .filter-tabs {\r\n display: flex;\r\n gap: 12px;\r\n }\r\n .filter-tab {\r\n background: #f0f3fa;\r\n padding: 10px 24px;\r\n border-radius: 40px;\r\n font-weight: 500;\r\n color: #2d3a5e;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n border: 1px solid transparent;\r\n }\r\n .filter-tab.active {\r\n background: #5b5bf0;\r\n color: white;\r\n box-shadow: 0 12px 18px -10px #5b5bf0;\r\n }\r\n .filter-tab:hover {\r\n background: #e0e6ff;\r\n border-color: #5b5bf0;\r\n }\r\n\r\n .job-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n gap: 30px;\r\n margin-top: 20px;\r\n }\r\n\r\n .job-card {\r\n background: #fbfcff;\r\n border-radius: 30px;\r\n padding: 28px;\r\n box-shadow: 0 15px 30px -12px rgba(0,0,0,0.05);\r\n border: 1px solid #edf2f9;\r\n transition: 0.25s;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n .job-card:hover {\r\n transform: scale(1.01) translateY(-6px);\r\n box-shadow: 0 30px 40px -15px #b1b9f0;\r\n border-color: #c7d0ff;\r\n }\r\n\r\n .job-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n .job-icon {\r\n width: 55px;\r\n height: 55px;\r\n background: #e9ecff;\r\n border-radius: 18px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #5b5bf0;\r\n font-size: 1.8rem;\r\n }\r\n .job-title h4 {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n }\r\n .job-title span {\r\n color: #6b7a99;\r\n font-size: 0.9rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n margin-top: 4px;\r\n }\r\n .job-tags {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n margin: 6px 0;\r\n }\r\n .tag {\r\n background: #eff2fc;\r\n padding: 6px 18px;\r\n border-radius: 50px;\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n color: #2d3a5e;\r\n }\r\n .job-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-top: 10px;\r\n }\r\n .salary {\r\n font-weight: 700;\r\n color: #1e293b;\r\n font-size: 1.15rem;\r\n }\r\n .apply-btn {\r\n background: transparent;\r\n border: 1.5px solid #dbe1f0;\r\n padding: 8px 22px;\r\n border-radius: 40px;\r\n font-weight: 600;\r\n color: #5b5bf0;\r\n transition: 0.2s;\r\n cursor: default;\r\n }\r\n .apply-btn:hover {\r\n background: #5b5bf0;\r\n color: white;\r\n border-color: #5b5bf0;\r\n }\r\n\r\n \/* companies logo grid *\/\r\n .companies {\r\n padding: 60px 70px 70px;\r\n background: #f7f9fc;\r\n }\r\n\r\n .companies h2 {\r\n text-align: center;\r\n font-size: 2rem;\r\n font-weight: 600;\r\n color: #1e293b;\r\n }\r\n\r\n .company-grid {\r\n display: grid;\r\n grid-template-columns: repeat(6, 1fr);\r\n gap: 25px;\r\n margin-top: 45px;\r\n }\r\n\r\n .company-card {\r\n background: white;\r\n padding: 30px 10px;\r\n border-radius: 30px;\r\n text-align: center;\r\n box-shadow: 0 12px 28px -10px rgba(0,0,0,0.04);\r\n transition: all 0.25s;\r\n font-weight: 600;\r\n font-size: 1.2rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n color: #314067;\r\n border: 1px solid rgba(255,255,255,0.6);\r\n }\r\n .company-card i {\r\n font-size: 2.8rem;\r\n color: #5b5bf0;\r\n opacity: 0.8;\r\n }\r\n .company-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 30px 40px -12px #a0aaf0;\r\n background: #ffffff;\r\n border-color: #c1c9ff;\r\n }\r\n\r\n \/* footer *\/\r\n footer {\r\n background: #131b2e;\r\n color: #b0bedb;\r\n padding: 40px 70px;\r\n display: flex;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n }\r\n .footer-links {\r\n display: flex;\r\n gap: 40px;\r\n }\r\n .footer-links a {\r\n color: #cbd5f0;\r\n text-decoration: none;\r\n transition: 0.2s;\r\n }\r\n .footer-links a:hover {\r\n color: white;\r\n }\r\n\r\n \/* ---------- LOGIN MODAL (popup) ---------- *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background: rgba(0,0,0,0.3);\r\n backdrop-filter: blur(6px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: opacity 0.25s ease, visibility 0.25s;\r\n }\r\n .modal-overlay.active {\r\n visibility: visible;\r\n opacity: 1;\r\n }\r\n .modal-card {\r\n background: white;\r\n max-width: 420px;\r\n width: 90%;\r\n border-radius: 40px;\r\n padding: 40px 35px;\r\n box-shadow: 0 40px 70px -20px #1e1e5a;\r\n transform: scale(0.95);\r\n transition: transform 0.3s ease;\r\n }\r\n .modal-overlay.active .modal-card {\r\n transform: scale(1);\r\n }\r\n .modal-card h2 {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n margin-bottom: 25px;\r\n color: #1e293b;\r\n }\r\n .modal-card .input-group {\r\n margin-bottom: 18px;\r\n }\r\n .modal-card .input-group label {\r\n font-weight: 500;\r\n color: #3a4a6b;\r\n display: block;\r\n margin-bottom: 6px;\r\n font-size: 0.9rem;\r\n }\r\n .modal-card .input-group input {\r\n width: 100%;\r\n padding: 16px 22px;\r\n border: 1.5px solid #e2e8f0;\r\n border-radius: 50px;\r\n font-size: 1rem;\r\n outline: none;\r\n transition: 0.2s;\r\n }\r\n .modal-card .input-group input:focus {\r\n border-color: #5b5bf0;\r\n box-shadow: 0 0 0 3px rgba(91,91,240,0.2);\r\n }\r\n .modal-card .login-btn {\r\n background: #5b5bf0;\r\n color: white;\r\n border: none;\r\n padding: 16px;\r\n width: 100%;\r\n border-radius: 50px;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n margin: 12px 0 18px;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .modal-card .login-btn:hover {\r\n background: #4242d0;\r\n transform: scale(1.01);\r\n }\r\n .modal-card .google-btn-modal {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n background: white;\r\n border: 1.5px solid #dadce0;\r\n border-radius: 50px;\r\n padding: 14px;\r\n width: 100%;\r\n font-weight: 600;\r\n color: #3c4043;\r\n margin: 8px 0 10px;\r\n transition: 0.2s;\r\n cursor: default;\r\n }\r\n .modal-card .google-btn-modal i {\r\n color: #4285F4;\r\n font-size: 1.4rem;\r\n }\r\n .modal-card .google-btn-modal:hover {\r\n background: #f8f9ff;\r\n border-color: #5b5bf0;\r\n }\r\n .close-modal {\r\n display: flex;\r\n justify-content: flex-end;\r\n margin-bottom: 10px;\r\n }\r\n .close-modal i {\r\n font-size: 1.8rem;\r\n color: #8f9bb3;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .close-modal i:hover {\r\n color: #5b5bf0;\r\n }\r\n .modal-footer-text {\r\n text-align: center;\r\n margin-top: 20px;\r\n color: #617394;\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* responsiveness *\/\r\n @media (max-width: 1100px) {\r\n header, .hero, .jobs-section, .companies, footer { padding-left: 40px; padding-right: 40px; }\r\n .hero { grid-template-columns: 1fr; }\r\n .stats-card { max-width: 500px; margin: 0 auto; }\r\n .company-grid { grid-template-columns: repeat(3,1fr); }\r\n }\r\n @media (max-width: 700px) {\r\n .search-bar { flex-direction: column; border-radius: 40px; padding: 10px; }\r\n .search-item { width: 100%; border-right: none; border-bottom: 1px solid #eee; }\r\n .filter-tabs { flex-wrap: wrap; }\r\n .company-grid { grid-template-columns: repeat(2,1fr); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header>\r\n <div class=\"logo\">rekroot<\/div>\r\n <nav>\r\n <a href=\"#\">Home<\/a>\r\n <a href=\"#\">Jobs<\/a>\r\n <a href=\"#\">Blog<\/a>\r\n <a href=\"#\">Pages<\/a>\r\n <a href=\"#\" id=\"loginTrigger\">Log In<\/a> <!-- manual trigger still works -->\r\n <\/nav>\r\n <div class=\"post-btn\"> <i class=\"fas fa-pen\" style=\"margin-right: 8px;\"><\/i>Post a Job<\/div>\r\n<\/header>\r\n\r\n<!-- HERO section (unchanged, still has Google button) -->\r\n<section class=\"hero\">\r\n <div class=\"shape-blob\"><\/div>\r\n <div class=\"hero-text\">\r\n <h1>Get your new <span>dream job<\/span> today<\/h1>\r\n <p><i class=\"fas fa-briefcase\"><\/i> 25,478 offers worldwide \u00b7 updated hourly<\/p>\r\n <!-- advanced search bar (multi\u2011input) -->\r\n <div class=\"search-bar\">\r\n <div class=\"search-item\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <input type=\"text\" id=\"jobKeyword\" placeholder=\"Job title or keyword\">\r\n <\/div>\r\n <div class=\"search-item\">\r\n <i class=\"fas fa-map-marker-alt\"><\/i>\r\n <input type=\"text\" id=\"jobLocation\" placeholder=\"Location\">\r\n <\/div>\r\n <button class=\"search-btn\" onclick=\"filterJobs()\"><i class=\"fas fa-sliders-h\"><\/i> Search<\/button>\r\n <\/div>\r\n\r\n <!-- image placed below search -->\r\n <div class=\"hero-image\">\r\n <img decoding=\"async\" src=\"https:\/\/primostats.com\/wp-content\/uploads\/2022\/06\/banner-image.jpg\" alt=\"career banner\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- right side: STATS CARD + GOOGLE BUTTON (shortcode block removed) -->\r\n <div class=\"stats-card\">\r\n <h3>\ud83d\ude80 Your next move<\/h3>\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\"><span class=\"number\">25K+<\/span> <span class=\"label\">open jobs<\/span><\/div>\r\n <div class=\"stat-item\"><span class=\"number\">1.5K<\/span> <span class=\"label\">companies<\/span><\/div>\r\n <div class=\"stat-item\"><span class=\"number\">500<\/span> <span class=\"label\">new today<\/span><\/div>\r\n <div class=\"stat-item\"><span class=\"number\">86%<\/span> <span class=\"label\">apply rate<\/span><\/div>\r\n <\/div>\r\n <div class=\"resume-btn\"><i class=\"fas fa-cloud-upload-alt\"><\/i> Upload your resume<\/div>\r\n\r\n <!-- Google login button (only) -->\r\n <div class=\"google-btn\">\r\n <i class=\"fab fa-google\"><\/i> Sign in with Google\r\n <\/div>\r\n\r\n <p style=\"margin-top: 20px; font-size: 0.9rem; display: flex; gap: 12px; justify-content: center; color:#2f416b;\">\r\n <i class=\"fab fa-linkedin\"><\/i> <i class=\"fab fa-github\"><\/i> or continue with\r\n <\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- FEATURED JOBS with filter tabs and live search -->\r\n<section class=\"jobs-section\">\r\n <div class=\"section-header\">\r\n <h2><i class=\"fas fa-bolt\" style=\"color:#5b5bf0; margin-right: 8px;\"><\/i> Featured jobs<\/h2>\r\n <div class=\"filter-tabs\">\r\n <div class=\"filter-tab active\" onclick=\"setFilter('all')\">All<\/div>\r\n <div class=\"filter-tab\" onclick=\"setFilter('fulltime')\">Full-time<\/div>\r\n <div class=\"filter-tab\" onclick=\"setFilter('parttime')\">Part-time<\/div>\r\n <div class=\"filter-tab\" onclick=\"setFilter('remote')\">Remote<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"job-grid\" id=\"jobGrid\">\r\n <!-- jobs will be dynamically populated by JS -->\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- trusted companies (with icons) -->\r\n<section class=\"companies\">\r\n <h2>Top hiring companies<\/h2>\r\n <div class=\"company-grid\">\r\n <div class=\"company-card\"><i class=\"fab fa-google\"><\/i> Google<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-amazon\"><\/i> Amazon<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-microsoft\"><\/i> Microsoft<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-facebook\"><\/i> Meta<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-apple\"><\/i> Apple<\/div>\r\n <div class=\"company-card\"><i class=\"fab fa-netflix\"><\/i> Netflix<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <div>\u00a9 2026 rekroot \u00b7 advanced job portal<\/div>\r\n <div class=\"footer-links\">\r\n <a href=\"#\">About<\/a>\r\n <a href=\"#\">Privacy<\/a>\r\n <a href=\"#\">Terms<\/a>\r\n <a href=\"#\">Contact<\/a>\r\n <\/div>\r\n<\/footer>\r\n\r\n<!-- LOGIN POPUP MODAL (email, password, Google button) -->\r\n<div class=\"modal-overlay\" id=\"loginModal\">\r\n <div class=\"modal-card\">\r\n <div class=\"close-modal\"><i class=\"fas fa-times\" id=\"closeModalBtn\"><\/i><\/div>\r\n <h2>Welcome back<\/h2>\r\n <div class=\"input-group\">\r\n <label>Email<\/label>\r\n <input type=\"email\" placeholder=\"mila@example.com\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label>Password<\/label>\r\n <input type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\r\n <\/div>\r\n <button class=\"login-btn\">Log in<\/button>\r\n <div style=\"text-align: center; color:#8a9bb5;\">or<\/div>\r\n <!-- Google button inside modal -->\r\n <div class=\"google-btn-modal\">\r\n <i class=\"fab fa-google\"><\/i> Sign in with Google\r\n <\/div>\r\n <div class=\"modal-footer-text\">\r\n Don't have an account? <a href=\"#\" style=\"color:#5b5bf0; text-decoration: none;\">Sign up<\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ ---------- JOB DATA (advanced demo) ----------\r\n const jobs = [\r\n { title: \"Senior Frontend Developer\", company: \"Google\", location: \"New York, NY\", type: \"fulltime\", salary: \"$120k-150k\", icon: \"fab fa-google\", tags: [\"React\", \"TypeScript\"] },\r\n { title: \"Product Designer\", company: \"Apple\", location: \"Cupertino, CA\", type: \"fulltime\", salary: \"$110k-140k\", icon: \"fab fa-apple\", tags: [\"Figma\", \"UI\/UX\"] },\r\n { title: \"DevOps Engineer\", company: \"Microsoft\", location: \"Remote\", type: \"remote\", salary: \"$130k-165k\", icon: \"fab fa-microsoft\", tags: [\"AWS\", \"Kubernetes\"] },\r\n { title: \"Content Writer\", company: \"Netflix\", location: \"Los Angeles, CA\", type: \"parttime\", salary: \"$50k-70k\", icon: \"fab fa-netflix\", tags: [\"SEO\", \"Creative\"] },\r\n { title: \"Data Analyst\", company: \"Meta\", location: \"Austin, TX\", type: \"fulltime\", salary: \"$95k-120k\", icon: \"fab fa-facebook\", tags: [\"SQL\", \"Python\"] },\r\n { title: \"Customer Support\", company: \"Amazon\", location: \"Remote\", type: \"remote\", salary: \"$45k-60k\", icon: \"fab fa-amazon\", tags: [\"Communication\"] },\r\n { title: \"Backend Engineer\", company: \"Stripe\", location: \"San Francisco\", type: \"fulltime\", salary: \"$140k-180k\", icon: \"fas fa-building\", tags: [\"Go\", \"Microservices\"] },\r\n { title: \"HR Coordinator\", company: \"Slack\", location: \"Denver, CO\", type: \"parttime\", salary: \"$55k-70k\", icon: \"fas fa-users\", tags: [\"Recruiting\"] },\r\n ];\r\n\r\n const jobGrid = document.getElementById('jobGrid');\r\n let currentFilter = 'all';\r\n\r\n function renderJobs(filterType = 'all', keyword = '', location = '') {\r\n const filtered = jobs.filter(job => {\r\n if (filterType !== 'all' && job.type !== filterType) return false;\r\n if (keyword && !job.title.toLowerCase().includes(keyword) && !job.company.toLowerCase().includes(keyword)) return false;\r\n if (location && !job.location.toLowerCase().includes(location)) return false;\r\n return true;\r\n });\r\n\r\n if (filtered.length === 0) {\r\n jobGrid.innerHTML = `<div style=\"grid-column:1\/-1; text-align:center; padding:50px; background:#f0f3fa; border-radius:60px;\">\u2728 No matching jobs found. Try another search \u2728<\/div>`;\r\n return;\r\n }\r\n\r\n jobGrid.innerHTML = filtered.map(job => `\r\n <div class=\"job-card\">\r\n <div class=\"job-header\">\r\n <div class=\"job-icon\"><i class=\"${job.icon}\"><\/i><\/div>\r\n <div class=\"job-title\">\r\n <h4>${job.title}<\/h4>\r\n <span><i class=\"fas fa-building\"><\/i> ${job.company} \u00b7 <i class=\"fas fa-map-pin\"><\/i> ${job.location}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"job-tags\">\r\n ${job.tags.map(t => `<span class=\"tag\">${t}<\/span>`).join('')}\r\n <span class=\"tag\">${job.type === 'fulltime' ? '\u23f0 Full\u2011time' : (job.type==='parttime'? '\ud83d\udd52 Part\u2011time' : '\ud83c\udf0d Remote')}<\/span>\r\n <\/div>\r\n <div class=\"job-footer\">\r\n <span class=\"salary\">${job.salary}<\/span>\r\n <span class=\"apply-btn\">Apply now<\/span>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n \/\/ filter by tab\r\n function setFilter(type) {\r\n currentFilter = type;\r\n document.querySelectorAll('.filter-tab').forEach(tab => tab.classList.remove('active'));\r\n event.target.classList.add('active');\r\n const keyword = document.getElementById('jobKeyword').value.toLowerCase().trim();\r\n const loc = document.getElementById('jobLocation').value.toLowerCase().trim();\r\n renderJobs(type, keyword, loc);\r\n }\r\n\r\n \/\/ combined search from hero button\r\n function filterJobs() {\r\n const keyword = document.getElementById('jobKeyword').value.toLowerCase().trim();\r\n const loc = document.getElementById('jobLocation').value.toLowerCase().trim();\r\n renderJobs(currentFilter, keyword, loc);\r\n }\r\n\r\n \/\/ initial render and show login popup automatically\r\n window.addEventListener('load', () => {\r\n renderJobs('all');\r\n \/\/ Show login modal when page loads\r\n const modal = document.getElementById('loginModal');\r\n if (modal) modal.classList.add('active');\r\n });\r\n\r\n \/\/ attach listeners to input fields for instant search (optional)\r\n document.getElementById('jobKeyword').addEventListener('input', filterJobs);\r\n document.getElementById('jobLocation').addEventListener('input', filterJobs);\r\n\r\n \/\/ ---------- LOGIN MODAL logic (manual trigger and close) ----------\r\n const modal = document.getElementById('loginModal');\r\n const loginTrigger = document.getElementById('loginTrigger');\r\n const closeBtn = document.getElementById('closeModalBtn');\r\n\r\n loginTrigger.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n modal.classList.add('active');\r\n });\r\n\r\n closeBtn.addEventListener('click', () => {\r\n modal.classList.remove('active');\r\n });\r\n\r\n \/\/ click outside to close\r\n modal.addEventListener('click', (e) => {\r\n if (e.target === modal) {\r\n modal.classList.remove('active');\r\n }\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>rekroot \u00b7 login popup on visit rekroot Home Jobs Blog Pages Log In Post a Job Get your new dream […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-750","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/comments?post=750"}],"version-history":[{"count":94,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/750\/revisions"}],"predecessor-version":[{"id":849,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/750\/revisions\/849"}],"wp:attachment":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/media?parent=750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}