kleros · alcercu · Feb 20, 2025 · Feb 20, 2025
diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx
@@ -17,10 +17,10 @@ const Hero: React.FC = async () => {
   return (
     <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-8">
-        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
+        <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
           {header}
         </h1>
-        <p className="max-w-[685px] text-lg">{subtitle}</p>
+        <p className="max-w-[685px] text-lg text-primary-text">{subtitle}</p>
         <div className="flex flex-wrap gap-6">
           {buttons.map((button) => (
             <CustomLink key={button.text} href={button.link.url}>

diff --git a/frontend/src/app/home/components/CaseStudies.tsx b/frontend/src/app/home/components/CaseStudies.tsx
@@ -16,8 +16,10 @@ const CaseStudies: React.FC = async () => {
   return (
     <div className="bg-background-2 px-6 py-12 lg:px-32 lg:pt-24">
       <div className="flex flex-col gap-8">
-        <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
-        <p className="text-base lg:text-lg">{subtitle}</p>
+        <h3 className="text-xl font-medium text-primary-text lg:text-3xl">
+          {title}
+        </h3>
+        <p className="text-base text-primary-text lg:text-lg">{subtitle}</p>
       </div>
       <div className="mt-16 grid grid-cols-1 gap-4 lg:grid-cols-3">
         {cards.map(({ title, subtitle, icon, link }) => (

diff --git a/frontend/src/app/home/components/GetInTouch.tsx b/frontend/src/app/home/components/GetInTouch.tsx
@@ -19,10 +19,10 @@ const GetInTouch: React.FC = async () => {
       }
     >
       <div>
-        <h3 className="mb-8 text-xl font-medium lg:mb-12 lg:text-3xl">
+        <h3 className="mb-8 text-xl font-medium text-primary-text lg:mb-12 lg:text-3xl">
           {title}
         </h3>
-        <p className="mb-6 lg:mb-8 lg:text-lg">{subtitle}</p>
+        <p className="mb-6 text-primary-text lg:mb-8 lg:text-lg">{subtitle}</p>
         <ExternalLink className="mb-16" text={link.text} url={link.link.url} />
       </div>
       <Image

diff --git a/frontend/src/app/home/components/Hero.tsx b/frontend/src/app/home/components/Hero.tsx
@@ -26,8 +26,10 @@ const Hero: React.FC = async () => {
   return (
     <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-20">
       <div className="space-y-8">
-        <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
-        <p className="text-lg">{subtitle}</p>
+        <h1 className="text-2xl font-medium text-primary-text lg:text-4xl">
+          {title}
+        </h1>
+        <p className="text-lg text-primary-text">{subtitle}</p>
         <div className="lg:hidden">
           <CustomLink href={primaryButton.link.url}>
             <Button>

diff --git a/frontend/src/app/home/components/HowKlerosWorks.tsx b/frontend/src/app/home/components/HowKlerosWorks.tsx
@@ -21,8 +21,10 @@ const HowKlerosWorks: React.FC = async () => {
         <label className="text-base text-primary-purple lg:text-lg">
           {label}
         </label>
-        <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
-        <p className="text-base lg:text-lg">{subtitle}</p>
+        <h3 className="text-xl font-medium text-primary-text lg:text-3xl">
+          {title}
+        </h3>
+        <p className="text-base text-primary-text lg:text-lg">{subtitle}</p>
       </div>
       <ResponsiveImage
         mobileProps={{

diff --git a/frontend/src/app/home/components/LearnPosts.tsx b/frontend/src/app/home/components/LearnPosts.tsx
@@ -18,8 +18,10 @@ const LearnPosts: React.FC = async () => {
   return (
     <div className="bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
       <div className="flex flex-col gap-8">
-        <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
-        <p className="text-base lg:text-lg">{subtitle}</p>
+        <h3 className="text-xl font-medium text-primary-text lg:text-3xl">
+          {title}
+        </h3>
+        <p className="text-base text-primary-text lg:text-lg">{subtitle}</p>
         <div
           className={
             "mx-auto mb-12 mt-16 flex flex-wrap gap-4 xl:grid xl:grid-cols-3"

diff --git a/frontend/src/app/home/components/StartEarning.tsx b/frontend/src/app/home/components/StartEarning.tsx
@@ -17,8 +17,10 @@ const LearnPosts: React.FC = async () => {
   return (
     <div className="bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
       <div className="flex flex-col gap-8">
-        <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
-        <p className="text-base lg:text-lg">{subtitle}</p>
+        <h3 className="text-xl font-medium text-primary-text lg:text-3xl">
+          {title}
+        </h3>
+        <p className="text-base text-primary-text lg:text-lg">{subtitle}</p>
         <div className="mx-auto mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
           {cards.map(({ icon, title, subtitle }) => (
             <CtaCard key={title} {...{ icon, title, description: subtitle }} />

diff --git a/frontend/src/app/home/components/TokenStats.tsx b/frontend/src/app/home/components/TokenStats.tsx
@@ -12,10 +12,12 @@ const TokenStats: React.FC<{
       {tokenStats.map(({ key, primaryValue, secondaryValue }) => (
         <div key={key} className="flex flex-col">
           <div className="flex flex-row">
-            <h3 className="text-2xl font-medium">{primaryValue}</h3>
+            <h3 className="text-2xl font-medium text-primary-text">
+              {primaryValue}
+            </h3>
             <h3 className="text-2xl text-primary-blue">{secondaryValue}</h3>
           </div>
-          <p className="font-medium">{key}</p>
+          <p className="font-medium text-primary-text">{key}</p>
         </div>
       ))}
     </div>

diff --git a/frontend/src/app/home/components/UseCases.tsx b/frontend/src/app/home/components/UseCases.tsx
@@ -17,7 +17,10 @@ const UseCases: React.FC = async () => {
         "space-y-8 bg-background-2 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24"
       }
     >
-      <h3 className="text-xl font-medium lg:text-3xl"> {title} </h3>
+      <h3 className="text-xl font-medium text-primary-text lg:text-3xl">
+        {" "}
+        {title}{" "}
+      </h3>
       <UseCasesCards />
       <ExternalLink
         text={arrowLink.text}

diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/components/BrandAssets/Hero.tsx
@@ -15,10 +15,12 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
     <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-[302px]">
       <div className="space-y-6">
-        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
+        <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
           {heroData.header}
         </h1>
-        <p className="max-w-[685px] text-lg">{heroData.subtitle}</p>
+        <p className="max-w-[685px] text-lg text-primary-text">
+          {heroData.subtitle}
+        </p>
         <div>
           <CustomLink href={heroData.button?.link?.url}>
             <Button variant="secondary">

diff --git a/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx b/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx
@@ -11,7 +11,7 @@ const KlerosBadgesSection: React.FC<IKlerosBadgesSection> = ({
 }) => {
   return (
     <div className="relative space-y-8 bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
-      <h1 className="text-xl font-medium lg:text-2xl">
+      <h1 className="text-xl font-medium text-primary-text lg:text-2xl">
         {klerosBadgesData.header}
       </h1>
       <p className="pb-4 text-secondary-text lg:pb-8 lg:text-lg">

diff --git a/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx b/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx
@@ -11,7 +11,7 @@ const KlerosColorsSection: React.FC<IKlerosColorsSection> = ({
 }) => {
   return (
     <div className="relative space-y-8 bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
-      <h1 className="text-xl font-medium lg:text-2xl">
+      <h1 className="text-xl font-medium text-primary-text lg:text-2xl">
         {klerosColorsData.header}
       </h1>
       <p className="pb-4 text-sm font-medium text-secondary-text lg:pb-8 lg:text-lg lg:font-normal">

diff --git a/frontend/src/components/BrandAssets/KlerosFontsSection.tsx b/frontend/src/components/BrandAssets/KlerosFontsSection.tsx
@@ -11,7 +11,7 @@ const KlerosFontsSection: React.FC<IKlerosFontsSection> = ({
 }) => {
   return (
     <div className="relative space-y-8 bg-background-1 px-6 pb-12 lg:space-y-16 lg:px-32 lg:pb-24 lg:pt-8">
-      <h1 className="text-xl font-medium lg:text-2xl">
+      <h1 className="text-xl font-medium text-primary-text lg:text-2xl">
         {klerosFontsData.header}
       </h1>
       <CtaCard

diff --git a/frontend/src/components/BrandAssets/KlerosLogoSection.tsx b/frontend/src/components/BrandAssets/KlerosLogoSection.tsx
@@ -11,7 +11,7 @@ const KlerosLogoSection: React.FC<IKlerosLogoSection> = ({
 }) => {
   return (
     <div className="relative space-y-12 bg-background-1 px-6 py-12 lg:space-y-16 lg:px-32 lg:py-24">
-      <h1 className="text-xl font-medium lg:text-3xl">
+      <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
         {klerosLogoData.header}
       </h1>
       <div className="flex flex-row flex-wrap justify-center gap-x-8 gap-y-12 lg:gap-y-16">

diff --git a/frontend/src/components/BrandAssets/LogosPackageSection.tsx b/frontend/src/components/BrandAssets/LogosPackageSection.tsx
@@ -13,7 +13,7 @@ const LogosPackageSection: React.FC<ILogosPackageSection> = ({
 }) => {
   return (
     <div className="relative space-y-6 bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
-      <h1 className="text-xl font-medium lg:text-3xl">
+      <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
         {logosPackageData.header}
       </h1>
       <p className="text-secondary-text lg:text-lg">

diff --git a/frontend/src/components/BrandAssets/PnkTokenSection.tsx b/frontend/src/components/BrandAssets/PnkTokenSection.tsx
@@ -9,7 +9,9 @@ interface IPnkTokenSection {
 const PnkTokenSection: React.FC<IPnkTokenSection> = ({ pnkTokenData }) => {
   return (
     <div className="relative space-y-6 bg-background-1 px-6 py-12 lg:space-y-8 lg:px-32 lg:py-24">
-      <h1 className="text-xl font-medium lg:text-3xl">{pnkTokenData.header}</h1>
+      <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+        {pnkTokenData.header}
+      </h1>
       <p className="pb-10 text-secondary-text lg:pb-16 lg:text-lg">
         {pnkTokenData.subtitle}
       </p>

diff --git a/frontend/src/components/BrandAssets/StyledImagesSection.tsx b/frontend/src/components/BrandAssets/StyledImagesSection.tsx
@@ -11,10 +11,10 @@ const StyledImagesSection: React.FC<IStyledImagesSection> = ({
 }) => {
   return (
     <div className="relative space-y-8 bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
-      <h1 className="text-xl font-medium lg:text-3xl">
+      <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
         {styledImagesData.header}
       </h1>
-      <h1 className="text-lg lg:text-2xl">
+      <h1 className="text-lg text-primary-text lg:text-2xl">
         {styledImagesData.wallpapersHeader}
       </h1>
       <p className="pb-8 text-secondary-text lg:pb-16 lg:text-lg">
@@ -28,7 +28,7 @@ const StyledImagesSection: React.FC<IStyledImagesSection> = ({
         })}
       </div>
       <div className="space-y-6 py-8 lg:space-y-8 lg:py-16">
-        <h2 className="text-lg font-medium lg:text-2xl lg:font-normal">
+        <h2 className="text-lg font-medium text-primary-text lg:text-2xl lg:font-normal">
           {styledImagesData.productMockupsHeader}
         </h2>
         <p className="text-secondary-text lg:text-lg">

diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
@@ -9,7 +9,7 @@ const primaryStyle = clsx(
 );
 
 const secondaryStyle = clsx(
-  "bg-transparent border-2 border-white",
+  "bg-transparent border-2 border-white text-primary-text",
   "hover:bg-primary-blue hover:border-primary-blue hover:text-background-2",
 );
 

diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/components/Community/hero.tsx
@@ -16,10 +16,10 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
     <div className="relative px-6 pb-[277px] pt-44 lg:px-32 lg:pb-[331px]">
       <div className="space-y-8">
-        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
+        <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
           {header}
         </h1>
-        <p className="text-lg">{subtitle}</p>
+        <p className="text-lg text-primary-text">{subtitle}</p>
         <div className="flex flex-wrap items-center gap-6">
           {communityButtons.map((button) => (
             <CustomLink key={button.text} href={button.link.url}>

diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx
@@ -17,10 +17,10 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
     <div className="relative px-6 pb-52 pt-44 lg:px-32 lg:pb-56 lg:pt-52">
       <div className="space-y-8">
-        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
+        <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
           {header}
         </h1>
-        <p className="max-w-[685px] text-lg">{subtitle}</p>
+        <p className="max-w-[685px] text-lg text-primary-text">{subtitle}</p>
         <div className="flex flex-wrap items-center gap-6">
           {buttons.map((button) => (
             <CustomLink key={button.text} href={button.link.url}>

diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/components/Earn/Hero.tsx
@@ -14,8 +14,10 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
     <div className="relative px-6 pb-[218px] pt-44 lg:px-32 lg:pb-72 lg:pt-56">
       <div className="space-y-8">
-        <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
-        <p className="text-lg">{subtitle}</p>
+        <h1 className="text-2xl font-medium text-primary-text lg:text-4xl">
+          {title}
+        </h1>
+        <p className="text-lg text-primary-text">{subtitle}</p>
 
         <div
           className={clsx(

diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx b/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
@@ -19,7 +19,7 @@ const CourtsSection: React.FC<ICourtsSection> = ({
 }) => {
   return (
     <>
-      <h2 className="text-lg font-medium lg:pt-4 lg:text-xl lg:font-normal">
+      <h2 className="text-lg font-medium text-primary-text lg:pt-4 lg:text-xl lg:font-normal">
         {mostActiveCourtsHeader}
       </h2>
       <div className="flex flex-row flex-wrap items-center gap-4">

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -33,7 +33,7 @@ const Footer: React.FC = async () => {
               <h2 className="text-primary-purple">{title}</h2>
               {links.map(({ name, url }) => (
                 <CustomLink
-                  className={clsx(hoverScaleUp, "w-max")}
+                  className={clsx(hoverScaleUp, "w-max text-primary-text")}
                   key={name}
                   href={url}
                 >
@@ -65,14 +65,17 @@ const Footer: React.FC = async () => {
           width="185"
           height="48"
         />
-        <p className="md:justify-self-center"> {cta.notice} </p>
+        <p className="text-primary-text md:justify-self-center">
+          {" "}
+          {cta.notice}{" "}
+        </p>
         <div
           className={clsx(
             "flex flex-col items-center justify-items-center gap-6 md:flex-row",
             "md:justify-self-end",
           )}
         >
-          <p>{cta.cta_text}</p>
+          <p className="text-primary-text">{cta.cta_text}</p>
           <Button>
             <span className="text-background-2">{cta.cta_button}</span>
           </Button>

diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx
@@ -16,10 +16,12 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
     <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-6">
-        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
+        <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
           {heroData.title}
         </h1>
-        <p className="max-w-[685px] text-lg">{heroData.subtitle}</p>
+        <p className="max-w-[685px] text-lg text-primary-text">
+          {heroData.subtitle}
+        </p>
         <div>
           <CustomLink href={heroData.button.link.url}>
             <Button variant="secondary">
@@ -30,7 +32,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <div className="block space-x-2">
           {heroData.arrowLink?.map((arrowLink) => (
             <CustomLink key={arrowLink.text} href={arrowLink.link.url}>
-              <span className="mr-2">{arrowLink.text}</span>
+              <span className="mr-2 text-primary-text">{arrowLink.text}</span>
               <Image
                 src={LinkArrow}
                 width="24"

diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx
@@ -12,7 +12,7 @@ interface ISafeSnap {
 const SafeSnap: React.FC<ISafeSnap> = ({ useCasesData }) => {
   return (
     <div className="rounded-2xl border border-stroke bg-background-2 p-6 pb-8 lg:p-8 lg:pb-16">
-      <h2 className="mb-4 text-lg font-medium lg:text-xl">
+      <h2 className="mb-4 text-lg font-medium text-primary-text lg:text-xl">
         {useCasesData.solutionSections.title}
       </h2>
       <div className="mb-8 text-secondary-text lg:text-lg">

diff --git a/frontend/src/components/ForBuilders/UseCasesSection/index.tsx b/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
@@ -12,7 +12,7 @@ interface IUseCasesSection {
 const UseCasesSection: React.FC<IUseCasesSection> = ({ useCasesData }) => {
   return (
     <div className="relative bg-background-1 px-6 py-16 md:py-24 lg:px-32">
-      <h1 className="mb-8 text-xl font-medium lg:mb-12 lg:text-3xl">
+      <h1 className="mb-8 text-xl font-medium text-primary-text lg:mb-12 lg:text-3xl">
         {useCasesData.sectionHeader}
       </h1>
       <UseCasesCards selectedIndex={0} />

diff --git a/frontend/src/components/ImageDownload.tsx b/frontend/src/components/ImageDownload.tsx
@@ -15,7 +15,7 @@ const ImageDownload: React.FC<IImageDownload> = ({ imageDownload }) => {
     <div className="flex flex-col gap-4">
       <Image src={imageDownload.image.url} alt="" width="378" height="200" />
       <div className="flex flex-row items-center gap-4">
-        <span>{imageDownload.name}</span>
+        <span className="text-primary-text">{imageDownload.name}</span>
         {imageDownload.svgDownloadLink ? (
           <DownloadButton name="SVG" url={imageDownload.svgDownloadLink} />
         ) : null}

diff --git a/frontend/src/components/PNKToken/Hero.tsx b/frontend/src/components/PNKToken/Hero.tsx
@@ -18,10 +18,10 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
     <div className="relative px-6 pb-52 pt-44 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-8">
-        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
+        <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
           {header}
         </h1>
-        <p className="max-w-[685px] text-lg">{subtitle}</p>
+        <p className="max-w-[685px] text-lg text-primary-text">{subtitle}</p>
         <div>
           <CustomLink href={buyButton.link.url}>
             <Button variant="secondary">

diff --git a/frontend/src/components/ResearchDevelopment/Hero.tsx b/frontend/src/components/ResearchDevelopment/Hero.tsx
@@ -18,10 +18,10 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
     <div className="relative px-6 pb-36 pt-44 md:pt-52 lg:px-32 lg:pb-72">
       <div className="space-y-8">
-        <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
+        <h1 className="pt-1 text-2xl font-medium text-primary-text lg:pt-3 lg:text-4xl">
           {header}
         </h1>
-        <p className="max-w-[685px] text-lg">{subtitle}</p>
+        <p className="max-w-[685px] text-lg text-primary-text">{subtitle}</p>
         <div className="flex flex-wrap gap-6">
           {buttons.map((button) => (
             <CustomLink key={button.text} href={button.link.url}>

diff --git a/...nd/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx b/...nd/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx
@@ -20,7 +20,7 @@ const WaitlistSection: React.FC<RAndDPageWaitlistSection> = ({
       )}
     >
       <div>
-        <h3 className="mb-8 text-xl font-medium lg:mb-12 lg:text-3xl">
+        <h3 className="mb-8 text-xl font-medium text-primary-text lg:mb-12 lg:text-3xl">
           {header}
         </h3>
         <div className="flex items-start gap-4 md:flex-row md:gap-8">

diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
@@ -58,7 +58,9 @@ const KlerosBook: React.FC<IKlerosBook> = ({
       <div className="space-y-16">
         <div className="space-y-6">
           <h3 className="text-primary-purple lg:text-lg">{subtitle}</h3>
-          <h1 className="text-xl font-medium lg:text-3xl">{bookTitle}</h1>
+          <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+            {bookTitle}
+          </h1>
         </div>
         <div className="flex flex-wrap gap-4">
           {downloadFormats.map((format) => (