diff --git a/src/layouts/Page.js b/src/layouts/Page.js
index a45898c..1c27950 100644
--- a/src/layouts/Page.js
+++ b/src/layouts/Page.js
@@ -16,9 +16,10 @@ import { isWeb } from "../hooks/useLayoutType.js";
import { useUserData } from "../providers/UserDataProvider";
import { Routes } from "../navigation";
import { navigate } from "../navigation/NavigationService";
-import { gutters } from "../styles";
+import { gutters, Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { subscribeCoinPackModal } from "../utils/coinPackModal";
+import { BlurView } from "expo-blur";
export default ({
children,
@@ -254,11 +255,37 @@ export default ({
) : null}
{showReturnHomeButton ? (
-
+ //
+
+
+
+ {"Retour à l'accueil"}
+
+
+
) : null}
) : null}
diff --git a/src/screens/Home/Home.js b/src/screens/Home/Home.js
index 77d7073..1d9c978 100644
--- a/src/screens/Home/Home.js
+++ b/src/screens/Home/Home.js
@@ -36,6 +36,7 @@ import { openCoinPackModal } from "../../utils/coinPackModal";
import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
import StageCard from "./components/StageCard";
import ClubCard from "./components/ClubCard";
+import { BlurView } from "expo-blur";
const isProjectEmpty = (project) => {
if (!project) {
@@ -485,6 +486,14 @@ const Home = ({ navigation, route }) => {
);
+ const clubCard = (
+
+ );
+
const coinBalance = useMemo(() => {
const value = currentUserData?.coins;
if (typeof value === "number" && Number.isFinite(value)) {
@@ -519,11 +528,32 @@ const Home = ({ navigation, route }) => {
) : null;
const returnHomeButton = (
-
+
+
+
+ {"Retour à l'accueil"}
+
+
+
);
const topBar = (
@@ -588,7 +618,11 @@ const Home = ({ navigation, route }) => {
{stageCardsList}
-
+ {isWeb ? (
+ {clubCard}
+ ) : (
+ {clubCard}
+ )}
>
);
@@ -845,6 +879,15 @@ const styles = StyleSheet.create({
flexDirection: "column",
alignItems: "stretch",
},
+ webClubWrapper: {
+ width: "100%",
+ alignItems: "center",
+ marginTop: 16,
+ },
+ mobileClubWrapper: {
+ width: "100%",
+ marginTop: 20,
+ },
webStageCard: {
width: "48%",
},
diff --git a/src/screens/Home/components/ClubCard.js b/src/screens/Home/components/ClubCard.js
index fe58dc9..f705204 100644
--- a/src/screens/Home/components/ClubCard.js
+++ b/src/screens/Home/components/ClubCard.js
@@ -1,15 +1,32 @@
-import React, { memo, useEffect } from "react";
-import { Image, Pressable, StyleSheet, View } from "react-native";
+import React, { memo } from "react";
+import { Image, Pressable, StyleSheet } from "react-native";
import { isWeb } from "../../../hooks/useLayoutType.js";
import { img } from "../../../assets/index.js";
-const ClubCard = ({ onPress }) => {
+const ClubCard = ({
+ onPress,
+ containerStyle = null,
+ variant = "compact",
+}) => {
+ const isStageVariant = variant === "stage";
+ const cardBaseStyle = isStageVariant
+ ? isWeb
+ ? styles.stageCardWeb
+ : styles.stageCardMobile
+ : styles.compactCard;
+ const imageStyle = isStageVariant ? styles.stageImage : styles.compactImage;
+
return (
[styles.card, pressed && styles.cardPressed]}
+ style={({ pressed }) => [
+ styles.card,
+ cardBaseStyle,
+ containerStyle,
+ pressed && styles.cardPressed,
+ ]}
>
-
+
);
};
@@ -17,16 +34,33 @@ const ClubCard = ({ onPress }) => {
export default ClubCard;
const styles = StyleSheet.create({
- card: {
+ card: {},
+ compactCard: {
marginTop: isWeb ? 16 : 28,
alignSelf: "center",
},
+ stageCardWeb: {
+ width: "48%",
+ borderRadius: 20,
+ overflow: "hidden",
+ },
+ stageCardMobile: {
+ width: "100%",
+ borderRadius: 24,
+ overflow: "hidden",
+ marginBottom: 20,
+ },
cardPressed: {
opacity: 0.85,
},
- image: {
+ compactImage: {
width: 210,
height: 120,
resizeMode: "contain",
},
+ stageImage: {
+ width: "100%",
+ height: isWeb ? 210 : 300,
+ resizeMode: "contain",
+ },
});