From 57e61fdf9eb48fdaebb396dd2d4904606f153561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20Falco=CC=81n?= <victoor89@gmail.com>
Date: Sat, 18 Jul 2026 08:07:25 +0200
Subject: [PATCH] Replace paywall free-plan button with a top-right X on mobile

On mobile the "Continue for free" escape hatch now renders as a dismiss
(X) button fixed to the top-right corner instead of a full-width button
at the bottom, matching the common paywall dismissal pattern on small
screens. It keeps the same delayed fade-in (5s) and the same action
(continue on the free plan). The bottom button is preserved on md+ where
there's room for it; the X is mobile-only.
---
 resources/js/pages/subscription/paywall.tsx | 22 +++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/subscription/paywall.tsx b/resources/js/pages/subscription/paywall.tsx
index e5ddb2ac..36d88e6a 100644
--- a/resources/js/pages/subscription/paywall.tsx
+++ b/resources/js/pages/subscription/paywall.tsx
@@ -20,6 +20,7 @@ import {
     ReceiptIcon,
     TrendingUpIcon,
     UsersIcon,
+    XIcon,
 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
@@ -125,7 +126,7 @@ const socialProofs = [
     },
     {
         icon: UsersIcon,
-        highlightKey: '1,200+ users',
+        highlightKey: '2,500+ users',
         textKey: 'taking control of their finances',
     },
 ];
@@ -384,6 +385,23 @@ function PricingSection({
 
     return (
         <div className="flex flex-col gap-4">
+            {canUseFreePlan && (
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    aria-label={__('Continue for free')}
+                    onClick={() => router.visit(dashboard().url)}
+                    className={cn(
+                        'fixed top-4 right-4 z-50 transition-opacity duration-1000 md:hidden',
+                        freeButtonVisible
+                            ? 'opacity-100'
+                            : 'pointer-events-none opacity-0',
+                    )}
+                >
+                    <XIcon className="size-5" />
+                </Button>
+            )}
+
             {selectedPlanData && (
                 <FeaturesSection
                     features={selectedPlanData.features.filter(
@@ -439,7 +457,7 @@ function PricingSection({
             {canUseFreePlan && (
                 <div
                     className={cn(
-                        'transition-opacity duration-1000',
+                        'hidden transition-opacity duration-1000 md:block',
                         freeButtonVisible
                             ? 'opacity-100'
                             : 'pointer-events-none opacity-0',