From 61600feed9b73ff03d551c49f215d621614f2dff Mon Sep 17 00:00:00 2001
From: waleedlatif1 <walif6@gmail.com>
Date: Sat, 20 Sep 2025 14:31:55 -0700
Subject: [PATCH 1/2] feat(404): added 404 page

---
 .../sim/app/invite/components/status-card.tsx |  5 --
 apps/sim/app/not-found.tsx                    | 88 +++++++++++++++++++
 2 files changed, 88 insertions(+), 5 deletions(-)
 create mode 100644 apps/sim/app/not-found.tsx

diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index 12b23bcef1..01c9aa5d77 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -116,11 +116,6 @@ export function InviteStatusCard({
   return (
     <div className={`${soehne.className} space-y-6`}>
       <div className='space-y-1 text-center'>
-        {IconComponent && (
-          <div className={`mx-auto mb-4 w-fit rounded-full p-3 ${iconBg}`}>
-            <IconComponent className={`h-8 w-8 ${iconColor}`} />
-          </div>
-        )}
         <h1 className='font-medium text-[32px] text-black tracking-tight'>{title}</h1>
         <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
           {description}
diff --git a/apps/sim/app/not-found.tsx b/apps/sim/app/not-found.tsx
new file mode 100644
index 0000000000..7ec2c4e4be
--- /dev/null
+++ b/apps/sim/app/not-found.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import AuthBackground from '@/app/(auth)/components/auth-background'
+import Nav from '@/app/(landing)/components/nav/nav'
+
+function isColorDark(hexColor: string): boolean {
+  const hex = hexColor.replace('#', '')
+  const r = Number.parseInt(hex.substring(0, 2), 16)
+  const g = Number.parseInt(hex.substring(2, 4), 16)
+  const b = Number.parseInt(hex.substring(4, 6), 16)
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  return luminance < 0.5
+}
+
+export default function NotFound() {
+  const [buttonClass, setButtonClass] = useState('auth-button-gradient')
+
+  useEffect(() => {
+    const rootStyle = getComputedStyle(document.documentElement)
+    const brandBackground = rootStyle.getPropertyValue('--brand-background-hex').trim()
+
+    if (brandBackground && isColorDark(brandBackground)) {
+      document.body.classList.add('auth-dark-bg')
+    } else {
+      document.body.classList.remove('auth-dark-bg')
+    }
+  }, [])
+
+  useEffect(() => {
+    const checkCustomBrand = () => {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const brandAccent = computedStyle.getPropertyValue('--brand-accent-hex').trim()
+      if (brandAccent && brandAccent !== '#6f3dfa') {
+        setButtonClass('auth-button-custom')
+      } else {
+        setButtonClass('auth-button-gradient')
+      }
+    }
+    checkCustomBrand()
+    window.addEventListener('resize', checkCustomBrand)
+    const observer = new MutationObserver(checkCustomBrand)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    })
+    return () => {
+      window.removeEventListener('resize', checkCustomBrand)
+      observer.disconnect()
+    }
+  }, [])
+
+  return (
+    <AuthBackground>
+      <main className='relative flex min-h-screen flex-col font-geist-sans text-foreground'>
+        {/* Header */}
+        <Nav hideAuthButtons={true} variant='auth' />
+
+        {/* Content */}
+        <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
+          <div className='text-center'>
+            <div className='mb-4 font-bold text-8xl text-foreground'>404</div>
+            <div className='mb-8'>
+              <Button
+                asChild
+                className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
+              >
+                <Link href='/'>Back to Workspace</Link>
+              </Button>
+            </div>
+
+            <div className='text-center text-muted-foreground text-sm'>
+              Need help?{' '}
+              <a
+                href='mailto:help@sim.ai'
+                className='underline-offset-4 transition hover:underline'
+              >
+                Contact support
+              </a>
+            </div>
+          </div>
+        </div>
+      </main>
+    </AuthBackground>
+  )
+}

From 7d0b8747bda79c9b454ff33ca630d97e5561f91d Mon Sep 17 00:00:00 2001
From: waleedlatif1 <walif6@gmail.com>
Date: Sat, 20 Sep 2025 14:35:12 -0700
Subject: [PATCH 2/2] use provided brand support email over default sim one

---
 apps/sim/app/invite/components/status-card.tsx | 4 +++-
 apps/sim/app/not-found.tsx                     | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index 01c9aa5d77..f61c3c486c 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -5,6 +5,7 @@ import { CheckCircle2, Mail, RotateCcw, ShieldX, UserPlus, Users2 } from 'lucide
 import { useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { LoadingAgent } from '@/components/ui/loading-agent'
+import { useBrandConfig } from '@/lib/branding/branding'
 import { inter } from '@/app/fonts/inter'
 import { soehne } from '@/app/fonts/soehne/soehne'
 
@@ -57,6 +58,7 @@ export function InviteStatusCard({
 }: InviteStatusCardProps) {
   const router = useRouter()
   const [buttonClass, setButtonClass] = useState('auth-button-gradient')
+  const brandConfig = useBrandConfig()
 
   useEffect(() => {
     const checkCustomBrand = () => {
@@ -167,7 +169,7 @@ export function InviteStatusCard({
       >
         Need help?{' '}
         <a
-          href='mailto:help@sim.ai'
+          href={`mailto:${brandConfig.supportEmail}`}
           className='auth-link underline-offset-4 transition hover:underline'
         >
           Contact support
diff --git a/apps/sim/app/not-found.tsx b/apps/sim/app/not-found.tsx
index 7ec2c4e4be..8c6792019c 100644
--- a/apps/sim/app/not-found.tsx
+++ b/apps/sim/app/not-found.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { Button } from '@/components/ui/button'
+import { useBrandConfig } from '@/lib/branding/branding'
 import AuthBackground from '@/app/(auth)/components/auth-background'
 import Nav from '@/app/(landing)/components/nav/nav'
 
@@ -17,6 +18,7 @@ function isColorDark(hexColor: string): boolean {
 
 export default function NotFound() {
   const [buttonClass, setButtonClass] = useState('auth-button-gradient')
+  const brandConfig = useBrandConfig()
 
   useEffect(() => {
     const rootStyle = getComputedStyle(document.documentElement)
@@ -74,7 +76,7 @@ export default function NotFound() {
             <div className='text-center text-muted-foreground text-sm'>
               Need help?{' '}
               <a
-                href='mailto:help@sim.ai'
+                href={`mailto:${brandConfig.supportEmail}`}
                 className='underline-offset-4 transition hover:underline'
               >
                 Contact support