Why

A responsive component designed to explain why users should choose the product, featuring key advantages with icons and an illustration image

Preview

Why Component

Features

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

Usage

Import and use the Why component in your page:

page.tsx

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

Customization Content

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

messages/en.json

{
  "why": {
    "title": "Why Choose Us",
    "description": "Discover the compelling reasons to choose our product.",
    "advantages": [
      "First advantage point that makes us stand out.",
      "Second advantage point highlighting our unique value.",
      "Third advantage point showcasing our benefits."
    ]
  }
}

Customization Icon

You can customize the icon by changing the imported icon.

// Change this import to use a different icon
import { TbBolt } from "react-icons/tb";
// Example: Using a different icon
import { TbRocket } from "react-icons/tb";
 
// Then update the icon usage in the component
<TbRocket className="size-5 text-primary shrink-0"/>

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 order-2 lg:order-1"
  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">
  <TbBolt className="size-5 text-primary shrink-0"/>
</div>