101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import Link from '@docusaurus/Link';
|
|
import styles from './HomepageFeatures.module.css';
|
|
|
|
interface FeatureItem {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
icon: React.ReactNode;
|
|
link: string;
|
|
color: string;
|
|
gradient: string;
|
|
}
|
|
|
|
const FeatureList: FeatureItem[] = [
|
|
{
|
|
id: 'backend',
|
|
title: '后端技术',
|
|
description:
|
|
'深度讲解 Spring Boot / Spring Cloud 核心概念、最佳实践与微服务架构，含真实项目案例。',
|
|
icon: '⚙️',
|
|
link: '/docs/backend-doc/intro-docs',
|
|
color: '#2160fd',
|
|
gradient: 'from-blue-500/20 to-transparent',
|
|
},
|
|
{
|
|
id: 'frontend',
|
|
title: '前端开发',
|
|
description:
|
|
'系统化学习 React / Vue 现代框架、状态管理、组件设计与性能优化，打造高质量前端应用。',
|
|
icon: '⚛️',
|
|
link: '/docs/frontend-doc/intro-docs',
|
|
color: '#06b6d4',
|
|
gradient: 'from-cyan-500/20 to-transparent',
|
|
},
|
|
{
|
|
id: 'algorithms',
|
|
title: '算法与面试',
|
|
description:
|
|
'精选 LeetCode 题目分类讲解、编程面试题库与数据结构深度分析，快速突破算法关卡。',
|
|
icon: '🧠',
|
|
link: '/docs/LeetCode/intro-docs',
|
|
color: '#ec4899',
|
|
gradient: 'from-pink-500/20 to-transparent',
|
|
},
|
|
];
|
|
|
|
interface FeatureCardProps extends FeatureItem {}
|
|
|
|
function FeatureCard({
|
|
title,
|
|
description,
|
|
icon,
|
|
link,
|
|
color,
|
|
gradient,
|
|
}: FeatureCardProps): JSX.Element {
|
|
return (
|
|
<Link
|
|
to={link}
|
|
className={`${styles.featureCard} group`}
|
|
style={
|
|
{
|
|
'--card-color': color,
|
|
} as React.CSSProperties & { '--card-color': string }
|
|
}
|
|
>
|
|
<div className={styles.cardInner}>
|
|
{/* Icon */}
|
|
<div className={styles.cardIcon}>{icon}</div>
|
|
|
|
{/* Content */}
|
|
<div className={styles.cardContent}>
|
|
<h3 className={styles.cardTitle}>{title}</h3>
|
|
<p className={styles.cardDescription}>{description}</p>
|
|
</div>
|
|
|
|
{/* Gradient Background */}
|
|
<div className={`${styles.cardGradient} ${gradient}`}></div>
|
|
|
|
{/* Arrow Icon */}
|
|
<div className={styles.cardArrow}>→</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default function HomepageFeatures(): JSX.Element {
|
|
return (
|
|
<section className={styles.features}>
|
|
<div className="container">
|
|
<div className={styles.featureGrid}>
|
|
{FeatureList.map((props) => (
|
|
<FeatureCard key={props.id} {...props} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|