What

一个响应式组件，旨在介绍和展示产品是什么，通过图标和插图图像突出展示产品的核心优势

预览

What 组件

功能特点

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

使用方法

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

page.tsx

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

自定义内容

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

messages/zh.json

{
  "what": {
    "title": "我们的产品",
    "description": "一套全面的功能设计，旨在提升您的体验。",
    "features": [
      {
        "title": "功能一",
        "description": "第一个功能及其优势的描述。"
      },
      {
        "title": "功能二",
        "description": "第二个功能及其优势的描述。"
      },
      {
        "title": "功能三",
        "description": "第三个功能及其优势的描述。"
      }
    ]
  }
}

自定义功能图标

您可以通过修改 What 组件中的 FEATURE_ICONS 数组来自定义功能图标：

import { TbGift, TbSparkles, TbAward } from "react-icons/tb";
 
const FEATURE_ICONS = [
  TbGift,
  TbSparkles,
  TbAward, // 更改的图标
] as const;

自定义插图

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

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

<Image
  className="aspect-[4/3] rounded-3xl"
  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">
  <Icon className="size-5 text-primary"/>
</div>