feat: suggest downloading the mobile app

src/components/Button/JumpInPositionButton.tsx

@@ -7,6 +7,7 @@ import { JumpIn, JumpInProps } from "decentraland-ui2"
 
 import { PlaceAttributes } from "../../entities/Place/types"
 import { placeClientOptions } from "../../modules/utils"
+import { MobileJumpInWrapper } from "../MobileDownloadModal/MobileDownloadModal"
 
 export default React.memo(function JumpInPositionButton({
   loading,
@@ -16,28 +17,29 @@ export default React.memo(function JumpInPositionButton({
   place: Pick<PlaceAttributes, "base_position" | "world" | "world_name">
 }) {
   const l = useFormatMessage()
-
   const desktopAppOptions = useMemo(
     () => place && placeClientOptions(place),
     [place]
   )
 
   return (
-    <JumpIn
-      variant="button"
-      loading={loading}
-      buttonText={l("components.button.jump_in")}
-      desktopAppOptions={desktopAppOptions}
-      downloadUrl={env(
-        "DECENTRALAND_DOWNLOAD_URL",
-        "https://decentraland.org/download"
-      )}
-      onTrack={onTrack}
-      modalProps={{
-        title: l("components.modal.download.title"),
-        description: l("components.modal.download.description"),
-        buttonLabel: l("components.modal.download.button_label"),
-      }}
-    />
+    <MobileJumpInWrapper>
+      <JumpIn
+        variant="button"
+        loading={loading}
+        buttonText={l("components.button.jump_in")}
+        desktopAppOptions={desktopAppOptions}
+        downloadUrl={env(
+          "DECENTRALAND_DOWNLOAD_URL",
+          "https://decentraland.org/download"
+        )}
+        onTrack={onTrack}
+        modalProps={{
+          title: l("components.modal.download.title"),
+          description: l("components.modal.download.description"),
+          buttonLabel: l("components.modal.download.button_label"),
+        }}
+      />
+    </MobileJumpInWrapper>
   )
 })

src/components/MobileDownloadModal/MobileDownloadModal.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback, useMemo, useState } from "react"
+
+import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
+import {
+  Content,
+  ImageContainer,
+  StyledDescription,
+  StyledTitle,
+} from "decentraland-ui2/dist/components/Modal/DownloadModal/DownloadModal.styled"
+import { ExplorerJumpIn } from "decentraland-ui2/dist/components/Modal/DownloadModal/ExplorerJumpIn"
+
+import { dclModal } from "decentraland-ui2"
+
+import { MobileStoreBadges } from "../MobileStoreBadges/MobileStoreBadges"
+
+const { Modal } = dclModal
+
+export interface MobileDownloadModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+export const MobileDownloadModal: React.FC<MobileDownloadModalProps> = ({
+  open,
+  onClose,
+}) => {
+  const l = useFormatMessage()
+
+  return (
+    <Modal open={open} size="tiny" title=" " onClose={onClose}>
+      <Content>
+        <ImageContainer>
+          <ExplorerJumpIn />
+        </ImageContainer>
+        <StyledTitle variant="h2">
+          {l("components.modal.download.title")}
+        </StyledTitle>
+        <StyledDescription variant="body1">
+          {l("components.modal.mobile_download.description")}
+        </StyledDescription>
+        <MobileStoreBadges size="large" />
+      </Content>
+    </Modal>
+  )
+}
+
+/**
+ * Wraps children (e.g., <JumpIn>) and intercepts clicks on mobile
+ * to show a custom modal with store badges instead of the built-in DownloadModal.
+ */
+export function useIsMobileDevice() {
+  return useMemo(
+    () =>
+      typeof navigator !== "undefined" &&
+      /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
+    []
+  )
+}
+
+export function MobileJumpInWrapper({
+  isMobile: isMobileProp,
+  children,
+}: {
+  isMobile?: boolean
+  children: React.ReactNode
+}) {
+  const isMobileDevice = useIsMobileDevice()
+  const isMobile = isMobileProp ?? isMobileDevice
+  const [showModal, setShowModal] = useState(false)
+
+  const handleCapture = useCallback(
+    (e: React.MouseEvent) => {
+      if (isMobile) {
+        e.stopPropagation()
+        e.preventDefault()
+        setShowModal(true)
+      }
+    },
+    [isMobile]
+  )
+
+  return (
+    <>
+      <div onClickCapture={handleCapture} style={{ display: "contents" }}>
+        {children}
+      </div>
+      <MobileDownloadModal
+        open={showModal}
+        onClose={() => setShowModal(false)}
+      />
+    </>
+  )
+}

src/components/MobileStoreBadges/MobileStoreBadges.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+
+import useFormatMessage from "decentraland-gatsby/dist/hooks/useFormatMessage"
+
+import appStoreBadge from "../../images/app-store-badge.svg"
+import googlePlayBadge from "../../images/google-play-badge.svg"
+import { MOBILE_APP } from "../../modules/mobileApp"
+
+interface MobileStoreBadgesProps {
+  size?: "small" | "large"
+  className?: string
+  style?: React.CSSProperties
+}
+
+const containerStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "12px",
+  width: "100%",
+}
+
+const linkStyle: React.CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  textDecoration: "none",
+  transition: "opacity 0.2s ease",
+}
+
+const MobileStoreBadges = React.memo(
+  ({ size = "small", className, style }: MobileStoreBadgesProps) => {
+    const l = useFormatMessage()
+    const imgHeight = size === "small" ? "40px" : "48px"
+
+    return (
+      <div className={className} style={{ ...containerStyle, ...style }}>
+        <a
+          href={MOBILE_APP.IOS_STORE_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={l("components.mobile_store_badges.download_ios")}
+          style={linkStyle}
+        >
+          <img
+            src={appStoreBadge}
+            alt={l("components.mobile_store_badges.download_ios")}
+            style={{ height: imgHeight }}
+          />
+        </a>
+        <a
+          href={MOBILE_APP.ANDROID_STORE_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={l("components.mobile_store_badges.download_android")}
+          style={linkStyle}
+        >
+          <img
+            src={googlePlayBadge}
+            alt={l("components.mobile_store_badges.download_android")}
+            style={{ height: imgHeight }}
+          />
+        </a>
+      </div>
+    )
+  }
+)
+
+export { MobileStoreBadges }

src/components/Place/PlaceFeatured/PlaceFeatured.tsx

@@ -19,6 +19,10 @@ import { SegmentPlace } from "../../../modules/segment"
 import { placeClientOptions } from "../../../modules/utils"
 import { getImageUrl } from "../../../utils/image"
 import UserCount from "../../Label/UserCount/UserCount"
+import {
+  MobileDownloadModal,
+  useIsMobileDevice,
+} from "../../MobileDownloadModal/MobileDownloadModal"
 
 import "./PlaceFeatured.css"
 
@@ -31,6 +35,7 @@ export default React.memo(function PlaceFeatured(props: PlaceFeaturedProps) {
   const { item, loading } = props
 
   const l = useFormatMessage()
+  const isMobileDevice = useIsMobileDevice()
 
   const placeDetailUrl = useMemo(() => {
     if (item.world) return locations.world(item.world_name!)
@@ -112,14 +117,21 @@ export default React.memo(function PlaceFeatured(props: PlaceFeaturedProps) {
           </Button>
         </Hero.Actions>
       </Hero>
-      <DownloadModal
-        open={showModal}
-        title={l("components.modal.download.title")}
-        description={l("components.modal.download.description")}
-        buttonLabel={l("components.modal.download.button_label")}
-        onClose={() => setShowModal(false)}
-        onDownloadClick={handleModalClick}
-      />
+      {isMobileDevice ? (
+        <MobileDownloadModal
+          open={showModal}
+          onClose={() => setShowModal(false)}
+        />
+      ) : (
+        <DownloadModal
+          open={showModal}
+          title={l("components.modal.download.title")}
+          description={l("components.modal.download.description")}
+          buttonLabel={l("components.modal.download.button_label")}
+          onClose={() => setShowModal(false)}
+          onDownloadClick={handleModalClick}
+        />
+      )}
     </div>
   )
 })