1 line
19 KiB
HTML
1 line
19 KiB
HTML
<div class="space-y-6"><header class="flex flex-wrap items-center justify-between gap-4 border-b border-border/50 pb-4"><div class="min-w-0 space-y-1"><div class="flex flex-wrap items-center gap-x-2.5 gap-y-1.5"><h1 class="font-heading text-title-lg font-bold tracking-tight text-ink-1 sm:text-2xl">Talent Pool</h1><span class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-blue-50 px-2.5 py-0.5 text-[11px] font-semibold text-blue-600 dark:bg-blue-950/60 dark:text-blue-400 border border-blue-200/60 dark:border-blue-800/40"><span class="h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400"></span>Live System</span></div><p class="text-body-sm text-ink-3 font-normal">Discover and manage high-potential talent for future hiring.</p></div></header><section aria-labelledby="segments" class="space-y-3"><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 id="segments" class="font-heading text-body font-semibold text-ink-1">Talent segments</h2><span class="text-caption text-ink-4">0 in the pool</span></div></div><div><div class="grid grid-cols-1 gap-3.5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5"><div class="group relative flex flex-col justify-between cursor-pointer rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-blue-200/50 dark:border-blue-800/40 hover:border-blue-400"><div><div class="flex items-center justify-between gap-1.5"><div class="flex items-baseline gap-1.5 min-w-0"><span class="truncate text-[11px] font-bold uppercase tracking-wider text-ink-1">Elite</span><span class="truncate text-[10px] font-medium text-ink-4">90+</span></div><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-blue-50/80 text-blue-600 dark:bg-blue-950/60 dark:text-blue-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trophy h-3.5 w-3.5"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path></svg></div></div><div class="mt-2.5 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-ink-4">0</span></div></div><div class="mt-3.5 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">No profiles</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-blue-500 to-indigo-500"></div></div></div><div class="group relative flex flex-col justify-between cursor-pointer rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-emerald-200/50 dark:border-emerald-800/40 hover:border-emerald-400"><div><div class="flex items-center justify-between gap-1.5"><div class="flex items-baseline gap-1.5 min-w-0"><span class="truncate text-[11px] font-bold uppercase tracking-wider text-ink-1">Excellent</span><span class="truncate text-[10px] font-medium text-ink-4">75–89</span></div><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-emerald-50/80 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-3.5 w-3.5"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div></div><div class="mt-2.5 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-ink-4">0</span></div></div><div class="mt-3.5 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">No profiles</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-emerald-500 to-teal-500"></div></div></div><div class="group relative flex flex-col justify-between cursor-pointer rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-indigo-200/50 dark:border-indigo-800/40 hover:border-indigo-400"><div><div class="flex items-center justify-between gap-1.5"><div class="flex items-baseline gap-1.5 min-w-0"><span class="truncate text-[11px] font-bold uppercase tracking-wider text-ink-1">Solid</span><span class="truncate text-[10px] font-medium text-ink-4">60–74</span></div><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-indigo-50/80 text-indigo-600 dark:bg-indigo-950/60 dark:text-indigo-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check h-3.5 w-3.5"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></div></div><div class="mt-2.5 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-ink-4">0</span></div></div><div class="mt-3.5 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">No profiles</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-indigo-500 to-purple-500"></div></div></div><div class="group relative flex flex-col justify-between cursor-pointer rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-amber-200/50 dark:border-amber-800/40 hover:border-amber-400"><div><div class="flex items-center justify-between gap-1.5"><div class="flex items-baseline gap-1.5 min-w-0"><span class="truncate text-[11px] font-bold uppercase tracking-wider text-ink-1">Building</span><span class="truncate text-[10px] font-medium text-ink-4">under 60</span></div><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-amber-50/80 text-amber-600 dark:bg-amber-950/60 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3.5 w-3.5"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg></div></div><div class="mt-2.5 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-ink-4">0</span></div></div><div class="mt-3.5 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">No profiles</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-amber-500 to-orange-500"></div></div></div><div class="group relative flex flex-col justify-between cursor-pointer rounded-xl border bg-surface p-4 shadow-xs backdrop-blur-xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-orange-200/50 dark:border-orange-800/40 hover:border-orange-400"><div><div class="flex items-center justify-between gap-1.5"><div class="flex items-baseline gap-1.5 min-w-0"><span class="truncate text-[11px] font-bold uppercase tracking-wider text-ink-1">Unscored</span><span class="truncate text-[10px] font-medium text-ink-4">no score</span></div><div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg shadow-xs bg-orange-50/80 text-orange-600 dark:bg-orange-950/60 dark:text-orange-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-3.5 w-3.5"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></div></div><div class="mt-2.5 flex items-baseline gap-1.5"><span class="font-heading font-bold leading-none tabular-nums text-ink-4">0</span></div></div><div class="mt-3.5 space-y-2"><span class="inline-flex items-center rounded-full bg-surface-subtle px-2 py-0.5 text-[10px] font-semibold text-ink-3 border border-border/60">No profiles</span><div class="h-0.5 w-full rounded-full bg-gradient-to-r opacity-40 group-hover:opacity-100 transition-opacity from-orange-500 to-red-500"></div></div></div></div><p class="mt-3 border-t border-border/60 pt-3 text-caption leading-relaxed text-ink-3">The scored part of the pool outweighs the unscored, so matching has enough to work with.</p></div></section><div class="flex flex-wrap items-baseline justify-between gap-2"><div class="flex min-w-0 flex-wrap items-baseline gap-x-2"><h2 class="font-heading text-body font-semibold text-ink-1">Talent directory</h2><span class="text-caption text-ink-4">0 profiles</span></div></div><div class="space-y-2"><div class="flex flex-col gap-2 lg:flex-row lg:items-center"><div class="min-w-0 lg:max-w-xs lg:flex-1"><div class="relative"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search absolute top-1/2 -translate-y-1/2 w-4 h-4 text-ink-4 pointer-events-none left-2.5" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><input type="search" role="searchbox" placeholder="Search name, role or skill" class="flex w-full bg-surface text-ink-1 transition-all duration-base ease-out border border-border shadow-xs placeholder:text-ink-4 outline-none focus-visible:border-krow-blue focus-visible:ring-2 focus-visible:ring-krow-blue/20 disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/20 file:border-0 file:bg-transparent file:text-body-sm file:font-medium file:text-ink-2 h-8 px-2.5 text-body-sm rounded-lg pl-8 pr-9 [&::-webkit-search-cancel-button]:hidden" value=""/></div></div><div class="flex flex-wrap items-center gap-2"><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="Skills"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="Experience"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="Location"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="Score"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="Availability"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex items-center justify-between whitespace-nowrap duration-base ease-out data-[placeholder]:text-ink-4 focus:border-krow-blue disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1 h-8 w-auto min-w-[7.5rem] rounded-full border border-border/80 bg-white px-3 text-[13px] font-normal text-ink-1 shadow-2xs hover:bg-surface-hover hover:border-border transition-colors outline-none focus:ring-2 focus:ring-krow-blue/20" aria-label="Sort"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><p class="text-caption text-ink-4">0 of 0 talents</p></div><div class="transition-all duration-base ease-out glass-card border border-white/60 shadow-sm rounded-2xl p-0 overflow-hidden"><div class="flex flex-col items-center justify-center text-center py-14 px-6"><span class="grid place-items-center rounded-full mb-4 bg-krow-blue-tint text-krow-blue w-14 h-14"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-inbox w-6 h-6" aria-hidden="true"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg></span><h3 class="font-heading text-ink-1 text-title">Nothing here yet</h3><p class="text-body-sm text-ink-3 mt-1.5 max-w-sm leading-relaxed">Rows will appear here once there is data.</p></div></div></div> |