Add login-page site gate and refresh marketing site for complex-care positioning.
Replace HTTP Basic Auth with a branded /login flow and signed session cookie, using Next.js 16's proxy convention for route protection. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,333 @@
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
|
||||
import { MedscribeLogo } from "~/components/medscribe-logo";
|
||||
import { PhoneMockup } from "~/components/phone-mockup";
|
||||
import { PrintButton } from "~/components/print-button";
|
||||
import { SectionLabel } from "~/components/section-label";
|
||||
import {
|
||||
Card,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Executive Summary",
|
||||
description:
|
||||
"One-page executive summary for Medscribe, a private medical context app for families managing complex care.",
|
||||
};
|
||||
|
||||
const TAGLINE =
|
||||
"Your medical truth, in your pocket, and only where you say it goes.";
|
||||
|
||||
const SNAPSHOT =
|
||||
"Medscribe is a private, emergency-ready medical record for families managing complex care. Patients and caregivers keep medications, visits, timing, and baseline current day to day, so a clinician or provider can be handed exactly what matters when the system does not know the patient.";
|
||||
|
||||
const PROBLEM =
|
||||
"Someone managing a serious condition ends up somewhere new: an ER outside their network, a covering doctor, a hospital that runs different software. Their records don't transfer. The team assesses them on how they present, not on their baseline, their exact medication timing, or what changed at their last visit. The family is there and they know, but they can't produce a clear, structured record under pressure.";
|
||||
|
||||
const PROBLEM_BROADER =
|
||||
"This is not a rare edge case. It happens every day, to patients with Parkinson's, diabetes, heart disease, dementia, and a hundred other conditions that require precise, continuous management across a fragmented system. The failure is not that families don't care. The failure is that the patient's context does not travel with them.";
|
||||
|
||||
const DIFFERENTIATION =
|
||||
"The market is full of AI visit recorders, medication trackers, health-record apps, and emergency QR cards, each owning one slice. None owns the whole job. In Medscribe, the daily tools are the maintenance system for one emergency-ready record.";
|
||||
|
||||
const differentiators = [
|
||||
{
|
||||
title: "The record is the product",
|
||||
body: "Recording, scanning, reminders, and Q&A keep one private, emergency-ready record accurate. Competitors ship visit summaries; we ship a record you can hand over in a crisis.",
|
||||
},
|
||||
{
|
||||
title: "Private by architecture",
|
||||
body: "AI runs on-device: no cloud processing, no health-data upload, no tracking, no account. Others say \"encrypted\" while their store disclosures admit cloud collection.",
|
||||
},
|
||||
{
|
||||
title: "Facts-first, not a guess",
|
||||
body: "Medication answers render trusted drug facts deterministically, deferring dosing and diagnosis to a clinician or pharmacist. Built for complex-care families, not a general health bot.",
|
||||
},
|
||||
];
|
||||
|
||||
const scenarios = [
|
||||
{
|
||||
title: "The ER that doesn't know you",
|
||||
body: "A patient on time-critical medication ends up at a hospital outside their network. Missing a dose by hours isn't an inconvenience; it's a medical event. Nobody has the schedule, and the family can't produce it under pressure.",
|
||||
},
|
||||
{
|
||||
title: "The caregiver handoff",
|
||||
body: "An adult child manages a parent's medications, appointments, and history. When they're not there, the context disappears: a sibling visits, a home aide covers, a shift changes. Critical details live in one person's memory.",
|
||||
},
|
||||
{
|
||||
title: "The new diabetic, overwhelmed",
|
||||
body: "A newly diagnosed patient leaves with insulin timing, diet changes, and follow-ups they half-remember. By the next visit, the provider can't tell what was understood, tried, or missed.",
|
||||
},
|
||||
];
|
||||
|
||||
const impact = [
|
||||
{
|
||||
title: "Fewer blank handoffs",
|
||||
body: "When a caregiver or clinician takes over, the facts are already assembled: conditions, medications, allergies, baseline, contacts, and recent changes.",
|
||||
},
|
||||
{
|
||||
title: "Safer medication moments",
|
||||
body: "Time-critical schedules and dose history stay visible, so a missed or delayed medication is easier to catch before it becomes a crisis.",
|
||||
},
|
||||
{
|
||||
title: "Patients and providers aligned",
|
||||
body: "Families see what changed and why; providers get a current snapshot instead of reconstructing it from a stressed family's memory.",
|
||||
},
|
||||
];
|
||||
|
||||
const printLightTokens = {
|
||||
"--color-foreground": "#0f172a",
|
||||
"--color-primary": "#0f766e",
|
||||
"--color-surface": "#ffffff",
|
||||
"--color-border-soft": "#e2e8f0",
|
||||
"--color-muted-foreground": "#475569",
|
||||
color: "#0f172a",
|
||||
} as CSSProperties;
|
||||
|
||||
export default function ExecutiveSummaryPage() {
|
||||
return (
|
||||
<>
|
||||
{/* ===================== SCREEN ===================== */}
|
||||
<div className="print-hidden mx-auto max-w-6xl space-y-14 px-4 py-10 sm:px-6 lg:space-y-20 lg:py-14">
|
||||
{/* Hero */}
|
||||
<section className="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(220px,280px)] lg:gap-14">
|
||||
<div className="space-y-5">
|
||||
<SectionLabel>Executive Summary · June 2026</SectionLabel>
|
||||
<div className="space-y-3">
|
||||
<h1 className="font-serif text-5xl font-semibold tracking-tight text-foreground sm:text-6xl">
|
||||
Medscribe
|
||||
</h1>
|
||||
<p className="font-serif text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
|
||||
{TAGLINE}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-base leading-relaxed text-muted-foreground sm:text-lg">
|
||||
{SNAPSHOT}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="justify-self-center lg:justify-self-end">
|
||||
<PhoneMockup
|
||||
src="/screenshots/home.png"
|
||||
alt="Medscribe home screen"
|
||||
width={200}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* The Problem */}
|
||||
<section className="space-y-5">
|
||||
<SectionLabel>The problem</SectionLabel>
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
The patient's context does not travel with them.
|
||||
</h2>
|
||||
<div className="grid gap-6 leading-relaxed text-muted-foreground lg:grid-cols-2 lg:gap-10">
|
||||
<p>{PROBLEM}</p>
|
||||
<p className="font-medium text-foreground">{PROBLEM_BROADER}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Scenarios */}
|
||||
<section className="space-y-6">
|
||||
<SectionLabel>Who this is for</SectionLabel>
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
The moments where context is everything.
|
||||
</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{scenarios.map((scenario) => (
|
||||
<Card key={scenario.title} className="card-hover">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{scenario.title}</CardTitle>
|
||||
<CardDescription>{scenario.body}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Differentiation */}
|
||||
<section className="space-y-6">
|
||||
<SectionLabel>Why this is different</SectionLabel>
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
Everyone owns a slice. We own the whole job.
|
||||
</h2>
|
||||
<p className="max-w-4xl leading-relaxed text-muted-foreground">
|
||||
{DIFFERENTIATION}
|
||||
</p>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{differentiators.map((item) => (
|
||||
<Card key={item.title} className="card-hover">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{item.title}</CardTitle>
|
||||
<CardDescription>{item.body}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Impact */}
|
||||
<section className="space-y-6">
|
||||
<SectionLabel>Potential impact</SectionLabel>
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
Less panic, more context, better handoffs.
|
||||
</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{impact.map((item) => (
|
||||
<Card
|
||||
key={item.title}
|
||||
className="card-hover border-primary-button/20 bg-primary-button text-white"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">{item.title}</CardTitle>
|
||||
<CardDescription className="text-white/75">
|
||||
{item.body}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Beta */}
|
||||
<section className="flex flex-col gap-5 rounded-xl border border-border-soft bg-surface p-6 sm:flex-row sm:items-center sm:justify-between sm:p-8">
|
||||
<p className="max-w-xl text-sm leading-relaxed text-muted-foreground">
|
||||
A beta is available on iOS through TestFlight. Everything runs
|
||||
privately on the device, so no health data leaves the phone. If
|
||||
you'd like to try it, reach out.
|
||||
</p>
|
||||
<PrintButton size="lg" className="shrink-0" />
|
||||
</section>
|
||||
|
||||
<p className="border-t border-border-soft pt-6 text-sm text-muted-foreground">
|
||||
Sean O'Connor
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ===================== PRINT: dense one-page PDF ===================== */}
|
||||
<article
|
||||
style={printLightTokens}
|
||||
className="print-sheet hidden overflow-hidden print:flex print:h-[10.5in] print:flex-col print:justify-between print:px-[0.4in] print:py-[0.25in] print:text-[11pt] print:leading-[1.25]"
|
||||
>
|
||||
{/* Header */}
|
||||
<header className="grid grid-cols-[minmax(0,1fr)_1.1in] items-stretch gap-3 border-b border-teal-900/10 pb-2">
|
||||
<div className="flex flex-col justify-between py-0.5">
|
||||
<p className="text-[11pt] font-semibold tracking-[0.15em] text-primary uppercase">
|
||||
Executive Summary · June 2026
|
||||
</p>
|
||||
<div className="mt-2 flex items-center gap-2.5">
|
||||
<MedscribeLogo className="h-[20pt] w-auto text-foreground" />
|
||||
<h1 className="font-serif text-[22pt] leading-none font-semibold tracking-tight text-foreground">
|
||||
Medscribe
|
||||
</h1>
|
||||
</div>
|
||||
<p className="mt-2 font-serif text-[12pt] leading-snug font-medium tracking-tight text-foreground italic">
|
||||
{TAGLINE}
|
||||
</p>
|
||||
<p className="mt-3 text-[11pt] leading-[1.25] text-slate-700">
|
||||
{SNAPSHOT}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div className="h-[2in] w-[0.94in] overflow-hidden rounded-[11px] border-[3px] border-slate-950 bg-white shadow-[0_8px_18px_rgba(15,23,42,0.14)]">
|
||||
<Image
|
||||
src="/screenshots/home.png"
|
||||
alt="Medscribe home screen"
|
||||
width={1206}
|
||||
height={2622}
|
||||
priority
|
||||
unoptimized
|
||||
className="h-full w-full object-cover object-top"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* The Problem */}
|
||||
<section className="border-b border-teal-900/10 py-1">
|
||||
<h2 className="font-serif text-[12pt] font-semibold tracking-tight text-foreground">
|
||||
The Problem
|
||||
</h2>
|
||||
<p className="mt-0.5 text-[11pt] leading-[1.25] text-slate-700">
|
||||
{PROBLEM} {PROBLEM_BROADER}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Who This Is For */}
|
||||
<section className="border-b border-teal-900/10 py-1">
|
||||
<h2 className="font-serif text-[12pt] font-semibold tracking-tight text-foreground">
|
||||
Who This Is For
|
||||
</h2>
|
||||
<div className="mt-0.5 grid grid-cols-3 gap-x-4">
|
||||
{scenarios.map((scenario) => (
|
||||
<div key={scenario.title}>
|
||||
<p className="text-[11pt] font-semibold leading-[1.25] text-foreground">
|
||||
{scenario.title}
|
||||
</p>
|
||||
<p className="text-[11pt] leading-[1.25] text-slate-700">
|
||||
{scenario.body}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why This Is Different */}
|
||||
<section className="border-b border-teal-900/10 py-1">
|
||||
<h2 className="font-serif text-[12pt] font-semibold tracking-tight text-foreground">
|
||||
Why This Is Different
|
||||
</h2>
|
||||
<p className="mt-0.5 text-[11pt] leading-[1.25] text-slate-700">
|
||||
{DIFFERENTIATION}
|
||||
</p>
|
||||
<div className="mt-1 grid grid-cols-3 gap-x-4">
|
||||
{differentiators.map((item) => (
|
||||
<p
|
||||
key={item.title}
|
||||
className="text-[11pt] leading-[1.25] text-slate-700"
|
||||
>
|
||||
<span className="font-semibold text-foreground">
|
||||
{item.title}.
|
||||
</span>{" "}
|
||||
{item.body}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Impact */}
|
||||
<section className="py-1">
|
||||
<h2 className="font-serif text-[12pt] font-semibold tracking-tight text-foreground">
|
||||
Impact
|
||||
</h2>
|
||||
<div className="mt-0.5 grid grid-cols-3 gap-x-4">
|
||||
{impact.map((item) => (
|
||||
<p
|
||||
key={item.title}
|
||||
className="text-[11pt] leading-[1.25] text-slate-700"
|
||||
>
|
||||
<span className="font-semibold text-foreground">
|
||||
{item.title}.
|
||||
</span>{" "}
|
||||
{item.body}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="flex items-center justify-between border-t border-teal-900/10 pt-1 text-[11pt] text-slate-500">
|
||||
<p>Sean O'Connor</p>
|
||||
<p className="text-slate-400">
|
||||
A beta is available on iOS through TestFlight.
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { ScreenBackground } from "~/components/screen-background";
|
||||
import { SiteFooter } from "~/components/site-footer";
|
||||
import { SiteHeader } from "~/components/site-header";
|
||||
|
||||
export default function MarketingLayout({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
return (
|
||||
<>
|
||||
<ScreenBackground />
|
||||
<SiteHeader />
|
||||
<main>{children}</main>
|
||||
<SiteFooter />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,345 @@
|
||||
import {
|
||||
AlertTriangle,
|
||||
ChevronRight,
|
||||
ClipboardList,
|
||||
HeartPulse,
|
||||
Lock,
|
||||
Mic,
|
||||
Pill,
|
||||
Shield,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
|
||||
import { FeatureShowcase } from "~/components/feature-showcase";
|
||||
import { PhoneMockup } from "~/components/phone-mockup";
|
||||
import { SectionLabel } from "~/components/section-label";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card";
|
||||
|
||||
const quickActions = [
|
||||
{
|
||||
icon: HeartPulse,
|
||||
title: "Know Me card",
|
||||
meta: "Baseline, conditions, allergies",
|
||||
featured: true,
|
||||
},
|
||||
{
|
||||
icon: Pill,
|
||||
title: "Time-critical meds",
|
||||
meta: "Schedules caregivers can trust",
|
||||
},
|
||||
{
|
||||
icon: Mic,
|
||||
title: "Visit capture",
|
||||
meta: "Consent-gated, on-device",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Caregiver handoff",
|
||||
meta: "One current shared truth",
|
||||
},
|
||||
];
|
||||
|
||||
const pillars = [
|
||||
{
|
||||
icon: ClipboardList,
|
||||
title: "Keep the record current",
|
||||
body: "Capture visits, scan labels, and keep conditions, medications, allergies, contacts, and caregiver notes in one portable record.",
|
||||
},
|
||||
{
|
||||
icon: AlertTriangle,
|
||||
title: "Make the critical context obvious",
|
||||
body: "The emergency view prioritizes the facts clinicians need fast: baseline, time-critical meds, active conditions, allergies, and who to call.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Stay private by architecture",
|
||||
body: "Transcription, OCR, and medication chat run locally. No cloud AI processing. Sharing should be explicit, revocable, and encrypted.",
|
||||
},
|
||||
];
|
||||
|
||||
const impact = [
|
||||
{
|
||||
title: "Fewer blank handoffs",
|
||||
body: "When a caregiver is overwhelmed, the important facts are already assembled: conditions, medications, allergies, baseline, contacts, and recent changes.",
|
||||
},
|
||||
{
|
||||
title: "Safer medication moments",
|
||||
body: "Time-critical schedules and dose history stay visible, so a missed or delayed medication is easier to catch before it becomes a crisis.",
|
||||
},
|
||||
{
|
||||
title: "More confident families",
|
||||
body: "Caregivers can see what changed, where it came from, and what still needs a clinician or pharmacist instead of guessing from memory.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
const today = new Date().toLocaleDateString("en-US", {
|
||||
weekday: "long",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl space-y-14 px-4 py-8 sm:px-6 sm:py-12 lg:space-y-20 lg:py-14">
|
||||
|
||||
{/* Hero */}
|
||||
<section className="grid items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(230px,280px)] lg:gap-14">
|
||||
<div className="space-y-6">
|
||||
<div className="animate-fade-in-up space-y-5">
|
||||
<SectionLabel>Medscribe · Private complex-care context</SectionLabel>
|
||||
<h1 className="max-w-2xl font-serif text-4xl leading-[1.05] font-semibold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
|
||||
Be known when care gets complicated
|
||||
</h1>
|
||||
<p className="max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg">
|
||||
A private medical context app for families managing complex care.
|
||||
It keeps visits, medications, baseline, contacts, allergies, and
|
||||
emergency facts ready before the chart catches up.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{today}</p>
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-1 flex flex-wrap gap-3">
|
||||
<Button asChild size="lg">
|
||||
<a href="/executive-summary">
|
||||
Read executive summary
|
||||
<ChevronRight className="size-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg">
|
||||
<a href="#features">See how it works</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-2 flex flex-wrap gap-2">
|
||||
<Badge variant="success">On TestFlight</Badge>
|
||||
<Badge variant="outline">iOS</Badge>
|
||||
<Badge variant="outline">Emergency-ready</Badge>
|
||||
<Badge variant="outline">No cloud AI</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="animate-fade-in-up-delay-3 flex justify-center lg:justify-end">
|
||||
<div className="flex w-fit items-start justify-center">
|
||||
<PhoneMockup
|
||||
src="/screenshots/home.png"
|
||||
alt="Medscribe home dashboard"
|
||||
priority
|
||||
width={190}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Strategic spine */}
|
||||
<section className="animate-fade-in-up space-y-5">
|
||||
<SectionLabel>The story</SectionLabel>
|
||||
<div className="grid gap-6 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-start">
|
||||
<div className="space-y-3">
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
The story scatters right when it matters
|
||||
</h2>
|
||||
<p className="max-w-xl leading-relaxed text-muted-foreground">
|
||||
A daughter remembers the medication schedule. A spouse knows what
|
||||
normal looks like. A specialist mentioned a change three visits ago.
|
||||
In a crisis, those details are scattered across people, portals, and
|
||||
memory.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-border-soft bg-surface p-5 shadow-[0_1px_4px_rgba(0,0,0,0.05)]">
|
||||
<div className="flex items-start gap-3">
|
||||
<HeartPulse className="mt-0.5 size-5 shrink-0 text-primary" />
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-serif text-xl font-semibold tracking-tight">
|
||||
One current story
|
||||
</h3>
|
||||
<p className="text-sm leading-relaxed text-muted-foreground">
|
||||
Medscribe gives the family a private place to keep that context
|
||||
alive: current meds, timing, baseline, allergies, recent visit
|
||||
summaries, emergency contacts, and the source trail behind each
|
||||
fact.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{quickActions.map((action) => {
|
||||
const Icon = action.icon;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={action.title}
|
||||
className={`card-hover ${action.featured ? "border-primary-button/20 bg-primary-button text-white" : ""}`}
|
||||
>
|
||||
<CardHeader className="gap-3">
|
||||
<div
|
||||
className={`flex size-10 items-center justify-center rounded-[10px] ${
|
||||
action.featured ? "bg-white/18" : "bg-primary-light"
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
className={`size-5 ${action.featured ? "text-white" : "text-primary"}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className={action.featured ? "text-white" : ""}>
|
||||
{action.title}
|
||||
</CardTitle>
|
||||
<CardDescription
|
||||
className={action.featured ? "text-white/72" : ""}
|
||||
>
|
||||
{action.meta}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Interactive feature showcase */}
|
||||
<section id="features" className="animate-fade-in-up scroll-mt-24 space-y-5">
|
||||
<div className="space-y-2">
|
||||
<SectionLabel>The record</SectionLabel>
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
The pieces that keep the story current
|
||||
</h2>
|
||||
<p className="max-w-2xl text-muted-foreground">
|
||||
Visits, medications, reminders, search, and questions all point toward
|
||||
the same outcome: a record the family can trust when the stakes rise.
|
||||
</p>
|
||||
</div>
|
||||
<FeatureShowcase />
|
||||
</section>
|
||||
|
||||
{/* Privacy */}
|
||||
<section id="privacy" className="animate-fade-in-up scroll-mt-24 space-y-6">
|
||||
<div className="space-y-3">
|
||||
<SectionLabel>Why this is different</SectionLabel>
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
Built for the family record, not another cloud inbox
|
||||
</h2>
|
||||
<p className="max-w-2xl text-muted-foreground">
|
||||
The crowded space already has visit recorders, medication apps, and
|
||||
caregiver portals. Medscribe's wedge is the private, portable
|
||||
context layer families control before an institution is ready.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{pillars.map((pillar) => {
|
||||
const Icon = pillar.icon;
|
||||
|
||||
return (
|
||||
<Card key={pillar.title} className="card-hover">
|
||||
<CardHeader>
|
||||
<div className="flex size-10 items-center justify-center rounded-[10px] bg-primary-light">
|
||||
<Icon className="size-5 text-primary" />
|
||||
</div>
|
||||
<CardTitle>{pillar.title}</CardTitle>
|
||||
<CardDescription>{pillar.body}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Card className="border-primary/15 bg-primary-light/40">
|
||||
<CardContent className="flex items-start gap-4 pt-5">
|
||||
<Lock className="mt-0.5 size-5 shrink-0 text-primary" />
|
||||
<p className="text-sm leading-relaxed text-foreground">
|
||||
All AI models run on your device. No health data is uploaded for
|
||||
processing. The medication chatbot stays in drug-information
|
||||
territory. It defers dosing and diagnosis questions to your
|
||||
clinician or pharmacist.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
{/* Screenshot strip */}
|
||||
<section className="animate-fade-in-up space-y-6">
|
||||
<SectionLabel>What travels with them</SectionLabel>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{[
|
||||
{ src: "/screenshots/emergency-record.png", label: "Emergency record" },
|
||||
{ src: "/screenshots/appointment-summary.png", label: "Visit summary" },
|
||||
{ src: "/screenshots/medications.png", label: "Medication list" },
|
||||
{ src: "/screenshots/chat.png", label: "Medication questions" },
|
||||
].map((shot) => (
|
||||
<Card key={shot.src} className="card-hover overflow-hidden">
|
||||
<div className="flex min-h-[270px] items-start justify-center bg-surface-soft p-4">
|
||||
<PhoneMockup src={shot.src} alt={shot.label} width={112} />
|
||||
</div>
|
||||
<p className="border-t border-border-soft px-4 py-3 text-center text-sm font-medium text-muted-foreground">
|
||||
{shot.label}
|
||||
</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Impact */}
|
||||
<section id="impact" className="animate-fade-in-up scroll-mt-24 space-y-6">
|
||||
<div className="space-y-3">
|
||||
<SectionLabel>Potential impact</SectionLabel>
|
||||
<h2 className="font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
Less panic, more context, better handoffs
|
||||
</h2>
|
||||
<p className="max-w-2xl text-muted-foreground">
|
||||
The goal is simple: make the person easier to understand at the exact
|
||||
moment their care team has the least context.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{impact.map((item) => (
|
||||
<Card key={item.title} className="card-hover">
|
||||
<CardHeader>
|
||||
<CardTitle>{item.title}</CardTitle>
|
||||
<CardDescription>{item.body}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="animate-fade-in-up">
|
||||
<Card className="overflow-hidden border-primary-button/20 bg-primary-button text-white">
|
||||
<CardHeader className="gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="space-y-2">
|
||||
<CardTitle className="text-white">Try Medscribe on iOS</CardTitle>
|
||||
<CardDescription className="text-white/75">
|
||||
The app is live on TestFlight. Reach out for an invite if
|
||||
you're managing medications, visits, or emergency context for
|
||||
someone you love.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white/30 bg-white text-primary-button hover:bg-white/90"
|
||||
>
|
||||
<a href="https://soconnor.dev">
|
||||
Request an invite
|
||||
</a>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user