AboutOne

The AboutOne component displays a section providing information about a product or service.

Props

The AboutOne component accepts the following props:

• imageLight (string, required): The image path representing the light-themed version of the about section.

• imageDark (string, required): The image path representing the dark-themed version of the about section.

• title (string, required): The main title of the about section.

• subTitle (string, required): The subtitle or tagline for the about section.

• highlight (string, required): A highlighted or emphasized text within the main title.

• tag (string, required): A tag or label associated with the about section.

• description (string, required): A description or details about the product or service.

• items (AboutItem[], required): An array of objects representing each item or point. Each item object has the following properties:

  • number (string, required): The number or identifier of the item.

  • heading (string, required): The heading or title of the item.

  • content (string, required): The content or details of the item.

Usage Example

<AboutOne
  imageLight="/images/about/about-light-01.svg"
  imageDark="/images/about/about-dark-01.svg"
  title="Know More About Our"
  subTitle="start tracking visitors"
  highlight="Product."
  tag="New"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies lacus non fermentum ultrices. Fusce consectetur le."
  items={[
    {
      number: '01',
      heading: 'Lorem ipsum dolor.',
      content: 'Ut ultricies lacus non fermentum ultrices.',
    },
    {
      number: '02',
      heading: 'Fusce consectetur le.',
      content: 'consectetur adipiscing elit fermentum ultricies.',
    },
  ]}
/>

In the example above, the AboutOne component is used with sample data to render a section providing information about a product or service. Make sure to replace the prop values with the appropriate data and adjust the image paths based on your project structure.

Styling

The AboutOne component uses Tailwind CSS utility classes for styling. You can customize the component's appearance by modifying these classes or extending them with your own styles.

For more information on Tailwind CSS, refer to the official documentation: https://tailwindcss.com/docs