8f9da2fbf0
- Move menu manager button to toolbar next to Save Menu for visibility - Implement server-side photo upload for menu items - Strip base64 data URLs from save payload to reduce size - Add scheduled tasks, quick tasks, ratings, and task categories APIs - Add vertical support and brand color features Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
655 lines
16 KiB
HTML
655 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Payfrit for Hospitals - Mobile Ordering & Staff Services</title>
|
|
<meta name="description" content="Payfrit powers hospital food services, cafeterias, micro-markets, and patient room service. BLE-enabled ordering and task management for healthcare facilities.">
|
|
<style>
|
|
:root {
|
|
--bg-primary: #0a0a0a;
|
|
--bg-card: #141414;
|
|
--bg-secondary: #1a1a1a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #a0a0a0;
|
|
--text-muted: #666666;
|
|
--border-color: #2a2a2a;
|
|
--primary: #00ff88;
|
|
--primary-hover: #00cc6a;
|
|
--primary-dim: rgba(0, 255, 136, 0.1);
|
|
--accent-blue: #3b82f6;
|
|
--accent-purple: #8b5cf6;
|
|
--accent-orange: #f59e0b;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Navigation */
|
|
.nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
padding: 20px 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(10, 10, 10, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-decoration: none;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-logo-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--primary);
|
|
color: #000;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.nav-logo-text {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-cta {
|
|
padding: 10px 24px;
|
|
background: var(--primary);
|
|
color: #000;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
background: var(--primary-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
padding: 160px 40px 100px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: var(--primary-dim);
|
|
border: 1px solid rgba(0, 255, 136, 0.3);
|
|
border-radius: 100px;
|
|
font-size: 14px;
|
|
color: var(--primary);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
margin-bottom: 24px;
|
|
background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 20px;
|
|
color: var(--text-secondary);
|
|
max-width: 700px;
|
|
margin: 0 auto 40px;
|
|
}
|
|
|
|
.hero-cta-group {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-primary {
|
|
padding: 16px 32px;
|
|
background: var(--primary);
|
|
color: #000;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-secondary {
|
|
padding: 16px 32px;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
/* Use Cases Section */
|
|
.section {
|
|
padding: 100px 40px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 18px;
|
|
color: var(--text-secondary);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Use Case Cards */
|
|
.use-cases-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
.use-case-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.use-case-card:hover {
|
|
border-color: var(--primary);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.use-case-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.use-case-icon.cafeteria { background: rgba(59, 130, 246, 0.15); }
|
|
.use-case-icon.retail { background: rgba(139, 92, 246, 0.15); }
|
|
.use-case-icon.roomservice { background: rgba(245, 158, 11, 0.15); }
|
|
.use-case-icon.staff { background: rgba(0, 255, 136, 0.15); }
|
|
|
|
.use-case-card h3 {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.use-case-card p {
|
|
color: var(--text-secondary);
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.use-case-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.use-case-tag {
|
|
padding: 6px 12px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Why Payfrit Section */
|
|
.why-section {
|
|
background: var(--bg-card);
|
|
border-top: 1px solid var(--border-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 40px;
|
|
}
|
|
|
|
.feature {
|
|
text-align: center;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: var(--primary-dim);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
.feature-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
stroke: var(--primary);
|
|
}
|
|
|
|
.feature h3 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.feature p {
|
|
color: var(--text-secondary);
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Partners Section */
|
|
.partners-section {
|
|
text-align: center;
|
|
}
|
|
|
|
.partners-note {
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.partners-logos {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 60px;
|
|
flex-wrap: wrap;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.partner-logo {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta-section {
|
|
text-align: center;
|
|
padding: 120px 40px;
|
|
}
|
|
|
|
.cta-card {
|
|
background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 24px;
|
|
padding: 80px 40px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.cta-card h2 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.cta-card p {
|
|
color: var(--text-secondary);
|
|
font-size: 18px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
padding: 40px;
|
|
border-top: 1px solid var(--border-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-text {
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer-links {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.footer-link {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer-link:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 968px) {
|
|
.hero h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.use-cases-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 48px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.nav {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.hero {
|
|
padding: 120px 20px 60px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.section {
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.partners-logos {
|
|
gap: 32px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="nav">
|
|
<a href="/" class="nav-logo">
|
|
<div class="nav-logo-icon">P</div>
|
|
<span class="nav-logo-text">Payfrit</span>
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="#use-cases" class="nav-link">Use Cases</a>
|
|
<a href="#features" class="nav-link">Features</a>
|
|
<a href="/portal/signup.html" class="nav-cta">Get Started</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-badge">
|
|
<span>Healthcare</span>
|
|
</div>
|
|
<h1>Modern Food Services for Modern Hospitals</h1>
|
|
<p class="hero-subtitle">
|
|
Payfrit powers cafeterias, micro-markets, branded restaurants, and patient room service
|
|
with BLE-enabled mobile ordering and intelligent task management.
|
|
</p>
|
|
<div class="hero-cta-group">
|
|
<a href="/portal/signup.html" class="btn-primary">Start Free Trial</a>
|
|
<a href="mailto:sales@payfrit.com" class="btn-secondary">Contact Sales</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Use Cases Section -->
|
|
<section class="section" id="use-cases">
|
|
<div class="section-header">
|
|
<div class="section-label">Use Cases</div>
|
|
<h2 class="section-title">One Platform, Every Touchpoint</h2>
|
|
<p class="section-subtitle">
|
|
Hospital food service is complex. Payfrit handles cafeterias, retail, room service, and staff operations in a single system.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="use-cases-grid">
|
|
<div class="use-case-card">
|
|
<div class="use-case-icon cafeteria">🍽</div>
|
|
<h3>Hospital Cafeterias</h3>
|
|
<p>
|
|
Staff and visitors order from their phones, skip the line, and get notified when food is ready.
|
|
Reduce wait times during peak lunch hours and improve throughput.
|
|
</p>
|
|
<div class="use-case-tags">
|
|
<span class="use-case-tag">Mobile ordering</span>
|
|
<span class="use-case-tag">Order-ahead</span>
|
|
<span class="use-case-tag">Peak management</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="use-case-card">
|
|
<div class="use-case-icon retail">🍺</div>
|
|
<h3>Branded Retail & Micro-Markets</h3>
|
|
<p>
|
|
Starbucks, Subway, grab-and-go markets, and gift shops all work with Payfrit.
|
|
Unified reporting across all vendors, regardless of who operates them.
|
|
</p>
|
|
<div class="use-case-tags">
|
|
<span class="use-case-tag">Multi-vendor</span>
|
|
<span class="use-case-tag">Grab-and-go</span>
|
|
<span class="use-case-tag">Gift shops</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="use-case-card">
|
|
<div class="use-case-icon roomservice">🛍</div>
|
|
<h3>Patient Room Service</h3>
|
|
<p>
|
|
Patients order meals from bedside tablets or their own devices. Dietary restrictions are enforced automatically.
|
|
Kitchen staff see orders by floor and room for efficient delivery.
|
|
</p>
|
|
<div class="use-case-tags">
|
|
<span class="use-case-tag">Dietary compliance</span>
|
|
<span class="use-case-tag">Bedside ordering</span>
|
|
<span class="use-case-tag">Floor routing</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="use-case-card">
|
|
<div class="use-case-icon staff">🛠</div>
|
|
<h3>Staff Services & Logistics</h3>
|
|
<p>
|
|
Beyond food: manage supply requests, equipment transport, housekeeping tasks, and maintenance calls.
|
|
Payfrit's task system routes requests to the right team automatically.
|
|
</p>
|
|
<div class="use-case-tags">
|
|
<span class="use-case-tag">Task routing</span>
|
|
<span class="use-case-tag">Supply requests</span>
|
|
<span class="use-case-tag">Maintenance</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Payfrit Section -->
|
|
<section class="section why-section" id="features">
|
|
<div class="section-header">
|
|
<div class="section-label">Why Payfrit</div>
|
|
<h2 class="section-title">Built for Complex Facilities</h2>
|
|
<p class="section-subtitle">
|
|
Hospitals aren't restaurants. Payfrit's architecture was designed for multi-location, multi-vendor, identity-aware operations.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>
|
|
<path d="M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
|
|
</svg>
|
|
</div>
|
|
<h3>BLE Service Points</h3>
|
|
<p>
|
|
Bluetooth beacons identify where orders should be delivered. A patient in room 412 or a doctor in the ER lounge
|
|
- orders route automatically.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
|
|
<circle cx="9" cy="7" r="4"/>
|
|
<path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Identity-Linked Ordering</h3>
|
|
<p>
|
|
Connect to staff directories or patient systems. Dietary restrictions, meal allowances, and departmental billing
|
|
happen automatically.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Intelligent Task System</h3>
|
|
<p>
|
|
Food orders, supply requests, and service calls all flow through one task system with priority routing,
|
|
worker assignment, and completion tracking.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners Section -->
|
|
<section class="section partners-section">
|
|
<p class="partners-note">Designed to work with major food service management companies</p>
|
|
<div class="partners-logos">
|
|
<span class="partner-logo">Sodexo</span>
|
|
<span class="partner-logo">Compass Group</span>
|
|
<span class="partner-logo">Aramark</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta-section">
|
|
<div class="cta-card">
|
|
<h2>Ready to modernize hospital food services?</h2>
|
|
<p>See how Payfrit can reduce wait times, improve patient satisfaction, and streamline operations.</p>
|
|
<div class="hero-cta-group">
|
|
<a href="/portal/signup.html" class="btn-primary">Start Free Trial</a>
|
|
<a href="mailto:sales@payfrit.com" class="btn-secondary">Schedule Demo</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p class="footer-text">© 2026 Payfrit. All rights reserved.</p>
|
|
<div class="footer-links">
|
|
<a href="/privacy.html" class="footer-link">Privacy Policy</a>
|
|
<a href="mailto:support@payfrit.com" class="footer-link">Support</a>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|