rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-09 22:00: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" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta name="description" content="Carpooling App For Communities" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
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.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>WheelShare</title>
</head>
<body>
<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',
flexDirection: 'column',
alignItems: 'center',
padding: '1rem 0rem',
backgroundImage: "url('images/banner-new.jpg')",
backgroundRepeat: 'no-repeat',
color: 'white',
// backgroundSize: '',
}}
>
<h1>Home</h1>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<h1 style={{ textShadow: '1px 1px black', fontSize: '8rem' }}>
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 ? (
<Button
onClick={() => (window.location.href = ION_AUTHORIZATION_ENDPOINT)}
>
Sign In with Ion
Sign in with Ion
</Button>
) : (
'Hello ' + user?.first_name + '!'
)}
</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',
}}
>
<section id="reinvest" style={{ paddingTop: '80px' }}>
<div className="container">
<br />
<div className="text-center">
<img
id="logo"
@ -51,16 +57,16 @@ export default function Home() {
height="750px"
/>
</div>
<br />
<br />
<br />
<h3 className="text-white bg-primary rounded-lg shadow-lg p-3 mb-5">
<h3 className="text-white bg-primary rounded-lg shadow-lg p-3 mb-5 mt-3">
Helping communities utilize carpooling
</h3>
</div>
</section>
<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">
<u>About Us</u>
</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 };
export default function PoolMap() {
const renderMarkers = (map: any, maps: any) => {
let marker = new maps.Marker({
position,
map,
title: 'Hello World!',
});
return marker;
};
return (
<div style={{ height: '50vh', width: '100%' }}>
<GoogleMapReact
@ -11,6 +20,8 @@ export default function PoolMap() {
}}
defaultCenter={position}
defaultZoom={11}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }: any) => renderMarkers(map, maps)}
></GoogleMapReact>
</div>
);