Create “Become a Host” Placeholder Page

[respp]

🏷️ Context: Guest/Host Role System

We’re implementing a dual-role system where users can have two profiles:

• Guest (Tenant): Users who search and book properties
• Host: Users who list and manage properties
• Dual: Users who can be both at the same time

Role Flow:

1. All users start as Guest by default

2. To become a Host, they must complete the “Become a Host” flow

3. Dashboard access depends on role:

   • Guest Dashboard: Always accessible (bookings, profile, wallet)
   • Host Dashboard: Only if hostStatus === 'verified' and they have properties

Architecture:

• Reuse 90% of the existing codebase (components, hooks, services)
• Add role logic on top of the current infrastructure
• Do not change existing dashboard components (they already work)

References:

• Existing auth system: hooks/auth/use-auth.tsx
• Current dashboards: /tenant-dashboard (guest) and /dashboard/host-dashboard (host)
• Reusable components: components/dashboard/*

---

📌 Task: Create basic “Become a Host” landing page

Goal: Temporary page for guest users who want to become hosts.

Files to create:

• apps/web/src/app/become-host/page.tsx

Implementation:

Note: The snippet below is a helper scaffold and should NOT be treated as the final implementation. Replace copy, layout, and flows with your verified onboarding spec.

// apps/web/src/app/become-host/page.tsx
export default function BecomeHostPage() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <div className="max-w-2xl text-center">
        <h1 className="text-4xl font-bold mb-4">Become a Host</h1>
        <p className="text-xl text-gray-600 mb-8">
          Start earning by sharing your property on StellarRent
        </p>

        <div className="bg-yellow-50 border-2 border-yellow-200 rounded-lg p-6 mb-8">
          <p className="text-yellow-800 font-medium">🚧 Onboarding flow coming soon!</p>
          <p className="text-sm text-yellow-700 mt-2">
            For now, this is a placeholder. The complete verification and property listing
            process will be implemented in Phase 2.
          </p>
        </div>

        <div className="space-y-4">
          <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
            <h3 className="font-bold mb-2">✓ Identity Verification</h3>
            <p className="text-sm text-gray-600">Coming soon</p>
          </div>

          <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
            <h3 className="font-bold mb-2">✓ Payment Setup</h3>
            <p className="text-sm text-gray-600">Coming soon</p>
          </div>

          <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
            <h3 className="font-bold mb-2">✓ List Your Property</h3>
            <p className="text-sm text-gray-600">Coming soon</p>
          </div>
        </div>
      </div>
    </div>
  );
}

Acceptance Criteria:

• /become-host is accessible
• Responsive design
• Shows onboarding steps (placeholder)
• No TypeScript errors

[AABams-Dev]

I’d like to take on this issue by building a responsive “Become a Host” landing page at become-host that clearly outlines the onboarding steps with placeholder content, while reusing the existing codebase to keep things clean and consistent. I have strong experience with React, Next.js, and TailwindCSS, and I’ve previously implemented role-based dashboards and onboarding flows, so I can deliver a solution that meets the acceptance criteria, avoids TypeScript errors, and sets a solid foundation for the full verification and property listing process in Phase 2.

[Yunusabdul38]

can i work on this

Recommended by OnlyDust for exceptional experience, quality, and reliability.

[respp]

@AABams-Dev the issue is yours