6 / 10

创建功能展示区域

在构建网站时，向用户清晰地展示核心功能是非常重要的。功能展示区域通常位于 Hero 区域之后，通过卡片、图标和描述来介绍网站的主要特性。首页仅有一个Hero部分时远远不够的，所以这一部分我们将尝试完善我们的首页部分。

这一节我们将尝试实现一些不同的功能卡片，并尝试为其添加不同的效果。

创建功能展示区域

添加功能展示区域

为了添加功能展示区域，我们需要在app/文件夹底下添加一个叫features.tsx的文件，并添加一些基础的内容：

|
export default function Features() {
  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            核心功能
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            探索 Free Education 提供的强大功能
          </p>
        </div>
      </div>
    </section>
  )
}

随后我们便可以在app/page.tsx文件中引入这个组件：

|
import Features from './features'
 
export default function Home() {
  return (
    <>
      {/* Hero 区域, 之前的代码不变*/}
      {/* 功能展示区域 */}
      <Features />
    </>
  )
}

设计功能卡片

功能卡片是展示和突出网站核心功能的主要方式。一个优秀的功能卡片通常包含以下几个要素：

图标：用于直观表达功能主题，提升视觉吸引力。
标题：简洁明了地说明功能核心。
描述：用简短的话语进一步阐述该功能的优势、用途或细节。
视觉层次：通过间距、色彩、阴影等方式区分信息结构，引导用户注意力，保证内容清晰易读。

下面我们将从最基础的功能卡片样式开始实现，并逐步优化其设计，使其既美观又实用。

|
export default function Features() {
  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            核心功能
          </h2>
          <p className=

这个基础的卡片布局使用了网格系统，在中等及以上屏幕上显示三列。每个卡片都有图标、标题和描述。

添加悬停效果

为了提升用户体验和界面活力，我们可以为功能卡片引入悬停（hover）交互效果。当用户将鼠标悬停在卡片上时，卡片的背景色会由浅灰变为白色，同时出现阴影效果，突出当前卡片。此外，图标容器将轻微放大，标题颜色也会发生变化。这些过渡采用平滑的动画效果，使交互更加自然、专业。具体实现可以结合 Tailwind CSS 的 hover 与 transition 类，增强视觉响应性，提升整体设计感。

|
export default function Features() {
  const features = [
    {
      icon: '📚',
      title: '丰富课程',
      description: '涵盖多个学科领域的免费课程资源',
      color: 'blue',
    },
    {
      icon: '👨‍🏫',
      title: '专业讲师',
      description: '经验丰富的专业讲师团队',
      color: 'purple',
    },

这里我们使用了 hover: 前缀来添加悬停效果，group 和 group-hover: 来在悬停时改变子元素样式，transition-all 来创建平滑的过渡效果。

使用图标库

虽然直接使用 emoji 图标也能表达功能，但为了让界面更具专业感和一致性，推荐采用专门的图标库实现。在这里，我们将集成 Lucide React 图标库。Lucide 是一个流行且开源的 React 图标集合，拥有设计精美、可扩展性强等优点，适合现代 Web 项目使用。

首先，需要安装 Lucide React 图标库，可以在终端运行以下命令：

|
npm install lucide-react

然后更新组件：

|
import { BookOpen, Users, Clock } from 'lucide-react'
 
export default function Features() {
  const features = [
    {
      icon: BookOpen,
      title: '丰富课程',
      description: '涵盖多个学科领域的免费课程资源',
      color: 'blue',
    },
    {
      icon: Users,
      title: '专业讲师',
      description: '经验丰富的专业讲师团队',
      color: 'purple',

Lucide React 是一个优秀的图标库，提供了大量高质量的图标。它支持树摇（tree-shaking），这意味着只有你使用的图标会被打包，保持文件大小最小。

创建渐变卡片

接下来，我们将实现一组具有现代感的渐变风格卡片，用于展示平台的六大核心功能。这些卡片不仅在视觉上更加吸引用户，还能有效提升内容的专业性和易读性。我们将通过合理的配色渐变、图标与文字的有机结合，让功能介绍模块更加美观且富有科技感。

|
import { BookOpen, Users, Clock, Award, Globe, Heart } from 'lucide-react'
 
export default function Features() {
  const features = [
    {
      icon: BookOpen,
      title: '丰富课程',
      description: '涵盖多个学科领域的免费课程资源',
      gradient: 'from-blue-500 to-cyan-500',
    },
    {
      icon: Users,
      title: '专业讲师',
      description: '经验丰富的专业讲师团队',
      gradient: 'from-purple-500 to-pink-500'

在当前版本中，我们通过为卡片添加渐变色背景、柔和的阴影以及模糊的背景装饰元素，营造出层次感强、视觉表现更加丰富和现代的功能展示区域。整体设计既提升了界面美观性，也加强了信息的突出与分隔，使每个功能点都具有良好的识别度与吸引力。

增加出现动画

为了进一步提升用户体验和页面的专业感，我们可以为功能卡片集成动画效果。具体做法是使各个卡片在页面加载时依次以动画形式从下方渐变进入，产生一种流畅的动感过渡。这不仅能吸引用户注意力，还能增强界面的交互性与层次感。下面我们将演示如何使用 React 及 Tailwind CSS 的自定义动画，为功能区域的每一张卡片实现有节奏的入场动画：

|
'use client'
 
import { useEffect, useState } from 'react'
import { BookOpen, Users, Clock } from 'lucide-react'
 
export default function Features() {
  const [visible, setVisible] = useState(false)
  
  useEffect(() => {
    setVisible(true)
  }, [])
  
  const features

注意这里我们需要使用 'use client'，因为我们需要使用 React 的 useState 和 useEffect Hook。

完整的功能展示区域

接下来，我们将结合前面所涉及的设计要素与交互优化，搭建一个完善且专业的功能展示区域。该区域不仅结构清晰、视觉层次分明，还具备流畅的动效和响应式布局，能够系统化地呈现平台核心优势，让用户快速理解和认可 Free Education 的价值所在。

|
import { BookOpen, Users, Clock, Award, Globe, Heart } from 'lucide-react'
 
export default function Features() {
  const features = [
    {
      icon: BookOpen,
      title: '丰富课程',
      description: '涵盖编程、设计、商业等多个领域的 1000+ 免费课程',
      gradient: 'from-blue-500 to-cyan-500',
    },
    {
      icon: Users,
      title: '专业讲师',
      description: '来自知名企业和高校的 200+ 专业讲师',
      gradient: 'from-purple-500 to-pink-500'

下一步

在这一部分，我们学习了如何创建功能展示区域，包括卡片设计、图标使用、悬停效果和动画。接下来我们要实现课程展示页面了，这个页面会展示我们有的一些课程。

创建功能展示区域 | 自在学