Landing Page Layour Design Changed

app.json

@@ -0,0 +1,14 @@
+{
+  "expo": {
+    "name": "packrat-world",
+    "slug": "packrat-world",
+    "version": "0.0.1",
+    "description": "PackRat is the ultimate adventure planner designed for those who love to explore the great outdoors. Our app helps users plan and organize their trips with ease, whether it's a weekend camping trip, a day hike, or a cross-country road trip.",
+    "sdkVersion": "50.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ]
+  }
+}

apps/vite/src/index.css

@@ -57,7 +57,7 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
+    /* background-color: #ffffff; */
   }
   a:hover {
     color: #747bff;

apps/vite/src/routes/__root.tsx

@@ -6,16 +6,18 @@ import { Navbar } from 'app/components/navigation';
 import { Provider } from 'app/provider';
 import { NODE_ENV } from '@packrat/config';
 import ThemeContext from '../../../../packages/app/context/theme';
+import Footer from 'app/components/footer/Footer';
 
 const ThemedMainContentWeb = () => {
   const { isDark } = useContext(ThemeContext);
 
-  const backgroundColor = isDark ? '#050505' : '#fdfbff';
+  const backgroundColor = isDark ? '#000000' : '#F5F5F5';
 
   return (
     <MainContentWeb style={{ backgroundColor, paddingTop: 80 }}>
       <Navbar />
       <Outlet />
+      <Footer />
     </MainContentWeb>
   );
 };

apps/vite/src/styles/global.css

@@ -1,16 +1,8 @@
+/* body {
+  background: hsla(0, 0%, 96%, 1) !important;
+  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F6F6F6", endColorstr="#E1DAE6", GradientType=1 );
+}
 
 *:focus {
   outline: none;
-}
-
-@media(prefers-color-scheme:dark){
-  body {
-    background-color:#1A1A1D !important;
-  }
-}
-
-@media(prefers-color-scheme:light){
-  body {
-    background-color: #fdfbff !important;
-  }
-}
+} */

packages/app/components/footer/Footer.tsx

@@ -1,32 +1,186 @@
-import { Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { theme } from '../../theme';
 import useTheme from '../../hooks/useTheme';
+import { RImage, RLink, RSeparator, RText } from '@packrat/ui';
+import { useNavigate } from 'app/hooks/navigation';
+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={{
-        width: '100%',
-        backgroundColor: currentTheme.colors.card,
-        padding: 15,
+    <View style={styles.mainContainer}>
+      <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: xs || sm || md ? 'row' : 'column', alignItems: 'flex-start', justifyContent: 'center', gap: xs || sm || md  ? 10 : 0 }}>
+          <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>
+        </View>
+        <View>
+          <RText style={styles.credit}>
+            © 2024 Bierman Collective. All rights reserved.
+          </RText>
+        </View>
+      </View>
+    </View>
+  );
+}
 
+const loadStyles = (currentTheme, xs, sm, md) => {
+  {
+    return StyleSheet.create({
+      mainContainer: {
+        width: '100%',
+        flexDirection: 'column',
+        paddingTop: 80,
+        paddingBottom: 40,
         alignSelf: 'center',
+        alignItems: 'center',
+        justifyContent: 'space-evenly',
         position: 'relative',
         bottom: 0,
-      }}
-    >
-      <Text
-        style={{
-          color: currentTheme.colors.tertiaryBlue,
-          fontSize: currentTheme.font.size,
-          textAlign: 'center',
-        }}
-      >
-        Copyright &copy; {year}
-      </Text>
-    </View>
-  );
-}
+      },
+      mainFirstContainer: {
+        width: '100%',
+        flexDirection: xs || sm || md ? 'column' : 'row',
+        flexWrap: 'wrap',
+        paddingTop: 80,
+        paddingBottom: 40,
+        alignSelf: 'center',
+        alignItems: 'center',
+        justifyContent: 'space-evenly',
+        position: 'relative',
+        bottom: 0,
+        gap: xs || sm || md ? 10 : 0
+      },
+      firstMainContainer: {
+        width: '95%',
+        // justifyContent: 'center',
+        // alignItems: 'center',
+      },
+      firstContainer: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        gap: 4,
+        paddingVertical: 18,
+      },
+      logo: {
+        backgroundColor: currentTheme.colors.tertiaryBlue,
+        borderRadius: 10,
+        cursor: 'pointer',
+      },
+      navLinks: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 16,
+        margin: 10,
+        fontSize: 14,
+        color: currentTheme.colors.textPrimary,
+        paddingBottom: 40,
+      },
+      navItem: { color: currentTheme.colors.textPrimary },
+      credit: {
+        color: currentTheme.colors.textPrimary,
+        fontSize: 13,
+        textAlign: xs ? 'center' : 'left',
+        fontWeight: 'normal',
+        paddingTop: sm || md ? 10 : 'auto',
+      },
+      lastContainer: {
+        display: 'flex',
+        flexWrap: 'wrap-reverse',
+        flexDirection: sm ? 'column-reverse' : 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: sm || md ? 'auto' : '95%',
+
+      },
+    });
+  }
+};

