36 lines
2.0 KiB
TypeScript
36 lines
2.0 KiB
TypeScript
import { getPageSection, getPropertyArray } from '@/lib/page';
|
|
import { IntroPageProps } from '@/types/page';
|
|
import { usePage } from '@inertiajs/react';
|
|
import Section from '../section';
|
|
|
|
const Features = () => {
|
|
const { props } = usePage<IntroPageProps>();
|
|
const { page, customize } = props;
|
|
const featuresSection = getPageSection(page, 'features');
|
|
|
|
return (
|
|
<Section customize={customize} pageSection={featuresSection} containerClass="py-20" contentClass="relative z-10 grid gap-7 md:grid-cols-3">
|
|
{getPropertyArray(featuresSection).map((feature, index) => (
|
|
<div key={`key-${index}`} className="relative overflow-hidden rounded-2xl">
|
|
<div className="relative z-10 p-8">
|
|
<div className="after:pointer-events-none after:absolute after:-top-6 after:left-0 after:h-[98px] after:w-[98px] after:rounded-full after:bg-[#E4CBA866] after:blur-[72px] after:content-[''] dark:after:bg-[#e4cba834]"></div>
|
|
<div className="after:pointer-events-none after:absolute after:-bottom-9 after:-left-8 after:h-[116px] after:w-[116px] after:rounded-full after:bg-[#00A76F1A] after:blur-[72px] after:content-['']"></div>
|
|
|
|
<div className="space-y-3">
|
|
<img src={feature.image} alt="" className="h-[60px] w-auto" />
|
|
<h3 className="text-xl font-bold">{feature.title}</h3>
|
|
<p className="text-muted-foreground leading-relaxed">{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="after:pointer-events-none after:absolute after:top-0 after:left-0 after:h-20 after:w-20 after:rounded-full after:bg-[rgba(97,95,255,1))] after:blur-[140px] after:content-['']"></div>
|
|
|
|
<div className="after:pointer-events-none after:absolute after:right-0 after:bottom-0 after:h-20 after:w-20 after:rounded-full after:bg-[rgba(0,167,111,1)] after:blur-[140px] after:content-['']"></div>
|
|
</div>
|
|
))}
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default Features;
|