fix(team-showcase): align headers, square avatars, respect sort order

Author: gcushen

modules/blox/blox/team-showcase/block.html

@@ -51,7 +51,10 @@
 {{ $text := "" }}
 {{ with index $content "text" }}{{ $text = printf "%v" . | emojify | $page.RenderString }}{{ end }}
 {{ $alignClass := cond (eq $align "left") "items-start text-left" "items-center text-center" }}
-{{ $headerWidthClass := cond (eq $align "left") "max-w-5xl" "max-w-3xl mx-auto" }}
+{{ $headerContainerClass := cond (eq $align "left")
+  "flex flex-col gap-4 items-start text-left w-full max-w-5xl"
+  "flex flex-col gap-3 items-center text-center max-w-prose mx-auto justify-center px-6"
+}}
 {{ $ctaAlignClass := cond (eq $align "left") "text-left" "text-center" }}
 
 {{ $columnsClasses := dict
@@ -65,21 +68,21 @@
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
   {{/* Section Header */}}
-  <div class="flex flex-col gap-4 {{ $alignClass }} {{ $headerWidthClass }} mb-12">
+  <div class="{{ $headerContainerClass }} {{ $alignClass }} mb-12">
     {{ with $title }}
-    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white tracking-tight">
+    <div class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white tracking-tight">
       {{ . }}
-    </h2>
+    </div>
     {{ end }}
 
     {{ with $subtitle }}
-    <p class="mt-4 text-xl text-gray-600 dark:text-gray-400">
+    <p class="text-xl text-gray-600 dark:text-gray-400">
       {{ . }}
     </p>
     {{ end }}
 
     {{ with $text }}
-    <div class="mt-6 prose prose-lg lg:prose-xl dark:prose-invert max-w-3xl">
+    <div class="prose prose-lg lg:prose-xl dark:prose-invert max-w-prose">
       {{ . }}
     </div>
     {{ end }}
@@ -217,16 +220,15 @@ <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 pb-2 border-b b
           <div class="group relative">
             <div class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
 
-              <a href="{{ $link }}" class="block relative aspect-[4/5] overflow-hidden" aria-label="{{ $profile.title }}">
+              <a href="{{ $link }}" class="block relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-800" aria-label="{{ $profile.title }}">
                 {{ if $avatar }}
-                  {{ $image := $avatar.Fit "400x500 Center webp" }}
+                  {{ $image := $avatar.Fit "600x600 Center q90" }}
                   <img src="{{ $image.RelPermalink }}" 
                        alt="{{ $profile.title }}" 
                        width="{{ $image.Width }}" 
                        height="{{ $image.Height }}" 
                        loading="lazy"
-                       class="w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-110">
-                  <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                       class="w-full h-full object-contain object-center transition-transform duration-300 group-hover:scale-105">
                 {{ else }}
                   <div class="absolute inset-0 bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-4xl font-semibold text-gray-600 dark:text-gray-200">
                     {{ $initial }}
@@ -415,16 +417,15 @@ <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-1">
         {{ $initial := cond (gt (len $nameSource) 0) (upper (substr $nameSource 0 1)) "?" }}
         <div class="group relative">
           <div class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
-            <a href="{{ $link }}" class="block relative aspect-[4/5] overflow-hidden" aria-label="{{ $profile.title }}">
+            <a href="{{ $link }}" class="block relative aspect-square overflow-hidden bg-gray-100 dark:bg-gray-800" aria-label="{{ $profile.title }}">
               {{ if $avatar }}
-              {{ $image := $avatar.Fit "400x500 Center webp" }}
+              {{ $image := $avatar.Fit "600x600 Center q90" }}
               <img src="{{ $image.RelPermalink }}" 
                    alt="{{ $profile.title }}" 
                    width="{{ $image.Width }}" 
                    height="{{ $image.Height }}" 
                    loading="lazy"
-                   class="w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-110">
-              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                   class="w-full h-full object-contain object-center transition-transform duration-300 group-hover:scale-105">
               {{ else }}
               <div class="absolute inset-0 bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-4xl font-semibold text-gray-600 dark:text-gray-200">
                 {{ $initial }}