diff --git a/packages/app/assets/PakRat_FAQS.png b/packages/app/assets/PakRat_FAQS.png new file mode 100644 index 000000000..e4684d8f2 Binary files /dev/null and b/packages/app/assets/PakRat_FAQS.png differ diff --git a/packages/app/components/footer/Footer.tsx b/packages/app/components/footer/Footer.tsx index 4c3c89252..230576cea 100644 --- a/packages/app/components/footer/Footer.tsx +++ b/packages/app/components/footer/Footer.tsx @@ -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 ( - + + + + + + { + navigate('/'); + }} + /> + PackRat + + + {firstFootorLinksGroup.map((item) => { + return ( + + {item.label} + + ); + })} + {secondFootorLinksGroup.map((item) => { + return ( + + {item.label} + + ); + })} + + + + + + Facebook + + + + + + Instagram + + + + + + X + + + + + + Github + + + {/* + + + Facebook + + + + + + Instagram + + + + + + Instagram + + + + + + X + + + + + + Github + + */} + + + + © 2024 Bierman Collective. All rights reserved. + + + + {/* - + */} ); } @@ -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, }, @@ -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%', - + }, }); } diff --git a/packages/app/components/landing_page/FAQS.tsx b/packages/app/components/landing_page/FAQS.tsx index 377a43f5f..b1f1e20ed 100644 --- a/packages/app/components/landing_page/FAQS.tsx +++ b/packages/app/components/landing_page/FAQS.tsx @@ -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'; @@ -33,35 +33,35 @@ export const FAQS = () => { toggleAnswer(index)} style={styles.faqQuestion}> {faq.question} + name={visibleAnswers[index] ? 'minus' : 'plus'} + size={20} + color={currentTheme.colors.textPrimary} + /> {/* {faq.answer} */} {visibleAnswers[index] && ( - - {faq.answer} - - )} + + {faq.answer} + + )} ); })} - {/* + - */} + ); }; @@ -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', @@ -98,8 +98,8 @@ const loadStyles = (currentTheme, xs, sm, md) => { }, faqAnswer: { - marginLeft: 0, - width: '30vw', + marginLeft: 0, + width: '24vw', }, faqSecondContainer: { }, diff --git a/packages/app/components/landing_page/Pricing.tsx b/packages/app/components/landing_page/Pricing.tsx new file mode 100644 index 000000000..bbc353cd0 --- /dev/null +++ b/packages/app/components/landing_page/Pricing.tsx @@ -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 ( + + + Explore PackRat with Our Free Subscription Plan! + Get Started with PackRat—Absolutely Free! + 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. + + + + Get started for free + $0 + Get Started For Free + {PricingData.freeVersion.map((index) => { + return ( + {index} + ) + }) + } + + + ) +} + +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 + } + }) +} \ No newline at end of file diff --git a/packages/app/components/landing_page/index.tsx b/packages/app/components/landing_page/index.tsx index e61ee5a74..dfc0c6d0f 100644 --- a/packages/app/components/landing_page/index.tsx +++ b/packages/app/components/landing_page/index.tsx @@ -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; @@ -295,6 +296,9 @@ const LandingPage = () => { + + + diff --git a/packages/app/constants/PricingData.ts b/packages/app/constants/PricingData.ts new file mode 100644 index 000000000..50e197686 --- /dev/null +++ b/packages/app/constants/PricingData.ts @@ -0,0 +1,9 @@ +export const PricingData = { + freeVersion: [ + '- Track trips with dates and locations.', + '- Access accurate routes via OpenStreetMap.', + '- Get suggestions for local outdoor activities.', + '- Organize and manage your packing lists.', + '- Check current forecasts to plan your trip effectively.', + ] +}; \ No newline at end of file diff --git a/packages/app/constants/footorLinks.ts b/packages/app/constants/footorLinks.ts index ce9d55916..c42d11a20 100644 --- a/packages/app/constants/footorLinks.ts +++ b/packages/app/constants/footorLinks.ts @@ -1,4 +1,8 @@ export const footorLinks = [ + { + label: 'Home', + link: '/', + }, { label: 'Features', link: '', @@ -8,15 +12,15 @@ export const footorLinks = [ link: '/about', }, { - label: 'Github', + label: 'FAQs', link: 'https://github.com/andrew-bierman/PackRat', }, { - label: 'Privacy Policy ', + label: 'Contact Us ', link: '', }, { - label: 'Contact', - link: '', + label: 'Privacy Policy ', + link: '/privacy', }, ]