feat: 添加交通物流、智能制造、智能开发终端模拟并优化食品订单班
主要更新: - 新增3个订单班终端模拟数据 (交通物流、智能制造、智能开发) - 交通物流: 图片重命名(9张UUID图片→描述性中文名) - 智能制造: 图片重命名(7张UUID图片→描述性中文名) - 食品订单班: 完成React应用架构和设计系统 - 新增4个Serena记忆文档 (终端模拟开发指南、订单班命名规范等) - 优化模态框和工作流页面交互逻辑 文件变更: - 新增: transportation.ts, intelligentManufacturing.ts, developer.ts - 新增: 食品订单班完整React应用 (Vite + TypeScript + Tailwind) - 修改: RequirementModal.tsx, ResultModal.tsx, WorkflowPageV4.tsx - 图片: 交通物流9张 + 智能制造7张重命名为中文描述性名称
This commit is contained in:
Yep_Q
24
web_frontend/web_result/order-classes/food/react-app/.gitignore
vendored
Normal file
24
web_frontend/web_result/order-classes/food/react-app/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,73 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs['recommended-latest'],
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>react-app</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3576
web_frontend/web_result/order-classes/food/react-app/package-lock.json
generated
Normal file
3576
web_frontend/web_result/order-classes/food/react-app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "react-app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gsap/react": "^2.1.2",
|
||||
"gsap": "^3.13.0",
|
||||
"lucide-react": "^0.544.0",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-intersection-observer": "^9.16.0",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.36.0",
|
||||
"@types/node": "^24.6.1",
|
||||
"@types/react": "^19.1.13",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@vitejs/plugin-react": "^5.0.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.36.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"globals": "^16.4.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^4.1.13",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.44.0",
|
||||
"vite": "^7.1.7"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { useEffect } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import HeroSection from './components/HeroSection'
|
||||
import TimelineNav from './components/TimelineNav'
|
||||
import MarketResearchSection from './components/sections/MarketResearchSection'
|
||||
import BrandPositioningSection from './components/sections/BrandPositioningSection'
|
||||
import ProductDevelopmentSection from './components/sections/ProductDevelopmentSection'
|
||||
import LocationDesignSection from './components/sections/LocationDesignSection'
|
||||
import TeamBuildingSection from './components/sections/TeamBuildingSection'
|
||||
import FinancialPlanningSection from './components/sections/FinancialPlanningSection'
|
||||
import MarketingSection from './components/sections/MarketingSection'
|
||||
|
||||
// 注册GSAP插件
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
function App() {
|
||||
useEffect(() => {
|
||||
// 滚动触发动画配置
|
||||
ScrollTrigger.config({
|
||||
limitCallbacks: true,
|
||||
syncInterval: 150,
|
||||
})
|
||||
|
||||
return () => {
|
||||
ScrollTrigger.getAll().forEach(trigger => trigger.kill())
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="app min-h-screen bg-secondary-100">
|
||||
{/* Hero区块 */}
|
||||
<HeroSection />
|
||||
|
||||
{/* 时间线导航 */}
|
||||
<TimelineNav />
|
||||
|
||||
{/* 主要内容区域 */}
|
||||
<main className="relative">
|
||||
{/* 1. 市场调研 */}
|
||||
<MarketResearchSection />
|
||||
|
||||
{/* 2. 品牌定位 */}
|
||||
<BrandPositioningSection />
|
||||
|
||||
{/* 3. 产品开发 */}
|
||||
<ProductDevelopmentSection />
|
||||
|
||||
{/* 4. 选址设计 */}
|
||||
<LocationDesignSection />
|
||||
|
||||
{/* 5. 团队建设 */}
|
||||
<TeamBuildingSection />
|
||||
|
||||
{/* 6. 财务规划 */}
|
||||
<FinancialPlanningSection />
|
||||
|
||||
{/* 7. 营销推广 */}
|
||||
<MarketingSection />
|
||||
</main>
|
||||
|
||||
{/* 页脚 */}
|
||||
<footer className="bg-gray-900 text-white py-12 px-4">
|
||||
<div className="max-w-7xl mx-auto text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">青莳轻食</h3>
|
||||
<p className="text-gray-400 mb-6">中高端个性化轻食店铺经营方案</p>
|
||||
<div className="flex justify-center gap-6 text-gray-400">
|
||||
<span>食材可溯源</span>
|
||||
<span>•</span>
|
||||
<span>营养可量化</span>
|
||||
<span>•</span>
|
||||
<span>制作可看见</span>
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-gray-800 text-sm text-gray-500">
|
||||
© 2024 青莳轻食. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,152 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ChevronDown } from 'lucide-react'
|
||||
|
||||
const HeroSection = () => {
|
||||
const heroRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
// Hero标题动画
|
||||
gsap.from('.hero-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
ease: 'power3.out',
|
||||
})
|
||||
|
||||
gsap.from('.hero-subtitle', {
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
delay: 0.3,
|
||||
ease: 'power2.out',
|
||||
})
|
||||
|
||||
gsap.from('.hero-features', {
|
||||
y: 20,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
delay: 0.6,
|
||||
stagger: 0.15,
|
||||
})
|
||||
|
||||
gsap.from('.hero-cta', {
|
||||
scale: 0.9,
|
||||
opacity: 0,
|
||||
duration: 0.5,
|
||||
delay: 1,
|
||||
})
|
||||
|
||||
// 滚动提示动画
|
||||
gsap.to('.scroll-indicator', {
|
||||
y: 10,
|
||||
duration: 1.5,
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
ease: 'power1.inOut',
|
||||
})
|
||||
}, heroRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const scrollToContent = () => {
|
||||
const targetY = window.innerHeight
|
||||
window.scrollTo({
|
||||
top: targetY,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={heroRef}
|
||||
className="hero relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-primary-500 to-primary-800 px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
{/* 背景纹理 */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 20% 50%, rgba(255,255,255,0.2) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.15) 0%, transparent 50%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 主要内容 */}
|
||||
<div className="relative z-10 text-center max-w-5xl mx-auto">
|
||||
{/* 主标题 */}
|
||||
<h1 className="hero-title text-5xl sm:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
|
||||
青莳轻食
|
||||
</h1>
|
||||
|
||||
{/* 副标题 */}
|
||||
<p className="hero-subtitle text-xl sm:text-2xl lg:text-3xl text-white/90 mb-8 font-medium">
|
||||
中高端个性化轻食店铺经营方案
|
||||
</p>
|
||||
|
||||
{/* 关键数据 */}
|
||||
<div className="hero-features mb-12 flex flex-wrap justify-center gap-6">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-4 border border-white/20">
|
||||
<div className="text-4xl font-bold text-white mb-1">1200亿</div>
|
||||
<div className="text-white/80 text-sm">市场规模</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-4 border border-white/20">
|
||||
<div className="text-4xl font-bold text-white mb-1">18%</div>
|
||||
<div className="text-white/80 text-sm">年增长率</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-4 border border-white/20">
|
||||
<div className="text-4xl font-bold text-white mb-1">58万</div>
|
||||
<div className="text-white/80 text-sm">首年净利润</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 三大差异化特点 */}
|
||||
<div className="hero-features grid grid-cols-1 sm:grid-cols-3 gap-4 mb-12 max-w-3xl mx-auto">
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
|
||||
<div className="text-white font-semibold mb-2">食材可溯源</div>
|
||||
<div className="text-white/70 text-sm">80%有机农场直供</div>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
|
||||
<div className="text-white font-semibold mb-2">营养可量化</div>
|
||||
<div className="text-white/70 text-sm">精确标注每份营养</div>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
|
||||
<div className="text-white font-semibold mb-2">制作可看见</div>
|
||||
<div className="text-white/70 text-sm">明厨亮灶透明化</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA按钮 */}
|
||||
<div className="hero-cta flex flex-wrap justify-center gap-4">
|
||||
<button
|
||||
onClick={scrollToContent}
|
||||
className="px-8 py-4 bg-white text-primary-600 rounded-xl font-semibold
|
||||
hover:bg-white/95 transition-all duration-300 transform hover:-translate-y-1
|
||||
shadow-xl hover:shadow-2xl"
|
||||
>
|
||||
查看完整方案
|
||||
</button>
|
||||
<button
|
||||
className="px-8 py-4 border-2 border-white text-white rounded-xl font-semibold
|
||||
hover:bg-white/10 transition-all duration-300"
|
||||
>
|
||||
联系我们
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 滚动提示 */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
||||
<div className="scroll-indicator flex flex-col items-center cursor-pointer" onClick={scrollToContent}>
|
||||
<span className="text-white/60 text-sm mb-2">向下滚动</span>
|
||||
<ChevronDown className="text-white/80 w-6 h-6 animate-bounce" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeroSection
|
||||
@@ -0,0 +1,111 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
|
||||
interface NavItem {
|
||||
id: string
|
||||
label: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
const TimelineNav = () => {
|
||||
const [activeSection, setActiveSection] = useState('hero')
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ id: 'market', label: '市场调研', icon: '1️⃣' },
|
||||
{ id: 'brand', label: '品牌定位', icon: '2️⃣' },
|
||||
{ id: 'product', label: '产品开发', icon: '3️⃣' },
|
||||
{ id: 'location', label: '选址设计', icon: '4️⃣' },
|
||||
{ id: 'team', label: '团队建设', icon: '5️⃣' },
|
||||
{ id: 'finance', label: '财务规划', icon: '6️⃣' },
|
||||
{ id: 'marketing', label: '营销推广', icon: '7️⃣' },
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollPosition = window.scrollY + window.innerHeight / 2
|
||||
|
||||
// 检测当前滚动到哪个区块
|
||||
navItems.forEach(item => {
|
||||
const section = document.getElementById(item.id)
|
||||
if (section) {
|
||||
const { offsetTop, offsetHeight } = section
|
||||
if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
||||
setActiveSection(item.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
return () => window.removeEventListener('scroll', handleScroll)
|
||||
}, [])
|
||||
|
||||
const scrollToSection = (sectionId: string) => {
|
||||
const section = document.getElementById(sectionId)
|
||||
if (section) {
|
||||
const yOffset = -80
|
||||
const y = section.getBoundingClientRect().top + window.pageYOffset + yOffset
|
||||
window.scrollTo({
|
||||
top: y,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="fixed top-1/2 right-8 -translate-y-1/2 z-50 hidden lg:block">
|
||||
<div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-4 border border-gray-200">
|
||||
<div className="flex flex-col gap-4">
|
||||
{navItems.map((item, index) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => scrollToSection(item.id)}
|
||||
className={`group relative flex items-center gap-3 transition-all duration-300
|
||||
${activeSection === item.id ? 'scale-110' : 'hover:scale-105'}`}
|
||||
aria-label={item.label}
|
||||
>
|
||||
{/* 图标 */}
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center text-lg
|
||||
transition-all duration-300
|
||||
${
|
||||
activeSection === item.id
|
||||
? 'bg-primary-500 text-white shadow-lg'
|
||||
: 'bg-gray-100 text-gray-600 group-hover:bg-primary-100'
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
|
||||
{/* 标签 - 悬停时显示 */}
|
||||
<span
|
||||
className="absolute right-full mr-4 px-3 py-1 bg-gray-900 text-white text-sm
|
||||
rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300
|
||||
whitespace-nowrap pointer-events-none"
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
|
||||
{/* 进度条 */}
|
||||
{activeSection === item.id && (
|
||||
<div
|
||||
className="absolute left-0 w-1 h-10 bg-primary-500 rounded-full"
|
||||
style={{ left: '-8px' }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 进度指示器 */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<div className="text-xs text-gray-500 text-center">
|
||||
{navItems.findIndex(item => item.id === activeSection) + 1} / {navItems.length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default TimelineNav
|
||||
@@ -0,0 +1,238 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { Sparkles, Award, Heart, Shield } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const BrandPositioningSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.brand-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.brand-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.brand-card', {
|
||||
scale: 0.9,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2,
|
||||
scrollTrigger: {
|
||||
trigger: '.brand-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.value-item', {
|
||||
x: -30,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: '.value-item',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const brandPillars = [
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: '食材可溯源',
|
||||
description: '80%有机农场直供',
|
||||
details: [
|
||||
'与认证有机农场建立长期合作',
|
||||
'每份食材附带溯源二维码',
|
||||
'实时追踪从农场到餐桌全流程',
|
||||
'定期公开供应商认证信息',
|
||||
],
|
||||
gradient: 'from-green-500 to-emerald-600',
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: '营养可量化',
|
||||
description: '精确标注每份营养',
|
||||
details: [
|
||||
'专业营养师团队配方设计',
|
||||
'精确到克的营养成分标注',
|
||||
'卡路里、蛋白质、脂肪全透明',
|
||||
'提供个性化营养建议',
|
||||
],
|
||||
gradient: 'from-blue-500 to-cyan-600',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: '制作可看见',
|
||||
description: '明厨亮灶透明化',
|
||||
details: [
|
||||
'开放式厨房设计',
|
||||
'全程可视化制作流程',
|
||||
'严格的卫生操作标准',
|
||||
'顾客可全程观看制作',
|
||||
],
|
||||
gradient: 'from-purple-500 to-pink-600',
|
||||
},
|
||||
]
|
||||
|
||||
const brandValues = [
|
||||
{ icon: '🌱', title: '健康至上', desc: '以健康为核心价值' },
|
||||
{ icon: '✨', title: '品质保证', desc: '精选优质食材' },
|
||||
{ icon: '🎯', title: '用心服务', desc: '关注每位顾客' },
|
||||
{ icon: '🔬', title: '科学配餐', desc: '营养均衡搭配' },
|
||||
{ icon: '🌍', title: '环保理念', desc: '可持续发展' },
|
||||
{ icon: '💚', title: '真诚透明', desc: '诚信经营' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="brand"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="brand-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">2️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第二阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
品牌定位与差异化
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
打造"青莳轻食"中高端个性化品牌,建立三大核心竞争优势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 品牌名称解读 */}
|
||||
<div className="brand-card mb-16 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h3 className="text-5xl font-bold mb-6">青莳 QingShi</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8 text-left">
|
||||
<div>
|
||||
<div className="text-3xl mb-3">青</div>
|
||||
<p className="text-white/90 text-lg">
|
||||
代表新鲜、自然、健康的生活态度。青春活力,清新自然,是品牌的视觉基调。
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl mb-3">莳</div>
|
||||
<p className="text-white/90 text-lg">
|
||||
寓意培育、呵护与成长。如同精心培育每一道菜品,用心呵护每位顾客的健康。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 三大核心差异化特点 */}
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||
{brandPillars.map((pillar, index) => {
|
||||
const Icon = pillar.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="brand-card group bg-white rounded-3xl p-8 shadow-lg hover:shadow-2xl
|
||||
transition-all duration-500 border border-gray-100
|
||||
transform hover:-translate-y-2"
|
||||
>
|
||||
<div
|
||||
className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${pillar.gradient}
|
||||
flex items-center justify-center mb-6
|
||||
group-hover:scale-110 transition-transform duration-300`}
|
||||
>
|
||||
<Icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">{pillar.title}</h3>
|
||||
<p className="text-primary-600 font-medium mb-6">{pillar.description}</p>
|
||||
<ul className="space-y-3">
|
||||
{pillar.details.map((detail, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2 text-gray-600">
|
||||
<Shield className="w-5 h-5 text-primary-500 flex-shrink-0 mt-0.5" />
|
||||
<span>{detail}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 品牌价值观 */}
|
||||
<div className="bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">品牌核心价值观</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{brandValues.map((value, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="value-item text-center p-4 rounded-2xl hover:bg-primary-50
|
||||
transition-all duration-300 cursor-default
|
||||
transform hover:scale-105"
|
||||
>
|
||||
<div className="text-4xl mb-3">{value.icon}</div>
|
||||
<div className="font-semibold text-gray-900 mb-1">{value.title}</div>
|
||||
<div className="text-sm text-gray-600">{value.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 目标市场定位 */}
|
||||
<div className="mt-12 grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-gradient-to-br from-primary-50 to-white rounded-3xl p-8 border border-primary-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">市场定位</h3>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p className="text-lg leading-relaxed">
|
||||
<span className="font-semibold text-primary-600">中高端轻食市场</span>
|
||||
,面向注重健康、品质和生活方式的都市白领群体
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
客单价定位在 <span className="font-semibold">35-60元</span>
|
||||
,提供高于市场平均水平的产品品质和服务体验
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
选址于<span className="font-semibold">写字楼商圈、高端社区</span>
|
||||
周边,覆盖核心目标客户群体
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 border border-blue-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">竞争策略</h3>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">产品差异化:</span>
|
||||
三大核心特点建立竞争壁垒
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">服务差异化:</span>
|
||||
提供营养咨询和个性化定制
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">体验差异化:</span>
|
||||
打造健康生活方式社区
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">品牌差异化:</span>
|
||||
建立信任和情感连接
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default BrandPositioningSection
|
||||
@@ -0,0 +1,331 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { DollarSign, TrendingUp, PieChart, Calculator } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const FinancialPlanningSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.finance-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.finance-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.finance-card', {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.finance-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const initialInvestment = [
|
||||
{
|
||||
category: '装修费用',
|
||||
amount: '20-30万元',
|
||||
items: ['设计费2万', '硬装15万', '软装5万', '招牌灯箱3万'],
|
||||
color: 'blue',
|
||||
icon: PieChart,
|
||||
},
|
||||
{
|
||||
category: '设备采购',
|
||||
amount: '10-15万元',
|
||||
items: ['厨房设备8万', '冷藏设备3万', '收银系统1万', '其他设备3万'],
|
||||
color: 'green',
|
||||
icon: Calculator,
|
||||
},
|
||||
{
|
||||
category: '前期物料',
|
||||
amount: '5-8万元',
|
||||
items: ['首批食材3万', '餐具包材2万', '清洁用品1万', '营销物料2万'],
|
||||
color: 'purple',
|
||||
icon: DollarSign,
|
||||
},
|
||||
{
|
||||
category: '其他费用',
|
||||
amount: '5-7万元',
|
||||
items: ['房租押金3万', '营业执照1万', '员工培训1万', '备用金2万'],
|
||||
color: 'orange',
|
||||
icon: TrendingUp,
|
||||
},
|
||||
]
|
||||
|
||||
const monthlyOperating = [
|
||||
{ item: '房租', amount: '1.5-2.5万元', percentage: 30 },
|
||||
{ item: '人力成本', amount: '3.5-4.5万元', percentage: 35 },
|
||||
{ item: '食材成本', amount: '2-3万元', percentage: 20 },
|
||||
{ item: '水电煤气', amount: '0.3-0.5万元', percentage: 3 },
|
||||
{ item: '营销推广', amount: '0.5-1万元', percentage: 5 },
|
||||
{ item: '其他费用', amount: '0.5-1万元', percentage: 7 },
|
||||
]
|
||||
|
||||
const revenueProjection = [
|
||||
{
|
||||
scenario: '保守预期',
|
||||
dailySales: 40,
|
||||
avgPrice: 45,
|
||||
dailyRevenue: 1800,
|
||||
monthlyRevenue: 54000,
|
||||
netProfit: 10800,
|
||||
profitMargin: '20%',
|
||||
},
|
||||
{
|
||||
scenario: '正常预期',
|
||||
dailySales: 60,
|
||||
avgPrice: 48,
|
||||
dailyRevenue: 2880,
|
||||
monthlyRevenue: 86400,
|
||||
netProfit: 25920,
|
||||
profitMargin: '30%',
|
||||
},
|
||||
{
|
||||
scenario: '乐观预期',
|
||||
dailySales: 80,
|
||||
avgPrice: 50,
|
||||
dailyRevenue: 4000,
|
||||
monthlyRevenue: 120000,
|
||||
netProfit: 48000,
|
||||
profitMargin: '40%',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="finance"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="finance-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">6️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第六阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
财务规划与投资回报
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
总投资40-60万元,预计8-12个月回本,首年净利润58万元
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 初期投资 */}
|
||||
<div className="mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">初期投资明细</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{initialInvestment.map((investment, index) => {
|
||||
const Icon = investment.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="finance-card bg-white rounded-3xl p-6 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl bg-${investment.color}-100
|
||||
flex items-center justify-center mb-4`}
|
||||
>
|
||||
<Icon className={`w-6 h-6 text-${investment.color}-600`} />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-2">{investment.category}</h4>
|
||||
<div className="text-2xl font-bold text-primary-600 mb-4">{investment.amount}</div>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
{investment.items.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-primary-500">•</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-8 text-center">
|
||||
<div className="inline-block bg-gradient-to-r from-primary-500 to-primary-700 text-white rounded-2xl px-8 py-4">
|
||||
<div className="text-sm mb-1">总投资预算</div>
|
||||
<div className="text-4xl font-bold">40-60万元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 月度运营成本 */}
|
||||
<div className="finance-card bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">月度运营成本</h3>
|
||||
<div className="space-y-4 max-w-4xl mx-auto">
|
||||
{monthlyOperating.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex-shrink-0 w-32">
|
||||
<span className="text-lg font-semibold text-gray-900">{item.item}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="relative h-10 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-500 to-primary-600
|
||||
rounded-lg transition-all duration-1000 ease-out"
|
||||
style={{ width: `${item.percentage}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 w-32 text-right">
|
||||
<span className="text-lg font-semibold text-primary-600">{item.amount}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 text-center">
|
||||
<div className="text-lg text-gray-600 mb-2">月度总运营成本</div>
|
||||
<div className="text-3xl font-bold text-gray-900">8-12万元</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 营收预测 */}
|
||||
<div className="mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">营收与利润预测</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{revenueProjection.map((projection, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`finance-card rounded-3xl p-8 shadow-xl border-2
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2
|
||||
${
|
||||
index === 1
|
||||
? 'bg-gradient-to-br from-primary-500 to-primary-700 text-white border-primary-600 scale-105'
|
||||
: 'bg-white border-gray-100'
|
||||
}`}
|
||||
>
|
||||
<div className="text-center mb-6">
|
||||
<h4
|
||||
className={`text-2xl font-bold mb-2 ${index === 1 ? 'text-white' : 'text-gray-900'}`}
|
||||
>
|
||||
{projection.scenario}
|
||||
</h4>
|
||||
{index === 1 && (
|
||||
<span className="inline-block px-3 py-1 bg-white/20 rounded-full text-sm">
|
||||
推荐参考
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
日均单量
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
{projection.dailySales}单
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
客单价
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
¥{projection.avgPrice}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
日营业额
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
¥{projection.dailyRevenue}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
月营业额
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
¥{projection.monthlyRevenue.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
净利润率
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-primary-600'}`}>
|
||||
{projection.profitMargin}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`text-center pt-4 ${index === 1 ? 'bg-white/10' : 'bg-primary-50'}
|
||||
rounded-xl p-4 mt-4`}
|
||||
>
|
||||
<div className={`text-sm mb-1 ${index === 1 ? 'text-white/80' : 'text-gray-600'}`}>
|
||||
月净利润
|
||||
</div>
|
||||
<div className={`text-3xl font-bold ${index === 1 ? 'text-white' : 'text-primary-600'}`}>
|
||||
¥{projection.netProfit.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 投资回报分析 */}
|
||||
<div className="bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">投资回报分析</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
<div className="text-center p-6 bg-white/10 rounded-2xl backdrop-blur-sm">
|
||||
<div className="text-5xl mb-4">📅</div>
|
||||
<div className="text-sm text-white/80 mb-2">回本周期</div>
|
||||
<div className="text-3xl font-bold">8-12个月</div>
|
||||
</div>
|
||||
<div className="text-center p-6 bg-white/10 rounded-2xl backdrop-blur-sm">
|
||||
<div className="text-5xl mb-4">💰</div>
|
||||
<div className="text-sm text-white/80 mb-2">首年净利润</div>
|
||||
<div className="text-3xl font-bold">58万元</div>
|
||||
</div>
|
||||
<div className="text-center p-6 bg-white/10 rounded-2xl backdrop-blur-sm">
|
||||
<div className="text-5xl mb-4">📈</div>
|
||||
<div className="text-sm text-white/80 mb-2">年投资回报率</div>
|
||||
<div className="text-3xl font-bold">116%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-white/20 text-center max-w-4xl mx-auto">
|
||||
<p className="text-lg text-white/90 leading-relaxed">
|
||||
基于正常经营预期,首年可实现营业额
|
||||
<span className="font-bold text-2xl mx-2">103.7万元</span>
|
||||
,净利润率
|
||||
<span className="font-bold text-2xl mx-2">30%</span>
|
||||
,净利润
|
||||
<span className="font-bold text-2xl mx-2">58万元</span>
|
||||
。第二年随着品牌知名度提升和客户积累,利润将持续增长。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FinancialPlanningSection
|
||||
@@ -0,0 +1,257 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { MapPin, Store, Palette, Users } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const LocationDesignSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.location-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.location-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.location-card', {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2,
|
||||
scrollTrigger: {
|
||||
trigger: '.location-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const locationCriteria = [
|
||||
{
|
||||
icon: MapPin,
|
||||
title: '核心商圈',
|
||||
description: '写字楼、高端社区周边',
|
||||
requirements: [
|
||||
'日均人流量 > 5000人',
|
||||
'白领占比 > 60%',
|
||||
'周边500米内办公人群 > 2000人',
|
||||
'可见性好,易于到达',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Store,
|
||||
title: '店铺规格',
|
||||
description: '面积60-120㎡',
|
||||
requirements: [
|
||||
'实际使用面积 80-100㎡',
|
||||
'层高 > 3米',
|
||||
'门面宽度 > 6米',
|
||||
'具备上下水、排烟条件',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: '装修风格',
|
||||
description: '简约现代,自然清新',
|
||||
requirements: [
|
||||
'浅色系为主基调',
|
||||
'原木元素点缀',
|
||||
'充足自然采光',
|
||||
'绿植景观设计',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '功能分区',
|
||||
description: '合理布局,提升效率',
|
||||
requirements: [
|
||||
'开放式厨房占比30%',
|
||||
'用餐区占比50%',
|
||||
'收银接待区占比10%',
|
||||
'储物备餐区占比10%',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const designElements = [
|
||||
{
|
||||
title: '色彩方案',
|
||||
items: ['主色: 浅青色/绿色', '辅色: 米白色', '点缀色: 原木色'],
|
||||
emoji: '🎨',
|
||||
},
|
||||
{
|
||||
title: '材质选择',
|
||||
items: ['原木桌椅', '大理石台面', '绿植墙面', '玻璃隔断'],
|
||||
emoji: '🪵',
|
||||
},
|
||||
{
|
||||
title: '照明设计',
|
||||
items: ['自然光为主', '暖光LED', '重点照明', '氛围灯光'],
|
||||
emoji: '💡',
|
||||
},
|
||||
{
|
||||
title: '软装配饰',
|
||||
items: ['北欧风家具', '艺术挂画', '绿色植物', '舒适座椅'],
|
||||
emoji: '🛋️',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="location"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="location-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">4️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第四阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
选址与店铺设计
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
精选核心商圈,打造简约自然的用餐环境,提供舒适愉悦的消费体验
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 选址与设计标准 */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{locationCriteria.map((criterion, index) => {
|
||||
const Icon = criterion.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="location-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary-100 flex items-center justify-center flex-shrink-0">
|
||||
<Icon className="w-7 h-7 text-primary-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">{criterion.title}</h3>
|
||||
<p className="text-gray-600">{criterion.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{criterion.requirements.map((req, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="w-1.5 h-1.5 bg-primary-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span className="text-gray-700">{req}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 设计元素 */}
|
||||
<div className="bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-12">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">设计元素</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{designElements.map((element, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="location-card text-center p-6 rounded-2xl hover:bg-primary-50
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-5xl mb-4">{element.emoji}</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-4">{element.title}</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
{element.items.map((item, idx) => (
|
||||
<li key={idx}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 空间布局示意 */}
|
||||
<div className="bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">店铺空间布局</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 className="text-2xl font-semibold mb-4">前厅区域 (70%)</h4>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🍽️</span>
|
||||
<div>
|
||||
<div className="font-medium">用餐区</div>
|
||||
<div className="text-white/80 text-sm">30-40个座位,多种座位类型</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🔍</span>
|
||||
<div>
|
||||
<div className="font-medium">开放式厨房</div>
|
||||
<div className="text-white/80 text-sm">透明化制作,增强信任感</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">💳</span>
|
||||
<div>
|
||||
<div className="font-medium">收银接待区</div>
|
||||
<div className="text-white/80 text-sm">点餐、取餐、咨询一体化</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-2xl font-semibold mb-4">后厨区域 (30%)</h4>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🥗</span>
|
||||
<div>
|
||||
<div className="font-medium">食材准备区</div>
|
||||
<div className="text-white/80 text-sm">清洗、切配、腌制</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🔥</span>
|
||||
<div>
|
||||
<div className="font-medium">烹饪操作区</div>
|
||||
<div className="text-white/80 text-sm">煎、烤、蒸、煮</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">❄️</span>
|
||||
<div>
|
||||
<div className="font-medium">冷藏储存区</div>
|
||||
<div className="text-white/80 text-sm">冷柜、冷库、干货区</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-white/20 text-center">
|
||||
<p className="text-lg text-white/90">
|
||||
总投资预算: <span className="text-2xl font-bold">35-50万元</span>
|
||||
(含装修、设备、前期物料)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default LocationDesignSection
|
||||
@@ -0,0 +1,241 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { TrendingUp, Users, DollarSign, Target } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const MarketResearchSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
// 标题动画
|
||||
gsap.from('.market-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.market-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
// 统计卡片动画
|
||||
gsap.from('.stat-card', {
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.stat-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
|
||||
// 趋势图动画
|
||||
gsap.from('.trend-item', {
|
||||
x: -50,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: '.trend-item',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const marketStats = [
|
||||
{
|
||||
icon: DollarSign,
|
||||
value: '1200亿元',
|
||||
label: '2024年市场规模',
|
||||
color: 'text-green-500',
|
||||
bgColor: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
value: '18%',
|
||||
label: '年复合增长率',
|
||||
color: 'text-blue-500',
|
||||
bgColor: 'bg-blue-50',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
value: '3.5亿',
|
||||
label: '目标用户群体',
|
||||
color: 'text-purple-500',
|
||||
bgColor: 'bg-purple-50',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
value: '65%',
|
||||
label: '白领女性占比',
|
||||
color: 'text-pink-500',
|
||||
bgColor: 'bg-pink-50',
|
||||
},
|
||||
]
|
||||
|
||||
const trends = [
|
||||
{ year: '2023年', value: '1020亿', growth: '+15%' },
|
||||
{ year: '2024年', value: '1200亿', growth: '+18%' },
|
||||
{ year: '2025年(预测)', value: '1416亿', growth: '+18%' },
|
||||
{ year: '2026年(预测)', value: '1671亿', growth: '+18%' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="market"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-gray-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="market-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">1️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第一阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
市场调研与分析
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
深入分析轻食市场现状,精准定位目标客户群体,把握行业发展趋势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 市场统计卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{marketStats.map((stat, index) => {
|
||||
const Icon = stat.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="stat-card bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl
|
||||
transition-all duration-300 transform hover:-translate-y-2
|
||||
border border-gray-100"
|
||||
>
|
||||
<div className={`${stat.bgColor} w-14 h-14 rounded-xl flex items-center justify-center mb-4`}>
|
||||
<Icon className={`w-7 h-7 ${stat.color}`} />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-900 mb-2">{stat.value}</div>
|
||||
<div className="text-gray-600">{stat.label}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 市场趋势 */}
|
||||
<div className="bg-white rounded-3xl p-8 shadow-xl border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-8">市场规模增长趋势</h3>
|
||||
<div className="space-y-4">
|
||||
{trends.map((trend, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="trend-item flex items-center gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex-shrink-0 w-40">
|
||||
<span className="text-lg font-semibold text-gray-900">{trend.year}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="relative h-12 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-500 to-primary-600
|
||||
rounded-lg transition-all duration-1000 ease-out flex items-center justify-end pr-4"
|
||||
style={{ width: `${(index + 1) * 20}%` }}
|
||||
>
|
||||
<span className="text-white font-bold">{trend.value}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 w-20 text-right">
|
||||
<span className="inline-flex items-center px-3 py-1 bg-green-100 text-green-700
|
||||
rounded-full text-sm font-medium">
|
||||
{trend.growth}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 目标客户群体 */}
|
||||
<div className="mt-12 grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-gradient-to-br from-primary-50 to-white rounded-3xl p-8 border border-primary-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">核心客户画像</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">年龄段</div>
|
||||
<div className="text-gray-600">25-45岁中高端白领群体</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">收入水平</div>
|
||||
<div className="text-gray-600">月收入8000元以上</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">消费特点</div>
|
||||
<div className="text-gray-600">注重健康、品质和效率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">用餐场景</div>
|
||||
<div className="text-gray-600">工作日午餐、健身后轻食</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 border border-blue-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">市场机会分析</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">健康意识提升</div>
|
||||
<div className="text-gray-600">消费者对健康饮食需求持续增长</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">差异化空间大</div>
|
||||
<div className="text-gray-600">市场同质化严重,创新品牌有优势</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">政策支持</div>
|
||||
<div className="text-gray-600">健康中国战略推动行业发展</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">消费升级</div>
|
||||
<div className="text-gray-600">愿意为品质和服务支付溢价</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarketResearchSection
|
||||
@@ -0,0 +1,345 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { Smartphone, Users, Share2, Gift, Star, MessageCircle } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const MarketingSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.marketing-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.marketing-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.marketing-card', {
|
||||
scale: 0.95,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.marketing-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const marketingStrategies = [
|
||||
{
|
||||
title: '线上推广',
|
||||
icon: Smartphone,
|
||||
color: 'blue',
|
||||
tactics: [
|
||||
{
|
||||
name: '小程序商城',
|
||||
description: '自有小程序,在线点餐、会员管理',
|
||||
budget: '2万元',
|
||||
},
|
||||
{
|
||||
name: '抖音/小红书',
|
||||
description: '短视频营销,探店打卡种草',
|
||||
budget: '1万元/月',
|
||||
},
|
||||
{
|
||||
name: '美团/饿了么',
|
||||
description: '外卖平台入驻,扩大覆盖范围',
|
||||
budget: '佣金20%',
|
||||
},
|
||||
{
|
||||
name: 'SEO优化',
|
||||
description: '搜索引擎优化,提升品牌曝光',
|
||||
budget: '5000元/月',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '线下推广',
|
||||
icon: Users,
|
||||
color: 'green',
|
||||
tactics: [
|
||||
{
|
||||
name: '开业活动',
|
||||
description: '前100名5折优惠,吸引首批客户',
|
||||
budget: '1万元',
|
||||
},
|
||||
{
|
||||
name: '地推宣传',
|
||||
description: '周边写字楼发放优惠券',
|
||||
budget: '5000元',
|
||||
},
|
||||
{
|
||||
name: '异业合作',
|
||||
description: '与健身房、瑜伽馆等合作',
|
||||
budget: '3000元',
|
||||
},
|
||||
{
|
||||
name: '试吃活动',
|
||||
description: '定期举办新品试吃活动',
|
||||
budget: '2000元/月',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '会员体系',
|
||||
icon: Gift,
|
||||
color: 'purple',
|
||||
tactics: [
|
||||
{
|
||||
name: '充值优惠',
|
||||
description: '充500送50,充1000送150',
|
||||
budget: '让利10-15%',
|
||||
},
|
||||
{
|
||||
name: '积分系统',
|
||||
description: '消费1元积1分,积分兑换礼品',
|
||||
budget: '5000元/月',
|
||||
},
|
||||
{
|
||||
name: '生日特权',
|
||||
description: '生日当月享受8折优惠',
|
||||
budget: '3000元/月',
|
||||
},
|
||||
{
|
||||
name: '会员专享',
|
||||
description: '新品优先体验、专属活动',
|
||||
budget: '2000元/月',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '口碑营销',
|
||||
icon: Share2,
|
||||
color: 'pink',
|
||||
tactics: [
|
||||
{
|
||||
name: '分享有礼',
|
||||
description: '分享朋友圈集赞送饮品',
|
||||
budget: '5000元/月',
|
||||
},
|
||||
{
|
||||
name: '拼团活动',
|
||||
description: '3人拼团享8折优惠',
|
||||
budget: '8折让利',
|
||||
},
|
||||
{
|
||||
name: '推荐返现',
|
||||
description: '老客户推荐新客户各得10元',
|
||||
budget: '3000元/月',
|
||||
},
|
||||
{
|
||||
name: 'UGC内容',
|
||||
description: '鼓励顾客发布用餐照片',
|
||||
budget: '礼品成本',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const marketingTimeline = [
|
||||
{
|
||||
phase: '开业前1个月',
|
||||
actions: ['小程序开发上线', '社交媒体账号注册', '周边地推宣传', '异业合作洽谈'],
|
||||
icon: '🎯',
|
||||
},
|
||||
{
|
||||
phase: '开业首月',
|
||||
actions: ['开业大促活动', '会员系统推广', '抖音探店合作', '外卖平台入驻'],
|
||||
icon: '🚀',
|
||||
},
|
||||
{
|
||||
phase: '第2-3个月',
|
||||
actions: ['会员活动运营', '定期试吃活动', '短视频持续输出', '口碑营销推进'],
|
||||
icon: '📈',
|
||||
},
|
||||
{
|
||||
phase: '稳定运营期',
|
||||
actions: ['会员精细化运营', 'KOL合作推广', '季节性新品营销', '社区活动参与'],
|
||||
icon: '⭐',
|
||||
},
|
||||
]
|
||||
|
||||
const kpiTargets = [
|
||||
{ metric: '首月获客', target: '500+', icon: '👥' },
|
||||
{ metric: '会员转化率', target: '40%', icon: '💳' },
|
||||
{ metric: '复购率', target: '60%', icon: '🔄' },
|
||||
{ metric: '线上订单占比', target: '30%', icon: '📱' },
|
||||
{ metric: '客户满意度', target: '4.5分', icon: '⭐' },
|
||||
{ metric: '月营销成本', target: '<2万', icon: '💰' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="marketing"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-primary-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="marketing-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">7️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第七阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
营销推广策略
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
线上线下结合,会员体系驱动,口碑传播为核心的全方位营销策略
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 营销策略 */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{marketingStrategies.map((strategy, index) => {
|
||||
const Icon = strategy.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="marketing-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-${strategy.color}-100
|
||||
flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<Icon className={`w-7 h-7 text-${strategy.color}-600`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900">{strategy.title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{strategy.tactics.map((tactic, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="p-4 rounded-xl border border-gray-100 hover:border-primary-300
|
||||
hover:bg-primary-50 transition-all duration-300"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-semibold text-gray-900">{tactic.name}</h4>
|
||||
<span className="text-sm text-primary-600 font-medium whitespace-nowrap ml-2">
|
||||
{tactic.budget}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{tactic.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 营销时间线 */}
|
||||
<div className="marketing-card bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">营销时间规划</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{marketingTimeline.map((timeline, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="marketing-card text-center p-6 rounded-2xl border-2 border-gray-100
|
||||
hover:border-primary-300 hover:bg-primary-50
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-5xl mb-4">{timeline.icon}</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-4">{timeline.phase}</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600 text-left">
|
||||
{timeline.actions.map((action, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-primary-500 mt-1">•</span>
|
||||
<span>{action}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI目标 */}
|
||||
<div className="marketing-card bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white mb-16">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">营销KPI目标</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{kpiTargets.map((kpi, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="marketing-card text-center p-6 rounded-2xl bg-white/10 backdrop-blur-sm
|
||||
hover:bg-white/20 transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-4xl mb-3">{kpi.icon}</div>
|
||||
<div className="text-sm text-white/80 mb-2">{kpi.metric}</div>
|
||||
<div className="text-2xl font-bold">{kpi.target}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 营销预算总结 */}
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-white rounded-3xl p-8 shadow-xl border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">营销预算分配</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center p-4 bg-gray-50 rounded-xl">
|
||||
<span className="font-medium text-gray-700">开业前期投入</span>
|
||||
<span className="text-xl font-bold text-primary-600">3-5万元</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-4 bg-gray-50 rounded-xl">
|
||||
<span className="font-medium text-gray-700">月度营销费用</span>
|
||||
<span className="text-xl font-bold text-primary-600">1.5-2万元</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-4 bg-gray-50 rounded-xl">
|
||||
<span className="font-medium text-gray-700">营销费用占比</span>
|
||||
<span className="text-xl font-bold text-primary-600">15-20%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 border border-blue-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">预期营销效果</h3>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p className="flex items-start gap-2">
|
||||
<Star className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>品牌认知:</strong> 3个月内成为区域知名轻食品牌
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-start gap-2">
|
||||
<MessageCircle className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>客户积累:</strong> 首年积累2000+会员客户
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-start gap-2">
|
||||
<Share2 className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>口碑传播:</strong> 60%新客户来自老客户推荐
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-start gap-2">
|
||||
<Users className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>复购率:</strong> 保持60%以上的高复购率
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarketingSection
|
||||
@@ -0,0 +1,240 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { Utensils, Leaf, Flame, Clock } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const ProductDevelopmentSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.product-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.product-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.product-card', {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.product-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const productCategories = [
|
||||
{
|
||||
name: '能量碗系列',
|
||||
description: '高蛋白低脂,适合健身人群',
|
||||
icon: Flame,
|
||||
color: 'orange',
|
||||
products: [
|
||||
'青莳香煎牛肉能量碗',
|
||||
'烤鸡胸蔬菜能量碗',
|
||||
'三文鱼牛油果能量碗',
|
||||
'藜麦虾仁能量碗',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '轻食沙拉系列',
|
||||
description: '清爽低卡,膳食纤维丰富',
|
||||
icon: Leaf,
|
||||
color: 'green',
|
||||
products: [
|
||||
'青莳虾仁牛油果沙拉',
|
||||
'烟熏三文鱼沙拉',
|
||||
'鸡胸凯撒沙拉',
|
||||
'田园蔬菜沙拉',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '冷意面系列',
|
||||
description: '夏日清凉,口感丰富',
|
||||
icon: Utensils,
|
||||
color: 'blue',
|
||||
products: [
|
||||
'青莳夏季芒果鸡胸冷意面',
|
||||
'番茄海鲜冷意面',
|
||||
'青酱鸡肉冷意面',
|
||||
'日式和风冷意面',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '定制套餐',
|
||||
description: '个性化营养方案',
|
||||
icon: Clock,
|
||||
color: 'purple',
|
||||
products: [
|
||||
'青莳减脂专属套餐',
|
||||
'增肌健身套餐',
|
||||
'办公室白领套餐',
|
||||
'孕期营养套餐',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const nutritionFeatures = [
|
||||
{
|
||||
title: '精准热量控制',
|
||||
desc: '每份餐品热量控制在400-600卡路里',
|
||||
value: '400-600',
|
||||
unit: 'kcal',
|
||||
},
|
||||
{
|
||||
title: '高蛋白配比',
|
||||
desc: '蛋白质含量占比25-35%',
|
||||
value: '25-35',
|
||||
unit: '%',
|
||||
},
|
||||
{
|
||||
title: '低GI食材',
|
||||
desc: '血糖指数控制在55以下',
|
||||
value: '<55',
|
||||
unit: 'GI',
|
||||
},
|
||||
{
|
||||
title: '膳食纤维',
|
||||
desc: '每份含8-12g膳食纤维',
|
||||
value: '8-12',
|
||||
unit: 'g',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="product"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-primary-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="product-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">3️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第三阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
产品开发与菜单设计
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
32款精心研发的轻食产品,科学营养配比,满足不同需求
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 营养特点 */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{nutritionFeatures.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="product-card bg-white rounded-2xl p-6 shadow-lg text-center
|
||||
hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||
>
|
||||
<div className="text-4xl font-bold text-primary-600 mb-2">
|
||||
{feature.value}
|
||||
<span className="text-xl ml-1">{feature.unit}</span>
|
||||
</div>
|
||||
<div className="font-semibold text-gray-900 mb-2">{feature.title}</div>
|
||||
<div className="text-sm text-gray-600">{feature.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 产品系列 */}
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{productCategories.map((category, index) => {
|
||||
const Icon = category.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="product-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-${category.color}-100
|
||||
flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<Icon className={`w-7 h-7 text-${category.color}-600`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">{category.name}</h3>
|
||||
<p className="text-gray-600">{category.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{category.products.map((product, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50
|
||||
transition-colors group cursor-pointer"
|
||||
>
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full group-hover:scale-125 transition-transform"></div>
|
||||
<span className="text-gray-700 group-hover:text-primary-600 transition-colors">
|
||||
{product}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-gray-100">
|
||||
<button
|
||||
className="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-600
|
||||
text-white rounded-xl font-medium
|
||||
hover:from-primary-600 hover:to-primary-700
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
查看详细菜单
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 产品开发理念 */}
|
||||
<div className="mt-12 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">产品研发理念</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-4">🔬</div>
|
||||
<div className="text-xl font-semibold mb-3">科学配方</div>
|
||||
<div className="text-white/90">
|
||||
营养师团队精心设计,确保每份餐品营养均衡
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-4">👨🍳</div>
|
||||
<div className="text-xl font-semibold mb-3">匠心制作</div>
|
||||
<div className="text-white/90">
|
||||
资深厨师团队,精选食材,严格把控每道工序
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-4">💚</div>
|
||||
<div className="text-xl font-semibold mb-3">持续创新</div>
|
||||
<div className="text-white/90">
|
||||
每季度推出新品,紧跟健康饮食趋势
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductDevelopmentSection
|
||||
@@ -0,0 +1,279 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { ChefHat, GraduationCap, Heart, Trophy } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const TeamBuildingSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.team-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.team-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.team-card', {
|
||||
scale: 0.95,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.team-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const teamStructure = [
|
||||
{
|
||||
role: '店长',
|
||||
count: 1,
|
||||
icon: Trophy,
|
||||
color: 'purple',
|
||||
responsibilities: [
|
||||
'整体运营管理',
|
||||
'人员调度安排',
|
||||
'客户关系维护',
|
||||
'业绩目标达成',
|
||||
],
|
||||
requirements: '3年以上餐饮管理经验',
|
||||
salary: '8000-12000元/月',
|
||||
},
|
||||
{
|
||||
role: '厨师长',
|
||||
count: 1,
|
||||
icon: ChefHat,
|
||||
color: 'orange',
|
||||
responsibilities: [
|
||||
'菜品研发创新',
|
||||
'食材质量把控',
|
||||
'厨房团队管理',
|
||||
'出品标准监督',
|
||||
],
|
||||
requirements: '5年以上轻食/西餐经验',
|
||||
salary: '7000-10000元/月',
|
||||
},
|
||||
{
|
||||
role: '厨师',
|
||||
count: 2,
|
||||
icon: ChefHat,
|
||||
color: 'green',
|
||||
responsibilities: [
|
||||
'菜品制作加工',
|
||||
'食材准备处理',
|
||||
'厨房卫生维护',
|
||||
'协助菜品研发',
|
||||
],
|
||||
requirements: '2年以上厨房工作经验',
|
||||
salary: '5000-7000元/月',
|
||||
},
|
||||
{
|
||||
role: '服务员',
|
||||
count: 3,
|
||||
icon: Heart,
|
||||
color: 'pink',
|
||||
responsibilities: [
|
||||
'顾客接待服务',
|
||||
'点餐收银操作',
|
||||
'餐厅清洁维护',
|
||||
'客户反馈收集',
|
||||
],
|
||||
requirements: '良好服务意识和沟通能力',
|
||||
salary: '4000-6000元/月',
|
||||
},
|
||||
]
|
||||
|
||||
const trainingPrograms = [
|
||||
{
|
||||
title: '产品知识培训',
|
||||
duration: '3天',
|
||||
content: [
|
||||
'菜品原料和制作工艺',
|
||||
'营养成分和健康价值',
|
||||
'食材溯源系统使用',
|
||||
'产品推荐技巧',
|
||||
],
|
||||
emoji: '📚',
|
||||
},
|
||||
{
|
||||
title: '服务标准培训',
|
||||
duration: '2天',
|
||||
content: [
|
||||
'服务流程和话术',
|
||||
'顾客投诉处理',
|
||||
'收银系统操作',
|
||||
'卫生安全规范',
|
||||
],
|
||||
emoji: '🎯',
|
||||
},
|
||||
{
|
||||
title: '品牌文化培训',
|
||||
duration: '1天',
|
||||
content: [
|
||||
'品牌理念和价值观',
|
||||
'企业文化认同',
|
||||
'团队协作精神',
|
||||
'职业发展规划',
|
||||
],
|
||||
emoji: '💚',
|
||||
},
|
||||
{
|
||||
title: '持续培训机制',
|
||||
duration: '长期',
|
||||
content: [
|
||||
'每月新品培训',
|
||||
'季度技能考核',
|
||||
'优秀员工分享',
|
||||
'外部学习交流',
|
||||
],
|
||||
emoji: '🔄',
|
||||
},
|
||||
]
|
||||
|
||||
const incentiveSystem = [
|
||||
{ icon: '💰', title: '绩效奖金', desc: '月度/季度销售达成奖励' },
|
||||
{ icon: '🏆', title: '晋升机制', desc: '明确的职业发展通道' },
|
||||
{ icon: '🎓', title: '培训机会', desc: '提供专业技能提升培训' },
|
||||
{ icon: '🎁', title: '福利待遇', desc: '五险一金、带薪年假、节日福利' },
|
||||
{ icon: '🌟', title: '员工关怀', desc: '生日礼物、员工活动、困难帮扶' },
|
||||
{ icon: '👥', title: '团队建设', desc: '定期团建活动增强凝聚力' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="team"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-gray-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="team-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">5️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第五阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
团队建设与培训
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
7人精干团队,完善的培训体系,打造专业高效的服务团队
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 团队架构 */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{teamStructure.map((member, index) => {
|
||||
const Icon = member.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="team-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className={`w-16 h-16 rounded-2xl bg-${member.color}-100
|
||||
flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<Icon className={`w-8 h-8 text-${member.color}-600`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-2xl font-bold text-gray-900">{member.role}</h3>
|
||||
<span className="px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium">
|
||||
{member.count}人
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 mb-2">{member.requirements}</div>
|
||||
<div className="text-lg font-semibold text-primary-600">{member.salary}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-gray-900 mb-3">岗位职责:</div>
|
||||
{member.responsibilities.map((resp, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-start gap-2 p-2 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="w-1.5 h-1.5 bg-primary-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span className="text-gray-700">{resp}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 培训体系 */}
|
||||
<div className="bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-12">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">培训体系</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{trainingPrograms.map((program, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="team-card text-center p-6 rounded-2xl border-2 border-gray-100
|
||||
hover:border-primary-300 hover:bg-primary-50
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-5xl mb-4">{program.emoji}</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-2">{program.title}</h4>
|
||||
<div className="text-sm text-primary-600 font-medium mb-4">
|
||||
培训周期: {program.duration}
|
||||
</div>
|
||||
<ul className="space-y-2 text-sm text-gray-600 text-left">
|
||||
{program.content.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-primary-500">•</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 激励机制 */}
|
||||
<div className="bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">激励与福利体系</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{incentiveSystem.map((incentive, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="team-card text-center p-4 rounded-2xl hover:bg-white/10
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-4xl mb-3">{incentive.icon}</div>
|
||||
<div className="font-semibold mb-2">{incentive.title}</div>
|
||||
<div className="text-sm text-white/80">{incentive.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-white/20">
|
||||
<div className="text-center">
|
||||
<div className="text-lg text-white/90 mb-2">总人力成本预算</div>
|
||||
<div className="text-4xl font-bold">3.5-4.5万元/月</div>
|
||||
<div className="text-sm text-white/80 mt-2">(含工资、社保、福利)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default TeamBuildingSection
|
||||
@@ -0,0 +1,68 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": [],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
@@ -0,0 +1,264 @@
|
||||
# 青莳轻食设计系统
|
||||
|
||||
## 颜色方案
|
||||
|
||||
### 主色调 (Primary) - 浅青色/绿色系
|
||||
代表健康、清新、自然的品牌特质
|
||||
|
||||
```css
|
||||
--primary-50: #e8f5e9 /* 超淡绿 - 背景 */
|
||||
--primary-100: #c8e6c9 /* 淡绿 - 次要背景 */
|
||||
--primary-200: #a5d6a7 /* 浅绿 - 悬停状态 */
|
||||
--primary-300: #81c784 /* 中浅绿 */
|
||||
--primary-400: #66bb6a /* 绿 - 次要按钮 */
|
||||
--primary-500: #4caf50 /* 标准绿 - 主按钮、重点文字 ⭐ */
|
||||
--primary-600: #43a047 /* 深绿 - 按钮悬停 */
|
||||
--primary-700: #388e3c /* 较深绿 */
|
||||
--primary-800: #2e7d32 /* 深绿 - 深色主题 */
|
||||
--primary-900: #1b5e20 /* 最深绿 - 强调 */
|
||||
```
|
||||
|
||||
### 辅助色 (Secondary) - 米白色系
|
||||
代表纯净、简约、清洁
|
||||
|
||||
```css
|
||||
--secondary-50: #fafafa /* 超淡灰白 */
|
||||
--secondary-100: #f5f5f5 /* 米白色 - 主要背景 ⭐ */
|
||||
--secondary-200: #eeeeee /* 浅灰白 */
|
||||
--secondary-300: #e0e0e0 /* 边框、分隔线 */
|
||||
--secondary-400: #bdbdbd /* 次要文字 */
|
||||
--secondary-500: #9e9e9e /* 禁用状态 */
|
||||
```
|
||||
|
||||
### 点缀色 (Accent) - 原木色系
|
||||
代表温暖、品质、自然
|
||||
|
||||
```css
|
||||
--accent-50: #f3e5d4 /* 超淡原木色 */
|
||||
--accent-100: #e6d0bc /* 淡原木色 */
|
||||
--accent-200: #d9baa4 /* 浅原木色 */
|
||||
--accent-300: #cca58c /* 中浅原木色 */
|
||||
--accent-400: #bf9074 /* 原木色 */
|
||||
--accent-500: #8b7355 /* 标准原木色 - 桌椅框架 ⭐ */
|
||||
--accent-600: #6d5a43 /* 深原木色 */
|
||||
--accent-700: #4f4132 /* 最深原木色 */
|
||||
```
|
||||
|
||||
## 字体系统
|
||||
|
||||
### 字体家族
|
||||
```css
|
||||
font-sans: 'Inter', system-ui, -apple-system, sans-serif
|
||||
font-serif: ui-serif, Georgia, Cambria, serif
|
||||
font-mono: 'JetBrains Mono', 'Fira Code', monospace
|
||||
```
|
||||
|
||||
### 字号规模 (使用 clamp 实现响应式)
|
||||
```css
|
||||
text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem) /* 12-14px */
|
||||
text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem) /* 14-16px */
|
||||
text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem) /* 16-18px */
|
||||
text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem) /* 18-20px */
|
||||
text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem) /* 20-24px */
|
||||
text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem) /* 24-32px */
|
||||
text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.5rem) /* 30-40px */
|
||||
text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem) /* 36-48px */
|
||||
text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem) /* 48-64px */
|
||||
```
|
||||
|
||||
### 字重
|
||||
```css
|
||||
font-light: 300 /* 轻量文字 */
|
||||
font-normal: 400 /* 正文 */
|
||||
font-medium: 500 /* 次要标题 */
|
||||
font-semibold: 600 /* 主要标题 */
|
||||
font-bold: 700 /* 强调标题 */
|
||||
```
|
||||
|
||||
### 行高
|
||||
```css
|
||||
leading-tight: 1.25 /* 标题 */
|
||||
leading-snug: 1.375 /* 副标题 */
|
||||
leading-normal: 1.5 /* 正文 */
|
||||
leading-relaxed: 1.625 /* 舒适正文 */
|
||||
leading-loose: 2 /* 宽松正文 */
|
||||
```
|
||||
|
||||
## 间距系统
|
||||
|
||||
### 基础单位：4px (0.25rem)
|
||||
```css
|
||||
spacing-0: 0 /* 0px */
|
||||
spacing-1: 0.25 /* 4px */
|
||||
spacing-2: 0.5 /* 8px ⭐ 基础单位 */
|
||||
spacing-3: 0.75 /* 12px */
|
||||
spacing-4: 1 /* 16px ⭐ 组件内边距 */
|
||||
spacing-6: 1.5 /* 24px ⭐ 组件间距 */
|
||||
spacing-8: 2 /* 32px ⭐ 区块间距 */
|
||||
spacing-12: 3 /* 48px ⭐ 大区块间距 */
|
||||
spacing-16: 4 /* 64px */
|
||||
spacing-24: 6 /* 96px ⭐ 章节间距 */
|
||||
spacing-32: 8 /* 128px */
|
||||
```
|
||||
|
||||
## 圆角系统
|
||||
```css
|
||||
rounded-none: 0 /* 无圆角 */
|
||||
rounded-sm: 0.125 /* 2px */
|
||||
rounded: 0.25 /* 4px */
|
||||
rounded-md: 0.375 /* 6px ⭐ 卡片 */
|
||||
rounded-lg: 0.5 /* 8px ⭐ 按钮 */
|
||||
rounded-xl: 0.75 /* 12px */
|
||||
rounded-2xl: 1 /* 16px */
|
||||
rounded-3xl: 1.5 /* 24px */
|
||||
rounded-4xl: 2 /* 32px ⭐ 图片容器 */
|
||||
rounded-full: 9999 /* 完全圆形 */
|
||||
```
|
||||
|
||||
## 阴影系统
|
||||
```css
|
||||
shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)
|
||||
shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)
|
||||
shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06)
|
||||
shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)
|
||||
shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)
|
||||
shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15)
|
||||
shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04) ⭐
|
||||
shadow-hard: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
|
||||
```
|
||||
|
||||
## 动画原则 (GSAP)
|
||||
|
||||
### 缓动函数 (Easing)
|
||||
```javascript
|
||||
// 标准缓动
|
||||
"power2.inOut" // 默认，平滑进出
|
||||
"power3.out" // 快进慢出，用于入场
|
||||
"power2.out" // 用于悬停效果
|
||||
|
||||
// 弹性缓动
|
||||
"elastic.out(1, 0.3)" // 弹性效果，用于强调
|
||||
"back.out(1.7)" // 回弹效果，用于卡片
|
||||
|
||||
// 自定义
|
||||
CustomEase.create("custom", "M0,0 C0.14,0 0.242,0.438 0.272,0.561 0.313,0.728 0.354,0.963 0.362,1 0.37,0.985 0.414,0.873 0.455,0.811 0.51,0.726 0.573,0.753 0.586,0.762 0.662,0.812 0.719,0.981 0.726,0.998 0.788,0.914 0.84,0.936 0.859,0.95 0.878,0.964 0.897,0.985 0.911,0.998 0.922,0.994 0.939,0.984 0.954,0.984 0.969,0.984 1,1 1,1")
|
||||
```
|
||||
|
||||
### 持续时间 (Duration)
|
||||
```javascript
|
||||
0.15s // 微交互（按钮点击）
|
||||
0.3s // 快速过渡（悬停效果）
|
||||
0.6s // 标准动画（卡片入场）
|
||||
1.0s // 慢动画（大区块入场）
|
||||
1.5s // 长动画（首屏Hero）
|
||||
```
|
||||
|
||||
### ScrollTrigger 配置
|
||||
```javascript
|
||||
ScrollTrigger.create({
|
||||
trigger: element,
|
||||
start: "top 80%", // 元素顶部到达视口80%位置时触发
|
||||
end: "bottom 20%", // 元素底部离开视口80%位置时结束
|
||||
scrub: 1, // 1秒延迟跟随滚动
|
||||
markers: false, // 开发模式显示标记
|
||||
toggleActions: "play none none reverse"
|
||||
})
|
||||
```
|
||||
|
||||
### 动画时间轴
|
||||
```javascript
|
||||
const tl = gsap.timeline({
|
||||
defaults: { duration: 0.6, ease: "power2.out" }
|
||||
})
|
||||
|
||||
tl.from(".hero-title", { y: 50, opacity: 0 })
|
||||
.from(".hero-subtitle", { y: 30, opacity: 0 }, "-=0.4")
|
||||
.from(".hero-cta", { scale: 0.9, opacity: 0 }, "-=0.3")
|
||||
```
|
||||
|
||||
### Stagger 延迟
|
||||
```javascript
|
||||
gsap.from(".card", {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: {
|
||||
each: 0.1, // 每个元素延迟0.1s
|
||||
from: "start", // 从第一个开始
|
||||
ease: "power2.out"
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 组件样式示例
|
||||
|
||||
### 按钮
|
||||
```jsx
|
||||
// 主按钮
|
||||
<button className="px-6 py-3 bg-primary-500 text-white rounded-lg
|
||||
font-medium shadow-md hover:bg-primary-600 hover:shadow-lg
|
||||
transition-all duration-300 transform hover:-translate-y-0.5">
|
||||
了解更多
|
||||
</button>
|
||||
|
||||
// 次要按钮
|
||||
<button className="px-6 py-3 border-2 border-primary-500 text-primary-500
|
||||
rounded-lg font-medium hover:bg-primary-50 transition-colors duration-300">
|
||||
联系我们
|
||||
</button>
|
||||
```
|
||||
|
||||
### 卡片
|
||||
```jsx
|
||||
<div className="bg-white rounded-2xl shadow-soft p-8
|
||||
hover:shadow-xl transition-shadow duration-500
|
||||
border border-gray-100">
|
||||
{/* 卡片内容 */}
|
||||
</div>
|
||||
```
|
||||
|
||||
### 标题
|
||||
```jsx
|
||||
<h1 className="text-5xl font-bold text-gray-900 leading-tight">
|
||||
青莳轻食
|
||||
</h1>
|
||||
<h2 className="text-3xl font-semibold text-gray-800">
|
||||
中高端个性化轻食店铺经营方案
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 leading-relaxed">
|
||||
食材可溯源、营养可量化、制作可看见
|
||||
</p>
|
||||
```
|
||||
|
||||
## 响应式断点
|
||||
```css
|
||||
sm: 640px /* 小型设备 (手机横屏) */
|
||||
md: 768px /* 中型设备 (平板) */
|
||||
lg: 1024px /* 大型设备 (小笔记本) ⭐ */
|
||||
xl: 1280px /* 超大设备 (桌面) ⭐ */
|
||||
2xl: 1536px /* 超超大设备 (大桌面) */
|
||||
```
|
||||
|
||||
## 布局容器
|
||||
```jsx
|
||||
// 标准容器
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||
{/* 内容 */}
|
||||
</div>
|
||||
|
||||
// 全宽容器
|
||||
<div className="w-full">
|
||||
{/* 内容 */}
|
||||
</div>
|
||||
|
||||
// 内容区块
|
||||
<section className="py-24 px-4">
|
||||
{/* 区块内容 */}
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**版本**: 1.0
|
||||
**创建时间**: 2025-10-01
|
||||
**适用项目**: 青莳轻食订单班展示网站
|
||||
@@ -0,0 +1,409 @@
|
||||
# 青莳轻食网站信息架构
|
||||
|
||||
## 整体结构
|
||||
|
||||
```
|
||||
青莳轻食订单班展示网站
|
||||
│
|
||||
├── Hero Section (首屏)
|
||||
│ ├── 品牌标题：青莳轻食
|
||||
│ ├── 副标题：中高端个性化轻食店铺经营方案
|
||||
│ ├── 核心数据：1200亿市场规模
|
||||
│ ├── 三大差异化特点
|
||||
│ └── 滚动提示动画
|
||||
│
|
||||
├── Timeline Navigation (固定时间轴导航)
|
||||
│ ├── 进度指示器
|
||||
│ ├── 快速跳转按钮
|
||||
│ └── 当前阶段高亮
|
||||
│
|
||||
├── Content Sections (7个内容区块)
|
||||
│ │
|
||||
│ ├── 1️⃣ 市场调研阶段
|
||||
│ │ ├── 市场规模数据可视化
|
||||
│ │ ├── 客户群体分析（饼图）
|
||||
│ │ ├── 竞争环境分析
|
||||
│ │ └── Agent展示：餐饮市场调研专家
|
||||
│ │
|
||||
│ ├── 2️⃣ 品牌定位阶段
|
||||
│ │ ├── 品牌LOGO展示
|
||||
│ │ ├── 三大差异化优势
|
||||
│ │ │ ├── 食材可溯源（扫码系统）
|
||||
│ │ │ ├── 营养可量化（营养标签）
|
||||
│ │ │ └── 制作可看见（明厨亮灶）
|
||||
│ │ ├── 首店信息（国贸店110㎡）
|
||||
│ │ └── Agent展示：餐饮品牌设计专家
|
||||
│ │
|
||||
│ ├── 3️⃣ 产品研发阶段
|
||||
│ │ ├── 32款菜品矩阵展示
|
||||
│ │ │ ├── 经典沙拉类（10款）
|
||||
│ │ │ ├── 能量碗类（12款）
|
||||
│ │ │ ├── 定制套餐（6款）
|
||||
│ │ │ └── 季节限定（4款）
|
||||
│ │ ├── 核心产品图文展示
|
||||
│ │ │ ├── 青莳虾仁牛油果沙拉 (48元)
|
||||
│ │ │ ├── 青莳香煎牛肉能量碗 (62元)
|
||||
│ │ │ ├── 青莳减脂专属套餐 (65元)
|
||||
│ │ │ └── 青莳夏季芒果鸡胸冷意面 (52元)
|
||||
│ │ ├── 价格体系表格
|
||||
│ │ └── Agent展示：菜品研发专家
|
||||
│ │
|
||||
│ ├── 4️⃣ 选址装修阶段
|
||||
│ │ ├── 选址标准分析
|
||||
│ │ ├── 首店案例：北京国贸B座
|
||||
│ │ │ ├── 店面外观图
|
||||
│ │ │ ├── 店内装修图
|
||||
│ │ │ ├── 功能分区（堂食65㎡+厨房30㎡+收银15㎡）
|
||||
│ │ │ └── 3D平面图
|
||||
│ │ ├── 品牌色彩应用
|
||||
│ │ └── Agent展示：餐厅选址装修专家
|
||||
│ │
|
||||
│ ├── 5️⃣ 团队组建阶段
|
||||
│ │ ├── 8人团队配置
|
||||
│ │ │ ├── 店长（1人，8000-10000元）
|
||||
│ │ │ ├── 厨师（2人，6000-8000元）
|
||||
│ │ │ ├── 服务员（3人，4500-5500元）
|
||||
│ │ │ ├── 营养师（1人，7000-9000元）
|
||||
│ │ │ └── 收银员（1人，4500-5500元）
|
||||
│ │ ├── 团队成员照片展示
|
||||
│ │ ├── 培训体系介绍
|
||||
│ │ └── Agent展示：餐饮团队人员管理专家
|
||||
│ │
|
||||
│ ├── 6️⃣ 财务规划阶段
|
||||
│ │ ├── 初始投资预算（50万元）
|
||||
│ │ │ ├── 店铺租赁（15万）
|
||||
│ │ │ ├── 装修费用（15万）
|
||||
│ │ │ ├── 设备采购（10万）
|
||||
│ │ │ └── 其他费用（10万）
|
||||
│ │ ├── 收入预测可视化
|
||||
│ │ │ ├── 月度收入曲线图
|
||||
│ │ │ ├── 1-3月：13.5万/月
|
||||
│ │ │ ├── 4-6月：20.52万/月
|
||||
│ │ │ └── 7-12月：31.35万/月
|
||||
│ │ ├── 成本结构饼图
|
||||
│ │ ├── 利润预测
|
||||
│ │ │ ├── 第一年净利润：58.032万元
|
||||
│ │ │ ├── 净利率：20%
|
||||
│ │ │ └── 投资回报期：14个月
|
||||
│ │ └── Agent展示：财务预算专家
|
||||
│ │
|
||||
│ └── 7️⃣ 营销推广阶段
|
||||
│ ├── 会员制度
|
||||
│ │ ├── 充值优惠政策
|
||||
│ │ ├── 消费福利体系
|
||||
│ │ └── 会员增长目标
|
||||
│ ├── 线上营销策略
|
||||
│ │ ├── 社交媒体运营
|
||||
│ │ ├── 外卖平台运营
|
||||
│ │ └── KOL合作计划
|
||||
│ ├── 线下推广活动
|
||||
│ │ ├── 写字楼推广
|
||||
│ │ ├── 健身房合作
|
||||
│ │ └── 体验活动
|
||||
│ └── Agent展示：轻食店经营管理专家
|
||||
│
|
||||
└── Summary Section (总结区块)
|
||||
├── 完整方案总结
|
||||
├── 关键成功因素
|
||||
├── 风险管理措施
|
||||
├── 联系方式
|
||||
└── CTA按钮
|
||||
```
|
||||
|
||||
## 导航结构
|
||||
|
||||
### 主导航
|
||||
```
|
||||
├── 首页 (Hero)
|
||||
├── 市场调研
|
||||
├── 品牌定位
|
||||
├── 产品研发
|
||||
├── 选址装修
|
||||
├── 团队组建
|
||||
├── 财务规划
|
||||
└── 营销推广
|
||||
```
|
||||
|
||||
### 时间轴导航
|
||||
- 固定在左侧或右侧
|
||||
- 垂直布局
|
||||
- 跟随滚动更新进度
|
||||
- 点击可快速跳转
|
||||
|
||||
## 页面流程
|
||||
|
||||
### 用户浏览路径
|
||||
```
|
||||
进入首屏
|
||||
↓ 滚动或点击
|
||||
市场调研（了解市场机遇）
|
||||
↓ 滚动
|
||||
品牌定位（理解差异化优势）
|
||||
↓ 滚动
|
||||
产品研发（查看32款菜品）
|
||||
↓ 滚动
|
||||
选址装修（查看首店案例）
|
||||
↓ 滚动
|
||||
团队组建（了解人员配置）
|
||||
↓ 滚动
|
||||
财务规划（查看投资回报）
|
||||
↓ 滚动
|
||||
营销推广（了解推广策略）
|
||||
↓ 滚动
|
||||
总结区块（完整方案总结）
|
||||
```
|
||||
|
||||
## 交互设计
|
||||
|
||||
### 滚动动画
|
||||
```javascript
|
||||
// 区块入场动画
|
||||
gsap.from(".section", {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: ".section",
|
||||
start: "top 80%",
|
||||
end: "bottom 20%",
|
||||
toggleActions: "play none none reverse"
|
||||
}
|
||||
})
|
||||
|
||||
// 标题动画
|
||||
gsap.from(".section-title", {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2
|
||||
})
|
||||
|
||||
// 卡片stagger动画
|
||||
gsap.from(".card", {
|
||||
y: 80,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.15,
|
||||
ease: "power3.out"
|
||||
})
|
||||
```
|
||||
|
||||
### 时间轴导航交互
|
||||
```javascript
|
||||
// 滚动监听
|
||||
window.addEventListener('scroll', () => {
|
||||
const sections = document.querySelectorAll('.timeline-section')
|
||||
sections.forEach((section, index) => {
|
||||
const rect = section.getBoundingClientRect()
|
||||
if (rect.top <= 100 && rect.bottom >= 100) {
|
||||
updateActiveSection(index)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 平滑滚动
|
||||
function scrollToSection(sectionId) {
|
||||
gsap.to(window, {
|
||||
duration: 1.2,
|
||||
scrollTo: {
|
||||
y: `#${sectionId}`,
|
||||
offsetY: 80
|
||||
},
|
||||
ease: "power3.inOut"
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 图片查看器
|
||||
```javascript
|
||||
// 点击图片放大
|
||||
const [selectedImage, setSelectedImage] = useState(null)
|
||||
|
||||
// 全屏模态框
|
||||
<Modal open={!!selectedImage}>
|
||||
<img src={selectedImage?.full} />
|
||||
<Controls zoom scale rotate />
|
||||
</Modal>
|
||||
```
|
||||
|
||||
### 数据可视化
|
||||
```javascript
|
||||
// 使用GSAP动画化图表
|
||||
gsap.to(".chart-bar", {
|
||||
height: data.value + "%",
|
||||
duration: 1,
|
||||
ease: "power2.out",
|
||||
stagger: 0.1
|
||||
})
|
||||
|
||||
// 数字计数动画
|
||||
gsap.to(".counter", {
|
||||
textContent: targetValue,
|
||||
duration: 2,
|
||||
ease: "power1.inOut",
|
||||
snap: { textContent: 1 }
|
||||
})
|
||||
```
|
||||
|
||||
## 响应式布局
|
||||
|
||||
### 桌面端 (≥1024px)
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Hero Section (全屏) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Timeline Nav │ Content Section │
|
||||
│ (固定左侧) │ (主内容区) │
|
||||
│ │ │
|
||||
│ ▸ 调研 │ [市场数据图表] │
|
||||
│ ▸ 定位 │ [文字说明] │
|
||||
│ ● 产品 │ [图片展示] │
|
||||
│ ▸ 选址 │ [Agent卡片] │
|
||||
│ ▸ 团队 │ │
|
||||
│ ▸ 财务 │ │
|
||||
│ ▸ 营销 │ │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 平板端 (768px - 1023px)
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Hero Section (全屏) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Timeline Nav (顶部横向) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Content Section (单列) │
|
||||
│ [内容区块] │
|
||||
│ [图片展示] │
|
||||
│ [Agent卡片] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 移动端 (<768px)
|
||||
```
|
||||
┌─────────────┐
|
||||
│ Hero │
|
||||
│ (简化版) │
|
||||
├─────────────┤
|
||||
│ Nav Button │
|
||||
│ (汉堡菜单) │
|
||||
├─────────────┤
|
||||
│ Content │
|
||||
│ (单列) │
|
||||
│ [文字] │
|
||||
│ [图片] │
|
||||
│ [卡片] │
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
## 组件层级
|
||||
|
||||
```
|
||||
App
|
||||
├── HeroSection
|
||||
│ ├── HeroTitle
|
||||
│ ├── HeroSubtitle
|
||||
│ ├── HeroStats
|
||||
│ └── ScrollIndicator
|
||||
├── TimelineNav
|
||||
│ ├── NavItem (×7)
|
||||
│ └── ProgressBar
|
||||
├── ContentSections
|
||||
│ ├── MarketResearchSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── DataVisualization
|
||||
│ │ ├── TextContent
|
||||
│ │ └── AgentCard
|
||||
│ ├── BrandPositioningSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── BrandLogo
|
||||
│ │ ├── DifferentiationPoints
|
||||
│ │ └── AgentCard
|
||||
│ ├── ProductDevelopmentSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── ProductGrid
|
||||
│ │ │ └── ProductCard (×32)
|
||||
│ │ ├── PriceTable
|
||||
│ │ └── AgentCard
|
||||
│ ├── LocationDesignSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── LocationInfo
|
||||
│ │ ├── FloorPlan
|
||||
│ │ └── AgentCard
|
||||
│ ├── TeamBuildingSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── TeamGrid
|
||||
│ │ │ └── MemberCard (×8)
|
||||
│ │ └── AgentCard
|
||||
│ ├── FinancialPlanningSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── BudgetChart
|
||||
│ │ ├── RevenueChart
|
||||
│ │ ├── ProfitSummary
|
||||
│ │ └── AgentCard
|
||||
│ └── MarketingSection
|
||||
│ ├── SectionHeader
|
||||
│ ├── MembershipProgram
|
||||
│ ├── OnlineMarketing
|
||||
│ ├── OfflinePromotion
|
||||
│ └── AgentCard
|
||||
└── SummarySection
|
||||
├── KeyTakeaways
|
||||
├── RiskManagement
|
||||
└── CTAButtons
|
||||
```
|
||||
|
||||
## 数据流
|
||||
|
||||
```
|
||||
content_checklist.json (数据源)
|
||||
↓
|
||||
TypeScript 接口定义
|
||||
↓
|
||||
Zustand 状态管理
|
||||
↓
|
||||
React 组件树
|
||||
↓
|
||||
用户界面
|
||||
```
|
||||
|
||||
## 性能优化
|
||||
|
||||
### 图片懒加载
|
||||
```javascript
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component'
|
||||
|
||||
<LazyLoadImage
|
||||
src={image.full}
|
||||
placeholder={<Skeleton />}
|
||||
effect="blur"
|
||||
/>
|
||||
```
|
||||
|
||||
### 代码分割
|
||||
```javascript
|
||||
import { lazy, Suspense } from 'react'
|
||||
|
||||
const ProductSection = lazy(() => import('./sections/ProductSection'))
|
||||
|
||||
<Suspense fallback={<Loading />}>
|
||||
<ProductSection />
|
||||
</Suspense>
|
||||
```
|
||||
|
||||
### GSAP性能
|
||||
```javascript
|
||||
// 使用will-change提示浏览器
|
||||
gsap.set(".animate-element", { willChange: "transform" })
|
||||
|
||||
// 动画完成后清除
|
||||
onComplete: () => {
|
||||
gsap.set(".animate-element", { clearProps: "willChange" })
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**版本**: 1.0
|
||||
**创建时间**: 2025-10-01
|
||||
**下一步**: 开始组件开发
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-gray-900;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* 自定义组件样式 */
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* 自定义工具类 */
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#e8f5e9',
|
||||
100: '#c8e6c9',
|
||||
200: '#a5d6a7',
|
||||
300: '#81c784',
|
||||
400: '#66bb6a',
|
||||
500: '#4caf50', // 主色 - 浅青色/绿色
|
||||
600: '#43a047',
|
||||
700: '#388e3c',
|
||||
800: '#2e7d32',
|
||||
900: '#1b5e20',
|
||||
},
|
||||
secondary: {
|
||||
50: '#fafafa',
|
||||
100: '#f5f5f5', // 米白色
|
||||
200: '#eeeeee',
|
||||
300: '#e0e0e0',
|
||||
400: '#bdbdbd',
|
||||
500: '#9e9e9e',
|
||||
},
|
||||
accent: {
|
||||
50: '#f3e5d4',
|
||||
100: '#e6d0bc',
|
||||
200: '#d9baa4',
|
||||
300: '#cca58c',
|
||||
400: '#bf9074',
|
||||
500: '#8b7355', // 原木色
|
||||
600: '#6d5a43',
|
||||
700: '#4f4132',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
serif: ['ui-serif', 'Georgia', 'Cambria', 'serif'],
|
||||
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
||||
},
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
'144': '36rem',
|
||||
},
|
||||
borderRadius: {
|
||||
'4xl': '2rem',
|
||||
},
|
||||
boxShadow: {
|
||||
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
|
||||
'hard': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user