made changes and moved text to content

Author: Bucky25

src/Components/Content/index.js

@@ -4,7 +4,7 @@ import Projects from './../Projects';
 import Home from './../Home';
 import AboutUs from './../AboutUs';
 import Contribute from '../Contribute';
-import Events from '../Events';
+import OurEvents from './../OurEvents';
 
 function Content({ selected, titles }) {
   if (selected === 0) {
@@ -13,8 +13,8 @@ function Content({ selected, titles }) {
     return <AboutUs />;
   } else if (selected === 3) {
     return <Projects />;
-  } else if(selected ===  4) {
-    return <Events />
+  } else if(selected === 4) {
+    return <OurEvents />; 
   }
   if (selected === 5) {
     return <Contribute />;

src/Components/Header/index.js

@@ -64,6 +64,8 @@ function MenuItem(index, selected, setSelected, title) {
 const styles = StyleSheet.create({
   logoContainer: {
     flex: 1,
+    marginRight:70,
+
   },
   buttonContainer: { marginTop: 25, marginLeft: 40 },
 });

src/Components/ImageContent/index.js

@@ -26,11 +26,12 @@ const ImageContent = ({
         }
       }}
     >
+    <View style={styles.sectionImage}>
       <ScaledImage
         source={image}
         width={imageContainerWidth}
-        style={styles.sectionImage}
       />
+    </View>
       <View style={styles.subContainer}>
         <Children />
       </View>
@@ -55,7 +56,6 @@ const createStyles = (imageSide) =>
       minWidth: 200,
     },
     sectionImage: {
-      flex: 1,
       paddingLeft: 16,
       paddingRight: 16,
     },

src/Components/ImageTextSection/index.js

@@ -12,11 +12,12 @@ const ImageTextSection = ({
   const styles = createStyles(imageSide);
   return (
     <View style={styles.container}>
+      <View style={styles.sectionImage}>
       <ScaledImage
         source={image}
         height={imageHeight}
-        style={styles.sectionImage}
       />
+      </View>
       <View style={styles.subContainer}>
         <Text style={styles.header}>{title}</Text>
         {content.map((text) => (

src/Components/OurEvents/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ImageContent from './../ImageContent';
+import SectionHeader from './../SectionHeader';
+import { getEvents } from './../../content/our_events';
+import { Box, Content, Description } from './styles';
+
+
+function OurEvents() {
+  const content = getEvents();
+  const renderContent = (index, section) => {
+    return (
+      <Content key={index}>
+        <SectionHeader title={section.title} />
+        {section.content.map((content, indx) => {
+          return <Description key={indx}>{content.par}</Description>;
+        })}
+      </Content>
+    );
+  };
+
+  return (
+    <Box>
+    {content.sections.map((section, index) => {
+      return (
+        <ImageContent
+          image={section.image.source}
+          imageSide={index % 2 === 0 ? 'right' : 'left'}
+          Children={() => renderContent(index, section)}
+        />
+      );
+    })}
+    </Box>
+    
+  );
+}
+export default OurEvents;

src/Components/OurEvents/styles.js

@@ -0,0 +1,66 @@
+import { View, Text, StyleSheet } from 'react-native';
+import { styled } from 'react-native-reflect';
+
+export const Box = styled(View, {
+  flex: 1,
+  width: '80%',
+  flexDirection: 'column',
+  paddingLeft: 16,
+  paddingRight: 16,
+  flexWrap: 'wrap',
+  marginTop: 32,
+});
+
+export const Content = styled(View, {
+  flexDirection: 'column',
+  paddingLeft: 16,
+  marginRight:77,
+});
+
+export const Description = styled(Text, {
+  flex: 1,
+  marginTop: 32,
+  paddingLeft: 16,
+  fontSize: 18,
+  flexGrow: 1,
+  fontWeight: 200,
+  color: '#103B81',
+  textAlign: 'left',
+});
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginTop: 18,
+    marginBottom: 18,
+  },
+  card: {
+    width: '33%',
+    minWidth: 251,
+  },
+  cardMiddle: {
+    alignItems: 'center',
+  },
+  cardLast: {
+    alignItems: 'flex-end',
+  },
+  imageText: {
+    fontSize: 14,
+    fontWeight: '300',
+    fontFamily: 'Avenir',
+    textAlign: 'center',
+    width: 180,
+    flex: 1,
+    color: '#103B81',
+  },
+  description: {
+    fontSize: 14,
+    fontWeight: '300',
+    color: '#103B81',
+    marginLeft: 32,
+  },
+});
+
+export default styles;

src/assets/our_events.png

@@ -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 respectful to everyone and refraining 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 admins as soon as possible."
 
 				}
 			]
@@ -20,11 +20,11 @@
 			"title": "Ways To Contribute",
 			"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"
+					"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 accessibility features. \n6) Create app walkthroughs with documents or videos, UI testing once the PR is submitted for the UI issue"
 
 				},
 				{
-					"par": "Each active repository has a stream to direct questions. \nIssues labeled as 'First Timers Only' are meant for contributors who have not contributed to the project yet. Please choose other issues to contribute to, if you have already contributed to these type of issues. \nMake sure to follow the Commit Message Style Guide when submitting PRs which will require review by atleast one maintainer to be merged to the main code."
+					"par": "Each active repository has a stream to direct questions. \nIssues labeled as 'First Timers Only' are meant for contributors who have not contributed to the project yet. Please choose other issues to contribute to, if you have already contributed to these types of issues. \nMake sure to follow the Commit Message Style Guide when submitting PRs which will require review by atleast one maintainer to be merged to the main code."
 				}
 			]
 		},

src/content/home.json

@@ -0,0 +1,31 @@
+const our_events={
+    sections: [
+        {
+            title: "EVENTS",
+            image: {
+                source:require("./../assets/our_events.png"),
+            },
+            content: [
+                {
+                    par : "We at AnitaB.org Open Source beleive in Inspiration through Action. To facilitate our Open Souce journey and continue the AnitaB.org legacy we conduct enthralling events all year long, with the purpose of bridging the gap between creative developers and our Open Source community. Keep scrolling to catch a glipse of few such events! ",
+                }
+            ]
+        },
+        {
+            title: "TITLE 2",
+            image:{
+                source:require("./../assets/our_events.png"),
+            },
+            content: [
+                {
+                    par: "We at AnitaB.org Open Source beleive in Inspiration through Action. To facilitate our Open Souce journey and continue the AnitaB.org legacy we conduct enthralling events all year long, with the purpose of bridging the gap between creative developers and our Open Source community. Keep scrolling to catch a glipse of few such events! ",
+                }
+            ]
+        }
+    ]
+}
+
+
+export const getEvents = () => {
+    return our_events;
+  };