diff --git a/mobile/assets/logo-gros-semi.png b/mobile/assets/logo-gros-semi.png new file mode 100644 index 00000000..2e1e952c Binary files /dev/null and b/mobile/assets/logo-gros-semi.png differ diff --git a/mobile/src/screens/client/ProductsScreen.tsx b/mobile/src/screens/client/ProductsScreen.tsx index e86f7b6d..fdcdc986 100644 --- a/mobile/src/screens/client/ProductsScreen.tsx +++ b/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(null); const carouselRef = useRef(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 ( - + )} - + {selectedCategory === "gros&semi" && ( + + + Prochainement + + + )} + ); }