Added a section of home page

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/styled-components": "^5.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-native-web": "^0.12.2",

src/App.js

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import Header from './Components/Header';
 import Content from './Components/Content';
 import Footer from './Components/Footer';
+import Home from './Components/Home';
 
 function App() {
   const [selected, setSelected] = useState(0);
@@ -17,10 +18,11 @@ function App() {
   return (
     <View style={{ position: 'absolute', width: '100%', alignItems: 'center' }}>
       <Header selected={selected} setSelected={setSelected} titles={titles} />
+      <Home />
       <Content selected={selected} titles={titles} />
       <Footer />
     </View>
   );
 }
 
-export default App;
+export default App;

src/Components/Home/GettingStarted.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styles from './styles';
+import { View } from 'react-native';
+import contentJson from '../../content/home.json';
+import SectionHeader from '../SectionHeader';
+import SectionImage from '../SectionImage';
+import SectionBody from '../SectionBody';
+
+const {sections} = contentJson;
+var content ="";
+
+sections[0].content.forEach(text=>{
+    content += text.par+"\n";
+})
+function GettingStarted(){
+    return(
+        <View style={styles.container}>
+            <SectionImage
+                source={require("./../../assets/home/started.png")} 
+                height={273} 
+                width={343}
+            />
+            <View>
+                <SectionHeader title={sections[0].title} ></SectionHeader>
+                <SectionBody content={content}></SectionBody>
+            </View>
+        </View>
+
+    );
+}
+
+export default GettingStarted;

src/Components/Home/OpenSourcePrograms.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import styles from './styles';
+import { View, Dimensions } from 'react-native';
+import contentJson from '../../content/home.json';
+import SectionHeader from '../SectionHeader';
+import SectionImage from '../SectionImage';
+import SectionBody from '../SectionBody';
+
+const {width} = Dimensions.get('window');
+const {sections} = contentJson;
+var content ="";
+
+sections[3].content.forEach(text=>{
+    content += text.par+"\n";
+})
+function GettingStarted(){
+    return(
+        <View style={styles.container}>
+            {(width-0.7*width<400) ? 
+            <SectionImage
+                source={require("./../../assets/home/space1.png")} 
+                height={208} 
+                width={273}
+            /> : null}
+            <View>
+                <SectionHeader title={sections[3].title}></SectionHeader>
+                <SectionBody content={content}></SectionBody>
+
+            </View>
+            {(width-0.7*width>=400) ? 
+            <SectionImage
+                source={require("./../../assets/home/space1.png")} 
+                height={208} 
+                width={273}
+            /> : null}
+        </View>
+
+    );
+}
+
+export default GettingStarted;

src/Components/Home/OurProjects.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styles from './styles';
+import { View } from 'react-native';
+import contentJson from '../../content/home.json';
+import SectionHeader from '../SectionHeader';
+import SectionImage from '../SectionImage';
+import SectionBody from '../SectionBody';
+
+const {sections} = contentJson;
+var content ="";
+
+sections[2].content.forEach(text=>{
+    content += text.par+"\n";
+})
+function GettingStarted(){
+    return(
+        <View style={styles.container}>
+            <SectionImage
+                source={require("./../../assets/home/our-projects.png")} 
+                height={261} 
+                width={282}
+            />
+            <View>
+                <SectionHeader title={sections[2].title}></SectionHeader>
+                <SectionBody content={content}></SectionBody>
+            </View>
+        </View>
+
+    );
+}
+
+export default GettingStarted;

src/Components/Home/WaysToContribute.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import styles from './styles';
+import { View, Dimensions } from 'react-native';
+import contentJson from '../../content/home.json';
+import SectionHeader from '../SectionHeader';
+import SectionImage from '../SectionImage';
+import SectionBody from '../SectionBody';
+
+const {width} = Dimensions.get('window');
+const {sections} = contentJson;
+var content ="";
+
+sections[1].content.forEach(text=>{
+    content += text.par+"\n";
+})
+function GettingStarted(){
+    return(
+        <View style={styles.container}>
+           {(width-0.7*width<400) ? 
+            <SectionImage
+                source={require("./../../assets/home/contribute.png")} 
+                height={220} 
+                width={273}
+            /> : null }
+            <View>
+                <SectionHeader title={sections[1].title}></SectionHeader>
+                <SectionBody content={content}></SectionBody>
+            </View>
+            {(width-0.7*width>=400) ? 
+            <SectionImage
+                source={require("./../../assets/home/contribute.png")} 
+                height={220} 
+                width={273}
+            /> : null }
+        </View>
+
+    );
+}
+
+export default GettingStarted;

src/Components/Home/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import GettingStarted from './GettingStarted';
+import OurProjects from './OurProjects';
+import OpenSourcePrograms from './OpenSourcePrograms';
+import WaysToContribute from './WaysToContribute';
+import styles from './styles';
+import {
+    View
+}from 'react-native';
+
+
+function Home(){
+
+    return(        
+            <View style = {styles.parent}>
+                <GettingStarted />
+                <WaysToContribute />
+                <OurProjects />
+                <OpenSourcePrograms />
+            </View>
+
+    );
+}
+
+export default Home;

src/Components/Home/styles.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    flexDirection: 'row',
+  },
+  parent: {
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    marginTop: 32,
+    marginBottom: 32
+  },
+});
+
+export default styles;

