Coding: Develop First Time Issue Section of Contribute Page

src/Components/Contribute/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import SectionHeader from '../SectionHeader';
+import content from '../../content/contributeIntro.json';
+import ImageContent from './../ImageContent';
+import { MainContainer, Box, Content, Description } from './style';
+
+function Contribute() {
+    const renderContent = () => {
+        return (
+            <Box>
+                {content.sections.map((section, index) => {
+                    return (
+                        <Content>
+                            <SectionHeader title={section.title} />
+                            {section.content.map((content) => {
+                                return <Description>{content.par}</Description>;
+                            })}
+                        </Content>
+
+                    );
+                })}
+            </Box>
+        );
+    };
+
+    return (
+        <MainContainer>
+            <ImageContent
+                image={require('../../assets/Frame 1.png')}
+                imageSide="right"
+                Children={renderContent}
+            />
+        </MainContainer>
+    );
+}
+
+export default Contribute;

src/Components/Contribute/style.js

@@ -0,0 +1,42 @@
+import { View, Text } from 'react-native';
+import { styled } from 'react-native-reflect';
+
+export const MainContainer = styled(View, {
+width: '80%',
+alignItems: 'left',
+paddingLeft: 16,
+paddingRight: 16,
+flexDirection: 'row',
+flexWrap: 'wrap',
+marginTop: 0,
+marginBottom: 32,
+fontStyle:'Avenir',
+});
+
+export const Box = styled(View, {
+flex: 1,
+flexDirection: 'column',
+marginTop: 32,
+fontStyle:'Avenir',
+});
+
+export const Content = styled(View, {
+flexDirection: 'column',
+paddingLeft: 16,
+fontStyle:'Avenir',
+});
+
+export const Description = styled(Text, {
+flex: 1,
+marginTop: 26,
+paddingLeft: 16,
+fontSize: 18,
+flexGrow: 1,
+fontWeight: 200,
+color: '#103B81',
+textAlign: 'left',
+fontWeight:'light',
+fontSize:'18px',
+fontStyle:'Avenir',
+color:'#103B81',
+});

src/content/contributeIntro.json

@@ -0,0 +1,62 @@
+{
+    "sections": [
+      {
+        "title": "New to Open Source?",
+        "content": [
+          {
+            "par": "Contributing to open source for the first time can be a little scary and overwhelming. AnitaB.org Open Source is here to help you get started on learning how to contribute to open source. "
+          },
+          {
+            "par": "AnitaB.org Open Source has a variety of open source projects on GitHub (https://github.com/anitab-org) for everyone to contribute. If you have never contributed to an open source project, check out each repository and try out 'First Timers Only' issues."
+          },
+          {
+            "par": "We encourage contributions of ALL kinds (content, design, coding, documentation, testing, etc) from community members. Each member has the opportunity to gain global collaboration experience working on projects with social impact and improve hard & soft skills while participating as a volunteer, mentor, writer, coder, designer, app tester, and more!"
+          },
+          {
+            "par":"Here are some list of contributions to any of the AnitaB.org Open Source projects, for example: create GitHub issues regarding an open source project, work on/ debug a project issue, update project documentation, create organization content, create/test a pull request, produce mockups for websites/ applications/ organization promotional material, research on UI/UX improvements and accessibilty features, etc."
+          },
+          {
+            "par": "Each active repository has an individual stream on Zulip. If you have any questions and not sure how to get started, please ping us on Zulip and we are happy to help!"
+          }
+        ]
+      },
+      {
+          "title":"Ways to contibute",
+          "content":[
+             {
+               "par":"bdjbc"
+             }
+          ]
+      },
+      {
+        "title":"Code",
+        "content":[
+          {
+            "par":"hegjfgwj"
+          },
+          {
+            "par":"dgfjgrj"
+          },
+          {
+            "par":"rfhrhfrje"
+          }
+        ]
+      },
+      {
+        "title":"Documentation/Training",
+        "content":[
+          {
+            "par":"dfbhsdjs"
+          },
+          {
+            "par":"jhgfjgrrj"
+          }
+        ]
+      }
+
+
+
+    ]
+
+  }
+

src/content/contributeintro.js

@@ -0,0 +1,46 @@
+const contributeIntro = {
+    sections: [
+      {
+        title: 'Code',
+        image: {
+          source: require('./../assets/contribution/code.png'),
+        },
+        content: [
+          {
+            par:
+              'hegjfgwj ',
+          },
+          {
+            par:
+              "dgfjgrj",
+          },
+          {
+            par:
+              "rfhrhfrje",
+          },
+        ],
+      },
+      {
+        title: 'Documentation/Training',
+        image: {
+          source: require('./../assets/contribution/documentation_training.png'),
+        },
+        content: [
+          {
+            par:
+              'dfbhsdjs',
+          },
+          {
+            par:
+              "jhgfjgrrj",
+          },
+        ],
+      },
+    ],
+},  
+
+
+  export const getHome = () => {
+    return home;
+  };
+