diff --git a/package-lock.json b/package-lock.json index ec2ff8f..7fd4e3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10350,9 +10350,9 @@ } }, "react": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", - "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -10574,9 +10574,9 @@ } }, "react-dom": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", - "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==", + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", + "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", diff --git a/package.json b/package.json index fbc0fbf..0a636e0 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,8 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "react": "^16.14.0", + "react-dom": "^16.14.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1" }, diff --git a/src/App.js b/src/App.js index 489d6bd..f88cfd2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,6 @@ import React, { useState } from 'react' import { BrowserRouter as Router, Switch, Route } from "react-router-dom" -import Homepage from "./pages/Homepage" -import About from './pages/About' -import Button from "./components/Button" -import Nav from "./components/Nav" -import Footer from "./components/Footer" - import './App.css'; import spotify from "./icons/spotify-icon.svg" @@ -16,29 +10,6 @@ function App() { return (
- - - {/* - - */} - {/* - - */} - - - - - - - - -
); } diff --git a/src/assets/rocket-monitor.svg b/src/assets/rocket-monitor.svg index 956e6c1..6ac8c92 100644 --- a/src/assets/rocket-monitor.svg +++ b/src/assets/rocket-monitor.svg @@ -1,42 +1,47 @@ - - - + + + - + - - + + - - - - - - - - - - - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + @@ -46,11 +51,11 @@ - + - \ No newline at end of file + diff --git a/src/components/Activity.js b/src/components/Activity.js index b2147df..e879985 100644 --- a/src/components/Activity.js +++ b/src/components/Activity.js @@ -4,13 +4,14 @@ import styles from "../css/Activity.module.css"; export default props => { return ( -
-
- {props.altText} + <> +
+ {props.altText} +

{props.title}

{props.msg}

-
+ ) } \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..b62dc03 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,46 @@ +import React from 'react'; + +import Button from './Button' +import styles from '../css/Header.module.css'; + +import surge from "../assets/surge.svg" +import rocketMonitor from "../assets/rocket-monitor.svg" + +export default props => { + return ( +
+
+ SFU Surge Logo +
+

{props.mandate}

+

{props.mission}

+
+
+
+
+ +
+ ) +} \ No newline at end of file diff --git a/src/components/UpcomingEvent.js b/src/components/UpcomingEvent.js index 928e8ad..283641e 100644 --- a/src/components/UpcomingEvent.js +++ b/src/components/UpcomingEvent.js @@ -31,7 +31,7 @@ export default props => { Time

{props.time}

- {props.title} + {props.title} ) diff --git a/src/css/Activity.module.css b/src/css/Activity.module.css index b84cfca..3c5295a 100644 --- a/src/css/Activity.module.css +++ b/src/css/Activity.module.css @@ -1,27 +1,19 @@ -#container { - position: relative; - margin-left: 12%; - margin-bottom: 250px; -} - .squareBackground { - width: 75%; + width: 90%; height: calc(65vw); background-color: var(--color-img); } .image { - width: 70%; - float: right; - margin-right: 15%; - transform: translateY(-105%); + width: 90%; } .text { - position: absolute; - width: 85%; + /* width: 90%; */ text-align: left; color: var(--color-main); + margin-top: -10px; + margin-bottom: 45px; } #textTitle { diff --git a/src/css/Button.module.css b/src/css/Button.module.css index b9f41e4..ae7367e 100644 --- a/src/css/Button.module.css +++ b/src/css/Button.module.css @@ -6,6 +6,7 @@ background-color: var(--color-btnPrimary); font-family: var(--color-main); font-weight: 600; + font-size: 20px; color: #FFFFFF; text-decoration: none; } diff --git a/src/css/Header.module.css b/src/css/Header.module.css new file mode 100644 index 0000000..09f718b --- /dev/null +++ b/src/css/Header.module.css @@ -0,0 +1,47 @@ +.wrapper { + height: 100%; + margin-bottom: 30px; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; +} + +.backgroundContainer { + background-image: url(../assets/frontpage-background.svg); + background-size: cover; + height: 475px; +} + +.logo { + margin-top: 50px; +} + +.headerText { + color: var(--color-main); + justify-content: center; + text-align: center; +} + +.mandate { + font-size: var(--fontSize-mobile-subHeading); + font-weight: 600; +} + +.mission { + width: 78%; + margin: auto; + text-align: left; + font-size: 16px; +} + +.btn { + margin-top: 20px; + display: flex; + justify-content: space-evenly; +} + +.rocketMonitor { + width: 80%; + margin-top: -30%; +} \ No newline at end of file diff --git a/src/css/Homepage.module.css b/src/css/Homepage.module.css new file mode 100644 index 0000000..2fffe41 --- /dev/null +++ b/src/css/Homepage.module.css @@ -0,0 +1,39 @@ +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; +} + +.title { + color: var(--color-main); + font-size: var(--fontSize-mobile-subHeading); + font-weight: 600; + text-align: center; + margin-bottom: 25px; +} + +.activities { + display: flex; + flex-direction: column; + justify-content: center; + align-self: center; + width: 80%; +} + +.spotlight { + margin: -30px auto 10px auto; + width: 80%; +} + +.stream { + font-size: var(--fontSize-mobile-body); + color: var(--color-btnSecondary) +} + +.upcomingEvents { + font-size: var(--fontSize-mobile-heading); + font-weight: 600; + color: var(--color-main); + width: 80%; + margin: 36px auto; +} \ No newline at end of file diff --git a/src/css/UpcomingEvent.module.css b/src/css/UpcomingEvent.module.css index 363b311..33ff514 100644 --- a/src/css/UpcomingEvent.module.css +++ b/src/css/UpcomingEvent.module.css @@ -38,7 +38,8 @@ .title { width: 60%; - font-size: 30px; + color: #ffffff; + font-size: var(--fontSize-mobile-heading); font-weight: 800; margin: 0; } diff --git a/src/pages/Homepage.js b/src/pages/Homepage.js index 8956b80..7c2c364 100644 --- a/src/pages/Homepage.js +++ b/src/pages/Homepage.js @@ -1,42 +1,85 @@ -import React from "react"; +import React from "react" -import Activity from "../components/Activity"; +import Header from "../components/Header" +import Activity from "../components/Activity" +import UpcomingEvent from "../components/UpcomingEvent" +import Button from "../components/Button" -import scooter from "../assets/scooter.svg"; +import styles from "../css/Homepage.module.css" + +import scooter from "../assets/scooter.svg" import robot from "../assets/robot.svg" -import microphone from "../assets/microphone.svg"; +import microphone from "../assets/microphone.svg" +import spotify from "../icons/spotify-icon.svg" export default props => { return ( - <> - - - +
+ SFU Surge is an all-inclusive organization to promote + curiosity and excitement for a future in technology, + while guiding students on their paths to career success. + + )} /> - +

Here's what we're up to!

+
+ + + +
+
+
+
+

Upcoming Events

+ +
+ ) } \ No newline at end of file