update

src/assets/index.js

@@ -65,6 +65,7 @@ import play from "./icons/play.png";
 import disk from "./icons/disk.png";
 import stars from "./icons/stars.png";
 import musicLandLogo from "./icons/musicLandLogo.png";
+import close from "./icons/close.png";
 
 export const icons = {
   bell,
@@ -117,6 +118,7 @@ export const icons = {
   disk,
   stars,
   musicLandLogo,
+  close,
 };
 
 import triangle from "./art/triangle.png";

src/components/BorderGradientButton.js

@@ -5,7 +5,7 @@ import { Palette, Style } from "../styles";
 import { BlurView } from "expo-blur";
 import { FONT_FAMILY } from "../styles/Fonts";
 
-const BorderGradientButton = () => {
+const BorderGradientButton = ({ title = "J’ai déjà mes paroles" }) => {
   return (
     <Pressable>
       <BorderGradient
@@ -42,7 +42,7 @@ const BorderGradientButton = () => {
                 fontFamily: FONT_FAMILY.InterMedium,
               }}
             >
-              J’ai déjà mes paroles
+              {title}
             </Text>
           </BlurView>
         </View>

src/components/GradientButton.js

@@ -9,9 +9,10 @@ const GradientButton = ({
   colors = ["#F94697", "#7023F7"],
   onPress,
   props,
+  containerStyle = {},
 }) => {
   return (
-    <Pressable onPress={onPress}>
+    <Pressable onPress={onPress} style={{ ...containerStyle }}>
       <LinearGradient
         colors={colors}
         style={{

src/components/ProgressBar.js

@@ -2,8 +2,13 @@ import { useEffect, useState } from "react";
 import { View } from "react-native";
 import { mainBorderRadius } from "../styles/Style";
 import { Palette } from "../styles";
+import { LinearGradient } from "./LinearGradient/LinearGradient";
 
-const ProgressBar = ({ progress = 0, containerStyle = {} }) => {
+const ProgressBar = ({
+  progress = 0,
+  containerStyle = {},
+  gradient = false,
+}) => {
   return (
     <View
       style={{
@@ -15,6 +20,18 @@ const ProgressBar = ({ progress = 0, containerStyle = {} }) => {
         ...containerStyle,
       }}
     >
+      {gradient ? (
+        <LinearGradient
+          colors={["#F94697", "#7023F7"]}
+          style={{
+            width: `${progress}%`,
+            height: "100%",
+            borderRadius: mainBorderRadius,
+          }}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+        />
+      ) : (
         <View
           style={{
             width: `${progress}%`,
@@ -23,6 +40,7 @@ const ProgressBar = ({ progress = 0, containerStyle = {} }) => {
             borderRadius: mainBorderRadius,
           }}
         />
+      )}
     </View>
   );
 };

src/data/data.js

@@ -7,3 +7,30 @@ export const GOALS = [
   "Pour mon entreprise",
   "Envoyer un message politique",
 ];
+
+export const EMOTION_CONVEY = [
+  {
+    title: "La Joie",
+    description:
+      "expose un bonheur profond, l'émerveillement, la gratitude, satisfaction intense, énergie positive",
+    color: ["#FBFF00", "#99999900"],
+  },
+  {
+    title: "L’Amour",
+    description:
+      "sous entends un sentiment profond d'attachement et d'attraction vers une personne, désir de bien-être et de  proximité. Inconditionnel, compassion, ouverture du coeur.",
+    color: ["#FD88EA", "#99999900"],
+  },
+  {
+    title: "La Tristesse",
+    description:
+      "évoque une émotion face à une perte, une déception ou une douleur. Invitation au repli, à l’introspection.",
+    color: ["#1D2DC4", "#99999900"],
+  },
+  {
+    title: "La Colère",
+    description:
+      "déclare une frustration, ressentiment, énergie tournée vers la révolte.",
+    color: ["#FF0000", "#99999900"],
+  },
+];

src/navigation/MainStack.js

@@ -18,6 +18,10 @@ import PrivacyPolicy from "../screens/PrivacyPolicy";
 import Writing from "../screens/Writing/Writing";
 import WritingLyrics from "../screens/Writing/WritingLyrics";
 import CreateLyricsWithAi from "../screens/Writing/CreateLyricsWithAi";
+import Lyrics from "../screens/Writing/Lyrics";
+import FinishedWriting from "../screens/Writing/FinishedWriting";
+import Studio from "../screens/Studio/Studio";
+import ComposeSong from "../screens/Studio/ComposeSong";
 
 const screenOptions = {
   headerShown: false,
@@ -69,11 +73,26 @@ const screens = [
     name: Routes.WritingLyrics,
     component: WritingLyrics,
   },
-
   {
     name: Routes.CreateLyricsWithAi,
     component: CreateLyricsWithAi,
   },
+  {
+    name: Routes.Lyrics,
+    component: Lyrics,
+  },
+  {
+    name: Routes.FinishedWriting,
+    component: FinishedWriting,
+  },
+  {
+    name: Routes.Studio,
+    component: Studio,
+  },
+  {
+    name: Routes.ComposeSong,
+    component: ComposeSong,
+  },
 ];
 
 export default function Main() {

src/navigation/Routes.js

@@ -26,4 +26,9 @@ export const Routes = {
   Writing: "Writing",
   WritingLyrics: "WritingLyrics",
   CreateLyricsWithAi: "CreateLyricsWithAi",
+  Lyrics: "Lyrics",
+  FinishedWriting: "FinishedWriting",
+
+  Studio: "Studio",
+  ComposeSong: "ComposeSong",
 };

src/screens/Onboarding.js

@@ -16,6 +16,7 @@ export default ({ navigation }) => {
       }}
     >
       <Button text="WRITING" onPress={() => navigate(Routes.Writing)} />
+      <Button text="STUDIO" onPress={() => navigate(Routes.Studio)} />
     </View>
   );
 };

src/screens/Studio/ComposeSong.js

@@ -0,0 +1,10 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+
+const ComposeSong = () => {
+  return <Page backgroundImg={background.studioBG2}></Page>;
+};
+
+export default ComposeSong;

src/screens/Studio/Studio.js

@@ -0,0 +1,30 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import GradientButton from "../../components/GradientButton";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+import { gutters } from "../../styles";
+
+const Studio = () => {
+  return (
+    <Page
+      headerType="NONE"
+      backgroundImg={background.studioBG}
+      containerStyle={{ paddingHorizontal: 0 }}
+      contentContainerStyle={{
+        padding: gutters * 2,
+      }}
+    >
+      <View style={{ flex: 1, justifyContent: "flex-end" }}>
+        <GradientButton
+          title="Commencer"
+          onPress={() => navigate(Routes.ComposeSong)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default Studio;

src/screens/Writing/CreateLyricsWithAi.js

@@ -10,17 +10,25 @@ import Goals from "./Goals";
 import { goBack } from "../../navigation/NavigationService";
 import SpecificityContext from "./SpecificityContext";
 import EmotionConvey from "./EmotionConvey";
+import SongStyle from "./SongStyle";
+import SongTo from "./SongTo";
+import SongStructure from "./SongStructure";
+import CustomizeSongStructure from "./CustomizeSongStructure";
+import Rhymes from "./Rhymes";
+import CreatingLyrics from "./CreatingLyrics";
 
 const { width } = Dimensions.get("window");
 
 const CreateLyricsWithAi = () => {
   const scrollRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [progress, setProgress] = useState(8);
+  const [progress, setProgress] = useState(16);
+
+  console.log("progress: ", progress);
 
   const onPressNext = () => {
     setSelectedIndex(selectedIndex + 1);
-    setProgress(progress + 8);
+    setProgress(progress + 9);
     scrollRef.current.scrollToIndex({
       index: selectedIndex + 1,
       animated: true,
@@ -30,7 +38,7 @@ const CreateLyricsWithAi = () => {
   const onPressBack = () => {
     if (selectedIndex > 0) {
       setSelectedIndex(selectedIndex - 1);
-      setProgress(progress - 8);
+      setProgress(progress - 9);
       scrollRef.current.scrollToIndex({
         index: selectedIndex - 1,
         animated: true,
@@ -42,7 +50,11 @@ const CreateLyricsWithAi = () => {
 
   return (
     <Page headerType="NONE">
-      <MusicLandHeader onPressBack={onPressBack} progress={progress} />
+      <MusicLandHeader
+        onPressBack={onPressBack}
+        progress={progress}
+        showSkip={selectedIndex === 4}
+      />
       <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
         <View style={{ flex: 1 }}>
           <SwiperFlatList
@@ -77,9 +89,65 @@ const CreateLyricsWithAi = () => {
             >
               <EmotionConvey />
             </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <SongStyle />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <SongTo />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <SongStructure />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <CustomizeSongStructure />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <Rhymes />
+            </View>
+            <View
+              style={{
+                width: width,
+                height: "100%",
+                paddingHorizontal: gutters,
+              }}
+            >
+              <CreatingLyrics active={selectedIndex === 8} />
+            </View>
           </SwiperFlatList>
         </View>
+        {selectedIndex !== 8 && (
           <GradientButton title="Suivant" onPress={onPressNext} />
+        )}
       </View>
     </Page>
   );

src/screens/Writing/CreatingLyrics.js

@@ -0,0 +1,125 @@
+import { View, Text, Pressable, Image } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Palette, Style } from "../../styles";
+import { BlurView } from "expo-blur";
+import { ai, icons } from "../../assets";
+import { size } from "../../styles/Style";
+import ProgressBar from "../../components/ProgressBar";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import GradientButton from "../../components/GradientButton";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+
+const CreatingLyrics = ({ active }) => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (active) {
+      const interval = setInterval(() => {
+        setProgress((prevProgress) => {
+          if (prevProgress >= 100) {
+            clearInterval(interval);
+            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.nathalie}
+            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.Lyrics)}
+              />
+            </View>
+          </BlurView>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default CreatingLyrics;

src/screens/Writing/CustomizeSongStructure.js

@@ -0,0 +1,120 @@
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import React 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 { FONT_FAMILY } from "../../styles/Fonts";
+
+const CustomizeSongStructure = () => {
+  return (
+    <View style={{ flex: 1, gap: 10 }}>
+      <CreateLyricsHeader
+        title="Personnalise la structure de ta chanson"
+        subTitle="Intègre en Drag and drop"
+      />
+      <View style={{ flex: 1, gap: 10 }}>
+        <BorderGradient
+          gradientProps={{
+            colors: ["#FFFFFF00", "#FFFFFF"],
+          }}
+          style={styles.borderGradientStyle}
+        >
+          <View style={styles.blurContainer}>
+            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+              <ScrollView
+                contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
+              >
+                {Array.from({ length: 10 }).map((_, index) => (
+                  <View key={index} style={styles.dropzoneContainer}>
+                    <Text style={styles.dropzone}>Couplet</Text>
+                  </View>
+                ))}
+              </ScrollView>
+            </BlurView>
+          </View>
+        </BorderGradient>
+        <BorderGradient
+          gradientProps={{
+            colors: ["#FFFFFF00", "#FFFFFF"],
+          }}
+          style={styles.borderGradientStyle}
+        >
+          <View style={styles.blurContainer}>
+            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+              <ScrollView
+                contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
+              >
+                {Array.from({ length: 10 }).map((_, index) => (
+                  <View key={index} style={styles.itemContainer}>
+                    <BlurView
+                      intensity={30}
+                      style={{
+                        flex: 1,
+                        backgroundColor: Palette.glass,
+                        justifyContent: "center",
+                        paddingHorizontal: 12,
+                      }}
+                    >
+                      <Text style={styles.dropzone}>Introduction instrumentale longue.</Text>
+                    </BlurView>
+                  </View>
+                ))}
+              </ScrollView>
+            </BlurView>
+          </View>
+        </BorderGradient>
+      </View>
+    </View>
+  );
+};
+
+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,
+    backgroundColor: "#00000080",
+    borderRadius: 14,
+  },
+  dropzone: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  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,
+  },
+});

src/screens/Writing/EmotionConvey.js

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet, FlatList } from "react-native";
+import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
@@ -6,34 +6,49 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
 import { BlurView } from "expo-blur";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import { EMOTION_CONVEY } from "../../data/data";
 
 const EmotionConvey = () => {
+  const [containerLayout, setContainerLayout] = useState(null);
   const [itemLayout, setItemLayout] = useState([]);
 
-  console.log("itemLayout: ", itemLayout);
-
   return (
     <View style={{ flex: 1, gap: 10 }}>
       <CreateLyricsHeader
         title={`Quel émotion veux-tu\ntransmettre ?`}
         subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
       />
+
+      <View style={styles.blurContainer}>
         <BorderGradient
           gradientProps={{
             colors: ["#FFFFFF00", "#FFFFFF"],
           }}
-        style={styles.borderGradientStyle}
+          style={{
+            ...styles.borderGradientStyle,
+            height: containerLayout?.height,
+          }}
+        />
+        <BlurView
+          intensity={40}
+          style={{ padding: 6, zIndex: 2,  }}
+          onLayout={(e) => {
+            e.persist();
+            setContainerLayout(e.nativeEvent.layout);
+          }}
         >
-        <View style={styles.blurContainer}>
-          <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
           <FlatList
-              data={Array.from({ length: 3 })}
-              contentContainerStyle={{ gap: 16 }}
+            data={EMOTION_CONVEY}
+            contentContainerStyle={{
+              gap: 16,
+              flexGrow: 1,
+              zIndex: 2,
+            }}
             renderItem={({ item, index }) => (
               <View>
                 <BorderGradient
                   gradientProps={{
-                      colors: ["#FBFF00", "#99999900"],
+                    colors: item.color,
                   }}
                   style={{
                     borderWidth: 1,
@@ -62,10 +77,9 @@ const EmotionConvey = () => {
                       }}
                     >
                       <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
-                          La Joie
+                        {item.title}
                       </Text>{" "}
-                        : expose un bonheur profond, l'émerveillement, la
-                        gratitude, satisfaction intense, énergie positive.
+                      : {item.description}
                     </Text>
                   </BlurView>
                 </View>
@@ -74,7 +88,6 @@ const EmotionConvey = () => {
           />
         </BlurView>
       </View>
-      </BorderGradient>
     </View>
   );
 };
@@ -85,7 +98,6 @@ const styles = StyleSheet.create({
   borderGradientStyle: {
     borderWidth: 1,
     borderRadius: 20,
-    height: responsiveHeight(55),
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
@@ -94,11 +106,13 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 100,
+    position: "absolute",
+    width: "100%",
   },
   blurContainer: {
-    flex: 1,
     borderRadius: 20,
     overflow: "hidden",
     zIndex: 1,
+    maxHeight: responsiveHeight(55),
   },
 });

src/screens/Writing/FinishedWriting.js

@@ -0,0 +1,48 @@
+import { View, Text, Image, StyleSheet } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { ai } from "../../assets";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { gutters } from "../../styles";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import GradientButton from "../../components/GradientButton";
+import { Routes } from "../../navigation";
+
+const FinishedWriting = () => {
+  return (
+    <Page headerType="NONE">
+      <Image source={ai.nathalie} style={styles.img} resizeMode="contain" />
+      <MusicLandHeader onPressBack={goBack} progress={100} />
+      <View
+        style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
+      >
+        <View
+          style={{
+            paddingBottom: gutters * 2,
+            paddingHorizontal: gutters,
+            gap: 12,
+          }}
+        >
+          <BorderGradientButton title="Enregistrer et continuer plus tard" />
+          <GradientButton
+            title="Passer à la composition musicale"
+            onPress={() => navigate(Routes.Onboarding)}
+          />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default FinishedWriting;
+
+const styles = StyleSheet.create({
+  img: {
+    width: "100%",
+    height: "70%",
+    position: "absolute",
+    bottom: -40,
+    right: -30,
+  },
+});

src/screens/Writing/Lyrics.js

@@ -0,0 +1,100 @@
+import { View, Text, Image, StyleSheet, ScrollView } from "react-native";
+import React 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";
+
+const Lyrics = () => {
+  return (
+    <Page headerType="NONE">
+      <MusicLandHeader onPressBack={goBack} progress={95} />
+      <View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
+        <BorderGradient
+          gradientProps={{
+            colors: ["#FFFFFF00", "#FFFFFF"],
+            start: { x: 0, y: 0 },
+            end: { x: 0, y: 1 },
+          }}
+          style={styles.borderGradientStyle}
+        >
+          <View style={{ borderRadius: 20, overflow: "hidden", flex: 1 }}>
+            <BlurView intensity={40} style={{ flex: 1 }}>
+              <ScrollView
+                contentContainerStyle={{
+                  paddingHorizontal: 14,
+                  paddingVertical: 10,
+                  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,
+                    }}
+                  >
+                    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={{
+          paddingBottom: gutters * 2,
+          paddingHorizontal: gutters,
+          gap: 12,
+        }}
+      >
+        <BorderGradientButton title="Générer des autres paroles" />
+        <GradientButton
+          title="Valider"
+          onPress={() => navigate(Routes.FinishedWriting)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default Lyrics;
+
+const styles = StyleSheet.create({
+  borderGradientStyle: {
+    height: "100%",
+    borderWidth: 1,
+    borderRadius: 20,
+  },
+});

src/screens/Writing/Rhymes.js

@@ -0,0 +1,99 @@
+import { View, Text, StyleSheet } from "react-native";
+import React, { useState } 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 { 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}>
+        <BorderGradient
+          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
+                intensity={30}
+                style={{
+                  flex: 1,
+                  backgroundColor: Palette.glass,
+                  justifyContent: "center",
+                  paddingHorizontal: 12,
+                }}
+              >
+                <Text style={styles.dropzone}>
+                  Introduction instrumentale longue.
+                </Text>
+              </BlurView>
+            </View>
+          ))}
+        </BlurView>
+      </View>
+    </View>
+  );
+};
+
+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,
+    borderRadius: 14,
+    overflow: "hidden",
+    shadowColor: "#00000040",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  dropzone: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  blurContainer: {
+    borderRadius: 20,
+    overflow: "hidden",
+    zIndex: 1,
+    maxHeight: responsiveHeight(55),
+  },
+});

src/screens/Writing/SongStructure.js

@@ -0,0 +1,101 @@
+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";
+
+const SongStructure = () => {
+  return (
+    <View style={{ flex: 1, gap: 10 }}>
+      <CreateLyricsHeader
+        title="Comment veux-tu structurer ta chanson ?"
+        subTitle="Sélectionne une structure.o"
+      />
+      <BorderGradient
+        gradientProps={{
+          colors: ["#FFFFFF00", "#FFFFFF"],
+        }}
+        style={styles.borderGradientStyle}
+      >
+        <View style={styles.blurContainer}>
+          <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+            <FlatList
+              data={GOALS}
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={styles.contentContainer}
+              renderItem={({ item }) => (
+                <Pressable style={styles.itemContainer}>
+                  <BlurView
+                    intensity={30}
+                    style={{
+                      flex: 1,
+                      backgroundColor: Palette.glass,
+                      ...Style.containerCenter,
+                    }}
+                  >
+                    <Text style={styles.itemText}>{item}</Text>
+                  </BlurView>
+                </Pressable>
+              )}
+            />
+          </BlurView>
+        </View>
+      </BorderGradient>
+    </View>
+  );
+};
+
+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,
+  },
+  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/Writing/SongStyle.js

@@ -0,0 +1,108 @@
+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";
+
+const SongStyle = () => {
+  return (
+    <View style={{ flex: 1, gap: 16 }}>
+      <View style={{ gap: 10 }}>
+        <CreateLyricsHeader
+          title={`Quel est le style de ta chanson ?`}
+          subTitle="Choisis l'ambiance émotions que tu veux faire passer."
+        />
+        <BorderGradient
+          gradientProps={{
+            colors: ["#FFFFFF00", "#FFFFFF"],
+          }}
+          style={styles.borderGradientStyle}
+        >
+          <View style={styles.blurContainer}>
+            <BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
+              <FlatList
+                data={GOALS}
+                showsVerticalScrollIndicator={false}
+                contentContainerStyle={styles.contentContainer}
+                renderItem={({ item }) => (
+                  <Pressable style={styles.itemContainer}>
+                    <BlurView
+                      intensity={30}
+                      style={{
+                        flex: 1,
+                        backgroundColor: Palette.glass,
+                        ...Style.containerCenter,
+                      }}
+                    >
+                      <Text style={styles.itemText}>{item}</Text>
+                    </BlurView>
+                  </Pressable>
+                )}
+              />
+            </BlurView>
+          </View>
+        </BorderGradient>
+      </View>
+      <CustomInput
+        label="Tu as un autre style de chanson ?"
+        placeholder="Décrire l’objectif"
+      />
+    </View>
+  );
+};
+
+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,
+  },
+  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/Writing/SongTo.js

@@ -0,0 +1,15 @@
+import { View, Text } from "react-native";
+import React from "react";
+import CreateLyricsHeader from "./components/CreateLyricsHeader";
+import CustomInput from "./components/CustomInput";
+
+const SongTo = () => {
+  return (
+    <View style={{ flex: 1, gap: 10 }}>
+      <CreateLyricsHeader title="À qui s’adresse ta chanson ?" />
+      <CustomInput placeholder="Ecrire mon contexte" height={283} />
+    </View>
+  );
+};
+
+export default SongTo;

src/screens/Writing/WritingLyrics.js

@@ -13,7 +13,7 @@ const WritingLyrics = () => {
   return (
     <Page headerType="NONE">
       <Image source={ai.nathalie} style={styles.img} resizeMode="contain" />
-      <MusicLandHeader showSkip onPressBack={goBack} />
+      <MusicLandHeader showSkip onPressBack={goBack} progress={9} />
       <View
         style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
       >

src/styles/Style.js

@@ -33,6 +33,11 @@ export const bubbleStyle = ({ isCurrentUser, customStyle = {} }) => ({
   ...customStyle,
 });
 
+export const size = ({ size }) => ({
+  width: size,
+  height: size,
+});
+
 const containerRow = {
   flexDirection: "row",
   alignItems: "center",