diff --git a/layouts/shortcodes/hextra/hero-section.html b/layouts/shortcodes/hextra/hero-section.html
new file mode 100644
index 0000000..cf495d4
--- /dev/null
+++ b/layouts/shortcodes/hextra/hero-section.html
@@ -0,0 +1,8 @@
+{{- $style := .Get "style" -}}
+
+<h2
+  class="not-prose hx-text-4xl hx-font-bold hx-leading-none hx-tracking-tighter md:hx-text-3xl hx-py-2 hx-bg-clip-text hx-text-transparent hx-bg-gradient-to-r hx-from-gray-900 hx-to-gray-600 dark:hx-from-gray-100 dark:hx-to-gray-400"
+  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
+>
+  {{ .Inner | markdownify }}
+</h2>