Hugging Face's logo

Spaces:
CYXiaofeng
/
care
Running

App Files Community
care
File size: 6,131 Bytes 
0f3dcd5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安康养老 - 专业养老护理服务</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 自定义动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 1s ease-out forwards;
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #4f46e5;
            border-radius: 4px;
        }
        
        /* 悬停效果 */
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .hero-text {
                font-size: 2rem !important;
            }
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-20">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fas fa-heartbeat text-indigo-600 text-3xl mr-2"></i>
                        <span class="text-xl font-bold text-indigo-600">安康养老</span>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#home" class="text-indigo-600 hover:text-indigo-800 px-3 py-2 font-medium">首页</a>
                    <a href="#services" class="text-gray-600 hover:text-indigo-600 px-3 py-2 font-medium">服务项目</a>
                    <a href="#about" class="text-gray-600 hover:text-indigo-600 px-3 py-2 font-medium">关于我们</a>
                    <a href="#team" class="text-gray-600 hover:text-indigo-600 px-3 py-2 font-medium">专业团队</a>
                    <a href="#contact" class="text-gray-600 hover:text-indigo-600 px-3 py-2 font-medium">联系我们</a>
                    <a href="#appointment" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition duration-300">预约咨询</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button id="menu-btn" class="text-gray-600 hover:text-indigo-600 focus:outline-none">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#home" class="block px-3 py-2 text-base font-medium text-indigo-600">首页</a>
                <a href="#services" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">服务项目</a>
                <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">关于我们</a>
                <a href="#team" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">专业团队</a>
                <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">联系我们</a>
                <a href="#appointment" class="block px-3 py-2 text-base font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">预约咨询</a>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section id="home" class="relative bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-20 md:py-32">
        <div class="absolute inset-0 opacity-20">
            <div class="absolute inset-0 bg-black"></div>
        </div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="md:flex items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
                    <h1 class="hero-text text-4xl md:text-5xl font-bold leading-tight mb-6">专业养老护理服务<br>让晚年生活更美好</h1>
                    <p class="text-xl mb-8 opacity-90">我们提供全方位的养老护理解决方案，让您的家人享受专业、贴心的照护服务。</p>
                    <div class="flex space-x-4">
                        <a href="#services" class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition duration-300">了解服务</a>
                        <a href="#contact" class="border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-indigo-600 transition duration-300">联系我们</a>
                    </div>
                </div>
                <div class="md:w-1/2 fade-in" style="animation-delay: 0.3s;">
                    <img src="https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80" alt="养老护理" class="rounded-lg shadow-2xl">
                </div>
            </div>
        </div>
    </section>

    <!-- 特色服务 -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">为什么选择我们</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">我们致力于为老年人提供
</html>