rushilwiz/website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/website.git synced 2025-04-17 19:00:18 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into use-reactstrap

Browse Source
This commit is contained in:
Ram Reddy 2021-06-27 20:43:46 -04:00 committed by GitHub
commit edf38888b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 1108 additions and 995 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.deepsource.toml Normal file
View File

@ -0,0 +1,19 @@
version = 1
test_patterns = [
"public/**",
"src/**"
]
exclude_patterns = ["src/components/assets/img/**"]
[[analyzers]]
name = "javascript"
enabled = true
[analyzers.meta]
plugins = ["react"]
[[transformers]]
name = "standardjs"
enabled = true

71
.github/workflows/codeql-analysis.yml vendored Normal file
View File

@ -0,0 +1,71 @@
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
#
# ******** NOTE ********
# We have attempted to detect the languages in your repository. Please check
# the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages.
#
name: "CodeQL"
on:
push:
branches: [ master ]
pull_request:
# The branches below must be a subset of the branches above
branches: [ master ]
schedule:
- cron: '24 20 * * 4'
jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
permissions:
actions: read
contents: read
security-events: write
strategy:
fail-fast: false
matrix:
language: [ 'javascript' ]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
# Learn more:
# https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
steps:
- name: Checkout repository
uses: actions/checkout@v2
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v1
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# queries: ./path/to/local/query, your-org/your-repo/queries@main
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v1
# ℹ️ Command-line programs to run using the OS shell.
# 📚 https://git.io/JvXDl
# ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
# and modify them (or add more) to build your code if your project
# uses a compiled language
#- run: |
# make bootstrap
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v1

25
.github/workflows/node.js.yml vendored Normal file
View File

@ -0,0 +1,25 @@
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: Node.js CI
on:
push:
branches: [ master ]
pull_request:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x, 14.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm run build --if-present
- run: npm test

48
src/App.js
View File

@ -1,34 +1,34 @@
import React, {Component} from "react"; import React, { Component } from 'react'
import { BrowserRouter, Route, Switch } from "react-router-dom"; import { BrowserRouter, Route, Switch } from 'react-router-dom'
import About from "./components/About"; import About from './components/About'
import ContactForm from "./components/Contact"; import ContactForm from './components/Contact'
import Home from "./components/Home"; import Home from './components/Home'
import PostDetail from "./components/PostDetail"; import PostDetail from './components/PostDetail'
import Olympian from "./components/Olympian"; import Olympian from './components/Olympian'
import Blog from "./components/Blog"; import Blog from './components/Blog'
import Donate from "./components/Donate"; import Donate from './components/Donate'
import Navbar from "./components/Navbar"; import Navbar from './components/Navbar'
import Sponsors from "./components/Sponsors"; import Sponsors from './components/Sponsors'
import Events from "./components/Events"; import Events from './components/Events'
function App() { function App () {
return ( return (
<BrowserRouter> <BrowserRouter>
<Navbar /> <Navbar />
<Switch> <Switch>
<Route component={About} path="/about" /> <Route component={About} path='/about' />
<Route component={ContactForm} path="/contact" /> <Route component={ContactForm} path='/contact' />
<Route component={PostDetail} path="/blog/:slug" /> <Route component={PostDetail} path='/blog/:slug' />
<Route component={Blog} path="/blog" /> <Route component={Blog} path='/blog' />
<Route component={Donate} path="/donate" /> <Route component={Donate} path='/donate' />
<Route component={Sponsors} path="/sponsors" /> <Route component={Sponsors} path='/sponsors' />
<Route component={Events} path="/events" /> <Route component={Events} path='/events' />
<Route component={Olympian} path="/meet-olympian" /> <Route component={Olympian} path='/meet-olympian' />
<Route component={Home} path="/" /> <Route component={Home} path='/' />
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>
); )
} }
export default App; export default App

8
src/client.js
View File

@ -1,6 +1,6 @@
import sanityClient from "@sanity/client"; import sanityClient from '@sanity/client'
export default sanityClient({ export default sanityClient({
projectId: "1wob9lyq", projectId: '1wob9lyq',
dataset: "production", dataset: 'production'
}); })

1430
src/components/About.js
View File

File diff suppressed because it is too large Load Diff

