Staging

src/@chakra-ui/theme.ts

@@ -6,7 +6,7 @@ import semanticTokens from "./semanticTokens"
 
 const config: ThemeConfig = {
   cssVarPrefix: "eth",
-  initialColorMode: "system",
+  initialColorMode: "light",
   /**
    * Disable Chakra's system color subscription, as it works differently from
    * `next-themes` and causes a desync with it.

src/components/BannerGrid/index.tsx

@@ -36,12 +36,12 @@ export const BannerGridCell = ({ children }: ChildOnlyProp) => {
       className={cn(
         "px-0 py-8 md:px-12",
         "flex-col",
-        "border-t border-t-search-background",
-        "md:border-s md:border-s-search-background",
+        "border-t-search-background border-t",
+        "md:border-s-search-background md:border-s",
         "first:border-t-0",
         "lg:[&:first-child]:border-s-0",
-        "md:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(-n+2)]:border-t lg:[&:nth-child(-n+2)]:border-t-search-background",
-        "md:[&:nth-child(2n+1)]:border-s-0 lg:[&:nth-child(2n+1)]:border-s lg:[&:nth-child(2n+1)]:border-s-search-background",
+        "lg:[&:nth-child(-n+2)]:border-t-search-background md:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(-n+2)]:border-t",
+        "lg:[&:nth-child(2n+1)]:border-s-search-background md:[&:nth-child(2n+1)]:border-s-0 lg:[&:nth-child(2n+1)]:border-s",
         "lg:[&:nth-child(-n+3)]:justify-start lg:[&:nth-child(-n+3)]:border-t-0 lg:[&:nth-child(-n+3)]:pt-0",
         "lg:[&:nth-child(3n+1)]:border-s-0 lg:[&:nth-child(3n+1)]:ps-0",
         "lg:[&:nth-child(n+4)]:justify-start lg:[&:nth-child(n+4)]:pb-0"

src/components/Buttons/SvgButtonLink.tsx

@@ -1,18 +1,9 @@
 import { cva, VariantProps } from "class-variance-authority"
-import type { FC, ReactNode, SVGProps } from "react"
+import type { FC, 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
-}
+import { BaseLink, LinkProps } from "../ui/Link"
 
 const variants = cva("flex items-center gap-3.5", {
   variants: {
@@ -28,14 +19,20 @@ const variants = cva("flex items-center gap-3.5", {
 
 type Variants = VariantProps<typeof variants>
 
+export type SvgButtonLinkProps = LinkProps & {
+  Svg: FC<SVGProps<SVGElement>>
+  label?: string
+  size?: number
+} & Variants
+
 const SvgButtonLink = ({
   label,
   children,
   Svg,
   className,
   variant,
   ...props
-}: SvgButtonLinkProps & Variants) => (
+}: SvgButtonLinkProps) => (
   <BaseLink
     className={cn(
       "group rounded-2xl no-underline focus:outline focus:outline-4 focus:outline-offset-8",

src/components/Hero/HomeHero/index.tsx

@@ -26,7 +26,7 @@ const HomeHero = ({ heroImg, className }: HomeHeroProps) => {
         <Morpher />
         <div className="flex flex-col items-center gap-y-5 lg:max-w-2xl">
           <h1 className="font-black">{t("page-index:page-index-title")}</h1>
-          <p className="max-w-96 text-body-medium">
+          <p className="max-w-96 text-md text-body-medium lg:text-lg">
             {t("page-index:page-index-description")}
           </p>
         </div>

src/components/Homepage/BentoCard.tsx

@@ -17,6 +17,7 @@ export type BentoCardProps = HTMLAttributes<HTMLDivElement> & {
   imgWidth?: number
   imgHeight?: number
   title: string
+  eventName: string
 }
 
 const BentoCard = ({
@@ -28,6 +29,7 @@ const BentoCard = ({
   imgWidth,
   imgHeight,
   title,
+  eventName,
 }: BentoCardProps) => (
   <Card
     className={cn(
@@ -43,7 +45,16 @@ const BentoCard = ({
         {title}
       </CardTitle>
       <p className="mb-8 text-md">{children}</p>
-      <ButtonLink href={href} variant="outline" isSecondary>
+      <ButtonLink
+        href={href}
+        variant="outline"
+        isSecondary
+        customEventOptions={{
+          eventCategory: "Homepage",
+          eventAction: "use cases",
+          eventName,
+        }}
+      >
         {action} <ChevronNext />
       </ButtonLink>
     </div>

src/components/Homepage/ValuesMarquee.tsx

@@ -0,0 +1,234 @@
+import { forwardRef, useEffect, useRef, useState } from "react"
+import { FaCheck } from "react-icons/fa"
+import { MdClose } from "react-icons/md"
+
+import EthGlyphSolid from "@/components/icons/eth-glyph-solid.svg"
+import Tooltip from "@/components/Tooltip"
+
+import { cn } from "@/lib/utils/cn"
+import { isMobile } from "@/lib/utils/isMobile"
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
+import { type Pairing, useValuesMarquee } from "../Homepage/useValuesMarquee"
+import { Stack } from "../ui/flex"
+import {
+  Section,
+  SectionContent,
+  SectionHeader,
+  SectionTag,
+} from "../ui/section"
+
+import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion"
+
+type ItemProps = React.HTMLAttributes<HTMLButtonElement> & {
+  pairing: Pairing
+  separatorClass: string
+  container?: HTMLElement | null
+  label: string
+}
+
+const Item = ({
+  children,
+  className,
+  pairing,
+  separatorClass,
+  container,
+  label,
+}: ItemProps) => (
+  <>
+    <Tooltip
+      container={container}
+      onBeforeOpen={() => {
+        trackCustomEvent({
+          eventCategory: "Homepage",
+          eventAction: "internet_changing",
+          eventName: label,
+        })
+      }}
+      content={
+        <Stack>
+          <h3 className="text-md text-body-medium dark:text-gray-300">
+            {label}
+          </h3>
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-2 text-body-medium">
+              <div className="p-1 text-lg">
+                <MdClose />
+              </div>
+              <div>
+                {pairing.legacy.content.map((line) => (
+                  <p key={line} className="text-sm">
+                    {line}
+                  </p>
+                ))}
+              </div>
+            </div>
+            <div className="flex gap-2 text-body">
+              <div className="p-1 text-lg">
+                <EthGlyphSolid />
+              </div>
+              <div className="flex flex-col gap-2">
+                {pairing.ethereum.content.map((line) => (
+                  <p key={line} className="text-sm">
+                    {line}
+                  </p>
+                ))}
+              </div>
+            </div>
+          </div>
+        </Stack>
+      }
+    >
+      <div
+        className={cn(
+          "flex flex-nowrap items-center text-nowrap rounded-full px-4 py-1 font-bold uppercase",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Tooltip>
+    <div
+      className={cn(
+        "h-1.5 min-w-1.5 rounded-full motion-reduce:last:hidden",
+        separatorClass
+      )}
+    />
+  </>
+)
+
+type RowProps = React.HTMLAttributes<HTMLDivElement> & {
+  toRight?: boolean
+}
+
+const Row = forwardRef<HTMLDivElement, RowProps>(
+  ({ className, children, toRight }, ref) => {
+    const { prefersReducedMotion } = usePrefersReducedMotion()
+    const fadeEdges = {
+      mask: `linear-gradient(to right, transparent 1rem, white 15%, white 85%, transparent calc(100% - 1rem))`,
+    }
+
+    return (
+      <div ref={ref} className={cn("group", className)}>
+        <div
+          className="flex max-w-full overflow-hidden motion-reduce:overflow-auto"
+          style={prefersReducedMotion ? {} : fadeEdges}
+        >
+          {Array(prefersReducedMotion ? 1 : 3)
+            .fill(0)
+            .map((_, idx) => (
+              <div
+                key={idx}
+                className={cn(
+                  "flex min-w-fit items-center space-x-10 px-6 py-8 motion-reduce:w-full motion-reduce:animate-none motion-reduce:justify-center",
+                  isMobile()
+                    ? "group-has-[button:hover]:animate-pause"
+                    : "group-hover:animate-pause",
+                  toRight ? "animate-scroll-right" : "animate-scroll-left"
+                )}
+              >
+                {children}
+              </div>
+            ))}
+        </div>
+      </div>
+    )
+  }
+)
+Row.displayName = "Row"
+
+const ValuesMarquee = () => {
+  const { t, pairings } = useValuesMarquee()
+  const containerFirstRef = useRef<HTMLDivElement>(null)
+  const containerSecondRef = useRef<HTMLDivElement>(null)
+
+  const [containerFirst, setContainerFirst] = useState<HTMLDivElement | null>(
+    null
+  )
+  const [containerSecond, setContainerSecond] = useState<HTMLDivElement | null>(
+    null
+  )
+
+  useEffect(() => {
+    if (containerFirstRef.current) {
+      setContainerFirst(containerFirstRef.current)
+    }
+    if (containerSecondRef.current) {
+      setContainerSecond(containerSecondRef.current)
+    }
+  }, [])
+
+  return (
+    <Section id="values" className="!sm:my-64 !my-48 scroll-m-48">
+      <SectionContent className="flex flex-col items-center text-center">
+        <SectionTag>{t("page-index:page-index-values-tag")}</SectionTag>
+        <SectionHeader>
+          {t("page-index:page-index-values-header")}
+        </SectionHeader>
+        <p className="text-lg text-body-medium">
+          {t("page-index:page-index-values-description")}
+        </p>
+      </SectionContent>
+      <div className="relative mt-19 overflow-hidden max-2xl:-mx-4 2xl:rounded-2xl">
+        <Row
+          ref={containerFirstRef}
+          className="border-b border-background bg-blue-50 dark:bg-blue-600"
+        >
+          {pairings.map((pairing) => (
+            <Item
+              key={pairing.ethereum.label}
+              label={pairing.ethereum.label}
+              container={containerFirst}
+              pairing={pairing}
+              separatorClass="bg-accent-a"
+              className="group/item bg-blue-100 text-blue-600 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700"
+            >
+              <FaCheck className="me-1 text-success group-hover/item:text-white" />
+              {pairing.ethereum.label}
+            </Item>
+          ))}
+        </Row>
+
+        <Row
+          ref={containerSecondRef}
+          className="border-t border-background bg-gray-50 dark:bg-gray-800"
+          toRight
+        >
+          {pairings.map((pairing) => (
+            <Item
+              key={pairing.legacy.label}
+              label={pairing.legacy.label}
+              container={containerSecond}
+              pairing={pairing}
+              className="bg-gray-200/20 text-body-medium hover:bg-gray-600 hover:text-white dark:bg-gray-950 dark:text-body"
+              separatorClass="bg-gray-200 dark:bg-gray-950"
+            >
+              {pairing.legacy.label}
+            </Item>
+          ))}
+        </Row>
+
+        <div className="absolute start-[50%] top-[50%] flex -translate-x-[50%] -translate-y-[50%] items-center overflow-hidden rounded-lg text-sm font-bold">
+          <p className="bg-gray-50 px-4 py-1 text-body-medium dark:bg-gray-800 dark:text-gray-200">
+            {t("page-index-values-legacy")}
+          </p>
+
+          <div
+            className={cn(
+              "border-t-[15px] border-t-blue-50 dark:border-t-blue-600",
+              "border-r-8 border-r-blue-50 dark:border-r-blue-600",
+              "border-b-[15px] border-b-gray-50 dark:border-b-gray-800",
+              "border-l-8 border-l-gray-50 dark:border-l-gray-800"
+            )}
+          />
+
+          <p className="bg-blue-50 px-4 py-1 text-accent-a dark:bg-blue-600 dark:text-white">
+            {t("common:ethereum")}
+          </p>
+        </div>
+      </div>
+    </Section>
+  )
+}
+
+export default ValuesMarquee

src/components/Homepage/useBentoBox.ts

@@ -17,6 +17,7 @@ type CopyDetails = {
   children: string
   action: string
   href: string
+  eventName: Category
 }
 
 const gradientStops = "from-20% to-60%"
@@ -100,6 +101,7 @@ export const useBentoBox = () => {
     children: t(`page-index:page-index-bento-${category}-content`),
     action: t(`page-index:page-index-bento-${category}-action`),
     href,
+    eventName: category,
   })
 
   return [