Skip to content

Added About Section for HomePage #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SaswatM-62 wants to merge 7 commits into
base: dev
Choose a base branch
from
Open

Added About Section for HomePage #32

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8d1ce49
Add About Section
SaswatM-62 Nov 15, 2020
6a0bb39
Update test for About section
SaswatM-62 Nov 15, 2020
353d6c6
Code cleanup, add assets/img and assets/placeholder
riteshsp2000 Nov 15, 2020
a782e07
Add Focus Section
SaswatM-62 Nov 28, 2020
c139412
Update Focus Section
SaswatM-62 Nov 28, 2020
28591e8
Update test
SaswatM-62 Nov 28, 2020
5614634
Update test for Focus section
SaswatM-62 Nov 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Add About Section
  • Loading branch information
@SaswatM-62
SaswatM-62 committed Nov 15, 2020
commit 8d1ce499ea1d9bf236fe7019418dcd567738f5fc
164 changes: 163 additions & 1 deletion src/components/HomePage/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';

import Team from './imgs/team.svg';
import Work from './imgs/github.svg';
import WebDev from './imgs/web_dev.svg';
import AppDev from './imgs/app_dev.svg';
import OpenSource from './imgs/open_source.svg';
import Competitive from './imgs/competitive.svg';
import Hackathon from './imgs/hackathon.svg';
import Ai from './imgs/ai.svg';


import SectionLayout from './SectionLayout';

Expand All @@ -8,7 +19,139 @@ function About({ onScrollClick }) {

return (
<SectionLayout alternate onScrollClick={onScrollClick}>
<h1 className={classes.heading}>About Section</h1>
<div className={classes.root}>
<Grid container direction="row" justify="center" alignItems="center" spacing={5}>
{/* Section Heading */}
<Grid item xs={12}>
<h1 className={classes.heading}>About OpenCode</h1>
</Grid>

{/*Who we are section*/}
<Grid className={classes.subsection} direction="row" justify="center" alignItems="center" container spacing={8}>
<Grid item sm={12} md={6}>
<h1>Who are we?</h1>
<p className={classes.textbody}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</Grid>
<Grid item sm={12} md={6}>
<img className={classes.image} src={Team} alt="Team" />
</Grid>
</Grid>

{/*What we do section*/}
<Grid className={classes.subsection} direction="row-reverse" justify="center" alignItems="center" container spacing={8}>
<Grid item sm={12} md={6}>
<h1>What we do?</h1>
<p className={classes.textbody}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</Grid>
<Grid item sm={12} md={6}>
<img className={classes.image} src={Work} alt="Work" />
</Grid>
</Grid>

{/* Our Specializations */}
<Grid item xs={12}>
<h1>Our Specializations</h1>
</Grid>

{/* Open Source */}
<Grid className={classes.subsection} justify="center" alignItems="center" container spacing={8}>
<Grid item sm={12} md={6}>
<h1>Open Source</h1>
<p className={classes.textbody}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</Grid>
<Grid item sm={12} md={6}>
<img className={classes.image} src={OpenSource} alt="Open Source" />
</Grid>
</Grid>

{/* Web Development */}
<Grid className={classes.subsection} direction="row-reverse" justify="center" alignItems="center" container spacing={8}>
<Grid item sm={12} md={6}>
<h1>Web Development</h1>
<p className={classes.textbody}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</Grid>
<Grid item sm={12} md={6}>
<img className={classes.image} src={WebDev} alt="Web Development" />
</Grid>
</Grid>

{/* App Development */}
<Grid className={classes.subsection} justify="center" alignItems="center" container spacing={8}>
<Grid item sm={12} md={6}>
<h1>App Development</h1>
<p className={classes.textbody}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</Grid>
<Grid item sm={12} md={6}>
<img className={classes.image} src={AppDev} alt="App Development" />
</Grid>
</Grid>

{/* Competitive Programming */}
<Grid className={classes.subsection} direction="row-reverse" justify="center" alignItems="center" container spacing={8}>
<Grid item sm={12} md={6}>
<h1>Competitive Programming</h1>
<p className={classes.textbody}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</Grid>
<Grid item sm={12} md={6}>
<img className={classes.image} src={Competitive} alt="Competitive Programming" />
</Grid>
</Grid>

{/* Hackathons */}
<Grid className={classes.subsection} justify="center" alignItems="center" container spacing={8}>
<Grid item sm={12} md={6}>
<h1>Hackathons</h1>
<p className={classes.textbody}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</Grid>
<Grid item sm={12} md={6}>
<img className={classes.image} src={Hackathon} alt="Hackathon" />
</Grid>
</Grid>

{/* AI */}
<Grid className={classes.subsection} direction="row-reverse" justify="center" alignItems="center" container spacing={8}>
<Grid item sm={12} md={6}>
<h1>ML & AI</h1>
<p className={classes.textbody}>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</Grid>
<Grid item sm={12} md={6}>
<img className={classes.image} src={Ai} alt="ML & AI" />
</Grid>
</Grid>
</Grid>
</div>
</SectionLayout>
);
}
Expand All @@ -19,5 +162,24 @@ const useStyle = makeStyles((theme) => ({
heading: {
fontFamily: theme.typography.fontFamily,
fontSize: '3em',
textAlign: 'center',
},
textbody: {
textAlign:'justify',
},
root: {
flexGrow: 1,
paddingTop: theme.mixins.toolbar.minHeight,
textAlign: 'center',
width: '100%',
height: '100%',
backgroundColor: theme.palette.background.darkgrey,
paddingBottom: '5rem',
},
image: {
width: '90%',
},
subsection: {
padding: '2rem 10rem 10rem',
},
}));
7 changes: 3 additions & 4 deletions src/components/HomePage/SectionLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,8 @@ export default SectionLayout;

const useStyle = makeStyles((theme) => ({
container: {
height: '95vh',
padding: theme.spacing(0, 1),
paddingTop: theme.mixins.toolbar.minHeight,
minHeight: '95vh',
padding: 0,
position: 'relative',
display: 'flex',
justifyContent: 'center',
Expand All @@ -38,4 +37,4 @@ const useStyle = makeStyles((theme) => ({
position: 'absolute',
bottom: 20,
},
}));
}));
1 change: 1 addition & 0 deletions src/components/HomePage/imgs/ai.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading