跳到主要内容
返回画廊
PAID · 已付费
Modern HR Dashboard

Modern HR Dashboard

SaaSheropage_type: hero2026-04-03

Build an HR dashboard called "Talvex" using React, TypeScript, Vite, Tailwind CSS, Recharts, and Lucide React icons. The page must be fully responsive across mobile, tablet, and desktop. Here is every specification:

Font

Use "Sofia Pro Regular" loaded from this external stylesheet in index.html:

https://db.onlinewebfonts.com/c/060e116a70e3096c52db16f61aaab194?family=Sofia+Pro+Regular

Set font-family: "Sofia Pro Medium", sans-serif on all elements via CSS * selector with -webkit-font-smoothing: antialiased. The root <div> inline style uses "Sofia Pro Regular", sans-serif.

Color Palette

  • Yellow accent: #FFD85F
  • Dark gray (text, dark fills): #303030
  • Light gray (secondary text, borders): #898989
  • Card backgrounds: white/60 with backdrop-blur-3xl
  • Card shadows: 0 2px 20px rgba(0,0,0,0.06)
  • Profile photo card shadow: 0 2px 20px rgba(0,0,0,0.10)

Background

A full-screen fixed SVG background covering the viewport with preserveAspectRatio="xMidYMid slice". Viewbox is 0 0 1280 832.

  • Base: a rect filling 1280x832 with #E3E5E6
  • On top: a large yellow #FFD85F blob path with a heavy Gaussian blur (stdDeviation="250"), creating a warm diffused glow in the lower portion:
M904 404C942.8 189.6 1234.83 123.333 1376 117V1093.5H-227V792.5C-161.5 706.167 0.5 556.6 124.5 649C248.5 741.4 473.833 727.5 571 709C665.833 696.667 865.2 618.4 904 404Z

The filter uses feFlood -> feBlend -> feGaussianBlur with filter region x="-727" y="-383" width="2603" height="1976.5".

Layout Structure

Two layout containers layered on top of the SVG (both relative z-10, max-w-[1400px] mx-auto):

  1. Desktop (lg+): hidden lg:flex, h-screen, px-6 py-6, flex-col overflow-hidden. The dashboard grid area is flex-1 min-h-0.
  2. Mobile/Tablet (<lg): lg:hidden, min-h-screen, px-4 sm:px-6 py-6, flex flex-col gap-0 overflow-y-auto, with a h-6 spacer at the bottom.

Both contain: Navbar, WelcomeRow, DashboardGrid (in that order).

Navbar

Full-width nav with mb-4.

