feat: add support button

src/components/HowItWorksSection/index.tsx

@@ -11,8 +11,8 @@ import PowerIcon from '@mui/icons-material/Power';
 import Typography from '@mui/material/Typography';
 import MapIcon from '@mui/icons-material/Map';
 import LaptopIcon from '@mui/icons-material/Laptop';
-import ConnectSvg from '@site/static/img/connect.svg';
-import NetworkSvg from '@site/static/img/network.svg';
+import ConfigureSvg from '@site/static/img/configure.svg';
+import AlertSvg from '@site/static/img/alert.svg';
 import WorkSvg from '@site/static/img/work.svg';
 import { useMediaQuery, useTheme } from '@mui/material';
 
@@ -29,7 +29,7 @@ function CustomizedTimeline() {
           <TimelineConnector sx={{ bgcolor: 'secondary.main' }} />
         </TimelineSeparator>
         <TimelineContent data-aos="fade-left">
-          <ConnectSvg className={styles.svg} />
+          <ConfigureSvg className={styles.svg} />
           <Spacer height={20} />
           <Typography variant="h5" component="span">
             Add your observability systems to Barklam
@@ -45,7 +45,7 @@ function CustomizedTimeline() {
           <TimelineConnector  sx={{ bgcolor: 'secondary.main' }} />
         </TimelineSeparator>
         <TimelineContent data-aos={matches ? "fade-right": "fade-left"}>
-          <NetworkSvg className={styles.svg} />
+          <WorkSvg className={styles.svg} />
           <Spacer height={20} />
           <Typography variant="h5" component="span">
             Work as any other day.
@@ -60,7 +60,7 @@ function CustomizedTimeline() {
           </TimelineDot>
         </TimelineSeparator>
         <TimelineContent data-aos="fade-left">
-          <WorkSvg className={styles.svg} />
+          <AlertSvg className={styles.svg} />
           <Spacer height={20} />
           <Typography variant="h5" component="span">
             We will notify you if anything breaks

src/components/Pricing/index.tsx

@@ -3,7 +3,7 @@ import styles from './styles.module.css';
 import Spacer from '@site/src/components/Spacer';
 import { Box, Button, Card, CardActions, CardContent, CardHeader, Divider, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
 
-const PricingCard = ({name, price, features, button, level}: any) => {
+const PricingCard = ({name, price, features, button}: any) => {
   return (
     <Card sx={{width:"300px"}}>
       <CardHeader title={name} align="center"/>
@@ -24,7 +24,7 @@ const PricingCard = ({name, price, features, button, level}: any) => {
           alignItems="center"
           justifyContent="center"
         >
-          <a className={"button button--primary"} href={`#tally-open=mOPVGp&tally-layout=modal&tally-width=300&tally-hide-title=1&tally-overlay=1&tally-emoji-text=👋&tally-emoji-animation=wave&tally-auto-close=0&level=${button.level}`}>{button.text}</a>
+          <a className={"button button--primary"} href={button.url}>{button.text}</a>
         </Box>
       </CardActions>
     </Card>
@@ -42,9 +42,7 @@ const Pricing: React.FC = () => {
           <Spacer height={20} />
         </div>
         <Stack direction={matches? "row": "column"} spacing={2} alignItems="center">
-          <PricingCard name="Free"  price="€0/mo" features={["1 social", "1 podcast", "Synchronize every hour"]} button={{text:"Join Waitng List", level:"free"}}/>
-          <PricingCard name="Paid"  price="€10/mo" features={["unlimited social", "unlimited podcast", "Synchronize every 30 minutes" ]} button={{text:"Contact Us", level:"paid"}} />
-          <PricingCard name="Enterprise"  price="€20/mo" features={["unlimited social", "unlimited podcast", "Synchronize every 5 minutes"]} button={{text:"Contact Us", level:"enterprise"}} />
+          <PricingCard name="Free"  price="€0/mo" features={["Infinite Build systems", "Infinite Metrics Systems", "Infinite All"]} button={{text:"Support us", url:"https://github.com/sponsors/alvarolorentedev"}}/>
         </Stack>
       </div>
     </div>

src/components/Pricing/styles.module.css

@@ -1,6 +1,6 @@
 .Container {
   background-color: var(--ifm-color-primary-dark);
-  color: var(--ifm-color-primary-text);
+  color: var(--ifm-color-primary-text-dark);
   transform: skewY(-2deg);
   padding: 8rem 0;
 }

src/pages/index.tsx

@@ -15,6 +15,7 @@ import clsx from 'clsx';
 import styles from './index.module.css';
 import HowItWorksSection from '../components/HowItWorksSection';
 import Pricing from '../components/Pricing';
+import Spacer from '../components/Spacer';
 
 function TweetsSection() {
   const tweetColumns: TweetItem[][] = [[], [], []];
@@ -68,6 +69,7 @@ function QuotesSection() {
           ))}
         </div>
       </div>
+      <Spacer height={20} />
     </div>
   );
 }
@@ -87,6 +89,9 @@ export default function Home(): JSX.Element {
         <StraightforwardView />
         <HowItWorksSection />
         <TweetsSection />
+        <Spacer height={70} />
+        <Pricing />
+        <Spacer height={70} />
         <QuotesSection />
       </main>
     </Layout>