feat: /what-is-ethereum revamp

src/components/EnergyConsumptionChart/index.tsx

@@ -36,7 +36,7 @@ ChartJS.register(
 )
 
 const EnergyConsumptionChart = () => {
-  const { t } = useTranslation("page-what-is-ethereum")
+  const { t } = useTranslation("page-energy-consumption")
   const locale = useLocale()
   const isClient = useIsClient()
   const isRtl = isLangRightToLeft(locale as Lang)
@@ -247,7 +247,7 @@ const EnergyConsumptionChart = () => {
       </Center>
 
       <p className="text-center font-semibold">
-        {t("page-what-is-ethereum-energy-consumption-chart-legend")}
+        {t("energy-consumption-chart-legend")}
       </p>
     </div>
   )

src/components/IntlStringElements.tsx

@@ -0,0 +1,3 @@
+export const Emphasis = (chunks: React.ReactNode) => <em>{chunks}</em>
+
+export const Strong = (chunks: React.ReactNode) => <strong>{chunks}</strong>

src/components/TableOfContents/ItemsList.tsx

@@ -1,19 +1,35 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
 import type { ToCItem } from "@/lib/types"
 
 import ToCLink from "@/components/TableOfContents/TableOfContentsLink"
 
+const variants = cva("mb-2 last:mb-0", {
+  variants: {
+    variant: {
+      default: "",
+      beginner:
+        "[&:has([data-state-active='true'])]:text-primary hover:text-primary-hover list-item",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
 export type ItemsListProps = {
   items: Array<ToCItem>
   depth: number
   maxDepth: number
   activeHash?: string
-}
+} & VariantProps<typeof variants>
 
 const ItemsList = ({
   items,
   depth,
   maxDepth,
   activeHash,
+  variant,
   ...rest
 }: ItemsListProps) => {
   if (depth > maxDepth) return null
@@ -23,8 +39,13 @@ const ItemsList = ({
       {items.map((item, index) => {
         const { title, items } = item
         return (
-          <li key={index} className="mb-2 last:mb-0" {...rest}>
-            <ToCLink depth={depth} item={item} activeHash={activeHash} />
+          <li key={index} className={variants({ variant })} {...rest}>
+            <ToCLink
+              variant={variant}
+              depth={depth}
+              item={item}
+              activeHash={activeHash}
+            />
             {items && (
               <ul key={title} className="m-0 mt-2 list-none gap-2 ps-2 text-sm">
                 <ItemsList

src/components/TableOfContents/TableOfContentsLink.tsx

@@ -1,31 +1,51 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
 import type { ToCItem } from "@/lib/types"
 
 import { cn } from "@/lib/utils/cn"
 
 import { BaseLink } from "../ui/Link"
 
+const variants = cva(
+  "group relative inline-block w-full py-0.5 text-body-medium no-underline lg:w-auto",
+  {
+    variants: {
+      variant: {
+        default: "",
+        beginner: "[&_[data-label='marker']]:!hidden inline leading-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
 export type TableOfContentsLinkProps = {
   depth: number
   item: ToCItem
   activeHash?: string
-}
+} & VariantProps<typeof variants>
 
 const Link = ({
   depth,
   item: { title, url },
   activeHash,
+  variant,
 }: TableOfContentsLinkProps) => {
   const isActive = activeHash === url
 
   return (
     <BaseLink
+      data-state-active={isActive}
       href={url}
-      className={cn(
-        "group relative inline-block w-full py-0.5 text-body-medium no-underline lg:w-auto",
-        isActive && "visited text-primary"
-      )}
+      className={variants({
+        variant,
+        className: isActive && "visited text-primary",
+      })}
     >
       <div
+        data-label="marker"
         className={cn(
           "absolute top-1/2 -mt-1 hidden h-2 w-2 rounded-full border border-primary-hover bg-background group-hover:inline-block",
           isActive && "inline-block"

src/components/TableOfContents/TableOfContentsMobile.tsx

@@ -1,3 +1,6 @@
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
 import { ChevronDown } from "lucide-react"
 
 import type { ToCItem } from "@/lib/types"
@@ -13,12 +16,25 @@ import ItemsListMobile from "./ItemsListMobile"
 
 import { useTranslation } from "@/hooks/useTranslation"
 
+const variants = cva("flex w-full justify-between lg:hidden", {
+  variants: {
+    variant: {
+      default: "",
+      beginner:
+        "[&>span]:flex-none mb-16 justify-center rounded-lg border-border bg-accent-a/10 text-lg font-bold",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
 export type TableOfContentsMobileProps = {
   items?: Array<ToCItem>
   maxDepth?: number
-}
+} & VariantProps<typeof variants>
 
-const Mobile = ({ items, maxDepth }: TableOfContentsMobileProps) => {
+const Mobile = ({ items, maxDepth, variant }: TableOfContentsMobileProps) => {
   const { t } = useTranslation("common")
 
   if (!items) {
@@ -28,11 +44,7 @@ const Mobile = ({ items, maxDepth }: TableOfContentsMobileProps) => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
-          isSecondary
-          variant="outline"
-          className="flex w-full justify-between lg:hidden"
-        >
+        <Button isSecondary variant="outline" className={variants({ variant })}>
           <span className="flex-1 text-center">{t("on-this-page")}</span>
           <ChevronDown />
         </Button>

src/components/TableOfContents/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { cva, type VariantProps } from "class-variance-authority"
+
 import type { ToCItem } from "@/lib/types"
 
 import Github from "@/components/icons/github.svg"
@@ -14,7 +16,39 @@ import { useActiveHash } from "@/hooks/useActiveHash"
 import { useTranslation } from "@/hooks/useTranslation"
 import { usePathname } from "@/i18n/routing"
 
-export type TableOfContentsProps = {
+const variants = cva(
+  "sticky hidden flex-col items-start overflow-y-auto lg:flex",
+  {
+    variants: {
+      variant: {
+        default:
+          "top-19 min-w-48 max-w-[25%] p-4 pe-0 h-[calc(100vh-80px)] gap-4",
+        beginner: cn(
+          "top-[7.25rem] min-w-80 max-w-72 lg:p-8 px-3 py-2",
+          "h-fit shrink-0 space-y-2.5 rounded-2xl bg-accent-a/10 text-body-medium",
+          "[&_ul]:list-decimal [&_ul]:border-s-0 [&_ul]:text-base [&_ul]:list-inside [&_ul]:ps-0"
+        ),
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const labelVariants = cva("text-body-medium", {
+  variants: {
+    variant: {
+      default: "uppercase",
+      beginner: "font-bold text-lg",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+export interface TableOfContentsProps extends VariantProps<typeof variants> {
   items: Array<ToCItem>
   maxDepth?: number
   editPath?: string
@@ -30,13 +64,12 @@ const TableOfContents = ({
   hideEditButton = false,
   isMobile = false,
   className,
+  variant,
   ...rest
 }: TableOfContentsProps) => {
   const pathname = usePathname()
   const { t } = useTranslation("common")
-
   const titleIds: Array<string> = []
-
   if (!isMobile) {
     const getTitleIds = (items: Array<ToCItem>, depth: number): void => {
       // Return early if maxDepth hit
@@ -56,17 +89,11 @@ const TableOfContents = ({
     return null
   }
   if (isMobile) {
-    return <Mobile items={items} maxDepth={maxDepth} />
+    return <Mobile variant={variant} items={items} maxDepth={maxDepth} />
   }
 
   return (
-    <aside
-      className={cn(
-        "sticky top-19 hidden h-[calc(100vh-80px)] min-w-48 max-w-[25%] flex-col items-start gap-4 overflow-y-auto p-4 pe-0 lg:flex",
-        className
-      )}
-      {...rest}
-    >
+    <aside className={variants({ variant, className })} {...rest}>
       {!hideEditButton && editPath && (
         <ButtonLink
           href={editPath}
@@ -81,13 +108,14 @@ const TableOfContents = ({
           {t("edit-page")}
         </ButtonLink>
       )}
-      <div className="uppercase text-body-medium">{t("on-this-page")}</div>
+      <div className={labelVariants({ variant })}>{t("on-this-page")}</div>
       <ul className="m-0 mb-2 mt-2 list-none gap-2 border-s border-s-body-medium ps-4 pt-0 text-sm">
         <ItemsList
           items={items}
           depth={0}
           maxDepth={maxDepth ? maxDepth : 1}
           activeHash={activeHash}
+          variant={variant}
         />
       </ul>
     </aside>

src/components/ui/section.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils/cn"
 
 // TODO: Add to design system
-const variants = cva("w-full scroll-mt-24", {
+const variants = cva("w-full scroll-mt-24 lg:scroll-mt-28", {
   variants: {
     variant: {
       responsiveFlex: "flex flex-col gap-8 md:flex-row lg:gap-16",

src/intl/en/page-energy-consumption.json

@@ -0,0 +1,21 @@
+{
+  "adoption-chart-artists-label": "Artists",
+  "adoption-chart-column-now-label": "Now",
+  "adoption-chart-companies-label": "Companies",
+  "adoption-chart-developers-label": "Developers",
+  "adoption-chart-gamers-label": "Gamers",
+  "adoption-chart-investors-label": "Investors",
+  "adoption-chart-musicians-label": "Musicians",
+  "adoption-chart-refugees-label": "Refugees",
+  "adoption-chart-writers-label": "Writers",
+  "energy-consumption-chart-airbnb-label": "AirBnB",
+  "energy-consumption-chart-btc-pow-label": "BTC PoW",
+  "energy-consumption-chart-eth-pos-label": "ETH PoS",
+  "energy-consumption-chart-eth-pow-label": "ETH PoW",
+  "energy-consumption-chart-gaming-us-label": "Gaming in the US",
+  "energy-consumption-chart-global-data-centers-label": "Global data centers",
+  "energy-consumption-chart-netflix-label": "Netflix",
+  "energy-consumption-chart-paypal-label": "PayPal",
+  "energy-consumption-gold-mining-cbeci-label": "Gold mining",
+  "energy-consumption-chart-legend": "Annual Energy Consumption in TWh/yr"
+}