continued

implemented HTMX
implemented ORM (sequelize)

views/components/widgets.njk

@@ -0,0 +1,37 @@
+
+{% macro jumbotron(id='', title='', text='') %}
+<section class="w-full">
+    <div class="py-4 px-4 mx-auto max-w-screen-xl text-center">
+        <h1 class="my-4 font-extrabold tracking-tight leading-none text-gray-900 text-4xl md:text-5xl lg:text-6xl">
+            {{ title }}
+        </h1>
+        <p class="my-4 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
+            {{ text }}
+        </p>
+        {{ caller() }}
+    </div>
+</section>
+{% endmacro %}
+
+{% macro container(id='', width='w-full', flow='row', vAlign='center', hAlign='center') %}
+<div class="container mx-auto {{width}} pt-24 pb-32 flex flex-{{flow}} justify-{{hAlign}} items-{{vAlign}}">
+    {{ caller() }}
+</div>
+{% endmacro %}
+
+{% macro grid(id='', title='', columns=3) %}
+<div class="my-4 grid grid-cols-1 md:grid-cols-{{2 if columns > 2 else columns}} lg:grid-cols-{{columns}} gap-6">
+    {{ caller() }}
+</div>
+{% endmacro %}
+
+{% macro link(id='', link='#', title='New Link', description='Description') %}
+<a href="{{ link }}" target="_blank" class="p-8 bg-gray-50 rounded-md border border-gray-200 hover:border-purple-400">
+    <h4 class="font-medium text-gray-700 text-lg mb-4">
+        {{ title }}
+    </h4>
+    <p class="font-normal text-gray-500 text-md">
+        {{ description }}
+    </p>
+</a>
+{% endmacro %}