Skip to main content
Skip to content
Template Empire
PulseCarev1.10.12
Live DemoBuy — $75

Last updated on 4 June 2026

UI06 — PulseCare HealthTech

A production-ready telehealth & healthcare SaaS UI template built with Next.js, Tailwind CSS v4, GSAP, and Motion.

Preview

Features

  • Static export — deploy anywhere (Vercel, Netlify, S3, GitHub Pages)
  • Dark-first design — OKLCH colour system with light mode toggle
  • Smooth scroll — Lenis-powered scroll experience
  • GSAP animations — 3D hero headline, ScrollTrigger-driven section reveals
  • Motion — viewport-triggered entrance animations, spring micro-interactions
  • Multi-page dashboard — health metrics, patient timeline, PHI masking, scheduling, provider profile, settings
  • PHI masking — demo of HIPAA-aware data masking pattern in the dashboard
  • Accessible — WCAG 2.2 AA, keyboard navigation, prefers-reduced-motion respected throughout
  • Performance — targets 95+ Lighthouse score across all pages

Pages

RouteDescription
/Landing page (hero, trust badges, features, how it works, pricing section, testimonials, CTA)
/aboutCompany mission and team overview
/pricingPricing plans
/blogBlog listing with search and filtering
/blog/[slug]Individual blog post
/contactContact form
/loginSign in
/registerCreate account
/forgot-passwordPassword reset
/dashboardMain dashboard overview
/dashboard/health-metricsPatient health metrics charts
/dashboard/patient-timelineChronological patient event timeline
/dashboard/phi-maskingPHI masking demo (HIPAA pattern)
/dashboard/schedulingAppointment scheduler
/dashboard/provider-profileProvider profile and credentials
/dashboard/settingsAccount settings
/privacyPrivacy policy
/termsTerms of service

Tech Stack

ToolVersion
Next.js16 (App Router, static export)
React19
TypeScript5 (strict)
Tailwind CSS4 (CSS-first config)
Motion (Motion (motion/react))12
GSAP3.14
Lenis1.3
shadcn/uilatest

Quick Start

bash
pnpm install
pnpm dev

Open http://localhost:3000.

Build

bash
pnpm build        # static export → /out
pnpm typecheck    # TypeScript check
pnpm lint         # ESLint

Deployment

The /out directory is a fully static site. Deploy by uploading to any static host.

Vercel (recommended):

bash
vercel --prod

Set the output directory to out in your Vercel project settings.

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── page.tsx            # Landing page
│   ├── about/
│   ├── blog/
│   ├── contact/
│   ├── dashboard/          # App dashboard (6 sub-pages)
│   ├── pricing/
│   └── ...                 # Auth & legal pages
├── components/
│   ├── dashboard/          # Dashboard sidebar, topbar, widgets, charts
│   ├── marketing/          # All landing page sections
│   └── ui/                 # Base UI components (shadcn/ui + React Bits)
├── config/                 # Site config, navigation
└── lib/                    # GSAP setup, animation presets, utilities

Customisation

Colours

All colours are defined as OKLCH tokens in src/app/globals.css under @theme inline. The primary teal accent drives the healthcare aesthetic. Update --primary to rebrand.

Fonts

Fonts are loaded via next/font/google in src/app/layout.tsx. Swap to any Google Font by changing the import.

Content

  • Landing page sections: src/components/marketing/
  • Dashboard data: Inline mock data in each dashboard page
  • PHI masking pattern: src/app/dashboard/phi-masking/page.tsx

License

This template is licensed commercially under the Template Empire Commercial Licence. See LICENCE.md for full terms.