Skip to content

Commit

Permalink
Added Mpre Components
Browse files Browse the repository at this point in the history
  • Loading branch information
@MuhammadHassan03
MuhammadHassan03 committed Sep 4, 2024
1 parent b3aaa59 commit 8c18904
Show file tree
Hide file tree
Showing 7 changed files with 283 additions and 29 deletions.
Binary file added packages/app/assets/PakRat_FAQS.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
180 changes: 173 additions & 7 deletions packages/app/components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,171 @@ import { useMemo } from 'react';
import { footorLinks } from 'app/constants/footorLinks';
import { NewsLetter } from 'app/components/newsLetter';
import useResponsive from 'app/hooks/useResponsive';
import { MaterialCommunityIcons } from '@expo/vector-icons';

export default function Footer() {
const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
useTheme();
const { xs, sm, md } = useResponsive();
const firstFootorLinksGroup = footorLinks.slice(0, 4);
const secondFootorLinksGroup = footorLinks.slice(4);
const styles = StyleSheet.create(loadStyles(currentTheme, xs, sm, md));
const year = new Date().getFullYear();
const navigate = useNavigate();
return (
<View style={styles.mainContainer}>
<View style={styles.firstMainContainer}>
<View>
<NewsLetter />
</View>
<View style={styles.mainFirstContainer}>
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
<RImage
source={{
// TODO: Update this to use the PackRat logo from the assets folder
uri: 'https://github.com/andrew-bierman/PackRat/blob/main/packages/app/assets/packrat_icon.png?raw=true',
width: 40,
height: 40,
}}
width={40}
height={40}
style={styles.logo}
alt="PackRat Logo"
onClick={() => {
navigate('/');
}}
/>
<RText style={{ fontSize: 25, fontWeight: 'bold', color: currentTheme.colors.logo }}>PackRat</RText>
</View>
<View style={{ flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'center', gap: 50 }}>
<View>{firstFootorLinksGroup.map((item) => {
return (
<RLink src={item.link}>
<RText style={styles.navItem}>{item.label}</RText>
</RLink>
);
})}</View>
<View>{secondFootorLinksGroup.map((item) => {
return (
<RLink src={item.link}>
<RText style={styles.navItem}>{item.label}</RText>
</RLink>
);
})}</View>
</View>
<View style={{ flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
<RLink >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
<MaterialCommunityIcons
name="facebook"
size={20}
color={currentTheme.colors.textPrimary}
/>
<RText>Facebook</RText>
</View>
</RLink>
<RLink >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
<MaterialCommunityIcons
name="instagram"
size={20}
color={currentTheme.colors.textPrimary}
/>
<RText>Instagram</RText>
</View>
</RLink>
<RLink >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
<MaterialCommunityIcons
name="twitter"
size={20}
color={currentTheme.colors.textPrimary}
/>
<RText>X</RText>
</View>
</RLink>
<RLink >
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
<MaterialCommunityIcons
name="github"
size={20}
color={currentTheme.colors.textPrimary}
/>
<RText>Github</RText>
</View>
</RLink>
{/* <RLink>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 5 }}>
<MaterialCommunityIcons
name="facebook"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>Facebook</RText>
</View>
</RLink>
<RLink>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 5 }}>
<MaterialCommunityIcons
name="instagram"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>Instagram</RText>
</View>
</RLink>
<RLink>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<MaterialCommunityIcons
name="instagram"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>Instagram</RText>
</View>
</RLink>
<RLink>
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<MaterialCommunityIcons
name="twitter"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>X</RText>
</View>
</RLink>
<RLink >
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<MaterialCommunityIcons
name="github"
size={30}
color={currentTheme.colors.textPrimary}
style={{
width: '100%',
}}
/>
<RText>Github</RText>
</View>
</RLink> */}
</View>
<View>
<RText style={styles.credit}>
© 2024 Bierman Collective. All rights reserved.
</RText>
</View>
</View>
{/* <View style={styles.firstMainContainer}>
<View style={styles.firstContainer}>
<RImage
source={{
Expand Down Expand Up @@ -68,7 +222,7 @@ export default function Footer() {
</Text>
<NewsLetter />
</View>
</View>
</View> */}
</View>
);
}
Expand All @@ -77,12 +231,24 @@ const loadStyles = (currentTheme, xs, sm, md) => {
{
return StyleSheet.create({
mainContainer: {
width: '100vw',
width: '100%',
flexDirection: 'column',
paddingTop: 80,
paddingBottom: 40,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
justifyContent: 'space-evenly',
position: 'relative',
bottom: 0,
},
mainFirstContainer: {
width: '100%',
flexDirection: 'row',
paddingTop: 80,
paddingBottom: 40,
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'space-evenly',
position: 'relative',
bottom: 0,
},
Expand Down Expand Up @@ -118,16 +284,16 @@ const loadStyles = (currentTheme, xs, sm, md) => {
fontSize: 13,
textAlign: xs ? 'center' : 'left',
fontWeight: 'normal',
paddingTop : sm || md ? 10 : 'auto',
paddingTop: sm || md ? 10 : 'auto',
},
lastContainer: {
display: 'flex',
flexWrap: 'wrap-reverse',
flexDirection: sm ? 'column-reverse': 'row',
flexDirection: sm ? 'column-reverse' : 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: sm || md ? 'auto' : '95%',

},
});
}
Expand Down
36 changes: 18 additions & 18 deletions packages/app/components/landing_page/FAQS.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { RImage, RText } from '@packrat/ui';
import { View } from 'tamagui';
import PackRatPreview from 'app/assets/PackRat Preview.jpg';
import PakRat_FAQS from 'app/assets/PakRat_FAQS.png';
import { StyleSheet } from 'react-native';
import useTheme from 'app/hooks/useTheme';
import useResponsive from 'app/hooks/useResponsive';
Expand Down Expand Up @@ -33,35 +33,35 @@ export const FAQS = () => {
<View onPress={() => toggleAnswer(index)} style={styles.faqQuestion}>
<RText>{faq.question}</RText>
<MaterialCommunityIcons
name={visibleAnswers[index] ? 'minus' : 'plus'}
size={20}
color={currentTheme.colors.textPrimary}
/>
name={visibleAnswers[index] ? 'minus' : 'plus'}
size={20}
color={currentTheme.colors.textPrimary}
/>
</View>
{/* <View style={styles.faqAnswer}>
<RText>{faq.answer}</RText>
</View> */}
{visibleAnswers[index] && (
<View style={styles.faqAnswer}>
<RText>{faq.answer}</RText>
</View>
)}
<View style={styles.faqAnswer}>
<RText>{faq.answer}</RText>
</View>
)}
</View>
);
})}
</View>
</View>
{/* <View style={styles.faqSecondContainer}>
<View style={styles.faqSecondContainer}>
<RImage
src={PackRatPreview}
src={PakRat_FAQS}
style={{
backgroundColor: 'transparent',
width: 259,
height: 530,
width: 659,
height: 550,
}}
alt="PackRat Logo"
/>
</View> */}
</View>
</View>
);
};
Expand All @@ -70,8 +70,8 @@ const loadStyles = (currentTheme, xs, sm, md) => {
return StyleSheet.create({
faqMainContainer: {
flexDirection: 'row',
// alignItems: 'center',
justifyContent: 'space-around',
alignItems: 'center',
justifyContent: 'space-evenly',
gap: 10,
width: '100vw',
maxWidth: '100vw',
Expand All @@ -98,8 +98,8 @@ const loadStyles = (currentTheme, xs, sm, md) => {

},
faqAnswer: {
marginLeft: 0,
width: '30vw',
marginLeft: 0,
width: '24vw',
},
faqSecondContainer: {
},
Expand Down
71 changes: 71 additions & 0 deletions packages/app/components/landing_page/Pricing.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { RButton, RText } from "@packrat/ui"
import useTheme from "app/hooks/useTheme"
import useResponsive from "app/hooks/useResponsive"
import { View } from "tamagui"
import { StyleSheet } from "react-native"
import { PricingData } from "app/constants/PricingData"

export const Pricing = () => {
const { currentTheme } = useTheme()
const { xs, sm, md } = useResponsive()
const styles = StyleSheet.create(loadStyles(currentTheme, xs, sm, md));

return (
<View style={styles.mainContainer}>
<View style={styles.firstContainer}>
<RText style={{fontSize: 28}}>Explore PackRat with Our Free Subscription Plan!</RText>
<RText style={{fontSize: 25}}>Get Started with PackRat—Absolutely Free!</RText>
<RText style={{fontSize: 16, width: '50%', textAlign: 'center'}}>We’re thrilled to offer you our Free Subscription Plan so you can explore and
manage your trips with PackRat at no cost! This plan is designed to give you
full access to a range of features, making your trip planning easy and
enjoyable.
</RText>
</View>
<View style={styles.card}>
<View style={{ width: '100%', fontSize: 18, textAlign: 'left' }}>Get started for free</View>
<View style={{ width: '100%', fontSize: 25, textAlign: 'left' }}>$0</View>
<View style={{ width: '100%', }}><RButton style={{
backgroundColor: '#232323',
color: 'white',
}}>Get Started For Free</RButton></View>
<View>{PricingData.freeVersion.map((index) => {
return (
<RText style={{ color: currentTheme.colors.background, borderBottomColor: currentTheme.colors.background, borderBottomWidth: 1, fontSize: 16 }}>{index}</RText>
)
})
}</View>
</View>
</View>
)
}

const loadStyles = (currentTheme, xs, sm, md) => {
return StyleSheet.create({
mainContainer: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 50,
color: currentTheme.colors.background,
},
firstContainer: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 20,
},
card: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: 10,
backgroundColor: currentTheme.colors.textPrimary,
color: currentTheme.colors.background,
paddingTop: 50,
paddingBottom: 50,
paddingLeft: 25,
paddingRight: 25,
borderRadius: 20
}
})
}
4 changes: 4 additions & 0 deletions packages/app/components/landing_page/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { Redirect } from 'app/components/Redirect';
import useResponsive from 'app/hooks/useResponsive';
import Footer from 'app/components/footer/Footer';
import { FAQS } from './FAQS';
import { Pricing } from './Pricing';

const RButton: any = OriginalRButton;
const RStack: any = OriginalRStack;
Expand Down Expand Up @@ -295,6 +296,9 @@ const LandingPage = () => {
<View style={{width: '100%'}}>
<LandingPageAccordion />
</View>
<View style={{width: '100%', paddingTop: 50,}}>
<Pricing/>
</View>
<View style={{width: '100%', paddingTop: 50,}}>
<FAQS/>
</View>
Expand Down
Loading

0 comments on commit 8c18904

Please sign in to comment.