feat: clubcard

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 ({
             </View>
           ) : null}
           {showReturnHomeButton ? (
-            <GradientButton
-              title="retour à l'accueil"
-              onPress={handleReturnHomePress}
-              containerStyle={styles.returnHomeButton}
-            />
+            // <GradientButton
+            //   title="retour à l'accueil"
+            //   onPress={handleReturnHomePress}
+            //   containerStyle={styles.returnHomeButton}
+            // />
+            <Pressable onPress={handleReturnHomePress} sty>
+              <BlurView
+                tint="light"
+                intensity={30}
+                style={{
+                  paddingHorizontal: 10,
+                  paddingVertical: 8,
+                  borderRadius: 12,
+                  overflow: "hidden",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                    marginRight: 5,
+                  }}
+                >
+                  {"Retour à l'accueil"}
+                </Text>
+              </BlurView>
+            </Pressable>
           ) : null}
         </View>
       ) : null}

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 }) => {
     </View>
   );
 
+  const clubCard = (
+    <ClubCard
+      onPress={handleClubPress}
+      containerStyle={stageCardItemStyle}
+      variant="stage"
+    />
+  );
+
   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 = (
-    <GradientButton
-      title="retour à l'accueil"
-      onPress={handleReturnToLanding}
-      containerStyle={styles.returnButton}
-    />
+    <Pressable onPress={handleReturnToLanding}>
+      <BlurView
+        tint="dark"
+        intensity={30}
+        style={{
+          paddingHorizontal: 10,
+          paddingVertical: 8,
+          borderRadius: 12,
+          overflow: "hidden",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 14,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+            marginRight: 5,
+          }}
+        >
+          {"Retour à l'accueil"}
+        </Text>
+      </BlurView>
+    </Pressable>
   );
 
   const topBar = (
@@ -588,7 +618,11 @@ const Home = ({ navigation, route }) => {
 
       {stageCardsList}
 
-      <ClubCard onPress={handleClubPress} />
+      {isWeb ? (
+        <View style={styles.webClubWrapper}>{clubCard}</View>
+      ) : (
+        <View style={styles.mobileClubWrapper}>{clubCard}</View>
+      )}
     </>
   );
 
@@ -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%",
   },

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 (
     <Pressable
       onPress={onPress}
-      style={({ pressed }) => [styles.card, pressed && styles.cardPressed]}
+      style={({ pressed }) => [
+        styles.card,
+        cardBaseStyle,
+        containerStyle,
+        pressed && styles.cardPressed,
+      ]}
     >
-      <Image source={img.musiclandClub} style={styles.image} />
+      <Image source={img.musiclandClub} style={imageStyle} />
     </Pressable>
   );
 };
@@ -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",
+  },
 });