added support page

Author: kunalkeshan

src/assets/tea-animation.gif

@@ -0,0 +1,58 @@
+/**
+ * Become a Patreon Button
+ */
+
+// Dependencies
+import React from 'react';
+
+// MUI
+import { Box, styled, Typography, Link } from '@mui/material';
+
+// Custom
+import patreonSvg from './patreon.svg'
+
+const BecomeAPatreon = () => {
+    return (
+        <Button target="_blank" href="https://www.patreon.com/bePatron?u=72210783">
+            <Image component='img' src={patreonSvg} alt="Become a Patreon" />
+            <Text>Become a Patreon</Text>
+        </Button>
+    )
+};
+
+const Button = styled(Link)({
+    textDecoration: 'none',
+    display: 'inline-flex',
+    color: '#FFFFFF',
+    backgroundColor: '#E1000A',
+    borderRadius: '5px',
+    border: '1px solid transparent',
+    padding: '0.7rem 1rem 0.7rem 1rem',
+    boxShadow: '0px 1px 2px rgba(190, 190, 190, 0.5)',
+    transition: '0.3s all linear',
+    fontFamily: 'cursive',
+    width: 'fit-content',
+    '&:hover, &:active, &:focus': {
+        backgroundColor: '#E1000D',
+        textDecoration: 'none',
+        boxShadow: '0px 1px 2px 2px rgba(190, 190, 190, 0.5)',
+        opacity: '0.85',
+        color: '#FFFFFF',
+    }
+});
+
+const Image = styled(Box)({
+    height: '20px',
+    width: '21px',
+    boxShadow: 'none',
+    border: 'none',
+    verticalAlign: 'middle',
+})
+
+const Text = styled(Typography)({
+    marginLeft: '15px',
+    fontSize: '1rem',
+    verticalAlign: 'middle',
+});
+
+export default BecomeAPatreon

src/components/support/BecomeAPatreon.jsx

@@ -0,0 +1,54 @@
+/**
+ * Buy Me a Coffee Button
+ */
+
+// Dependencies
+import React from 'react';
+
+// MUI
+import { Box, styled, Typography, Link } from '@mui/material';
+
+const BuyMeACoffee = () => {
+    return (
+        <Button target="_blank" href="https://www.buymeacoffee.com/kunalkeshan">
+            <Image component='img' src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee" />
+            <Text>Buy me a coffee</Text>
+        </Button>
+    )
+};
+
+const Button = styled(Link)({
+    textDecoration: 'none',
+    display: 'inline-flex',
+    color: '#FFFFFF',
+    backgroundColor: '#FF813F',
+    borderRadius: '5px',
+    border: '1px solid transparent',
+    padding: '0.7rem 1rem 0.7rem 1rem',
+    boxShadow: '0px 1px 2px rgba(190, 190, 190, 0.5)',
+    transition: '0.3s all linear',
+    fontFamily: 'cursive',
+    width: 'fit-content',
+    '&:hover, &:active, &:focus': {
+        textDecoration: 'none',
+        boxShadow: '0px 1px 2px 2px rgba(190, 190, 190, 0.5)',
+        opacity: '0.85',
+        color: '#FFFFFF',
+    }
+});
+
+const Image = styled(Box)({
+    height: '20px',
+    width: '21px',
+    boxShadow: 'none',
+    border: 'none',
+    verticalAlign: 'middle',
+})
+
+const Text = styled(Typography)({
+    marginLeft: '15px',
+    fontSize: '1rem',
+    verticalAlign: 'middle',
+});
+
+export default BuyMeACoffee

src/components/support/BuyMeACoffee.jsx

@@ -6,13 +6,48 @@
 import React from 'react';
 
 // MUI
-import { Box, styled, Typography, Divider } from '@mui/material';
+import { Box, styled, Typography, Divider, Link } from '@mui/material';
+
+// Custom
+import TeaGif from '../assets/tea-animation.gif';
+import BuyMeACoffee from '../components/support/BuyMeACoffee';
+import BecomeAPatreon from '../components/support/BecomeAPatreon';
 
 const Support = () => {
+
     return (
         <Main>
             <Typography variant='h1' fontSize='4rem'>Support</Typography>
             <Divider />
+
+            <Content>
+                <Animation
+                    display={{ xs: 'none', md: 'block' }}
+                >
+                    <img
+                        src={TeaGif}
+                        alt='Contact gif'
+                        width='100%'
+                        height='100%'
+                        style={{
+                            backgroundColor: 'transparent',
+                        }}
+                    />
+                </Animation>
+                <SupportContent
+                    width={{ xs: '100%', md: '50%' }}
+                >
+                    <Typography variant='body1'>When I joined college, I hardly had any access to notes and question papers to practice from. I had to wait for the teachers to share them and wait until the exam to have a collection of question papers at my disposal.</Typography>
+                    <Typography variant='body1'>I started this project in my third year, with the philosophy</Typography>
+                    <Typography variant='body1' fontWeight={600} fontSize='1.5rem'><q>Be the Senior you need the most as a Junior.</q></Typography>
+                    <Typography variant='body1'>Any one is free to access the resources of this project and I aim to keep it that way.</Typography>
+                    <Typography variant='body1'>If you like the work I am doing, and want to keep the project active, your support would mean a lot. Buying me a coffee would mean a 1000 times more than a Thank You!</Typography>
+                    <Box className='supportButtons'>
+                        <BuyMeACoffee />
+                        <BecomeAPatreon />
+                    </Box>
+                </SupportContent>
+            </Content>
         </Main>
     )
 };
@@ -27,4 +62,33 @@ const Main = styled(Box)({
     }
 });
 
+const Content = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    marginTop: '1em',
+});
+
+const Animation = styled(Box)({
+    width: '50%',
+    height: 'auto'
+});
+
+const SupportContent = styled(Box)({
+    padding: '1em',
+    width: '50%',
+    background: 'rgba( 255, 255, 255, 0.4 )',
+    backdropFilter: 'blur(4px)',
+    webkitBackdropFilter: 'blur(4px)',
+    borderRadius: '8px',
+    marginTop: '1em',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.25em',
+    '.supportButtons': {
+        display: 'flex',
+        gap: '1em',
+    }
+});
+
 export default Support;