diff --git a/components/Hackathons.js b/components/Hackathons.js
index 683e29e..d16e0cf 100644
--- a/components/Hackathons.js
+++ b/components/Hackathons.js
@@ -1,28 +1,28 @@
-import { useState } from 'react'
-import styled from 'styled-components'
-import HackathonCard from './HackathonCard'
-import NewsletterModal from './NewsletterModal'
-import { Body, LinkBody } from './Typography';
+import { useState } from 'react';
+import styled from 'styled-components';
+import HackathonCard from './HackathonCard';
+import NewsletterModal from './NewsletterModal';
+import { Body, Title2 } from './Typography';
+import Button from './Button';
const HackCampData = {
imgSrc: '/assets/HackCamp2022.png',
link: 'https://hackcamp.nwplus.io',
date: 'Nov 5 - 6',
- open: false,
-}
+ open: false,
+};
const nwHacksData = {
imgSrc: '/assets/nwHacks2023.jpg',
link: 'https://nwhacks.io',
date: 'Jan 21 - 22',
open: false,
-}
+};
const cmdfData = {
imgSrc: '/assets/cmd-f2023.jpg',
link: 'https://cmd-f.nwplus.io',
date: 'Mar 11 - 12',
open: false,
-}
-const subscribeCTAText = 'to our newsletter to stay up to date on our hackathons!';
+};
const HackathonsContainer = styled.div`
display: flex;
@@ -35,6 +35,23 @@ const HackathonsContainer = styled.div`
}
`;
+const ActionButton = styled(Button)`
+ width: 200px;
+ height: 60px;
+ font-size: 22px;
+ margin: auto;
+ margin-top: 24px;
+
+ ${(p) => p.theme.mediaQueries.mobile} {
+ height: 60px;
+ width: 200px;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+`;
+
export default function Hackathons() {
const [showModal, setShowModal] = useState(false);
@@ -60,11 +77,18 @@ export default function Hackathons() {
imageLink={cmdfData.imgSrc}
/>
- setShowModal(true)}>Subscribe {subscribeCTAText}
- setShowModal(false)}
- />
+
+ Subscribe to our newsletter
+
+ Stay up to date on our hackathons!
+ setShowModal(true)}
+ >
+ Subscribe
+
+ setShowModal(false)} />
- )
+ );
}
diff --git a/components/Typography.js b/components/Typography.js
index 9339460..e95e064 100644
--- a/components/Typography.js
+++ b/components/Typography.js
@@ -44,24 +44,19 @@ export const Title1 = styled.h1.attrs((p) => ({
p.withGradient &&
`background: -webkit-linear-gradient(92deg, #19cbcb 1.55%, #78ff96 100%);
-webkit-background-clip: text;
- -webkit-text-fill-color: transparent;`
- }
+ -webkit-text-fill-color: transparent;`}
${(p) => p.theme.mediaQueries.mobile} {
font-size: 21.32px;
line-height: 27.77px;
}
- ${(p) =>
- p.underline &&
- 'text-decoration: underline;'
- }
+ ${(p) => p.underline && 'text-decoration: underline;'}
${(p) =>
p.hover &&
`&:hover {
cursor: pointer;
color: ${p.theme.colors.primary}
- }`
- }
- ${(p) => p.align ? `text-align: ${p.align}` : ''};
+ }`}
+ ${(p) => (p.align ? `text-align: ${p.align}` : '')};
`;
export const Title2 = styled.h2.attrs((p) => ({
@@ -80,6 +75,8 @@ export const Title2 = styled.h2.attrs((p) => ({
`background: -webkit-linear-gradient(92.58deg, #20FFAF 0%, #78FF96 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;`}
+ ${(p) => (p.align ? `text-align: ${p.align};` : '')}
+ line-height: ${(p) => p.lineHeight || '40px'};
${(p) => p.theme.mediaQueries.mobile} {
font-size: 16px;
line-height: 24px;
@@ -101,8 +98,7 @@ export const Title3 = styled.h3.attrs((p) => ({
p.withGradient &&
`background: -webkit-linear-gradient(92.58deg, #20FFAF 0%, #78FF96 100%);
-webkit-background-clip: text;
- -webkit-text-fill-color: transparent;`
- }
+ -webkit-text-fill-color: transparent;`}
${(p) => p.theme.mediaQueries.mobile} {
font-size: 12px;
line-height: 16px;
@@ -126,7 +122,7 @@ export const Body = styled.p.attrs((p) => ({
`background: -webkit-linear-gradient(92deg, #19cbcb 1.55%, #78ff96 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;`}
- ${(p) => p.align ? `text-align: ${p.align};` : ''}
+ ${(p) => (p.align ? `text-align: ${p.align};` : '')}
${(p) => p.theme.mediaQueries.mobile} {
font-size: 14px;
line-height: 24px;
@@ -152,7 +148,7 @@ export const LinkBody = styled.p.attrs((p) => ({
line-height: 24px;
letter-spacing: -0.43px;
text-decoration: underline;
- text-decoration-thickness: 2px;
+ text-decoration-thickness: 2px;
${SetColor}
${SetBackground}
${(p) => p.theme.mediaQueries.mobile} {