品牌官网与营销落地页 (React 19 + Tailwind v4 + shadcn/ui)

1. 核心技术栈清单与职责说明

架构层级	推荐选型	职责与功能定位说明
核心视图引擎	React 19	业界领先的声明式 UI 引擎，引入 Actions 与 useActionState 等原生状态处理能力
构建与工具链	Vite 5+ + TypeScript	毫秒级冷启动与极速构建，输出纯静态客户端生产资产
样式与原子设计	TailwindCSS v4 (@tailwindcss/vite)	原生 Vite 插件驱动，免除冗余配置文件，支持高质感毛玻璃、渐变边框与响应式原子化排版
UI 组件架构	shadcn/ui (基于 Radix UI)	现代“非依赖型”无头 UI 体系，源码直接拷贝入项目，零不可控封装黑盒，支持像素级微调
多页面与导航路由	React Router 7	现代化声明式路由，支撑从单页 Landing Page 平滑演进至包含定价、案例、关于的多页面品牌站
获客留资与表单校验	React Hook Form + Zod	商业落地页核心转化引擎，配合 shadcn Form 组件，实现预约演示、线索收集的高性能类型安全表单
SEO 与社交分享卡片	@unhead/react	声明式管理页面 <title>, <meta description>, 微信/Twitter/LinkedIn 分享大图卡片（OpenGraph）与结构化数据
现代动效引擎	Motion (motion/react)	官方最新独立动效库（原 Framer Motion 重构），体积缩减 60%，驱动视差滚动、卡片悬浮与入场微交互
顶级平滑滚动	lenis	打造类似 Stripe、Apple、Linear 官网标志性的丝滑惯性平滑滚动手感，与页面动效深度协同
轻量网络请求	Axios	统一 HTTP 客户端，负责留资线索提交、邮件订阅等与后端 API 的鉴权、超时与错误捕获
极简线性图标	Lucide React	现代化极简线性图标库，与 shadcn 设计风格 100% 契合

2. 核心选型考量与技术优势

• 纯静态资产零运维开销：构建产物为纯 HTML/JS/CSS 静态文件，无任何 Node.js 运行时负担，可直接部署于全球 CDN（Cloudflare Pages、Vercel、OSS/COS）边缘节点，抗突发高并发流量能力极强。
• 全球顶流 AI 代码生成生态：React + Tailwind + shadcn 是全球目前公认与大模型（v0.dev、Cursor、Claude Artifacts）最契合的 UI 生态，AI 能够以极高审美标准一键生成高质量现代化营销落地页区块。
• 商业获客与转化闭环（留资表单 + SEO 社交卡片）：
  • 基于 React Hook Form + Zod 配合 shadcn 打造零多余渲染的 Demo 预约与线索收集表单，即时校验与防重复提交体验极佳；
  • 通过 @unhead/react 声明式管理 TDK、OpenGraph / Twitter Card，让官网在微信、社交媒体中分享时拥有完美的封面大图与摘要卡片，大幅提升传播点击率。
• Stripe/Apple 级顶级微交互动效与平滑滚动：
  • 全新 motion/react 原生硬件加速，体积精简 60%，驱动视差滚动、滚动触发进场（InView）与浮入微交互；
  • lenis 接管滚动条阻尼，赋予页面现代化高级网站标志性的丝滑惯性手感。
• 源码级资产自主可控：shadcn/ui 采用将组件源码直接拷贝到项目中的模式，团队可随意改造 DOM 结构与无障碍（A11y）属性，彻底告别传统第三方组件库样式打补丁与版本锁死痛点。

3. 适用业务场景

• 企业品牌官方网站、产品发布宣传页、SaaS 软件商业落地页（Landing Page）；
• 商业活动推广专题、线索收集（Lead Generation）、产品定价与客户案例展示站；
• 追求极致现代设计质感、国际化视觉风格与边缘 CDN 快速分发的前台门户。

4. 局限性与权衡说明

• 局限性：纯客户端 CSR 单页在面对搜索引擎爬虫（传统非 JS 爬虫）时，SEO 表现略逊于预渲染 HTML；首屏需下载 JS 资产完成水合。
• 权衡建议：若业务核心 KPI 为极端苛刻的公共搜索引擎 SEO 排名收录，建议架构平滑过渡至 Astro + Tailwind + shadcn（首选岛屿架构，默认 0KB JS 纯静态直出）或 Next.js 静态导出模式（output: 'export'）。