CTA

预览

CTA 组件

特点

✨ 吸引眼球的渐变背景和 SVG 图案设计
🚀 突出显示和带有图标的操作按钮
🎭 响应式设计，与主题自适应

使用方法

在你的页面中导入和使用 CTA 组件：

page.tsx

import Cta from '@/components/cta';
 
export default function Page() {
  return (
    <main>
      {/* 你的其他组件 */}
      <Cta />
    </main>
  );
}

自定义文本内容

你可以通过修改翻译文件（messages/zh.json 等）中的 cta 部分来自定义文本内容：

messages/zh.json

{
  "cta": {
    "highlight": "准备好发布",
    "rest": "你的下一个产品？",
    "description": "使用我们的平台，更快速、更智能地开始发布。今天就加入成千上万的满意用户行列。",
    "button": "开始使用"
  }
}

自定义按钮链接

你可以通过修改 CTA 组件中的 href 属性来改变按钮链接：

components/cta.tsx

<Button size="xl" className="text-xl font-bold flex gap-2 mx-auto mt-10" asChild>
  <a href="#你的自定义链接">
    <FaRocket />
    {t('button')}
  </a>
</Button>

自定义按钮图标

你可以通过替换 FaRocket 组件为任何其他 React 图标来更改按钮图标：

components/cta.tsx

import { FaArrowRight } from 'react-icons/fa'; // 导入不同的图标
 
// 然后在你的按钮中
<Button size="xl" className="text-xl font-bold flex gap-2 mx-auto mt-10" asChild>
  <a href="#pricing">
    <FaArrowRight /> {/* 使用新图标 */}
    {t('button')}
  </a>
</Button>

预览

特点

使用方法

自定义文本内容

自定义按钮链接

自定义按钮图标

On this page