40
src/components/Blog.js
View File

@ -1,26 +1,26 @@
import React from "react"; import React from 'react'
import "./assets/Blog.scss"; import './assets/Blog.scss'
import hero from "./assets/img/olympian_hero.png"; import hero from './assets/img/olympian_hero.png'
export default function Blog(props) { export default function Blog (props) {
return ( return (
<body> <body>
<section className="hero-temp"> <section className='hero-temp'>
<div className="landing-header"> <div className='landing-header'>
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1> <h1 id='potentia'><span className='highlight-gray'>&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1> <h1 id='robotics'><span className='highlight-gray'>&nbsp;Robotics&nbsp;</span></h1>
</div> </div>
<div className="landing-subheader"> <div className='landing-subheader'>
<p> <p>
<span className="highlight-gray">&nbsp;This page is under construction.&nbsp;<br></br>&nbsp;Please check back later!&nbsp;</span> <span className='highlight-gray'>&nbsp;This page is under construction.&nbsp;<br />&nbsp;Please check back later!&nbsp;</span>
</p> </p>
</div> </div>
<img <img
className="landing-robot" className='landing-robot'
src={hero} src={hero}
alt="" alt=''
/> />
</section> </section>
</body> </body>
); )
} }

54
src/components/Events.js
View File

@ -1,40 +1,36 @@
import "./assets/Events.scss"; import './assets/Events.scss'
import React, {Component} from "react"; import React, { Component } from 'react'
import {createGlobalStyle} from 'styled-components'; import { createGlobalStyle } from 'styled-components'
import bot2 from "./assets/img/bot2.png"; import bot2 from './assets/img/bot2.png'
import './assets/Donate.scss' import './assets/Donate.scss'
//var Diamond = require("./assets/img/0002.jpg") // var Diamond = require("./assets/img/0002.jpg")
import icon from "./assets/img/0002.jpg"; import icon from './assets/img/0002.jpg'
import icon2 from "./assets/img/0001.jpg"; import icon2 from './assets/img/0001.jpg'
import icon3 from "./assets/img/0003.jpg"; import icon3 from './assets/img/0003.jpg'
import pdf from "./assets/Python_BootCamp.pdf"; import pdf from './assets/Python_BootCamp.pdf'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons' import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons'
class Events extends Component { class Events extends Component {
render() { render () {
return( return (
<> <>
<br></br> <br />
<div className="flyer-container"> <div className='flyer-container'>
<img src = {icon2} width="30%" height="100%" alt="image of team member"></img> <img src={icon2} width='30%' height='100%' alt='image of team member' />
</div> </div>
<div className="pdf-link-container"> <div className='pdf-link-container'>
<div className="pdf-link"> <div className='pdf-link'>
<a href={pdf} download className="pdf-download"><strong>Learn More</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a> <a href={pdf} download className='pdf-download'><strong>Learn More</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight} /></a>
</div>
</div> </div>
<div className="bottom"> </div>
</div> <div className='bottom' />
</> </>
); )
} }
} }
export default Events
export default Events;

141
src/components/Home.js
View File

