more tickets

2025-11-13 18:31:38 +01:00
parent dd4cf9b4d4
commit 5457030d4a
32 changed files with 913 additions and 558 deletions
@@ -5,7 +5,7 @@ import React, {
  useRef,
  useState,
 } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { ScrollView, 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 } from "../../assets";
@@ -14,7 +14,6 @@ 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 } from "../../config/firebase";
 import { isWeb } from "../../hooks/useLayoutType.js";
 import Page from "../../layouts/Page";
@@ -22,7 +21,7 @@ import LandingPage from "../LandingPage";
 import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation/Routes";
 import { useUser } from "../../providers/UserDataProvider";
-import { Palette } from "../../styles";
+import { Palette, gutters } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import {
  getCreationStageStates,
@@ -43,6 +42,8 @@ const isProjectEmpty = (project) => {

 const HOME_BACKGROUND_WIDTH = isWeb ? 1280 : 520;
 const HOME_BACKGROUND_HEIGHT = isWeb ? 760 : 360;
+const HOME_BACKGROUND_STYLE_WIDTH = HOME_BACKGROUND_WIDTH + 120;
+const HOME_BACKGROUND_STYLE_HEIGHT = HOME_BACKGROUND_HEIGHT + 80;

 const STAGE_CARD_CONTENT = [
  {
@@ -59,7 +60,7 @@ const STAGE_CARD_CONTENT = [
    key: "beatmaker",
    step: "ÉTAPE 2",
    description:
-      "Je suis Malik, responsable du studio de musicland, je vais mettre en musique tes paroles en fonction de tes goûts musicaux, ça va être top!",
+      "Bienvenue au studio MusicLand.\nNous mettons en musique tes paroles en fonction de tes inspirations, ça va être top !",
    image: cardsImg.studio,
    imagePosition: "right",
    textAlign: "right",
@@ -79,7 +80,7 @@ const STAGE_CARD_CONTENT = [
    key: "publisher",
    step: "ÉTAPE 4",
    description:
-      "Je suis Mr Benhaï, Producteur de MusicLand et je vais te faire une proposition qui pourrait t’intéresser, on se retrouve à la sotie du studio!",
+      "À la sortie du studio, l'équipe production te propose les prochaines étapes pour partager ta musique avec le monde.",
    image: cardsImg.production,
    imagePosition: "right",
    textAlign: "right",
@@ -292,14 +293,14 @@ const Home = ({ navigation, route }) => {
      : null;
    Alert(
      "Céline",
-      "Bravo ! Vous venez de terminer de créer les paroles de votre musique ! Maintenant vous pouvez passer à la prochaine étape : le Studio avec Malik. Dans cette étape vous allez pouvoir donner vie à votre chanson !",
+      "Bravo ! Vous venez de terminer de créer les paroles de votre musique ! Maintenant vous pouvez passer à la prochaine étape : le Studio pour donner vie à votre chanson !",
      [
        {
          text: "Retour à l'accueil",
          style: "cancel",
        },
        {
-          text: "Continuer avec Malik",
+          text: "Continuer vers le Studio",
          onPress: () => {
            if (!currentProject?.id) {
              return;
@@ -448,6 +449,68 @@ const Home = ({ navigation, route }) => {
    navigate(Routes.Payments);
  }, []);

+  const stageCardContainerStyle = isWeb ? styles.cardsGrid : styles.cardsStack;
+  const stageCardItemStyle = isWeb
+    ? styles.webStageCard
+    : styles.mobileStageCard;
+
+  const stageCardsList = (
+    <View style={stageCardContainerStyle}>
+      {stageCards.map((card) => (
+        <StageCard
+          key={card.key}
+          step={card.step}
+          description={card.description}
+          image={card.image}
+          imagePosition={card.imagePosition}
+          textAlign={card.textAlign}
+          isLocked={card.isLocked}
+          lockSide={card.lockSide}
+          onPress={() => handleStagePress(card.key, card.isLocked)}
+          containerStyle={stageCardItemStyle}
+          variant={isWeb ? "web" : "mobile"}
+        />
+      ))}
+    </View>
+  );
+
+  const journeyContent = (
+    <>
+      <View style={styles.topBar}>
+        <ProjectDropDown
+          style={styles.projectDropDown}
+          projects={projects}
+          selectedProject={currentProject}
+          allowEmptySelection
+          onSelectProject={handleSelectProject}
+          onModifyProject={handleModifyProject}
+          onCreateProject={handleStartNew}
+          formatDate={formatDate}
+        />
+      </View>
+
+      <MoreMenu
+        visible={menuVisible}
+        top={menuAnchor?.top ?? 0}
+        position={menuAnchor}
+        onClose={handleCloseMenu}
+        inPlaylist={false}
+        projectId={menuProject?.id || null}
+        extraItems={moreMenuItems}
+      />
+
+      <Text style={styles.subtitle}>5 espaces à découvrir</Text>
+
+      {stageCardsList}
+
+      <ClubCard
+        image={CLUB_CARD_IMAGE}
+        onPress={handleClubPress}
+        hasActiveSubscription={hasActiveSubscription}
+      />
+    </>
+  );
+
  return adventureStarted ? (
    <View style={styles.root}>
      <Page
@@ -466,54 +529,17 @@ const Home = ({ navigation, route }) => {
            contentFit="cover"
            style={styles.centerImage}
          />
-
-          <View style={styles.topBar}>
-            <ProjectDropDown
-              style={styles.projectDropDown}
-              projects={projects}
-              selectedProject={currentProject}
-              allowEmptySelection
-              onSelectProject={handleSelectProject}
-              onModifyProject={handleModifyProject}
-              onCreateProject={handleStartNew}
-              formatDate={formatDate}
-            />
-            {!isWeb && <ShareBtn />}
-          </View>
-
-          <MoreMenu
-            visible={menuVisible}
-            top={menuAnchor?.top ?? 0}
-            position={menuAnchor}
-            onClose={handleCloseMenu}
-            inPlaylist={false}
-            projectId={menuProject?.id || null}
-            extraItems={moreMenuItems}
-          />
-
-          <Text style={styles.subtitle}>5 espaces à découvrir</Text>
-
-          <View style={styles.cardsGrid}>
-            {stageCards.map((card) => (
-              <StageCard
-                key={card.key}
-                step={card.step}
-                description={card.description}
-                image={card.image}
-                imagePosition={card.imagePosition}
-                textAlign={card.textAlign}
-                isLocked={card.isLocked}
-                lockSide={card.lockSide}
-                onPress={() => handleStagePress(card.key, card.isLocked)}
-              />
-            ))}
-          </View>
-
-          <ClubCard
-            image={CLUB_CARD_IMAGE}
-            onPress={handleClubPress}
-            hasActiveSubscription={hasActiveSubscription}
-          />
+          {isWeb ? (
+            <View style={styles.contentOverlay}>{journeyContent}</View>
+          ) : (
+            <ScrollView
+              style={[styles.mobileScrollView, styles.contentOverlay]}
+              contentContainerStyle={styles.mobileScrollContent}
+              showsVerticalScrollIndicator={false}
+            >
+              {journeyContent}
+            </ScrollView>
+          )}
        </View>
      </Page>
    </View>
@@ -534,7 +560,7 @@ const Home = ({ navigation, route }) => {
          }}
        >
          <GradientButton
-            url={videos.landing}
+            url={videoUrl}
            title="Commencer l'aventure MusicLand"
            onPress={handleStartVisit}
          />
@@ -572,20 +598,27 @@ const styles = StyleSheet.create({
    alignSelf: "stretch",
    alignItems: "stretch",
    justifyContent: "flex-start",
+    position: "relative",
  },
  centerImage: {
-    width: HOME_BACKGROUND_WIDTH + 120,
-    height: HOME_BACKGROUND_HEIGHT + 80,
+    width: HOME_BACKGROUND_STYLE_WIDTH,
+    height: HOME_BACKGROUND_STYLE_HEIGHT,
    borderRadius: 22,
    overflow: "hidden",
    position: "absolute",
-    top: "45%",
+    top: isWeb ? "45%" : "50%",
    left: "50%",
    transform: [
-      { translateX: -HOME_BACKGROUND_WIDTH / 2 },
-      { translateY: -HOME_BACKGROUND_HEIGHT / 2 },
+      { translateX: -HOME_BACKGROUND_STYLE_WIDTH / 2 },
+      { translateY: -HOME_BACKGROUND_STYLE_HEIGHT / 2 },
    ],
    pointerEvents: "none",
+    zIndex: 0,
+  },
+  contentOverlay: {
+    position: "relative",
+    width: "100%",
+    flexGrow: 1,
  },
  topBar: {
    width: "100%",
@@ -594,8 +627,8 @@ const styles = StyleSheet.create({
    alignItems: "center",
    justifyContent: "center",
    gap: 12,
-    marginTop: 24,
-    marginBottom: 8,
+    marginTop: isWeb ? 24 : 0,
+    marginBottom: isWeb ? 8 : 16,
    zIndex: 10,
  },
  projectDropDown: {
@@ -603,6 +636,15 @@ const styles = StyleSheet.create({
    maxWidth: 420,
    flexGrow: 1,
  },
+  mobileScrollView: {
+    flex: 1,
+    width: "100%",
+  },
+  mobileScrollContent: {
+    paddingHorizontal: gutters,
+    paddingTop: 24,
+    paddingBottom: gutters * 6,
+  },
  subtitle: {
    width: "100%",
    fontFamily: FONT_FAMILY.InterSemiBold,
@@ -621,4 +663,16 @@ const styles = StyleSheet.create({
    justifyContent: "space-between",
    rowGap: 20,
  },
+  cardsStack: {
+    width: "100%",
+    flexDirection: "column",
+    alignItems: "stretch",
+  },
+  webStageCard: {
+    width: "48%",
+  },
+  mobileStageCard: {
+    width: "100%",
+    marginBottom: 20,
+  },
 });