cesnimda
69 lines
4.0 KiB
HTML
69 lines
4.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex,nofollow">
|
|
<title>B · Premium SaaS | Jobjakt design review</title>
|
|
<link rel="stylesheet" href="concepts.css">
|
|
</head>
|
|
<body class="premium">
|
|
<a class="skip" href="#main">Skip to content</a>
|
|
<div class="review"><div class="wrap"><span>Concept B · Premium SaaS · Design review</span><a href="index.html">Compare concepts</a></div></div>
|
|
<header class="top wrap">
|
|
<a class="brand" href="#main"><span class="mark" aria-hidden="true">✓</span>Jobjakt</a>
|
|
<nav class="nav" aria-label="Main"><a href="#features">Features</a><a href="#steps">How it works</a><a href="#plans">Plans</a><a href="#registration">Sign in</a></nav>
|
|
</header>
|
|
<main id="main">
|
|
<section class="hero">
|
|
<div class="hero-inner wrap">
|
|
<div class="hero-copy">
|
|
<h1>Make the next move with a plan.</h1>
|
|
<p class="lede">Save the roles you want to pursue, prepare documents and see your applications move forward.</p>
|
|
<div class="actions"><a class="button" href="#registration">Create an account</a><a class="button secondary" href="#features">Explore Jobjakt</a></div>
|
|
</div>
|
|
<figure class="product">
|
|
<a class="desktop" href="assets/dashboard-1440.png" aria-label="Open full desktop product screenshot"><img src="assets/dashboard-1440.png" alt="Jobjakt dashboard showing synthetic nursing, teaching and engineering applications"></a>
|
|
<a class="phone" href="assets/dashboard-390.png" aria-label="Open full phone product screenshot"><img src="assets/dashboard-390.png" alt="Jobjakt dashboard showing synthetic nursing, teaching and engineering applications"></a>
|
|
<figcaption>Development screenshot with synthetic records. Select it for the full capture.</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
<section class="section" id="features">
|
|
<div class="wrap">
|
|
<div class="stack">
|
|
<div class="stack"><p class="eyebrow">The workspace</p><h2>See what needs your attention.</h2></div>
|
|
|
|
</div>
|
|
<div class="grid">
|
|
<article class="feature"><h3>Track applications</h3><p>Save opportunities, review your progress and keep a record of what comes next.</p></article>
|
|
<article class="feature"><h3>Keep career details together</h3><p>Build a Career Profile with experience you can refer to when preparing a CV.</p></article>
|
|
<article class="feature"><h3>Prepare a CV</h3><p>Review a document in the editor before deciding what to send.</p></article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section section-alt" id="steps">
|
|
<div class="wrap"><h2>How it works</h2>
|
|
<ol class="steps">
|
|
<li><h3>Add your experience</h3><p>Start with your Career Profile and record the details you want to reuse.</p></li>
|
|
<li><h3>Prepare your CV</h3><p>Put a document together and review it before exporting.</p></li>
|
|
<li><h3>Keep track of applications</h3><p>Record the roles you are pursuing, the status and your next step.</p></li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
<section class="section" id="plans">
|
|
<div class="wrap"><h2>Plans and pricing</h2>
|
|
<div class="plans">
|
|
<article class="plan"><h3>Free</h3><p>Plan layout preview. Entitlements and availability require release verification.</p></article>
|
|
<article class="plan"><h3>Pro</h3><p>Plan layout preview. Price, billing terms and eligibility require approval.</p></article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section section-alt" id="registration">
|
|
<div class="wrap stack"><h2>Ready to start your next search?</h2><p>Design preview. Registration and sign-in are inactive in this mockup.</p></div>
|
|
</section>
|
|
</main>
|
|
<footer class="foot"><div class="bottom wrap"><span class="brand"><span class="mark" aria-hidden="true">✓</span>Jobjakt</span><span>Privacy and terms links pending approval</span><a href="index.html">Compare concepts</a></div></footer>
|
|
</body>
|
|
</html>
|