Skip to content

Commit 9540277

Browse files
YonavaYonava
authored
Merge pull request #83 from build-umass/about-page-cleanup
2 parents cf3a3cc + 6a81c5e commit 9540277

21 files changed

+546
-285
lines changed

‎src/components/Footer.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
faLinkedin,
1212
faGithub,
1313
} from '@fortawesome/free-brands-svg-icons';
14+
import { contactFormLink } from '../content/nav';
1415

1516
export default function Footer() {
1617
return (
@@ -93,7 +94,7 @@ export default function Footer() {
9394
<Link
9495
// Todo: Connect with Cheerio
9596
// href="/contact"
96-
href="https://forms.gle/uuA2s98v4oC4o8TU7"
97+
href={contactFormLink}
9798
target="_blank"
9899
>
99100
Contact

‎src/components/JoinUsHero.jsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
export default JoinUsHero = () => (
2+
<div>
3+
<div className="top-curve" />
4+
<div className="bg-gradient">
5+
<Container>
6+
<Row className="center">
7+
<Col sm={4}>
8+
<img
9+
className="illust"
10+
src="/img/illustrations/people-chatting.svg"
11+
alt="People chatting"
12+
/>
13+
</Col>
14+
<Col>
15+
<div>
16+
<Row>
17+
<Col>
18+
<h1 className="pg-heading center">
19+
Interested in joining us?
20+
</h1>
21+
</Col>
22+
</Row>
23+
<Row>
24+
<Col>
25+
<p className="pg-heading center">
26+
We have applications for various positions that open at the
27+
start of each semester. Upon completion, we will contact you
28+
for an interview. If you are not sure which position is best
29+
for you, apply to all positions!
30+
</p>
31+
</Col>
32+
</Row>
33+
<Row>
34+
<Col className="center">
35+
<Link href="/apply">
36+
<Button variant="light" className="link-btn">
37+
Apply!
38+
</Button>
39+
</Link>
40+
</Col>
41+
</Row>
42+
</div>
43+
</Col>
44+
</Row>
45+
</Container>
46+
</div>
47+
<div className="bottom-curve" />
48+
</div>
49+
);

‎src/components/JumbotronHeader.jsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Row from 'react-bootstrap/Row';
2+
import Col from 'react-bootstrap/Col';
3+
4+
export default function JumbotronHeader({ title, subtitle, actions }) {
5+
return (
6+
<div
7+
style={{
8+
height: '500px',
9+
display: 'flex',
10+
justifyContent: 'center',
11+
alignItems: 'center'
12+
}}
13+
>
14+
<div
15+
style={{
16+
maxWidth: '800px',
17+
width: '90%'
18+
}}
19+
>
20+
<Row>
21+
<Col>
22+
<Row>
23+
<Col>
24+
<h1 className="pg-heading center">
25+
{title}
26+
</h1>
27+
</Col>
28+
</Row>
29+
<Row>
30+
<Col>
31+
<p className="pg-heading center">
32+
{subtitle}
33+
</p>
34+
</Col>
35+
</Row>
36+
<Row>
37+
<Col className="center">
38+
{actions}
39+
</Col>
40+
</Row>
41+
</Col>
42+
</Row>
43+
</div>
44+
</div>
45+
);
46+
}

‎src/components/MemberCard.js

-37
This file was deleted.

‎src/components/Navbar.js

-43
This file was deleted.

‎src/components/nav/Navbar.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import Container from 'react-bootstrap/Container';
3+
import { useBreakpoint } from '../../hooks/useBreakpoint.js';
4+
5+
import NavbarLg from './NavbarLg.js';
6+
import NavbarSm from './NavbarSm.js';
7+
import { content } from '../../content/nav.js';
8+
9+
export default function Navbar() {
10+
11+
const { smAndDown } = useBreakpoint();
12+
const { pages } = content;
13+
14+
return (
15+
<div
16+
style={{
17+
position: 'absolute',
18+
zIndex: 100,
19+
width: '100%',
20+
}}
21+
>
22+
{smAndDown ?
23+
<NavbarSm pages={pages} /> :
24+
<Container>
25+
<NavbarLg pages={pages} />
26+
</Container>
27+
}
28+
</div>
29+
);
30+
}

‎src/components/nav/NavbarLg.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Navbar from 'react-bootstrap/Navbar';
2+
import Nav from 'react-bootstrap/Nav';
3+
import NavbarLink from './NavbarLink';
4+
5+
export default function NavbarLg({ pages }) {
6+
return (
7+
<Navbar
8+
style={{
9+
width: '100%',
10+
display: 'flex',
11+
justifyContent: 'space-between',
12+
}}
13+
>
14+
<Navbar.Brand href="/">
15+
BUILD UMass
16+
</Navbar.Brand>
17+
18+
<Nav>
19+
{pages.map((page) => (
20+
<Nav.Item key={page.name}>
21+
<NavbarLink page={page} />
22+
</Nav.Item>
23+
))}
24+
</Nav>
25+
</Navbar>
26+
);
27+
}

‎src/components/nav/NavbarLink.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Link from 'next/link';
2+
3+
export default function NavbarLink({ page, linkDisplay }) {
4+
const isExternal = page.link.startsWith('http');
5+
6+
return (
7+
isExternal ? (
8+
<a
9+
href={page.link}
10+
target="_blank"
11+
rel="noreferrer noopener"
12+
>
13+
{linkDisplay || page.name}
14+
</a>) : (
15+
<Link href={page.link}>
16+
<a>
17+
{linkDisplay || page.name}
18+
</a>
19+
</Link>
20+
)
21+
);
22+
}

‎src/components/nav/NavbarMenu.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { useOuterClick } from '../../hooks/useOuterClick';
2+
import NavbarLink from './NavbarLink';
3+
import { useEffect, useState } from 'react';
4+
import NavbarMenuItem from './NavbarMenuItem';
5+
6+
export default function NavbarMenu({ show, pages, close }) {
7+
const innerRef = useOuterClick(() => !show || close());
8+
const [rendering, setRendering] = useState(true);
9+
useEffect(() => setRendering(false))
10+
11+
const menuStyle = {
12+
position: 'fixed',
13+
top: 0,
14+
right: 0,
15+
zIndex: 100,
16+
width: '400px',
17+
maxWidth: '80%',
18+
height: '100%',
19+
transform: `translateX(${show ? '0' : '100vw'})`,
20+
transition: 'transform 0.3s ease',
21+
background: 'linear-gradient(to top, #900202, #d13c06)',
22+
display: 'flex',
23+
flexDirection: 'column',
24+
gap: '8px',
25+
boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.5)',
26+
};
27+
28+
const circleDecorationStyle = {
29+
position: 'absolute',
30+
bottom: '-400px',
31+
left: '100px',
32+
width: 'calc(100% - 40px)',
33+
borderRadius: '50%',
34+
height: '700px',
35+
width: '700px',
36+
background: 'black',
37+
opacity: 0.3,
38+
border: '120px dashed #d13c06',
39+
}
40+
41+
const backgroundDarkenerStyle = {
42+
position: 'fixed',
43+
top: 0,
44+
left: 0,
45+
zIndex: 99,
46+
width: '100%',
47+
height: '100%',
48+
background: show ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
49+
pointerEvents: show ? 'auto' : 'none',
50+
transition: 'background 0.3s ease',
51+
}
52+
53+
const menuTitleStyle = {
54+
color: 'white',
55+
fontSize: '30px',
56+
fontWeight: '700',
57+
}
58+
59+
return rendering || (
60+
<>
61+
<div
62+
className="p-3"
63+
ref={innerRef}
64+
onClick={close}
65+
style={menuStyle}
66+
>
67+
68+
<div style={circleDecorationStyle}></div>
69+
70+
<h1 style={menuTitleStyle}>
71+
Browse BUILD
72+
</h1>
73+
74+
{pages.map((page, i) => (
75+
<NavbarLink
76+
page={page}
77+
key={i}
78+
linkDisplay={<NavbarMenuItem page={page} />}
79+
></NavbarLink>
80+
))}
81+
82+
</div>
83+
84+
<div
85+
style={backgroundDarkenerStyle}
86+
onClick={close}
87+
></div>
88+
</>
89+
);
90+
}

0 commit comments

Comments
 (0)