84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
|
import { getTranslations } from "next-intl/server";
|
||
|
|
|
||
|
|
export default async function AICapabilitiesSection() {
|
||
|
|
const t = await getTranslations("aiCap");
|
||
|
|
|
||
|
|
const aiCards = [
|
||
|
|
{
|
||
|
|
num: t("card1Num"),
|
||
|
|
title: t("card1Title"),
|
||
|
|
desc: t("card1Desc"),
|
||
|
|
metrics: [
|
||
|
|
{ label: t("card1Metric1Label"), value: t("card1Metric1Value") },
|
||
|
|
{ label: t("card1Metric2Label"), value: t("card1Metric2Value") },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
num: t("card2Num"),
|
||
|
|
title: t("card2Title"),
|
||
|
|
desc: t("card2Desc"),
|
||
|
|
metrics: [
|
||
|
|
{ label: t("card2Metric1Label"), value: t("card2Metric1Value") },
|
||
|
|
{ label: t("card2Metric2Label"), value: t("card2Metric2Value") },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
num: t("card3Num"),
|
||
|
|
title: t("card3Title"),
|
||
|
|
desc: t("card3Desc"),
|
||
|
|
metrics: [
|
||
|
|
{ label: t("card3Metric1Label"), value: t("card3Metric1Value") },
|
||
|
|
{ label: t("card3Metric2Label"), value: t("card3Metric2Value") },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
num: t("card4Num"),
|
||
|
|
title: t("card4Title"),
|
||
|
|
desc: t("card4Desc"),
|
||
|
|
metrics: [
|
||
|
|
{ label: t("card4Metric1Label"), value: t("card4Metric1Value") },
|
||
|
|
{ label: t("card4Metric2Label"), value: t("card4Metric2Value") },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="section section--light">
|
||
|
|
<div className="cap-header">
|
||
|
|
<div className="cap-header-left">
|
||
|
|
<div className="cap-divider">
|
||
|
|
<span className="cap-divider-line" />
|
||
|
|
<span className="cap-divider-label">{t("label")}</span>
|
||
|
|
</div>
|
||
|
|
<h2 className="cap-title">{t("title")}</h2>
|
||
|
|
<p className="cap-subtitle">{t("subtitle")}</p>
|
||
|
|
</div>
|
||
|
|
<div className="cap-header-right">
|
||
|
|
<span className="cap-big-number">{t("moduleCount")}</span>
|
||
|
|
<span className="cap-metric-label">{t("moduleLabel")}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="cap-grid">
|
||
|
|
{aiCards.map((card) => (
|
||
|
|
<div key={card.num} className="cap-card cap-card--light">
|
||
|
|
<div className="cap-card-header">
|
||
|
|
<span className="cap-card-num">{card.num}</span>
|
||
|
|
<h3 className="cap-card-title">{card.title}</h3>
|
||
|
|
</div>
|
||
|
|
<p className="cap-card-desc">{card.desc}</p>
|
||
|
|
<div className="cap-card-metrics">
|
||
|
|
{card.metrics.map((m) => (
|
||
|
|
<div key={m.label} className="cap-card-metric">
|
||
|
|
<span className="cap-card-metric-label">{m.label}</span>
|
||
|
|
<span className="cap-card-metric-value">{m.value}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|