Build a Cross‑Platform Time Clock App (Multi‑Company, Employees, Geotagging, Reports)

You are Cursor, acting as a senior full‑stack engineer. Generate a production‑ready application with clean, modular code, strong typing, and tests. Use modern, boring tech that deploys easily.

Tech Stack (preferred)

Frontend: Next.js 14 (App Router), TypeScript, React Server Components where appropriate

UI: Tailwind CSS + shadcn/ui + lucide-react icons

State: React Query (TanStack Query) for data fetching; Zod for validation

Auth: NextAuth (Auth.js) or Supabase Auth; support email+password first (can add OAuth later)

Backend: Next.js API routes or Route Handlers; if using Supabase, leverage Database + RLS

DB: PostgreSQL (Supabase). Use Prisma or Supabase SQL directly. Provide both options in code where feasible.

Background jobs: Next.js Route Handlers / Edge Functions as needed

Storage: Supabase storage for avatars/files

Reports/Export: server-side CSV + PDF (e.g., pdf-lib or @react-pdf/renderer)

Maps/Geotag: HTML5 Geolocation API in browser; store lat/long/accuracy; optional reverse geocode later

PWA: Enable PWA behavior for phone/tablet/desktop (installable, offline cache for clocking while offline)

Testing: Vitest + Playwright (critical flows). ESLint + Prettier

Deployment: Vercel for web + Supabase for DB

Core Requirements

Multi‑tenant: Create multiple Companies. Each company has many Employees. Users may belong to one or multiple companies with roles.

Two roles:

Admin: manage companies, employees, timesheets, run reports, export CSV/PDF, view profiles.

Employee (user-level): clock in/out, view/edit own times (if allowed), download own timesheet report.

Profiles:

Company profile: name, legal name, time zone, pay period (weekly/biweekly/semimonthly/monthly), rounding rules (e.g., 5/10/15 min), break policies, overtime rules, geofence (optional radius), business address.

Employee profile: first/last, email, phone, status (active/inactive), hire date, employee ID, role title, base location, pay type (hourly/salary just as label), optional avatar.

User account links to employees (so a user can be an employee in multiple companies via a join table). Admins are users with company-scoped admin role.

Time Tracking:

Clock In/Out with one tap; capture timestamp, device info, and geotag (latitude, longitude, accuracy in meters, optional address if available later), note (optional), method (web/pwa)

GPS Prompting: ask permission; if declined, still allow clocking but label entry as no_location with reason

Offline mode: queue entries locally when offline; sync on reconnect

Prevent double punches; warn if already clocked in

Breaks: start/stop break, or deduct auto-break per company policy

Manual adjustments: Admins can edit entries with an audit log (who/when/what changed)

Timezone correctness: store timestamps in UTC, display in company timezone

Geotagging / Geofencing:

Store lat/long/accuracy per punch

If company has a geofence (center+radius meters), flag entries outside_geofence

Show map preview pin on entry detail (use a simple static map tile or library; keep vendor-agnostic)

Reports:

Employee Self‑Report: date range filter; totals by day/week; export CSV/PDF

Admin Reports: by company, by employee, by date range; include raw entries and rollups (regular hours, overtime, breaks, flags for outside_geofence or missing punches). Export CSV/PDF

Profiles export: company-wise employee profile export when needed

Access Control:

RBAC with company scope. Employees only see their own data. Admins see their company’s data. A Platform SuperAdmin (env‑gated) can see all for support.

If using Supabase: enforce RLS by company_id and user_id joins

Auditing & Compliance:

Every create/update/delete on time entries recorded in audit_log with before/after JSON

Keep immutable punch history; allow corrections via new revisions tied to original entry

UX:

Clock screen with big buttons (Clock In / Start Break / End Break / Clock Out)

Clear status: “You are clocked in since HH:MM” with running duration

Responsive, mobile-first; tablet/kiosk friendly (PIN or QR login optional later)

