soroushasadi/Pages/Blog/Index.cshtml

@page "/blog"
@model SoroushAsadi.Pages.Blog.BlogIndexModel
@{
    ViewData["Title"] = Model.IsFa ? "بلاگ - سروش اسعدی" : "Blog - Soroush Asadi";
    var fa = Model.IsFa;
}

<div class="px-5 pt-28 pb-24 sm:px-8 sm:pt-32">
  <div class="mx-auto max-w-4xl">
    <div class="sec-head">
      <h1 class="@(fa ? "font-fa" : "")" style="font-size:clamp(2rem,4vw,2.75rem)">
        @(fa ? "یادداشت‌های مهندسی" : "Engineering notes")
      </h1>
      <p class="lede mt-4">@(fa ? "یافته‌ها از پروژه‌های واقعی. نه ترجمه‌ی مقاله، نه فهرست هیجان." : "Findings from real engagements. Not translated articles, not hype lists.")</p>
    </div>

    <div class="border-b border-zinc-200">
      @foreach (var post in Model.Posts)
      {
        <a href="/blog/@post.Slug" class="group reveal grid grid-cols-1 gap-2 border-t border-zinc-200 py-6 sm:grid-cols-[8rem_1fr] sm:gap-8">
          <div class="flex items-baseline justify-between sm:flex-col sm:gap-1">
            <span class="kicker">@post.Category</span>
            <span class="text-[.78rem] text-zinc-400">@post.ReadTime @(fa ? "دقیقه" : "min")</span>
          </div>
          <div>
            <h2 class="text-[1.1rem] font-semibold transition-colors group-hover:text-accent @(fa ? "font-fa" : "")">@post.Title</h2>
            <p class="mt-1.5 text-[.9rem] leading-relaxed text-zinc-600">@post.Excerpt</p>
          </div>
        </a>
      }
    </div>
  </div>
</div>