Feat/earn page

frontend/src/components/Community/CommunitiesSection.tsx

@@ -4,11 +4,6 @@ import { Community } from "@/queries/community/hero";
 
 import CommunityCard from "./CommunityCard";
 
-
-const baseStyle = clsx(
-  "-translate-y-40 lg:-translate-y-44 grid grid-cols-1 lg:grid-cols-3 gap-6"
-);
-
 interface ICommunitiesSection {
   communities: Community[];
 }
@@ -18,12 +13,23 @@ const CommunitiesSection: React.FC<ICommunitiesSection> = ({ communities }) => {
   const restCommunities = communities.slice(2);
   return (
     <div className="bg-background-2 w-full px-6 lg:px-32">
-      <div className={baseStyle}>
+      <div
+        className={clsx(
+          "-translate-y-40 lg:-translate-y-44",
+          "grid grid-cols-1 lg:grid-cols-3 gap-6"
+        )}
+      >
         {rowOneCommunities.map((community) => (
           <CommunityCard key={community.title} {...community} />
         ))}
       </div>
-      <div className={clsx(baseStyle,"mt-6")}>
+      <div
+        className={clsx(
+          "-translate-y-40 lg:-translate-y-44",
+          "grid grid-cols-1 lg:grid-cols-3 gap-6",
+          "mt-6"
+        )}
+      >
         {restCommunities.map((community) => (
           <CommunityCard key={community.title} {...community} />
         ))}

frontend/src/components/Community/hero.tsx

@@ -14,9 +14,11 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   const { header, subtitle, communityButtons, background } =
     heroData;
   return (
-    <div className="relative pt-52 pb-[277px] lg:pb-[331px] px-6 lg:px-32">
+    <div className="relative pt-44 pb-[277px] lg:pb-[331px] px-6 lg:px-32">
       <div className="space-y-8">
-        <h1 className="text-3xl lg:text-4xl font-medium">{header}</h1>
+        <h1 className="text-3xl lg:text-4xl font-medium pt-1 lg:pt-3">
+          {header}
+        </h1>
         <p className="text-lg">{subtitle}</p>
         <div className="flex flex-wrap gap-6 items-center">
           {communityButtons.map((button) => (
@@ -26,7 +28,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <Button variant="secondary" className=" hover:!bg-primary-blue hover:!border-primary-blue hover:!text-background-2">
+              <Button variant="secondary">
                 <span>{button.text}</span>
               </Button>
             </Link>

frontend/src/components/Cooperative/ReportSection/ReportCard.tsx

@@ -49,7 +49,7 @@ const ReportCard: React.FC<IReportCard> = ({
           }}
         />
 
-        <Link href={reportUrl ?? ""} target="_blank" rel="noreferrer noopenner">
+        <Link href={reportUrl ?? ""} target="_blank" rel="noreferrer noopener">
           <Button
             variant="primary"
             className="text-background-1"

frontend/src/components/Cooperative/hero.tsx

@@ -14,9 +14,11 @@ interface IHero {
 const Hero: React.FC<IHero> = ({ heroData }) => {
   const { header, subtitle, buttons, arrowLink, background } = heroData;
   return (
-    <div className="relative pt-52 pb-52 lg:pb-56 px-6 lg:px-32">
+    <div className="relative pt-44 lg:pt-52 pb-52 lg:pb-56 px-6 lg:px-32">
       <div className="space-y-8">
-        <h1 className="text-3xl lg:text-4xl font-medium">{header}</h1>
+        <h1 className="text-3xl lg:text-4xl font-medium pt-1 lg:pt-3">
+          {header}
+        </h1>
         <p className="text-lg max-w-[685px]">{subtitle}</p>
         <div className="flex flex-wrap gap-6 items-center">
           {buttons.map((button) => (
@@ -35,7 +37,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <ExternalLink
           url={arrowLink.link.url}
           text={arrowLink.text}
-          className="[&>span]:text-primary-text [&>span]:text-base"
+          className="[&>span]:text-primary-text [&>span]:text-base lg:pb-6"
         />
       </div>
       <Image

frontend/src/components/CtaCard.tsx

@@ -29,17 +29,19 @@ const CtaCard: React.FC<ICtaCard> = ({
         width={90}
         height={90}
         src={icon.url}
-        className="object-contain mb-4"
+        className="object-contain mb-4 aspect-square"
         alt="Icon"
       />
       <h2 className="text-xl text-primary-text font-medium mb-6">{title}</h2>
       <p className="text-lg text-secondary-text mb-6">{description}</p>
-      <Divider />
-      <ExternalLink
-        text={arrowLink.text}
-        url={arrowLink.link.url}
-        className="mt-6 mb-4"
-      />
+      <div className="w-full mt-auto">
+        <Divider />
+        <ExternalLink
+          text={arrowLink.text}
+          url={arrowLink.link.url}
+          className="mt-6 mb-1 flex-wrap justify-start"
+        />
+      </div>
     </div>
   );
 };

frontend/src/components/Earn/Hero.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import Image from "next/image";
+
+import { HeroQueryType } from "@/queries/earn/hero";
+
+interface IHero {
+  heroData: HeroQueryType;
+}
+
+const Hero: React.FC<IHero> = ({ heroData }) => {
+  const { title, subtitle, statDisplay, background } = heroData.earnPageHero;
+  return (
+    <div className="relative pt-44 lg:pt-56 pb-[304px] lg:pb-72 px-6 lg:px-32">
+      <div className="space-y-8">
+        <h1 className="text-3xl lg:text-4xl font-medium">{title}</h1>
+        <p className="text-lg">{subtitle}</p>
+
+        <div className="bg-background-translucent md:w-fit rounded-full flex items-center gap-8 p-4 pr-8">
+          <Image
+            src={statDisplay.icon.url}
+            alt="icon"
+            width={90}
+            height={90}
+            className="object-contain"
+          />
+          <div className="flex flex-col">
+            <label className="text-base text-primary-text">
+              {statDisplay.statName}
+            </label>
+            <div className="flex flex-row">
+              <h2 className="text-primary-text font-medium text-xl lg:text-2xl">
+                {statDisplay.statValue}
+              </h2>
+              <h2 className="text-primary-blue text-xl lg:text-2xl">
+                {statDisplay.statValueSuffix}
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Image
+        src={background.url}
+        alt="Hero Image Background"
+        fill
+        className="absolute top-0 left-0 h-full z-[-1] object-cover"
+      />
+    </div>
+  );
+};
+
+export default Hero;

frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx

@@ -0,0 +1,68 @@
+import clsx from "clsx";
+import Image from "next/image";
+import Link from "next/link";
+
+import Button from "@/components/Button";
+import ExternalLink from "@/components/ExternalLink";
+import { KlerosScoutSection as IKlerosScoutSection } from "@/queries/earn/tabs-data";
+
+const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
+  header,
+  productName,
+  productIcon,
+  background,
+  learnMoreButton,
+  arrowLinks,
+}) => {
+  return (
+    <div
+      className={clsx(
+        "bg-background-1 rounded-2xl",
+        "flex flex-col gap-8 py-8 md:py-12 px-6 md:px-8"
+      )}
+    >
+      <div className="flex flex-col md:flex-row gap-6">
+        <Image
+          width={128}
+          height={128}
+          src={productIcon.url}
+          alt="Product Icon"
+        />
+        <div className="flex flex-col gap-4">
+          <div className="text-lg text-primary-purple">{header}</div>
+          <div className="text-xl md:text-2xl text-primary-text">
+            {productName}
+          </div>
+        </div>
+      </div>
+      <div
+        style={{ backgroundImage: `url(${background.url})` }}
+        className={clsx(
+          "relative h-[308px] md:h-[380px] rounded-2xl",
+          "bg-[#bca2df] bg-[-314px] md:bg-[0px] bg-cover  bg-blend-luminosity",
+          "flex justify-center items-center pt-3 md:pt-0"
+        )}
+      >
+        <Link
+          href={learnMoreButton.link.url}
+          target="_blank"
+          rel="noreferrer noopener"
+          className="z-[1] mt-16 md:mt-0"
+        >
+          <Button className="text-background-1">{learnMoreButton.text}</Button>
+        </Link>
+      </div>
+      <div className="flex flex-col md:flex-row items-center gap-8">
+        {arrowLinks.map((arrowLink) => (
+          <ExternalLink
+            key={arrowLink.text}
+            text={arrowLink.text}
+            url={arrowLink.link.url}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default KlerosScoutSection;

frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx

@@ -0,0 +1,36 @@
+import CtaCard from "@/components/CtaCard";
+import ExternalLink from "@/components/ExternalLink";
+import { EarnPageBecomeACuratorTab } from "@/queries/earn/tabs-data";
+import KlerosScoutSection from "./KlerosScoutSection";
+
+const CuratorTabContent: React.FC<EarnPageBecomeACuratorTab> = ({
+  title,
+  description,
+  ctaCard,
+  arrowLink,
+  scoutExplanation,
+  klerosScoutSection,
+}) => {
+  return (
+    <div className="pt-[88px] pb-7 lg:pt-24 lg:pb-12 space-y-12">
+      <div className="text-2xl md:text-3xl font-medium text-primary-text">
+        {title}
+      </div>
+      <div className="text-lg text-secondary-text">{description}</div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {ctaCard.map((card) => (
+          <CtaCard key={card.title} {...card} />
+        ))}
+      </div>
+      <ExternalLink
+        url={arrowLink.link.url}
+        text={arrowLink.text}
+        className="flex-wrap justify-center"
+      />
+      <p className="text-lg text-secondary-text pt-8">{scoutExplanation}</p>
+      <KlerosScoutSection {...klerosScoutSection} />
+    </div>
+  );
+};
+
+export default CuratorTabContent;

frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx

@@ -0,0 +1,52 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import PlusIcon from "@/assets/svgs/icons/plus-icon.svg";
+import Tag from "@/components/Tag";
+import { Court } from "@/queries/earn/tabs-data";
+import { ArrowLink } from "@/queries/navbar";
+
+interface ICourtsSection {
+  mostActiveCourtsHeader: string;
+  mostActiveCourts: Court[];
+  courtsButton: ArrowLink;
+}
+const CourtsSection: React.FC<ICourtsSection> = ({
+  mostActiveCourtsHeader,
+  mostActiveCourts,
+  courtsButton
+}) => {
+  return (
+    <>
+      <h2 className="text-lg md:text-xlfont-medium md:font-normal ">
+        {mostActiveCourtsHeader}
+      </h2>
+      <div className="flex flex-row flex-wrap items-center gap-4">
+        {mostActiveCourts.map((court) => (
+          <Tag
+            key={court.name}
+            text={court.name}
+            className="!text-base leading-none"
+          />
+        ))}
+        <Link
+          href={courtsButton.link.url}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          <button className="w-12 h-12 border-gradient-purple-blue">
+            <Image
+              src={PlusIcon}
+              width="24"
+              height="18"
+              alt="Plus icon"
+              className="inline"
+            />
+          </button>
+        </Link>
+      </div>
+    </>
+  );
+};
+
+export default CourtsSection;

frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Button from "@/components/Button";
+import { EnterCourtSection as IEnterCourtSection } from "@/queries/earn/tabs-data";
+import Image from "next/image";
+import Link from "next/link";
+import ExternalLink from "@/components/ExternalLink";
+
+const EnterCourtSection: React.FC<IEnterCourtSection> = ({ button,arrowLink, background }) => {
+  return (
+    <div className="relative w-full flex flex-col items-center justify-center mt-16 p-8 ">
+      <Link
+        href={button.link.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="mb-8 z-[1]"
+      >
+        <Button>
+          <span className="text-background-2">{button.text}</span>
+        </Button>
+      </Link>
+      <ExternalLink url={arrowLink.link.url} text={arrowLink.text} className="flex-wrap justify-center z-[1]"/>
+      <Image
+        src={background.url}
+        alt="Learn more Image Background"
+        fill
+        className="object-cover rounded-2xl"
+      />
+    </div>
+  );
+};
+export default EnterCourtSection;