feat: new home

src/screens/Home/Home.js

@@ -124,7 +124,7 @@ const Home = ({ navigation, route }) => {
 
   const projects = useMemo(
     () => (Array.isArray(userProjects) ? userProjects : []),
-    [userProjects],
+    [userProjects]
   );
 
   const currentProject = useMemo(() => {
@@ -157,7 +157,7 @@ const Home = ({ navigation, route }) => {
 
   const stageStates = useMemo(
     () => getCreationStageStates(currentProject),
-    [currentProject],
+    [currentProject]
   );
 
   const stageStatesByKey = useMemo(() => {
@@ -184,7 +184,7 @@ const Home = ({ navigation, route }) => {
       if (!project?.id) return;
       selectProject(project.id);
     },
-    [selectProject],
+    [selectProject]
   );
 
   const handleCloseMenu = useCallback(() => {
@@ -271,7 +271,7 @@ const Home = ({ navigation, route }) => {
               },
             },
           ],
-          { cancelable: true },
+          { cancelable: true }
         ),
     });
 
@@ -306,7 +306,7 @@ const Home = ({ navigation, route }) => {
             navigate(targetRoute, beatmakerStage?.params);
           },
         },
-      ],
+      ]
     );
     navigation?.setParams?.({ showLyricsCongrats: false });
   }, [
@@ -330,7 +330,7 @@ const Home = ({ navigation, route }) => {
 
   const songwriterAction = useMemo(
     () => getStageAction("songwriter", null),
-    [],
+    []
   );
 
   const handleStartNew = useCallback(async () => {
@@ -395,6 +395,10 @@ const Home = ({ navigation, route }) => {
     setVideoUrl(isWeb ? videos?.landingWeb : videos?.landing);
   }, []);
 
+  const handleReturnToLanding = useCallback(() => {
+    navigate(Routes.LandingPage);
+  }, []);
+
   const handleIntroVideoClose = useCallback(() => {
     setVideoUrl(null);
     markAdventureStarted();
@@ -412,7 +416,7 @@ const Home = ({ navigation, route }) => {
         ...card,
         isLocked: stageStatesByKey[card.key]?.isLocked ?? true,
       })),
-    [stageStatesByKey],
+    [stageStatesByKey]
   );
 
   const [isCoinModalVisible, setCoinModalVisible] = useState(false);
@@ -437,7 +441,7 @@ const Home = ({ navigation, route }) => {
       }
       navigate(action.route, action.params);
     },
-    [currentProject, ensureProjectSelected, hasActiveProject, handleStartNew],
+    [currentProject, ensureProjectSelected, hasActiveProject, handleStartNew]
   );
 
   const handleClubPress = useCallback(() => {
@@ -456,10 +460,6 @@ const Home = ({ navigation, route }) => {
     setCoinModalVisible(false);
   }, []);
 
-  const handleNavigateToLanding = useCallback(() => {
-    navigate(Routes.LandingPage);
-  }, []);
-
   const stageCardContainerStyle = isWeb ? styles.cardsGrid : styles.cardsStack;
   const stageCardItemStyle = isWeb
     ? styles.webStageCard
@@ -518,34 +518,30 @@ const Home = ({ navigation, route }) => {
     </View>
   ) : null;
 
+  const returnHomeButton = (
+    <GradientButton
+      title="retour à l'accueil"
+      onPress={handleReturnToLanding}
+      containerStyle={styles.returnButton}
+    />
+  );
+
   const topBar = (
     <View style={styles.topBar}>
-      <Pressable
-        onPress={handleNavigateToLanding}
-        accessibilityRole="button"
-        style={[
-          styles.returnLandingButton,
-          isWeb ? styles.returnLandingButtonWeb : null,
-        ]}
-      >
-        <Text style={styles.returnLandingButtonText}>
-          Retour à l'accueil
-        </Text>
-      </Pressable>
-      <View style={styles.topBarContent}>
-        {mobileInfoRow}
-        <ProjectDropDown
-          ref={projectDropdownRef}
-          style={styles.projectDropDown}
-          projects={projects}
-          selectedProject={currentProject}
-          allowEmptySelection
-          onSelectProject={handleSelectProject}
-          onModifyProject={handleModifyProject}
-          onCreateProject={handleStartNew}
-          formatDate={formatDate}
-        />
-      </View>
+      {/* {returnHomeButton} */}
+      {mobileInfoRow}
+      {!isWeb ? returnHomeButton : null}
+      <ProjectDropDown
+        ref={projectDropdownRef}
+        style={styles.projectDropDown}
+        projects={projects}
+        selectedProject={currentProject}
+        allowEmptySelection
+        onSelectProject={handleSelectProject}
+        onModifyProject={handleModifyProject}
+        onCreateProject={handleStartNew}
+        formatDate={formatDate}
+      />
     </View>
   );
 
@@ -592,9 +588,7 @@ const Home = ({ navigation, route }) => {
 
       {stageCardsList}
 
-      <ClubCard
-        onPress={handleClubPress}
-      />
+      <ClubCard onPress={handleClubPress} />
     </>
   );
 
@@ -611,6 +605,8 @@ const Home = ({ navigation, route }) => {
             maxWidth={1600}
             width="100%"
             backgroundColor="#303438"
+            showReturnHome={isWeb}
+            onReturnHome={handleReturnToLanding}
           >
             <View style={styles.inner}>
               <ExpoImage
@@ -619,10 +615,15 @@ const Home = ({ navigation, route }) => {
                 style={styles.centerImage}
               />
               {isWeb ? (
-                <View style={styles.contentOverlay}>
-                  {topBar}
-                  {journeyContent}
-                </View>
+                <>
+                  {/* <View style={styles.webReturnButtonWrapper}>
+                    {returnHomeButton}
+                  </View> */}
+                  <View style={styles.contentOverlay}>
+                    {topBar}
+                    {journeyContent}
+                  </View>
+                </>
               ) : (
                 <View style={[styles.contentOverlay, styles.mobileContent]}>
                   {topBar}
@@ -728,40 +729,20 @@ const styles = StyleSheet.create({
     flexWrap: isWeb ? "wrap" : "nowrap",
     alignItems: isWeb ? "center" : "stretch",
     justifyContent: isWeb ? "center" : "flex-start",
-    gap: isWeb ? 0 : 12,
+    gap: 12,
     marginTop: isWeb ? 12 : 0,
     marginBottom: isWeb ? 4 : 16,
     paddingHorizontal: isWeb ? 0 : gutters,
     zIndex: 10,
-    position: "relative",
   },
-  returnLandingButton: {
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    borderRadius: 18,
-    backgroundColor: "rgba(12, 14, 18, 0.72)",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.1)",
+  returnButton: {
+    width: isWeb ? 220 : "100%",
+    alignSelf: isWeb ? "flex-start" : "stretch",
+  },
+  webReturnButtonWrapper: {
     alignSelf: "flex-start",
-  },
-  returnLandingButtonWeb: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    transform: [{ translateY: -2 }],
-  },
-  returnLandingButtonText: {
-    fontSize: 14,
-    color: Palette.white,
-    fontFamily: FONT_FAMILY.InterSemiBold,
-  },
-  topBarContent: {
-    flex: 1,
-    width: "100%",
-    flexDirection: isWeb ? "row" : "column",
-    alignItems: isWeb ? "center" : "stretch",
-    justifyContent: isWeb ? "center" : "flex-start",
-    gap: 12,
+    marginTop: gutters * 2.5,
+    marginBottom: 8,
   },
   projectDropDown: {
     width: isWeb ? 420 : "100%",