landing page

src/components/BaseHeader.js

@@ -1,5 +1,5 @@
-import React from "reactn";
 import { Image, Pressable, Text, View } from "react-native";
+import React from "reactn";
 import { responsiveWidth } from "../actions/responsiveSizes.js";
 
 import { icons } from "../assets";
@@ -11,7 +11,7 @@ import { navigate } from "../navigation/NavigationService";
 import useLayoutType, { sidebarWidth } from "../hooks/useLayoutType.js";
 import useNotifications from "../hooks/useNotifications";
 
-export default ({ title = "", containerStyle = {} }) => {
+export default ({ title = "", containerStyle = {}, bell = false }) => {
   const { isDesktop } = useLayoutType();
   const notificationsContext = useNotifications();
   const unreadCount = notificationsContext?.unreadCount || 0;
@@ -45,13 +45,15 @@ export default ({ title = "", containerStyle = {} }) => {
 
       <View style={{ ...Style.containerRow }}>
         <Pressable onPress={() => navigate(Routes.Notifications)}>
-          <Image
-            resizeMode="contain"
-            source={icons.bell}
-            style={{
-              ...Style.iconDefault,
-            }}
-          />
+          {bell && (
+            <Image
+              resizeMode="contain"
+              source={icons.bell}
+              style={{
+                ...Style.iconDefault,
+              }}
+            />
+          )}
 
           {hasUnread ? (
             <View

src/components/ConnectBtn.js

@@ -0,0 +1,45 @@
+import { Entypo } from "@expo/vector-icons";
+import { BlurView } from "expo-blur";
+import React from "react";
+import { Pressable, Text } from "react-native";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+export default function ConnectBtn({ style }) {
+  const handlePress = () => {
+    navigate(Routes.Login);
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={{
+        ...style,
+      }}
+    >
+      <BlurView
+        style={{
+          paddingHorizontal: 10,
+          paddingVertical: 5,
+          borderRadius: 15,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 14,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+            marginRight: 5,
+          }}
+        >
+          {"Se connecter"}
+        </Text>
+        <Entypo name="share-alternative" size={16} color="white" />
+      </BlurView>
+    </Pressable>
+  );
+}

src/components/GradientButton.js

@@ -44,6 +44,7 @@ const GradientButton = ({
             fontSize: 15,
             color: Palette.white,
             fontFamily: FONT_FAMILY.InterMedium,
+            paddingHorizontal: 10,
           }}
         >
           {title}

src/layouts/Page.js

@@ -5,6 +5,7 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import React from "reactn";
 import { responsiveHeight } from "../actions/responsiveSizes.js";
 import BaseHeader from "../components/BaseHeader";
+import ConnectBtn from "../components/ConnectBtn.js";
 import NavigateHeader from "../components/NavigateHeader";
 import ShareBtn from "../components/ShareBtn/ShareBtn";
 import { isWeb } from "../hooks/useLayoutType.js";
@@ -35,6 +36,7 @@ export default ({
   width = undefined,
   maxWidth = 1200,
   shareBtn = false,
+  connect = false,
   blurIntensity = 0,
 }) => {
   const PageContainer =
@@ -117,14 +119,20 @@ export default ({
       </PageContainer>
 
       {bottomStickyContent?.()}
-      {shareBtn && isWeb && (
-        <ShareBtn
+      {(shareBtn || connect) && isWeb && (
+        <View
           style={{
             position: "absolute",
             top: 20,
             right: 20,
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 12, // ou marginLeft sur chaque bouton si gap non supporté
           }}
-        />
+        >
+          {shareBtn && <ShareBtn />}
+          {connect && <ConnectBtn />}
+        </View>
       )}
     </View>
   );

src/navigation/MainStack.js

@@ -4,6 +4,7 @@ import { Platform } from "react-native";
 import CreatePassword from "../screens/CreatePassword";
 import CreatePseudo from "../screens/CreatePseudo";
 import ForgotPassword from "../screens/ForgotPassword";
+import LandingPage from "../screens/LandingPage";
 import AllMyList from "../screens/Library/AllMyList";
 import AllMyPlaylist from "../screens/Library/AllMyPlaylist";
 import MusicDetails from "../screens/Library/MusicDetails";
@@ -86,6 +87,7 @@ const screens = [
   { name: Routes.Splash, component: Splash },
   { name: Routes.Onboarding, component: Onboarding },
   { name: Routes.Login, component: Login, title: "Connexion" },
+  { name: Routes.LandingPage, component: LandingPage },
   {
     name: Routes.ForgotPassword,
     component: ForgotPassword,

src/navigation/Routes.js

@@ -6,7 +6,7 @@ export const Routes = {
   Register: "Register",
   CreatePassword: "CreatePassword",
   CreatePseudo: "CreatePseudo",
-
+  LandingPage: "LandingPage",
   BottomTab: "BottomTab",
   Welcome: "Welcome",
 

src/screens/LandingPage.js

@@ -0,0 +1,25 @@
+import { View } from "react-native";
+import { background } from "../assets";
+import GradientButton from "../components/GradientButton";
+import Page from "../layouts/Page";
+
+export default function LandingPage() {
+  return (
+    <Page
+      shareBtn
+      connect
+      title="Landing Page"
+      backgroundImg={background.homeBGWeb}
+    >
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <GradientButton title="Commencer la visite" onPress={() => {}} />
+      </View>
+    </Page>
+  );
+}

src/screens/Splash.js

@@ -39,7 +39,7 @@ export default ({ navigation }) => {
         index: 0,
         routes: [
           {
-            name: Routes.Login,
+            name: Routes.LandingPage,
           },
         ],
       });