@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/blog-cards-journal-bento/BlogCardsJournalBento.tsx

@@ -0,0 +1,409 @@
+import * as React from "react"
+import { ArrowRightIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Blog Cards` (46368:243914), Type=Journal Bento.
+ *
+ * A centred heading (an eyebrow, a heading and a line under it) over a grid of
+ * six 360px tiles. Two are features, 612 wide: the first an inverse band, the
+ * second `secondary`, each with a large title, a summary, a "Read story"
+ * action and a piece of artwork standing on its bottom end corner. Four are
+ * short stories, 294 wide, each tinted with its own accent (info, warning,
+ * success, primary) at 20%, with a title, a summary, the action and a small
+ * motif of two rings. Every tile starts with a row: a dot in its accent and
+ * the topic in capitals at the start, the read time at the end. The title
+ * names the tile's link, which is the whole tile; the "Read story" action is
+ * that link's drawn button, hidden from assistive technology.
+ *
+ * Desktop (Figma 1440) lays the tiles in two rows: a feature and two short
+ * stories, then two short stories and a feature. Tablet (768) gives each
+ * feature a full row and sets the short stories two across. Mobile (360)
+ * stacks all six, in the same order.
+ *
+ * Hover and keyboard focus drift a short tile's two rings apart by 6px
+ * (240ms) and move its action's arrow 2px toward the end edge. On a feature
+ * the artwork lifts 6px and scales from 1.00 to 1.03; the dot, the topic and
+ * the read time don't move. On Mobile there is no hover; pressing a tile dims
+ * it to 96%. Reduced motion turns it all off. Nothing plays on load, on scroll
+ * or on a timer.
+ *
+ * Arabic mirrors by the page's `dir`: the rows, the artwork and the rings move
+ * to the other side and the arrow points the other way (it is mirrored, not
+ * rotated). The artwork is never flipped as a picture, only moved.
+ *
+ * The first feature is the inverse band, so the block needs the
+ * `theme-inverse` item.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container. The base classes are Figma's Mobile (360);
+ * `[@container(min-width:40rem)]:` is its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop. The section's own padding
+ * still follows the window, since an element can't query itself.
+ */
+
+type Accent = "info" | "warning" | "success" | "primary"
+
+export interface BlogCardsJournalBentoStory {
+  /** The topic, shown in capitals in English. */
+  topic: React.ReactNode
+  /** The accent: the dot, the rings and, on a short story, the tint. */
+  accent: Accent
+  /** The read time, as written: "6 min read". */
+  readTime: React.ReactNode
+  /** The title, an `h3`, and the tile's link. A line break (`\n`) is kept. */
+  title: string
+  /** The summary. */
+  summary: React.ReactNode
+  /** Where the tile goes. */
+  href: string
+}
+
+export interface BlogCardsJournalBentoFeature extends BlogCardsJournalBentoStory {
+  /**
+   * The artwork on the tile's bottom end corner, 244 by 160 on Desktop and
+   * Tablet and 140 by 92 on Mobile. Nothing stands there without one.
+   */
+  image?: { src: string; alt: string }
+}
+
+export interface BlogCardsJournalBentoCopy {
+  /** The small line over the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when empty. */
+  description: React.ReactNode
+  /** The two feature tiles: the inverse one first, then the `secondary` one. */
+  features: BlogCardsJournalBentoFeature[]
+  /** The four short stories, in reading order. */
+  stories: BlogCardsJournalBentoStory[]
+  /** The label of the drawn "Read story" action on every tile. */
+  actionLabel: string
+  /** Shown instead of the tiles when there are no features and no stories. */
+  emptyLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", BlogCardsJournalBentoCopy> = {
+  en: {
+    eyebrow: "IDEAS FOR THE WAY WE BUILD",
+    heading: "Fieldnotes",
+    description: "A journal about thoughtful digital products. Fewer assumptions. More intention.",
+    features: [
+      {
+        topic: "Research",
+        accent: "warning",
+        readTime: "8 min read",
+        title: "Better questions.\nBetter products.",
+        summary: "Good discovery starts with listening. A field guide to finding the needs behind the feature requests.",
+        href: "#",
+      },
+      {
+        topic: "Product craft",
+        accent: "info",
+        readTime: "9 min read",
+        title: "The details are\nthe product.",
+        summary:
+          "From a forgiving form to a well-timed reply: the quiet decisions that make software feel considered.",
+        href: "#",
+      },
+    ],
+    stories: [
+      {
+        topic: "Accessibility",
+        accent: "info",
+        readTime: "6 min read",
+        title: "Access is not\nan edge case.",
+        summary: "Build keyboard paths, clear focus and inclusive defaults into the first draft—not the final audit.",
+        href: "#",
+      },
+      {
+        topic: "Useful motion",
+        accent: "warning",
+        readTime: "5 min read",
+        title: "Less spectacle.\nMore signal.",
+        summary: "Use motion to explain what changed, guide attention and help people keep their place.",
+        href: "#",
+      },
+      {
+        topic: "Prototyping",
+        accent: "success",
+        readTime: "7 min read",
+        title: "Make it real.\nThen make it right.",
+        summary: "The smallest prototype that turns a team’s biggest assumption into something you can test.",
+        href: "#",
+      },
+      {
+        topic: "Collaboration",
+        accent: "primary",
+        readTime: "4 min read",
+        title: "Better together,\nby design.",
+        summary: "Trade the big reveal for shared work. Small rituals that bring design and engineering closer.",
+        href: "#",
+      },
+    ],
+    actionLabel: "Read story",
+    emptyLabel: "No articles yet.",
+  },
+  ar: {
+    eyebrow: "أفكار في طريقة بنائنا",
+    heading: "ملاحظات ميدانية",
+    description: "يوميات عن المنتجات الرقمية المدروسة: افتراضات أقل وقصد أوضح.",
+    features: [
+      {
+        topic: "البحث",
+        accent: "warning",
+        readTime: "قراءة 8 دقائق",
+        title: "أسئلة أفضل.\nمنتجات أفضل.",
+        summary: "يبدأ الاكتشاف الجيد بالإصغاء. دليل ميداني للوصول إلى الاحتياجات الكامنة وراء طلبات الميزات.",
+        href: "#",
+      },
+      {
+        topic: "إتقان المنتج",
+        accent: "info",
+        readTime: "قراءة 9 دقائق",
+        title: "التفاصيل\nهي المنتج.",
+        summary: "من استمارة تتسامح مع الأخطاء إلى ردّ في الوقت المناسب: القرارات الهادئة التي تجعل البرمجيات تبدو مدروسة.",
+        href: "#",
+      },
+    ],
+    stories: [
+      {
+        topic: "إمكانية الوصول",
+        accent: "info",
+        readTime: "قراءة 6 دقائق",
+        title: "الوصول ليس\nحالة هامشية.",
+        summary: "اجعل مسارات لوحة المفاتيح ووضوح التركيز والإعدادات الشاملة جزءًا من المسودة الأولى، لا من المراجعة الأخيرة.",
+        href: "#",
+      },
+      {
+        topic: "الحركة المفيدة",
+        accent: "warning",
+        readTime: "قراءة 5 دقائق",
+        title: "استعراض أقل.\nإشارة أوضح.",
+        summary: "استخدم الحركة لتوضيح ما تغيّر، وتوجيه الانتباه، ومساعدة الناس على تتبّع موضعهم.",
+        href: "#",
+      },
+      {
+        topic: "النمذجة الأولية",
+        accent: "success",
+        readTime: "قراءة 7 دقائق",
+        title: "اجعله حقيقيًا.\nثم أتقنه.",
+        summary: "أصغر نموذج أولي يحوّل أكبر افتراضات الفريق إلى شيء يمكن اختباره.",
+        href: "#",
+      },
+      {
+        topic: "التعاون",
+        accent: "primary",
+        readTime: "قراءة 4 دقائق",
+        title: "التعاون أفضل\nحين نصمّمه.",
+        summary: "اجعل العمل مشتركًا منذ البداية بدل الكشف الكبير في النهاية. عادات صغيرة تقرّب التصميم من الهندسة.",
+        href: "#",
+      },
+    ],
+    actionLabel: "اقرأ المقال",
+    emptyLabel: "لا توجد مقالات بعد.",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const blogCardsJournalBentoCopy = COPY
+
+/*
+ * Every class below is written out whole: Tailwind finds a class by reading
+ * the source, so none is built from pieces. The hover and focus ones are from
+ * Tablet up (Mobile has none).
+ */
+const ACCENT: Record<Accent, { tile: string; dot: string; ring: string; fill: string }> = {
+  info: { tile: "bg-info/20", dot: "bg-info", ring: "border-info", fill: "bg-info" },
+  warning: { tile: "bg-warning/20", dot: "bg-warning", ring: "border-warning", fill: "bg-warning" },
+  success: { tile: "bg-success/20", dot: "bg-success", ring: "border-success", fill: "bg-success" },
+  primary: { tile: "bg-primary/20", dot: "bg-primary", ring: "border-primary", fill: "bg-primary" },
+}
+const TILE =
+  "group/tile relative isolate flex h-[360px] flex-col justify-between overflow-hidden rounded-xl border p-6 transition-opacity duration-[120ms] motion-reduce:transition-none [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:[@container(max-width:39.99rem)]:opacity-[0.96]"
+const RING_DRIFT =
+  "transition-transform duration-[240ms] ease-out motion-reduce:transition-none group-hover/tile:[@container(min-width:40rem)]:motion-safe:ltr:translate-x-1.5 group-hover/tile:[@container(min-width:40rem)]:motion-safe:rtl:-translate-x-1.5 group-focus-visible/tile:[@container(min-width:40rem)]:motion-safe:ltr:translate-x-1.5 group-focus-visible/tile:[@container(min-width:40rem)]:motion-safe:rtl:-translate-x-1.5"
+const ARROW_NUDGE =
+  "transition-transform duration-[240ms] ease-out motion-reduce:transition-none rtl:-scale-x-100 group-hover/tile:[@container(min-width:40rem)]:motion-safe:ltr:translate-x-0.5 group-hover/tile:[@container(min-width:40rem)]:motion-safe:rtl:-translate-x-0.5 group-focus-visible/tile:[@container(min-width:40rem)]:motion-safe:ltr:translate-x-0.5 group-focus-visible/tile:[@container(min-width:40rem)]:motion-safe:rtl:-translate-x-0.5"
+const ARTWORK_LIFT =
+  "transition-transform duration-[240ms] ease-out motion-reduce:transition-none group-hover/tile:[@container(min-width:40rem)]:motion-safe:-translate-y-1.5 group-hover/tile:[@container(min-width:40rem)]:motion-safe:scale-[1.03] group-focus-visible/tile:[@container(min-width:40rem)]:motion-safe:-translate-y-1.5 group-focus-visible/tile:[@container(min-width:40rem)]:motion-safe:scale-[1.03]"
+
+type Tone = "inverse" | "secondary" | "tinted"
+
+const TONE_CLASSES: Record<Tone, { tile: string; topic: string; muted: string; title: string; action: string }> = {
+  inverse: {
+    tile: "border-background-inverse bg-background-inverse",
+    topic: "text-foreground-inverse",
+    muted: "text-muted-foreground-inverse",
+    title: "text-foreground-inverse",
+    action: "text-foreground-inverse",
+  },
+  secondary: {
+    tile: "bg-secondary",
+    topic: "text-card-foreground",
+    muted: "text-secondary-foreground",
+    title: "text-card-foreground",
+    action: "text-foreground",
+  },
+  tinted: {
+    tile: "",
+    topic: "text-card-foreground",
+    muted: "text-secondary-foreground",
+    title: "text-card-foreground",
+    action: "text-foreground",
+  },
+}
+
+function Tile({
+  story,
+  tone,
+  feature,
+  actionLabel,
+  titleId,
+}: {
+  story: BlogCardsJournalBentoStory | BlogCardsJournalBentoFeature
+  tone: Tone
+  feature: boolean
+  actionLabel: string
+  titleId: string
+}) {
+  const accent = ACCENT[story.accent]
+  const classes = TONE_CLASSES[tone]
+  const image = feature ? (story as BlogCardsJournalBentoFeature).image : undefined
+  return (
+    <a href={story.href} aria-labelledby={titleId} className={cn(TILE, classes.tile, tone === "tinted" && accent.tile)}>
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between gap-4">
+          <p className={cn("flex items-center gap-2 text-xs font-semibold uppercase", classes.topic)}>
+            <span aria-hidden="true" className={cn("size-1.5 shrink-0 rounded-full", accent.dot)} />
+            <span>{story.topic}</span>
+          </p>
+          <span className={cn("text-xs", classes.muted)}>{story.readTime}</span>
+        </div>
+        <div className="flex flex-col gap-3">
+          <h3
+            id={titleId}
+            className={cn(
+              "whitespace-pre-line font-semibold",
+              feature ? "text-2xl [@container(min-width:40rem)]:text-3xl" : "text-2xl",
+              classes.title
+            )}
+          >
+            {story.title}
+          </h3>
+          <p className={cn("text-base", feature && "[@container(min-width:40rem)]:max-w-[390px]", classes.muted)}>
+            {story.summary}
+          </p>
+        </div>
+      </div>
+      {image ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={image.src}
+          alt={image.alt}
+          loading="lazy"
+          className={cn(
+            "pointer-events-none absolute bottom-0 end-3 -z-10 h-[92px] w-[140px] object-contain object-bottom [@container(min-width:40rem)]:h-[160px] [@container(min-width:40rem)]:w-[244px]",
+            ARTWORK_LIFT
+          )}
+        />
+      ) : null}
+      <div className="flex items-center justify-between">
+        <span
+          aria-hidden="true"
+          className={cn(buttonVariants({ variant: "ghost", tone: "primary", size: "lg" }), "pointer-events-none ps-0 pe-6", classes.action)}
+        >
+          {actionLabel}
+          <ArrowRightIcon className={cn("size-4", ARROW_NUDGE)} />
+        </span>
+        {!feature ? (
+          <span aria-hidden="true" className="flex items-center pe-1">
+            <span className={cn("size-[22px] rounded-full border-2", accent.ring)} />
+            <span className={cn("-ms-2 size-[22px] rounded-full", accent.fill, RING_DRIFT)} />
+          </span>
+        ) : null}
+      </div>
+    </a>
+  )
+}
+
+export interface BlogCardsJournalBentoProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<BlogCardsJournalBentoCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function BlogCardsJournalBento({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  features,
+  stories,
+  actionLabel,
+  emptyLabel,
+  className,
+  ...props
+}: BlogCardsJournalBentoProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const titleId = React.useId()
+  const featureList = features ?? copy.features
+  const storyList = stories ?? copy.stories
+  const label = actionLabel ?? copy.actionLabel
+  const lines = { eyebrow: eyebrow ?? copy.eyebrow, description: description ?? copy.description }
+  const rowOne = storyList.slice(0, 2)
+  const rowTwo = storyList.slice(2, 4)
+  const empty = featureList.length === 0 && storyList.length === 0
+
+  const pair = (list: BlogCardsJournalBentoStory[], offset: number) =>
+    list.length > 0 ? (
+      <div className="grid grid-cols-1 gap-6 [@container(min-width:40rem)]:grid-cols-2">
+        {list.map((story, index) => (
+          <Tile key={index} story={story} tone="tinted" feature={false} actionLabel={label} titleId={`${titleId}-s${offset + index}`} />
+        ))}
+      </div>
+    ) : null
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("[container-type:inline-size] bg-background p-8 md:p-16 lg:p-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-12">
+        <div className="flex flex-col items-center gap-4 text-center [@container(min-width:40rem)]:px-12 [@container(min-width:64rem)]:px-0">
+          {lines.eyebrow ? (
+            <p className="text-xs font-semibold uppercase text-muted-foreground">{lines.eyebrow}</p>
+          ) : null}
+          <h2
+            id={headingId}
+            className="text-3xl font-semibold text-foreground [@container(min-width:40rem)]:text-5xl"
+          >
+            {heading ?? copy.heading}
+          </h2>
+          {lines.description ? <p className="text-lg text-muted-foreground">{lines.description}</p> : null}
+        </div>
+
+        {empty ? (
+          <p className="text-center text-sm text-muted-foreground">{emptyLabel ?? copy.emptyLabel}</p>
+        ) : (
+          <div className="flex flex-col gap-6">
+            <div className="grid grid-cols-1 gap-6 [@container(min-width:64rem)]:grid-cols-2">
+              {featureList[0] ? <Tile story={featureList[0]} tone="inverse" feature actionLabel={label} titleId={`${titleId}-f0`} /> : null}
+              {pair(rowOne, 0)}
+            </div>
+            <div className="grid grid-cols-1 gap-6 [@container(min-width:64rem)]:grid-cols-2">
+              {pair(rowTwo, 2)}
+              {featureList[1] ? <Tile story={featureList[1]} tone="secondary" feature actionLabel={label} titleId={`${titleId}-f1`} /> : null}
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/registry/blocks/blog-cards-journal-bento/index.ts

@@ -0,0 +1,8 @@
+export {
+  BlogCardsJournalBento,
+  blogCardsJournalBentoCopy,
+  type BlogCardsJournalBentoCopy,
+  type BlogCardsJournalBentoFeature,
+  type BlogCardsJournalBentoProps,
+  type BlogCardsJournalBentoStory,
+} from "./BlogCardsJournalBento"

package/registry/blocks/blog-cards-latest-popular-split/BlogCardsLatestPopularSplit.tsx

@@ -0,0 +1,258 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Blog Cards` (46368:243914), Type=Latest / Popular Split.
+ *
+ * Two columns of compact rows with a hairline between them. The first, Latest,
+ * has a heading with a "newest first" note and five rows, each a small
+ * thumbnail beside a title and a line with the category and read time. The
+ * second, Most read, has its own heading and note and five ranked rows: a rank
+ * number in the border colour, then the title and the same line, with no
+ * thumbnail. Each row is one link, named by its title.
+ *
+ * Desktop (Figma 1440) puts the columns side by side, 640 wide each, with
+ * 72 by 56 thumbnails. Tablet (768) keeps them side by side at 360 each and
+ * shrinks the thumbnails to 56 by 44. Mobile (360) stacks them, Latest above
+ * Most read, with a hairline under Latest and 64 by 48 thumbnails.
+ *
+ * Hover and keyboard focus scale a thumbnail from 1.00 to 1.06 inside its
+ * clip and turn the title `info` (180ms). In Most read the rank moves from
+ * the border colour to the foreground. On Mobile there is no hover; pressing
+ * a row dims it to 92%. Reduced motion turns all of it off. Nothing plays on
+ * load or on a timer.
+ *
+ * Arabic mirrors by the page's `dir`: Most read moves to the start side, the
+ * ranks to the start of each row and the thumbnails to the start of the Latest
+ * rows. Photographs are never flipped.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container. The base classes are Figma's Mobile (360);
+ * `[@container(min-width:40rem)]:` is its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop. The section's own padding
+ * still follows the window, since an element can't query itself.
+ */
+
+export interface BlogCardsLatestPopularSplitPost {
+  /** The thumbnail, in the Latest column only. Without one it is a `muted` placeholder of the same size. */
+  image?: { src: string; alt: string }
+  /** The title, an `h3`, and the row's accessible name. */
+  title: React.ReactNode
+  /** The category. */
+  category: React.ReactNode
+  /** The read time, as written: "9 min read". */
+  readTime: React.ReactNode
+  /** Where the row goes. */
+  href: string
+}
+
+export interface BlogCardsLatestPopularSplitCopy {
+  /** The Latest column's heading, an `h2`. */
+  latestHeading: React.ReactNode
+  /** The note under it. Hidden when empty. */
+  latestNote: React.ReactNode
+  /** The Latest rows, with thumbnails. */
+  latest: BlogCardsLatestPopularSplitPost[]
+  /** The Most read column's heading, an `h2`. */
+  popularHeading: React.ReactNode
+  /** The note under it. Hidden when empty. */
+  popularNote: React.ReactNode
+  /** The Most read rows, ranked from `01`; no thumbnails. */
+  popular: BlogCardsLatestPopularSplitPost[]
+  /** Shown under a column's heading when its list is empty. */
+  emptyLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", BlogCardsLatestPopularSplitCopy> = {
+  en: {
+    latestHeading: "Latest",
+    latestNote: "Newest first",
+    latest: [
+      { title: "Why we rebuilt every token as a Figma variable", category: "Design Systems", readTime: "9 min read", href: "#" },
+      { title: "Arabic type on the web: what breaks and why", category: "RTL & Arabic", readTime: "12 min read", href: "#" },
+      { title: "The 8-point grid is not a religion", category: "Foundations", readTime: "6 min read", href: "#" },
+      { title: "Shipping dark mode without a second design file", category: "Engineering", readTime: "8 min read", href: "#" },
+      { title: "Naming things: a spacing scale that survives handoff", category: "Design Systems", readTime: "7 min read", href: "#" },
+    ],
+    popularHeading: "Most read",
+    popularNote: "Last 90 days",
+    popular: [
+      { title: "Mirroring is not flipping", category: "RTL & Arabic", readTime: "10 min read", href: "#" },
+      { title: "The case for fewer button variants", category: "Design Systems", readTime: "5 min read", href: "#" },
+      { title: "A type ramp for two scripts", category: "Typography", readTime: "11 min read", href: "#" },
+      { title: "Documenting a component so an agent can use it", category: "Engineering", readTime: "11 min read", href: "#" },
+      { title: "What our first design-system survey told us", category: "Research", readTime: "9 min read", href: "#" },
+    ],
+    emptyLabel: "No articles yet.",
+  },
+  ar: {
+    latestHeading: "الأحدث",
+    latestNote: "الأحدث أولًا",
+    latest: [
+      { title: "لماذا أعدنا بناء كل رمز تصميمي كمتغيّر في Figma", category: "أنظمة التصميم", readTime: "قراءة 9 دقائق", href: "#" },
+      { title: "الخط العربي على الويب: ما الذي ينكسر ولماذا", category: "العربية وRTL", readTime: "قراءة 12 دقيقة", href: "#" },
+      { title: "شبكة الثماني نقاط ليست عقيدة", category: "الأساسيات", readTime: "قراءة 6 دقائق", href: "#" },
+      { title: "إطلاق الوضع الداكن دون ملف تصميم ثانٍ", category: "الهندسة", readTime: "قراءة 8 دقائق", href: "#" },
+      { title: "تسمية الأشياء: مقياس تباعد يصمد بعد التسليم", category: "أنظمة التصميم", readTime: "قراءة 7 دقائق", href: "#" },
+    ],
+    popularHeading: "الأكثر قراءة",
+    popularNote: "آخر 90 يومًا",
+    popular: [
+      { title: "الانعكاس ليس مجرد قلب", category: "العربية وRTL", readTime: "قراءة 10 دقائق", href: "#" },
+      { title: "مرافعة لصالح متغيرات أزرار أقل", category: "أنظمة التصميم", readTime: "قراءة 5 دقائق", href: "#" },
+      { title: "سلّم خطوط لنظامي كتابة", category: "التايبوغرافيا", readTime: "قراءة 11 دقيقة", href: "#" },
+      { title: "توثيق المكوّن ليستطيع وكيل ذكي استخدامه", category: "الهندسة", readTime: "قراءة 11 دقيقة", href: "#" },
+      { title: "ما أخبرنا به أول استبيان لنظام التصميم", category: "الأبحاث", readTime: "قراءة 9 دقائق", href: "#" },
+    ],
+    emptyLabel: "لا توجد مقالات بعد.",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const blogCardsLatestPopularSplitCopy = COPY
+
+/*
+ * Every class below is written out whole: Tailwind finds a class by reading
+ * the source, so none is built from pieces. The hover and focus ones are from
+ * Tablet up (Mobile has none).
+ */
+const ROW =
+  "group/row flex items-center gap-4 border-t py-4 transition-opacity duration-[120ms] motion-reduce:transition-none [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:[@container(max-width:39.99rem)]:opacity-[0.92]"
+const THUMB_HOVER =
+  "group-hover/row:[@container(min-width:40rem)]:motion-safe:scale-[1.06] group-focus-visible/row:[@container(min-width:40rem)]:motion-safe:scale-[1.06]"
+const TITLE_HOVER =
+  "group-hover/row:[@container(min-width:40rem)]:text-info group-focus-visible/row:[@container(min-width:40rem)]:text-info"
+const RANK_HOVER =
+  "group-hover/row:[@container(min-width:40rem)]:text-foreground group-focus-visible/row:[@container(min-width:40rem)]:text-foreground"
+
+function RowCopy({ post, titleId }: { post: BlogCardsLatestPopularSplitPost; titleId: string }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-1">
+      <h3
+        id={titleId}
+        className={cn(
+          "text-base font-medium text-foreground transition-colors duration-[180ms] motion-reduce:transition-none",
+          TITLE_HOVER
+        )}
+      >
+        {post.title}
+      </h3>
+      <p className="flex items-center gap-2 text-xs text-muted-foreground">
+        <span>{post.category}</span>
+        <span aria-hidden="true" className="size-[3px] rounded-full bg-muted-foreground" />
+        <span>{post.readTime}</span>
+      </p>
+    </div>
+  )
+}
+
+function ColumnHeader({ heading, note }: { heading: React.ReactNode; note: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1 pb-4">
+      <h2 className="text-xl font-semibold text-foreground [@container(min-width:40rem)]:text-2xl">{heading}</h2>
+      {note ? <p className="text-sm text-muted-foreground">{note}</p> : null}
+    </div>
+  )
+}
+
+export interface BlogCardsLatestPopularSplitProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<BlogCardsLatestPopularSplitCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function BlogCardsLatestPopularSplit({
+  locale = "en",
+  latestHeading,
+  latestNote,
+  latest,
+  popularHeading,
+  popularNote,
+  popular,
+  emptyLabel,
+  className,
+  ...props
+}: BlogCardsLatestPopularSplitProps) {
+  const copy = COPY[locale]
+  const titleId = React.useId()
+  const latestRows = latest ?? copy.latest
+  const popularRows = popular ?? copy.popular
+  const empty = emptyLabel ?? copy.emptyLabel
+
+  return (
+    <section
+      className={cn(
+        "[container-type:inline-size] bg-background px-4 py-8 md:px-6 md:py-16 lg:px-20 lg:py-24",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-10 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:gap-0">
+        <div className="flex min-w-0 flex-col border-b pb-8 [@container(min-width:40rem)]:flex-1 [@container(min-width:40rem)]:border-b-0 [@container(min-width:40rem)]:border-e [@container(min-width:40rem)]:pb-0 [@container(min-width:40rem)]:pe-6 [@container(min-width:64rem)]:pe-10">
+          <ColumnHeader
+            heading={latestHeading ?? copy.latestHeading}
+            note={latestNote ?? copy.latestNote}
+          />
+          {latestRows.length === 0 ? (
+            <p className="border-t py-4 text-sm text-muted-foreground">{empty}</p>
+          ) : (
+            <ul>
+              {latestRows.map((post, index) => (
+                <li key={index} className="flex">
+                  <a href={post.href} aria-labelledby={`${titleId}-l${index}`} className={cn(ROW, "w-full")}>
+                    <div className="relative h-12 w-16 shrink-0 overflow-hidden rounded-sm bg-muted [@container(min-width:40rem)]:h-11 [@container(min-width:40rem)]:w-14 [@container(min-width:64rem)]:h-14 [@container(min-width:64rem)]:w-[72px]">
+                      {post.image ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                          src={post.image.src}
+                          alt={post.image.alt}
+                          loading="lazy"
+                          className={cn(
+                            "absolute inset-0 size-full object-cover transition-transform duration-[180ms] ease-out motion-reduce:transition-none",
+                            THUMB_HOVER
+                          )}
+                        />
+                      ) : null}
+                    </div>
+                    <RowCopy post={post} titleId={`${titleId}-l${index}`} />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div className="flex min-w-0 flex-col [@container(min-width:40rem)]:flex-1 [@container(min-width:40rem)]:ps-6 [@container(min-width:64rem)]:ps-10">
+          <ColumnHeader
+            heading={popularHeading ?? copy.popularHeading}
+            note={popularNote ?? copy.popularNote}
+          />
+          {popularRows.length === 0 ? (
+            <p className="border-t py-4 text-sm text-muted-foreground">{empty}</p>
+          ) : (
+            <ol>
+              {popularRows.map((post, index) => (
+                <li key={index} className="flex">
+                  <a href={post.href} aria-labelledby={`${titleId}-p${index}`} className={cn(ROW, "w-full")}>
+                    <span
+                      aria-hidden="true"
+                      className={cn(
+                        "text-xl font-semibold tabular-nums text-border transition-colors duration-[180ms] motion-reduce:transition-none",
+                        RANK_HOVER
+                      )}
+                    >
+                      {String(index + 1).padStart(2, "0")}
+                    </span>
+                    <RowCopy post={post} titleId={`${titleId}-p${index}`} />
+                  </a>
+                </li>
+              ))}
+            </ol>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}