feat: elevate speedrunethereum, add quickstarts

app/[locale]/developers/page.tsx

@@ -5,13 +5,16 @@ import { Lang } from "@/lib/types"
 import { ChildOnlyProp } from "@/lib/types"
 
 import CalloutSSR from "@/components/CalloutSSR"
-import Card from "@/components/Card"
+import OldCard from "@/components/Card"
+import { CopyButton } from "@/components/CopyToClipboard"
 import FeedbackCard from "@/components/FeedbackCard"
 import HubHero from "@/components/Hero/HubHero"
 import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
 import { ButtonLink } from "@/components/ui/buttons/Button"
-import { Stack, VStack } from "@/components/ui/flex"
+import { Card } from "@/components/ui/card"
+import { VStack } from "@/components/ui/flex"
+import Link from "@/components/ui/Link"
 import InlineLink from "@/components/ui/Link"
 
 import { getMetadata } from "@/lib/utils/metadata"
@@ -80,7 +83,7 @@ const DevelopersPage = async ({
     },
     {
       emoji: ":woman_scientist:",
-      title: t("page-developers-start"),
+      title: t("page-developers-resources"),
       description: t("page-developers-start-desc"),
       url: "/developers/learning-tools/",
       button: t("page-developers-play-code"),
@@ -104,43 +107,98 @@ const DevelopersPage = async ({
         title={tCommon("developers")}
         description={t("page-developers-subtitle")}
       />
+
       <MainArticle className="w-full space-y-12 px-8 py-4">
         <h2 className="-mb-4 mt-12">{t("page-developers-get-started")}</h2>
 
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8 xl:mb-12">
+          <div
+            className="relative h-[450px]"
+            data-label="speedrunethereum-banner"
+          >
+            <Image
+              className="pointer-events-none absolute -z-[1] h-full rounded-t-2xl"
+              src={SpeedRunEthereumImage}
+              alt="SpeedRunEthereum banner"
+              sizes="100vw"
+              style={{ width: "100vw", objectFit: "cover" }}
+            />
+            <div className="z-[1] space-y-4 break-words px-6 py-10 md:space-y-6 lg:p-12">
+              <h3>{t("page-developers-start")}</h3>
+              <p>{t("page-developers-speedrunethereum-description")}</p>
+              <ButtonLink
+                href="https://speedrunethereum.com/"
+                size="lg"
+                className="mt-4"
+                customEventOptions={{
+                  eventCategory: "top_boxes",
+                  eventAction: "click",
+                  eventName: "speedrun",
+                }}
+              >
+                {t("page-developers-speedrunethereum-link")}
+              </ButtonLink>
+            </div>
+          </div>
+
+          <Card className="!space-y-8 break-words border border-accent-c/20 bg-gradient-to-t from-accent-c/15 to-accent-c/5 px-6 py-10 md:space-y-6 lg:p-12">
+            <h3>{t("page-developers-jump-right-in-title")}</h3>
+            <div className="space-y-6">
+              <div className="space-y-1">
+                <p className="font-bold">Scaffold-ETH 2</p>
+                <p className="text-sm text-body-medium">
+                  {t("page-developers-quickstart-scaffold-subtext")}{" "}
+                  <Link href="https://docs.scaffoldeth.io/">
+                    {t("page-developers-quickstart-scaffold-docs")}
+                  </Link>
+                </p>
+                <div className="flex items-center rounded-lg border bg-background px-3 py-1">
+                  <span className="flex-1 font-mono text-sm">
+                    npx create-eth@latest
+                  </span>
+                  <CopyButton
+                    message="npx create-eth@latest"
+                    size="sm"
+                    customEventOptions={{
+                      eventCategory: "top_boxes",
+                      eventAction: "click",
+                      eventName: "scaffold",
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <p className="mb-2 font-bold">Need to learn the language?</p>
+              <Link
+                href="https://docs.soliditylang.org/en/latest/"
+                customEventOptions={{
+                  eventCategory: "top_boxes",
+                  eventAction: "click",
+                  eventName: "solidity",
+                }}
+              >
+                {t("page-developers-solidity-docs")}
+              </Link>
+            </div>
+          </Card>
+        </div>
+
         <div className="-mx-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
           {paths.map((path, idx) => (
-            <Card
+            <OldCard
               className={`m-4 p-6 shadow-[0px_1px_3px_rgba(0,0,0,0.1)] transition-transform duration-100 hover:scale-105 hover:rounded hover:bg-background-highlight hover:shadow-[0px_8px_17px_rgba(0,0,0,0.15)] dark:shadow-[0px_1px_3px_rgba(60,60,60,0.1)]`}
               key={idx}
               emoji={path.emoji}
               title={path.title}
               description={path.description}
             >
               <ButtonLink href={path.url}>{path.button}</ButtonLink>
-            </Card>
+            </OldCard>
           ))}
         </div>
 
-        <div className="relative" data-label="speedrunethereum-banner">
-          <Image
-            className="h-[450px] xl:h-auto"
-            src={SpeedRunEthereumImage}
-            alt="SpeedRunEthereum banner"
-            sizes="100vw"
-            style={{
-              width: "100vw",
-              objectFit: "cover",
-              objectPosition: "20%",
-            }}
-          />
-          <Stack className="absolute top-0 max-w-lg items-start space-y-3 break-words p-6 md:top-12 md:ms-8 md:space-y-4 lg:p-8 xl:max-w-xl">
-            <h2>{t("page-developers-speedrunethereum-title")}</h2>
-            <ButtonLink href="https://speedrunethereum.com/">
-              {t("page-developers-speedrunethereum-link")}
-            </ButtonLink>
-          </Stack>
-        </div>
-
         <div className="flex w-full flex-col items-start justify-between lg:flex-row lg:items-center">
           <IntroColumn>
             <H2>{t("page-developers-about")}</H2>
@@ -170,6 +228,7 @@ const DevelopersPage = async ({
           </CalloutSSR>
         </div>
       </MainArticle>
+
       <div className="mt-8 w-full border-t bg-background-highlight px-0 py-16 shadow-table-item-box">
         <div className="w-full scroll-mt-24 px-8 py-4">
           <H2>{t("page-developers-explore-documentation")}</H2>

src/components/CopyToClipboard.tsx

@@ -1,7 +1,12 @@
 "use client"
 
+import { BsCopy } from "react-icons/bs"
+import { FaRegCheckCircle } from "react-icons/fa"
+
 import { cn } from "@/lib/utils/cn"
 
+import { Button, type ButtonProps } from "./ui/buttons/Button"
+
 import { useClipboard } from "@/hooks/useClipboard"
 
 export type CopyToClipboardProps = {
@@ -27,4 +32,17 @@ const CopyToClipboard = ({
   )
 }
 
+type CopyButtonProps = ButtonProps & {
+  message: string
+}
+
+export const CopyButton = ({ message, ...props }: CopyButtonProps) => {
+  const { onCopy, hasCopied } = useClipboard({ timeout: 1500 })
+  return (
+    <Button variant="ghost" onClick={() => onCopy(message)} {...props}>
+      {hasCopied ? <FaRegCheckCircle /> : <BsCopy />}
+    </Button>
+  )
+}
+
 export default CopyToClipboard

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

@@ -28,7 +28,7 @@
   "page-developers-fundamentals": "Fundamentals",
   "page-developers-gas-desc": "Ether needed to power transactions",
   "page-developers-gas-link": "Gas",
-  "page-developers-get-started": "How would you like to get started?",
+  "page-developers-get-started": "Experiment with Ethereum",
   "page-developers-improve-ethereum": "Help us make ethereum.org better",
   "page-developers-improve-ethereum-desc": "Like ethereum.org, these docs are a community effort. Create a PR if you see mistakes, room for improvement, or new opportunities to help Ethereum developers.",
   "page-developers-into-eth-desc": "An introduction to blockchain and Ethereum",
@@ -41,6 +41,7 @@
   "page-developers-intro-stack-desc": "An introduction to the Ethereum stack",
   "page-developers-js-libraries-desc": "Using JavaScript to interact with smart contracts",
   "page-developers-js-libraries-link": "JavaScript libraries",
+  "page-developers-jump-right-in-title": "Quickstart your idea",
   "page-developers-language-desc": "Using Ethereum with familiar languages",
   "page-developers-languages": "Programming languages",
   "page-developers-learn": "Learn Ethereum development",
@@ -62,7 +63,10 @@
   "page-developers-oracle-desc": "Getting offchain data into your smart contracts",
   "page-developers-oracles-link": "Oracles",
   "page-developers-play-code": "Play with code",
+  "page-developers-quickstart-scaffold-subtext": "Bootstrap your Ethereum app stack in seconds.",
+  "page-developers-quickstart-scaffold-docs": "Read Scaffold-ETH 2 docs",
   "page-developers-read-docs": "Read the docs",
+  "page-developers-resources": "Resources",
   "page-developers-scaling-desc": "Solutions for faster transactions",
   "page-developers-scaling-link": "Scaling",
   "page-developers-smart-contract-security-desc": "Security measures to consider during development of smart contracts",
@@ -71,10 +75,12 @@
   "page-developers-setup-desc": "Get your stack ready for building by configuring a development environment.",
   "page-developers-smart-contracts-desc": "The logic behind dapps – self-executing agreements",
   "page-developers-smart-contracts-link": "Smart contracts",
+  "page-developers-solidity-docs": "Read the Solidity docs",
   "page-developers-speedrunethereum-title": "Learn all the most important concepts by building on Ethereum",
+  "page-developers-speedrunethereum-description": "Hands-on challenges such as building NFTs, DEXs in a step-by-step tutorial series.",
   "page-developers-speedrunethereum-link": "SpeedRun Ethereum",
   "page-developers-stack": "The stack",
-  "page-developers-start": "Start experimenting",
+  "page-developers-start": "Start with guided challenges",
   "page-developers-start-desc": "Want to experiment first, ask questions later?",
   "page-developers-storage-desc": "How to handle dapp storage",
   "page-developers-storage-link": "Storage",