Build world campaigns rewards and recaps

resources/js/components/worlds/WorldRecapArticleCard.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+export default function WorldRecapArticleCard({ article }) {
+  if (!article?.url) {
+    return null
+  }
+
+  return (
+    <section className="mt-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
+      <div className="grid gap-5 lg:grid-cols-[minmax(0,1.1fr)_16rem] lg:items-center">
+        <div>
+          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{article.eyebrow || 'Recap article'}</div>
+          <h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">{article.title}</h2>
+          {article.description ? <p className="mt-3 max-w-3xl text-sm leading-7 text-slate-300">{article.description}</p> : null}
+          {Array.isArray(article.meta) && article.meta.length > 0 ? <div className="mt-4 flex flex-wrap gap-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{article.meta.map((item) => <span key={item}>{item}</span>)}</div> : null}
+        </div>
+        <div className="flex flex-col gap-3 lg:items-end">
+          {article.image ? <img src={article.image} alt={article.title} className="h-32 w-full rounded-[24px] border border-white/10 object-cover lg:w-56" /> : null}
+          <a href={article.url} data-world-event="world_cta_clicked" data-world-section-key="recap_article" data-world-cta-key="recap_article" className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">{article.cta_label || 'Read article'}<i className="fa-solid fa-arrow-right" /></a>
+        </div>
+      </div>
+    </section>
+  )
+}