@ -1,92 +1,93 @@
import React from "react"; import React from 'react'
import "./assets/Home.scss"; import './assets/Home.scss'
import hero from "./assets/img/olympian_hero.png"; import hero from './assets/img/olympian_hero.png'
import team_picture from "./assets/img/team_picture.png"; import team_picture from './assets/img/team_picture.png'
import olympian_waving from "./assets/img/olympian_waving.png"; import olympian_waving from './assets/img/olympian_waving.png'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons' import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons'
import {Spring} from 'react-spring/renderprops' import { Spring } from 'react-spring/renderprops'
export default function Home(props) { export default function Home (props) {
return ( return (
<body className="main-content"> <body className='main-content'>
<section className="hero"> <section className='hero'>
<div className="landing-header"> <div className='landing-header'>
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1> <h1 id='potentia'><span className='highlight-gray'>&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1> <h1 id='robotics'><span className='highlight-gray'>&nbsp;Robotics&nbsp;</span></h1>
</div> </div>
<div className="landing-subheader"> <div className='landing-subheader'>
<p> <p>
<span className="highlight-gray">&nbsp;The first high school team to design and&nbsp;<br></br>&nbsp;build a full-size bipedal humanoid robot.&nbsp;</span> <span className='highlight-gray'>&nbsp;The first high school team to design and&nbsp;<br />&nbsp;build a full-size bipedal humanoid robot.&nbsp;</span>
</p> </p>
</div> </div>
<img <img
className="landing-robot" className='landing-robot'
src={hero} src={hero}
alt="" alt=''
/> />
</section> </section>
<section className="intro-wrapper"> <section className='intro-wrapper'>
<div className="intro-content"> <div className='intro-content'>
<h1 className="intro-header">Who are we?</h1> <h1 className='intro-header'>Who are we?</h1>
<p className="intro-text"> <p className='intro-text'>
Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot <strong>entirely from scratch</strong>. Potentia Robotics is the first high school team to design and build a fully-functional humanoid robot <strong>entirely from scratch</strong>.
It's run by students from the Thomas Jefferson High School for Science and Technology (TJHSST). <br></br><br></br> It's run by students from the Thomas Jefferson High School for Science and Technology (TJHSST). <br /><br />
We're building <span class="text-blue"><strong>Olympian</strong></span>: our low-cost, 6-foot tall, bipedal humanoid robot with a human-like dynamically stable gait, limb mobility, and balance capabilities, that can be controlled effectively and efficiently from afar.</p> We're building <span class='text-blue'><strong>Olympian</strong></span>: our low-cost, 6-foot tall, bipedal humanoid robot with a human-like dynamically stable gait, limb mobility, and balance capabilities, that can be controlled effectively and efficiently from afar.
</p>
</div> </div>
<div className="intro-space"></div> <div className='intro-space' />
<div className="mission-statement"> <div className='mission-statement'>
<h1 className="intro-header">Our mission</h1> <h1 className='intro-header'>Our mission</h1>
<p className="intro-text"> <p className='intro-text'>
At Potentia Robotics, we want to push the boundaries of what high-school students can achieve. At Potentia Robotics, we want to push the boundaries of what high-school students can achieve.
Our ultimate goal is to further STEM knowledge in the K-12 community while leading by example and showing other students that age isn't a limiting factor for any project, no matter how large-scale. Our ultimate goal is to further STEM knowledge in the K-12 community while leading by example and showing other students that age isn't a limiting factor for any project, no matter how large-scale.
</p> </p>
</div> </div>
</section> </section>
<section className="picture-redirect-wrapper"> <section className='picture-redirect-wrapper'>
<div className="about-us-content"> <div className='about-us-content'>
<a href="/about"> <a href='/about'>
<img <img
className="team-picture" className='team-picture'
src={team_picture} src={team_picture}
alt="" alt=''
/> />
</a> </a>
<div className="about-us-link-wrapper"> <div className='about-us-link-wrapper'>
<a href="/about" className="about-us-link"><strong>Meet the Team</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a> <a href='/about' className='about-us-link'><strong>Meet the Team</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight} /></a>
</div> </div>
</div> </div>
<div className="intro-space"></div> <div className='intro-space' />
<div className="meet-olympian-content"> <div className='meet-olympian-content'>
<a href="/meet-olympian"> <a href='/meet-olympian'>
<img <img
className="olympian-waving" className='olympian-waving'
src={olympian_waving} src={olympian_waving}
alt="" alt=''
/> />
</a> </a>
<div className="about-us-link-wrapper"> <div className='about-us-link-wrapper'>
<a href="/meet-olympian" className="about-us-link"><strong>Meet Olympian</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight}/></a> <a href='/meet-olympian' className='about-us-link'><strong>Meet Olympian</strong>&nbsp;<FontAwesomeIcon icon={faArrowCircleRight} /></a>
</div> </div>
</div> </div>
</section> </section>
<div className="buttonSet" id="goHere"> <div className='buttonSet' id='goHere'>
<Spring <Spring
from= {{ opacity: 0 }} from={{ opacity: 0 }}
to={{opacity: 1}} to={{ opacity: 1 }}
config = {{delay: 1000}} config={{ delay: 1000 }}
> >
{ props=> ( {props => (
<div style={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.linkedin.com/in/potentia-robotics-790582204/' target='_blank' rel='noopener noreferrer' className='fa fa-linkedin' />
<a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" rel="noopener noreferrer" className="fa fa-youtube"></a> <a href='https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q' target='_blank' rel='noopener noreferrer' className='fa fa-youtube' />
<a href="https://github.com/PotentiaRobotics" target="_blank" rel="noopener noreferrer" className="fa fa-github"></a> <a href='https://github.com/PotentiaRobotics' target='_blank' rel='noopener noreferrer' className='fa fa-github' />
<a href="#" target="_blank" rel="noopener noreferrer" className="fa fa-instagram"></a> <a href='#' target='_blank' rel='noopener noreferrer' className='fa fa-instagram' />
<a href="https://www.facebook.com/potentiarobotics/" target="_blank" rel="noopener noreferrer" className="fa fa-facebook"></a> <a href='https://www.facebook.com/potentiarobotics/' target='_blank' rel='noopener noreferrer' className='fa fa-facebook' />
</div> </div>
)} )}
</Spring> </Spring>
</div> </div>
</body> </body>
); )
} }

