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
Prev Previous commit
Next Next commit
Code cleanup, add assets/img and assets/placeholder
  • Loading branch information
@riteshsp2000
riteshsp2000 committed Nov 15, 2020
commit 353d6c6e219d793996277cf3efd3748beacac8bd
0 src/components/HomePage/imgs/ai.svg → src/assets/img/home/ai.svg
View file
Open in desktop
File renamed without changes
0 src/components/HomePage/imgs/app_dev.svg → src/assets/img/home/app_dev.svg
View file
Open in desktop
File renamed without changes
0 src/components/HomePage/imgs/competitive.svg → src/assets/img/home/competitive.svg
View file
Open in desktop
File renamed without changes
0 src/components/HomePage/imgs/github.svg → src/assets/img/home/github.svg
View file
Open in desktop
File renamed without changes
0 src/components/HomePage/imgs/hackathon.svg → src/assets/img/home/hackathon.svg
View file
Open in desktop
File renamed without changes
0 src/components/HomePage/imgs/open_source.svg → src/assets/img/home/open_source.svg
View file
Open in desktop
File renamed without changes
0 src/components/HomePage/imgs/team.svg → src/assets/img/home/team.svg
View file
Open in desktop
File renamed without changes
0 src/components/HomePage/imgs/web_dev.svg → src/assets/img/home/web_dev.svg
View file
Open in desktop
File renamed without changes
23 changes: 23 additions & 0 deletions src/assets/placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import Team from './img/home/team.svg';
import Work from './img/home/github.svg';

export const homepage = {
about: {
data: [
{
title: 'Who are we?',
content:
'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.',
direction: 'row',
img: Team,
},
{
title: 'What we do?',
content:
'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.',
direction: 'row-reverse',
img: Work,
},
],
},
};
159 changes: 23 additions & 136 deletions src/components/HomePage/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,154 +2,41 @@ 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 { homepage } from '../../assets/placeholder';
import SectionLayout from './SectionLayout';

const data = homepage.about.data;

function About({ onScrollClick }) {
const classes = useStyle();

return (
<SectionLayout alternate onScrollClick={onScrollClick}>
<div className={classes.root}>
<Grid container direction="row" justify="center" alignItems="center" spacing={5}>
<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>
{data.map((section) => (
<Grid
className={classes.subsection}
direction={section.direction}
justify='center'
alignItems='center'
container
spacing={8}
>
<Grid item sm={12} md={6}>
<h1>{section.title}</h1>
<p className={classes.textbody}>{section.content}</p>
</Grid>
<Grid item sm={12} md={6}>
<img className={classes.image} src={section.img} alt='Team' />
</Grid>
</Grid>
))}
</Grid>
</div>
</SectionLayout>
Expand All @@ -165,7 +52,7 @@ const useStyle = makeStyles((theme) => ({
textAlign: 'center',
},
textbody: {
textAlign:'justify',
textAlign: 'justify',
},
root: {
flexGrow: 1,
Expand Down