player, song generation again, home and design fixes

src/screens/Home/Home.js

@@ -10,6 +10,8 @@ import { Image as ExpoImage } from "expo-image";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background, cardsImg, icons } from "../../assets";
 import Alert from "../../components/Alert";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import { LinearGradient } from "../../components/LinearGradient/LinearGradient";
 import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import GradientButton from "../../components/GradientButton";
 import MoreMenu from "../../components/MoreMenu";
@@ -474,21 +476,23 @@ const Home = ({ navigation, route }) => {
     </View>
   );
 
+  const topBar = (
+    <View style={styles.topBar}>
+      <ProjectDropDown
+        style={styles.projectDropDown}
+        projects={projects}
+        selectedProject={currentProject}
+        allowEmptySelection
+        onSelectProject={handleSelectProject}
+        onModifyProject={handleModifyProject}
+        onCreateProject={handleStartNew}
+        formatDate={formatDate}
+      />
+    </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}
@@ -499,7 +503,34 @@ const Home = ({ navigation, route }) => {
         extraItems={moreMenuItems}
       />
 
-      <Text style={styles.subtitle}>5 espaces à découvrir</Text>
+      <View style={styles.subtitleWrapper}>
+        {isWeb ? (
+          <LinearGradient
+            colors={["#F94697", "#7023F7"]}
+            start={{ x: 0, y: 0.5 }}
+            end={{ x: 1, y: 0.5 }}
+            style={[styles.subtitleGradient, styles.subtitleGradientWeb]}
+          >
+            <View style={[styles.subtitleInner, styles.subtitleInnerWeb]}>
+              <Text style={styles.subtitle}>5 espaces à découvrir</Text>
+            </View>
+          </LinearGradient>
+        ) : (
+          <BorderGradient
+            style={[styles.subtitleGradient, styles.subtitleBorder]}
+            gradientProps={{
+              colors: ["#F94697", "#7023F7"],
+              start: { x: 0, y: 0.5 },
+              end: { x: 1, y: 0.5 },
+              locations: [0, 1],
+            }}
+          >
+            <View style={styles.subtitleInner}>
+              <Text style={styles.subtitle}>5 espaces à découvrir</Text>
+            </View>
+          </BorderGradient>
+        )}
+      </View>
 
       {stageCardsList}
 
@@ -530,15 +561,21 @@ const Home = ({ navigation, route }) => {
             style={styles.centerImage}
           />
           {isWeb ? (
-            <View style={styles.contentOverlay}>{journeyContent}</View>
-          ) : (
-            <ScrollView
-              style={[styles.mobileScrollView, styles.contentOverlay]}
-              contentContainerStyle={styles.mobileScrollContent}
-              showsVerticalScrollIndicator={false}
-            >
+            <View style={styles.contentOverlay}>
+              {topBar}
               {journeyContent}
-            </ScrollView>
+            </View>
+          ) : (
+            <View style={[styles.contentOverlay, styles.mobileContent]}>
+              {topBar}
+              <ScrollView
+                style={styles.mobileScrollView}
+                contentContainerStyle={styles.mobileScrollContent}
+                showsVerticalScrollIndicator={false}
+              >
+                {journeyContent}
+              </ScrollView>
+            </View>
           )}
         </View>
       </Page>
@@ -629,6 +666,7 @@ const styles = StyleSheet.create({
     gap: 12,
     marginTop: isWeb ? 24 : 0,
     marginBottom: isWeb ? 8 : 16,
+    paddingHorizontal: isWeb ? 0 : gutters,
     zIndex: 10,
   },
   projectDropDown: {
@@ -636,6 +674,10 @@ const styles = StyleSheet.create({
     maxWidth: 420,
     flexGrow: 1,
   },
+  mobileContent: {
+    flex: 1,
+    width: "100%",
+  },
   mobileScrollView: {
     flex: 1,
     width: "100%",
@@ -645,16 +687,44 @@ const styles = StyleSheet.create({
     paddingTop: 24,
     paddingBottom: gutters * 6,
   },
-  subtitle: {
+  subtitleWrapper: {
     width: "100%",
-    fontFamily: FONT_FAMILY.InterSemiBold,
+    marginBottom: 16,
+    marginTop: 15,
+    alignItems: "center",
+  },
+  subtitleGradient: {
+    width: "100%",
+    maxWidth: 420,
+    borderRadius: 999,
+    alignSelf: "center",
+  },
+  subtitleBorder: {
+    borderWidth: 1,
+  },
+  subtitleGradientWeb: {
+    padding: 2,
+  },
+  subtitleInner: {
+    width: "100%",
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 999,
+    backgroundColor: Palette.glass,
+  },
+  subtitleInnerWeb: {
+    paddingVertical: 12,
+    backgroundColor: Palette.lightPurple,
+  },
+  subtitle: {
+    fontFamily: FONT_FAMILY.InterMedium,
     fontSize: 18,
     color: Palette.white,
     textAlign: "center",
     textTransform: "uppercase",
     letterSpacing: 1,
-    marginBottom: 16,
-    marginTop: 15,
   },
   cardsGrid: {
     width: "100%",