feat(mdx): add MDX support and migrate markdown files to MDX

- Add @astrojs/mdx integration to enable MDX support
- Migrate all markdown files (.md) to MDX (.mdx) format
- Create HighlightBox component for enhanced content styling
- Update astro config to include MDX integration
- Add documentation guide for MDX integration

src/pages/zh/about.mdx

@@ -4,12 +4,16 @@ description: "了解更多关于我的背景、技能和经验"
 layout: "../../layouts/AboutLayout.astro"
 ---
 
+import HighlightBox from '../../components/markdown/HighlightBox.astro';
+
 # 关于我 👨‍💻
 
+<HighlightBox type="info" title="简介">
 我是Joy Zhao, 一名Ts全栈工程师，也是本站的站长。
 
 热爱生活、阅读以及编程，寻找远程工作的机会，探索自由职业的可能性。
 喜欢自驾，去追寻那些美丽的风景，尝试新的事物。
+</HighlightBox>
 
 ## 👨‍💻‍自我介绍 🧠
 
@@ -19,7 +23,8 @@ layout: "../../layouts/AboutLayout.astro"
 
 以下展示了我目前熟悉或精通的技术栈，以及正在/准备学习的技术栈。如果你的项目需要使用一些我不熟悉的技术，也请不要担心，我与一些技术大牛，包括不限于后端、App、UI设计师、产品经理等有着良好的合作关系，完全可以提供任何你需要的服务。
 
-### 已掌握的技能
+<HighlightBox type="info" title="已掌握的技能">
+
 - **HTML、CSS、JavaScript**
 - **Vue.js、React.js、Node.js、uniApp、微信小程序**等前端框架
 - **TypeScript**
@@ -27,24 +32,37 @@ layout: "../../layouts/AboutLayout.astro"
 - **Linux、Git**
 - **其他：Markdown、Docker、Kubernetes、Nginx、Apache**等技术
 
-### 正在/准备学习的技能
+</HighlightBox>
+
+<HighlightBox type="tip" title="正在/准备学习的技能">
+
 - **Python、Java、Go**
 - **Flutter、Dart**
 - **Swift、SwiftUI**
 
+</HighlightBox>
+
 ## 🌈 兴趣爱好
 
+<HighlightBox type="success" title="兴趣爱好">
+
 - 阅读：喜欢阅读各种书籍，尤其是技术类书籍。
 - 旅游：喜欢去不同的地方看看，尤其是自驾游。
 - 美食：喜欢吃各种美食，尤其是火锅。
 - 手游: 喜欢玩英雄联盟、王者荣耀、绝地求生等手游。
 
+</HighlightBox>
+
 ## 📱联系我
 
-:::info
+<HighlightBox type="warning" title="重要提示">
 由于大家的时间都很宝贵，所以请在联系我时添加备注，如：合作、咨询、项目需求等，不予备注的我可能不会回复或直接忽略，谢谢合作！
-:::
+</HighlightBox>
+
+<HighlightBox type="info" title="联系方式">
 
 - **邮箱：zhaoguiyang18@gmail.com**
 - **QQ: 2770723534**
-- **微信：JoyCodeing**
+- **微信：JoyCodeing**
+
+</HighlightBox>

src/pages/zh/services.mdx

@@ -4,8 +4,14 @@ description: "探索我提供的专业服务，帮助您实现数字项目"
 layout: "../../layouts/AboutLayout.astro"
 ---
 
+import HighlightBox from '../../components/markdown/HighlightBox.astro';
+
 # 提供服务 🛠️
 
+<HighlightBox type="tip" title="服务理念">
+用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。
+</HighlightBox>
+
 ## 网站开发 🌐
 
 - 使用最新技术构建响应式现代网站
@@ -40,14 +46,19 @@ layout: "../../layouts/AboutLayout.astro"
 
 ## BUg 修复 🐛
 
+<HighlightBox type="error" title="Bug修复与代码优化">
+
 - 识别和解决现有应用程序中的问题
 - 调试前端和后端系统中的复杂问题
 - 优化代码以提高性能和可靠性
 - 将旧代码重构为现代标准
 - 实施自动化测试以防止未来出现错误
 
+</HighlightBox>
+
 ## 注意事项 📝
 
+<HighlightBox type="warning" title="合作前须知">
 为了减少不必要的麻烦，请在沟通之前仔细阅读以下注意事项：
 
 1. 请提供详细的需求说明，有原型图或设计稿更佳（如果你不了解这些也没关系，我这边可以帮你整理）。
@@ -55,9 +66,12 @@ layout: "../../layouts/AboutLayout.astro"
 3. 一般情况下只接商单，其他形式的合作需要另行协商。
 4. 暂时无法提供开票服务。
 5. 项目完成后可免费维护3个月。
+</HighlightBox>
 
 ## 合作步骤 🤝
 
+<HighlightBox type="info" title="合作流程">
+
 1. 确定合作项目
 2. 确定合作方式
 3. 确定项目功能需求
@@ -69,16 +83,26 @@ layout: "../../layouts/AboutLayout.astro"
 9. 项目上线
 10. 项目维护
 
+</HighlightBox>
+
 ## 付款方式 💰
 
+<HighlightBox type="success" title="支付方式">
+
 - 微信支付
 - 支付宝支付
 - 银行转账
 
 **注：所有项目费用均为442付款制**
 
+</HighlightBox>
+
 ## 联系方式 📞
 
+<HighlightBox type="info" title="联系我">
+
 - QQ: **2770723534**
 - 微信：**JoyCodeing**
-- 邮箱：**zhaoguiyang18@gmail.com**
+- 邮箱：**zhaoguiyang18@gmail.com**
+
+</HighlightBox>