basic structure and a bit of content

frontend/src/components/timeline.tsx

@@ -0,0 +1,24 @@
+import * as elements from "typed-html";
+import { TimelineCard } from "./timeline_card";
+import { TimelineItem } from "../structs/timeline_item";
+
+const Timeline = ({ timeline_items }: {timeline_items: TimelineItem[]}) => {
+    return (
+        <div class={'container md:p-3'}>
+            <div class="flex flex-col items-center justify-center">
+                <div class="text-6xl font-bold text-black">Timeline</div>
+                <div class="text-2xl text-black">A little about us</div>
+                <ol class="relative border-s border-gray-200 dark:border-gray-700">
+                    {timeline_items.map((item, index) => (
+                        // <div class={`card ${index % 2 === 0 ? 'left' : 'right'}`}>
+                        <li class={`mb-10 ms-6 p-4 rounded-lg shadow-md ${index % 2 === 0 ? 'bg-white' : 'bg-gray-200'}`}>
+                            <TimelineCard {...item}/>
+                        </li>
+                    ))}
+                </ol>
+            </div>
+        </div>
+    );
+};
+
+export { Timeline }