54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { title, subtitle } from '@/components/primitives';
|
|
import { Card, CardHeader, CardBody, Avatar } from '@nextui-org/react';
|
|
import { Scale, Folder, Check, Globe } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
export default function MainTitle() {
|
|
const t = useTranslations('Index');
|
|
|
|
const features = [
|
|
{
|
|
title: t('oss_title'),
|
|
detail: t('oss_detail'),
|
|
icon: <Scale size={24} color="#52e280" />,
|
|
},
|
|
{
|
|
title: t('organize_title'),
|
|
detail: t('organize_detail'),
|
|
icon: <Folder size={24} color="#52e280" />,
|
|
},
|
|
{
|
|
title: t('usability_title'),
|
|
detail: t('usability_detail'),
|
|
icon: <Check size={24} color="#52e280" />,
|
|
},
|
|
{
|
|
title: t('universal_title'),
|
|
detail: t('universal_detail'),
|
|
icon: <Globe size={24} color="#52e280" />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{features.map((feature) => (
|
|
<Card key={feature.title} className="max-w-[300px] min-h-[180px]">
|
|
<CardHeader className="flex gap-3">
|
|
<div>
|
|
<Avatar className="bg-green-100" showFallback src="" fallback={feature.icon} />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<h4 className="font-bold text-large">{feature.title}</h4>
|
|
</div>
|
|
</CardHeader>
|
|
<CardBody className="pt-0">
|
|
<p className="text-default-500">{feature.detail}</p>
|
|
</CardBody>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|