chore: add new page semi&gros

mobile/src/screens/client/ProductsScreen.tsx

@@ -13,6 +13,8 @@ import {
     StyleSheet,
     RefreshControl,
     Dimensions,
+    ImageBackground,
+    Animated,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
@@ -25,6 +27,9 @@ import { spacing, fontSize } from "../../theme";
 import { useTheme } from "../../context/ThemeContext";
 import type { ClientStackParamList } from "../../navigation/types";
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const logoGrosSemi = require("../../../assets/logo-gros-semi.png");
+
 const { width: SCREEN_WIDTH } = Dimensions.get("window");
 const CARD_WIDTH = SCREEN_WIDTH - 48;
 
@@ -53,6 +58,26 @@ export default function ProductsScreen() {
     const [refreshing, setRefreshing] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const carouselRef = useRef<FlatList>(null);
+    const scaleAnim = useRef(new Animated.Value(1)).current;
+
+    useEffect(() => {
+        const pulse = Animated.loop(
+            Animated.sequence([
+                Animated.timing(scaleAnim, {
+                    toValue: 1.35,
+                    duration: 2000,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(scaleAnim, {
+                    toValue: 1,
+                    duration: 2000,
+                    useNativeDriver: true,
+                }),
+            ]),
+        );
+        pulse.start();
+        return () => pulse.stop();
+    }, [scaleAnim]);
 
     const fetchProducts = useCallback(async () => {
         setError(null);
@@ -130,6 +155,27 @@ export default function ProductsScreen() {
                     fontSize: fontSize.md,
                     textAlign: "center",
                 },
+                bgImage: {
+                    opacity: 0.12,
+                    resizeMode: "contain",
+                },
+                comingSoonWrapper: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    pointerEvents: "none",
+                },
+                comingSoonText: {
+                    fontSize: 32,
+                    fontWeight: "800",
+                    color: colors.textWhite,
+                    letterSpacing: 2,
+                    textAlign: "center",
+                },
             }),
         [colors],
     );
@@ -139,7 +185,11 @@ export default function ProductsScreen() {
     }
 
     return (
-        <View style={styles.container}>
+        <ImageBackground
+            source={selectedCategory === "gros&semi" ? logoGrosSemi : undefined}
+            style={styles.container}
+            imageStyle={styles.bgImage}
+        >
             <View style={styles.filtersWrapper}>
                 <ScrollView
                     horizontal
@@ -204,6 +254,18 @@ export default function ProductsScreen() {
                     )}
                 />
             )}
-        </View>
+            {selectedCategory === "gros&semi" && (
+                <View style={styles.comingSoonWrapper}>
+                    <Animated.Text
+                        style={[
+                            styles.comingSoonText,
+                            { transform: [{ scale: scaleAnim }] },
+                        ]}
+                    >
+                        Prochainement
+                    </Animated.Text>
+                </View>
+            )}
+        </ImageBackground>
     );
 }