feat: port Features/CTA blox

modules/blox-tailwind/assets/css/main.css

@@ -29,3 +29,43 @@
 .hbb-section {
   @apply mb-10 last:mb-0;
 }
+
+/* Fill padding of `.home-section` parent */
+ .home-section-bg {
+   position: absolute;
+   top: 0;
+   left: 0;
+   height: 100%; /* Or fill-available when supported. */
+   width: 100%; /* Or fill-available when supported. */
+   z-index: -1; /* Place bg div behind content. */
+ }
+
+/* Default background image properties for home sections. */
+.home-section-bg.bg-image {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.bg-video {
+  position: absolute;
+  top: 0;
+  max-height: initial; /* Override general `video` selector's max-height.  */
+}
+
+.bg-video.flip {
+  transform: rotateY(180deg);
+}
+
+/* Create a parallax-like scrolling effect on desktop browsers. */
+.parallax {
+  background-attachment: fixed;
+}
+
+/* Workaround issue with mobile browser support for fixed parallax background.
+@include media-breakpoint-down(md) {
+  .parallax {
+    background-attachment: scroll;
+  }
+}
+*/

modules/blox-tailwind/layouts/partials/blox/cta-card.html

@@ -0,0 +1,26 @@
+{{/* Hugo Blox: CTA Card */}}
+{{/* Documentation: https://hugoblox.com/blocks/ */}}
+{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}
+
+{{/* Initialise */}}
+{{ $page := .wcPage }}
+{{ $block := .wcBlock }}
+
+{{ $title := $block.content.title | emojify | $page.RenderString }}
+{{ $text := $block.content.text | emojify | $page.RenderString }}
+
+<div class="bg-black p-8 md:px-20 md:py-20 mt-20 mx-auto max-w-5xl rounded-lg flex flex-col items-center text-center">
+  <h2 class="text-white text-4xl md:text-6xl tracking-tight">
+    {{ $title }}
+  </h2>
+  <p class="text-slate-400 mt-4 text-lg md:text-xl">
+    {{ $text }}
+  </p>
+  {{ with $block.content.button }}
+  <div class="flex mt-5">
+    <a href="{{.url}}" class="rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200 px-5 py-2.5 bg-white text-black border-2 border-transparent">
+      {{.text}}
+    </a>
+  </div>
+  {{ end }}
+</div>

modules/blox-tailwind/layouts/partials/blox/cta-image-paragraph.html

@@ -0,0 +1,29 @@
+{{/* Hugo Blox: CTA Image Paragraph */}}
+{{/* Documentation: https://hugoblox.com/blocks/ */}}
+{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}
+
+{{/* Initialise */}}
+{{ $page := .wcPage }}
+{{ $block := .wcBlock }}
+
+<section class="bg-white dark:bg-gray-900">
+  {{ range $idx, $item := $block.content.items }}
+  {{ $title := .title | emojify | $page.RenderString }}
+  {{ $text := .text | emojify | $page.RenderString }}
+  {{ $image := resources.GetMatch (path.Join "media" .image) }}
+  {{ $image = $image.Process "Resize 800x webp" }}
+  <div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
+    <img class="w-full" src="{{$image.RelPermalink}}" alt="{{$title | plainify}}" {{ if (modBool $idx 2)}}style="order: 1"{{end}}>
+    <div class="mt-4 md:mt-0">
+      <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{{$title}}</h2>
+      <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">{{$text}}</p>
+      {{ with .button }}
+      <a href="{{.url}}" class="inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900">
+        {{.text}}
+        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </a>
+      {{ end }}
+    </div>
+  </div>
+  {{ end }}
+</section>

modules/blox-tailwind/layouts/partials/blox/features.html

@@ -0,0 +1,35 @@
+{{/* Hugo Blox: Features */}}
+{{/* Documentation: https://hugoblox.com/blocks/ */}}
+{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}
+
+{{/* Initialise */}}
+{{ $page := .wcPage }}
+{{ $block := .wcBlock }}
+{{ $title := $block.content.title | emojify | $page.RenderString }}
+{{ $text := $block.content.text | emojify | $page.RenderString }}
+
+<section>
+  <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
+    <div class="max-w-screen-md mb-8 lg:mb-16 flex flex-col justify-center mx-auto">
+      {{ with $title }}
+      <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white text-center">{{.}}</h2>
+      {{ end }}
+      {{ with $text }}
+      <p class="text-gray-500 sm:text-xl dark:text-gray-400 text-center">{{.}}</p>
+      {{ end }}
+    </div>
+    <div class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0">
+      {{ range $block.content.items }}
+        <div>
+          {{ with .icon }}
+          <div class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900 text-primary-600 dark:text-primary-300">
+            {{ partial "functions/get_icon" (dict "name" . "attributes" `class="w-5 h-5 lg:w-6 lg:h-6"`)  }}
+          </div>
+          {{ end }}
+          <h3 class="mb-2 text-xl font-bold dark:text-white">{{ .name | $page.RenderString }}</h3>
+          <p class="text-gray-500 dark:text-gray-400">{{ .description | $page.RenderString }}</p>
+        </div>
+      {{ end }}
+    </div>
+  </div>
+</section>

modules/blox-tailwind/layouts/partials/functions/get_icon.html

@@ -1,17 +1,31 @@
 {{/* Return the requested SVG icon */}}
 {{/* Search for the icon in the Hugo Blox Builder icon library, falling back to user's icon library */}}
 
-{{- $icon := index site.Data.icons .name -}}
+{{ $dirFile := path.Split .name }}
+{{ $pack := .pack | default (strings.Replace $dirFile.Dir "/" "") | default "hero" }}
+{{ $name := $dirFile.File }}
 
-{{/* Currently, only other pack supported is `brands` icon pack in sub-folder */}}
-{{ $pack := .pack | default "" }}
-{{ $pack = cond (gt (len $pack) 0) (printf "%s/" $pack) "" }}
+{{- $icon_pack := index site.Data.icons $pack -}}
+{{- $icon := index (index $icon_pack "icons") $name -}}
 
-{{ if not $icon }}
-  {{ with resources.GetMatch (printf "media/icons/%s%s.svg" $pack .name) }}
-    {{ $icon = .Content }}
-  {{else}}
-    {{ warnf "The icon `%s.svg` was not found in your `assets/media/icons/` folder" .name }}
+{{ if $icon }}
+  {{ if eq $pack "hb" }}
+    {{/* Pass */}}
+  {{ else }}
+    {{ $icon_body := index $icon "body" }}
+    {{ $icon_size := index $icon_pack "height" }}
+    {{ $icon = printf `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 %s %s">%s</svg>` (cast.ToString $icon_size) (cast.ToString $icon_size) $icon_body }}
+  {{ end }}
+{{ else }}
+  {{ with index (index site.Data.icons.hb "icons") $name -}}
+    {{ $icon = . }}
+  {{ else }}
+    {{ with resources.GetMatch (printf "media/icons/%s%s.svg" $pack .name) }}
+      {{ $icon = .Content }}
+    {{else}}
+      {{ warnf "The icon `%s.svg` was not found in your `assets/media/icons/` folder" .name }}
+      {{ $icon = index (index site.Data.icons.hb "icons") "hugo" }}
+    {{ end }}
   {{ end }}
 {{ end }}
 

modules/blox-tailwind/layouts/partials/functions/parse_block_v2.html

@@ -122,7 +122,7 @@
 {{end}}
 
 {{/* Dedicated child div for bg prevents parallax 100% height issue within new CSS grid page wrapper. */}}
-<section id="{{$hash_id}}" class="hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
+<section id="{{$hash_id}}" class="relative hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}} {{print $extra_attributes | safeHTMLAttr}}>
  <div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image.parallax | default true) }} parallax{{end}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>
    {{with $bg_video}}<video class="bg-video {{$bg_video_class}}" playsinline="" preload="auto" loop="" muted autoplay="" tabindex="-1" width="100%" height="100%" src="{{.RelPermalink}}" style="width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>{{end}}
  </div>