FM / become-specialist

/opt/canhelp/apps/web/src/app/become-specialist/

/opt/canhelp/apps/web/src/app/become-specialist

Name	Size	Mode	Actions
page.tsx	4563	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/app/become-specialist/page.tsx (4563B)

'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { useSession } from '@/lib/auth'
import { useLocale } from '@/context/locale'
import { request } from '@/lib/api'

export default function BecomeSpecialistPage() {
  const { data: session, isPending } = useSession()
  const router = useRouter()
  const { t } = useLocale()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

async function handleBecome() {
    setLoading(true)
    setError('')
    try {
      await request<any>('/users/me/offer-help', { method: 'POST' })
      router.push('/specialist-setup')
    } catch {
      setError(t('common.error'))
      setLoading(false)
    }
  }

if (isPending) {
    return <div className="text-center py-20 text-white">{t('common.loading')}</div>
  }

const steps = [
    { n: 1, title: t('become_specialist.step1.title'), desc: t('become_specialist.step1.desc'), icon: '🗂️' },
    { n: 2, title: t('become_specialist.step2.title'), desc: t('become_specialist.step2.desc'), icon: '🔍' },
    { n: 3, title: t('become_specialist.step3.title'), desc: t('become_specialist.step3.desc'), icon: '💰' },
  ]

const benefits = [
    { icon: '🎯', text: t('become_specialist.benefit1') },
    { icon: '⭐', text: t('become_specialist.benefit2') },
    { icon: '📅', text: t('become_specialist.benefit3') },
    { icon: '❤️', text: t('become_specialist.benefit4') },
  ]

return (
    <div>
      {/* Hero */}
      <section className="bg-gradient-to-br from-green-700 to-green-600 text-white py-20 px-4">
        <div className="max-w-3xl mx-auto text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">
            {t('become_specialist.hero.title')}
          </h1>
          <p className="text-xl text-green-100 mb-8">
            {t('become_specialist.hero.subtitle')}
          </p>
        </div>
      </section>

{/* How it works */}
      <section className="max-w-4xl mx-auto px-4 py-16">
        <h2 className="text-2xl font-bold text-white mb-10 text-center">
          {t('become_specialist.how.title')}
        </h2>
        <div className="grid md:grid-cols-3 gap-8">
          {steps.map((step) => (
            <div key={step.n} className="text-center">
              <div className="w-14 h-14 bg-green-50 border-2 border-green-200 rounded-2xl flex items-center justify-center text-2xl mx-auto mb-4">
                {step.icon}
              </div>
              <div className="w-7 h-7 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-bold mx-auto -mt-1 mb-3">
                {step.n}
              </div>
              <h3 className="font-semibold text-white text-lg mb-2">{step.title}</h3>
              <p className="text-green-100 text-sm leading-relaxed">{step.desc}</p>
            </div>
          ))}
        </div>
      </section>

{/* Benefits */}
      <section className="bg-gray-50 py-14 px-4">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
            {t('become_specialist.benefits.title')}
          </h2>
          <div className="grid sm:grid-cols-2 gap-4">
            {benefits.map((b, i) => (
              <div key={i} className="flex items-start gap-4 bg-white rounded-xl border border-gray-200 p-5">
                <span className="text-2xl shrink-0">{b.icon}</span>
                <p className="text-gray-700 font-medium leading-snug">{b.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* CTA */}
      <section className="py-16 px-4 text-center">
        <div className="max-w-md mx-auto">
          {error && (
            <p className="text-red-500 text-sm mb-4">{error}</p>
          )}
          {session ? (
            <button
              onClick={handleBecome}
              disabled={loading}
              className="w-full bg-green-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-green-700 disabled:opacity-60 transition"
            >
              {loading ? t('common.loading') : t('profile.become_specialist')}
            </button>
          ) : (
            <a
              href="/register"
              className="block w-full bg-green-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-green-700 transition text-center"
            >
              {t('profile.become_specialist')}
            </a>
          )}
        </div>
      </section>
    </div>
  )
}

cmd: