From 8d1ce499ea1d9bf236fe7019418dcd567738f5fc Mon Sep 17 00:00:00 2001 From: SaswatM-62 Date: Sun, 15 Nov 2020 20:39:26 +0530 Subject: [PATCH 1/7] Add About Section --- src/components/HomePage/About.js | 164 ++++++++++++++++++- src/components/HomePage/SectionLayout.js | 7 +- src/components/HomePage/imgs/ai.svg | 1 + src/components/HomePage/imgs/app_dev.svg | 1 + src/components/HomePage/imgs/competitive.svg | 1 + src/components/HomePage/imgs/github.svg | 1 + src/components/HomePage/imgs/hackathon.svg | 1 + src/components/HomePage/imgs/open_source.svg | 1 + src/components/HomePage/imgs/team.svg | 1 + src/components/HomePage/imgs/web_dev.svg | 1 + src/config/theme.js | 1 + 11 files changed, 175 insertions(+), 5 deletions(-) create mode 100644 src/components/HomePage/imgs/ai.svg create mode 100644 src/components/HomePage/imgs/app_dev.svg create mode 100644 src/components/HomePage/imgs/competitive.svg create mode 100644 src/components/HomePage/imgs/github.svg create mode 100644 src/components/HomePage/imgs/hackathon.svg create mode 100644 src/components/HomePage/imgs/open_source.svg create mode 100644 src/components/HomePage/imgs/team.svg create mode 100644 src/components/HomePage/imgs/web_dev.svg diff --git a/src/components/HomePage/About.js b/src/components/HomePage/About.js index 8751c4a..c5c6c15 100644 --- a/src/components/HomePage/About.js +++ b/src/components/HomePage/About.js @@ -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'; @@ -8,7 +19,139 @@ function About({ onScrollClick }) { return ( -

About Section

+
+ + {/* Section Heading */} + +

About OpenCode

+
+ + {/*Who we are section*/} + + +

Who are we?

+

"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."

+
+ + Team + +
+ + {/*What we do section*/} + + +

What we do?

+

"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."

+
+ + Work + +
+ + {/* Our Specializations */} + +

Our Specializations

+
+ + {/* Open Source */} + + +

Open Source

+

"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."

+
+ + Open Source + +
+ + {/* Web Development */} + + +

Web Development

+

"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."

+
+ + Web Development + +
+ + {/* App Development */} + + +

App Development

+

"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."

+
+ + App Development + +
+ + {/* Competitive Programming */} + + +

Competitive Programming

+

"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."

+
+ + Competitive Programming + +
+ + {/* Hackathons */} + + +

Hackathons

+

"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."

+
+ + Hackathon + +
+ + {/* AI */} + + +

ML & AI

+

"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."

