Downloaded theme

themes/minimal-black/layouts/partials/home/hero.html

@@ -0,0 +1,94 @@
+{{- $hero := .Site.Params.hero -}}
+
+<div class="grid gap-8 md:grid-cols-[minmax(0,2fr)_minmax(0,1.2fr)] items-start">
+  <div class="space-y-5 animate-fade-up">
+    <!-- Badge + availability -->
+    <div class="flex flex-wrap items-center gap-4">
+      {{ with $hero.badge }}
+        <p class="eyebrow font-medium text-sm text-accent">{{ . }}</p>
+      {{ end }}
+
+      {{ if $hero.available }}
+        <span class="badge-available px-3">
+          <span class="h-1.5 w-1.5 rounded-full bg-white/95"></span>
+          <span>{{ default "Available for work" $hero.availableLabel }}</span>
+        </span>
+      {{ end }}
+    </div>
+
+    <div class="space-y-2">
+      <h1 class="heading-page text-3xl sm:text-4xl">
+        {{ default "Hi, I’m Your Name." $hero.title }}
+      </h1>
+      {{ with $hero.role }}
+        <p class="text-sm font-medium text-muted">
+          {{ . }}
+        </p>
+      {{ end }}
+    </div>
+
+    {{ with $hero.summary }}
+      <p class="max-w-xl text-sm text-muted">
+        {{ . }}
+      </p>
+    {{ end }}
+
+    <!-- Meta row: location + focus -->
+    <div class="mt-3 flex flex-wrap gap-2 text-[0.7rem] text-muted">
+      {{ with $hero.location }}
+        <span class="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/90 px-3 py-1.5">
+          <i class="fa-solid fa-location-dot text-[0.8rem]"></i>
+          <span class="font-medium">{{ . }}</span>
+        </span>
+      {{ end }}
+
+      {{ with $hero.focus }}
+        <span class="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/80 px-3 py-1.5">
+          <i class="fa-regular fa-circle-dot text-[0.8rem]"></i>
+          <span>{{ . }}</span>
+        </span>
+      {{ end }}
+    </div>
+
+    <!-- Optional highlight pills -->
+    {{ with $hero.highlights }}
+      <div class="mt-3 flex flex-wrap gap-2">
+        {{ range . }}
+          <span class="inline-flex items-center rounded-full border border-border bg-surface/80 px-3 py-1 text-[0.7rem] text-muted">
+            {{ .label }}
+          </span>
+        {{ end }}
+      </div>
+    {{ end }}
+
+    <!-- CTAs -->
+    <div class="mt-4 flex flex-wrap items-center gap-3">
+      {{ with $hero.primary }}
+        <a href="{{ .href | default "/projects/" }}" class="btn-primary">
+          {{ .label | default "View projects" }}
+        </a>
+      {{ end }}
+
+      {{ with $hero.secondary }}
+        <a href="{{ .href | default "/blog/" }}" class="btn-ghost link-underline">
+          {{ .label | default "Read the blog" }}
+        </a>
+      {{ end }}
+    </div>
+  </div>
+
+  <!-- Avatar ONLY if provided -->
+  {{ with $hero.avatar }}
+    <div class="order-first md:order-none">
+      <div class="card card-pad flex items-center justify-center md:justify-end">
+        <div class="h-24 w-24 sm:h-28 sm:w-28 overflow-hidden rounded-2xl border border-border bg-surface shadow-md">
+          <img
+            src="{{ . | relURL }}"
+            alt="{{ $hero.title | default $.Site.Title }}"
+            class="h-full w-full object-cover"
+          />
+        </div>
+      </div>
+    </div>
+  {{ end }}
+</div>