feat: add DiscordButton component and integrate into Navbar and LandingPage

src/components/DiscordButton.tsx

@@ -0,0 +1,47 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+function DiscordIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12" />
+    </svg>
+  )
+}
+
+interface DiscordButtonProps {
+  variant?: 'default' | 'outline' | 'ghost' | 'link' | 'destructive'
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+  className?: string
+}
+
+export function DiscordButton({
+  variant = 'outline',
+  size,
+  className,
+}: DiscordButtonProps) {
+  return (
+    <a
+      href="https://discord.gg/8KgJpvjfaJ"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Button
+        variant={variant}
+        size={size}
+        className={cn('flex items-center gap-2', className)}
+      >
+        <DiscordIcon className="w-4 h-4" />
+        Discord
+      </Button>
+    </a>
+  )
+}
+

src/components/Navbar.tsx

@@ -1,11 +1,12 @@
 import { useAuthActions } from '@convex-dev/auth/react'
-import { Authenticated, Unauthenticated, useQuery } from 'convex/react'
+import { Authenticated, useQuery } from 'convex/react'
 import { Link } from 'react-router-dom'
 import { Button } from '@/components/ui/button'
+import { DiscordButton } from '@/components/DiscordButton'
 import { api } from '../../convex/_generated/api'
 
 export default function Navbar() {
-  const { signIn, signOut } = useAuthActions()
+  const { signOut } = useAuthActions()
   const isAdmin = useQuery(api.admin.isAdmin)
 
   return (
@@ -46,16 +47,10 @@ export default function Navbar() {
             </div>
           </div>
           <div className="flex items-center gap-4">
-            <Unauthenticated>
-              <Button
-                onClick={() =>
-                  signIn('google', { redirectTo: window.location.href })
-                }
-                className="bg-white text-slate-900 hover:bg-slate-200"
-              >
-                Sign in
-              </Button>
-            </Unauthenticated>
+            <DiscordButton
+              variant="default"
+              className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white border-0 shadow-lg shadow-purple-500/50"
+            />
             <Authenticated>
               <Button variant="outline" onClick={() => signOut()}>
                 Sign Out

src/pages/LandingPage.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom'
 import { Button } from '@/components/ui/button'
+import { DiscordButton } from '@/components/DiscordButton'
 
 function QuickBuildIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
@@ -45,6 +46,11 @@ export default function LandingPage() {
               <QuickBuildIcon className="mr-2 h-5 w-5" />
               Quick Build
             </Button>
+            <DiscordButton
+              size="lg"
+              variant="default"
+              className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white border-0 shadow-lg shadow-purple-500/50"
+            />
           </div>
 
           {/* Benefits Grid */}