update

index.web.js

@@ -1,3 +1,4 @@
+import "@expo/metro-runtime";
 import { registerRootComponent } from "expo";
 import "./src/styles/css/global.css";
 

src/components/BorderGradient/BorderGradient.web.js

@@ -5,20 +5,20 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
   const defaultGradientProps = {
     start: {
       x: 0.5,
-      y: 0
+      y: 0,
     },
     end: {
       x: 0.5,
-      y: 1
+      y: 1,
     },
     locations: [],
     colors: [],
     useAngle: false,
-    angle: 0
+    angle: 0,
   };
 
   const { locations, end, start, useAngle, angle, onLayout, colors } =
-  gradientProps;
+    gradientProps;
 
   const {
     style,
@@ -31,7 +31,7 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
     borderTopWidth,
     borderLeftWidth,
     borderRightWidth,
-    borderBottomWidth
+    borderBottomWidth,
   } = props;
 
   const propStart = start ?? defaultGradientProps?.start;
@@ -39,13 +39,13 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
 
   const [state, setState] = useState({
     width: 1,
-    height: 1
+    height: 1,
   });
 
   const measure = (event) => {
     setState({
       width: event.nativeEvent.layout.width,
-      height: event.nativeEvent.layout.height
+      height: event.nativeEvent.layout.height,
     });
     if (onLayout) {
       onLayout(event);
@@ -59,62 +59,62 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
 
     // Math.atan2 handles Infinity
     const _angle =
-    Math.atan2(
+      Math.atan2(
-      state.width * (propEnd.y - propStart.y),
+        state.width * (propEnd.y - propStart.y),
-      state.height * (propEnd.x - propStart.x)
+        state.height * (propEnd.x - propStart.x)
-    ) +
+      ) +
-    Math.PI / 2;
+      Math.PI / 2;
     return _angle + "rad";
   };
 
   const getColors = () =>
-  colors.
+    colors
-  map((color, index) => {
+      .map((color, index) => {
-    const location = locations?.[index] ?? defaultGradientProps.locations;
+        const location = locations?.[index] ?? defaultGradientProps.locations;
-    let locationStyle = "";
+        let locationStyle = "";
-    if (location) {
+        if (location) {
-      locationStyle = " " + location * 100 + "%";
+          locationStyle = " " + location * 100 + "%";
-    }
+        }
-    return color + locationStyle;
+        return color + locationStyle;
-  }).
+      })
-  join(",");
+      .join(",");
 
   return (
     <View
       style={{
-        position: "relative"
+        position: "relative",
-      }}>
+      }}
-
+    >
       <View
         onLayout={measure}
         style={[
-        style,
+          style,
-        {
+          {
-          borderWidth,
+            borderWidth,
-          borderRadius,
+            borderRadius,
-          borderTopLeftRadius,
+            borderTopLeftRadius,
-          borderTopRightRadius,
+            borderTopRightRadius,
-          borderBottomLeftRadius,
+            borderBottomLeftRadius,
-          borderBottomRightRadius,
+            borderBottomRightRadius,
-          borderTopWidth,
+            borderTopWidth,
-          borderLeftWidth,
+            borderLeftWidth,
-          borderRightWidth,
+            borderRightWidth,
-          borderBottomWidth,
+            borderBottomWidth,
-          borderStyle: "solid",
+            borderStyle: "solid",
-          borderColor: "transparent",
+            borderColor: "transparent",
-          // borderImage: `linear-gradient(${getAngle()},${getColors()}) 1`,
+            // borderImage: `linear-gradient(${getAngle()},${getColors()}) 1`,
-          background: `linear-gradient(${getAngle()},${getColors()}) border-box`,
+            background: `linear-gradient(${getAngle()},${getColors()}) border-box`,
-          WebkitMask:
+            WebkitMask:
-          "linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)",
+              "linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)",
-          WebkitMaskComposite: "xor",
+            WebkitMaskComposite: "xor",
-          maskComposite: "exclude",
+            maskComposite: "exclude",
-          overflow: "hidden"
+            overflow: "hidden",
-        }]
+          },
-        }>
+        ]}
-      </View>
+      ></View>
       <View style={styles.innerContainer}>{children}</View>
-    </View>);
+    </View>
-
+  );
 };
 
 export default BorderGradient;
@@ -122,7 +122,6 @@ export default BorderGradient;
 const styles = StyleSheet.create({
   innerContainer: {
     flex: 1,
-    margin: 5, // <-- Border Width
     position: "absolute",
     top: 0,
     bottom: 0,
@@ -130,6 +129,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     right: 0,
     left: 0,
-    overflow: "hidden"
+    overflow: "hidden",
-  }
+  },
 });

src/components/BorderGradientButton.js

@@ -5,17 +5,21 @@ import { Palette, Style } from "../styles";
 import { BlurView } from "expo-blur";
 import { FONT_FAMILY } from "../styles/Fonts";
 
