From 8ac3ae26235a2598f17f24d9ba4d1c1ec32b1358 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 29 Sep 2025 13:21:21 -0700
Subject: [PATCH 1/3] refactor: bug-bounty page to ssr

---
 .../bug-bounty/_components/bug-bounty.tsx     | 801 ------------------
 app/[locale]/bug-bounty/page.tsx              | 633 +++++++++++++-
 src/intl/en/page-bug-bounty.json              |   2 +-
 3 files changed, 612 insertions(+), 824 deletions(-)
 delete mode 100644 app/[locale]/bug-bounty/_components/bug-bounty.tsx

diff --git a/app/[locale]/bug-bounty/_components/bug-bounty.tsx b/app/[locale]/bug-bounty/_components/bug-bounty.tsx
deleted file mode 100644
index c7711b64673..00000000000
--- a/app/[locale]/bug-bounty/_components/bug-bounty.tsx
+++ /dev/null
@@ -1,801 +0,0 @@
-"use client"
-
-import { HTMLAttributes } from "react"
-
-import type { ChildOnlyProp, PageWithContributorsProps } from "@/lib/types"
-
-/* Uncomment for Bug Bounty Banner: */
-import BugBountyBanner from "@/components/Banners/BugBountyBanner"
-import Breadcrumbs from "@/components/Breadcrumbs"
-import BugBountyCards from "@/components/BugBountyCards"
-import Card from "@/components/Card"
-import CardList from "@/components/CardList"
-import Emoji from "@/components/Emoji"
-import ExpandableCard from "@/components/ExpandableCard"
-import FeedbackCard from "@/components/FeedbackCard"
-import FileContributors from "@/components/FileContributors"
-import { Image, type ImageProps } from "@/components/Image"
-import Leaderboard from "@/components/Leaderboard"
-import MainArticle from "@/components/MainArticle"
-import Translation from "@/components/Translation"
-import { ButtonLink } from "@/components/ui/buttons/Button"
-import { Divider } from "@/components/ui/divider"
-import { Center, Flex, VStack } from "@/components/ui/flex"
-import InlineLink from "@/components/ui/Link"
-import { ListItem, UnorderedList } from "@/components/ui/list"
-
-import { cn } from "@/lib/utils/cn"
-
-import consensusData from "@/data/consensus-bounty-hunters.json"
-import executionData from "@/data/execution-bounty-hunters.json"
-
-import useColorModeValue from "@/hooks/useColorModeValue"
-import { useTranslation } from "@/hooks/useTranslation"
-import { usePathname } from "@/i18n/routing"
-import besu from "@/public/images/upgrades/besu.png"
-import erigon from "@/public/images/upgrades/erigon.png"
-import geth from "@/public/images/upgrades/geth.png"
-import grandine from "@/public/images/upgrades/grandine.png"
-import lighthouseDark from "@/public/images/upgrades/lighthouse-dark.png"
-import lighthouseLight from "@/public/images/upgrades/lighthouse-light.png"
-import lodestar from "@/public/images/upgrades/lodestar.png"
-import nethermind from "@/public/images/upgrades/nethermind.png"
-import nimbus from "@/public/images/upgrades/nimbus-cloud.png"
-import prysm from "@/public/images/upgrades/prysm.png"
-import reth from "@/public/images/upgrades/reth.png"
-import solidityDark from "@/public/images/upgrades/solidity-dark.png"
-import solidityLight from "@/public/images/upgrades/solidity-light.png"
-import tekuDark from "@/public/images/upgrades/teku-dark.png"
-import tekuLight from "@/public/images/upgrades/teku-light.png"
-import vyper from "@/public/images/upgrades/vyper.png"
-
-const Page = (props: ChildOnlyProp) => (
-  <MainArticle
-    className="mx-auto my-0 flex w-full flex-col items-center"
-    {...props}
-  />
-)
-
-const Content = (props: ChildOnlyProp) => (
-  <div className="w-full px-8 py-4" {...props} />
-)
-
-const Title = (props: ChildOnlyProp) => (
-  <Text className="mb-0 ms-2 text-sm uppercase text-body" {...props} />
-)
-
-const H2 = (props: HTMLAttributes<HTMLHeadingElement>) => (
-  <h2 className="mb-8 mt-12 text-center tracking-normal" {...props} />
-)
-
-const H4 = (props: ChildOnlyProp) => (
-  <h4 className="my-8 leading-xs" {...props} />
-)
-
-const Subtitle = (props: ChildOnlyProp) => (
-  <Text className="mt-4 max-w-[480px] leading-xs text-body-medium" {...props} />
-)
-
-const Text = ({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
-  <p className={cn("mb-6", className)} {...props} />
-)
-
-const SloganGradient = ({ children }: ChildOnlyProp) => (
-  <div
-    className="mt-4 max-w-[720px] overflow-auto bg-linear-bug-bounty-title bg-clip-text"
-    style={{ WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}
-  >
-    <h1 className="mb-6 text-4xl font-bold lg:text-5xl">{children}</h1>
-  </div>
-)
-
-const Rules = (props: ChildOnlyProp) => (
-  <VStack className="mx-auto my-0 max-w-3xl" {...props} />
-)
-
-const SubmitInstructions = (props: ChildOnlyProp) => (
-  <div className="me-8 max-w-[100ch] flex-1 basis-[600px]" {...props} />
-)
-
-const GradientContainer = (props: ChildOnlyProp) => (
-  <div
-    className="mt-8 w-full border-t bg-banner-grid-gradient px-0 py-16 shadow-table-item-box"
-    {...props}
-  />
-)
-
-const LeaderboardContainer = (props: ChildOnlyProp) => (
-  <VStack
-    className="flex-1 basis-1/2 p-0 lg:pb-32 lg:pl-0 lg:pr-8 lg:pt-24"
-    {...props}
-  />
-)
-
-const FullLeaderboardContainer = (props: ChildOnlyProp) => (
-  <VStack className="mx-auto my-8 max-w-3xl px-8 py-0" {...props} />
-)
-
-const On = () => <div className="h-2 w-2 rounded-full bg-success" />
-
-const Contact = (props: ChildOnlyProp) => (
-  <Flex
-    className="mx-32 my-12 w-4/5 items-center justify-between rounded-sm border border-border p-6"
-    {...props}
-  />
-)
-
-const ButtonRow = (props: ChildOnlyProp) => (
-  <Flex className="mt-4 flex-wrap items-center" {...props} />
-)
-
-const StyledButton = ({ children, ...props }) => (
-  <ButtonLink className="mb-0 me-4" href={props.href} {...props}>
-    {children}
-  </ButtonLink>
-)
-
-const ClientIntro = (props: ChildOnlyProp) => (
-  <Text className="mt-5xl uppercase lg:mt-0" {...props} />
-)
-
-const ClientRow = (props: ChildOnlyProp) => (
-  <VStack className="lg:flex-row" {...props} />
-)
-
-const Client = (props: ChildOnlyProp) => (
-  <div className="m-16 mb-12 mt-4 w-[60px]" {...props} />
-)
-
-const HeroCard = (props: ChildOnlyProp) => (
-  <VStack
-    className="-mt-8 justify-between lg:mt-0 lg:flex-row lg:ps-0"
-    {...props}
-  />
-)
-
-const HeroContainer = (props: ChildOnlyProp) => (
-  <div
-    className="flex-1 basis-1/2 pb-16 pl-0 pr-0 pt-24 lg:-mt-32 lg:pb-32 lg:pl-8 lg:pr-8 lg:pt-32"
-    {...props}
-  />
-)
-
-const Row = (props: ChildOnlyProp) => (
-  <Flex className="items-center lg:flex-wrap" {...props} />
-)
-
-const StyledCardContainer = (props: ChildOnlyProp) => (
-  <Flex className="-ml-4 -mr-4 mb-12 mt-8 flex-wrap" {...props} />
-)
-
-const StyledCard = ({ children, ...props }) => (
-  <Card className="m-4 flex-[1_1_464px] justify-start p-6" {...props}>
-    {children}
-  </Card>
-)
-
-const StyledGrayContainer = ({ children, ...props }) => (
-  <div
-    className="mb-12 mt-8 w-full border-t bg-background-highlight px-0 py-16 shadow-table-item-box"
-    {...props}
-  >
-    {children}
-  </div>
-)
-
-const Faq = (props: ChildOnlyProp) => (
-  <Flex className="mt-16 flex-col lg:flex-row" {...props} />
-)
-
-const LeftColumn = (props: ChildOnlyProp) => (
-  <div className="w-full" {...props} />
-)
-
-const RightColumn = (props: ChildOnlyProp) => (
-  <Flex className="ms-0 w-full flex-col lg:ms-8" {...props} />
-)
-
-type BountyHuntersArg = { score?: number }
-
-type Node = {
-  readonly name: string
-  readonly username: string
-  readonly score: number
-}
-
-type Client = {
-  title: string
-  link: string
-  image: ImageProps["src"]
-}
-
-type Spec = {
-  title: string
-  link: string
-}
-
-type Language = {
-  title: string
-  link: string
-  image: ImageProps["src"]
-}
-
-const sortBountyHuntersFn = (a: BountyHuntersArg, b: BountyHuntersArg) => {
-  if (!a.score || !b.score) return 0
-  return b.score - a.score
-}
-
-const BugBountiesPage = ({
-  contributors,
-  lastEditLocaleTimestamp,
-}: PageWithContributorsProps) => {
-  const pathname = usePathname()
-  const { t } = useTranslation("page-bug-bounty")
-
-  const consensusBountyHunters: Node[] = consensusData.sort(sortBountyHuntersFn)
-  const executionBountyHunters: Node[] = executionData.sort(sortBountyHuntersFn)
-
-  const bountyHuntersArrayToObject: Record<string, Node> = [
-    ...consensusData,
-    ...executionData,
-  ].reduce((acc, next) => {
-    const name = next.name
-    if (!name) return acc
-
-    if (acc[name]) {
-      return {
-        ...acc,
-        [name]: {
-          ...next,
-          score: acc[name].score + next.score,
-        },
-      }
-    }
-
-    return {
-      ...acc,
-      [name]: next,
-    }
-  }, {})
-
-  // total all counts using name as identifier, then sort
-  const allBounterHunters = Object.values(bountyHuntersArrayToObject).sort(
-    (a, b) => b.score - a.score
-  )
-
-  const clients: Client[] = [
-    {
-      title: "Besu",
-      link: "https://besu.hyperledger.org/en/stable/",
-      image: besu,
-    },
-    {
-      title: "Erigon",
-      link: "https://github.com/ledgerwatch/erigon",
-      image: erigon,
-    },
-    {
-      title: "Geth",
-      link: "https://geth.ethereum.org/",
-      image: geth,
-    },
-    {
-      title: "Lighthouse",
-      link: "https://lighthouse-book.sigmaprime.io/",
-      image: useColorModeValue(lighthouseLight, lighthouseDark),
-    },
-    {
-      title: "Lodestar",
-      link: "https://chainsafe.github.io/lodestar/",
-      image: lodestar,
-    },
-    {
-      title: "Nimbus",
-      link: "https://our.status.im/tag/nimbus/",
-      image: nimbus,
-    },
-    {
-      title: "Nethermind",
-      link: "https://docs.nethermind.io/",
-      image: nethermind,
-    },
-    {
-      title: "Prysm",
-      link: "https://prylabs.net/",
-      image: prysm,
-    },
-    {
-      title: "Reth",
-      link: "https://reth.rs/",
-      image: reth,
-    },
-    {
-      title: "Teku",
-      link: "https://pegasys.tech/teku",
-      image: useColorModeValue(tekuDark, tekuLight),
-    },
-    {
-      title: "Grandine",
-      link: "https://grandine.io/",
-      image: grandine,
-    },
-  ]
-
-  const specs: Spec[] = [
-    {
-      title: t("page-upgrades-bug-bounty-title-1"),
-      link: "https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/beacon-chain.md",
-    },
-    {
-      title: t("page-upgrades-bug-bounty-title-2"),
-      link: "https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/fork-choice.md",
-    },
-    {
-      title: t("page-upgrades-bug-bounty-title-3"),
-      link: "https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/deposit-contract.md",
-    },
-    {
-      title: t("page-upgrades-bug-bounty-title-4"),
-      link: "https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/p2p-interface.md",
-    },
-  ]
-
-  const languages: Language[] = [
-    {
-      title: "Solidity",
-      link: "https://soliditylang.org/",
-      image: useColorModeValue(solidityLight, solidityDark),
-    },
-    {
-      title: "Vyper",
-      link: "https://vyperlang.org/",
-      image: vyper,
-    },
-  ]
-
-  const iconImageProps = {
-    width: 60,
-  }
-  return (
-    <Page>
-      {/* Uncomment for Bug Bounty Banner: */}
-      <BugBountyBanner />
-      <Content>
-        <HeroCard>
-          <HeroContainer>
-            <Breadcrumbs slug={pathname} className="mb-8" />
-            <Row>
-              <On />
-              <Title>{t("page-upgrades-bug-bounty-title")}</Title>
-            </Row>
-            <SloganGradient>
-              {t("page-upgrades-bug-bounty-slogan")} <Emoji text=":bug:" />
-            </SloganGradient>
-            <Subtitle>{t("page-upgrades-bug-bounty-subtitle")}</Subtitle>
-            <ButtonRow>
-              <StyledButton href="https://forms.gle/Gnh4gzGh66Yc3V7G8">
-                {t("page-upgrades-bug-bounty-submit")}
-              </StyledButton>
-              <StyledButton variant="outline" href="#rules" isSecondary>
-                {t("page-upgrades-bug-bounty-rules")}
-              </StyledButton>
-            </ButtonRow>
-          </HeroContainer>
-          <LeaderboardContainer>
-            <Leaderboard content={allBounterHunters.slice(0, 5)} />
-            <ButtonLink variant="outline" href="#leaderboard">
-              {t("page-upgrades-bug-bounty-leaderboard")}
-            </ButtonLink>
-          </LeaderboardContainer>
-        </HeroCard>
-      </Content>
-      <ClientIntro>{t("page-upgrades-bug-bounty-clients")}</ClientIntro>
-      <ClientRow>
-        <Client>
-          <Image src={besu} alt="" {...iconImageProps} />
-        </Client>
-        <Client>
-          <Image src={erigon} alt="" {...iconImageProps} />
-        </Client>
-        <Client>
-          <Image src={geth} alt="" {...iconImageProps} />
-        </Client>
-        <Client>
-          <Image src={nethermind} alt="" {...iconImageProps} />
-        </Client>
-        <Client>
-          <Image src={reth} alt="" {...iconImageProps} />
-        </Client>
-      </ClientRow>
-      <ClientRow>
-        <Client>
-          <Image
-            src={useColorModeValue(lighthouseLight, lighthouseDark)}
-            alt=""
-            {...iconImageProps}
-          />
-        </Client>
-        <Client>
-          <Image src={lodestar} alt="" {...iconImageProps} />
-        </Client>
-        <Client>
-          <Image src={nimbus} alt="" {...iconImageProps} />
-        </Client>
-        <Client>
-          <Image src={prysm} alt="" {...iconImageProps} />
-        </Client>
-        <Client>
-          <Image
-            src={useColorModeValue(tekuDark, tekuLight)}
-            alt=""
-            {...iconImageProps}
-          />
-        </Client>
-        <Client>
-          <Image src={grandine} alt="" {...iconImageProps} />
-        </Client>
-      </ClientRow>
-      <StyledGrayContainer id="rules">
-        <Content>
-          <H2 className="mb-4 text-left">
-            {t("page-upgrades-bug-bounty-validity")}
-          </H2>
-          <Text>
-            <Translation id="page-bug-bounty:page-upgrades-bug-bounty-validity-desc" />
-          </Text>
-          <StyledCardContainer>
-            <StyledCard
-              emoji=":ledger:"
-              title={t("page-upgrades-bug-bounty-ledger-title")}
-              description={t("page-upgrades-bug-bounty-ledger-desc")}
-            >
-              <InlineLink href="https://github.com/ethereum/consensus-specs">
-                {t("page-upgrades-bug-bounty-specs")}
-              </InlineLink>
-              <br />
-              <InlineLink href="https://github.com/ethereum/execution-specs">
-                {t("page-upgrades-bug-bounty-execution-specs")}
-              </InlineLink>
-              <br />
-              <div>
-                <Text>{t("page-upgrades-bug-bounty-annotations")}</Text>
-                <UnorderedList>
-                  <ListItem>
-                    <InlineLink href="https://benjaminion.xyz/eth2-annotated-spec/">
-                      Ben Edgington&apos;s{" "}
-                      {t("page-upgrades-bug-bounty-annotated-specs")}
-                    </InlineLink>
-                  </ListItem>
-                  <ListItem>
-                    <InlineLink href="https://github.com/ethereum/annotated-spec">
-                      Vitalik Buterin&apos;s{" "}
-                      {t("page-upgrades-bug-bounty-annotated-specs")}
-                    </InlineLink>
-                  </ListItem>
-                </UnorderedList>
-              </div>
-              <div>
-                <H4>{t("page-upgrades-bug-bounty-types")}</H4>
-                <UnorderedList>
-                  <ListItem>{t("page-upgrades-bug-bounty-type-1")}</ListItem>
-                  <ListItem>{t("page-upgrades-bug-bounty-type-2")}</ListItem>
-                  <ListItem>{t("page-upgrades-bug-bounty-type-3")}</ListItem>
-                  <ListItem>{t("page-upgrades-bug-bounty-type-4")}</ListItem>
-                </UnorderedList>
-              </div>
-              <div>
-                <H4>{t("page-upgrades-bug-bounty-specs-docs")}</H4>
-                <CardList items={specs} />
-              </div>
-            </StyledCard>
-            <StyledCard
-              emoji=":computer:"
-              title={t("page-upgrades-bug-bounty-client-bugs")}
-              description={t("page-upgrades-bug-bounty-client-bugs-desc")}
-            >
-              <div>
-                <Text>
-                  <Translation id="page-bug-bounty:page-upgrades-bug-bounty-client-bugs-desc-2" />
-                </Text>
-                <H4>{t("page-upgrades-bug-bounty-types")}</H4>
-                <UnorderedList>
-                  <ListItem>
-                    {t("page-upgrades-bug-bounty-clients-type-1")}
-                  </ListItem>
-                  <ListItem>
-                    {t("page-upgrades-bug-bounty-clients-type-2")}
-                  </ListItem>
-                  <ListItem>
-                    {t("page-upgrades-bug-bounty-clients-type-3")}
-                  </ListItem>
-                </UnorderedList>
-              </div>
-              <div>
-                <H4>{t("page-upgrades-bug-bounty-help-links")}</H4>
-                <CardList items={clients} />
-              </div>
-            </StyledCard>
-            <StyledCard
-              emoji=":book:"
-              title={t("page-upgrades-bug-bounty-misc-bugs")}
-              description={t("page-upgrades-bug-bounty-misc-bugs-desc")}
-            >
-              <div>
-                <Text>{t("page-upgrades-bug-bounty-misc-bugs-desc-2")}</Text>
-              </div>
-              <div>
-                <H4>{t("page-upgrades-bug-bounty-help-links")}</H4>
-                <CardList items={languages} />
-              </div>
-            </StyledCard>
-            <StyledCard
-              emoji=":scroll:"
-              title={t("page-upgrades-bug-bounty-deposit-bugs")}
-              description={t("page-upgrades-bug-bounty-deposit-bugs-desc")}
-            >
-              <div>
-                <H4>{t("page-upgrades-bug-bounty-help-links")}</H4>
-                <InlineLink href="https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/deposit-contract.md">
-                  Deposit Contract Specifications
-                </InlineLink>
-                <br />
-                <InlineLink href="https://github.com/ethereum/consensus-specs/blob/dev/solidity_deposit_contract/deposit_contract.sol">
-                  Deposit Contract Source Code
-                </InlineLink>
-              </div>
-            </StyledCard>
-            <StyledCard
-              emoji=":bug:"
-              title={t("page-upgrades-bug-bounty-dependency-bugs")}
-              description={t("page-upgrades-bug-bounty-dependency-bugs-desc")}
-            >
-              <div>
-                <H4>{t("page-upgrades-bug-bounty-help-links")}</H4>
-                <InlineLink href="https://github.com/ethereum/c-kzg-4844">
-                  C-KZG-4844
-                </InlineLink>
-                <br />
-                <InlineLink href="https://github.com/crate-crypto/go-kzg-4844">
-                  Go-KZG-4844
-                </InlineLink>
-              </div>
-            </StyledCard>
-          </StyledCardContainer>
-          <H2>{t("page-upgrades-bug-bounty-not-included")}</H2>
-          <Text>{t("page-upgrades-bug-bounty-not-included-desc")}</Text>
-        </Content>
-      </StyledGrayContainer>
-      <Content>
-        <Row>
-          <SubmitInstructions>
-            <H2>{t("page-upgrades-bug-bounty-submit")}</H2>
-            <Text>
-              {t("page-upgrades-bug-bounty-submit-desc")}{" "}
-              <InlineLink href="https://www.owasp.org/index.php/OWASP_Risk_Rating_Methodology">
-                {t("page-upgrades-bug-bounty-owasp")}
-              </InlineLink>
-            </Text>
-            <Text>{t("page-upgrades-bug-bounty-points")}</Text>
-            <Text>
-              <b>{t("page-upgrades-bug-bounty-quality")}</b>
-              {t("page-upgrades-bug-bounty-quality-desc")}
-            </Text>
-            <Text>
-              <b>{t("page-upgrades-bug-bounty-quality-repro")}</b>
-              {t("page-upgrades-bug-bounty-quality-repro-desc")}
-            </Text>
-            <Text>
-              <Translation id="page-bug-bounty:page-upgrades-bug-bounty-quality-fix" />
-            </Text>
-          </SubmitInstructions>
-        </Row>
-      </Content>
-      <BugBountyCards />
-      <Content>
-        <Rules>
-          <H2>{t("page-upgrades-bug-bounty-hunting")}</H2>
-          <Text>
-            <em>{t("page-upgrades-bug-bounty-hunting-desc")}</em>
-          </Text>
-          <UnorderedList>
-            <ListItem>{t("page-upgrades-bug-bounty-hunting-li-1")}</ListItem>
-            <ListItem>{t("page-upgrades-bug-bounty-hunting-li-2")}</ListItem>
-            <ListItem>{t("page-upgrades-bug-bounty-hunting-li-3")}</ListItem>
-            <ListItem id="leaderboard">
-              {t("page-upgrades-bug-bounty-hunting-li-4")}
-            </ListItem>
-          </UnorderedList>
-        </Rules>
-      </Content>
-      <GradientContainer>
-        <FullLeaderboardContainer>
-          <H2>{t("page-upgrades-bug-bounty-hunting-execution-leaderboard")}</H2>
-          <Text>
-            {t(
-              "page-upgrades-bug-bounty-hunting-execution-leaderboard-subtitle"
-            )}
-          </Text>
-          <Leaderboard content={executionBountyHunters} />
-        </FullLeaderboardContainer>
-        <FullLeaderboardContainer>
-          <H2>{t("page-upgrades-bug-bounty-hunting-leaderboard")}</H2>
-          <Text>
-            {t("page-upgrades-bug-bounty-hunting-leaderboard-subtitle")}
-          </Text>
-          <Leaderboard content={consensusBountyHunters} />
-        </FullLeaderboardContainer>
-      </GradientContainer>
-      <Divider />
-      <Content>
-        <Center>
-          <H2>{t("page-upgrades-question-title")}</H2>
-        </Center>
-        <Faq>
-          <LeftColumn>
-            <ExpandableCard
-              title={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q1-title" />
-              }
-              contentPreview={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q1-contentPreview" />
-              }
-            >
-              <Text>
-                <Translation id="page-bug-bounty:bug-bounty-faq-q1-content-1" />
-              </Text>
-              <Text>
-                <Translation id="page-bug-bounty:bug-bounty-faq-q1-content-2" />
-              </Text>
-              <Text>
-                <Translation id="page-bug-bounty:bug-bounty-faq-q1-content-3" />
-              </Text>
-              <Text>
-                <Translation id="page-bug-bounty:bug-bounty-faq-q1-content-4" />
-              </Text>
-              <Text>
-                <Translation id="page-bug-bounty:bug-bounty-faq-q1-content-5" />
-              </Text>
-              <Text>
-                <Translation id="page-bug-bounty:bug-bounty-faq-q1-content-6" />
-              </Text>
-              <Text>
-                <Translation id="page-bug-bounty:bug-bounty-faq-q1-content-7" />
-              </Text>
-            </ExpandableCard>
-            <ExpandableCard
-              title={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q2-title" />
-              }
-              contentPreview={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q2-contentPreview" />
-              }
-            >
-              <Text>
-                {
-                  <Translation id="page-bug-bounty:bug-bounty-faq-q2-content-1" />
-                }
-              </Text>
-            </ExpandableCard>
-            <ExpandableCard
-              title={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q3-title" />
-              }
-              contentPreview={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q3-contentPreview" />
-              }
-            >
-              <Text>
-                {
-                  <Translation id="page-bug-bounty:bug-bounty-faq-q3-content-1" />
-                }
-              </Text>
-            </ExpandableCard>
-            <ExpandableCard
-              title={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q4-title" />
-              }
-              contentPreview={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q4-contentPreview" />
-              }
-            >
-              <Text>
-                {
-                  <Translation id="page-bug-bounty:bug-bounty-faq-q4-content-1" />
-                }
-              </Text>
-            </ExpandableCard>
-          </LeftColumn>
-          <RightColumn>
-            <ExpandableCard
-              title={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q5-title" />
-              }
-              contentPreview={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q5-contentPreview" />
-              }
-            >
-              <Text>
-                {
-                  <Translation id="page-bug-bounty:bug-bounty-faq-q5-content-1" />
-                }
-              </Text>
-            </ExpandableCard>
-            <ExpandableCard
-              title={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q6-title" />
-              }
-              contentPreview={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q6-contentPreview" />
-              }
-            >
-              <Text>
-                {
-                  <Translation id="page-bug-bounty:bug-bounty-faq-q6-content-1" />
-                }
-              </Text>
-              <Text>
-                {
-                  <Translation id="page-bug-bounty:bug-bounty-faq-q6-content-2" />
-                }
-              </Text>
-            </ExpandableCard>
-            <ExpandableCard
-              title={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q7-title" />
-              }
-              contentPreview={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q7-contentPreview" />
-              }
-            >
-              <Text>
-                {
-                  <Translation id="page-bug-bounty:bug-bounty-faq-q7-content-1" />
-                }
-              </Text>
-            </ExpandableCard>
-            <ExpandableCard
-              title={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q8-title" />
-              }
-              contentPreview={
-                <Translation id="page-bug-bounty:bug-bounty-faq-q8-contentPreview" />
-              }
-            >
-              <Text>
-                {
-                  <Translation id="page-bug-bounty:bug-bounty-faq-q8-content-1" />
-                }
-              </Text>
-              <InlineLink href="https://ethereum.org/security_at_ethereum.org.asc">
-                {<Translation id="page-bug-bounty:bug-bounty-faq-q8-PGP-key" />}
-              </InlineLink>
-            </ExpandableCard>
-          </RightColumn>
-        </Faq>
-        <FileContributors
-          className="my-10 border-t"
-          contributors={contributors}
-          lastEditLocaleTimestamp={lastEditLocaleTimestamp}
-        />
-      </Content>
-      <Divider />
-      <Contact>
-        <div>
-          <Text className="mb-4 text-xl font-bold">
-            {t("page-upgrades-bug-bounty-questions")}
-          </Text>
-          <Text className="mb-0">
-            {t("page-upgrades-bug-bounty-email-us")}{" "}
-            <InlineLink href="mailto:bounty@ethereum.org">
-              bounty@ethereum.org
-            </InlineLink>
-          </Text>
-        </div>
-        <Emoji className="text-5xl" text=":email:" />
-      </Contact>
-      <FeedbackCard />
-    </Page>
-  )
-}
-
-export default BugBountiesPage
diff --git a/app/[locale]/bug-bounty/page.tsx b/app/[locale]/bug-bounty/page.tsx
index 18ad244c64d..655d4ccb709 100644
--- a/app/[locale]/bug-bounty/page.tsx
+++ b/app/[locale]/bug-bounty/page.tsx
@@ -1,30 +1,113 @@
-import { pick } from "lodash"
-import {
-  getMessages,
-  getTranslations,
-  setRequestLocale,
-} from "next-intl/server"
+import { getTranslations } from "next-intl/server"
+import type { ComponentProps } from "react"
 
-import type { CommitHistory, Lang, Params } from "@/lib/types"
+import type { ChildOnlyProp, CommitHistory, Lang, Params } from "@/lib/types"
 
-import I18nProvider from "@/components/I18nProvider"
+/* Uncomment for Bug Bounty Banner: */
+import BugBountyBanner from "@/components/Banners/BugBountyBanner"
+import Breadcrumbs from "@/components/Breadcrumbs"
+import BugBountyCards from "@/components/BugBountyCards"
+import Card from "@/components/Card"
+import CardList, { CardProps } from "@/components/CardList"
+import Emoji from "@/components/Emoji"
+import ExpandableCard from "@/components/ExpandableCard"
+import FeedbackCard from "@/components/FeedbackCard"
+import FileContributors from "@/components/FileContributors"
+import { Image } from "@/components/Image"
+import Leaderboard from "@/components/Leaderboard"
+import MainArticle from "@/components/MainArticle"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import { Divider } from "@/components/ui/divider"
+import { Center, Flex, VStack } from "@/components/ui/flex"
+import InlineLink from "@/components/ui/Link"
+import { ListItem, UnorderedList } from "@/components/ui/list"
 
+import { cn } from "@/lib/utils/cn"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
 import { getMetadata } from "@/lib/utils/metadata"
-import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
-import BugBountiesPage from "./_components/bug-bounty"
+import consensusData from "@/data/consensus-bounty-hunters.json"
+import executionData from "@/data/execution-bounty-hunters.json"
+
 import BugBountyJsonLD from "./page-jsonld"
 
+import besu from "@/public/images/upgrades/besu.png"
+import erigon from "@/public/images/upgrades/erigon.png"
+import geth from "@/public/images/upgrades/geth.png"
+import grandine from "@/public/images/upgrades/grandine.png"
+import lighthouseLight from "@/public/images/upgrades/lighthouse-light.png"
+import lodestar from "@/public/images/upgrades/lodestar.png"
+import nethermind from "@/public/images/upgrades/nethermind.png"
+import nimbus from "@/public/images/upgrades/nimbus-cloud.png"
+import prysm from "@/public/images/upgrades/prysm.png"
+import reth from "@/public/images/upgrades/reth.png"
+import solidityLight from "@/public/images/upgrades/solidity-light.png"
+import tekuLight from "@/public/images/upgrades/teku-dark.png"
+import vyper from "@/public/images/upgrades/vyper.png"
+
+const Content = (props: ChildOnlyProp) => (
+  <div className="w-full px-8 py-4" {...props} />
+)
+
+const H2 = ({ className, ...props }: ComponentProps<"h2">) => (
+  <h2 className={cn("mb-8 mt-12", className)} {...props} />
+)
+
+const H4 = (props: ChildOnlyProp) => (
+  <h4 className="my-8 leading-xs" {...props} />
+)
+
+const Text = ({ className, ...props }: ComponentProps<"p">) => (
+  <p className={cn("mb-6", className)} {...props} />
+)
+
+const FullLeaderboardContainer = (props: ChildOnlyProp) => (
+  <VStack className="mx-auto my-8 max-w-3xl px-8 py-0" {...props} />
+)
+
+const ClientRow = (props: ChildOnlyProp) => (
+  <VStack className="lg:flex-row" {...props} />
+)
+
+const Client = (props: ChildOnlyProp) => (
+  <div className="m-16 mb-12 mt-4 w-[60px]" {...props} />
+)
+
+const Row = (props: ChildOnlyProp) => (
+  <Flex className="items-center lg:flex-wrap" {...props} />
+)
+
+const StyledCard = ({ children, ...props }) => (
+  <Card className="m-4 flex-[1_1_464px] justify-start p-6" {...props}>
+    {children}
+  </Card>
+)
+
+type CardDetails = Required<Pick<CardProps, "title" | "link" | "image">> &
+  Pick<CardProps, "className">
+
+type Node = {
+  readonly name: string
+  readonly username: string
+  readonly score: number
+}
+
+type Spec = {
+  title: string
+  link: string
+}
+
+type BountyHuntersArg = { score?: number }
+
+const sortBountyHuntersFn = (a: BountyHuntersArg, b: BountyHuntersArg) => {
+  if (!a.score || !b.score) return 0
+  return b.score - a.score
+}
+
 export default async function Page({ params }: { params: Promise<Params> }) {
   const { locale } = await params
 
-  setRequestLocale(locale)
-
-  // Get i18n messages
-  const allMessages = await getMessages({ locale })
-  const requiredNamespaces = getRequiredNamespacesForPage("/bug-bounty")
-  const messages = pick(allMessages, requiredNamespaces)
+  const t = await getTranslations({ namespace: "page-bug-bounty" })
 
   const commitHistoryCache: CommitHistory = {}
   const { contributors, lastEditLocaleTimestamp } =
@@ -34,15 +117,521 @@ export default async function Page({ params }: { params: Promise<Params> }) {
       commitHistoryCache
     )
 
+  const consensusBountyHunters: Node[] = consensusData.sort(sortBountyHuntersFn)
+  const executionBountyHunters: Node[] = executionData.sort(sortBountyHuntersFn)
+
+  const bountyHuntersArrayToObject: Record<string, Node> = [
+    ...consensusData,
+    ...executionData,
+  ].reduce((acc, next) => {
+    const name = next.name
+    if (!name) return acc
+
+    if (acc[name]) {
+      return {
+        ...acc,
+        [name]: {
+          ...next,
+          score: acc[name].score + next.score,
+        },
+      }
+    }
+
+    return {
+      ...acc,
+      [name]: next,
+    }
+  }, {})
+
+  // total all counts using name as identifier, then sort
+  const allBounterHunters = Object.values(bountyHuntersArrayToObject).sort(
+    (a, b) => b.score - a.score
+  )
+
+  const clients: CardDetails[] = [
+    {
+      title: "Besu",
+      link: "https://besu.hyperledger.org/en/stable/",
+      image: besu,
+    },
+    {
+      title: "Erigon",
+      link: "https://github.com/ledgerwatch/erigon",
+      image: erigon,
+    },
+    {
+      title: "Geth",
+      link: "https://geth.ethereum.org/",
+      image: geth,
+    },
+    {
+      title: "Lighthouse",
+      link: "https://lighthouse-book.sigmaprime.io/",
+      image: lighthouseLight,
+      className: "[&_img]:dark:invert",
+    },
+    {
+      title: "Lodestar",
+      link: "https://chainsafe.github.io/lodestar/",
+      image: lodestar,
+    },
+    {
+      title: "Nimbus",
+      link: "https://our.status.im/tag/nimbus/",
+      image: nimbus,
+    },
+    {
+      title: "Nethermind",
+      link: "https://docs.nethermind.io/",
+      image: nethermind,
+    },
+    {
+      title: "Prysm",
+      link: "https://prylabs.net/",
+      image: prysm,
+    },
+    {
+      title: "Reth",
+      link: "https://reth.rs/",
+      image: reth,
+    },
+    {
+      title: "Teku",
+      link: "https://pegasys.tech/teku",
+      image: tekuLight,
+      className: "[&_img]:dark:invert",
+    },
+    {
+      title: "Grandine",
+      link: "https://grandine.io/",
+      image: grandine,
+    },
+  ]
+
+  const specs: Spec[] = [
+    {
+      title: t("page-upgrades-bug-bounty-title-1"),
+      link: "https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/beacon-chain.md",
+    },
+    {
+      title: t("page-upgrades-bug-bounty-title-2"),
+      link: "https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/fork-choice.md",
+    },
+    {
+      title: t("page-upgrades-bug-bounty-title-3"),
+      link: "https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/deposit-contract.md",
+    },
+    {
+      title: t("page-upgrades-bug-bounty-title-4"),
+      link: "https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/p2p-interface.md",
+    },
+  ]
+
+  const languages: CardDetails[] = [
+    {
+      title: "Solidity",
+      link: "https://soliditylang.org/",
+      image: solidityLight,
+      className: "[&_img]:dark:invert",
+    },
+    {
+      title: "Vyper",
+      link: "https://vyperlang.org/",
+      image: vyper,
+    },
+  ]
+
+  const iconImageProps = (duotone?: boolean) => ({
+    className: cn("w-[60px]", duotone && "dark:invert"),
+    sizes: "60px",
+  })
+
   return (
     <>
       <BugBountyJsonLD locale={locale} contributors={contributors} />
-      <I18nProvider locale={locale} messages={messages}>
-        <BugBountiesPage
-          contributors={contributors}
-          lastEditLocaleTimestamp={lastEditLocaleTimestamp}
-        />
-      </I18nProvider>
+      <MainArticle className="mx-auto my-0 flex w-full flex-col items-center">
+        {/* Uncomment for Bug Bounty Banner: */}
+        <BugBountyBanner />
+        <Content>
+          <VStack className="-mt-8 justify-between lg:mt-0 lg:flex-row lg:ps-0">
+            <div className="flex-1 basis-1/2 pb-16 pl-0 pr-0 pt-24 lg:-mt-32 lg:pb-32 lg:pl-8 lg:pr-8 lg:pt-32">
+              <Breadcrumbs slug="bug-bounty" className="mb-8" />
+              <Row>
+                <div className="h-2 w-2 rounded-full bg-success" />{" "}
+                <Text className="mb-0 ms-2 text-sm uppercase text-body">
+                  {t("page-upgrades-bug-bounty-title")}
+                </Text>
+              </Row>
+              <div
+                className="mt-4 max-w-[720px] overflow-auto bg-linear-bug-bounty-title bg-clip-text"
+                style={{
+                  WebkitBackgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                }}
+              >
+                <h1 className="mb-6 text-4xl font-bold lg:text-5xl">
+                  {t("page-upgrades-bug-bounty-slogan")}&nbsp;
+                  <Emoji text=":bug:" />
+                </h1>
+              </div>
+              <Text className="mt-4 max-w-[480px] leading-xs text-body-medium">
+                {t("page-upgrades-bug-bounty-subtitle")}
+              </Text>
+              <Flex className="mt-4 flex-wrap items-center gap-4">
+                <ButtonLink href="https://forms.gle/Gnh4gzGh66Yc3V7G8">
+                  {t("page-upgrades-bug-bounty-submit")}
+                </ButtonLink>
+                <ButtonLink variant="outline" href="#in-scope" isSecondary>
+                  {t("page-upgrades-bug-bounty-rules")}
+                </ButtonLink>
+              </Flex>
+            </div>
+            <VStack className="flex-1 basis-1/2 p-0 lg:pb-32 lg:pl-0 lg:pr-8 lg:pt-24">
+              <Leaderboard content={allBounterHunters.slice(0, 5)} />
+              <ButtonLink variant="outline" href="#leaderboard">
+                {t("page-upgrades-bug-bounty-leaderboard")}
+              </ButtonLink>
+            </VStack>
+          </VStack>
+        </Content>
+        <Text className="mt-5xl uppercase lg:mt-0">
+          {t("page-upgrades-bug-bounty-clients")}
+        </Text>
+        <ClientRow>
+          <Client>
+            <Image src={besu} alt="" {...iconImageProps()} />
+          </Client>
+          <Client>
+            <Image src={erigon} alt="" {...iconImageProps()} />
+          </Client>
+          <Client>
+            <Image src={geth} alt="" {...iconImageProps()} />
+          </Client>
+          <Client>
+            <Image src={nethermind} alt="" {...iconImageProps()} />
+          </Client>
+          <Client>
+            <Image src={reth} alt="" {...iconImageProps()} />
+          </Client>
+        </ClientRow>
+        <ClientRow>
+          <Client>
+            <Image src={lighthouseLight} alt="" {...iconImageProps(true)} />
+          </Client>
+          <Client>
+            <Image src={lodestar} alt="" {...iconImageProps()} />
+          </Client>
+          <Client>
+            <Image src={nimbus} alt="" {...iconImageProps()} />
+          </Client>
+          <Client>
+            <Image src={prysm} alt="" {...iconImageProps()} />
+          </Client>
+          <Client>
+            <Image src={tekuLight} alt="" {...iconImageProps(true)} />
+          </Client>
+          <Client>
+            <Image src={grandine} alt="" {...iconImageProps()} />
+          </Client>
+        </ClientRow>
+        <div className="mb-12 mt-8 w-full border-t bg-background-highlight px-0 py-16 shadow-table-item-box">
+          <Content>
+            <div className="max-w-[100ch] flex-1">
+              <H2 id="in-scope">{t("page-upgrades-bug-bounty-validity")}</H2>
+              <Text>{t("page-upgrades-bug-bounty-validity-desc")}</Text>
+            </div>
+            <Flex className="-ml-4 -mr-4 mb-12 mt-8 flex-wrap">
+              <StyledCard
+                emoji=":ledger:"
+                title={t("page-upgrades-bug-bounty-ledger-title")}
+                description={t("page-upgrades-bug-bounty-ledger-desc")}
+              >
+                <InlineLink href="https://github.com/ethereum/consensus-specs">
+                  {t("page-upgrades-bug-bounty-specs")}
+                </InlineLink>
+                <br />
+                <InlineLink href="https://github.com/ethereum/execution-specs">
+                  {t("page-upgrades-bug-bounty-execution-specs")}
+                </InlineLink>
+                <br />
+                <div>
+                  <Text>{t("page-upgrades-bug-bounty-annotations")}</Text>
+                  <UnorderedList>
+                    <ListItem>
+                      <InlineLink href="https://benjaminion.xyz/eth2-annotated-spec/">
+                        Ben Edgington&apos;s{" "}
+                        {t("page-upgrades-bug-bounty-annotated-specs")}
+                      </InlineLink>
+                    </ListItem>
+                    <ListItem>
+                      <InlineLink href="https://github.com/ethereum/annotated-spec">
+                        Vitalik Buterin&apos;s{" "}
+                        {t("page-upgrades-bug-bounty-annotated-specs")}
+                      </InlineLink>
+                    </ListItem>
+                  </UnorderedList>
+                </div>
+                <div>
+                  <H4>{t("page-upgrades-bug-bounty-types")}</H4>
+                  <UnorderedList>
+                    <ListItem>{t("page-upgrades-bug-bounty-type-1")}</ListItem>
+                    <ListItem>{t("page-upgrades-bug-bounty-type-2")}</ListItem>
+                    <ListItem>{t("page-upgrades-bug-bounty-type-3")}</ListItem>
+                    <ListItem>{t("page-upgrades-bug-bounty-type-4")}</ListItem>
+                  </UnorderedList>
+                </div>
+                <div>
+                  <H4>{t("page-upgrades-bug-bounty-specs-docs")}</H4>
+                  <CardList items={specs} />
+                </div>
+              </StyledCard>
+              <StyledCard
+                emoji=":computer:"
+                title={t("page-upgrades-bug-bounty-client-bugs")}
+                description={t("page-upgrades-bug-bounty-client-bugs-desc")}
+              >
+                <div>
+                  <Text>
+                    {t("page-upgrades-bug-bounty-client-bugs-desc-2")}
+                  </Text>
+                  <H4>{t("page-upgrades-bug-bounty-types")}</H4>
+                  <UnorderedList>
+                    <ListItem>
+                      {t("page-upgrades-bug-bounty-clients-type-1")}
+                    </ListItem>
+                    <ListItem>
+                      {t("page-upgrades-bug-bounty-clients-type-2")}
+                    </ListItem>
+                    <ListItem>
+                      {t("page-upgrades-bug-bounty-clients-type-3")}
+                    </ListItem>
+                  </UnorderedList>
+                </div>
+                <div>
+                  <H4>{t("page-upgrades-bug-bounty-help-links")}</H4>
+                  <CardList items={clients} />
+                </div>
+              </StyledCard>
+              <StyledCard
+                emoji=":book:"
+                title={t("page-upgrades-bug-bounty-misc-bugs")}
+                description={t("page-upgrades-bug-bounty-misc-bugs-desc")}
+              >
+                <div>
+                  <Text>{t("page-upgrades-bug-bounty-misc-bugs-desc-2")}</Text>
+                </div>
+                <div>
+                  <H4>{t("page-upgrades-bug-bounty-help-links")}</H4>
+                  <CardList items={languages} />
+                </div>
+              </StyledCard>
+              <StyledCard
+                emoji=":scroll:"
+                title={t("page-upgrades-bug-bounty-deposit-bugs")}
+                description={t("page-upgrades-bug-bounty-deposit-bugs-desc")}
+              >
+                <div>
+                  <H4>{t("page-upgrades-bug-bounty-help-links")}</H4>
+                  <InlineLink href="https://github.com/ethereum/consensus-specs/blob/dev/specs/phase0/deposit-contract.md">
+                    Deposit Contract Specifications
+                  </InlineLink>
+                  <br />
+                  <InlineLink href="https://github.com/ethereum/consensus-specs/blob/dev/solidity_deposit_contract/deposit_contract.sol">
+                    Deposit Contract Source Code
+                  </InlineLink>
+                </div>
+              </StyledCard>
+              <StyledCard
+                emoji=":bug:"
+                title={t("page-upgrades-bug-bounty-dependency-bugs")}
+                description={t("page-upgrades-bug-bounty-dependency-bugs-desc")}
+              >
+                <div>
+                  <H4>{t("page-upgrades-bug-bounty-help-links")}</H4>
+                  <InlineLink href="https://github.com/ethereum/c-kzg-4844">
+                    C-KZG-4844
+                  </InlineLink>
+                  <br />
+                  <InlineLink href="https://github.com/crate-crypto/go-kzg-4844">
+                    Go-KZG-4844
+                  </InlineLink>
+                </div>
+              </StyledCard>
+            </Flex>
+            <div className="max-w-[100ch] flex-1">
+              <H2 id="out-of-scope">
+                {t("page-upgrades-bug-bounty-not-included")}
+              </H2>
+              <Text>
+                {t.rich("page-upgrades-bug-bounty-not-included-desc", {
+                  a: (chunks) => (
+                    <InlineLink href="#in-scope">{chunks}</InlineLink>
+                  ),
+                })}
+              </Text>
+            </div>
+          </Content>
+        </div>
+        <Content>
+          <Row>
+            <div className="max-w-[100ch] flex-1">
+              <H2 id="submit-bug">{t("page-upgrades-bug-bounty-submit")}</H2>
+              <Text>
+                {t("page-upgrades-bug-bounty-submit-desc")}{" "}
+                <InlineLink href="https://www.owasp.org/index.php/OWASP_Risk_Rating_Methodology">
+                  {t("page-upgrades-bug-bounty-owasp")}
+                </InlineLink>
+              </Text>
+              <Text>{t("page-upgrades-bug-bounty-points")}</Text>
+              <Text>
+                <span className="font-bold">
+                  {t("page-upgrades-bug-bounty-quality")}
+                </span>
+                {t("page-upgrades-bug-bounty-quality-desc")}
+              </Text>
+              <Text>
+                <span className="font-bold">
+                  {t("page-upgrades-bug-bounty-quality-repro")}
+                </span>
+                {t("page-upgrades-bug-bounty-quality-repro-desc")}
+              </Text>
+              <Text>{t("page-upgrades-bug-bounty-quality-fix")}</Text>
+            </div>
+          </Row>
+        </Content>
+        <BugBountyCards />
+        <Content>
+          <div className="max-w-[100ch]">
+            <H2 id="rules">{t("page-upgrades-bug-bounty-hunting")}</H2>
+            <Text className="italic">
+              {t("page-upgrades-bug-bounty-hunting-desc")}
+            </Text>
+            <UnorderedList>
+              <ListItem>{t("page-upgrades-bug-bounty-hunting-li-1")}</ListItem>
+              <ListItem>{t("page-upgrades-bug-bounty-hunting-li-2")}</ListItem>
+              <ListItem>{t("page-upgrades-bug-bounty-hunting-li-3")}</ListItem>
+              <ListItem id="leaderboard">
+                {t("page-upgrades-bug-bounty-hunting-li-4")}
+              </ListItem>
+            </UnorderedList>
+          </div>
+        </Content>
+        <div className="mt-8 w-full border-t bg-banner-grid-gradient px-0 py-16 shadow-table-item-box">
+          <FullLeaderboardContainer>
+            <H2 id="el-leaderboard" className="text-center">
+              {t("page-upgrades-bug-bounty-hunting-execution-leaderboard")}
+            </H2>
+            <Text>
+              {t(
+                "page-upgrades-bug-bounty-hunting-execution-leaderboard-subtitle"
+              )}
+            </Text>
+            <Leaderboard content={executionBountyHunters} />
+          </FullLeaderboardContainer>
+          <FullLeaderboardContainer>
+            <H2 id="cl-leaderboard" className="text-center">
+              {t("page-upgrades-bug-bounty-hunting-leaderboard")}
+            </H2>
+            <Text>
+              {t("page-upgrades-bug-bounty-hunting-leaderboard-subtitle")}
+            </Text>
+            <Leaderboard content={consensusBountyHunters} />
+          </FullLeaderboardContainer>
+        </div>
+        <Divider />
+        <Content>
+          <Center>
+            <H2 id="faq" className="text-center">
+              {t("page-upgrades-question-title")}
+            </H2>
+          </Center>
+          <Flex className="mt-16 flex-col lg:flex-row">
+            <div className="w-full">
+              <ExpandableCard
+                title={t("bug-bounty-faq-q1-title")}
+                contentPreview={t("bug-bounty-faq-q1-contentPreview")}
+              >
+                <Text>{t("bug-bounty-faq-q1-content-1")}</Text>
+                <Text>{t("bug-bounty-faq-q1-content-2")}</Text>
+                <Text>{t("bug-bounty-faq-q1-content-3")}</Text>
+                <Text>{t("bug-bounty-faq-q1-content-4")}</Text>
+                <Text>{t("bug-bounty-faq-q1-content-5")}</Text>
+                <Text>{t("bug-bounty-faq-q1-content-6")}</Text>
+                <Text>{t("bug-bounty-faq-q1-content-7")}</Text>
+              </ExpandableCard>
+              <ExpandableCard
+                title={t("bug-bounty-faq-q2-title")}
+                contentPreview={t("bug-bounty-faq-q2-contentPreview")}
+              >
+                <Text>{t("bug-bounty-faq-q2-content-1")}</Text>
+              </ExpandableCard>
+              <ExpandableCard
+                title={t("bug-bounty-faq-q3-title")}
+                contentPreview={t("bug-bounty-faq-q3-contentPreview")}
+              >
+                <Text>{t("bug-bounty-faq-q3-content-1")}</Text>
+              </ExpandableCard>
+              <ExpandableCard
+                title={t("bug-bounty-faq-q4-title")}
+                contentPreview={t("bug-bounty-faq-q4-contentPreview")}
+              >
+                <Text>{t("bug-bounty-faq-q4-content-1")}</Text>
+              </ExpandableCard>
+            </div>
+            <Flex className="ms-0 w-full flex-col lg:ms-8">
+              <ExpandableCard
+                title={t("bug-bounty-faq-q5-title")}
+                contentPreview={t("bug-bounty-faq-q5-contentPreview")}
+              >
+                <Text>{t("bug-bounty-faq-q5-content-1")}</Text>
+              </ExpandableCard>
+              <ExpandableCard
+                title={t("bug-bounty-faq-q6-title")}
+                contentPreview={t("bug-bounty-faq-q6-contentPreview")}
+              >
+                <Text>{t("bug-bounty-faq-q6-content-1")}</Text>
+                <Text>{t("bug-bounty-faq-q6-content-2")}</Text>
+              </ExpandableCard>
+              <ExpandableCard
+                title={t("bug-bounty-faq-q7-title")}
+                contentPreview={t("bug-bounty-faq-q7-contentPreview")}
+              >
+                <Text>{t("bug-bounty-faq-q7-content-1")}</Text>
+              </ExpandableCard>
+              <ExpandableCard
+                title={t("bug-bounty-faq-q8-title")}
+                contentPreview={t("bug-bounty-faq-q8-contentPreview")}
+              >
+                <Text>{t("bug-bounty-faq-q8-content-1")}</Text>
+                <InlineLink href="https://ethereum.org/security_at_ethereum.org.asc">
+                  {t("bug-bounty-faq-q8-PGP-key")}
+                </InlineLink>
+              </ExpandableCard>
+            </Flex>
+          </Flex>
+          <FileContributors
+            className="my-10 border-t"
+            contributors={contributors}
+            lastEditLocaleTimestamp={lastEditLocaleTimestamp}
+          />
+        </Content>
+        <Divider />
+        <Flex className="mx-32 my-12 w-4/5 items-center justify-between rounded-sm border border-border p-6">
+          <div>
+            <Text className="mb-4 text-xl font-bold">
+              {t("page-upgrades-bug-bounty-questions")}
+            </Text>
+            <Text className="mb-0">
+              {t("page-upgrades-bug-bounty-email-us")}{" "}
+              <InlineLink href="mailto:bounty@ethereum.org">
+                bounty@ethereum.org
+              </InlineLink>
+            </Text>
+          </div>
+          <Emoji className="text-5xl" text=":email:" />
+        </Flex>
+        <FeedbackCard />
+      </MainArticle>
     </>
   )
 }
diff --git a/src/intl/en/page-bug-bounty.json b/src/intl/en/page-bug-bounty.json
index 0719e9adbb9..9ee50f1a83a 100644
--- a/src/intl/en/page-bug-bounty.json
+++ b/src/intl/en/page-bug-bounty.json
@@ -36,7 +36,7 @@
   "page-upgrades-bug-bounty-meta-description": "An overview of the Ethereum bug bounty program: how to get involved and reward information.",
   "page-upgrades-bug-bounty-meta-title": "Ethereum Bug Bounty Program",
   "page-upgrades-bug-bounty-not-included": "Out of scope",
-  "page-upgrades-bug-bounty-not-included-desc": "Only the targets listed under in-scope are part of the Bug Bounty Program. This means that for example our infrastructure; such as webpages, dns, email etc, are not part of the bounty-scope. ERC20 contract bugs are typically not included in the bounty scope. However, we can help reach out to affected parties, such as authors or exchanges in such cases. ENS is maintained by the ENS foundation, and is not part of the bounty scope. Vulnerabilities requiring the user to have publicly exposed an API, such as JSON-RPC or the Beacon API, is out of scope of the bug bounty program.",
+  "page-upgrades-bug-bounty-not-included-desc": "Only the <a>targets listed under in-scope</a> are part of the Bug Bounty Program. This means that for example our infrastructure; such as webpages, dns, email etc, are not part of the bounty-scope. ERC-20 contract bugs are typically not included in the bounty scope. However, we can help reach out to affected parties, such as authors or exchanges in such cases. ENS is maintained by the ENS foundation, and is not part of the bounty scope. Vulnerabilities requiring the user to have publicly exposed an API, such as JSON-RPC or the Beacon API, is out of scope of the bug bounty program.",
   "page-upgrades-bug-bounty-owasp": "View OWASP method",
   "page-upgrades-bug-bounty-points": "The EF will also provide rewards based on:",
   "page-upgrades-bug-bounty-points-error": "Error loading data... please refresh.",

From d68bbdbdd6ca89b124ee64ec188ad2ec362a0374 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 29 Sep 2025 14:04:27 -0700
Subject: [PATCH 2/3] refactor: cards to grid; fix spacing, semantic naming

---
 src/components/BugBountyCards.tsx | 174 ++++++++++++------------------
 1 file changed, 66 insertions(+), 108 deletions(-)

diff --git a/src/components/BugBountyCards.tsx b/src/components/BugBountyCards.tsx
index 7ab763870fd..2db59f97921 100644
--- a/src/components/BugBountyCards.tsx
+++ b/src/components/BugBountyCards.tsx
@@ -1,49 +1,16 @@
 import { BaseHTMLAttributes } from "react"
 
-import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
+import type { TranslationKey } from "@/lib/types"
 
 import { cn } from "@/lib/utils/cn"
 
-import { ButtonLink, ButtonLinkProps } from "./ui/buttons/Button"
-import { Center, Flex, Stack } from "./ui/flex"
+import { ButtonLink } from "./ui/buttons/Button"
+import { Center } from "./ui/flex"
 
 import { useTranslation } from "@/hooks/useTranslation"
 
 type FlexProps = BaseHTMLAttributes<HTMLDivElement>
 
-const CardRow = ({ children }: ChildOnlyProp) => (
-  <Flex className="mx-4 my-16 flex-wrap justify-between">{children}</Flex>
-)
-
-const SubmitBugBountyButton = ({
-  children,
-  ...props
-}: Omit<ButtonLinkProps, "href">) => (
-  <ButtonLink
-    className="m-4"
-    href="https://forms.gle/Gnh4gzGh66Yc3V7G8"
-    {...props}
-  >
-    {children}
-  </ButtonLink>
-)
-
-const Card = ({ children, ...props }: FlexProps) => {
-  return (
-    <Stack
-      className={cn(
-        "flex-[1_1_412px] gap-0 xl:flex-[1_1_216px]",
-        "m-4 justify-between bg-background",
-        "rounded-sm border shadow-table-box",
-        "hover:scale-[1.02] hover:rounded hover:bg-background-highlight hover:shadow-table-box-hover hover:transition-transform hover:duration-100"
-      )}
-      {...props}
-    >
-      {children}
-    </Stack>
-  )
-}
-
 type LabelVariant = "low" | "medium" | "high" | "critical"
 
 type LabelProps = FlexProps & {
@@ -62,10 +29,7 @@ const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
 
   return (
     <Center
-      className={cn(
-        "rounded-t-[1px] border-b px-0 py-1 text-sm uppercase",
-        variantClassName
-      )}
+      className={cn("border-b px-0 py-1 text-sm uppercase", variantClassName)}
       {...props}
     >
       {children}
@@ -73,36 +37,6 @@ const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
   )
 }
 
-const H2 = ({ children, ...props }) => (
-  <h2
-    className={cn("-mb-2 mt-2 p-4", "text-start text-2xl font-bold leading-6")}
-    {...props}
-  >
-    {children}
-  </h2>
-)
-
-const Description = ({ children, ...props }) => (
-  <p className="mb-6 px-4 py-0 text-xl opacity-60" {...props}>
-    {children}
-  </p>
-)
-
-const SubHeader = ({ children, ...props }) => (
-  <p className="mb-2 ms-4 mt-4 text-sm uppercase opacity-60" {...props}>
-    {children}
-  </p>
-)
-
-const TextBox = ({
-  children,
-  ...props
-}: BaseHTMLAttributes<HTMLDivElement>) => (
-  <div className="m-4 mt-2" {...props}>
-    {children}
-  </div>
-)
-
 export interface BugBountyCardInfo {
   lowLabelTranslationId?: TranslationKey
   mediumLabelTranslationId?: TranslationKey
@@ -177,48 +111,72 @@ const bugBountyCardsInfo: BugBountyCardInfo[] = [
 
 const BugBountyCards = () => {
   const { t } = useTranslation("page-bug-bounty")
+
+  const Banner = ({ card }: { card: BugBountyCardInfo }) => {
+    if (card.lowLabelTranslationId)
+      return <Label variant="low">{t(card.lowLabelTranslationId)}</Label>
+    if (card.mediumLabelTranslationId)
+      return <Label variant="medium">{t(card.mediumLabelTranslationId)}</Label>
+    if (card.highLabelTranslationId)
+      return <Label variant="high">{t(card.highLabelTranslationId)}</Label>
+    if (card.criticalLabelTranslationId)
+      return (
+        <Label variant="critical">{t(card.criticalLabelTranslationId)}</Label>
+      )
+    return <></>
+  }
   return (
-    <CardRow>
+    <div className="mx-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
       {bugBountyCardsInfo.map((card, idx) => (
-        <Card key={`bug-bounty-card-${idx}`}>
-          {card.lowLabelTranslationId && (
-            <Label variant="low">{t(card.lowLabelTranslationId)}</Label>
-          )}
-          {card.mediumLabelTranslationId && (
-            <Label variant="medium">{t(card.mediumLabelTranslationId)}</Label>
-          )}
-          {card.highLabelTranslationId && (
-            <Label variant="high">{t(card.highLabelTranslationId)}</Label>
-          )}
-          {card.criticalLabelTranslationId && (
-            <Label variant="critical">
-              {t(card.criticalLabelTranslationId)}
-            </Label>
+        <div
+          key={`bug-bounty-card-${idx}`}
+          className={cn(
+            "row-span-6 m-4 grid grid-rows-subgrid",
+            "overflow-hidden rounded border bg-background shadow-table-box",
+            "hover:scale-[1.02] hover:rounded hover:bg-background-highlight hover:shadow-table-box-hover hover:transition-transform hover:duration-100"
           )}
-          <H2>{t(card.h2TranslationId)}</H2>
-          <Description>{t(card.descriptionTranslationId)}</Description>
-          <SubHeader>{t(card.subDescriptionTranslationId)}</SubHeader>
-
-          <SubHeader>{t(card.subHeader1TranslationId)}</SubHeader>
-          <TextBox>
-            <ul>
-              {card.severityList.map((listItemId) => (
-                <li key={listItemId}>
-                  {t(listItemId)}
-                  {/* <Translation id={listItemId} /> */}
-                </li>
-              ))}
-            </ul>
-          </TextBox>
-
-          <SubHeader>{t(card.subHeader2TranslationId)}</SubHeader>
-          <TextBox>{t(card.textTranslationId)}</TextBox>
-          <SubmitBugBountyButton>
-            {t(card.styledButtonTranslationId)}
-          </SubmitBugBountyButton>
-        </Card>
+        >
+          <Banner card={card} />
+
+          <div className="row-span-5 grid grid-rows-subgrid gap-y-6 px-4 py-6">
+            <div className="space-y-2">
+              <h3 className="text-2xl/6 font-bold">
+                {t(card.h2TranslationId)}
+              </h3>
+              <p className="mb-6 text-xl opacity-60">
+                {t(card.descriptionTranslationId)}
+              </p>
+            </div>
+
+            <p className="mb-2 mt-4 text-sm uppercase opacity-60">
+              {t(card.subDescriptionTranslationId)}
+            </p>
+
+            <div className="space-y-2">
+              <h4 className="text-sm font-normal uppercase opacity-60">
+                {t(card.subHeader1TranslationId)}
+              </h4>
+              <ul>
+                {card.severityList.map((listItemId) => (
+                  <li key={listItemId}>{t(listItemId)}</li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="text-sm font-normal uppercase opacity-60">
+                {t(card.subHeader2TranslationId)}
+              </h4>
+              <p className="my-4 mt-2">{t(card.textTranslationId)}</p>
+            </div>
+
+            <ButtonLink href="https://forms.gle/Gnh4gzGh66Yc3V7G8">
+              {t(card.styledButtonTranslationId)}
+            </ButtonLink>
+          </div>
+        </div>
       ))}
-    </CardRow>
+    </div>
   )
 }
 

From e1c506f2e53590823784b07cdd3ae2aaf8c3dc66 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 29 Sep 2025 14:10:16 -0700
Subject: [PATCH 3/3] fix: nested links in intl strings

---
 app/[locale]/bug-bounty/page.tsx | 25 ++++++++++++++++++++++---
 src/intl/en/page-bug-bounty.json |  4 ++--
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/app/[locale]/bug-bounty/page.tsx b/app/[locale]/bug-bounty/page.tsx
index 655d4ccb709..fa3b1f2803b 100644
--- a/app/[locale]/bug-bounty/page.tsx
+++ b/app/[locale]/bug-bounty/page.tsx
@@ -14,12 +14,14 @@ import ExpandableCard from "@/components/ExpandableCard"
 import FeedbackCard from "@/components/FeedbackCard"
 import FileContributors from "@/components/FileContributors"
 import { Image } from "@/components/Image"
+import { Strong } from "@/components/IntlStringElements"
 import Leaderboard from "@/components/Leaderboard"
 import MainArticle from "@/components/MainArticle"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Divider } from "@/components/ui/divider"
 import { Center, Flex, VStack } from "@/components/ui/flex"
 import InlineLink from "@/components/ui/Link"
+import Link from "@/components/ui/Link"
 import { ListItem, UnorderedList } from "@/components/ui/list"
 
 import { cn } from "@/lib/utils/cn"
@@ -338,7 +340,18 @@ export default async function Page({ params }: { params: Promise<Params> }) {
           <Content>
             <div className="max-w-[100ch] flex-1">
               <H2 id="in-scope">{t("page-upgrades-bug-bounty-validity")}</H2>
-              <Text>{t("page-upgrades-bug-bounty-validity-desc")}</Text>
+              <Text>
+                {t.rich("page-upgrades-bug-bounty-validity-desc", {
+                  mailto: (chunks) => (
+                    <Link href="mailto:bounty@ethereum.org">{chunks}</Link>
+                  ),
+                  a: (chunks) => (
+                    <Link href="https://ethereum.org/security_at_ethereum.org.asc">
+                      {chunks}
+                    </Link>
+                  ),
+                })}
+              </Text>
             </div>
             <Flex className="-ml-4 -mr-4 mb-12 mt-8 flex-wrap">
               <StyledCard
@@ -477,7 +490,9 @@ export default async function Page({ params }: { params: Promise<Params> }) {
             <div className="max-w-[100ch] flex-1">
               <H2 id="submit-bug">{t("page-upgrades-bug-bounty-submit")}</H2>
               <Text>
-                {t("page-upgrades-bug-bounty-submit-desc")}{" "}
+                {t.rich("page-upgrades-bug-bounty-submit-desc", {
+                  strong: Strong,
+                })}{" "}
                 <InlineLink href="https://www.owasp.org/index.php/OWASP_Risk_Rating_Methodology">
                   {t("page-upgrades-bug-bounty-owasp")}
                 </InlineLink>
@@ -495,7 +510,11 @@ export default async function Page({ params }: { params: Promise<Params> }) {
                 </span>
                 {t("page-upgrades-bug-bounty-quality-repro-desc")}
               </Text>
-              <Text>{t("page-upgrades-bug-bounty-quality-fix")}</Text>
+              <Text>
+                {t.rich("page-upgrades-bug-bounty-quality-fix", {
+                  strong: Strong,
+                })}
+              </Text>
             </div>
           </Row>
         </Content>
diff --git a/src/intl/en/page-bug-bounty.json b/src/intl/en/page-bug-bounty.json
index 9ee50f1a83a..1cb8a47e157 100644
--- a/src/intl/en/page-bug-bounty.json
+++ b/src/intl/en/page-bug-bounty.json
@@ -58,7 +58,7 @@
   "page-upgrades-bug-bounty-execution-specs": "Execution Layer Specifications",
   "page-upgrades-bug-bounty-specs-docs": "Specification documents",
   "page-upgrades-bug-bounty-submit": "Submit a bug",
-  "page-upgrades-bug-bounty-submit-desc": "For each valid bug you find you’ll earn rewards. The quantity of rewards awarded will vary depending on Severity. The severity is calculated according to the OWASP risk rating model based on Impact on the Ethereum Network and Likelihood.",
+  "page-upgrades-bug-bounty-submit-desc": "For each valid bug you find you’ll earn rewards. The quantity of rewards awarded will vary <strong>depending on severity</strong>. The severity is calculated according to the OWASP risk rating model based on Impact on the Ethereum Network and Likelihood.",
   "page-upgrades-bug-bounty-subtitle": "Earn up to 250,000 USD and a place on the leaderboard by finding protocol, client and language compiler bugs affecting the Ethereum network.",
   "page-upgrades-bug-bounty-title": "Open for submissions",
   "page-upgrades-bug-bounty-title-1": "Beacon Chain",
@@ -71,7 +71,7 @@
   "page-upgrades-bug-bounty-type-4": "Calculation or parameter inconsistencies",
   "page-upgrades-bug-bounty-types": "Types of bugs",
   "page-upgrades-bug-bounty-validity": "In Scope",
-  "page-upgrades-bug-bounty-validity-desc": "Our bug bounty program spans end-to-end: from soundness of protocols (such as the blockchain consensus model, the wire and p2p protocols, proof of stake, etc.) and protocol/implementation compliance to network security and consensus integrity. Classical client security as well as security of cryptographic primitives are also part of the program. When in doubt, send an email to bounty@ethereum.org and ask us. You may also submit a disclosure/vulnerability directly to <a href=\"mailto:bounty@ethereum.org\">bounty@ethereum.org</a>, in which case we ask that you encrypt the message using our <a href=\"https://ethereum.org/security_at_ethereum.org.asc\" target=\"_blank\" rel=\"noreferrer\">PGP Key</a>",
+  "page-upgrades-bug-bounty-validity-desc": "Our bug bounty program spans end-to-end: from soundness of protocols (such as the blockchain consensus model, the wire and p2p protocols, proof of stake, etc.) and protocol/implementation compliance to network security and consensus integrity. Classical client security as well as security of cryptographic primitives are also part of the program. When in doubt, send an email to bounty@ethereum.org and ask us. You may also submit a disclosure/vulnerability directly to <mailto>bounty@ethereum.org</mailto>, in which case we ask that you encrypt the message using our <a>PGP Key</a>",
   "page-upgrades-bug-bounty-card-critical": "Critical",
   "page-upgrades-bug-bounty-card-critical-risk": "Submit critical risk bug",
   "page-upgrades-bug-bounty-card-h2": "Medium",