Why

一个响应式组件，旨在解释用户为什么应该选择该产品，通过图标和插图图像突出展示产品的核心优势

预览

Why 组件

功能特点

🎨 响应式网格布局设计
🖼️ 特色插图图像
🌐 多语言支持
✨ 可自定义功能图标

使用方法

在页面中导入并使用 Why 组件：

page.tsx

import Why from '@/components/why';
 
export default function Page() {
  return (
    <main>
      <Why />
      {/* 其他内容 */}
    </main>
  );
}

自定义内容

您可以通过在 messages/zh.json 文件中设置相应的翻译来自定义区块标题、描述和优势：

messages/zh.json

{
  "why": {
    "title": "为什么选择我们",
    "description": "探索选择我们产品的 compelling 理由。",
    "advantages": [
      "第一个让我们脱颖而出的优势点。",
      "第二个突出我们独特价值的优势点。",
      "第三个展示我们好处的优势点。"
    ]
  }
}

自定义图标

您可以导入自己想要的图标：

// 更改此导入以使用不同的图标
import { TbBolt } from "react-icons/tb";
// 示例：使用不同的图标
import { TbRocket } from "react-icons/tb";
 
// 然后在组件中更新图标
<TbRocket className="size-5 text-primary shrink-0"/>

自定义插图

您可以通过以下方式更改插图图像：

将您的图像添加到 public/images/ 目录
更新组件中的图像路径：

<Image
  className="aspect-[4/3] rounded-3xl order-2 lg:order-1"
  src="/images/your-new-image.svg" // 更改此路径
  alt={t('title')}
  width={1152}
  height={864}
/>

自定义样式

该组件使用 Tailwind CSS 类进行样式设置。您可以通过修改组件中的类来自定义外观：

// 示例：更改图标背景
<div className="p-2 rounded-md bg-primary/10 dark:bg-primary/30 self-start">
  <TbBolt className="size-5 text-primary shrink-0"/>
</div>