diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0b2e68ee..9d5323d6 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13884,6 +13884,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.5.tgz", "integrity": "sha512-O9JRum1Zq/qCPFH5qVEvDDrVun8Jv9vbHtZXCR1EuRj9sKg1xJTlHxBzU6AkCzpvxRLuiY4OKImy3cDLQ+UTdg==" }, + "react-icons": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.10.0.tgz", + "integrity": "sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==", + "requires": { + "camelcase": "^5.0.0" + } + }, "react-is": { "version": "16.8.6", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", diff --git a/frontend/package.json b/frontend/package.json index f3c30953..ef44c794 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "react": "^16.12.0", "react-bootstrap": "^1.0.0-beta.8", "react-dom": "^16.12.0", + "react-icons": "^3.10.0", "react-moment": "^0.9.2", "react-responsive-carousel": "^3.1.51", "react-router-dom": "^5.0.0", diff --git a/frontend/src/components/App/index.js b/frontend/src/components/App/index.js index 92b7a6bc..ac2bd05d 100644 --- a/frontend/src/components/App/index.js +++ b/frontend/src/components/App/index.js @@ -1,7 +1,7 @@ import React from 'react' ; import {BrowserRouter as Router, Route} from 'react-router-dom'; import Navigation from '../Navigation'; -import HomePage from "../Home Page"; +import LandingPage from "../Landing Page"; import SponsorsPage from '../Sponsors Page'; import SignUpPage from "../Signup Page"; import LoginPage from "../Login Page"; @@ -11,6 +11,11 @@ import DashboardEditProfilePage from '../Dashboard/Common/Edit Profile Page'; import * as ROUTES from "../../config/routes" import { withAuthentication } from "../Session" import DashboardGroupPage from '../Dashboard/Common/Group Page'; +import OurTeam from "../OurTeam"; +import OurWork from "../OurWork"; +import Contact from "../Contact"; +import Bootcamp from "../Bootcamp" +import Projects from '../Projects'; /** * @author Raj Shrimali and Vidhur Kumar @@ -20,7 +25,7 @@ class App extends React.Component { return ( - + @@ -28,6 +33,12 @@ class App extends React.Component { + + + + + + ) } diff --git a/frontend/src/components/Bootcamp/assets/portrait.png b/frontend/src/components/Bootcamp/assets/portrait.png new file mode 100644 index 00000000..d8c99237 Binary files /dev/null and b/frontend/src/components/Bootcamp/assets/portrait.png differ diff --git a/frontend/src/components/Bootcamp/index.js b/frontend/src/components/Bootcamp/index.js new file mode 100644 index 00000000..15941688 --- /dev/null +++ b/frontend/src/components/Bootcamp/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { Button, Container } from 'react-bootstrap'; +import Events from './sections/Introduction'; +import Footer from '../Footer'; + +import Timeline from './sections/Timeline'; +import Introduction from './sections/Introduction'; + +let divPadding = { + padding: "4em 0 8em 0", +} + +let rightAlign = { + float: "right", +} + + +export default class Bootcamp extends React.Component { + render() { + return ( +
+ +
+ ); + } +} diff --git a/frontend/src/components/Bootcamp/sections/Introduction.js b/frontend/src/components/Bootcamp/sections/Introduction.js new file mode 100644 index 00000000..9824df8c --- /dev/null +++ b/frontend/src/components/Bootcamp/sections/Introduction.js @@ -0,0 +1,44 @@ +import React from "react"; +import { Container } from 'react-bootstrap'; +import Card from 'react-bootstrap/Card'; +import { FaFileExcel } from "react-icons/fa"; +//import CardDeck from 'react-bootstrap/CardDeck'; +//import portrait from '../assets/portrait.png'; + +var divPadding = { + padding: "4em 0 4em 0", +} + +var divPaddingInner = { + padding: "0 0 2em 0", +} + +var noBorder = { + border: "none", +} + + +var lightBlue = { + backgroundColor: "#F1F9FF", +} + +var container = { + display: flex, +} +export default class Introduction extends React.Component { + render() { + return( +
+ +

Welcome to Bootcamp

+

DSGT bootcamp is an immersive 11-week experience where you’ll + learn a variety of data science skills and work in teams to answer + significant questions by analyzing data. Our mentors will host + workshops and guide you through your projects. We work in iterative + milestones and provide feedback on your work. +

