What

A responsive component designed to introduce and showcase what the product is, featuring key benefits with icons and an illustration image

Preview

What Component

Features

🎨 Responsive grid layout design
🖼️ Featured illustration image
🌐 Multi-language support
✨ Customizable feature icons
📊 Dynamic feature content

Usage

Import and use the What component in your page:

page.tsx

import What from '@/components/what';
 
export default function Page() {
  return (
    <main>
      <What />
      {/* Other content */}
    </main>
  );
}

Customization Content

You can customize the section title, description, and features by setting the translations in the messages/en.json file:

messages/en.json

{
  "what": {
    "title": "What We Offer",
    "description": "A comprehensive suite of features designed to enhance your experience.",
    "features": [
      {
        "title": "Feature One",
        "description": "Description of the first feature and its benefits."
      },
      {
        "title": "Feature Two",
        "description": "Description of the second feature and its benefits."
      },
      {
        "title": "Feature Three",
        "description": "Description of the third feature and its benefits."
      }
    ]
  }
}

Customization Feature Icons

You can customize the feature icons by modifying the FEATURE_ICONS array in the What component:

import { TbGift, TbSparkles, TbAward } from "react-icons/tb";
 
const FEATURE_ICONS = [
  TbGift,
  TbSparkles,
  TbAward, // Changed icon
] as const;

Customization Illustration

You can change the illustration image by:

Adding your image to the public/images/ directory
Updating the image path in the component:

<Image
  className="aspect-[4/3] rounded-3xl"
  src="/images/your-new-image.svg" // Change this path
  alt={t('title')}
  width={1152}
  height={864}
/>

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by modifying the classes in the component:

// Example: Changing the icon background
<div className="p-2 rounded-md bg-primary/10 dark:bg-primary/30 self-start">
  <Icon className="size-5 text-primary"/>
</div>