{
"summary": "已为He

{
"summary": "已为Hero组件添加了精美的入场动画效果，包括标题、描述、按钮和插图的渐进式淡入动画，增强了用户体验和视觉吸引力。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"relative py-16 md:py-24 lg:py-32 overflow-hidden bg-cover bg-center\" style=\"background-image: url('/assets/images/16-9/business-01.jpg')\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-900/80 to-transparent\"></div>\n <div class=\"container relative z-10 mx-auto px-4 md:px-6\">\n <div class=\"flex flex-col lg:flex-row items-center justify-between gap-10 lg:gap-16\">\n <div class=\"flex-1 text-center lg:text-left\">\n <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight mb-4 transform transition-all duration-700 opacity-0 translate-y-8 animate-fade-in-up\">\n 开启您的数字之旅\n </h1>\n <p class=\"text-lg md:text-xl text-gray-200 mb-8 max-w-2xl mx-auto lg:mx-0 transform transition-all duration-700 delay-150 opacity-0 translate-y-8 animate-fade-in-up\">\n 我们提供创新的解决方案，帮助您的业务在数字时代脱颖而出。专业团队，卓越服务，助力您的成功。\n </p>\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start transform transition-all duration-700 delay-300 opacity-0 translate-y-8 animate-fade-in-up\">\n <a href=\"#\" class=\"inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors transform hover:scale-105 transition-transform duration-300\">\n 立即开始\n </a>\n <a href=\"#\" class=\"inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-transparent border border-white rounded-lg shadow-sm hover:bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 transition-colors transform hover:scale-105 transition-transform duration-300\">\n 了解更多\n </a>\n </div>\n </div>\n <div class=\"flex-1 flex justify-center lg:justify-end transform transition-all duration-700 delay-500 opacity-0 translate-y-8 animate-fade-in-up\">\n <div class=\"relative w-full max-w-md\">\n <img src=\"/assets/images/illustration/01.png\" alt=\"数字解决方案插图\" class=\"w-full h-auto object-contain transform hover:scale-105 transition-transform duration-500\">\n </div>\n </div>\n </div>\n </div>\n <style>\n .animate-fade-in-up {\n animation: fadeInUp 0.8s ease-out forwards;\n }\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(2rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n </style>\n</div>"
},
"next": ["添加滚动触发动画", "实现视差滚动效果", "添加鼠标悬停特效", "优化移动端动画性能", "添加加载进度指示器"]
}