feat: implement create project modal

app/test/page.tsx

@@ -1,80 +1,41 @@
 'use client';
-
 import { useState } from 'react';
-import LaunchCampaignFlow from '@/components/project/LaunchCampaignFlow';
-import BoundlessSheet from '@/components/sheet/boundless-sheet';
-import { Button } from '@/components/ui/button';
-import { Rocket } from 'lucide-react';
-import { useWalletProtection } from '@/hooks/use-wallet-protection';
-import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
-
-export default function TestPage() {
-  const [showLaunchFlow, setShowLaunchFlow] = useState(false);
-
-  // Wallet protection hook
-  const {
-    requireWallet,
-    showWalletModal,
-    handleWalletConnected,
-    closeWalletModal,
-  } = useWalletProtection({
-    actionName: 'test launch campaign',
-  });
-
-  const handleOpenModal = () => {
-    requireWallet(() => setShowLaunchFlow(true));
-  };
-
-  const handleCloseModal = () => {
-    setShowLaunchFlow(false);
+import AuthLoadingState from '@/components/auth/AuthLoadingState';
+import { BoundlessButton } from '@/components/buttons';
+
+export default function TestLoadingPage() {
+  const [showLoading, setShowLoading] = useState(false);
+
+  const handleShowLoading = () => {
+    setShowLoading(true);
+    // Simulate loading for 3 seconds
+    setTimeout(() => {
+      setShowLoading(false);
+    }, 3000);
   };
 
   return (
-    <div className='flex min-h-screen items-center justify-center bg-gray-900'>
-      <div className='space-y-6 text-center'>
-        <h1 className='mb-8 text-4xl font-bold text-white'>
-          Launch Campaign Test
-        </h1>
-
-        <p className='mb-8 text-gray-300'>
-          Click the button below to test the Launch Campaign feature
+    <div className='flex min-h-screen items-center justify-center bg-gray-900 p-4'>
+      <div className='space-y-4 text-center'>
+        <h1 className='text-2xl font-bold text-white'>Loading State Test</h1>
+        <p className='text-gray-300'>
+          Test the animated loading state across different screen sizes
         </p>
 
-        <Button
-          onClick={handleOpenModal}
-          size='lg'
-          className='bg-green-600 px-8 py-4 text-lg text-white hover:bg-green-700'
-        >
-          <Rocket className='mr-2 h-6 w-6' />
-          Test Launch Campaign
-        </Button>
+        <BoundlessButton onClick={handleShowLoading} className='mt-4'>
+          Test Loading State
+        </BoundlessButton>
 
-        {/* Debug info */}
-        <div className='text-sm text-white'>
-          Modal state: {showLaunchFlow ? 'Open' : 'Closed'}
-        </div>
+        {showLoading && <AuthLoadingState message='Testing loading...' />}
 
-        {/* Launch Campaign Flow Modal */}
-        <BoundlessSheet
-          open={showLaunchFlow}
-          setOpen={handleCloseModal}
-          contentClassName='h-full'
-          title='Review Campaign'
-        >
-          <LaunchCampaignFlow
-            projectId='test-project-123'
-            onBack={handleCloseModal}
-            onComplete={handleCloseModal}
-          />
-        </BoundlessSheet>
-
-        {/* Wallet Required Modal */}
-        <WalletRequiredModal
-          open={showWalletModal}
-          onOpenChange={closeWalletModal}
-          actionName='test launch campaign'
-          onWalletConnected={handleWalletConnected}
-        />
+        <div className='mt-8 text-sm text-gray-400'>
+          <p>Test on different screen sizes:</p>
+          <ul className='mt-2 list-inside list-disc space-y-1'>
+            <li>Mobile (320px - 768px)</li>
+            <li>Tablet (768px - 1024px)</li>
+            <li>Desktop (1024px+)</li>
+          </ul>
+        </div>
       </div>
     </div>
   );

components/form/FormHint.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Info } from 'lucide-react';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+
+type FormHintProps = {
+  hint: React.ReactNode;
+  className?: string;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  sideOffset?: number;
+  iconClassName?: string;
+};
+
+export default function FormHint({
+  hint,
+  className,
+  side = 'top',
+  sideOffset = 6,
+  iconClassName,
+}: FormHintProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type='button'
+          aria-label='Field help'
+          className={cn(
+            'inline-flex items-center justify-center rounded text-[#B5B5B5] hover:text-white focus:outline-none',
+            className
+          )}
+        >
+          <Info className={cn('mt-[3px] h-4 w-4', iconClassName)} />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent
+        side={side}
+        sideOffset={sideOffset}
+        className='max-w-sm whitespace-normal'
+      >
+        {hint}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

components/landing-page/navbar.tsx

@@ -199,9 +199,7 @@ export function Navbar() {
             ) : isAuthenticated ? (
               <AuthenticatedNav user={user} />
             ) : (
-              <BoundlessButton>
-                <Link href='/auth'>Get Started</Link>
-              </BoundlessButton>
+              <UnauthenticatedNav />
             )}
           </div>
           <MobileMenu
@@ -360,6 +358,44 @@ function AuthenticatedNav({
   );
 }
 
+// In development, show a lightweight CTA that opens CreateProjectModal
+// even for unauthenticated users, so designers/QA can test the flow.
+function UnauthenticatedNav() {
+  const [createProjectModalOpen, setCreateProjectModalOpen] = useState(false);
+
+  const showDevAddProject =
+    process.env.NODE_ENV !== 'production' &&
+    (process.env.NEXT_PUBLIC_SHOW_ADD_PROJECT_FOR_GUESTS === 'true' || true);
+
+  if (!showDevAddProject) {
+    return (
+      <BoundlessButton>
+        <Link href='/auth'>Get Started</Link>
+      </BoundlessButton>
+    );
+  }
+
+  return (
+    <div className='flex items-center space-x-3'>
+      <BoundlessButton
+        variant='outline'
+        onClick={() => setCreateProjectModalOpen(true)}
+        className='border-white/20 text-white hover:bg-white/10'
+      >
+        <Plus className='mr-2 h-4 w-4' />
+        Add Project
+      </BoundlessButton>
+      <BoundlessButton>
+        <Link href='/auth'>Sign in</Link>
+      </BoundlessButton>
+      <CreateProjectModal
+        open={createProjectModalOpen}
+        setOpen={setCreateProjectModalOpen}
+      />
+    </div>
+  );
+}
+
 function MobileMenu({
   isAuthenticated,
   isLoading,