90 lines
4.9 KiB
TypeScript
90 lines
4.9 KiB
TypeScript
import { Card } from '@/components/ui/card';
|
|
import { getPageSection, getPropertyArray } from '@/lib/page';
|
|
import { cn } from '@/lib/utils';
|
|
import { IntroPageProps } from '@/types/page';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { DynamicIcon } from 'lucide-react/dynamic';
|
|
import Section from '../section';
|
|
import Partners from './partners';
|
|
|
|
const Overview = () => {
|
|
const { props } = usePage<IntroPageProps>();
|
|
const overviewSection = getPageSection(props.page, 'overview');
|
|
const array = getPropertyArray(overviewSection);
|
|
const firstStat = array[0] ?? null;
|
|
const secondStat = array[1] ?? null;
|
|
const thirdStat = array[2] ?? null;
|
|
|
|
return (
|
|
<Section customize={props.customize} pageSection={overviewSection} containerClass={cn('relative')} contentClass="py-20">
|
|
<div className="mb-10 flex flex-col items-center justify-between gap-12 md:flex-row">
|
|
{/* Left side - Content */}
|
|
<div className="relative z-10 w-full space-y-4 md:max-w-[420px]">
|
|
<h2 className="w-full text-3xl font-semibold md:text-4xl">{overviewSection?.title}</h2>
|
|
<p className="text-muted-foreground">{overviewSection?.description}</p>
|
|
</div>
|
|
|
|
{/* Right side - Stats Grid */}
|
|
<div className="relative md:max-w-[640px]">
|
|
<div className="relative z-10 grid w-full grid-cols-1 gap-7 sm:grid-cols-2">
|
|
{firstStat && (
|
|
<Card className="bg-background/20 dark:border-border border-2 border-white px-6 py-16 !shadow-none backdrop-blur-lg md:py-[72px]">
|
|
<div className="shadow-card-md bg-background mx-auto mt-3 flex h-[60px] w-[60px] items-center justify-center rounded-2xl">
|
|
<div className="bg-secondary-foreground flex h-10 w-10 items-center justify-center rounded-full">
|
|
<DynamicIcon name={firstStat.icon} className="h-6 w-6 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 space-y-2 text-center">
|
|
<h3 className="text-4xl font-semibold md:text-[44px]">{firstStat.count}</h3>
|
|
<p className="mt-2">{firstStat.title}</p>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="space-y-7">
|
|
{secondStat && (
|
|
<Card className="bg-background/20 dark:border-border flex items-center justify-center gap-4 border-2 border-white px-6 py-8 !shadow-none backdrop-blur-lg md:py-8">
|
|
<div className="shadow-card-md bg-background flex h-[60px] w-[60px] items-center justify-center rounded-2xl">
|
|
<div className="bg-secondary-foreground flex h-10 w-10 items-center justify-center rounded-full">
|
|
<DynamicIcon name={secondStat.icon} className="h-6 w-6 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="text-4xl font-semibold md:text-[44px]">{secondStat.count}</h3>
|
|
<p className="mt-2">{secondStat.title}</p>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{thirdStat && (
|
|
<Card className="bg-background/20 dark:border-border flex items-center justify-center gap-4 border-2 border-white px-6 py-8 !shadow-none backdrop-blur-lg md:py-8">
|
|
<div className="shadow-card-md bg-background flex h-[60px] w-[60px] items-center justify-center rounded-2xl">
|
|
<div className="bg-secondary-foreground flex h-10 w-10 items-center justify-center rounded-full">
|
|
<DynamicIcon name={thirdStat.icon} className="h-6 w-6 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="text-4xl font-semibold md:text-[44px]">{thirdStat.count}</h3>
|
|
<p className="mt-2">{thirdStat.title}</p>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="after:pointer-events-none after:absolute after:top-1/2 after:left-1/2 after:h-[240px] after:w-[240px] after:-translate-x-1/2 after:-translate-y-1/2 after:bg-[rgba(97,95,255,1)] after:blur-[290px] after:content-['']"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<Partners />
|
|
|
|
<div className="after:pointer-events-none after:absolute after:-top-14 after:-left-[180px] after:h-[240px] after:w-[240px] after:rounded-full after:bg-[rgba(0,167,111,1)] after:blur-[290px] after:content-['']"></div>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default Overview;
|