# Frontmatter（必需）
---
title: "页面标题"
description: "页面描述"
sidebarTitle: "侧边栏显示的简短标题"
---

# 常用组件

## 1. 步骤引导
<Steps>
  <Step title="步骤标题">
    步骤内容...

    <Frame>
      <img src="/images/image-file.png" alt="图片描述" />
    </Frame>
  </Step>
</Steps>

## 2. 提示框
<Tip>提示内容</Tip>
<Info>信息内容</Info>
<Warning>警告内容</Warning>
<Danger>危险提示</Danger>
<Note>注意事项</Note>

## 3. 卡片
<Card title="卡片标题" href="链接地址">
  卡片描述内容...
</Card>

<CardGroup cols={2}>
  <Card title="卡片1">内容1</Card>
  <Card title="卡片2">内容2</Card>
</CardGroup>

## 4. 折叠区域
<Accordion title="标题">
  折叠内容...
</Accordion>

## 5. 帧容器（用于图片/视频）
<Frame caption="图片说明">
  <img src="/path/to/image.png" alt="描述" />
</Frame>

## 6. 视频嵌入
<Frame>
  <video
    autoPlay
    loop
    muted
    playsInline
    src="/images/video-file.mp4"
    alt="视频描述"
  />
</Frame>

## 7. 代码块
直接使用 markdown 的三个反引号

## 8. 表格
<table>
<thead>
  <tr>
    <th width="200">列1</th>
    <th width="300">列2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</tbody>
</table>

## 9. 多列布局
<Columns cols={3} className="gap-y-4">
  <Frame caption="说明1">
    <img src="/images/img1.png" />
  </Frame>
  <Frame caption="说明2">
    <img src="/images/img2.png" />
  </Frame>
  <Frame caption="说明3">
    <img src="/images/img3.png" />
  </Frame>
</Columns>

## 10. 外部链接
使用 markdown 语法，添加 target 和 rel：
<a href="URL" target="_blank" rel="noopener noreferrer">链接文本</a>

## 11. 更新日志组件
<Update label="December 2025" description="简短描述">
  ✨ **New Features**
  - 新功能列表

  🚀 **Improvements**
  - 改进列表

  🐛 **Bug Fixes**
  - 修复列表
</Update>

---
title: "Integrate with Resend"
description: "Add email functionality to your Readdy website using Resend for transactional emails and notifications"
sidebarTitle: "Resend"
---

## What is Resend?
- 介绍 Resend 是什么
- 可以实现的功能（预约确认邮件、预订通知等）

## Before You Start
- 需要准备的条件（Resend 账号、Supabase 连接）

## 1. Basic Configuration
<Steps>
  Step 1: Sign Up for Resend
  Step 2: Connect Supabase Database
  Step 3: Get Your Resend API Key
  Step 4: Connect Resend to Readdy
</Steps>

## 2. Testing and Verification（包含流程闭环）
<Steps>
  Step 1: Enable Email in Readdy
  Step 2: Test the Booking Flow
  Step 3: Verify Email Delivery（流程闭环第一步）
  Step 4: Check Database Records（流程闭环第二步）
</Steps>

## 3. Branding Setup (Optional)
<Accordion title="Why Verify Your Domain?">
  品牌域名的优势
</Accordion>

<Steps>
  Step 1: Purchase a Domain
  Step 2: Add Domain in Resend
  Step 3: Configure DNS Records
  Step 4: Verify Domain
  Step 5: Update Email Sender in Readdy
</Steps>

## 4. Advanced Features (Optional)
### AI Agent Integration
### Calendar Scheduling

## Troubleshooting
### Email Not Sending
### Email Not Arriving
### Database Not Recording Bookings

## Need Help?
联系方式

{
  "navigation": {
    "groups": [
      {
        "group": "Integrations",
        "pages": [
          "integrations/readdy-agent",
          "integrations/supabase",
          "integrations/resend",    // ← 新添加的
          "integrations/shopify",
          "integrations/stripe",
          // ... 其他集成
        ]
      }
    ]
  }
}

我正在继续之前的 Mintlify 文档项目。项目位于 /tmp/mintlify-docs-main

请阅读以下文件：
1. /tmp/mintlify-docs-main/integrations/resend.mdx（当前正在编辑的文档）
2. /tmp/mintlify-docs-main/integrations/stripe.mdx（参考格式）
3. /tmp/mintlify-docs-main/integrations/calendly.mdx（参考格式）

帮我：[具体需求]

/tmp/mintlify-docs-main/
├── docs.json                          # 主配置文件（已更新）
├── README.md
├── intro.mdx
├── welcome.mdx
├── firstapp.mdx
├── changelog.mdx
├── favicon.svg
├── logo/
│   ├── light.svg
│   └── dark.svg
├── images/                            # 图片资源目录（需添加截图）
├── integrations/                      # 集成文档目录
│   ├── readdy-agent.mdx
│   ├── supabase.mdx
│   ├── resend.mdx                     # ← 新创建的文档
│   ├── shopify.mdx
│   ├── stripe.mdx                      # ← 参考格式
│   ├── figma.mdx
│   ├── ga.mdx
│   ├── calendly.mdx                    # ← 参考格式
│   ├── mailchimp.mdx
│   └── google-login.mdx
├── features/
├── tricks/
├── account/
├── cases/
├── troubleshooting/
└── more/

# 启动预览
cd /tmp/mintlify-docs-main && npx mint dev

# 停止预览：在终端按 Ctrl+C

# 查看项目结构
ls -la /tmp/mintlify-docs-main/

# 查看集成文档
ls -la /tmp/mintlify-docs-main/integrations/

# 查看图片资源
ls -la /tmp/mintlify-docs-main/images/