Refresh web branding for new app theme
This commit is contained in:
@@ -78,7 +78,7 @@ export default function AccessPage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-border-soft bg-surface rounded-[2rem] border p-7 shadow-[0_24px_70px_rgba(15,23,42,0.08)] sm:p-9">
|
||||
<div className="glass-panel rounded-[2rem] p-7 sm:p-9">
|
||||
<div className="bg-primary-light text-primary flex size-12 items-center justify-center rounded-xl">
|
||||
<Mail className="size-6" aria-hidden="true" />
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@ export default function AccessPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-border-soft border-y bg-[#f4f0e8]/75 px-4 py-20 sm:px-6 lg:py-24 dark:bg-[#151b25]">
|
||||
<section className="brand-warm border-border-soft/70 border-y px-4 py-20 sm:px-6 lg:py-24">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<SectionLabel>Made for real life</SectionLabel>
|
||||
<h2 className="text-foreground mt-4 max-w-3xl font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
|
||||
@@ -118,7 +118,7 @@ export default function AccessPage() {
|
||||
return (
|
||||
<article
|
||||
key={item.title}
|
||||
className="border-border-soft bg-surface rounded-2xl border p-6"
|
||||
className="glass-panel rounded-2xl p-6"
|
||||
>
|
||||
<Icon className="text-primary size-6" aria-hidden="true" />
|
||||
<h3 className="text-foreground mt-5 font-serif text-2xl font-semibold">
|
||||
@@ -147,7 +147,7 @@ export default function AccessPage() {
|
||||
return (
|
||||
<article
|
||||
key={item.title}
|
||||
className="border-border-soft bg-surface rounded-2xl border p-6"
|
||||
className="glass-panel rounded-2xl p-6"
|
||||
>
|
||||
<Icon className="text-primary size-6" aria-hidden="true" />
|
||||
<h3 className="text-foreground mt-5 font-serif text-2xl font-semibold">
|
||||
@@ -161,7 +161,7 @@ export default function AccessPage() {
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="mt-14 rounded-[2rem] bg-[#0f4f4b] p-7 text-white sm:p-10">
|
||||
<div className="brand-night mt-14 rounded-[2rem] p-7 text-white shadow-[0_28px_70px_rgba(7,20,21,0.2)] sm:p-10">
|
||||
<p className="text-xs font-bold tracking-[0.14em] text-teal-100 uppercase">
|
||||
Keep your care team in the loop
|
||||
</p>
|
||||
|
||||
@@ -68,7 +68,7 @@ export default function HowItWorksPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-border-soft bg-surface/75 border-y px-4 py-18 sm:px-6 lg:py-22">
|
||||
<section className="brand-warm border-border-soft/70 border-y px-4 py-18 sm:px-6 lg:py-22">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<SectionLabel>Start where the information is</SectionLabel>
|
||||
<h2 className="text-foreground mt-4 max-w-3xl font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
|
||||
@@ -81,7 +81,7 @@ export default function HowItWorksPage() {
|
||||
return (
|
||||
<article
|
||||
key={item.title}
|
||||
className="border-border-soft bg-canvas rounded-2xl border p-6"
|
||||
className="glass-panel rounded-2xl p-6"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="bg-primary-light text-primary flex size-11 items-center justify-center rounded-xl">
|
||||
@@ -126,7 +126,7 @@ export default function HowItWorksPage() {
|
||||
The visit remains available beside the summary so you can check
|
||||
wording, follow-ups, and the details you want to remember.
|
||||
</p>
|
||||
<p className="border-border-soft bg-surface text-muted-foreground mt-5 rounded-2xl border p-5 text-sm leading-relaxed">
|
||||
<p className="glass-panel text-muted-foreground mt-5 rounded-2xl p-5 text-sm leading-relaxed">
|
||||
<strong className="text-foreground">Stay oriented:</strong> move
|
||||
between the transcript and summary whenever you want the fuller
|
||||
context.
|
||||
@@ -146,7 +146,7 @@ export default function HowItWorksPage() {
|
||||
</div>
|
||||
|
||||
<div className="grid gap-12 lg:grid-cols-2 lg:items-center">
|
||||
<div className="justify-self-center rounded-[2.5rem] bg-[#f4f0e8] p-7 lg:order-1 dark:bg-[#151b25]">
|
||||
<div className="brand-warm justify-self-center rounded-[2.5rem] p-7 lg:order-1">
|
||||
<PhoneMockup
|
||||
src="/screenshots/product-bezel-2026-08-20/medication-detail-natural.webp"
|
||||
darkSrc="/screenshots/product-bezel-2026-08-20/medication-detail-natural-dark.webp"
|
||||
@@ -205,7 +205,7 @@ export default function HowItWorksPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-border-soft border-t bg-[#f4f0e8]/75 px-4 py-20 sm:px-6 dark:bg-[#151b25]">
|
||||
<section className="brand-warm border-border-soft/70 border-t px-4 py-20 sm:px-6">
|
||||
<div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-2">
|
||||
<div>
|
||||
<div className="bg-primary-light text-primary flex size-12 items-center justify-center rounded-xl">
|
||||
@@ -222,7 +222,7 @@ export default function HowItWorksPage() {
|
||||
{boundaries.map((item) => (
|
||||
<li
|
||||
key={item}
|
||||
className="border-border-soft bg-surface text-foreground flex gap-3 rounded-2xl border p-4 text-sm leading-relaxed"
|
||||
className="glass-panel text-foreground flex gap-3 rounded-2xl p-4 text-sm leading-relaxed"
|
||||
>
|
||||
<Check
|
||||
className="text-primary mt-0.5 size-5 shrink-0"
|
||||
@@ -236,7 +236,7 @@ export default function HowItWorksPage() {
|
||||
</section>
|
||||
|
||||
<section className="px-4 py-20 sm:px-6">
|
||||
<div className="mx-auto flex max-w-6xl flex-col items-start justify-between gap-7 rounded-[2rem] bg-[#0f4f4b] px-7 py-10 text-white sm:px-10 md:flex-row md:items-center">
|
||||
<div className="brand-night mx-auto flex max-w-6xl flex-col items-start justify-between gap-7 rounded-[2rem] px-7 py-10 text-white shadow-[0_28px_70px_rgba(7,20,21,0.2)] sm:px-10 md:flex-row md:items-center">
|
||||
<div>
|
||||
<h2 className="font-serif text-3xl font-semibold">
|
||||
Privacy should feel understandable.
|
||||
|
||||
@@ -99,7 +99,8 @@ export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<section className="relative isolate min-h-[calc(100svh-4rem)] overflow-hidden px-4 pt-14 sm:px-6 sm:pt-20 lg:pt-24">
|
||||
<div className="bg-primary-light/55 absolute top-0 left-1/2 -z-10 h-[38rem] w-[68rem] max-w-[120vw] -translate-x-1/2 rounded-full blur-3xl" />
|
||||
<div className="bg-primary-light/60 absolute -top-32 left-1/2 -z-10 h-[42rem] w-[74rem] max-w-[125vw] -translate-x-1/2 rounded-full blur-3xl" />
|
||||
<div className="absolute top-48 -right-28 -z-10 size-[28rem] rounded-full bg-[#d9ecff]/35 blur-3xl dark:bg-[#123d5b]/28" />
|
||||
<div className="mx-auto max-w-7xl text-center">
|
||||
<div className="animate-fade-in-up flex items-center justify-center gap-3">
|
||||
<span className="bg-success-light text-success rounded-full px-3 py-1.5 text-xs font-bold tracking-[0.12em] uppercase">
|
||||
@@ -156,7 +157,7 @@ export default function HomePage() {
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="pitch-lazy border-border-soft bg-surface/80 flex min-h-[78svh] items-center border-y px-4 py-24 sm:px-6 lg:py-32">
|
||||
<section className="pitch-lazy brand-warm border-border-soft/70 flex min-h-[78svh] items-center border-y px-4 py-24 sm:px-6 lg:py-32">
|
||||
<div className="pitch-copy-motion mx-auto max-w-6xl text-center">
|
||||
<p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
|
||||
The connected picture
|
||||
@@ -199,7 +200,7 @@ export default function HomePage() {
|
||||
{visitMoments.map((moment, index) => (
|
||||
<li
|
||||
key={moment.number}
|
||||
className="pitch-card-motion border-border-soft bg-surface relative overflow-hidden rounded-[2.5rem] border px-5 pt-8 shadow-[0_30px_90px_rgba(15,23,42,0.08)] sm:px-10 sm:pt-10 dark:shadow-[0_30px_90px_rgba(0,0,0,0.25)]"
|
||||
className="pitch-card-motion glass-panel relative overflow-hidden rounded-[2.5rem] px-5 pt-8 sm:px-10 sm:pt-10"
|
||||
>
|
||||
<div className="relative z-10 max-w-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -233,8 +234,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pitch-lazy relative isolate overflow-hidden bg-[#082f2c] px-4 py-24 text-white sm:px-6 lg:py-36">
|
||||
<div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_78%_18%,rgba(45,212,191,0.25),transparent_32%),radial-gradient(circle_at_16%_80%,rgba(20,184,166,0.15),transparent_28%)]" />
|
||||
<section className="pitch-lazy brand-night relative isolate overflow-hidden px-4 py-24 text-white sm:px-6 lg:py-36">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="pitch-copy-motion mx-auto max-w-4xl text-center">
|
||||
<p className="text-xs font-bold tracking-[0.2em] text-teal-200 uppercase">
|
||||
@@ -288,7 +288,7 @@ export default function HomePage() {
|
||||
].map((item) => (
|
||||
<article
|
||||
key={item.title}
|
||||
className="bg-[#0b3b37]/90 p-7 sm:p-9"
|
||||
className="bg-[#0c2727]/88 p-7 backdrop-blur-sm sm:p-9"
|
||||
>
|
||||
<Check className="size-5 text-teal-200" aria-hidden="true" />
|
||||
<h3 className="mt-5 font-serif text-2xl font-semibold sm:text-3xl">
|
||||
@@ -304,7 +304,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pitch-lazy bg-[#f0ece4] px-4 py-24 sm:px-6 lg:py-36 dark:bg-[#111827]">
|
||||
<section className="pitch-lazy brand-warm px-4 py-24 sm:px-6 lg:py-36">
|
||||
<div className="mx-auto grid max-w-7xl items-center gap-14 lg:grid-cols-[1fr_0.9fr] lg:gap-24">
|
||||
<div className="pitch-copy-motion order-2 lg:order-1">
|
||||
<p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
|
||||
@@ -360,7 +360,7 @@ export default function HomePage() {
|
||||
to review together.
|
||||
</p>
|
||||
<div className="mt-9 grid gap-4 sm:grid-cols-2">
|
||||
<div className="border-border-soft bg-surface rounded-2xl border p-5">
|
||||
<div className="glass-panel rounded-2xl p-5">
|
||||
<ScanLine
|
||||
className="text-primary size-6"
|
||||
aria-hidden="true"
|
||||
@@ -372,7 +372,7 @@ export default function HomePage() {
|
||||
Show or share a selected, readable snapshot.
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-border-soft bg-surface rounded-2xl border p-5">
|
||||
<div className="glass-panel rounded-2xl p-5">
|
||||
<ContactRound
|
||||
className="text-primary size-6"
|
||||
aria-hidden="true"
|
||||
@@ -388,7 +388,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-24 overflow-hidden rounded-[2.5rem] bg-[#0f4f4b] p-7 text-white sm:p-10 lg:p-14">
|
||||
<div className="brand-night mt-24 overflow-hidden rounded-[2.5rem] p-7 text-white shadow-[0_35px_90px_rgba(7,20,21,0.22)] sm:p-10 lg:p-14">
|
||||
<div className="grid gap-12 lg:grid-cols-[0.85fr_1.15fr] lg:items-center">
|
||||
<div>
|
||||
<HeartHandshake
|
||||
@@ -430,7 +430,7 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pitch-lazy relative isolate overflow-hidden bg-[#070d15] px-4 py-24 text-white sm:px-6 lg:py-36">
|
||||
<section className="pitch-lazy brand-night relative isolate overflow-hidden px-4 py-24 text-white sm:px-6 lg:py-36">
|
||||
<div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_0%,rgba(45,212,191,0.13),transparent_36%)]" />
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="pitch-copy-motion mx-auto max-w-4xl text-center">
|
||||
@@ -493,7 +493,7 @@ export default function HomePage() {
|
||||
</section>
|
||||
|
||||
<section className="pitch-lazy flex min-h-[82svh] items-center px-4 py-24 sm:px-6 lg:py-32">
|
||||
<div className="pitch-copy-motion mx-auto w-full max-w-6xl overflow-hidden rounded-[3rem] border border-teal-900/10 bg-[linear-gradient(145deg,#ccfbf1_0%,#f0fdfa_44%,#ffffff_100%)] px-6 py-16 text-center shadow-[0_35px_110px_rgba(15,118,110,0.15)] sm:px-10 lg:px-20 lg:py-24 dark:border-teal-300/10 dark:bg-[linear-gradient(145deg,#134e4a_0%,#0f2930_48%,#111827_100%)]">
|
||||
<div className="pitch-copy-motion brand-warm border-border-soft/65 mx-auto w-full max-w-6xl overflow-hidden rounded-[3rem] border px-6 py-16 text-center shadow-[0_35px_110px_rgba(15,118,110,0.14)] sm:px-10 lg:px-20 lg:py-24">
|
||||
<p className="text-primary text-xs font-bold tracking-[0.2em] uppercase">
|
||||
Made for people who carry a lot
|
||||
</p>
|
||||
|
||||
@@ -78,16 +78,13 @@ export default function PrivacyPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-border-soft border-y bg-[#f4f0e8]/75 px-4 py-20 sm:px-6 lg:py-24 dark:bg-[#151b25]">
|
||||
<section className="brand-warm border-border-soft/70 border-y px-4 py-20 sm:px-6 lg:py-24">
|
||||
<div className="mx-auto grid max-w-6xl gap-4 md:grid-cols-3">
|
||||
{principles.map((item) => {
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<article
|
||||
key={item.title}
|
||||
className="border-border-soft bg-surface rounded-2xl border p-6"
|
||||
>
|
||||
<article key={item.title} className="glass-panel rounded-2xl p-6">
|
||||
<Icon className="text-primary size-6" aria-hidden="true" />
|
||||
<h2 className="text-foreground mt-5 font-serif text-2xl font-semibold">
|
||||
{item.title}
|
||||
@@ -119,7 +116,7 @@ export default function PrivacyPage() {
|
||||
{commitments.map((item) => (
|
||||
<article
|
||||
key={item.title}
|
||||
className="border-border-soft bg-surface rounded-2xl border p-6 sm:p-7"
|
||||
className="glass-panel rounded-2xl p-6 sm:p-7"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="bg-primary-light text-primary flex size-10 shrink-0 items-center justify-center rounded-xl">
|
||||
@@ -140,7 +137,7 @@ export default function PrivacyPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-[#082f2c] px-4 py-20 text-white sm:px-6 lg:py-24">
|
||||
<section className="brand-night px-4 py-20 text-white sm:px-6 lg:py-24">
|
||||
<div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-2 lg:items-center">
|
||||
<div>
|
||||
<p className="text-xs font-bold tracking-[0.16em] text-teal-200 uppercase">
|
||||
@@ -168,7 +165,7 @@ export default function PrivacyPage() {
|
||||
</section>
|
||||
|
||||
<section className="px-4 py-18 sm:px-6">
|
||||
<div className="border-border-soft bg-surface mx-auto flex max-w-6xl flex-col items-start justify-between gap-6 rounded-[2rem] border p-7 sm:flex-row sm:items-center sm:p-9">
|
||||
<div className="glass-panel mx-auto flex max-w-6xl flex-col items-start justify-between gap-6 rounded-[2rem] p-7 sm:flex-row sm:items-center sm:p-9">
|
||||
<div>
|
||||
<h2 className="text-foreground font-serif text-3xl font-semibold">
|
||||
See how Medscribe fits into the day.
|
||||
|
||||
Reference in New Issue
Block a user