Convert Tech Education Sponsorship to a detail modal (drop SITCON link)

- Replace the external github.com/sitcon-tw link with a SponsorModal
  popup opened from the "View details" button
- Modal shows program details, eligibility, support, cost and an
  apply-via-email CTA; reuses existing .modal-* / .eyebrow styles
- Add sponsorModal i18n content (EN + ZH); no SITCON association

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: smitug01

i18n.js

@@ -200,6 +200,21 @@ window.I18N = {
       sponsorTitle: "Tech Education Sponsorship Program",
       sponsorDesc: "Through equipment and cloud resource sponsorship, lending, and faculty support, we are committed to supporting technology education in schools across Taiwan, nurturing future information and technology professionals.",
       sponsorBtn: "View details",
+      sponsorModal: {
+        eyebrow: "Tech Education",
+        title: "Sponsorship Program Details",
+        desc: "Simple Information's Tech Education Sponsorship Program provides schools, student clubs, and non-profit tech communities with the infrastructure they need to learn, build, and grow — at no cost.",
+        items: [
+          ["What we provide", "Dedicated servers, VPS instances, cloud storage, and network resources"],
+          ["Eligibility", "Schools, student clubs, and non-profit tech communities in Taiwan"],
+          ["Duration", "Annual, renewable based on program activity"],
+          ["Support", "Technical onboarding and a dedicated point of contact"],
+          ["Cost", "Free of charge"],
+        ],
+        applyLabel: "How to apply",
+        applyDesc: "Send us a brief introduction of your organization, how you plan to use the resources, and your expected needs. We'll get back to you within 5 business days.",
+        applyBtn: "Apply via email",
+      },
       casesTitle: "Where it lands",
       cases: [
         { t: "NCKU Codpy Community", d: "Providing hardware equipment for events, supporting the open source robotics software community, and promoting open source innovation." },
@@ -422,6 +437,21 @@ window.I18N = {
       sponsorTitle: "科技教育贊助計畫",
       sponsorDesc: "透過設備與雲端資源贊助、借用與師資提供，我們致力支持台灣各級學校的科技教育，培養未來的資訊、科技中堅力量。",
       sponsorBtn: "查看詳情",
+      sponsorModal: {
+        eyebrow: "科技教育",
+        title: "贊助計畫詳情",
+        desc: "簡單資訊的科技教育贊助計畫，免費提供各級學校、學生社團與非營利科技社群所需的基礎設施資源，讓更多人能夠學習、創作與成長。",
+        items: [
+          ["提供內容", "實體伺服器、VPS、雲端儲存與網路資源"],
+          ["申請資格", "台灣境內各級學校、學生社團及非營利科技社群"],
+          ["贊助期限", "一年為期，依計畫活躍度續約"],
+          ["技術支援", "提供技術導入協助與專屬聯絡窗口"],
+          ["費用", "完全免費"],
+        ],
+        applyLabel: "如何申請",
+        applyDesc: "請來信簡述貴單位背景、資源使用規劃及預估需求，我們將於五個工作天內回覆。",
+        applyBtn: "寄信申請",
+      },
       casesTitle: "落地之處",
       cases: [
         { t: "成大開源機器人系統軟體社群", d: "提供活動硬體設備，支持開源機器人系統軟體社群，促進開源技術與創新。" },

pages.jsx

@@ -119,8 +119,49 @@ function PartnershipPage({ t, motif, go }) {
 /* ============================================================
    RESPONSIBILITY PAGE
    ============================================================ */
+function SponsorModal({ t, onClose }) {
+  const r = t.responsibility;
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("keydown", onKey);
+    document.body.style.overflow = "hidden";
+    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
+  }, []);
+  const m = r.sponsorModal;
+  return (
+    <div className="modal-scrim" onClick={onClose}>
+      <div className="modal" style={{ maxWidth: "600px" }} onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
+        <button className="modal-close icon-btn" onClick={onClose} aria-label="Close"><Icon name="close" /></button>
+        <div className="modal-body" style={{ paddingTop: "32px" }}>
+          <span className="eyebrow"><span className="tick"></span>{m.eyebrow}</span>
+          <h2 style={{ fontSize: "22px", fontWeight: 700, margin: "12px 0 8px", lineHeight: 1.3 }}>{m.title}</h2>
+          <p style={{ fontSize: "15px", color: "var(--ink-2)", lineHeight: 1.7, marginBottom: "28px" }}>{m.desc}</p>
+
+          <dl className="modal-specs">
+            {m.items.map(([dt, dd]) => (
+              <div className="modal-spec" key={dt}>
+                <dt>{dt}</dt>
+                <dd>{dd}</dd>
+              </div>
+            ))}
+          </dl>
+
+          <div style={{ marginTop: "28px", padding: "20px", background: "var(--surface-2)", borderRadius: "12px", border: "1px solid var(--line)" }}>
+            <p style={{ fontSize: "13px", color: "var(--ink-3)", marginBottom: "6px", fontWeight: 600, textTransform: "uppercase", letterSpacing: ".08em" }}>{m.applyLabel}</p>
+            <p style={{ fontSize: "14.5px", color: "var(--ink-2)", lineHeight: 1.6, marginBottom: "16px" }}>{m.applyDesc}</p>
+            <a href="mailto:sales@simple.taipei" className="btn" style={{ display: "inline-flex", alignItems: "center", gap: "8px" }}>
+              {m.applyBtn}<Icon name="mail" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function ResponsibilityPage({ t, motif, go }) {
   const r = t.responsibility;
+  const [sponsorOpen, setSponsorOpen] = useState(false);
   return (
     <main>
       <PageHero eyebrow={r.eyebrow} prefix={r.heroPrefix} rotating={r.rotating} title={r.title} subtitle={r.subtitle} cta={r.cta} ctaHref="#/responsibility" motif={motif} />
@@ -162,7 +203,7 @@ function ResponsibilityPage({ t, motif, go }) {
               <Eyebrow>{r.eyebrow}</Eyebrow>
               <h2 className="sec-title">{r.sponsorTitle}</h2>
               <p>{r.sponsorDesc}</p>
-              <a href="https://github.com/sitcon-tw/2026-cfs" target="_blank" rel="noopener noreferrer" className="tlink">{r.sponsorBtn}<Icon name="arrowUpRight" /></a>
+              <button onClick={() => setSponsorOpen(true)} className="tlink" style={{ background: "none", border: "none", cursor: "pointer", font: "inherit", color: "inherit", display: "inline-flex", alignItems: "center", gap: "6px", padding: 0 }}>{r.sponsorBtn}<Icon name="arrowUpRight" /></button>
             </div>
             <div className="rs-sponsor-deco">
               <Icon name="network" className="rs-sponsor-glyph" />
@@ -171,6 +212,8 @@ function ResponsibilityPage({ t, motif, go }) {
         </div>
       </section>
 
+      {sponsorOpen && <SponsorModal t={t} onClose={() => setSponsorOpen(false)} />}
+
       {/* Case studies */}
       <section className="section rs-cases">
         <div className="wrap">