+
+
+ ); + } +} diff --git a/frontend/src/components/Bootcamp/sections/Timeline.js b/frontend/src/components/Bootcamp/sections/Timeline.js new file mode 100644 index 00000000..f55664d7 --- /dev/null +++ b/frontend/src/components/Bootcamp/sections/Timeline.js @@ -0,0 +1,21 @@ +import React from 'react'; + +import { Image, Row } from 'react-bootstrap'; + +import timeline from './timeline.png'; + +let blue = { + color: "#0063B9", +} + + +export default class Home extends React.Component { + render() { + return ( +
+

Our Work

+ +
+ ); + } + } diff --git a/frontend/src/components/Bootcamp/sections/timeline.png b/frontend/src/components/Bootcamp/sections/timeline.png new file mode 100644 index 00000000..1470fb09 Binary files /dev/null and b/frontend/src/components/Bootcamp/sections/timeline.png differ diff --git a/frontend/src/components/Contact/index.js b/frontend/src/components/Contact/index.js new file mode 100644 index 00000000..f2c72ae9 --- /dev/null +++ b/frontend/src/components/Contact/index.js @@ -0,0 +1,64 @@ +import React from "react"; +import { Button, Col, Container, Row } from 'react-bootstrap'; +import Form from 'react-bootstrap/Form'; +import Footer from '../Footer'; + +let divPadding = { + padding: "4em 0 4em 0", +} + +let divPaddingInner = { + padding: "2em 0 2em 0", +} + +let blue = { + color: "#0063B9", +} + +class ContactForm extends React.Component { + render() { + return( +
+ + Name + + + + Email address + + + + Message + + + +
+ + ); + } +} + +export default class Contact extends React.Component { + render() { + return( +
+ +

Contact

+ + + Cras lacinia pulvinar ex. Integer mattis vitae tortor et bibendum. Praesent eu eros eget dolor interdum sollicitudin. Curabitur ac dolor non mi volutpat porta. Nullam dapibus eleifend metus, non fringilla quam interdum vel. Quisque tincidunt ut orci at faucibus. Nulla facilisi. Proin efficitur sapien sed massa feugiat pharetra. Sed non nisl sed lacus lobortis pellentesque non sed quam. + + Nullam volutpat tortor nec efficitur auctor. Sed imperdiet erat et turpis lacinia, et pulvinar nunc imperdiet. Maecenas sit amet tempus ipsum, ac volutpat leo. Nulla finibus quis lectus at fermentum. In ultricies ultricies tortor, vitae consectetur diam imperdiet cursus. Morbi tincidunt, enim et accumsan blandit, augue tortor sodales magna, eu elementum erat dolor eu nunc. Phasellus hendrerit finibus iaculis. Cras a ligula sollicitudin, consectetur purus at, aliquet dolor. Cras sapien massa, lobortis non urna molestie, blandit malesuada erat. Sed in felis tellus. Donec sem enim, pretium nec posuere ac, tempor et nibh. Nam at lorem tristique, aliquet enim at, consequat leo. Ut non ultrices lorem. + + + + + +
+
+ ); + } +} diff --git a/frontend/src/components/Firebase/event.ts b/frontend/src/components/Firebase/event.ts index 390a47ab..78099399 100644 --- a/frontend/src/components/Firebase/event.ts +++ b/frontend/src/components/Firebase/event.ts @@ -3,8 +3,11 @@ * Following Singleton model as expected from a tutorial online * Instantiate with a firebase app instance - will use that */ + + +import firebase from "firebase/app"; import Firebase from "./firebase"; -import {firestore, auth, functions} from "firebase/app"; +import firestore from "firebase/app"; /** * @author Vidhur Kumar @@ -138,7 +141,7 @@ class EventApi { async add_to_event_attendee_list(id: string, name: string) { let eventRef = this.db.collection("events").doc(id); return eventRef.update({ - attendee_list: firestore.FieldValue.arrayUnion(name) + attendee_list: firebase.firestore.FieldValue.arrayUnion(name) }); } @@ -190,7 +193,7 @@ class EventApi { let eventRef = this.db.collection("events").doc(id); eventRef.update({ - rsvp_list: firestore.FieldValue.arrayUnion(userName) + rsvp_list: firebase.firestore.FieldValue.arrayUnion(userName) }); } } diff --git a/frontend/src/components/Firebase/file.ts b/frontend/src/components/Firebase/file.ts index e730b165..522ebd67 100644 --- a/frontend/src/components/Firebase/file.ts +++ b/frontend/src/components/Firebase/file.ts @@ -3,7 +3,10 @@ * support special, common uploads such as Venmo and Resume. * This should be the POC for all google cloud storage functionality. */ + +import firebase from "firebase/app"; import Firebase from "./firebase"; +import firestore from "firebase/app"; diff --git a/frontend/src/components/Firebase/groups.ts b/frontend/src/components/Firebase/groups.ts index ce11b0f0..b9d642b5 100644 --- a/frontend/src/components/Firebase/groups.ts +++ b/frontend/src/components/Firebase/groups.ts @@ -3,7 +3,7 @@ * for managing groups, mostly related to creating, deleting, etc. */ import Firebase from "./firebase"; -import {firestore} from "firebase/app"; +import firebase from "firebase/app"; export default class GroupApi { @@ -54,7 +54,7 @@ export default class GroupApi { // add user to group const curr_uid = this._fbapp.user.get_current_uid(); // console.log(name) - this.db.collection('users').doc(curr_uid).update({groups: firestore.FieldValue.arrayUnion(name)}) + this.db.collection('users').doc(curr_uid).update({groups: firebase.firestore.FieldValue.arrayUnion(name)}) } /** @@ -75,7 +75,7 @@ export default class GroupApi { let individualRemovalPromise = this.db.collection('usergroups').doc(name).collection('members').get().then((members: any) => { // for each member in here, update their document to not include this group members.docs.forEach((memberDocRef:any) => { - this.db.collection('users').doc(memberDocRef.id).update({groups: firestore.FieldValue.arrayRemove(name)}); + this.db.collection('users').doc(memberDocRef.id).update({groups: firebase.firestore.FieldValue.arrayRemove(name)}); memberDocRef.ref.delete(); }) }); diff --git a/frontend/src/components/Firebase/user.ts b/frontend/src/components/Firebase/user.ts index d08751eb..3508f4f2 100644 --- a/frontend/src/components/Firebase/user.ts +++ b/frontend/src/components/Firebase/user.ts @@ -5,7 +5,11 @@ */ import Firebase from "./firebase"; import * as entity from "./entity"; -import {firestore, auth, functions} from "firebase/app"; +import firebase from "firebase/app"; +//import {auth, firestore, functions} from "firebase/app"; +import auth from "firebase/app"; +import firestore from "firebase/app"; +import functions from "firebase/app"; import {DUES_SEMESTER, DUES_YEAR} from "../../config/config"; /** @@ -20,7 +24,7 @@ class UserApi { this._fbapp = firebaseApp; this.db = firebaseApp.db; this.auth = firebaseApp.app.auth(); - this.auth.setPersistence(auth.Auth.Persistence.SESSION); + this.auth.setPersistence(firebase.auth.Auth.Persistence.SESSION); this.functions = this._fbapp.app.functions(); } @@ -228,7 +232,7 @@ class UserApi { async update_user_XP(uid: string, XP: number) { let userRef = await this.db.collection('users').doc(uid); return userRef.update({ - XP: firestore.FieldValue.increment(XP) + XP: firebase.firestore.FieldValue.increment(XP) }); } @@ -275,8 +279,8 @@ class UserApi { async add_eventXP_to_user(uid: string, eventId: string, eventXP: number) { let userRef = await this.db.collection('users').doc(uid); userRef.update({ - XP: firestore.FieldValue.increment(eventXP), - xp_history: firestore.FieldValue.arrayUnion({id: eventId, xp: eventXP}), + XP: firebase.firestore.FieldValue.increment(eventXP), + xp_history: firebase.firestore.FieldValue.arrayUnion({id: eventId, xp: eventXP}), }); // let userRef = await this.db.collection('users').doc(uid); @@ -450,7 +454,7 @@ class UserApi { // we don't /need/ to wait for completion. promises.push(this.db.collection('usergroups').doc(element).collection("members").doc(user).set({})); }); - await this.db.collection('users').doc(user).update({groups: firestore.FieldValue.arrayUnion(groups)}); + await this.db.collection('users').doc(user).update({groups: firebase.firestore.FieldValue.arrayUnion(groups)}); //wait for completion await promises; return true; @@ -460,7 +464,7 @@ class UserApi { async addUserToGroup(uid: string, group: string) { // update the user's doc - let p1 = this.db.collection('users').doc(uid).update({groups: firestore.FieldValue.arrayUnion(group)}); + let p1 = this.db.collection('users').doc(uid).update({groups: firebase.firestore.FieldValue.arrayUnion(group)}); let p2 = this.db.collection('usergroups').doc(group).collection("members").doc(uid).set({}); await p1 .then(() => { @@ -509,7 +513,7 @@ class UserApi { // approve & add if (response === 1) { this.db.collection('usergroups').doc(name).collection('members').doc(uid).set({}); - this.db.collection('users').doc(this.get_current_uid()).update({groups: firestore.FieldValue.arrayUnion(name)}) + this.db.collection('users').doc(this.get_current_uid()).update({groups: firebase.firestore.FieldValue.arrayUnion(name)}) } // no matter what, just delete the request this.db.collection('usergroups').doc(name).collection('join_requests').doc(uid).delete(); @@ -530,7 +534,7 @@ class UserApi { if (perm) { // start the update operation - const comp_promise = this.db.collection('users').doc(user).update({groups: firestore.FieldValue.arrayRemove(groups)}); + const comp_promise = this.db.collection('users').doc(user).update({groups: firebase.firestore.FieldValue.arrayRemove(groups)}); // delete from groups groups.forEach(element => { this.db.collection("usergroups").doc(element).collection("members").doc(user).delete(); diff --git a/frontend/src/components/Footer/Navigation.css b/frontend/src/components/Footer/Navigation.css new file mode 100644 index 00000000..92e1a44a --- /dev/null +++ b/frontend/src/components/Footer/Navigation.css @@ -0,0 +1,20 @@ +/**** + Used for both navigation bar at top and footer + ****/ + +.main { + background: #001629; +} + +.navbar, .navbar-default { + color: white !important; +} + + +.nav-link { + color: white ; +} + +.nav-link:hover { + color: #338AFC; +} diff --git a/frontend/src/components/Footer/icon.png b/frontend/src/components/Footer/icon.png new file mode 100644 index 00000000..0b6298cc Binary files /dev/null and b/frontend/src/components/Footer/icon.png differ diff --git a/frontend/src/components/Footer/index.js b/frontend/src/components/Footer/index.js new file mode 100644 index 00000000..b61d531f --- /dev/null +++ b/frontend/src/components/Footer/index.js @@ -0,0 +1,78 @@ +import React from "react"; +import Nav from 'react-bootstrap/Nav'; +import Navbar from 'react-bootstrap/Navbar'; +import { Col, Row } from 'react-bootstrap'; +import { FaFacebookF, FaInstagram } from "react-icons/fa"; +import "./Navigation.css"; +import icon from './icon.png'; + +import * as ROUTES from "../../config/routes"; + +var divPadding = { + paddingTop: "4em", +} + + +export default class Footer extends React.Component { + render() { + return ( +
+ + + + + DSGT icon + + + {/*column 1*/} + +
    + About Us + Contact + Terms & Conditions +
+ + {/*column 2*/} + +
    + Facebook + Instagram +
+ + {/*column 3*/} + +
    + Start a Chapter + Donate + Sponsor Us +
+ + {/*column 4*/} + +
    + + 220 Ferst Dr NW, Atlanta, GA 30318 + +1 941 286 3117 + legal@datascienceinitiative.org + +
+ +
+
+ + + +

+ ©{new Date().getFullYear()} Data Science Initiative, Inc. +

+
+
+
+
+); +} +} diff --git a/frontend/src/components/Landing Page/Future/background.jpg b/frontend/src/components/Landing Page/Future/background.jpg new file mode 100755 index 00000000..46b03ca8 Binary files /dev/null and b/frontend/src/components/Landing Page/Future/background.jpg differ diff --git a/frontend/src/components/Landing Page/Future/index.js b/frontend/src/components/Landing Page/Future/index.js new file mode 100755 index 00000000..fd56b738 --- /dev/null +++ b/frontend/src/components/Landing Page/Future/index.js @@ -0,0 +1,124 @@ +import React from "react"; +import { Container, Row } from 'react-bootstrap'; +import Card from 'react-bootstrap/Card'; +import CardDeck from 'react-bootstrap/CardDeck'; +import background from './background.jpg'; + +let backgroundImg = { + backgroundImage: `url(${background})`, + backgroundSize: 'cover', + color: "white", +} +let divPadding = { + padding: "4em 0 4em 0", + color: "white", + background: 'linear-gradient(to top, rgba(0,22,41,0.95), rgba(0,22,41,0.9), rgba(0,99,185,0.85), rgba(0,99,185,0.8))', + height: "inherit", + +} + +let divPaddingInner = { + padding: "0 0 2em 0", +} + +let blue = { + backgroundColor: "inherit", + border: "none", +} + + +export default class Future extends React.Component { + render() { + return( +
+
+ +

The Future

+
+ + + +

Data Science Today

+ + Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Sed a consequat nibh, + aliquam molestie tortor. Nunc ante lectus, + gravida at est ullamcorper, congue + feugiat nunc. Vestibulum ante ipsum primis + in faucibus orci luctus et ultrices + posuere cubilia Curae; Duis ut libero + posuere justo consequat rutrum. Nam + accumsan sagittis urna eu placerat. + Praesent id dapibus metus. Nunc luctus + pulvinar nisi, id ultrices odio placerat a. + Morbi massa lectus, interdum non sodales + et, interdum a magna. Nulla lobortis dolor + sed posuere ultrices. Orci varius + natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. + Etiam at mauris nunc. Sed pharetra enim id + lectus scelerisque placerat. Sed + sagittis varius enim eu molestie. + +
+
+ + +

Target Goals

+ + Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Sed a consequat nibh, + aliquam molestie tortor. Nunc ante lectus, + gravida at est ullamcorper, congue + feugiat nunc. Vestibulum ante ipsum primis + in faucibus orci luctus et ultrices + posuere cubilia Curae; Duis ut libero + posuere justo consequat rutrum. Nam + accumsan sagittis urna eu placerat. + Praesent id dapibus metus. Nunc luctus + pulvinar nisi, id ultrices odio placerat a. + Morbi massa lectus, interdum non sodales + et, interdum a magna. Nulla lobortis dolor + sed posuere ultrices. Orci varius + natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. + Etiam at mauris nunc. Sed pharetra enim id + lectus scelerisque placerat. Sed + sagittis varius enim eu molestie. + +
+
+ + +

Reach

+ + Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Sed a consequat nibh, + aliquam molestie tortor. Nunc ante lectus, + gravida at est ullamcorper, congue + feugiat nunc. Vestibulum ante ipsum primis + in faucibus orci luctus et ultrices + posuere cubilia Curae; Duis ut libero + posuere justo consequat rutrum. Nam + accumsan sagittis urna eu placerat. + Praesent id dapibus metus. Nunc luctus + pulvinar nisi, id ultrices odio placerat a. + Morbi massa lectus, interdum non sodales + et, interdum a magna. Nulla lobortis dolor + sed posuere ultrices. Orci varius + natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. + Etiam at mauris nunc. Sed pharetra enim id + lectus scelerisque placerat. Sed + sagittis varius enim eu molestie. + +
+
+
+
+
+
+
+ ); + } +} diff --git a/frontend/src/components/Landing Page/GetInvolved/index.js b/frontend/src/components/Landing Page/GetInvolved/index.js new file mode 100755 index 00000000..83119be0 --- /dev/null +++ b/frontend/src/components/Landing Page/GetInvolved/index.js @@ -0,0 +1,65 @@ +import React from 'react'; +import { Button, Container, Row } from 'react-bootstrap'; +import Card from 'react-bootstrap/Card'; +import CardDeck from 'react-bootstrap/CardDeck'; + +let divPadding = { + padding: "4em 0 4em 0", +} + +let divPaddingInner = { + padding: "2em 0 2em 0", +} + +let blue = { + color: "#0063B9", +} + +export default class GetInvolved extends React.Component { + render() { + return( +
+ +

Get Involved

+
+ + + +

Donate

+ + As a nonprofit, we rely on donations to keep us running. Right now, we're an all-volunteer staff but we have operational costs just like any company. Your donation will go towards helping expand our operations, increasing the quality of our materials, and allowing our staff to keep doing their job. Any donation, big or small, is an incredible help. + +
+ +
+
+
+ + +

Become a Chapter

+ + If you want to help bring the resources DSI has to offer to your community, consider starting a chapter! If you do start a chapter, you'll gain access to our bootcamp material, logistics expertise, funding, and sponsors. We'll help you set up a club that creates lasting value for your community – all you have to do is ask! Although new chapters are currently invitation-only, we'll be opening applications for new chapters online by January 2022. In the meantime, you can email us to let us know you're interested. + +
+ +
+
+
+ + +

Sponsor Us

+ + Sponsorships are our main source of funding, and we rely on benevolent organizations to continue our operations. All of our sponsors get recognized on our website, and have our gratitude! If you or your company are interested in sponsoring us, thank you! Click below to find out more information. + +
+ +
+
+
+
+
+
+
+ ); + } +} diff --git a/frontend/src/components/Landing Page/Hero/background.jpg b/frontend/src/components/Landing Page/Hero/background.jpg new file mode 100755 index 00000000..ec6743a0 Binary files /dev/null and b/frontend/src/components/Landing Page/Hero/background.jpg differ diff --git a/frontend/src/components/Landing Page/Hero/index.js b/frontend/src/components/Landing Page/Hero/index.js new file mode 100644 index 00000000..9f69426d --- /dev/null +++ b/frontend/src/components/Landing Page/Hero/index.js @@ -0,0 +1,50 @@ +import React from 'react'; +import {Container, Button} from 'react-bootstrap'; +import background from './background.jpg'; +import * as ROUTES from "../../../config/routes"; +/////////////////////// +// STYLES +/////////////////////// +let backgroundImg = { + backgroundImage: `url(${background})`, + // height: "100%", + height: "80vh", + backgroundSize: 'cover', + color: "white", +} + +let backgroundTint = { + height: "inherit", + // background: 'rgba(0,99,185,0.75)', + background: 'linear-gradient(to bottom, rgba(0,22,41,1), rgba(0,22,41,0.7), rgba(0,99,185,0.7), rgba(0,99,185,0.7))', + +} + +let textStyle = { + padding: "8vw", + paddingTop: "25vh", + alignItems: "center", + textAlign: "center", + opacity: "1", +} + +/////////////////////// +// CLASSES +/////////////////////// + +export default class Landing extends React.Component { + render() { + return ( +
+
+ +

