docs(launch): render four homepage concepts for review
This commit is contained in:
cesnimda
@@ -0,0 +1,22 @@
|
||||
# LAUNCH-01 homepage concepts
|
||||
|
||||
Open the [comparison gallery](concepts/index.html) from this checkout, or open any full-page desktop and phone image below. These are standalone English design previews. The registration and sign-in treatments scroll to an explanation in the prototype. Plans show layout and the existing catalogue labels only. Public copy, pricing, legal destinations, localisation and feature availability need release validation.
|
||||
|
||||
| Concept | View | Strength | Tradeoff and accessibility focus |
|
||||
| --- | --- | --- | --- |
|
||||
| A · Modern Minimalist | [Responsive](concepts/minimal.html) · [Desktop](concepts/renders/minimal-desktop.png) · [Phone](concepts/renders/minimal-phone.png) | A direct split hero leads with the application tracker. Violet accents connect it to the application. | The restrained treatment puts more weight on the headline. On phones, the screenshot is a cropped preview with a full-capture link. |
|
||||
| B · Premium SaaS | [Responsive](concepts/premium.html) · [Desktop](concepts/renders/premium-desktop.png) · [Phone](concepts/renders/premium-phone.png) | A large dashboard stage explains the organisation workflow through the product itself. | The desktop composition uses more vertical space. The phone layout puts a left-aligned headline and actions before the capture. Recheck text contrast if the background treatment changes. |
|
||||
| C · Friendly and Human | [Responsive](concepts/human.html) · [Desktop](concepts/renders/human-desktop.png) · [Phone](concepts/renders/human-phone.png) | Sage and Georgia display type support an original illustration spanning education, care and trades. A separate teacher CV capture shows the actual product. | Product evidence follows the introduction. The illustration has an alternative description and is separate from the development capture. |
|
||||
| D · Modern Editorial | [Responsive](concepts/editorial.html) · [Desktop](concepts/renders/editorial-desktop.png) · [Phone](concepts/renders/editorial-phone.png) | A navy masthead and asymmetric Career Workspace frame emphasise the experience applicants bring to the search. | Display typography needs locale expansion checks. On phones, the masthead and application preview stack in reading order. |
|
||||
|
||||
Each page has the same navigation destinations, basic feature and workflow copy, provisional Free/Pro slots and footer. This keeps the comparison focused on hierarchy, imagery and type. Review the hero, navigation, typography, colour, illustration balance, feature presentation, calls to action and phone layout. The owner can combine parts across concepts and identify missing sections.
|
||||
|
||||
## Verification
|
||||
|
||||
Chromium passed 20 local browser cases across the four prototypes and the gallery at 1440, 768, 390 and 320 px. Checked image loading, no horizontal page overflow, local link destinations, keyboard skip navigation, inactive signup flow, minimum visible link size and axe WCAG A/AA tags. No page errors, external requests or tagged violations occurred. The first run exposed a small review link. Its hit area was enlarged and the full matrix reran. The eight full-page desktop and phone renders were visually inspected. [Browser receipts](concepts/renders/checks.json)
|
||||
|
||||
See [screenshot and asset provenance](SCREENSHOT_AND_ASSET_MANIFEST.md). No production feature, provider, pricing, signup or availability claim was verified. Native accessibility, translated copy and production performance remain open.
|
||||
|
||||
## Owner selection gate
|
||||
|
||||
LAUNCH-01 is ready for owner review. LAUNCH-02 starts when the owner selects one or more directions. Final implementation requires separate explicit approval of the refined design.
|
||||
@@ -1,5 +1,13 @@
|
||||
# LAUNCH-00 source audit - partial checkpoint
|
||||
|
||||
## Design pattern and asset inputs
|
||||
|
||||
- Linear shows the workspace near the top and lets specific workflow examples explain the product. The Premium concept explores a genuine Jobjakt dashboard in a similar position using its own visual treatment. [Linear homepage](https://linear.app/)
|
||||
- Notion groups its feature presentation around recognizable actions. All four Jobjakt concepts use three short outcomes tied to tracking, Career Profile and CV preparation. [Notion product overview](https://www.notion.com/product)
|
||||
- Basecamp combines a direct product explanation with a distinct tour action. The Jobjakt hero prototypes separate a proposed registration action from the feature walkthrough. [Basecamp homepage](https://basecamp.com/)
|
||||
|
||||
The [four rendered concepts](DESIGN_CONCEPTS.md) use verified synthetic product captures and one original illustration. Signup submission, degraded auth, baseline performance and native accessibility remain open in LAUNCH-00. A live commercial claim or current price still needs independent evidence and approval.
|
||||
|
||||
## Rendered baseline reconciliation, 10 November 2026
|
||||
|
||||
The separately published A3 evidence at `bd34a3504f7e849c41b48db444f0e1f16324a16f` includes `docs/ui-modernisation/visual-correction/LANDING_BASELINE_REVIEW.md` and `evidence/landing-baseline/BROWSER.json` under the same directory. The runtime was `e8e7d83958587e8b5a4b93d03d3e736896df5a48`. This closes the rendered anonymous navigation and raw export observations at that baseline.
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
# Partial homepage planning handoff
|
||||
|
||||
10 November concept successor. [LAUNCH-01 comparison](DESIGN_CONCEPTS.md) contains four responsive prototypes and eight full-page renders with synthetic development captures and a source manifest. Twenty local browser cases passed. The owner can select or combine directions before LAUNCH-02. Final visual approval, public copy, production rendering and launch acceptance remain separate. Earlier pending statements below describe the previous checkpoint.
|
||||
|
||||
10 November: the published A3 landing baseline now supplies 12 rendered navigation states, raw HTML findings and screenshot provenance candidates. See [homepage audit](HOMEPAGE_AUDIT.md). Next, complete the outstanding audit inputs and render the four concept pairs. Final homepage selection, application implementation and launch acceptance retain their separate gates.
|
||||
|
||||
Continuation 2 November: CONTENT_ARCHITECTURE.md, INTERNATIONALISATION.md and SEO_STRATEGY.md add independent design-neutral content/routing/publication proposals. Byte-matched existing build-shell evidence confirms raw export lacks descriptive marketing HTML, canonical and hreflang. No public UI/routes/metadata implementation or final visual choice made. These source/build checks are not live SEO, performance or release qualification. The five application UI concepts remain separate from LAUNCH-01's required homepage exploration; no sixth application concept created.
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
# Launch screenshot and asset manifest
|
||||
|
||||
The eight product images in `concepts/assets/` are unchanged copies of real browser captures of the exported A3 React application using intercepted synthetic API fixtures. Every image was inspected and its SHA-256 matched the published evidence manifest at `49e79875d9681efab0880d7e812bb0e536b7d30c`. The prototypes show the top of each capture and link to the full source image. The fixture CV preview uses controlled HTML. These captures establish visual provenance for design review. Public reuse requires confirmation on the accepted release and separate marketing approval.
|
||||
|
||||
| Asset | Route and fixture | Runtime |
|
||||
| --- | --- | --- |
|
||||
| Applications | `/jobs`, saved community nurse role | `1246994cca9a3ba7cb89eb4605b3dc77b5d7c322` |
|
||||
| Dashboard | `/dashboard`, synthetic nurse, teacher and engineer opportunities | `a7d726738b74d13fb805f7bd4f5780bdf19110d0` |
|
||||
| CV editor | `/career/builder/3`, synthetic teacher CV and fixture preview | `b31ce6176bcb8f6a70d3e29ad4057b7cb74a1f53` |
|
||||
| Career Workspace | `/career`, synthetic profile and import review | `b31ce6176bcb8f6a70d3e29ad4057b7cb74a1f53` |
|
||||
|
||||
[Exact source paths, widths and hashes](concepts/assets/provenance.json)
|
||||
|
||||
`concepts/professions.svg` is original vector artwork for this design review. It depicts fictional people and uses no external images, marks or fonts. Prototype type uses local platform fonts and no bundled font files. No photography was sourced or licensed in this checkpoint. Any later photography, generated artwork and public screenshot variants need their own approval and asset record.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
@@ -0,0 +1,101 @@
|
||||
{
|
||||
"evidenceCommit": "49e79875d9681efab0880d7e812bb0e536b7d30c",
|
||||
"images": [
|
||||
{
|
||||
"target": "assets/applications-1440.png",
|
||||
"source": "docs/ui-modernisation/visual-correction/evidence/applications-selection/ordinary-en-light-1440.png",
|
||||
"runtime": "1246994cca9a3ba7cb89eb4605b3dc77b5d7c322",
|
||||
"manifest": "docs/ui-modernisation/visual-correction/APPLICATION_SELECTION_SOURCE_MANIFEST.json",
|
||||
"route": "/jobs",
|
||||
"width": 1440,
|
||||
"locale": "en",
|
||||
"theme": "light",
|
||||
"fixture": "synthetic",
|
||||
"sha256": "98898ed330f5bb08946477367e1c95e448ee1bfea26c978c13792985de1febda"
|
||||
},
|
||||
{
|
||||
"target": "assets/applications-390.png",
|
||||
"source": "docs/ui-modernisation/visual-correction/evidence/applications-selection/ordinary-en-light-390.png",
|
||||
"runtime": "1246994cca9a3ba7cb89eb4605b3dc77b5d7c322",
|
||||
"manifest": "docs/ui-modernisation/visual-correction/APPLICATION_SELECTION_SOURCE_MANIFEST.json",
|
||||
"route": "/jobs",
|
||||
"width": 390,
|
||||
"locale": "en",
|
||||
"theme": "light",
|
||||
"fixture": "synthetic",
|
||||
"sha256": "9937bb7f328b1c0b719f46b54bf73f1cd0694c348ffe4899449d0ffcf5124d7f"
|
||||
},
|
||||
{
|
||||
"target": "assets/dashboard-1440.png",
|
||||
"source": "docs/ui-modernisation/visual-correction/evidence/dashboard/dashboard-en-light-1440.png",
|
||||
"runtime": "a7d726738b74d13fb805f7bd4f5780bdf19110d0",
|
||||
"manifest": "docs/ui-modernisation/visual-correction/DASHBOARD_DISCOVERY_SOURCE_MANIFEST.json",
|
||||
"route": "/dashboard",
|
||||
"width": 1440,
|
||||
"locale": "en",
|
||||
"theme": "light",
|
||||
"fixture": "synthetic",
|
||||
"sha256": "c19a6b87686d32102db22fe61e4ed7b697f674774f45872d0bf2f2ac64066d80"
|
||||
},
|
||||
{
|
||||
"target": "assets/dashboard-390.png",
|
||||
"source": "docs/ui-modernisation/visual-correction/evidence/dashboard/dashboard-en-light-390.png",
|
||||
"runtime": "a7d726738b74d13fb805f7bd4f5780bdf19110d0",
|
||||
"manifest": "docs/ui-modernisation/visual-correction/DASHBOARD_DISCOVERY_SOURCE_MANIFEST.json",
|
||||
"route": "/dashboard",
|
||||
"width": 390,
|
||||
"locale": "en",
|
||||
"theme": "light",
|
||||
"fixture": "synthetic",
|
||||
"sha256": "a6ae5fdaa0815e3785234ed3db9237cb3cd8418f5dbd5853b4cfc15de1442256"
|
||||
},
|
||||
{
|
||||
"target": "assets/cv-editor-1440.png",
|
||||
"source": "docs/ui-modernisation/visual-correction/evidence/career/cv-editor-en-light-1440.png",
|
||||
"runtime": "b31ce6176bcb8f6a70d3e29ad4057b7cb74a1f53",
|
||||
"manifest": "docs/ui-modernisation/visual-correction/CAREER_DOCUMENT_SOURCE_MANIFEST.json",
|
||||
"route": "/career/builder/3",
|
||||
"width": 1440,
|
||||
"locale": "en",
|
||||
"theme": "light",
|
||||
"fixture": "synthetic",
|
||||
"sha256": "e90a1c32709d376417d9af8b00d8007d53aed102f5d017a4c55cdc7371e402bc"
|
||||
},
|
||||
{
|
||||
"target": "assets/cv-editor-390.png",
|
||||
"source": "docs/ui-modernisation/visual-correction/evidence/career/cv-editor-en-light-390.png",
|
||||
"runtime": "b31ce6176bcb8f6a70d3e29ad4057b7cb74a1f53",
|
||||
"manifest": "docs/ui-modernisation/visual-correction/CAREER_DOCUMENT_SOURCE_MANIFEST.json",
|
||||
"route": "/career/builder/3",
|
||||
"width": 390,
|
||||
"locale": "en",
|
||||
"theme": "light",
|
||||
"fixture": "synthetic",
|
||||
"sha256": "b26258fe02e24f34b107739f0139391d766b3bf8a3e63a5864063e06f40a68e8"
|
||||
},
|
||||
{
|
||||
"target": "assets/career-1440.png",
|
||||
"source": "docs/ui-modernisation/visual-correction/evidence/career/overview-en-light-1440.png",
|
||||
"runtime": "b31ce6176bcb8f6a70d3e29ad4057b7cb74a1f53",
|
||||
"manifest": "docs/ui-modernisation/visual-correction/CAREER_DOCUMENT_SOURCE_MANIFEST.json",
|
||||
"route": "/career",
|
||||
"width": 1440,
|
||||
"locale": "en",
|
||||
"theme": "light",
|
||||
"fixture": "synthetic",
|
||||
"sha256": "637f8dbc0cd01d4382dd409fc0b3870c40e69bbbcb2d6efbbb3e3c6c3b8a46d2"
|
||||
},
|
||||
{
|
||||
"target": "assets/career-390.png",
|
||||
"source": "docs/ui-modernisation/visual-correction/evidence/career/overview-en-light-390.png",
|
||||
"runtime": "b31ce6176bcb8f6a70d3e29ad4057b7cb74a1f53",
|
||||
"manifest": "docs/ui-modernisation/visual-correction/CAREER_DOCUMENT_SOURCE_MANIFEST.json",
|
||||
"route": "/career",
|
||||
"width": 390,
|
||||
"locale": "en",
|
||||
"theme": "light",
|
||||
"fixture": "synthetic",
|
||||
"sha256": "21f367b3848fae24dfe4abf4271c5c9c73fbf4c2a8f1aba5dd6faff61ed6cee9"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,558 @@
|
||||
:root {
|
||||
font-family: "Segoe UI",Arial,sans-serif;
|
||||
line-height: 1.5;
|
||||
color: #241b35;
|
||||
background: #f7f6fa;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-underline-offset: .22em;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline: 3px solid currentColor;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
h1,h2,h3,p,figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 62ch;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.8rem,6.6vw,7rem);
|
||||
line-height: .99;
|
||||
letter-spacing: -.065em;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.85rem,3.4vw,3.3rem);
|
||||
letter-spacing: -.04em;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.18rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: min(100% - 72px,1240px);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.review {
|
||||
background: #241b35;
|
||||
color: #fff;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
.review .wrap {
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: .7rem;
|
||||
flex-wrap: wrap;
|
||||
padding-block: .35rem;
|
||||
}
|
||||
|
||||
.top,.nav,.actions,.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.top,.bottom {
|
||||
justify-content: space-between;
|
||||
padding-block: 1.1rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .55rem;
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 770;
|
||||
}
|
||||
|
||||
.mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
border-radius: .5rem;
|
||||
background: #704fa6;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.nav {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.hero,.section {
|
||||
padding-block: clamp(2.7rem,6vw,6rem);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
display: grid;
|
||||
gap: 1.35rem;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.lede {
|
||||
font-size: clamp(1.07rem,1.7vw,1.34rem);
|
||||
max-width: 38ch;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
border: 1px solid transparent;
|
||||
padding: .55rem 1rem;
|
||||
border-radius: .45rem;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
background: var(--accent,#563282);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: none;
|
||||
border-color: currentColor;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.product {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product a {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border: 1px solid #aaa0b9;
|
||||
border-radius: .65rem;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.product img {
|
||||
aspect-ratio: 1.7;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
.product figcaption,.fine {
|
||||
font-size: .88rem;
|
||||
margin-top: .55rem;
|
||||
}
|
||||
|
||||
.product .phone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: .9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
max-width: 20ch;
|
||||
}
|
||||
|
||||
.grid,.steps,.plans {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(3,minmax(0,1fr));
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.steps {
|
||||
padding-left: 1.6rem;
|
||||
}
|
||||
|
||||
.steps li,.feature,.plan {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid currentColor;
|
||||
}
|
||||
|
||||
.steps li::marker {
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.feature p,.plan p,.steps p {
|
||||
margin-top: .45rem;
|
||||
}
|
||||
|
||||
.plans {
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
}
|
||||
|
||||
.plan {
|
||||
border: 1px solid currentColor;
|
||||
border-radius: .55rem;
|
||||
}
|
||||
|
||||
.section-alt {
|
||||
background: var(--soft,#eee8f6);
|
||||
}
|
||||
|
||||
.foot {
|
||||
border-top: 1px solid #aaa0b9;
|
||||
}
|
||||
|
||||
.bottom a {
|
||||
display: inline-flex;
|
||||
min-height: 44px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skip {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: -5rem;
|
||||
z-index: 10;
|
||||
background: white;
|
||||
color: #241b35;
|
||||
padding: .7rem;
|
||||
}
|
||||
|
||||
.skip:focus {
|
||||
top: .5rem;
|
||||
}
|
||||
|
||||
.minimal {
|
||||
--accent: #543586;
|
||||
--soft: #edf0f8;
|
||||
background: #fcfcfe;
|
||||
color: #25213b;
|
||||
}
|
||||
|
||||
.minimal .hero-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
|
||||
gap: clamp(2rem,5vw,5rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.minimal h1 {
|
||||
max-width: 10ch;
|
||||
}
|
||||
|
||||
.minimal .hero {
|
||||
border-top: 1px solid #dad6e7;
|
||||
}
|
||||
|
||||
.minimal .product {
|
||||
box-shadow: 0 28px 70px -50px #352450;
|
||||
}
|
||||
|
||||
.premium {
|
||||
--accent: #6c3da1;
|
||||
--soft: #ece5f8;
|
||||
color: #26163c;
|
||||
background: #fbf9ff;
|
||||
}
|
||||
|
||||
.premium .hero {
|
||||
background: radial-gradient(ellipse at 50% 100%,#61428c 0,#32214d 47%,#241733 78%);
|
||||
color: #fff;
|
||||
padding-bottom: 3.5rem;
|
||||
}
|
||||
|
||||
.premium .hero-copy {
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.premium h1 {
|
||||
max-width: 13ch;
|
||||
}
|
||||
|
||||
.premium .hero .button {
|
||||
background: #f4ebff;
|
||||
color: #301b48;
|
||||
}
|
||||
|
||||
.premium .hero .secondary {
|
||||
color: white;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.premium .product {
|
||||
max-width: 930px;
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
|
||||
.premium .product a {
|
||||
border: 9px solid #9073ba;
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
|
||||
.premium .feature {
|
||||
border: 1px solid #c4addd;
|
||||
border-radius: .8rem;
|
||||
padding: 1.35rem;
|
||||
}
|
||||
|
||||
.human {
|
||||
--accent: #285247;
|
||||
--soft: #e4eee6;
|
||||
color: #183a31;
|
||||
background: #fbfaf4;
|
||||
}
|
||||
|
||||
.human .mark {
|
||||
background: #285247;
|
||||
}
|
||||
|
||||
.human .hero {
|
||||
background: #e4eee6;
|
||||
}
|
||||
|
||||
.human .hero-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
|
||||
gap: clamp(2rem,4vw,4rem);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.human h1 {
|
||||
font-family: Georgia,serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.055em;
|
||||
max-width: 12ch;
|
||||
}
|
||||
|
||||
.human .art {
|
||||
border-radius: 3rem .4rem 3rem .4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.human .showcase {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr);
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.human .feature {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.editorial {
|
||||
--accent: #183761;
|
||||
--soft: #e9eff8;
|
||||
background: #f8fafc;
|
||||
color: #183761;
|
||||
}
|
||||
|
||||
.editorial .mark {
|
||||
background: #183761;
|
||||
}
|
||||
|
||||
.editorial .hero {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.editorial .hero-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
|
||||
gap: 2rem;
|
||||
border-top: 3px solid currentColor;
|
||||
padding-top: 1.5rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.editorial h1 {
|
||||
font-family: Georgia,serif;
|
||||
font-size: clamp(3rem,8.2vw,9.2rem);
|
||||
font-weight: 600;
|
||||
max-width: 10ch;
|
||||
}
|
||||
|
||||
.editorial .product {
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid currentColor;
|
||||
}
|
||||
|
||||
.editorial .product a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.editorial .section .wrap {
|
||||
border-top: 2px solid currentColor;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.editorial .grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.editorial .feature:first-child {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
padding-block: 3rem;
|
||||
}
|
||||
|
||||
.gallery h1 {
|
||||
font-size: clamp(2.5rem,5vw,5rem);
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.gallery-card {
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
border: 1px solid #aaa0b9;
|
||||
border-radius: .6rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.gallery-card img {
|
||||
aspect-ratio: 1.6;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
border: 1px solid #ddd4ea;
|
||||
}
|
||||
|
||||
.gallery-card h2 {
|
||||
font-size: 1.6rem;
|
||||
margin-block: .8rem .4rem;
|
||||
}
|
||||
|
||||
.gallery-card .nav {
|
||||
gap: .9rem;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
@media(max-width:780px) {
|
||||
.wrap {
|
||||
width: calc(100% - 36px);
|
||||
}
|
||||
.minimal .hero-inner,.human .hero-inner,.human .showcase,.editorial .hero-inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
.top {
|
||||
gap: .45rem;
|
||||
padding-block: .55rem;
|
||||
}
|
||||
.nav {
|
||||
gap: .8rem;
|
||||
}
|
||||
.top .nav {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.product a {
|
||||
max-width: 380px;
|
||||
}
|
||||
.product img {
|
||||
aspect-ratio: 4/5;
|
||||
}
|
||||
.product .desktop {
|
||||
display: none;
|
||||
}
|
||||
.product .phone {
|
||||
display: block;
|
||||
}
|
||||
.premium .product a {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.premium .product figcaption {
|
||||
text-align: center;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.premium .hero-copy {
|
||||
text-align: left;
|
||||
justify-items: start;
|
||||
}
|
||||
.human .art {
|
||||
max-width: 580px;
|
||||
}
|
||||
.editorial .hero-inner {
|
||||
align-items: start;
|
||||
}
|
||||
.editorial .product {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:520px) {
|
||||
.grid,.steps,.plans,.editorial .grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: .55rem;
|
||||
}
|
||||
.editorial .feature:first-child {
|
||||
grid-column: auto;
|
||||
}
|
||||
.top .nav {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.review .wrap {
|
||||
padding-block: .45rem;
|
||||
}
|
||||
.actions {
|
||||
gap: .65rem;
|
||||
}
|
||||
.bottom {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.gallery {
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.premium .hero .product a {
|
||||
border-width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.review a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
<!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>D · Modern Editorial | Jobjakt design review</title>
|
||||
<link rel="stylesheet" href="concepts.css">
|
||||
</head>
|
||||
<body class="editorial">
|
||||
<a class="skip" href="#main">Skip to content</a>
|
||||
<div class="review"><div class="wrap"><span>Concept D · Modern Editorial · 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>Put your experience to work.</h1>
|
||||
<p class="lede">A practical workspace for the applications, CVs and career details behind your next role.</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/career-1440.png" aria-label="Open full desktop product screenshot"><img src="assets/career-1440.png" alt="Jobjakt Career Workspace with sections and an import awaiting review"></a>
|
||||
<a class="phone" href="assets/career-390.png" aria-label="Open full phone product screenshot"><img src="assets/career-390.png" alt="Jobjakt Career Workspace with sections and an import awaiting review"></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 Jobjakt guide</p><h2>The work behind a job search.</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>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!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>C · Friendly and Human | Jobjakt design review</title>
|
||||
<link rel="stylesheet" href="concepts.css">
|
||||
</head>
|
||||
<body class="human">
|
||||
<a class="skip" href="#main">Skip to content</a>
|
||||
<div class="review"><div class="wrap"><span>Concept C · Friendly and Human · 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>A little more room for your next chapter.</h1>
|
||||
<p class="lede">Applying to a school, clinic, workshop or somewhere entirely new? Put your experience to work with a space to organise the search.</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="art"><img src="professions.svg" alt="Illustration of three people working in teaching, healthcare and electrical trades" width="720" height="525"></figure>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="features">
|
||||
<div class="wrap">
|
||||
<div class="showcase">
|
||||
<div class="stack"><p class="eyebrow">From experience to application</p><h2>Bring your experience with you.</h2></div>
|
||||
<figure class="product">
|
||||
<a class="desktop" href="assets/cv-editor-1440.png" aria-label="Open full desktop product screenshot"><img src="assets/cv-editor-1440.png" alt="Jobjakt CV Builder open on a synthetic teacher CV"></a>
|
||||
<a class="phone" href="assets/cv-editor-390.png" aria-label="Open full phone product screenshot"><img src="assets/cv-editor-390.png" alt="Jobjakt CV Builder open on a synthetic teacher CV"></a>
|
||||
<figcaption>Development screenshot with synthetic records. Select it for the full capture.</figcaption>
|
||||
</figure>
|
||||
</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>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!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>Homepage concepts | Jobjakt design review</title>
|
||||
<link rel="stylesheet" href="concepts.css">
|
||||
</head>
|
||||
<body class="">
|
||||
<a class="skip" href="#main">Skip to content</a>
|
||||
<main id="main" class="gallery wrap">
|
||||
<h1>Homepage concepts</h1>
|
||||
<p class="lede">Compare four approaches and choose any combination of hero, navigation, typography, imagery and layout.</p>
|
||||
<p class="fine">Static design review. The product captures show synthetic development fixtures.</p>
|
||||
<div class="gallery-grid">
|
||||
<article class="gallery-card">
|
||||
<a href="minimal.html" aria-label="Open concept A: Modern Minimalist"><img src="renders/minimal-desktop.png" alt="Desktop mockup of Modern Minimalist"></a>
|
||||
<h2>A · Modern Minimalist</h2>
|
||||
<p>A split hero with clear registration and a genuine application preview.</p>
|
||||
<div class="nav"><a href="minimal.html">Responsive page</a><a href="renders/minimal-desktop.png">Full desktop</a><a href="renders/minimal-phone.png">Full phone</a></div>
|
||||
</article>
|
||||
<article class="gallery-card">
|
||||
<a href="premium.html" aria-label="Open concept B: Premium SaaS"><img src="renders/premium-desktop.png" alt="Desktop mockup of Premium SaaS"></a>
|
||||
<h2>B · Premium SaaS</h2>
|
||||
<p>A theatre-style dashboard preview below a centred violet hero.</p>
|
||||
<div class="nav"><a href="premium.html">Responsive page</a><a href="renders/premium-desktop.png">Full desktop</a><a href="renders/premium-phone.png">Full phone</a></div>
|
||||
</article>
|
||||
<article class="gallery-card">
|
||||
<a href="human.html" aria-label="Open concept C: Friendly and Human"><img src="renders/human-desktop.png" alt="Desktop mockup of Friendly and Human"></a>
|
||||
<h2>C · Friendly and Human</h2>
|
||||
<p>Illustrated professions lead into a genuine teacher CV editing example.</p>
|
||||
<div class="nav"><a href="human.html">Responsive page</a><a href="renders/human-desktop.png">Full desktop</a><a href="renders/human-phone.png">Full phone</a></div>
|
||||
</article>
|
||||
<article class="gallery-card">
|
||||
<a href="editorial.html" aria-label="Open concept D: Modern Editorial"><img src="renders/editorial-desktop.png" alt="Desktop mockup of Modern Editorial"></a>
|
||||
<h2>D · Modern Editorial</h2>
|
||||
<p>A typographic masthead and an asymmetric Career Workspace showcase.</p>
|
||||
<div class="nav"><a href="editorial.html">Responsive page</a><a href="renders/editorial-desktop.png">Full desktop</a><a href="renders/editorial-phone.png">Full phone</a></div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!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>A · Modern Minimalist | Jobjakt design review</title>
|
||||
<link rel="stylesheet" href="concepts.css">
|
||||
</head>
|
||||
<body class="minimal">
|
||||
<a class="skip" href="#main">Skip to content</a>
|
||||
<div class="review"><div class="wrap"><span>Concept A · Modern Minimalist · 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>Your job search, organised.</h1>
|
||||
<p class="lede">Keep applications, career details and CVs together, so you can see what needs your attention next.</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/applications-1440.png" aria-label="Open full desktop product screenshot"><img src="assets/applications-1440.png" alt="Jobjakt application table with a saved community nurse role"></a>
|
||||
<a class="phone" href="assets/applications-390.png" aria-label="Open full phone product screenshot"><img src="assets/applications-390.png" alt="Jobjakt application table with a saved community nurse role"></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">A workspace for the whole job search</p><h2>Keep the next step in view.</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>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,40 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 525">
|
||||
<rect width="720" height="525" fill="#d3e2d7"/>
|
||||
<path d="M0 340C115 300 200 364 327 337S550 276 720 324V525H0Z" fill="#b3cebf"/>
|
||||
<circle cx="572" cy="121" r="71" fill="#f6db97"/>
|
||||
<path d="M40 102h157v105H40z" fill="#48776b" stroke="#f2f1e6" stroke-width="8"/>
|
||||
<path d="M60 129h104m-104 24h81m-81 24h38" stroke="#f2f1e6" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M478 114h114v126H478z" fill="none" stroke="#eef4ed" stroke-width="4"/>
|
||||
<path d="M494 145h28v-24h20v24h28v19h-28v25h-20v-25h-28z" fill="#eef4ed"/>
|
||||
<path d="M647 195l-23 42h18l-8 29 32-43h-21l13-28z" fill="#36595a"/>
|
||||
<ellipse cx="357" cy="467" rx="312" ry="29" fill="#91b7a5"/>
|
||||
<!-- Teacher, with an open book. -->
|
||||
<path d="M67 458l15-94c8-48 31-76 63-83l64 1c35 9 59 38 66 84l13 92z" fill="#bb674f"/>
|
||||
<path d="M158 262h43v50c-13 14-31 14-43 0z" fill="#a65d48"/>
|
||||
<path d="M125 218c0-41 22-68 55-68 36 0 60 32 58 68l-11 52c-12 21-29 33-48 33-31 0-53-24-54-57z" fill="#c87e5a"/>
|
||||
<path d="M121 225c-18-44 8-85 56-88 38-3 66 22 65 64-28 2-53-12-68-32-10 22-29 35-53 37z" fill="#392638"/>
|
||||
<path d="M116 370l61 21 67-21-6 72-61 22-58-21z" fill="#f7e4ab"/>
|
||||
<path d="M177 391v73m-45-59 32 11m23-1 42-12" stroke="#aa8551" stroke-width="3"/>
|
||||
<!-- Nurse, with scrubs and badge. -->
|
||||
<path d="M240 461l20-103c11-50 36-82 76-91l65 1c44 9 74 41 82 90l15 103z" fill="#4a72a4"/>
|
||||
<path d="M337 248h49v52l-24 36-25-36z" fill="#855042"/>
|
||||
<path d="M302 205c0-39 25-65 60-65 36 0 62 27 61 65l-7 44c-12 30-31 44-55 44-27 0-47-17-56-44z" fill="#a86854"/>
|
||||
<path d="M298 219c-17-57 15-94 62-94 47 0 74 28 67 73-26-6-45-19-58-41-19 24-42 36-71 41z" fill="#282c3b"/>
|
||||
<path d="M324 276l38 52 38-52" fill="none" stroke="#e6ecf7" stroke-width="5" stroke-linecap="round"/>
|
||||
<rect x="385" y="353" width="45" height="30" rx="5" fill="#f4f0e0"/>
|
||||
<path d="M396 367h23" stroke="#4a72a4" stroke-width="3" stroke-linecap="round"/>
|
||||
<!-- Tradesperson, with a work jacket and hard hat. -->
|
||||
<path d="M441 460l13-91c10-52 35-81 73-90l64 1c36 8 66 38 75 89l13 91z" fill="#36595a"/>
|
||||
<path d="M536 262h48v51l-25 21-23-21z" fill="#b77957"/>
|
||||
<path d="M503 222c0-36 25-65 57-65 33 0 59 29 59 65l-6 38c-12 28-28 41-54 41-24 0-44-15-54-41z" fill="#d39873"/>
|
||||
<path d="M500 211c-2-40 21-65 60-65 37 0 62 26 61 65z" fill="#e9b85c"/>
|
||||
<path d="M489 213h143m-72-65v51" stroke="#9d6d34" stroke-width="5" stroke-linecap="round"/>
|
||||
<path d="M514 311l-20 151m105-151 25 151" stroke="#e8bd6e" stroke-width="15"/>
|
||||
<path d="M554 356h12l-8 17h12l-21 25 7-20h-12z" fill="#f6db97"/>
|
||||
<g fill="#30283a">
|
||||
<circle cx="162" cy="229" r="3.2"/><circle cx="204" cy="229" r="3.2"/>
|
||||
<circle cx="341" cy="219" r="3.2"/><circle cx="381" cy="219" r="3.2"/>
|
||||
<circle cx="539" cy="231" r="3.2"/><circle cx="580" cy="231" r="3.2"/>
|
||||
</g>
|
||||
<path d="M175 251q8 6 17 0m162-8q8 6 17 0m181 12q8 6 17 0" fill="none" stroke="#663d42" stroke-width="3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,146 @@
|
||||
{
|
||||
"checks": [
|
||||
{
|
||||
"page": "minimal",
|
||||
"width": 1440,
|
||||
"height": 1000,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "minimal",
|
||||
"width": 768,
|
||||
"height": 1024,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "minimal",
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "minimal",
|
||||
"width": 320,
|
||||
"height": 720,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "premium",
|
||||
"width": 1440,
|
||||
"height": 1000,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "premium",
|
||||
"width": 768,
|
||||
"height": 1024,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "premium",
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "premium",
|
||||
"width": 320,
|
||||
"height": 720,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "human",
|
||||
"width": 1440,
|
||||
"height": 1000,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "human",
|
||||
"width": 768,
|
||||
"height": 1024,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "human",
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "human",
|
||||
"width": 320,
|
||||
"height": 720,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "editorial",
|
||||
"width": 1440,
|
||||
"height": 1000,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "editorial",
|
||||
"width": 768,
|
||||
"height": 1024,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "editorial",
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "editorial",
|
||||
"width": 320,
|
||||
"height": 720,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "index",
|
||||
"width": 1440,
|
||||
"height": 1000,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "index",
|
||||
"width": 768,
|
||||
"height": 1024,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "index",
|
||||
"width": 390,
|
||||
"height": 844,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
},
|
||||
{
|
||||
"page": "index",
|
||||
"width": 320,
|
||||
"height": 720,
|
||||
"passed": true,
|
||||
"axeViolations": []
|
||||
}
|
||||
],
|
||||
"externalRequests": [],
|
||||
"device": "Chromium desktop emulation"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 623 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
Reference in New Issue
Block a user