end of home

2025-10-01 10:49:03 +02:00
parent 4097143559
commit 167e62fcfc
18 changed files with 928 additions and 558 deletions
@@ -230,6 +230,8 @@ export const ai = {
  theo,
  bena,
  john,
+  leftIcon: require("./UI/leftIcon.png"),
+  rightIcon: require("./UI/rightIcon.png"),
 };

 export const videos = {
@@ -55,9 +55,6 @@ const BorderGradientButton = ({
              borderRadius: 14,
              gap: 11,
            }}
-            // experimentalBlurMethod={
-            //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-            // }
          >
            {icon && <Image source={icon} style={size({ size: 16 })} />}
            <Text
@@ -0,0 +1,148 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { FlatList, StyleSheet, View, useWindowDimensions } from "react-native";
+import PersonaCard from "../cards/PersonaCard/PersonaCard";
+import { ai } from "../../assets";
+import { getCreationStageStates } from "../../utils/projectStages";
+
+const STAGE_CARD_CONTENT = [
+  {
+    key: "songwriter",
+    title: "Nathalie",
+    description: "Let’s write lyrics together !",
+    image: ai.nathalie,
+  },
+  {
+    key: "beatmaker",
+    title: "Theo",
+    description: "Come back, when you'll have lyrics!",
+    image: ai.theo,
+  },
+  {
+    key: "designer",
+    title: "Bena",
+    description: "Come back when you want to generate cover!",
+    image: ai.bena,
+  },
+  {
+    key: "director",
+    title: "John",
+    description: "Come back when your audio is ready!",
+    image: ai.john,
+  },
+];
+
+const FeatureCarousel = ({
+  style,
+  selectedProject,
+  activeIndex,
+  onActiveIndexChange,
+}) => {
+  const stageStates = useMemo(
+    () => getCreationStageStates(selectedProject),
+    [selectedProject],
+  );
+
+  const carouselItems = useMemo(
+    () =>
+      STAGE_CARD_CONTENT.map((item, index) => ({
+        ...item,
+        isLocked: stageStates[index]?.isLocked ?? true,
+      })),
+    [stageStates],
+  );
+  const { height: windowHeight } = useWindowDimensions();
+  const itemHeight = Math.max(windowHeight, 1);
+
+  const listRef = useRef(null);
+
+  const keyExtractor = useCallback((item) => item.key, []);
+
+  const renderItem = useCallback(
+    ({ item }) => <PersonaCard item={item} isLock={item.isLocked} />,
+    [],
+  );
+
+  const getItemLayout = useCallback(
+    (_data, index) => ({
+      length: itemHeight,
+      offset: itemHeight * index,
+      index,
+    }),
+    [itemHeight],
+  );
+
+  const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 60 });
+
+  const handleViewableItemsChanged = useCallback(
+    ({ viewableItems }) => {
+      if (!onActiveIndexChange) {
+        return;
+      }
+      const firstVisible = viewableItems?.[0];
+      if (firstVisible?.index != null) {
+        onActiveIndexChange(firstVisible.index);
+      }
+    },
+    [onActiveIndexChange],
+  );
+
+  useEffect(() => {
+    if (
+      listRef.current == null ||
+      typeof activeIndex !== "number" ||
+      activeIndex < 0 ||
+      activeIndex >= carouselItems.length
+    ) {
+      return;
+    }
+    try {
+      listRef.current.scrollToIndex({ index: activeIndex, animated: true });
+    } catch (_error) {
+      // Ignore scroll errors when list is not ready yet.
+    }
+  }, [activeIndex, carouselItems.length]);
+
+  return (
+    <View style={[styles.container, style]}>
+      <FlatList
+        ref={listRef}
+        data={carouselItems}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        onViewableItemsChanged={handleViewableItemsChanged}
+        viewabilityConfig={viewabilityConfig.current}
+        getItemLayout={getItemLayout}
+        showsVerticalScrollIndicator={false}
+        pagingEnabled
+        initialNumToRender={1}
+        maxToRenderPerBatch={2}
+        windowSize={3}
+        scrollEventThrottle={16}
+        snapToAlignment="start"
+        snapToInterval={itemHeight}
+        decelerationRate="fast"
+        style={styles.list}
+        contentContainerStyle={styles.listContent}
+      />
+    </View>
+  );
+};
+
+export default FeatureCarousel;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: "100%",
+  },
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    flexGrow: 1,
+  },
+  cardRight: {
+    flexDirection: "row-reverse",
+    alignItems: "center",
+  },
+});
@@ -124,12 +124,20 @@ const ProjectDropDown = ({
          <BlurView
            intensity={BUTTON_BLUR_INTENSITY}
            tint="dark"
-            style={[
-              styles.dropdownOverlayBlur,
-              {
-                width: dropdownWidth || "100%",
-              },
-            ]}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              borderRadius: 16,
+              paddingHorizontal: 8,
+              paddingVertical: 8,
+              gap: 9,
+              maxHeight: 400,
+              zIndex: 4,
+              elevation: 4,
+              width: dropdownWidth || "100%",
+              overflow: "hidden",
+            }}
          >
            <ProjectRow
              isTitle={true}