MAKE DATA SCIENCE ACCESSIBLE TO ALL

+

Nunc eu massa auctor sem bibendum fringilla in quis leo. Curabitur tempus nunc sed leo finibus, sit amet venenatis justo luctus. Nunc tincidunt fringilla vulputate. Morbi semper vestibulum odio, ac convallis lectus efficitur nec. Maecenas congue tortor ut dignissim ornare. Integer nec feugiat dui, ut feugiat risus. Maecenas ac erat nec urna eleifend fringilla sed eu sem.

+ +
+
+
+ + ); + } +} \ No newline at end of file diff --git a/frontend/src/components/Home Page/HomePage.css b/frontend/src/components/Landing Page/LandingPage.css similarity index 100% rename from frontend/src/components/Home Page/HomePage.css rename to frontend/src/components/Landing Page/LandingPage.css diff --git a/frontend/src/components/Landing Page/MeetTeam/index.js b/frontend/src/components/Landing Page/MeetTeam/index.js new file mode 100755 index 00000000..dfbf47dc --- /dev/null +++ b/frontend/src/components/Landing Page/MeetTeam/index.js @@ -0,0 +1,63 @@ +import React from 'react'; +import { Button, Col, Container, Row } from 'react-bootstrap'; +import Image from 'react-bootstrap/Image'; +import team from './team.png'; +import * as ROUTES from "../../../config/routes"; + +/////////////////////// +// STYLES +/////////////////////// + +let rowStyle = { + verticalAlign: "center", + color: "white", + backgroundColor: "#0063B9", + overflow: "hidden", +} + +let picContainer = { + maxHeight: "70vh", +} + +let teamStyle = { + width: "100%", + +} + +let textStyle = { + padding: "15vh 6vw 0 2vw", +} + +/////////////////////// +// CLASSES +/////////////////////// + +export default class MeetTeam extends React.Component { + render() { + return ( +
+ + +
+ The team +
+ + + +

