Merge pull request #180 from ethereum/eth-page

Add "What is ETH" page

Author: corwintines

next.config.js

@@ -29,6 +29,15 @@ module.exports = (phase, { defaultConfig }) => {
         test: /\.svg$/,
         use: "@svgr/webpack",
       })
+      config.module.rules.push({
+        test: /\.mp4$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+          },
+        },
+      });
 
       return config
     },

package.json

@@ -23,6 +23,7 @@
     "@emotion/styled": "^11.11.0",
     "clipboard": "^2.0.11",
     "ethereum-blockies-base64": "^1.0.2",
+    "file-loader": "^6.2.0",
     "focus-trap-react": "^10.2.3",
     "framer-motion": "^10.13.0",
     "gray-matter": "^4.0.3",

src/components/ActionCard.tsx

@@ -1,17 +1,16 @@
-import React, { ReactNode } from "react"
-import { StaticImageData } from "next/image"
+import type { ReactNode } from "react"
 import {
   Box,
-  BoxProps,
+  type BoxProps,
   Flex,
   Heading,
   LinkBox,
-  LinkBoxProps,
+  type LinkBoxProps,
   LinkOverlay,
   useColorModeValue,
 } from "@chakra-ui/react"
 
-import { Image } from "@/components/Image"
+import { Image, type ImageProps } from "@/components/Image"
 import { BaseLink } from "@/components/Link"
 import Text from "@/components/OldText"
 
@@ -27,19 +26,19 @@ const linkFocusStyles: BoxProps = {
   textDecoration: "none",
 }
 
-export interface IProps extends Omit<LinkBoxProps, "title"> {
-  children?: React.ReactNode
+export type ActionCardProps = Omit<LinkBoxProps, "title"> & {
+  children?: ReactNode
   to: string
   alt?: string
-  image: StaticImageData
+  image: ImageProps["src"]
   title: ReactNode
   description?: ReactNode
   className?: string
   isRight?: boolean
   isBottom?: boolean
 }
 
-const ActionCard: React.FC<IProps> = ({
+const ActionCard = ({
   to,
   alt,
   image,
@@ -49,8 +48,8 @@ const ActionCard: React.FC<IProps> = ({
   className,
   isRight,
   isBottom = true,
-  ...rest
-}) => {
+  ...props
+}: ActionCardProps) => {
   const descriptionColor = useColorModeValue("blackAlpha.700", "whiteAlpha.800")
 
   return (
@@ -64,7 +63,7 @@ const ActionCard: React.FC<IProps> = ({
       _focus={linkBoxFocusStyles}
       className={className}
       m={4}
-      {...rest}
+      {...props}
     >
       <Flex
         h="260px"
@@ -77,12 +76,8 @@ const ActionCard: React.FC<IProps> = ({
       >
         <Image
           src={image}
-          width={320}
+          width={220}
           alt={alt || ""}
-          maxH="257px"
-          maxW={{ base: "311px", sm: "372px" }}
-          minW="100px"
-          minH="100px"
           style={{ objectFit: "cover" }}
         />
       </Flex>

src/components/EthVideo.tsx

@@ -1,21 +1,13 @@
-import React from "react"
 import { Box, useColorModeValue } from "@chakra-ui/react"
 
-import darkVideo from "../../public/ethereum-hero-dark.mp4"
-import lightVideo from "../../public/ethereum-hero-light.mp4"
+import darkVideo from "@/public/ethereum-hero-dark.mp4"
+import lightVideo from "@/public/ethereum-hero-light.mp4"
 
-export interface IProps {
-  className?: string
-  videoSrc?: string
-}
-
-const EthVideo: React.FC<IProps> = ({ className, videoSrc }) => {
-  const videoFile = useColorModeValue(lightVideo, darkVideo)
-
-  const src = videoSrc ? videoSrc : videoFile
+const EthVideo = () => {
+  const src = useColorModeValue(lightVideo, darkVideo)
 
   return (
-    <Box className={className}>
+    <Box>
       <video
         id="hero-video"
         width="100%"

src/lib/utils/translations.ts

@@ -66,6 +66,10 @@ const getRequiredNamespacesForPath = (path: string) => {
     ]
   }
 
+  if (path.startsWith("/eth")) {
+    requiredNamespaces = [...requiredNamespaces, "page-eth"]
+  }
+
   if (path.startsWith("/glossary")) {
     requiredNamespaces = [...requiredNamespaces, "glossary"]
   }
@@ -139,6 +143,7 @@ const getRequiredNamespacesForPath = (path: string) => {
     path.startsWith("/nft") ||
     path.startsWith("/roadmap/merge") ||
     path.startsWith("/security") ||
+    path.startsWith("/eth") ||
     path.startsWith("/wallets") ||
     path.startsWith("/web3") ||
     path.startsWith("/quizzes")