starters: update Landing

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

@@ -69,3 +69,7 @@
   }
 }
 */
+
+.powered-by a {
+  @apply underline text-blue-600 hover:text-blue-800
+}

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

@@ -8,17 +8,21 @@
 
 {{ $title := $block.content.title | emojify | $page.RenderString }}
 {{ $text := $block.content.text | emojify | $page.RenderString }}
+{{ $card_class := $block.design.card.css_class }}
+{{ $card_style := $block.design.card.css_style }}
 
-<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">
+
+<div class="{{with $card_class}}{{.}}{{else}}bg-black{{end}} p-8 md:px-20 md:py-20 mx-auto max-w-5xl rounded-lg flex flex-col items-center text-center"
+     {{with $card_style}}style="{{. | safeCSS}}"{{end}}>
   <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">
+  <p class="text-slate-300 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">
+    <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 hover:bg-gray-300 text-black border-2 border-transparent">
       {{.text}}
     </a>
   </div>

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

@@ -0,0 +1,37 @@
+{{/* Hugo Blox: Stats */}}
+{{/* 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="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
+
+  {{ with $title }}
+  <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">
+      <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white text-center">{{.}}</h2>
+      {{ with $text }}
+      <p class="text-gray-500 sm:text-xl dark:text-gray-400 text-center">{{.}}</p>
+      {{ end }}
+    </div>
+  </div>
+  {{ end }}
+
+  <div class="grid grid-cols-3 row-gap-8">
+    {{ range $idx, $item := $block.content.items }}
+    <div class="text-center {{if ne (math.Add $idx 1) (len $block.content.items) }}md:border-r{{end}}">
+      <h6 class="text-4xl font-bold lg:text-5xl xl:text-6xl">
+        {{- .statistic | $page.RenderString -}}
+      </h6>
+      <p class="text-sm font-medium tracking-widest lg:text-base text-gray-800 dark:text-gray-300">
+        {{- .description | $page.RenderString -}}
+      </p>
+    </div>
+    {{ end }}
+  </div>
+</div>

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

@@ -0,0 +1,48 @@
+{{/* Hugo Blox: Testimonials */}}
+{{/* 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="max-w-screen-xl px-4 py-8 mx-auto text-center lg:py-16 lg:px-6">
+
+    {{ with $title }}
+    <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">
+        <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white text-center">{{.}}</h2>
+        {{ with $text }}
+        <p class="text-gray-500 sm:text-xl dark:text-gray-400 text-center">{{.}}</p>
+        {{ end }}
+      </div>
+    </div>
+    {{ end }}
+
+    {{ range $idx, $item := $block.content.items }}
+    <div class="max-w-screen-md mx-auto {{if ne (math.Add $idx 1) (len $block.content.items) }}mb-12{{end}}">
+      <svg class="h-16 mx-auto mb-3 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32">
+        <path d="M9.563 8.469l-0.813-1.25c-5.625 3.781-8.75 8.375-8.75 12.156 0 3.656 2.688 5.375 4.969 5.375 2.875 0 4.906-2.438 4.906-5 0-2.156-1.375-4-3.219-4.688-0.531-0.188-1.031-0.344-1.031-1.25 0-1.156 0.844-2.875 3.938-5.344zM21.969 8.469l-0.813-1.25c-5.563 3.781-8.75 8.375-8.75 12.156 0 3.656 2.75 5.375 5.031 5.375 2.906 0 4.969-2.438 4.969-5 0-2.156-1.406-4-3.313-4.688-0.531-0.188-1-0.344-1-1.25 0-1.156 0.875-2.875 3.875-5.344z"/>
+      </svg>
+      <blockquote>
+        <p class="text-2xl font-medium text-gray-900 dark:text-white">"{{.text | $page.RenderString}}"</p>
+      </blockquote>
+      <div class="flex items-center justify-center mt-6 space-x-3">
+        {{ $image := resources.GetMatch (path.Join "media" .image) }}
+        {{ with $image }}
+        {{ $image = $image.Process "Fill 75x75 center webp" }}
+        <img class="w-12 h-12 rounded-full" src="{{$image.RelPermalink}}" alt="{{$item.name | plainify}}">
+        {{ end }}
+        <div class="flex flex-col items-center">
+          <div class="pr-3 font-medium text-gray-900 dark:text-white">{{.name}}</div>
+          <div class="pl-3 text-sm font-light text-gray-500 dark:text-gray-400">{{.role}}</div>
+        </div>
+      </div>
+    </div>
+    {{ end }}
+
+  </div>
+</section>

modules/blox-tailwind/tailwind.config.js

@@ -25,7 +25,7 @@ module.exports = {
     'pl-4', 'pl-8', 'pl-12',   /* TOC indents */
     'min-h-screen', /* Blox options */
   ],
-  whitelistPatterns: [/^bg-white/, /^bg-gray-/], /* /^pl-/ for TOC */
+  whitelistPatterns: [/^bg-white/, /^bg-gray-/, /^bg-primary-/], /* /^pl-/ for TOC */
   darkMode: ['class'],
   theme: {
     extend: {

starters/landing-page/content/_index.md

@@ -36,6 +36,27 @@ sections:
           filename: bg-triangles.svg
           filters:
             brightness: 0.5
+  - block: stats
+    content:
+      items:
+        - statistic: "1M+"
+          description: |
+            Websites built  
+            with Hugo Blox
+        - statistic: "10k+"
+          description: |
+            GitHub stars  
+            since 2016
+        - statistic: "3k+"
+          description: |
+            Discord community  
+            for support
+    design:
+      # Section background color (CSS class)
+      css_class: "bg-gray-100 dark:bg-gray-900"
+      # Reduce spacing
+      spacing:
+        padding: ["1rem", 0, "1rem", 0]
   - block: features
     id: features
     content:
@@ -89,7 +110,22 @@ sections:
             text: Join Discord
             url: https://discord.gg/z8wNYzb
     design:
+      # Section background color (CSS class)
       css_class: "bg-gray-100 dark:bg-gray-900"
+  - block: testimonials
+    content:
+      title: ""
+      text: ""
+      items:
+        - name: "Hugo Smith"
+          role: "Marketing Executive at X"
+          # Upload image to `assets/media/` and reference the filename here
+          image: "testimonial-1.jpg"
+          text: "Awesome, so easy to use and saved me so much work with the swappable pre-designed sections!"
+    design:
+      spacing:
+        # Reduce bottom spacing so the testimonial appears vertically centered between sections
+        padding: ["6rem", 0, 0, 0]
   - block: cta-card
     content:
       title: Build your future-proof website
@@ -97,4 +133,9 @@ sections:
       button:
         text: Get Started
         url: https://hugoblox.com/templates/
+    design:
+      card:
+        # Card background color (CSS class)
+        css_class: "bg-primary-700"
+        css_style: ""
 ---

starters/landing-page/go.mod

@@ -4,5 +4,5 @@ go 1.19
 
 require (
 	github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify v1.1.2-0.20231108143325-448ed0e3bd2b
-	github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.1.2-0.20231217135217-f1e179b23dc3
+	github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.1.2-0.20240103201312-35f75d5b7e3b
 )