From f6033bf5d0cecfc97aacd8b6088a1ef551a91c1f Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 22 Aug 2024 20:32:36 +0200
Subject: [PATCH 1/3] feat: add join profile action card

---
 .../(marketing)/profile/[username]/page.tsx   |  2 ++
 .../profile/_components/JoinProfileAction.tsx | 29 +++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/app/(marketing)/profile/_components/JoinProfileAction.tsx

diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx
index 03741037d9..e854620bc8 100644
--- a/src/app/(marketing)/profile/[username]/page.tsx
+++ b/src/app/(marketing)/profile/[username]/page.tsx
@@ -13,6 +13,7 @@ import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
 import { env } from "env"
 import Image from "next/image"
 import { notFound, redirect } from "next/navigation"
+import { JoinProfileAction } from "../_components/JoinProfileAction"
 import { Profile } from "../_components/Profile"
 import { ProfileColorBanner } from "../_components/ProfileColorBanner"
 
@@ -144,6 +145,7 @@ const Page = async ({ params: { username } }: { params: { username: string } })
           </p>
         </LayoutFooter>
       </Layout>
+      <JoinProfileAction />
     </SWRProvider>
   )
 }
diff --git a/src/app/(marketing)/profile/_components/JoinProfileAction.tsx b/src/app/(marketing)/profile/_components/JoinProfileAction.tsx
new file mode 100644
index 0000000000..b220077f4a
--- /dev/null
+++ b/src/app/(marketing)/profile/_components/JoinProfileAction.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { Anchor } from "@/components/ui/Anchor"
+import { Card } from "@/components/ui/Card"
+import { REFERRER_USER_SEARCH_PARAM_KEY } from "@app/(marketing)/create-profile/(onboarding)/constants"
+import { ArrowRight } from "@phosphor-icons/react"
+import { useProfile } from "../_hooks/useProfile"
+
+export const JoinProfileAction = () => {
+  const profile = useProfile()
+  if (!profile.data) {
+    return
+  }
+  return (
+    <Anchor
+      className="fixed bottom-8 flex w-full justify-center px-8"
+      variant="unstyled"
+      href={`/create-profile/claim-pass?${REFERRER_USER_SEARCH_PARAM_KEY}=${profile.data.username}`}
+    >
+      <Card className="max-w-sm border border-pink-500 px-7 py-5 text-center sm:text-lg">
+        Join{" "}
+        <span className="font-bold text-primary">
+          {profile.data.name || profile.data.username}
+        </span>{" "}
+        on their adventure <ArrowRight weight="bold" className="ml-1 inline-block" />
+      </Card>
+    </Anchor>
+  )
+}

From 60dc9e4ce8457c424804d5e419e52000d355b583 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Fri, 23 Aug 2024 18:17:24 +0200
Subject: [PATCH 2/3] feat: add mountain icon and restrict card popup

---
 .../profile/_components/JoinProfileAction.tsx | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/JoinProfileAction.tsx b/src/app/(marketing)/profile/_components/JoinProfileAction.tsx
index b220077f4a..d0ba57849e 100644
--- a/src/app/(marketing)/profile/_components/JoinProfileAction.tsx
+++ b/src/app/(marketing)/profile/_components/JoinProfileAction.tsx
@@ -3,27 +3,45 @@
 import { Anchor } from "@/components/ui/Anchor"
 import { Card } from "@/components/ui/Card"
 import { REFERRER_USER_SEARCH_PARAM_KEY } from "@app/(marketing)/create-profile/(onboarding)/constants"
