Merge pull request #291 from Tech-Start-UCalgary/teamsPage

Add Teams Page and galatea sponsor, redesign components and sections, add GitHub link to footer, start migrate to Styled Components, refactoring

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.formatOnSave": true,
-  "editor.formatOnPaste": false,
+  "editor.formatOnPaste": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },

package.json

@@ -24,9 +24,10 @@
     "@types/react-router-dom": "^5.1.7",
     "@types/react-scroll": "^1.8.2",
     "aos": "^2.3.4",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",
+    "framer-motion": "^4.1.17",
     "lottie-react": "^2.1.0",
     "material-design-icons": "^3.0.1",
     "packages": "0.0.8",
@@ -35,12 +36,13 @@
     "react-dom": "^17.0.1",
     "react-elastic-carousel": "^0.11.4",
     "react-icons": "^4.2.0",
+    "react-intersection-observer": "^8.33.1",
     "react-particles-js": "^3.4.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "react-scroll": "^1.8.2",
     "react-visibility-sensor": "^5.1.1",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.3.3",
     "typescript": "^4.1.5",
     "web-vitals": "^1.1.0"
   },
@@ -58,14 +60,19 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
+      ">0.3%",
+      "not ie 11",
       "not dead",
       "not op_mini all"
     ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
-      "last 1 safari version"
+      "last 1 safari version",
+      ">0.3%",
+      "not ie 11",
+      "not dead",
+      "not op_mini all"
     ]
   },
   "devDependencies": {

src/App.css

@@ -11,12 +11,20 @@
   --turquoise-green: #8bffa5;
   --turquoise-blue: #70f0e8;
   --secondary-grey: rgba(34, 34, 34, 0.95);
+  --title-size: clamp(1.4rem, calc(15vw + 1rem), 8rem);
   --chonky-header-size: 4.75rem;
   --thicc-subheading-size: 2.5rem;
   --babyHeading-size: 1.6rem;
   --chonky-header-weight: 900;
   --regular-font: 1rem;
   font-family: "Inter", Tahoma, sans-serif;
+
+  /* Section backgrounds*/
+  --dark-background: linear-gradient(
+    to bottom,
+    rgb(19, 19, 19),
+    rgb(26, 26, 26)
+  );
 }
 
 .chonkyHeading {
@@ -38,6 +46,10 @@
   margin-bottom: 0px;
 }
 
+.chonkyHeading--noMargin {
+  margin: 0px;
+}
+
 .chonkyHeading--dynamic {
   font-size: clamp(1rem, calc(8vw + 1rem), 3.5rem);
 }

src/App.tsx

@@ -2,15 +2,15 @@ import HomePage from "pages/HomePage";
 import DocsPage from "pages/DocsPage";
 import SparkPage from "pages/SparkPage";
 import ApplyPage from "pages/ApplyPage";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import Navbar from "components/Navbar";
 import Footer from "components/Footer/Footer";
 import "./App.css";
-import Particles from "react-particles-js";
 import Aos from "aos";
 import "aos/dist/aos.css";
 import ScrollToTop from "components/ScrollToTop";
+import TeamPage from "pages/TeamPage";
 
 function App() {
   //
@@ -25,6 +25,9 @@ function App() {
         <Navbar />
         <div className="content">
           <Switch>
+            <Route path="/team">
+              <TeamPage />
+            </Route>
             <Route path="/resources">
               <DocsPage />
             </Route>