Data Model (Postgres)

Use snake_case. Provide Prisma schema and raw SQL migrations.

Tables

users (id, email, password_hash or external, name, created_at)

companies (id, name, legal_name, timezone, pay_period, rounding_rule_minutes, auto_break_minutes, overtime_policy_json, geofence_center_lat, geofence_center_lng, geofence_radius_m, address_json, created_at)

company_users (id, company_id, user_id, role ENUM('ADMIN','EMPLOYEE'), created_at)

employees (id, company_id, user_id NULLABLE, employee_code, first_name, last_name, email, phone, status ENUM('ACTIVE','INACTIVE'), hire_date, role_title, base_location_json, pay_type ENUM('HOURLY','SALARY'), avatar_url, created_at)

time_entries (id, company_id, employee_id, type ENUM('CLOCK_IN','CLOCK_OUT','BREAK_START','BREAK_END'), occurred_at_utc timestamptz, client_tz, lat NUMERIC(9,6) NULL, lng NUMERIC(9,6) NULL, accuracy_m NUMERIC NULL, location_status ENUM('ok','no_location','outside_geofence') DEFAULT 'ok', note TEXT NULL, device_fingerprint TEXT NULL, source ENUM('web','pwa'), linked_session_id UUID NULL)

time_sessions (id, company_id, employee_id, started_at_utc, ended_at_utc NULL, total_seconds INT NULL, flags JSONB)

audit_log (id, actor_user_id, company_id, entity_type, entity_id, action ENUM('CREATE','UPDATE','DELETE'), before JSONB NULL, after JSONB NULL, created_at)

invites (id, company_id, email, role, token, expires_at, accepted_at)

Notes

Sessions are optional but useful to compute totals efficiently. Each CLOCK_IN…CLOCK_OUT pair forms a session; breaks are sub-intervals.

Keep all timestamps UTC, display in company tz via server utilities.

API Contract (Route Handlers)

Create typed handlers with Zod validation. Return JSON: { data, error }. All endpoints require auth; RBAC enforced.

POST /api/auth/register
POST /api/auth/login
POST /api/companies // create company (admin or superadmin)
GET /api/companies // list for current user
GET /api/companies/:id // details
PATCH/DELETE /api/companies/:id


POST /api/companies/:id/employees
GET /api/companies/:id/employees
GET /api/employees/:id
PATCH/DELETE /api/employees/:id


POST /api/time/punch // { employeeId, type, note, geolocation: {lat,lng,accuracy}, clientTz }
POST /api/time/sync-offline // batch punch payload from PWA queue
GET /api/time/entries?companyId&employeeId&from&to
GET /api/time/sessions?companyId&employeeId&from&to


GET /api/reports/employee?employeeId&from&to&format=csv|pdf
GET /api/reports/company?companyId&from&to&format=csv|pdf


GET /api/export/employees?companyId&format=csv

Include pagination where lists can be large. For reports, stream CSV when possible.

Geotagging Details

Use navigator.geolocation.getCurrentPosition with { enableHighAccuracy: true, timeout: 8000, maximumAge: 0 }

Store lat, lng, accuracy_m and a location_status:

ok if coords present and (if geofence set) inside radius

outside_geofence if coords present but outside

no_location if user denied or timeout

Geofence check: haversine distance vs. geofence_radius_m

Show a tiny map snapshot on punch detail (defer provider selection; keep abstraction)

Timesheet Logic

Rounding (configurable): apply to session boundaries (in/out) per company rule: 5, 10, or 15 min to nearest (with half-up behavior). Preserve raw times in DB; compute rounded on report

Overtime: support daily (8+), weekly (40+), configurable in overtime_policy_json

Breaks: subtract explicit break intervals; optional auto-deduct; flag if missing break per policy

Edge cases: unpaired punches -> flagged, surfaced in admin review

Pages / Screens

Auth: login/register, accept invite

