last fixes, home and videos

src/screens/Home/Home.js

@@ -8,15 +8,14 @@ import React, {
 import { StyleSheet, Text, View } from "react-native";
 import { Image as ExpoImage } from "expo-image";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
-import { background, cardsImg, icons, videos } from "../../assets";
+import { background, cardsImg, icons } from "../../assets";
 import Alert from "../../components/Alert";
 import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import GradientButton from "../../components/GradientButton";
 import MoreMenu from "../../components/MoreMenu";
 import ProjectDropDown from "../../components/ProjectDropDown/ProjectDropDown";
 import ShareBtn from "../../components/ShareBtn/ShareBtn";
-import { projectsRef, usersRef, videosRef } from "../../config/firebase";
-import useDataFromRef from "../../hooks/useDataFromRef";
+import { projectsRef, usersRef } from "../../config/firebase";
 import { isWeb } from "../../hooks/useLayoutType.js";
 import Page from "../../layouts/Page";
 import LandingPage from "../LandingPage";
@@ -105,6 +104,7 @@ const Home = ({ navigation, route }) => {
     currentUserData,
     currentUID,
     createNewProject,
+    videos,
   } = useUser();
   const { setTooltip } = useMinuit();
 
@@ -124,9 +124,7 @@ const Home = ({ navigation, route }) => {
     const statusCandidates = [
       pickStatus(currentUserData?.stripeSubscriptionStatus),
       pickStatus(currentUserData?.stripeSubscription?.status),
-      pickStatus(
-        currentUserData?.stripeSubscription?.stripeSubscriptionStatus,
-      ),
+      pickStatus(currentUserData?.stripeSubscription?.stripeSubscriptionStatus),
       pickStatus(currentUserData?.stripeSubscription?.metadata?.status),
     ].filter(Boolean);
 
@@ -410,11 +408,7 @@ const Home = ({ navigation, route }) => {
   const adventureStarted =
     hasLocalAdventureFlag || !!currentUserData?.adventureStarted;
 
-  const { data: video } = useDataFromRef({
-    ref: videosRef.doc("fr"),
-    simpleRef: true,
-  });
-  const videoUrl = isWeb ? video?.landingWeb : video?.landing;
+  const videoUrl = isWeb ? videos?.landingWeb : videos?.landing;
   const homeBackgroundImage = background.bgTrans;
   const landingBackgroundImage = homeBackgroundImage;
 
@@ -447,12 +441,7 @@ const Home = ({ navigation, route }) => {
       }
       navigate(action.route, action.params);
     },
-    [
-      currentProject,
-      ensureProjectSelected,
-      hasActiveProject,
-      handleStartNew,
-    ],
+    [currentProject, ensureProjectSelected, hasActiveProject, handleStartNew],
   );
 
   const handleClubPress = useCallback(() => {
@@ -467,8 +456,8 @@ const Home = ({ navigation, route }) => {
         scrollEnabled={false}
         containerStyle={styles.page}
         contentContainerStyle={styles.pageContent}
+        maxWidth={1600}
         width="100%"
-        maxWidth={null}
         backgroundColor="#303438"
       >
         <View style={styles.inner}>
@@ -534,6 +523,8 @@ const Home = ({ navigation, route }) => {
         shareBtn
         title="Landing Page"
         backgroundImg={landingBackgroundImage}
+        contentContainerStyle={styles.pageContent}
+        backgroundColor="#303438"
       >
         <View
           style={{
@@ -568,12 +559,9 @@ const styles = StyleSheet.create({
   page: {
     backgroundColor: "transparent",
     padding: 0,
-    paddingLeft: isWeb ? 32 : 0,
-    paddingRight: isWeb ? 32 : 0,
     paddingTop: 0,
     paddingBottom: 0,
     width: "100%",
-    alignSelf: "stretch",
   },
   pageContent: {
     flexGrow: 1,
@@ -584,7 +572,6 @@ const styles = StyleSheet.create({
     alignSelf: "stretch",
     alignItems: "stretch",
     justifyContent: "flex-start",
-    position: "relative",
   },
   centerImage: {
     width: HOME_BACKGROUND_WIDTH + 120,
@@ -625,6 +612,7 @@ const styles = StyleSheet.create({
     textTransform: "uppercase",
     letterSpacing: 1,
     marginBottom: 16,
+    marginTop: 15,
   },
   cardsGrid: {
     width: "100%",
@@ -632,6 +620,5 @@ const styles = StyleSheet.create({
     flexWrap: "wrap",
     justifyContent: "space-between",
     rowGap: 20,
-    columnGap: 20,
   },
 });