-const BorderGradientButton = ({ title = "J’ai déjà mes paroles" }) => {
+const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress }) => {
   return (
-    <Pressable>
+    <Pressable onPress={onPress}>
       <BorderGradient
         gradientProps={{
           colors: ["#F94697", "#7023F7"],
+          start: { x: 0, y: 0 },
+          end: { x: 1, y: 0 },
+          locations: [0, 1],
         }}
         style={{
           height: 50,
           borderRadius: 14,
           borderWidth: 1,
+          zIndex: 1,
         }}
       >
         <View
@@ -23,10 +27,12 @@ const BorderGradientButton = ({ title = "J’ai déjà mes paroles" }) => {
             borderRadius: 14,
             overflow: "hidden",
             backgroundColor: "#73737324",
+            width: "100%",
+            height: "100%",
           }}
         >
           <BlurView
-            intensity={30}
+            intensity={40}
             tint="dark"
             style={{
               width: "100%",

src/components/ItemContainer/ItemContainer.js

@@ -0,0 +1,50 @@
+import { View, Text, StyleSheet } from "react-native";
+import React from "react";
+import BorderGradient from "../BorderGradient/BorderGradient";
+import { BlurView } from "expo-blur";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+
+const ItemContainer = ({ height = responsiveHeight(40), children }) => {
+  return (
+    <BorderGradient
+      gradientProps={{
+        colors: ["#FFFFFF00", "#FFFFFF"],
+        start: { x: 0.3, y: 0 },
+        end: { x: 1, y: 1 },
+      }}
+      style={{
+        ...styles.borderGradientStyle,
+        height,
+      }}
+    >
+      <View style={styles.blurContainer}>
+        <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+          {children}
+        </BlurView>
+      </View>
+    </BorderGradient>
+  );
+};
+
+export default ItemContainer;
+
+const styles = StyleSheet.create({
+  borderGradientStyle: {
+    borderWidth: 1,
+    borderRadius: 20,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 100,
+  },
+  blurContainer: {
+    flex: 1,
+    borderRadius: 20,
+    overflow: "hidden",
+    zIndex: 1,
+  },
+});

src/components/ItemContainer/ItemContainer.web.js

@@ -0,0 +1,75 @@
+import { View, Text, StyleSheet } from "react-native";
+import React, { useState } from "react";
+import BorderGradient from "../BorderGradient/BorderGradient";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import { Style } from "../../styles";
+
+const ItemContainer = ({ height = responsiveHeight(40), children }) => {
+  const [containerLayout, setContainerLayout] = useState(null);
+
+  return (
+    <View
+      style={{
+        ...styles.blurContainer,
+      }}
+    >
+      <BorderGradient
+        gradientProps={{
+          colors: ["rgba(72, 51, 51, 0)", "#FFFFFF"],
+          start: { x: 0.3, y: 0 },
+          end: { x: 1, y: 1 },
+          locations: [0, 1],
+        }}
+        style={{
+          ...styles.borderGradientStyle,
+          height: containerLayout?.height,
+        }}
+      />
+      <View
+        style={{
+          height,
+          ...Style.containerCenter,
+          borderRadius: 24,
+          overflow: "hidden",
+          zIndex: 1,
+        }}
+        onLayout={(e) => {
+          setContainerLayout(e.nativeEvent.layout);
+        }}
+      >
+        <BlurView
+          intensity={40}
+          style={{
+            padding: 6,
+            zIndex: 2,
+            width: "99.2%",
+            alignSelf: "center",
+            height: "99.2%",
+          }}
+        >
+          {children}
+        </BlurView>
+      </View>
+    </View>
+  );
+};
+
+export default ItemContainer;
+
+const styles = StyleSheet.create({
+  borderGradientStyle: {
+    borderWidth: 1,
+    borderRadius: 20,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 100,
+    position: "absolute",
+    width: "100%",
+  },
+});

src/components/Slider.js

@@ -5,7 +5,7 @@ import { Palette } from "../styles";
 export default (props) => {
   return (
     <Slider
-      style={{ width: "100%" }}
+      style={{ width: "100%", height: 100 }}
       minimumTrackTintColor={Palette.primary}
       maximumTrackTintColor={Palette.lightPurple}
       thumbTintColor={Palette.primary}

src/data/data.js

@@ -34,3 +34,25 @@ export const EMOTION_CONVEY = [
     color: ["#FF0000", "#99999900"],
   },
 ];
+
+export const CHOOSE_GENRE = [
+  {
+    title: "Pop",
+    description:
+      "Musique commerciale destinée au grand public, accrocheuse et mélodique. Domine les charts internationaux avec des artistes ultra-médiatisés.",
+  },
+  {
+    title: "Hip Hop/Rap",
+    description:
+      "Musique commerciale destinée au grand public, accrocheuse et mélodique. Domine les charts internationaux avec des artistes ultra-médiatisés.",
+  },
+  {
+    title: "Soul",
+    description:
+      "Voix puissantes, émotion, style afro-américain. Influence pop et le R&B. Mélodieuse, émotionnelle et expressive dérivée du gospel et du R&B.authenticité émotionnelle.",
+  },
+  {
+    title: "Blues",
+    description: "Structure simple, thèmes sur les épreuves de la vie.",
+  },
+];

src/navigation/MainStack.js

@@ -22,6 +22,9 @@ import Lyrics from "../screens/Writing/Lyrics";
 import FinishedWriting from "../screens/Writing/FinishedWriting";
 import Studio from "../screens/Studio/Studio";
 import ComposeSong from "../screens/Studio/ComposeSong";
+import Compose from "../screens/Studio/Compose";
+import CustomizeVoice from "../screens/Studio/CustomizeVoice";
+import SongReady from "../screens/Studio/SongReady";
 
 const screenOptions = {
   headerShown: false,
@@ -93,6 +96,18 @@ const screens = [
     name: Routes.ComposeSong,
     component: ComposeSong,
   },
+  {
+    name: Routes.Compose,
+    component: Compose,
+  },
+  {
+    name: Routes.CustomizeVoice,
+    component: CustomizeVoice,
+  },
+  {
+    name: Routes.SongReady,
+    component: SongReady,
+  },
 ];
 
 export default function Main() {

src/navigation/Routes.js

@@ -30,5 +30,8 @@ export const Routes = {
   FinishedWriting: "FinishedWriting",
 
   Studio: "Studio",
+  Compose: "Compose",
   ComposeSong: "ComposeSong",
+  CustomizeVoice: "CustomizeVoice",
+  SongReady: "SongReady",
 };

src/screens/Studio/ChooseGenre.js

@@ -0,0 +1,76 @@
+import { View, Text, StyleSheet, FlatList } from "react-native";
+import React from "react";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { Palette } from "../../styles";
+import { CHOOSE_GENRE } from "../../data/data";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
+
+const ChooseGenre = () => {
+  return (
+    <View style={{ flex: 1, gap: 10 }}>
+      <CreateLyricsHeader
+        title="Choisis un genre"
+        subTitle="Tu peux choisir jusqu’à 2 genres différents"
+      />
+      <ItemContainer height={responsiveHeight(55)}>
+        <FlatList
+          data={CHOOSE_GENRE}
+          contentContainerStyle={{
+            gap: 16,
+            flexGrow: 1,
+            zIndex: 2,
+          }}
+          renderItem={({ item, index }) => (
+            <View style={{ borderRadius: 14, overflow: "hidden" }}>
+              <BlurView
+                intensity={30}
+                style={{ paddingVertical: 14, paddingHorizontal: 12 }}
+              >
+                <Text
+                  style={{
+                    fontSize: 16,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
+                    {item.title}
+                  </Text>{" "}
+                  : {item.description}
+                </Text>
+              </BlurView>
+            </View>
+          )}
+        />
+      </ItemContainer>
+    </View>
+  );
+};
+
+export default ChooseGenre;
+
+const styles = StyleSheet.create({
+  borderGradientStyle: {
+    borderWidth: 1,
+    borderRadius: 20,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 100,
+    position: "absolute",
+    width: "100%",
+  },
+  blurContainer: {
+    borderRadius: 20,
+    overflow: "hidden",
+    zIndex: 1,
+    maxHeight: responsiveHeight(55),
+  },
+});

src/screens/Studio/ChooseInstruments.js

@@ -0,0 +1,79 @@
+import { View, Text, FlatList, StyleSheet } from "react-native";
+import React, { useState } from "react";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { BlurView } from "expo-blur";
+
+const ChooseInstruments = () => {
+  const [containerLayout, setContainerLayout] = useState(null);
+
+  return (
+    <View style={{ flex: 1, gap: 10 }}>
+      <CreateLyricsHeader
+        title="Choisis des instruments"
+        subTitle="Tu peux choisir jusqu’à 5 instruments différents"
+      />
+      <View
+        style={{ flex: 1 }}
+        onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
+      >
+        <ItemContainer height={containerLayout?.height}>
+          <FlatList
+            data={Array.from({ length: 10 })}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.contentContainer}
+            renderItem={() => (
+              <View style={styles.itemContainer}>
+                <BlurView
+                  intensity={30}
+                  style={{
+                    flex: 1,
+                    backgroundColor: Palette.glass,
+                    paddingHorizontal: 12,
+                    justifyContent: "center",
+                  }}
+                >
+                  <Text style={styles.itemText}>Piano classique</Text>
+                </BlurView>
+              </View>
+            )}
+          />
+        </ItemContainer>
+      </View>
+    </View>
+  );
+};
+
+export default ChooseInstruments;
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    flexGrow: 1,
+    padding: 8,
+    gap: 10,
+    backgroundColor: "#FFFFFF00",
+    paddingBottom: 50,
+  },
+  itemContainer: {
+    height: 54,
+    backgroundColor: Palette.glass,
+    borderRadius: 14,
+    overflow: "hidden",
+    shadowColor: "#00000040",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+  itemText: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+});

src/screens/Studio/ChooseRhythm.js

@@ -0,0 +1,70 @@
+import { View, Text, FlatList, StyleSheet } from "react-native";
+import React from "react";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import { BlurView } from "expo-blur";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+const ChooseRhythm = () => {
+  return (
+    <View style={{ flex: 1, gap: 10 }}>
+      <CreateLyricsHeader title="Choisis un rythme" />
+      <View style={{ flex: 1 }}>
+        <ItemContainer height={340}>
+          <FlatList
+            data={Array.from({ length: 5 })}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.contentContainer}
+            renderItem={() => (
+              <View style={styles.itemContainer}>
+                <BlurView
+                  intensity={30}
+                  style={{
+                    flex: 1,
+                    backgroundColor: Palette.glass,
+                    paddingHorizontal: 12,
+                    justifyContent: "center",
+                  }}
+                >
+                  <Text style={styles.itemText}>Très rapide</Text>
+                </BlurView>
+              </View>
+            )}
+          />
+        </ItemContainer>
+      </View>
+    </View>
+  );
+};
+
+export default ChooseRhythm;
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    flexGrow: 1,
+    padding: 8,
+    gap: 10,
+    backgroundColor: "#FFFFFF00",
+  },
+  itemContainer: {
+    height: 54,
+    backgroundColor: Palette.glass,
+    borderRadius: 14,
+    overflow: "hidden",
+    shadowColor: "#00000040",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+  itemText: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+});

src/screens/Studio/Compose.js

@@ -0,0 +1,46 @@
+import { View, Text, StyleSheet, Image } from "react-native";
+import React from "react";
+import { ai, background } from "../../assets";
+import Page from "../../layouts/Page";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { Routes } from "../../navigation";
+import GradientButton from "../../components/GradientButton";
+import { gutters } from "../../styles";
+
+const Compose = () => {
+  return (
+    <Page backgroundImg={background.studioBG2} headerType="NONE">
+      <Image source={ai.theo} style={styles.img} resizeMode="contain" />
+      <MusicLandHeader showSkip onPressBack={goBack} progress={7.1} />
+      <View
+        style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
+      >
+        <View
+          style={{
+            paddingBottom: gutters * 2,
+            paddingHorizontal: gutters,
+            gap: 12,
+          }}
+        >
+          <GradientButton
+            title="Composer ma chanson"
+            onPress={() => navigate(Routes.ComposeSong)}
+          />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default Compose;
+
+const styles = StyleSheet.create({
+  img: {
+    width: "100%",
+    height: "70%",
+    position: "absolute",
+    bottom: -40,
+    right: -30,
+  },
+});

src/screens/Studio/ComposeSong.js

@@ -1,10 +1,127 @@
-import { View, Text } from "react-native";
+import { View, Text, Image, StyleSheet, Dimensions } from "react-native";
-import React from "react";
+import React, { useRef, useState } from "react";
 import Page from "../../layouts/Page";
-import { background } from "../../assets";
+import { ai, background } from "../../assets";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import GradientButton from "../../components/GradientButton";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+import { gutters } from "../../styles";
+import SwiperFlatList from "react-native-swiper-flatlist";
+import ChooseGenre from "./ChooseGenre";
+import CustomizeVoice from "./CustomizeVoice";
+import ChooseInstruments from "./ChooseInstruments";
+import ChooseRhythm from "./ChooseRhythm";
+import CreatingSong from "./CreatingSong";
+
+const { width } = Dimensions.get("window");
 
 const ComposeSong = () => {
-  return <Page backgroundImg={background.studioBG2}></Page>;
+  const scrollRef = useRef(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [progress, setProgress] = useState(14.2);
+  const [containerLayout, setContainerLayout] = useState(null);
+  console.log("progress: ", progress);
+
+  const onPressNext = () => {
+    setSelectedIndex(selectedIndex + 1);
+    setProgress(progress + 7.1);
+    scrollRef.current.scrollToIndex({
+      index: selectedIndex + 1,
+      animated: true,
+    });
+  };
+
+  const onPressBack = () => {
+    if (selectedIndex > 0) {
+      setSelectedIndex(selectedIndex - 1);
+      setProgress(progress - 7.1);
+      scrollRef.current.scrollToIndex({
+        index: selectedIndex - 1,
+        animated: true,
+      });
+    } else {
+      goBack();
+    }
+  };
+
+  return (
+    <Page backgroundImg={background.studioBG2} headerType="NONE">
+      <Image source={ai.theo} style={styles.img} resizeMode="contain" />
+      <MusicLandHeader onPressBack={onPressBack} progress={progress} />
+      <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
+        <View
+          style={{ flex: 1 }}
+          onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
+        >
+          <SwiperFlatList
+            style={{ width, left: -gutters }}
+            ref={scrollRef}
+            disableGesture
+          >
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <ChooseGenre />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <CustomizeVoice />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <ChooseInstruments />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <ChooseRhythm />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: containerLayout?.height,
+                paddingHorizontal: gutters,
+              }}
+            >
+              <CreatingSong active={selectedIndex === 4} />
+            </View>
+          </SwiperFlatList>
+        </View>
+        {selectedIndex !== 4 && (
+          <GradientButton title="Suivant" onPress={onPressNext} />
+        )}
+      </View>
+    </Page>
+  );
 };
 
 export default ComposeSong;
+
+const styles = StyleSheet.create({
+  img: {
+    width: "100%",
+    height: "70%",
+    position: "absolute",
+    bottom: -40,
+    right: -30,
+  },
+});

src/screens/Studio/CreatingSong.js

@@ -0,0 +1,126 @@
+import { View, Text, Image, Pressable } from "react-native";
+import React, { useEffect, useState } from "react";
+import { ai, icons } from "../../assets";
+import { BlurView } from "expo-blur";
+import Style, { size } from "../../styles/Style";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import ProgressBar from "../../components/ProgressBar";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+import GradientButton from "../../components/GradientButton";
+
+const CreatingSong = ({ active }) => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (active) {
+      const interval = setInterval(() => {
+        setProgress((prevProgress) => {
+          if (prevProgress >= 100) {
+            clearInterval(interval);
+            navigate(Routes.SongReady)
+            return 100;
+          }
+          return prevProgress + 1;
+        });
+      }, 100);
+
+      return () => clearInterval(interval);
+    }
+  }, [active]);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        ...Style.containerCenter,
+      }}
+    >
+      <View
+        style={{
+          width: "100%",
+          height: "50%",
+        }}
+      >
+        <View
+          style={{
+            zIndex: 1,
+            position: "absolute",
+            top: -150,
+            width: "50%",
+            height: "80%",
+            alignSelf: "center",
+          }}
+        >
+          <Image
+            source={ai.theo}
+            style={{ width: "100%", height: "100%", right: -10 }}
+            resizeMode="contain"
+          />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            borderRadius: 20,
+            overflow: "hidden",
+            backgroundColor: "#0F0C1933",
+          }}
+        >
+          <BlurView
+            intensity={40}
+            style={{ flex: 1, padding: 10, paddingBottom: 20 }}
+          >
+            <Pressable
+              style={{
+                ...size({ size: 24 }),
+                ...Style.containerCenter,
+                position: "absolute",
+                top: 10,
+                left: 10,
+                zIndex: 3,
+              }}
+              onPress={() => console.log("Pressed")}
+            >
+              <Image source={icons.close} style={size({ size: 11 })} />
+            </Pressable>
+            <View style={{ flex: 1, justifyContent: "flex-end", gap: 20 }}>
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                  textAlign: "center",
+                }}
+              >
+                Ton texte est{"\n"}en cours de création
+              </Text>
+              <View style={{ alignItems: "center", gap: 16 }}>
+                <ProgressBar gradient progress={progress} />
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  {progress}%
+                </Text>
+              </View>
+              <GradientButton
+                title="Découvrir mon texte"
+                containerStyle={{
+                  width: "80%",
+                  alignSelf: "center",
+                }}
+                onPress={() => navigate(Routes.SongReady)}
+              />
+            </View>
+          </BlurView>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default CreatingSong;

