Shadcn/UI 着陆页模板技术文档

安装指南

1. 克隆项目

首先，您需要将项目克隆到本地。使用以下命令：

git clone https://github.com/leoMirandaa/shadcn-landing-page.git

2. 进入项目目录

克隆完成后，进入项目目录：

cd shadcn-landing-page

3. 安装依赖

使用 npm 安装项目所需的依赖：

npm install

4. 运行项目

安装完成后，您可以使用以下命令启动项目：

npm run dev

项目使用说明

项目结构

Shadcn/UI 着陆页模板是一个基于 React、TypeScript 和 Tailwind CSS 构建的着陆页模板。项目包含以下主要部分：

• Navbar: 导航栏
• Sidebar(mobile): 移动端侧边栏
• Hero: 英雄区
• Sponsors: 赞助商区
• About: 关于区
• Stats: 统计区
• How It Works: 工作原理区
• Features: 功能区
• Services: 服务区
• Call-to-Action (CTA): 行动号召区
• Testimonials: 客户评价区
• Team: 团队区
• Pricing: 定价区
• Newsletter: 新闻订阅区
• Frequently Asked Questions(FAQ): 常见问题区
• Footer: 页脚区

功能特性

• 完全响应式设计: 确保在不同设备上都能良好显示。
• 用户友好的导航: 提供直观的导航体验。
• 暗模式: 支持暗模式，提升用户体验。
• 元标签: 包含 SEO 友好的元标签。

项目API使用文档

组件API

项目中的每个组件都可以通过 props 进行自定义。以下是一些常用组件的 API 说明：

Navbar

• logo: 导航栏的 logo 图片路径。
• links: 导航栏的链接数组，包含 text 和 href 属性。

Hero

• title: 英雄区的标题。
• description: 英雄区的描述。
• ctaButtonText: 行动号召按钮的文本。
• ctaButtonLink: 行动号召按钮的链接。

Features

• features: 功能列表，包含 title 和 description 属性。

示例

<Navbar
  logo="/path/to/logo.png"
  links={[
    { text: "Home", href: "/" },
    { text: "About", href: "/about" },
  ]}
/>

<Hero
  title="Welcome to Shadcn/UI"
  description="A modern landing page template."
  ctaButtonText="Get Started"
  ctaButtonLink="/get-started"
/>

<Features
  features={[
    { title: "Feature 1", description: "Description of feature 1." },
    { title: "Feature 2", description: "Description of feature 2." },
  ]}
/>

项目安装方式

使用 npm

您可以使用 npm 来安装和管理项目的依赖：

npm install

使用 yarn

如果您更喜欢使用 yarn，也可以使用以下命令：

yarn install

运行项目

安装完成后，使用以下命令启动项目：

npm run dev

或

yarn dev

通过以上步骤，您可以轻松地安装和运行 Shadcn/UI 着陆页模板，并根据需要进行自定义和扩展。