构建首页 Hero 区域

Hero 区域是网站首页最重要的部分，它是用户访问网站时首先看到的内容。一个优秀的 Hero 区域应该能够立即传达网站的核心价值，吸引用户的注意力，并引导用户采取行动。所以这一节，我们将尝试去构建一个专业的 Hero 区域。

构建首页 Hero 区域

理解 Hero 区域的设计原则

在设计 Hero 区域时，我们需要考虑几个关键要素。首先是视觉层次，最重要的信息应该最突出。其次是行动号召（CTA），应该清晰明确地告诉用户下一步该做什么。最后是视觉吸引力，使用合适的颜色、图片和动画来吸引用户。

让我们一步步来构建这个 Hero 区域。

步骤 1：创建基础结构

首先，我们需要创建一个基本的容器结构。将你的首页文件app/page.tsx更新为以下代码：

|
export default function Home() {
  return (
    <section className="relative min-h-screen flex items-center bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
      <div className="container mx-auto px-4 py-12 md:py-20 relative z-10">
        {/* 内容将在这里添加 */}
      </div>
    </section>
  )
}

这里我们创建了一个全屏的 section，使用了渐变背景色，并设置了基本的容器布局。

步骤 2：添加标题和描述

现在让我们添加主要内容区域，包括标题和描述文字：

|
export default function Home() {
  return (
    <section className="relative min-h-screen flex items-center bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
      <div className="container mx-auto px-4 py-12 md:py-20 relative z-10">
        <div className="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
          <div className="text-center md:text-left">
            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-4 md:mb-6 leading-tight">

注意我们使用了响应式文字大小（text-4xl sm:text-5xl md:text-6xl），并且标题中的"学习之旅"使用了渐变色效果。

步骤 3：添加行动按钮（CTA）

接下来，我们添加两个行动按钮，引导用户采取行动：

|
import Link from 'next/link'
 
export default function Home() {
  return (
    <section className="relative min-h-screen flex items-center bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
      <div className="container mx-auto px-4 py-12 md:py-20 relative z-10">
        <div className="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
          <div className="text-center md:text-left">
            <h1

我们创建了两个按钮：一个是主要按钮（实心蓝色），另一个是次要按钮（白色背景带边框）。按钮在移动端会垂直排列，在桌面端会水平排列。

步骤 4：添加背景装饰

为了让页面更有视觉吸引力，我们添加一些背景装饰元素：

|
import Link from 'next/link'
 
export default function Home() {
  return (
    <section className="relative min-h-screen flex items-center bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
      {/* 背景装饰 */}
      <div className="absolute inset-0">
        <div className="absolute top-0 left-0 w-96 h-96 bg-blue-200/30 rounded-full blur-3xl"></div>
        <div className=

这些模糊的圆形装饰元素为页面增加了深度和视觉层次感。

步骤 5：添加右侧视觉元素

现在让我们在右侧添加一个视觉元素，与左侧的文字内容形成平衡：

|
import Link from 'next/link'
 
export default function Home() {
  return (
    <section className="relative min-h-screen flex items-center bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
      {/* 背景装饰 */}
      <div className="absolute inset-0">
        <div className="absolute top-0 left-0 w-96 h-96 bg-blue-200/30 rounded-full blur-3xl"></div>
        <div className=

这个视觉元素使用了层叠的卡片效果，增加了页面的动态感。

步骤 6：添加统计信息部分

最后，让我们在 Hero 区域下方添加一个统计信息展示区域：

|
import Link from 'next/link'
 
export default function Home() {
  return (
    <>
      <section className="relative min-h-screen flex items-center bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
        {/* ... 之前的 Hero 区域内容 ... */}
      </section>
      
      {/* 统计信息 */}
      <section className="bg-white py-12 border-t">
        <div className

这个统计信息区域展示了平台的关键数据，增强了用户对平台的信任感。

完整代码汇总

现在，让我们看看完整的代码，我们的app/page.tsx文件应该是这样的，你可以直接复制粘贴这段代码到你的文件中：

|
import Link from 'next/link'
 
export default function Home() {
  return (
    <>
      <section className="relative min-h-screen flex items-center bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
        {/* 背景装饰 */}
        <div className="absolute inset-0">
          <div className="absolute top-0 left-0 w-96 h-96 bg-blue-200/30 rounded-full blur-3xl"></div>
          <div

这个 Hero 区域的设计充分贯彻了现代 Web 设计的核心原则，集成了五大关键要素：

吸引人的标题：通过大号字体和视觉重心，将网站的核心价值主张第一时间传递给用户，提升首屏转化率。
清晰的描述：用简明有力的副标题，补充说明平台所提供的优势和目标用户，帮助访客迅速建立认知。
行动按钮（CTA）：配备主次分明的行动按钮，分别引导用户开始学习和深入了解，采用对比鲜明的颜色和合理的间距，提升点击率。
视觉装饰元素：利用渐变色块、旋转特效和富有亲和力的图标（如📚）增强视觉吸引力，使页面更加现代且易于辨识，观感突出。
统计信息区块：通过真实、具体的数据（如课程数、注册学员数、讲师数）佐证平台实力，提升可信度并激发用户兴趣。

下一步

在这一部分，我们学习了如何构建一个专业的 Hero 区域，包括布局、视觉元素、动画和响应式设计。在下一部分的学习，我们将学习如何创建功能展示区域，向用户展示网站的核心功能。

你已经掌握了 Hero 区域的构建方法！现在你可以创建吸引人的首屏体验，有效传达网站价值并引导用户行动。这些技能未来将帮助你提升网站的转化率。