diff --git a/packages/app/components/footer/Footer.tsx b/packages/app/components/footer/Footer.tsx index 230576cea..5a2d39f3f 100644 --- a/packages/app/components/footer/Footer.tsx +++ b/packages/app/components/footer/Footer.tsx @@ -58,7 +58,7 @@ export default function Footer() { ); })} - + Github - {/* - - - Facebook - - - - - - Instagram - - - - - - Instagram - - - - - - X - - - - - - Github - - */} @@ -171,58 +106,6 @@ export default function Footer() { - {/* - - { - navigate('/'); - }} - /> - { - navigate('/'); - }} - > - The Ultimate Travel App - - - - {footorLinks.map((item) => { - return ( - - {item.label} - - ); - })} - - - - - - - © 2024 Bierman Collective. All rights reserved. - - - - */} ); } @@ -243,7 +126,8 @@ const loadStyles = (currentTheme, xs, sm, md) => { }, mainFirstContainer: { width: '100%', - flexDirection: 'row', + flexDirection: xs || sm || md ? 'column' : 'row', + flexWrap: 'wrap', paddingTop: 80, paddingBottom: 40, alignSelf: 'center', @@ -251,6 +135,7 @@ const loadStyles = (currentTheme, xs, sm, md) => { justifyContent: 'space-evenly', position: 'relative', bottom: 0, + gap: xs || sm || md ? 10 : 0 }, firstMainContainer: { width: '95%', diff --git a/packages/app/components/landing_page/FAQS.tsx b/packages/app/components/landing_page/FAQS.tsx index b1f1e20ed..8a3add37c 100644 --- a/packages/app/components/landing_page/FAQS.tsx +++ b/packages/app/components/landing_page/FAQS.tsx @@ -30,7 +30,10 @@ export const FAQS = () => { {FaqList.map((faq, index) => { return ( - toggleAnswer(index)} style={styles.faqQuestion}> + toggleAnswer(index)} + style={styles.faqQuestion} + > {faq.question} { src={PakRat_FAQS} style={{ backgroundColor: 'transparent', - width: 659, - height: 550, + width: xs || sm || md ? 359 : 659, + height: xs || sm || md ? 250 : 550, }} alt="PackRat Logo" /> @@ -69,8 +72,8 @@ export const FAQS = () => { const loadStyles = (currentTheme, xs, sm, md) => { return StyleSheet.create({ faqMainContainer: { - flexDirection: 'row', - alignItems: 'center', + flexDirection: xs || sm || md ? 'column' : 'row', + alignItems: 'center', justifyContent: 'space-evenly', gap: 10, width: '100vw', @@ -78,10 +81,10 @@ const loadStyles = (currentTheme, xs, sm, md) => { paddingTop: 20, paddingBottom: 20, }, - faqFirstContainer: { - }, + faqFirstContainer: {}, faqMainTitle: { - fontSize: 26, + fontSize: xs || sm || md ? 20 : 26, + textAlign : xs || sm || md ? 'center' : 'auto', fontWeight: 'bold', color: currentTheme.colors.textPrimary, marginBottom: 30, @@ -94,14 +97,16 @@ const loadStyles = (currentTheme, xs, sm, md) => { justifyContent: 'space-between', marginTop: 4, marginBottom: 4, - gap: 10, - + marginLeft: xs || sm || md ? 10 : 0, + marginRight: xs || sm || md ? 10 : 0, + gap: xs || sm || md ? 2 : 10, }, faqAnswer: { - marginLeft: 0, - width: '24vw', - }, - faqSecondContainer: { + // marginLeft: 0, + width: xs || sm || md ? '100%' : '24vw', + marginLeft: xs || sm || md ? 10 : 0, + marginRight: xs || sm || md ? 10 : 0, }, + faqSecondContainer: {}, }); }; diff --git a/packages/app/components/landing_page/LandingPageAccordion.tsx b/packages/app/components/landing_page/LandingPageAccordion.tsx index d0bd38a3e..eac7dd24a 100644 --- a/packages/app/components/landing_page/LandingPageAccordion.tsx +++ b/packages/app/components/landing_page/LandingPageAccordion.tsx @@ -8,6 +8,7 @@ import { FAQ_ITEMS } from './constants'; import useTheme from 'app/hooks/useTheme'; import PackRatPreview from 'app/assets/PackRat Preview.jpg'; import { useEffect, useState } from 'react'; +import useResponsive from 'app/hooks/useResponsive'; const RButton: any = OriginalRButton; @@ -16,7 +17,7 @@ export const LandingPageAccordion = () => { const { currentTheme } = useTheme(); const [index, setIndex] = useState(0); const [data, setData] = useState(FAQ_ITEMS[index]); - // const [expanded, toggleExpanded] = useAccordionState(); + const { xxs, xs, xxl, sm, lg, md } = useResponsive(); useEffect(() => { setData(FAQ_ITEMS[index]); @@ -39,69 +40,42 @@ export const LandingPageAccordion = () => { setIndex(item.index); }; return ( - // - // - // - // {title} - // {content} - // - // - {data.content} - - - - - - - - {/* {FAQ_ITEMS.map((item) => { - return ( - { - handleTextClick(item); - }} - style={{ textAlign: 'left', cursor: 'pointer', width: 'auto' }} - > - {item.title} - - ); - })} */} - { - handleTextClick(FAQ_ITEMS[index]); + + + + + + {data.content} + - {FAQ_ITEMS[index].title} - + /> - - + + - + /> + + ); diff --git a/packages/app/components/landing_page/Pricing.tsx b/packages/app/components/landing_page/Pricing.tsx index bbc353cd0..fce84d96e 100644 --- a/packages/app/components/landing_page/Pricing.tsx +++ b/packages/app/components/landing_page/Pricing.tsx @@ -1,71 +1,116 @@ -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" +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'; +import { MaterialCommunityIcons } from '@expo/vector-icons'; export const Pricing = () => { - const { currentTheme } = useTheme() - const { xs, sm, md } = useResponsive() - const styles = StyleSheet.create(loadStyles(currentTheme, xs, sm, md)); + 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} - ) - }) - } - + 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. + - ) -} + + + Free Access + + + $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 + return StyleSheet.create({ + mainContainer: { + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + gap: 50, + color: currentTheme.colors.background, + marginLeft: xs || sm || md ? 10 : 0, + marginRight: xs || sm || md ? 10 : 0, + }, + 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, + }, + }); +}; diff --git a/packages/app/components/landing_page/index.tsx b/packages/app/components/landing_page/index.tsx index dfc0c6d0f..9096c1403 100644 --- a/packages/app/components/landing_page/index.tsx +++ b/packages/app/components/landing_page/index.tsx @@ -68,137 +68,139 @@ const LandingPage = () => { cross-country road trip. - - - - - - - - - - Get it on the - - - App Store - - - - - - - - + {Platform.OS === 'web' && ( + + + + + + + + + + Get it on the + + + App Store + + - - - Get it on - - - Google Play - + + + + + + + + + Get it on + + + Google Play + + - - + + - + )} { you elevate your backpacking experience: - + - - + + - - + + diff --git a/packages/app/components/landing_page/landingpage.style.tsx b/packages/app/components/landing_page/landingpage.style.tsx index 830a1d498..a1400c38b 100644 --- a/packages/app/components/landing_page/landingpage.style.tsx +++ b/packages/app/components/landing_page/landingpage.style.tsx @@ -137,9 +137,9 @@ const loadStyles = (theme) => { alignItems: 'center', }, landingPageAccordionContainer: { - flexDirection: 'column', + flexDirection: xs || sm || md ? 'row' : 'column', flexWrap: 'no-wrap', - width: xs || sm ? '100%' : 'auto', + width: xs || sm || md ? '100%' : 'auto', paddingTop: 100, paddingBottom: 100, justifyContent: 'center', @@ -156,15 +156,17 @@ const loadStyles = (theme) => { }, landingPageAccordationSecondContainer: { // width: '100%', - flexDirection: 'row', + flexDirection: xs || sm || md ? 'column' : 'row', alignItems: 'center', - justifyContent: 'center', + justifyContent: 'space-evenly', gap: 50, transition: '0.3s ease-in-out' }, panButton: { - backgroundColor: '#232323', - color: 'white', + backgroundColor: 'transparent', + borderWidth: 1, + borderRadius: 0, + borderColor: currentTheme.colors.textPrimary, // width: '100%', }, card: { @@ -196,10 +198,12 @@ const loadStyles = (theme) => { width: '100%', }, cardContent: { - fontSize: 35, + fontSize: xs || sm || md ? 20 : 35, color: currentTheme.colors.textPrimary, - width: '30vw', - textAlign: 'left', + width: xs || sm ? '100vw' : '30vw', + textAlign: 'center', + marginLeft: xs || sm || md ? 10 : 0, + marginRight: xs || sm || md ? 10 : 0, // border: '1px solid black' }, secondaryContainerIntroDiv: { diff --git a/packages/app/components/navigation/Navbar/Navbar.tsx b/packages/app/components/navigation/Navbar/Navbar.tsx index 71077eccf..fdaeabd87 100644 --- a/packages/app/components/navigation/Navbar/Navbar.tsx +++ b/packages/app/components/navigation/Navbar/Navbar.tsx @@ -1,171 +1,107 @@ -import React, { useMemo } from 'react'; +import React, { useContext, useMemo } from 'react'; import { View, Text, SafeAreaView, StyleSheet, Platform } from 'react-native'; -import { RButton, Container, RLink, RText } from '@packrat/ui'; -import { useIsMobileView } from 'app/hooks/common'; +import { RButton, Container, RIconButton } from '@packrat/ui'; import { useNavigate } from 'app/hooks/navigation'; -import { NavigationList } from '../NavigationList'; import { Drawer } from '../Drawer'; import { useScrollTop } from 'app/hooks/common/useScrollTop'; import { useScreenWidth } from 'app/hooks/common'; -import useTheme from 'app/hooks/useTheme'; import { RImage } from '@packrat/ui'; -import { MaterialCommunityIcons } from '@expo/vector-icons'; -import useResponsive from 'app/hooks/useResponsive'; -import { useAuthUser } from 'app/modules/auth'; +import Feather from '@expo/vector-icons/Feather'; +import ThemeContext from '../../../context/theme'; export const Navbar = () => { - const user = useAuthUser(); - const { currentTheme, enableDarkMode, enableLightMode, isLight } = useTheme(); - const toggleTheme = async () => { - console.log(isLight); - if (isLight) { - return enableDarkMode(); - } - enableLightMode(); - }; + const { currentTheme, isDark, enableDarkMode, enableLightMode } = + useContext(ThemeContext); const scrollTop = useScrollTop(); - const { screenWidth } = useScreenWidth(); const isScrolled = !!scrollTop; - const { xxs, xs, sm, md, lg } = useResponsive(); const styles = useMemo(() => { - return StyleSheet.create( - loadStyles(currentTheme, isScrolled, screenWidth, xxs, xs, sm, md, lg), - ); + return StyleSheet.create(loadStyles(currentTheme, isScrolled, screenWidth)); }, [isScrolled, currentTheme, screenWidth]); const navigate = useNavigate(); - return ( - - - - - - - { - navigate('/'); - }} - /> - { - navigate('/'); - }} - > - PackRat - - - {/* { - navigate('/'); - }} - > - PackRat - */} - - - + const iconName = isDark ? 'moon' : 'sun'; + const iconColor = isDark ? 'white' : 'black'; + const handlePress = () => { + if (isDark) { + enableLightMode(); + } else { + enableDarkMode(); + } + }; - {user ? ( - - ) : ( - - Login - - )} - + return ( + + + + + { + navigate('/'); + }} + /> + { + navigate('/'); + }} + > + PackRat + + + + } + onPress={handlePress} + /> + - - - + + + ); }; -const loadStyles = ( - currentTheme, - isScrolled, - screenWidth, - xxs, - xs, - sm, - md, - lg, -) => { - const NavbarStyles = { - floatingBg: currentTheme.colors.floatingBg, - floatingRadius: 30, - floatingBlur: 'blur(10px)', - transition: 'all 0.2s ease-in-out', - floatingSpacing: 1, - }; +const NavbarStyles = { + floatingBg: '#cce5ff', + floatingRadius: 25, + floatingBlur: 'blur(2px)', + transition: 'all 0.2s ease-in-out', + floatingSpacing: 4, +}; +const loadStyles = (currentTheme, isScrolled, screenWidth) => { const isWeb = Platform.OS === 'web'; const isFloating = isWeb && isScrolled; const backgroundColor = isFloating - ? NavbarStyles.floatingBg - : currentTheme.colors.navbarPrimaryBackground; + ? currentTheme.colors.border + : currentTheme.colors.background; return StyleSheet.create({ - navbarThird: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - gap: 8, - }, - mainContainer: { - backgroundColor: '#f6f6f6', - display: 'flex', - alignContent: 'center', - alignItems: 'center', - justifyContent: 'center', - position: 'fixed', - top: 0, - left: 0, - right: 0, - zIndex: 100, - }, drawerStyles: { backgroundColor: currentTheme.colors.background, }, safeArea: { backgroundColor, width: '100%', - alignItems: 'center', - justifyContent: 'center', - margin: 'auto', - borderRadius: NavbarStyles.floatingRadius, + margin: 0, transition: NavbarStyles.transition, ...Platform.select({ web: { @@ -174,43 +110,28 @@ const loadStyles = ( backdropFilter: NavbarStyles.floatingBlur, marginTop: NavbarStyles.floatingSpacing, padding: NavbarStyles.floatingSpacing, - paddingTop: 6, - paddingBottom: 6, - boxShadow: currentTheme.colors.navbarBoxShadow, + borderRadius: NavbarStyles.floatingRadius, } : {}), position: 'fixed' as 'fixed' | 'relative', top: 0, - // right: 0, - // left: 0, zIndex: 100, - width: - Platform.OS === 'web' - ? xxs || xs || sm - ? '100vw' - : '90vw' - : xxs || xs || sm - ? '100%' - : '90%', - alignItems: 'center', - justifyContent: 'center', + width: Platform.OS === 'web' ? '100vw' : '100%', }, }), }, container: { - width: '100%', + width: '100vw', maxWidth: '100%', // Ensure container does not exceed the viewport width flex: 1, // Ensure container can grow to fit content backgroundColor, borderRadius: NavbarStyles.floatingRadius, - paddingHorizontal: 16, - paddingVertical: 4, flexDirection: 'row', // Keep flexDirection as row for alignment justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', // Allow items to wrap - height: 'auto', // Ensure container takes full height of its container - // padding: 16, + height: 60, // Ensure container takes full height of its container + padding: 16, }, header: { flexDirection: 'row', // Keep flexDirection as row for initial alignment @@ -224,32 +145,26 @@ const loadStyles = ( alignItems: 'center', }, logo: { + marginRight: 10, + cursor: 'pointer', + backgroundColor: currentTheme.colors.tertiaryBlue, + borderRadius: 10, + }, + logoText: { + color: currentTheme.colors.tertiaryBlue, + fontSize: 38, + fontWeight: '900', cursor: 'pointer', - backgroundColor: currentTheme.colors.logo, - borderRadius: 8, - // filter: 'drop-shadow(0 0 1px #45607d)', }, menuBar: { - color: '#315173', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', - // paddingHorizontal: 16, - // flex: 1, // Keep flexible but consider its behavior with wrapping, - // flexWrap: 'wrap', // Allow items to wrap + paddingHorizontal: 16, + flex: 1, // Keep flexible but consider its behavior with wrapping, + flexWrap: 'wrap', // Allow items to wrap }, drawerTrigger: {}, - loginButton: { - backgroundColor: 'transparent', - color: currentTheme.colors.textPrimary, - borderWidth: 1, - borderColor: currentTheme.colors.cardBorderPrimary, - overflow: 'hidden', - padding: 8, - borderRadius: 4, - fontSize: 16, - fontWeight: 'normal', - }, menuBarItemActive: { // Apply styles for the active item // ... diff --git a/packages/app/constants/PricingData.ts b/packages/app/constants/PricingData.ts index 50e197686..801a9ee52 100644 --- a/packages/app/constants/PricingData.ts +++ b/packages/app/constants/PricingData.ts @@ -1,9 +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.', + '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/theme/index.ts b/packages/app/theme/index.ts index 4919dfe48..a2c3a5590 100644 --- a/packages/app/theme/index.ts +++ b/packages/app/theme/index.ts @@ -14,6 +14,7 @@ export const theme = { error: '#FF453A', textPrimary: 'black', textSecondary: '#EBEBF599', + tertiaryBlue: '#0C66A1', textDarkGrey: '#3B3B3B', cardIconColor: '#22c55e', iconColor: '#FFFFFF',