Meet the Team

+

The Data Science Initiative started as a small club at the + Georgia Institute of Technology for spreading awareness and + education about data science. It has since morphed into a + massive program that reaches over 200 people every year and + draws over 100 people to each of its main events. DSI provides + students with workshops, project opportunities, and + leadership opportunities to help train the coming generation + of data scientists.

+ +
+ +
+
+ ); + } +} diff --git a/frontend/src/components/Landing Page/MeetTeam/team.png b/frontend/src/components/Landing Page/MeetTeam/team.png new file mode 100755 index 00000000..bb82768f Binary files /dev/null and b/frontend/src/components/Landing Page/MeetTeam/team.png differ diff --git a/frontend/src/components/Landing Page/Opportunity/index.js b/frontend/src/components/Landing Page/Opportunity/index.js new file mode 100755 index 00000000..4840e8b8 --- /dev/null +++ b/frontend/src/components/Landing Page/Opportunity/index.js @@ -0,0 +1,129 @@ +import React from "react"; +import { Container, Row } from 'react-bootstrap'; +import Card from 'react-bootstrap/Card'; +import CardDeck from 'react-bootstrap/CardDeck'; + +/// make a global stylesheet for this div and divpadding +let divPadding = { + padding: "4em 0 4em 0", +} + +let divPaddingInner = { + padding: "0 0 2em 0", +} + +let noBorder = { + border: "none", +} + +let blue = { + color: "#0063B9", +} + +export default class Opportunity extends React.Component { + render() { + return( +
+ +