@@ -279,6 +287,7 @@ const styles = StyleSheet.create({
    borderRadius: 15,
    padding: 8,
    position: "relative",
+    overflow: "hidden",
  },
  dropdownBlurDisabled: {
    opacity: 0.6,
@@ -291,18 +300,6 @@ const styles = StyleSheet.create({
    position: "relative",
    zIndex: 3,
  },
-  dropdownOverlayBlur: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    borderRadius: 16,
-    paddingHorizontal: 8,
-    paddingVertical: 8,
-    gap: 9,
-    maxHeight: 400,
-    zIndex: 4,
-    elevation: 4,
-  },
  dropdownOverlayContent: {
    maxHeight: 260,
    width: "100%",
@@ -346,6 +343,7 @@ const styles = StyleSheet.create({
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 10,
+    overflow: "hidden",
  },
  projectImage: {
    width: 60,
@@ -0,0 +1,31 @@
+import React from "react";
+import { BlurView } from "expo-blur";
+import { Pressable } from "react-native";
+import { Entypo } from "@expo/vector-icons";
+
+export default function ShareBtn({ style, onPress = null }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={!onPress}
+      style={{
+        ...style,
+      }}
+    >
+      <BlurView
+        intensity={20}
+        tint="dark"
+        style={{
+          padding: 12,
+          borderRadius: 15,
+          overflow: "hidden",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Entypo name="share-alternative" size={18} color="white" />
+      </BlurView>
+    </Pressable>
+  );
+}
@@ -0,0 +1,41 @@
+import React from "react";
+import { BlurView } from "expo-blur";
+import { Pressable, Text } from "react-native";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { Entypo } from "@expo/vector-icons";
+
+export default function ShareBtn({ style, onPress = null }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={!onPress}
+      style={{
+        ...style,
+      }}
+    >
+      <BlurView
+        style={{
+          paddingHorizontal: 10,
+          paddingVertical: 5,
+          borderRadius: 15,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 14,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+            marginRight: 5,
+          }}
+        >
+          {"Partager l’expérience"}
+        </Text>
+        <Entypo name="share-alternative" size={16} color="white" />
+      </BlurView>
+    </Pressable>
+  );
+}
@@ -0,0 +1,99 @@
+import React from "react";
+import { Text, useWindowDimensions, View } from "react-native";
+import { Image } from "expo-image";
+import { BlurView } from "expo-blur";
+import { gutters, Palette } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import palette from "../../../styles/Palette";
+
+export default function PersonaCard({ item, isLock = false }) {
+  const { height: windowHeight } = useWindowDimensions();
+
+  return (
+    <View
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        height: windowHeight,
+        marginTop: -20,
+      }}
+    >
+      <View
+        style={{
+          borderRadius: 10,
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+        }}
+      >
+        <Image
+          source={item.image}
+          style={{ height: 190, width: "100%" }}
+          contentFit="contain"
+        />
+        <BlurView
+          intensity={30}
+          tint="dark"
+          style={{
+            borderRadius: 20,
+            paddingVertical: 20,
+            paddingHorizontal: gutters,
+            overflow: "hidden",
+            width: "100%",
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 18,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterSemiBold,
+              marginBottom: 15,
+            }}
+          >
+            {item.title}
+          </Text>
+          <Text
+            style={{
+              fontSize: 12,
+              lineHeight: 20,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterRegular,
+            }}
+          >
+            {item.description}
+          </Text>
+          {isLock && (
+            <View
+              pointerEvents="none"
+              style={{
+                position: "absolute",
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                borderRadius: 20,
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundColor: "rgba(0,0,0,0.2)",
+              }}
+            >
+              <View
+                style={{
+                  width: 36,
+                  height: 36,
+                  borderRadius: 18,
+                  backgroundColor: "rgba(0,0,0,0.4)",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <FontAwesome name="lock" size={24} color={palette.primary} />
+              </View>
+            </View>
+          )}
+        </BlurView>
+      </View>
+    </View>
+  );
+}
@@ -0,0 +1,111 @@
+import React from "react";
+import { Text, useWindowDimensions, View } from "react-native";
+import { Image } from "expo-image";
+import { BlurView } from "expo-blur";
+import { Palette } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import palette from "../../../styles/Palette";
+
+export default function PersonaCard({ item, index, isLock = true }) {
+  const isImageOnLeft = index % 2 === 0;
+  const { height: windowHeight } = useWindowDimensions();
+
+  return (
+    <View
+      style={{
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        height: windowHeight,
+        marginTop: 50,
+      }}
+    >
+      <View
+        style={{
+          padding: 10,
+          borderRadius: 10,
+          backgroundColor: isLock
+            ? "rgba(0, 0, 0, 0.2)"
+            : "rgba(0, 0, 0, 0.05)",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "90%",
+          height: "30%",
+          flexDirection: isImageOnLeft ? "row" : "row-reverse",
+        }}
+      >
+        <Image
+          source={item.image}
+          style={{ height: 250, width: 400 }}
+          contentFit="contain"
+        />
+        <BlurView
+          intensity={30}
+          tint="dark"
+          style={{
+            flex: 1,
+            borderRadius: 20,
+            paddingHorizontal: 18,
+            paddingVertical: 16,
+          }}
+        >
+          <View
+            style={{
+              minHeight: 100,
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 20,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterSemiBold,
+                marginBottom: 8,
+              }}
+            >
+              {item.title}
+            </Text>
+            <Text
+              style={{
+                fontSize: 14,
+                lineHeight: 20,
+                color: "rgba(255, 255, 255, 0.7)",
+                fontFamily: FONT_FAMILY.InterRegular,
+              }}
+            >
+              {item.description}
+            </Text>
+            {isLock && (
+              <View
+                pointerEvents="none"
+                style={{
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  top: 0,
+                  bottom: 0,
+                  borderRadius: 20,
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <View
+                  style={{
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18,
+                    backgroundColor: "rgba(0,0,0,0.4)",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <FontAwesome name="lock" size={24} color={palette.primary} />
+                </View>
+              </View>
+            )}
+          </View>
+        </BlurView>
+      </View>
+    </View>
+  );
+}
@@ -3,14 +3,12 @@ import { Image, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { SafeAreaView } from "react-native-safe-area-context";
 import React from "reactn";
-
 import { responsiveHeight } from "../actions/responsiveSizes.js";
 import BaseHeader from "../components/BaseHeader";
 import NavigateHeader from "../components/NavigateHeader";
 import { gutters } from "../styles";
-
 import { isWeb } from "../hooks/useLayoutType.js";
-// import { useUserData } from "../providers/UserDataProvider.js";
+import ShareBtn from "../components/ShareBtn/ShareBtn";

 export default ({
  children,
@@ -35,10 +33,9 @@ export default ({
  headerTitleStyle = {},
  hideBackButton = false,
  width = undefined,
-  maxWidth = null,
+  maxWidth = 1200,
+  shareBtn = false,
 }) => {
-  // const { currentUID } = useUserData();
-
  const PageContainer =
    containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;

@@ -112,6 +109,15 @@ export default ({
      </PageContainer>

      {bottomStickyContent?.()}
+      {shareBtn && isWeb && (
+        <ShareBtn
+          style={{
+            position: "absolute",
+            top: 20,
+            right: 20,
+          }}
+        />
+      )}
    </View>
  );
 };
@@ -114,6 +114,7 @@ export default ({ children }) => {
          },
          { merge: true },
        );
+        console.log("update selected project");
      } catch (error) {
        console.log(
          "UserDataProvider: unable to persist selectedProjectId",
@@ -158,7 +159,7 @@ export default ({ children }) => {
          ...partial,
          updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
        },
-        options
+        options,
      );
    } catch (e) {
      console.log("updateProjectData error", e?.message);
@@ -194,7 +195,7 @@ export default ({ children }) => {
            followedBy: arrayUnion(currentUID),
            lastFollowersUpdateAt: new Date(),
          },
-          { merge: true }
+          { merge: true },
        );
        setTooltip({ type: "success", text: "Abonnement mis à jour" });
      }
@@ -212,7 +213,7 @@ export default ({ children }) => {
            followedBy: arrayRemove(currentUID),
            lastFollowersUpdateAt: new Date(),
          },
-          { merge: true }
+          { merge: true },
        );
        setTooltip({
          type: "success",
@@ -345,7 +346,11 @@ export default ({ children }) => {
    if (remoteSelectedId !== selectedProjectId) {
      setSelectedProjectId(remoteSelectedId);
    }
-  }, [currentUserDoc?.selectedProjectId, selectedProjectId, setSelectedProject]);
+  }, [
+    currentUserDoc?.selectedProjectId,
+    selectedProjectId,
+    setSelectedProject,
+  ]);

  useEffect(() => {
    if (!Array.isArray(userProjects) || userProjects.length === 0) return;
@@ -1,145 +1,188 @@
-import { View, Text, Image, Platform } from "react-native";
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Platform, StyleSheet, View } from "react-native";
 import Page from "../../layouts/Page";
-import { background, img } from "../../assets";
-import { responsiveHeight } from "react-native-responsive-dimensions";
-import { Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
 import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
-import { FlatList, Alert } from "react-native";
-import { BlurView } from "expo-blur";
 import { useUser } from "../../providers/UserDataProvider";
-import MusicCard from "../Library/components/MusicCard";
+import ProjectDropDown from "../../components/ProjectDropDown/ProjectDropDown";
+import FeatureCarousel from "../../components/FeatureCarousel/FeatureCarousel";
 import GradientButton from "../../components/GradientButton";
-import MoreMenu from "../../components/MoreMenu";
-import { projectsRef } from "../../config/firebase";
-import { useGlobal } from "reactn";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import { isWeb } from "../../hooks/useLayoutType.js";
+import ShareBtn from "../../components/ShareBtn/ShareBtn";
+import {
+  getCreationStageStates,
+  getStageAction,
+} from "../../utils/projectStages";

 const Home = () => {
-  const { userProjects = [], resetSelectedProject, selectProject } = useUser();
+  const {
+    userProjects = [],
+    resetSelectedProject,
+    selectProject,
+    selectedProject,
+    selectedProjectId,
+  } = useUser();
+
  const projects = useMemo(
    () => (Array.isArray(userProjects) ? userProjects : []),
    [userProjects],
  );
-  const [, setTooltip] = useGlobal("_tooltip");
-  const [menuTop, setMenuTop] = useState(0);
-  const [showMenu, setShowMenu] = useState(false);
-  const [menuProjectId, setMenuProjectId] = useState(null);

+  const currentProject = useMemo(() => {
+    if (!projects.length) return null;
+    const activeId = selectedProject?.id || selectedProjectId;
+    if (!activeId) {
+      return projects[0];
+    }
+    return projects.find((project) => project?.id === activeId) || projects[0];
+  }, [projects, selectedProject?.id, selectedProjectId]);
+
+  const formatDate = useCallback((timestamp) => {
+    try {
+      const value = timestamp?.toDate ? timestamp.toDate() : timestamp;
+      const date = value ? new Date(value) : null;
+      if (!date || Number.isNaN(date.getTime())) {
+        return "";
+      }
+      const day = date.getDate().toString().padStart(2, "0");
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      return `${day}/${month}`;
+    } catch (error) {
+      console.warn("Home.web: formatDate error", error);
+      return "";
+    }
+  }, []);
+
+  const handleSelectProject = (project) => {
+    if (!project?.id) return;
+    selectProject(project.id);
+  };
+
+  const handleModifyProject = (project) => {
+    if (!project?.id) return;
+    selectProject(project.id);
+    navigate(Routes.FlowSelection);
+  };
+
+  const handleCreateNew = () => {
+    resetSelectedProject();
+    navigate(Routes.FlowSelection);
+  };
+
+  const stageStates = useMemo(
+    () => getCreationStageStates(currentProject),
+    [currentProject],
+  );
+
+  const firstUnlockedIndex = useMemo(() => {
+    const index = stageStates.findIndex((stage) => !stage.isLocked);
+    return index === -1 ? 0 : index;
+  }, [stageStates]);
+
+  const [activeStageIndex, setActiveStageIndex] = useState(firstUnlockedIndex);
+
+  useEffect(() => {
+    setActiveStageIndex((prev) => {
+      if (prev == null || prev >= stageStates.length) {
+        return firstUnlockedIndex;
+      }
+      const current = stageStates[prev];
+      const fallback = stageStates[firstUnlockedIndex];
+      if (current?.isLocked && fallback && !fallback.isLocked) {
+        return firstUnlockedIndex;
+      }
+      return prev;
+    });
+  }, [stageStates, firstUnlockedIndex]);
+
+  const activeStage =
+    stageStates[activeStageIndex] || stageStates[firstUnlockedIndex];
+  const stageAction = useMemo(() => {
+    if (!activeStage) {
+      return null;
+    }
+    return getStageAction(activeStage.key, currentProject);
+  }, [activeStage, currentProject]);
+
+  const stageRoute = stageAction?.route || null;
+  const stageParams = stageAction?.params;
+  const stageLocked = activeStage?.isLocked ?? true;
+
+  const ensureProjectSelected = useCallback(() => {
+    if (!currentProject?.id) {
+      return;
+    }
+    if (selectedProject?.id !== currentProject.id) {
+      selectProject(currentProject.id);
+    }
+  }, [currentProject?.id, selectProject, selectedProject?.id]);
+
+  const handleStageAction = useCallback(() => {
+    if (stageLocked || !stageRoute) {
+      return;
+    }
+    ensureProjectSelected();
+    navigate(stageRoute, stageParams);
+  }, [ensureProjectSelected, stageLocked, stageParams, stageRoute]);
+
+  const primaryDisabled = stageLocked || !stageRoute;
  return (
-    <Page backgroundImg={background.homeBG} headerType="NONE">
-      <View style={{ flex: 1 }}>
-        <Image
-          source={img.goodVibe}
-          style={{ alignSelf: "center", position: "absolute" }}
-        />
-        {projects.length > 0 && (
-          <View
-            style={{
-              height: responsiveHeight(70),
-              paddingTop: responsiveHeight(6),
-            }}
-          >
-            <BlurView
-              intensity={Platform.OS !== "ios" ? 10 : 20}
-              style={{
-                flex: 1,
-                borderRadius: 20,
-                overflow: "hidden",
-                backgroundColor: Palette.glass,
-                padding: 12,
-                gap: 8,
-              }}
-              // experimentalBlurMethod={
-              //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-              // }
-            >
-              <Text
-                style={{
-                  fontSize: 22,
-                  color: Palette.white,
-                  fontFamily: FONT_FAMILY.InterSemiBold,
-                  marginBottom: 8,
-                  textAlign: "center",
-                }}
-              >
-                Musiques en cours
-              </Text>
-              <FlatList
-                data={projects}
-                keyExtractor={(item) => item.id}
-                contentContainerStyle={{ gap: 10, paddingBottom: 10 }}
-                renderItem={({ item }) => (
-                  <MusicCard
-                    title={item?.title || "Sans titre"}
-                    subtitle={"MusicLand"}
-                    imageUri={item?.coverUrl || null}
-                    projectId={item?.id}
-                    likedBy={item?.likedBy || []}
-                    onPress={() => {
-                      selectProject(item.id);
-                      navigate(Routes.FlowSelection);
-                    }}
-                    onPressMore={(posTop) => {
-                      setMenuProjectId(item.id);
-                      setMenuTop(posTop);
-                      setShowMenu((prev) => !prev || posTop !== menuTop);
-                    }}
-                  />
-                )}
-              />
-              <MoreMenu
-                visible={showMenu}
-                top={menuTop}
-                onClose={() => setShowMenu(false)}
-                inPlaylist={false}
-                projectId={menuProjectId}
-                extraItems={[
-                  {
-                    label: "Supprimer",
-                    onPress: () =>
-                      Alert.alert(
-                        "Confirmer la suppression",
-                        "Cette action supprimera définitivement ce projet.",
-                        [
-                          { text: "Annuler", style: "cancel" },
-                          {
-                            text: "Supprimer",
-                            style: "destructive",
-                            onPress: async () => {
-                              try {
-                                if (!menuProjectId) return;
-                                await projectsRef.doc(menuProjectId).delete();
-                                setTooltip({
-                                  type: "success",
-                                  text: "Projet supprimé",
-                                });
-                              } catch (e) {
-                                setTooltip({
-                                  type: "error",
-                                  text: e?.message || "Suppression impossible",
-                                });
-                              }
-                            },
-                          },
-                        ],
-                        { cancelable: true },
-                      ),
-                  },
-                ]}
-              />
-            </BlurView>
-          </View>
-        )}
-        <View style={{ paddingTop: 12, marginBottom: responsiveHeight(10) }}>
+    <Page shareBtn backgroundImg={background.homeBGWeb} headerType="NONE">
+      <View style={styles.root}>
+        <View
+          style={{
+            zIndex: 10,
+            position: "absolute",
+            top: 10,
+            width: 400,
+            alignSelf: "center",
+            flexDirection: isWeb ? "column" : "row",
+            alignItems: "center",
+            paddingHorizontal: isWeb ? 0 : gutters,
+            gap: 10,
+          }}
+        >
+          <ProjectDropDown
+            style={[isWeb ? { width: "100%" } : { flex: 1 }]}
+            projects={projects}
+            selectedProject={currentProject}
+            onSelectProject={handleSelectProject}
+            onModifyProject={handleModifyProject}
+            onCreateProject={handleCreateNew}
+            formatDate={formatDate}
+          />
+          {!isWeb && <ShareBtn />}
+        </View>
+        <View style={styles.carouselSection}>
+          <FeatureCarousel
+            selectedProject={currentProject}
+            activeIndex={activeStageIndex}
+            onActiveIndexChange={setActiveStageIndex}
+          />
+        </View>
+        <View
+          style={{
+            position: "absolute",
+            bottom: isWeb ? 180 : 120,
+            flexDirection: isWeb ? "row" : "column",
+            gap: 5,
+            alignSelf: "center",
+          }}
+        >
          <GradientButton
-            title="Créer une nouvelle musique"
-            containerStyle={{ width: "80%", alignSelf: "center" }}
-            onPress={() => {
-              resetSelectedProject();
-              navigate(Routes.FlowSelection);
-            }}
+            containerStyle={{ width: Platform.OS === "web" ? 250 : "100%" }}
+            title={"Commencer à créer"}
+            onPress={handleStageAction}
+            disabled={primaryDisabled}
+          />
+          <BorderGradientButton
+            containerStyle={{ width: Platform.OS === "web" ? 250 : "100%" }}
+            title={"Continuer la création"}
+            onPress={handleStageAction}
+            disabled={primaryDisabled}
          />
        </View>
      </View>
@@ -148,3 +191,27 @@ const Home = () => {
 };

 export default Home;
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  heroImage: {
+    position: "absolute",
+    top: -60,
+    alignSelf: "center",
+    width: "80%",
+    maxWidth: 920,
+    height: 420,
+    opacity: 0.9,
+  },
+  shareIcon: {
+    width: 18,
+    height: 18,
+    tintColor: Palette.white,
+  },
+  carouselSection: {
+    width: "100%",
+    flex: 1,
+  },
+});
@@ -1,333 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import {
-  FlatList,
-  Image,
-  StyleSheet,
-  Text,
-  View,
-  useWindowDimensions,
-} from "react-native";
-import { BlurView } from "expo-blur";
-import Page from "../../layouts/Page";
-import { background, img } from "../../assets";
-import { Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import { navigate } from "../../navigation/NavigationService";
-import { Routes } from "../../navigation";
-import { useUser } from "../../providers/UserDataProvider";
-import ProjectDropDown from "../../components/ProjectDropDown/ProjectDropDown";
-
-const ITEM_SPACING = 24;
-
-const Home = () => {
-  const {
-    userProjects = [],
-    resetSelectedProject,
-    selectProject,
-    selectedProject,
-    selectedProjectId,
-  } = useUser();
-
-  const projects = useMemo(
-    () => (Array.isArray(userProjects) ? userProjects : []),
-    [userProjects],
-  );
-
-  const { width: windowWidth } = useWindowDimensions();
-
-  const carouselItems = useMemo(
-    () => [
-      {
-        id: "project-vision",
-        title: "Composez sans limites",
-        description:
-          "Créez instantanément des maquettes professionnelles et explorez de nouveaux genres.",
-        image: img.placeholder,
-      },
-      {
-        id: "project-community",
-        title: "Collaborez en équipe",
-        description:
-          "Partagez vos projets, échangez des idées et co-créez en temps réel.",
-        image: img.placeholder2,
-      },
-      {
-        id: "project-ai",
-        title: "Optimisé par l'IA",
-        description:
-          "Accédez à des suggestions intelligentes pour les paroles, arrangements et mixages.",
-        image: img.placeholder3,
-      },
-      {
-        id: "project-stage",
-        title: "Prêt pour la scène",
-        description:
-          "Finalisez vos titres et exportez-les facilement pour le live ou le streaming.",
-        image: img.placeholder4,
-      },
-    ],
-    [],
-  );
-
-  const carouselItemWidth = useMemo(() => {
-    const baseWidth = Math.min(windowWidth * 0.9, 640);
-    return Math.max(baseWidth, 320);
-  }, [windowWidth]);
-
-  const carouselItemHeight = useMemo(() => {
-    const baseHeight = Math.min(windowWidth * 0.6, 360);
-    return Math.max(baseHeight, 240);
-  }, [windowWidth]);
-
-  const snapInterval = useMemo(
-    () => carouselItemHeight + ITEM_SPACING,
-    [carouselItemHeight],
-  );
-
-  const currentProject = useMemo(() => {
-    if (!projects.length) return null;
-    const activeId = selectedProject?.id || selectedProjectId;
-    if (!activeId) {
-      return projects[0];
-    }
-    return projects.find((project) => project?.id === activeId) || projects[0];
-  }, [projects, selectedProject?.id, selectedProjectId]);
-
-  const formatDate = useCallback((timestamp) => {
-    try {
-      const value = timestamp?.toDate ? timestamp.toDate() : timestamp;
-      const date = value ? new Date(value) : null;
-      if (!date || Number.isNaN(date.getTime())) {
-        return "";
-      }
-      const day = date.getDate().toString().padStart(2, "0");
-      const month = (date.getMonth() + 1).toString().padStart(2, "0");
-      return `${day}/${month}`;
-    } catch (error) {
-      console.warn("Home.web: formatDate error", error);
-      return "";
-    }
-  }, []);
-
-  const handleSelectProject = (project) => {
-    if (!project?.id) return;
-    selectProject(project.id);
-  };
-
-  const handleModifyProject = (project) => {
-    if (!project?.id) return;
-    selectProject(project.id);
-    navigate(Routes.FlowSelection);
-  };
-
-  const handleCreateNew = () => {
-    resetSelectedProject();
-    navigate(Routes.FlowSelection);
-  };
-
-  const renderCarouselItem = useCallback(
-    ({ item, index }) => {
-      const isImageOnRight = index % 2 === 1;
-
-      let imageSize = Math.min(carouselItemHeight - 24, 280);
-      let availableWidth = carouselItemWidth - imageSize - 48;
-
-      if (availableWidth < 140) {
-        const minImageSize = Math.max(carouselItemWidth - 140 - 48, 140);
-        imageSize = Math.min(imageSize, minImageSize);
-        availableWidth = carouselItemWidth - imageSize - 48;
-      }
-
-      const blurWidth = Math.min(Math.max(availableWidth, 120), 260);
-      const blurHeight = Math.max(
-        Math.min(imageSize * 0.75, carouselItemHeight - 48),
-        140,
-      );
-
-      return (
-        <View
-          style={[
-            { width: carouselItemWidth, height: carouselItemHeight },
-            isImageOnRight ? styles.carouselItemRight : styles.carouselItemLeft,
-          ]}
-        >
-          <Image
-            source={item.image}
-            style={[
-              styles.carouselImage,
-              { width: imageSize, height: imageSize },
-              isImageOnRight
-                ? styles.carouselImageRight
-                : styles.carouselImageLeft,
-            ]}
-            resizeMode="cover"
-          />
-          <BlurView
-            intensity={30}
-            tint="dark"
-            style={[
-              styles.carouselBlur,
-              { width: blurWidth, height: blurHeight },
-              isImageOnRight
-                ? styles.carouselBlurRight
-                : styles.carouselBlurLeft,
-            ]}
-          >
-            <View style={styles.carouselTextContainer}>
-              <Text style={styles.carouselTitle}>{item.title}</Text>
-              <Text style={styles.carouselDescription}>{item.description}</Text>
-            </View>
-          </BlurView>
-        </View>
-      );
-    },
-    [carouselItemHeight, carouselItemWidth],
-  );
-
-  const keyExtractor = useCallback((item) => item.id, []);
-
-  return (
-    <Page shareBtn backgroundImg={background.homeBGWeb} headerType="NONE">
-      <View style={styles.root}>
-        <View style={styles.dropdownArea}>
-          <ProjectDropDown
-            style={styles.dropdownContainer}
-            projects={projects}
-            selectedProject={currentProject}
-            onSelectProject={handleSelectProject}
-            onModifyProject={handleModifyProject}
-            onCreateProject={handleCreateNew}
-            formatDate={formatDate}
-          />
-        </View>
-        <View style={styles.carouselSection}>
-          <FlatList
-            data={carouselItems}
-            keyExtractor={keyExtractor}
-            renderItem={renderCarouselItem}
-            showsVerticalScrollIndicator={false}
-            snapToInterval={snapInterval}
-            snapToAlignment="start"
-            decelerationRate="fast"
-            disableIntervalMomentum={true}
-            pagingEnabled
-            style={[styles.carouselList, { height: carouselItemHeight }]}
-            contentContainerStyle={{
-              paddingVertical: ITEM_SPACING / 2,
-              alignItems: "center",
-            }}
-            ItemSeparatorComponent={() => (
-              <View style={{ height: ITEM_SPACING }} />
-            )}
-          />
-        </View>
-      </View>
-    </Page>
-  );
-};
-
-export default Home;
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    paddingHorizontal: 24,
-    position: "relative",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    width: "100%",
-  },
-  heroImage: {
-    position: "absolute",
-    top: -60,
-    alignSelf: "center",
-    width: "80%",
-    maxWidth: 920,
-    height: 420,
-    opacity: 0.9,
-  },
-  dropdownArea: {
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingTop: 72,
-    zIndex: 2,
-  },
-  dropdownContainer: {
-    width: "100%",
-  },
-  shareIcon: {
-    width: 18,
-    height: 18,
-    tintColor: Palette.white,
-  },
-  carouselSection: {
-    width: "100%",
-    marginTop: 48,
-  },
-  carouselList: {
-    width: "100%",
-  },
-  carouselItem: {
-    borderRadius: 18,
-    backgroundColor: "rgba(0, 0, 0, 0.18)",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.1)",
-    paddingVertical: 24,
-    paddingHorizontal: 16,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  carouselItemRight: {
-    flexDirection: "row-reverse",
-    alignItems: "center",
-  },
-  carouselItemLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  carouselImage: {
-    borderRadius: 28,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.25,
-    shadowRadius: 20,
-  },
-  carouselImageRight: {
-    marginLeft: 20,
-  },
-  carouselImageLeft: {
-    marginRight: 20,
-  },
-  carouselBlur: {
-    borderRadius: 20,
-    overflow: "hidden",
-    paddingHorizontal: 18,
-    paddingVertical: 16,
-    justifyContent: "center",
-    alignItems: "flex-start",
-    backgroundColor: "rgba(0, 0, 0, 0.25)",
-    gap: 8,
-  },
-  carouselBlurRight: {
-    marginRight: 12,
-  },
-  carouselBlurLeft: {
-    marginLeft: 12,
-  },
-  carouselTextContainer: {
-    width: "100%",
-  },
-  carouselTitle: {
-    fontSize: 20,
-    color: Palette.white,
-    fontFamily: FONT_FAMILY.InterSemiBold,
-    marginBottom: 8,
-  },
-  carouselDescription: {
-    fontSize: 14,
-    lineHeight: 20,
-    color: "rgba(255, 255, 255, 0.7)",
-    fontFamily: FONT_FAMILY.InterRegular,
-  },
-});
@@ -0,0 +1,150 @@
+import { View, Text, Image, Platform } from "react-native";
+import React, { useMemo, useState } from "react";
+import Page from "../../layouts/Page";
+import { background, img } from "../../assets";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+import { FlatList, Alert } from "react-native";
+import { BlurView } from "expo-blur";
+import { useUser } from "../../providers/UserDataProvider";
+import MusicCard from "../Library/components/MusicCard";
+import GradientButton from "../../components/GradientButton";
+import MoreMenu from "../../components/MoreMenu";
+import { projectsRef } from "../../config/firebase";
+import { useGlobal } from "reactn";
+
+const HomeSave = () => {
+  const { userProjects = [], resetSelectedProject, selectProject } = useUser();
+  const projects = useMemo(
+    () => (Array.isArray(userProjects) ? userProjects : []),
+    [userProjects],
+  );
+  const [, setTooltip] = useGlobal("_tooltip");
+  const [menuTop, setMenuTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+  const [menuProjectId, setMenuProjectId] = useState(null);
+
+  return (
+    <Page backgroundImg={background.homeBG} headerType="NONE">
+      <View style={{ flex: 1 }}>
+        <Image
+          source={img.goodVibe}
+          style={{ alignSelf: "center", position: "absolute" }}
+        />
+        {projects.length > 0 && (
+          <View
+            style={{
+              height: responsiveHeight(70),
+              paddingTop: responsiveHeight(6),
+            }}
+          >
+            <BlurView
+              intensity={Platform.OS !== "ios" ? 10 : 20}
+              style={{
+                flex: 1,
+                borderRadius: 20,
+                overflow: "hidden",
+                backgroundColor: Palette.glass,
+                padding: 12,
+                gap: 8,
+              }}
+              // experimentalBlurMethod={
+              //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+              // }
+            >
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                  marginBottom: 8,
+                  textAlign: "center",
+                }}
+              >
+                Musiques en cours
+              </Text>
+              <FlatList
+                data={projects}
+                keyExtractor={(item) => item.id}
+                contentContainerStyle={{ gap: 10, paddingBottom: 10 }}
+                renderItem={({ item }) => (
+                  <MusicCard
+                    title={item?.title || "Sans titre"}
+                    subtitle={"MusicLand"}
+                    imageUri={item?.coverUrl || null}
+                    projectId={item?.id}
+                    likedBy={item?.likedBy || []}
+                    onPress={() => {
+                      selectProject(item.id);
+                      navigate(Routes.FlowSelection);
+                    }}
+                    onPressMore={(posTop) => {
+                      setMenuProjectId(item.id);
+                      setMenuTop(posTop);
+                      setShowMenu((prev) => !prev || posTop !== menuTop);
+                    }}
+                  />
+                )}
+              />
+              <MoreMenu
+                visible={showMenu}
+                top={menuTop}
+                onClose={() => setShowMenu(false)}
+                inPlaylist={false}
+                projectId={menuProjectId}
+                extraItems={[
+                  {
+                    label: "Supprimer",
+                    onPress: () =>
+                      Alert.alert(
+                        "Confirmer la suppression",
+                        "Cette action supprimera définitivement ce projet.",
+                        [
+                          { text: "Annuler", style: "cancel" },
+                          {
+                            text: "Supprimer",
+                            style: "destructive",
+                            onPress: async () => {
+                              try {
+                                if (!menuProjectId) return;
+                                await projectsRef.doc(menuProjectId).delete();
+                                setTooltip({
+                                  type: "success",
+                                  text: "Projet supprimé",
+                                });
+                              } catch (e) {
+                                setTooltip({
+                                  type: "error",
+                                  text: e?.message || "Suppression impossible",
+                                });
+                              }
+                            },
+                          },
+                        ],
+                        { cancelable: true },
+                      ),
+                  },
+                ]}
+              />
+            </BlurView>
+          </View>
+        )}
+        <View style={{ paddingTop: 12, marginBottom: responsiveHeight(10) }}>
+          <GradientButton
+            title="Créer une nouvelle musique"
+            containerStyle={{ width: "80%", alignSelf: "center" }}
+            onPress={() => {
+              resetSelectedProject();
+              navigate(Routes.FlowSelection);
+            }}
+          />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default Home;
@@ -1,18 +1,19 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { BlurView } from "expo-blur";
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { Image, Platform, Pressable, Text, View } from "react-native";
 import { ai, background } from "../assets";
 import Page from "../layouts/Page";
-import { Routes } from "../navigation";
 import { navigate } from "../navigation/NavigationService";
 import { useUserData } from "../providers/UserDataProvider";
+import { getCreationStageStates, getStageAction } from "../utils/projectStages";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 import palette from "../styles/Palette";

 const CREATE_DATA = [
  {
+    stageKey: "songwriter",
    img: ai.nathalie,
    bg: background.writingBG,
    label: "Nathalie",
@@ -20,6 +21,7 @@ const CREATE_DATA = [
    type: "Songwriter",
  },
  {
+    stageKey: "beatmaker",
    img: ai.theo,
    bg: background.studioBG,
    label: "Theo",
@@ -27,6 +29,7 @@ const CREATE_DATA = [
    type: "Beatmaker",
  },
  {
+    stageKey: "designer",
    img: ai.bena,
    bg: background.productionBG,
    label: "Bena",
@@ -34,6 +37,7 @@ const CREATE_DATA = [
    type: "Designer",
  },
  {
+    stageKey: "director",
    img: ai.john,
    bg: background.playbackBG,
    label: "John",
@@ -44,69 +48,32 @@ const CREATE_DATA = [

 const NewMusicOptions = () => {
  const { selectedProject } = useUserData();
+  const stageStates = useMemo(
+    () => getCreationStageStates(selectedProject),
+    [selectedProject],
+  );

-  // Lock rules per option index:
-  // 0 (Songwriter): allowed if no project OR no songUrl
-  // 1 (Beatmaker): allowed only if lyrics exist and no songUrl
-  // 2 (Designer): allowed only if songUrl exists and no coverUrl
-  // 3 (Director): allowed only if coverUrl exists
-  const isLocked = (index) => {
-    const songUrl = selectedProject?.songUrl || null;
-    const coverUrl = selectedProject?.coverUrl || null;
-    const playbackUrl = selectedProject?.songUrl || null;
-    const lyricsLen = Array.isArray(selectedProject?.lyrics)
-      ? selectedProject.lyrics.length
-      : 0;
+  const stageStateByKey = useMemo(() => {
+    return stageStates.reduce((acc, stage) => {
+      acc[stage.key] = stage;
+      return acc;
+    }, {});
+  }, [stageStates]);

-    switch (index) {
-      case 0: // Songwriter
-        return !!songUrl; // locked if a song already exists
-      case 1: // Beatmaker
-        return !(lyricsLen > 0 && !songUrl);
-      case 2: // Designer
-        return !(!!songUrl && !!playbackUrl);
-      case 3: // Director
-        return !!!coverUrl;
-      default:
-        return true;
-    }
-  };
-
-  const onPressOption = (index, item) => {
-    if (isLocked(index)) return;
-    switch (index) {
-      case 0:
-        if (selectedProject?.lyrics?.length) {
-          navigate(Routes.Lyrics);
-        } else {
-          navigate(Routes.WritingLyrics);
-        }
-        break;
-      case 1:
-        if (selectedProject?.musicStatus === "GENERATING") {
-          navigate(Routes.GeneratingSong);
-        } else if (selectedProject?.musicStatus === "GENERATED") {
-          navigate(Routes.SongReady);
-        } else {
-          navigate(Routes.Compose);
-        }
-        break;
-      case 2:
-        if (selectedProject?.coverUrl) {
-          navigate(Routes.ValidateCover);
-        } else {
-          navigate(Routes.ChooseCoverType);
-        }
-        break;
-      case 3:
-        console.log("test");
-        navigate(Routes.Playback, {
-          project: selectedProject,
-        });
-      default:
-        break;
-    }
-  };
+  const onPressOption = useCallback(
+    (stageKey) => {
+      const stageState = stageStateByKey[stageKey];
+      if (!stageState || stageState.isLocked) {
+        return;
+      }
+      const action = getStageAction(stageKey, selectedProject);
+      if (!action?.route) {
+        return;
+      }
+      navigate(action.route, action.params);
+    },
+    [stageStateByKey, selectedProject],
+  );

  return (
    <Page
@@ -116,10 +83,13 @@ const NewMusicOptions = () => {
      scrollEnabled={true}
    >
      <View style={{ gap: 10 }}>
-        {CREATE_DATA.map((item, index) => {
-          const locked = isLocked(index);
+        {CREATE_DATA.map((item) => {
+          const locked = stageStateByKey[item.stageKey]?.isLocked ?? true;
          return (
-            <Pressable key={index} onPress={() => onPressOption(index, item)}>
+            <Pressable
+              key={item.stageKey}
+              onPress={() => onPressOption(item.stageKey)}
+            >
              <BlurView
                tint="dark"
                intensity={Platform.OS !== "ios" ? 10 : 20}
@@ -0,0 +1,78 @@
+import { Routes } from "../navigation/Routes";
+
+export const CREATION_STAGE_KEYS = [
+  "songwriter",
+  "beatmaker",
+  "designer",
+  "director",
+];
+
+const getLyricsCount = (project) => {
+  if (!project) return 0;
+  const { lyrics } = project;
+  return Array.isArray(lyrics) ? lyrics.length : 0;
+};
+
+const getStageLockState = (key, project) => {
+  const hasSong = !!project?.songUrl;
+  const hasCover = !!project?.coverUrl;
+  const hasPlayback = !!(project?.playbackUrl || project?.songUrl);
+  const lyricsCount = getLyricsCount(project);
+
+  switch (key) {
+    case "songwriter":
+      return hasSong;
+    case "beatmaker":
+      return !(lyricsCount > 0 && !hasSong);
+    case "designer":
+      return !(hasSong && hasPlayback);
+    case "director":
+      return !hasCover;
+    default:
+      return true;
+  }
+};
+
+export const getCreationStageStates = (project) =>
+  CREATION_STAGE_KEYS.map((key, index) => ({
+    key,
+    index,
+    isLocked: getStageLockState(key, project),
+  }));
+
+export const getStageAction = (key, project) => {
+  switch (key) {
+    case "songwriter":
+      return {
+        route:
+          getLyricsCount(project) > 0 ? Routes.Lyrics : Routes.WritingLyrics,
+      };
+    case "beatmaker":
+      if (project?.musicStatus === "GENERATING") {
+        return { route: Routes.GeneratingSong };
+      }
+      if (project?.musicStatus === "GENERATED") {
+        return { route: Routes.SongReady };
+      }
+      return { route: Routes.Compose };
+    case "designer":
+      return {
+        route: project?.coverUrl
+          ? Routes.ValidateCover
+          : Routes.ChooseCoverType,
+      };
+    case "director":
+      return {
+        route: Routes.Playback,
+        params: project ? { project } : undefined,
+      };
+    default:
+      return {};
+  }
+};
+
+export const findFirstUnlockedStageIndex = (project) => {
+  const stages = getCreationStageStates(project);
+  const index = stages.findIndex((stage) => !stage.isLocked);
+  return index === -1 ? 0 : index;
+};