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 c5a0bda..05e25b0 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"moxios": "^0.4.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/__tests__/components/Homepage/Welcome.test.js b/src/__tests__/components/Homepage/Welcome.test.js
index 103efa5..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 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.');
});
it('renders focus section content', () => {
act(() => {
render(, container);
});
- expect(container.textContent).toBe('Focus Section');
+ expect(container.textContent).toBe('Our FocusOpen Source');
});
it('renders contact us section content', () => {
diff --git a/src/assets/img/home/ai.svg b/src/assets/img/home/ai.svg
new file mode 100644
index 0000000..c5ac0cf
--- /dev/null
+++ b/src/assets/img/home/ai.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/img/home/app_dev.svg b/src/assets/img/home/app_dev.svg
new file mode 100644
index 0000000..d20e4d1
--- /dev/null
+++ b/src/assets/img/home/app_dev.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/img/home/competitive.svg b/src/assets/img/home/competitive.svg
new file mode 100644
index 0000000..042e408
--- /dev/null
+++ b/src/assets/img/home/competitive.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/img/home/github.svg b/src/assets/img/home/github.svg
new file mode 100644
index 0000000..ff73cf0
--- /dev/null
+++ b/src/assets/img/home/github.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/img/home/hackathon.svg b/src/assets/img/home/hackathon.svg
new file mode 100644
index 0000000..683773e
--- /dev/null
+++ b/src/assets/img/home/hackathon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/img/home/open_source.svg b/src/assets/img/home/open_source.svg
new file mode 100644
index 0000000..545d68e
--- /dev/null
+++ b/src/assets/img/home/open_source.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/img/home/team.svg b/src/assets/img/home/team.svg
new file mode 100644
index 0000000..296c267
--- /dev/null
+++ b/src/assets/img/home/team.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/img/home/web_dev.svg b/src/assets/img/home/web_dev.svg
new file mode 100644
index 0000000..7896b5f
--- /dev/null
+++ b/src/assets/img/home/web_dev.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/placeholder.js b/src/assets/placeholder.js
new file mode 100644
index 0000000..775fec9
--- /dev/null
+++ b/src/assets/placeholder.js
@@ -0,0 +1,64 @@
+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: {
+ 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,
+ },
+ ],
+ },
+ 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/About.js b/src/components/HomePage/About.js
index 8751c4a..96532bf 100644
--- a/src/components/HomePage/About.js
+++ b/src/components/HomePage/About.js
@@ -1,14 +1,44 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import { homepage } from '../../assets/placeholder';
import SectionLayout from './SectionLayout';
+const data = homepage.about.data;
+
function About({ onScrollClick }) {
const classes = useStyle();
return (
- About Section
+
+
+ {/* Section Heading */}
+
+ About OpenCode
+
+
+ {data.map((section) => (
+
+
+ {section.title}
+ {section.content}
+
+
+ 
+
+
+ ))}
+
+
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,
+ },
}));
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/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: {