first commit

2026-02-03 15:47:03 +08:00
parent 94b39b2099
commit e87c9006a8
52 changed files with 5762 additions and 119 deletions
--- a/src/components/AICapabilitiesSection.tsx
+++ b/src/components/AICapabilitiesSection.tsx
@@ -0,0 +1,83 @@
+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>
+  );
+}