70
src/components/Navbar.js
View File

@ -1,42 +1,42 @@
import React from "react"; import React from 'react'
import { NavLink } from "react-router-dom"; import { NavLink } from 'react-router-dom'
import "./assets/Navbar.scss"; import './assets/Navbar.scss'
import logo from "./assets/img/logo_tr_bg.png" import logo from './assets/img/logo_tr_bg.png'
export default function Navbar(props) { export default function Navbar (props) {
const handleBurger = () => { const handleBurger = () => {
const burger = document.querySelector(".burger"); const burger = document.querySelector('.burger')
const nav = document.querySelector(".nav-links"); const nav = document.querySelector('.nav-links')
const navLinks = document.querySelectorAll(".nav-links li"); const navLinks = document.querySelectorAll('.nav-links li')
nav.classList.toggle("nav-active"); nav.classList.toggle('nav-active')
// animate links // animate links
navLinks.forEach((link, index) => { navLinks.forEach((link, index) => {
if (link.style.animation) { if (link.style.animation) {
link.style.animation = ""; link.style.animation = ''
} else { } else {
link.style.animation = `navLinkFade 0.5s ease forwards ${ link.style.animation = `navLinkFade 0.5s ease forwards ${
index / 7 + 0.5 index / 7 + 0.5
}s`; }s`
} }
}); })
// burger anim // burger anim
burger.classList.toggle("toggle"); burger.classList.toggle('toggle')
}; }
return ( return (
<nav> <nav>
<div className="brand"> <div className='brand'>
<NavLink to="/" exact> <NavLink to='/' exact>
<img src={logo} className="nav-logo"></img> <img src={logo} className='nav-logo' />
</NavLink> </NavLink>
</div> </div>
<ul className="nav-links"> <ul className='nav-links'>
<li> <li>
{" "} {' '}
<NavLink to="/" exact activeClassName="active-link"> <NavLink to='/' exact activeClassName='active-link'>
Home Home
</NavLink> </NavLink>
</li> </li>
@ -47,26 +47,26 @@ export default function Navbar(props) {
</NavLink> </NavLink>
</li> */} </li> */}
<li> <li>
{" "} {' '}
<NavLink to="/meet-olympian" activeClassName="active-link"> <NavLink to='/meet-olympian' activeClassName='active-link'>
Meet Olympian Meet Olympian
</NavLink> </NavLink>
</li> </li>
<li> <li>
{" "} {' '}
<NavLink to="/blog" activeClassName="active-link"> <NavLink to='/blog' activeClassName='active-link'>
Blog Blog
</NavLink> </NavLink>
</li> </li>
<li> <li>
{" "} {' '}
<NavLink to="/sponsors" activeClassName="active-link"> <NavLink to='/sponsors' activeClassName='active-link'>
Sponsors Sponsors
</NavLink> </NavLink>
</li> </li>
<li> <li>
{" "} {' '}
<NavLink to="/contact" activeClassName="active-link"> <NavLink to='/contact' activeClassName='active-link'>
Contact Us Contact Us
</NavLink> </NavLink>
</li> </li>
@ -77,17 +77,17 @@ export default function Navbar(props) {
</NavLink> </NavLink>
</li> */} </li> */}
<li> <li>
{" "} {' '}
<NavLink to="/events" activeClassName="active-link"> <NavLink to='/events' activeClassName='active-link'>
Events Events
</NavLink> </NavLink>
</li> </li>
</ul> </ul>
<div className="burger" onClick={handleBurger}> <div className='burger' onClick={handleBurger}>
<div className="line1"></div> <div className='line1' />
<div className="line2"></div> <div className='line2' />
<div className="line3"></div> <div className='line3' />
</div> </div>
</nav> </nav>
); )
} }