src/screens/Studio/CustomizeVoice.js

@@ -0,0 +1,92 @@
+import { View, Text, FlatList, StyleSheet } from "react-native";
+import React, { useState } from "react";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import { Palette, Style } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { BlurView } from "expo-blur";
+
+const CustomizeVoice = () => {
+  const [containerLayout, setContainerLayout] = useState(null);
+
+  return (
+    <View style={{ flex: 1, gap: 10 }}>
+      <CreateLyricsHeader
+        title="Personnalise la voix que tu veux pour ta chanson"
+        subTitle="Choisis maximum 1 option par catégorie."
+      />
+      <View
+        style={{ flex: 1 }}
+        onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
+      >
+        <ItemContainer height={containerLayout?.height}>
+          <View style={{ flex: 1, gap: 10 }}>
+            <Text
+              style={{
+                fontSize: 16,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterBold,
+                left: 16,
+                marginTop: 5,
+              }}
+            >
+              Base
+            </Text>
+            <FlatList
+              data={Array.from({ length: 10 })}
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={styles.contentContainer}
+              renderItem={() => (
+                <View style={styles.itemContainer}>
+                  <BlurView
+                    intensity={30}
+                    style={{
+                      flex: 1,
+                      backgroundColor: Palette.glass,
+                      paddingHorizontal: 12,
+                      justifyContent: "center",
+                    }}
+                  >
+                    <Text style={styles.itemText}>Une voix féminine interpretra ta chanson.</Text>
+                  </BlurView>
+                </View>
+              )}
+            />
+          </View>
+        </ItemContainer>
+      </View>
+    </View>
+  );
+};
+
+export default CustomizeVoice;
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    flexGrow: 1,
+    padding: 8,
+    gap: 10,
+    backgroundColor: "#FFFFFF00",
+    paddingBottom: 50,
+  },
+  itemContainer: {
+    height: 54,
+    backgroundColor: Palette.glass,
+    borderRadius: 14,
+    overflow: "hidden",
+    shadowColor: "#00000040",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+  itemText: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+});

