```json
{
"summary

```json
{
"summary": "根据您的要求，我将创建一个校园生活页面的section，采用左右布局。左边是一个带背景图的渐变卡片，右边是两个并排的内容卡片。所有卡片都包含标题、摘要和阅读更多链接。",
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": true,
"html": "<div class=\"container mx-auto px-4 py-12\">\n <div class=\"flex flex-col md:flex-row gap-8\">\n <!-- 左边大卡片 -->\n <div class=\"md:w-1/2\">\n <div class=\"relative h-full rounded-xl overflow-hidden group\">\n <div class=\"absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/70 to-transparent z-10\"></div>\n <img src=\"/assets/images/16-9/business-01.jpg\" alt=\"校园生活\" class=\"w-full h-full object-cover\">\n <div class=\"absolute bottom-0 left-0 z-20 p-6 w-full\">\n <h3 class=\"text-2xl font-bold text-white mb-2\">校园精彩活动</h3>\n <p class=\"text-gray-200 mb-4 line-clamp-2\">探索校园内丰富多彩的课外活动，从学术讲座到体育赛事，应有尽有...</p>\n <a href=\"#\" class=\"inline-flex items-center text-blue-300 hover:text-blue-100 font-medium transition-colors\">\n 阅读更多\n <svg class=\"w-4 h-4 ml-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n </svg>\n </a>\n </div>\n </div>\n </div>\n \n <!-- 右边两个小卡片 -->\n <div class=\"md:w-1/2 flex flex-col gap-6\">\n <!-- 卡片1 -->\n <div class=\"flex-1 border border-gray-200 rounded-xl overflow-hidden hover:shadow-md transition-shadow\">\n <div class=\"aspect-w-4 aspect-h-3 bg-gray-100 overflow-hidden\">\n <img src=\"/assets/images/showcase/1.jpg\" alt=\"学术活动\" class=\"w-full h-full object-cover\">\n </div>\n <div class=\"p-5\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">学术讲座系列</h3>\n <p class=\"text-gray-600 mb-4 line-clamp-3\">本学期我们将邀请多位知名学者来校讲座，涵盖人工智能、生物科技、人文社科等多个领域...</p>\n <a href=\"#\" class=\"text-blue-500 hover:text-blue-700 font-medium inline-flex items-center transition-colors\">\n 了解更多\n <svg class=\"w-4 h-4 ml-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n </svg>\n </a>\n </div>\n </div>\n \n <!-- 卡片2 -->\n <div class=\"flex-1 border border-gray-200 rounded-xl overflow-hidden hover:shadow-md transition-shadow\">\n <div class=\"aspect-w-4 aspect-h-3 bg-gray-100 overflow-hidden\">\n <img src=\"/assets/images/showcase/2.jpg\" alt=\"体育活动\" class=\"w-full h-full object-cover\">\n </div>\n <div class=\"p-5\">\n <h3 class=\"text-xl font-bold text-gray-900 mb-3\">年度运动会</h3>\n <p class=\"text-gray-600 mb-4 line-clamp-3\">一年一度的校运会即将开幕，快来报名参加你擅长的项目，为你的学院争光...</p>\n <a href=\"#\" class=\"text-blue-500 hover:text-blue-700 font-medium inline-flex items-center transition-colors\">\n 了解更多\n <svg class=\"w-4 h-4 ml-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"></path>\n </svg>\n </a>\n </div>\n </div>\n </div>\n </div>\n</div>"
},
"next": [
"添加动画效果",
"优化移动端布局",
"增加卡片hover效果",
"调整图片比例",
"添加更多卡片"
]
}
```