-
专利与高校支持
-
- 拥有多项核心技术专利，与国内外顶尖院校深度合作
-
-
-
发明专利 3项
-
•
-
华西口腔医学院
-
•
-
全国高校生物医药区域技术转移转化中心
-
•
-
国家重点研发计划
+ {/* Additional info - 突出显示 */}
+
+ {/* 装饰性背景元素 */}
+
+
+
+
+
+ 权威认证
+
+
专利与高校支持
+
+ 拥有多项核心技术专利，与国内外顶尖院校深度合作
+
+
diff --git a/src/index.css b/src/index.css
index 2e95af1..507641d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,12 +3,65 @@
@tailwind utilities;
@layer base {
+ :root {
+ /* ============ 背景色系统 (浅色) ============ */
+ --bg-base: #f5f5f7; /* 页面底色 - 极浅灰 */
+ --bg-surface: #eff2f6; /* section背景 - 浅灰 */
+ --bg-elevated: #ffffff; /* 卡片背景 - 纯白 */
+ --bg-element: #fafafa; /* 次要元素背景 */
+
+ /* ============ 文本色系统 (深黑) ============ */
+ --text-primary: #1a1a1a; /* 主要文字 - 深黑 */
+ --text-secondary: #4a4a4a; /* 次要文字 - 中灰 */
+ --text-tertiary: #8a8a8a; /* 三级文字 - 浅灰 */
+
+ /* ============ Accent色彩系统 ============ */
+ --accent-primary: #2a2a2a; /* 主accent - 深黑 */
+ --accent-secondary: #6a6a6a; /* 次accent - 中灰 */
+ --accent-blue: #1e40af; /* 深蓝点缀色 - 专业科技感 */
+ --accent-blue-light: #3b82f6; /* 浅蓝 - hover状态 */
+ --accent-border: #e0e0e0; /* 边框灰 */
+
+ /* ============ 浅色背景上的阴影系统 ============ */
+ /* 微妙的柔和阴影,创造浮动感 */
+ --shadow-elevation-low:
+ 0 2px 8px rgba(0, 0, 0, 0.04),
+ 0 1px 2px rgba(0, 0, 0, 0.06);
+
+ --shadow-elevation-medium:
+ 0 4px 16px rgba(0, 0, 0, 0.08),
+ 0 2px 4px rgba(0, 0, 0, 0.06);
+
+ --shadow-elevation-high:
+ 0 12px 40px rgba(0, 0, 0, 0.12),
+ 0 4px 12px rgba(0, 0, 0, 0.08);
+
+ /* 内凹阴影 - 用于输入框等 */
+ --shadow-inset:
+ inset 0 2px 4px rgba(0, 0, 0, 0.06);
+
+ /* ============ 微妙边框效果 ============ */
+ --border-subtle: 1px solid rgba(0, 0, 0, 0.08);
+ --border-medium: 1px solid rgba(0, 0, 0, 0.12);
+ --border-strong: 1px solid rgba(0, 0, 0, 0.20);
+
+ /* ============ 玻璃态效果 (浅色版) ============ */
+ --glass-bg: rgba(255, 255, 255, 0.7);
+ --glass-border: rgba(0, 0, 0, 0.08);
+ --glass-blur: blur(20px);
+ }
+
* {
@apply scroll-smooth;
}
body {
- @apply bg-dark-bg text-gray-100 antialiased;
+ background-color: var(--bg-base);
+ color: var(--text-primary);
+ @apply antialiased;
+ /* 微妙的深色噪点纹理 */
+ background-image: radial-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px);
+ background-size: 24px 24px;
}
}
@@ -21,11 +74,150 @@
@apply py-20 lg:py-32;
}
- .gradient-text {
- @apply bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent;
+ /* ============ 白色卡片样式 ============ */
+ .card-white {
+ @apply bg-white rounded-4xl p-8 border border-black/5 relative overflow-hidden transition-all duration-300 ease-in-out;
+ box-shadow: var(--shadow-elevation-medium);
+ }
+
+ .card-white:hover {
+ @apply -translate-y-2;
+ box-shadow: var(--shadow-elevation-high);
+ }
+
+ /* ============ 黑色按钮样式 ============ */
+ .btn-black {
+ @apply inline-flex items-center justify-center px-8 py-4 rounded-full bg-black text-white font-bold no-underline border-none cursor-pointer outline-none transition-all duration-300 ease-in-out relative z-10;
+ }
+
+ .btn-black:hover {
+ @apply -translate-y-1;
+ box-shadow: var(--shadow-elevation-high);
+ }
+
+ .btn-black:active {
+ @apply translate-y-0 scale-95;
+ }
+
+ /* ============ 3D效果相关 ============ */
+ .preserve-3d {
+ transform-style: preserve-3d;
+ }
+
+ /* 玻璃徽章 */
+ .glass-badge {
+ background: var(--glass-bg);
+ backdrop-filter: var(--glass-blur);
+ -webkit-backdrop-filter: var(--glass-blur);
+ border: 1px solid var(--glass-border);
+ box-shadow: var(--shadow-elevation-medium);
+ }
+
+ /* Safari fallback */
+ @supports not (backdrop-filter: blur(20px)) {
+ .glass-badge {
+ background: rgba(255, 255, 255, 0.95);
+ }
}
- .card-hover {
- @apply transition-all duration-300 ease-in-out hover:-translate-y-1;
+ /* ============ 动画 ============ */
+
+ /* 克制的浮动动画 */
+ @keyframes float {
+ 0%, 100% {
+ transform: translateY(0) rotateY(0deg);
+ }
+ 50% {
+ transform: translateY(-8px) rotateY(3deg);
+ }
+ }
+
+ .animate-float {
+ animation: float 8s ease-in-out infinite;
+ }
+
+ /* 星光闪烁动画 */
+ @keyframes twinkle {
+ 0%, 100% {
+ opacity: 0.1;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.3;
+ transform: scale(1.2);
+ }
+ }
+
+ .animate-twinkle {
+ animation: twinkle 3s ease-in-out infinite;
+ }
+
+ /* ============ 纹理和背景图案 ============ */
+
+ /* 微妙的网格纹理 */
+ .bg-grid-pattern {
+ background-image:
+ linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
+ background-size: 24px 24px;
+ }
+
+ /* ============ 高级光照效果 ============ */
+
+ /* 主背景渐变 - 模拟多光源环境光照 - 增强版 */
+ .light-gradient-bg {
+ background:
+ radial-gradient(ellipse 100% 60% at 50% -30%, rgba(255, 255, 255, 1) 0%, rgba(250, 250, 252, 0.8) 30%, transparent 60%),
+ radial-gradient(ellipse 80% 50% at 85% 40%, rgba(245, 245, 250, 0.6) 0%, transparent 60%),
+ radial-gradient(ellipse 70% 50% at 15% 70%, rgba(240, 242, 245, 0.5) 0%, transparent 60%),
+ linear-gradient(135deg, #f8f8fb 0%, #f2f4f8 50%, #eef1f6 100%);
+ }
+
+ /* 光斑效果 - 增强 */
+ .light-spot {
+ position: absolute;
+ pointer-events: none;
+ border-radius: 50%;
+ filter: blur(100px);
+ opacity: 0.5;
+ animation: pulse-light 8s ease-in-out infinite;
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 255, 0.4) 50%, transparent 100%);
+ }
+
+ @keyframes pulse-light {
+ 0%, 100% {
+ opacity: 0.4;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.65;
+ transform: scale(1.2);
+ }
+ }
+
+ /* ============ 响应式和可访问性 ============ */
+
+ /* 减少动画效果 (用户偏好设置) */
+ @media (prefers-reduced-motion: reduce) {
+ .preserve-3d {
+ transform-style: flat;
+ }
+
+ .animate-float {
+ animation: none;
+ }
+
+ .animate-twinkle {
+ animation: none;
+ }
+
+ .star-field {
+ display: none;
+ }
+
+ .light-spot {
+ animation: none;
+ display: none;
+ }
}
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 3a3cb3c..0369bc2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,12 +7,37 @@ export default {
theme: {
extend: {
colors: {
- 'dark-bg': '#0a0a0a',
- 'dark-card': '#1a1a1a',
- 'dark-border': '#2a2a2a',
+ // 背景色系统 (浅色)
+ 'bg-base': '#f5f5f7',
+ 'bg-surface': '#eff2f6',
+ 'bg-elevated': '#ffffff',
+ 'bg-element': '#fafafa',
+
+ // 文本色系统 (深黑)
+ 'text-primary': '#1a1a1a',
+ 'text-secondary': '#4a4a4a',
+ 'text-tertiary': '#8a8a8a',
+
+ // Accent色彩系统
+ 'accent-primary': '#2a2a2a',
+ 'accent-secondary': '#6a6a6a',
+ 'accent-blue': '#1e40af', // 深蓝点缀色
+ 'accent-blue-light': '#3b82f6', // 浅蓝hover
+ 'accent-border': '#e0e0e0',
+ },
+ boxShadow: {
+ // 浅色背景上的柔和阴影
+ 'elevation-low': '0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06)',
+ 'elevation-medium': '0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
+ 'elevation-high': '0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08)',
+ 'inset': 'inset 0 2px 4px rgba(0, 0, 0, 0.06)',
+ },
+ borderRadius: {
+ '4xl': '2rem', // 32px
+ '5xl': '2.5rem', // 40px
},
fontFamily: {
- sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'sans-serif'],
+ sans: ['-apple-system', 'BlinkMacSystemFont', '"SF Pro Display"', '"Inter"', 'sans-serif'],
},
},
},
From 42d83dc4a2a4bf8f791eecdffbe2351d261a0038 Mon Sep 17 00:00:00 2001
From: pan <1126525692@qq.com>
Date: Mon, 1 Dec 2025 23:11:04 +0800
Subject: [PATCH 04/15] =?UTF-8?q?feat:=20uv=20pv=20=E6=94=B6=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 21 +++++++++++++++-
src/App.tsx | 3 +++
src/hooks/useAnalytics.ts | 50 +++++++++++++++++++++++++++++++++++++++
3 files changed, 73 insertions(+), 1 deletion(-)
create mode 100644 src/hooks/useAnalytics.ts
diff --git a/package-lock.json b/package-lock.json
index 6f029f5..9da1b3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,10 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
+ "lucide-react": "^0.555.0",
"react": "^19.2.0",
- "react-dom": "^19.2.0"
+ "react-dom": "^19.2.0",
+ "react-parallax-tilt": "^1.7.314"
},
"devDependencies": {
"@types/react": "^19.2.2",
@@ -1899,6 +1901,14 @@
"yallist": "^3.0.2"
}
},
+ "node_modules/lucide-react": {
+ "version": "0.555.0",
+ "resolved": "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.555.0.tgz",
+ "integrity": "sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA==",
+ "peerDependencies": {
+ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
@@ -2296,6 +2306,15 @@
"react": "^19.2.0"
}
},
+ "node_modules/react-parallax-tilt": {
+ "version": "1.7.314",
+ "resolved": "https://registry.npmmirror.com/react-parallax-tilt/-/react-parallax-tilt-1.7.314.tgz",
+ "integrity": "sha512-RTk6bcF2Pv7WlWHdGADjT7Aba+5AtMEGk38wCVZyPbxI2mG8O/uTZqI12KXtEyUNtcupNSl74yJdBFPDsOnOEQ==",
+ "peerDependencies": {
+ "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/react-refresh": {
"version": "0.18.0",
"resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.18.0.tgz",
diff --git a/src/App.tsx b/src/App.tsx
index 367f715..c4d7232 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,8 +6,11 @@ import Technology from './components/Technology';
import FAQ from './components/FAQ';
import Apply from './components/Apply';
import Footer from './components/Footer';
+import { useAnalytics } from './hooks/useAnalytics';
function App() {
+ useAnalytics();
+
return (
{/* Ambient light spots - 增强光照 */}
diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts
new file mode 100644
index 0000000..b60a419
--- /dev/null
+++ b/src/hooks/useAnalytics.ts
@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+
+const STORAGE_KEY = 'visitor_id';
+
+const generateVisitorId = (): string => {
+ if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+ return crypto.randomUUID();
+ }
+ // Fallback for older environments
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+ const r = (Math.random() * 16) | 0;
+ const v = c === 'x' ? r : (r & 0x3) | 0x8;
+ return v.toString(16);
+ });
+};
+
+const getOrInitVisitorId = (): string => {
+ let visitorId = localStorage.getItem(STORAGE_KEY);
+ if (!visitorId) {
+ visitorId = generateVisitorId();
+ localStorage.setItem(STORAGE_KEY, visitorId);
+ }
+ return visitorId;
+};
+
+export const useAnalytics = () => {
+ useEffect(() => {
+ const trackVisit = async () => {
+ try {
+ const visitorId = getOrInitVisitorId();
+ const path = window.location.pathname + window.location.search;
+
+ await fetch('/api/v1/analytics/track', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ visitorId,
+ path,
+ }),
+ });
+ } catch (error) {
+ console.error('Failed to track analytics:', error);
+ }
+ };
+
+ trackVisit();
+ }, []); // Runs once on mount
+};
From b525ded59277d8a8bb570f253335009bbe402671 Mon Sep 17 00:00:00 2001
From: CarOL
Date: Sun, 21 Dec 2025 17:06:32 +0800
Subject: [PATCH 05/15] feat: ui improve
---
src/App.tsx | 9 +-
src/components/Apply.tsx | 127 ++++++++---------
src/components/FAQ.tsx | 90 +++++++------
src/components/Features.tsx | 159 +++++++---------------
src/components/Footer.tsx | 115 +++++++---------
src/components/Hero.tsx | 247 +++++++++++++---------------------
src/components/Logo.tsx | 8 +-
src/components/Navbar.tsx | 65 ++++-----
src/components/Products.tsx | 86 ++++++++++++
src/components/Solutions.tsx | 143 ++++++++++----------
src/components/Technology.tsx | 144 +++++++++-----------
src/index.css | 233 ++++----------------------------
tailwind.config.js | 44 +++---
13 files changed, 593 insertions(+), 877 deletions(-)
create mode 100644 src/components/Products.tsx
diff --git a/src/App.tsx b/src/App.tsx
index c4d7232..ce57162 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
import Navbar from './components/Navbar';
import Hero from './components/Hero';
+import Products from './components/Products';
import Solutions from './components/Solutions';
import Features from './components/Features';
import Technology from './components/Technology';
@@ -12,15 +13,11 @@ function App() {
useAnalytics();
return (
-
- {/* Ambient light spots - 增强光照 */}
-
-
-
-
+
+
diff --git a/src/components/Apply.tsx b/src/components/Apply.tsx
index 0d9d3fa..2507d2e 100644
--- a/src/components/Apply.tsx
+++ b/src/components/Apply.tsx
@@ -1,5 +1,5 @@
import { useState } from 'react';
-import { Clock, Zap, Gift } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
const Apply = () => {
const [formData, setFormData] = useState({
@@ -17,119 +17,120 @@ const Apply = () => {
};
return (
-
-
-
-
-
申请加入内测
-
- 开启智能口腔修复新时代，享受免费试用和专属技术支持
-
+
+
+
+
+
+
加入内测计划
+
申请加入内测，体验智能修复。
-