From 69953c43cf563c9e01fba4e6828ca55c11dbf581 Mon Sep 17 00:00:00 2001 From: ddshi <8811906+ddshi@user.noreply.gitee.com> Date: Tue, 10 Feb 2026 17:22:27 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=AE=80=E5=8C=96=20landing=20page?= =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E5=AD=97=E4=BD=93=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 回退复杂的功能介绍区域，保留简洁设计 - 优化副标题可读性：添加柔和背景 + serif 字体 - 保持整体禅意风格不变 Co-Authored-By: Claude Opus 4.5 --- src/pages/LandingPage.tsx | 176 ++++++++++++-------------------------- 1 file changed, 55 insertions(+), 121 deletions(-) diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index a6a1101..952c39c 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef } from 'react'; -import { Button, Container, Title, Text, Group, Stack, Paper, ThemeIcon, SimpleGrid, Box } from '@mantine/core'; +import { Button, Container, Title, Text, Group, Stack } from '@mantine/core'; import { useNavigate } from 'react-router-dom'; import iconUrl from '../assets/icon.png'; @@ -22,12 +22,10 @@ function ZenBackground() { resize(); window.addEventListener('resize', resize); - // 简化的伪随机 const random = (min = 0, max = 1) => { return min + Math.random() * (max - min); }; - // 简化的噪声函数 const noise = (x: number, y: number, t: number) => { return (Math.sin(x * 0.01 + t) * Math.cos(y * 0.01 + t * 0.7) + 1) * 0.5; }; @@ -50,7 +48,6 @@ function ZenBackground() { let lastStrokeTime = 0; const strokeInterval = 30; - // 生成随机笔触 const createStroke = (): InkStroke | null => { const angle = random(0, Math.PI * 2); const radius = random(canvas.width * 0.1, canvas.width * 0.4); @@ -71,7 +68,6 @@ function ZenBackground() { }; }; - // 初始化一些笔触 const initStrokes = () => { strokes = []; for (let i = 0; i < 8; i++) { @@ -85,20 +81,17 @@ function ZenBackground() { initStrokes(); - // 清空画布 ctx.fillStyle = '#faf9f7'; ctx.fillRect(0, 0, canvas.width, canvas.height); const animate = () => { time += 0.008; - // 快速淡出背景 if (Math.floor(time * 125) % 3 === 0) { ctx.fillStyle = 'rgba(250, 249, 247, 0.12)'; ctx.fillRect(0, 0, canvas.width, canvas.height); } - // 定期生成新笔触 if (time - lastStrokeTime > strokeInterval * 0.01) { lastStrokeTime = time; strokes = strokes.filter(s => !s.complete || s.currentLength < s.maxLength); @@ -109,7 +102,6 @@ function ZenBackground() { } } - // 更新和绘制笔触 for (const stroke of strokes) { if (stroke.complete) continue; @@ -162,7 +154,6 @@ function ZenBackground() { } } - // 绘制圆相（Ensō） const centerX = canvas.width / 2; const centerY = canvas.height / 2; const breathScale = 1 + Math.sin(time * 0.3) * 0.015; @@ -214,40 +205,6 @@ function ZenBackground() { ); } -// 功能特性卡片 -function FeatureCard({ - icon, - title, - description, -}: { - icon: string; - title: string; - description: string; -}) { - return ( - - - {icon} - - {title} - - - {description} - - - - ); -} - export function LandingPage() { const navigate = useNavigate(); @@ -309,62 +266,54 @@ export function LandingPage() { - {/* Hero 区域 */} - + {/* 产品图标 */}
掐日子
- {/* 主标题 */} + {/* 主标题 - 优化字体 */} 掐日子 @@ -374,16 +323,14 @@ export function LandingPage() { <Text size="lg" style={{ + letterSpacing: '0.35em', + color: '#444', fontWeight: 400, - fontSize: 'clamp(1rem, 2.5vw, 1.25rem)', - letterSpacing: '0.3em', - color: '#333', + fontSize: '1rem', fontFamily: 'Noto Serif SC, serif', - marginBottom: '1rem', - padding: '0.5rem 1.5rem', - background: 'rgba(255, 255, 255, 0.7)', - backdropFilter: 'blur(4px)', - borderRadius: '2px', + padding: '0.4rem 1rem', + background: 'rgba(250, 250, 250, 0.8)', + borderRadius: 2, }} > AI 纪念日 · 提醒 @@ -391,13 +338,13 @@ export function LandingPage() { {/* 描述文案 */} <Text - size="sm" + size="xs" style={{ - color: '#666', - maxWidth: 360, + color: '#777', + maxWidth: 320, lineHeight: 2, fontWeight: 300, - fontSize: '0.9rem', + fontSize: '0.85rem', }} > 轻便、灵活的倒数日和提醒应用 @@ -405,70 +352,57 @@ export function LandingPage() { 让每一个重要的日子都被铭记 </Text> - <Group gap="md" mt="xl"> + <Group gap="md" mt="md"> <Button - size="md" + size="sm" onClick={() => navigate('/login')} style={{ background: '#1a1a1a', border: '1px solid #1a1a1a', - padding: '0.75rem 2.5rem', + padding: '0 2rem', fontWeight: 400, - letterSpacing: '0.2em', + letterSpacing: '0.15em', borderRadius: 2, - fontSize: '0.85rem', }} > 登录 </Button> <Button - size="md" + size="sm" variant="outline" onClick={() => navigate('/register')} style={{ - borderColor: '#999', + borderColor: '#ccc', color: '#1a1a1a', - padding: '0.75rem 2.5rem', + padding: '0 2rem', fontWeight: 400, - letterSpacing: '0.2em', + letterSpacing: '0.15em', borderRadius: 2, - fontSize: '0.85rem', }} > 注册 </Button> </Group> - </Box> - {/* 功能介绍区域 */} - <Box - style={{ - paddingBottom: 'min(15vh, 120px)', - }} - > - <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="lg"> - <FeatureCard - icon="◯" - title="纪念日" - description="记录生日、结婚纪念日等重要日子。支持农历日期，自动计算倒数日。轻松掌握还有多少天到来，让每个值得纪念的日子都不被遗忘。" - /> - <FeatureCard - icon="◎" - title="提醒" - description="设置一次性或重复提醒事项。支持多种提前提醒时间：准时、提前5/15分钟、1小时、1天。重要事项准时送达，不错过任何关键节点。" - /> - <FeatureCard - icon="◇" - title="AI 智能" - description="AI 智能解析自然语言，快速创建事件。只需输入「生日是3月15日」，AI 自动识别日期、类型和重复规则。创建提醒从未如此简单。" - /> - <FeatureCard - icon="▫" - title="便签" - description="支持 Markdown 的个人笔记空间。随时记录想法、灵感或待办事项。与纪念日和提醒功能无缝配合，打造完整的个人时间管理工具。" - /> - </SimpleGrid> - </Box> + <Group gap={40} mt={40} style={{ opacity: 0.6 }}> + <Stack gap={3} align="center"> + <Text size="xs" fw={300} c="#444">◯</Text> + <Text size="xs" c="#666" style={{ letterSpacing: '0.1em' }}>纪念日</Text> + </Stack> + <Stack gap={3} align="center"> + <Text size="xs" fw={300} c="#444">◎</Text> + <Text size="xs" c="#666" style={{ letterSpacing: '0.1em' }}>提醒</Text> + </Stack> + <Stack gap={3} align="center"> + <Text size="xs" fw={300} c="#444">◇</Text> + <Text size="xs" c="#666" style={{ letterSpacing: '0.1em' }}>AI</Text> + </Stack> + <Stack gap={3} align="center"> + <Text size="xs" fw={300} c="#444">▫</Text> + <Text size="xs" c="#666" style={{ letterSpacing: '0.1em' }}>便签</Text> + </Stack> + </Group> + </Stack> </Container> </div> );