refactor: 简化 landing page 优化字体样式
- 回退复杂的功能介绍区域，保留简洁设计 - 优化副标题可读性：添加柔和背景 + serif 字体 - 保持整体禅意风格不变 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
ddshi
parent
25f999cb1f
commit
69953c43cf
@ -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 (
|
||||
<Paper
|
||||
p="lg"
|
||||
radius="sm"
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0.6)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(0, 0, 0, 0.05)',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Text size="xl" fw={300} style={{ letterSpacing: '0.1em' }}>{icon}</Text>
|
||||
<Text size="md" fw={500} style={{ letterSpacing: '0.08em', color: '#1a1a1a' }}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text size="sm" c="#666" style={{ lineHeight: 1.8, fontWeight: 300 }}>
|
||||
{description}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
export function LandingPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
@ -309,62 +266,54 @@ export function LandingPage() {
|
||||
</svg>
|
||||
|
||||
<Container
|
||||
size="lg"
|
||||
size="sm"
|
||||
style={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: '3rem 1rem',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
padding: '2rem',
|
||||
}}
|
||||
>
|
||||
{/* Hero 区域 */}
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
paddingTop: 'min(15vh, 120px)',
|
||||
paddingBottom: 'min(10vh, 80px)',
|
||||
}}
|
||||
>
|
||||
<Stack align="center" gap="lg">
|
||||
{/* 产品图标 */}
|
||||
<div
|
||||
style={{
|
||||
width: 100,
|
||||
height: 100,
|
||||
width: 90,
|
||||
height: 90,
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(26, 26, 26, 0.04)',
|
||||
background: 'rgba(26, 26, 26, 0.03)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '2rem',
|
||||
marginBottom: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt="掐日子"
|
||||
style={{
|
||||
width: 65,
|
||||
height: 65,
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 主标题 */}
|
||||
{/* 主标题 - 优化字体 */}
|
||||
<Title
|
||||
order={1}
|
||||
style={{
|
||||
fontWeight: 200,
|
||||
fontSize: 'clamp(2.5rem, 8vw, 4rem)',
|
||||
letterSpacing: '0.2em',
|
||||
fontWeight: 300,
|
||||
fontSize: 'clamp(2.2rem, 7vw, 3.2rem)',
|
||||
letterSpacing: '0.25em',
|
||||
color: '#1a1a1a',
|
||||
fontFamily: 'Noto Serif SC, Georgia, serif',
|
||||
marginBottom: '0.5rem',
|
||||
textShadow: '0 2px 10px rgba(0,0,0,0.03)',
|
||||
lineHeight: 1.3,
|
||||
}}
|
||||
>
|
||||
掐日子
|
||||
@ -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>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user