```json
{
"widget"

```json
{
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<style lang=\"scss\">\n.author-section {\n @apply py-16 px-4 bg-white;\n \n .container {\n @apply mx-auto flex flex-col items-center gap-8;\n \n .title-wrapper {\n @apply flex flex-col items-center gap-2 w-full;\n \n h2 {\n @apply text-2xl font-bold text-gray-800;\n }\n \n .divider {\n @apply h-px w-full bg-gray-200;\n }\n }\n \n .author-card {\n @apply flex w-full flex-col items-center gap-6 sm:flex-row sm:items-start;\n \n .avatar {\n @apply h-24 w-24 flex-shrink-0 rounded-full object-cover;\n }\n \n .info {\n @apply flex flex-1 flex-col text-center sm:text-left gap-1;\n \n h3 {\n @apply text-xl font-bold text-gray-800;\n }\n \n p {\n @apply text-base text-gray-600;\n }\n }\n }\n }\n}\n</style>\n\n<section class=\"author-section\">\n <div class=\"container\">\n <div class=\"title-wrapper\">\n <h2>本文作者</h2>\n <div class=\"divider\"></div>\n </div>\n \n <div class=\"author-card\">\n <img src=\"/assets/images/avatar/01.jpeg\" alt=\"郑永年\" class=\"avatar\">\n <div class=\"info\">\n <h3>郑永年</h3>\n <p>香港中文大学（深圳）教授</p>\n <p>前海国际事务研究院院长</p>\n <p>公共政策学院院长</p>\n </div>\n </div>\n \n <div class=\"author-card\">\n <img src=\"/assets/images/avatar/02.jpeg\" alt=\"Mattie Bekink\" class=\"avatar\">\n <div class=\"info\">\n <h3>Mattie Bekink</h3>\n <p>福特基金会中国地区主任、首席代表</p>\n </div>\n </div>\n </div>\n</section>"
},
"next": [
"添加hover效果",
"优化响应式布局",
"增加动画效果",
"添加社交链接",
"优化图片加载"
],
"summary": "已将Tailwind CSS类提取到SCSS样式块中，使用@apply语法并按组件层级进行了嵌套。现在组件结构更清晰，样式更易于维护。接下来可以考虑添加交互效果或进一步优化布局。"
}
```