UI for workflow templates (#1715)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/routes/workflows/components/header/NarrativeCard.tsx

@@ -0,0 +1,17 @@
+type Props = {
+  index: number;
+  description: string;
+};
+
+function NarrativeCard({ index, description }: Props) {
+  return (
+    <div className="flex h-32 w-52 flex-col gap-3 rounded-xl bg-slate-elevation1 p-4">
+      <div className="flex size-6 items-center justify-center rounded-full bg-slate-400 text-slate-950">
+        {index}
+      </div>
+      <div className="text-sm text-slate-300">{description}</div>
+    </div>
+  );
+}
+
+export { NarrativeCard };