1810 lines
85 KiB
HTML
1810 lines
85 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>青莳轻食 - AI多智能体协同创业方案</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;900&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: 1rem;
|
|||
|
|
text-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
|||
|
|
letter-spacing: -2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-tagline {
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
font-weight: 400;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
letter-spacing: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-subtitle {
|
|||
|
|
font-size: 1.75rem;
|
|||
|
|
font-weight: 300;
|
|||
|
|
margin-bottom: 3rem;
|
|||
|
|
opacity: 0.95;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: rgba(255,255,255,0.2);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
padding: 0.75rem 2rem;
|
|||
|
|
border-radius: 50px;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-item {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-dot {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(255,255,255,0.3);
|
|||
|
|
border: 3px solid rgba(255,255,255,0.5);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-item:hover .timeline-dot {
|
|||
|
|
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);
|
|||
|
|
box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-label {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 35px;
|
|||
|
|
background: rgba(0,0,0,0.9);
|
|||
|
|
color: white;
|
|||
|
|
padding: 0.75rem 1.25rem;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
transform: translateX(10px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-item:hover .timeline-label {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateX(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-label::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
right: -8px;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
border: 8px solid transparent;
|
|||
|
|
border-left-color: rgba(0,0,0,0.9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Section Styles */
|
|||
|
|
section {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 6rem 2rem;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-badge {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 1rem;
|
|||
|
|
padding: 1rem 2rem;
|
|||
|
|
border-radius: 60px;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-badge::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: -100%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|||
|
|
transition: left 0.5s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-badge:hover::before {
|
|||
|
|
left: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 3.5rem;
|
|||
|
|
font-weight: 900;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
letter-spacing: -1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-subtitle {
|
|||
|
|
font-size: 1.35rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
max-width: 900px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Agent Icon Styles */
|
|||
|
|
.agent-icon {
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 14px;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-icon::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.3) 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%); }
|
|||
|
|
|
|||
|
|
/* Agent Name Badge */
|
|||
|
|
.agent-name {
|
|||
|
|
font-weight: 700;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Card Styles */
|
|||
|
|
.card {
|
|||
|
|
background: var(--surface);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 2.5rem;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
|
|||
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
border: 1px solid var(--border);
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 4px;
|
|||
|
|
background: linear-gradient(90deg, var(--primary), var(--accent));
|
|||
|
|
transform: scaleX(0);
|
|||
|
|
transition: transform 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card:hover {
|
|||
|
|
transform: translateY(-12px);
|
|||
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card:hover::before {
|
|||
|
|
transform: scaleX(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-card {
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
aspect-ratio: 4/3;
|
|||
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-card:hover {
|
|||
|
|
transform: translateY(-8px);
|
|||
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-card img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
transition: transform 0.6s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-card:hover img {
|
|||
|
|
transform: scale(1.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-caption {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
|||
|
|
color: white;
|
|||
|
|
padding: 2.5rem 1.5rem 1.5rem;
|
|||
|
|
font-size: 1.05rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
transition: transform 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-card:hover .image-caption {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Stats */
|
|||
|
|
.stat-item {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-number {
|
|||
|
|
font-size: 4rem;
|
|||
|
|
font-weight: 900;
|
|||
|
|
color: var(--primary);
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
letter-spacing: -2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 1.05rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Grid Layouts */
|
|||
|
|
.grid-2 {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|||
|
|
gap: 2.5rem;
|
|||
|
|
max-width: 1400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-3 {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 2.5rem;
|
|||
|
|
max-width: 1400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-4 {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
max-width: 1400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Responsive */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.hero-title { font-size: 3rem; }
|
|||
|
|
.section-title { font-size: 2.5rem; }
|
|||
|
|
.timeline-nav { display: none; }
|
|||
|
|
section { padding: 4rem 1.5rem; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Background patterns for sections */
|
|||
|
|
.bg-pattern-1 { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
|
|||
|
|
.bg-pattern-2 { background: linear-gradient(135deg, #ffeef8 0%, #e6f3ff 100%); }
|
|||
|
|
.bg-pattern-3 { background: linear-gradient(135deg, #fff5e6 0%, #ffe6e6 100%); }
|
|||
|
|
.bg-pattern-4 { background: linear-gradient(135deg, #e8f5e9 0%, #e0f7fa 100%); }
|
|||
|
|
.bg-pattern-5 { background: linear-gradient(135deg, #fff3e0 0%, #fce4ec 100%); }
|
|||
|
|
.bg-pattern-6 { background: linear-gradient(135deg, #e3f2fd 0%, #e1f5fe 100%); }
|
|||
|
|
.bg-pattern-7 { background: linear-gradient(135deg, #fffde7 0%, #f3e5f5 100%); }
|
|||
|
|
|
|||
|
|
/* Feature List */
|
|||
|
|
.feature-list {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 1.25rem;
|
|||
|
|
margin-bottom: 1.75rem;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
background: rgba(76, 175, 80, 0.04);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
border-left: 4px solid var(--primary);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-item:hover {
|
|||
|
|
background: rgba(76, 175, 80, 0.08);
|
|||
|
|
transform: translateX(8px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-icon {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 28px;
|
|||
|
|
height: 28px;
|
|||
|
|
color: var(--primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Menu Items */
|
|||
|
|
.menu-item {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|||
|
|
transition: all 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-item:hover {
|
|||
|
|
transform: translateY(-8px) scale(1.02);
|
|||
|
|
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-image {
|
|||
|
|
width: 100%;
|
|||
|
|
aspect-ratio: 1;
|
|||
|
|
object-fit: cover;
|
|||
|
|
transition: transform 0.6s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-item:hover .menu-image {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-content {
|
|||
|
|
padding: 1.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-name {
|
|||
|
|
font-size: 1.35rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-price {
|
|||
|
|
font-size: 1.75rem;
|
|||
|
|
font-weight: 900;
|
|||
|
|
color: var(--accent);
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-desc {
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Team Cards */
|
|||
|
|
.team-card {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.team-image {
|
|||
|
|
width: 100%;
|
|||
|
|
aspect-ratio: 3/4;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
margin-bottom: 1.25rem;
|
|||
|
|
transition: transform 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.team-card:hover .team-image {
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.team-role {
|
|||
|
|
font-size: 1.35rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.team-desc {
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Info Box */
|
|||
|
|
.info-box {
|
|||
|
|
padding: 2rem;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 6px;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(180deg, var(--primary), var(--accent));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Process Flow */
|
|||
|
|
.process-step {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.process-step:hover {
|
|||
|
|
transform: translateX(10px);
|
|||
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-number {
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 800;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- Hero Section -->
|
|||
|
|
<section class="hero">
|
|||
|
|
<div class="hero-content">
|
|||
|
|
<div class="hero-tagline">AI 多智能体协同</div>
|
|||
|
|
<h1 class="hero-title">青莳轻食</h1>
|
|||
|
|
<p class="hero-subtitle">食材透明化 · 营养科学化 · 服务便捷化</p>
|
|||
|
|
<div class="hero-badge">🤖 由 7 位 AI 专家联合打造</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="scroll-indicator" onclick="document.getElementById('section1').scrollIntoView({behavior: 'smooth'})">
|
|||
|
|
<i data-lucide="chevron-down" style="width: 48px; height: 48px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Timeline Navigation -->
|
|||
|
|
<div class="timeline-nav">
|
|||
|
|
<div class="timeline-item" data-section="0">
|
|||
|
|
<span class="timeline-label">📊 市场调研专家</span>
|
|||
|
|
<div class="timeline-dot active"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="1">
|
|||
|
|
<span class="timeline-label">🎨 品牌设计专家</span>
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="2">
|
|||
|
|
<span class="timeline-label">📍 选址装修专家</span>
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="3">
|
|||
|
|
<span class="timeline-label">👨🍳 菜品研发专家</span>
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="4">
|
|||
|
|
<span class="timeline-label">⚙️ 经营管理专家</span>
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="5">
|
|||
|
|
<span class="timeline-label">👥 团队管理专家</span>
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="6">
|
|||
|
|
<span class="timeline-label">💰 财务规划专家</span>
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Section 1: 市场调研 -->
|
|||
|
|
<section id="section1" class="bg-pattern-1">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="agent-badge icon-market" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-market">
|
|||
|
|
<i data-lucide="line-chart" style="width: 28px; height: 28px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 01 · 餐饮市场调研专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">市场洞察与机会识别</h2>
|
|||
|
|
<p class="section-subtitle">通过大数据分析锁定中高端轻食市场空白,精准定位目标客群</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- Stats Dashboard -->
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<!-- 专家分析报告 -->
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)); margin-bottom: 3rem;">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #667eea;">
|
|||
|
|
<i data-lucide="file-text" style="width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
专家分析报告
|
|||
|
|
</h3>
|
|||
|
|
<p style="color: var(--text-secondary); line-height: 1.8;">
|
|||
|
|
经过深度市场调研,我们发现中国轻食市场规模已突破<strong style="color: #667eea;">1200亿元</strong>,年增长率达<strong style="color: #667eea;">18%</strong>。
|
|||
|
|
目标客群(25-40岁城市人群)超<strong style="color: #667eea;">80%</strong>愿为有机食材支付溢价。
|
|||
|
|
市场存在明显空白:<strong style="color: #667eea;">高端品牌性价比低(Wagas客单价80-120元)</strong>,
|
|||
|
|
<strong style="color: #667eea;">本地小店品质欠佳(客单价30-45元)</strong>。
|
|||
|
|
"中高端+高性价比"个性化轻食存在巨大机会。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Market Insights -->
|
|||
|
|
<div class="grid-2" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #667eea;">
|
|||
|
|
<i data-lucide="target" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
目标客群画像
|
|||
|
|
</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="briefcase" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">上班族 (60%)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">写字楼白领,需求便捷午餐/晚餐,工作日高频消费,月薪8000+</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="dumbbell" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">健身人群 (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 style="font-size: 1.1rem;">健康女性 (15%)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">注重身材管理,需求低卡减脂餐,重视食材新鲜度和溯源</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #667eea;">
|
|||
|
|
<i data-lucide="trending-up" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
竞争空白分析
|
|||
|
|
</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="alert-triangle" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">高端品牌性价比低</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">Wagas等品牌客单价80-120元,存在价格下沉空间</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="x-circle" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">本地小店品质欠佳</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">客单价30-45元,但食材与营养搭配粗糙,缺乏品牌标识</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="sparkles" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">中高端市场空白</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 icon-brand" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-brand">
|
|||
|
|
<i data-lucide="palette" style="width: 28px; height: 28px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 02 · 餐饮品牌设计专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">品牌视觉识别系统</h2>
|
|||
|
|
<p class="section-subtitle">打造"透明化、可溯源、可量化"的差异化品牌体验</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- 品牌核心价值 -->
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(240, 147, 251, 0.15), rgba(245, 87, 108, 0.15)); margin-bottom: 4rem;">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 900; margin-bottom: 1.5rem; color: #f5576c; text-align: center;">
|
|||
|
|
中高端透明化轻食品牌
|
|||
|
|
</h3>
|
|||
|
|
<div style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem;">
|
|||
|
|
<div style="text-align: center;">
|
|||
|
|
<i data-lucide="scan" style="width: 48px; height: 48px; color: #f5576c; margin-bottom: 0.5rem;"></i>
|
|||
|
|
<div style="font-weight: 700; color: var(--text-primary);">食材可溯源</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center;">
|
|||
|
|
<i data-lucide="calculator" style="width: 48px; height: 48px; color: #f5576c; margin-bottom: 0.5rem;"></i>
|
|||
|
|
<div style="font-weight: 700; color: var(--text-primary);">营养可量化</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center;">
|
|||
|
|
<i data-lucide="eye" style="width: 48px; height: 48px; color: #f5576c; margin-bottom: 0.5rem;"></i>
|
|||
|
|
<div style="font-weight: 700; color: var(--text-primary);">制作可看见</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-2" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #f5576c;">
|
|||
|
|
<i data-lucide="award" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
品牌差异化战略
|
|||
|
|
</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="qr-code" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">食材溯源系统</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">每款菜品配二维码,扫码查看食材产地、供应商、检测报告</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="activity" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">营养数据透明</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">标注每款菜品的热量、蛋白质、碳水、脂肪、纤维含量</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="chef-hat" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">明厨亮灶设计</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">透明玻璃隔断,顾客可全程观看制作过程,提升信任感</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div class="image-card" style="margin-bottom: 2rem;">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/品牌LOGO.jpg" alt="青莳品牌LOGO">
|
|||
|
|
<div class="image-caption">🎨 品牌视觉识别系统</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<h4 style="font-weight: 700; margin-bottom: 1.5rem; font-size: 1.1rem;">品牌色彩系统</h4>
|
|||
|
|
<div style="display: flex; gap: 1.5rem; flex-wrap: wrap;">
|
|||
|
|
<div style="flex: 1; min-width: 100px; text-align: center;">
|
|||
|
|
<div style="width: 100%; aspect-ratio: 1; background: #4CAF50; border-radius: 12px; margin-bottom: 0.75rem; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);"></div>
|
|||
|
|
<strong style="font-size: 0.9rem;">浅青色</strong><br>
|
|||
|
|
<span style="font-size: 0.8rem; color: var(--text-secondary);">主色调</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex: 1; min-width: 100px; text-align: center;">
|
|||
|
|
<div style="width: 100%; aspect-ratio: 1; background: #F5F5DC; border-radius: 12px; margin-bottom: 0.75rem; box-shadow: 0 4px 15px rgba(245, 245, 220, 0.5);"></div>
|
|||
|
|
<strong style="font-size: 0.9rem;">米白色</strong><br>
|
|||
|
|
<span style="font-size: 0.8rem; color: var(--text-secondary);">辅助色</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="flex: 1; min-width: 100px; text-align: center;">
|
|||
|
|
<div style="width: 100%; aspect-ratio: 1; background: #D2B48C; border-radius: 12px; margin-bottom: 0.75rem; box-shadow: 0 4px 15px rgba(210, 180, 140, 0.4);"></div>
|
|||
|
|
<strong style="font-size: 0.9rem;">原木色</strong><br>
|
|||
|
|
<span style="font-size: 0.8rem; color: var(--text-secondary);">点缀色</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Brand Implementation -->
|
|||
|
|
<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 icon-location" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-location">
|
|||
|
|
<i data-lucide="map-pin" style="width: 28px; height: 28px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 03 · 餐厅选址装修专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">黄金地段与空间设计</h2>
|
|||
|
|
<p class="section-subtitle">北京国贸核心商圈,110㎡精致空间,日均人流8000+</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- 选址优势分析 -->
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(79, 172, 254, 0.15), rgba(0, 242, 254, 0.15)); margin-bottom: 4rem;">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 900; margin-bottom: 1rem; color: #00f2fe; text-align: center;">
|
|||
|
|
📍 北京市朝阳区国贸中心 B 座 1 层 108 商铺
|
|||
|
|
</h3>
|
|||
|
|
<p style="text-align: center; color: var(--text-secondary); font-size: 1.1rem;">
|
|||
|
|
紧邻写字楼出入口 · 步行至地铁1号线国贸站仅3分钟 · 租金5.2万/月
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-2" style="margin-bottom: 4rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #00f2fe;">
|
|||
|
|
<i data-lucide="map" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
首店选址优势
|
|||
|
|
</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="users-2" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">超高人流量</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">工作日早8点-晚8点日均人流8000人,午餐高峰达2000人</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="shield-check" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">竞争环境优越</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">300米内仅1家本地小店(客单价38元),无连锁品牌</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="store" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">配套设施完善</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">隔壁咖啡店可合作套餐,5个共享充电宝点位</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #00f2fe;">
|
|||
|
|
<i data-lucide="layout" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
空间功能分区
|
|||
|
|
</h3>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">1</div>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">堂食区 (65㎡)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">16张桌子 + 2台电视播放食材溯源视频</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">2</div>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">厨房区 (30㎡)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">明厨亮灶 + 海尔双门冷藏柜 + 商用烤箱</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">3</div>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">收银咨询区 (15㎡)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">会员系统 + 营养师咨询台</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 1.5rem; padding: 1.25rem; background: rgba(79, 172, 254, 0.1); border-radius: 12px;">
|
|||
|
|
<strong style="color: #00f2fe;">💰 投资明细:</strong> 装修15万 + 设备10万 + 租金15万(押三付一)
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Location Images -->
|
|||
|
|
<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 icon-menu" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-menu">
|
|||
|
|
<i data-lucide="utensils" style="width: 28px; height: 28px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 04 · 菜品研发专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">科学营养配方体系</h2>
|
|||
|
|
<p class="section-subtitle">32款精品菜式,8款青莳专属,80%有机食材,支持个性化定制</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- 菜品研发理念 -->
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(67, 233, 123, 0.15), rgba(56, 249, 215, 0.15)); margin-bottom: 4rem;">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #43e97b;">
|
|||
|
|
<i data-lucide="sparkles" style="width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
菜品研发理念
|
|||
|
|
</h3>
|
|||
|
|
<p style="color: var(--text-secondary); line-height: 1.8; font-size: 1.05rem;">
|
|||
|
|
每款菜品均由专业营养师参与配方设计,确保<strong style="color: #43e97b;">营养均衡</strong>、
|
|||
|
|
<strong style="color: #43e97b;">热量可控</strong>、<strong style="color: #43e97b;">口感优异</strong>。
|
|||
|
|
食材80%来自本地有机农场(小汤山、多利农庄),20%优质进口(澳洲牛肉、智利三文鱼、墨西哥牛油果)。
|
|||
|
|
每日凌晨4点配送,验收合格率100%,建立食材溯源系统。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 菜品系列 -->
|
|||
|
|
<div class="grid-4" style="margin-bottom: 4rem;">
|
|||
|
|
<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>
|
|||
|
|
📊 热量350大卡 | 蛋白质28g<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>
|
|||
|
|
📊 热量520大卡 | 蛋白质35g<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">
|
|||
|
|
🥗 科学配比 + 5种酱汁可选<br>
|
|||
|
|
📊 热量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>
|
|||
|
|
📊 热量420大卡 | 蛋白质30g<br>
|
|||
|
|
☀️ 夏季限定(6-8月供应)
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 品质控制体系 -->
|
|||
|
|
<div class="grid-2" style="margin-bottom: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #43e97b;">
|
|||
|
|
<i data-lucide="leaf" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
食材标准
|
|||
|
|
</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="sprout" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">80% 本地有机食材</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">来自小汤山有机农场、多利农庄,每日凌晨4点配送</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="globe-2" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">20% 优质进口食材</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">澳洲瘦牛肉、智利三文鱼、墨西哥牛油果,品质认证</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="shield-check" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">100% 验收合格率</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">不合格食材直接退回,累计3次差评终止合作</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #43e97b;">
|
|||
|
|
<i data-lucide="clipboard-check" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
品控10条
|
|||
|
|
</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="check-circle-2" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">食材验收标准</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">蔬菜无虫洞、肉类无异味,不合格直接退回并记录</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="chef-hat" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">制作规范严格</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">戴手套+口罩,酱汁定量挤瓶(≤15ml),操作全程可追溯</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="thermometer" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">配送温控监测</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 icon-operation" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-operation">
|
|||
|
|
<i data-lucide="settings" style="width: 28px; height: 28px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 05 · 轻食店经营管理专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">全方位运营管理体系</h2>
|
|||
|
|
<p class="section-subtitle">线上线下融合,会员体系完善,30分钟送达承诺</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- 运营策略 -->
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(250, 112, 154, 0.15), rgba(254, 225, 64, 0.15)); margin-bottom: 4rem;">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #fa709a;">
|
|||
|
|
<i data-lucide="target" style="width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
运营目标
|
|||
|
|
</h3>
|
|||
|
|
<p style="color: var(--text-secondary); line-height: 1.8; font-size: 1.05rem;">
|
|||
|
|
首年目标:<strong style="color: #fa709a;">会员数2000人</strong>,
|
|||
|
|
<strong style="color: #fa709a;">日均订单量90→190单</strong>,
|
|||
|
|
<strong style="color: #fa709a;">外卖平台评分4.8+</strong>,
|
|||
|
|
<strong style="color: #fa709a;">会员复购率60%+</strong>。
|
|||
|
|
通过线上线下整合营销、精准会员运营、优质配送服务,打造国贸CBD区域Top3轻食品牌。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-3" style="margin-bottom: 4rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<div style="width: 80px; height: 80px; margin: 0 auto 1.5rem; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
|
|||
|
|
<i data-lucide="smartphone" style="width: 40px; height: 40px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1.5rem; text-align: center;">线上营销</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="message-circle" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1rem;">社交媒体运营</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary); font-size: 0.9rem;">微信/抖音/小红书,每周5-7条内容</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="truck" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1rem;">外卖平台优化</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary); font-size: 0.9rem;">30分钟送达,超时免单</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div style="width: 80px; height: 80px; margin: 0 auto 1.5rem; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
|
|||
|
|
<i data-lucide="store" style="width: 40px; height: 40px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1.5rem; text-align: center;">线下推广</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="building" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1rem;">写字楼地推</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary); font-size: 0.9rem;">每周一三发放500份传单+优惠券</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="dumbbell" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1rem;">健身房合作</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary); font-size: 0.9rem;">3-5家健身房会员互惠</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div style="width: 80px; height: 80px; margin: 0 auto 1.5rem; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
|
|||
|
|
<i data-lucide="gift" style="width: 40px; height: 40px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1.5rem; text-align: center;">会员体系</h3>
|
|||
|
|
<ul class="feature-list">
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="credit-card" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1rem;">充值优惠</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary); font-size: 0.9rem;">充200送30,充500送100,充1000送250</span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="feature-item">
|
|||
|
|
<i data-lucide="star" class="feature-icon"></i>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1rem;">专属权益</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary); font-size: 0.9rem;">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 icon-team" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-team">
|
|||
|
|
<i data-lucide="users" style="width: 28px; height: 28px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 06 · 餐饮团队人员管理专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">专业团队配置与培训</h2>
|
|||
|
|
<p class="section-subtitle">8人精英团队,7天入职培训,月度考核激励</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- 团队理念 -->
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(48, 207, 208, 0.15), rgba(51, 8, 103, 0.15)); margin-bottom: 4rem;">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #30cfd0;">
|
|||
|
|
<i data-lucide="heart-handshake" style="width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
团队管理理念
|
|||
|
|
</h3>
|
|||
|
|
<p style="color: var(--text-secondary); line-height: 1.8; font-size: 1.05rem;">
|
|||
|
|
打造<strong style="color: #30cfd0;">"专业+热情+成长"</strong>的团队文化。
|
|||
|
|
通过系统化培训(入职7天+定期+专项)、科学化考核(客户满意度90%+、出品合格率100%)、
|
|||
|
|
人性化激励(月度奖金+季度服务之星+年度考察),确保团队稳定性和服务品质。
|
|||
|
|
月均人工成本5.3万元,人效比行业领先。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 团队成员 -->
|
|||
|
|
<div class="grid-4" style="margin-bottom: 4rem;">
|
|||
|
|
<div class="card team-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/店长.jpg" alt="店长" class="team-image">
|
|||
|
|
<div class="team-role">👔 店长</div>
|
|||
|
|
<div class="team-desc">
|
|||
|
|
<strong>1人</strong><br>
|
|||
|
|
整体运营管理、供应商对接<br>
|
|||
|
|
<span style="color: var(--accent); font-weight: 700;">8000-10000元/月</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card team-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/厨师.jpg" alt="厨师" class="team-image">
|
|||
|
|
<div class="team-role">👨🍳 厨师</div>
|
|||
|
|
<div class="team-desc">
|
|||
|
|
<strong>2人</strong><br>
|
|||
|
|
菜品制作、食材处理<br>
|
|||
|
|
<span style="color: var(--accent); font-weight: 700;">6000-8000元/月/人</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card team-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/服务员.jpg" alt="服务员" class="team-image">
|
|||
|
|
<div class="team-role">🙋♀️ 服务员</div>
|
|||
|
|
<div class="team-desc">
|
|||
|
|
<strong>3人</strong><br>
|
|||
|
|
堂食服务、外卖打包<br>
|
|||
|
|
<span style="color: var(--accent); font-weight: 700;">4500-5500元/月/人</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card team-card">
|
|||
|
|
<img src="../data/订单班文档资料/食品/notion文稿/image/收银员.jpg" alt="收银员" class="team-image">
|
|||
|
|
<div class="team-role">💳 收银员</div>
|
|||
|
|
<div class="team-desc">
|
|||
|
|
<strong>1人</strong><br>
|
|||
|
|
收银结算、会员管理<br>
|
|||
|
|
<span style="color: var(--accent); font-weight: 700;">4500-5500元/月</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 培训与激励 -->
|
|||
|
|
<div class="grid-2">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #30cfd0;">
|
|||
|
|
<i data-lucide="graduation-cap" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
三级培训体系
|
|||
|
|
</h3>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">📚</div>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">入职培训 (7天)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">品牌理念、食品安全、菜品知识、服务流程</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">🔄</div>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">定期培训 (每月2次)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">新菜品制作、投诉处理、应急预案</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">⭐</div>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">专项培训 (每季度1次)</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">营养师培训营养搭配知识</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #30cfd0;">
|
|||
|
|
<i data-lucide="trophy" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
三档激励机制
|
|||
|
|
</h3>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">💰</div>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">月度考核奖金</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">考核达标发放500-1000元奖金</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">🏆</div>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">季度服务之星</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">带薪休假1天+200元购物卡</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="process-step">
|
|||
|
|
<div class="step-number">✈️</div>
|
|||
|
|
<div>
|
|||
|
|
<strong style="font-size: 1.1rem;">年度优秀员工</strong><br>
|
|||
|
|
<span style="color: var(--text-secondary);">参与供应商食材考察活动</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 7: 财务规划 -->
|
|||
|
|
<section id="section7" class="bg-pattern-7">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="agent-badge icon-finance" style="color: #333;">
|
|||
|
|
<div class="agent-icon icon-finance">
|
|||
|
|
<i data-lucide="pie-chart" style="width: 28px; height: 28px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 07 · 财务预算专家</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="section-title">财务模型与投资回报</h2>
|
|||
|
|
<p class="section-subtitle">总投资50万元,首年营收290万元,净利润58万元,净利率20%</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="max-width: 1400px; margin: 0 auto;">
|
|||
|
|
<!-- 财务概览 -->
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(168, 237, 234, 0.2), rgba(254, 214, 227, 0.2)); margin-bottom: 4rem; border: 2px solid rgba(168, 237, 234, 0.5);">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 900; margin-bottom: 1.5rem; color: #a8edea; text-align: center;">
|
|||
|
|
💎 核心财务指标
|
|||
|
|
</h3>
|
|||
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center;">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size: 3rem; font-weight: 900; color: #a8edea;">50万</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-weight: 600;">初始投资</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size: 3rem; font-weight: 900; color: #a8edea;">290万</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-weight: 600;">首年营收</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size: 3rem; font-weight: 900; color: #a8edea;">58万</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-weight: 600;">首年净利润</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size: 3rem; font-weight: 900; color: #a8edea;">10月</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-weight: 600;">投资回收期</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 投资预算 -->
|
|||
|
|
<div class="card" style="margin-bottom: 4rem;">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2.5rem; color: #a8edea; text-align: center;">
|
|||
|
|
<i data-lucide="wallet" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
初始投资预算明细
|
|||
|
|
</h3>
|
|||
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem;">
|
|||
|
|
<div style="text-align: center; padding: 2rem; background: rgba(168, 237, 234, 0.08); border-radius: 16px; border: 2px solid rgba(168, 237, 234, 0.2);">
|
|||
|
|
<i data-lucide="key" style="width: 48px; height: 48px; color: #a8edea; margin-bottom: 1rem;"></i>
|
|||
|
|
<div style="font-size: 2.5rem; font-weight: 900; color: #a8edea; margin-bottom: 0.5rem;">15万</div>
|
|||
|
|
<div style="font-weight: 700; margin-bottom: 0.5rem;">店铺租赁</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: 0.9rem;">押三付一,月租5.2万</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center; padding: 2rem; background: rgba(168, 237, 234, 0.08); border-radius: 16px; border: 2px solid rgba(168, 237, 234, 0.2);">
|
|||
|
|
<i data-lucide="paintbrush" style="width: 48px; height: 48px; color: #a8edea; margin-bottom: 1rem;"></i>
|
|||
|
|
<div style="font-size: 2.5rem; font-weight: 900; color: #a8edea; margin-bottom: 0.5rem;">15万</div>
|
|||
|
|
<div style="font-weight: 700; margin-bottom: 0.5rem;">装修费用</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: 0.9rem;">1500元/㎡×100㎡</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center; padding: 2rem; background: rgba(168, 237, 234, 0.08); border-radius: 16px; border: 2px solid rgba(168, 237, 234, 0.2);">
|
|||
|
|
<i data-lucide="refrigerator" style="width: 48px; height: 48px; color: #a8edea; margin-bottom: 1rem;"></i>
|
|||
|
|
<div style="font-size: 2.5rem; font-weight: 900; color: #a8edea; margin-bottom: 0.5rem;">10万</div>
|
|||
|
|
<div style="font-weight: 700; margin-bottom: 0.5rem;">设备采购</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: 0.9rem;">冷藏柜+烤箱+收银系统</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center; padding: 2rem; background: rgba(168, 237, 234, 0.08); border-radius: 16px; border: 2px solid rgba(168, 237, 234, 0.2);">
|
|||
|
|
<i data-lucide="package" style="width: 48px; height: 48px; color: #a8edea; margin-bottom: 1rem;"></i>
|
|||
|
|
<div style="font-size: 2.5rem; font-weight: 900; color: #a8edea; margin-bottom: 0.5rem;">10万</div>
|
|||
|
|
<div style="font-weight: 700; margin-bottom: 0.5rem;">其他费用</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: 0.9rem;">食材+人员+推广+备用金</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 收入与成本分析 -->
|
|||
|
|
<div class="grid-2" style="margin-bottom: 4rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #a8edea;">
|
|||
|
|
<i data-lucide="trending-up" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
首年收入预测
|
|||
|
|
</h3>
|
|||
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|||
|
|
<thead>
|
|||
|
|
<tr style="background: rgba(168, 237, 234, 0.1);">
|
|||
|
|
<th style="padding: 1.25rem; text-align: left; border-bottom: 3px solid #a8edea; font-weight: 800;">周期</th>
|
|||
|
|
<th style="padding: 1.25rem; text-align: center; border-bottom: 3px solid #a8edea; font-weight: 800;">日均订单</th>
|
|||
|
|
<th style="padding: 1.25rem; text-align: right; border-bottom: 3px solid #a8edea; font-weight: 800;">季度收入</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td style="padding: 1.25rem; border-bottom: 1px solid var(--border); font-weight: 600;">1-3月(初期)</td>
|
|||
|
|
<td style="padding: 1.25rem; border-bottom: 1px solid var(--border); text-align: center; font-weight: 700; color: #a8edea;">90单</td>
|
|||
|
|
<td style="padding: 1.25rem; border-bottom: 1px solid var(--border); text-align: right; font-weight: 700;">40.5万</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td style="padding: 1.25rem; border-bottom: 1px solid var(--border); font-weight: 600;">4-6月(增长期)</td>
|
|||
|
|
<td style="padding: 1.25rem; border-bottom: 1px solid var(--border); text-align: center; font-weight: 700; color: #a8edea;">135单</td>
|
|||
|
|
<td style="padding: 1.25rem; border-bottom: 1px solid var(--border); text-align: right; font-weight: 700;">61.6万</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td style="padding: 1.25rem; font-weight: 600;">7-12月(稳定期)</td>
|
|||
|
|
<td style="padding: 1.25rem; text-align: center; font-weight: 700; color: #a8edea;">190单</td>
|
|||
|
|
<td style="padding: 1.25rem; text-align: right; font-weight: 700;">188.1万</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
<tfoot>
|
|||
|
|
<tr style="background: rgba(168, 237, 234, 0.15);">
|
|||
|
|
<td colspan="2" style="padding: 1.5rem; font-weight: 900; font-size: 1.1rem;">首年总收入</td>
|
|||
|
|
<td style="padding: 1.5rem; text-align: right; font-size: 1.75rem; font-weight: 900; color: #a8edea;">290.2万</td>
|
|||
|
|
</tr>
|
|||
|
|
</tfoot>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: 1.75rem; font-weight: 800; margin-bottom: 2rem; color: #a8edea;">
|
|||
|
|
<i data-lucide="percent" style="width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 0.5rem;"></i>
|
|||
|
|
成本构成分析
|
|||
|
|
</h3>
|
|||
|
|
<div style="margin-bottom: 2rem;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|||
|
|
<span style="font-weight: 700;">食材成本 (35%)</span>
|
|||
|
|
<strong style="font-size: 1.25rem; color: #a8edea;">101.6万</strong>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 12px; background: #f0f0f0; border-radius: 6px; overflow: hidden;">
|
|||
|
|
<div style="height: 100%; width: 35%; background: linear-gradient(90deg, #a8edea 0%, #fed6e3 100%); border-radius: 6px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-bottom: 2rem;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|||
|
|
<span style="font-weight: 700;">人工成本 (20%)</span>
|
|||
|
|
<strong style="font-size: 1.25rem; color: #a8edea;">58.0万</strong>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 12px; background: #f0f0f0; border-radius: 6px; overflow: hidden;">
|
|||
|
|
<div style="height: 100%; width: 20%; background: linear-gradient(90deg, #a8edea 0%, #fed6e3 100%); border-radius: 6px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-bottom: 2rem;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|||
|
|
<span style="font-weight: 700;">租金成本 (12%)</span>
|
|||
|
|
<strong style="font-size: 1.25rem; color: #a8edea;">34.8万</strong>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 12px; background: #f0f0f0; border-radius: 6px; overflow: hidden;">
|
|||
|
|
<div style="height: 100%; width: 12%; background: linear-gradient(90deg, #a8edea 0%, #fed6e3 100%); border-radius: 6px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-bottom: 2rem;">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|||
|
|
<span style="font-weight: 700;">其他费用 (13%)</span>
|
|||
|
|
<strong style="font-size: 1.25rem; color: #a8edea;">37.7万</strong>
|
|||
|
|
</div>
|
|||
|
|
<div style="height: 12px; background: #f0f0f0; border-radius: 6px; overflow: hidden;">
|
|||
|
|
<div style="height: 100%; width: 13%; background: linear-gradient(90deg, #a8edea 0%, #fed6e3 100%); border-radius: 6px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="padding: 2rem; background: linear-gradient(135deg, rgba(168, 237, 234, 0.2), rgba(254, 214, 227, 0.2)); border-radius: 16px; margin-top: 2rem; border: 2px solid rgba(168, 237, 234, 0.3);">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|||
|
|
<span style="font-weight: 900; font-size: 1.25rem;">首年净利润</span>
|
|||
|
|
<span style="font-size: 2.25rem; font-weight: 900; color: #a8edea;">58.0万</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; justify-content: space-around; margin-top: 1rem;">
|
|||
|
|
<div style="text-align: center;">
|
|||
|
|
<div style="font-size: 1.5rem; font-weight: 800; color: #a8edea;">65%</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: 0.9rem;">毛利率</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: center;">
|
|||
|
|
<div style="font-size: 1.5rem; font-weight: 800; color: #a8edea;">20%</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: 0.9rem;">净利率</div>
|
|||
|
|
</div>
|
|||
|
|
</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-tagline', {
|
|||
|
|
y: 30,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.6,
|
|||
|
|
delay: 0.2
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
gsap.from('.hero-title', {
|
|||
|
|
y: 60,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 1.2,
|
|||
|
|
ease: 'elastic.out(1, 0.5)',
|
|||
|
|
delay: 0.4
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
gsap.from('.hero-subtitle', {
|
|||
|
|
y: 30,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
delay: 0.7
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
gsap.from('.hero-badge', {
|
|||
|
|
scale: 0,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.6,
|
|||
|
|
ease: 'back.out(1.7)',
|
|||
|
|
delay: 1
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
gsap.from('.scroll-indicator', {
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 1,
|
|||
|
|
delay: 1.3
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 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.7,
|
|||
|
|
ease: 'back.out(1.7)',
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top 70%'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Section title animation
|
|||
|
|
gsap.from(section.querySelector('.section-title'), {
|
|||
|
|
y: 50,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.9,
|
|||
|
|
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%'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Info box animation
|
|||
|
|
const infoBox = section.querySelector('.info-box');
|
|||
|
|
if (infoBox) {
|
|||
|
|
gsap.from(infoBox, {
|
|||
|
|
y: 40,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: infoBox,
|
|||
|
|
start: 'top 80%'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Cards animation
|
|||
|
|
const cards = section.querySelectorAll('.card, .image-card, .menu-item');
|
|||
|
|
if (cards.length > 0) {
|
|||
|
|
gsap.from(cards, {
|
|||
|
|
y: 60,
|
|||
|
|
opacity: 0,
|
|||
|
|
stagger: 0.12,
|
|||
|
|
duration: 0.8,
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top 70%'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Process steps animation
|
|||
|
|
const steps = section.querySelectorAll('.process-step');
|
|||
|
|
if (steps.length > 0) {
|
|||
|
|
gsap.from(steps, {
|
|||
|
|
x: -40,
|
|||
|
|
opacity: 0,
|
|||
|
|
stagger: 0.15,
|
|||
|
|
duration: 0.7,
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: steps[0],
|
|||
|
|
start: 'top 80%'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 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 timelineItems = document.querySelectorAll('.timeline-item');
|
|||
|
|
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
|
|||
|
|
timelineItems.forEach((item, index) => {
|
|||
|
|
item.addEventListener('click', () => {
|
|||
|
|
sections[index].scrollIntoView({ behavior: 'smooth' });
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|