diff --git a/src/components/Affiliates/components/Card.tsx b/src/components/Affiliates/components/Card.tsx new file mode 100644 index 000000000..29a272f32 --- /dev/null +++ b/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 = ({ title, description, icon: Icon }) => { + return ( +
+
+ +
+
+

+ {title} +

+
+
+

{description}

+
+
+ ); +}; + +interface CardListProps { + cards: CardData[]; + hasFourColumns?: boolean; +} + +export const CardsList: FC = ({ + cards, + hasFourColumns = false, +}) => { + return ( +
+ {cards.map((item, index) => { + const { title, description, icon } = item; + + return ( + + ); + })} +
+ ); +}; diff --git a/src/components/Affiliates/components/Section.tsx b/src/components/Affiliates/components/Section.tsx new file mode 100644 index 000000000..b7165f1e9 --- /dev/null +++ b/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 = ({ + children, + title, + isHero = false, + subTitle, + className, +}) => { + return ( +
+
+ {isHero ? ( +

+ {title} +

+ ) : ( +

+ {title} +

+ )} + {subTitle && ( +

+ {subTitle} +

+ )} +
+ {children &&
{children}
} +
+ ); +}; + +export default Section; 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/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..1b795b3d1 --- /dev/null +++ b/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: () => ( +
+ {settings.affiliatesPage.hero.titleWhite} + + {settings.affiliatesPage.hero.titleYellow} + + + } + isHero + subTitle={settings.affiliatesPage.hero.subTitle} + > + +
+ ), + WhyBecome: () => ( +
+ +
+ ), + WhoCanJoin: () => ( +
+ +
+ ), + HowItWorks: () => ( +
+ +
+ ), + Faq: () => ( +
+
Faq section
+
+ ), +}; + +export default AboutModule; 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 +--- + + +
+ +
+ diff --git a/src/pages/affiliates.astro b/src/pages/affiliates.astro new file mode 100644 index 000000000..49af3d4a6 --- /dev/null +++ b/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; +--- + + + + + + + + diff --git a/src/settings.json b/src/settings.json index f04fd00a8..534aa0cfc 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,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",