gitadmin/turingflow-landing-003

Template

Fork 0

Go to file Use this template

“dongming” f6da666d7e first commit

2025-12-19 20:00:32 +08:00

.gitea/workflows

first commit

2025-12-19 20:00:32 +08:00

public

first commit

2025-12-19 20:00:32 +08:00

src

first commit

2025-12-19 20:00:32 +08:00

.gitignore

first commit

2025-12-19 20:00:32 +08:00

eslint.config.js

first commit

2025-12-19 20:00:32 +08:00

index.html

first commit

2025-12-19 20:00:32 +08:00

package.json

first commit

2025-12-19 20:00:32 +08:00

pnpm-lock.yaml

first commit

2025-12-19 20:00:32 +08:00

README.md

first commit

2025-12-19 20:00:32 +08:00

vite.config.js

first commit

2025-12-19 20:00:32 +08:00

README.md

turingflow-landing-003

圣诞节/节日主题单页落地页，适用于促销活动、节日营销、优惠券发放等场景。

技术栈

React 19.0.0 (已锁定版本)
Vite 7.2.4
Tailwind CSS 4.1.18
Font Awesome 4.7 (图标)
Google Fonts (Varela, Muli, Great Vibes, Marmelad)

快速开始

pnpm install
pnpm run dev

开发服务器运行在 http://localhost:3000

目录结构

turingflow-landing-003/
├── public/                     # 静态资源
│   ├── img/                    # 图片资源
│   │   ├── iconlogo.png        # 导航栏 Logo
│   │   ├── homeimg.png         # Header 区域主图 (手机展示图)
│   │   ├── pic1.jpg            # Header 背景图
│   │   ├── pic2.jpg            # Contact 区域背景图
│   │   ├── gift.png            # 优惠券礼物图标
│   │   ├── sep.png             # FAQ 分隔符图片
│   │   ├── button-available.png    # App Store 按钮
│   │   ├── button-googleplay.png   # Google Play 按钮
│   │   ├── particules_medium.png   # 雪花粒子 (中)
│   │   └── particules_small.png    # 雪花粒子 (小)
│   └── audio/
│       └── audio.mp3           # 背景音乐
├── src/
│   ├── App.jsx                 # 主应用 (包含所有页面组件)
│   ├── index.css               # 全局样式 + 响应式断点
│   └── main.jsx                # 入口文件
├── index.html                  # HTML 模板
├── vite.config.js              # Vite 配置
└── package.json                # 依赖配置

页面结构

单页应用，包含以下区域 (从上到下):

区域	组件名	Section ID	说明
雪花动画	`Illustration`	-	固定背景，雪花下落动画
导航栏	`Navbar`	-	固定顶部，滚动时变色
头部	`Header`	`#page-top`	Hero 区域，主标题 + 下载按钮 + 社交图标
优惠券	`CouponSection`	`#coupon`	促销优惠券展示
FAQ	`FAQSection`	`#faq`	常见问题，两列布局
联系	`ContactSection`	`#contact`	联系表单
页脚	`Footer`	-	版权信息 + 链接

组件说明

App.jsx 组件结构

// 主应用入口
function App() {
  return (
    <>
      <Illustration />      // 雪花粒子动画背景
      <Navbar />            // 固定导航栏
      <Header />            // Hero 区域
      <CouponSection />     // 优惠券区域
      <FAQSection />        // FAQ 区域
      <ContactSection />    // 联系表单
      <Footer />            // 页脚
    </>
  )
}

// 导航菜单项 (位于 Navbar 组件内)
const menuItems = [
  { text: "Special Offer", href: "#coupon" },
  { text: "F.A.Q.", href: "#faq" },
  { text: "Contact", href: "#contact" },
  { text: "Download", href: "#", highlight: true }
]

功能特性:

滚动超过 50px 时添加 affix 类，背景变白
平滑滚动到对应区域
移动端显示汉堡菜单

CouponSection 优惠券

// 优惠券数据 (位于 CouponSection 组件内)
const couponData = {
  title: "December Only",
  subtitle: "Get your discount, available in stores this month only",
  discount: "50% Off All Products!",
  code: "HOLIDAY50",
  description: "Use this coupon code at checkout...",
  buttonText: "Shop Now"
}

FAQSection 常见问题

// FAQ 数据 (位于 FAQSection 组件内)
const faqs = [
  { question: "How soon do I get my item?", answer: "..." },
  { question: "Is there a free shipping?", answer: "..." },
  { question: "Can I get several discounts?", answer: "..." },
  { question: "Do you deliver it as a gift?", answer: "..." },
  { question: "What payment methods?", answer: "..." },
  { question: "I have a different question?", answer: "..." }
]

ContactSection 联系表单

表单字段:

name - 姓名 (必填)
email - 邮箱 (必填，格式验证)
comment - 留言内容 (必填)

状态管理:

formData - 表单数据
errors - 验证错误
showSuccess - 提交成功提示

样式说明

CSS 类命名约定

类名	用途
`.navbar-default`	导航栏基础样式
`.navbar-default.affix`	导航栏滚动后样式 (白色背景)
`.nav-link`	导航链接
`.nav-link.active`	当前激活的导航链接
`.menuhighlight`	高亮按钮 (Download)
`.header-content-inner`	Header 内容容器
`.couponsection`	优惠券区域
`.coupon`	优惠券卡片 (虚线边框)
`.btn-buynow`	购买按钮
`.social a`	社交图标