src/Components/SectionBody/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Text, StyleSheet, Dimensions } from 'react-native';
+
+const {width} = Dimensions.get('window');
+function SectionBody({content, width}){
+    return (
+        <View style={styles.container} >
+            <Text style={styles.body}>{content}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    body:  {
+        fontSize: 18,
+        color: '#103BB1',
+        fontFamily:'./../../Avenir-Light',
+        textAlign:"left",
+        flexWrap:"wrap"
+      },
+    container: {
+      flex: 1,
+      width: (width - 0.7*width>=400) ? width*0.7 : width*0.9,
+      marginTop: 8,
+      paddingLeft: 16,
+      paddingRight: 16,
+    },
+  });
+
+  export default SectionBody;
+

src/Components/SectionHeader/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 
-function SectionHeader({ title, index }) {
+function SectionHeader({ title, index}) {
   return (
     <View style={styles.container} key={title + index}>
       <Text style={styles.header}>{title}</Text>
@@ -20,7 +20,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     width: '100%',
-    paddingTop: 64,
+    paddingTop: 32,
     paddingLeft: 16,
     paddingRight: 16,
   },

src/Components/SectionImage/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {View, Image } from 'react-native';
+
+
+function SectionImage({source, width, height}){
+    const viewStyle = {
+        alignSelf: 'center',
+        width: 350,
+        marginTop: 32+8,
+    }
+    const imageStyle = {
+        width: width,
+        height: height,
+        alignSelf: 'center',
+    }
+    return(
+        <View style={viewStyle}>
+        <Image 
+            source={source}
+            style = {imageStyle}
+        />
+        </View>
+    )
+}
+
+
+export default SectionImage;

src/content/home.json

@@ -11,7 +11,7 @@
 					"par": "Zulip is our main communication platform and you should join us there and first give a short introduction about yourself in the #newcomers stream. Zulip consists of various streams like Documentation, Coding, Design, etc and the one that fascinates you the most is the one you should start contributing in.\nThe #announcements stream will be displaying all the important announcements. Tag our community members if there's any confusion or ask for proper guidance from them regarding your contributions to the community."
 				},
 				{  
-					"par": "Our code of conduct is simple- 'Be nice, Be respectful' which is the one of the many reasons the community coexists in harmony. The members should contribute actively keeping the policies of being repectful to everyone and refrainging from conflicts, unruly behaviour and speech. Anyone who wishes to join the community is expected to follow these guidelines.\nIf you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer or adminas soon as possible."
+					"par": "Our code of conduct is simple- 'Be nice, Be respectful' which is the one of the many reasons the community coexists in harmony. The members should contribute actively keeping the policies of being repectful to everyone and refrainging from conflicts, unruly behaviour and speech. Anyone who wishes to join the community is expected to follow these guidelines.\nIf you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer or admin as soon as possible."
 
 				}
 			]