Sponsors page

public/locales/en/components/existingtab.json

@@ -0,0 +1,5 @@
+{
+    "company_name":"Company name",
+    "tier":"Gold-tier supporter",
+    "link_text":"Visit website"
+}

public/locales/en/components/faq.json

@@ -0,0 +1,24 @@
+{
+    "heading": "Frequently asked",
+    "text_part_1": "Got questions? Hit us up",
+    "link_text": "on our Discord",
+    "text_part_2": "or check the most common ones below.",
+    "faqs": [
+        {
+            "question": "What is the minimum monetary amount to start sponsoring you?",
+            "answer": "The bare minimum is one (1) USD per month. So with 12 dollars, you can contribute to this project for a whole year and get listed as a bronze-tier supporter."
+        },
+        {
+            "question": "Why should our company sponsor your project?"
+        },
+        {
+            "question": "Can I down- or upgrade sponsor tiers? How and when?"
+        },
+        {
+            "question": "Do you have any kind of collaboration deals with educational orgs?"
+        },
+        {
+            "question": "What if the project ends - will I be refunded somehow?"
+        }
+    ]
+}

public/locales/en/components/monthlytab.json

@@ -0,0 +1,41 @@
+{
+    "buttonLabel": "Talk to us to get started",
+    "tiers": {
+        "bronze": {
+            "title": "Bronze",
+            "price": "Starting at $5 per month",
+            "description": "For individuals or small companies that wish contribute to our project.",
+            "checklist": [
+                "Addition to our sponsors’ list",
+                "Discord badge"
+            ]
+        },
+        "silver": {
+            "title": "Silver",
+            "price": "Starting at $20 per month",
+            "description": "Meant for small-to-medium sized companies.",
+            "checklist": [
+                "Secondary level support via Discord",
+                "A second additional perk"
+            ]
+        },
+        "gold": {
+            "title": "Gold",
+            "price": "Starting at $50 per month",
+            "description": "Meant for medium sized companies.",
+            "checklist": [
+                "First level support via Discord",
+                "A second additional perk"
+            ]
+        },
+        "platinum": {
+            "title": "Platinum",
+            "price": "Starting at $200 per month",
+            "description": "Meant for large companies that want this OSS project to shine.",
+            "checklist": [
+                "Priority support via Discord",
+                "A second additional perk"
+            ]
+        }
+    }
+}

public/locales/en/components/onetimetab.json

@@ -0,0 +1,12 @@
+{
+    "one_time": {
+        "title": "One-time sponsorship",
+        "description": "Want to support is with a singular support payment?",
+        "checklist": [
+            "No monthly/yearly payments",
+            "Discord badge",
+            "Discord badge"
+        ]
+    },
+    "buttonLabel": "Talk to us to get started"
+}

public/locales/en/components/steps.json

@@ -0,0 +1,22 @@
+{
+        "heading":"Steps to becoming a sponsor",
+        "description":"We prefer to talk directly with each of our potential sponsor as we hope that our core values align and that we are truly a fitting match.",
+        "steps":{
+            "01":{
+                "number":"01",
+                "step":"Send us a message on our Discord server",
+                "step_description":"We are active on our Discord and it’s the best way to stay in touch with us and follow our work.",
+                "link_text":"Join our Discord"
+            },
+            "02":{
+                "number":"02",
+                "step":"Apply as a sponsor by filling out a form",
+                "step_description":"If our preliminary chat goes well according to both you and us, we’ll give you a link to a form that you can fill out."
+            },
+            "03":{
+                "number":"03",
+                "step":"Wait for confirmation (and our huge thanks!)",
+                "step_description":"We will contact you via Discord or email and let you know if everything is in order for the sponsorship."
+            }
+        }
+}

public/locales/en/pages/sponsors.json

@@ -0,0 +1,11 @@
+{
+    "sponsors":{
+        "header":"Supported by awesome sponsors worldwide",
+        "description":"Our open source project is made possible with the support of awesome organizations and companies."
+    },
+    "segments":{
+        "monthly":"Monthly sponsorship",
+        "one_time":"One-time sponsorship",
+        "existing":"Existing sponsors"
+    }
+}

src/App.tsx

@@ -16,6 +16,7 @@ import LoginProcessPage from './pages/LoginProcess';
 import OurTeamPage from './pages/OurTeam';
 import PluginsPage from './pages/Plugins';
 import PrivacyPolicy from './pages/PrivacyPolicy';
