Skip to content

Commit 7de51dc

Browse files
symaticvisualsdependabot[bot]Abhishek-kumar09dipscoderSHITIZ-AGGARWAL
authored
landing page v-1 (#59)
* landing page v-1 * landing page v-1 * landing page v-1 * page v2 * v2 * Bump typescript from 3.9.9 to 4.3.2 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 3.9.9 to 4.3.2. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](microsoft/TypeScript@v3.9.9...v4.3.2) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> * landing page done * landing page done - generalized fonts * landing page done - production build * Create events (#79) * Initial commit * Complete eventForm with image upload * Store images into specific user * Make cancel btn working * Format file * Update * Added designs * Add README * Fix homepage responsiveness Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Abhishek Kumar <[email protected]> Co-authored-by: Dipesh Jaiswal <[email protected]> Co-authored-by: SHITIZ-AGGARWAL <[email protected]> Co-authored-by: SHITIZ AGGARWAL <[email protected]>
1 parent 0146de4 commit 7de51dc

File tree

9 files changed

+14593
-12
lines changed

9 files changed

+14593
-12
lines changed

‎public/static/home/Footer.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎public/static/home/serviceGirl.png‎

44.5 KB
Loading

‎src/Routes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import IndividualEvent from './views/pages/events/individualEvent';
1212
import Register from './views/pages/register/Register';
1313
import CreateNewEvent from './components/CreateNewEvent';
1414
import Settings from './views/pages/settings/Settings';
15+
import LandingPage from './views/pages/HomeView/LandingPage';
1516

1617
const renderRoutes = () => (
1718
<Suspense fallback={<LoadingScreen />}>
@@ -29,6 +30,7 @@ const renderRoutes = () => (
2930
<Route path="/dashboard" exact render={() => <Navigation />} />
3031
<Route path="/profile" exact render={() => <Profile />} />
3132
<Route path="/events" exact render={() => <EventDefaultPage />} />
33+
<Route path="/landing" exact render={() => <LandingPage />} />
3234
<Route
3335
path="/events/individual-event"
3436
exact

‎src/components/Logo.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import React from 'react';
2-
3-
function Logo(props) {
4-
return (
5-
<img alt="Logo" height="32px" src="/static/logo/logo.svg" {...props} />
6-
);
2+
import PropTypes from 'prop-types';
3+
function Logo(props, variant) {
4+
if (variant === 'black') {
5+
return (
6+
<img alt="Logo" height="32px" src="/static/logo/logo.png" {...props} />
7+
);
8+
} else {
9+
return (
10+
<img alt="Logo" height="32px" src="/static/logo/logo.svg" {...props} />
11+
);
12+
}
713
}
8-
14+
Logo.propTypes = {
15+
variant: PropTypes.string
16+
};
917
export default Logo;

‎src/layouts/MainLayout/TopBar/Account.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,11 @@ function Account() {
171171
style={{
172172
backgroundColor: 'rgb(255, 255, 255, 0.95)',
173173
fontWeight: 500
174-
}} onClick={handleLogout}>Logout</MenuItem>
174+
}}
175+
onClick={handleLogout}
176+
>
177+
Logout
178+
</MenuItem>
175179
</Menu>
176180
</div>
177181
</div>

‎src/layouts/MainLayout/TopBar/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const useStyles = makeStyles(theme => ({
5151
}
5252
}));
5353

54-
function TopBar({ className, onMobileNavOpen, ...rest }) {
54+
function TopBar({ className, onMobileNavOpen, variant, ...rest }) {
5555
const classes = useStyles();
5656
const [state, setState] = React.useState({
5757
top: false,
@@ -128,7 +128,7 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
128128
<AppBar elevation={0} className={clsx(classes.root, className)} {...rest}>
129129
<Toolbar className={classes.toolbar}>
130130
<RouterLink to="/">
131-
<Logo className={classes.logo} />
131+
<Logo className={classes.logo} variant={variant} />
132132
</RouterLink>
133133
<Hidden smDown>
134134
<Box ml={2} flexGrow={1} />

‎src/views/pages/HomeView/LandingPage.js‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import clsx from 'clsx';
4+
import ArrowForwardOutlinedIcon from '@material-ui/icons/ArrowForwardOutlined';
5+
import {
6+
Box,
7+
Grid,
8+
Typography,
9+
makeStyles,
10+
Button,
11+
AppBar
12+
} from '@material-ui/core';
13+
import TopBar from 'src/layouts/MainLayout/TopBar';
14+
15+
const useStyles = makeStyles(theme => ({
16+
root: {
17+
backgroundColor: '#FFF',
18+
height: '90vh',
19+
color: '#000',
20+
21+
overflow: 'hidden',
22+
[theme.breakpoints.down('md')]: {
23+
paddingTop: 0,
24+
paddingBottom: 0
25+
}
26+
},
27+
extraPadding: {
28+
[theme.breakpoints.down('sm')]: {
29+
padding: '0 30px'
30+
},
31+
textAlign: 'justify'
32+
},
33+
image: {
34+
perspectiveOrigin: 'left center',
35+
transformStyle: 'preserve-3d',
36+
perspective: 1500,
37+
width: '60vh',
38+
display: 'flex',
39+
'& > img': {
40+
maxWidth: '100%',
41+
42+
backfaceVisibility: 'hidden'
43+
// boxShadow: theme.shadows[16]
44+
// transform: 'rotateY(-35deg) rotateX(15deg)'
45+
},
46+
[theme.breakpoints.down('sm')]: {
47+
maxWidth: '40vh'
48+
}
49+
},
50+
hide: {
51+
display: 'none'
52+
},
53+
Button: {
54+
textTransform: 'capitalize'
55+
// padding :
56+
},
57+
container: {
58+
paddingTop: '10vh',
59+
margin: '0 5px',
60+
[theme.breakpoints.down('sm')]: {
61+
margin: '0',
62+
paddingTop: '2vh',
63+
padding: '0 4vw',
64+
display: 'flex',
65+
justifyContent: 'center'
66+
}
67+
},
68+
footer: {
69+
padding: 0,
70+
objectFit: 'cover',
71+
position: 'fixed',
72+
left: 0,
73+
bottom: 0,
74+
height: '30vh',
75+
[theme.breakpoints.down('sm')]: {
76+
height: '8vh'
77+
}
78+
}
79+
}));
80+
81+
function LandingPage({ className, ...rest }) {
82+
const classes = useStyles();
83+
return (
84+
<div>
85+
<AppBar>
86+
<TopBar variant="black"></TopBar>
87+
</AppBar>
88+
<div className={clsx(classes.root, className)} {...rest}>
89+
<Grid
90+
container
91+
spacing={2}
92+
className={classes.container}
93+
direction="row"
94+
justify="center"
95+
alignItems="center"
96+
>
97+
<Grid
98+
item
99+
xs={12}
100+
sm={6}
101+
style={{ height: '80%' }}
102+
direction="row"
103+
justify="center"
104+
alignItems="center"
105+
>
106+
<Box
107+
style={{
108+
display: 'flex',
109+
justifyContent: 'center'
110+
}}
111+
>
112+
<Box
113+
display="flex"
114+
style={{ justifyContent: 'center', flexDirection: 'column' }}
115+
>
116+
<Box mt={10} display="flex">
117+
<Typography variant="h1" style={{ fontWeight: '700' }}>
118+
A Heading for the<br></br> Landing Page
119+
</Typography>
120+
</Box>
121+
<Box mt={3} display="flex">
122+
<Typography variant="h6">
123+
A brief introduction about platform , what is the purpose of
124+
thisand what our<br></br> platform representstwo to three
125+
lines will work
126+
</Typography>
127+
</Box>
128+
<Box mt={3} display="flex">
129+
<Button
130+
style={{
131+
backgroundColor: '#ffffff',
132+
color: '#B20000',
133+
textTransform: 'capitalize',
134+
fontWeight: 700,
135+
borderRadius: '20px'
136+
}}
137+
component="a"
138+
href="/register"
139+
size="large"
140+
variant="contained"
141+
>
142+
Get Started <ArrowForwardOutlinedIcon />
143+
</Button>
144+
</Box>
145+
</Box>
146+
</Box>
147+
</Grid>
148+
<Grid
149+
item
150+
xs={12}
151+
sm={6}
152+
style={{ display: 'flex', justifyContent: 'center' }}
153+
>
154+
<div className={classes.image}>
155+
<img
156+
alt="codeforcauseimg"
157+
src="/static/home/serviceGirl.png"
158+
style={{ width: '55vh' }}
159+
/>
160+
</div>
161+
</Grid>
162+
</Grid>
163+
164+
<Grid container xs={12} sm={12}>
165+
<Grid item className={classes.footer}>
166+
<img
167+
alt="codeforcauseimg"
168+
src="/static/home/Footer.svg"
169+
style={{
170+
width: '100vw'
171+
}}
172+
/>
173+
</Grid>
174+
</Grid>
175+
</div>
176+
</div>
177+
);
178+
}
179+
180+
LandingPage.propTypes = {
181+
className: PropTypes.string
182+
};
183+
184+
export default LandingPage;

‎src/views/pages/HomeView/index.js‎

100755100644
Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { makeStyles } from '@material-ui/core';
22
import React from 'react';
33
import Page from 'src/components/Page';
4-
// import DrawerLayout from 'src/layouts/DrawerLayout';
54
import Hero from './Hero';
5+
// import LandingPage from './LandingPage';
6+
// import Second from './Second';
67

78
const useStyles = makeStyles(() => ({
89
root: {}
@@ -14,8 +15,6 @@ function HomeView() {
1415
return (
1516
<Page className={classes.root} title="Code for Cause">
1617
<Hero />
17-
18-
{/* <Footer /> */}
1918
</Page>
2019
);
2120
}

0 commit comments

Comments
 (0)