From 1951a339327133de65c672459edb8db0f8def438 Mon Sep 17 00:00:00 2001
From: Alec Ananian <1013230+alecananian@users.noreply.github.com>
Date: Thu, 16 Nov 2023 17:33:04 -0800
Subject: [PATCH 1/3] add welcome card component

---
 ui/src/components/WelcomeCard.tsx | 33 +++++++++++++++++++++++++++++++
 ui/src/nav/MobileRoot.tsx         |  2 ++
 2 files changed, 35 insertions(+)
 create mode 100644 ui/src/components/WelcomeCard.tsx

diff --git a/ui/src/components/WelcomeCard.tsx b/ui/src/components/WelcomeCard.tsx
new file mode 100644
index 0000000000..e0c6cc9d23
--- /dev/null
+++ b/ui/src/components/WelcomeCard.tsx
@@ -0,0 +1,33 @@
+import { useLocalStorage } from 'usehooks-ts';
+
+import { createStorageKey } from '@/logic/utils';
+
+export default function WelcomeCard() {
+  const [isWelcomeSeen, setIsWelcomeSeen] = useLocalStorage<boolean>(
+    createStorageKey('welcome-seen'),
+    false
+  );
+
+  if (isWelcomeSeen) {
+    return null;
+  }
+
+  return (
+    <div className="mx-3 mt-1 mb-4 space-y-6 rounded-[32px] bg-[#edf3fb] p-9 text-[#165FCD]">
+      <h3 className="text-[17px] font-medium">Welcome to Tlon</h3>
+      <p>Tip 1 of 3</p>
+      <p>
+        Visit the Tlon Studio group to learn more about what we&apos;re working
+        on now.
+      </p>
+      <div className="space-x-3 text-right text-[17px] font-medium">
+        <button className="rounded-lg bg-[#E4E9F1] px-4 py-2.5 active:opacity-90">
+          Close
+        </button>
+        <button className="rounded-lg bg-[#165FCD] px-4 py-2.5 text-[#FFF] active:opacity-90">
+          Next Tip
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/nav/MobileRoot.tsx b/ui/src/nav/MobileRoot.tsx
index 35802944c0..345ba4f41c 100644
--- a/ui/src/nav/MobileRoot.tsx
+++ b/ui/src/nav/MobileRoot.tsx
@@ -21,6 +21,7 @@ import Layout from '@/components/Layout/Layout';
 import AddIconMobileNav from '@/components/icons/AddIconMobileNav';
 import MagnifyingGlass16Icon from '@/components/icons/MagnifyingGlass16Icon';
 import GroupJoinList from '@/groups/GroupJoinList';
+import WelcomeCard from '@/components/WelcomeCard';
 
 export default function MobileRoot() {
   const [isScrolling, setIsScrolling] = useState(false);
@@ -74,6 +75,7 @@ export default function MobileRoot() {
       }
     >
       <nav className="flex h-full flex-1 flex-col overflow-y-auto overflow-x-hidden">
+        <WelcomeCard />
         <div className="flex-1">
           {sortedGroups.length === 0 && !isLoading ? (
             <div className="mx-4 my-2 rounded-lg bg-indigo-50 p-4 leading-5 text-gray-700 dark:bg-indigo-900/50">

From 804b6874ed6dee85b9e79bd2b1c9f6ad195c5278 Mon Sep 17 00:00:00 2001
From: Alec Ananian <1013230+alecananian@users.noreply.github.com>
Date: Mon, 20 Nov 2023 15:01:55 -0800
Subject: [PATCH 2/3] update copy

---
 ui/src/components/WelcomeCard.tsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/WelcomeCard.tsx b/ui/src/components/WelcomeCard.tsx
index e0c6cc9d23..813fdeb2b2 100644
--- a/ui/src/components/WelcomeCard.tsx
+++ b/ui/src/components/WelcomeCard.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import { useLocalStorage } from 'usehooks-ts';
 
 import { createStorageKey } from '@/logic/utils';
@@ -14,19 +15,27 @@ export default function WelcomeCard() {
 
   return (
     <div className="mx-3 mt-1 mb-4 space-y-6 rounded-[32px] bg-[#edf3fb] p-9 text-[#165FCD]">
-      <h3 className="text-[17px] font-medium">Welcome to Tlon</h3>
-      <p>Tip 1 of 3</p>
+      <h3 className="text-[17px] font-medium">Welcome to our pilot program</h3>
       <p>
-        Visit the Tlon Studio group to learn more about what we&apos;re working
-        on now.
+        Tlon is built on an open source, user-owned network. This presents
+        unique development challenges. You may encounter turbulence while we
+        make the experience as smooth as any other app. Help us improve by
+        providing feedback.
       </p>
       <div className="space-x-3 text-right text-[17px] font-medium">
-        <button className="rounded-lg bg-[#E4E9F1] px-4 py-2.5 active:opacity-90">
+        <button
+          className="rounded-lg bg-[#E4E9F1] px-4 py-2.5 active:opacity-90"
+          onClick={() => setIsWelcomeSeen(true)}
+        >
           Close
         </button>
-        <button className="rounded-lg bg-[#165FCD] px-4 py-2.5 text-[#FFF] active:opacity-90">
-          Next Tip
-        </button>
+        <Link
+          to="/profile"
+          className="rounded-lg bg-[#165FCD] px-4 py-2.5 text-[#FFF] active:opacity-90"
+          onClick={() => setIsWelcomeSeen(true)}
+        >
+          Go to Profile
+        </Link>
       </div>
     </div>
   );

From 86c5a1ae2a871f8a34fd9297bb78e819f1ca1549 Mon Sep 17 00:00:00 2001
From: Alec Ananian <1013230+alecananian@users.noreply.github.com>
Date: Mon, 20 Nov 2023 15:03:34 -0800
Subject: [PATCH 3/3] only render welcome card on native app

---
 ui/src/nav/MobileRoot.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/nav/MobileRoot.tsx b/ui/src/nav/MobileRoot.tsx
index 345ba4f41c..0a4d95d82b 100644
--- a/ui/src/nav/MobileRoot.tsx
+++ b/ui/src/nav/MobileRoot.tsx
@@ -22,6 +22,7 @@ import AddIconMobileNav from '@/components/icons/AddIconMobileNav';
 import MagnifyingGlass16Icon from '@/components/icons/MagnifyingGlass16Icon';
 import GroupJoinList from '@/groups/GroupJoinList';
 import WelcomeCard from '@/components/WelcomeCard';
+import { isNativeApp } from '@/logic/native';
 
 export default function MobileRoot() {
   const [isScrolling, setIsScrolling] = useState(false);
@@ -75,7 +76,7 @@ export default function MobileRoot() {
       }
     >
       <nav className="flex h-full flex-1 flex-col overflow-y-auto overflow-x-hidden">
-        <WelcomeCard />
+        {isNativeApp() ? <WelcomeCard /> : null}
         <div className="flex-1">
           {sortedGroups.length === 0 && !isLoading ? (
             <div className="mx-4 my-2 rounded-lg bg-indigo-50 p-4 leading-5 text-gray-700 dark:bg-indigo-900/50">