16f946ae9b
- useHomeResponsive: 标题尺寸 4xl→2xl，正文 xl→md - HomePage: VStack/SimpleGrid 间距缩小 - HeroHeader: spacing/padding 缩小，maxW 调整 - FeaturedFeatureCard: 图标、标题、按钮尺寸缩小 - FeatureCard: 卡片高度 180→120px，整体元素尺寸缩小 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
// src/views/Home/components/HeroHeader.tsx
|
|
// 首页主标题区域组件
|
|
|
|
import React from 'react';
|
|
import { Heading, Text, VStack } from '@chakra-ui/react';
|
|
|
|
interface HeroHeaderProps {
|
|
headingSize: string | undefined;
|
|
headingLetterSpacing: string | undefined;
|
|
heroTextSize: string | undefined;
|
|
}
|
|
|
|
/**
|
|
* 首页主标题区域组件
|
|
* 包含主标题和副标题
|
|
*/
|
|
export const HeroHeader: React.FC<HeroHeaderProps> = ({
|
|
headingSize,
|
|
headingLetterSpacing,
|
|
heroTextSize
|
|
}) => {
|
|
return (
|
|
<VStack
|
|
spacing={{ base: 2, md: 3, lg: 4 }}
|
|
textAlign="center"
|
|
pt={{ base: 2, md: 4, lg: 5 }}
|
|
>
|
|
<Heading
|
|
size={headingSize}
|
|
color="white"
|
|
fontWeight="900"
|
|
letterSpacing={headingLetterSpacing}
|
|
lineHeight="shorter"
|
|
>
|
|
智能投资分析平台
|
|
</Heading>
|
|
<Text
|
|
fontSize={heroTextSize}
|
|
color="whiteAlpha.800"
|
|
maxW={{ base: '100%', md: 'xl', lg: '2xl' }}
|
|
lineHeight="tall"
|
|
px={{ base: 2, md: 0 }}
|
|
>
|
|
专业投资研究工具,助您把握市场机遇
|
|
</Text>
|
|
</VStack>
|
|
);
|
|
};
|