src/screens/Studio/SongReady.js

@@ -0,0 +1,47 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { goBack } from "../../navigation/NavigationService";
+import { LinearGradient } from "../../components/LinearGradient/LinearGradient";
+import Slider from "../../components/Slider";
+
+const SongReady = () => {
+  return (
+    <Page headerType="NONE" backgroundImg={background.studioBG2}>
+      <MusicLandHeader onPressBack={goBack} progress={49.7} />
+
+      <View>
+        <LinearGradient
+          colors={["#FF0000", "#FFFF00", "#0000FF"]} // Red to Yellow to Blue gradient
+          start={{ x: 0, y: 0.5 }}
+          end={{ x: 1, y: 0.5 }}
+          style={{
+            width: "100%",
+            height: 40,
+            borderRadius: 20, // Optional: for rounded corners
+          }}
+        >
+          <Slider
+            style={{ height: 40, width: "100%" }}
+            minimumValue={0}
+            maximumValue={100}
+            minimumTrackTintColor="transparent"
+            maximumTrackTintColor="red"
+            thumbTintColor="#FFFFFF"
+          />
+        </LinearGradient>
+        <Slider
+          minimumValue={0}
+          maximumValue={100}
+          minimumTrackTintColor="transparent"
+          maximumTrackTintColor="red"
+          thumbTintColor="#FFFFFF"
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default SongReady;

src/screens/Studio/Studio.js

@@ -20,7 +20,7 @@ const Studio = () => {
       <View style={{ flex: 1, justifyContent: "flex-end" }}>
         <GradientButton
           title="Commencer"
-          onPress={() => navigate(Routes.ComposeSong)}
+          onPress={() => navigate(Routes.Compose)}
         />
       </View>
     </Page>

src/screens/Writing/CreateLyricsWithAi.js

@@ -1,8 +1,7 @@
-import { View, Text, ScrollView, Dimensions } from "react-native";
+import { View, Dimensions } from "react-native";
 import React, { useRef, useState } from "react";
 import Page from "../../layouts/Page";
 import MusicLandHeader from "../../components/MusicLandHeader";
-import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import GradientButton from "../../components/GradientButton";
 import { gutters } from "../../styles";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
@@ -16,6 +15,7 @@ import SongStructure from "./SongStructure";
 import CustomizeSongStructure from "./CustomizeSongStructure";
 import Rhymes from "./Rhymes";
 import CreatingLyrics from "./CreatingLyrics";
+import { responsiveHeight } from "react-native-responsive-dimensions";
 
 const { width } = Dimensions.get("window");
 
@@ -23,8 +23,7 @@ const CreateLyricsWithAi = () => {
   const scrollRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [progress, setProgress] = useState(16);
-
+  const [parentLayout, setparentLayout] = useState(null);
-  console.log("progress: ", progress);
 
   const onPressNext = () => {
     setSelectedIndex(selectedIndex + 1);
@@ -55,8 +54,18 @@ const CreateLyricsWithAi = () => {
         progress={progress}
         showSkip={selectedIndex === 4}
       />
-      <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
+      <View
-        <View style={{ flex: 1 }}>
+        style={{
+          flex: 1,
+          marginTop: 16,
+          paddingBottom: gutters,
+          gap: responsiveHeight(5),
+        }}
+      >
+        <View
+          style={{ flex: 1 }}
+          onLayout={(e) => setparentLayout(e.nativeEvent.layout)}
+        >
           <SwiperFlatList
             style={{ width, left: -gutters }}
             ref={scrollRef}
@@ -65,7 +74,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -74,7 +83,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -83,7 +92,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -92,7 +101,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -101,7 +110,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -110,7 +119,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -119,7 +128,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -128,7 +137,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >
@@ -137,7 +146,7 @@ const CreateLyricsWithAi = () => {
             <View
               style={{
                 width: width,
-                height: "100%",
+                height: parentLayout?.height,
                 paddingHorizontal: gutters,
               }}
             >

src/screens/Writing/CreatingLyrics.js

@@ -19,6 +19,7 @@ const CreatingLyrics = ({ active }) => {
         setProgress((prevProgress) => {
           if (prevProgress >= 100) {
             clearInterval(interval);
+            navigate(Routes.Lyrics)
             return 100;
           }
           return prevProgress + 1;

src/screens/Writing/CustomizeSongStructure.js

@@ -1,13 +1,14 @@
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import { responsiveHeight } from "react-native-responsive-dimensions";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import { BlurView } from "expo-blur";
-import { Palette, Style } from "../../styles";
+import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const CustomizeSongStructure = () => {
+  const [containerLayout, setContainerLayout] = useState(null);
+
   return (
     <View style={{ flex: 1, gap: 10 }}>
       <CreateLyricsHeader
@@ -15,56 +16,45 @@ const CustomizeSongStructure = () => {
         subTitle="Intègre en Drag and drop"
       />
       <View style={{ flex: 1, gap: 10 }}>
-        <BorderGradient
+        <View
-          gradientProps={{
+          style={{ flex: 1 }}
-            colors: ["#FFFFFF00", "#FFFFFF"],
+          onLayout={(e) => {
+            setContainerLayout(e.nativeEvent.layout);
           }}
-          style={styles.borderGradientStyle}
         >
-          <View style={styles.blurContainer}>
+          <ItemContainer height={containerLayout?.height}>
-            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+            <ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
-              <ScrollView
+              {Array.from({ length: 10 }).map((_, index) => (
-                contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
+                <View key={index} style={styles.dropzoneContainer}>
-              >
+                  <Text style={styles.dropzone}>Couplet</Text>
-                {Array.from({ length: 10 }).map((_, index) => (
+                </View>
-                  <View key={index} style={styles.dropzoneContainer}>
+              ))}
-                    <Text style={styles.dropzone}>Couplet</Text>
+            </ScrollView>
-                  </View>
+          </ItemContainer>
-                ))}
+        </View>
-              </ScrollView>
+        <View style={{ flex: 1 }}>
-            </BlurView>
+          <ItemContainer height={containerLayout?.height}>
-          </View>
+            <ScrollView contentContainerStyle={{ gap: 10, paddingBottom: 20 }}>
-        </BorderGradient>
+              {Array.from({ length: 10 }).map((_, index) => (
-        <BorderGradient
+                <View key={index} style={styles.itemContainer}>
-          gradientProps={{
+                  <BlurView
-            colors: ["#FFFFFF00", "#FFFFFF"],
+                    intensity={30}
-          }}
+                    style={{
-          style={styles.borderGradientStyle}
+                      flex: 1,
-        >
+                      backgroundColor: Palette.glass,
-          <View style={styles.blurContainer}>
+                      justifyContent: "center",
-            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+                      paddingHorizontal: 12,
-              <ScrollView
+                    }}
-                contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
+                  >
-              >
+                    <Text style={styles.dropzone}>
-                {Array.from({ length: 10 }).map((_, index) => (
+                      Introduction instrumentale longue.
-                  <View key={index} style={styles.itemContainer}>
+                    </Text>
-                    <BlurView
+                  </BlurView>
-                      intensity={30}
+                </View>
-                      style={{
+              ))}
-                        flex: 1,
+            </ScrollView>
-                        backgroundColor: Palette.glass,
+          </ItemContainer>
-                        justifyContent: "center",
+        </View>
-                        paddingHorizontal: 12,
-                      }}
-                    >
-                      <Text style={styles.dropzone}>Introduction instrumentale longue.</Text>
-                    </BlurView>
-                  </View>
-                ))}
-              </ScrollView>
-            </BlurView>
-          </View>
-        </BorderGradient>
       </View>
     </View>
   );
@@ -73,25 +63,6 @@ const CustomizeSongStructure = () => {
 export default CustomizeSongStructure;
 
 const styles = StyleSheet.create({
-  borderGradientStyle: {
-    borderWidth: 1,
-    borderRadius: 20,
-    height: responsiveHeight(30),
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 100,
-  },
-  blurContainer: {
-    flex: 1,
-    borderRadius: 20,
-    overflow: "hidden",
-    zIndex: 1,
-  },
   dropzoneContainer: {
     paddingVertical: 14,
     paddingHorizontal: 12,

src/screens/Writing/EmotionConvey.js

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
+import { View, Text, FlatList } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
@@ -7,9 +7,9 @@ import { BlurView } from "expo-blur";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { EMOTION_CONVEY } from "../../data/data";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const EmotionConvey = () => {
-  const [containerLayout, setContainerLayout] = useState(null);
   const [itemLayout, setItemLayout] = useState([]);
 
   return (
@@ -19,100 +19,59 @@ const EmotionConvey = () => {
         subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
       />
 
-      <View style={styles.blurContainer}>
+      <ItemContainer height={responsiveHeight(50)}>
-        <BorderGradient
+        <FlatList
-          gradientProps={{
+          data={EMOTION_CONVEY}
-            colors: ["#FFFFFF00", "#FFFFFF"],
+          contentContainerStyle={{
+            gap: 16,
+            flexGrow: 1,
+            zIndex: 2,
           }}
-          style={{
+          renderItem={({ item, index }) => (
-            ...styles.borderGradientStyle,
+            <View>
-            height: containerLayout?.height,
+              <BorderGradient
-          }}
+                gradientProps={{
-        />
+                  colors: item.color,
-        <BlurView
+                }}
-          intensity={40}
+                style={{
-          style={{ padding: 6, zIndex: 2,  }}
+                  borderWidth: 1,
-          onLayout={(e) => {
+                  height: itemLayout[index]?.height,
-            e.persist();
+                  borderRadius: 14,
-            setContainerLayout(e.nativeEvent.layout);
+                  position: "absolute",
-          }}
+                  width: "100%",
-        >
+                }}
-          <FlatList
+              />
-            data={EMOTION_CONVEY}
+              <View
-            contentContainerStyle={{
+                style={{ borderRadius: 14, overflow: "hidden" }}
-              gap: 16,
+                onLayout={(e) => {
-              flexGrow: 1,
+                  e.persist();
-              zIndex: 2,
+                  setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
-            }}
+                }}
-            renderItem={({ item, index }) => (
+              >
-              <View>
+                <BlurView
-                <BorderGradient
+                  intensity={30}
-                  gradientProps={{
+                  style={{ paddingVertical: 14, paddingHorizontal: 12 }}
-                    colors: item.color,
-                  }}
-                  style={{
-                    borderWidth: 1,
-                    height: itemLayout[index]?.height,
-                    borderRadius: 14,
-                    position: "absolute",
-                    width: "100%",
-                  }}
-                />
-                <View
-                  style={{ borderRadius: 14, overflow: "hidden" }}
-                  onLayout={(e) => {
-                    e.persist();
-                    setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
-                  }}
                 >
-                  <BlurView
+                  <Text
-                    intensity={30}
+                    style={{
-                    style={{ paddingVertical: 14, paddingHorizontal: 12 }}
+                      fontSize: 16,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                    }}
                   >
-                    <Text
+                    <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
-                      style={{
+                      {item.title}
-                        fontSize: 16,
+                    </Text>{" "}
-                        color: Palette.white,
+                    : {item.description}
-                        fontFamily: FONT_FAMILY.InterRegular,
+                  </Text>
-                      }}
+                </BlurView>
-                    >
-                      <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
-                        {item.title}
-                      </Text>{" "}
-                      : {item.description}
-                    </Text>
-                  </BlurView>
-                </View>
               </View>
-            )}
+            </View>
-          />
+          )}
-        </BlurView>
+        />
-      </View>
+      </ItemContainer>
     </View>
   );
 };
 
 export default EmotionConvey;
-
-const styles = StyleSheet.create({
-  borderGradientStyle: {
-    borderWidth: 1,
-    borderRadius: 20,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 100,
-    position: "absolute",
-    width: "100%",
-  },
-  blurContainer: {
-    borderRadius: 20,
-    overflow: "hidden",
-    zIndex: 1,
-    maxHeight: responsiveHeight(55),
-  },
-});

src/screens/Writing/FinishedWriting.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, StyleSheet } from "react-native";
+import { View, Image, StyleSheet } from "react-native";
 import React from "react";
 import Page from "../../layouts/Page";
 import { ai } from "../../assets";

src/screens/Writing/Goals.js

@@ -1,49 +1,40 @@
 import { View, Text, FlatList, StyleSheet, Pressable } from "react-native";
 import React from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import { Palette, Style } from "../../styles";
 import { BlurView } from "expo-blur";
 import { GOALS } from "../../data/data";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import CustomInput from "./components/CustomInput";
-import { responsiveHeight } from "react-native-responsive-dimensions";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const Goals = () => {
   return (
     <View style={{ flex: 1, gap: 16 }}>
       <View style={{ gap: 10 }}>
         <CreateLyricsHeader title="Quels sont tes objectifs ?" />
-        <BorderGradient
+        <ItemContainer>
-          gradientProps={{
+          <FlatList
-            colors: ["#FFFFFF00", "#FFFFFF"],
+            data={GOALS}
-          }}
+            showsVerticalScrollIndicator={false}
-          style={styles.borderGradientStyle}
+            contentContainerStyle={styles.contentContainer}
-        >
+            renderItem={({ item }) => (
-          <View style={styles.blurContainer}>
+              <Pressable style={styles.itemContainer}>
-            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+                <BlurView
-              <FlatList
+                  intensity={30}
-                data={GOALS}
+                  style={{
-                showsVerticalScrollIndicator={false}
+                    flex: 1,
-                contentContainerStyle={styles.contentContainer}
+                    backgroundColor: Palette.glass,
-                renderItem={({ item }) => (
+                    paddingHorizontal: 12,
-                  <Pressable style={styles.itemContainer}>
+                    ...Style.containerCenter,
-                    <BlurView
+                  }}
-                      intensity={30}
+                >
-                      style={{
+                  <Text style={styles.itemText}>{item}</Text>
-                        flex: 1,
+                </BlurView>
-                        backgroundColor: Palette.glass,
+              </Pressable>
-                        ...Style.containerCenter,
+            )}
-                      }}
+          />
-                    >
+        </ItemContainer>
-                      <Text style={styles.itemText}>{item}</Text>
-                    </BlurView>
-                  </Pressable>
-                )}
-              />
-            </BlurView>
-          </View>
-        </BorderGradient>
       </View>
       <CustomInput
         label="Tu as un autre objectif?"
@@ -56,31 +47,12 @@ const Goals = () => {
 export default Goals;
 
 const styles = StyleSheet.create({
-  borderGradientStyle: {
-    borderWidth: 1,
-    borderRadius: 20,
-    height: responsiveHeight(40),
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 100,
-  },
-  blurContainer: {
-    flex: 1,
-    borderRadius: 20,
-    overflow: "hidden",
-    zIndex: 1,
-  },
   contentContainer: {
     flexGrow: 1,
     padding: 8,
     gap: 10,
     backgroundColor: "#FFFFFF00",
-    paddingBottom: 100,
+    paddingBottom: 50,
   },
   itemContainer: {
     height: 54,
@@ -101,5 +73,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
+    textAlign: "center",
   },
 });

src/screens/Writing/Lyrics.js

@@ -1,79 +1,68 @@
-import { View, Text, Image, StyleSheet, ScrollView } from "react-native";
+import { View, Text, ScrollView } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import Page from "../../layouts/Page";
-import { ai } from "../../assets";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { gutters, Palette } from "../../styles";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
 import { Routes } from "../../navigation";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
-import { BlurView } from "expo-blur";
 import CustomInput from "./components/CustomInput";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const Lyrics = () => {
+  const [containerLayout, setContainerLayout] = useState(null);
+
   return (
     <Page headerType="NONE">
       <MusicLandHeader onPressBack={goBack} progress={95} />
-      <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
+      <View
-        <BorderGradient
+        style={{
-          gradientProps={{
+          flex: 1,
-            colors: ["#FFFFFF00", "#FFFFFF"],
+          marginTop: 16,
-            start: { x: 0, y: 0 },
+          gap: 48,
-            end: { x: 0, y: 1 },
+        }}
-          }}
+        onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}
-          style={styles.borderGradientStyle}
+      >
-        >
+        <ItemContainer height={containerLayout?.height}>
-          <View style={{ borderRadius: 20, overflow: "hidden", flex: 1 }}>
+          <ScrollView
-            <BlurView intensity={40} style={{ flex: 1 }}>
+            contentContainerStyle={{
-              <ScrollView
+              paddingHorizontal: 14,
-                contentContainerStyle={{
+              paddingVertical: 10,
-                  paddingHorizontal: 14,
+              gap: 10,
-                  paddingVertical: 10,
+              flexGrow: 1,
-                  gap: 10,
+            }}
-                  flexGrow: 1,
+          >
+            <CustomInput label="Titre" placeholder="Titre" height={45} />
+            <View
+              style={{
+                height: 45,
+                justifyContent: "center",
+                backgroundColor: "#00000080",
+                borderRadius: 14,
+                paddingHorizontal: 12,
+                marginTop: 20,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterRegular,
                 }}
               >
-                <CustomInput label="Titre" placeholder="Titre" height={45} />
+                Introduction instrumentale longue
-                <View
+              </Text>
-                  style={{
+            </View>
-                    height: 45,
+            <CustomInput label="Couplet" placeholder="Couplet" height={225} />
-                    justifyContent: "center",
+            <CustomInput label="Refrain" placeholder="Refrain" height={170} />
-                    backgroundColor: "#00000080",
+          </ScrollView>
-                    borderRadius: 14,
+        </ItemContainer>
-                    paddingHorizontal: 12,
-                    marginTop: 20,
-                  }}
-                >
-                  <Text
-                    style={{
-                      fontSize: 16,
-                      color: Palette.white,
-                      fontFamily: FONT_FAMILY.InterRegular,
-                    }}
-                  >
-                    Introduction instrumentale longue
-                  </Text>
-                </View>
-                <CustomInput
-                  label="Couplet"
-                  placeholder="Couplet"
-                  height={225}
-                />
-                <CustomInput
-                  label="Refrain"
-                  placeholder="Refrain"
-                  height={170}
-                />
-              </ScrollView>
-            </BlurView>
-          </View>
-        </BorderGradient>
       </View>
       <View
         style={{
+          paddingTop: gutters,
           paddingBottom: gutters * 2,
           paddingHorizontal: gutters,
           gap: 12,
@@ -90,11 +79,3 @@ const Lyrics = () => {
 };
 
 export default Lyrics;
-
-const styles = StyleSheet.create({
-  borderGradientStyle: {
-    height: "100%",
-    borderWidth: 1,
-    borderRadius: 20,
-  },
-});

src/screens/Writing/Rhymes.js

@@ -1,36 +1,17 @@
 import { View, Text, StyleSheet } from "react-native";
-import React, { useState } from "react";
+import React from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { BlurView } from "expo-blur";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
-import { responsiveHeight } from "react-native-responsive-dimensions";
 
 const Rhymes = () => {
-  const [containerLayout, setContainerLayout] = useState(null);
-
   return (
     <View style={{ flex: 1, gap: 10 }}>
       <CreateLyricsHeader title="Avec ou sans rimes" />
-      <View style={styles.blurContainer}>
+      <ItemContainer height={200}>
-        <BorderGradient
+        <View style={{ gap: 10 }}>
-          gradientProps={{
-            colors: ["#FFFFFF00", "#FFFFFF"],
-          }}
-          style={{
-            ...styles.borderGradientStyle,
-            height: containerLayout?.height,
-          }}
-        />
-        <BlurView
-          intensity={40}
-          style={{ padding: 6, zIndex: 2, gap: 10 }}
-          onLayout={(e) => {
-            e.persist();
-            setContainerLayout(e.nativeEvent.layout);
-          }}
-        >
           {Array.from({ length: 3 }).map((_, index) => (
             <View key={index} style={styles.itemContainer}>
               <BlurView
@@ -48,8 +29,8 @@ const Rhymes = () => {
               </BlurView>
             </View>
           ))}
-        </BlurView>
+        </View>
-      </View>
+      </ItemContainer>
     </View>
   );
 };
@@ -57,20 +38,6 @@ const Rhymes = () => {
 export default Rhymes;
 
 const styles = StyleSheet.create({
-  borderGradientStyle: {
-    borderWidth: 1,
-    borderRadius: 20,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 100,
-    position: "absolute",
-    width: "100%",
-  },
   itemContainer: {
     height: 54,
     backgroundColor: Palette.glass,
@@ -90,10 +57,4 @@ const styles = StyleSheet.create({
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
   },
-  blurContainer: {
-    borderRadius: 20,
-    overflow: "hidden",
-    zIndex: 1,
-    maxHeight: responsiveHeight(55),
-  },
 });

src/screens/Writing/SongStructure.js

@@ -1,50 +1,40 @@
 import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
 import React from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import { BlurView } from "expo-blur";
 import { GOALS } from "../../data/data";
 import { Palette, Style } from "../../styles";
-import { responsiveHeight } from "react-native-responsive-dimensions";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStructure = () => {
   return (
     <View style={{ flex: 1, gap: 10 }}>
       <CreateLyricsHeader
         title="Comment veux-tu structurer ta chanson ?"
-        subTitle="Sélectionne une structure.o"
+        subTitle="Sélectionne une structure."
       />
-      <BorderGradient
+      <ItemContainer>
-        gradientProps={{
+        <FlatList
-          colors: ["#FFFFFF00", "#FFFFFF"],
+          data={GOALS}
-        }}
+          showsVerticalScrollIndicator={false}
-        style={styles.borderGradientStyle}
+          contentContainerStyle={styles.contentContainer}
-      >
+          renderItem={({ item }) => (
-        <View style={styles.blurContainer}>
+            <Pressable style={styles.itemContainer}>
-          <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+              <BlurView
-            <FlatList
+                intensity={30}
-              data={GOALS}
+                style={{
-              showsVerticalScrollIndicator={false}
+                  flex: 1,
-              contentContainerStyle={styles.contentContainer}
+                  backgroundColor: Palette.glass,
-              renderItem={({ item }) => (
+                  ...Style.containerCenter,
-                <Pressable style={styles.itemContainer}>
+                }}
-                  <BlurView
+              >
-                    intensity={30}
+                <Text style={styles.itemText}>{item}</Text>
-                    style={{
+              </BlurView>
-                      flex: 1,
+            </Pressable>
-                      backgroundColor: Palette.glass,
+          )}
-                      ...Style.containerCenter,
+        />
-                    }}
+      </ItemContainer>
-                  >
-                    <Text style={styles.itemText}>{item}</Text>
-                  </BlurView>
-                </Pressable>
-              )}
-            />
-          </BlurView>
-        </View>
-      </BorderGradient>
     </View>
   );
 };
@@ -52,31 +42,12 @@ const SongStructure = () => {
 export default SongStructure;
 
 const styles = StyleSheet.create({
-  borderGradientStyle: {
-    borderWidth: 1,
-    borderRadius: 20,
-    height: responsiveHeight(40),
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 100,
-  },
-  blurContainer: {
-    flex: 1,
-    borderRadius: 20,
-    overflow: "hidden",
-    zIndex: 1,
-  },
   contentContainer: {
     flexGrow: 1,
     padding: 8,
     gap: 10,
     backgroundColor: "#FFFFFF00",
-    paddingBottom: 100,
+    paddingBottom: 50,
   },
   itemContainer: {
     height: 54,

src/screens/Writing/SongStyle.js

@@ -1,13 +1,12 @@
 import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
 import React from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import { BlurView } from "expo-blur";
 import { GOALS } from "../../data/data";
 import { Palette, Style } from "../../styles";
 import CustomInput from "./components/CustomInput";
-import { responsiveHeight } from "react-native-responsive-dimensions";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
 const SongStyle = () => {
   return (
@@ -17,36 +16,28 @@ const SongStyle = () => {
           title={`Quel est le style de ta chanson ?`}
           subTitle="Choisis l'ambiance émotions que tu veux faire passer."
         />
-        <BorderGradient
+        <ItemContainer>
-          gradientProps={{
+          <FlatList
-            colors: ["#FFFFFF00", "#FFFFFF"],
+            data={GOALS}
-          }}
+            showsVerticalScrollIndicator={false}
-          style={styles.borderGradientStyle}
+            contentContainerStyle={styles.contentContainer}
-        >
+            renderItem={({ item }) => (
-          <View style={styles.blurContainer}>
+              <Pressable style={styles.itemContainer}>
-            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+                <BlurView
-              <FlatList
+                  intensity={30}
-                data={GOALS}
+                  style={{
-                showsVerticalScrollIndicator={false}
+                    flex: 1,
-                contentContainerStyle={styles.contentContainer}
+                    backgroundColor: Palette.glass,
-                renderItem={({ item }) => (
+                    paddingHorizontal: 14,
-                  <Pressable style={styles.itemContainer}>
+                    ...Style.containerCenter,
-                    <BlurView
+                  }}
-                      intensity={30}
+                >
-                      style={{
+                  <Text style={styles.itemText}>{item}</Text>
-                        flex: 1,
+                </BlurView>
-                        backgroundColor: Palette.glass,
+              </Pressable>
-                        ...Style.containerCenter,
+            )}
-                      }}
+          />
-                    >
+        </ItemContainer>
-                      <Text style={styles.itemText}>{item}</Text>
-                    </BlurView>
-                  </Pressable>
-                )}
-              />
-            </BlurView>
-          </View>
-        </BorderGradient>
       </View>
       <CustomInput
         label="Tu as un autre style de chanson ?"
@@ -59,31 +50,12 @@ const SongStyle = () => {
 export default SongStyle;
 
 const styles = StyleSheet.create({
-  borderGradientStyle: {
-    borderWidth: 1,
-    borderRadius: 20,
-    height: responsiveHeight(40),
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 100,
-  },
-  blurContainer: {
-    flex: 1,
-    borderRadius: 20,
-    overflow: "hidden",
-    zIndex: 1,
-  },
   contentContainer: {
     flexGrow: 1,
     padding: 8,
     gap: 10,
     backgroundColor: "#FFFFFF00",
-    paddingBottom: 100,
+    paddingBottom: 50,
   },
   itemContainer: {
     height: 54,
@@ -104,5 +76,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
+    textAlign: "center",
   },
 });

src/screens/Writing/SpecificityContext.js

@@ -1,8 +1,7 @@
-import { View, Text } from "react-native";
+import { View } from "react-native";
 import React from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import CustomInput from "./components/CustomInput";
-import { gutters } from "../../styles";
 
 const SpecificityContext = () => {
   return (

src/screens/Writing/WritingLyrics.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, StyleSheet } from "react-native";
+import { View, Image, StyleSheet } from "react-native";
 import React from "react";
 import Page from "../../layouts/Page";
 import { ai } from "../../assets";

src/screens/Writing/components/CreateLyricsHeader.js

@@ -1,28 +1,35 @@
-import { View, Text } from "react-native";
+import { View, Text, Pressable } from "react-native";
 import React, { useState } from "react";
 import { BlurView } from "expo-blur";
 import BorderGradient from "../../../components/BorderGradient/BorderGradient";
 import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
+import useLayoutType from "../../../hooks/useLayoutType";
 
 const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
   const [onLayout, setOnLayout] = useState(null);
+  const { isWeb } = useLayoutType();
 
   return (
-    <>
+    <View style={{ paddingTop: isWeb ? 10 : 0 }}>
       <BorderGradient
         gradientProps={{
           colors: ["#FFFFFF00", "#FFFFFF"],
+          locations: [0.2, 1],
+          start: { x: 0, y: 0 },
+          end: { x: 1, y: 0 },
         }}
         style={{
-          height: onLayout?.height,
+          height: isWeb ? onLayout?.height + 2 : onLayout?.height,
+          top: isWeb ? -1 : 0,
+          right: isWeb ? -1 : 0,
           borderWidth: 1,
           borderRadius: 18,
           position: "absolute",
           width: "100%",
         }}
       />
-      <View
+      <Pressable
         style={{
           backgroundColor: Palette.glass,
           borderRadius: 18,
@@ -31,6 +38,7 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
         onLayout={(event) => {
           setOnLayout(event.nativeEvent.layout);
         }}
+        onPress={() => console.log("PRESSED")}
       >
         <BlurView
           intensity={20}
@@ -61,8 +69,8 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
             </Text>
           )}
         </BlurView>
-      </View>
+      </Pressable>
-    </>
+    </View>
   );
 };
 

src/screens/Writing/components/CustomInput.js

@@ -42,6 +42,7 @@ const CustomInput = ({
             color: Palette.black,
             fontFamily: FONT_FAMILY.InterRegularItalic,
           }}
+          multiline
           textAlignVertical="top"
         />
       </View>