chore: style improvements (#6)

Author: romanindev

src/components/Hero/Hero.tsx

@@ -57,8 +57,13 @@ export const Hero = () => {
             </Typography>
           </Box>
 
-          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+          <Stack
+            direction={{ xs: 'column', sm: 'row' }}
+            spacing={2}
+            sx={{ width: { xs: '100%', md: 'auto' } }}
+          >
             <Button
+              fullWidth
               variant="contained"
               size="medium"
               href="https://www.npmjs.com/package/@dfsync/client"
@@ -69,6 +74,7 @@ export const Hero = () => {
               View on npm
             </Button>
             <Button
+              fullWidth
               component={RouterLink}
               variant="outlined"
               size="medium"

src/components/ProjectBadges/ProjectBadges.tsx

@@ -38,28 +38,21 @@ export const ProjectBadges = () => {
         />
       </Link>
 
-      {/* github stars */}
+      {/* LICENSE */}
       <Link
-        href={`https://github.com/${repoName}/tree/main/packages/client`}
+        href={`https://github.com/${repoName}/blob/main/LICENSE`}
         target="_blank"
         rel="noreferrer"
         underline="none"
         sx={{ lineHeight: 1 }}
       >
         <Box
           component="img"
-          src={`https://img.shields.io/github/stars/${repoName}`}
-          alt="github stars"
+          src={`https://img.shields.io/badge/License-MIT-yellow.svg`}
+          alt="license"
           sx={{ height: 20 }}
         />
       </Link>
-
-      <Box
-        component="img"
-        src={`https://img.shields.io/github/license/${repoName}`}
-        alt="license"
-        sx={{ height: 20 }}
-      />
     </Stack>
   );
 };