diff --git a/public/hackersatupc.svg b/public/hackersatupc.svg index d2364c64..718782fd 100644 --- a/public/hackersatupc.svg +++ b/public/hackersatupc.svg @@ -1,14 +1,9 @@ - - - - - - - - - - - - - + + + + + + + + diff --git a/src/app/components/Hackers.tsx b/src/app/components/Hackers.tsx index 6204707b..933a140f 100644 --- a/src/app/components/Hackers.tsx +++ b/src/app/components/Hackers.tsx @@ -15,19 +15,11 @@ import { TitleS, } from "@/app/genericComponents/tokens"; -const Colors = { - HeroYellow: "#FCFC01", - HeroBlue: "#0060BF", - HeroNeutral: "#231F20", - HeroBlack: "#000000", - HeroBlack80: "rgba(0, 0, 0, 0.8)", -}; - -const BlueContainer = styled.div` - border: 2px solid ${Colors.HeroBlue}; - border-radius: 8px; +const WhiteContainer = styled.div` + background-color: rgba(255, 255, 255, 0.51); + border-radius: 10px; padding: ${SpacingM}; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; @@ -35,6 +27,7 @@ const BlueContainer = styled.div` `; const StyledButton = styled.div` + background-color: #a3c9a8; color: #000000; padding: ${SpacingS} ${SpacingM}; border-radius: 8px; @@ -43,9 +36,14 @@ const StyledButton = styled.div` font-weight: bold; font-size: ${TitleS}; text-align: center; + text-transform: uppercase; + text-decoration: none; + + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); &:hover { - color: #ffffff; + background-color: #8bb190; + color: #000000; } `; @@ -78,7 +76,7 @@ const StyledSmallTitle = styled(SmallTitle)` export default function Hackers() { return (
- + The organization behind HackUPC @@ -118,7 +116,7 @@ export default function Hackers() { > Go to website - +
); } diff --git a/src/app/genericComponents/Typography.tsx b/src/app/genericComponents/Typography.tsx index 3526e6c0..dadf7c19 100644 --- a/src/app/genericComponents/Typography.tsx +++ b/src/app/genericComponents/Typography.tsx @@ -60,6 +60,7 @@ export const Body = styled.div` @media (max-width: ${MobileBreakpoint}) { font-size: ${MobileBodyText}; + text-align: center; } `;