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/Content.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import styles from './styles';
+import { View, Text, Image, Dimensions } from 'react-native';
+import contentJson from '../../content/home.json';
+
+
+const {width} = Dimensions.get('window');
+function Content(){
+    return(
+        <View style={{marginTop: 32, marginBottom: 32}}>
+            {contentJson.sections.map((content,i)=>(
+                //Images for landscape view
+                    <View key = {i} style={styles.container}>
+                        {(width>800) && (i%2===0) ? 
+                            <View style={ (i%2===0) ? styles.imageEven : styles.imageOdd}>
+                                <Image
+                                    style={{ height: content.height, width: content.width }}
+                                    source={require("./../../assets/home/" + content.image)}
+                                />
+                            </View> 
+                        : null}
+
+                    {/* Images for potrait view */}
+                    {(width<800) ? 
+                        <View  style ={styles.imageEven }>
+                            <Image
+                                style={{ height: content.height, width: content.width }}
+                                source={require("./../../assets/home/" + content.image)}
+                            />
+                        </View> 
+                    : null}
+                    <View key={i} style={(i%2===0) ? styles.contentEven : styles.contentOdd}>
+                        <Text style={styles.heading}>{content.title}</Text>
+                        {content.content.map((text, j)=>(
+                            <Text key={j} style={styles.description}>
+                                {text.par}
+                            </Text>
+                        ))}
+                    </View>
+                    {(i%2!==0) && (width>800) ? 
+                        <View style={ (i%2===0) ? styles.imageEven : styles.imageOdd}>
+                            <Image
+                                style={{ height: content.height, width: content.width }}
+                                source={require("./../../assets/home/" + content.image)}
+                            />
+                        </View> 
+                    : null}
+
+                </View>
+            ))}
+        </View>
+
+    );
+}
+
+export default Content;
+
+
+
+
+

src/Components/Home/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Content from './Content';
+import styles from './styles';
+import {
+    View
+}from 'react-native';
+
+
+function Home(){
+
+    return(        
+            <View style = {styles.verticle, {flexWrap:"wrap"}}>
+                <Content />
+            </View>
+
+    );
+}
+
+export default Home;

src/Components/Home/styles.js

@@ -0,0 +1,65 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+const {width} = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  verticle:{
+      flexDirection: 'column',
+      width: width
+  },
+  imageEven:
+  { 
+    width: (width>800) ? 300 : '100%',
+    alignItems: 'center', 
+    paddingLeft:32,
+    marginRight: 32,
+    marginTop: 32,
+    alignSelf: 'center',
+
+    },
+  contentEven: 
+  {
+    width: (width>800) ? width * 0.7 : width*0.85,
+    paddingRight: (width>800) ? 32 : 0,
+    marginTop: 32,
+},
+imageOdd:
+  {
+    paddingRight: 32,
+    marginLeft: 32,
+    marginTop: 32,
+    width: width * 0.19,
+    alignSelf:"center"
+    },
+  contentOdd: 
+  {
+    width: (width>800) ? width * 0.7 : width*0.85,
+    marginTop: 32,
+    paddingLeft: (width>800) ? 32 : 0,
+},
+
+  heading: {
+    fontSize: 24,
+    fontWeight: 500,
+    fontFamily:'./../../Avenir-Medium',
+    color: '#103B81',
+  },
+  description: {
+    marginTop:8,
+    fontSize: 18,
+    color: '#103BB1',
+    fontFamily:'./../../Avenir-Light',
+    textAlign:"left",
+    flexWrap:"wrap"
+  },
+}
+
+);
+
+export default styles;

src/content/home.json

@@ -2,6 +2,9 @@
 	"sections" : [
 		{ 
 			"title": "Getting Started" ,
+			"image": "started.png",
+			"width": 343,
+			"height": 273,
 			"content" :  [
 			    { 
 					"par": "The AnitaB.org community is a fusion of rich values and diverse cultures consisting of members all across the seven oceans with a fearless mission of inspiring, motivating and helping women with their involvement in technical fields and has made a significant impact with regards to contribution of women in tech.\nThe other values of the organization include Accountable, Agile, Curious, Courageous, Diversity, Equity, Inclusion(DEI), encourage everyone to follow the org’s contributing guidelines and obviously passion for open source. "
@@ -11,13 +14,16 @@
 					"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."
 
 				}
 			]
 		},
 	    {
 			"title": "Ways To Contribute",
+			"image": "contribute.png",
+			"width": 273,
+			"height": 220,
 			"content":[
 				{
 					"par": "You can start contributing to our various open source projects by- \n1) Creating issues on Github regarding the project \n2) Debugging the issues \n3) Creating pull requests, testing pull requests \n4) Create mockups for new applications or redesign the current features \n5) Research about UI/UX improvements and accessibilty features. \n6) Create app walkthroughs with documents or videos, UI testing once the PR is submitted for the UI issue"
@@ -30,6 +36,9 @@
 		},
 		{
 			"title": "Our Projects",
+			"image": "our-projects.png",
+			"width": 282,
+			"height": 261,
 			"content":[
 				{
 					"par": "First and foremost, choose a programming language of your choice. Once you are done with selecting a programming language search for a project. Here's a list of our open source projects - "
@@ -60,6 +69,9 @@
 		},
 		{
 			"title": "Open Source Programs ",
+			"image": "space1.png",
+			"width": 273,
+			"height": 208,
 			"content" : [
 				{
 					"par": "1) Google Summer of Code \nAnitaB.org has been actively participating in the Google Summer of Code in the years 2016, 2017, 2018 and is one of the most successful organizations since the very beginning. Here's what participants shared about their experience with AnitaB.org -\nMohammad Murad, former AnitaB.org GSoC mentor in his Medium blog says- AnitaB.org is very different, along with writing coding equal importance is given to interacting with the community. The community also helps in personal development and personal growth. \nIsabel Costa, GSoC 2018 participant in her Medium blog says- I got to meet incredible people from the AnitaB.org community. I grew personally and professionally by sharing and learning from other’s perspectives. Being recognized for my work as the Most Outstanding Student by Systers made me very proud of my achievements. This was truly an awesome experience. "