-import { ArrowRight } from "@phosphor-icons/react"
+import { ArrowRight, Mountains } from "@phosphor-icons/react"
+import useUser from "components/[guild]/hooks/useUser"
 import { useProfile } from "../_hooks/useProfile"
 
 export const JoinProfileAction = () => {
   const profile = useProfile()
-  if (!profile.data) {
+  const user = useUser()
+  if (!profile.data || user.guildProfile) {
     return
   }
   return (
-    <Anchor
-      className="fixed bottom-8 flex w-full justify-center px-8"
-      variant="unstyled"
-      href={`/create-profile/claim-pass?${REFERRER_USER_SEARCH_PARAM_KEY}=${profile.data.username}`}
-    >
-      <Card className="max-w-sm border border-pink-500 px-7 py-5 text-center sm:text-lg">
-        Join{" "}
-        <span className="font-bold text-primary">
-          {profile.data.name || profile.data.username}
-        </span>{" "}
-        on their adventure <ArrowRight weight="bold" className="ml-1 inline-block" />
-      </Card>
-    </Anchor>
+    <div className="fixed bottom-8 flex w-full justify-center px-4">
+      <Anchor
+        variant="unstyled"
+        className="rounded-2xl"
+        href={`/create-profile/claim-pass?${REFERRER_USER_SEARCH_PARAM_KEY}=${profile.data.username}`}
+      >
+        <Card
+          className="slide-in-from-bottom fade-in max-w-md animate-in border border-transparent font-medium leading-tight duration-700"
+          style={{
+            background:
+              "padding-box linear-gradient(hsl(var(--card-secondary)), hsl(var(--card-secondary))), border-box linear-gradient(45deg, hsl(var(--primary)), violet, yellow, orange)",
+          }}
+        >
+          <div className="flex items-center gap-3 p-4">
+            <div className="flex aspect-square items-center justify-center rounded-2xl border bg-card p-2">
+              <Mountains className="size-5" weight="fill" />
+            </div>
+            <div className="text-pretty">
+              Join{" "}
+              <span className="font-extrabold text-primary-subtle">
+                {profile.data.name || profile.data.username}
+              </span>{" "}
+              on their adventure
+              <ArrowRight weight="bold" className="ml-2 inline size-4" />
+            </div>
+          </div>
+        </Card>
+      </Anchor>
+    </div>
   )
 }

From 4dce736166f466f9c1de7af135cbc1724b84b08a Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Mon, 26 Aug 2024 12:35:09 +0200
Subject: [PATCH 3/3] chore: prevent pointer event overlay

---
 .../profile/_components/JoinProfileAction.tsx | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/JoinProfileAction.tsx b/src/app/(marketing)/profile/_components/JoinProfileAction.tsx
index d0ba57849e..d2f304486d 100644
--- a/src/app/(marketing)/profile/_components/JoinProfileAction.tsx
+++ b/src/app/(marketing)/profile/_components/JoinProfileAction.tsx
@@ -14,31 +14,29 @@ export const JoinProfileAction = () => {
     return
   }
   return (
-    <div className="fixed bottom-8 flex w-full justify-center px-4">
+    <div className="pointer-events-none fixed bottom-6 flex w-full justify-center px-4">
       <Anchor
         variant="unstyled"
-        className="rounded-2xl"
+        className="slide-in-from-bottom fade-in pointer-events-auto animate-in rounded-2xl duration-700"
         href={`/create-profile/claim-pass?${REFERRER_USER_SEARCH_PARAM_KEY}=${profile.data.username}`}
       >
         <Card
-          className="slide-in-from-bottom fade-in max-w-md animate-in border border-transparent font-medium leading-tight duration-700"
+          className="flex max-w-md items-center gap-3 border border-transparent p-4 font-medium leading-tight"
           style={{
             background:
               "padding-box linear-gradient(hsl(var(--card-secondary)), hsl(var(--card-secondary))), border-box linear-gradient(45deg, hsl(var(--primary)), violet, yellow, orange)",
           }}
         >
-          <div className="flex items-center gap-3 p-4">
-            <div className="flex aspect-square items-center justify-center rounded-2xl border bg-card p-2">
-              <Mountains className="size-5" weight="fill" />
-            </div>
-            <div className="text-pretty">
-              Join{" "}
-              <span className="font-extrabold text-primary-subtle">
-                {profile.data.name || profile.data.username}
-              </span>{" "}
-              on their adventure
-              <ArrowRight weight="bold" className="ml-2 inline size-4" />
-            </div>
+          <div className="flex aspect-square items-center justify-center rounded-2xl border bg-card p-2">
+            <Mountains className="size-5" weight="fill" />
+          </div>
+          <div className="text-pretty">
+            Join{" "}
+            <span className="font-extrabold text-primary-subtle">
+              {profile.data.name || profile.data.username}
+            </span>{" "}
+            on their adventure
+            <ArrowRight weight="bold" className="ml-2 inline size-4" />
           </div>
         </Card>
       </Anchor>