```json
{
"summary

```json
{
"summary": "将校园生活展示组件翻译成英文版本，保持原有的响应式布局和视觉设计",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<section class=\"py-8 bg-white\">\n <div class=\"flex flex-col md:flex-row gap-8\">\n <!-- Left Card -->\n <div class=\"md:w-1/2 relative rounded-lg shadow-md overflow-hidden group\">\n <img src=\"/assets/images/showcase/8.jpg\" \n class=\"w-full h-full object-cover\"\n alt=\"Campus life\">\n <div class=\"absolute bottom-0 left-0 right-0 h-2/3 bg-gradient-to-t from-gray-900 via-gray-900/70 to-transparent\"></div>\n <div class=\"absolute bottom-0 left-0 right-0 p-6 text-white\">\n <h2 class=\"text-2xl font-bold mb-2\">Explore Campus Life</h2>\n <p class=\"text-slate-200 line-clamp-3 mb-4\">Discover diverse campus activities, student clubs, and unforgettable college moments, recording your youth stories.</p>\n <a href=\"#\" class=\"inline-flex items-center text-blue-400 hover:text-blue-300 transition-colors duration-300\">\n Read More\n <svg class=\"w-4 h-4 ml-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/>\n </svg>\n </a>\n </div>\n </div>\n\n <!-- Right Double Cards -->\n <div class=\"md:w-1/2 flex flex-col md:flex-row gap-6\">\n <div class=\"md:w-1/2 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow\">\n <div class=\"relative aspect-[4/3]\">\n <img src=\"/assets/images/showcase/7.jpg\"\n class=\"absolute top-0 left-0 w-full h-full object-cover\"\n alt=\"Event\">\n </div>\n <div class=\"p-6\">\n <h3 class=\"text-lg font-bold text-gray-800 mb-2\">Campus Event Calendar</h3>\n <p class=\"text-gray-600 line-clamp-3 mb-4\">Real-time updates on academic lectures, cultural performances, sports events and other campus activities to help you plan your time.</p>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 transition-colors duration-300\">View Details →</a>\n </div>\n </div>\n\n <div class=\"md:w-1/2 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow\">\n <div class=\"relative aspect-[4/3]\">\n <img src=\"/assets/images/showcase/6.jpg\"\n class=\"absolute top-0 left-0 w-full h-full object-cover\"\n alt=\"Club\">\n </div>\n <div class=\"p-6\">\n <h3 class=\"text-lg font-bold text-gray-800 mb-2\">Club Recruitment Season</h3>\n <p class=\"text-gray-600 line-clamp-3 mb-4\">Over 50 student clubs are recruiting new members, covering academic technology, culture arts, sports and more. There's one for you!</p>\n <a href=\"#\" class=\"text-blue-600 hover:text-blue-800 transition-colors duration-300\">Join Now →</a>\n </div>\n </div>\n </div>\n </div>\n</section>"
},
"next": ["添加悬停动画效果","优化移动端布局","添加加载状态","增加图片懒加载","添加ARIA标签"]
}
```