+
+ + ML & AI + +
+
+
); } @@ -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', }, })); diff --git a/src/components/HomePage/SectionLayout.js b/src/components/HomePage/SectionLayout.js index b6e5178..474c821 100644 --- a/src/components/HomePage/SectionLayout.js +++ b/src/components/HomePage/SectionLayout.js @@ -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', @@ -38,4 +37,4 @@ const useStyle = makeStyles((theme) => ({ position: 'absolute', bottom: 20, }, -})); +})); \ No newline at end of file diff --git a/src/components/HomePage/imgs/ai.svg b/src/components/HomePage/imgs/ai.svg new file mode 100644 index 0000000..c5ac0cf --- /dev/null +++ b/src/components/HomePage/imgs/ai.svg @@ -0,0 +1 @@ +chat_bot \ No newline at end of file diff --git a/src/components/HomePage/imgs/app_dev.svg b/src/components/HomePage/imgs/app_dev.svg new file mode 100644 index 0000000..d20e4d1 --- /dev/null +++ b/src/components/HomePage/imgs/app_dev.svg @@ -0,0 +1 @@ +Mobile_application \ No newline at end of file diff --git a/src/components/HomePage/imgs/competitive.svg b/src/components/HomePage/imgs/competitive.svg new file mode 100644 index 0000000..042e408 --- /dev/null +++ b/src/components/HomePage/imgs/competitive.svg @@ -0,0 +1 @@ +programming \ No newline at end of file diff --git a/src/components/HomePage/imgs/github.svg b/src/components/HomePage/imgs/github.svg new file mode 100644 index 0000000..ff73cf0 --- /dev/null +++ b/src/components/HomePage/imgs/github.svg @@ -0,0 +1 @@ +developer activity \ No newline at end of file diff --git a/src/components/HomePage/imgs/hackathon.svg b/src/components/HomePage/imgs/hackathon.svg new file mode 100644 index 0000000..683773e --- /dev/null +++ b/src/components/HomePage/imgs/hackathon.svg @@ -0,0 +1 @@ +work_together \ No newline at end of file diff --git a/src/components/HomePage/imgs/open_source.svg b/src/components/HomePage/imgs/open_source.svg new file mode 100644 index 0000000..545d68e --- /dev/null +++ b/src/components/HomePage/imgs/open_source.svg @@ -0,0 +1 @@ +open source \ No newline at end of file diff --git a/src/components/HomePage/imgs/team.svg b/src/components/HomePage/imgs/team.svg new file mode 100644 index 0000000..296c267 --- /dev/null +++ b/src/components/HomePage/imgs/team.svg @@ -0,0 +1 @@ +team spirit \ No newline at end of file diff --git a/src/components/HomePage/imgs/web_dev.svg b/src/components/HomePage/imgs/web_dev.svg new file mode 100644 index 0000000..7896b5f --- /dev/null +++ b/src/components/HomePage/imgs/web_dev.svg @@ -0,0 +1 @@ +web_development \ No newline at end of file diff --git a/src/config/theme.js b/src/config/theme.js index f7f7016..42849c3 100644 --- a/src/config/theme.js +++ b/src/config/theme.js @@ -9,6 +9,7 @@ let theme = createMuiTheme({ background: { paper: '#00587a', default: '#0f3057', + darkgrey: '#222222', }, }, breakpoints: { From 6a0bb394348b27d7dee436e1424a03b086345516 Mon Sep 17 00:00:00 2001 From: SaswatM-62 Date: Sun, 15 Nov 2020 21:27:23 +0530 Subject: [PATCH 2/7] Update test for About section --- src/__tests__/components/Homepage/Welcome.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/components/Homepage/Welcome.test.js b/src/__tests__/components/Homepage/Welcome.test.js index 103efa5..21df254 100644 --- a/src/__tests__/components/Homepage/Welcome.test.js +++ b/src/__tests__/components/Homepage/Welcome.test.js @@ -32,7 +32,7 @@ it('renders about section content', () => { act(() => { render(, container); }); - expect(container.textContent).toBe('About Section'); + expect(container.textContent).toBe('About OpenCodeWho are we?\"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.\"What we do?\"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.\"Our SpecializationsOpen Source\"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.\"Web Development\"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.\"App Development\"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.\"Competitive Programming\"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.\"Hackathons\"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.\"ML & AI\"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.\"'); }); it('renders focus section content', () => { From 353d6c6e219d793996277cf3efd3748beacac8bd Mon Sep 17 00:00:00 2001 From: Ritesh Patil Date: Sun, 15 Nov 2020 22:22:06 +0530 Subject: [PATCH 3/7] Code cleanup, add assets/img and assets/placeholder --- .../HomePage/imgs => assets/img/home}/ai.svg | 0 .../imgs => assets/img/home}/app_dev.svg | 0 .../imgs => assets/img/home}/competitive.svg | 0 .../imgs => assets/img/home}/github.svg | 0 .../imgs => assets/img/home}/hackathon.svg | 0 .../imgs => assets/img/home}/open_source.svg | 0 .../imgs => assets/img/home}/team.svg | 0 .../imgs => assets/img/home}/web_dev.svg | 0 src/assets/placeholder.js | 23 +++ src/components/HomePage/About.js | 159 +++--------------- 10 files changed, 46 insertions(+), 136 deletions(-) rename src/{components/HomePage/imgs => assets/img/home}/ai.svg (100%) rename src/{components/HomePage/imgs => assets/img/home}/app_dev.svg (100%) rename src/{components/HomePage/imgs => assets/img/home}/competitive.svg (100%) rename src/{components/HomePage/imgs => assets/img/home}/github.svg (100%) rename src/{components/HomePage/imgs => assets/img/home}/hackathon.svg (100%) rename src/{components/HomePage/imgs => assets/img/home}/open_source.svg (100%) rename src/{components/HomePage/imgs => assets/img/home}/team.svg (100%) rename src/{components/HomePage/imgs => assets/img/home}/web_dev.svg (100%) create mode 100644 src/assets/placeholder.js diff --git a/src/components/HomePage/imgs/ai.svg b/src/assets/img/home/ai.svg similarity index 100% rename from src/components/HomePage/imgs/ai.svg rename to src/assets/img/home/ai.svg diff --git a/src/components/HomePage/imgs/app_dev.svg b/src/assets/img/home/app_dev.svg similarity index 100% rename from src/components/HomePage/imgs/app_dev.svg rename to src/assets/img/home/app_dev.svg diff --git a/src/components/HomePage/imgs/competitive.svg b/src/assets/img/home/competitive.svg similarity index 100% rename from src/components/HomePage/imgs/competitive.svg rename to src/assets/img/home/competitive.svg diff --git a/src/components/HomePage/imgs/github.svg b/src/assets/img/home/github.svg similarity index 100% rename from src/components/HomePage/imgs/github.svg rename to src/assets/img/home/github.svg diff --git a/src/components/HomePage/imgs/hackathon.svg b/src/assets/img/home/hackathon.svg similarity index 100% rename from src/components/HomePage/imgs/hackathon.svg rename to src/assets/img/home/hackathon.svg diff --git a/src/components/HomePage/imgs/open_source.svg b/src/assets/img/home/open_source.svg similarity index 100% rename from src/components/HomePage/imgs/open_source.svg rename to src/assets/img/home/open_source.svg diff --git a/src/components/HomePage/imgs/team.svg b/src/assets/img/home/team.svg similarity index 100% rename from src/components/HomePage/imgs/team.svg rename to src/assets/img/home/team.svg diff --git a/src/components/HomePage/imgs/web_dev.svg b/src/assets/img/home/web_dev.svg similarity index 100% rename from src/components/HomePage/imgs/web_dev.svg rename to src/assets/img/home/web_dev.svg diff --git a/src/assets/placeholder.js b/src/assets/placeholder.js new file mode 100644 index 0000000..12c6024 --- /dev/null +++ b/src/assets/placeholder.js @@ -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, + }, + ], + }, +}; diff --git a/src/components/HomePage/About.js b/src/components/HomePage/About.js index c5c6c15..96532bf 100644 --- a/src/components/HomePage/About.js +++ b/src/components/HomePage/About.js @@ -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 (
- + {/* Section Heading */}

About OpenCode

- {/*Who we are section*/} - - -

Who are we?

-

"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."

-
- - Team - -
- - {/*What we do section*/} - - -

What we do?

-

"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."

-
- - Work - -
- - {/* Our Specializations */} - -

Our Specializations

-
- - {/* Open Source */} - - -

Open Source

-

"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."

-
- - Open Source - -
- - {/* Web Development */} - - -

Web Development

-

"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."

-
- - Web Development - -
- - {/* App Development */} - - -

App Development

-

"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."

-
- - App Development - -
- - {/* Competitive Programming */} - - -

Competitive Programming

-

"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."

-
- - Competitive Programming - -
- - {/* Hackathons */} - - -

Hackathons

-

"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."

-
- - Hackathon - -
- - {/* AI */} - - -

ML & AI

-

"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."

-
- - ML & AI - -
+ {data.map((section) => ( + + +

{section.title}

+

{section.content}

+
+ + Team + +
+ ))}
@@ -165,7 +52,7 @@ const useStyle = makeStyles((theme) => ({ textAlign: 'center', }, textbody: { - textAlign:'justify', + textAlign: 'justify', }, root: { flexGrow: 1, From a782e07d88fbf161ef86c920b572dab287496a03 Mon Sep 17 00:00:00 2001 From: SaswatM-62 Date: Sat, 28 Nov 2020 16:47:45 +0530 Subject: [PATCH 4/7] Add Focus Section --- package.json | 2 + src/assets/placeholder.js | 41 ++++++++++++++++++++ src/components/HomePage/Focus.js | 65 +++++++++++++++++++++++++++++++- 3 files changed, 107 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index c5a0bda..2bb65cd 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", "moxios": "^0.4.0", + "node-sass": "^5.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-material-ui-carousel": "^2.1.1", "react-redux": "^7.2.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3", diff --git a/src/assets/placeholder.js b/src/assets/placeholder.js index 12c6024..775fec9 100644 --- a/src/assets/placeholder.js +++ b/src/assets/placeholder.js @@ -1,5 +1,12 @@ import Team from './img/home/team.svg'; import Work from './img/home/github.svg'; +import OpenSource from './img/home/open_source.svg'; +import WebDev from './img/home/web_dev.svg'; +import AppDev from './img/home/app_dev.svg'; +import Competitive from './img/home/competitive.svg'; +import Hackathon from './img/home/hackathon.svg'; +import Ai from './img/home/ai.svg'; + export const homepage = { about: { @@ -20,4 +27,38 @@ export const homepage = { }, ], }, + focus: { + data: [ + { + img: OpenSource, + caption: "Open Source", + background: "linear-gradient(to bottom right, #0a8270, #7cff6b)" + }, + { + img: WebDev, + caption: "Web Development", + background: "linear-gradient(to bottom right, #5b146f, #ff009c)" + }, + { + img: AppDev, + caption: "App Development", + background: "linear-gradient(to bottom right, #72b2e4, #92e1e2)" + }, + { + img: Ai, + caption: "Machine Learning and Artificial Intelligence", + background: "linear-gradient(to bottom right, #fd8451, #ffbd6f)" + }, + { + img: Hackathon, + caption: "Hackathon", + background: "linear-gradient(to bottom right, #a3c9e2, #9618f7)" + }, + { + img: Competitive, + caption: "Competitive Programming", + background: "linear-gradient(to bottom right, #efeb77, #f6af04)" + }, + ], + }, }; diff --git a/src/components/HomePage/Focus.js b/src/components/HomePage/Focus.js index 6172400..c1d8f51 100644 --- a/src/components/HomePage/Focus.js +++ b/src/components/HomePage/Focus.js @@ -1,14 +1,60 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; +import Grid from '@material-ui/core/Grid'; +import Card from '@material-ui/core/Card'; +import CardActionArea from '@material-ui/core/CardActionArea'; +import CardContent from '@material-ui/core/CardContent'; +import CardMedia from '@material-ui/core/CardMedia'; +import Typography from '@material-ui/core/Typography'; +import Carousel from 'react-material-ui-carousel' +import { homepage } from '../../assets/placeholder'; import SectionLayout from './SectionLayout'; +const data = homepage.focus.data; + function Focus({ onScrollClick }) { const classes = useStyle(); return ( -

Focus Section

+
+ + {/* Section Heading */} + +

Our Focus

+
+ + {/* Carousel */} + + + {data.map((section) => ( + + + + + + {section.caption} + + + + + ))} + + +
+
); } @@ -20,4 +66,21 @@ const useStyle = makeStyles((theme) => ({ fontFamily: theme.typography.fontFamily, fontSize: '3em', }, + root: { + flexGrow: 1, + paddingTop: theme.mixins.toolbar.minHeight, + textAlign: 'center', + width: '100%', + height: '95vh', + backgroundColor: theme.palette.background.darkgrey, + paddingBottom: '5rem', + }, + card: { + width: '70%', + height: '70%', + margin: '0 auto', + }, + carousel: { + maxwidth: 400, + }, })); From c139412931f61029afb82b06255ecf07965f3b0b Mon Sep 17 00:00:00 2001 From: SaswatM-62 Date: Sat, 28 Nov 2020 16:54:02 +0530 Subject: [PATCH 5/7] Update Focus Section --- src/components/HomePage/Focus.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HomePage/Focus.js b/src/components/HomePage/Focus.js index c1d8f51..ed2c25b 100644 --- a/src/components/HomePage/Focus.js +++ b/src/components/HomePage/Focus.js @@ -26,7 +26,7 @@ function Focus({ onScrollClick }) { {/* Carousel */} - + Date: Sat, 28 Nov 2020 19:36:29 +0530 Subject: [PATCH 6/7] Update test --- package-lock.json | 25 +++++++++++++++++++ package.json | 1 - .../components/Homepage/Welcome.test.js | 2 +- 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4130c95..42fb733 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2651,6 +2651,14 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, + "auto-bind": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-2.1.1.tgz", + "integrity": "sha512-NUwV1i9D3vxxY1KnfZgSZ716d6ovY7o8LfOwLhGIPFBowIb6Ln6DBW64+jCqPzUznel2hRSkQnYQqvh7/ldw8A==", + "requires": { + "@types/react": "^16.8.12" + } + }, "autoprefixer": { "version": "9.8.6", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz", @@ -11335,6 +11343,15 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-material-ui-carousel": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.1.1.tgz", + "integrity": "sha512-BFT1y6HjJ32mua9KNRSsP5SCDOZnlHfuEbfEzMGExG1/SZD23SYanhiZdfgYW0JGsfbcm+iQqpdcQR0aHyAutQ==", + "requires": { + "auto-bind": "^2.1.1", + "react-swipeable": "^5.5.1" + } + }, "react-redux": { "version": "7.2.1", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.1.tgz", @@ -11453,6 +11470,14 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-swipeable": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-5.5.1.tgz", + "integrity": "sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==", + "requires": { + "prop-types": "^15.6.2" + } + }, "react-test-renderer": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz", diff --git a/package.json b/package.json index 2bb65cd..05e25b0 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", "moxios": "^0.4.0", - "node-sass": "^5.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-material-ui-carousel": "^2.1.1", diff --git a/src/__tests__/components/Homepage/Welcome.test.js b/src/__tests__/components/Homepage/Welcome.test.js index 21df254..9e66ef3 100644 --- a/src/__tests__/components/Homepage/Welcome.test.js +++ b/src/__tests__/components/Homepage/Welcome.test.js @@ -39,7 +39,7 @@ it('renders focus section content', () => { act(() => { render(, container); }); - expect(container.textContent).toBe('Focus Section'); + expect(container.textContent).toBe('Our Focus'); }); it('renders contact us section content', () => { From 56146340e0b61b53226f26ed82132c2ba93e262d Mon Sep 17 00:00:00 2001 From: SaswatM-62 Date: Sat, 28 Nov 2020 19:50:47 +0530 Subject: [PATCH 7/7] Update test for Focus section --- src/__tests__/components/Homepage/Welcome.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/__tests__/components/Homepage/Welcome.test.js b/src/__tests__/components/Homepage/Welcome.test.js index 9e66ef3..574f0b4 100644 --- a/src/__tests__/components/Homepage/Welcome.test.js +++ b/src/__tests__/components/Homepage/Welcome.test.js @@ -32,14 +32,14 @@ it('renders about section content', () => { act(() => { render(, container); }); - expect(container.textContent).toBe('About OpenCodeWho are we?\"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.\"What we do?\"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.\"Our SpecializationsOpen Source\"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.\"Web Development\"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.\"App Development\"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.\"Competitive Programming\"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.\"Hackathons\"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.\"ML & AI\"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.\"'); + expect(container.textContent).toBe('About OpenCodeWho are we?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.What we do?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.'); }); it('renders focus section content', () => { act(() => { render(, container); }); - expect(container.textContent).toBe('Our Focus'); + expect(container.textContent).toBe('Our FocusOpen Source'); }); it('renders contact us section content', () => {