cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
cfba7fbbc451313c4b12e1c009ef3b293ef2adfa
jobtrackingapp/job-tracker-ui/public/mockups/dashboard.svg
T
cesnimda aa19edbc49
CI and Deploy / test (pull_request) Successful in 2m11s
Details
CI and Deploy / deploy (pull_request) Has been skipped
Details
feat(ui): add product preview (mockups) to landing page 
"See it in action" section showing the dashboard, pipeline board and per-job
workspace. Uses the design-mockup SVGs (small + crisp, ~27KB total) served from
public/mockups/, honestly captioned "Interface preview". Verified live: all three
render at "/".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 21:23:51 +02:00

83 lines
8.8 KiB
XML
Raw Blame History

<svg width="1440" height="900" viewBox="0 0 1440 900" xmlns="http://www.w3.org/2000/svg" font-family="Inter, 'Segoe UI', system-ui, sans-serif">
<defs>
<linearGradient id="side" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#0f172a"/><stop offset="1" stop-color="#111a33"/></linearGradient>
<linearGradient id="ac" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#6366f1"/><stop offset="1" stop-color="#22d3ee"/></linearGradient>
<filter id="sh" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="8" stdDeviation="14" flood-color="#0f172a" flood-opacity="0.10"/></filter>
</defs>
<rect width="1440" height="900" fill="#f4f6fb"/>
<!-- sidebar -->
<rect width="248" height="900" fill="url(#side)"/>
<g transform="translate(28,40)">
<rect x="0" y="0" width="32" height="32" rx="8" fill="url(#ac)"/><path d="M8 16 l5 5 l10 -11" stroke="#0b1020" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="44" y="22" fill="#fff" font-size="20" font-weight="700">JobTrack</text>
</g>
<g transform="translate(20,120)" font-size="15">
<rect x="0" y="0" width="208" height="44" rx="10" fill="#6366f1" opacity="0.18"/><rect x="18" y="16" width="12" height="12" rx="3" fill="#a5b4fc"/><text x="42" y="28" fill="#c7d2fe" font-weight="600">Dashboard</text>
<text x="20" y="88" fill="#94a3b8">Applications</text>
<text x="20" y="140" fill="#94a3b8">Pipeline</text>
<text x="20" y="192" fill="#94a3b8">Reminders</text>
<text x="20" y="244" fill="#94a3b8">Correspondence</text>
<text x="20" y="296" fill="#94a3b8">Companies</text>
<text x="20" y="348" fill="#94a3b8">Profile &amp; CV</text>
</g>
<g transform="translate(20,820)"><rect width="208" height="52" rx="10" fill="#ffffff" opacity="0.06"/><circle cx="30" cy="26" r="15" fill="#6366f1"/><text x="30" y="31" fill="#fff" font-size="13" text-anchor="middle" font-weight="700">DC</text><text x="56" y="23" fill="#e2e8f0" font-size="13">dj@cesnimda.co.uk</text><text x="56" y="40" fill="#64748b" font-size="11">Personal workspace</text></g>
<!-- header -->
<g transform="translate(288,44)">
<text x="0" y="26" fill="#0f172a" font-size="28" font-weight="800">Dashboard</text>
<text x="0" y="52" fill="#64748b" font-size="15">Your job search at a glance — 34 active applications</text>
<rect x="740" y="6" width="180" height="42" rx="10" fill="#fff" filter="url(#sh)"/><text x="762" y="32" fill="#64748b" font-size="14">Last 30 days ▾</text>
<rect x="936" y="6" width="168" height="42" rx="10" fill="#0f172a"/><text x="1020" y="32" fill="#fff" font-size="14" text-anchor="middle" font-weight="600">+ Add job</text>
</g>
<!-- KPI row -->
<g transform="translate(288,120)">
<g filter="url(#sh)"><rect width="266" height="112" rx="14" fill="#fff"/><text x="22" y="36" fill="#64748b" font-size="14">Active applications</text><text x="22" y="80" fill="#0f172a" font-size="38" font-weight="800">34</text><text x="150" y="80" fill="#16a34a" font-size="14">▲ 8 this week</text></g>
<g transform="translate(282,0)" filter="url(#sh)"><rect width="266" height="112" rx="14" fill="#fff"/><text x="22" y="36" fill="#64748b" font-size="14">Response rate</text><text x="22" y="80" fill="#0f172a" font-size="38" font-weight="800">28%</text><text x="150" y="80" fill="#16a34a" font-size="14">▲ 4%</text></g>
<g transform="translate(564,0)" filter="url(#sh)"><rect width="266" height="112" rx="14" fill="#fff"/><text x="22" y="36" fill="#64748b" font-size="14">Interviews</text><text x="22" y="80" fill="#0f172a" font-size="38" font-weight="800">6</text><text x="150" y="80" fill="#64748b" font-size="14">2 upcoming</text></g>
<g transform="translate(846,0)" filter="url(#sh)"><rect width="270" height="112" rx="14" fill="#fff"/><text x="22" y="36" fill="#64748b" font-size="14">Needs follow-up</text><text x="22" y="80" fill="#dc2626" font-size="38" font-weight="800">3</text><text x="150" y="80" fill="#dc2626" font-size="14">overdue</text></g>
</g>
<!-- response trend chart -->
<g transform="translate(288,256)" filter="url(#sh)">
<rect width="700" height="300" rx="14" fill="#fff"/>
<text x="24" y="40" fill="#0f172a" font-size="17" font-weight="700">Applications &amp; responses</text>
<g stroke="#eef2f7" stroke-width="1">
<line x1="24" y1="90" x2="676" y2="90"/><line x1="24" y1="150" x2="676" y2="150"/><line x1="24" y1="210" x2="676" y2="210"/><line x1="24" y1="255" x2="676" y2="255"/>
</g>
<polyline points="40,240 140,200 240,210 340,150 440,160 540,110 640,120" fill="none" stroke="#6366f1" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="40,252 140,244 240,238 340,224 440,214 540,196 640,182" fill="none" stroke="#22c55e" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
<g fill="#6366f1"><circle cx="340" cy="150" r="4.5"/><circle cx="540" cy="110" r="4.5"/></g>
<g font-size="12" fill="#94a3b8"><text x="34" y="278">Wk1</text><text x="134" y="278">Wk2</text><text x="234" y="278">Wk3</text><text x="334" y="278">Wk4</text><text x="434" y="278">Wk5</text><text x="534" y="278">Wk6</text><text x="628" y="278">Wk7</text></g>
<g font-size="12"><rect x="500" y="16" width="12" height="12" rx="3" fill="#6366f1"/><text x="518" y="26" fill="#64748b">Applied</text><rect x="590" y="16" width="12" height="12" rx="3" fill="#22c55e"/><text x="608" y="26" fill="#64748b">Responses</text></g>
</g>
<!-- time in stage -->
<g transform="translate(1004,256)" filter="url(#sh)">
<rect width="404" height="300" rx="14" fill="#fff"/>
<text x="24" y="40" fill="#0f172a" font-size="17" font-weight="700">Median time in stage</text>
<g font-size="13" fill="#334155">
<text x="24" y="82">Applied → Waiting</text><rect x="24" y="92" width="356" height="10" rx="5" fill="#eef2f7"/><rect x="24" y="92" width="120" height="10" rx="5" fill="#6366f1"/><text x="352" y="86" fill="#64748b">2d</text>
<text x="24" y="132">Waiting → Interview</text><rect x="24" y="142" width="356" height="10" rx="5" fill="#eef2f7"/><rect x="24" y="142" width="300" height="10" rx="5" fill="#818cf8"/><text x="348" y="136" fill="#64748b">9d</text>
<text x="24" y="182">Interview → Offer</text><rect x="24" y="192" width="356" height="10" rx="5" fill="#eef2f7"/><rect x="24" y="192" width="200" height="10" rx="5" fill="#22d3ee"/><text x="348" y="186" fill="#64748b">6d</text>
</g>
<text x="24" y="240" fill="#0f172a" font-size="15" font-weight="700">Top skill demand</text>
<g font-size="12"><rect x="24" y="252" width="70" height="26" rx="13" fill="#eef2ff"/><text x="59" y="269" fill="#4338ca" text-anchor="middle">React ·18</text>
<rect x="102" y="252" width="70" height="26" rx="13" fill="#eef2ff"/><text x="137" y="269" fill="#4338ca" text-anchor="middle">Azure ·12</text>
<rect x="180" y="252" width="86" height="26" rx="13" fill="#eef2ff"/><text x="223" y="269" fill="#4338ca" text-anchor="middle">Docker ·10</text>
<rect x="274" y="252" width="64" height="26" rx="13" fill="#eef2ff"/><text x="306" y="269" fill="#4338ca" text-anchor="middle">SQL ·9</text></g>
</g>
<!-- reminders strip -->
<g transform="translate(288,580)" filter="url(#sh)">
<rect width="1120" height="278" rx="14" fill="#fff"/>
<text x="24" y="40" fill="#0f172a" font-size="17" font-weight="700">Needs your attention</text>
<g transform="translate(24,60)">
<g><rect width="1072" height="60" rx="10" fill="#fef2f2"/><circle cx="28" cy="30" r="6" fill="#dc2626"/><text x="52" y="27" fill="#0f172a" font-size="15" font-weight="600">Senior Frontend Engineer · Vercel</text><text x="52" y="46" fill="#64748b" font-size="13">No reply in 9 days — follow-up drafted from your last thread</text><rect x="900" y="16" width="150" height="30" rx="8" fill="#0f172a"/><text x="975" y="36" fill="#fff" font-size="13" text-anchor="middle">Review draft</text></g>
<g transform="translate(0,72)"><rect width="1072" height="60" rx="10" fill="#fffbeb"/><circle cx="28" cy="30" r="6" fill="#f59e0b"/><text x="52" y="27" fill="#0f172a" font-size="15" font-weight="600">Platform Engineer · Finn.no</text><text x="52" y="46" fill="#64748b" font-size="13">Interview tomorrow 14:00 — prep pack ready</text><rect x="900" y="16" width="150" height="30" rx="8" fill="#eef2ff"/><text x="975" y="36" fill="#4338ca" font-size="13" text-anchor="middle">Open workspace</text></g>
<g transform="translate(0,144)"><rect width="1072" height="60" rx="10" fill="#f0fdf4"/><circle cx="28" cy="30" r="6" fill="#22c55e"/><text x="52" y="27" fill="#0f172a" font-size="15" font-weight="600">Backend Developer · NAV</text><text x="52" y="46" fill="#64748b" font-size="13">Offer received — compare against saved package</text><rect x="900" y="16" width="150" height="30" rx="8" fill="#dcfce7"/><text x="975" y="36" fill="#166534" font-size="13" text-anchor="middle">View offer</text></g>
</g>
</g>
</svg>
Reference in New Issue View Git Blame Copy Permalink