Employee:

Clock (primary): big buttons, current status, last punch, geotag prompt, offline queue status

My Timesheet: date range, list of sessions, totals, export CSV/PDF

Profile: edit personal info (limited)

Admin:

Dashboard: company selector, KPIs (active employees today, outside-geofence flags, missing punches)

Companies: create/edit company settings

Employees: CRUD, invite flow, import CSV

Timesheets: filters (company, employee, date range), review & approve edits, bulk export

Reports: employee report and company summary with exports

Audit Log: searchable table

Settings: roles, pay periods, rounding, geofence, overtime, break policies

File Structure (example)
app/
(auth)/login/page.tsx
(auth)/register/page.tsx
dashboard/page.tsx
companies/[companyId]/settings/page.tsx
companies/[companyId]/employees/page.tsx
employees/[employeeId]/page.tsx
clock/page.tsx
timesheets/page.tsx
reports/page.tsx
api/
auth/register/route.ts
auth/login/route.ts
companies/route.ts
companies/[id]/route.ts
companies/[id]/employees/route.ts
employees/[id]/route.ts
time/punch/route.ts
time/sync-offline/route.ts
time/entries/route.ts
time/sessions/route.ts
reports/employee/route.ts
reports/company/route.ts
export/employees/route.ts
components/
ClockWidget.tsx
GeoPrompt.tsx
MapPreview.tsx
DataTable.tsx
DateRangePicker.tsx
RoleGate.tsx
lib/
auth.ts
db.ts (Prisma) or supabase.ts
rls.ts (helpers for RLS policies)
geofence.ts (haversine)
timecalc.ts (rounding, overtime)
csv.ts, pdf.ts
zod-schemas.ts
prisma/
schema.prisma
migrations/
Prisma Schema (excerpt)

Provide a full schema.prisma covering all tables above, relations, and enums. Generate types and migrations.

SQL (Supabase) — Tables & RLS (excerpt)

SQL to create tables, indexes, and enums

RLS policies enforcing:

users can read their own user row

company_users controls access; employee rows restricted by company membership

time_entries restricted to employees in same company; employees can read their own entries; admins can read company entries

Validation & Error States

Zod schemas for all payloads

Graceful fallbacks when geolocation fails (surface reason on UI)

Prevent duplicate punches within N minutes

PWA & Offline

Service worker caches core routes

Local queue for punches when offline;

README.md

@@ -1,10 +1,13 @@
 ---
