Fix dark and medication screenshots
This commit is contained in:
BIN
Binary file not shown.
|
After Width: | Height: | Size: 576 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 589 KiB |
@@ -148,8 +148,8 @@ export default function HowItWorksPage() {
|
||||
<div className="grid gap-12 lg:grid-cols-2 lg:items-center">
|
||||
<div className="justify-self-center py-2 lg:order-1">
|
||||
<PhoneMockup
|
||||
src="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural-dark.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-lisinopril-natural-dark.webp"
|
||||
alt="Illustrative Medscribe medication detail"
|
||||
width={280}
|
||||
/>
|
||||
|
||||
@@ -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="absolute top-20 left-[4%] w-[17rem] -rotate-6 sm:w-[21rem] lg:w-[23rem]">
|
||||
<ProductDevice
|
||||
src="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-unified-type/medication-detail-natural-dark.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-lisinopril-natural-dark.webp"
|
||||
alt="Medscribe medication detail in an iPhone 17 Pro product bezel"
|
||||
className="pitch-device-motion pitch-device-drift-left"
|
||||
sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px"
|
||||
|
||||
@@ -44,9 +44,9 @@ const features = [
|
||||
"Bring important questions to a clinician or pharmacist",
|
||||
],
|
||||
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:
|
||||
"/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",
|
||||
},
|
||||
{
|
||||
|
||||
@@ -38,13 +38,14 @@ export function ProductDevice({
|
||||
const darkProps = darkSrc
|
||||
? getImageProps({ src: darkSrc, ...shared }).props
|
||||
: null;
|
||||
const darkSrcSet = darkProps?.srcSet ?? darkProps?.src;
|
||||
|
||||
return (
|
||||
<picture className="block">
|
||||
{darkProps ? (
|
||||
<source
|
||||
media="(prefers-color-scheme: dark)"
|
||||
srcSet={darkProps.srcSet}
|
||||
srcSet={darkSrcSet}
|
||||
sizes={darkProps.sizes}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user