Initial landing page for SagePHR
- Hero section with clear value prop - Problem/solution framing - Feature grid - Pricing section (early adopter /mo) - Email waitlist signup (Formspree) - Responsive design - Dark theme with sage green accent
This commit is contained in:
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
node_modules/
|
||||||
|
.next/
|
||||||
|
out/
|
||||||
|
.env*
|
||||||
|
.DS_Store
|
||||||
21
README.md
Normal file
21
README.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
# SagePHR Landing Page
|
||||||
|
|
||||||
|
Personal Health Record SaaS - landing page for early adopter waitlist.
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deploy
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm build
|
||||||
|
# Static export to ./out
|
||||||
|
```
|
||||||
|
|
||||||
|
## Target Launch
|
||||||
|
|
||||||
|
Q3 2026
|
||||||
20
app/layout.tsx
Normal file
20
app/layout.tsx
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import type { Metadata } from 'next'
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'SagePHR - Your Health Records, Finally Under Your Control',
|
||||||
|
description: 'Stop hunting for medical records. Start owning your health history. One secure place for all your medical records with AI-powered insights.',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body style={{ margin: 0, fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif' }}>
|
||||||
|
{children}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
275
app/page.tsx
Normal file
275
app/page.tsx
Normal file
@@ -0,0 +1,275 @@
|
|||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<main style={{ minHeight: '100vh', background: 'linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%)' }}>
|
||||||
|
{/* Header */}
|
||||||
|
<header style={{ padding: '1.5rem 2rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#10b981' }}>
|
||||||
|
🌿 SagePHR
|
||||||
|
</div>
|
||||||
|
<nav style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
|
||||||
|
<a href="#features" style={{ color: '#e2e8f0', textDecoration: 'none' }}>Features</a>
|
||||||
|
<a href="#pricing" style={{ color: '#e2e8f0', textDecoration: 'none' }}>Pricing</a>
|
||||||
|
<a href="#waitlist" style={{
|
||||||
|
background: '#10b981',
|
||||||
|
color: '#0f172a',
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
textDecoration: 'none',
|
||||||
|
fontWeight: 600
|
||||||
|
}}>
|
||||||
|
Join Waitlist
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Hero */}
|
||||||
|
<section style={{
|
||||||
|
maxWidth: '1200px',
|
||||||
|
margin: '0 auto',
|
||||||
|
padding: '6rem 2rem',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<h1 style={{
|
||||||
|
fontSize: '3.5rem',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: '#f8fafc',
|
||||||
|
marginBottom: '1.5rem',
|
||||||
|
lineHeight: 1.2
|
||||||
|
}}>
|
||||||
|
Stop hunting for medical records.<br />
|
||||||
|
<span style={{ color: '#10b981' }}>Start owning your health history.</span>
|
||||||
|
</h1>
|
||||||
|
<p style={{
|
||||||
|
fontSize: '1.25rem',
|
||||||
|
color: '#94a3b8',
|
||||||
|
maxWidth: '700px',
|
||||||
|
margin: '0 auto 2rem'
|
||||||
|
}}>
|
||||||
|
Your Personal Health Record — a secure, AI-enhanced repository for all your medical data.
|
||||||
|
One place for lab results, medications, diagnoses, and emergency access.
|
||||||
|
</p>
|
||||||
|
<div style={{ display: 'flex', gap: '1rem', justifyContent: 'center' }}>
|
||||||
|
<a href="#waitlist" style={{
|
||||||
|
background: '#10b981',
|
||||||
|
color: '#0f172a',
|
||||||
|
padding: '1rem 2rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
fontSize: '1.1rem',
|
||||||
|
fontWeight: 600,
|
||||||
|
textDecoration: 'none'
|
||||||
|
}}>
|
||||||
|
Join Waitlist — 50% Off Forever
|
||||||
|
</a>
|
||||||
|
<a href="#features" style={{
|
||||||
|
border: '1px solid #475569',
|
||||||
|
color: '#e2e8f0',
|
||||||
|
padding: '1rem 2rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
fontSize: '1.1rem',
|
||||||
|
textDecoration: 'none'
|
||||||
|
}}>
|
||||||
|
Learn More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Problem */}
|
||||||
|
<section style={{
|
||||||
|
background: 'rgba(15, 23, 42, 0.5)',
|
||||||
|
padding: '4rem 2rem',
|
||||||
|
borderTop: '1px solid #1e293b',
|
||||||
|
borderBottom: '1px solid #1e293b'
|
||||||
|
}}>
|
||||||
|
<div style={{ maxWidth: '1000px', margin: '0 auto', textAlign: 'center' }}>
|
||||||
|
<h2 style={{ fontSize: '2rem', color: '#f8fafc', marginBottom: '2rem' }}>
|
||||||
|
The Problem
|
||||||
|
</h2>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '2rem' }}>
|
||||||
|
<div style={{ padding: '1.5rem', background: 'rgba(30, 41, 59, 0.5)', borderRadius: '0.75rem' }}>
|
||||||
|
<div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>📁</div>
|
||||||
|
<div style={{ color: '#94a3b8' }}>
|
||||||
|
Average patient has records scattered across <strong style={{ color: '#f8fafc' }}>5-7 providers</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '1.5rem', background: 'rgba(30, 41, 59, 0.5)', borderRadius: '0.75rem' }}>
|
||||||
|
<div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>📋</div>
|
||||||
|
<div style={{ color: '#94a3b8' }}>
|
||||||
|
<strong style={{ color: '#f8fafc' }}>1 in 4 Americans</strong> have incomplete medical histories
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ padding: '1.5rem', background: 'rgba(30, 41, 59, 0.5)', borderRadius: '0.75rem' }}>
|
||||||
|
<div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>🔍</div>
|
||||||
|
<div style={{ color: '#94a3b8' }}>
|
||||||
|
Paper records get <strong style={{ color: '#f8fafc' }}>lost, faxed, forgotten</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features */}
|
||||||
|
<section id="features" style={{ maxWidth: '1200px', margin: '0 auto', padding: '5rem 2rem' }}>
|
||||||
|
<h2 style={{ fontSize: '2rem', color: '#f8fafc', marginBottom: '3rem', textAlign: 'center' }}>
|
||||||
|
One Secure Place for Everything
|
||||||
|
</h2>
|
||||||
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem' }}>
|
||||||
|
<FeatureCard
|
||||||
|
emoji="🧪"
|
||||||
|
title="Lab Results & Imaging"
|
||||||
|
description="Store and organize all your test results with AI-powered trend analysis"
|
||||||
|
/>
|
||||||
|
<FeatureCard
|
||||||
|
emoji="💊"
|
||||||
|
title="Medication History"
|
||||||
|
description="Complete record of prescriptions, dosages, and allergies"
|
||||||
|
/>
|
||||||
|
<FeatureCard
|
||||||
|
emoji="🩺"
|
||||||
|
title="Doctor Visits & Diagnoses"
|
||||||
|
description="Timeline of all your medical encounters and conditions"
|
||||||
|
/>
|
||||||
|
<FeatureCard
|
||||||
|
emoji="👨👩👧👦"
|
||||||
|
title="Family Health History"
|
||||||
|
description="Track hereditary conditions and share with providers"
|
||||||
|
/>
|
||||||
|
<FeatureCard
|
||||||
|
emoji="🚨"
|
||||||
|
title="Emergency Access"
|
||||||
|
description="Share critical info with family and first responders instantly"
|
||||||
|
/>
|
||||||
|
<FeatureCard
|
||||||
|
emoji="🤖"
|
||||||
|
title="AI-Powered Insights"
|
||||||
|
description="Get personalized health insights from your data"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Pricing */}
|
||||||
|
<section id="pricing" style={{
|
||||||
|
background: 'rgba(16, 185, 129, 0.1)',
|
||||||
|
padding: '5rem 2rem',
|
||||||
|
textAlign: 'center'
|
||||||
|
}}>
|
||||||
|
<div style={{ maxWidth: '600px', margin: '0 auto' }}>
|
||||||
|
<h2 style={{ fontSize: '2rem', color: '#f8fafc', marginBottom: '1rem' }}>
|
||||||
|
Simple, Transparent Pricing
|
||||||
|
</h2>
|
||||||
|
<p style={{ color: '#94a3b8', marginBottom: '2rem' }}>
|
||||||
|
Launch Q3 2026 • Early adopter pricing
|
||||||
|
</p>
|
||||||
|
<div style={{
|
||||||
|
background: 'rgba(15, 23, 42, 0.8)',
|
||||||
|
padding: '3rem',
|
||||||
|
borderRadius: '1rem',
|
||||||
|
border: '2px solid #10b981'
|
||||||
|
}}>
|
||||||
|
<div style={{ fontSize: '3rem', fontWeight: 'bold', color: '#10b981' }}>
|
||||||
|
$9<span style={{ fontSize: '1.25rem', color: '#94a3b8' }}>/month</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ color: '#f8fafc', marginTop: '0.5rem', marginBottom: '1.5rem' }}>
|
||||||
|
50% off forever for early adopters
|
||||||
|
</div>
|
||||||
|
<ul style={{
|
||||||
|
listStyle: 'none',
|
||||||
|
padding: 0,
|
||||||
|
textAlign: 'left',
|
||||||
|
color: '#e2e8f0',
|
||||||
|
marginBottom: '2rem'
|
||||||
|
}}>
|
||||||
|
<li style={{ padding: '0.5rem 0' }}>✅ Unlimited health records</li>
|
||||||
|
<li style={{ padding: '0.5rem 0' }}>✅ AI-powered health insights</li>
|
||||||
|
<li style={{ padding: '0.5rem 0' }}>✅ Family sharing (up to 5 members)</li>
|
||||||
|
<li style={{ padding: '0.5rem 0' }}>✅ Export to any provider (PDF, FHIR, C-CDA)</li>
|
||||||
|
<li style={{ padding: '0.5rem 0' }}>✅ Emergency access QR code</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#waitlist" style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
background: '#10b981',
|
||||||
|
color: '#0f172a',
|
||||||
|
padding: '1rem 2rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
fontSize: '1.1rem',
|
||||||
|
fontWeight: 600,
|
||||||
|
textDecoration: 'none'
|
||||||
|
}}>
|
||||||
|
Reserve Your Spot
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Waitlist */}
|
||||||
|
<section id="waitlist" style={{ maxWidth: '600px', margin: '0 auto', padding: '5rem 2rem', textAlign: 'center' }}>
|
||||||
|
<h2 style={{ fontSize: '2rem', color: '#f8fafc', marginBottom: '1rem' }}>
|
||||||
|
Join the Waitlist
|
||||||
|
</h2>
|
||||||
|
<p style={{ color: '#94a3b8', marginBottom: '2rem' }}>
|
||||||
|
First 500 get lifetime 50% discount. No spam, just updates on launch.
|
||||||
|
</p>
|
||||||
|
<form action="https://formspree.io/f/xpwzgvqr" method="POST" style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Enter your email"
|
||||||
|
required
|
||||||
|
style={{
|
||||||
|
padding: '1rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
border: '1px solid #475569',
|
||||||
|
background: 'rgba(15, 23, 42, 0.5)',
|
||||||
|
color: '#f8fafc',
|
||||||
|
fontSize: '1rem'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
style={{
|
||||||
|
background: '#10b981',
|
||||||
|
color: '#0f172a',
|
||||||
|
padding: '1rem',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
border: 'none',
|
||||||
|
fontSize: '1.1rem',
|
||||||
|
fontWeight: 600,
|
||||||
|
cursor: 'pointer'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Join Waitlist
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer style={{
|
||||||
|
borderTop: '1px solid #1e293b',
|
||||||
|
padding: '2rem',
|
||||||
|
textAlign: 'center',
|
||||||
|
color: '#64748b'
|
||||||
|
}}>
|
||||||
|
<div style={{ marginBottom: '1rem' }}>
|
||||||
|
🌿 SagePHR
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '0.875rem' }}>
|
||||||
|
© 2026 SagePHR. Your health data, your control.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FeatureCard({ emoji, title, description }: { emoji: string; title: string; description: string }) {
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
padding: '1.5rem',
|
||||||
|
background: 'rgba(30, 41, 59, 0.5)',
|
||||||
|
borderRadius: '0.75rem',
|
||||||
|
border: '1px solid #334155'
|
||||||
|
}}>
|
||||||
|
<div style={{ fontSize: '2rem', marginBottom: '0.75rem' }}>{emoji}</div>
|
||||||
|
<h3 style={{ color: '#f8fafc', margin: '0 0 0.5rem', fontSize: '1.1rem' }}>{title}</h3>
|
||||||
|
<p style={{ color: '#94a3b8', margin: 0, fontSize: '0.95rem' }}>{description}</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
8
next.config.ts
Normal file
8
next.config.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import type { NextConfig } from 'next'
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
output: 'export',
|
||||||
|
images: { unoptimized: true }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default nextConfig
|
||||||
19
package.json
Normal file
19
package.json
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "sagephr-landing",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "^15.2.0",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.0.0",
|
||||||
|
"@types/react": "^19.0.0",
|
||||||
|
"typescript": "^5.9.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
21
tsconfig.json
Normal file
21
tsconfig.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [{ "name": "next" }],
|
||||||
|
"paths": { "@/*": ["./*"] }
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user