feat: migrate Hugo Bootstrap theme to latest Hugo with Tailwind CSS and refactor codebase

* replace Bootstrap-based styling with Tailwind CSS
* update theme compatibility for latest Hugo version
* refactor templates and partials
* fix outdated code and broken components
* improve project structure and maintainability
* optimize styling and frontend build setup

layouts/blog/list.html

@@ -1,49 +1,24 @@
 {{ define "main" }}
+  <section class="section pt-46">
+    <div class="container">
+      <h2 class="h1 mb-4 text-center uppercase">
+        {{ .Title | markdownify }}
+      </h2>
+      <p class="text-balance text-center">
+        {{ .Description | markdownify }}
+      </p>
+      <div class="grid gap-8 md:grid-cols-2 mt-14">
+        {{ $paginator:= .Paginate .RegularPages }}
+        {{ range $paginator.Pages }}
+          {{ partial "components/blog-card" . }}
+        {{ end }}
+      </div>
 
-<section class="site-blog-header">
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-lg-8 text-center">
-        <h1>{{ .Title }}</h1>
-        <p>
-          {{ .Params.description }}
-        </p>
+      <div class="mt-14 flex justify-center">
+        {{ partial "components/pagination.html" . }}
       </div>
     </div>
-  </div>
-</section>
-
-<section class="site-blog">
-  <div class="container">
-    <div class="row">
-      {{ range (.Paginator 4).Pages }}
-      <div class="col-lg-6">
-        <article class="site-blog-post">
-          {{ with .Params.image }}
-          <div class="site-blog-post-thumb">
-            <img src="{{ . | absURL }}" alt="post-thumb">
-          </div>
-          {{ end }}
-          <div class="site-blog-post-content">
-            <span>{{ .PublishDate.Format "January 2, 2006" }}</span>
-            <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
-            <p>
-              {{ .Summary }} ...
-            </p>
-            <a href="{{ .Permalink }}" class="read-more">{{ .Site.Params.blog.read_more }}</a>
-          </div>
-        </article>
-      </div>
-      {{ end }}
-      <div class="col-12">
-        <div class="site-blog-pagination">
-          {{ template "_internal/pagination.html" . }}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-{{ partial "call-to-action.html" . }}
+  </section>
 
+  {{ partial "call-to-action" . }}
 {{ end }}

layouts/blog/single.html

@@ -1,20 +1,60 @@
 {{ define "main" }}
+  <section class="section pt-46">
+    <div class="container">
+      <div class="row justify-center">
+        <article class="lg:col-10">
+          <ul class="mb-4">
+            <li class="mr-4 inline-block">
+              <p>
+                <i class="fa-regular fa-circle-user mr-2"></i
+                >{{ .Params.author }}
+              </a>
+            </li>
+            <li class="mr-4 inline-block">
+              <i class="fa-regular fa-clock mr-2"></i>
+              {{ time.Format ":date_long" .PublishDate }}
+            </li>
+          </ul>
 
-<section class="site-blog details">
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-lg-8">
-        <article class="site-blog-details">
-          <p><span>{{ .PublishDate.Format "January 2, 2006" }}</span> by <span>{{ .Params.author }}</span></p>
-          <h2 class="blog-title">{{ .Title }}</h2>
-          <img class="feature-image" src="{{ .Params.feature_image | absURL }}" alt="blog-feature-image">
-          {{ .Content }}
+          {{ $image:= .Params.image }}
+          {{ if $image }}
+            <div class="mb-10">
+              {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "w-full") }}
+            </div>
+          {{ end }}
+          <h1 class="h2 mb-4">
+            {{ .Title }}
+          </h1>
+          <div class="content mb-10">
+            {{ partial "toc.html" (dict "Class" "blog" "Collapsed" false "TableOfContents" .TableOfContents ) }}
+            {{ .Content }}
+          </div>
+          <div class="row justify-end">
+            <div class="lg:col-6 flex items-center lg:justify-end">
+              <h5>{{ T "share" | default "Share" }} :</h5>
+              {{ partial "social-share" (dict "Context" . "Class" "share-icons" "Title" .Title "Whatsapp" false "Telegram" false "Linkedin" false "Pinterest" false "Tumblr" false "Vk" false "Reddit" false) }}
+            </div>
+          </div>
         </article>
       </div>
+
+      <!-- Related posts -->
+      {{ $related := .Site.RegularPages.Related . | first 10 }}
+      {{ $related = $related | shuffle | first 2 }}
+      {{ with $related }}
+        <div class="section pb-0">
+          <h2 class="h3 mb-12">
+            {{ T "related_posts" | default "Related Posts" }}
+          </h2>
+          <div class="row">
+            {{ range . }}
+              <div class="md:col-6 mb-14">
+                {{ partial "components/blog-card" . }}
+              </div>
+            {{ end }}
+          </div>
+        </div>
+      {{ end }}
     </div>
-  </div>
-</section>
-
-{{ partial "call-to-action.html" . }}
-
-{{ end }}
+  </section>
+{{ end }}