soconnor/medscribe-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refresh product captures and mobile motion

Browse Source
This commit is contained in:
soconnor
2026-08-20 22:42:03 -04:00
parent 0a353afeb7
commit 0d371313f9
41 changed files with 146 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cvs-print-summary.tsx
+8 -5
View File
@@ -162,7 +162,7 @@ export function CvsPrintSummary() {
<div className="mx-auto w-[186px] rounded-[28px] border-[6px] border-slate-950 bg-slate-950 p-1 shadow-[0_18px_45px_rgba(15,23,42,0.18)]">
<div className="overflow-hidden rounded-[19px] bg-white">
<Image
src="/screenshots/medications.png"
src="/screenshots/product-glass-2026-08-20/medications-light.png"
alt="Medscribe medications screen"
width={1206}
height={2622}
@@ -225,11 +225,13 @@ export function CvsPrintSummary() {
<PrintPage page={2}>
<section className="pt-3">
<p className="northwell-print-label">Who it helps</p>
<h2 className="northwell-print-title">Every capability pays off twice</h2>
<h2 className="northwell-print-title">
Every capability pays off twice
</h2>
<p className="northwell-print-lede max-w-[660px]">
The features that make Medscribe genuinely useful to the patient are
the same ones that move the numbers CVS is measured on. Cross-provider
by design; one central pharmacy in practice.
the same ones that move the numbers CVS is measured on.
Cross-provider by design; one central pharmacy in practice.
</p>
</section>
@@ -287,7 +289,8 @@ export function CvsPrintSummary() {
</h3>
<p className="mt-2 text-[10.5px] leading-[1.5] text-slate-600">
Live in beta on iOS and Android today. The core patient experience
ships now; the business layer is what a partnership builds together.
ships now; the business layer is what a partnership builds
together.
</p>
</div>
<div>
src/components/feature-showcase.tsx
+15 -5
View File
@@ -26,7 +26,8 @@ const features = [
"The person reviews generated information",
"Structured visit-to-record change review is still roadmap",
],
image: "/screenshots/visit-detail.png",
image: "/screenshots/product-glass-2026-08-20/visits-light.png",
darkImage: "/screenshots/product-glass-2026-08-20/visits-dark.png",
alt: "Synthetic Medscribe beta visit detail showing a visit summary and follow-up information",
},
{
@@ -41,7 +42,9 @@ const features = [
"Bundled facts and known pairs use named reference datasets",
"Coverage is intentionally bounded, not a complete interaction check",
],
image: "/screenshots/medication-detail.png",
image: "/screenshots/product-glass-2026-08-20/medication-detail-light.png",
darkImage:
"/screenshots/product-glass-2026-08-20/medication-detail-dark.png",
alt: "Synthetic Medscribe beta medication detail with schedule and medication information",
},
{
@@ -56,7 +59,8 @@ const features = [
"The local model helps with conversational phrasing",
"High-risk or unsupported questions defer to a professional",
],
image: "/screenshots/chat-response.png",
image: "/screenshots/product-glass-2026-08-20/ask-light.png",
darkImage: "/screenshots/product-glass-2026-08-20/ask-dark.png",
alt: "Synthetic Medscribe beta answer with medication context and a safety boundary",
},
{
@@ -71,7 +75,8 @@ const features = [
"The person can show or share the snapshot they reviewed",
"It complements—not replaces—clinical verification",
],
image: "/screenshots/emergency-record.png",
image: "/screenshots/product-glass-2026-08-20/know-me-light.png",
darkImage: "/screenshots/product-glass-2026-08-20/know-me-dark.png",
alt: "Synthetic Medscribe beta Know Me handoff with active medications and review state",
},
] as const;
@@ -181,7 +186,12 @@ export function FeatureShowcase() {
<div className="justify-self-center lg:justify-self-end">
<div className="border-border-soft bg-surface-soft/80 rounded-[2.5rem] border p-5 shadow-[0_30px_80px_rgba(15,23,42,0.10)] sm:p-7">
<PhoneMockup src={active.image} alt={active.alt} width={220} />
<PhoneMockup
src={active.image}
darkSrc={active.darkImage}
alt={active.alt}
width={220}
/>
<p className="text-muted-foreground mt-4 text-center text-xs">
Synthetic demo data · beta interface
</p>
src/components/northwell-print-summary.tsx
+1 -1
View File
@@ -127,7 +127,7 @@ export function NorthwellPrintSummary() {
<div className="mx-auto w-[194px] rounded-[28px] border-[6px] border-slate-950 bg-slate-950 p-1 shadow-[0_18px_45px_rgba(15,23,42,0.18)]">
<div className="overflow-hidden rounded-[19px] bg-white">
<Image
src="/screenshots/home.png"
src="/screenshots/product-glass-2026-08-20/home-light.png"
alt="Medscribe home screen"
width={1206}
height={2622}
src/components/phone-mockup.tsx
+28 -12
View File
@@ -1,9 +1,10 @@
import Image from "next/image";
import { getImageProps } from "next/image";
import { cn } from "~/lib/utils";
interface PhoneMockupProps {
src: string;
darkSrc?: string;
alt: string;
className?: string;
priority?: boolean;
@@ -15,6 +16,7 @@ interface PhoneMockupProps {
export function PhoneMockup({
src,
darkSrc,
alt,
className,
priority,
@@ -22,6 +24,21 @@ export function PhoneMockup({
captureMode = "raw",
}: PhoneMockupProps) {
const isSimulatorCapture = captureMode === "simulator";
const shared = {
alt,
width: 1206,
height: 2622,
sizes: `${width}px`,
priority,
className: cn(
"absolute inset-0 h-full w-full object-cover",
isSimulatorCapture ? "scale-[1.22] object-[50%_58%]" : "object-top",
),
};
const { props: lightProps } = getImageProps({ src, ...shared });
const darkProps = darkSrc
? getImageProps({ src: darkSrc, ...shared }).props
: null;
return (
<div
@@ -32,17 +49,16 @@ export function PhoneMockup({
style={{ width }}
>
<div className="bg-surface relative aspect-[1206/2622] overflow-hidden rounded-[1.65rem]">
<Image
src={src}
alt={alt}
fill
priority={priority}
sizes={`${width}px`}
className={cn(
"object-cover",
isSimulatorCapture ? "scale-[1.22] object-[50%_58%]" : "object-top",
)}
/>
<picture>
{darkProps ? (
<source
media="(prefers-color-scheme: dark)"
srcSet={darkProps.srcSet}
sizes={darkProps.sizes}
/>
) : null}
<img {...lightProps} alt={alt} />
</picture>
</div>
</div>
);
src/components/product-device.tsx
+2 -2
View File
@@ -13,8 +13,8 @@ type ProductDeviceProps = {
/**
* A precomposited product capture using the licensed device bezels in
* `public/screenshots/pitch`. Keeping the frame in the source image preserves
* the bezel details without adding layout or client-side work.
* `public/screenshots/pitch-glass-2026-08-20`. Keeping the frame in the source
* image preserves the bezel details without adding layout or client-side work.
*/
export function ProductDevice({
src,
src/components/site-header.tsx
+3 -2
View File
@@ -5,6 +5,7 @@ import { MedscribeLogo } from "~/components/medscribe-logo";
import { Button } from "~/components/ui/button";
const navigation = [
{ href: "/", label: "Home" },
{ href: "/how-it-works", label: "How it works" },
{ href: "/privacy", label: "Privacy & evidence" },
] as const;
@@ -12,10 +13,10 @@ const navigation = [
export function SiteHeader() {
return (
<header className="print-hidden border-border-soft/70 bg-canvas/88 sticky top-0 z-50 border-b backdrop-blur-lg">
<div className="mx-auto flex h-16 max-w-6xl items-center gap-5 px-4 sm:px-6">
<div className="relative mx-auto flex h-16 max-w-6xl items-center gap-5 px-4 sm:px-6">
<Link
href="/"
className="text-foreground focus-visible:ring-primary/40 flex shrink-0 items-center gap-2.5 rounded-md transition-opacity outline-none hover:opacity-75 focus-visible:ring-2"
className="text-foreground focus-visible:ring-primary/40 absolute left-1/2 flex shrink-0 -translate-x-1/2 items-center gap-2.5 rounded-md transition-opacity outline-none hover:opacity-75 focus-visible:ring-2 md:static md:translate-x-0"
aria-label="Medscribe home"
>
<MedscribeLogo className="h-7 w-auto" />
src/components/walgreens-print-summary.tsx
+6 -3
View File
@@ -162,7 +162,7 @@ export function WalgreensPrintSummary() {
<div className="mx-auto w-[186px] rounded-[28px] border-[6px] border-slate-950 bg-slate-950 p-1 shadow-[0_18px_45px_rgba(15,23,42,0.18)]">
<div className="overflow-hidden rounded-[19px] bg-white">
<Image
src="/screenshots/medications.png"
src="/screenshots/product-glass-2026-08-20/medications-light.png"
alt="Medscribe medications screen"
width={1206}
height={2622}
@@ -225,7 +225,9 @@ export function WalgreensPrintSummary() {
<PrintPage page={2}>
<section className="pt-3">
<p className="northwell-print-label">Who it helps</p>
<h2 className="northwell-print-title">Every capability pays off twice</h2>
<h2 className="northwell-print-title">
Every capability pays off twice
</h2>
<p className="northwell-print-lede max-w-[660px]">
The features that make Medscribe genuinely useful to the patient are
the same ones that move the numbers Walgreens is measured on.
@@ -287,7 +289,8 @@ export function WalgreensPrintSummary() {
</h3>
<p className="mt-2 text-[10.5px] leading-[1.5] text-slate-600">
Live in beta on iOS and Android today. The core patient experience
ships now; the business layer is what a partnership builds together.
ships now; the business layer is what a partnership builds
together.
</p>
</div>
<div>