Merge pull request #83 from build-umass/about-page-cleanup

src/components/Footer.js

@@ -11,6 +11,7 @@ import {
   faLinkedin,
   faGithub,
 } from '@fortawesome/free-brands-svg-icons';
+import { contactFormLink } from '../content/nav';
 
 export default function Footer() {
   return (
@@ -93,7 +94,7 @@ export default function Footer() {
               <Link
                 // Todo: Connect with Cheerio
                 // href="/contact"
-                href="https://forms.gle/uuA2s98v4oC4o8TU7"
+                href={contactFormLink}
                 target="_blank"
               >
                 Contact

src/components/JoinUsHero.jsx

@@ -0,0 +1,49 @@
+export default JoinUsHero = () => (
+  <div>
+    <div className="top-curve" />
+    <div className="bg-gradient">
+      <Container>
+        <Row className="center">
+          <Col sm={4}>
+            <img
+              className="illust"
+              src="/img/illustrations/people-chatting.svg"
+              alt="People chatting"
+            />
+          </Col>
+          <Col>
+            <div>
+              <Row>
+                <Col>
+                  <h1 className="pg-heading center">
+                    Interested in joining us?
+                  </h1>
+                </Col>
+              </Row>
+              <Row>
+                <Col>
+                  <p className="pg-heading center">
+                    We have applications for various positions that open at the
+                    start of each semester. Upon completion, we will contact you
+                    for an interview. If you are not sure which position is best
+                    for you, apply to all positions!
+                  </p>
+                </Col>
+              </Row>
+              <Row>
+                <Col className="center">
+                  <Link href="/apply">
+                    <Button variant="light" className="link-btn">
+                      Apply!
+                    </Button>
+                  </Link>
+                </Col>
+              </Row>
+            </div>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+    <div className="bottom-curve" />
+  </div>
+);

src/components/JumbotronHeader.jsx

@@ -0,0 +1,46 @@
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+export default function JumbotronHeader({ title, subtitle, actions }) {
+  return (
+    <div
+      style={{
+        height: '500px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <div
+        style={{
+          maxWidth: '800px',
+          width: '90%'
+        }}
+      >
+      <Row>
+        <Col>
+          <Row>
+            <Col>
+              <h1 className="pg-heading center">
+                {title}
+              </h1>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <p className="pg-heading center">
+                {subtitle}
+              </p>
+            </Col>
+          </Row>
+          <Row>
+            <Col className="center">
+              {actions}
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+      </div>
+    </div>
+  );
+}

src/components/nav/Navbar.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
+
+import NavbarLg from './NavbarLg.js';
+import NavbarSm from './NavbarSm.js';
+import { content } from '../../content/nav.js';
+
+export default function Navbar() {
+
+  const { smAndDown } = useBreakpoint();
+  const { pages } = content;
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        zIndex: 100,
+        width: '100%',
+      }}
+    >
+      {smAndDown ?
+        <NavbarSm pages={pages} /> :
+        <Container>
+          <NavbarLg pages={pages} />
+        </Container>
+      }
+    </div>
+  );
+}

src/components/nav/NavbarLg.js

@@ -0,0 +1,27 @@
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from 'react-bootstrap/Nav';
+import NavbarLink from './NavbarLink';
+
+export default function NavbarLg({ pages }) {
+  return (
+    <Navbar
+      style={{
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Navbar.Brand href="/">
+        BUILD UMass
+      </Navbar.Brand>
+
+      <Nav>
+        {pages.map((page) => (
+          <Nav.Item key={page.name}>
+            <NavbarLink page={page} />
+          </Nav.Item>
+        ))}
+      </Nav>
+    </Navbar>
+  );
+}

src/components/nav/NavbarLink.js

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+
+export default function NavbarLink({ page, linkDisplay }) {
+  const isExternal = page.link.startsWith('http');
+
+  return (
+    isExternal ? (
+      <a
+        href={page.link}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {linkDisplay || page.name}
+      </a>) : (
+      <Link href={page.link}>
+        <a>
+          {linkDisplay || page.name}
+        </a>
+      </Link>
+    )
+  );
+}

src/components/nav/NavbarMenu.js

@@ -0,0 +1,90 @@
+import { useOuterClick } from '../../hooks/useOuterClick';
+import NavbarLink from './NavbarLink';
+import { useEffect, useState } from 'react';
+import NavbarMenuItem from './NavbarMenuItem';
+
+export default function NavbarMenu({ show, pages, close }) {
+  const innerRef = useOuterClick(() => !show || close());
+  const [rendering, setRendering] = useState(true);
+  useEffect(() => setRendering(false))
+
+  const menuStyle = {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    zIndex: 100,
+    width: '400px',
+    maxWidth: '80%',
+    height: '100%',
+    transform: `translateX(${show ? '0' : '100vw'})`,
+    transition: 'transform 0.3s ease',
+    background: 'linear-gradient(to top, #900202, #d13c06)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.5)',
+  };
+
+  const circleDecorationStyle = {
+    position: 'absolute',
+    bottom: '-400px',
+    left: '100px',
+    width: 'calc(100% - 40px)',
+    borderRadius: '50%',
+    height: '700px',
+    width: '700px',
+    background: 'black',
+    opacity: 0.3,
+    border: '120px dashed #d13c06',
+  }
+
+  const backgroundDarkenerStyle = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    zIndex: 99,
+    width: '100%',
+    height: '100%',
+    background: show ? 'rgba(0, 0, 0, 0.5)' : 'transparent',
+    pointerEvents: show ? 'auto' : 'none',
+    transition: 'background 0.3s ease',
+  }
+
+  const menuTitleStyle = {
+    color: 'white',
+    fontSize: '30px',
+    fontWeight: '700',
+  }
+
+  return rendering || (
+    <>
+      <div
+        className="p-3"
+        ref={innerRef}
+        onClick={close}
+        style={menuStyle}
+      >
+
+        <div style={circleDecorationStyle}></div>
+
+        <h1 style={menuTitleStyle}>
+          Browse BUILD
+        </h1>
+
+        {pages.map((page, i) => (
+          <NavbarLink
+            page={page}
+            key={i}
+            linkDisplay={<NavbarMenuItem page={page} />}
+          ></NavbarLink>
+        ))}
+
+      </div>
+
+      <div
+        style={backgroundDarkenerStyle}
+        onClick={close}
+      ></div>
+    </>
+  );
+}