From 4279c1f3095b68c3dec49644abfde63d3493b99e Mon Sep 17 00:00:00 2001
From: nemanjafleek <nemanjafleek@gmail.com>
Date: Fri, 24 Jan 2025 17:55:50 +0100
Subject: [PATCH 1/4] feat: prepare basic component structure for the
 Affiliates page

---
 src/components/Affiliates/Section.tsx     | 18 +++++++++++++
 src/components/Affiliates/images/.gitkeep |  0
 src/components/Affiliates/index.tsx       | 32 +++++++++++++++++++++++
 src/pages/affiliates.astro                | 17 ++++++++++++
 src/settings.json                         | 23 ++++++++++++++++
 5 files changed, 90 insertions(+)
 create mode 100644 src/components/Affiliates/Section.tsx
 create mode 100644 src/components/Affiliates/images/.gitkeep
 create mode 100644 src/components/Affiliates/index.tsx
 create mode 100644 src/pages/affiliates.astro

diff --git a/src/components/Affiliates/Section.tsx b/src/components/Affiliates/Section.tsx
new file mode 100644
index 000000000..84c5b0a2d
--- /dev/null
+++ b/src/components/Affiliates/Section.tsx
@@ -0,0 +1,18 @@
+import { cn } from '@utils/cn';
+
+interface SectionProps {
+  title: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const Section: React.FC<SectionProps> = ({ children, title, className }) => {
+  return (
+    <div className={cn('', className)}>
+      <h1 className="text-38">{title}</h1>
+      {children && <div className="text-16">{children}</div>}
+    </div>
+  );
+};
+
+export default Section;
diff --git a/src/components/Affiliates/images/.gitkeep b/src/components/Affiliates/images/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/Affiliates/index.tsx b/src/components/Affiliates/index.tsx
new file mode 100644
index 000000000..9ebc77d19
--- /dev/null
+++ b/src/components/Affiliates/index.tsx
@@ -0,0 +1,32 @@
+import settings from '@base/settings.json';
+import Section from './Section';
+
+const AboutModule = {
+  Hero: () => (
+    <Section title={settings.affiliatesPage.hero.title}>
+      <div className="">Hero section</div>
+    </Section>
+  ),
+  WhyBecome: () => (
+    <Section title={settings.affiliatesPage.whyBecome.title}>
+      <div className="">WhyBecome section</div>
+    </Section>
+  ),
+  WhoCanJoin: () => (
+    <Section title={settings.affiliatesPage.whoCanJoin.title}>
+      <div className="">WhoCanJoin section</div>
+    </Section>
+  ),
+  HowItWorks: () => (
+    <Section title={settings.affiliatesPage.howItWorks.title}>
+      <div className="">HowItWorks section</div>
+    </Section>
+  ),
+  Faq: () => (
+    <Section title={settings.affiliatesPage.faq.title}>
+      <div className="">Faq section</div>
+    </Section>
+  ),
+};
+
+export default AboutModule;
diff --git a/src/pages/affiliates.astro b/src/pages/affiliates.astro
new file mode 100644
index 000000000..2a300da46
--- /dev/null
+++ b/src/pages/affiliates.astro
@@ -0,0 +1,17 @@
+---
+import Layout from '@layouts/Page.astro';
+import AffiliatesModule from '@components/Affiliates';
+import settings from '@base/settings.json';
+
+const { title, description, slug, image } = settings.site.metadata.affiliates;
+
+// Todo: make correct layout
+---
+
+<Layout title={title} description={description} slug={slug} image={image}>
+  <AffiliatesModule.Hero />
+  <AffiliatesModule.WhyBecome />
+  <AffiliatesModule.WhoCanJoin />
+  <AffiliatesModule.HowItWorks />
+  <AffiliatesModule.Faq />
+</Layout>
diff --git a/src/settings.json b/src/settings.json
index f04fd00a8..0f3797713 100755
--- a/src/settings.json
+++ b/src/settings.json
@@ -26,6 +26,12 @@
         "description": "Fleek: Build next-gen apps and AI agents in minutes on an open-source, verifiable, auto-scalable cloud platform. Start for free!",
         "image": "/images/fleek-meta-image.png?202406061658"
       },
