first commit

src/components/RecruitSection.tsx

@@ -0,0 +1,46 @@
+import { getTranslations } from "next-intl/server";
+
+export default async function RecruitSection() {
+  const t = await getTranslations("recruit");
+
+  const positions = [t("pos1"), t("pos2"), t("pos3"), t("pos4")];
+
+  return (
+    <section className="about-section about-section--light">
+      <div className="about-sub-block">
+        <div className="about-divider-label">
+          <div className="about-divider-label-row">
+            <span className="about-divider-label-text">{t("label")}</span>
+            <span className="about-mono-tag about-mono-tag--muted">{t("tag")}</span>
+          </div>
+        </div>
+        <h2 className="recruit-title">{t("title")}</h2>
+      </div>
+
+      <div className="recruit-content">
+        <div className="recruit-left">
+          <span className="recruit-col-label">{t("positionsLabel")}</span>
+          <div className="recruit-positions">
+            {positions.map((pos, i) => (
+              <div
+                key={pos}
+                className={`recruit-pos${i < positions.length - 1 ? " recruit-pos--border" : ""}`}
+              >
+                <span className="recruit-pos-title">{pos}</span>
+                <span className="recruit-pos-arrow">&rarr;</span>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="recruit-right">
+          <span className="recruit-col-label">{t("newsLabel")}</span>
+          <div className="recruit-news-placeholder">
+            <span style={{ fontSize: 32 }}>📰</span>
+            <span className="recruit-news-text">{t("newsPlaceholder")}</span>
+            <span className="recruit-news-desc">{t("newsDesc")}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}