Add sponsors to root app and remove hoverboard mention

HugoGresse · Nov 14, 2024 · 2bbf99f · 2bbf99f
1 parent b38ff52
commit 2bbf99f
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 23 deletions.
diff --git a/.env b/.env
@@ -16,5 +16,8 @@ VITE_MEASUREMENT_ID=<MEASUREMENT_ID (optional)>
 # Small Chat (optional)
 VITE_SMALL_CHAT=https://embed.small.chat/Txxxxxxxxx.js
 
+# OpenSponsors
+VITE_OPEN_SPONSORS=
+
 # Emulators (run everything in local)
 VITE_EMULATORS=true
diff --git a/src/root/HowItWorks.jsx b/src/root/HowItWorks.jsx
@@ -7,7 +7,6 @@ import adminImage from './images/admin-new.webp'
 import newImage from './images/new.png'
 import qrcodeImage from './images/qrcode.png'
 import bulleImage from './images/bulle.png'
-import hoverboard from './images/hoverboard.png'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
@@ -64,15 +63,6 @@ const List = styled.ul`
     }
 `
 
-const CompatibilityText = styled(Box)`
-    margin-top: 20px;
-    color: ${COLORS.GRAY};
-
-    img {
-        margin: 0 5px;
-    }
-`
-
 const Header = () => {
     const { t } = useTranslation()
 
@@ -103,15 +93,6 @@ const Header = () => {
                             {t('home.vote')}
                         </li>
                     </List>
-
-                    <CompatibilityText display="flex" alignItems="center">
-                        {t('home.compatibleHoverboard')}
-                        <img
-                            height="40"
-                            src={hoverboard}
-                            alt="hoverboard"
-                        />
-                    </CompatibilityText>
                 </BoxRight>
             </InnerWrapperResponsive>
         </Box>

diff --git a/src/root/Root.jsx b/src/root/Root.jsx
@@ -5,11 +5,16 @@ import HowItWorks from './HowItWorks.jsx'
 import FAQ from './FAQ.jsx'
 import { I18nextProvider } from 'react-i18next'
 import i18n from './translations/i18n'
-import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import {
+    createTheme,
+    ThemeProvider,
+    StyledEngineProvider,
+} from '@mui/material/styles'
 import { showSmallChat, useSmallchat } from '../admin/project/utils/smallchat'
 import { Footer } from './Footer.jsx'
 import { Contact } from './Contact.jsx'
 import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
+import { Sponsor } from './Sponsor.jsx'
 
 const theme = createTheme({
     typography: {
@@ -52,11 +57,13 @@ const Root = () => {
             <StyledEngineProvider injectFirst>
                 <ThemeProvider theme={theme}>
                     <GoogleReCaptchaProvider
-                        reCaptchaKey={import.meta.env.VITE_RECAPTCHAV3_SITE_KEY}
-                    >
+                        reCaptchaKey={
+                            import.meta.env.VITE_RECAPTCHAV3_SITE_KEY
+                        }>
                         <Header />
                         <main>
                             <HowItWorks />
+                            <Sponsor />
                             <FAQ />
                             <Contact />
                         </main>
@@ -65,7 +72,7 @@ const Root = () => {
                 </ThemeProvider>
             </StyledEngineProvider>
         </I18nextProvider>
-    );
+    )
 }
 
 export default Root
diff --git a/src/root/Sponsor.jsx b/src/root/Sponsor.jsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import { useTranslation } from 'react-i18next'
+import { useOSSSponsors } from '../baseComponents/useOSSSponsors'
+import OFButton from '../admin/baseComponents/button/OFButton.jsx'
+
+export const Sponsor = () => {
+    const { t } = useTranslation()
+
+    const sponsors = useOSSSponsors()
+
+    return (
+        <Box
+            display="flex"
+            flexDirection="column"
+            justifyContent="center"
+            alignItems="center"
+            bgcolor="#eee"
+            flexGrow="1"
+            textAlign="center"
+            paddingY={4}
+            borderTop="1px solid #ccc">
+            <Typography variant="h2" id="contact" style={{ marginTop: 16 }}>
+                {t('sponsor.title')}
+            </Typography>
+
+            <Typography variant="body1" style={{ marginTop: 16 }}>
+                {t('sponsor.description')}
+            </Typography>
+
+            <Box
+                display="flex"
+                flexDirection="row"
+                marginY={4}
+                gap={4}
+                alignItems="center"
+                justifyContent="center">
+                {sponsors.map((sponsor) => (
+                    <Box
+                        component="a"
+                        href={sponsor.website}
+                        target="_blank"
+                        key={sponsor.name}
+                        sx={{ ':hover': { opacity: 0.4 } }}>
+                        <img
+                            src={sponsor.logo}
+                            alt={sponsor.name}
+                            style={{ height: 50, borderRadius: 5 }}
+                        />
+                    </Box>
+                ))}
+            </Box>
+            <OFButton
+                style={{ marginTop: 26, marginBottom: 32 }}
+                href="https://github.com/sponsors/HugoGresse"
+                target="_blank"
+                rel="noopener noreferrer">
+                {t('sponsor.becomeSponsor')}
+            </OFButton>
+        </Box>
+    )
+}
diff --git a/src/root/translations/languages/en.root.json b/src/root/translations/languages/en.root.json
@@ -44,6 +44,11 @@
         "success": "Message sent 🚀",
         "submit": "Send"
     },
+    "sponsor": {
+        "title": "Sponsor",
+        "description": "Sponsors helps to keep the project alive, improve it and participate to the hosting costs.",
+        "becomeSponsor": "Become a sponsor"
+    },
     "footer": {
         "about": "About",
         "contact": "Contact"

diff --git a/src/root/translations/languages/fr.root.json b/src/root/translations/languages/fr.root.json
@@ -44,6 +44,11 @@
         "success": "Message envoyé 🚀",
         "submit": "Envoyer"
     },
+    "sponsor": {
+        "title": "Sponsor",
+        "description": "Les sponsors aident à garder le projet en vie et à l'améliorer.",
+        "becomeSponsor": "Devenir sponsor"
+    },
     "footer": {
         "about": "À propos",
         "contact": "Contact"