40
src/components/Olympian.js
View File

@ -1,26 +1,26 @@
import React from "react"; import React from 'react'
import "./assets/Olympian.scss"; import './assets/Olympian.scss'
import hero from "./assets/img/olympian_hero.png"; import hero from './assets/img/olympian_hero.png'
export default function Events(props) { export default function Events (props) {
return ( return (
<body> <body>
<section className="hero-temp"> <section className='hero-temp'>
<div className="landing-header"> <div className='landing-header'>
<h1 id="potentia"><span className="highlight-gray">&nbsp;Potentia&nbsp;</span></h1> <h1 id='potentia'><span className='highlight-gray'>&nbsp;Potentia&nbsp;</span></h1>
<h1 id="robotics"><span className="highlight-gray">&nbsp;Robotics&nbsp;</span></h1> <h1 id='robotics'><span className='highlight-gray'>&nbsp;Robotics&nbsp;</span></h1>
</div> </div>
<div className="landing-subheader"> <div className='landing-subheader'>
<p> <p>
<span className="highlight-gray">&nbsp;This page is under construction.&nbsp;<br></br>&nbsp;Please check back later!&nbsp;</span> <span className='highlight-gray'>&nbsp;This page is under construction.&nbsp;<br />&nbsp;Please check back later!&nbsp;</span>
</p> </p>
</div> </div>
<img <img
className="landing-robot" className='landing-robot'
src={hero} src={hero}
alt="" alt=''
/> />
</section> </section>
</body> </body>
); )
} }

6
src/components/PostDetail.js
View File

@ -1,5 +1,5 @@
import React from "react"; import React from 'react'
export default function PostDetail(props) { export default function PostDetail (props) {
return <div>Post Detail</div>; return <div>Post Detail</div>
} }

