rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-18 18:10:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

New front page

Browse Source
This commit is contained in:
Michael Fatemi 2021-04-11 10:32:36 -04:00
parent b0c03b4887
commit 32f3e9d068
4 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/banner-new.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

7
public/index.html
View File

@ -5,10 +5,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta name="description" content="Carpooling App For Communities" />
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
@ -24,7 +21,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>WheelShare</title>
</head> </head>
<body> <body>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUnWIrt-H4RuP2YFLpVPz4oAjBhpOOoyI&libraries=places"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUnWIrt-H4RuP2YFLpVPz4oAjBhpOOoyI&libraries=places"></script>

44
src/components/Home.tsx
View File

@ -12,33 +12,39 @@ export default function Home() {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
padding: '1rem 0rem',
backgroundImage: "url('images/banner-new.jpg')",
backgroundRepeat: 'no-repeat',
color: 'white',
// backgroundSize: '',
}} }}
> >
<h1>Home</h1> <h1 style={{ textShadow: '1px 1px black', fontSize: '8rem' }}>
<div style={{ display: 'flex', flexDirection: 'row' }}> WheelShare
</h1>
<div
style={{
display: 'flex',
flexDirection: 'row',
margin: '1rem 0rem',
fontSize: '2rem',
backgroundColor: 'rgba(1, 1, 1, 0.5)',
padding: '0.5rem 1rem',
}}
>
{!isLoggedIn ? ( {!isLoggedIn ? (
<Button <Button
onClick={() => (window.location.href = ION_AUTHORIZATION_ENDPOINT)} onClick={() => (window.location.href = ION_AUTHORIZATION_ENDPOINT)}
> >
Sign In with Ion Sign in with Ion
</Button> </Button>
) : ( ) : (
'Hello ' + user?.first_name + '!' 'Hello ' + user?.first_name + '!'
)} )}
</div> </div>
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<section <section id="reinvest" style={{ paddingTop: '80px' }}>
id="reinvest"
style={{
backgroundImage: "url('images/banner.jpg')",
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
height: '690px',
paddingTop: '80px',
}}
>
<div className="container"> <div className="container">
<br />
<div className="text-center"> <div className="text-center">
<img <img
id="logo" id="logo"
@ -51,16 +57,16 @@ export default function Home() {
height="750px" height="750px"
/> />
</div> </div>
<br /> <h3 className="text-white bg-primary rounded-lg shadow-lg p-3 mb-5 mt-3">
<br />
<br />
<h3 className="text-white bg-primary rounded-lg shadow-lg p-3 mb-5">
Helping communities utilize carpooling Helping communities utilize carpooling
</h3> </h3>
</div> </div>
</section> </section>
<section id="about" className="p-4"> <section id="about" className="p-4">
<div className="container"> <div
className="container"
style={{ backgroundColor: 'rgba(1, 1, 1, 0.5)' }}
>
<h1 className="d-flex justify-content-center m-2 p-2"> <h1 className="d-flex justify-content-center m-2 p-2">
<u>About Us</u> <u>About Us</u>
</h1> </h1>

11
src/components/PoolMap.tsx
View File

@ -3,6 +3,15 @@ import GoogleMapReact from 'google-map-react';
const position = { lat: 39.043758, lng: -77.487442 }; const position = { lat: 39.043758, lng: -77.487442 };
export default function PoolMap() { export default function PoolMap() {
const renderMarkers = (map: any, maps: any) => {
let marker = new maps.Marker({
position,
map,
title: 'Hello World!',
});
return marker;
};
return ( return (
<div style={{ height: '50vh', width: '100%' }}> <div style={{ height: '50vh', width: '100%' }}>
<GoogleMapReact <GoogleMapReact
@ -11,6 +20,8 @@ export default function PoolMap() {
}} }}
defaultCenter={position} defaultCenter={position}
defaultZoom={11} defaultZoom={11}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }: any) => renderMarkers(map, maps)}
></GoogleMapReact> ></GoogleMapReact>
</div> </div>
); );