Refresh web branding for new app theme
This commit is contained in:
@@ -143,7 +143,7 @@ export function FeatureShowcase() {
|
||||
"focus-visible:ring-primary/40 inline-flex min-h-11 shrink-0 items-center gap-2 rounded-full border px-4 py-2 text-sm font-semibold transition-colors outline-none focus-visible:ring-2",
|
||||
isActive
|
||||
? "border-primary-button bg-primary-button text-white shadow-sm"
|
||||
: "border-border-soft bg-surface text-muted-foreground hover:border-primary/30 hover:text-foreground",
|
||||
: "border-border-soft bg-surface/75 text-muted-foreground hover:border-primary/30 hover:text-foreground backdrop-blur-xl",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" aria-hidden="true" />
|
||||
@@ -187,7 +187,7 @@ export function FeatureShowcase() {
|
||||
</div>
|
||||
|
||||
<div className="justify-self-center lg:justify-self-end">
|
||||
<div className="border-border-soft bg-surface-soft/80 rounded-[2.5rem] border p-5 shadow-[0_30px_80px_rgba(15,23,42,0.10)] sm:p-7">
|
||||
<div className="glass-panel rounded-[2.5rem] p-5 sm:p-7">
|
||||
<PhoneMockup
|
||||
src={active.image}
|
||||
darkSrc={active.darkImage}
|
||||
|
||||
@@ -1,17 +1,10 @@
|
||||
export function ScreenBackground() {
|
||||
return (
|
||||
<div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden print:hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-canvas"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: "28px 28px",
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-x-0 top-0 h-[260px] bg-gradient-to-b from-primary-light/24 to-transparent" />
|
||||
<div className="ambient-canvas absolute inset-0" />
|
||||
<div className="bg-primary-light/22 absolute -top-48 -left-40 size-[34rem] rounded-full blur-3xl" />
|
||||
<div className="absolute top-[28vh] -right-52 size-[38rem] rounded-full bg-[#d9ecff]/30 blur-3xl dark:bg-[#123d5b]/28" />
|
||||
<div className="absolute bottom-[6vh] -left-56 size-[38rem] rounded-full bg-[#fbe9d7]/32 blur-3xl dark:bg-[#4a3026]/24" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,8 +10,8 @@ const footerLinks = [
|
||||
|
||||
export function SiteFooter() {
|
||||
return (
|
||||
<footer className="print-hidden border-border-soft bg-surface/80 border-t">
|
||||
<div className="mx-auto grid max-w-6xl gap-10 px-4 py-12 text-sm sm:px-6 md:grid-cols-[1.3fr_0.7fr_0.7fr]">
|
||||
<footer className="print-hidden px-3 pb-3 sm:px-5 sm:pb-5">
|
||||
<div className="glass-panel mx-auto grid max-w-6xl gap-10 rounded-[2rem] px-6 py-10 text-sm sm:px-8 md:grid-cols-[1.3fr_0.7fr_0.7fr]">
|
||||
<div>
|
||||
<Link
|
||||
href="/"
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { Menu } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
import { MedscribeLogo } from "~/components/medscribe-logo";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const navigation = [
|
||||
{ href: "/", label: "Home" },
|
||||
@@ -11,9 +15,11 @@ const navigation = [
|
||||
] as const;
|
||||
|
||||
export function SiteHeader() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<header className="print-hidden border-border-soft/70 bg-canvas/88 sticky top-0 z-50 border-b backdrop-blur-lg">
|
||||
<div className="relative mx-auto flex h-16 max-w-6xl items-center gap-5 px-4 sm:px-6">
|
||||
<header className="print-hidden sticky top-0 z-50 px-3 pt-3 sm:px-5">
|
||||
<div className="glass-panel-strong relative mx-auto flex h-14 max-w-6xl items-center gap-5 rounded-[1.25rem] px-3.5 sm:px-5">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-foreground focus-visible:ring-primary/40 absolute left-1/2 flex shrink-0 -translate-x-1/2 items-center gap-2.5 rounded-md transition-opacity outline-none hover:opacity-75 focus-visible:ring-2 md:static md:translate-x-0"
|
||||
@@ -33,7 +39,13 @@ export function SiteHeader() {
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-muted-foreground hover:bg-surface-soft hover:text-foreground focus-visible:ring-primary/40 rounded-lg px-3 py-2 text-sm font-medium transition-colors outline-none focus-visible:ring-2"
|
||||
aria-current={pathname === item.href ? "page" : undefined}
|
||||
className={cn(
|
||||
"focus-visible:ring-primary/40 rounded-full px-3 py-2 text-sm font-medium transition-all outline-none focus-visible:ring-2",
|
||||
pathname === item.href
|
||||
? "text-foreground border border-white/45 bg-white/[0.48] shadow-[inset_0_1px_0_rgba(255,255,255,0.5),0_5px_16px_rgba(15,118,110,0.1)] dark:border-white/10 dark:bg-white/8"
|
||||
: "text-muted-foreground hover:bg-primary-light/60 hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
@@ -44,19 +56,25 @@ export function SiteHeader() {
|
||||
</nav>
|
||||
|
||||
<details className="group relative ml-auto md:hidden">
|
||||
<summary className="border-border-soft bg-surface text-foreground focus-visible:ring-primary/40 flex size-11 cursor-pointer list-none items-center justify-center rounded-xl border outline-none marker:content-none focus-visible:ring-2 [&::-webkit-details-marker]:hidden">
|
||||
<summary className="border-border-soft/70 bg-surface/70 text-foreground focus-visible:ring-primary/40 flex size-10 cursor-pointer list-none items-center justify-center rounded-full border outline-none marker:content-none focus-visible:ring-2 [&::-webkit-details-marker]:hidden">
|
||||
<Menu className="size-5" aria-hidden="true" />
|
||||
<span className="sr-only">Open navigation</span>
|
||||
</summary>
|
||||
<nav
|
||||
aria-label="Mobile navigation"
|
||||
className="border-border-soft bg-surface absolute top-13 right-0 flex w-64 flex-col rounded-2xl border p-2 shadow-[0_18px_50px_rgba(15,23,42,0.16)]"
|
||||
className="glass-panel-strong absolute top-12 right-0 flex w-64 flex-col rounded-[1.4rem] p-2"
|
||||
>
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-foreground hover:bg-surface-soft focus-visible:ring-primary/40 rounded-xl px-4 py-3 text-sm font-medium outline-none focus-visible:ring-2"
|
||||
aria-current={pathname === item.href ? "page" : undefined}
|
||||
className={cn(
|
||||
"text-foreground focus-visible:ring-primary/40 rounded-xl px-4 py-3 text-sm font-medium outline-none focus-visible:ring-2",
|
||||
pathname === item.href
|
||||
? "bg-primary-light/75 shadow-[inset_0_1px_0_rgba(255,255,255,0.35)]"
|
||||
: "hover:bg-primary-light/60",
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
|
||||
@@ -5,17 +5,17 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"print-hidden inline-flex shrink-0 items-center justify-center gap-2 rounded-[14px] text-sm font-semibold whitespace-nowrap transition-all outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
"print-hidden inline-flex shrink-0 items-center justify-center gap-2 rounded-full text-sm font-semibold whitespace-nowrap transition-all outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary-button text-white shadow-sm hover:bg-primary-button/90",
|
||||
"bg-primary-button text-white shadow-[0_10px_25px_rgba(15,118,110,0.2)] hover:-translate-y-0.5 hover:bg-primary-button/90",
|
||||
outline:
|
||||
"border border-border-soft bg-surface text-foreground hover:bg-surface-soft",
|
||||
secondary:
|
||||
"bg-primary-light text-primary hover:bg-primary-light/80",
|
||||
ghost: "text-muted-foreground hover:bg-surface-soft hover:text-foreground",
|
||||
"border border-border-soft bg-surface/75 text-foreground backdrop-blur-xl hover:-translate-y-0.5 hover:bg-surface-soft",
|
||||
secondary: "bg-primary-light text-primary hover:bg-primary-light/80",
|
||||
ghost:
|
||||
"text-muted-foreground hover:bg-surface-soft hover:text-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-11 px-5",
|
||||
|
||||
Reference in New Issue
Block a user