The Opportunity

+
+ + + +

Data Science Today

+ + Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Sed a consequat nibh, + aliquam molestie tortor. Nunc ante lectus, + gravida at est ullamcorper, congue + feugiat nunc. Vestibulum ante ipsum primis + in faucibus orci luctus et ultrices + posuere cubilia Curae; Duis ut libero + posuere justo consequat rutrum. Nam + accumsan sagittis urna eu placerat. + Praesent id dapibus metus. Nunc luctus + pulvinar nisi, id ultrices odio placerat a. + Morbi massa lectus, interdum non sodales + et, interdum a magna. Nulla lobortis dolor + sed posuere ultrices. Orci varius + natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. + Etiam at mauris nunc. Sed pharetra enim id + lectus scelerisque placerat. Sed + sagittis varius enim eu molestie. + +
{/*Data Science Today*/} +
+ + +

Our Niche

+ + Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Sed a consequat nibh, + aliquam molestie tortor. Nunc ante lectus, + gravida at est ullamcorper, congue + feugiat nunc. Vestibulum ante ipsum primis + in faucibus orci luctus et ultrices + posuere cubilia Curae; Duis ut libero + posuere justo consequat rutrum. Nam + accumsan sagittis urna eu placerat. + Praesent id dapibus metus. Nunc luctus + pulvinar nisi, id ultrices odio placerat a. + Morbi massa lectus, interdum non sodales + et, interdum a magna. Nulla lobortis dolor + sed posuere ultrices. Orci varius + natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. + Etiam at mauris nunc. Sed pharetra enim id + lectus scelerisque placerat. Sed + sagittis varius enim eu molestie. + +
{/*Our Niche*/} {/*Our Niche*/} +
+ + +