packages/app/components/landing_page/FAQS.tsx

@@ -0,0 +1,115 @@
+import { RImage, RText } from '@packrat/ui';
+import { View } from 'tamagui';
+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';
+import { FaqList } from 'app/constants/FAQS';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useState } from 'react';
+
+export const FAQS = () => {
+  const { currentTheme } = useTheme();
+  const { xs, sm, md } = useResponsive();
+  const styles = StyleSheet.create(loadStyles(currentTheme, xs, sm, md));
+
+  const [visibleAnswers, setVisibleAnswers] = useState({});
+
+  const toggleAnswer = (index) => {
+    setVisibleAnswers((prev) => ({
+      ...prev,
+      [index]: !prev[index],
+    }));
+  };
+
+  return (
+    <View style={styles.faqMainContainer}>
+      <View style={styles.faqFirstContainer}>
+        <RText style={styles.faqMainTitle}>Frequently Asked Questions</RText>
+        <View style={{width: '100%'}}>
+          {FaqList.map((faq, index) => {
+            return (
+              <View style={styles.faqBox}>
+                <View
+                  onPress={() => toggleAnswer(index)}
+                  style={styles.faqQuestion}
+                >
+                  <RText>{faq.question}</RText>
+                  <MaterialCommunityIcons
+                    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>
+            );
+          })}
+        </View>
+      </View>
+      <View style={styles.faqSecondContainer}>
+        <RImage
+          src={PakRat_FAQS}
+          style={{
+            backgroundColor: 'transparent',
+            width: xs || sm || md ?  359 : 650,
+            height: xs || sm || md ?  250 : 541,
+          }}
+          alt="PackRat Frequently Asked Questions"
+        />
+      </View>
+    </View>
+  );
+};
+
+const loadStyles = (currentTheme, xs, sm, md) => StyleSheet.create({
+  faqMainContainer: {
+    flexDirection: xs || sm || md ? 'column' : 'row',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    gap: 10,
+    width: '100vw',
+    maxWidth: '100vw',
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
+  faqFirstContainer: {
+    alignItems: 'center',
+  },
+  faqBox: {
+    width: xs || sm || md  ? '100%' : '24vw',
+  },
+  faqMainTitle: {
+    fontSize: xs || sm || md ?  20 : 26,
+    textAlign : xs || sm || md ? 'center' : 'auto',
+    fontWeight: 'bold',
+    color: currentTheme.colors.textPrimary,
+    marginBottom: 30,
+  },
+  faqQuestion: {
+    borderBottomWidth: 1,
+    borderBottomColor: currentTheme.colors.textPrimary,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 4,
+    marginBottom: 4,
+    marginLeft: xs || sm || md ? 10 : 0,
+    marginRight: xs || sm || md ? 10 : 0,
+    gap: xs || sm || md ? 2 : 10,
+  },
+  faqAnswer: {
+    marginLeft: 0,
+    width: xs || sm || md ? '100%' : '24vw',
+    marginLeft: xs || sm || md ? 10 : 0,
+    marginRight: xs || sm || md ? 10 : 0,
+  },
+  faqSecondContainer: {},
+});