Pages Medium
Job Board — General Board Landing
A clean, trustworthy marketing landing for a general job board, built on white, trust-blue, and slate. It pairs a dual-field role and location search with trending categories, featured employer cards carrying remote and hiring pills, seeker and employer value props, a vivid stats band, hired-through testimonials, and a dual find-a-job or post-a-job call to action. Vanilla JS drives interactive search, popular-search chips, a mobile menu, toast feedback, and smooth scroll reveal, fully responsive down to 360px.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--brand: #2563eb;
--brand-d: #1d4ed8;
--brand-50: #eaf1ff;
--ink: #0f172a;
--ink-2: #475569;
--muted: #64748b;
--bg: #f6f8fb;
--surface: #ffffff;
--line: rgba(15, 23, 42, 0.1);
--line-2: rgba(15, 23, 42, 0.18);
--ok: #16a34a;
--warn: #d97706;
--danger: #dc2626;
--new: #2563eb;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
--sh-md: 0 6px 18px rgba(15, 23, 42, 0.08);
--sh-lg: 0 18px 48px rgba(15, 23, 42, 0.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(1140px, 92vw); margin: 0 auto; }
.skip {
position: absolute; left: -999px; top: 0;
background: var(--brand); color: #fff; padding: 10px 16px;
border-radius: var(--r-sm); z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font: inherit; font-weight: 600; font-size: 14px;
padding: 10px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--brand-d); box-shadow: var(--sh-md); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--brand-50); border-color: var(--brand); color: var(--brand-d); }
.btn-soft { background: var(--brand-50); color: var(--brand-d); }
.btn-soft:hover { background: #dde8ff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #eef2f9; }
.btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; }
/* Nav */
.nav {
position: sticky; top: 0; z-index: 40;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 19px; }
.logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; box-shadow: var(--sh-sm); }
.brand-name { letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 6px; margin-left: 10px; }
.nav-links a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; font-size: 14.5px; }
.nav-links a:hover { background: var(--brand-50); color: var(--brand-d); }
.nav-cta { margin-left: auto; display: flex; gap: 10px; }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
.burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Hero */
.hero {
padding: clamp(48px, 8vw, 96px) 0 64px;
background:
radial-gradient(900px 380px at 80% -10%, var(--brand-50), transparent 70%),
radial-gradient(700px 320px at 0% 0%, #f0f5ff, transparent 60%),
var(--surface);
border-bottom: 1px solid var(--line);
}
.hero-inner { max-width: 760px; }
.eyebrow {
display: inline-block; font-size: 13px; font-weight: 600; color: var(--brand-d);
background: var(--brand-50); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 800; }
.grad { background: linear-gradient(90deg, var(--brand), #6d28d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin-top: 18px; font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-2); max-width: 600px; }
.search {
margin-top: 30px; display: flex; align-items: stretch; gap: 8px;
background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
padding: 8px; box-shadow: var(--sh-md);
}
.field { display: flex; align-items: center; gap: 10px; flex: 1; padding: 0 12px; min-width: 0; }
.field-sep { border-left: 1px solid var(--line); }
.fi { width: 20px; height: 20px; color: var(--muted); flex: none; }
.field input { border: 0; outline: none; font: inherit; font-size: 15px; width: 100%; background: transparent; color: var(--ink); padding: 12px 0; }
.field input::placeholder { color: var(--muted); }
.search-go { flex: none; padding: 12px 22px; }
.suggest { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.chip {
font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
background: var(--surface); border: 1px solid var(--line-2); padding: 7px 13px;
border-radius: 999px; cursor: pointer; transition: .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand-d); background: var(--brand-50); }
/* Sections */
.section { padding: clamp(56px, 8vw, 88px) 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { max-width: 640px; margin-bottom: 38px; }
.sec-head h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; }
.sec-head p { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
/* Categories */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
text-align: left; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-md); padding: 20px; cursor: pointer; font: inherit;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--brand); }
.cat-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--brand-50); }
.cat-card h3 { font-size: 16px; font-weight: 700; }
.cat-card .cat-count { font-size: 13.5px; color: var(--muted); font-weight: 500; }
/* Employers */
.emp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.emp-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 22px; display: flex; flex-direction: column; gap: 14px;
transition: transform .15s ease, box-shadow .15s ease;
}
.emp-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.emp-top { display: flex; align-items: center; gap: 13px; }
.emp-logo { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; flex: none; }
.emp-name { font-weight: 700; font-size: 16px; }
.emp-sector { font-size: 13px; color: var(--muted); }
.emp-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.pill { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.pill-blue { background: var(--brand-50); color: var(--brand-d); }
.pill-remote { background: #e8f7ee; color: var(--ok); }
.pill-new { background: #fff3e6; color: var(--warn); }
.emp-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--line); }
.emp-open { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.emp-link { font-size: 13.5px; font-weight: 600; color: var(--brand-d); }
.emp-link:hover { text-decoration: underline; }
/* Value props */
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.value-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 30px; display: flex; flex-direction: column; gap: 18px;
}
.value-card-dark { background: linear-gradient(160deg, #142447, var(--ink)); color: #fff; border-color: transparent; }
.vc-tag { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--brand-d); background: var(--brand-50); padding: 6px 12px; border-radius: 999px; }
.vc-tag-light { color: #cfe0ff; background: rgba(255, 255, 255, 0.12); }
.vc-list { display: flex; flex-direction: column; gap: 13px; }
.vc-list li { position: relative; padding-left: 30px; font-size: 15px; color: var(--ink-2); }
.value-card-dark .vc-list li { color: rgba(255, 255, 255, 0.82); }
.vc-list li b { color: var(--ink); }
.value-card-dark .vc-list li b { color: #fff; }
.vc-list li::before {
content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
display: grid; place-items: center; font-size: 11px; font-weight: 800;
background: var(--brand-50); color: var(--brand-d); border-radius: 999px;
}
.value-card-dark .vc-list li::before { background: rgba(255, 255, 255, 0.16); color: #fff; }
.value-card .btn { align-self: flex-start; margin-top: 4px; }
/* Stats */
.stats { background: linear-gradient(140deg, var(--brand), var(--brand-d)); color: #fff; padding: clamp(40px, 6vw, 64px) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { text-align: center; }
.stat-num { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; }
.stat-label { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
/* Stories */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.story-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.story-quote { font-size: 15px; color: var(--ink); line-height: 1.6; }
.story-stars { color: var(--warn); font-size: 14px; letter-spacing: 2px; }
.story-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.story-avatar { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex: none; }
.story-name { font-weight: 700; font-size: 14.5px; }
.story-role { font-size: 13px; color: var(--muted); }
/* CTA */
.cta { padding: clamp(56px, 8vw, 96px) 0; }
.cta-inner { text-align: center; }
.cta-inner > h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.cta-inner > p { margin-top: 12px; color: var(--ink-2); font-size: 17px; }
.cta-cards { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.cta-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 30px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.cta-card h3 { font-size: 21px; font-weight: 700; }
.cta-card p { color: var(--ink-2); }
.cta-card .btn { margin-top: 8px; }
.cta-card-accent { background: linear-gradient(160deg, var(--brand), var(--brand-d)); color: #fff; border-color: transparent; }
.cta-card-accent p { color: rgba(255, 255, 255, 0.85); }
/* Footer */
.footer { background: var(--ink); color: rgba(255, 255, 255, 0.7); padding: 56px 0 28px; }
.footer .brand { color: #fff; }
.footer .logo { background: var(--brand); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.foot-brand p { margin-top: 14px; max-width: 280px; font-size: 14px; }
.footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; letter-spacing: 0.01em; }
.footer nav a { display: block; padding: 5px 0; font-size: 14px; color: rgba(255, 255, 255, 0.66); transition: color .15s; }
.footer nav a:hover { color: #fff; }
.foot-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.foot-legal { display: flex; gap: 18px; }
.foot-legal a:hover { color: #fff; }
/* Toast */
.toast {
position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-sm);
font-size: 14px; font-weight: 500; box-shadow: var(--sh-lg);
opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 80;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
/* Responsive */
@media (max-width: 920px) {
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.emp-grid, .story-grid { grid-template-columns: 1fr 1fr; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.nav-links, .nav-cta { display: none; }
.nav-links.open {
display: flex; flex-direction: column; position: absolute; top: 66px; left: 0; right: 0;
background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 4vw; gap: 2px; box-shadow: var(--sh-md);
}
.nav-links.open a { padding: 12px; font-size: 16px; }
.burger { display: flex; }
}
@media (max-width: 520px) {
.search { flex-direction: column; padding: 10px; }
.field-sep { border-left: 0; border-top: 1px solid var(--line); }
.field { padding: 4px 10px; }
.search-go { width: 100%; }
.emp-grid, .story-grid, .value-grid, .cta-cards { grid-template-columns: 1fr; }
.cat-grid { grid-template-columns: 1fr 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; }
.foot-bottom { flex-direction: column; align-items: flex-start; }
.value-card, .cta-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2600);
}
/* ---------- Mobile nav ---------- */
var burger = document.getElementById("burger");
var navLinks = document.getElementById("navlinks");
if (burger && navLinks) {
burger.addEventListener("click", function () {
var open = navLinks.classList.toggle("open");
burger.setAttribute("aria-expanded", String(open));
});
navLinks.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
navLinks.classList.remove("open");
burger.setAttribute("aria-expanded", "false");
}
});
}
/* ---------- Data ---------- */
var categories = [
{ ico: "💻", name: "Engineering", count: "3,420 jobs" },
{ ico: "🎨", name: "Design & UX", count: "1,180 jobs" },
{ ico: "📊", name: "Data & Analytics", count: "960 jobs" },
{ ico: "📣", name: "Marketing", count: "1,540 jobs" },
{ ico: "🩺", name: "Healthcare", count: "2,210 jobs" },
{ ico: "🤝", name: "Customer Success", count: "870 jobs" },
{ ico: "💰", name: "Finance", count: "1,030 jobs" },
{ ico: "🛠️", name: "Operations", count: "1,290 jobs" }
];
var employers = [
{ name: "Northwind Labs", sector: "Climate tech", color: "#2563eb", initials: "NL", open: "24 open roles", tags: [["Remote", "remote"], ["Hiring", "blue"]] },
{ name: "Lumio Health", sector: "Healthcare", color: "#16a34a", initials: "LH", open: "41 open roles", tags: [["On-site", "blue"], ["New", "new"]] },
{ name: "Brightpath Bank", sector: "Fintech", color: "#7c3aed", initials: "BB", open: "18 open roles", tags: [["Hybrid", "blue"], ["Remote", "remote"]] },
{ name: "Cedar & Co.", sector: "Retail", color: "#d97706", initials: "CC", open: "12 open roles", tags: [["On-site", "blue"], ["Hiring", "blue"]] },
{ name: "Vela Studios", sector: "Creative agency", color: "#dc2626", initials: "VS", open: "9 open roles", tags: [["Remote", "remote"], ["New", "new"]] },
{ name: "Orbit Logistics", sector: "Supply chain", color: "#0891b2", initials: "OL", open: "33 open roles", tags: [["Hybrid", "blue"], ["Hiring", "blue"]] }
];
var stats = [
{ num: "12,480", label: "Open roles right now" },
{ num: "2.1M", label: "Active candidates" },
{ num: "8,300+", label: "Hiring companies" },
{ num: "11 days", label: "Avg. time to offer" }
];
var stories = [
{ quote: "I set up alerts on a Sunday and had three interviews lined up by Friday. The salary ranges saved me so much back-and-forth.", name: "Priya Raman", role: "Product Designer · hired at Vela Studios", color: "#2563eb" },
{ quote: "As a hiring manager the screening questions cut my shortlist time in half. We filled two engineering seats in under three weeks.", name: "Marcus Lowe", role: "Eng. Manager · Northwind Labs", color: "#16a34a" },
{ quote: "Switching careers felt impossible until the matches started showing roles that actually valued my transferable skills.", name: "Dani Okafor", role: "Data Analyst · hired at Brightpath", color: "#7c3aed" }
];
/* ---------- Render categories ---------- */
var catGrid = document.getElementById("catGrid");
if (catGrid) {
categories.forEach(function (c) {
var b = document.createElement("button");
b.className = "cat-card";
b.type = "button";
b.innerHTML =
'<span class="cat-ico" aria-hidden="true">' + c.ico + "</span>" +
"<h3>" + c.name + "</h3>" +
'<span class="cat-count">' + c.count + "</span>";
b.addEventListener("click", function () {
toast("Showing " + c.name + " jobs — fictional demo");
scrollToHero();
});
catGrid.appendChild(b);
});
}
/* ---------- Render employers ---------- */
var empGrid = document.getElementById("empGrid");
if (empGrid) {
employers.forEach(function (e) {
var tags = e.tags.map(function (t) {
var cls = t[1] === "remote" ? "pill-remote" : t[1] === "new" ? "pill-new" : "pill-blue";
return '<span class="pill ' + cls + '">' + t[0] + "</span>";
}).join("");
var card = document.createElement("article");
card.className = "emp-card";
card.innerHTML =
'<div class="emp-top">' +
'<span class="emp-logo" style="background:' + e.color + '">' + e.initials + "</span>" +
"<div><div class=\"emp-name\">" + e.name + "</div><div class=\"emp-sector\">" + e.sector + "</div></div>" +
"</div>" +
'<div class="emp-meta">' + tags + "</div>" +
'<div class="emp-foot"><span class="emp-open">' + e.open + '</span><a class="emp-link" href="#">View jobs →</a></div>';
card.querySelector(".emp-link").addEventListener("click", function (ev) {
ev.preventDefault();
toast("Opening " + e.name + " — fictional demo");
});
empGrid.appendChild(card);
});
}
/* ---------- Render stats (count up) ---------- */
var statsGrid = document.getElementById("statsGrid");
if (statsGrid) {
stats.forEach(function (s) {
var d = document.createElement("div");
d.className = "stat";
d.innerHTML = '<div class="stat-num">' + s.num + '</div><div class="stat-label">' + s.label + "</div>";
statsGrid.appendChild(d);
});
}
/* ---------- Render stories ---------- */
var storyGrid = document.getElementById("storyGrid");
if (storyGrid) {
stories.forEach(function (s) {
var initials = s.name.split(" ").map(function (n) { return n[0]; }).join("").slice(0, 2);
var card = document.createElement("article");
card.className = "story-card";
card.innerHTML =
'<div class="story-stars" aria-label="5 out of 5 stars">★★★★★</div>' +
'<p class="story-quote">“' + s.quote + '”</p>' +
'<div class="story-person">' +
'<span class="story-avatar" style="background:' + s.color + '">' + initials + "</span>" +
'<div><div class="story-name">' + s.name + '</div><div class="story-role">' + s.role + "</div></div>" +
"</div>";
storyGrid.appendChild(card);
});
}
/* ---------- Search ---------- */
var form = document.getElementById("searchForm");
var qRole = document.getElementById("qRole");
var qLoc = document.getElementById("qLoc");
function scrollToHero() {
var hero = document.querySelector(".hero");
if (hero) window.scrollTo({ top: 0, behavior: "smooth" });
}
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var role = (qRole.value || "").trim();
var loc = (qLoc.value || "").trim();
if (!role && !loc) {
toast("Type a role or location to search");
qRole.focus();
return;
}
var msg = "Searching ";
msg += role ? "“" + role + "”" : "all roles";
if (loc) msg += " in " + loc;
toast(msg + " — fictional demo");
});
}
document.querySelectorAll(".chip").forEach(function (chip) {
chip.addEventListener("click", function () {
if (qRole) qRole.value = chip.getAttribute("data-role") || "";
if (qLoc) qLoc.value = chip.getAttribute("data-loc") || "";
scrollToHero();
if (qRole) qRole.focus();
});
});
/* ---------- Generic toast buttons ---------- */
document.querySelectorAll("[data-toast]").forEach(function (btn) {
btn.addEventListener("click", function () {
toast(btn.getAttribute("data-toast"));
});
});
/* ---------- Scroll reveal ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) {
en.target.classList.add("in");
io.unobserve(en.target);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
reveals.forEach(function (r) { io.observe(r); });
} else {
reveals.forEach(function (r) { r.classList.add("in"); });
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hirelight — Find a job you'll love</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="nav" id="top">
<div class="wrap nav-inner">
<a class="brand" href="#top" aria-label="Hirelight home">
<span class="logo" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 2 3 7v6c0 5 4 8 9 9 5-1 9-4 9-9V7l-9-5Z" fill="currentColor"/></svg>
</span>
<span class="brand-name">Hirelight</span>
</a>
<nav class="nav-links" id="navlinks" aria-label="Primary">
<a href="#categories">Browse jobs</a>
<a href="#employers">Companies</a>
<a href="#value">For employers</a>
<a href="#stories">Stories</a>
</nav>
<div class="nav-cta">
<a class="btn btn-ghost" href="#main">Sign in</a>
<a class="btn btn-primary" href="#cta">Post a job</a>
</div>
<button class="burger" id="burger" aria-label="Open menu" aria-expanded="false" aria-controls="navlinks">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero reveal">
<div class="wrap hero-inner">
<p class="eyebrow">12,480 open roles this week</p>
<h1>Find a job you'll <span class="grad">actually love</span></h1>
<p class="lede">Search thousands of vetted roles from companies hiring right now — remote, hybrid, and on-site across every industry.</p>
<form class="search" id="searchForm" role="search" aria-label="Job search">
<div class="field">
<svg class="fi" viewBox="0 0 24 24" aria-hidden="true"><path d="m21 21-4.3-4.3M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
<input id="qRole" type="text" name="role" placeholder="Role, skill or company" autocomplete="off" aria-label="Role, skill or company" />
</div>
<div class="field field-sep">
<svg class="fi" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11Z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="10" r="2.5" fill="none" stroke="currentColor" stroke-width="2"/></svg>
<input id="qLoc" type="text" name="location" placeholder="City or remote" autocomplete="off" aria-label="Location" />
</div>
<button class="btn btn-primary search-go" type="submit">Search jobs</button>
</form>
<div class="suggest" aria-label="Popular searches">
<span>Popular:</span>
<button class="chip" data-role="Product Designer">Product Designer</button>
<button class="chip" data-role="Frontend Engineer">Frontend Engineer</button>
<button class="chip" data-role="Data Analyst" data-loc="Remote">Data Analyst · Remote</button>
<button class="chip" data-role="Nurse" data-loc="Austin, TX">Nurse · Austin</button>
</div>
</div>
</section>
<!-- TRENDING CATEGORIES -->
<section class="section reveal" id="categories" aria-labelledby="cat-h">
<div class="wrap">
<header class="sec-head">
<h2 id="cat-h">Trending categories</h2>
<p>Jump straight into the fields hiring fastest this month.</p>
</header>
<div class="cat-grid" id="catGrid"></div>
</div>
</section>
<!-- FEATURED EMPLOYERS -->
<section class="section section-alt reveal" id="employers" aria-labelledby="emp-h">
<div class="wrap">
<header class="sec-head">
<h2 id="emp-h">Featured employers</h2>
<p>Teams actively interviewing on Hirelight right now.</p>
</header>
<div class="emp-grid" id="empGrid"></div>
</div>
</section>
<!-- VALUE PROPS -->
<section class="section reveal" id="value" aria-labelledby="val-h">
<div class="wrap">
<header class="sec-head">
<h2 id="val-h">Built for both sides of the table</h2>
<p>Whether you're hunting or hiring, the tools meet you where you are.</p>
</header>
<div class="value-grid">
<article class="value-card">
<span class="vc-tag">For job seekers</span>
<ul class="vc-list">
<li><b>One-click apply</b> with a profile that auto-fills every form.</li>
<li><b>Salary up front</b> — every listing shows a real pay range.</li>
<li><b>Smart matches</b> surface roles that fit your skills daily.</li>
<li><b>Application tracker</b> from applied to offer in one view.</li>
</ul>
<a class="btn btn-soft" href="#cta">Create a free profile</a>
</article>
<article class="value-card value-card-dark">
<span class="vc-tag vc-tag-light">For employers</span>
<ul class="vc-list">
<li><b>Reach 2M+ candidates</b> across every experience level.</li>
<li><b>Screening built in</b> with custom questions and filters.</li>
<li><b>Verified company page</b> to showcase your culture.</li>
<li><b>Clear analytics</b> on views, applies and time-to-hire.</li>
</ul>
<a class="btn btn-light" href="#cta">Post your first role</a>
</article>
</div>
</div>
</section>
<!-- STATS BAND -->
<section class="stats reveal" aria-label="Hirelight by the numbers">
<div class="wrap stats-grid" id="statsGrid"></div>
</section>
<!-- TESTIMONIALS -->
<section class="section section-alt reveal" id="stories" aria-labelledby="story-h">
<div class="wrap">
<header class="sec-head">
<h2 id="story-h">Hired through Hirelight</h2>
<p>Real-sounding people, fictional stories — same energy.</p>
</header>
<div class="story-grid" id="storyGrid"></div>
</div>
</section>
<!-- DUAL CTA -->
<section class="cta reveal" id="cta" aria-labelledby="cta-h">
<div class="wrap cta-inner">
<h2 id="cta-h">Ready when you are</h2>
<p>Two paths, one platform. Pick yours and get moving today.</p>
<div class="cta-cards">
<div class="cta-card">
<h3>Find your next job</h3>
<p>Browse 12k+ open roles with transparent salaries.</p>
<button class="btn btn-primary" data-toast="Job search opened — fictional demo">Find jobs</button>
</div>
<div class="cta-card cta-card-accent">
<h3>Post a job</h3>
<p>Your first listing is free for 30 days. No card needed.</p>
<button class="btn btn-light" data-toast="Job posting flow opened — fictional demo">Post a job</button>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap foot-grid">
<div class="foot-brand">
<span class="brand">
<span class="logo" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 2 3 7v6c0 5 4 8 9 9 5-1 9-4 9-9V7l-9-5Z" fill="currentColor"/></svg></span>
<span class="brand-name">Hirelight</span>
</span>
<p>The friendly job board for everyone who works for a living.</p>
</div>
<nav aria-label="Seekers"><h4>Seekers</h4><a href="#categories">Browse jobs</a><a href="#main">Build a profile</a><a href="#stories">Career advice</a><a href="#value">Salary guide</a></nav>
<nav aria-label="Employers"><h4>Employers</h4><a href="#cta">Post a job</a><a href="#value">Pricing</a><a href="#employers">Browse talent</a><a href="#value">Analytics</a></nav>
<nav aria-label="Company"><h4>Company</h4><a href="#top">About</a><a href="#stories">Careers</a><a href="#main">Help center</a><a href="#main">Contact</a></nav>
</div>
<div class="wrap foot-bottom">
<p>© 2026 Hirelight Inc. · Illustrative demo, not a real platform.</p>
<div class="foot-legal"><a href="#main">Privacy</a><a href="#main">Terms</a><a href="#main">Accessibility</a></div>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>General Board Landing
A full marketing landing page for a friendly, general-purpose job board. The sticky nav collapses into a mobile menu, and the hero leads with a two-field search bar (role/skill plus city or remote) backed by popular-search chips that instantly fill the inputs and scroll you back to the top. Submitting the form echoes a contextual toast so the search feels alive without a backend.
Below the fold, trending categories render as tappable cards with live job counts, featured employers appear as logo cards with remote, hybrid, and hiring status pills plus an open-roles count, and a paired value-prop section speaks to seekers and employers side by side. A trust-blue stats band, three “hired through Hirelight” testimonials, and a dual find-a-job / post-a-job CTA round out the flow before a four-column footer.
Everything is vanilla HTML, CSS, and JS: data is rendered from small arrays, a reusable toast() helper gives feedback, an IntersectionObserver powers the scroll-reveal animations, and the layout reflows cleanly from desktop down to roughly 360px with reduced-motion support baked in.
Illustrative UI only — fictional jobs & companies, not a real hiring platform.