+import Sponsors from './pages/Sponsors';
 import TermsOfService from './pages/TermsOfService';
 import ThemesPage from './pages/Themes';
 import UserProfilePage from './pages/UserProfile';
@@ -76,6 +77,7 @@ const App: React.FC = () => {
         { element: <PluginsPage />, path: '/plugins' },
         { element: <PrivacyPolicy />, path: '/privacy-policy' },
         { element: <ThemesPage />, path: '/themes' },
+        { element: <Sponsors />, path: '/sponsors' },
         { element: <OurTeamPage />, path: '/our-team' },
         { element: <TermsOfService />, path: '/terms-of-service' },
         {

src/components/Sponsors/ExistingTab.tsx

@@ -0,0 +1,51 @@
+import { Box, Grid, Grid2, Link, Typography } from '@mui/material';
+import { ArrowRight } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ExistingTab: React.FC = () => {
+  const { t } = useTranslation('components/existingtab');
+  return (
+    <Box sx={{ mt: '20px', justifySelf: 'center', display: 'flex', justifyContent: 'center' }}>
+      <Grid2 container spacing={3} sx={{ display: 'flex', justifyContent: 'center' }}>
+        {Array.from({ length: 12 }).map(() => (
+          <Grid item xl={4}>
+            <Box
+              sx={{ border: 1, borderColor: '#242628', borderRadius: '12px', padding: '16px', minWidth: { md: 420 } }}
+            >
+              <Box sx={{ display: 'flex', justifyContent: 'space-around' }}>
+                <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="24" cy="24" r="24" fill="#16191D" />
+                    <path
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M24 8C32.8366 8 40 15.1634 40 24C40 32.8366 32.8366 40 24 40C15.1634 40 8 32.8366 8 24C8 15.1634 15.1634 8 24 8ZM23.4217 9.19727C21.5964 9.45415 19.8583 10.9209 18.5091 13.3739C18.1178 14.0855 17.7646 14.8716 17.4569 15.7204C19.2914 15.2593 21.3067 14.9875 23.4217 14.9455V9.19727ZM16.1046 16.1046C16.4873 14.9037 16.9554 13.7987 17.4957 12.8165C18.1645 11.6005 18.9582 10.5504 19.8526 9.74382C14.9894 11.1562 11.1562 14.9894 9.74382 19.8526C10.5504 18.9582 11.6005 18.1645 12.8165 17.4957C13.7987 16.9554 14.9037 16.4873 16.1046 16.1046ZM15.7203 17.4569C15.2593 19.2914 14.9875 21.3067 14.9455 23.4217H9.19727C9.45416 21.5963 10.9209 19.8582 13.3739 18.5091C14.0855 18.1178 14.8716 17.7646 15.7203 17.4569ZM16.1024 23.4217C16.1502 21.1136 16.4824 18.9467 17.0322 17.0322C18.9467 16.4824 21.1137 16.1501 23.4217 16.1023V18.6006C22.5606 20.805 20.8045 22.561 18.6001 23.4217H16.1024ZM14.9455 24.5783H9.19727C9.45416 26.4037 10.9209 28.1417 13.3739 29.4909C14.0855 29.8822 14.8716 30.2354 15.7203 30.5431C15.2593 28.7086 14.9875 26.6933 14.9455 24.5783ZM17.0322 30.9678C16.4824 29.0533 16.1502 26.8864 16.1024 24.5783H18.6001C20.8045 25.439 22.5607 27.195 23.4217 29.3994V31.8977C21.1137 31.8499 18.9467 31.5176 17.0322 30.9678ZM16.1046 31.8954C14.9037 31.5127 13.7987 31.0446 12.8165 30.5043C11.6005 29.8355 10.5504 29.0418 9.74382 28.1474C11.1562 33.0106 14.9894 36.8438 19.8526 38.2562C18.9582 37.4496 18.1645 36.3995 17.4957 35.1834C16.9554 34.2013 16.4873 33.0963 16.1046 31.8954ZM23.4217 38.8027C21.5964 38.5458 19.8583 37.0791 18.5091 34.6261C18.1178 33.9146 17.7646 33.1284 17.4569 32.2797C19.2914 32.7406 21.3067 33.0125 23.4217 33.0545V38.8027ZM28.1474 38.2562C29.0418 37.4496 29.8355 36.3995 30.5044 35.1834C31.0446 34.2013 31.5127 33.0963 31.8954 31.8954C33.0963 31.5127 34.2013 31.0446 35.1835 30.5043C36.3995 29.8355 37.4497 29.0418 38.2562 28.1474C36.8438 33.0106 33.0106 36.8438 28.1474 38.2562ZM30.5431 32.2797C30.2354 33.1284 29.8822 33.9146 29.4909 34.6261C28.1418 37.0791 26.4037 38.5458 24.5783 38.8027V33.0545C26.6933 33.0125 28.7086 32.7406 30.5431 32.2797ZM32.2797 30.5431C33.1284 30.2354 33.9146 29.8822 34.6261 29.4909C37.0791 28.1417 38.5458 26.4037 38.8027 24.5783H33.0545C33.0125 26.6933 32.7406 28.7086 32.2797 30.5431ZM31.8977 24.5783C31.8499 26.8864 31.5176 29.0533 30.9678 30.9678C29.0533 31.5176 26.8864 31.8499 24.5783 31.8977V29.4012C25.439 27.1961 27.1956 25.4393 29.4006 24.5783H31.8977ZM33.0545 23.4217H38.8027C38.5458 21.5963 37.0791 19.8582 34.6261 18.5091C33.9146 18.1178 33.1284 17.7646 32.2797 17.4569C32.7406 19.2914 33.0125 21.3067 33.0545 23.4217ZM30.9678 17.0322C31.5176 18.9467 31.8499 21.1136 31.8977 23.4217H29.4006C27.1956 22.5607 25.439 20.8039 24.5783 18.5988V16.1023C26.8864 16.1501 29.0533 16.4824 30.9678 17.0322ZM31.8954 16.1046C33.0963 16.4873 34.2013 16.9554 35.1835 17.4957C36.3995 18.1645 37.4497 18.9582 38.2562 19.8526C36.8438 14.9894 33.0106 11.1562 28.1474 9.74382C29.0418 10.5504 29.8355 11.6005 30.5044 12.8165C31.0446 13.7987 31.5127 14.9037 31.8954 16.1046ZM24.5783 9.19727C26.4037 9.45415 28.1418 10.9209 29.4909 13.3739C29.8822 14.0855 30.2354 14.8716 30.5431 15.7204C28.7086 15.2593 26.6933 14.9875 24.5783 14.9455V9.19727Z"
+                      fill="#ECECEC"
+                    />
+                  </svg>
+                  <Box sx={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
+                    <Typography sx={{ color: 'accent.50', fontWeight: 600, fontSize: '18px', lineHeight: 1 }}>
+                      {t('company_name')}
+                    </Typography>
+                    <Typography
+                      sx={{ fontSize: '14px', fontWeight: 500, color: 'text.tertiary', lineHeight: 1, mt: 1 }}
+                    >
+                      {t('tier')}
+                    </Typography>
+                  </Box>
+                </Box>
+                <Link sx={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }} underline="none">
+                  <Typography sx={{ mr: '5px' }}>{t('link_text')}</Typography>
+                  <ArrowRight size={16} />
+                </Link>
+              </Box>
+            </Box>
+          </Grid>
+        ))}
+      </Grid2>
+    </Box>
+  );
+};
+
+export default ExistingTab;

src/components/Sponsors/FAQ.tsx

@@ -0,0 +1,52 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Link, Typography } from '@mui/material';
+import { ChevronDown } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type FAQ = {
+  question: string;
+  answer?: string;
+};
+const FAQ: React.FC = () => {
+  const { t } = useTranslation('components/faq');
+  const faqs = t('faqs', { returnObjects: true }) as FAQ[];
+  return (
+    <Box mt={8}>
+      <Typography sx={{ fontWeight: 600, fontSize: '40px', lineHeight: 0.8, textAlign: 'center' }}>
+        {t('heading')}
+      </Typography>
+      <Typography
+        sx={{ fontWeight: 400, fontSize: '16px', lineHeight: 1.75, color: 'text.tertiary', textAlign: 'center', mt: 3 }}
+      >
+        {t('text_part_1')} <Link>{t('link_text')}</Link> {t('text_part_2')}
+      </Typography>
+      <Box mt={4} sx={{ maxWidth: { md: 640 }, justifySelf: 'center' }}>
+        {faqs.map((faq) => (
+          <Accordion
+            sx={{
+              my: 2,
+              backgroundColor: 'transparent',
+              boxShadow: 'none',
+              backgroundImage: 'none',
+              '&.MuiAccordion-root:before': { backgroundColor: 'transparent' },
+            }}
+          >
+            <AccordionSummary expandIcon={<ChevronDown />}>
+              <Typography sx={{ fontWeight: 600, fontSize: '18px', lineHeight: 1.5 }}>{faq.question}</Typography>
+            </AccordionSummary>
+            {faq.answer ? (
+              <AccordionDetails>
+                <Typography sx={{ color: 'text.tertiary' }}>
+                  The bare minimum is one (1) USD per month. So with 12 dollars, you can contribute to this project for
+                  a whole year and get listed as a bronze-tier supporter.
+                </Typography>
+              </AccordionDetails>
+            ) : null}
+          </Accordion>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default FAQ;

src/components/Sponsors/MonthlyTab.tsx

@@ -0,0 +1,130 @@
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Grid,
+  Grid2,
+  List,
+  ListItem,
+  ListItemIcon,
+  Typography,
+} from '@mui/material';
+import { Check } from 'lucide-react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import bronzeSponsor from '../../assets/images/SponsorsPage/bronze_sponsor.jpg';
+import goldSponsor from '../../assets/images/SponsorsPage/gold_sponsor.jpg';
+import platinumSponsor from '../../assets/images/SponsorsPage/platinum_sponsor.jpg';
+import silverSponsor from '../../assets/images/SponsorsPage/silver_sponsor.jpg';
+
+type TierItem = {
+  title: string;
+  price: string;
+  description: string;
+  checklist: string[];
+};
+
+type MonthlyTabTranslation = {
+  [tier: string]: TierItem;
+};
+
+const MonthlyTab: React.FC = () => {
+  const { t } = useTranslation('components/monthlytab');
+
+  const monthlyTiers = t('tiers', { returnObjects: true }) as MonthlyTabTranslation;
+
+  const getTierImage = (tier: string) => {
+    switch (tier) {
+      case 'bronze':
+        return bronzeSponsor;
+      case 'silver':
+        return silverSponsor;
+      case 'gold':
+        return goldSponsor;
+      case 'platinum':
+        return platinumSponsor;
+      default:
+        return bronzeSponsor;
+    }
+  };
+  return (
+    <Box sx={{ justifySelf: 'center', mt: '20px' }}>
+      <Grid2 container spacing={2}>
+        {Object.keys(monthlyTiers).map((tier) => (
+          <Grid item xl={3} key={tier}>
+            <Card>
+              <CardMedia
+                component="img"
+                src={getTierImage(tier)}
+                sx={{
+                  width: '100%',
+                  height: 240,
+                  WebkitMaskImage: 'linear-gradient(#121418,transparent)',
+                  maskImage: 'linear-gradient(#121418,transparent)',
+                }}
+              />
+              <CardContent>
+                <Typography fontWeight="bold" fontSize="30px">
+                  {monthlyTiers[tier].title}
+                </Typography>
+                <Typography fontWeight="bold" fontSize="18px">
+                  {monthlyTiers[tier].price}
+                </Typography>
+                <Typography
+                  fontWeight="normal"
+                  fontSize="16px"
+                  color="text.tertiary"
+                  lineHeight={1.75}
+                  alignSelf="center"
+                  sx={{
+                    textAlign: 'left',
+                    lineHeight: 1.75,
+                    maxWidth: {
+                      md: 280,
+                    },
+                    mt: '16px',
+                  }}
+                >
+                  {monthlyTiers[tier].description}
+                </Typography>
+                <List sx={{ mt: '4px' }}>
+                  {monthlyTiers[tier].checklist.map((checkListItem, index) => (
+                    <ListItem sx={{ p: '0px', my: '4px' }} key={tier + index}>
+                      <ListItemIcon sx={{ minWidth: '12.5px', mr: '2px' }}>
+                        <Check width={'20px'} height={'20px'} />
+                      </ListItemIcon>
+                      <Typography sx={{ color: '#CBD5E1', fontSize: '14px' }}>{checkListItem}</Typography>
+                    </ListItem>
+                  ))}
+                </List>
+              </CardContent>
+              <CardActions sx={{ justifyContent: 'center', py: '12px' }}>
+                <Button
+                  size="small"
+                  disableRipple
+                  sx={{
+                    textTransform: 'none',
+                    color: '#A1A1AA',
+                    fontSize: '18px',
+                    px: '24px',
+                    backgroundColor: '#242628',
+                    borderRadius: '12px',
+                    fontWeight: 500,
+                  }}
+                >
+                  {t('buttonLabel')}
+                </Button>
+              </CardActions>
+            </Card>
+          </Grid>
+        ))}
+      </Grid2>
+    </Box>
+  );
+};
+
+export default MonthlyTab;