fix tickets add reort mail and design fixes

src/screens/Writing/WritingLyrics.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Image, StyleSheet, View } from "react-native";
+import { Image, StyleSheet, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { ai, background, icons } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
@@ -10,22 +10,24 @@ import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUserData } from "../../providers/UserDataProvider";
-import { gutters } from "../../styles";
+import { strings } from "../../constants/strings";
+import { Palette, gutters } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
 
 const WritingLyrics = () => {
   const { createNewProject, selectedProject, updateProjectData } =
     useUserData();
   const { setIsLoading } = useMinuit();
 
-  async function createAndNavigate({ hasLyrics = false }) {
+  const startWriting = React.useCallback(async () => {
     try {
       await setIsLoading(true);
       if (selectedProject) {
-        updateProjectData({ hasLyrics });
+        updateProjectData({ hasLyrics: false });
         setTimeout(() => navigate(Routes.CreateLyricsWithAi), 500);
         return;
       }
-      const newProjectId = await createNewProject({ hasLyrics });
+      const newProjectId = await createNewProject({ hasLyrics: false });
       if (!newProjectId) {
         return;
       }
@@ -35,7 +37,7 @@ const WritingLyrics = () => {
     } finally {
       await setIsLoading(false);
     }
-  }
+  }, [createNewProject, navigate, selectedProject, setIsLoading, updateProjectData]);
 
   return (
     <Page
@@ -48,27 +50,34 @@ const WritingLyrics = () => {
         progress={9}
         logo={icons.musicLandWriting}
       />
-      <View
-        style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
-      >
-        <View
-          style={{
-            paddingBottom: gutters * 2,
-            paddingHorizontal: gutters,
-            gap: 12,
-          }}
-        >
+      <View style={styles.contentWrapper}>
+        <View style={styles.heroContainer}>
+          <Text style={styles.heroTitle}>
+            {strings.writing.onboarding.heroTitle}
+          </Text>
+          <Text style={styles.heroSubtitle}>
+            {strings.writing.onboarding.heroSubtitle}
+          </Text>
+        </View>
+        <View style={styles.ctaGroup}>
           <GradientButton
-            maxWidth={500}
+            size="large"
+            maxWidth={520}
             containerStyle={{ alignSelf: "center", width: "100%" }}
-            title="Écrire des paroles avec une IA"
-            onPress={() => createAndNavigate({ hasLyrics: false })}
+            title={strings.writing.onboarding.primaryCta}
+            onPress={startWriting}
+            textStyle={{ fontFamily: FONT_FAMILY.InterSemiBold }}
           />
           <BorderGradientButton
-            maxWidth={500}
-            onPress={() => createAndNavigate({ hasLyrics: true })}
+            size="small"
+            title={strings.writing.onboarding.secondaryCta}
+            disabled
             containerStyle={{ alignSelf: "center", width: "100%" }}
+            maxWidth={360}
           />
+          <Text style={styles.secondaryNote}>
+            {strings.writing.onboarding.secondaryNote}
+          </Text>
         </View>
       </View>
     </Page>
@@ -85,4 +94,39 @@ const styles = StyleSheet.create({
     bottom: -40,
     right: -30,
   },
+  contentWrapper: {
+    flex: 1,
+    justifyContent: "space-between",
+    paddingTop: gutters * 6,
+    paddingBottom: gutters * 2,
+    paddingHorizontal: gutters,
+    gap: 32,
+  },
+  heroContainer: {
+    gap: 12,
+    maxWidth: 560,
+  },
+  heroTitle: {
+    fontSize: 28,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  heroSubtitle: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+    opacity: 0.88,
+  },
+  ctaGroup: {
+    gap: 12,
+  },
+  secondaryNote: {
+    textAlign: "center",
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 14,
+    opacity: 0.85,
+    fontStyle: "italic",
+  },
 });