42 lines
1.3 KiB
JavaScript
42 lines
1.3 KiB
JavaScript
export default function FeatureCards({ features, layout = 'default' }) {
|
|
if (layout === 'choose') {
|
|
return (
|
|
<div className="choose-feature-wrap">
|
|
{features.map((f, i) => (
|
|
<div key={i} className="choose-feature">
|
|
<div className="box-icon"><img decoding="async" src={f.icon} alt={f.title} /></div>
|
|
<h3 className="box-title">{f.title}</h3>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
if (layout === 'process') {
|
|
return (
|
|
<div className="contact-process-wrap no-bg">
|
|
{features.map((f, i) => (
|
|
<div key={i} className="contact-process">
|
|
<div className="box-number">{String(i + 1).padStart(2, '0')}</div>
|
|
<div className="media-body">
|
|
<h3 className="box-title">{f.title}</h3>
|
|
<p className="box-text">{f.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
// default: about-media layout
|
|
return (
|
|
<div className="about-media-wrap">
|
|
{features.map((f, i) => (
|
|
<div key={i} className="about-media">
|
|
<div className="box-icon"><img decoding="async" src={f.icon} alt={f.title} /></div>
|
|
<h3 className="box-title">{f.title}</h3>
|
|
<p className="box-text">{f.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|