33 lines
797 B
TypeScript
33 lines
797 B
TypeScript
import { Card, SectionHeader } from "denjs-ui";
|
|
import { getProblems } from "#/entities/landing";
|
|
import { useMessages } from "#/shared/lib/i18n";
|
|
|
|
export function ProblemSection() {
|
|
const m = useMessages();
|
|
|
|
return (
|
|
<section id="problem" className="mt-10 sm:mt-14">
|
|
<SectionHeader
|
|
eyebrow={m.problem_eyebrow()}
|
|
title={m.problem_title()}
|
|
subtitle={m.problem_subtitle()}
|
|
align="left"
|
|
className="max-w-3xl"
|
|
/>
|
|
|
|
<div className="mt-5 grid gap-4 md:grid-cols-3">
|
|
{getProblems(m).map((item, index) => (
|
|
<Card
|
|
key={item.title}
|
|
title={item.title}
|
|
description={item.text}
|
|
padding="lg"
|
|
className="feature-card rise-in rounded-2xl"
|
|
style={{ animationDelay: `${index * 90 + 110}ms` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|