Refine section transitions and device frames
This commit is contained in:
@@ -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
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 895 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 983 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 896 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 954 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 851 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 970 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 829 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 948 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 346 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 786 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 875 KiB |
@@ -133,10 +133,10 @@ export default function HowItWorksPage() {
|
||||
context.
|
||||
</p>
|
||||
</div>
|
||||
<div className="section-wash justify-self-center rounded-[2.5rem] p-7">
|
||||
<div className="justify-self-center py-2">
|
||||
<PhoneMockup
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural-dark.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural-dark.webp"
|
||||
alt="Illustrative Medscribe visit summary"
|
||||
width={235}
|
||||
/>
|
||||
@@ -147,10 +147,10 @@ export default function HowItWorksPage() {
|
||||
</div>
|
||||
|
||||
<div className="grid gap-12 lg:grid-cols-2 lg:items-center">
|
||||
<div className="section-wash justify-self-center rounded-[2.5rem] p-7 lg:order-1">
|
||||
<div className="justify-self-center py-2 lg:order-1">
|
||||
<PhoneMockup
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural-dark.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural-dark.webp"
|
||||
alt="Illustrative Medscribe medication detail"
|
||||
width={235}
|
||||
/>
|
||||
@@ -209,10 +209,10 @@ export default function HowItWorksPage() {
|
||||
it, and when the conversation happens.
|
||||
</p>
|
||||
</div>
|
||||
<div className="section-wash justify-self-center rounded-[2.5rem] p-7">
|
||||
<div className="justify-self-center py-2">
|
||||
<PhoneMockup
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/know-me-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-23-complete/know-me-natural-dark.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/know-me-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-clipped/know-me-natural-dark.webp"
|
||||
alt="Illustrative Medscribe Know Me handoff"
|
||||
width={235}
|
||||
/>
|
||||
|
||||
@@ -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() {
|
||||
<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]">
|
||||
<ProductDevice
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-23-complete/summary-reviewed-natural-dark.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-clipped/summary-reviewed-natural-dark.webp"
|
||||
alt="Medscribe visit summary in a natural titanium iPhone product bezel"
|
||||
className="pitch-device-motion pitch-device-drift-left"
|
||||
sizes="(min-width: 1024px) 416px, (min-width: 640px) 352px, 272px"
|
||||
@@ -143,8 +143,8 @@ export default function HomePage() {
|
||||
</div>
|
||||
<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/product-bezel-2026-08-23-complete/home-black.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-23-complete/home-black-dark.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/home-black.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-clipped/home-black-dark.webp"
|
||||
alt="Medscribe home screen in a black titanium iPhone product bezel"
|
||||
className="pitch-device-motion pitch-device-drift-right"
|
||||
sizes="(min-width: 1024px) 448px, (min-width: 640px) 368px, 288px"
|
||||
@@ -253,8 +253,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-23-complete/medication-detail-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-23-complete/medication-detail-natural-dark.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-clipped/medication-detail-natural-dark.webp"
|
||||
alt="Medscribe medication detail in a natural titanium iPhone product bezel"
|
||||
className="pitch-device-motion pitch-device-drift-left"
|
||||
sizes="(min-width: 1024px) 368px, (min-width: 640px) 336px, 272px"
|
||||
@@ -262,8 +262,8 @@ export default function HomePage() {
|
||||
</div>
|
||||
<div className="absolute top-0 right-[2%] z-10 w-[18rem] rotate-5 sm:w-[22rem] lg:w-[24rem]">
|
||||
<ProductDevice
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/medications-black.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-23-complete/medications-black-dark.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/medications-black.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-clipped/medications-black-dark.webp"
|
||||
alt="Medscribe medication list in a black titanium iPhone product bezel"
|
||||
className="pitch-device-motion pitch-device-drift-right"
|
||||
sizes="(min-width: 1024px) 384px, (min-width: 640px) 352px, 288px"
|
||||
@@ -334,8 +334,8 @@ export default function HomePage() {
|
||||
<div className="mx-auto grid w-full max-w-[43rem] items-center justify-center gap-2 sm:grid-cols-[minmax(0,18rem)_minmax(0,22rem)] lg:justify-end">
|
||||
<div className="mx-auto w-[min(72vw,18rem)] -rotate-2 sm:w-full">
|
||||
<ProductDevice
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/ask-black.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-23-complete/ask-black-dark.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/ask-black.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-clipped/ask-black-dark.webp"
|
||||
alt="Medscribe Ask response shown in a black titanium iPhone product bezel"
|
||||
className="pitch-device-motion pitch-device-drift-left"
|
||||
sizes="(min-width: 640px) 288px, 72vw"
|
||||
@@ -352,8 +352,8 @@ export default function HomePage() {
|
||||
<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" />
|
||||
<ProductDevice
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/know-me-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-23-complete/know-me-natural-dark.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/know-me-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-24-clipped/know-me-natural-dark.webp"
|
||||
alt="Medscribe Know Me handoff record in a natural titanium iPhone product bezel"
|
||||
className="pitch-device-motion pitch-device-drift-left"
|
||||
sizes="(min-width: 1024px) 448px, (min-width: 640px) 400px, 80vw"
|
||||
|
||||
@@ -161,13 +161,13 @@ export function CvsPrintSummary() {
|
||||
<div className="mx-auto w-[202px]">
|
||||
<div>
|
||||
<Image
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/medications-black.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/medications-black.webp"
|
||||
alt="Medscribe medications screen"
|
||||
width={1350}
|
||||
height={2760}
|
||||
priority
|
||||
unoptimized
|
||||
className="block h-auto w-full drop-shadow-[0_18px_30px_rgba(15,23,42,0.18)]"
|
||||
className="block h-auto w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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() {
|
||||
</div>
|
||||
|
||||
<div className="justify-self-center lg:justify-self-end">
|
||||
<div className="surface-panel rounded-[2.5rem] p-5 sm:p-7">
|
||||
<div className="py-2">
|
||||
<PhoneMockup
|
||||
src={active.image}
|
||||
darkSrc={active.darkImage}
|
||||
|
||||
@@ -127,13 +127,13 @@ export function NorthwellPrintSummary() {
|
||||
<div className="mx-auto w-[210px]">
|
||||
<div>
|
||||
<Image
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/home-black.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/home-black.webp"
|
||||
alt="Medscribe home screen"
|
||||
width={1350}
|
||||
height={2760}
|
||||
priority
|
||||
unoptimized
|
||||
className="block h-auto w-full drop-shadow-[0_18px_30px_rgba(15,23,42,0.18)]"
|
||||
className="block h-auto w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -161,13 +161,13 @@ export function WalgreensPrintSummary() {
|
||||
<div className="mx-auto w-[202px]">
|
||||
<div>
|
||||
<Image
|
||||
src="/screenshots/product-bezel-2026-08-23-complete/medications-black.webp"
|
||||
src="/screenshots/product-bezel-2026-08-24-clipped/medications-black.webp"
|
||||
alt="Medscribe medications screen"
|
||||
width={1350}
|
||||
height={2760}
|
||||
priority
|
||||
unoptimized
|
||||
className="block h-auto w-full drop-shadow-[0_18px_30px_rgba(15,23,42,0.18)]"
|
||||
className="block h-auto w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user