chore: suggestions from design review

Author: wackerow

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/ValuesMarquee.tsx

@@ -23,6 +23,7 @@ type ItemProps = React.HTMLAttributes<HTMLButtonElement> & {
   pairing: Pairing
   separatorClass: string
   container?: HTMLElement | null
+  label: string
 }
 
 const Item = ({
@@ -31,14 +32,15 @@ const Item = ({
   pairing,
   separatorClass,
   container,
+  label,
 }: ItemProps) => (
   <>
     <Tooltip
       container={container}
       content={
         <Stack>
           <h3 className="text-md text-body-medium dark:text-gray-300">
-            {pairing.ethereum.label} x {pairing.legacy.label}
+            {label}
           </h3>
           <div className="flex flex-col gap-4">
             <div className="flex gap-2 text-body-medium">
@@ -57,7 +59,7 @@ const Item = ({
               <div className="p-1 text-lg">
                 <EthGlyphSolid />
               </div>
-              <div className="space-y-2">
+              <div className="flex flex-col gap-2">
                 {pairing.ethereum.content.map((line) => (
                   <p key={line} className="text-sm">
                     {line}
@@ -110,7 +112,7 @@ const Row = forwardRef<HTMLDivElement, RowProps>(
               <div
                 key={idx}
                 className={cn(
-                  "flex min-w-fit items-center space-x-10 p-6 motion-reduce:w-full motion-reduce:animate-none motion-reduce:justify-center",
+                  "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",
@@ -167,6 +169,7 @@ const ValuesMarquee = () => {
           {pairings.map((pairing) => (
             <Item
               key={pairing.ethereum.label}
+              label={pairing.ethereum.label}
               container={containerFirst}
               pairing={pairing}
               separatorClass="bg-accent-a"
@@ -186,6 +189,7 @@ const ValuesMarquee = () => {
           {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"
@@ -196,16 +200,16 @@ const ValuesMarquee = () => {
           ))}
         </Row>
 
-        <div className="absolute start-[50%] top-[50%] flex -translate-x-[50%] -translate-y-[50%] items-center overflow-hidden rounded-lg text-xs font-bold">
+        <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-[13px] border-t-blue-50 dark:border-t-blue-600",
+              "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-[13px] border-b-gray-50 dark:border-b-gray-800",
+              "border-b-[15px] border-b-gray-50 dark:border-b-gray-800",
               "border-l-8 border-l-gray-50 dark:border-l-gray-800"
             )}
           />

src/intl/en/page-index.json

@@ -100,9 +100,9 @@
   "page-index-values-privacy-legacy-content-1": "Most apps gather as much of your personal information as possible so that they can target you with tailored marketing.",
   "page-index-values-privacy-ethereum-label": "Privacy oriented",
   "page-index-values-privacy-ethereum-content-0": "Ethereum community respects privacy. You you have the right to use apps without revealing yourself or your contact information.",
-  "page-index-values-integration-legacy-label": "Integrated",
+  "page-index-values-integration-legacy-label": "Fragmented",
   "page-index-values-integration-legacy-content-0": "Most apps push you to create separate accounts, making it hard to remember all your login details and registrations.",
-  "page-index-values-integration-ethereum-label": "Fragmented",
+  "page-index-values-integration-ethereum-label": "Integrated",
   "page-index-values-integration-ethereum-content-0": "With Ethereum you can reuse one account in all apps instead. No individual registrations are needed.",
   "page-index-values-decentralization-legacy-label": "Centralized",
   "page-index-values-decentralization-legacy-content-0": "Companies are owned by private entrepreneurs and shareholders. They alone exert control over the company and benefit the most from its success.",
@@ -118,4 +118,3 @@
   "page-index-values-open-ethereum-label": "Open to all",
   "page-index-values-open-ethereum-content-0": "Ethereum is public to all. Anyone can see, use, and improve the code, making it better for everyone."
 }
- 

src/pages/index.tsx

@@ -697,8 +697,8 @@ const HomePage = ({
               )}
             </div>
           </div>
-          <div className="flex justify-start py-8">
-            <ButtonLink href="/community/events/" size="lg" className="mx-auto">
+          <div className="flex py-8 sm:justify-center">
+            <ButtonLink href="/community/events/" size="lg">
               {t("page-index:page-index-events-action")} <ChevronNext />
             </ButtonLink>
           </div>

tailwind.config.ts

@@ -295,8 +295,8 @@ const config = {
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
-        "scroll-left": "scroll-left 25s linear infinite",
-        "scroll-right": "scroll-right 25s linear infinite",
+        "scroll-left": "scroll-left 30s linear infinite",
+        "scroll-right": "scroll-right 30s linear infinite",
       },
       // Add custom border-radius tailwinds extension for "4xl" as "2rem"
       borderRadius: {