78
src/components/Sponsors.js
View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from 'react'
import {createGlobalStyle} from 'styled-components'; import { createGlobalStyle } from 'styled-components'
import {Container, Row, Col} from "react-bootstrap" import { Container, Row, Col } from 'react-bootstrap'
import {Spring} from 'react-spring/renderprops' import { Spring } from 'react-spring/renderprops'
import './assets/Sponsors.scss' import './assets/Sponsors.scss'
@ -19,55 +19,53 @@ const GlobalStyle = createGlobalStyle`
h2 { h2 {
color: #fff; color: #fff;
} }
`; `
class Sponsors extends Component { class Sponsors extends Component {
render() { render () {
return ( return (
<> <>
<GlobalStyle/> <GlobalStyle />
<div className="sponsor-intro-wrapper"> <div className='sponsor-intro-wrapper'>
<h3 className="sponsor-intro" style={{color: '#fff', textAlign: 'center'}}>Our amazing sponsors help make Potentia Robotics' projects possible! <br></br> Contact us to learn more about sponsorship.</h3> <h3 className='sponsor-intro' style={{ color: '#fff', textAlign: 'center' }}>Our amazing sponsors help make Potentia Robotics' projects possible! <br /> Contact us to learn more about sponsorship.</h3>
<Container fluid className="sponsor-tier-list"> <Container fluid className='sponsor-tier-list'>
<Col className="show-container"> <Col className='show-container'>
<Col md={4}> <Col md={4}>
<h1 style={{color: '#FFD753'}} className='glow'><b>Gold</b></h1> <h1 style={{ color: '#FFD753' }} className='glow'><b>Gold</b></h1>
<h2 style={{textAlign: 'center'}} className="tier-detail">Donation amount: $1000+<br></br>Perks: Silver + logo on Olympian</h2> <h2 style={{ textAlign: 'center' }} className='tier-detail'>Donation amount: $1000+<br />Perks: Silver + logo on Olympian</h2>
</Col>
<Col md={4}>
<h1 style={{ color: '#C8C3C3' }} className='glow'><b>Silver</b></h1>
<h2 style={{ textAlign: 'center' }} className='tier-detail'>Donation amount: $500-$999<br />Perks: Bronze + logo on all Potentia merchandise</h2>
</Col>
<Col md={4}>
<h1 style={{ color: '#E2964E' }} className='glow'><b>Bronze</b></h1>
<h2 style={{ textAlign: 'center' }} className='tier-detail'>Donation amount: $100-$499<br />Perks: logo on website + recognition on social media</h2>
</Col>
</Col> </Col>
<Col md={4}> </Container>
<h1 style={{color: '#C8C3C3'}} className='glow'><b>Silver</b></h1> </div>
<h2 style={{textAlign: 'center'}} className="tier-detail">Donation amount: $500-$999<br></br>Perks: Bronze + logo on all Potentia merchandise</h2> <div className='buttonSet' id='goHere'>
</Col>
<Col md={4}>
<h1 style={{color: '#E2964E'}} className='glow'><b>Bronze</b></h1>
<h2 style={{textAlign: 'center'}} className="tier-detail">Donation amount: $100-$499<br></br>Perks: logo on website + recognition on social media</h2>
</Col>
</Col>
</Container>
</div>
<div className="buttonSet" id="goHere">
<Spring <Spring
from= {{ opacity: 0 }} from={{ opacity: 0 }}
to={{opacity: 1}} to={{ opacity: 1 }}
config = {{delay: 1000}} config={{ delay: 1000 }}
> >
{ props=> ( {props => (
<div style={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.linkedin.com/in/potentia-robotics-790582204/' target='_blank' rel='noopener noreferrer' className='fa fa-linkedin' />
<a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" rel="noopener noreferrer" className="fa fa-youtube"></a> <a href='https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q' target='_blank' rel='noopener noreferrer' className='fa fa-youtube' />
<a href="https://github.com/PotentiaRobotics" target="_blank" rel="noopener noreferrer" className="fa fa-github"></a> <a href='https://github.com/PotentiaRobotics' target='_blank' rel='noopener noreferrer' className='fa fa-github' />
<a href="#" target="_blank" rel="noopener noreferrer" className="fa fa-instagram"></a> <a href='#' target='_blank' rel='noopener noreferrer' className='fa fa-instagram' />
<a href="https://www.facebook.com/potentiarobotics/" target="_blank" rel="noopener noreferrer" className="fa fa-facebook"></a> <a href='https://www.facebook.com/potentiarobotics/' target='_blank' rel='noopener noreferrer' className='fa fa-facebook' />
</div> </div>
)} )}
</Spring> </Spring>
</div> </div>
<div className="bottom"> <div className='bottom' />
</div>
</> </>
); )
} }
} }
export default Sponsors; export default Sponsors

70
src/components/assets/StyledContactForm.js
View File

@ -1,6 +1,6 @@
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components'
import './Contact.scss'; import './Contact.scss'
import { MdClose } from 'react-icons/md'; import { MdClose } from 'react-icons/md'
const sharedStyles = css` const sharedStyles = css`
background-color: #ccc; background-color: #ccc;
@ -8,7 +8,7 @@ const sharedStyles = css`
border: 1px solid #ddd; border: 1px solid #ddd;
margin: 10px 0 20px 0; margin: 10px 0 20px 0;
box-sizing: border-box; box-sizing: border-box;
`; `
const StyledFormWrapper = styled.div` const StyledFormWrapper = styled.div`
display: flex; display: flex;
@ -17,7 +17,7 @@ const StyledFormWrapper = styled.div`
position:relative; position:relative;
margin-top: 4vw; margin-top: 4vw;
padding: 0 2%; padding: 0 2%;
`; `
const StyledForm = styled.form` const StyledForm = styled.form`
width: 70%; width: 70%;
@ -29,9 +29,9 @@ const StyledForm = styled.form`
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
width: 90% width: 90%
} }
`; `
// height:100%; // height:100%;
// border-radius: 10px; (if we want a round form) // border-radius: 10px; (if we want a round form)
const StyledInput = styled.input` const StyledInput = styled.input`
display: block; display: block;
@ -39,7 +39,7 @@ const StyledInput = styled.input`
rows: 1; rows: 1;
padding 1.5%; padding 1.5%;
${sharedStyles} ${sharedStyles}
`; `
const StyledTextAreaSubject = styled.textarea` const StyledTextAreaSubject = styled.textarea`
background-color: #98c1d9; background-color: #98c1d9;
@ -51,7 +51,7 @@ const StyledTextAreaSubject = styled.textarea`
spellcheck:true; spellcheck:true;
resize: vertical; resize: vertical;
${sharedStyles} ${sharedStyles}
`; `
const StyledTextArea = styled.textarea` const StyledTextArea = styled.textarea`
background-color: #98c1d9; background-color: #98c1d9;
@ -63,7 +63,7 @@ const StyledTextArea = styled.textarea`
overflow: auto; overflow: auto;
spellcheck:true; spellcheck:true;
${sharedStyles} ${sharedStyles}
`; `
const StyledButton = styled.button` const StyledButton = styled.button`
display: block; display: block;
background-color: #ee6c4d; background-color: #ee6c4d;
@ -81,13 +81,13 @@ const StyledButton = styled.button`
cursor: pointer; cursor: pointer;
opacity:0.7; opacity:0.7;
} }
`; `
const StyledError = styled.div` const StyledError = styled.div`
color: red; color: red;
font-weight: 800; font-weight: 800;
margin: 0 0 5% 0; margin: 0 0 5% 0;
`; `
const Background = styled.div` const Background = styled.div`
width: 100%; width: 100%;
@ -97,7 +97,7 @@ const Background = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
`; `
const ModalWrapper = styled.div` const ModalWrapper = styled.div`
overflow: auto; overflow: auto;
@ -151,7 +151,7 @@ const ModalWrapper = styled.div`
width: 100%; width: 100%;
} }
} }
`; `
const ModalContent = styled.div` const ModalContent = styled.div`
align-items: center; align-items: center;
line-height: 1.8; line-height: 1.8;
@ -192,7 +192,7 @@ const ModalContent = styled.div`
width: 80%; width: 80%;
} }
overflow-y: scroll; overflow-y: scroll;
`; `
const CloseModalButton = styled(MdClose)` const CloseModalButton = styled(MdClose)`
cursor: pointer; cursor: pointer;
@ -207,33 +207,33 @@ const CloseModalButton = styled(MdClose)`
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
top: 3%; top: 3%;
} }
`; `
const Modal = ({ handleClose, show, children }) => { const Modal = ({ handleClose, show, children }) => {
const showHideClassName = show ? "modal display-block" : "modal display-none"; const showHideClassName = show ? 'modal display-block' : 'modal display-none'
return ( return (
<div className={showHideClassName}> <div className={showHideClassName}>
<Background> <Background>
<ModalWrapper> <ModalWrapper>
<ModalContent>{children}</ModalContent> <ModalContent>{children}</ModalContent>
<CloseModalButton type="button" onClick={handleClose}></CloseModalButton> <CloseModalButton type='button' onClick={handleClose} />
</ModalWrapper> </ModalWrapper>
</Background> </Background>
</div> </div>
); )
}; }
export default StyledFormWrapper; export default StyledFormWrapper
export { export {
StyledFormWrapper, StyledFormWrapper,
StyledForm, StyledForm,
sharedStyles, sharedStyles,
StyledInput, StyledInput,
StyledTextArea, StyledTextArea,
StyledButton, StyledButton,
StyledError, StyledError,
StyledTextAreaSubject, StyledTextAreaSubject,
Modal Modal
}; }

1
src/index.js
View File

@ -1,4 +1,5 @@
import './bootstrap.css' import './bootstrap.css'
import 'bootstrap-icons/font/bootstrap-icons.css' import 'bootstrap-icons/font/bootstrap-icons.css'
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'

2
studio/schemas/schema.js
View File

@ -12,5 +12,5 @@ export default createSchema({
// to the ones provided by any plugins that are installed // to the ones provided by any plugins that are installed
types: schemaTypes.concat([ types: schemaTypes.concat([
/* Your types here! */ /* Your types here! */
]), ])
}) })