/opt/canhelp/apps/web/src/app

Name	Size	Mode	Actions
(auth)/	-	0755	rm
admin/	-	0755	rm
become-specialist/	-	0755	rm
chat/	-	0755	rm
dashboard/	-	0755	rm
delete-account/	-	0755	rm
favorites/	-	0755	rm
maintenance/	-	0755	rm
notifications/	-	0755	rm
payment/	-	0755	rm
pricing/	-	0755	rm
privacy/	-	0755	rm
profile/	-	0755	rm
schedule/	-	0755	rm
site/	-	0755	rm
specialist-setup/	-	0755	rm
specialist-tasks/	-	0755	rm
specialists/	-	0755	rm
support/	-	0755	rm
tasks/	-	0755	rm
users/	-	0755	rm
apple-icon.png	62605	0644	edit dl rm
globals.css	9543	0644	edit dl rm
icon.png	62605	0644	edit dl rm
icon.svg	4882	0644	edit dl rm
layout.tsx	4345	0644	edit dl rm
not-found.tsx	550	0644	edit dl rm
page.tsx	24337	0644	edit dl rm
robots.ts	789	0644	edit dl rm
sitemap.ts	3664	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/app/page.tsx (24337B)

export default async function HomePage() {
  const cookieStore = await cookies()
  const rawLocale = cookieStore.get('canhelp_locale')?.value as Locale | undefined
  const locale: Locale = ['el', 'en', 'uk', 'ru'].includes(rawLocale ?? '') ? rawLocale! : 'el'
  const t = getTranslations(locale)

// Determine user role server-side
  const INTERNAL = process.env.INTERNAL_API_URL || 'http://localhost:4000'
  const cookieHeader = cookieStore.getAll().map((c) => `${c.name}=${c.value}`).join('; ')
  let userRole: string | null = null
  try {
    const sessRes = await fetch(`${INTERNAL}/api/auth/get-session`, {
      headers: { Cookie: cookieHeader },
    })
    if (sessRes.ok) {
      const sess = await sessRes.json()
      userRole = sess?.user?.role ?? null
    }
  } catch {}

// Admin can override the role for preview purposes via cookie
  const previewRole = cookieStore.get('canhelp_preview_role')?.value
  const effectiveRole = (userRole === 'admin' && previewRole) ? previewRole : userRole
  const isSpecialist = effectiveRole === 'specialist'

let categories: Category[] = []
  let locationTree: any[] = []
  let platformStats = { specialistCount: 0, taskCount: 0, categoryCount: 0 }

try {
    ;[categories, locationTree] = await Promise.all([getCategories(), getLocations()])
  } catch {}

try {
    const statsRes = await fetch(`${INTERNAL}/api/stats`, { next: { revalidate: 600 } })
    if (statsRes.ok) platformStats = await statsRes.json()
  } catch {}

return (
    <div>
      {/* Hero */}
      <section className="hero-bg-animated py-24 px-4 overflow-hidden border-b border-slate-200 shadow-xl mb-0 relative">
        <div className="absolute inset-0 pointer-events-none" aria-hidden="true" style={{background: 'radial-gradient(ellipse at 40% 40%, rgba(74,222,128,0.15) 0%, rgba(22,163,74,0.08) 60%, transparent 100%)'}} />
        <HeroFloatingIcons />
        <div className="max-w-3xl mx-auto flex flex-col items-center text-center relative z-10">
            <div className="bg-white rounded-[2.5rem] shadow-2xl p-10 md:p-14 flex flex-col items-center w-full" style={{boxShadow:'0 8px 48px 0 rgba(22,163,74,0.18), 0 1.5px 8px 0 rgba(74,222,128,0.12)'}}>
            <h1 className="text-5xl md:text-6xl font-extrabold mb-4 leading-tight text-gray-900 drop-shadow-lg tracking-tight" style={{letterSpacing:'-0.02em'}}>
              {isSpecialist ? t('hero.specialist.title') : t('hero.title')}
            </h1>
            <p className="text-xl text-green-700 mb-8 drop-shadow font-medium" style={{textShadow:'0 2px 8px rgba(96,165,250,0.10)'}}>
              {isSpecialist ? t('hero.specialist.subtitle') : t('hero.subtitle')}
            </p>
            <HeroSearch
              placeholder={isSpecialist ? t('hero.specialist.search.placeholder') : t('hero.search.placeholder')}
              mode={isSpecialist ? 'specialist' : 'customer'}
            />
            <div className="flex flex-col sm:flex-row gap-4 w-full justify-center">
              {isSpecialist ? (
                <>
                  <Link href="/tasks" className="btn-accent w-full sm:w-auto text-center text-lg">
                    {t('hero.specialist.cta')}
                  </Link>
                  <Link href="/dashboard" className="btn-outline w-full sm:w-auto text-center">
                    {t('nav.dashboard')}
                  </Link>
                </>
              ) : (
                <>
                  <Link href="/tasks/new" className="btn-accent w-full sm:w-auto text-center text-lg">
                    {t('hero.cta.post')}
                  </Link>
                  <BecomeSpecialistButton />
                  <Link href="/tasks" className="btn-outline w-full sm:w-auto text-center">
                    {t('hero.cta.specialists')}
                  </Link>
                </>
              )}
            </div>
          </div>
        </div>
      </section>

{/* Stats strip */}
      <div className="bg-white border-b border-green-100 py-6 mb-10">
        <div className="max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6 px-6 text-center">
          <div>
            <div className="text-3xl font-extrabold text-green-700">{platformStats.specialistCount > 0 ? platformStats.specialistCount : '—'}</div>
            <div className="text-sm text-gray-500 font-medium mt-0.5">{t('stats.specialists')}</div>
          </div>
          <div>
            <div className="text-3xl font-extrabold text-green-700">{platformStats.taskCount > 0 ? platformStats.taskCount : '—'}</div>
            <div className="text-sm text-gray-500 font-medium mt-0.5">{t('stats.tasks')}</div>
          </div>
          <div>
            <div className="text-3xl font-extrabold text-green-700">{platformStats.categoryCount > 0 ? platformStats.categoryCount : '—'}</div>
            <div className="text-sm text-gray-500 font-medium mt-0.5">{t('stats.categories')}</div>
          </div>
          <div>
            <div className="text-3xl font-extrabold text-green-600">✓</div>
            <div className="text-sm text-gray-500 font-medium mt-0.5">{t('stats.free')}</div>
          </div>
        </div>
      </div>

{/* Promo countdown — only for guests */}
      {!userRole && (
        <div className="max-w-3xl mx-auto px-4 py-10">
          <PromoCountdown
            title={t('promo.title')}
            subtitle={t('promo.subtitle')}
            cta={t('promo.cta')}
            days={t('promo.days')}
            hours={t('promo.hours')}
            minutes={t('promo.minutes')}
            seconds={t('promo.seconds')}
          />
        </div>
      )}

{/* Categories */}
      <Section>
        <h2 className="text-4xl font-extrabold text-gray-900 mb-10 text-center tracking-tight drop-shadow-lg">
          {isSpecialist ? t('section.categories.specialist') : t('section.categories')}
        </h2>
        <HomeCategoryGrid
          categories={categories}
          locale={locale}
          isSpecialist={isSpecialist}
          allInLabel={t('tasks.category.all_in')}
          categoryLabel={t('create.field.category')}
          selectLabel={t('create.field.category.select')}
          cancelLabel={t('common.cancel')}
        />
      </Section>

{/* How it works */}
      <Section className="bg-green-50/60">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-4xl font-extrabold text-gray-900 mb-12 text-center tracking-tight drop-shadow-lg">{t('section.how')}</h2>
          <div className="grid md:grid-cols-3 gap-10">
            {([1, 2, 3] as const).map((n) => (
              <div key={n} className="modern-card text-center py-10 px-4 flex flex-col items-center shadow-md hover:shadow-xl transition-all duration-200">
                <div className="w-14 h-14 bg-gradient-to-br from-green-600 to-green-400 text-white rounded-full flex items-center justify-center text-2xl font-extrabold mb-5 shadow-lg">
                  {n}
                </div>
                <h3 className="font-bold text-gray-900 text-xl mb-3 tracking-tight">
                  {isSpecialist ? t(`how.specialist.step${n}.title`) : t(`how.step${n}.title`)}
                </h3>
                <p className="text-green-700 text-base leading-relaxed">
                  {isSpecialist ? t(`how.specialist.step${n}.desc`) : t(`how.step${n}.desc`)}
                </p>
              </div>
            ))}
          </div>
        </div>
      </Section>

{/* Specialist promo — only shown to customers / guests */}
      {!isSpecialist && (
      <Section className="bg-white/60 backdrop-blur-xl">
        <div className="max-w-6xl mx-auto">
          <div className="section-contrast shadow-2xl border-0 bg-white/80 backdrop-blur-xl p-10 md:p-14 flex flex-col items-start">
            <span className="inline-block bg-green-100 text-green-700 text-base font-semibold px-5 py-2 rounded-full mb-5 tracking-wide">
              {t('become_specialist.free_badge')}
            </span>
            <h2 className="text-4xl md:text-5xl font-extrabold mb-6 text-gray-900 drop-shadow-lg tracking-tight">{t('become_specialist.hero.title')}</h2>
            <p className="text-2xl text-green-700 mb-10 font-medium">{t('become_specialist.hero.subtitle')}</p>

<div className="space-y-6 mb-10 w-full">
              {([1, 2, 3] as const).map((n) => (
                <div key={n} className="flex items-start gap-5">
                  <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-full flex items-center justify-center text-lg font-extrabold shrink-0 mt-0.5 shadow-lg">
                    {n}
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900 text-lg">{t(`become_specialist.step${n}.title`)}</h3>
                    <p className="text-green-700 text-base">{t(`become_specialist.step${n}.desc`)}</p>
                  </div>
                </div>
              ))}
            </div>

<div className="flex flex-wrap gap-3 mb-10">
              {([1, 2, 3, 4] as const).map((n) => (
                <span key={n} className="inline-flex items-center gap-1.5 bg-green-50 text-green-700 px-4 py-2 rounded-full text-sm font-medium">
                  ✓ {t(`become_specialist.benefit${n}`)}
                </span>
              ))}
            </div>

<Link
              href="/become-specialist"
              className="btn-accent text-center text-lg w-full sm:w-auto"
            >
              {t('become_specialist.cta')}
            </Link>
          </div>
        </div>
      </Section>
      )}

{/* Community / Share section */}
      <Section className="bg-green-50/60">
        <div className="max-w-5xl mx-auto text-center">
          <CommunityArt className="w-56 mx-auto mb-10" />
          <h2 className="text-4xl font-extrabold mb-6 text-gray-900 drop-shadow-lg tracking-tight">{t('section.community')}</h2>
          <p className="text-xl text-green-700 max-w-2xl mx-auto mb-14 font-medium">{t('community.subtitle')}</p>

<div className="grid md:grid-cols-3 gap-8 mb-14">
            <div className="modern-card p-8 text-left shadow-md hover:shadow-xl transition-all duration-200">
              <div className="text-4xl mb-4" style={{color:'var(--blue-main)'}}>🛠️</div>
              <h3 className="font-bold text-gray-900 text-lg mb-3">{t('community.point1.title')}</h3>
              <p className="text-green-700 text-base leading-relaxed">{t('community.point1.desc')}</p>
            </div>
            <div className="modern-card p-8 text-left shadow-md hover:shadow-xl transition-all duration-200">
              <div className="text-4xl mb-4" style={{color:'var(--blue-main)'}}>🙋</div>
              <h3 className="font-bold text-gray-900 text-lg mb-3">{t('community.point2.title')}</h3>
              <p className="text-green-700 text-base leading-relaxed">{t('community.point2.desc')}</p>
            </div>
            <div className="modern-card p-8 text-left shadow-md hover:shadow-xl transition-all duration-200">
              <div className="text-4xl mb-4" style={{color:'var(--blue-main)'}}>🌱</div>
              <h3 className="font-bold text-gray-900 text-lg mb-3">{t('community.point3.title')}</h3>
              <p className="text-green-700 text-base leading-relaxed">{t('community.point3.desc')}</p>
            </div>
          </div>

{/* Referral / Partner Program */}
      <Section className="bg-white/60 backdrop-blur-xl">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <span className="inline-block bg-green-100 text-green-700 text-sm font-semibold px-4 py-1.5 rounded-full mb-4">
              {t('referral.home.badge')}
            </span>
            <h2 className="text-4xl font-extrabold text-gray-900 mb-4 tracking-tight drop-shadow-lg">
              {t('section.referral')}
            </h2>
            <p className="text-lg text-green-700 max-w-2xl mx-auto font-medium">
              {t('referral.home.subtitle')}
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8 mb-10">
            {([1, 2, 3] as const).map((n) => (
              <div key={n} className="modern-card text-center py-8 px-6 flex flex-col items-center shadow-md hover:shadow-xl transition-all duration-200">
                <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-full flex items-center justify-center text-xl font-extrabold mb-4 shadow-lg">
                  {n}
                </div>
                <h3 className="font-bold text-gray-900 text-base mb-2 tracking-tight">
                  {t(`referral.home.step${n}.title`)}
                </h3>
                <p className="text-green-700 text-sm leading-relaxed">
                  {t(`referral.home.step${n}.desc`)}
                </p>
              </div>
            ))}
          </div>

<div className="text-center">
            <Link
              href="/profile?tab=referral"
              className="btn-accent inline-block text-base"
            >
              {t('referral.home.cta')}
            </Link>
          </div>
        </div>
      </Section>

{/* FAQ */}
      <Section className="bg-green-50/60">
        <div className="max-w-3xl mx-auto">
          <h2 className="text-4xl font-extrabold text-gray-900 mb-10 text-center tracking-tight drop-shadow-lg">
            {t('section.faq')}
          </h2>
          <FaqAccordion
            items={([1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const).map((n) => ({
              q: t(`faq.q${n}`),
              a: t(`faq.a${n}`),
            }))}
          />
        </div>
      </Section>

{/* Mobile App Download section */}
      <Section className="bg-gradient-to-br from-green-700 to-green-900 overflow-hidden">
        <div className="max-w-6xl mx-auto">
          <div className="flex flex-col lg:flex-row items-center gap-12">
            {/* Two mobile app previews */}
            <div className="shrink-0 flex justify-center lg:justify-start w-full lg:w-[430px]">
              <div className="relative h-[430px] w-[335px] sm:h-[490px] sm:w-[390px]">
                <div className="absolute left-0 top-8 h-[365px] w-[182px] -rotate-6 rounded-[34px] border-[5px] border-slate-800 bg-slate-900 p-1.5 shadow-2xl sm:h-[420px] sm:w-[210px]">
                  <div className="h-full overflow-hidden rounded-[27px] bg-slate-50">
                    <div className="h-10 bg-green-700 px-3 pt-3 text-[10px] font-bold text-white">CanHelp</div>
                    <div className="p-3">
                      <div className="rounded-xl bg-green-600 p-3 text-white"><p className="text-[8px] text-green-100">Найдите помощь рядом</p><p className="mt-1 text-sm font-bold">Новая заявка</p></div>
                      <div className="mt-3 space-y-2">
                        {['Электрик', 'Сантехник', 'Уборка'].map((service) => (
                          <div key={service} className="rounded-xl border border-slate-100 bg-white p-2 shadow-sm"><div className="flex items-center gap-2"><div className="h-7 w-7 rounded-full bg-green-100" /><div><p className="text-[9px] font-bold text-slate-800">{service}</p><p className="text-[7px] text-slate-400">Рядом с вами</p></div></div></div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
                <div className="absolute right-0 top-0 h-[410px] w-[205px] rotate-3 rounded-[40px] border-[6px] border-slate-900 bg-slate-900 p-1.5 shadow-2xl sm:h-[475px] sm:w-[238px]">
                  <div className="h-full overflow-hidden rounded-[31px] bg-slate-50">
                    <div className="flex h-12 items-center justify-between bg-green-600 px-4 pt-2 text-xs font-bold text-white"><span>Предложения</span><span>⌕</span></div>
                    <div className="p-3 space-y-3">
                      <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm"><div className="flex items-center gap-2"><div className="h-9 w-9 rounded-full bg-green-100" /><div><p className="text-[10px] font-bold text-slate-800">Электрик</p><p className="text-[8px] text-slate-400">На рассмотрении</p></div></div><div className="mt-3 h-1.5 w-full rounded bg-slate-100" /><div className="mt-1.5 h-1.5 w-3/4 rounded bg-slate-100" /><div className="mt-3 inline-flex rounded-full bg-green-50 px-2 py-1 text-[8px] font-semibold text-green-700">Открыть предложение</div></div>
                      <div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm"><p className="text-[10px] font-bold text-slate-800">Новые заказы</p><div className="mt-2 flex gap-1.5"><span className="rounded-full bg-green-100 px-2 py-1 text-[7px] text-green-700">Ремонт</span><span className="rounded-full bg-slate-100 px-2 py-1 text-[7px] text-slate-600">Афины</span></div></div>
                    </div>
                  </div>
                  <div className="absolute left-1/2 top-2 h-4 w-20 -translate-x-1/2 rounded-full bg-black" />
                </div>
              </div>
            </div>

{/* Text + QR codes */}
            <div className="flex-1 text-center lg:text-left">
              <p className="mb-3 text-sm font-bold uppercase tracking-[0.16em] text-green-200">CanHelp Mobile</p>
              <h2 className="text-3xl md:text-5xl font-extrabold text-black mb-3">
                {t('app.download_title', 'Скачайте мобильное приложение CanHelp')}
              </h2>
              <p className="text-lg text-green mb-8">
                {t('app.download_desc', 'Всегда под рукой. Доступно для Android и iOS.')}
              </p>

{/* Store buttons */}
              <div className="flex flex-col sm:flex-row gap-3 mb-8 justify-center lg:justify-start">
                <a
                  href="https://apps.apple.com/us/app/canhelp-%CE%B5%CE%B9%CE%B4%CE%B9%CE%BA%CE%BF%CE%AF-%CE%B5%CF%81%CE%B3%CE%B1%CF%83%CE%AF%CE%B5%CF%82/id6762458639"
                  target="_blank" rel="noopener noreferrer"
                  className="inline-flex items-center gap-3 bg-black hover:bg-gray-900 text-white font-semibold px-5 py-3 rounded-2xl shadow-lg transition"
                >
                  <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0" fill="white">
                    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                  </svg>
                  <div className="text-left">
                    <div className="text-xs text-gray-300 leading-tight">Download on the</div>
                    <div className="text-base font-bold leading-tight">App Store</div>
                  </div>
                </a>
                <a
                  href="https://play.google.com/store/apps/details?id=gr.canhelp.app"
                  target="_blank" rel="noopener noreferrer"
                  className="inline-flex items-center gap-3 bg-black hover:bg-gray-900 text-white font-semibold px-5 py-3 rounded-2xl shadow-lg transition"
                >
                  <svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0" fill="none">
                    <path d="M3.18 23.76a2 2 0 0 1-.97-1.77V2.01A2 2 0 0 1 3.18.25l12.11 11.75-12.11 11.76z" fill="#EA4335"/>
                    <path d="m16.79 12.82-3.07-2.98 3.07-2.98 3.47 1.97a2 2 0 0 1 0 3.5l-3.47 1.97-.97-.94 1.47-1.98-1.47-1.99-.97-.94z" fill="#FBBC04" className="hidden"/>
                    <path d="M3.18.25 15.29 12 3.18 23.75A2 2 0 0 1 2 22V2c0-.73.38-1.38.97-1.76z" fill="#4285F4" className="hidden"/>
                    <path d="M4 1 16 12 4 23 17.26 15.5a2 2 0 0 0 0-3.5L4 1z" fill="#EA4335" className="hidden"/>
                    <path d="M3.609.24 15.721 12 3.61 23.76A2 2 0 0 1 2 22V2A2 2 0 0 1 3.609.24z" fill="#4285F4"/>
                    <path d="M20.25 10.5 16.8 8.52 13.73 11.5l3.07 2.98 3.44-1.95a2 2 0 0 0 .01-3.03z" fill="#FBBC04"/>
                    <path d="M3.609.24 15.68 12.31 3.609 23.76l11.72-6.65-11.72-16.87z" fill="#34A853"/>
                  </svg>
                  <div className="text-left">
                    <div className="text-xs text-gray-300 leading-tight">Get it on</div>
                    <div className="text-base font-bold leading-tight">Google Play</div>
                  </div>
                </a>
              </div>

{/* QR codes */}
              <div className="flex flex-col sm:flex-row gap-6 justify-center lg:justify-start">
                <div className="flex flex-col items-center gap-2">
                  <div className="bg-white p-3 rounded-2xl shadow-xl ring-4 ring-white/20">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=https%3A%2F%2Fapps.apple.com%2Fus%2Fapp%2Fcanhelp-%25CE%25B5%25CE%25B9%25CE%25B4%25CE%25B9%25CE%25BA%25CE%25BF%25CE%25AF-%25CE%25B5%25CF%81%25CE%25B3%25CE%25B1%25CF%83%25CE%25AF%25CE%25B5%25CF%82%2Fid6762458639&color=000000&bgcolor=ffffff&margin=1"
                      alt="QR App Store"
                      width={192}
                      height={192}
                      className="block rounded-lg"
                    />
                  </div>
                  <span className="text-black text-sm font-semibold">App Store · QR</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <div className="bg-white p-3 rounded-2xl shadow-xl ring-4 ring-white/20">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src="https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dgr.canhelp.app&color=000000&bgcolor=ffffff&margin=1"
                      alt="QR Google Play"
                      width={192}
                      height={192}
                      className="block rounded-lg"
                    />
                  </div>
                  <span className="text-black text-sm font-semibold">Google Play · QR</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Section>

{/* Cities & Districts cloud */}
      {locationTree.length > 0 && (
        <Section className="bg-white">
          <h2 className="text-2xl font-bold text-slate-900 mb-6 text-center">
            {isSpecialist ? t('section.cities.specialist') : t('section.cities')}
          </h2>
          <HomeCityCloud locationTree={locationTree} isSpecialist={isSpecialist} />
        </Section>
      )}
    </div>
  )
}

import Link from 'next/link' import { cookies } from 'next/headers' import { getCategories, getLocations } from '@/lib/api' import { getTranslations, type Locale } from '@/lib/translations' import type { Category } from '@canhelp/shared' import { HomeCityCloud } from '@/components/HomeCityCloud' import { ShareButton } from '@/components/ShareButton' import { CommunityArt } from '@/components/HomeSectionArt' import { Section } from '@/components/Section' import { HeroSearch } from '@/components/HeroSearch' import { HeroFloatingIcons } from '@/components/HeroFloatingIcons' import { FaqAccordion } from '@/components/FaqAccordion' import { BecomeSpecialistButton } from '@/components/BecomeSpecialistButton' import { PromoCountdown } from '@/components/PromoCountdown' import { HomeCategoryGrid } from '@/components/HomeCategoryGrid' export default async function HomePage() { const cookieStore = await cookies() const rawLocale = cookieStore.get('canhelp_locale')?.value as Locale | undefined const locale: Locale = ['el', 'en', 'uk', 'ru'].includes(rawLocale ?? '') ? rawLocale! : 'el' const t = getTranslations(locale) // Determine user role server-side const INTERNAL = process.env.INTERNAL_API_URL || 'http://localhost:4000' const cookieHeader = cookieStore.getAll().map((c) => `${c.name}=${c.value}`).join('; ') let userRole: string | null = null try { const sessRes = await fetch(`${INTERNAL}/api/auth/get-session`, { headers: { Cookie: cookieHeader }, }) if (sessRes.ok) { const sess = await sessRes.json() userRole = sess?.user?.role ?? null } } catch {} // Admin can override the role for preview purposes via cookie const previewRole = cookieStore.get('canhelp_preview_role')?.value const effectiveRole = (userRole === 'admin' && previewRole) ? previewRole : userRole const isSpecialist = effectiveRole === 'specialist' let categories: Category[] = [] let locationTree: any[] = [] let platformStats = { specialistCount: 0, taskCount: 0, categoryCount: 0 } try { ;[categories, locationTree] = await Promise.all([getCategories(), getLocations()]) } catch {} try { const statsRes = await fetch(`${INTERNAL}/api/stats`, { next: { revalidate: 600 } }) if (statsRes.ok) platformStats = await statsRes.json() } catch {} return (

{/* Hero */}

{isSpecialist ? t('hero.specialist.title') : t('hero.title')}

{isSpecialist ? t('hero.specialist.subtitle') : t('hero.subtitle')}

{isSpecialist ? ( <> {t('hero.specialist.cta')} {t('nav.dashboard')} ) : ( <> {t('hero.cta.post')} {t('hero.cta.specialists')} )}

{/* Stats strip */}

{platformStats.specialistCount > 0 ? platformStats.specialistCount : '—'}

{t('stats.specialists')}

{platformStats.taskCount > 0 ? platformStats.taskCount : '—'}

{t('stats.tasks')}

{platformStats.categoryCount > 0 ? platformStats.categoryCount : '—'}

{t('stats.categories')}

✓

{t('stats.free')}

{/* Promo countdown — only for guests */} {!userRole && (

)} {/* Categories */}

{isSpecialist ? t('section.categories.specialist') : t('section.categories')}

{/* How it works */}

{t('section.how')}

{([1, 2, 3] as const).map((n) => (

{n}

{isSpecialist ? t(`how.specialist.step${n}.title`) : t(`how.step${n}.title`)}

{isSpecialist ? t(`how.specialist.step${n}.desc`) : t(`how.step${n}.desc`)}

))}

{/* Specialist promo — only shown to customers / guests */} {!isSpecialist && (

{t('become_specialist.free_badge')}

{t('become_specialist.hero.title')}

{t('become_specialist.hero.subtitle')}

{([1, 2, 3] as const).map((n) => (

{n}

{t(`become_specialist.step${n}.title`)}

{t(`become_specialist.step${n}.desc`)}

))}

{([1, 2, 3, 4] as const).map((n) => ( ✓ {t(`become_specialist.benefit${n}`)} ))}

{t('become_specialist.cta')}

)} {/* Community / Share section */}

{t('section.community')}

{t('community.subtitle')}

🛠️

{t('community.point1.title')}

{t('community.point1.desc')}

🙋

{t('community.point2.title')}

{t('community.point2.desc')}

🌱

{t('community.point3.title')}

{t('community.point3.desc')}

{/* Referral / Partner Program */}

{t('referral.home.badge')}

{t('section.referral')}

{t('referral.home.subtitle')}

{([1, 2, 3] as const).map((n) => (

{n}

{t(`referral.home.step${n}.title`)}

{t(`referral.home.step${n}.desc`)}

))}

{t('referral.home.cta')}

{/* FAQ */}

{t('section.faq')}

({ q: t(`faq.q${n}`), a: t(`faq.a${n}`), }))} />

{/* Mobile App Download section */}

{/* Two mobile app previews */}

CanHelp

Найдите помощь рядом

Новая заявка

{['Электрик', 'Сантехник', 'Уборка'].map((service) => (

{service}

Рядом с вами

))}

Предложения⌕

Электрик

На рассмотрении

Открыть предложение

Новые заказы

РемонтАфины

{/* Text + QR codes */}

CanHelp Mobile

{t('app.download_title', 'Скачайте мобильное приложение CanHelp')}

{t('app.download_desc', 'Всегда под рукой. Доступно для Android и iOS.')}

{/* Store buttons */}

{/* QR codes */}

{/* eslint-disable-next-line @next/next/no-img-element */} QR App Store

App Store · QR

{/* eslint-disable-next-line @next/next/no-img-element */} QR Google Play

Google Play · QR

{/* Cities & Districts cloud */} {locationTree.length > 0 && (

{isSpecialist ? t('section.cities.specialist') : t('section.cities')}

)}

) }