+      "affiliates": {
+        "title": "Fleek Affiliate Program",
+        "slug": "affiliates",
+        "description": "Join Fleek's Affiliate Program and help shape the future of the autonomous internet.",
+        "image": "/images/fleek-meta-image.png?202406061658"
+      },
       "blog": {
         "title": "Blog",
         "slug": "blog",
@@ -523,6 +529,23 @@
       "button": "Get started with Fleek"
     }
   },
+  "affiliatesPage": {
+    "hero": {
+      "title": "Refer Users to Fleek and Earn Cash Rewards"
+    },
+    "whyBecome": {
+      "title": "Why Become a Fleek Affiliate?"
+    },
+    "whoCanJoin": {
+      "title": "Who Can Join?"
+    },
+    "howItWorks": {
+      "title": "How It Works"
+    },
+    "faq": {
+      "title": "Frequently Asked Questions"
+    }
+  },
   "templatesPage": {
     "title": "TEMPLATES",
     "subTitle": "Begin with a template",

From 77215d88db4225f1dbf47b9996be0cc1d65ac1a5 Mon Sep 17 00:00:00 2001
From: nemanjafleek <nemanjafleek@gmail.com>
Date: Mon, 27 Jan 2025 14:29:09 +0100
Subject: [PATCH 2/4] feat: Hero section, basic styles, work in progress

---
 src/components/Affiliates/Section.tsx | 30 ++++++++++++++++++++++-----
 src/components/Affiliates/index.tsx   | 26 +++++++++++++++++++++--
 src/layouts/AffiliatesPage.astro      | 24 +++++++++++++++++++++
 src/pages/affiliates.astro            |  8 +++----
 src/settings.json                     |  5 ++++-
 5 files changed, 80 insertions(+), 13 deletions(-)
 create mode 100644 src/layouts/AffiliatesPage.astro

diff --git a/src/components/Affiliates/Section.tsx b/src/components/Affiliates/Section.tsx
index 84c5b0a2d..06275ee1f 100644
--- a/src/components/Affiliates/Section.tsx
+++ b/src/components/Affiliates/Section.tsx
@@ -1,15 +1,35 @@
 import { cn } from '@utils/cn';
+import type { ReactNode, FC } from 'react';
 
 interface SectionProps {
-  title: string;
+  title: ReactNode;
+  isH1Title?: boolean;
+  subTitle?: string;
   className?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
-const Section: React.FC<SectionProps> = ({ children, title, className }) => {
+const Section: FC<SectionProps> = ({
+  children,
+  title,
+  isH1Title = false,
+  subTitle,
+  className,
+}) => {
   return (
-    <div className={cn('', className)}>
-      <h1 className="text-38">{title}</h1>
+    <div className={cn('px-24 py-128 text-center md:px-32', className)}>
+      {isH1Title ? (
+        <h1 className="tracking-tight mb-24 text-36 font-bold leading-40 text-white md:text-60 md:leading-60">
+          {title}
+        </h1>
+      ) : (
+        <h2 className="text-30 md:text-36">{title}</h2>
+      )}
+      {subTitle && (
+        <p className="mx-auto mb-32 max-w-[672px] text-18 font-medium text-neutral-11 md:text-20">
+          {subTitle}
+        </p>
+      )}
       {children && <div className="text-16">{children}</div>}
     </div>
   );
diff --git a/src/components/Affiliates/index.tsx b/src/components/Affiliates/index.tsx
index 9ebc77d19..94546eb34 100644
--- a/src/components/Affiliates/index.tsx
+++ b/src/components/Affiliates/index.tsx
@@ -1,10 +1,32 @@
 import settings from '@base/settings.json';
 import Section from './Section';
+import { Button } from '@components/Button';
+import { Target } from '@components/Link';
 
 const AboutModule = {
   Hero: () => (
-    <Section title={settings.affiliatesPage.hero.title}>
-      <div className="">Hero section</div>
+    <Section
+      title={
+        <>
+          {settings.affiliatesPage.hero.titleWhite}
+          <span className="bg-gradient-to-r from-yellow-dark-9 to-yellow-dark-12 bg-clip-text text-transparent">
+            {settings.affiliatesPage.hero.titleYellow}
+          </span>
+        </>
+      }
+      isH1Title
+      subTitle={settings.affiliatesPage.hero.subTitle}
+    >
+      <Button
+        variant="primary"
+        className="inline-flex h-44 w-full max-w-[350px] rounded-6 px-32"
+        aria-label={settings.affiliatesPage.hero.ctaText}
+        href="https://app.fleek.xyz/"
+        rel="noopener noreferrer"
+        target={Target.Blank}
+      >
+        {settings.affiliatesPage.hero.ctaText}
+      </Button>
     </Section>
   ),
   WhyBecome: () => (
diff --git a/src/layouts/AffiliatesPage.astro b/src/layouts/AffiliatesPage.astro
new file mode 100644
index 000000000..fad41da4a
--- /dev/null
+++ b/src/layouts/AffiliatesPage.astro
@@ -0,0 +1,24 @@
+---
+import '@styles/globals.css';
+import '@styles/blogPage.css';
+
+import BaseHtml from './BaseHtml.astro';
+
+const { title, description, slug, image } = Astro.props;
+// same as About for now
+---
+
+<BaseHtml
+  title={title}
+  ogMeta={{
+    title,
+    description,
+    image,
+    slug,
+  }}
+  customContentWrapperClass="max-w-none xl:max-w-none 2xl:max-w-none py-[0px] px-[0px]"
+>
+  <main class="min-h-container">
+    <slot />
+  </main>
+</BaseHtml>
diff --git a/src/pages/affiliates.astro b/src/pages/affiliates.astro
index 2a300da46..49af3d4a6 100644
--- a/src/pages/affiliates.astro
+++ b/src/pages/affiliates.astro
@@ -1,14 +1,12 @@
 ---
-import Layout from '@layouts/Page.astro';
+import Layout from '@layouts/AffiliatesPage.astro';
 import AffiliatesModule from '@components/Affiliates';
 import settings from '@base/settings.json';
 
-const { title, description, slug, image } = settings.site.metadata.affiliates;
-
-// Todo: make correct layout
+const { affiliates } = settings.site.metadata;
 ---
 
-<Layout title={title} description={description} slug={slug} image={image}>
+<Layout {...affiliates}>
   <AffiliatesModule.Hero />
   <AffiliatesModule.WhyBecome />
   <AffiliatesModule.WhoCanJoin />
diff --git a/src/settings.json b/src/settings.json
index 0f3797713..2bdde3065 100755
--- a/src/settings.json
+++ b/src/settings.json
@@ -531,7 +531,10 @@
   },
   "affiliatesPage": {
     "hero": {
-      "title": "Refer Users to Fleek and Earn Cash Rewards"
+      "titleWhite": "Refer Users to Fleek and ",
+      "titleYellow": "Earn Cash Rewards",
+      "subTitle": "Partner with Fleek to shape the future of the web and earn rewards while empowering developers and businesses to build the next generation of AI agents and apps.",
+      "ctaText": "Join the movement and get rewarded"
     },
     "whyBecome": {
       "title": "Why Become a Fleek Affiliate?"

From 8fdb99c9c840577c84fa84d79c2dbf6fef0ba2d0 Mon Sep 17 00:00:00 2001
From: nemanjafleek <nemanjafleek@gmail.com>
Date: Mon, 27 Jan 2025 16:22:58 +0100
Subject: [PATCH 3/4] feat: style non-Hero sections title and subtitle, cards
 in progress

---
 src/components/Affiliates/Section.tsx         | 38 --------------
 src/components/Affiliates/components/Card.tsx | 27 ++++++++++
 .../Affiliates/components/Section.tsx         | 51 +++++++++++++++++++
 src/components/Affiliates/index.tsx           | 16 ++++--
 src/settings.json                             |  6 ++-
 5 files changed, 93 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/Affiliates/Section.tsx
 create mode 100644 src/components/Affiliates/components/Card.tsx
 create mode 100644 src/components/Affiliates/components/Section.tsx

diff --git a/src/components/Affiliates/Section.tsx b/src/components/Affiliates/Section.tsx
deleted file mode 100644
index 06275ee1f..000000000
--- a/src/components/Affiliates/Section.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { cn } from '@utils/cn';
-import type { ReactNode, FC } from 'react';
-
-interface SectionProps {
-  title: ReactNode;
-  isH1Title?: boolean;
-  subTitle?: string;
-  className?: string;
-  children?: ReactNode;
-}
-
-const Section: FC<SectionProps> = ({
-  children,
-  title,
-  isH1Title = false,
-  subTitle,
-  className,
-}) => {
-  return (
-    <div className={cn('px-24 py-128 text-center md:px-32', className)}>
-      {isH1Title ? (
-        <h1 className="tracking-tight mb-24 text-36 font-bold leading-40 text-white md:text-60 md:leading-60">
-          {title}
-        </h1>
-      ) : (
-        <h2 className="text-30 md:text-36">{title}</h2>
-      )}
-      {subTitle && (
-        <p className="mx-auto mb-32 max-w-[672px] text-18 font-medium text-neutral-11 md:text-20">
-          {subTitle}
-        </p>
-      )}
-      {children && <div className="text-16">{children}</div>}
-    </div>
-  );
-};
-
-export default Section;
diff --git a/src/components/Affiliates/components/Card.tsx b/src/components/Affiliates/components/Card.tsx
new file mode 100644
index 000000000..f2779ba04
--- /dev/null
+++ b/src/components/Affiliates/components/Card.tsx
@@ -0,0 +1,27 @@
+import type { FC } from 'react';
+
+interface CardProps {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+const Card: FC<CardProps> = ({ icon, title, description }) => {
+  return (
+    <div className="flex flex-col gap-16 rounded-16 border-t border-gray-dark-5 bg-gradient-to-br from-gray-dark-2 to-gray-dark-1 p-28">
+      <div>
+        <img src={icon} className="h-32 sm:h-60" alt={title} loading="lazy" />
+      </div>
+      <div>
+        <p className="w-2/3 font-sans text-24 font-medium leading-tight -tracking-1 text-gray-dark-12 lg:text-34">
+          {title}
+        </p>
+      </div>
+      <div>
+        <p className="typo-m text-balance text-gray-dark-11">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/Affiliates/components/Section.tsx b/src/components/Affiliates/components/Section.tsx
new file mode 100644
index 000000000..656dfcca6
--- /dev/null
+++ b/src/components/Affiliates/components/Section.tsx
@@ -0,0 +1,51 @@
+import { cn } from '@utils/cn';
+import type { ReactNode, FC } from 'react';
+
+interface SectionProps {
+  title: ReactNode;
+  isHero?: boolean;
+  subTitle?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+const Section: FC<SectionProps> = ({
+  children,
+  title,
+  isHero = false,
+  subTitle,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        'mx-auto max-w-[1280px] px-24 py-96 text-center md:px-32',
+        { 'py-128': isHero },
+        className,
+      )}
+    >
+      {isHero ? (
+        <h1 className="mb-24 font-sans text-36 font-bold leading-40 text-white md:text-60 md:leading-60">
+          {title}
+        </h1>
+      ) : (
+        <h2 className="mb-16 font-sans text-30 font-bold leading-36 text-white md:text-36 md:leading-40">
+          {title}
+        </h2>
+      )}
+      {subTitle && (
+        <p
+          className={cn(
+            'mx-auto mb-64 font-plex-sans text-[18px] font-medium text-neutral-11 md:text-20',
+            { 'mb-32 max-w-[672px]': isHero },
+          )}
+        >
+          {subTitle}
+        </p>
+      )}
+      {children && <div className="text-16">{children}</div>}
+    </div>
+  );
+};
+
+export default Section;
diff --git a/src/components/Affiliates/index.tsx b/src/components/Affiliates/index.tsx
index 94546eb34..69cc9ac27 100644
--- a/src/components/Affiliates/index.tsx
+++ b/src/components/Affiliates/index.tsx
@@ -1,7 +1,7 @@
 import settings from '@base/settings.json';
-import Section from './Section';
 import { Button } from '@components/Button';
 import { Target } from '@components/Link';
+import Section from './components/Section';
 
 const AboutModule = {
   Hero: () => (
@@ -14,12 +14,12 @@ const AboutModule = {
           </span>
         </>
       }
-      isH1Title
+      isHero
       subTitle={settings.affiliatesPage.hero.subTitle}
     >
       <Button
         variant="primary"
-        className="inline-flex h-44 w-full max-w-[350px] rounded-6 px-32"
+        className="inline-flex h-44 w-full  min-w-[320px] max-w-[350px] rounded-6 px-32"
         aria-label={settings.affiliatesPage.hero.ctaText}
         href="https://app.fleek.xyz/"
         rel="noopener noreferrer"
@@ -30,12 +30,18 @@ const AboutModule = {
     </Section>
   ),
   WhyBecome: () => (
-    <Section title={settings.affiliatesPage.whyBecome.title}>
+    <Section
+      title={settings.affiliatesPage.whyBecome.title}
+      subTitle={settings.affiliatesPage.whyBecome.subTitle}
+    >
       <div className="">WhyBecome section</div>
     </Section>
   ),
   WhoCanJoin: () => (
-    <Section title={settings.affiliatesPage.whoCanJoin.title}>
+    <Section
+      title={settings.affiliatesPage.whoCanJoin.title}
+      subTitle={settings.affiliatesPage.whoCanJoin.subTitle}
+    >
       <div className="">WhoCanJoin section</div>
     </Section>
   ),
diff --git a/src/settings.json b/src/settings.json
index 2bdde3065..534aa0cfc 100755
--- a/src/settings.json
+++ b/src/settings.json
@@ -537,10 +537,12 @@
       "ctaText": "Join the movement and get rewarded"
     },
     "whyBecome": {
-      "title": "Why Become a Fleek Affiliate?"
+      "title": "Why Become a Fleek Affiliate?",
+      "subTitle": "Discover the benefits of joining our Affiliate Program"
     },
     "whoCanJoin": {
-      "title": "Who Can Join?"
+      "title": "Who Can Join?",
+      "subTitle": "We welcome diverse talents who share our vision for the future of the internet"
     },
     "howItWorks": {
       "title": "How It Works"

From 7e97a96d771ab889f6d78622bb7fbe06cce335d3 Mon Sep 17 00:00:00 2001
From: nemanjafleek <nemanjafleek@gmail.com>
Date: Mon, 27 Jan 2025 17:59:52 +0100
Subject: [PATCH 4/4] feat: add CardList component, Card not styled yet

---
 src/components/Affiliates/components/Card.tsx | 45 +++++++--
 .../Affiliates/components/Section.tsx         | 40 ++++----
 src/components/Affiliates/data/cards.ts       | 96 +++++++++++++++++++
 src/components/Affiliates/index.tsx           |  8 +-
 4 files changed, 158 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Affiliates/data/cards.ts

diff --git a/src/components/Affiliates/components/Card.tsx b/src/components/Affiliates/components/Card.tsx
index f2779ba04..29a272f32 100644
--- a/src/components/Affiliates/components/Card.tsx
+++ b/src/components/Affiliates/components/Card.tsx
@@ -1,16 +1,14 @@
 import type { FC } from 'react';
+import type { CardData } from '../data/cards';
+import { cn } from '@utils/cn';
 
-interface CardProps {
-  icon: string;
-  title: string;
-  description: string;
-}
+interface CardProps extends CardData {}
 
-const Card: FC<CardProps> = ({ icon, title, description }) => {
+export const Card: FC<CardProps> = ({ title, description, icon: Icon }) => {
   return (
-    <div className="flex flex-col gap-16 rounded-16 border-t border-gray-dark-5 bg-gradient-to-br from-gray-dark-2 to-gray-dark-1 p-28">
+    <div className="flex flex-col gap-16 rounded-16 border-t border-gray-dark-5 bg-gradient-to-br from-gray-dark-2 to-gray-dark-1 p-28 text-left">
       <div>
-        <img src={icon} className="h-32 sm:h-60" alt={title} loading="lazy" />
+        <Icon className="size-24 text-yellow-dark-11" alt={title} />
       </div>
       <div>
         <p className="w-2/3 font-sans text-24 font-medium leading-tight -tracking-1 text-gray-dark-12 lg:text-34">
@@ -24,4 +22,33 @@ const Card: FC<CardProps> = ({ icon, title, description }) => {
   );
 };
 
-export default Card;
+interface CardListProps {
+  cards: CardData[];
+  hasFourColumns?: boolean;
+}
+
+export const CardsList: FC<CardListProps> = ({
+  cards,
+  hasFourColumns = false,
+}) => {
+  return (
+    <div
+      className={cn('grid grid-cols-1 gap-32 md:grid-cols-2 lg:grid-cols-3', {
+        'lg:grid-cols-4': hasFourColumns,
+      })}
+    >
+      {cards.map((item, index) => {
+        const { title, description, icon } = item;
+
+        return (
+          <Card
+            key={index}
+            title={title}
+            description={description}
+            icon={icon}
+          />
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/Affiliates/components/Section.tsx b/src/components/Affiliates/components/Section.tsx
index 656dfcca6..b7165f1e9 100644
--- a/src/components/Affiliates/components/Section.tsx
+++ b/src/components/Affiliates/components/Section.tsx
@@ -24,25 +24,27 @@ const Section: FC<SectionProps> = ({
         className,
       )}
     >
-      {isHero ? (
-        <h1 className="mb-24 font-sans text-36 font-bold leading-40 text-white md:text-60 md:leading-60">
-          {title}
-        </h1>
-      ) : (
-        <h2 className="mb-16 font-sans text-30 font-bold leading-36 text-white md:text-36 md:leading-40">
-          {title}
-        </h2>
-      )}
-      {subTitle && (
-        <p
-          className={cn(
-            'mx-auto mb-64 font-plex-sans text-[18px] font-medium text-neutral-11 md:text-20',
-            { 'mb-32 max-w-[672px]': isHero },
-          )}
-        >
-          {subTitle}
-        </p>
-      )}
+      <div className={cn('mb-64', { 'mb-32': isHero })}>
+        {isHero ? (
+          <h1 className="mb-24 font-sans text-36 font-bold leading-40 text-white md:text-60 md:leading-60">
+            {title}
+          </h1>
+        ) : (
+          <h2 className="mb-16 font-sans text-30 font-bold leading-36 text-white md:text-36 md:leading-40">
+            {title}
+          </h2>
+        )}
+        {subTitle && (
+          <p
+            className={cn(
+              'mx-auto font-plex-sans text-[18px] font-medium text-neutral-11 md:text-20',
+              { 'max-w-[672px]': isHero },
+            )}
+          >
+            {subTitle}
+          </p>
+        )}
+      </div>
       {children && <div className="text-16">{children}</div>}
     </div>
   );
diff --git a/src/components/Affiliates/data/cards.ts b/src/components/Affiliates/data/cards.ts
new file mode 100644
index 000000000..718bd23c2
--- /dev/null
+++ b/src/components/Affiliates/data/cards.ts
@@ -0,0 +1,96 @@
+import { FaHouse } from 'react-icons/fa6';
+
+import type { ElementType } from 'react';
+
+export interface CardData {
+  title: string;
+  description: string;
+  icon: ElementType;
+}
+
+// Todo: set correct icons
+
+export const whyBecomeCards: CardData[] = [
+  {
+    title: 'Competitive Cash Rewards',
+    description: 'Earn 10% commission for every new referral to Fleek.',
+    icon: FaHouse,
+  },
+  {
+    title: 'Early Access',
+    description:
+      "Get early access to new features and products before they're publicly available.",
+    icon: FaHouse,
+  },
+  {
+    title: 'Dedicated Support',
+    description:
+      'Enjoy exclusive resources and priority support from our affiliate and support teams.',
+    icon: FaHouse,
+  },
+  {
+    title: 'Growing Community',
+    description:
+      'Connect with a network of passionate builders, creators, and thought leaders shaping Web3.',
+    icon: FaHouse,
+  },
+  {
+    title: 'Bonus Token Incentives',
+    description:
+      'Affiliates will also qualify for future token incentives in addition to the cash rewards, which will be tied to their affiliate performance.',
+    icon: FaHouse,
+  },
+];
+
+export const whoCanJoinCards: CardData[] = [
+  {
+    title: 'Builders & Developers',
+    description:
+      'Technical experts passionate about decentralized infrastructure and innovation.',
+    icon: FaHouse,
+  },
+  {
+    title: "Content Creators, KOL's & Thought Leaders",
+    description:
+      'Storytellers, industry experts, developer influencers, and others who inspire and engage through content about AI agents, web development, Web3, and technology.',
+    icon: FaHouse,
+  },
+  {
+    title: 'Open Source Frameworks & Tooling',
+    description:
+      'AI Agent frameworks, frontend frameworks, and other open source software and tooling that can be deployed on Fleek can create revenue streams by encouraging their communities to host on Fleek.',
+    icon: FaHouse,
+  },
+  {
+    title: 'Media Sources',
+    description:
+      'Websites, blogs, directories, lists and other similar product aggregation and customer discovery tools can add Fleek and earn commission for any referred customers.',
+    icon: FaHouse,
+  },
+];
+
+export const howItWorksCards: CardData[] = [
+  {
+    title: 'Sign Up',
+    description: 'Submit your application to become a Fleek affiliate.',
+    icon: FaHouse,
+  },
+  {
+    title: 'Start Referring',
+    description:
+      'Find your unique referral link in your affiliate dashboard and start promoting Fleek!',
+    icon: FaHouse,
+  },
+  {
+    title: 'Earn Rewards',
+    description:
+      'Receive a 10% commission for every successful signup through your link.',
+    icon: FaHouse,
+  },
+  {
+    title: 'Receive your Reward',
+    description:
+      'Get your commissions via PayPal, Wise, Crypto, or Fleek credits monthly.',
+    icon: FaHouse,
+  },
+];
diff --git a/src/components/Affiliates/index.tsx b/src/components/Affiliates/index.tsx
index 69cc9ac27..1b795b3d1 100644
--- a/src/components/Affiliates/index.tsx
+++ b/src/components/Affiliates/index.tsx
@@ -2,6 +2,8 @@ import settings from '@base/settings.json';
 import { Button } from '@components/Button';
 import { Target } from '@components/Link';
 import Section from './components/Section';
+import { CardsList } from './components/Card';
+import { howItWorksCards, whoCanJoinCards, whyBecomeCards } from './data/cards';
 
 const AboutModule = {
   Hero: () => (
@@ -34,7 +36,7 @@ const AboutModule = {
       title={settings.affiliatesPage.whyBecome.title}
       subTitle={settings.affiliatesPage.whyBecome.subTitle}
     >
-      <div className="">WhyBecome section</div>
+      <CardsList cards={whyBecomeCards} />
     </Section>
   ),
   WhoCanJoin: () => (
@@ -42,12 +44,12 @@ const AboutModule = {
       title={settings.affiliatesPage.whoCanJoin.title}
       subTitle={settings.affiliatesPage.whoCanJoin.subTitle}
     >
-      <div className="">WhoCanJoin section</div>
+      <CardsList cards={whoCanJoinCards} hasFourColumns />
     </Section>
   ),
   HowItWorks: () => (
     <Section title={settings.affiliatesPage.howItWorks.title}>
-      <div className="">HowItWorks section</div>
+      <CardsList cards={howItWorksCards} hasFourColumns />
     </Section>
   ),
   Faq: () => (