Skip to content

Commit

Permalink
Merge pull request #9 from rendercon/kharioki/issue4
Browse files Browse the repository at this point in the history
About Page
  • Loading branch information
kharioki authored Sep 23, 2024
2 parents 09a2ce2 + 3ad7d5d commit 43f04a6
Show file tree
Hide file tree
Showing 13 changed files with 190 additions and 9 deletions.
2 changes: 1 addition & 1 deletion app/(tabs)/home/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function CustomHeader() {
export default function TabLayout() {
const insets = useSafeAreaInsets();

const headerHeight = 120;
const headerHeight = 90;

return (
<Tabs
Expand Down
196 changes: 188 additions & 8 deletions app/(tabs)/home/about.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,135 @@
import { StyleSheet, View } from 'react-native';
import { Linking, Pressable, StyleSheet, View } from 'react-native';
import MainContainer from '@/components/containers/MainContainer';
import StyledText from '@/components/common/StyledText';
import { spacing } from '@/constants/Styles';
// import Colors from '@/constants/Colors';
import { sizes, spacing } from '@/constants/Styles';
import Colors from '@/constants/Colors';
import { Image } from 'expo-image';
import { AntDesign } from '@expo/vector-icons';

const home = () => {
const handleOpenLink = () => {
Linking.openURL('https://bit.ly/rcke23pics');
};

return (
<MainContainer backgroundImage={require('@/assets/images/bg.png')} ImageBackgroundProps={{ resizeMode: 'cover' }}>
<MainContainer
backgroundImage={require('@/assets/images/bg.png')}
ImageBackgroundProps={{ resizeMode: 'cover' }}
preset="scroll"
safeAreaEdges={['top']}
>
<View style={styles.container}>
<StyledText size="lg" font="semiBold">
About
<StyledText size="xl" font="medium" style={styles.header}>
Meet the community
</StyledText>

<StyledText style={styles.text}>
RenderCon Kenya invites you to explore the ever-evolving universe of React and React Native. Unite with
software engineers, developers, and designers from all levels of expertise, and engage in an unforgettable
experience of innovation, mentorship, and community spirit.
</StyledText>

<StyledText style={styles.text}>
This is more than just a conference - it's an opportunity to connect, share, and learn from the brightest
minds in the industry.
</StyledText>

<View style={styles.grid}>
<View style={styles.row}>
<Image
source={require('@/assets/images/gallery/1.png')}
style={[styles.imageHalf, { borderTopLeftRadius: spacing.lg }]}
/>
<Image
source={require('@/assets/images/gallery/2.png')}
style={[styles.imageHalf, { borderTopRightRadius: spacing.lg }]}
/>
</View>

<View style={styles.imageWrapper}>
<Image source={require('@/assets/images/gallery/3.png')} style={styles.imageFull} />
<Pressable
onPress={handleOpenLink}
style={({ pressed }) => [
styles.buttonContainer,
{
opacity: pressed ? 0.5 : 1,
},
]}
>
<View style={styles.centered}>
<StyledText font="medium" size="md" style={styles.buttonText}>
View Gallery
</StyledText>
<AntDesign name="arrowright" size={16} color={Colors.palette.primary} />
</View>
</Pressable>
</View>
</View>

<StyledText size="xl" font="semiBold" style={styles.header}>
Sponsors
</StyledText>

<View style={styles.sponsors}>
<Image
source={require('@/assets/images/gallery/Reactdevske_logo.png')}
style={{ width: '100%', height: 100 }}
contentFit="contain"
/>
<View style={styles.row}>
<Image
source={require('@/assets/images/gallery/lemonade.png')}
style={{ width: '50%', height: 100 }}
contentFit="contain"
/>
<Image
source={require('@/assets/images/gallery/payd.png')}
style={{ width: '50%', height: 100 }}
contentFit="contain"
/>
</View>
</View>

<StyledText size="xl" font="semiBold" style={styles.header}>
Organizers
</StyledText>

<View style={styles.sponsors}>
<View style={styles.row}>
<Image
source={require('@/assets/images/gallery/devkenya_logo.png')}
style={{ width: '33%', height: 80, borderRadius: spacing.sm }}
contentFit="contain"
/>

<Image
source={require('@/assets/images/gallery/Reactdevske_logo.png')}
style={{ width: '33%', height: 80 }}
contentFit="contain"
/>

<Image
source={require('@/assets/images/gallery/osca_nairobi_logo.jpg')}
style={{ width: '33%', height: 80, borderRadius: spacing.sm }}
contentFit="contain"
/>
</View>

<View style={styles.row}>
<Image
source={require('@/assets/images/gallery/spaceyatech_logo.jpg')}
style={{ width: '40%', height: 80, borderRadius: spacing.sm }}
contentFit="contain"
/>

<Image
source={require('@/assets/images/gallery/supabase_logo.png')}
style={{ width: '50%', height: 80 }}
contentFit="contain"
/>
</View>
</View>
</View>
</MainContainer>
);
Expand All @@ -21,8 +140,69 @@ export default home;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: spacing.lg,
paddingTop: sizes.header,
paddingHorizontal: sizes.md,
paddingBottom: sizes.xxxl,
},
header: {
color: Colors.palette.secondary,
paddingTop: sizes.xl,
marginBottom: spacing.sm,
},
text: {
color: Colors.palette.text,
marginBottom: sizes.sm,
lineHeight: sizes.lg,
},
grid: {
marginBottom: spacing.lg,
gap: spacing.lg,
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
},
imageHalf: {
width: '48%',
height: sizes.galleryImage,
},
imageWrapper: {
position: 'relative',
width: '100%',
paddingBottom: spacing.xl,
height: sizes.galleryImage,
},
imageFull: {
width: '100%',
height: sizes.galleryImage,
borderBottomLeftRadius: spacing.lg,
borderBottomRightRadius: spacing.lg,
},
buttonContainer: {
position: 'absolute',
bottom: 0,
width: '100%',
height: 50,
backgroundColor: Colors.palette.secondary,
paddingVertical: spacing.sm,
paddingHorizontal: spacing.lg,
borderBottomLeftRadius: spacing.lg,
borderBottomRightRadius: spacing.lg,
alignItems: 'center',
justifyContent: 'center',
},
centered: {
flexDirection: 'row',
alignItems: 'center',
gap: spacing.sm,
},
buttonText: {
color: Colors.palette.primary,
},
sponsors: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: spacing.lg,
alignItems: 'center',
marginVertical: spacing.lg,
},
});
Binary file added assets/images/gallery/1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/gallery/2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/gallery/3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/gallery/Reactdevske_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/gallery/devkenya_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/gallery/lemonade.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/gallery/osca_nairobi_logo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/gallery/payd.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/gallery/spaceyatech_logo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/gallery/supabase_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions constants/Styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const sizes = {
header: 60,
card: 220,
cardImage: 150,
galleryImage: 200,
} as const;

// margins and padding
Expand Down

0 comments on commit 43f04a6

Please sign in to comment.