From 937822a01fc4ea7aade00486437dee4062d17cfa Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 9 Jul 2025 15:47:34 -0700 Subject: [PATCH 01/25] redesign: /developers above-the-fold (desktop) --- app/[locale]/developers/page.tsx | 127 ++++++++++-------- public/images/developers/speedrun-nft.png | Bin 0 -> 32355 bytes .../developers/speedrun-staking-app.png | Bin 0 -> 44729 bytes .../developers/speedrun-token-vendor.png | Bin 0 -> 59850 bytes src/intl/en/page-developers-index.json | 9 +- 5 files changed, 78 insertions(+), 58 deletions(-) create mode 100644 public/images/developers/speedrun-nft.png create mode 100644 public/images/developers/speedrun-staking-app.png create mode 100644 public/images/developers/speedrun-token-vendor.png diff --git a/app/[locale]/developers/page.tsx b/app/[locale]/developers/page.tsx index b1c844144c0..87aa4a9369d 100644 --- a/app/[locale]/developers/page.tsx +++ b/app/[locale]/developers/page.tsx @@ -1,11 +1,11 @@ -import { ReactNode } from "react" +import { type ReactNode } from "react" +import { type StaticImageData } from "next/image" import { getTranslations } from "next-intl/server" -import { Lang } from "@/lib/types" +import type { Lang } from "@/lib/types" import { ChildOnlyProp } from "@/lib/types" import CalloutSSR from "@/components/CalloutSSR" -import OldCard from "@/components/Card" import { CopyButton } from "@/components/CopyToClipboard" import FeedbackCard from "@/components/FeedbackCard" import HubHero from "@/components/Hero/HubHero" @@ -16,13 +16,17 @@ 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 { Tag } from "@/components/ui/tag" import { getMetadata } from "@/lib/utils/metadata" -import SpeedRunEthereumImage from "@/public/images/dev-tools/speed-run-ethereum-banner.png" -import DevelopersImage from "@/public/images/developers-eth-blocks.png" -import DogeImage from "@/public/images/doge-computer.png" -import HeroImage from "@/public/images/heroes/developers-hub-hero.jpg" +import speedRunEthereumImage from "@/public/images/dev-tools/speed-run-ethereum-banner.png" +import speedrunNFT from "@/public/images/developers/speedrun-nft.png" +import speedrunStakingApp from "@/public/images/developers/speedrun-staking-app.png" +import speedrunTokenVendor from "@/public/images/developers/speedrun-token-vendor.png" +import developersImage from "@/public/images/developers-eth-blocks.png" +import dogeImage from "@/public/images/doge-computer.png" +import heroImage from "@/public/images/heroes/developers-hub-hero.jpg" const H2 = (props: ChildOnlyProp) =>
@@ -44,7 +48,8 @@ const IntroColumn = (props: ChildOnlyProp) => ( ) type DevelopersPath = { - emoji: string + imgSrc: StaticImageData + imgAlt: string title: ReactNode description: ReactNode url: string @@ -68,39 +73,36 @@ const DevelopersPage = async ({ const paths: DevelopersPath[] = [ { - emoji: ":woman_student:", - title: t("page-developers-learn"), - description: t("page-developers-learn-desc"), - url: "/developers/docs/", - button: t("page-developers-read-docs"), + imgSrc: speedrunNFT, + imgAlt: "Speedrun Ethereum NFT banner", + title: "Simple NFT Example", // t("page-developers-learn"), + description: "Create a public NFT to learn the basics of scaffold-eth.", // t("page-developers-learn-desc"), + url: "https://speedrunethereum.com/challenge/simple-nft-example", + button: t("page-developers-start-quest"), }, { - emoji: ":woman_teacher:", - title: t("page-developers-learn-tutorials"), - description: t("page-developers-learn-tutorials-desc"), - url: "/developers/tutorials/", - button: t("page-developers-learn-tutorials-cta"), + imgSrc: speedrunStakingApp, + imgAlt: "Speedrun Ethereum staking app banner", + title: "Staking App", // t("page-developers-learn-tutorials"), + description: "Write a smart contract where users pool funds together.", // t("page-developers-learn-tutorials-desc"), + url: "https://speedrunethereum.com/challenge/decentralized-staking", + button: t("page-developers-start-quest"), }, { - emoji: ":woman_scientist:", - title: t("page-developers-resources"), - description: t("page-developers-start-desc"), - url: "/developers/learning-tools/", - button: t("page-developers-play-code"), - }, - { - emoji: ":construction_worker:", - title: t("page-developers-set-up"), - description: t("page-developers-setup-desc"), - url: "/developers/local-environment/", - button: t("page-developers-choose-stack"), + imgSrc: speedrunTokenVendor, + imgAlt: "Speedrun Ethereum token vendor project banner", + title: "Create a token", // t("page-developers-resources"), + description: + "Build a digital currency and a smart conract that trades it.", // t("page-developers-start-desc"), + url: "https://speedrunethereum.com/challenge/token-vendor", + button: t("page-developers-start-quest"), }, ] return (+ {path.description} +
+{t("page-developers-speedrunethereum-description")}
9(6(`Y}I^e;_Szop2VZT-zt2N5Bo*S27+
zZ$etw8N`0rZYP=n3~^ Vqfa~!Bk-(X3?=Ik|C`Zr5W?usby2T86Y0Yi4w7$b8)6lz6D
zvjY-xNglz}?=R`pR)MOYt4UR`KF^}kutPuWnxRL#j`>N^Yp?bWPq=sQ_}CbkMDTm$
zj3Lp%!y2B3gwGlh#gAG{>o=RFoQ6_<9vopjeqEJUSrbeTUMydrsz^Cwx>S!=xw!1H
zOyQ%D*$dDGKO?<+q&37k3#TaL2Z6;eXk{>dYm2ISbQwac&vS
z)#G|Rs@lTVTDX^C*HQvP
z^?CVH2u?;C2Y{xl6`e2FRlw1&6j^ZAZlDRl*ZcAD?Yd$|k!z&OI3LE_uxWM7pnLAX
zfFz
l2
zc%qdwl38t(aL@
zd%h~$i*EthJww1@lHF1`ms
2pt@y-%8iO5}K(C_)0`uWyUkXvp9knsH+^WVRU{0uD