Fix dark and medication screenshots

This commit is contained in:
2026-08-26 20:48:04 -04:00
parent 96d152f592
commit 2b436eeec6
6 changed files with 8 additions and 7 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 576 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 589 KiB

+2 -2
View File
@@ -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="justify-self-center py-2 lg:order-1"> <div className="justify-self-center py-2 lg:order-1">
<PhoneMockup <PhoneMockup
src="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural.webp" src="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural.webp"
darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural-dark.webp" darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural-dark.webp"
alt="Illustrative Medscribe medication detail" alt="Illustrative Medscribe medication detail"
width={280} width={280}
/> />
+2 -2
View File
@@ -254,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-24-unified-type/medication-detail-natural.webp" src="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural.webp"
darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural-dark.webp" darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural-dark.webp"
alt="Medscribe medication detail in an iPhone 17 Pro product bezel" alt="Medscribe medication detail in an iPhone 17 Pro 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"
+2 -2
View File
@@ -44,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-24-unified-type/medication-detail-natural.webp", "/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural.webp",
darkImage: darkImage:
"/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural-dark.webp", "/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-lisinopril-natural-dark.webp",
alt: "Illustrative Medscribe medication detail with schedule and medication information", alt: "Illustrative Medscribe medication detail with schedule and medication information",
}, },
{ {
+2 -1
View File
@@ -38,13 +38,14 @@ export function ProductDevice({
const darkProps = darkSrc const darkProps = darkSrc
? getImageProps({ src: darkSrc, ...shared }).props ? getImageProps({ src: darkSrc, ...shared }).props
: null; : null;
const darkSrcSet = darkProps?.srcSet ?? darkProps?.src;
return ( return (
<picture className="block"> <picture className="block">
{darkProps ? ( {darkProps ? (
<source <source
media="(prefers-color-scheme: dark)" media="(prefers-color-scheme: dark)"
srcSet={darkProps.srcSet} srcSet={darkSrcSet}
sizes={darkProps.sizes} sizes={darkProps.sizes}
/> />
) : null} ) : null}