feat: add affiliates page

src/components/Affiliates/components/Card.tsx

@@ -0,0 +1,54 @@
+import type { FC } from 'react';
+import type { CardData } from '../data/cards';
+import { cn } from '@utils/cn';
+
+interface CardProps extends CardData {}
+
+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 text-left">
+      <div>
+        <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">
+          {title}
+        </p>
+      </div>
+      <div>
+        <p className="typo-m text-balance text-gray-dark-11">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+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>
+  );
+};

src/components/Affiliates/components/Section.tsx

@@ -0,0 +1,53 @@
+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,
+      )}
+    >
+      <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>
+  );
+};
+
+export default Section;

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,
+  },
+];

src/components/Affiliates/index.tsx

@@ -0,0 +1,62 @@
+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: () => (
+    <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>
+        </>
+      }
+      isHero
+      subTitle={settings.affiliatesPage.hero.subTitle}
+    >
+      <Button
+        variant="primary"
+        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"
+        target={Target.Blank}
+      >
+        {settings.affiliatesPage.hero.ctaText}
+      </Button>
+    </Section>
+  ),
+  WhyBecome: () => (
+    <Section
+      title={settings.affiliatesPage.whyBecome.title}
+      subTitle={settings.affiliatesPage.whyBecome.subTitle}
+    >
+      <CardsList cards={whyBecomeCards} />
+    </Section>
+  ),
+  WhoCanJoin: () => (
+    <Section
+      title={settings.affiliatesPage.whoCanJoin.title}
+      subTitle={settings.affiliatesPage.whoCanJoin.subTitle}
+    >
+      <CardsList cards={whoCanJoinCards} hasFourColumns />
+    </Section>
+  ),
+  HowItWorks: () => (
+    <Section title={settings.affiliatesPage.howItWorks.title}>
+      <CardsList cards={howItWorksCards} hasFourColumns />
+    </Section>
+  ),
+  Faq: () => (
+    <Section title={settings.affiliatesPage.faq.title}>
+      <div className="">Faq section</div>
+    </Section>
+  ),
+};
+
+export default AboutModule;

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>

src/pages/affiliates.astro

@@ -0,0 +1,15 @@
+---
+import Layout from '@layouts/AffiliatesPage.astro';
+import AffiliatesModule from '@components/Affiliates';
+import settings from '@base/settings.json';
+
+const { affiliates } = settings.site.metadata;
+---
+
+<Layout {...affiliates}>
+  <AffiliatesModule.Hero />
+  <AffiliatesModule.WhyBecome />
+  <AffiliatesModule.WhoCanJoin />
+  <AffiliatesModule.HowItWorks />
+  <AffiliatesModule.Faq />
+</Layout>

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,28 @@
       "button": "Get started with Fleek"
     }
   },
+  "affiliatesPage": {
+    "hero": {
+      "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?",
+      "subTitle": "Discover the benefits of joining our Affiliate Program"
+    },
+    "whoCanJoin": {
+      "title": "Who Can Join?",
+      "subTitle": "We welcome diverse talents who share our vision for the future of the internet"
+    },
+    "howItWorks": {
+      "title": "How It Works"
+    },
+    "faq": {
+      "title": "Frequently Asked Questions"
+    }
+  },
   "templatesPage": {
     "title": "TEMPLATES",
     "subTitle": "Begin with a template",