mirror of
https://github.com/myfatemi04/wheelshare-frontend.git
synced 2025-04-21 11:20:17 -04:00
start home page
This commit is contained in:
Joshua Hsueh
parent
e389ebd1ab
commit
e50743ed96
BIN
public/images/background.png
Normal file
BIN
public/images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
public/images/banner.jpg
Normal file
BIN
public/images/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
|
|
@ -1,5 +1,6 @@
|
||||||
import { ION_AUTHORIZATION_ENDPOINT } from '../api';
|
import { ION_AUTHORIZATION_ENDPOINT } from '../api';
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
import 'bootstrap/dist/js/bootstrap.bundle.min';
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
@ -13,6 +14,131 @@ export default function Home() {
|
||||||
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||||
<a href={ION_AUTHORIZATION_ENDPOINT}>Log In with Ion</a>
|
<a href={ION_AUTHORIZATION_ENDPOINT}>Log In with Ion</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="d-flex flex-column">
|
||||||
|
<section
|
||||||
|
id="reinvest"
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url('images/banner.jpg')",
|
||||||
|
backgroundRepeat: 'no-repeat',
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
height: '690px',
|
||||||
|
paddingTop: '80px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<br />
|
||||||
|
<div className="text-center">
|
||||||
|
<img
|
||||||
|
className="text-center img-fluid"
|
||||||
|
src="images/logo.png"
|
||||||
|
width="350px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<h3 className="text-white bg-primary rounded-lg shadow-lg p-3 mb-5">
|
||||||
|
Helping communities utilize carpooling
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="about" className="p-4">
|
||||||
|
<div className="container">
|
||||||
|
<h1 className="d-flex justify-content-center m-2 p-2">
|
||||||
|
<u>About Us</u>
|
||||||
|
</h1>
|
||||||
|
<p className="d-flex justify-content-center m-2 p-2">
|
||||||
|
NAME is an app aimed to help communities find safe ways to
|
||||||
|
carpool. The app has groups where people must be approved before
|
||||||
|
joining. Upon joining, users can create their own car pool inside
|
||||||
|
that communitiy or join others.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="services" className="">
|
||||||
|
<div className="bg-dark text-white p-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="d-flex justify-content-center m-2 p-4">
|
||||||
|
Our Services
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div className="row exp-grids py-3 d-inline-flex justify-content-center">
|
||||||
|
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||||
|
<img src="images/posts.jpg" alt=" " className="img-fluid" />
|
||||||
|
<div className="exp wthree">
|
||||||
|
<h5>Browse Posts</h5>
|
||||||
|
<div className="clearfix"></div>
|
||||||
|
<p>
|
||||||
|
Easily browse through NLP generated recommended posts in
|
||||||
|
your feed. These posts match your previous interests and
|
||||||
|
recent trending political and social subjects.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||||
|
<img src="images/events.jpg" alt=" " className="img-fluid" />
|
||||||
|
<div className="exp wthree">
|
||||||
|
<h5>Browse Events</h5>
|
||||||
|
<div className="clearfix"></div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Browse local community political events that match your
|
||||||
|
political interests in order to best advocate your
|
||||||
|
concerns and have your voice heard.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<img src="images/post.jpg" alt=" " className="img-fluid" />
|
||||||
|
<div className="exp wthree">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<h5>Discussion Thread</h5>
|
||||||
|
<div className="clearfix"></div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
View someone's post and leave a like or comment to further
|
||||||
|
discuss the thread or show your support. Each like or
|
||||||
|
comment will make your feed give more posts or events that
|
||||||
|
are similar.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<img
|
||||||
|
src="images/createpost.jpg"
|
||||||
|
alt=" "
|
||||||
|
className="img-fluid"
|
||||||
|
/>
|
||||||
|
<div className="exp wthree">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<h5>Create Posts</h5>
|
||||||
|
<div className="clearfix"></div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Create your own post anonymously for free and easily. Your
|
||||||
|
post will be seen by many others as well as politicians
|
||||||
|
that can possibly advocate and recognize your interests
|
||||||
|
for your given enough support.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,143 @@
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
import 'bootstrap/dist/js/bootstrap.bundle.min';
|
||||||
export default function Main() {
|
export default function Main() {
|
||||||
return (
|
return (
|
||||||
<div className="d-flex flex-column">
|
<div className="d-flex flex-column">
|
||||||
<h1>About Us</h1>
|
<h1>About Us</h1>
|
||||||
|
<section
|
||||||
|
id="reinvest"
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url('images/background.jpg')",
|
||||||
|
backgroundRepeat: 'no-repeat',
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
height: '690px',
|
||||||
|
paddingTop: '80px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="container">
|
||||||
|
<br />
|
||||||
|
<div className="text-center">
|
||||||
|
<img
|
||||||
|
className="text-center img-fluid"
|
||||||
|
src="images/logo.png"
|
||||||
|
width="350px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<h3 className="text-white bg-primary rounded-lg shadow-lg p-3 mb-5">
|
||||||
|
Digitally empowering underrepresented minorities in politics
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="about" className="p-4">
|
||||||
|
<div className="container">
|
||||||
|
<h1 className="d-flex justify-content-center m-2 p-2">About Us</h1>
|
||||||
|
<p className="d-flex justify-content-center m-2 p-2">
|
||||||
|
ThinkOpenly is a politics exchange platform, aiming to create a
|
||||||
|
professional and efficient connection between underrepresented
|
||||||
|
minority groups and politics. Community members can post questions
|
||||||
|
or concerns and other members can +1 the post. Professional
|
||||||
|
legislators or lawmakers can then answer or attempt to enforce laws
|
||||||
|
to support these concerns. To make this process as effective as
|
||||||
|
possible, we use NLP Machine Learning to suggest other articles or
|
||||||
|
posts to users based on previous likes. Our platform also offers
|
||||||
|
suggestions for events that coincide with their interests and free
|
||||||
|
time via Google Calendar.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="services" className="">
|
||||||
|
<div className="bg-dark text-white p-4">
|
||||||
|
<div className="container">
|
||||||
|
<h1 className="d-flex justify-content-center m-2 p-4">
|
||||||
|
Our Services
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div className="row exp-grids py-3 d-inline-flex justify-content-center">
|
||||||
|
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||||
|
<img src="images/posts.jpg" alt=" " className="img-fluid" />
|
||||||
|
<div className="exp wthree">
|
||||||
|
<h5>Browse Posts</h5>
|
||||||
|
<div className="clearfix"></div>
|
||||||
|
<p>
|
||||||
|
Easily browse through NLP generated recommended posts in
|
||||||
|
your feed. These posts match your previous interests and
|
||||||
|
recent trending political and social subjects.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||||
|
<img src="images/events.jpg" alt=" " className="img-fluid" />
|
||||||
|
<div className="exp wthree">
|
||||||
|
<h5>Browse Events</h5>
|
||||||
|
<div className="clearfix"></div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Browse local community political events that match your
|
||||||
|
political interests in order to best advocate your concerns
|
||||||
|
and have your voice heard.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<img src="images/post.jpg" alt=" " className="img-fluid" />
|
||||||
|
<div className="exp wthree">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<h5>Discussion Thread</h5>
|
||||||
|
<div className="clearfix"></div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
View someone's post and leave a like or comment to further
|
||||||
|
discuss the thread or show your support. Each like or
|
||||||
|
comment will make your feed give more posts or events that
|
||||||
|
are similar.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-5 col-md-7 bg-white text-dark m-2 p-4">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<img
|
||||||
|
src="images/createpost.jpg"
|
||||||
|
alt=" "
|
||||||
|
className="img-fluid"
|
||||||
|
/>
|
||||||
|
<div className="exp wthree">
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<h5>Create Posts</h5>
|
||||||
|
<div className="clearfix"></div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Create your own post anonymously for free and easily. Your
|
||||||
|
post will be seen by many others as well as politicians that
|
||||||
|
can possibly advocate and recognize your interests for your
|
||||||
|
given enough support.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="support" className="m-2">
|
||||||
|
<div className="container">
|
||||||
|
<h1 className="d-flex justify-content-center m-2 p-4">Support</h1>
|
||||||
|
<h4>Contact:</h4>
|
||||||
|
<p>@gmail.com</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,6 @@ const useStyles = makeStyles({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const navLinks = [
|
const navLinks = [
|
||||||
{ title: `Carpool`, path: `/` },
|
|
||||||
{ title: `Profile`, path: `/profile` },
|
{ title: `Profile`, path: `/profile` },
|
||||||
{ title: `Groups`, path: `/groups` },
|
{ title: `Groups`, path: `/groups` },
|
||||||
{ title: `MyGroups`, path: `/mygroups` },
|
{ title: `MyGroups`, path: `/mygroups` },
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user