Implement hextra/hero-section, defining a h2 heading on front-page

[fmunteanu]

Feature Description

Hi @imfing,

On Hextra front-page, I need the ability to insert a h2 heading, defining additional section titles. For example, adding a subtitle above hextra/feature-grid.

Proposed Solution

I created the following layouts/shortcodes/hextra/hero-section.html shortcode, implementing a section:

{{- $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>

Code Usage

Example of hextra/hero-section shortcode usage:

<div class="hx-mt-6 hx-mb-6">
{{< hextra/hero-section >}}
  Used Technologies
{{< /hextra/hero-section >}}
</div>

Implementation Result

Note the Used Technologies section title, above the hextra/feature-grid:

[mafendi]

Hi!

Could you please provide a code that you use for a big picture in a hero section?

Thanks.

[fmunteanu]

@mafendi see #387.

[mafendi]

@mafendi see #387.

Thanks! 😊

[fmunteanu]

I think these two hero features are very useful for the front-page and should be implemented.

[imfing]

@fmunteanu Can you send PRs for these? thank you

[fmunteanu]

@imfing will do, thank you for considering it!

[fmunteanu]

@imfing I implemented header size in #390. Is a nice addition to original feature.

[fmunteanu]

@mafendi https://github.com/imfing/hextra/pull/389 was merged into main branch, see the PR description for the updated code usage.

@imfing can we please have #390 merged also?

[mafendi]

@mafendi https://github.com/imfing/hextra/pull/389 was merged into main branch, see the PR description for the updated code usage.

@imfing can we please have #390 merged also?

Great, thanks a lot 👍