diff --git a/README.md b/README.md index c35b6db..f7d0a98 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ bun run start Screenshots live in `public/screenshots/`. Every route uses the same fresh, precomposited iPhone product-bezel assets in -`public/screenshots/product-bezel-2026-08-23-complete/`; there are no raw or CSS-framed +`public/screenshots/product-bezel-2026-08-24-clipped/`; there are no raw or CSS-framed product captures in the rendered site. The versioned path keeps newly captured UI from being hidden by stale browser or image-optimizer caches. Public pages label product imagery as an illustrative profile and Medscribe @@ -65,9 +65,10 @@ Export **in-app content only** from the simulator or device — no simulator chr 1. Run the app on **iPhone 17 Pro** (or 16 Pro) simulator or device, or on an **Android** emulator/device. 2. Capture each screen (⌘S in Simulator saves to Desktop; `adb exec-out screencap -p` on Android). -3. Composite each 1206 × 2622 PNG into a 1350 × 2760 product bezel at offset - `+72+69`, export the transparent WebP, and update the shared versioned asset - directory referenced by the routes. +3. Clip each 1206 × 2622 capture to the bezel's rounded display opening, then + composite it into a 1350 × 2760 product bezel at offset `+72+69`. Export a + transparent, lossless WebP and update the shared versioned asset directory + referenced by the routes. Product images are composited at the bezel source size of 1350 × 2760 with transparent backgrounds and rendered responsively through diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/ask-black-dark.webp b/public/screenshots/product-bezel-2026-08-24-clipped/ask-black-dark.webp new file mode 100644 index 0000000..ee49dfe Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/ask-black-dark.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/ask-black.webp b/public/screenshots/product-bezel-2026-08-24-clipped/ask-black.webp new file mode 100644 index 0000000..4ebd572 Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/ask-black.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/home-black-dark.webp b/public/screenshots/product-bezel-2026-08-24-clipped/home-black-dark.webp new file mode 100644 index 0000000..ae30d7f Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/home-black-dark.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/home-black.webp b/public/screenshots/product-bezel-2026-08-24-clipped/home-black.webp new file mode 100644 index 0000000..1ae14cf Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/home-black.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/know-me-natural-dark.webp b/public/screenshots/product-bezel-2026-08-24-clipped/know-me-natural-dark.webp new file mode 100644 index 0000000..ec274be Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/know-me-natural-dark.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/know-me-natural.webp b/public/screenshots/product-bezel-2026-08-24-clipped/know-me-natural.webp new file mode 100644 index 0000000..b67442a Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/know-me-natural.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural-dark.webp b/public/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural-dark.webp new file mode 100644 index 0000000..62d6309 Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural-dark.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural.webp b/public/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural.webp new file mode 100644 index 0000000..5f28c71 Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/medications-black-dark.webp b/public/screenshots/product-bezel-2026-08-24-clipped/medications-black-dark.webp new file mode 100644 index 0000000..4f39adb Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/medications-black-dark.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/medications-black.webp b/public/screenshots/product-bezel-2026-08-24-clipped/medications-black.webp new file mode 100644 index 0000000..39115e2 Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/medications-black.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural-dark.webp b/public/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural-dark.webp new file mode 100644 index 0000000..63722f1 Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural-dark.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural.webp b/public/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural.webp new file mode 100644 index 0000000..1dbfa02 Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black-dark.webp b/public/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black-dark.webp new file mode 100644 index 0000000..203426e Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black-dark.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black.webp b/public/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black.webp new file mode 100644 index 0000000..97ace44 Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/visits-natural-dark.webp b/public/screenshots/product-bezel-2026-08-24-clipped/visits-natural-dark.webp new file mode 100644 index 0000000..297301d Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/visits-natural-dark.webp differ diff --git a/public/screenshots/product-bezel-2026-08-24-clipped/visits-natural.webp b/public/screenshots/product-bezel-2026-08-24-clipped/visits-natural.webp new file mode 100644 index 0000000..53096ca Binary files /dev/null and b/public/screenshots/product-bezel-2026-08-24-clipped/visits-natural.webp differ diff --git a/src/app/(marketing)/how-it-works/page.tsx b/src/app/(marketing)/how-it-works/page.tsx index 20af116..67bbbd5 100644 --- a/src/app/(marketing)/how-it-works/page.tsx +++ b/src/app/(marketing)/how-it-works/page.tsx @@ -133,10 +133,10 @@ export default function HowItWorksPage() { context.

