Merge pull request #13528 from ethereum/homepage

Homepage redesign

package.json

@@ -82,6 +82,7 @@
     "react-select": "5.8.0",
     "reading-time": "^1.5.0",
     "remark-gfm": "^3.0.1",
+    "swiper": "^11.1.10",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^3.1.0",
@@ -104,6 +105,8 @@
     "@types/node": "^20.4.2",
     "@types/react": "18.2.57",
     "@types/react-dom": "18.2.19",
+    "@types/swiper": "^6.0.0",
+    "@types/xml2js": "^0.4.14",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "autoprefixer": "^10.4.19",
@@ -133,7 +136,8 @@
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "^5.5.2",
     "unified": "^10.0.0",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "xml2js": "^0.6.2"
   },
   "resolutions": {
     "jackspeak": "2.1.1",

src/@chakra-ui/components/Button.ts

@@ -44,16 +44,16 @@ const baseStyle = defineStyle({
 })
 
 const variantSolid = defineStyle({
-  color: "background.base",
-  bg: "primary.base",
+  color: "white",
+  bg: "primary.action",
   borderColor: "transparent",
   _disabled: {
     bg: "disabled",
     color: "background.base",
   },
   _hover: {
-    color: "background.base",
-    bg: "primary.hover",
+    color: "white",
+    bg: "primary.actionHover",
     boxShadow: "buttonHover",
   },
   _active: {

src/@chakra-ui/foundations/colors.ts

@@ -2,41 +2,54 @@ export type Colors = typeof colors
 
 const colors = {
   gray: {
-    100: "#F7F7F7",
-    150: "#F2F2F2",
-    200: "#E7E7E7",
-    300: "#C8C8C8",
+    50: "#f7f7f7",
+    100: "#eeeeee",
+    150: "#ececec",
+    200: "#cecece",
+    300: "#acacac",
     400: "#8C8C8C",
     500: "#616161",
     600: "#333333",
     700: "#222222",
-    800: "#1B1B1B",
-    900: "#141414",
+    800: "#1b1b1b",
+    900: "#121212",
+    950: "#0a0a0a",
   },
   blue: {
-    50: "#F6F6FF",
-    100: "#EBEBFF",
-    200: "#D6D6FF",
-    300: "#9999FF",
-    400: "#5555FF",
-    500: "#1C1CFF",
-    600: "#0000E0",
-    700: "#0000A3",
-    800: "#000066",
-    900: "#000029",
+    50: "#F8FBFF",
+    100: "#E8F1FF",
+    200: "#CADFFB",
+    300: "#88AAF1",
+    400: "#6995F7",
+    500: "#4473EF",
+    600: "#3C4CEB",
+    700: "#2B36A8",
+    800: "#232F71",
+    900: "#1B273A",
   },
   orange: {
     50: "#FFF3ED",
-    100: "#FFE5D6",
-    200: "#FFCBAD",
-    300: "#FFB185",
-    400: "#FF985C",
-    500: "#FF7324",
-    550: "#DF5A0E",
-    600: "#B84300",
-    700: "#7A2D00",
-    800: "#521E00",
-    900: "#2F1000",
+    100: "#FFF0DB",
+    200: "#FFD7A7",
+    300: "#FEB077",
+    400: "#FD8640",
+    500: "#FB610E",
+    600: "#EC4A0A",
+    700: "#C4350A",
+    800: "#7D2711",
+    900: "#3A291D",
+  },
+  purple: {
+    50: "#F3ECFF",
+    100: "#EDE2FF",
+    200: "#DAC5FC",
+    300: "#CCAFFC",
+    400: "#B38DF0",
+    500: "#945AF4",
+    600: "#6C24DF",
+    700: "#561BB5",
+    800: "#41128B",
+    900: "#1E0546",
   },
   red: {
     100: "#f7c8c8",

src/@chakra-ui/semanticTokens.ts

@@ -37,11 +37,13 @@ const semanticTokens = {
 
     // Main Set
     primary: {
-      base: { _light: "blue.500", _dark: "orange.500" },
-      highContrast: { _light: "blue.800", _dark: "orange.100" },
-      lowContrast: { _light: "blue.100", _dark: "orange.800" },
-      hover: { _light: "blue.400", _dark: "orange.400" },
-      visited: { _light: "blue.700", _dark: "orange.550" },
+      base: { _light: "purple.600", _dark: "purple.400" },
+      highContrast: { _light: "purple.800", _dark: "purple.200" },
+      lowContrast: { _light: "purple.100", _dark: "purple.900" },
+      hover: { _light: "purple.500", _dark: "purple.500" },
+      visited: { _light: "purple.700", _dark: "purple.300" },
+      action: { _light: "purple.600", _dark: "purple.600" },
+      actionHover: { _light: "purple.500", _dark: "purple.500" },
       // ! Deprecating primary.light
       light: { _light: "blue.100", _dark: "orange.100" },
       // ! Deprecating primary.dark
@@ -57,7 +59,7 @@ const semanticTokens = {
       inverted: { _light: "gray.100", _dark: "gray.800" },
     },
     background: {
-      base: { _light: "white", _dark: "gray.800" },
+      base: { _light: "white", _dark: "gray.950" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
     disabled: { _light: "gray.400", _dark: "gray.500" },
@@ -91,7 +93,6 @@ const semanticTokens = {
       _light: "blackAlpha.400",
       _dark: "whiteAlpha.400",
     },
-    switchBackground: { _light: "gray.300", _dark: "whiteAlpha.400" },
     hubHeroContentBg: {
       _light: "rgba(255, 255, 255, 0.80)",
       _dark: "rgba(34, 34, 34, 0.80)",

src/components/BigNumber/index.tsx

@@ -0,0 +1,76 @@
+import { type ReactNode } from "react"
+import { useRouter } from "next/router"
+import { useTranslation } from "next-i18next"
+import { MdInfoOutline } from "react-icons/md"
+
+import { cn } from "@/lib/utils/cn"
+import { isValidDate } from "@/lib/utils/date"
+
+import Tooltip from "../Tooltip"
+import Link from "../ui/Link"
+
+type BigNumberProps = {
+  children: ReactNode
+  value?: ReactNode
+  sourceName?: string
+  sourceUrl?: string
+  lastUpdated?: number | string
+  className?: string
+}
+
+const BigNumber = ({
+  children,
+  value,
+  sourceName,
+  sourceUrl,
+  lastUpdated,
+  className,
+}: BigNumberProps) => {
+  const { t } = useTranslation("common")
+  const { locale } = useRouter()
+  const lastUpdatedDisplay =
+    lastUpdated && isValidDate(lastUpdated)
+      ? new Intl.DateTimeFormat(locale, {
+          dateStyle: "medium",
+        }).format(new Date(lastUpdated))
+      : ""
+  return (
+    <div
+      className={cn(
+        "flex flex-1 shrink-0 flex-col self-stretch py-8",
+        className
+      )}
+    >
+      {value ? (
+        <>
+          <div className="text-5xl font-bold">{value}</div>
+          <div className="text-sm">
+            {children}
+            {sourceName && sourceUrl && (
+              <Tooltip
+                content={
+                  <>
+                    <p>
+                      {t("data-provided-by")}{" "}
+                      <Link href={sourceUrl}>{sourceName}</Link>
+                    </p>
+                    {lastUpdated && (
+                      <p className="mt-2">
+                        {t("last-updated")}: {lastUpdatedDisplay}
+                      </p>
+                    )}
+                  </>
+                }
+              >
+                <MdInfoOutline className="mb-0.5 ms-2 inline align-text-bottom" />
+              </Tooltip>
+            )}
+          </div>
+        </>
+      ) : (
+        <span className="text-3xl">{t("loading-error-refresh")}</span>
+      )}
+    </div>
+  )
+}
+export default BigNumber

src/components/Buttons/SvgButtonLink.tsx

@@ -0,0 +1,73 @@
+import { cva, VariantProps } from "class-variance-authority"
+import type { FC, ReactNode, SVGProps } from "react"
+
+import { cn } from "@/lib/utils/cn"
+
+import { BaseLink } from "../ui/Link"
+
+type SvgButtonLinkProps = {
+  Svg: FC<SVGProps<SVGElement>>
+  label?: string
+  children: ReactNode
+  href: string
+  className?: string
+  size?: number
+}
+
+const variants = cva("flex items-center gap-3.5", {
+  variants: {
+    variant: {
+      col: "flex-col text-center [&_.body]:text-center",
+      row: "flex-row text-start [&_.body]:text-start [&_.header]:self-start",
+    },
+  },
+  defaultVariants: {
+    variant: "row",
+  },
+})
+
+type Variants = VariantProps<typeof variants>
+
+const SvgButtonLink = ({
+  label,
+  children,
+  Svg,
+  className,
+  variant,
+  ...props
+}: SvgButtonLinkProps & Variants) => (
+  <BaseLink
+    className={cn(
+      "group rounded-2xl no-underline focus:outline focus:outline-4 focus:outline-offset-8",
+      className
+    )}
+    hideArrow
+    {...props}
+  >
+    <div className={cn(variants({ variant }))}>
+      <div
+        className={cn(
+          "header",
+          "relative grid aspect-square size-[5em] shrink-0 place-items-center",
+          "rounded-2xl border shadow-svg-button-link transition-all duration-200",
+          "group-hover:shadow-svg-button-link-hover group-hover:transition-all group-hover:duration-200",
+          "group-focus:shadow-none group-focus:transition-all group-focus:duration-200"
+        )}
+      >
+        <Svg
+          className={cn(
+            "group-hover:rotate-3 group-hover:scale-110",
+            "group-focus:rotate-3 group-focus:scale-110",
+            "text-4xl duration-200 group-hover:duration-200 group-focus:rotate-3"
+          )}
+        />
+      </div>
+      <div className="body">
+        {label && <p className="text-xl font-bold">{label}</p>}
+        {children}
+      </div>
+    </div>
+  </BaseLink>
+)
+
+export default SvgButtonLink

src/components/Chevron/index.tsx

@@ -0,0 +1,21 @@
+import { MdChevronLeft, MdChevronRight } from "react-icons/md"
+
+import { cn } from "@/lib/utils/cn"
+
+import { useRtlFlip } from "@/hooks/useRtlFlip"
+
+export const ChevronNext = ({
+  className,
+  ...props
+}: React.HTMLAttributes<SVGElement>) => {
+  const { twFlipForRtl } = useRtlFlip()
+  return <MdChevronRight className={cn(className, twFlipForRtl)} {...props} />
+}
+
+export const ChevronPrev = ({
+  className,
+  ...props
+}: React.HTMLAttributes<SVGElement>) => {
+  const { twFlipForRtl } = useRtlFlip()
+  return <MdChevronLeft className={cn(className, twFlipForRtl)} {...props} />
+}