Add rollback bento

assets/components/rollback.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+const timelineItems = [
+  {
+    who: "New intern",
+    message: "YOLO, Leeeerrroooy Jenkins!!!. Let's GO! 🚀",
+    when: 'now',
+  },
+  {
+    who: "Senior developer",
+    message: 'Changed the color scheme, and tests.',
+    when: '1d ago',
+  },
+  {
+    who: "Senior developer",
+    message: 'Added checkout button, and added tests.',
+    when: '2d ago',
+  },
+  {
+    who: "Senior developer",
+    message: 'Setup checkout page and added product listing.',
+    when: '5d ago',
+  },
+  {
+    who: "Senior developer",
+    message: 'Integrated payment gateway.',
+    when: '6d ago',
+  }
+]
+
+function Item({ who, message, when }) {
+  return (
+    <li className="relative flex gap-x-4">
+      <div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
+        <div className="w-px bg-slate-600"></div>
+      </div>
+      <div className="relative flex size-6 flex-none items-center justify-center">
+        <div className="size-1.5 rounded-full bg-slate-600 ring-1 ring-slate-400"></div>
+      </div>
+      <p className="flex-auto py-0.5 text-xs/5 text-slate-400"><span className="font-bold text-slate-200">{who}</span> {message}</p>
+      <time className="flex-none py-0.5 text-xs/5 text-slate-300">{when}</time>
+    </li>
+  )
+}
+
+export function Timeline() {
+  return (
+    <div className="absolute -right-2 -top-14 bg-slate-900 w-96 h-96 rounded-bl-xl ring-1 ring-slate-700 overflow-hidden">
+      <div className="p-8">
+        <ul role="list" className="space-y-4">
+          <li className="relative flex gap-x-4 py-4">
+            <div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
+              <div className="w-px bg-slate-600"></div>
+            </div>
+          </li>
+          {timelineItems.map((item, index) => 
+            <Item key={index} who={item.who} message={item.message} when={item.when} />
+          )}
+        </ul>
+      </div>
+    </div>
+  )
+}

assets/js/app.jsx

@@ -33,6 +33,14 @@ import { Categories } from '../components/categories';
 import { Player } from '../components/player';
 import { Technologies } from '../components/technologies';
 import { SSHAccess } from '../components/access'; 
+import { Timeline } from '../components/rollback';
+
+function mountTimeline() {
+  const domNode = this.el;
+  const root = createRoot(domNode);
+
+  root.render(<Timeline />);
+}
 
 function mountCategories() {
   const domNode = this.el;
@@ -132,6 +140,11 @@ Hooks.MountAccess = {
   updated: mountAccess,
 }
 
+Hooks.MountTimeline = {
+  mounted: mountTimeline,
+  updated: mountTimeline,
+}
+
 Hooks.MountPlayer = {
   mounted() {
     const domNode = this.el;

lib/opsmaru_web/live/home_live.ex

@@ -107,8 +107,21 @@ defmodule OpsmaruWeb.HomeLive do
                   </div>
                 </div>
                 <div class="z-10 lg:col-span-2 lg:rounded-tr-4xl group relative flex flex-col overflow-hidden rounded-lg shadow-sm ring-1 ring-black/5 bg-slate-800 ring-white/15">
-                  <div class="relative h-80 shrink-0"></div>
-                  <div class="relative p-10"></div>
+                  <div id="rollback-timeline" class="relative h-80 shrink-0" phx-hook="MountTimeline">
+                  </div>
+                  <div class="relative p-10">
+                    <h3 class="font-mono text-xs/5 font-semibold uppercase tracking-widest text-gray-500 text-slate-400">
+                      {gettext("Rollback Easily")}
+                    </h3>
+                    <p class="mt-1 text-2xl/8 font-medium tracking-tight text-white">
+                      {gettext("Made a mistake?")}
+                    </p>
+                    <p class="mt-2 max-w-[600px] text-sm/6 text-slate-400">
+                      {gettext(
+                        "Not a problem, with a couple of clicks on the dashboard, you can rollback to a previous commit when everything was working."
+                      )}
+                    </p>
+                  </div>
                 </div>
                 <div class="lg:col-span-2 lg:rounded-bl-4xl group relative flex flex-col overflow-hidden rounded-lg shadow-sm ring-1 ring-black/5 bg-slate-800 ring-white/15">
                   <div