-
+
@@ -147,10 +147,10 @@ export default function HowItWorksPage() {
-
+
@@ -209,10 +209,10 @@ export default function HowItWorksPage() { it, and when the conversation happens.

-
+
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx index 5b4cad1..1a3162a 100644 --- a/src/app/(marketing)/page.tsx +++ b/src/app/(marketing)/page.tsx @@ -29,9 +29,9 @@ 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/product-bezel-2026-08-23-complete/visits-natural.webp", + image: "/screenshots/product-bezel-2026-08-24-clipped/visits-natural.webp", darkImage: - "/screenshots/product-bezel-2026-08-23-complete/visits-natural-dark.webp", + "/screenshots/product-bezel-2026-08-24-clipped/visits-natural-dark.webp", alt: "Medscribe Visits screen in a natural titanium iPhone product bezel", }, { @@ -40,9 +40,9 @@ const visitMoments = [ title: "Go back to what was actually said.", body: "Search the transcript and compare it with the generated summary before relying on it later.", image: - "/screenshots/product-bezel-2026-08-23-complete/transcript-populated-black.webp", + "/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black.webp", darkImage: - "/screenshots/product-bezel-2026-08-23-complete/transcript-populated-black-dark.webp", + "/screenshots/product-bezel-2026-08-24-clipped/transcript-populated-black-dark.webp", alt: "Medscribe visit transcript in a black titanium iPhone product bezel", }, { @@ -51,9 +51,9 @@ const visitMoments = [ title: "Review the useful part. Keep your judgment.", body: "Bring medications, follow-ups, diagnoses, and instructions into view, then check the details that matter.", image: - "/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural.webp", + "/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural.webp", darkImage: - "/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural-dark.webp", + "/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural-dark.webp", alt: "Medscribe appointment summary in a natural titanium iPhone product bezel", }, ] as const; @@ -133,8 +133,8 @@ export default function HomePage() {
Medscribe medications screen
diff --git a/src/components/feature-showcase.tsx b/src/components/feature-showcase.tsx index f503858..ea23c1e 100644 --- a/src/components/feature-showcase.tsx +++ b/src/components/feature-showcase.tsx @@ -26,9 +26,9 @@ const features = [ "Review important details before relying on them", "Carry follow-ups into the next conversation", ], - image: "/screenshots/product-bezel-2026-08-23-complete/visits-natural.webp", + image: "/screenshots/product-bezel-2026-08-24-clipped/visits-natural.webp", darkImage: - "/screenshots/product-bezel-2026-08-23-complete/visits-natural-dark.webp", + "/screenshots/product-bezel-2026-08-24-clipped/visits-natural-dark.webp", alt: "Illustrative Medscribe visit detail showing a visit summary and follow-up information", }, { @@ -44,9 +44,9 @@ const features = [ "Bring important questions to a clinician or pharmacist", ], image: - "/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural.webp", + "/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural.webp", darkImage: - "/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural-dark.webp", + "/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural-dark.webp", alt: "Illustrative Medscribe medication detail with schedule and medication information", }, { @@ -61,9 +61,9 @@ const features = [ "Keep a ready list for the next appointment", "See whether a doctor, prescriber, or pharmacist may be helpful", ], - image: "/screenshots/product-bezel-2026-08-23-complete/ask-black.webp", + image: "/screenshots/product-bezel-2026-08-24-clipped/ask-black.webp", darkImage: - "/screenshots/product-bezel-2026-08-23-complete/ask-black-dark.webp", + "/screenshots/product-bezel-2026-08-24-clipped/ask-black-dark.webp", alt: "Illustrative Medscribe answer with medication context and a safety boundary", }, { @@ -79,9 +79,9 @@ const features = [ "It complements—not replaces—clinical verification", ], image: - "/screenshots/product-bezel-2026-08-23-complete/know-me-natural.webp", + "/screenshots/product-bezel-2026-08-24-clipped/know-me-natural.webp", darkImage: - "/screenshots/product-bezel-2026-08-23-complete/know-me-natural-dark.webp", + "/screenshots/product-bezel-2026-08-24-clipped/know-me-natural-dark.webp", alt: "Illustrative Medscribe Know Me handoff with active medications and review state", }, ] as const; @@ -190,7 +190,7 @@ export function FeatureShowcase() {
-
+
Medscribe home screen
diff --git a/src/components/product-device.tsx b/src/components/product-device.tsx index 3b35e96..cfba973 100644 --- a/src/components/product-device.tsx +++ b/src/components/product-device.tsx @@ -13,7 +13,7 @@ type ProductDeviceProps = { /** * A precomposited product capture using the licensed device bezels in - * `public/screenshots/product-bezel-2026-08-23-complete`. Keeping the frame in the source + * `public/screenshots/product-bezel-2026-08-24-clipped`. Keeping the frame in the source * image preserves the bezel details without adding layout or client-side work. */ export function ProductDevice({ @@ -31,10 +31,7 @@ export function ProductDevice({ sizes, priority, quality: 92, - className: cn( - "h-auto w-full translate-z-0 drop-shadow-[0_35px_35px_rgba(15,23,42,0.22)] dark:drop-shadow-[0_38px_42px_rgba(0,0,0,0.5)]", - className, - ), + className: cn("h-auto w-full translate-z-0", className), }; const { props: lightProps } = getImageProps({ src, ...shared }); const darkProps = darkSrc diff --git a/src/components/walgreens-print-summary.tsx b/src/components/walgreens-print-summary.tsx index f9bdadd..e723291 100644 --- a/src/components/walgreens-print-summary.tsx +++ b/src/components/walgreens-print-summary.tsx @@ -161,13 +161,13 @@ export function WalgreensPrintSummary() {
Medscribe medications screen
diff --git a/src/styles/globals.css b/src/styles/globals.css index f54ceeb..bf57302 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -159,13 +159,7 @@ rgba(58, 134, 185, 0.08), transparent 76% ), - linear-gradient( - to bottom, - color-mix(in srgb, var(--color-canvas) 100%, transparent) 0, - var(--night) 5rem, - var(--night) calc(100% - 5rem), - color-mix(in srgb, var(--color-canvas) 100%, transparent) 100% - ); + var(--night); } .night-card {