Contribution page

src/Components/Content/index.js

@@ -6,6 +6,7 @@ import AboutUs from './../AboutUs';
 import Programs from './../Programs';
 import Contribute from '../Contribute';
 import Events from './../Events/index';
+import ContributionWays from '../Contribute/ContributionWays';
 
 function Content({ selected, titles }) {
   if (selected === 0) {
@@ -19,7 +20,10 @@ function Content({ selected, titles }) {
   } else if (selected === 4) {
     return <Events />;
   } else if (selected === 5) {
-    return <Contribute />;
+    return <>
+    <Contribute />;
+    <ContributionWays/>
+    </>
   } else {
     return (
       <View

src/Components/Contribute/ContributionWays/Way.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, Text, TouchableHighlight, Linking } from 'react-native';
+
+import styles from './styles';
+import ImageContent from '../../ImageContent';
+
+const Way = ({ heading, channels, content, imageAlign, image }) => {
+  const Child = () => (
+    <View >
+      <Text style={[styles.text, styles.heading]}>{heading}</Text>
+      <Text style={styles.text}>
+        Zulip Channels:{' '}
+        {channels.map(channel => (
+          <TouchableHighlight onPress={() => Linking.openURL(channel.url)}>
+            <Text>#{channel.name} </Text>
+          </TouchableHighlight>
+        ))}
+      </Text>
+      {content.map(({ par }, i) => (
+        <Text key={i} style={styles.text}>
+          {par}
+        </Text>
+      ))}
+    </View>
+  );
+
+  return (
+    <ImageContent
+      image={image}
+      imageSide={imageAlign}
+      Children={Child}
+      imageProportion={0.3}
+    />
+  );
+};
+
+export default Way;

src/Components/Contribute/ContributionWays/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import styles from './styles';
+import Way from './Way';
+import SectionHeader from '../../../Components/SectionHeader';
+import data from '../../../content/contribution_ways';
+
+const ContributionWays = () => (
+  <View style={styles.container}>
+    <View>
+      <SectionHeader title={data.title} />
+       { <Text style={styles.text}>{data.par}</Text>}
+    </View>
+
+    {data.ways.map((way, i) => (
+      <Way
+        key={i}
+        heading={way.title}
+        channels={way.channels}
+        content={way.content}
+        imageAlign={i % 2 ? 'right' : 'left'}
+        image={way.image}
+      />
+    ))}
+  </View>
+);
+
+export default ContributionWays;

src/Components/Contribute/ContributionWays/styles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 0,
+    marginHorizontal: 16,
+    width: '80%',
+
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: 200,
+    color: '#103B81',
+    paddingLeft: 16,
+    marginTop: 0,
+    padding:16,
+  },
+  heading: {
+    fontSize: 32,
+    fontWeight: 400,
+    marginTop: 0,
+  },
+
+});
+
+export default styles;

src/Components/ImageContent/index.js

@@ -7,7 +7,7 @@ const ImageContent = ({
   imageSide,
   minImageWidth = 500,
   Children,
-  imageProportion = 0.5,
+  imageProportion = 0.4,
 }) => {
   const [imageContainerWidth, setImageContainerWidth] = useState(minImageWidth);
   const styles = createStyles(imageSide);
@@ -55,7 +55,7 @@ const createStyles = (imageSide) =>
     sectionImage: {
       paddingLeft: 16,
       paddingRight: 16,
-      marginTop: 136,
+      marginTop: 32,
     },
   });
 

src/content/contribution_ways.js

