diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
new file mode 100644
index 0000000..f2c9e97
--- /dev/null
+++ b/.github/workflows/pages.yml
@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git "a/docs/marketing/00-\346\210\267\345\244\226.JPG" "b/docs/marketing/00-\346\210\267\345\244\226.JPG"
new file mode 100644
index 0000000..3c135b0
Binary files /dev/null and "b/docs/marketing/00-\346\210\267\345\244\226.JPG" differ
diff --git "a/docs/marketing/01-\346\210\267\345\244\226\345\256\211\345\205\250.JPG" "b/docs/marketing/01-\346\210\267\345\244\226\345\256\211\345\205\250.JPG"
new file mode 100644
index 0000000..4018fd3
Binary files /dev/null and "b/docs/marketing/01-\346\210\267\345\244\226\345\256\211\345\205\250.JPG" differ
diff --git "a/docs/marketing/02-\345\256\232\346\227\266\351\200\232\350\257\235.JPG" "b/docs/marketing/02-\345\256\232\346\227\266\351\200\232\350\257\235.JPG"
new file mode 100644
index 0000000..312ee5a
Binary files /dev/null and "b/docs/marketing/02-\345\256\232\346\227\266\351\200\232\350\257\235.JPG" differ
diff --git "a/docs/marketing/03-\350\267\214\345\200\222\346\243\200\346\265\213.JPG" "b/docs/marketing/03-\350\267\214\345\200\222\346\243\200\346\265\213.JPG"
new file mode 100644
index 0000000..0ddfe67
Binary files /dev/null and "b/docs/marketing/03-\350\267\214\345\200\222\346\243\200\346\265\213.JPG" differ
diff --git "a/docs/marketing/04-\346\231\272\350\203\275\347\234\274\351\225\234.JPG" "b/docs/marketing/04-\346\231\272\350\203\275\347\234\274\351\225\234.JPG"
new file mode 100644
index 0000000..04ccab7
Binary files /dev/null and "b/docs/marketing/04-\346\231\272\350\203\275\347\234\274\351\225\234.JPG" differ
diff --git "a/docs/marketing/05-\346\231\272\350\203\275\351\237\263\347\256\261.JPG" "b/docs/marketing/05-\346\231\272\350\203\275\351\237\263\347\256\261.JPG"
new file mode 100644
index 0000000..f02346d
Binary files /dev/null and "b/docs/marketing/05-\346\231\272\350\203\275\351\237\263\347\256\261.JPG" differ
diff --git "a/docs/marketing/06-\345\256\266\344\272\272\350\276\205\345\212\251\345\256\211\350\243\205.JPG" "b/docs/marketing/06-\345\256\266\344\272\272\350\276\205\345\212\251\345\256\211\350\243\205.JPG"
new file mode 100644
index 0000000..15b9820
Binary files /dev/null and "b/docs/marketing/06-\345\256\266\344\272\272\350\276\205\345\212\251\345\256\211\350\243\205.JPG" differ
diff --git "a/docs/marketing/07-\347\235\241\347\234\240\345\256\211\345\205\250\346\250\241\345\274\217.JPG" "b/docs/marketing/07-\347\235\241\347\234\240\345\256\211\345\205\250\346\250\241\345\274\217.JPG"
new file mode 100644
index 0000000..78ed5ff
Binary files /dev/null and "b/docs/marketing/07-\347\235\241\347\234\240\345\256\211\345\205\250\346\250\241\345\274\217.JPG" differ
diff --git "a/docs/marketing/08-\350\215\257\345\272\227\347\244\276\345\214\272\344\277\241\346\201\257\350\201\224\345\212\250.JPG" "b/docs/marketing/08-\350\215\257\345\272\227\347\244\276\345\214\272\344\277\241\346\201\257\350\201\224\345\212\250.JPG"
new file mode 100644
index 0000000..ae10014
Binary files /dev/null and "b/docs/marketing/08-\350\215\257\345\272\227\347\244\276\345\214\272\344\277\241\346\201\257\350\201\224\345\212\250.JPG" differ
diff --git a/docs/marketing/business.md b/docs/marketing/business.md
new file mode 100644
index 0000000..ce436d5
--- /dev/null
+++ b/docs/marketing/business.md
@@ -0,0 +1,5 @@
+我们诞生了一个朴素而坚定的初心——OPS-agent 。它不仅仅是一个项目，更是一份承诺，一种责任。我们希望通过技术的力量，为那些渐渐老去的父母、祖辈，为每一位需要被温柔守护的长者，搭建一座连接关怀与安全的桥梁。
+
+我们相信，科技不应只是年轻人的专属，更应是温暖人心的工具。OPS-agent 的使命，就是让**智能硬件真正"活"起来** ，让数据不再冰冷，让陪伴不再遥远。
+
+我们覆盖丰富的场景，全方面呵护陪伴老人，成为老人的小助手。
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8ef1cdd
--- /dev/null
+++ b/index.html
@@ -0,0 +1,915 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OPS Agent - 守护每一位长者的温暖智能助手</title>
+    <meta name="description" content="OPS Agent 是专为老年人打造的智能守护助手，让科技不再冰冷，让陪伴不再遥远。我们用爱与科技，温暖每一位需要被守护的长者。">
+    <meta name="keywords" content="老年人, 智能助手, 健康守护, 安全陪伴, 智能穿戴">
+    <link rel="icon" type="image/jpeg" href="./docs/ops-logo.jpg">
+    <style>
+        :root {
+            --primary-color: #E8A838;
+            --primary-dark: #D4922D;
+            --secondary-color: #4A9B8C;
+            --accent-color: #FF6B6B;
+            --text-color: #333333;
+            --text-light: #666666;
+            --bg-light: #FFF8F0;
+            --bg-white: #FFFFFF;
+            --bg-warm: #FDF6EC;
+            --shadow: 0 4px 20px rgba(0,0,0,0.08);
+            --shadow-hover: 0 15px 40px rgba(0,0,0,0.12);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            line-height: 1.8;
+            color: var(--text-color);
+            background-color: var(--bg-warm);
+        }
+
+        /* Navigation */
+        nav {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background: rgba(255,255,255,0.98);
+            box-shadow: var(--shadow);
+            z-index: 1000;
+            padding: 0.8rem 0;
+        }
+
+        .nav-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .nav-logo {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            text-decoration: none;
+            font-weight: 700;
+            font-size: 1.5rem;
+            color: var(--primary-color);
+        }
+
+        .nav-logo img {
+            height: 45px;
+            border-radius: 8px;
+        }
+
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+            list-style: none;
+        }
+
+        .nav-links a {
+            text-decoration: none;
+            color: var(--text-color);
+            font-weight: 500;
+            transition: color 0.3s;
+        }
+
+        .nav-links a:hover {
+            color: var(--primary-color);
+        }
+
+        /* Hero Section */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, #fff9f0 0%, #ffe8d6 50%, #ffd4b8 100%);
+            padding: 6rem 2rem 4rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at 20% 80%, rgba(232, 168, 56, 0.15) 0%, transparent 40%),
+                        radial-gradient(circle at 80% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 40%);
+        }
+
+        .hero-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            align-items: center;
+            position: relative;
+            z-index: 1;
+        }
+
+        .hero-text h1 {
+            font-size: 3.2rem;
+            color: var(--text-color);
+            margin-bottom: 1.5rem;
+            line-height: 1.3;
+        }
+
+        .hero-text h1 span {
+            color: var(--primary-color);
+            display: block;
+        }
+
+        .hero-text .tagline {
+            font-size: 1.4rem;
+            color: var(--text-light);
+            margin-bottom: 1.5rem;
+            font-weight: 500;
+        }
+
+        .hero-text p {
+            font-size: 1.1rem;
+            color: var(--text-light);
+            margin-bottom: 2rem;
+            line-height: 2;
+        }
+
+        .hero-image {
+            display: flex;
+            justify-content: center;
+        }
+
+        .hero-image img {
+            max-width: 420px;
+            width: 100%;
+            border-radius: 24px;
+            box-shadow: 0 30px 80px rgba(232, 168, 56, 0.25);
+        }
+
+        .cta-buttons {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            display: inline-block;
+            padding: 1rem 2.5rem;
+            border-radius: 50px;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            border: none;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+            color: #fff;
+            box-shadow: 0 8px 25px rgba(232, 168, 56, 0.35);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 12px 35px rgba(232, 168, 56, 0.45);
+        }
+
+        .btn-secondary {
+            background: #fff;
+            color: var(--primary-color);
+            border: 2px solid var(--primary-color);
+        }
+
+        .btn-secondary:hover {
+            background: var(--primary-color);
+            color: #fff;
+        }
+
+        /* Mission Section */
+        .mission {
+            background: var(--bg-white);
+            padding: 5rem 2rem;
+        }
+
+        .mission-content {
+            max-width: 900px;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        .mission-content h2 {
+            font-size: 2.2rem;
+            color: var(--text-color);
+            margin-bottom: 2rem;
+        }
+
+        .mission-content .quote {
+            font-size: 1.3rem;
+            color: var(--text-light);
+            line-height: 2.2;
+            font-style: italic;
+            position: relative;
+            padding: 2rem;
+            background: var(--bg-warm);
+            border-radius: 20px;
+            border-left: 5px solid var(--primary-color);
+        }
+
+        .mission-content .highlight {
+            color: var(--primary-color);
+            font-weight: 600;
+            font-style: normal;
+        }
+
+        /* Section Styles */
+        section {
+            padding: 5rem 2rem;
+        }
+
+        .section-title {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .section-title h2 {
+            font-size: 2.5rem;
+            color: var(--text-color);
+            margin-bottom: 1rem;
+        }
+
+        .section-title p {
+            color: var(--text-light);
+            font-size: 1.15rem;
+            max-width: 650px;
+            margin: 0 auto;
+            line-height: 1.9;
+        }
+
+        /* Scenarios Section */
+        .scenarios {
+            background: linear-gradient(180deg, #fff 0%, var(--bg-warm) 100%);
+        }
+
+        .scenarios-grid {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+        }
+
+        .scenario-card {
+            background: var(--bg-white);
+            border-radius: 24px;
+            overflow: hidden;
+            box-shadow: var(--shadow);
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+
+        .scenario-card:hover {
+            transform: translateY(-8px);
+            box-shadow: var(--shadow-hover);
+        }
+
+        .scenario-card img {
+            width: 100%;
+            height: 200px;
+            object-fit: cover;
+        }
+
+        .scenario-card .content {
+            padding: 1.8rem;
+        }
+
+        .scenario-card h3 {
+            font-size: 1.3rem;
+            margin-bottom: 0.8rem;
+            color: var(--text-color);
+        }
+
+        .scenario-card p {
+            color: var(--text-light);
+            line-height: 1.8;
+            font-size: 0.95rem;
+        }
+
+        /* Features Section */
+        .features {
+            background: var(--bg-white);
+        }
+
+        .features-grid {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 2rem;
+        }
+
+        .feature-card {
+            background: linear-gradient(145deg, #fff 0%, var(--bg-warm) 100%);
+            border-radius: 24px;
+            padding: 2.5rem;
+            box-shadow: var(--shadow);
+            transition: transform 0.3s, box-shadow 0.3s;
+            border: 1px solid rgba(232, 168, 56, 0.1);
+        }
+
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: var(--shadow-hover);
+        }
+
+        .feature-icon {
+            width: 80px;
+            height: 80px;
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .feature-icon.safety {
+            background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
+        }
+
+        .feature-icon.health {
+            background: linear-gradient(135deg, #4ECDC4 0%, #6EE7DF 100%);
+        }
+
+        .feature-icon.connect {
+            background: linear-gradient(135deg, #667eea 0%, #9B8CFF 100%);
+        }
+
+        .feature-card h3 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            color: var(--text-color);
+        }
+
+        .feature-card p {
+            color: var(--text-light);
+            line-height: 1.9;
+        }
+
+        /* Devices Section */
+        .devices {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #fff;
+        }
+
+        .devices .section-title h2,
+        .devices .section-title p {
+            color: #fff;
+        }
+
+        .devices-grid {
+            max-width: 1000px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 2rem;
+        }
+
+        .device-item {
+            background: rgba(255,255,255,0.15);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 2rem;
+            text-align: center;
+            border: 1px solid rgba(255,255,255,0.25);
+            transition: transform 0.3s, background 0.3s;
+        }
+
+        .device-item:hover {
+            transform: translateY(-5px);
+            background: rgba(255,255,255,0.25);
+        }
+
+        .device-item .icon {
+            font-size: 3.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .device-item h3 {
+            font-size: 1.2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .device-item p {
+            font-size: 0.9rem;
+            opacity: 0.9;
+        }
+
+        /* How It Works Section */
+        .how-it-works {
+            background: var(--bg-warm);
+        }
+
+        .steps-container {
+            max-width: 900px;
+            margin: 0 auto;
+        }
+
+        .step {
+            display: flex;
+            gap: 2rem;
+            align-items: flex-start;
+            margin-bottom: 2rem;
+            background: var(--bg-white);
+            padding: 2rem;
+            border-radius: 20px;
+            box-shadow: var(--shadow);
+        }
+
+        .step-number {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+            color: #fff;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 1.3rem;
+            flex-shrink: 0;
+        }
+
+        .step-content h3 {
+            font-size: 1.3rem;
+            margin-bottom: 0.5rem;
+            color: var(--text-color);
+        }
+
+        .step-content p {
+            color: var(--text-light);
+            line-height: 1.8;
+        }
+
+        /* Testimonial Section */
+        .testimonial {
+            background: var(--bg-white);
+            text-align: center;
+        }
+
+        .testimonial-content {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 3rem;
+            background: linear-gradient(145deg, var(--bg-warm) 0%, #fff 100%);
+            border-radius: 30px;
+            box-shadow: var(--shadow);
+        }
+
+        .testimonial-content .quote-icon {
+            font-size: 4rem;
+            color: var(--primary-color);
+            opacity: 0.3;
+            margin-bottom: 1rem;
+        }
+
+        .testimonial-content blockquote {
+            font-size: 1.4rem;
+            color: var(--text-color);
+            line-height: 2;
+            font-style: italic;
+            margin-bottom: 1.5rem;
+        }
+
+        .testimonial-content .author {
+            color: var(--text-light);
+            font-size: 1rem;
+        }
+
+        /* CTA Section */
+        .cta-section {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+            color: #fff;
+            text-align: center;
+            padding: 5rem 2rem;
+        }
+
+        .cta-section h2 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .cta-section p {
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+            opacity: 0.95;
+        }
+
+        .cta-section .btn {
+            background: #fff;
+            color: var(--primary-color);
+            font-size: 1.1rem;
+            padding: 1.2rem 3rem;
+        }
+
+        .cta-section .btn:hover {
+            background: #f8f8f8;
+            transform: translateY(-3px);
+        }
+
+        /* Footer */
+        footer {
+            background: #2D2D2D;
+            color: #fff;
+            padding: 4rem 2rem 2rem;
+        }
+
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 3rem;
+        }
+
+        .footer-section h4 {
+            color: var(--primary-color);
+            font-size: 1.2rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .footer-section p,
+        .footer-section a {
+            color: rgba(255,255,255,0.7);
+            text-decoration: none;
+            display: block;
+            margin-bottom: 0.8rem;
+            transition: color 0.3s;
+        }
+
+        .footer-section a:hover {
+            color: var(--primary-color);
+        }
+
+        .footer-bottom {
+            max-width: 1200px;
+            margin: 3rem auto 0;
+            padding-top: 2rem;
+            border-top: 1px solid rgba(255,255,255,0.1);
+            text-align: center;
+            color: rgba(255,255,255,0.5);
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .hero-content {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
+
+            .hero-text h1 {
+                font-size: 2.2rem;
+            }
+
+            .hero-image {
+                order: -1;
+            }
+
+            .hero-image img {
+                max-width: 280px;
+            }
+
+            .cta-buttons {
+                justify-content: center;
+            }
+
+            .nav-links {
+                display: none;
+            }
+
+            .section-title h2 {
+                font-size: 2rem;
+            }
+
+            .step {
+                flex-direction: column;
+                text-align: center;
+            }
+        }
+
+        /* Scroll animations */
+        .fade-in {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: opacity 0.6s ease, transform 0.6s ease;
+        }
+
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav>
+        <div class="nav-container">
+            <a href="#" class="nav-logo">
+                <img src="./docs/ops-logo.jpg" alt="OPS Agent Logo">
+                <span>OPS Agent</span>
+            </a>
+            <ul class="nav-links">
+                <li><a href="#scenarios">应用场景</a></li>
+                <li><a href="#features">核心优势</a></li>
+                <li><a href="#devices">智能设备</a></li>
+                <li><a href="#how-it-works">如何使用</a></li>
+                <li><a href="#contact">联系我们</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-content">
+            <div class="hero-text">
+                <h1>
+                    让爱与守护<br>
+                    <span>触手可及</span>
+                </h1>
+                <p class="tagline">OPS Agent — 老年人的智能守护小助手</p>
+                <p>
+                    我们诞生了一个朴素而坚定的初心——让科技不再冰冷，让陪伴不再遥远。
+                    无论您身在何方，OPS Agent 都能帮您守护家中的长辈，让爱跨越距离。
+                </p>
+                <div class="cta-buttons">
+                    <a href="#scenarios" class="btn btn-primary">💝 了解更多</a>
+                    <a href="#contact" class="btn btn-secondary">📞 联系我们</a>
+                </div>
+            </div>
+            <div class="hero-image">
+                <img src="./docs/ops-logo.jpg" alt="OPS Agent - 温暖守护">
+            </div>
+        </div>
+    </section>
+
+    <!-- Mission Section -->
+    <section class="mission">
+        <div class="mission-content">
+            <h2>🌟 我们的初心</h2>
+            <p class="quote">
+                我们相信，科技不应只是年轻人的专属，更应是<span class="highlight">温暖人心的工具</span>。
+                OPS Agent 的使命，就是让智能硬件真正"活"起来，让数据不再冰冷，让陪伴不再遥远。
+                我们希望通过技术的力量，为那些渐渐老去的父母、祖辈，为每一位需要被温柔守护的长者，
+                搭建一座<span class="highlight">连接关怀与安全的桥梁</span>。
+            </p>
+        </div>
+    </section>
+
+    <!-- Scenarios Section -->
+    <section id="scenarios" class="scenarios">
+        <div class="section-title">
+            <h2>🏠 丰富的生活场景</h2>
+            <p>覆盖老年人日常生活的方方面面，成为长辈身边最贴心的小助手</p>
+        </div>
+        <div class="scenarios-grid">
+            <div class="scenario-card fade-in">
+                <img src="./docs/marketing/00-户外.JPG" alt="户外活动">
+                <div class="content">
+                    <h3>🌳 户外活动守护</h3>
+                    <p>老人外出散步、买菜、逛公园时，实时定位与安全守护，让子女随时了解父母的动向。</p>
+                </div>
+            </div>
+            <div class="scenario-card fade-in">
+                <img src="./docs/marketing/01-户外安全.JPG" alt="户外安全">
+                <div class="content">
+                    <h3>🛡️ 全天候安全保障</h3>
+                    <p>无论是晨练还是晚间散步，智能监测让每一次外出都安心无忧。</p>
+                </div>
+            </div>
+            <div class="scenario-card fade-in">
+                <img src="./docs/marketing/02-定时通话.JPG" alt="定时通话">
+                <div class="content">
+                    <h3>📞 定时语音陪伴</h3>
+                    <p>定时语音提醒与问候，即使相隔千里，也能让老人感受到家人的温暖关怀。</p>
+                </div>
+            </div>
+            <div class="scenario-card fade-in">
+                <img src="./docs/marketing/03-跌倒检测.JPG" alt="跌倒检测">
+                <div class="content">
+                    <h3>⚠️ 跌倒智能检测</h3>
+                    <p>当意外发生时，第一时间检测并通知家人，争分夺秒守护安全。</p>
+                </div>
+            </div>
+            <div class="scenario-card fade-in">
+                <img src="./docs/marketing/07-睡眠安全模式.JPG" alt="睡眠安全">
+                <div class="content">
+                    <h3>🌙 睡眠安全守护</h3>
+                    <p>夜间睡眠监测，关注心率、呼吸状态，让每一个夜晚都安稳踏实。</p>
+                </div>
+            </div>
+            <div class="scenario-card fade-in">
+                <img src="./docs/marketing/08-药店社区信息联动.JPG" alt="社区联动">
+                <div class="content">
+                    <h3>🏪 社区服务联动</h3>
+                    <p>与药店、社区卫生站联动，用药提醒、健康咨询，一呼即应。</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section id="features" class="features">
+        <div class="section-title">
+            <h2>💪 为什么选择我们</h2>
+            <p>我们用心打造每一个细节，只为给您和家人最贴心的守护</p>
+        </div>
+        <div class="features-grid">
+            <div class="feature-card fade-in">
+                <div class="feature-icon safety">🛡️</div>
+                <h3>全方位安全守护</h3>
+                <p>
+                    跌倒检测、紧急呼叫、定位追踪……多重安全机制，
+                    当意外发生时第一时间通知家人，让守护无死角。
+                </p>
+            </div>
+            <div class="feature-card fade-in">
+                <div class="feature-icon health">❤️</div>
+                <h3>贴心健康关怀</h3>
+                <p>
+                    实时心率监测、睡眠分析、吃药提醒……
+                    把健康数据变成温暖的关怀，让子女随时了解父母身体状况。
+                </p>
+            </div>
+            <div class="feature-card fade-in">
+                <div class="feature-icon connect">👨‍👩‍👧‍👦</div>
+                <h3>亲情无缝连接</h3>
+                <p>
+                    语音通话、定时问候、生活提醒……
+                    让科技成为亲情的纽带，即使相隔千里也能感受彼此的牵挂。
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Devices Section -->
+    <section id="devices" class="devices">
+        <div class="section-title">
+            <h2>⌚ 支持多种智能设备</h2>
+            <p>灵活选择最适合老人的智能穿戴设备，轻松上手</p>
+        </div>
+        <div class="devices-grid">
+            <div class="device-item fade-in">
+                <div class="icon">⌚</div>
+                <h3>智能手环</h3>
+                <p>轻便舒适，全天佩戴</p>
+            </div>
+            <div class="device-item fade-in">
+                <div class="icon">🕐</div>
+                <h3>智能手表</h3>
+                <p>功能丰富，一目了然</p>
+            </div>
+            <div class="device-item fade-in">
+                <div class="icon">👓</div>
+                <h3>智能眼镜</h3>
+                <p>解放双手，语音交互</p>
+            </div>
+            <div class="device-item fade-in">
+                <div class="icon">🔊</div>
+                <h3>智能音箱</h3>
+                <p>语音助手，贴心陪伴</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- How It Works Section -->
+    <section id="how-it-works" class="how-it-works">
+        <div class="section-title">
+            <h2>✨ 简单三步，开始守护</h2>
+            <p>操作简单，老人和子女都能轻松上手</p>
+        </div>
+        <div class="steps-container">
+            <div class="step fade-in">
+                <div class="step-number">1</div>
+                <div class="step-content">
+                    <h3>选择智能设备</h3>
+                    <p>根据老人的使用习惯，选择手环、手表、眼镜或音箱等智能设备，家人可以帮助完成简单的绑定设置。</p>
+                </div>
+            </div>
+            <div class="step fade-in">
+                <div class="step-number">2</div>
+                <div class="step-content">
+                    <h3>连接 OPS Agent</h3>
+                    <p>打开设备蓝牙，与 OPS Agent 建立连接。老人只需佩戴设备，系统自动开始守护。</p>
+                </div>
+            </div>
+            <div class="step fade-in">
+                <div class="step-number">3</div>
+                <div class="step-content">
+                    <h3>随时随地关心</h3>
+                    <p>子女可以随时查看老人的健康状态和位置信息，有异常时立即收到通知，让关心触手可及。</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonial Section -->
+    <section class="testimonial">
+        <div class="section-title">
+            <h2>💬 用户心声</h2>
+        </div>
+        <div class="testimonial-content fade-in">
+            <div class="quote-icon">"</div>
+            <blockquote>
+                自从给爸妈用上了 OPS Agent，我在外地工作也安心多了。
+                每天能看到他们的健康数据，有什么问题第一时间就能知道。
+                这份安心，是给父母也是给自己最好的礼物。
+            </blockquote>
+            <p class="author">—— 一位在外打拼的儿子</p>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta-section">
+        <h2>开始守护您的家人</h2>
+        <p>让科技温暖每一位长者的生活，让爱跨越距离</p>
+        <a href="https://github.com/yangrudan/OPS-agent" target="_blank" class="btn">🚀 立即体验</a>
+    </section>
+
+    <!-- Footer -->
+    <footer id="contact">
+        <div class="footer-content">
+            <div class="footer-section">
+                <h4>关于 OPS Agent</h4>
+                <p>
+                    OPS Agent 是专为老年人打造的智能守护助手，
+                    遵循成为老年人守护者的初心，用爱与科技温暖每一位需要被守护的长者。
+                </p>
+            </div>
+            <div class="footer-section">
+                <h4>快速链接</h4>
+                <a href="#scenarios">应用场景</a>
+                <a href="#features">核心优势</a>
+                <a href="#devices">智能设备</a>
+                <a href="#how-it-works">如何使用</a>
+            </div>
+            <div class="footer-section">
+                <h4>开发者资源</h4>
+                <a href="https://github.com/yangrudan/OPS-agent" target="_blank">📦 GitHub 项目</a>
+                <a href="https://github.com/mofa-org/mofa" target="_blank">🔧 mofa-ai 框架</a>
+            </div>
+            <div class="footer-section">
+                <h4>联系我们</h4>
+                <p>如有合作意向或产品咨询，欢迎联系我们！</p>
+                <a href="https://github.com/yangrudan/OPS-agent" target="_blank">🐙 GitHub</a>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>© 2024 OPS Agent. Made with ❤️ for the elderly.</p>
+        </div>
+    </footer>
+
+    <script>
+        // Scroll animation
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, observerOptions);
+
+        document.querySelectorAll('.fade-in').forEach(el => {
+            observer.observe(el);
+        });
+
+        // Smooth scroll
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+    </script>
+</body>
+</html>