Audit fixes: VIP self-grant, draft leak, onboarding flag, hero personalization, gated downloads

web/src/app/(frontend)/page.tsx

@@ -0,0 +1,153 @@
+import { getViewer } from '@/lib/viewer'
+import Topnav from '@/components/topnav'
+import Footer from '@/components/footer'
+import Link from 'next/link'
+import { getPayload } from 'payload'
+import configPromise from '@payload-config'
+import { TOPICS, topicsFor, INTEREST_MAP } from '@/lib/topics'
+import { formatNumber, guidesLabel, minutesLabel, MEMBERSHIP_PRICE } from '@/lib/format'
+
+export const dynamic = 'force-dynamic'
+
+/* Editorial picks for «ابدأ من هنا». */
+const START_HERE = ['first-arabic-agent', 'choosing-your-model', 'prototype-to-production', 'simple-arabic-rag', 'safe-agent-guardrails', 'agent-loop-stop-condition']
+
+type Doc = { id: number; title: string; slug: string; dek?: string | null; access: 'free' | 'vip'; category: string; level?: string | null; readingMinutes: number; cover?: { url?: string | null } | number | null }
+
+export default async function HomePage() {
+  const viewer = await getViewer()
+  const payload = await getPayload({ config: configPromise })
+  const { docs: raw } = await payload.find({
+    collection: 'posts',
+    where: { status: { equals: 'published' } },
+    depth: 1,
+    limit: 200,
+    sort: '-publishedAt',
+    select: { title: true, slug: true, dek: true, access: true, category: true, level: true, readingMinutes: true, cover: true },
+  })
+  const docs = raw as unknown as Doc[]
+  const freeCount = docs.filter(d => d.access === 'free').length
+
+  // Hero personalization: matching the viewer's interest floats to the top,
+  // level match ranks higher, ties keep the -publishedAt order. Anonymous
+  // viewers get the plain newest-first list.
+  const interestTopic = viewer?.interest ? INTEREST_MAP[viewer.interest] : undefined
+  const score = (d: Doc) => {
+    if (!interestTopic || !topicsFor(d).includes(interestTopic)) return 0
+    return d.level === viewer?.level ? 2 : 1
+  }
+  const hero = docs
+    .map((d, i) => ({ d, i, s: score(d) }))
+    .sort((a, b) => b.s - a.s || a.i - b.i)
+    .slice(0, 4)
+    .map(({ d }) => d)
+  const counts = Object.fromEntries(TOPICS.map(t => [t.key, docs.filter(d => topicsFor(d).includes(t.key)).length]))
+  const startHere = START_HERE.map(slug => docs.find(d => d.slug === slug)).filter((d): d is Doc => Boolean(d))
+
+  return (
+    <div id="site" className="site-page v2 v2-home">
+      <Topnav viewer={viewer} />
+      <main id="content">
+        <section className="home-hero">
+          <div className="wrap home-hero-grid">
+            <div className="home-hero-copy">
+              <p className="kicker">مكتبة عربية للذكاء الاصطناعي العملي</p>
+              <h1>افهم الذكاء الاصطناعي، ثم ابنِ به.</h1>
+              <p className="lede">أدلة عربية عملية عن الوكلاء والنماذج والأتمتة، يكتبها مهندسو بنية تحتية لمن يريد أن يشغّل شيئاً حقيقياً.</p>
+              <div className="actions">
+                <a className="btn btn-primary" href="/articles?access=free">ابدأ بدليل مجاني</a>
+                <Link className="btn btn-quiet" href="/articles">تصفح المكتبة</Link>
+              </div>
+            </div>
+            {hero.length > 0 && (
+              <aside className="hero-panel" aria-labelledby="new-title">
+                <h2 id="new-title">أحدث الأدلة</h2>
+                <ul role="list">
+                  {hero.map(d => {
+                    const coverUrl = typeof d.cover === 'object' ? d.cover?.url ?? null : null
+                    return (
+                      <li key={d.id}>
+                        <Link href={`/posts/${d.slug}`}>
+                          {coverUrl && <img className="hero-panel-thumb" src={coverUrl} alt="" width={72} height={48} loading="lazy" />}
+                          <span className="hero-panel-title">{d.title}</span>
+                          <span className="meta-row"><span>{d.category}</span><span>{minutesLabel(d.readingMinutes)}</span><span className={d.access === 'vip' ? 'is-vip' : undefined}>{d.access === 'free' ? 'مجاني' : 'للأعضاء'}</span></span>
+                        </Link>
+                      </li>
+                    )
+                  })}
+                </ul>
+                <Link className="text-link" href="/articles">كل الأدلة</Link>
+              </aside>
+            )}
+          </div>
+        </section>
+
+        <section className="home-paths" id="topics" aria-labelledby="paths-title">
+          <div className="wrap">
+            <header className="section-head">
+              <h2 id="paths-title">اختر مساراً حسب ما تريد بناءه</h2>
+              <p>كل دليل ينتمي إلى مسار، وأدلة المبتدئين تظهر أيضاً في الأساسيات.</p>
+            </header>
+            <ol className="paths" role="list">
+              {TOPICS.map(topic => (
+                <li key={topic.key}>
+                  <Link href={`/articles?topic=${topic.key}`} className="path">
+                    <span className="path-name">{topic.label}</span>
+                    <span className="path-hint">{topic.hint}</span>
+                    <span className="path-count">{guidesLabel(counts[topic.key])}</span>
+                  </Link>
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+
+        {startHere.length > 0 && (
+          <section className="home-start" aria-labelledby="start-title">
+            <div className="wrap">
+              <header className="section-head">
+                <h2 id="start-title">ابدأ من هنا</h2>
+                <Link className="text-link" href="/articles">كل الأدلة ({formatNumber(docs.length)})</Link>
+              </header>
+              <ul className="card-grid" role="list">
+                {startHere.map(post => {
+                  const coverUrl = typeof post.cover === 'object' ? post.cover?.url ?? null : null
+                  return (
+                    <li key={post.id}>
+                      <article className="guide">
+                        {coverUrl && <img className="guide-card-art" src={coverUrl} alt="" width={640} height={320} loading="lazy" />}
+                        <p className="meta-row"><span className="cat">{post.category}</span><span>{minutesLabel(post.readingMinutes)}</span><span className={post.access === 'vip' ? 'is-vip' : undefined}>{post.access === 'free' ? 'مجاني' : 'للأعضاء'}</span></p>
+                        <h3><Link href={`/posts/${post.slug}`}>{post.title}</Link></h3>
+                        <p className="guide-dek">{post.dek}</p>
+                        <span className="guide-link" aria-hidden="true">اقرأ الدليل</span>
+                      </article>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          </section>
+        )}
+
+        <section className="home-membership" id="membership" aria-labelledby="membership-title">
+          <div className="wrap membership-panel">
+            <div>
+              <h2 id="membership-title">العضوية تفتح الأدلة المتقدمة وملفات العمل.</h2>
+              <p>الأدلة المجانية كاملة دائماً. العضوية تضيف الأدلة المعمّقة، القوالب الجاهزة للتنزيل، والنقاش مع الفريق.</p>
+            </div>
+            <div className="membership-offer">
+              <p className="price"><bdi dir="ltr">{MEMBERSHIP_PRICE}</bdi> <span>شهرياً، وتلغي متى شئت</span></p>
+              <ul role="list">
+                <li>{guidesLabel(docs.length - freeCount)} للأعضاء، وتُضاف أدلة جديدة باستمرار</li>
+                <li>قوالب وقوائم فحص قابلة للتنزيل</li>
+                <li>التعليق والنقاش على كل دليل</li>
+              </ul>
+              <Link className="btn btn-primary" href="/subscription">اطّلع على العضوية</Link>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  )
+}