fix: adjust font scale for the homepage

Author: mhenriette

public/locales/bg/common.json

@@ -31,7 +31,7 @@
   "page.index.communities.title": "Communities of Practice",
   "page.index.communities.subtitle": "In our communities, you will work with your peers to learn and build amazing projects using blockchain technology.",
   "page.index.communities.partnering.title": "Your community here",
-  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space; that's why we created dacade.",
+  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space, that's why we created dacade.",
   "page.index.communities.partnering.button-text": "Become a partner",
   "page.protocols.title.1": "Developer Adoption",
   "page.protocols.title.2": " through Peer-to-Peer education",

public/locales/en/common.json

@@ -31,7 +31,7 @@
   "page.index.communities.title": "Communities of Practice",
   "page.index.communities.subtitle": "In our communities, you will work with your peers to learn and build amazing projects using blockchain technology.",
   "page.index.communities.partnering.title": "Your community here",
-  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space; that's why we created dacade.",
+  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space, that's why we created dacade.",
   "page.index.communities.partnering.button-text": "Become a partner",
   "page.protocols.title.1": "Developer Adoption",
   "page.protocols.title.2": " through Peer-to-Peer education",

public/locales/hr/common.json

@@ -31,7 +31,7 @@
   "page.index.communities.title": "Communities of Practice",
   "page.index.communities.subtitle": "In our communities, you will work with your peers to learn and build amazing projects using blockchain technology.",
   "page.index.communities.partnering.title": "Your community here",
-  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space; that's why we created dacade.",
+  "page.index.communities.partnering.subtitle": "We know that developer community growth is a top priority for software projects in this highly competitive space, that's why we created dacade.",
   "page.index.communities.partnering.button-text": "Become a partner",
   "page.protocols.title.1": "Developer Adoption",
   "page.protocols.title.2": " through Peer-to-Peer education",

src/components/cards/Numbered.tsx

