feat: add ethskills callout section to /developers

app/[locale]/developers/page.tsx

@@ -27,6 +27,7 @@ import { VStack } from "@/components/ui/flex"
 import Link from "@/components/ui/Link"
 import InlineLink from "@/components/ui/Link"
 import { Section } from "@/components/ui/section"
+import { TerminalTypewriter } from "@/components/ui/terminal-typewriter"
 
 import { cn } from "@/lib/utils/cn"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
@@ -221,6 +222,47 @@ const DevelopersPage = async ({ params }: { params: PageParams }) => {
             <WhyGrid />
           </Section>
 
+          <Section
+            id="ethskills"
+            className="flex flex-col gap-8 py-10 sm:items-center md:py-16"
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/images/developers/ethskills.svg"
+              alt="ETHSKILLS"
+              className="h-auto max-h-24 w-full max-w-2xl object-contain"
+            />
+
+            <div className="max-w-xl space-y-2 md:text-center">
+              <h2>{t("page-developers-ethskills-title")}</h2>
+              <p className="text-body-medium">
+                {t("page-developers-ethskills-desc")}
+              </p>
+            </div>
+
+            <TerminalTypewriter
+              messages={[
+                t("page-developers-ethskills-msg-1"),
+                t("page-developers-ethskills-msg-2"),
+                t("page-developers-ethskills-msg-3"),
+                t("page-developers-ethskills-msg-4"),
+                t("page-developers-ethskills-msg-5"),
+              ]}
+            />
+
+            <ButtonLink
+              href="https://ethskills.com/"
+              size="lg"
+              customEventOptions={{
+                eventCategory: "ethskills",
+                eventAction: "click",
+                eventName: "ethskills-section-cta",
+              }}
+            >
+              {t("page-developers-ethskills-cta", { ethskills: "ethskills" })}
+            </ButtonLink>
+          </Section>
+
           <Section
             id="resources"
             className={cn(
@@ -284,17 +326,6 @@ const DevelopersPage = async ({ params }: { params: PageParams }) => {
                 >
                   Scaffold-ETH 2 <code>llms-full.txt</code>
                 </Link>
-                <Link
-                  href="https://ethskills.com/"
-                  className="block"
-                  customEventOptions={{
-                    eventCategory: "mid_boxes",
-                    eventAction: "click",
-                    eventName: "ethskills",
-                  }}
-                >
-                  ethskills.com - {t("page-developers-ethskills-label")}
-                </Link>
               </div>
             </Card>
 

src/components/ui/__stories__/TerminalTypewriter.stories.tsx

@@ -0,0 +1,42 @@
+import { useTranslations } from "next-intl"
+import { Meta, StoryObj } from "@storybook/react"
+
+import { TerminalTypewriter as TerminalTypewriterComponent } from "../terminal-typewriter"
+
+const meta = {
+  title: "Molecules / Display Content / TerminalTypewriter",
+  component: TerminalTypewriterComponent,
+  decorators: [
+    (Story) => (
+      <div className="w-[42rem]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TerminalTypewriterComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const TerminalTypewriter = () => {
+  const t = useTranslations("page-developers-index")
+  return (
+    <TerminalTypewriterComponent
+      messages={[
+        t("page-developers-ethskills-msg-1"),
+        t("page-developers-ethskills-msg-2"),
+        t("page-developers-ethskills-msg-3"),
+        t("page-developers-ethskills-msg-4"),
+        t("page-developers-ethskills-msg-5"),
+      ]}
+    />
+  )
+}
+
+export const Default: Story = {
+  args: {
+    messages: [],
+  },
+  render: () => <TerminalTypewriter />,
+}

src/components/ui/terminal-typewriter.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { cn } from "@/lib/utils/cn"
+
+const TYPING_MS = 60
+const DELETE_MS = 28
+const PAUSE_MS = 2000
+const NEXT_MS = 350
+
+type Phase = "typing" | "paused" | "deleting"
+
+interface TerminalTypewriterProps {
+  messages: string[]
+  className?: string
+}
+
+export function TerminalTypewriter({
+  messages,
+  className,
+}: TerminalTypewriterProps) {
+  const [msgIdx, setMsgIdx] = useState(0)
+  const [text, setText] = useState("")
+  const [phase, setPhase] = useState<Phase>("typing")
+  useEffect(() => {
+    if (messages.length === 0) return
+
+    const msg = messages[msgIdx]
+    let id: ReturnType<typeof setTimeout>
+
+    if (phase === "typing") {
+      if (text.length < msg.length) {
+        id = setTimeout(() => setText(msg.slice(0, text.length + 1)), TYPING_MS)
+      } else {
+        id = setTimeout(() => setPhase("paused"), 50)
+      }
+    } else if (phase === "paused") {
+      id = setTimeout(() => setPhase("deleting"), PAUSE_MS)
+    } else {
+      if (text.length > 0) {
+        id = setTimeout(() => setText((t) => t.slice(0, -1)), DELETE_MS)
+      } else {
+        id = setTimeout(() => {
+          setMsgIdx((i) => (i + 1) % messages.length)
+          setPhase("typing")
+        }, NEXT_MS)
+      }
+    }
+
+    return () => clearTimeout(id)
+  }, [text, phase, msgIdx, messages])
+
+  if (messages.length === 0) return null
+
+  return (
+    <div className={cn("w-full max-w-2xl", className)}>
+      <div
+        dir="ltr"
+        className="dark rounded-lg border bg-background-highlight px-5 py-4"
+      >
+        <div className="mb-3 flex items-center gap-1.5">
+          <span className="size-3 rounded-full bg-red-500/90" />
+          <span className="size-3 rounded-full bg-yellow-400/90" />
+          <span className="size-3 rounded-full bg-green-500/90" />
+        </div>
+        <div className="flex items-center overflow-hidden font-mono text-sm">
+          <span className="shrink-0 select-none self-start text-green-400">
+            {"$\u00a0"}
+          </span>
+          <span
+            dir="auto"
+            data-label="cli"
+            className="text-start text-amber-100 max-sm:h-[2lh]"
+          >
+            {text}
+            <span className="animate-blink text-amber-100">{"█"}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/intl/ar/page-developers-index.json

@@ -19,7 +19,15 @@
   "page-developers-dev-env-link": "بيئات التطوير",
   "page-developers-discord": "انضم لنا على الديسكورد",
   "page-developers-docs-introductions": "المقدمات",
+  "page-developers-ethskills-cta": "ابنِ مع {ethskills}",
+  "page-developers-ethskills-desc": "معرفة منظمة بإيثريوم لحزمة الوكلاء الذكية. امنح وكيل الذكاء الاصطناعي الخاص بك السياق الذي يحتاجه لقراءة الحالة وإرسال المعاملات والتنسيق مع البروتوكولات، دون مغادرة نافذة سياق النموذج.",
   "page-developers-ethskills-label": "سياق وكيل الذكاء الاصطناعي لإيثريوم",
+  "page-developers-ethskills-msg-1": "أطلق عملة لمجتمعي",
+  "page-developers-ethskills-msg-2": "أنشئ نادي معجبين يدفع لي عندما ينضم الناس",
+  "page-developers-ethskills-msg-3": "اجعل فني يكسب عوائد في كل مرة يُعاد بيعه",
+  "page-developers-ethskills-msg-4": "أنشئ DAO ودع معجبيّ يصوتون على ما أبنيه",
+  "page-developers-ethskills-msg-5": "أعدّ خزنة تنمّي ETH الخاص بي وأنا نائم",
+  "page-developers-ethskills-title": "ابنِ على السلسلة مع الوكلاء",
   "page-developers-evm-desc": "الكمبيوتر الذي يعالج المعاملات",
   "page-developers-evm-link": "جهاز إثيريوم الظاهري (EVM)",
   "page-developers-explore-documentation": "استكشاف الوثائق",

src/intl/bn/page-developers-index.json

@@ -11,7 +11,15 @@
   "page-developers-dev-env-desc": "যে IDE-গুলি ড্যাপ ডেভেলপমেন্টের জন্য উপযুক্ত",
   "page-developers-dev-env-link": "ডেভেলপমেন্টের পরিবেশ",
   "page-developers-docs-introductions": "পরিচিতি",
+  "page-developers-ethskills-cta": "{ethskills} দিয়ে তৈরি করুন",
+  "page-developers-ethskills-desc": "এজেন্টিক স্ট্যাকের জন্য কাঠামোবদ্ধ Ethereum জ্ঞান। আপনার AI এজেন্টকে স্টেট পড়তে, লেনদেন পাঠাতে এবং প্রোটোকলের সাথে সমন্বয় করতে প্রয়োজনীয় প্রসঙ্গ দিন, মডেলের কনটেক্সট উইন্ডো না ছেড়েই।",
   "page-developers-ethskills-label": "ইথেরিয়ামের জন্য AI এজেন্ট প্রসঙ্গ",
+  "page-developers-ethskills-msg-1": "আমার কমিউনিটির জন্য একটি কয়েন চালু করো",
+  "page-developers-ethskills-msg-2": "একটি ফ্যান ক্লাব তৈরি করো যা লোকেরা যোগ দিলে আমাকে টাকা দেয়",
+  "page-developers-ethskills-msg-3": "আমার শিল্পকে প্রতিবার পুনরায় বিক্রি হলে রয়্যালটি আয় করতে দাও",
+  "page-developers-ethskills-msg-4": "একটি DAO তৈরি করো এবং আমার ভক্তদের ভোট দিতে দাও আমি কী তৈরি করব",
+  "page-developers-ethskills-msg-5": "একটি ভল্ট সেট আপ করো যা আমি ঘুমানোর সময় আমার ETH বাড়ায়",
+  "page-developers-ethskills-title": "এজেন্টদের সাথে অনচেইন তৈরি করুন",
   "page-developers-evm-desc": "যে কম্পিউটার লেনদেনগুলিকে প্রক্রিয়া করে",
   "page-developers-evm-link": "ইথেরিয়াম ভার্চুয়াল মেশিন (EVM)",
   "page-developers-explore-documentation": "নথিপত্র অন্বেষণ করুন",

src/intl/cs/page-developers-index.json

@@ -11,7 +11,15 @@
   "page-developers-dev-env-desc": "Vývojová prostředí (IDE) vhodná pro vývoj dappek",
   "page-developers-dev-env-link": "Vývojová prostředí",
   "page-developers-docs-introductions": "Úvod",
+  "page-developers-ethskills-cta": "Stavějte s {ethskills}",
+  "page-developers-ethskills-desc": "Strukturované znalosti o Ethereu pro agentní stack. Dejte svému AI agentovi kontext, který potřebuje ke čtení stavu, odesílání transakcí a koordinaci s protokoly, aniž by opustil kontextové okno modelu.",
   "page-developers-ethskills-label": "Kontext AI agenta pro Ethereum",
+  "page-developers-ethskills-msg-1": "spustit minci pro moji komunitu",
+  "page-developers-ethskills-msg-2": "vytvořit fanouškovský klub, který mi platí, když se lidé přidají",
+  "page-developers-ethskills-msg-3": "nechat mé umění vydělávat tantiémy při každém dalším prodeji",
+  "page-developers-ethskills-msg-4": "vytvořit DAO a nechat mé fanoušky hlasovat o tom, co stavím",
+  "page-developers-ethskills-msg-5": "nastavit trezor, který rozmnožuje mé ETH, zatímco spím",
+  "page-developers-ethskills-title": "Stavějte na blockchainu s agenty",
   "page-developers-evm-desc": "Počítač, který zpracovává transakce",
   "page-developers-evm-link": "Virtuální stroj Etherea (EVM)",
   "page-developers-explore-documentation": "Prozkoumej dokumentaci.",

src/intl/de/page-developers-index.json

@@ -11,7 +11,15 @@
   "page-developers-dev-env-desc": "IDEs, die für DApp-Entwicklung geeignet sind",
   "page-developers-dev-env-link": "Entwicklungsumgebungen",
   "page-developers-docs-introductions": "Einführung",
+  "page-developers-ethskills-cta": "Baue mit {ethskills}",
+  "page-developers-ethskills-desc": "Strukturiertes Ethereum-Wissen für den agentischen Stack. Gib deinem KI-Agenten den Kontext, den er braucht, um den State zu lesen, Transaktionen zu senden und mit Protokollen zu koordinieren -- ohne das Kontextfenster des Modells zu verlassen.",
   "page-developers-ethskills-label": "KI-Agenten-Kontext für Ethereum",
+  "page-developers-ethskills-msg-1": "starte einen Coin für meine Community",
+  "page-developers-ethskills-msg-2": "baue einen Fanclub, der mich bezahlt, wenn Leute beitreten",
+  "page-developers-ethskills-msg-3": "lass meine Kunst bei jedem Weiterverkauf Tantiemen verdienen",
+  "page-developers-ethskills-msg-4": "erstelle eine DAO und lass meine Fans abstimmen, was ich baue",
+  "page-developers-ethskills-msg-5": "richte einen Vault ein, der meine ETH vermehrt, während ich schlafe",
+  "page-developers-ethskills-title": "Baue onchain mit Agenten",
   "page-developers-evm-desc": "Der Computer, der Transaktionen verarbeitet",
   "page-developers-evm-link": "Die Ethereum Virtual Machine (EVM)",
   "page-developers-explore-documentation": "Dokumentation erkunden",