-title: Timekeeper Pro
-emoji: 💻
-colorFrom: pink
-colorTo: purple
+title: TimeKeeper Pro ⏱️
+colorFrom: gray
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,142 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background-color: var(--secondary-700);
+          color: white;
+          padding: 3rem 0;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+        }
+        .footer-logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          margin-bottom: 1rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .footer-description {
+          color: var(--secondary-200);
+          margin-bottom: 1.5rem;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+        }
+        .social-link {
+          color: white;
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          background-color: rgba(255,255,255,0.1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: background-color 0.2s;
+        }
+        .social-link:hover {
+          background-color: var(--primary-500);
+        }
+        .footer-heading {
+          font-weight: 600;
+          margin-bottom: 1.25rem;
+          font-size: 1.125rem;
+        }
+        .footer-links {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+        .footer-link {
+          color: var(--secondary-200);
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-link:hover {
+          color: white;
+        }
+        .copyright {
+          margin-top: 3rem;
+          padding-top: 1.5rem;
+          border-top: 1px solid rgba(255,255,255,0.1);
+          text-align: center;
+          color: var(--secondary-300);
+        }
+        @media (max-width: 768px) {
+          .container {
+            grid-template-columns: 1fr 1fr;
+          }
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <div class="footer-col">
+            <div class="footer-logo">
+              <i data-feather="clock"></i>
+              TimeKeeper Pro
+            </div>
+            <p class="footer-description">
+              Modern time tracking solution for businesses of all sizes with geotagging and reporting.
+            </p>
+            <div class="social-links">
+              <a href="#" class="social-link"><i data-feather="twitter"></i></a>
+              <a href="#" class="social-link"><i data-feather="facebook"></i></a>
+              <a href="#" class="social-link"><i data-feather="linkedin"></i></a>
+              <a href="#" class="social-link"><i data-feather="github"></i></a>
+            </div>
+          </div>
+          <div class="footer-col">
+            <h4 class="footer-heading">Product</h4>
+            <div class="footer-links">
+              <a href="/features" class="footer-link">Features</a>
+              <a href="/pricing" class="footer-link">Pricing</a>
+              <a href="/solutions" class="footer-link">Solutions</a>
+              <a href="/updates" class="footer-link">Updates</a>
+            </div>
+          </div>
+          <div class="footer-col">
+            <h4 class="footer-heading">Resources</h4>
+            <div class="footer-links">
+              <a href="/blog" class="footer-link">Blog</a>
+              <a href="/guides" class="footer-link">Guides</a>
+              <a href="/support" class="footer-link">Support</a>
+              <a href="/api" class="footer-link">API</a>
+            </div>
+          </div>
+          <div class="footer-col">
+            <h4 class="footer-heading">Company</h4>
+            <div class="footer-links">
+              <a href="/about" class="footer-link">About Us</a>
+              <a href="/careers" class="footer-link">Careers</a>
+              <a href="/contact" class="footer-link">Contact</a>
+              <a href="/legal" class="footer-link">Legal</a>
+            </div>
+          </div>
+        </div>
+        <div class="container">
+          <div class="copyright">
+            © ${new Date().getFullYear()} TimeKeeper Pro. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    `;
+    
+    // Replace Feather icons
+    setTimeout(() => {
+      if (window.feather) {
+        window.feather.replace({ class: 'feather-inline' });
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,124 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          background-color: white;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+          padding: 1rem 0;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: var(--primary-600);
+          text-decoration: none;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .nav-links {
+          display: flex;
+          gap: 1.5rem;
+          align-items: center;
+        }
+        .nav-link {
+          color: var(--secondary-600);
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.2s;
+        }
+        .nav-link:hover {
+          color: var(--primary-600);
+        }
+        .nav-link.active {
+          color: var(--primary-600);
+          font-weight: 600;
+        }
+        .btn-primary {
+          background-color: var(--primary-600);
+          color: white;
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          font-weight: 500;
+          transition: background-color 0.2s;
+        }
+        .btn-primary:hover {
+          background-color: var(--primary-700);
+        }
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: var(--secondary-600);
+          cursor: pointer;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+            flex-direction: column;
+            position: absolute;
+            top: 70px;
+            left: 0;
+            right: 0;
+            background-color: white;
+            padding: 1rem;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+          }
+          .nav-links.open {
+            display: flex;
+          }
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      <nav class="navbar">
+        <div class="container">
+          <a href="/" class="logo">
+            <i data-feather="clock"></i>
+            TimeKeeper Pro
+          </a>
+          
+          <button class="mobile-menu-btn" id="mobileMenuBtn">
+            <i data-feather="menu"></i>
+          </button>
+          
+          <div class="nav-links" id="navLinks">
+            <a href="/features" class="nav-link">Features</a>
+            <a href="/pricing" class="nav-link">Pricing</a>
+            <a href="/about" class="nav-link">About</a>
+            <a href="/contact" class="nav-link">Contact</a>
+            <a href="/login" class="nav-link">Login</a>
+            <a href="/register" class="btn-primary">Get Started</a>
+          </div>
+        </div>
+      </nav>
+    `;
+    
+    // Initialize mobile menu toggle
+    const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
+    const navLinks = this.shadowRoot.getElementById('navLinks');
+    
+    mobileMenuBtn.addEventListener('click', () => {
+      navLinks.classList.toggle('open');
+    });
+    
+    // Replace Feather icons
+    setTimeout(() => {
+      if (window.feather) {
+        window.feather.replace({ class: 'feather-inline' });
+      }
+    }, 100);
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,108 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TimeKeeper Pro | Modern Time Tracking</title>
+    <meta name="description" content="Cross-platform time clock app with geotagging and reporting">
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                500: '#3b82f6',
+                600: '#2563eb',
+                700: '#1d4ed8',
+              },
+              secondary: {
+                50: '#f8fafc',
+                100: '#f1f5f9',
+                500: '#64748b',
+                600: '#475569',
+                700: '#334155',
+              }
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="hero bg-primary-50 rounded-xl p-8 mb-12">
+            <div class="flex flex-col md:flex-row items-center gap-8">
+                <div class="md:w-1/2">
+                    <h1 class="text-4xl md:text-5xl font-bold text-primary-700 mb-4">Time Tracking Made Simple</h1>
+                    <p class="text-lg text-secondary-600 mb-6">Geotagged clock-in/out, multi-company support, and powerful reporting for businesses of all sizes.</p>
+                    <div class="flex gap-4">
+                        <a href="/login" class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-lg font-medium shadow-md transition-colors">
+                            Get Started
+                        </a>
+                        <a href="/features" class="border border-primary-600 text-primary-600 hover:bg-primary-50 px-6 py-3 rounded-lg font-medium transition-colors">
+                            Learn More
+                        </a>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <img src="http://static.photos/technology/1024x576/42" alt="Time tracking dashboard" class="rounded-lg shadow-xl">
+                </div>
+            </div>
+        </section>
+
+        <section class="features mb-16">
+            <h2 class="text-3xl font-bold text-center mb-12 text-secondary-700">Key Features</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
+                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="clock" class="text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">One-Tap Clocking</h3>
+                    <p class="text-secondary-600">Simple in/out interface with geotagging and offline support.</p>
+                </div>
+                <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
+                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="users" class="text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Multi-Company</h3>
+                    <p class="text-secondary-600">Manage multiple businesses with role-based access control.</p>
+                </div>
+                <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
+                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="bar-chart-2" class="text-primary-600"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Advanced Reporting</h3>
+                    <p class="text-secondary-600">Export CSV/PDF reports with overtime, breaks, and geofencing.</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="cta bg-primary-600 text-white rounded-xl p-8 text-center">
+            <h2 class="text-3xl font-bold mb-4">Ready to Simplify Your Time Tracking?</h2>
+            <p class="text-primary-100 mb-6 max-w-2xl mx-auto">Join thousands of businesses using TimeKeeper Pro to manage their workforce efficiently.</p>
+            <a href="/register" class="bg-white text-primary-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold inline-block shadow-md transition-colors">
+                Start Free Trial
+            </a>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize any global functionality here
+    
+    // Example: Mobile menu toggle would be handled in the navbar component
+    
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+    
+    // Initialize any global event listeners
+});

style.css

@@ -1,28 +1,45 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --primary-50: #f0f9ff;
+    --primary-100: #e0f2fe;
+    --primary-500: #3b82f6;
+    --primary-600: #2563eb;
+    --primary-700: #1d4ed8;
+    --secondary-50: #f8fafc;
+    --secondary-100: #f1f5f9;
+    --secondary-500: #64748b;
+    --secondary-600: #475569;
+    --secondary-700: #334155;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.hero {
+    background: linear-gradient(135deg, var(--primary-50) 0%, rgba(255,255,255,1) 100%);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.feature-card:hover {
+    transform: translateY(-4px);
+    transition: transform 0.2s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.cta {
+    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Responsive typography */
+@media (min-width: 768px) {
+    html {
+        font-size: 16px;
+    }
 }
+
+@media (max-width: 767px) {
+    html {
+        font-size: 14px;
+    }
+}