Support page feature

src/app/(mobile-ui)/layout.tsx

@@ -21,7 +21,8 @@ import { useEffect, useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import '../../styles/globals.css'
 
-const publicPathRegex = /^\/(request\/pay|claim|pay\/.+$)/
+// Allow access to some public paths without authentication
+const publicPathRegex = /^\/(request\/pay|claim|pay\/.+$|support)/
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
     const pathName = usePathname()
@@ -80,7 +81,10 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         }
     }, [])
 
-    if (!isReady || (isFetchingUser && !user && !hasToken)) {
+    // Allow access to public paths without authentication
+    const isPublicPath = publicPathRegex.test(pathName)
+
+    if (!isReady || (isFetchingUser && !user && !hasToken && !isPublicPath)) {
         return (
             <div className="flex h-[100dvh] w-full flex-col items-center justify-center">
                 <PeanutLoading />

src/app/[...recipient]/error.tsx

@@ -2,8 +2,11 @@
 
 import { Button, Card } from '@/components/0_Bruddle'
 import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 
 export default function PaymentError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+    const router = useRouter()
+
     useEffect(() => {
         console.error(error)
     }, [error])
@@ -16,10 +19,13 @@ export default function PaymentError({ error, reset }: { error: Error & { digest
                     {error.message || 'An error occurred while loading the payment page.'}
                 </Card.Description>
             </Card.Header>
-            <Card.Content>
+            <Card.Content className="flex flex-col gap-3">
                 <Button onClick={reset} variant="purple">
                     Try again
                 </Button>
+                <Button onClick={() => router.push('/support')} variant="transparent" className="text-sm underline">
+                    Contact Support
+                </Button>
             </Card.Content>
         </Card>
     )

src/components/LandingPage/Footer.tsx

@@ -57,6 +57,9 @@ const Footer = () => {
                 </div>
 
                 <div className="flex gap-2">
+                    <a className="text-xl font-bold text-white" href="/support">
+                        Support
+                    </a>
                     <a
                         className="text-xl font-bold text-white"
                         href="https://docs.peanut.me/"
@@ -65,14 +68,6 @@ const Footer = () => {
                     >
                         Docs
                     </a>
-                    <a
-                        className="text-xl font-bold text-white"
-                        href="https://peanutprotocol.notion.site/Privacy-Policy-37debda366c941f2bbb8db8c113d8c8b"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                    >
-                        Privacy
-                    </a>
                     <a
                         className="text-xl font-bold text-white"
                         href="https://peanutprotocol.notion.site/Terms-of-Service-Privacy-Policy-1f245331837f4b7e860261be8374cc3a"

src/components/LandingPage/securityBuiltIn.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import { Button } from '@/components/0_Bruddle'
 import handThumbsUp from '@/assets/illustrations/hand-thumbs-up.svg'
 import handWaving from '@/assets/illustrations/hand-waving.svg'
 import handPeace from '@/assets/illustrations/hand-peace.svg'
@@ -81,6 +82,18 @@ export function SecurityBuiltIn() {
                                 >
                                     {feature.description}
                                 </p>
+                                {feature.id === 3 && (
+                                    <div className="mt-6">
+                                        <a href="/support">
+                                            <Button
+                                                shadowSize="4"
+                                                className="bg-white px-6 py-3 text-base font-extrabold text-n-1 hover:bg-white/90"
+                                            >
+                                                Talk to Support
+                                            </Button>
+                                        </a>
+                                    </div>
+                                )}
                             </div>
                         </div>
                     ))}