fix: show completed Home state in screenshots
This commit is contained in:
@@ -53,7 +53,7 @@ bun run start
|
|||||||
|
|
||||||
Screenshots live in `public/screenshots/`. Every route uses the same fresh,
|
Screenshots live in `public/screenshots/`. Every route uses the same fresh,
|
||||||
precomposited iPhone product-bezel assets in
|
precomposited iPhone product-bezel assets in
|
||||||
`public/screenshots/product-bezel-2026-08-23/`; there are no raw or CSS-framed
|
`public/screenshots/product-bezel-2026-08-23-complete/`; there are no raw or CSS-framed
|
||||||
product captures in the rendered site. The versioned path keeps newly captured
|
product captures in the rendered site. The versioned path keeps newly captured
|
||||||
UI from being hidden by stale browser or image-optimizer caches.
|
UI from being hidden by stale browser or image-optimizer caches.
|
||||||
Public pages label product imagery as an illustrative profile and Medscribe
|
Public pages label product imagery as an illustrative profile and Medscribe
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 795 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 887 KiB |
|
Before Width: | Height: | Size: 839 KiB After Width: | Height: | Size: 839 KiB |
|
Before Width: | Height: | Size: 899 KiB After Width: | Height: | Size: 899 KiB |
|
Before Width: | Height: | Size: 796 KiB After Width: | Height: | Size: 796 KiB |
|
Before Width: | Height: | Size: 916 KiB After Width: | Height: | Size: 916 KiB |
|
Before Width: | Height: | Size: 736 KiB After Width: | Height: | Size: 736 KiB |
|
Before Width: | Height: | Size: 854 KiB After Width: | Height: | Size: 854 KiB |
|
Before Width: | Height: | Size: 265 KiB After Width: | Height: | Size: 265 KiB |
|
Before Width: | Height: | Size: 268 KiB After Width: | Height: | Size: 268 KiB |
|
Before Width: | Height: | Size: 173 KiB After Width: | Height: | Size: 173 KiB |
|
Before Width: | Height: | Size: 179 KiB After Width: | Height: | Size: 179 KiB |
|
Before Width: | Height: | Size: 733 KiB After Width: | Height: | Size: 733 KiB |
|
Before Width: | Height: | Size: 820 KiB After Width: | Height: | Size: 820 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 699 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 828 KiB |
@@ -134,8 +134,8 @@ export default function HowItWorksPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
|
<div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
|
||||||
<PhoneMockup
|
<PhoneMockup
|
||||||
src="/screenshots/product-bezel-2026-08-23/summary-reviewed-natural.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural.webp"
|
||||||
darkSrc="/screenshots/product-bezel-2026-08-23/summary-reviewed-natural-dark.webp"
|
darkSrc="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural-dark.webp"
|
||||||
alt="Illustrative Medscribe visit summary"
|
alt="Illustrative Medscribe visit summary"
|
||||||
width={235}
|
width={235}
|
||||||
/>
|
/>
|
||||||
@@ -148,8 +148,8 @@ export default function HowItWorksPage() {
|
|||||||
<div className="grid gap-12 lg:grid-cols-2 lg:items-center">
|
<div className="grid gap-12 lg:grid-cols-2 lg:items-center">
|
||||||
<div className="brand-warm justify-self-center rounded-[2.5rem] p-7 lg:order-1">
|
<div className="brand-warm justify-self-center rounded-[2.5rem] p-7 lg:order-1">
|
||||||
<PhoneMockup
|
<PhoneMockup
|
||||||
src="/screenshots/product-bezel-2026-08-23/medication-detail-natural.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural.webp"
|
||||||
darkSrc="/screenshots/product-bezel-2026-08-23/medication-detail-natural-dark.webp"
|
darkSrc="/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural-dark.webp"
|
||||||
alt="Illustrative Medscribe medication detail"
|
alt="Illustrative Medscribe medication detail"
|
||||||
width={235}
|
width={235}
|
||||||
/>
|
/>
|
||||||
@@ -192,8 +192,8 @@ export default function HowItWorksPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
|
<div className="bg-primary-light/45 justify-self-center rounded-[2.5rem] p-7">
|
||||||
<PhoneMockup
|
<PhoneMockup
|
||||||
src="/screenshots/product-bezel-2026-08-23/know-me-natural.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/know-me-natural.webp"
|
||||||
darkSrc="/screenshots/product-bezel-2026-08-23/know-me-natural-dark.webp"
|
darkSrc="/screenshots/product-bezel-2026-08-23-complete/know-me-natural-dark.webp"
|
||||||
alt="Illustrative Medscribe Know Me handoff"
|
alt="Illustrative Medscribe Know Me handoff"
|
||||||
width={235}
|
width={235}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -28,8 +28,9 @@ const visitMoments = [
|
|||||||
eyebrow: "Visits stay findable",
|
eyebrow: "Visits stay findable",
|
||||||
title: "The visit has a place to land.",
|
title: "The visit has a place to land.",
|
||||||
body: "Keep the recording, transcript, and reviewed summary together instead of reconstructing the appointment from memory.",
|
body: "Keep the recording, transcript, and reviewed summary together instead of reconstructing the appointment from memory.",
|
||||||
image: "/screenshots/product-bezel-2026-08-23/visits-natural.webp",
|
image: "/screenshots/product-bezel-2026-08-23-complete/visits-natural.webp",
|
||||||
darkImage: "/screenshots/product-bezel-2026-08-23/visits-natural-dark.webp",
|
darkImage:
|
||||||
|
"/screenshots/product-bezel-2026-08-23-complete/visits-natural-dark.webp",
|
||||||
alt: "Medscribe Visits screen in a natural titanium iPhone product bezel",
|
alt: "Medscribe Visits screen in a natural titanium iPhone product bezel",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -38,9 +39,9 @@ const visitMoments = [
|
|||||||
title: "Go back to what was actually said.",
|
title: "Go back to what was actually said.",
|
||||||
body: "Search the transcript and compare it with the generated summary before relying on it later.",
|
body: "Search the transcript and compare it with the generated summary before relying on it later.",
|
||||||
image:
|
image:
|
||||||
"/screenshots/product-bezel-2026-08-23/transcript-populated-black.webp",
|
"/screenshots/product-bezel-2026-08-23-complete/transcript-populated-black.webp",
|
||||||
darkImage:
|
darkImage:
|
||||||
"/screenshots/product-bezel-2026-08-23/transcript-populated-black-dark.webp",
|
"/screenshots/product-bezel-2026-08-23-complete/transcript-populated-black-dark.webp",
|
||||||
alt: "Medscribe visit transcript in a black titanium iPhone product bezel",
|
alt: "Medscribe visit transcript in a black titanium iPhone product bezel",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -49,9 +50,9 @@ const visitMoments = [
|
|||||||
title: "Review the useful part. Keep your judgment.",
|
title: "Review the useful part. Keep your judgment.",
|
||||||
body: "Bring medications, follow-ups, diagnoses, and instructions into view, then check the details that matter.",
|
body: "Bring medications, follow-ups, diagnoses, and instructions into view, then check the details that matter.",
|
||||||
image:
|
image:
|
||||||
"/screenshots/product-bezel-2026-08-23/summary-reviewed-natural.webp",
|
"/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural.webp",
|
||||||
darkImage:
|
darkImage:
|
||||||
"/screenshots/product-bezel-2026-08-23/summary-reviewed-natural-dark.webp",
|
"/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural-dark.webp",
|
||||||
alt: "Medscribe appointment summary in a natural titanium iPhone product bezel",
|
alt: "Medscribe appointment summary in a natural titanium iPhone product bezel",
|
||||||
},
|
},
|
||||||
] as const;
|
] as const;
|
||||||
@@ -133,8 +134,8 @@ export default function HomePage() {
|
|||||||
<div className="relative mx-auto mt-12 h-[44rem] max-w-5xl sm:h-[58rem] lg:mt-8 lg:h-[64rem]">
|
<div className="relative mx-auto mt-12 h-[44rem] max-w-5xl sm:h-[58rem] lg:mt-8 lg:h-[64rem]">
|
||||||
<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]">
|
<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
|
<ProductDevice
|
||||||
src="/screenshots/product-bezel-2026-08-23/summary-reviewed-natural.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural.webp"
|
||||||
darkSrc="/screenshots/product-bezel-2026-08-23/summary-reviewed-natural-dark.webp"
|
darkSrc="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural-dark.webp"
|
||||||
alt="Medscribe visit summary in a natural titanium iPhone product bezel"
|
alt="Medscribe visit summary in a natural titanium iPhone product bezel"
|
||||||
className="pitch-device-motion pitch-device-drift-left"
|
className="pitch-device-motion pitch-device-drift-left"
|
||||||
sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px"
|
sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px"
|
||||||
@@ -143,8 +144,8 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="absolute top-0 left-1/2 z-10 w-[18rem] -translate-x-[14%] rotate-5 sm:w-[23rem] lg:w-[28rem]">
|
<div className="absolute top-0 left-1/2 z-10 w-[18rem] -translate-x-[14%] rotate-5 sm:w-[23rem] lg:w-[28rem]">
|
||||||
<ProductDevice
|
<ProductDevice
|
||||||
src="/screenshots/product-bezel-2026-08-23/home-black.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/home-black.webp"
|
||||||
darkSrc="/screenshots/product-bezel-2026-08-23/home-black-dark.webp"
|
darkSrc="/screenshots/product-bezel-2026-08-23-complete/home-black-dark.webp"
|
||||||
alt="Medscribe home screen in a black titanium iPhone product bezel"
|
alt="Medscribe home screen in a black titanium iPhone product bezel"
|
||||||
className="pitch-device-motion pitch-device-drift-right"
|
className="pitch-device-motion pitch-device-drift-right"
|
||||||
sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px"
|
sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px"
|
||||||
@@ -253,8 +254,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="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]">
|
<div className="absolute top-20 left-[4%] w-[17rem] -rotate-6 sm:w-[21rem] lg:w-[23rem]">
|
||||||
<ProductDevice
|
<ProductDevice
|
||||||
src="/screenshots/product-bezel-2026-08-23/medication-detail-natural.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural.webp"
|
||||||
darkSrc="/screenshots/product-bezel-2026-08-23/medication-detail-natural-dark.webp"
|
darkSrc="/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural-dark.webp"
|
||||||
alt="Medscribe medication detail in a natural titanium iPhone product bezel"
|
alt="Medscribe medication detail in a natural titanium iPhone product bezel"
|
||||||
className="pitch-device-motion pitch-device-drift-left"
|
className="pitch-device-motion pitch-device-drift-left"
|
||||||
sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px"
|
sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px"
|
||||||
@@ -262,8 +263,8 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="absolute top-0 right-[2%] z-10 w-[18rem] rotate-5 sm:w-[22rem] lg:w-[24rem]">
|
<div className="absolute top-0 right-[2%] z-10 w-[18rem] rotate-5 sm:w-[22rem] lg:w-[24rem]">
|
||||||
<ProductDevice
|
<ProductDevice
|
||||||
src="/screenshots/product-bezel-2026-08-23/medications-black.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/medications-black.webp"
|
||||||
darkSrc="/screenshots/product-bezel-2026-08-23/medications-black-dark.webp"
|
darkSrc="/screenshots/product-bezel-2026-08-23-complete/medications-black-dark.webp"
|
||||||
alt="Medscribe medication list in a black titanium iPhone product bezel"
|
alt="Medscribe medication list in a black titanium iPhone product bezel"
|
||||||
className="pitch-device-motion pitch-device-drift-right"
|
className="pitch-device-motion pitch-device-drift-right"
|
||||||
sizes="(min-width: 1024px) 384px, (min-width: 640px) 352px, 288px"
|
sizes="(min-width: 1024px) 384px, (min-width: 640px) 352px, 288px"
|
||||||
@@ -324,8 +325,8 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="order-1 mx-auto w-[min(78vw,27rem)] lg:order-2">
|
<div className="order-1 mx-auto w-[min(78vw,27rem)] lg:order-2">
|
||||||
<ProductDevice
|
<ProductDevice
|
||||||
src="/screenshots/product-bezel-2026-08-23/ask-black.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/ask-black.webp"
|
||||||
darkSrc="/screenshots/product-bezel-2026-08-23/ask-black-dark.webp"
|
darkSrc="/screenshots/product-bezel-2026-08-23-complete/ask-black-dark.webp"
|
||||||
alt="Medscribe Ask response shown in a black titanium iPhone product bezel"
|
alt="Medscribe Ask response shown in a black titanium iPhone product bezel"
|
||||||
className="pitch-device-motion pitch-device-drift-right"
|
className="pitch-device-motion pitch-device-drift-right"
|
||||||
sizes="(min-width: 1024px) 432px, (min-width: 640px) 384px, 78vw"
|
sizes="(min-width: 1024px) 432px, (min-width: 640px) 384px, 78vw"
|
||||||
@@ -340,8 +341,8 @@ export default function HomePage() {
|
|||||||
<div className="relative mx-auto w-[min(80vw,28rem)]">
|
<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" />
|
<div className="bg-primary-light/70 absolute inset-[12%_-12%_8%] -z-10 rounded-[4rem] blur-2xl" />
|
||||||
<ProductDevice
|
<ProductDevice
|
||||||
src="/screenshots/product-bezel-2026-08-23/know-me-natural.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/know-me-natural.webp"
|
||||||
darkSrc="/screenshots/product-bezel-2026-08-23/know-me-natural-dark.webp"
|
darkSrc="/screenshots/product-bezel-2026-08-23-complete/know-me-natural-dark.webp"
|
||||||
alt="Medscribe Know Me handoff record in a natural titanium iPhone product bezel"
|
alt="Medscribe Know Me handoff record in a natural titanium iPhone product bezel"
|
||||||
className="pitch-device-motion pitch-device-drift-left"
|
className="pitch-device-motion pitch-device-drift-left"
|
||||||
sizes="(min-width: 1024px) 448px, (min-width: 640px) 400px, 80vw"
|
sizes="(min-width: 1024px) 448px, (min-width: 640px) 400px, 80vw"
|
||||||
|
|||||||
@@ -161,7 +161,7 @@ export function CvsPrintSummary() {
|
|||||||
<div className="mx-auto w-[202px]">
|
<div className="mx-auto w-[202px]">
|
||||||
<div>
|
<div>
|
||||||
<Image
|
<Image
|
||||||
src="/screenshots/product-bezel-2026-08-23/medications-black.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/medications-black.webp"
|
||||||
alt="Medscribe medications screen"
|
alt="Medscribe medications screen"
|
||||||
width={1350}
|
width={1350}
|
||||||
height={2760}
|
height={2760}
|
||||||
|
|||||||
@@ -26,8 +26,9 @@ const features = [
|
|||||||
"Review important details before relying on them",
|
"Review important details before relying on them",
|
||||||
"Carry follow-ups into the next conversation",
|
"Carry follow-ups into the next conversation",
|
||||||
],
|
],
|
||||||
image: "/screenshots/product-bezel-2026-08-23/visits-natural.webp",
|
image: "/screenshots/product-bezel-2026-08-23-complete/visits-natural.webp",
|
||||||
darkImage: "/screenshots/product-bezel-2026-08-23/visits-natural-dark.webp",
|
darkImage:
|
||||||
|
"/screenshots/product-bezel-2026-08-23-complete/visits-natural-dark.webp",
|
||||||
alt: "Illustrative Medscribe visit detail showing a visit summary and follow-up information",
|
alt: "Illustrative Medscribe visit detail showing a visit summary and follow-up information",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -43,9 +44,9 @@ const features = [
|
|||||||
"Bring important questions to a clinician or pharmacist",
|
"Bring important questions to a clinician or pharmacist",
|
||||||
],
|
],
|
||||||
image:
|
image:
|
||||||
"/screenshots/product-bezel-2026-08-23/medication-detail-natural.webp",
|
"/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural.webp",
|
||||||
darkImage:
|
darkImage:
|
||||||
"/screenshots/product-bezel-2026-08-23/medication-detail-natural-dark.webp",
|
"/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural-dark.webp",
|
||||||
alt: "Illustrative Medscribe medication detail with schedule and medication information",
|
alt: "Illustrative Medscribe medication detail with schedule and medication information",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -60,8 +61,9 @@ const features = [
|
|||||||
"Prepare for a clearer care conversation",
|
"Prepare for a clearer care conversation",
|
||||||
"High-risk or unsupported questions defer to a professional",
|
"High-risk or unsupported questions defer to a professional",
|
||||||
],
|
],
|
||||||
image: "/screenshots/product-bezel-2026-08-23/ask-black.webp",
|
image: "/screenshots/product-bezel-2026-08-23-complete/ask-black.webp",
|
||||||
darkImage: "/screenshots/product-bezel-2026-08-23/ask-black-dark.webp",
|
darkImage:
|
||||||
|
"/screenshots/product-bezel-2026-08-23-complete/ask-black-dark.webp",
|
||||||
alt: "Illustrative Medscribe answer with medication context and a safety boundary",
|
alt: "Illustrative Medscribe answer with medication context and a safety boundary",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -76,9 +78,10 @@ const features = [
|
|||||||
"The person can show or share the snapshot they reviewed",
|
"The person can show or share the snapshot they reviewed",
|
||||||
"It complements—not replaces—clinical verification",
|
"It complements—not replaces—clinical verification",
|
||||||
],
|
],
|
||||||
image: "/screenshots/product-bezel-2026-08-23/know-me-natural.webp",
|
image:
|
||||||
|
"/screenshots/product-bezel-2026-08-23-complete/know-me-natural.webp",
|
||||||
darkImage:
|
darkImage:
|
||||||
"/screenshots/product-bezel-2026-08-23/know-me-natural-dark.webp",
|
"/screenshots/product-bezel-2026-08-23-complete/know-me-natural-dark.webp",
|
||||||
alt: "Illustrative Medscribe Know Me handoff with active medications and review state",
|
alt: "Illustrative Medscribe Know Me handoff with active medications and review state",
|
||||||
},
|
},
|
||||||
] as const;
|
] as const;
|
||||||
|
|||||||
@@ -127,7 +127,7 @@ export function NorthwellPrintSummary() {
|
|||||||
<div className="mx-auto w-[210px]">
|
<div className="mx-auto w-[210px]">
|
||||||
<div>
|
<div>
|
||||||
<Image
|
<Image
|
||||||
src="/screenshots/product-bezel-2026-08-23/home-black.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/home-black.webp"
|
||||||
alt="Medscribe home screen"
|
alt="Medscribe home screen"
|
||||||
width={1350}
|
width={1350}
|
||||||
height={2760}
|
height={2760}
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ type ProductDeviceProps = {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* A precomposited product capture using the licensed device bezels in
|
* A precomposited product capture using the licensed device bezels in
|
||||||
* `public/screenshots/product-bezel-2026-08-23`. Keeping the frame in the source
|
* `public/screenshots/product-bezel-2026-08-23-complete`. Keeping the frame in the source
|
||||||
* image preserves the bezel details without adding layout or client-side work.
|
* image preserves the bezel details without adding layout or client-side work.
|
||||||
*/
|
*/
|
||||||
export function ProductDevice({
|
export function ProductDevice({
|
||||||
|
|||||||
@@ -161,7 +161,7 @@ export function WalgreensPrintSummary() {
|
|||||||
<div className="mx-auto w-[202px]">
|
<div className="mx-auto w-[202px]">
|
||||||
<div>
|
<div>
|
||||||
<Image
|
<Image
|
||||||
src="/screenshots/product-bezel-2026-08-23/medications-black.webp"
|
src="/screenshots/product-bezel-2026-08-23-complete/medications-black.webp"
|
||||||
alt="Medscribe medications screen"
|
alt="Medscribe medications screen"
|
||||||
width={1350}
|
width={1350}
|
||||||
height={2760}
|
height={2760}
|
||||||
|
|||||||
Reference in New Issue
Block a user