@@ -0,0 +1,158 @@
+const contributionWays = {
+  title: 'WAYS TO CONTRIBUTE',
+  par:
+    'Contributing to open source can be a rewarding way to learn, teach, and build experience in just about any skill you can imagine. You can contribute in many ways to this organization and help in developing our organization and your skills too.',
+  ways: [
+    {
+      title: 'CODE',
+      image: require('../assets/contribution/code.png'),
+      channels: [
+        {
+          name: 'newcomer',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+        {
+          name: 'design',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+      ],
+      content: [
+        {
+          par:
+            'Do you like to code?',
+        },
+        {
+          par:
+            'If the answer is yes, then go to our GitHub pageand find the issues you can solve.If you are a beginner then start with a beginner-friendly issue or First-timers only issue.Improve tooling and testing.',
+        },
+
+        {
+          par:
+            'Do you also like to help others with coding?Well, you can also review other works and guide them towards the right path.Answer questions for people on open issues.',
+        },
+      ],
+    },
+    {
+      title: 'DOCUMENTATION /TRAINING',
+      image: require('../assets/contribution/documentation_training.png'),
+      channels: [
+        {
+          name: 'newcomer',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+        {
+          name: 'design',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+      ],
+      content: [
+        {
+          par:
+            'Contribution in the open-source organization is not always about coding and developing new tools but it also consists of good and proper documentation.',
+        },
+        {
+          par:
+            'It includes all the steps and information about the organization and how it works.If you want a good start then you can start with basic and First-time comers documentation issues.',
+        },
+      ],
+    },
+    {
+      title: 'DESIGN',
+      image: require('../assets/contribution/design_community.png'),
+      channels: [
+        {
+          name: 'newcomer',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+        {
+          name: 'design',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+      ],
+      content: [
+        {
+          par:
+            'Come and help in making a user-friendly design.',
+        },
+        {
+          par:
+            'One way of contributing is to open an issue on the project repository and tell maintainers about your idea.You can also report bugs related to the project and they are counted as a contribution as well.You can also help define a style guide to help the project have a consistent visual design.',
+        },
+      ],
+    },
+    {
+      title: 'TESTING',
+      image: require('../assets/contribution/testing.png'),
+      channels: [
+        {
+          name: 'newcomer',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+        {
+          name: 'design',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+      ],
+      content: [
+        {
+          par:
+            'Testing is one of the most important steps in the development of anything. If you are a good observer and want to test an app, website, or a solution to some issues then you must go for it.',
+        },
+        {
+          par:
+            ' Any project which are designed to run on multiple platforms can have all sorts of portability problems. When a release approaches and a beta or release candidate is published, the project leader hopes that it will be tested by many different people on many different platforms. You can be one of those people and help ensure that the package works on your platform.',
+        },
+      ],
+    },
+    {
+      title: 'OUTREACH /RESEARCH',
+      image: require('../assets/contribution/research_outreach.png'),
+      channels: [
+        {
+          name: 'newcomer',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+        {
+          name: 'design',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/212722-general',
+        },
+      ],
+      content: [
+        {
+          par:
+            'A good contribution takes time as you have to do a lot of research to find out what is the best for you. Similarly, the field of open source development needs a lot of research, feedback, and study to improve the platform and make it popular among the people.',
+        },
+        {
+          par:
+            'One way of contributing is to open an issue on the project repository and tell maintainers about your idea. You can also report bugs related to the project and they are counted as a contribution as well.You can also help define a style guide to help the project have a consistent visual design.',
+        },
+      ],
+    },
+    {
+      title: 'PROJECT MANAGEMENT',
+      image: require('../assets/contribution/project_management.png'),
+      channels: [
+        {
+          name: 'newcomer',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/223071-newcomers',
+        },
+        {
+          name: 'design',
+          url: 'https://anitab-org.zulipchat.com/#narrow/stream/223071-newcomers',
+        },
+      ],
+      content: [
+        {
+          par:
+            'The best way to help build the community is by helping others. Answering a question, especially from someone who is just getting his feet wet, is crucial to helping the project grow and thrive.',
+        },
+        {
+          par:
+            'Managing skills are an important skill when you are working under an organization with a large number of community members. It also requires leadership skills and communication skills. If you think you are a good manager you can work under the project management team and contribute there.',
+        },
+      ],
+    },
+  ],
+};
+
+export default contributionWays;