@@ -29,9 +29,11 @@ export default function Numbered({ index = 1, title = "", text = "" }: NumberedP
   return (
     <div className="flex items-center md:flex-col md:items-start gap-2.5">
       <div className="block">
-        <div className="w-9 h-9 md:w-14 md:h-14 border border-solid border-gray-400 text-gray-400 font-medium rounded-full flex items-center justify-center">{index}</div>
+        <div className="w-9 h-9 md:w-14 md:h-14 border border-solid border-gray-400 text-gray-400 font-medium rounded-full flex items-center justify-center md:text-2xl text-lg">
+          {index}
+        </div>
       </div>
-      <div>
+      <div className="leading-6 tracking-[-0.02rem]">
         <span className="font-medium">{title}</span> <span>{text}</span>
       </div>
     </div>

src/components/cards/Partnering.tsx

@@ -12,18 +12,18 @@ export default function PartneringCard() {
   const { t } = useTranslation();
   return (
     <div className="relative lg:mt-0 xl:pt-0 rounded-3.5xl overflow-hidden mt-5 md:mt-0 border border-solid border-gray-light md:border-none">
-      <div className="relative z-10 p-6 lg:pb-3 w-full text-primary h-full min-h-xs flex flex-col justify-between divide-y-2 divide-y divide-dotted divide-theme-accent">
-        <div className="max-w-sm">
-          <p className="text-2xl font-medium mb-2.5 leading-none">{t("page.index.communities.partnering.title")}</p>
-          <p className="text-base mt-0 mb-20 lg:mb-0 leading-normal">{t("page.index.communities.partnering.subtitle")}</p>
+      <div className="relative z-10 p-6 lg:pb-3 w-full text-primary h-full min-h-xs flex flex-col justify-between divide-y-2 divide-dotted divide-theme-accent">
+        <div>
+          <p className="text-.5xl leading-7 font-medium mb-2.5">{t("page.index.communities.partnering.title")}</p>
+          <p className="text-base mt-0 mb-20 lg:mb-0 leading-6 tracking-[-0.01rem]">{t("page.index.communities.partnering.subtitle")}</p>
         </div>
         <div className="mt-4 flex-none md:flex justify-between">
           <div className="md:flex md:flex-col space-y-0">
-            <div className="mt-4 font-light text-theme-accent md:w-48">{t("partnering.card.text")}</div>
+            <div className="mt-4 font-light text-theme-accent md:w-48 text-sm leading-4 lg:leading-5">{t("partnering.card.text")}</div>
           </div>
           <div className="mt-4 align-middle">
             <a href="mailto:[email protected]">
-              <Button className="hover:bg-primary group-hover:text-white leading-relaxed lg:px-7 px-5 font-medium" variant="outline-primary" type="button" padding={false}>
+              <Button className="hover:bg-primary group-hover:text-white lg:px-7 px-5 font-medium" variant="outline-primary" type="button" padding={false}>
                 {t("page.index.communities.partnering.button-text")}
               </Button>
             </a>

src/components/cards/community/index.tsx

@@ -65,11 +65,11 @@ export default function CommunityCard({ showRewards = true, community }: Communi
           <div className="flex-grow">
             <div className="flex flex-col justify-between space-y-5 sm:flex-row lg:flex-col 2xl:flex-row">
               <div className="text-.5xl md:text-2xl max-w-sm min-h-2xs md:min-h-3xs lg:min-h-2xs xl:min-h-2xs font-medium pb-5">
-                <h1 className="tracking-tight max-w-text-xs text-theme-text">{community.name}</h1>
-                <p className="pr-2 tracking-tight md:max-w-text-md text-theme-accent">{community.description || ""}</p>
+                <h1 className="text-theme-text text-xl lg:text-.5xl leading-7">{community.name}</h1>
+                <p className="pr-2 text-theme-accent lg:text-.5xl leading-7">{community.description || ""}</p>
               </div>
               <div className="self-end max-w-lg sm:h-full sm:-mb-0 md:mb-2 md:h-auto">
-                <Image src={community.icon} className="relative mb-5 h-44 w-44" alt="" width={56} height={56} />
+                <Image src={community.icon} className="relative mb-5 h-44 w-44" alt="community icon" width={56} height={56} />
               </div>
             </div>
             <div className="flex flex-col items-start justify-start max-w-xs -mt-4 md:flex-row lg:flex-col md:-mt-7 md:max-w-lg">
@@ -82,8 +82,8 @@ export default function CommunityCard({ showRewards = true, community }: Communi
           </div>
           <div className="flex justify-between flex-none mt-4">
             <div className="flex flex-col space-y-0">
-              <div className="mt-4 font-medium text-theme-accent">{t("communities.card.earn")}</div>
-              <div className="mt-4 font-light text-theme-accent">
+              <div className="mt-4 font-medium text-theme-accent text-sm leading-4 lg:leading-5">{t("communities.card.earn")}</div>
+              <div className="mt-4 font-light text-theme-accent text-sm leading-4 lg:leading-5">
                 {t(community.challenges > 1 ? "communities.card.challenges" : "communities.card.challenge", { count: community.challenges })}
               </div>
             </div>

src/components/sections/homepage/Communities.tsx

@@ -25,7 +25,7 @@ export default function CommunitiesSection({ communities }: { communities: Commu
     <Section type="default" padding="pt-20 lg:pb-24 md:pb-24">
       <div id="communities" className="md:flex relative items-end">
         <div className="pr-5">
-          <p className="uppercase font-semibold leading-none text-base">{t("page.index.communities.title")}</p>
+          <p className="uppercase font-bold text-xs leading-3.5 tracking-[0.03rem]">{t("page.index.communities.title")}</p>
         </div>
         <div className="pl-7 relative hidden lg:block md:block">
           <div className="message-bubble">{t("page.index.communities.subtitle")}</div>

src/components/sections/homepage/Main.tsx

@@ -40,8 +40,8 @@ export default function MainSection(): ReactElement {
   return (
     <Section type="default" padding="p-0">
       <div className="w-full lg:py-24 pt-24 pb-8">
-        <h1 className="lg:text-8xl md:text-6xl text-5xl leading-none tracking-tighter">{t("page.index.main.title")}</h1>
-        <p className="lg:text-8xl md:text-6xl text-4.5xl py-2 lg:py-0 md:py-0 sm:py-0 text-gray-400 tracking-tighter leading-none">{t("page.index.main.subtitle")}</p>
+        <h1 className="lg:text-7.75xl md:text-6xl text-4.5xl lg:leading-12 leading-10 -tracking-4">{t("page.index.main.title")}</h1>
+        <p className="lg:text-7.75xl md:text-6xl text-4.5xl py-2 lg:py-0 md:py-0 sm:py-0 text-gray-400 -tracking-4 lg:leading-12 leading-10">{t("page.index.main.subtitle")}</p>
       </div>
       <div className="flex justify-between">
         <div className="w-full max-w-xs hidden lg:block">

src/components/sections/homepage/OpenSource.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from "next-i18next";
 export default function OpenSource() {
   const { t } = useTranslation();
   return (
-    <div className="text-4xl lg:text-5xl pt-24 flex flex-col text-wrap space-y-2">
+    <div className="text-4xl lg:text-5xl leading-10 lg:leading-11 pt-24 flex flex-col text-wrap space-y-2">
       <p >
         {t("footer.open.source")}
         <br className="block md:hidden lg:block" />

src/components/sections/homepage/_partials/testimonials/CommunityStats.tsx

@@ -36,11 +36,11 @@ export default function CommunityStats() {
 
   return (
     <div className="p-7 bg-primary rounded-3.5xl mx-auto text-white relative md:absolute md:top-28 lg:top-32 xl:w-1/3 md:w-4/6 z-10 sm:max-w-sm">
-      <h3 className="m-0 text-4.5xl w-3/4">{t("testimonials.community.title")}</h3>
+      <h3 className="m-0 text-[32px] lg:text-4.5xl leading-8 lg:leading-10.5 w-3/4">{t("testimonials.community.title")}</h3>
       <div className="relative divide-y divide-white divide-dotted">
         {stats.map((stat) => (
           <div key={stat.title} className="py-6">
-            <span className="block text-.5xl mb-2">{stat.count}</span>
+            <span className="block lg:text-.5xl text-xl mb-2">{stat.count}</span>
             <p className="text-base w-3/4 m-0">
               <span className="font-graphik font-medium">{t(stat.title)}</span> {t(stat.description)}
             </p>