ZOHO CRM

1import { Icon } from '@/components/Icon'
2import type { FeaturesBlock as FeaturesBlockProps } from '@/payload-types'
3import React from 'react'
4
5import { FeaturesBlockStyle2 } from './style2'
6
7export const FeaturesBlock: React.FC<FeaturesBlockProps> = (props) => {
8  const { style = 'default' } = props
9
10  // Render compact style
11  if (style === 'compact') {
12    return <FeaturesBlockStyle2 {...props} />
13  }
14
15  // Render default style
16  const { heading, features } = props
17
18  return (
19    <div className="container my-16">
20      {heading && <h2 className="text-3xl font-bold text-center mb-12">{heading}</h2>}
21
22      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
23        {features?.map((feature, index) => (
24          <div
25            key={index}
26            className="flex flex-col items-center text-center p-6 rounded-lg border border-border bg-card"
27          >
28            {feature.icon && (
29              <div className="mb-4 p-4 rounded-full bg-primary/10">
30                <Icon name={feature.icon as any} size={32} className="text-primary" />
31              </div>
32            )}
33
34            {feature.title && <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>}
35
36            {feature.description && <p className="text-muted-foreground">{feature.description}</p>}
37          </div>
38        ))}
39      </div>
40    </div>
41  )
42}
43
Copy