Coding : Develop Introduction section of Home Page

Fixes anitab-org#109
tichnas · Dec 12, 2020 · 9898519 · 9898519
1 parent 25c5d45
commit 9898519
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 8 deletions.
diff --git a/src/Components/Home/index.js b/src/Components/Home/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
+import { TouchableHighlight, Linking } from 'react-native';
 import ImageContent from './../ImageContent';
-import SectionHeader from './../SectionHeader';
 import SectionSubheader from './../SectionSubheader';
 import { getHome } from './../../content/home';
-import { Box, Content, Description } from './styles';
+import { Box, Content, Description, IconContainer, Icon } from './styles';
 import ContributionSection from './contribution/ContributionSection';
 
 function Home() {
@@ -21,12 +21,33 @@ function Home() {
 
   return (
     <Box>
-      <SectionHeader title="AnitaB.org Open Source" />
+      <ImageContent
+        image={content.introduction.image.source}
+        imageSide='right'
+        Children={() => (
+          <Content>
+            <SectionSubheader title={content.introduction.title} />
+            <IconContainer>
+              <TouchableHighlight onPress={() => Linking.openURL('https://medium.com/anitab-org-open-source')}>
+                <Icon source={require('../../assets/medium.png')} />
+              </TouchableHighlight>
+              <TouchableHighlight onPress={() => Linking.openURL('https://anitab-org.zulipchat.com/#')}>
+                <Icon source={require('../../assets/zulip.png')} />
+              </TouchableHighlight>
+              <TouchableHighlight onPress={() => Linking.openURL('https://github.com/anitab-org')}>
+                <Icon source={require('../../assets/github.png')} />
+              </TouchableHighlight>
+            </IconContainer>
+            <Description>{content.introduction.content.par}</Description>
+          </Content>
+        )}
+      />
+
       {content.sections.map((section, index) => {
         return (
           <ImageContent
             image={section.image.source}
-            imageSide={index % 2 === 0 ? 'right' : 'left'}
+            imageSide={index % 2 ? 'right' : 'left'}
             Children={() => renderContent(index, section)}
           />
         );

diff --git a/src/Components/Home/styles.js b/src/Components/Home/styles.js
@@ -1,14 +1,12 @@
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, Image } from 'react-native';
 import { styled } from 'react-native-reflect';
 
 export const Box = styled(View, {
   flex: 1,
   width: '80%',
   flexDirection: 'column',
-  paddingLeft: 16,
-  paddingRight: 16,
+  paddingRight: 32,
   flexWrap: 'wrap',
-  marginTop: 32,
 });
 
 export const Content = styled(View, {
@@ -27,6 +25,18 @@ export const Description = styled(Text, {
   textAlign: 'left',
 });
 
+export const IconContainer = styled(View, {
+  flexDirection: 'row',
+  marginVertical: 8,
+  paddingLeft: 16,
+});
+
+export const Icon = styled(Image, {
+  marginRight: 8,
+  width: 32,
+  height: 32,
+});
+
 const styles = StyleSheet.create({
   container: {
     display: 'flex',

diff --git a/src/assets/medium.png b/src/assets/medium.png
diff --git a/src/content/home.js b/src/content/home.js
@@ -1,4 +1,14 @@
 const home = {
+  introduction: {
+    title: 'AnitaB.org Open Source',
+    image: {
+      source: require('./../assets/landing/landing.png'),
+    },
+    content: {
+      par:
+        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis omnis minus, quisquam ab architecto dolor hic dolores, ducimus explicabo, voluptates fugit dolorum itaque enim nam. Enim nulla, vitae recusandae est pariatur consequuntur aperiam molestiae, minus vero, fugiat ipsam facilis cupiditate alias dolorem mollitia officiis. Excepturi, blanditiis?',
+    },
+  },
   sections: [
     {
       title: 'Getting Started',