Commit workspace changes

resources/js/components/help/HelpGuideCard.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+const TONES = {
+  sky: 'border-sky-300/20 bg-sky-300/10',
+  amber: 'border-amber-300/20 bg-amber-400/10',
+  white: 'border-white/10 bg-black/20',
+}
+
+export default function HelpGuideCard({ item, links }) {
+  const primaryHref = item.primaryLinkKey ? links[item.primaryLinkKey] : null
+  const secondaryHref = item.secondaryLinkKey ? links[item.secondaryLinkKey] : null
+
+  return (
+    <article className={`rounded-[30px] border p-5 shadow-[0_18px_50px_rgba(2,6,23,0.18)] transition hover:-translate-y-0.5 hover:border-white/20 ${TONES[item.tone] || TONES.white}`}>
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-300">{item.eyebrow}</p>
+          <h3 className="mt-2 text-xl font-semibold tracking-[-0.03em] text-white">{item.title}</h3>
+        </div>
+        <span className="rounded-full border border-white/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-300">
+          {item.status}
+        </span>
+      </div>
+
+      <p className="mt-4 text-sm leading-7 text-slate-200/90">{item.description}</p>
+
+      {item.plannedPath ? (
+        <p className="mt-4 text-xs uppercase tracking-[0.16em] text-slate-400">Planned help route: {item.plannedPath}</p>
+      ) : null}
+
+      {Array.isArray(item.highlights) && item.highlights.length > 0 ? (
+        <ul className="mt-4 space-y-2 text-sm text-slate-200/90">
+          {item.highlights.map((highlight) => (
+            <li key={highlight} className="flex gap-3">
+              <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-white/80" />
+              <span>{highlight}</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      <div className="mt-5 flex flex-wrap gap-3">
+        {primaryHref ? (
+          <a href={primaryHref} className="rounded-full border border-white/15 bg-white/[0.08] px-4 py-2.5 text-sm font-semibold text-white transition hover:border-white/25 hover:bg-white/[0.12]">
+            {item.primaryLabel}
+          </a>
+        ) : null}
+        {secondaryHref ? (
+          <a href={secondaryHref} className="rounded-full border border-white/10 px-4 py-2.5 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">
+            {item.secondaryLabel}
+          </a>
+        ) : null}
+      </div>
+    </article>
+  )
+}