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

fix: use fresh product-bezel captures everywhere

Browse Source
This commit is contained in:
soconnor
2026-08-20 23:01:22 -04:00
parent 0d371313f9
commit af7f1b79e9
72 changed files with 83 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/executive-summary/page.tsx
+7 -7
View File
@@ -161,8 +161,8 @@ export default function ExecutiveSummaryPage() {
<div className="justify-self-center lg:justify-self-end">
<PhoneMockup
src="/screenshots/product-glass-2026-08-20/home-light.png"
darkSrc="/screenshots/product-glass-2026-08-20/home-dark.png"
src="/screenshots/product-bezel-2026-08-20/home-black.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/home-black-dark.webp"
alt="Medscribe home screen"
width={200}
priority
@@ -333,15 +333,15 @@ export default function ExecutiveSummaryPage() {
</p>
</div>
<div className="flex justify-end">
<div className="h-[1.78in] w-[0.88in] overflow-hidden rounded-[11px] border-[3px] border-slate-950 bg-white shadow-[0_8px_18px_rgba(15,23,42,0.14)]">
<div className="w-[0.96in]">
<Image
src="/screenshots/product-glass-2026-08-20/home-light.png"
src="/screenshots/product-bezel-2026-08-20/home-black.webp"
alt="Medscribe home screen"
width={1206}
height={2622}
width={1350}
height={2760}
priority
unoptimized
className="h-full w-full object-cover object-top"
className="h-auto w-full"
/>
</div>
</div>
src/app/(marketing)/how-it-works/page.tsx
+6 -6
View File
@@ -137,8 +137,8 @@ export default function HowItWorksPage() {
</div>
<div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
<PhoneMockup
src="/screenshots/product-glass-2026-08-20/summary-light.png"
darkSrc="/screenshots/product-glass-2026-08-20/summary-dark.png"
src="/screenshots/product-bezel-2026-08-20/summary-natural.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/summary-natural-dark.webp"
alt="Synthetic Medscribe beta visit summary"
width={235}
/>
@@ -151,8 +151,8 @@ export default function HowItWorksPage() {
<div className="grid gap-12 lg:grid-cols-2 lg:items-center">
<div className="justify-self-center rounded-[2.5rem] bg-[#f4f0e8] p-7 lg:order-1 dark:bg-[#151b25]">
<PhoneMockup
src="/screenshots/product-glass-2026-08-20/medication-detail-light.png"
darkSrc="/screenshots/product-glass-2026-08-20/medication-detail-dark.png"
src="/screenshots/product-bezel-2026-08-20/medication-detail-natural.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/medication-detail-natural-dark.webp"
alt="Synthetic Medscribe beta medication detail"
width={235}
/>
@@ -199,8 +199,8 @@ export default function HowItWorksPage() {
</div>
<div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
<PhoneMockup
src="/screenshots/product-glass-2026-08-20/know-me-light.png"
darkSrc="/screenshots/product-glass-2026-08-20/know-me-dark.png"
src="/screenshots/product-bezel-2026-08-20/know-me-natural.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/know-me-natural-dark.webp"
alt="Synthetic Medscribe beta Know Me handoff"
width={235}
/>
src/app/(marketing)/page.tsx
+20 -18
View File
@@ -28,8 +28,8 @@ const visitMoments = [
eyebrow: "Visits stay findable",
title: "The visit has a place to land.",
body: "Keep the recording, transcript, and reviewed summary together instead of reconstructing the appointment from memory.",
image: "/screenshots/pitch-glass-2026-08-20/visits-natural.webp",
darkImage: "/screenshots/pitch-glass-2026-08-20/visits-natural-dark.webp",
image: "/screenshots/product-bezel-2026-08-20/visits-natural.webp",
darkImage: "/screenshots/product-bezel-2026-08-20/visits-natural-dark.webp",
alt: "Medscribe Visits screen in a natural titanium iPhone product bezel",
},
{
@@ -37,8 +37,9 @@ const visitMoments = [
eyebrow: "Words stay checkable",
title: "Go back to what was actually said.",
body: "Search the local transcript and compare it with the generated summary before anything becomes part of the record you rely on.",
image: "/screenshots/pitch-glass-2026-08-20/transcript-black.webp",
darkImage: "/screenshots/pitch-glass-2026-08-20/transcript-black-dark.webp",
image: "/screenshots/product-bezel-2026-08-20/transcript-black.webp",
darkImage:
"/screenshots/product-bezel-2026-08-20/transcript-black-dark.webp",
alt: "Medscribe visit transcript in a black titanium iPhone product bezel",
},
{
@@ -46,8 +47,9 @@ const visitMoments = [
eyebrow: "The next step stays visible",
title: "Review the useful part. Keep the uncertainty.",
body: "Medications, follow-ups, diagnoses, and instructions are prepared on-device. Suggestions remain suggestions until a person checks them.",
image: "/screenshots/pitch-glass-2026-08-20/summary-natural.webp",
darkImage: "/screenshots/pitch-glass-2026-08-20/summary-natural-dark.webp",
image: "/screenshots/product-bezel-2026-08-20/summary-natural.webp",
darkImage:
"/screenshots/product-bezel-2026-08-20/summary-natural-dark.webp",
alt: "Medscribe appointment summary in a natural titanium iPhone product bezel",
},
] as const;
@@ -128,8 +130,8 @@ export default function HomePage() {
<div className="relative mx-auto mt-12 h-[36rem] max-w-5xl sm:h-[46rem] lg:mt-8 lg:h-[54rem]">
<div className="absolute top-24 left-1/2 w-[17rem] -translate-x-[86%] -rotate-6 sm:top-28 sm:w-[22rem] lg:top-32 lg:w-[26rem]">
<ProductDevice
src="/screenshots/pitch-glass-2026-08-20/summary-natural.webp"
darkSrc="/screenshots/pitch-glass-2026-08-20/summary-natural-dark.webp"
src="/screenshots/product-bezel-2026-08-20/summary-natural.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/summary-natural-dark.webp"
alt="Medscribe visit summary in a natural titanium iPhone product bezel"
className="pitch-device-motion pitch-device-drift-left"
sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px"
@@ -138,8 +140,8 @@ export default function HomePage() {
</div>
<div className="absolute top-0 left-1/2 z-10 w-[18rem] -translate-x-[14%] rotate-5 sm:w-[23rem] lg:w-[28rem]">
<ProductDevice
src="/screenshots/pitch-glass-2026-08-20/home-black.webp"
darkSrc="/screenshots/pitch-glass-2026-08-20/home-black-dark.webp"
src="/screenshots/product-bezel-2026-08-20/home-black.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/home-black-dark.webp"
alt="Medscribe home screen in a black titanium iPhone product bezel"
className="pitch-device-motion pitch-device-drift-right"
sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px"
@@ -249,8 +251,8 @@ export default function HomePage() {
<div className="relative mx-auto h-[42rem] w-full max-w-2xl sm:h-[50rem] lg:h-[56rem]">
<div className="absolute top-20 left-[4%] w-[17rem] -rotate-6 sm:w-[21rem] lg:w-[23rem]">
<ProductDevice
src="/screenshots/pitch-glass-2026-08-20/medication-detail-natural.webp"
darkSrc="/screenshots/pitch-glass-2026-08-20/medication-detail-natural-dark.webp"
src="/screenshots/product-bezel-2026-08-20/medication-detail-natural.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/medication-detail-natural-dark.webp"
alt="Medscribe medication detail in a natural titanium iPhone product bezel"
className="pitch-device-motion pitch-device-drift-left"
sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px"
@@ -258,8 +260,8 @@ export default function HomePage() {
</div>
<div className="absolute top-0 right-[2%] z-10 w-[18rem] rotate-5 sm:w-[22rem] lg:w-[24rem]">
<ProductDevice
src="/screenshots/pitch-glass-2026-08-20/medications-black.webp"
darkSrc="/screenshots/pitch-glass-2026-08-20/medications-black-dark.webp"
src="/screenshots/product-bezel-2026-08-20/medications-black.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/medications-black-dark.webp"
alt="Medscribe medication list in a black titanium iPhone product bezel"
className="pitch-device-motion pitch-device-drift-right"
sizes="(min-width: 1024px) 384px, (min-width: 640px) 352px, 288px"
@@ -321,8 +323,8 @@ export default function HomePage() {
</div>
<div className="order-1 mx-auto w-[min(78vw,27rem)] lg:order-2">
<ProductDevice
src="/screenshots/pitch-glass-2026-08-20/ask-black.webp"
darkSrc="/screenshots/pitch-glass-2026-08-20/ask-black-dark.webp"
src="/screenshots/product-bezel-2026-08-20/ask-black.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/ask-black-dark.webp"
alt="Medscribe Ask response grounded in local health context, shown in a black titanium iPhone product bezel"
className="pitch-device-motion pitch-device-drift-right"
sizes="(min-width: 1024px) 432px, (min-width: 640px) 384px, 78vw"
@@ -337,8 +339,8 @@ export default function HomePage() {
<div className="relative mx-auto w-[min(80vw,28rem)]">
<div className="bg-primary-light/70 absolute inset-[12%_-12%_8%] -z-10 rounded-[4rem] blur-2xl" />
<ProductDevice
src="/screenshots/pitch-glass-2026-08-20/know-me-natural.webp"
darkSrc="/screenshots/pitch-glass-2026-08-20/know-me-natural-dark.webp"
src="/screenshots/product-bezel-2026-08-20/know-me-natural.webp"
darkSrc="/screenshots/product-bezel-2026-08-20/know-me-natural-dark.webp"
alt="Medscribe Know Me handoff record in a natural titanium iPhone product bezel"
className="pitch-device-motion pitch-device-drift-left"
sizes="(min-width: 1024px) 448px, (min-width: 640px) 400px, 80vw"
src/components/cvs-print-summary.tsx
+6 -6
View File
@@ -159,16 +159,16 @@ export function CvsPrintSummary() {
</div>
</div>
<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">
<div className="mx-auto w-[202px]">
<div>
<Image
src="/screenshots/product-glass-2026-08-20/medications-light.png"
src="/screenshots/product-bezel-2026-08-20/medications-black.webp"
alt="Medscribe medications screen"
width={1206}
height={2622}
width={1350}
height={2760}
priority
unoptimized
className="block h-auto w-full"
className="block h-auto w-full drop-shadow-[0_18px_30px_rgba(15,23,42,0.18)]"
/>
</div>
</div>
src/components/feature-showcase.tsx
+10 -8
View File
@@ -26,8 +26,8 @@ const features = [
"The person reviews generated information",
"Structured visit-to-record change review is still roadmap",
],
image: "/screenshots/product-glass-2026-08-20/visits-light.png",
darkImage: "/screenshots/product-glass-2026-08-20/visits-dark.png",
image: "/screenshots/product-bezel-2026-08-20/visits-natural.webp",
darkImage: "/screenshots/product-bezel-2026-08-20/visits-natural-dark.webp",
alt: "Synthetic Medscribe beta visit detail showing a visit summary and follow-up information",
},
{
@@ -42,9 +42,10 @@ const features = [
"Bundled facts and known pairs use named reference datasets",
"Coverage is intentionally bounded, not a complete interaction check",
],
image: "/screenshots/product-glass-2026-08-20/medication-detail-light.png",
image:
"/screenshots/product-bezel-2026-08-20/medication-detail-natural.webp",
darkImage:
"/screenshots/product-glass-2026-08-20/medication-detail-dark.png",
"/screenshots/product-bezel-2026-08-20/medication-detail-natural-dark.webp",
alt: "Synthetic Medscribe beta medication detail with schedule and medication information",
},
{
@@ -59,8 +60,8 @@ const features = [
"The local model helps with conversational phrasing",
"High-risk or unsupported questions defer to a professional",
],
image: "/screenshots/product-glass-2026-08-20/ask-light.png",
darkImage: "/screenshots/product-glass-2026-08-20/ask-dark.png",
image: "/screenshots/product-bezel-2026-08-20/ask-black.webp",
darkImage: "/screenshots/product-bezel-2026-08-20/ask-black-dark.webp",
alt: "Synthetic Medscribe beta answer with medication context and a safety boundary",
},
{
@@ -75,8 +76,9 @@ const features = [
"The person can show or share the snapshot they reviewed",
"It complements—not replaces—clinical verification",
],
image: "/screenshots/product-glass-2026-08-20/know-me-light.png",
darkImage: "/screenshots/product-glass-2026-08-20/know-me-dark.png",
image: "/screenshots/product-bezel-2026-08-20/know-me-natural.webp",
darkImage:
"/screenshots/product-bezel-2026-08-20/know-me-natural-dark.webp",
alt: "Synthetic Medscribe beta Know Me handoff with active medications and review state",
},
] as const;
src/components/northwell-print-summary.tsx
+6 -6
View File
@@ -124,16 +124,16 @@ export function NorthwellPrintSummary() {
</div>
</div>
<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">
<div className="mx-auto w-[210px]">
<div>
<Image
src="/screenshots/product-glass-2026-08-20/home-light.png"
src="/screenshots/product-bezel-2026-08-20/home-black.webp"
alt="Medscribe home screen"
width={1206}
height={2622}
width={1350}
height={2760}
priority
unoptimized
className="block h-auto w-full"
className="block h-auto w-full drop-shadow-[0_18px_30px_rgba(15,23,42,0.18)]"
/>
</div>
</div>
src/components/phone-mockup.tsx
+9 -41
View File
@@ -1,5 +1,4 @@
import { getImageProps } from "next/image";
import { ProductDevice } from "~/components/product-device";
import { cn } from "~/lib/utils";
interface PhoneMockupProps {
@@ -10,8 +9,6 @@ interface PhoneMockupProps {
priority?: boolean;
/** Rendered mockup width in px. @default 280 */
width?: number;
/** Use "simulator" only for captures that already include device chrome. */
captureMode?: "simulator" | "raw";
}
export function PhoneMockup({
@@ -21,45 +18,16 @@ export function PhoneMockup({
className,
priority,
width = 280,
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
className={cn(
"mx-auto overflow-hidden rounded-[2.25rem] border-[7px] border-slate-950 bg-slate-950 p-1 shadow-[0_24px_60px_rgba(15,23,42,0.18)]",
className,
)}
style={{ width }}
>
<div className="bg-surface relative aspect-[1206/2622] overflow-hidden rounded-[1.65rem]">
<picture>
{darkProps ? (
<source
media="(prefers-color-scheme: dark)"
srcSet={darkProps.srcSet}
sizes={darkProps.sizes}
/>
) : null}
<img {...lightProps} alt={alt} />
</picture>
</div>
<div className={cn("mx-auto", className)} style={{ width }}>
<ProductDevice
src={src}
darkSrc={darkSrc}
alt={alt}
priority={priority}
sizes={`${width}px`}
/>
</div>
);
}
src/components/product-device.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ type ProductDeviceProps = {
/**
* A precomposited product capture using the licensed device bezels in
* `public/screenshots/pitch-glass-2026-08-20`. Keeping the frame in the source
* `public/screenshots/product-bezel-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/components/walgreens-print-summary.tsx
+6 -6
View File
@@ -159,16 +159,16 @@ export function WalgreensPrintSummary() {
</div>
</div>
<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">
<div className="mx-auto w-[202px]">
<div>
<Image
src="/screenshots/product-glass-2026-08-20/medications-light.png"
src="/screenshots/product-bezel-2026-08-20/medications-black.webp"
alt="Medscribe medications screen"
width={1206}
height={2622}
width={1350}
height={2760}
priority
unoptimized
className="block h-auto w-full"
className="block h-auto w-full drop-shadow-[0_18px_30px_rgba(15,23,42,0.18)]"
/>
</div>
</div>