Left: "Talvex" text in a pill — border border-[#898989]/30 rounded-full px-5 py-2 text-[#303030] text-base select-none.

Right (flex items-center gap-2):

  1. Nav links (desktop only, hidden lg:flex): Pill container bg-white/60 border border-[#898989]/20 rounded-full px-1 py-1 shadow-sm, containing buttons for: Dashboard, People, Hiring, Devices, Apps, Salary, Calendar, Reviews. Each button: px-4 py-2 rounded-full text-sm transition-all duration-200. Active state: bg-[#303030] text-white. Inactive: text-[#898989] hover:text-[#303030]. Default active = "Dashboard".

  2. Configs button (hidden sm:flex): bg-white/60 border border-[#898989]/20 rounded-full px-4 py-2.5 text-sm text-[#303030] shadow-sm hover:bg-white/80 transition-colors. Contains Settings icon (14px) + "Configs" text.

  3. Bell button: Same pill style (bg-white/60 border border-[#898989]/20 rounded-full px-3.5 py-2.5 shadow-sm hover:bg-white/80). Bell icon 15px. Yellow notification dot: absolute top-1.5 right-1.5 w-2 h-2 bg-[#FFD85F] rounded-full.

  4. Profile avatar: w-10 h-10 circular pill button with image:

https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=80
  1. Hamburger (lg:hidden only): w-10 h-10, toggles between Menu and X icons (16px). Opens a dropdown: mt-2 bg-white/80 backdrop-blur-xl border border-[#898989]/20 rounded-2xl p-2 shadow-md flex flex-wrap gap-1 with same nav buttons.

Welcome Row

w-full mb-4. Flex row on sm+ (flex-col sm:flex-row sm:items-end sm:justify-between gap-4 sm:gap-8).

Left side (flex-[3]):

  • Greeting: text-3xl sm:text-4xl lg:text-5xl tracking-tight text-[#303030] leading-tight — "Good morning, Kasven"
  • Segment bar below: 4 flex segments with proportional widths (flex: 15, 15, 60, 10):
    • "Screenings" 15% — dark gray pill bg-[#303030] text-white rounded-full px-3 py-2
    • "Placed" 15% — yellow pill bg-[#FFD85F] text-[#303030] rounded-full
    • "Sprint cycle" 60% — hatched pattern pill using repeating-linear-gradient(-45deg, #e5e5e5 0px, #e5e5e5 2px, #f5f5f5 2px, #f5f5f5 10px) with border: 1px solid #ddd
    • "Return" 10% — outlined pill border border-[#898989]/40 bg-white/60
    • Each segment has a label above (text-xs text-[#303030] mb-1)

Right side (flex-[2]): 3 stat blocks, each with:

  • An icon badge: bg-[#898989]/15 rounded-lg p-1.5 mb-1 with Users or Monitor icon (14px, text-[#898989])
  • Large number: text-3xl sm:text-4xl lg:text-5xl text-[#303030] leading-none
  • Label: text-xs text-[#303030]
  • Stats: 78 Members (Users icon), 56 Openings (Users icon), 203 Launches (Monitor icon)

Dashboard Grid

Three breakpoint layouts:

Mobile (<md): Single column flex flex-col gap-3. Cards in order: ProfilePhotoCard, ProgressCard, TimeTrackerCard, OnboardingColumn, AccordionCard, CalendarCard. No wrapper divs — cards render directly.

Tablet (md to lg): 2-column CSS grid gap-3, gridTemplateColumns: '1fr 1fr', alignItems: 'stretch'. Cards: ProfilePhotoCard, ProgressCard, TimeTrackerCard, AccordionCard (2x2), then CalendarCard and OnboardingColumn each col-span-2.

Desktop (lg+): 4-column CSS grid gap-1 h-full, gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: '1fr 1fr'. Each cell has h-full min-h-0:

  • Col 1, Row 1: ProfilePhotoCard
  • Col 2, Row 1: ProgressCard
  • Col 3, Row 1: TimeTrackerCard
  • Col 4, Row 1-2 (spans both): OnboardingColumn
  • Col 1, Row 2: AccordionCard
  • Col 2-3, Row 2: CalendarCard

Card 1: Profile Photo Card

Rounded-3xl with overflow hidden. Uses aspect-[4/3] lg:aspect-auto (natural aspect on mobile, fills parent on desktop). lg:h-full. Shadow 0 2px 20px rgba(0,0,0,0.10).

Image:

https://images.pexels.com/photos/1130626/pexels-photo-1130626.jpeg?auto=compress&cs=tinysrgb&w=600

w-full h-full object-cover object-top.

Blur overlay at bottom (35% height): An absolutely positioned div with:

  • backdropFilter: 'blur(18px) saturate(140%)'
  • maskImage: 'linear-gradient(to top, black 40%, transparent 100%)'
  • background: 'linear-gradient(to top, rgba(0,0,0,0.28) 0%, transparent 100%)'

Info bar: Absolute bottom-3 left-3 right-3, flex between, px-4 py-3 rounded-2xl:

  • Left: "Nora Elliston" (text-white text-sm font-medium) + "UI/UX Architect" (text-white/70 text-xs)
  • Right: "$1,200" in a pill border: 1px solid rgba(255,255,255,0.35), text-white text-xs font-medium

Card 2: Activity (Progress) Card

bg-white/60 backdrop-blur-3xl rounded-3xl p-5, flex flex-col gap-3 lg:h-full.

Header: "Activity" (text-lg text-[#303030]) + arrow-up-right button (white circle w-8 h-8).

Stat: "6.1 h" (text-4xl text-[#303030]) + "Logged hrs / this week" (text-xs text-[#898989] with <br />).

Bar chart area: h-48 lg:flex-1 lg:h-auto min-h-0 wrapping a Recharts ResponsiveContainer.

Bar chart data:

S:3.5, M:5.0, T:4.2, W:6.0, T:4.8, F:7.2, S:2.0
  • barCategoryGap="30%", margins top:20 right:0 left:0 bottom:0
  • XAxis: fill: #898989, fontSize: 11, fontFamily: 'Sofia Pro Regular', no axis/tick lines
  • Bar radius [6,6,6,6]. All bars #303030 except Friday (index 5) which is #FFD85F
  • Custom tooltip: only shows on the Friday bar (value 7.2), displays "5h 23m" in a yellow pill bg-[#FFD85F] text-[#303030] text-xs rounded-full px-3 py-1 shadow-md. Cursor disabled, position y: -30.

Card 3: Focus Timer Card

Same card wrapper as Activity card. Title: "Focus timer".

Ring (SVG 180x180):

  • Center: cx=90, cy=90, radius=68
  • Yellow arc stroke (#FFD85F, strokeWidth 10) covering 70% of circumference, starting from top (rotated -90deg)
  • 60 tick marks around the ring (tickInner = r-4, tickOuter = r+4). Ticks in the progress zone are hidden; remaining ticks are #898989 at 90% opacity, strokeWidth 1.2, round linecap.
  • Center text: "02:35" (fontSize 22, fill #303030) and "Deep Focus" below (fontSize 10, fill #898989)

Controls: Below ring, full width flex between:

  • Left: Play + Pause buttons (white circles w-10 h-10, icons 14px)
  • Right: Reset button (dark circle bg-[#303030], RotateCcw icon in white)

Card 4: Onboarding / Induction Column

Same card wrapper. flex flex-col gap-4 lg:h-full.

Header: "Induction" (text-lg) + "18%" (text-4xl).

Stacked bar (3 segments, flex row):

  • 30% yellow bg-[#FFD85F] rounded-xl h-10 with "Task" label inside
  • 25% dark bg-[#303030] rounded-xl h-10
  • 20% gray bg-[#898989] rounded-xl h-10
  • Each has a percentage label above (text-xs text-[#898989])

Task list (dark panel): bg-[#303030] rounded-3xl p-5 flex flex-col gap-2 flex-1.

  • Header: "Pending Actions" (text-lg text-white) + "2/8" (text-base text-[#898989])
  • 5 task rows, each: flex items-center gap-3 py-2 border-b border-white/5 last:border-0
    • Icon circle: w-8 h-8 rounded-full bg-white/10, icon 13px text-white/60
    • Title + time. Done tasks: line-through text-white/30. Undone: text-white
    • Time: text-xs text-white/30
    • Checkbox: done = yellow circle w-5 h-5 bg-[#FFD85F] with Check icon 10px; undone = border border-white/20 circle

Tasks data:

  1. Screening, Sep 13 08:30, done, Monitor icon
  2. Sync Session, Sep 13 10:30, done, Users icon
  3. Sprint Recap, Sep 13 13:00, not done, MessageSquare icon
  4. Set Q3 Targets, Sep 13 14:45, not done, Pencil icon
  5. Policy Walkthru, Sep 13 16:30, not done, Link icon

Card 5: Accordion Card

bg-white/60 backdrop-blur-3xl rounded-3xl overflow-hidden lg:h-full. No padding on the outer container.

4 accordion items separated by border-t border-[#898989]/15:

  1. "Retirement savings"
  2. "Hardware" (expandable, open by default)
  3. "Earnings breakdown"
  4. "Perks & Benefits"

Each item button: px-5 py-4 hover:bg-[#898989]/8 transition-colors, with ChevronDown/Up (15px, text-[#898989]).

Expanded "Hardware" content: px-5 pb-4 flex items-center gap-3 border-t border-[#898989]/15:

  • Thumbnail: w-12 h-10 rounded-lg with image:
https://images.pexels.com/photos/18105/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=120
  • Text: "ThinkPad Pro" (text-sm text-[#303030]) + "Edition X1" (text-xs text-[#898989])
  • MoreVertical icon button

Card 6: Calendar Card

Same card wrapper. lg:h-full flex flex-col.

Month header: Flex between — "July" (text-sm text-[#898989]), "August 2024" (text-base text-[#303030]), "September" in outlined pill (border border-[#898989]/25 rounded-full px-4 py-1).

Day headers (ml-14 sm:ml-16 mb-2): 6 days — Mon 22, Tue 23, Wed 24, Thu 25, Fri 26, Sat 27. Day 24 is highlighted (text-[#303030]), others text-[#898989].

Time grid area: h-40 lg:flex-1.

  • Left column (w-14 sm:w-16): times 8:00am, 9:00am, 10:00am, 11:00am
  • Right: relative container with dashed vertical column lines (border-l border-dashed border-[#898989]/20)
  • Event 1: Dark card bg-[#303030] rounded-2xl, absolute positioned left: 16.66%, right: 33%, top: 4px, height: 58px. "Monthly All-Hands" + "Recap milestones across squads" (hidden on small screens). 3 avatar group.
  • Event 2: White card bg-white border border-[#898989]/25 rounded-2xl, left: 55%, right: 0%, top: 84px, height: 56px. "Induction Briefing" + "Orientation for new joiners". 2 avatar group.

Avatar group images:

https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=60
https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg?auto=compress&cs=tinysrgb&w=60
https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=60

Each avatar: w-6 h-6 rounded-full object-cover border-2 border-white, overlapping with marginLeft: -6px after the first.

Responsive Behavior Summary

  • Cards use lg:h-full so they fill parent on desktop but size to content on mobile/tablet.
  • Profile photo card uses aspect-[4/3] lg:aspect-auto.
  • Activity chart uses h-48 lg:flex-1 lg:h-auto.
  • Calendar event area uses h-40 lg:flex-1.
  • Tablet grid uses alignItems: 'stretch' so same-row cards match height.
  • Mobile is a simple vertical stack with no fixed heights.
  • Segment bar text is text-xs sm:text-sm.
  • Calendar event descriptions are hidden sm:block.
  • Configs button is hidden sm:flex.
  • Nav links desktop only; hamburger mobile only.

Dependencies (package.json)

  • react 18.3.1, react-dom 18.3.1
  • recharts 3.8.1
  • lucide-react 0.344.0
  • @supabase/supabase-js 2.57.4
  • Tailwind CSS 3.4.1 with autoprefixer and postcss
  • Vite 5.4.2, TypeScript 5.5.3

Tailwind Config

Extend borderRadius with 3xl: '24px' and 4xl: '32px'. Custom colors: yellow.DEFAULT: '#FFD85F', dark-gray: '#303030', light-gray: '#898989'. Font family sans set to Century Gothic (fallback only, actual rendering uses Sofia Pro from the external sheet).

CSS (index.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  font-family: "Sofia Pro Medium", sans-serif;
  -webkit-font-smoothing: antialiased;
}

:root {
  scrollbar-width: thin;
  scrollbar-color: #e5e5e5 transparent;
}
回到全部 177 条