Reach

+ + Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Sed a consequat nibh, + aliquam molestie tortor. Nunc ante lectus, + gravida at est ullamcorper, congue + feugiat nunc. Vestibulum ante ipsum primis + in faucibus orci luctus et ultrices + posuere cubilia Curae; Duis ut libero + posuere justo consequat rutrum. Nam + accumsan sagittis urna eu placerat. + Praesent id dapibus metus. Nunc luctus + pulvinar nisi, id ultrices odio placerat a. + Morbi massa lectus, interdum non sodales + et, interdum a magna. Nulla lobortis dolor + sed posuere ultrices. Orci varius + natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. + Etiam at mauris nunc. Sed pharetra enim id + lectus scelerisque placerat. Sed + sagittis varius enim eu molestie. + +
{/*Reach*/} +
+
+
+ + {/*this is the quote card*/} +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere + erat a ante. +

+ +
+
+
+
+ ); + } +} diff --git a/frontend/src/components/Landing Page/WhatWeDo/gears.png b/frontend/src/components/Landing Page/WhatWeDo/gears.png new file mode 100755 index 00000000..b170381a Binary files /dev/null and b/frontend/src/components/Landing Page/WhatWeDo/gears.png differ diff --git a/frontend/src/components/Landing Page/WhatWeDo/hand.png b/frontend/src/components/Landing Page/WhatWeDo/hand.png new file mode 100755 index 00000000..cc3a2fdb Binary files /dev/null and b/frontend/src/components/Landing Page/WhatWeDo/hand.png differ diff --git a/frontend/src/components/Landing Page/WhatWeDo/index.js b/frontend/src/components/Landing Page/WhatWeDo/index.js new file mode 100755 index 00000000..47832a9e --- /dev/null +++ b/frontend/src/components/Landing Page/WhatWeDo/index.js @@ -0,0 +1,98 @@ +import React from 'react'; +import { Col, Container, Row } from 'react-bootstrap'; +import gears from "./gears.png"; +import hand from "./hand.png"; +import project from "./project.png"; +import search from "./search.png"; +import theory from "./theory.png"; + +let picContainer = { + height: "30vh", + padding: "1em", +} + +let chunk = { + padding: "2em 1em 2em 1em", +} + +let divPadding = { + padding: "4em 0 4em 0", +} + +let blue = { + color: "#0063B9", +} + +export default class WhatWeDo extends React.Component { + render() { + return ( +
+
+ + {/* Row: image on left */} + + +
+ gears icon +
+ + +

Providing Foundation

+

We teach our members core data science skills through a bootcamp that takes our members on a start-to-finish journey, touching on essentials such as cleaning data, identifying biases, performing basic statistics, and visualizing results. They also get an intro to more advanced concepts, such as dimensionality reduction and machine learning – all in a digestible, applicable, and interactive format. They come out of our bootcamp with a polished data science project and the confidence to learn more.

+ +
+ {/* Row: image on right */} + + +

Providing Practical Education

+

After our foundational content, we give our members the opportunity to expand their practical and theoretical skills through bootcamps tailored to specific concentrations of learning. Data Science is more than just programming; we're equipping our members to apply their skills in the fields of Healthcare, Finance, Data Engineering, Data Visualization, & more!

+ + +
+ hand icon +
+ +
+ {/* Row: iamge on left */} + + +
+ theory icon +
+ + +

Promoting Inquisitiveness

+

Our members are bright and talented students. Our goal is to help them continue to learn and grow through thoughtful and engaging conversations surrounding data science. +

+ +
+ {/* Row: iamge on right */} + + +

Providing Opportunity

+

We assist chapters in starting and running local data science projects to offer students an opportunity to work in a team and exercise their skills. Our members can showcase their professional data science expertise by working with corporate clients while getting paid. With the help of a corporate partner, we connect students to employers for both part-time and full-time work.

+ + +
+ project icon +
+ +
+ {/* Row: iamge on left */} + + +
+ search icon +
+ + +

Providing a Future

+

Our members learn powerful data visualization and design strategies that will help them become well-rounded Full-Stack Data Scientists. We also organize company events that allow our members to build a network and learn more about the professional opportunities in the field of data science.

+ +
+
+
+
+ ); + } +} diff --git a/frontend/src/components/Landing Page/WhatWeDo/project.png b/frontend/src/components/Landing Page/WhatWeDo/project.png new file mode 100755 index 00000000..b198f4d8 Binary files /dev/null and b/frontend/src/components/Landing Page/WhatWeDo/project.png differ diff --git a/frontend/src/components/Landing Page/WhatWeDo/search.png b/frontend/src/components/Landing Page/WhatWeDo/search.png new file mode 100755 index 00000000..724aeb78 Binary files /dev/null and b/frontend/src/components/Landing Page/WhatWeDo/search.png differ diff --git a/frontend/src/components/Landing Page/WhatWeDo/theory.png b/frontend/src/components/Landing Page/WhatWeDo/theory.png new file mode 100755 index 00000000..d20c3424 Binary files /dev/null and b/frontend/src/components/Landing Page/WhatWeDo/theory.png differ diff --git a/frontend/src/components/Home Page/__tests__/HomePage.test.js b/frontend/src/components/Landing Page/__tests__/HomePage.test.js similarity index 100% rename from frontend/src/components/Home Page/__tests__/HomePage.test.js rename to frontend/src/components/Landing Page/__tests__/HomePage.test.js diff --git a/frontend/src/components/Home Page/index.js b/frontend/src/components/Landing Page/index.js similarity index 78% rename from frontend/src/components/Home Page/index.js rename to frontend/src/components/Landing Page/index.js index 4c5d8b21..a61cb825 100644 --- a/frontend/src/components/Home Page/index.js +++ b/frontend/src/components/Landing Page/index.js @@ -3,13 +3,19 @@ import {Container, Row, Col, Table, Button} from 'react-bootstrap'; import * as CONSTANTS from "../../config/config"; import { Carousel } from 'react-responsive-carousel'; import "react-responsive-carousel/lib/styles/carousel.min.css"; -import './HomePage.css'; +import Hero from './Hero'; +import WhatWeDo from './WhatWeDo'; +import MeetTeam from './MeetTeam'; +import GetInvolved from './GetInvolved'; +import Future from './Future'; +import Opportunity from './Opportunity'; +import Footer from "../Footer"; +import './LandingPage.css'; /** * This is the homepage of the website. * Split up into React Fragments to provide modularity. */ - /** * @author Raj Shrimali and Vidhur Kumar */ @@ -31,65 +37,53 @@ import './HomePage.css'; } } -/** - * - */ -const Hero = () => { +// /** +// * +// */ +// const About = () => { return ( +//
+// +//

The Big Ideas

+//
+// +//

Provide

+// +//

+// Data science has the potential to improve our communities, so we run projects with that sole purpose. Our +// projects are chosen because of their potential impact, both on our campus and the global community at large. +// We don't want our members to be hindered by lack of money, so our featured projects receive funding for +// resources that are crucial to their success.
- return( -

-
-
-
-)} - -/** - * - */ -const About = () => { return ( -
- -

The Big Ideas

-
- -

Provide

- -

- Data science has the potential to improve our communities, so we run projects with that sole purpose. Our - projects are chosen because of their potential impact, both on our campus and the global community at large. - We don't want our members to be hindered by lack of money, so our featured projects receive funding for - resources that are crucial to their success.
- - We recognize a good idea can come from anywhere, so we encourage our members to pursue their own projects. - Member-initiated projects receive the support of the club, and if they satisfy our community-oriented criteria, - may receive funding. -

- -
- -

Inform

- -

- Data science is a hard field to get into, and can be intimidating for those who are unfamiliar with it. - To make the learning process easier for our members, we host weekly workshops that let them interactively get - familiar with data science. We also host monthly public workshops that help those who are interested learn more - about the field and get their feet wet with basic data science skills. -

- -
- -

Grow

- -

- We want our members to be well-prepared for their future. After all, we are nothing without them! - Our special events include corporate information sessions, game nights, and networking events that - allow our members to devleop themselves professionally. We are also planning on hosting a data-science-oriented - hackathon in Spring 2019. -

- -
-
-)}; +// We recognize a good idea can come from anywhere, so we encourage our members to pursue their own projects. +// Member-initiated projects receive the support of the club, and if they satisfy our community-oriented criteria, +// may receive funding. +//

+// +//
+// +//

Inform

+// +//

+// Data science is a hard field to get into, and can be intimidating for those who are unfamiliar with it. +// To make the learning process easier for our members, we host weekly workshops that let them interactively get +// familiar with data science. We also host monthly public workshops that help those who are interested learn more +// about the field and get their feet wet with basic data science skills. +//

+// +//
+// +//

Grow

+// +//

+// We want our members to be well-prepared for their future. After all, we are nothing without them! +// Our special events include corporate information sessions, game nights, and networking events that +// allow our members to devleop themselves professionally. We are also planning on hosting a data-science-oriented +// hackathon in Spring 2019. +//

+// +//
+//
+// )}; /** * @@ -292,18 +286,17 @@ const Meetings = () => { /** * @author Raj Shrimali and Vidhur Kumar */ -export default class HomePage extends React.Component { +export default class LandingPage extends React.Component { render() { return ( - - - - - {/* */} - - + + + + + +