chore: general polishes and cleanup

Author: wackerow

src/components/BentoBox/BentoCard.tsx

@@ -32,7 +32,7 @@ const BentoCard = ({
       className
     )}
   >
-    <div className="mb-6 grid place-items-center md:mb-auto">
+    <div className="mb-6 grid place-items-center">
       <NextImage src={imgSrc} alt="" width={imgWidth} height={imgHeight} />
     </div>
     <div>

src/components/BentoBox/Title.tsx

@@ -1,16 +1,22 @@
+import { useTranslation } from "next-i18next"
+
 import type { ClassNameProp } from "@/lib/types"
 
 import { cn } from "@/lib/utils/cn"
 
-const Title = ({ className }: ClassNameProp) => (
-  <div className={cn("flex flex-col", className)}>
-    <div className="w-fit rounded-full bg-primary-low-contrast px-4 py-0 text-sm uppercase text-primary">
-      Use Cases
+const Title = ({ className }: ClassNameProp) => {
+  const { t } = useTranslation("page-index")
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <div className="w-fit rounded-full bg-primary-low-contrast px-4 py-0 text-sm uppercase text-primary">
+        {t("common:nav-use-cases-label")}
+      </div>
+      <h2 className="mb-4 me-4 mt-2 text-5xl font-black xl:mb-6 xl:text-7xl">
+        {t("page-index-bento-header")}
+      </h2>
     </div>
-    <h2 className="mb-4 me-4 mt-2 text-5xl font-black xl:mb-6 xl:text-7xl">
-      A new way to use the internet
-    </h2>
-  </div>
-)
+  )
+}
 
 export default Title

src/components/BentoBox/useBentoBox.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { useTranslation } from "react-i18next"
+import { useTranslation } from "next-i18next"
 
 import { cn } from "@/lib/utils/cn"
 
@@ -63,7 +63,7 @@ export const useBentoBox = () => {
         action: t("page-index:page-index-bento-stablecoins-action"),
         href: "/stablecoins/",
         imgSrc: ImpactImage,
-        imgWidth: 400, // TODO: Fix tablet size alignment (aligning top, should be center?)
+        imgWidth: 400,
         className: cn(
           "border-primary/10",
           positions,

src/components/BigNumber/index.tsx

@@ -55,7 +55,9 @@ const BigNumber = ({
                       <Link href={sourceUrl}>{sourceName}</Link>
                     </p>
                     {lastUpdated && (
-                      <p className="mt-2">Last updated: {lastUpdatedDisplay}</p>
+                      <p className="mt-2">
+                        {t("last-updated")}: {lastUpdatedDisplay}
+                      </p>
                     )}
                   </>
                 }

src/components/FeedbackCard.tsx

@@ -5,11 +5,11 @@ import { useTranslation } from "next-i18next"
 import type { Lang } from "@/lib/types"
 
 import { FeedbackThumbsUpIcon } from "@/components/icons"
-import { Button } from "@/components/ui/buttons/Button"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
+import { Button } from "./ui/buttons/Button"
 import Translation from "./Translation"
 
 import { useSurvey } from "@/hooks/useSurvey"

src/components/Hero/HomeHero/index.tsx

@@ -23,15 +23,10 @@ const HomeHero = ({ heroImg, className }: HomeHeroProps) => {
       </div>
       <div className="flex flex-col items-center border-t-[3px] border-primary-low-contrast px-4 py-12 text-center">
         <Morpher />
-        <div className="flex flex-col items-center space-y-5 lg:max-w-2xl">
+        <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"
-            // TODO: Match paragraph color to design
-            // TODO: Extract intl
-          >
-            The leading platform for innovative apps and Ethereum-backed
-            blockchain networks
+          <p className="max-w-96 text-body-medium">
+            {t("page-index:page-index-description")}
           </p>
         </div>
       </div>

src/components/PostsSwiper/index.tsx

@@ -16,7 +16,7 @@ type PostsSwiperProps = ClassNameProp & {
   items: RSSItem[]
 }
 const PostsSwiper = ({ className, items }: PostsSwiperProps) => (
-  <div className={cn("h-fit gap-8", className)}>
+  <div className={cn("h-fit", className)}>
     <Swiper
       navigation={{
         nextEl: ".swiper-button-next",

src/intl/en/common.json

@@ -198,6 +198,7 @@
   "languages": "Languages",
   "last-24-hrs": "Last 24 hours",
   "last-edit": "Last edit",
+  "last-updated": "Last updated",
   "layer-2": "Layer 2",
   "learn": "Learn",
   "learn-by-coding": "Learn by coding",
@@ -431,4 +432,4 @@
   "wrapped-ether": "Wrapped Ether",
   "yes": "Yes",
   "zero-knowledge-proofs": "Zero-knowledge proofs"
-}
+}

src/intl/en/page-index.json

@@ -1,5 +1,4 @@
 {
-  "page-index-description": "Ethereum is the community-run technology powering the cryptocurrency ether (ETH) and thousands of decentralized applications.",
   "page-index-title-button": "Explore Ethereum",
   "page-index-touts-header": "Explore ethereum.org",
   "page-index-contribution-banner-title": "Contribute to ethereum.org",
@@ -66,6 +65,7 @@
   "page-index-activity-description": "Activity from all Ethereum networks",
   "page-index-activity-tag": "Activity",
   "page-index-activity-title": "The strongest ecosystem",
+  "page-index-bento-header": "A new way to use the internet",
   "page-index-bento-assets-action": "More on NFTs",
   "page-index-bento-assets-content": "Arts, certificates or even real estate can be tokenized. Anything can be a tradable token. Ownership is public and verifiable.",
   "page-index-bento-assets-title": "The internet of assets",
@@ -103,6 +103,7 @@
   "page-index-cta-networks-label": "Choose a network",
   "page-index-cta-wallet-description": "Create accounts, manage assets",
   "page-index-cta-wallet-label": "Pick a wallet",
+  "page-index-description": "The leading platform for innovative apps and Ethereum-backed blockchain networks",
   "page-index-developers-code-example-description-0": "Build a bank powered by logic you've programmed",
   "page-index-developers-code-example-description-1": "Create tokens that you can transfer and use across applications",
   "page-index-developers-code-example-description-2": "Use existing languages to interact with Ethereum and other applications",