From b621043ce521ccef26d6e7377078e7af5d2008c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?=
 <43729152+fulopkovacs@users.noreply.github.com>
Date: Sun, 4 Jan 2026 21:27:51 +0100
Subject: [PATCH 1/3] Center the cards on home intro when there's only one
 column

---
 src/components/HomeIntro.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HomeIntro.tsx b/src/components/HomeIntro.tsx
index 0788289..53012b0 100644
--- a/src/components/HomeIntro.tsx
+++ b/src/components/HomeIntro.tsx
@@ -122,7 +122,7 @@ export function HomeIntro({
                 front-ends.
               </motion.p>
               <WavyLine />
-              <ul className="flex flex-wrap gap-4">
+              <ul className="flex flex-wrap gap-4 justify-center">
                 <FeatureItem emoji={"🚀"} title="User actions feel instant">
                   Updates show immediately while sync happens in the background.
                 </FeatureItem>

From ad1c73ba1bdc7821cc3fd3ce7a1477ea220e660f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?=
 <43729152+fulopkovacs@users.noreply.github.com>
Date: Sun, 4 Jan 2026 22:08:10 +0100
Subject: [PATCH 2/3] Display a warning on mobile devices

---
 src/components/HomeIntro.tsx |  9 +++++++++
 src/routeTree.gen.ts         | 22 +++++++++++++++++++++-
 src/routes/index.tsx         | 17 +++++++++++++++++
 src/routes/mobile.tsx        | 14 ++++++++++++++
 4 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/mobile.tsx

diff --git a/src/components/HomeIntro.tsx b/src/components/HomeIntro.tsx
index 53012b0..0870c5e 100644
--- a/src/components/HomeIntro.tsx
+++ b/src/components/HomeIntro.tsx
@@ -63,9 +63,11 @@ function WavyLine() {
 export function HomeIntro({
   activeStep,
   showIntro,
+  isMobile = false,
 }: {
   activeStep: string | null;
   showIntro: boolean;
+  isMobile?: boolean;
 }) {
   const [open, setOpen] = useState(
     activeStep === null ||
@@ -143,11 +145,18 @@ export function HomeIntro({
                 Sounds amazing, right? Learn the basics with this interactive
                 tutorial in 6-7 minutes!
               </p>
+              {isMobile && (
+                <p className="max-w-sm text-destructive text-center font-bold text-sm">
+                  This interactive tutorial requires features not available on
+                  mobile browsers. Please visit on a desktop computer.
+                </p>
+              )}
             </CardContent>
             <CardFooter className="flex justify-center items-center flex-col gap-10">
               <Button
                 onClick={startTutorial}
                 className="bg-primary cursor-pointer"
+                disabled={isMobile}
               >
                 Get started <ArrowRightIcon />
               </Button>
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 7a07f74..f30b814 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as MobileRouteImport } from './routes/mobile'
 import { Route as TutorialRouteImport } from './routes/_tutorial'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as TutorialDbRouteImport } from './routes/_tutorial._db'
@@ -17,6 +18,11 @@ import { Route as TutorialDbProjectRootRouteImport } from './routes/_tutorial._d
 import { Route as TutorialDbProjectsIndexRouteImport } from './routes/_tutorial._db.projects.index'
 import { Route as TutorialDbProjectsProjectIdRouteImport } from './routes/_tutorial._db.projects.$projectId'
 
+const MobileRoute = MobileRouteImport.update({
+  id: '/mobile',
+  path: '/mobile',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const TutorialRoute = TutorialRouteImport.update({
   id: '/_tutorial',
   getParentRoute: () => rootRouteImport,
@@ -54,6 +60,7 @@ const TutorialDbProjectsProjectIdRoute =
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/mobile': typeof MobileRoute
   '/project-root': typeof TutorialDbProjectRootRoute
   '/projects': typeof TutorialDbProjectsRouteWithChildren
   '/projects/$projectId': typeof TutorialDbProjectsProjectIdRoute
@@ -61,6 +68,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/mobile': typeof MobileRoute
   '/project-root': typeof TutorialDbProjectRootRoute
   '/projects/$projectId': typeof TutorialDbProjectsProjectIdRoute
   '/projects': typeof TutorialDbProjectsIndexRoute
@@ -69,6 +77,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/_tutorial': typeof TutorialRouteWithChildren
+  '/mobile': typeof MobileRoute
   '/_tutorial/_db': typeof TutorialDbRouteWithChildren
   '/_tutorial/_db/project-root': typeof TutorialDbProjectRootRoute
   '/_tutorial/_db/projects': typeof TutorialDbProjectsRouteWithChildren
@@ -79,16 +88,18 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/mobile'
     | '/project-root'
     | '/projects'
     | '/projects/$projectId'
     | '/projects/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/project-root' | '/projects/$projectId' | '/projects'
+  to: '/' | '/mobile' | '/project-root' | '/projects/$projectId' | '/projects'
   id:
     | '__root__'
     | '/'
     | '/_tutorial'
+    | '/mobile'
     | '/_tutorial/_db'
     | '/_tutorial/_db/project-root'
     | '/_tutorial/_db/projects'
@@ -99,10 +110,18 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   TutorialRoute: typeof TutorialRouteWithChildren
+  MobileRoute: typeof MobileRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/mobile': {
+      id: '/mobile'
+      path: '/mobile'
+      fullPath: '/mobile'
+      preLoaderRoute: typeof MobileRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_tutorial': {
       id: '/_tutorial'
       path: ''
@@ -197,6 +216,7 @@ const TutorialRouteWithChildren = TutorialRoute._addFileChildren(
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   TutorialRoute: TutorialRouteWithChildren,
+  MobileRoute: MobileRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index e43794d..86a09ee 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,7 +1,24 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeader } from "@tanstack/react-start/server";
+
+const getIsMobile = createServerFn().handler(async () => {
+  const userAgent = getRequestHeader("user-agent") || "";
+  const mobileRegex =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+  return mobileRegex.test(userAgent);
+});
 
 export const Route = createFileRoute("/")({
   beforeLoad: async () => {
+    const isMobile = await getIsMobile();
+
+    if (isMobile) {
+      throw redirect({
+        to: "/mobile",
+      });
+    }
+
     throw redirect({
       to: "/projects",
     });
diff --git a/src/routes/mobile.tsx b/src/routes/mobile.tsx
new file mode 100644
index 0000000..3d76128
--- /dev/null
+++ b/src/routes/mobile.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { HomeIntro } from "@/components/HomeIntro";
+
+export const Route = createFileRoute("/mobile")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <div className="min-h-screen bg-background">
+      <HomeIntro activeStep={null} showIntro={true} isMobile={true} />
+    </div>
+  );
+}

From 327321981e443af40572892894c76fd5fda405bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=BCl=C3=B6p=20Kov=C3=A1cs?=
 <43729152+fulopkovacs@users.noreply.github.com>
Date: Sun, 4 Jan 2026 22:18:47 +0100
Subject: [PATCH 3/3] Add mobile detection to the root route to apply to all
 navigations

---
 src/routes/__root.tsx               | 16 ++++++++++++++++
 src/routes/index.tsx                | 17 -----------------
 src/server/functions/getIsMobile.ts |  9 +++++++++
 3 files changed, 25 insertions(+), 17 deletions(-)
 create mode 100644 src/server/functions/getIsMobile.ts

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 91a31d3..c827dc5 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -5,6 +5,7 @@ import {
   ClientOnly,
   createRootRouteWithContext,
   HeadContent,
+  redirect,
   ScriptOnce,
   Scripts,
 } from "@tanstack/react-router";
@@ -16,6 +17,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Toaster } from "@/components/ui/sonner";
 import { client, idbName } from "@/db";
+import { getIsMobile } from "@/server/functions/getIsMobile";
 import { seo } from "@/utils/seo";
 import appCss from "../styles.css?url";
 
@@ -24,6 +26,20 @@ interface MyRouterContext {
 }
 
 export const Route = createRootRouteWithContext<MyRouterContext>()({
+  beforeLoad: async ({ location }) => {
+    // Skip redirect if already on /mobile to avoid infinite loop
+    if (location.pathname === "/mobile") {
+      return;
+    }
+
+    const isMobile = await getIsMobile();
+
+    if (isMobile) {
+      throw redirect({
+        to: "/mobile",
+      });
+    }
+  },
   head: () => ({
     meta: [
       {
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 86a09ee..e43794d 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,24 +1,7 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { createServerFn } from "@tanstack/react-start";
-import { getRequestHeader } from "@tanstack/react-start/server";
-
-const getIsMobile = createServerFn().handler(async () => {
-  const userAgent = getRequestHeader("user-agent") || "";
-  const mobileRegex =
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
-  return mobileRegex.test(userAgent);
-});
 
 export const Route = createFileRoute("/")({
   beforeLoad: async () => {
-    const isMobile = await getIsMobile();
-
-    if (isMobile) {
-      throw redirect({
-        to: "/mobile",
-      });
-    }
-
     throw redirect({
       to: "/projects",
     });
diff --git a/src/server/functions/getIsMobile.ts b/src/server/functions/getIsMobile.ts
new file mode 100644
index 0000000..b59f674
--- /dev/null
+++ b/src/server/functions/getIsMobile.ts
@@ -0,0 +1,9 @@
+import { createServerFn } from "@tanstack/react-start";
+import { getRequestHeader } from "@tanstack/react-start/server";
+
+export const getIsMobile = createServerFn().handler(async () => {
+  const userAgent = getRequestHeader("user-agent") || "";
+  const mobileRegex =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+  return mobileRegex.test(userAgent);
+});