页面结构
1. 页面标题区
组件: 页面标题
元素:
标题文本（H1）
示例内容: “提升自信心的技巧”
2. 提升自信心的技巧区
组件: 技巧列表
元素:
列表项（每个技巧可以展开）
示例内容:
技巧一: 设定小目标
描述: “通过设定并完成小目标来增强自信心。”
详细说明: “每完成一个小目标，都会增强你的成就感。”
技巧二: 积极自我对话
描述: “通过积极的自我对话来改变消极思维。”
详细说明: “用积极的语言鼓励自己，提升自我肯定感。”
技巧三: 练习身体语言
描述: “通过开放的身体语言来传达自信。”
详细说明: “站直、微笑和保持眼神接触可以帮助你感到更自信。”
3. 实用工具区
组件: 工具推荐
元素:
工具名称
工具描述
使用链接或下载按钮
示例内容:
工具一: 自信心提升APP
描述: “提供每日自信心练习和积极的提醒。”
按钮: “下载APP”
工具二: 在线课程
描述: “学习更多关于自信心提升的技巧。”
按钮: “查看课程”
4. 资源区
组件: 文章和视频推荐
元素:
文章标题
视频缩略图
资源链接
示例内容:
文章: “提升自信心的五个有效方法”
链接: “阅读更多”
视频: “如何在公众面前自信演讲”
链接: “观看视频”
5. 社区支持区
组件: 社区讨论
元素:
讨论主题
参与链接
示例内容:
主题: “分享你的自信提升故事”
链接: “参与讨论”
请您作为一名专业的Ionic前端工程师，帮我运用ionic v7 或v8及以上的angular版本standalone模式编写，选择合适的ionic组件来重构以上产品页面的各个区域和内容，如果涉及到图形效果请用ion-icon。并给出整个页面的topic-detail3.component.html代码还有topic-detail3.component.ts代码