1407 lines
64 KiB
HTML
1407 lines
64 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>青莳轻食 - 中高端个性化轻食品牌</title>
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--primary: #4CAF50;
|
|||
|
|
--primary-light: #81C784;
|
|||
|
|
--primary-dark: #388E3C;
|
|||
|
|
--accent: #FF9800;
|
|||
|
|
--accent-light: #FFB74D;
|
|||
|
|
--background: #FAFAFA;
|
|||
|
|
--surface: #FFFFFF;
|
|||
|
|
--text-primary: #1A1A1A;
|
|||
|
|
--text-secondary: #666666;
|
|||
|
|
--border: #E0E0E0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: 'Inter', 'Noto Sans SC', sans-serif !important;
|
|||
|
|
background: var(--background) !important;
|
|||
|
|
color: var(--text-primary) !important;
|
|||
|
|
line-height: 1.6 !important;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Hero Section */
|
|||
|
|
.hero {
|
|||
|
|
height: 100vh;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
width: 200%;
|
|||
|
|
height: 200%;
|
|||
|
|
background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="60" height="60" fill="url(%23grid)"/></svg>');
|
|||
|
|
animation: drift 30s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes drift {
|
|||
|
|
0% { transform: translate(0, 0); }
|
|||
|
|
100% { transform: translate(-50%, -50%); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-content {
|
|||
|
|
text-align: center;
|
|||
|
|
color: white;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-title {
|
|||
|
|
font-size: 5rem;
|
|||
|
|
font-weight: 900;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
text-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-subtitle {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 300;
|
|||
|
|
margin-bottom: 3rem;
|
|||
|
|
opacity: 0.95;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-indicator {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 3rem;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
animation: bounce 2s infinite;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes bounce {
|
|||
|
|
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
|
|||
|
|
40% { transform: translateX(-50%) translateY(-20px); }
|
|||
|
|
60% { transform: translateX(-50%) translateY(-10px); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Timeline Navigation */
|
|||
|
|
.timeline-nav {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 50%;
|
|||
|
|
right: 2rem;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
z-index: 100;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-dot {
|
|||
|
|
width: 14px;
|
|||
|
|
height: 14px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(255,255,255,0.3);
|
|||
|
|
border: 2px solid rgba(255,255,255,0.5);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-dot:hover {
|
|||
|
|
background: rgba(255,255,255,0.6);
|
|||
|
|
transform: scale(1.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-dot.active {
|
|||
|
|
background: var(--primary);
|
|||
|
|
border-color: var(--primary);
|
|||
|
|
transform: scale(1.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-label {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 30px;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
background: rgba(0,0,0,0.8);
|
|||
|
|
color: white;
|
|||
|
|
padding: 0.5rem 1rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
transition: opacity 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-dot:hover .timeline-label {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Section Styles */
|
|||
|
|
section {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 6rem 2rem;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 4rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-badge {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
|||
|
|
color: white;
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
border-radius: 50px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 3rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-subtitle {
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Agent Icon Styles */
|
|||
|
|
.agent-icon {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-icon::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-market { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
|||
|
|
.icon-brand { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
|
|||
|
|
.icon-location { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
|
|||
|
|
.icon-menu { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
|
|||
|
|
.icon-operation { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
|
|||
|
|
.icon-team { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
|
|||
|
|
.icon-finance { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
|
|||
|
|
|
|||
|
|
/* Card Styles */
|
|||
|
|
.card {
|
|||
|
|
background: var(--surface);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 2rem;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card:hover {
|
|||
|
|
transform: translateY(-8px);
|
|||
|
|
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-card {
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
aspect-ratio: 4/3;
|
|||
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-card img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
transition: transform 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-card:hover img {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-caption {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
|||
|
|
color: white;
|
|||
|
|
padding: 2rem 1.5rem 1rem;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Stats */
|
|||
|
|
.stat-item {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-number {
|
|||
|
|
font-size: 3.5rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: var(--primary);
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Grid Layouts */
|
|||
|
|
.grid-2 {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-3 {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
max-width: 1400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-4 {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
max-width: 1400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Responsive */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.hero-title { font-size: 3rem; }
|
|||
|
|
.section-title { font-size: 2rem; }
|
|||
|
|
.timeline-nav { display: none; }
|
|||
|
|
section { padding: 4rem 1rem; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Background patterns for sections */
|
|||
|
|
.bg-pattern-1 { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
|
|||
|
|
.bg-pattern-2 { background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); }
|
|||
|
|
.bg-pattern-3 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
|
|||
|
|
.bg-pattern-4 { background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); }
|
|||
|
|
.bg-pattern-5 { background: linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%); }
|
|||
|
|
.bg-pattern-6 { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
|
|||
|
|
.bg-pattern-7 { background: linear-gradient(135deg, #ffeaa7 0%, #dfe6e9 100%); }
|
|||
|
|
|
|||
|
|
/* Feature List */
|
|||
|
|
.feature-list {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
padding: 1rem;
|
|||
|
|
background: rgba(76, 175, 80, 0.05);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border-left: 3px solid var(--primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-icon {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
color: var(--primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Menu Items */
|
|||
|
|
.menu-item {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-item:hover {
|
|||
|
|
transform: translateY(-5px);
|
|||
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-image {
|
|||
|
|
width: 100%;
|
|||
|
|
aspect-ratio: 1;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-content {
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-name {
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-price {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: var(--accent);
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-desc {
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Team Cards */
|
|||
|
|
.team-card {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.team-image {
|
|||
|
|
width: 100%;
|
|||
|
|
aspect-ratio: 3/4;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.team-role {
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.team-desc {
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- Hero Section -->
|
|||
|
|
<section class="hero">
|
|||
|
|
<div class="hero-content">
|
|||
|
|
<h1 class="hero-title">青莳轻食</h1>
|
|||
|
|
<p class="hero-subtitle">食材透明化 · 营养科学化 · 服务便捷化</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="scroll-indicator" onclick="document.getElementById('section1').scrollIntoView({behavior: 'smooth'})">
|
|||
|
|
<i data-lucide="chevron-down" style="width: 40px; height: 40px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Timeline Navigation -->
|
|||
|
|
<div class="timeline-nav">
|
|||
|
|
<div class="timeline-dot active" data-section="0">
|
|||
|
|
<span class="timeline-label">市场调研</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-dot" data-section="1">
|
|||
|
|
<span class="timeline-label">品牌设计</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-dot" data-section="2">
|
|||
|
|
<span class="timeline-label">选址装修</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-dot" data-section="3">
|
|||
|
|
<span class="timeline-label">菜品研发</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-dot" data-section="4">
|
|||
|
|
<span class="timeline-label">经营管理</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-dot" data-section="5">
|
|||
|
|
<span class="timeline-label">团队建设</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-dot" data-section="6">
|
|||
|
|
<span class="timeline-label">财务规划</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Section 1: 市场调研 -->
|
|||
|
|
<section id="section1" class="bg-pattern-1">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="agent-badge">
|
|||
|
|
<div class="agent-icon icon-market" style="width: 40px; height: 40px; margin: 0;">
|
|||
|
|
<i data-lucide="line-chart" style="width: 24px; height: 24px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span>餐饮市场调研专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">市场洞察与定位</h2>
|
|||
|
|
<p class="section-subtitle">深度分析轻食市场机会，精准锁定目标客群</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- Stats -->
|
|||
|
|
<div class="grid-4" style="margin-bottom: 4rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="1200">0</span>
|
|||
|
|
<span class="stat-label">市场规模(亿元)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="18">0</span>
|
|||
|
|
<span class="stat-label">年增长率(%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="80">0</span>
|
|||
|
|
<span class="stat-label">溢价接受度(%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number">45-68</span>
|
|||
|
|
<span class="stat-label">客单价区间(元)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Market Insights -->
|
|||
|
|
<div class="grid-2" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--primary);">目标客群画像</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="users" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>上班族 (60%)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">需求便捷午餐/晚餐，工作日高频消费</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="dumbbell" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>健身人群 (25%)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">需求高蛋白低卡餐，关注营养配比</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="heart" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>健康女性 (15%)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">需求低卡减脂餐，重视食材品质</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--primary);">市场机会分析</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="trending-up" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>高端品牌性价比低</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">Wagas客单价80-120元，存在价格空间</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="alert-circle" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>本地小店品质欠佳</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">客单价30-45元，食材与营养搭配粗糙</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="target" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>中高端市场空白</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">"高品质+高性价比"个性化轻食缺口大</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Market Images -->
|
|||
|
|
<div class="grid-3">
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/市场宣传营销.jpg" alt="市场宣传营销">
|
|||
|
|
<div class="image-caption">线上线下整合营销策略</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/健身宣传代言.jpg" alt="健身人群定位">
|
|||
|
|
<div class="image-caption">精准触达健身核心用户</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/用餐拍摄场景.jpg" alt="用餐体验">
|
|||
|
|
<div class="image-caption">高品质用餐体验场景</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 2: 品牌设计 -->
|
|||
|
|
<section id="section2" class="bg-pattern-2">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="agent-badge">
|
|||
|
|
<div class="agent-icon icon-brand" style="width: 40px; height: 40px; margin: 0;">
|
|||
|
|
<i data-lucide="palette" style="width: 24px; height: 24px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span>餐饮品牌设计专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">品牌视觉与体验</h2>
|
|||
|
|
<p class="section-subtitle">打造"透明化、可溯源、可量化"的品牌差异点</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<div class="grid-2" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #f5576c;">核心品牌定位</h3>
|
|||
|
|
<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 2rem; border-radius: 12px; margin-bottom: 1.5rem;">
|
|||
|
|
<p style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem;">中高端透明化轻食品牌</p>
|
|||
|
|
<p style="font-size: 1rem; opacity: 0.95;">食材可溯源 · 营养可量化 · 制作可看见</p>
|
|||
|
|
</div>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="scan" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>食材溯源系统</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">扫码查看食材产地、检测报告</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="calculator" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>营养数据透明</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">每款菜品标注热量、蛋白质、纤维</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="eye" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>明厨亮灶</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">透明玻璃隔断，制作过程全程可见</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div class="image-card" style="margin-bottom: 1.5rem;">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/品牌LOGO.jpg" alt="青莳品牌LOGO">
|
|||
|
|
<div class="image-caption">品牌视觉识别系统</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<h4 style="font-weight: 600; margin-bottom: 1rem;">品牌色彩系统</h4>
|
|||
|
|
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
|||
|
|
<div style="flex: 1; min-width: 80px; text-align: center;">
|
|||
|
|
<div style="width: 100%; aspect-ratio: 1; background: #4CAF50; border-radius: 8px; margin-bottom: 0.5rem;"></div>
|
|||
|
|
<span style="font-size: 0.85rem; color: var(--text-secondary);">浅青色</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex: 1; min-width: 80px; text-align: center;">
|
|||
|
|
<div style="width: 100%; aspect-ratio: 1; background: #F5F5DC; border-radius: 8px; margin-bottom: 0.5rem;"></div>
|
|||
|
|
<span style="font-size: 0.85rem; color: var(--text-secondary);">米白色</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex: 1; min-width: 80px; text-align: center;">
|
|||
|
|
<div style="width: 100%; aspect-ratio: 1; background: #D2B48C; border-radius: 8px; margin-bottom: 0.5rem;"></div>
|
|||
|
|
<span style="font-size: 0.85rem; color: var(--text-secondary);">原木色</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-3">
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/健康食材扫码溯源.jpg" alt="食材溯源">
|
|||
|
|
<div class="image-caption">扫码溯源，透明化食材管理</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/餐盒包装.jpg" alt="品牌包装">
|
|||
|
|
<div class="image-caption">可降解环保包装设计</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/厨房加工场景.jpg" alt="明厨亮灶">
|
|||
|
|
<div class="image-caption">透明厨房，制作过程可见</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 3: 选址装修 -->
|
|||
|
|
<section id="section3" class="bg-pattern-3">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="agent-badge">
|
|||
|
|
<div class="agent-icon icon-location" style="width: 40px; height: 40px; margin: 0;">
|
|||
|
|
<i data-lucide="map-pin" style="width: 24px; height: 24px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span>餐厅选址装修专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">黄金地段与空间设计</h2>
|
|||
|
|
<p class="section-subtitle">北京国贸核心商圈，110㎡精致空间</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<div class="grid-2" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #00f2fe;">首店选址优势</h3>
|
|||
|
|
<div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;">
|
|||
|
|
<p style="font-size: 1.1rem; font-weight: 600;">📍 北京市朝阳区国贸中心 B 座 1 层</p>
|
|||
|
|
<p style="font-size: 0.95rem; opacity: 0.95; margin-top: 0.5rem;">紧邻写字楼出入口，步行至地铁1号线国贸站仅3分钟</p>
|
|||
|
|
</div>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="users-2" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>超高人流量</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">工作日日均8000人，午餐高峰2000人</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="shield-check" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>竞争环境优</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">300米内仅1家本地小店，无连锁品牌</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="coffee" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>配套完善</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">隔壁咖啡店可合作套餐，共享充电宝</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #00f2fe;">空间功能分区</h3>
|
|||
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|||
|
|
<thead>
|
|||
|
|
<tr style="background: rgba(79, 172, 254, 0.1);">
|
|||
|
|
<th style="padding: 1rem; text-align: left; border-bottom: 2px solid #4facfe;">区域</th>
|
|||
|
|
<th style="padding: 1rem; text-align: center; border-bottom: 2px solid #4facfe;">面积</th>
|
|||
|
|
<th style="padding: 1rem; text-align: left; border-bottom: 2px solid #4facfe;">核心配置</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); font-weight: 600;">堂食区</td>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); text-align: center;">65㎡</td>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); color: var(--text-secondary);">16张桌子 + 2台电视</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); font-weight: 600;">厨房区</td>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); text-align: center;">30㎡</td>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); color: var(--text-secondary);">明厨亮灶 + 专业设备</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td style="padding: 1rem; font-weight: 600;">收银咨询区</td>
|
|||
|
|
<td style="padding: 1rem; text-align: center;">15㎡</td>
|
|||
|
|
<td style="padding: 1rem; color: var(--text-secondary);">会员系统 + 营养咨询</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<div style="margin-top: 1.5rem; padding: 1rem; background: rgba(79, 172, 254, 0.1); border-radius: 8px; border-left: 3px solid #4facfe;">
|
|||
|
|
<strong>租金成本：</strong> 5.2万元/月（押三付一，租期3年）
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-3">
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/店面图片_正门.jpg" alt="店面正门">
|
|||
|
|
<div class="image-caption">国贸B座底商黄金位置</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/店面装修.jpg" alt="店内装修">
|
|||
|
|
<div class="image-caption">清新简约的装修风格</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/店内场景_用餐区.jpg" alt="用餐区">
|
|||
|
|
<div class="image-caption">舒适的用餐环境设计</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 4: 菜品研发 -->
|
|||
|
|
<section id="section4" class="bg-pattern-4">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="agent-badge">
|
|||
|
|
<div class="agent-icon icon-menu" style="width: 40px; height: 40px; margin: 0;">
|
|||
|
|
<i data-lucide="chef-hat" style="width: 24px; height: 24px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span>菜品研发专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">精品菜单与营养配比</h2>
|
|||
|
|
<p class="section-subtitle">32款精品菜式，8款青莳专属，支持个性化定制</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- 菜品系列 -->
|
|||
|
|
<div class="grid-4" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="menu-item">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/青莳虾仁牛油果沙拉.jpg" alt="青莳虾仁牛油果沙拉" class="menu-image">
|
|||
|
|
<div class="menu-content">
|
|||
|
|
<div class="menu-name">青莳虾仁牛油果沙拉</div>
|
|||
|
|
<div class="menu-price">¥48</div>
|
|||
|
|
<div class="menu-desc">5只大虾仁(≥12g) + 半颗牛油果<br>适合工作日便捷午餐</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-item">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/青莳香煎牛肉能量碗.jpg" alt="青莳香煎牛肉能量碗" class="menu-image">
|
|||
|
|
<div class="menu-content">
|
|||
|
|
<div class="menu-name">青莳香煎牛肉能量碗</div>
|
|||
|
|
<div class="menu-price">¥62</div>
|
|||
|
|
<div class="menu-desc">120g澳洲瘦牛肉 + 藜麦基底 + 温泉蛋<br>健身后能量补充首选</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-item">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/青莳减脂专属套餐（可换酱汁）.jpg" alt="青莳减脂专属套餐" class="menu-image">
|
|||
|
|
<div class="menu-content">
|
|||
|
|
<div class="menu-name">青莳减脂专属套餐</div>
|
|||
|
|
<div class="menu-price">¥65</div>
|
|||
|
|
<div class="menu-desc">低卡(280大卡) + 高纤维(18g)<br>专为减脂人群定制</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-item">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/青莳夏季芒果鸡胸冷意面.jpg" alt="青莳夏季芒果鸡胸冷意面" class="menu-image">
|
|||
|
|
<div class="menu-content">
|
|||
|
|
<div class="menu-name">青莳夏季芒果鸡胸冷意面</div>
|
|||
|
|
<div class="menu-price">¥52</div>
|
|||
|
|
<div class="menu-desc">海南台农芒果 + 低温慢煮鸡胸肉<br>夏季限定(6-8月)</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 菜品特色 -->
|
|||
|
|
<div class="grid-2" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #43e97b;">食材标准</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="leaf" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>80% 本地有机食材</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">来自小汤山有机农场、多利农庄</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="globe" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>20% 优质进口食材</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">澳洲瘦牛肉、智利三文鱼、墨西哥牛油果</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="clock" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>每日凌晨4点配送</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">验收合格率100%，建立食材溯源系统</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #43e97b;">品质控制</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="check-circle" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>食材验收标准</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">蔬菜无虫洞、肉类无异味，不合格直接退回</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="shield" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>制作规范严格</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">戴手套+口罩，酱汁定量挤瓶(≤15ml)</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="package" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>配送温控监测</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">青莳封条+温度监测卡，变色可退款</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 制作过程 -->
|
|||
|
|
<div class="grid-3">
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/烹饪场景.jpg" alt="烹饪场景">
|
|||
|
|
<div class="image-caption">专业团队精心烹制</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/菜品备制.jpg" alt="菜品备制">
|
|||
|
|
<div class="image-caption">食材精准称重配比</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/员工着装以及切配规范.jpg" alt="操作规范">
|
|||
|
|
<div class="image-caption">严格遵守操作规范</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 5: 经营管理 -->
|
|||
|
|
<section id="section5" class="bg-pattern-5">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="agent-badge">
|
|||
|
|
<div class="agent-icon icon-operation" style="width: 40px; height: 40px; margin: 0;">
|
|||
|
|
<i data-lucide="settings" style="width: 24px; height: 24px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span>轻食店经营管理专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">精细化运营管理</h2>
|
|||
|
|
<p class="section-subtitle">线上线下融合，会员体系完善，营销策略精准</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<div class="grid-3" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="agent-icon icon-operation" style="margin: 0 auto;">
|
|||
|
|
<i data-lucide="megaphone" style="width: 32px; height: 32px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; text-align: center;">线上营销</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="smartphone" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>社交媒体运营</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">微信公众号/抖音/小红书多平台</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="truck" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>外卖平台优化</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">30分钟送达承诺，超时免单</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="agent-icon icon-operation" style="margin: 0 auto;">
|
|||
|
|
<i data-lucide="store" style="width: 32px; height: 32px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; text-align: center;">线下推广</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="building" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>写字楼推广</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">每周一三发放传单500份+优惠券</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="dumbbell" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>健身房合作</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">与3-5家健身房达成会员互惠</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="agent-icon icon-operation" style="margin: 0 auto;">
|
|||
|
|
<i data-lucide="gift" style="width: 32px; height: 32px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; text-align: center;">会员体系</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="credit-card" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>充值优惠</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">充200送30，充500送100，充1000送250</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="star" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>专属权益</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">9折消费+生日免费餐+营养食谱</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 运营数据 -->
|
|||
|
|
<div class="grid-4">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="30">0</span>
|
|||
|
|
<span class="stat-label">分钟送达承诺</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="2000">0</span>
|
|||
|
|
<span class="stat-label">年度会员目标</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="60">0</span>
|
|||
|
|
<span class="stat-label">会员复购率(%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number">4.8+</span>
|
|||
|
|
<span class="stat-label">外卖平台评分</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 6: 团队建设 -->
|
|||
|
|
<section id="section6" class="bg-pattern-6">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="agent-badge">
|
|||
|
|
<div class="agent-icon icon-team" style="width: 40px; height: 40px; margin: 0;">
|
|||
|
|
<i data-lucide="users" style="width: 24px; height: 24px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span>餐饮团队人员管理专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">专业团队配置</h2>
|
|||
|
|
<p class="section-subtitle">8人精英团队，完善培训体系，科学激励机制</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- 团队成员 -->
|
|||
|
|
<div class="grid-4" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card team-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/店长.jpg" alt="店长" class="team-image">
|
|||
|
|
<div class="team-role">店长 (1人)</div>
|
|||
|
|
<div class="team-desc">整体运营管理、供应商对接<br>薪资: 8000-10000元/月</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card team-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/厨师.jpg" alt="厨师" class="team-image">
|
|||
|
|
<div class="team-role">厨师 (2人)</div>
|
|||
|
|
<div class="team-desc">菜品制作、食材处理<br>薪资: 6000-8000元/月/人</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card team-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/服务员.jpg" alt="服务员" class="team-image">
|
|||
|
|
<div class="team-role">服务员 (3人)</div>
|
|||
|
|
<div class="team-desc">堂食服务、外卖打包<br>薪资: 4500-5500元/月/人</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card team-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/收银员.jpg" alt="收银员" class="team-image">
|
|||
|
|
<div class="team-role">收银员 (1人)</div>
|
|||
|
|
<div class="team-desc">收银结算、会员管理<br>薪资: 4500-5500元/月</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 培训与激励 -->
|
|||
|
|
<div class="grid-2">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #30cfd0;">培训体系</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="graduation-cap" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>入职培训 (7天)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">品牌理念、食品安全、菜品知识、服务流程</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="refresh-cw" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>定期培训 (每月2次)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">新增菜品制作、客户投诉处理、应急处理</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="award" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>专项培训 (每季度1次)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">营养师培训营养搭配知识，提升专业度</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #30cfd0;">激励机制</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="trending-up" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>月度考核奖金</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">考核达标发放500-1000元奖金</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="trophy" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>季度服务之星</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">带薪休假1天+200元购物卡</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="plane" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong>年度优秀员工</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">参与供应商食材考察活动</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 7: 财务规划 -->
|
|||
|
|
<section id="section7" class="bg-pattern-7">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="agent-badge">
|
|||
|
|
<div class="agent-icon icon-finance" style="width: 40px; height: 40px; margin: 0;">
|
|||
|
|
<i data-lucide="pie-chart" style="width: 24px; height: 24px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span>财务预算专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">财务模型与回报预测</h2>
|
|||
|
|
<p class="section-subtitle">总投资50万元，首年净利润58万元，净利率20%</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- 投资预算 -->
|
|||
|
|
<div class="card" style="margin-bottom: 3rem;">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #a8edea;">初始投资预算 (50万元)</h3>
|
|||
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
|
|||
|
|
<div style="text-align: center; padding: 1.5rem; background: rgba(168, 237, 234, 0.1); border-radius: 12px;">
|
|||
|
|
<div style="font-size: 2rem; font-weight: 800; color: #a8edea; margin-bottom: 0.5rem;">15万</div>
|
|||
|
|
<div style="color: var(--text-secondary);">店铺租赁</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center; padding: 1.5rem; background: rgba(168, 237, 234, 0.1); border-radius: 12px;">
|
|||
|
|
<div style="font-size: 2rem; font-weight: 800; color: #a8edea; margin-bottom: 0.5rem;">15万</div>
|
|||
|
|
<div style="color: var(--text-secondary);">装修费用</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center; padding: 1.5rem; background: rgba(168, 237, 234, 0.1); border-radius: 12px;">
|
|||
|
|
<div style="font-size: 2rem; font-weight: 800; color: #a8edea; margin-bottom: 0.5rem;">10万</div>
|
|||
|
|
<div style="color: var(--text-secondary);">设备采购</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center; padding: 1.5rem; background: rgba(168, 237, 234, 0.1); border-radius: 12px;">
|
|||
|
|
<div style="font-size: 2rem; font-weight: 800; color: #a8edea; margin-bottom: 0.5rem;">10万</div>
|
|||
|
|
<div style="color: var(--text-secondary);">其他费用</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 收入与利润预测 -->
|
|||
|
|
<div class="grid-2" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #a8edea;">首年收入预测</h3>
|
|||
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|||
|
|
<thead>
|
|||
|
|
<tr style="background: rgba(168, 237, 234, 0.1);">
|
|||
|
|
<th style="padding: 1rem; text-align: left; border-bottom: 2px solid #a8edea;">周期</th>
|
|||
|
|
<th style="padding: 1rem; text-align: center; border-bottom: 2px solid #a8edea;">日均订单</th>
|
|||
|
|
<th style="padding: 1rem; text-align: right; border-bottom: 2px solid #a8edea;">季度收入</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border);">1-3月(初期)</td>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); text-align: center;">90单</td>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); text-align: right; font-weight: 600;">40.5万</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border);">4-6月(增长期)</td>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); text-align: center;">135单</td>
|
|||
|
|
<td style="padding: 1rem; border-bottom: 1px solid var(--border); text-align: right; font-weight: 600;">61.6万</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td style="padding: 1rem;">7-12月(稳定期)</td>
|
|||
|
|
<td style="padding: 1rem; text-align: center;">190单</td>
|
|||
|
|
<td style="padding: 1rem; text-align: right; font-weight: 600;">188.1万</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
<tfoot>
|
|||
|
|
<tr style="background: rgba(168, 237, 234, 0.2);">
|
|||
|
|
<td colspan="2" style="padding: 1rem; font-weight: 700;">首年总收入</td>
|
|||
|
|
<td style="padding: 1rem; text-align: right; font-size: 1.25rem; font-weight: 800; color: #a8edea;">290.2万</td>
|
|||
|
|
</tr>
|
|||
|
|
</tfoot>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #a8edea;">成本构成分析</h3>
|
|||
|
|
<div style="margin-bottom: 1.5rem;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
|
|||
|
|
<span>食材成本 (35%)</span>
|
|||
|
|
<strong>101.6万</strong>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
|
|||
|
|
<div style="height: 100%; width: 35%; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-bottom: 1.5rem;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
|
|||
|
|
<span>人工成本 (20%)</span>
|
|||
|
|
<strong>58.0万</strong>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
|
|||
|
|
<div style="height: 100%; width: 20%; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-bottom: 1.5rem;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
|
|||
|
|
<span>租金成本 (12%)</span>
|
|||
|
|
<strong>34.8万</strong>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
|
|||
|
|
<div style="height: 100%; width: 12%; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-bottom: 1.5rem;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
|
|||
|
|
<span>其他费用 (13%)</span>
|
|||
|
|
<strong>37.7万</strong>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
|
|||
|
|
<div style="height: 100%; width: 13%; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="padding: 1.5rem; background: rgba(168, 237, 234, 0.1); border-radius: 8px; margin-top: 1.5rem;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|||
|
|
<span style="font-weight: 700; font-size: 1.1rem;">首年净利润</span>
|
|||
|
|
<span style="font-size: 1.5rem; font-weight: 800; color: #a8edea;">58.0万</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 0.5rem; color: var(--text-secondary);">毛利率 65% · 净利率 20%</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 关键财务指标 -->
|
|||
|
|
<div class="grid-4">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="58">0</span>
|
|||
|
|
<span class="stat-label">首年净利润(万元)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="20">0</span>
|
|||
|
|
<span class="stat-label">净利率(%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="65">0</span>
|
|||
|
|
<span class="stat-label">毛利率(%)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-number" data-count="10">0</span>
|
|||
|
|
<span class="stat-label">投资回收期(月)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Initialize Lucide icons
|
|||
|
|
lucide.createIcons();
|
|||
|
|
|
|||
|
|
// Register GSAP plugins
|
|||
|
|
gsap.registerPlugin(ScrollTrigger);
|
|||
|
|
|
|||
|
|
// Hero animations
|
|||
|
|
gsap.from('.hero-title', {
|
|||
|
|
y: 60,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 1.2,
|
|||
|
|
ease: 'elastic.out(1, 0.5)',
|
|||
|
|
delay: 0.3
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
gsap.from('.hero-subtitle', {
|
|||
|
|
y: 30,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
delay: 0.6
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
gsap.from('.scroll-indicator', {
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 1,
|
|||
|
|
delay: 1
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Section animations
|
|||
|
|
document.querySelectorAll('section:not(.hero)').forEach((section, index) => {
|
|||
|
|
// Agent badge animation
|
|||
|
|
gsap.from(section.querySelector('.agent-badge'), {
|
|||
|
|
scale: 0,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.6,
|
|||
|
|
ease: 'back.out(1.7)',
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top 70%'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Section title animation
|
|||
|
|
gsap.from(section.querySelector('.section-title'), {
|
|||
|
|
y: 40,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top 70%'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Section subtitle animation
|
|||
|
|
gsap.from(section.querySelector('.section-subtitle'), {
|
|||
|
|
y: 30,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
delay: 0.2,
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top 70%'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Cards animation
|
|||
|
|
const cards = section.querySelectorAll('.card, .image-card, .menu-item');
|
|||
|
|
if (cards.length > 0) {
|
|||
|
|
gsap.from(cards, {
|
|||
|
|
y: 60,
|
|||
|
|
opacity: 0,
|
|||
|
|
stagger: 0.15,
|
|||
|
|
duration: 0.8,
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top 70%'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Number counter animation
|
|||
|
|
function animateCounter(element) {
|
|||
|
|
const target = parseInt(element.getAttribute('data-count'));
|
|||
|
|
const duration = 2000;
|
|||
|
|
const increment = target / (duration / 16);
|
|||
|
|
let current = 0;
|
|||
|
|
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
current += increment;
|
|||
|
|
if (current >= target) {
|
|||
|
|
element.textContent = target;
|
|||
|
|
clearInterval(timer);
|
|||
|
|
} else {
|
|||
|
|
element.textContent = Math.floor(current);
|
|||
|
|
}
|
|||
|
|
}, 16);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Trigger counter animation on scroll
|
|||
|
|
document.querySelectorAll('.stat-number[data-count]').forEach(counter => {
|
|||
|
|
ScrollTrigger.create({
|
|||
|
|
trigger: counter,
|
|||
|
|
start: 'top 80%',
|
|||
|
|
once: true,
|
|||
|
|
onEnter: () => animateCounter(counter)
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Timeline navigation
|
|||
|
|
const sections = document.querySelectorAll('section:not(.hero)');
|
|||
|
|
const dots = document.querySelectorAll('.timeline-dot');
|
|||
|
|
|
|||
|
|
ScrollTrigger.create({
|
|||
|
|
trigger: '.hero',
|
|||
|
|
start: 'bottom bottom',
|
|||
|
|
end: 'bottom top',
|
|||
|
|
onLeave: () => updateActiveDot(0),
|
|||
|
|
onEnterBack: () => dots.forEach(dot => dot.classList.remove('active'))
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
sections.forEach((section, index) => {
|
|||
|
|
ScrollTrigger.create({
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top center',
|
|||
|
|
end: 'bottom center',
|
|||
|
|
onEnter: () => updateActiveDot(index),
|
|||
|
|
onEnterBack: () => updateActiveDot(index)
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function updateActiveDot(index) {
|
|||
|
|
dots.forEach(dot => dot.classList.remove('active'));
|
|||
|
|
if (dots[index]) {
|
|||
|
|
dots[index].classList.add('active');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Click navigation
|
|||
|
|
dots.forEach((dot, index) => {
|
|||
|
|
dot.addEventListener('click', () => {
|
|||
|
|
sections[index].scrollIntoView({ behavior: 'smooth' });
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|