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

fix: pair website screenshots with color scheme

Browse Source
This commit is contained in:
soconnor
2026-08-20 21:15:35 -04:00
parent 81109f36ea
commit e466b25837
18 changed files with 40 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/page.tsx
+10
View File
@@ -29,6 +29,7 @@ const visitMoments = [
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/visits-natural.webp",
darkImage: "/screenshots/pitch/visits-natural-dark.webp",
alt: "Medscribe Visits screen in a natural titanium iPhone product bezel",
},
{
@@ -37,6 +38,7 @@ const visitMoments = [
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/transcript-black.webp",
darkImage: "/screenshots/pitch/transcript-black-dark.webp",
alt: "Medscribe visit transcript in a black titanium iPhone product bezel",
},
{
@@ -45,6 +47,7 @@ const visitMoments = [
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/summary-natural.webp",
darkImage: "/screenshots/pitch/summary-natural-dark.webp",
alt: "Medscribe appointment summary in a natural titanium iPhone product bezel",
},
] as const;
@@ -126,6 +129,7 @@ export default function HomePage() {
<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/summary-natural.webp"
darkSrc="/screenshots/pitch/summary-natural-dark.webp"
alt="Medscribe visit summary in a natural titanium iPhone product bezel"
sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px"
priority
@@ -134,6 +138,7 @@ export default function HomePage() {
<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/home-black.webp"
darkSrc="/screenshots/pitch/home-black-dark.webp"
alt="Medscribe home screen in a black titanium iPhone product bezel"
sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px"
priority
@@ -210,6 +215,7 @@ export default function HomePage() {
<div className="relative mx-auto mt-10 w-[min(72vw,21rem)] translate-y-14">
<ProductDevice
src={moment.image}
darkSrc={moment.darkImage}
alt={moment.alt}
sizes="(min-width: 1024px) 336px, (min-width: 640px) 320px, 72vw"
/>
@@ -241,6 +247,7 @@ export default function HomePage() {
<div className="absolute top-20 left-[4%] w-[17rem] -rotate-6 sm:w-[21rem] lg:w-[23rem]">
<ProductDevice
src="/screenshots/pitch/medication-detail-natural.webp"
darkSrc="/screenshots/pitch/medication-detail-natural-dark.webp"
alt="Medscribe medication detail in a natural titanium iPhone product bezel"
sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px"
/>
@@ -248,6 +255,7 @@ export default function HomePage() {
<div className="absolute top-0 right-[2%] z-10 w-[18rem] rotate-5 sm:w-[22rem] lg:w-[24rem]">
<ProductDevice
src="/screenshots/pitch/medications-black.webp"
darkSrc="/screenshots/pitch/medications-black-dark.webp"
alt="Medscribe medication list in a black titanium iPhone product bezel"
sizes="(min-width: 1024px) 384px, (min-width: 640px) 352px, 288px"
/>
@@ -309,6 +317,7 @@ export default function HomePage() {
<div className="order-1 mx-auto w-[min(78vw,27rem)] lg:order-2">
<ProductDevice
src="/screenshots/pitch/ask-black.webp"
darkSrc="/screenshots/pitch/ask-black-dark.webp"
alt="Medscribe Ask response grounded in local health context, shown in a black titanium iPhone product bezel"
sizes="(min-width: 1024px) 432px, (min-width: 640px) 384px, 78vw"
/>
@@ -323,6 +332,7 @@ export default function HomePage() {
<div className="bg-primary-light/70 absolute inset-[12%_-12%_8%] -z-10 rounded-[4rem] blur-2xl" />
<ProductDevice
src="/screenshots/pitch/know-me-natural.webp"
darkSrc="/screenshots/pitch/know-me-natural-dark.webp"
alt="Medscribe Know Me handoff record in a natural titanium iPhone product bezel"
sizes="(min-width: 1024px) 448px, (min-width: 640px) 400px, 80vw"
/>
src/components/product-device.tsx
+30 -13
View File
@@ -1,9 +1,10 @@
import Image from "next/image";
import { getImageProps } from "next/image";
import { cn } from "~/lib/utils";
type ProductDeviceProps = {
src: string;
darkSrc?: string;
alt: string;
className?: string;
sizes?: string;
@@ -17,23 +18,39 @@ type ProductDeviceProps = {
*/
export function ProductDevice({
src,
darkSrc,
alt,
className,
sizes = "(min-width: 1024px) 360px, (min-width: 640px) 320px, 72vw",
priority = false,
}: ProductDeviceProps) {
const shared = {
alt,
width: 810,
height: 1656,
sizes,
priority,
className: cn(
"h-auto w-full drop-shadow-[0_35px_35px_rgba(15,23,42,0.22)] dark:drop-shadow-[0_38px_42px_rgba(0,0,0,0.5)]",
className,
),
};
const { props: lightProps } = getImageProps({ src, ...shared });
const darkProps = darkSrc
? getImageProps({ src: darkSrc, ...shared }).props
: null;
return (
<Image
src={src}
alt={alt}
width={810}
height={1656}
sizes={sizes}
priority={priority}
className={cn(
"h-auto w-full drop-shadow-[0_35px_35px_rgba(15,23,42,0.22)] dark:drop-shadow-[0_38px_42px_rgba(0,0,0,0.5)]",
className,
)}
/>
<picture className="block">
{darkProps ? (
<source
media="(prefers-color-scheme: dark)"
srcSet={darkProps.srcSet}
sizes={darkProps.sizes}
/>
) : null}
{/* next/image cannot art-direct by color scheme without downloading both sources. */}
<img {...lightProps} alt={alt} />
</picture>
);
}