+ {events
+ .filter((event) => {
+ if (!eventsFilter) return event;
+ const sample = Object.values(event).join('');
+ return (
+ sample.toLowerCase().includes(eventsFilter.toLowerCase()) && event
+ );
+ })
+ .map((event, index) => {
+ return (
+
+ );
+ })}
+
+
+ Are YOU a student interested in what options trading is? Do YOU want
+ to know how to make money with your skills? Quantsoc is partnering up
+ with the Personal Investment Society to bring you our Options Trading
+ Workshop!
+
+
+ Come bring yourself and all your friends to QuantSoc x Pisoc's
+ Options Trading workshop on Wednesday, 14th of June 5:00pm to 7:00pm
+ at Mathews 104! This workshop is open to people with ALL levels of
+ knowledge.
+
+
+
+ );
+*/
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
new file mode 100644
index 00000000..8144af51
--- /dev/null
+++ b/src/components/Modal/index.js
@@ -0,0 +1,3 @@
+import Modal from './Modal';
+
+export default Modal;
diff --git a/src/components/Modal/index.less b/src/components/Modal/index.less
new file mode 100644
index 00000000..db793493
--- /dev/null
+++ b/src/components/Modal/index.less
@@ -0,0 +1,4 @@
+// This Modal component has the same classes as the EventModal hence the CSS
+// is shared between the two components. This is was an oversight
+// and should be fixed or improved upon by removing the duplication.
+// For the time being, we'll leave this blank
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
new file mode 100644
index 00000000..26c0fa4c
--- /dev/null
+++ b/src/components/NavBar/NavBar.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import BurgerMenu from 'components/BurgerMenu';
+import './index.less';
+import QuantSocLogo from 'components/QuantSocLogo';
+import { useNavigate } from 'react-router-dom';
+
+const NavBar = () => {
+ const navigate = useNavigate();
+ return (
+
-
-
-
-
-
-
-
+
+
+
+
+ Dive into the fast-paced world of trading, hone your investment
+ strategies, and compete with fellow traders in a mock environment.
+ Create your own markets and play amongst your friends.
+
+
+ Learn, compete and have fun in QuantSoc's Mock Trading Game!
+
+
+
+
);
};
-
export default LandingPage;
diff --git a/src/routes/LandingPage/ResourcesSection/ResourceButton.jsx b/src/routes/LandingPage/ResourcesSection/ResourceButton.jsx
new file mode 100644
index 00000000..033fcaff
--- /dev/null
+++ b/src/routes/LandingPage/ResourcesSection/ResourceButton.jsx
@@ -0,0 +1,21 @@
+import { HashLink } from 'react-router-hash-link';
+import './index.less';
+
+const ResourcesButton = ({
+ btnTitle,
+ btnText,
+ destination,
+ Icon,
+}) => {
+ return (
+
+
+
+
{btnTitle}
+
{btnText}
+
+ );
+};
+
+export default ResourcesButton;
diff --git a/src/routes/LandingPage/ResourcesSection/ResourcesSection.jsx b/src/routes/LandingPage/ResourcesSection/ResourcesSection.jsx
new file mode 100644
index 00000000..92e22e9a
--- /dev/null
+++ b/src/routes/LandingPage/ResourcesSection/ResourcesSection.jsx
@@ -0,0 +1,33 @@
+import { BiCandles, BiBriefcase } from 'react-icons/bi';
+import { LiaChalkboardTeacherSolid } from 'react-icons/lia';
+import ResourcesButton from './ResourceButton';
+
+const ResourcesSection = () => {
+ return (
+
+ Resources
+ QuantSoc's resources and opportunities.
+
+
+
+
+
+
+ );
+};
+export default ResourcesSection;
diff --git a/src/routes/LandingPage/ResourcesSection/index.less b/src/routes/LandingPage/ResourcesSection/index.less
new file mode 100644
index 00000000..242c9ac2
--- /dev/null
+++ b/src/routes/LandingPage/ResourcesSection/index.less
@@ -0,0 +1,118 @@
+@import 'styles/global.less';
+@import 'styles/constants.less';
+
+.resources-section {
+ display: flex;
+ flex-direction: column;
+
+ p {
+ margin-bottom: 1.5rem;
+ }
+
+ .resources-buttons {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ place-items: flex-end;
+ gap: 24px;
+
+ a {
+ text-decoration: none; // remove default underlining of anchor element (from HashLink)
+ }
+ }
+}
+
+.resources-button {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ // background-color: #F1E9FF;
+ color: black;
+ background-color: @lightest-purple;
+ filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.25));
+
+ border-radius: 10px;
+ min-height: 90px;
+ width: 605px;
+ text-wrap: nowrap;
+ transition: all 0.1s ease-in-out;
+ cursor: pointer;
+
+ &:hover {
+ background-color: @quantsoc-primary;
+ }
+
+ &:nth-of-type(even) {
+ justify-self: start;
+ }
+
+ .resources-button-icon {
+ width: 35px;
+ height: 35px;
+ margin: 20px;
+ flex-shrink: 0.2;
+ }
+
+ .resources-button-text {
+ font-family: 'Poppins';
+ text-decoration: none;
+ line-height: 27px;
+
+ .resources-button-title {
+ font-size: 20px;
+ font-weight: 500;
+ margin-bottom: 15px;
+ }
+
+ .resources-button-subtext {
+ color: @text-secondary;
+ font-size: 16px;
+ font-weight: 400;
+ margin-right: 20px;
+ }
+ }
+}
+
+@media screen and (max-width: 1440px) {
+ .resources-section .resources-buttons {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ .resources-button {
+ &:nth-of-type(1) {
+ justify-self: start;
+ }
+ &:nth-of-type(2) {
+ justify-self: center;
+ }
+ &:nth-of-type(3) {
+ justify-self: end;
+ }
+ }
+}
+
+@media screen and (max-width: 680px) {
+ .resources-button {
+ width: 320px;
+ text-wrap: balance;
+ &:nth-of-type(even) {
+ justify-self: center;
+ }
+ }
+
+ .resources-button-text {
+ .resources-button-title {
+ margin-top: 10px;
+ margin-bottom: 8px !important;
+ font-size: 18px !important;
+ }
+ .resources-button-subtext {
+ margin-bottom: 10px;
+ font-size: 14px !important;
+ }
+ }
+
+ .resources-section .resources-buttons {
+ place-items: center;
+ }
+}
diff --git a/src/routes/LandingPage/index.js b/src/routes/LandingPage/index.js
new file mode 100644
index 00000000..6bfc46c1
--- /dev/null
+++ b/src/routes/LandingPage/index.js
@@ -0,0 +1,3 @@
+import LandingPage from './LandingPage';
+
+export default LandingPage;
diff --git a/src/routes/LandingPage/index.less b/src/routes/LandingPage/index.less
index 9037048e..e69de29b 100644
--- a/src/routes/LandingPage/index.less
+++ b/src/routes/LandingPage/index.less
@@ -1,12 +0,0 @@
-// Base - Breakpoints
-// Feel free to adapt these in your own stylesheet
-@ultrawide-width: 2000px;
-@desktop-width: 1200px;
-@tablet-width: 768px;
-@mobile-width: 480px;
-
-@media (min-width: @desktop-width) {
- section {
- max-height: 30%;
- }
-}
\ No newline at end of file
diff --git a/src/routes/NotFoundPage/NotFoundPage.jsx b/src/routes/NotFoundPage/NotFoundPage.jsx
new file mode 100644
index 00000000..d27b712b
--- /dev/null
+++ b/src/routes/NotFoundPage/NotFoundPage.jsx
@@ -0,0 +1,28 @@
+import { Link } from 'react-router-dom';
+import notFoundBanner from 'assets/quantsoc-graphics/not-found.svg';
+import './index.less';
+
+const NotFoundPage = () => {
+ return (
+
+
This page is not yet implemented.
+
+ {/* prettier-ignore */}
+
+ Source:
+ {' '}
+ popsy.co
+
+
+ Go back to the home page.
+
+
+ );
+};
+
+export default NotFoundPage;
diff --git a/src/routes/NotFoundPage/index.js b/src/routes/NotFoundPage/index.js
new file mode 100644
index 00000000..a4684e21
--- /dev/null
+++ b/src/routes/NotFoundPage/index.js
@@ -0,0 +1,3 @@
+import NotFoundPage from './NotFoundPage';
+
+export default NotFoundPage;
diff --git a/src/routes/NotFoundPage/index.less b/src/routes/NotFoundPage/index.less
new file mode 100644
index 00000000..3db1b2dd
--- /dev/null
+++ b/src/routes/NotFoundPage/index.less
@@ -0,0 +1,13 @@
+.not-found-page {
+ width: 100%;
+ min-height: 77.5vh;
+ min-height: 77.5dvh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.not-found-image {
+ width: 35%;
+}
diff --git a/src/routes/ResourcesPage/HeroSection/HeroSection.jsx b/src/routes/ResourcesPage/HeroSection/HeroSection.jsx
new file mode 100644
index 00000000..8c01ab11
--- /dev/null
+++ b/src/routes/ResourcesPage/HeroSection/HeroSection.jsx
@@ -0,0 +1,30 @@
+import resourcesGraphic from 'assets/quantsoc-graphics/resources-fireworks.svg';
+
+const HeroSection = () => {
+ return (
+
+
+
+
+
+ Discover fun and educational Resources, Workshops and Opportunities!
+
+
+ Explore a fusion of fun and education through curated resources,
+ engaging workshops, and exciting opportunities. Immerse yourself in
+ the world of quantitative trading, gaining insights, strategies, and
+ hands-on experience. Elevate your skills and embrace the journey of
+ discovery with us!
+
+
+ );
+};
+export default HeroSection;
diff --git a/src/routes/ResourcesPage/OpportunitiesSection/OpportunitiesSection.jsx b/src/routes/ResourcesPage/OpportunitiesSection/OpportunitiesSection.jsx
new file mode 100644
index 00000000..5144fe06
--- /dev/null
+++ b/src/routes/ResourcesPage/OpportunitiesSection/OpportunitiesSection.jsx
@@ -0,0 +1,19 @@
+import EventsSearch from 'components/EventsSearch';
+
+const OpportunitiesSection = ({ anchorTag }) => {
+ return (
+
+ Upcoming Opportunities
+ {
+ // prettier-ignore
+ return new Date(event.endDate) >= new Date()
+ && event.tagType === 'opportunity'
+ ? event
+ : null;
+ }}
+ />
+
+ );
+};
+export default OpportunitiesSection;
diff --git a/src/routes/ResourcesPage/ResourcesPage.jsx b/src/routes/ResourcesPage/ResourcesPage.jsx
index 5f46184d..7e6106ee 100644
--- a/src/routes/ResourcesPage/ResourcesPage.jsx
+++ b/src/routes/ResourcesPage/ResourcesPage.jsx
@@ -1,9 +1,33 @@
-import React from 'react';
+import mockTradingScreenshot from 'assets/quantsoc-graphics/mock-trading-screenshot.svg';
+import ResourceOutline from 'components/ResourceOutline';
+import HeroSection from './HeroSection/HeroSection';
+import WorkshopSection from './WorkshopSection/WorkshopSection';
+import OpportunitiesSection from './OpportunitiesSection/OpportunitiesSection';
const ResourcesPage = () => {
return (
-
+
+
+ {/* separate div to ensure universal focusability of anchor */}
+
+
+ Dive into the fast-paced world of trading, hone your investment
+ strategies, and compete with fellow traders in a mock environment.
+ Create your own markets and play amongst your friends.
+
+
+ Learn, compete and have fun in QuantSoc's Mock Trading Game!
+
+
+
+
);
};
-
export default ResourcesPage;
diff --git a/src/routes/ResourcesPage/WorkshopSection/WorkshopSection.jsx b/src/routes/ResourcesPage/WorkshopSection/WorkshopSection.jsx
new file mode 100644
index 00000000..45d12fd2
--- /dev/null
+++ b/src/routes/ResourcesPage/WorkshopSection/WorkshopSection.jsx
@@ -0,0 +1,16 @@
+import EventsCarousel from 'components/EventsCarousel';
+
+const WorkshopSection = ({ anchorTag }) => {
+ return (
+
+ Workshops
+ Explore our workshops designed to refine your skills!
+ {
+ return event.tagType === 'workshop' ? event : null;
+ }}
+ />
+
+ );
+};
+export default WorkshopSection;
diff --git a/src/routes/ResourcesPage/index.js b/src/routes/ResourcesPage/index.js
new file mode 100644
index 00000000..bc509012
--- /dev/null
+++ b/src/routes/ResourcesPage/index.js
@@ -0,0 +1,3 @@
+import ResourcesPage from './ResourcesPage';
+
+export default ResourcesPage;
diff --git a/src/styles/App.less b/src/styles/App.less
index b2ee93be..0ace1721 100644
--- a/src/styles/App.less
+++ b/src/styles/App.less
@@ -1,14 +1,13 @@
-@import "styles/global.less";
+@import 'styles/global.less';
.App {
- text-align: center;
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
justify-content: flex-start;
- >.app-page {
+ > .app-page {
flex-grow: 1;
}
}
diff --git a/src/styles/constants.less b/src/styles/constants.less
index ad64df4b..e2d319f3 100644
--- a/src/styles/constants.less
+++ b/src/styles/constants.less
@@ -1,4 +1,18 @@
@darkest-purple: #401570;
-@dark-purple: #691BC0;
-@mid-purple: #8A42EF;
-@lightest-purple: #EDE4FD;
\ No newline at end of file
+@dark-purple: #691bc0;
+@mid-purple: #8a42ef;
+@lightest-purple: #ede4fd;
+// UI refresh color palette
+@quantsoc-light: #fff;
+@quantsoc-primary: #d6beff;
+@quantsoc-secondary: #ededed;
+@quantsoc-accent: #9740f3;
+@quantsoc-accent-light: #9740f3b3;
+@text-secondary: #6a6a6a;
+@quantsoc-dark: #414141;
+@quantsoc-darker: #1d1d1d;
+@quantsoc-red: #ff6565;
+
+// media query dimensions
+@mobile: 475px;
+@tablet: 1170px;
diff --git a/src/styles/index.less b/src/styles/index.less
index 3e3b6a19..9646e075 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1,13 +1,158 @@
-body {
+@import './constants.less';
+
+* {
+ box-sizing: border-box;
+ scroll-padding-top: 3rem;
+ scrollbar-color: transparent transparent; /* thumb and track color */
+ scrollbar-width: 0px;
+}
+
+*::-webkit-scrollbar {
+ width: 0;
+}
+
+*::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+ background: transparent;
+ border: none;
+}
+
+* {
+ -ms-overflow-style: none;
+}
+
+ol,
+li {
+ list-style: none;
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ padding: 0;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+ 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ height: 100vh;
+ margin: 0 15%;
+ gap: 4em;
+ width: auto !important;
+ font-family: 'Inter', sans-serif;
+ scroll-behavior: smooth;
+ // border: 1px solid red;
+}
+
+#root {
+ width: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a {
+ margin: 0;
+ font-family: 'Poppins';
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 450;
+}
+
+p,
+a {
+ font-weight: 300;
+}
+
+h1 {
+ font-size: 32px;
+}
+
+section {
+ padding: 0 1.5rem;
+ margin: 2rem 0 3rem;
+}
+
+.text-main {
+ font-family: 'Poppins';
+ font-size: 20px;
+ font-weight: 300;
+}
+
+.page {
+ flex-grow: 1;
+}
+
+.link {
+ color: inherit;
+}
+.link:hover {
+ opacity: 0.75;
+ transition: opacity 0.2s ease-in-out;
+}
+
+.bg-dark {
+ background-color: #2b2b2b;
+ color: #fff;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 1700px) {
+ body {
+ margin: 0 10%;
+ }
+}
+@media screen and (max-width: 1500px) {
+ body {
+ margin: 0 7%;
+ }
+}
+@media screen and (max-width: 1200px) {
+ body {
+ margin: 0 5%;
+ }
+}
+@media screen and (max-width: 900px) {
+ body {
+ margin: 0 3%;
+ }
+}
+
+@media screen and (max-width: @mobile) {
+ h1 {
+ font-size: 28px;
+ }
+ h2 {
+ font-size: 24px;
+ }
+ p {
+ font-size: 16px;
+ }
+ section {
+ padding: 0 0.75rem;
+ }
+}