style(landing): refine header and hero screenshot framing

joohw · cursoragent · joohw · commit fc1c88467d6e · 2026-06-05T10:41:51.000+08:00
Remove header backdrop and bottom divider; use Inter for nav typography.
Refresh use-case screenshots and crop edge pixels with a light scale.

Co-authored-by: Cursor &lt;cursoragent@cursor.com&gt;
diff --git a/landing/public/use-case-en.png b/landing/public/use-case-en.png
diff --git a/landing/public/use-case-zh.png b/landing/public/use-case-zh.png
diff --git a/landing/src/app/globals.css b/landing/src/app/globals.css
@@ -6,6 +6,7 @@
 
 :root {
   --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-header: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   --card: oklch(1 0 0);
   --border: oklch(0.922 0 0);
@@ -72,6 +73,7 @@
   --color-foreground: var(--foreground);
   --color-border: var(--border);
   --font-sans: var(--font-sans);
+  --font-header: var(--font-header);
   --font-mono: var(--font-mono);
   --font-heading: var(--font-sans);
   --color-sidebar-ring: var(--sidebar-ring);
@@ -160,6 +162,12 @@ a:visited {
   background: transparent;
 }
 
+.site-header {
+  font-family: var(--font-header);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .app-header {
   position: fixed;
   top: var(--app-header-float-top);
@@ -172,12 +180,10 @@ a:visited {
   align-items: center;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   box-sizing: border-box;
-  border: 1px solid var(--border);
   border-radius: 0;
-  background: var(--app-primary-surface-bg);
   box-shadow: none;
-  backdrop-filter: blur(16px) saturate(1.5);
   padding: 0 0.875rem;
+  font-family: var(--font-header);
 }
 
 @media (min-width: 640px) {
@@ -186,12 +192,6 @@ a:visited {
   }
 }
 
-.dark .app-header {
-  border-color: var(--border);
-  background: var(--app-primary-surface-bg);
-  box-shadow: none;
-}
-
 .header-brand {
   display: inline-flex;
   align-items: center;
@@ -241,14 +241,18 @@ a:visited {
 .header-nav-link {
   color: #71717a;
   text-decoration: none;
-  font-size: 0.9rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  line-height: 1;
   padding: 0.35rem 0.75rem;
   border-radius: 0;
 }
 
 .header-nav-link-active {
   color: var(--foreground);
   font-weight: 600;
+  letter-spacing: -0.015em;
 }
 
 .header-user-area {
diff --git a/landing/src/app/layout.tsx b/landing/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 import { cookies, headers } from "next/headers";
 import { AppShell } from "@/components/app-shell";
 import { I18nProvider } from "@/components/i18n-provider";
@@ -10,6 +11,12 @@ import { buildBaseJsonLdGraph, buildPageMetadata } from "@/lib/seo";
 import { getPublicSiteUrlFromRequest } from "@/lib/site";
 import "./globals.css";
 
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
 export async function generateMetadata(): Promise<Metadata> {
   return buildPageMetadata("home");
 }
@@ -32,7 +39,7 @@ export default async function RootLayout({
   const jsonLdScript = JSON.stringify(jsonLd).replace(/</g, "\\u003c");
 
   return (
-    <html lang={language} suppressHydrationWarning className="h-full antialiased">
+    <html lang={language} suppressHydrationWarning className={`${inter.variable} h-full antialiased`}>
       <body className="min-h-full flex flex-col">
         <ServerScripts jsonLd={jsonLdScript} />
         <I18nProvider language={language}>
diff --git a/landing/src/app/page.module.css b/landing/src/app/page.module.css
@@ -2,7 +2,7 @@
 
 .useCaseShot {
   overflow: hidden;
-  border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
+  border: 1px solid var(--border);
   border-radius: 0.75rem;
   background: color-mix(in oklch, var(--card) 88%, var(--muted) 12%);
 }
@@ -11,6 +11,8 @@
   display: block;
   width: 100%;
   height: auto;
+  transform: scale(1.01);
+  transform-origin: center center;
 }
 
 /* 纯灰渐变背景：oklch 第二项为 chroma，全程为 0，避免任何色相 */
diff --git a/landing/src/components/site-header.tsx b/landing/src/components/site-header.tsx
@@ -57,22 +57,22 @@ export function SiteHeader() {
 
   function navLinkClass(active: boolean) {
     return cn(
-      "relative rounded-md px-2.5 py-1.5 text-sm font-medium",
+      "relative rounded-md px-2.5 py-1.5 text-[0.8125rem] font-medium leading-none tracking-[-0.01em]",
       "motion-safe:transition-[color,opacity] motion-safe:duration-300 motion-safe:ease-out",
       "motion-reduce:transition-none",
       active
-        ? "font-semibold text-foreground opacity-100"
+        ? "font-semibold tracking-[-0.015em] text-foreground opacity-100"
         : cn(
-            "text-muted-foreground opacity-[0.62]",
-            "hover:text-foreground hover:opacity-100",
+            "text-muted-foreground/80 opacity-100",
+            "hover:text-foreground",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/45 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-            "focus-visible:text-foreground focus-visible:opacity-100"
+            "focus-visible:text-foreground"
           )
     );
   }
 
   return (
-    <header className="fixed top-0 left-0 right-0 z-40 border-b border-border/60 bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/85">
+    <header className="site-header fixed top-0 left-0 right-0 z-40">
       <div className="flex w-full items-center justify-between gap-3 px-4 py-3 sm:px-6">
         <div className="flex min-w-0 flex-1 items-center gap-5 sm:gap-6">
           <Link
@@ -106,7 +106,7 @@ export function SiteHeader() {
           </a>
           <button
             type="button"
-            className="inline-flex h-8 items-center justify-center rounded-md border border-border bg-card px-2 text-xs font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+            className="inline-flex h-8 items-center justify-center rounded-md border border-border bg-card px-2 text-[0.75rem] font-medium leading-none tracking-[-0.01em] transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
             onClick={() => void toggleLanguage()}
             aria-label={t("header.language")}
             title={isEnglish ? t("header.switchToZh") : t("header.switchToEn")}
diff --git a/landing/src/lib/assets.ts b/landing/src/lib/assets.ts
@@ -1,7 +1,7 @@
 import type { AppLanguage } from "@/i18n/config";
 
 /** Bump version when replacing use-case screenshots under the same filename. */
-const USE_CASE_VERSION = "2";
+const USE_CASE_VERSION = "3";
 
 export type UseCaseImage = {
   src: string;
