Finish homepage

This commit is contained in:
Aditya Vasantharao 2021-03-10 18:49:36 -05:00
parent e11ca49272
commit f56c0fa08e
17 changed files with 176 additions and 10 deletions

29
package-lock.json generated
View File

@ -1721,6 +1721,35 @@
}
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.34",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
"integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.34",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
"integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.34"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.15.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
"integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.34"
}
},
"@fortawesome/react-fontawesome": {
"version": "0.1.14",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
"integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
"requires": {
"prop-types": "^15.7.2"
}
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",

View File

@ -3,6 +3,9 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@material-ui/core": "^4.11.3",
"@sanity/client": "^2.1.0",
"@testing-library/jest-dom": "^5.11.4",

View File

@ -5,7 +5,7 @@ import hero from "./assets/img/olympian_hero.png";
export default function Blog(props) {
return (
<body>
<section className="hero">
<section className="hero-temp">
<div className="landing-header">
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>

View File

@ -114,7 +114,7 @@ class ContactForm extends Component {
return (
<>
<body>
<body className="contact-main">
<GlobalStyle />
<StyledFormWrapper id="backUp">
<StyledForm onSubmit={this.handleSubmit}>

View File

@ -5,7 +5,7 @@ import hero from "./assets/img/olympian_hero.png";
export default function Events(props) {
return (
<body>
<section className="hero">
<section className="hero-temp">
<div className="landing-header">
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>

View File

@ -1,7 +1,13 @@
import React from "react";
import "./assets/Home.scss";
import hero from "./assets/img/olympian_hero.png";
import team_picture from "./assets/img/team_picture.png";
import olympian_waving from "./assets/img/olympian_waving.png";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons'
import {Spring} from 'react-spring/renderprops'
const element = <FontAwesomeIcon icon={faArrowCircleRight} />
export default function Home(props) {
return (
@ -39,6 +45,50 @@ export default function Home(props) {
</p>
</div>
</section>
<section className="picture-redirect-wrapper">
<div className="about-us-content">
<a href="/about">
<img
className="team-picture"
src={team_picture}
alt=""
/>
</a>
<div className="about-us-link-wrapper">
<a href="/about" className="about-us-link"><strong>Meet the Team</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a>
</div>
</div>
<div className="intro-space"></div>
<div className="meet-olympian-content">
<a href="/about">
<img
className="olympian-waving"
src={olympian_waving}
alt=""
/>
</a>
<div className="about-us-link-wrapper">
<a href="/meet-olympian" className="about-us-link"><strong>Meet Olympian</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a>
</div>
</div>
</section>
<div className="buttonSet" id="goHere">
<Spring
from= {{ opacity: 0 }}
to={{opacity: 1}}
config = {{delay: 1000}}
>
{ props=> (
<div style={props}>
<a href="https://www.linkedin.com/in/potentia-robotics-790582204/" target="_blank" rel="noopener noreferrer" className="fa fa-linkedin"></a>
<a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" rel="noopener noreferrer" className="fa fa-youtube"></a>
<a href="https://github.com/PotentiaRobotics" target="_blank" rel="noopener noreferrer" className="fa fa-github"></a>
<a href="#" target="_blank" rel="noopener noreferrer" className="fa fa-instagram"></a>
<a href="https://www.facebook.com/potentiarobotics/" target="_blank" rel="noopener noreferrer" className="fa fa-facebook"></a>
</div>
)}
</Spring>
</div>
</body>
);
}

View File

@ -70,12 +70,12 @@ export default function Navbar(props) {
Contact Us
</NavLink>
</li>
<li>
{/* <li>
{" "}
<NavLink to="/donate" activeClassName="active-link">
Donate
</NavLink>
</li>
</li> */}
<li>
{" "}
<NavLink to="/events" activeClassName="active-link">

View File

@ -5,7 +5,7 @@ import hero from "./assets/img/olympian_hero.png";
export default function Events(props) {
return (
<body>
<section className="hero">
<section className="hero-temp">
<div className="landing-header">
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1>

View File

@ -1,6 +1,7 @@
import React, { Component } from "react";
import {createGlobalStyle} from 'styled-components';
import {Container, Row, Col} from "react-bootstrap"
import {Spring} from 'react-spring/renderprops'
import './assets/Sponsors.scss'
@ -44,6 +45,26 @@ class Sponsors extends Component {
</Col>
</Container>
</div>
<div className="buttonSet" id="goHere">
<Spring
from= {{ opacity: 0 }}
to={{opacity: 1}}
config = {{delay: 1000}}
>
{ props=> (
<div style={props}>
<a href="https://www.linkedin.com/in/potentia-robotics-790582204/" target="_blank" rel="noopener noreferrer" className="fa fa-linkedin"></a>
<a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" rel="noopener noreferrer" className="fa fa-youtube"></a>
<a href="https://github.com/PotentiaRobotics" target="_blank" rel="noopener noreferrer" className="fa fa-github"></a>
<a href="#" target="_blank" rel="noopener noreferrer" className="fa fa-instagram"></a>
<a href="https://www.facebook.com/potentiarobotics/" target="_blank" rel="noopener noreferrer" className="fa fa-facebook"></a>
</div>
)}
</Spring>
</div>
<div className="bottom">
</div>
</>
);
}

View File

@ -41,8 +41,9 @@ $desktop-small: 1250px;
box-sizing: border-box;
}
.hero {
.hero-temp {
pointer-events: none;
overflow: hidden;
// height: 86vh;
}

View File

@ -215,3 +215,60 @@ $desktop-small: 1250px;
color: #009dff;
}
.picture-redirect-wrapper {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
padding-bottom: 20px;
font-family: Inter, sans-serif;
// border-style: solid;
// background: rgb(235, 235, 235);
}
.about-us-content {
margin: 0 auto;
width: 47%;
margin-left: 2vw;
// padding-left: 2vw;
// padding-right: 2vw;
// padding-top: 1vw;
padding-bottom: 1vw;
background: rgb(233, 253, 235);
}
.about-us-link-wrapper {
display: flex;
justify-content: center;
margin-top: 1vw;
}
.about-us-link {
text-decoration: none;
color: #009dff;
font-family: Poppins, sans-serif;
font-size: 1.4vw;
}
.about-us-link:hover {
text-decoration: none;
color: #048fe6;
}
.meet-olympian-content {
margin: 0 auto;
width: 47%;
margin-right: 2vw;
padding-bottom: 1vw;
background: rgb(255, 237, 248);
}
.team-picture {
max-width: 100%;
}
.olympian-waving {
max-width: 100%;
}

View File

@ -41,8 +41,9 @@ $desktop-small: 1250px;
box-sizing: border-box;
}
.hero {
.hero-temp {
pointer-events: none;
overflow: hidden;
// height: 86vh;
}

View File

@ -59,11 +59,11 @@ body {
border-radius:10px;
width: 20%;
left: 40%;
margin-bottom: 5vw;
margin-bottom: 1vw;
text-align: center;
padding: 0 2%;
position:relative;
top:2em;
// top:2em;
@media only screen and (max-width: $large) {
width: 35%;
left: 35%;
@ -122,4 +122,8 @@ body {
.bottom {
height: 0.5vw;
}
.contact-main {
padding-bottom: 3em;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 263 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 288 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB