more minor design changes

packages/app/src/components/Button.tsx

@@ -1,78 +1,3 @@
-// import styled from "styled-components";
-
-// export const Button = styled.button`
-//   padding: 0 14px;
-//   border-radius: 4px;
-//   background: #8272e4;
-//   border: none;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   font-weight: 600;
-//   font-size: 0.9rem;
-//   letter-spacing: -0.02em;
-//   color: #fff;
-//   cursor: pointer;
-//   height: 48px;
-//   width: 100%;
-//   min-width: 32px;
-//   transition: all 0.2s ease-in-out;
-//   &:hover {
-//     background: #9b8df2;
-//   }
-//   &:disabled {
-//     opacity: 0.5;
-//     cursor: not-allowed;
-//   }
-// `;
-
-// export const OutlinedButton = styled.button`
-//   padding: 0 14px;
-//   border-radius: 4px;
-//   border: none;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   font-weight: 500;
-//   font-size: 0.9rem;
-//   letter-spacing: -0.02em;
-//   color: #8272e4;
-//   cursor: pointer;
-//   height: 48px;
-//   width: 100%;
-//   min-width: 32px;
-//   transition: all 0.2s ease-in-out;
-//   background: transparent;
-//   border: 1px solid #8272e4;
-//   &:hover {
-//     background: #9b8df2;
-//     color: white;
-//   }
-//   &:disabled {
-//     opacity: 0.5;
-//     cursor: not-allowed;
-//   }
-// `;
-
-
-// export const TextButton = styled.button`
-// width: fit-content;
-// background: transparent;
-// border: none;
-// color: white;
-// font-weight: 500;
-// padding: 4px 16px;
-// border-radius: 4px;
-//   &:hover {
-//     background: #00000020;
-//     color: white;
-//   }
-//   &:disabled {
-//     opacity: 0.5;
-//     cursor: not-allowed;
-//   }
-// `;
-
 import React from 'react';
 import styled from "styled-components";
 import { useTheme, Button as MuiButton } from "@mui/material";
@@ -89,11 +14,11 @@ interface ButtonProps {
 
 const StyledButton = styled(MuiButton)<{ highlighted: boolean }>`
   text-transform: none;
-  border-radius: 9px;
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 600;
+  font-weight: 900;
   font-size: 0.9rem;
   letter-spacing: -0.02em;
   color: #fff;
@@ -129,11 +54,11 @@ const StyledButton = styled(MuiButton)<{ highlighted: boolean }>`
 
 const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
   padding: 0 5px;
-  border-radius: 9px;
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 500;
+  font-weight: 900;
   font-size: 0.9rem;
   letter-spacing: -0.02em;
   text-transform: none;
@@ -173,8 +98,8 @@ const StyledTextButton = styled(MuiButton)<{ highlighted: boolean }>`
   background: '#ffffff';
   border: none;
   color: ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : theme.palette.secondary.main)};
-  font-weight: 500;
-  border-radius: 9px;
+  font-weight: 900;
+  border-radius: 12px;
 
   &:hover {
     color: theme.palette.secondary.main;

packages/app/src/components/Footer.tsx

@@ -0,0 +1,88 @@
+'use client';
+import { useState } from 'react';
+import { Box, Typography, useTheme, Link } from "@mui/material";
+
+const Footer = () => {
+  const [hoveredImgs, setHoveredImgs] = useState({
+    XLogo: false,
+    YoutubeLogo: false,
+    TelegramLogo: false,
+    GithubLogo: false,
+  });
+
+  const handleMouseEnter = (img) => {
+    setHoveredImgs((prev) => ({ ...prev, [img]: true }));
+  };
+
+  const handleMouseLeave = (img) => {
+    setHoveredImgs((prev) => ({ ...prev, [img]: false }));
+  };
+
+  return (
+    <Box 
+      component="footer" 
+      width="100%" 
+      borderTop="1px solid" 
+      borderColor="grey.100" 
+      py={2} 
+      bgcolor="white"
+    >
+      <Box 
+        maxWidth="lg" 
+        mx="auto" 
+        px={2} 
+        display="flex" 
+        justifyContent="space-between" 
+        alignItems="center"
+      >
+        {/* Left Side - Links */}
+        <Box display="flex" alignItems="center" gap={2}>
+          <Link 
+            href="https://docs.prove.email/introduction" 
+            target="_blank" 
+            color="grey.900" 
+            underline="hover"
+          >
+            Documentation
+          </Link>
+          <Typography color="grey.500">•</Typography>
+          <Link 
+            href="/privacy" 
+            color="grey.900" 
+            underline="hover"
+          >
+            Privacy Policy
+          </Link>
+        </Box>
+
+        {/* Right Side - Social Icons */}
+        <Box display="flex" alignItems="center" gap={2}>
+          {[
+            { name: 'XLogo', link: 'https://x.com/zkemail?lang=en', alt: 'twitter-logo', imgSrc: '/assets/XLogo.svg', hoveredImgSrc: '/assets/XLogoFilled.svg' },
+            { name: 'YoutubeLogo', link: 'https://www.youtube.com/@sigsing', alt: 'youtube-logo', imgSrc: '/assets/YoutubeLogo.svg', hoveredImgSrc: '/assets/YoutubeLogoFilled.svg' },
+            { name: 'TelegramLogo', link: 'https://t.me/zkemail', alt: 'telegram-logo', imgSrc: '/assets/TelegramLogo.svg', hoveredImgSrc: '/assets/TelegramLogoFilled.svg' },
+            { name: 'GithubLogo', link: 'https://github.com/zkemail', alt: 'github-logo', imgSrc: '/assets/GithubLogo.svg', hoveredImgSrc: '/assets/GithubLogoFilled.svg' }
+          ].map((icon) => (
+            <Link 
+              key={icon.name} 
+              href={icon.link} 
+              target="_blank"
+            >
+              <Box
+                component="img"
+                onMouseEnter={() => handleMouseEnter(icon.name)}
+                onMouseLeave={() => handleMouseLeave(icon.name)}
+                src={hoveredImgs[icon.name] ? icon.hoveredImgSrc : icon.imgSrc}
+                alt={icon.alt}
+                height={20}
+                width={20}
+              />
+            </Link>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default Footer;