响应式断点

断点	尺寸	说明
xs	< 480px	手机竖屏
sm	480-575px	手机横屏
md	576-767px	平板竖屏
lg	768-991px	平板横屏
xl	992-1199px	小桌面
xxl	>= 1200px	大桌面

主题色

/* 主要颜色 (在 index.css 中定义) */
--primary: #bb0000;        /* 品牌红色 */
--primary-hover: #aa0000;  /* 悬停红色 */
--accent: #fdcc52;         /* 强调黄色 */
--coupon-bg: #37488a;      /* 优惠券区域蓝色 */
--dark: #111;              /* 深色背景 */

常见修改任务

修改网站标题和 Logo

编辑 index.html 中的 <title> 标签
替换 public/img/iconlogo.png 图片
修改 src/App.jsx 中 Navbar 组件的品牌名称:

// src/App.jsx - Navbar 组件内
<a className="navbar-brand" ...>
  <img className="iconlogo" src="/img/iconlogo.png" width="50" alt="Logo" />
  ZU CHRISTMAS  {/* 修改这里 */}
</a>

修改导航菜单

编辑 src/App.jsx 中 Navbar 组件的菜单列表:

// src/App.jsx - Navbar 组件内
<ul className="nav-links">
  <li><a href="#coupon">Special Offer</a></li>  {/* 修改文字和链接 */}
  <li><a href="#faq">F.A.Q.</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#" className="menuhighlight">Download</a></li>
</ul>

修改 Header 主标题

编辑 src/App.jsx 中 Header 组件:

// src/App.jsx - Header 组件内
<h1>Merry Holidays</h1>           {/* 主标题 */}
<h4>Make your visitors smile...</h4>  {/* 副标题 */}

修改优惠券信息

编辑 src/App.jsx 中 CouponSection 组件:

// src/App.jsx - CouponSection 组件内
<h2 className="title section-heading">December Only</h2>  {/* 标题 */}
<h3>50% Off All Products!</h3>   {/* 折扣信息 */}
<h4>Coupon Code: <span>HOLIDAY50</span></h4>  {/* 优惠码 */}

修改 FAQ 内容

编辑 src/App.jsx 中 FAQSection 组件的 faqs 数组:

// src/App.jsx - FAQSection 组件内
const faqs = [
  { question: "问题1?", answer: "回答1..." },
  { question: "问题2?", answer: "回答2..." },
  // 添加或修改问题
]

修改页脚版权信息

编辑 src/App.jsx 中 Footer 组件:

// src/App.jsx - Footer 组件内
<p>© 2025 Your Company Name. All Rights Reserved.</p>

修改背景图片

替换 public/img/ 目录下的图片文件:

pic1.jpg - Header 背景
pic2.jpg - Contact 背景
homeimg.png - 手机展示图

修改主题颜色

编辑 src/index.css 中的颜色值:

/* 品牌红色 */
.navbar-brand { color: #bb0000; }
.btn-buynow { background: #900d0d; }

/* 优惠券区域蓝色 */
section.couponsection { background: #37488a; }

/* 强调黄色 */
.nav-link:hover { color: #fdcc52; }

禁用背景音乐

删除或注释 src/App.jsx 中 Header 组件的 audio 元素:

// src/App.jsx - Header 组件内
{/* 删除或注释以下代码 */}
<div className="audioembed">
  <audio ref={audioRef} controls autoPlay src="/audio/audio.mp3" />
</div>

添加新的页面区域

在 src/App.jsx 中添加新组件:

// 1. 创建新组件
function NewSection() {
  return (
    <section id="new-section">
      <div className="container">
        {/* 内容 */}
      </div>
    </section>
  )
}

// 2. 在 App 组件中使用
function App() {
  return (
    <>
      ...
      <NewSection />  {/* 添加到合适位置 */}
      ...
    </>
  )
}

// 3. 在 Navbar 中添加导航链接
<li><a href="#new-section">New Section</a></li>

图片资源

文件	尺寸建议	用途
iconlogo.png	50x50px	导航栏 Logo
homeimg.png	400x800px	Header 手机展示图
pic1.jpg	1920x1080px	Header 背景
pic2.jpg	1920x1080px	Contact 背景
gift.png	100x100px	优惠券图标
button-*.png	150x50px	下载按钮

构建部署

# 构建生产版本
pnpm run build

# 预览生产版本
pnpm run preview

构建产物位于 dist/ 目录。

服务器配置

// vite.config.js
export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 3000,
    allowedHosts: true,
    host: "0.0.0.0"
  },
})

README.md

turingflow-landing-003

技术栈

快速开始

目录结构

页面结构

组件说明

App.jsx 组件结构

Navbar 导航栏

CouponSection 优惠券

FAQSection 常见问题

ContactSection 联系表单

样式说明

CSS 类命名约定

响应式断点

主题色

常见修改任务

修改网站标题和 Logo

修改导航菜单

修改 Header 主标题

修改优惠券信息

修改 FAQ 内容

修改页脚版权信息

修改背景图片

修改主题颜色

禁用背景音乐

添加新的页面区域

图片资源

构建部署

服务器配置