Update style

Author: Yndira-E

src/_includes/layouts/use-case.njk

@@ -34,7 +34,7 @@ sitemapPriority: 0.7
     ============================================================ -->
     <div class="w-full px-6 bg-[radial-gradient(ellipse_120%_140%_at_50%_-20%,theme(colors.indigo.50)_0%,theme(colors.white)_60%)]">
         <div class="max-w-screen-lg mx-auto py-16 sm:py-24 text-center">
-            <p class="uppercase tracking-widest text-sm font-semibold text-indigo-500 mb-4">Use case</p>
+            <p class="uppercase text-sm font-semibold text-indigo-500 mb-4">Use case</p>
             <h1 class="m-auto max-w-3xl font-medium"><span class="text-indigo-600">{{ title }}</span></h1>
             <p class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">{{ problem }}</p>
             <div class="mt-10 flex flex-wrap gap-4 justify-center">
@@ -69,7 +69,7 @@ sitemapPriority: 0.7
     ============================================================ -->
     <div id="customer-pain" class="w-full py-16 sm:py-24 px-6 bg-white scroll-mt-16">
         <div class="max-w-screen-lg mx-auto">
-            <p class="uppercase tracking-widest text-xs font-semibold text-indigo-400 mb-2">01 · Customer pain</p>
+            <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">01 · Customer pain</p>
             <h2 class="max-md:text-center"><span class="text-red-600">{{ customerPain.heading }}</span></h2>
             <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
                 {% for paragraph in customerPain.intro %}
@@ -97,7 +97,7 @@ sitemapPriority: 0.7
     ============================================================ -->
     <div id="outcome-first" class="w-full py-16 sm:py-24 px-6 bg-gray-50 border-y border-gray-100 scroll-mt-16">
         <div class="max-w-screen-lg mx-auto">
-            <p class="uppercase tracking-widest text-xs font-semibold text-indigo-400 mb-2">02 · Outcome first</p>
+            <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">02 · Outcome first</p>
             <h2 class="max-md:text-center">{{ outcomeFirst.heading }}</h2>
             <p class="mt-4 max-w-3xl text-gray-600">{{ outcomeFirst.intro }}</p>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
@@ -119,7 +119,7 @@ sitemapPriority: 0.7
     ============================================================ -->
     <div id="why-it-matters" class="w-full bg-[radial-gradient(ellipse_120%_120%_at_50%_120%,theme(colors.indigo.600)_0%,theme(colors.indigo.900)_100%)] py-16 sm:py-24 px-6 scroll-mt-16">
         <div class="max-w-screen-lg mx-auto">
-            <p class="uppercase tracking-widest text-xs font-semibold text-indigo-300 mb-2">03 · Why this is important</p>
+            <p class="uppercase text-xs font-semibold text-indigo-300 mb-2">03 · Why this is important</p>
             <h2 class="text-white max-md:text-center">{{ whyItMatters.heading }}</h2>
             <p class="mt-4 max-w-3xl text-indigo-100 font-light">{{ whyItMatters.intro }}</p>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
@@ -143,7 +143,7 @@ sitemapPriority: 0.7
     ============================================================ -->
     <div id="competition" class="w-full py-16 sm:py-24 px-6 bg-white scroll-mt-16">
         <div class="max-w-screen-lg mx-auto">
-            <p class="uppercase tracking-widest text-xs font-semibold text-indigo-400 mb-2">04 · Why off-the-shelf doesn't work</p>
+            <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">04 · Why off-the-shelf doesn't work</p>
             <h2 class="max-md:text-center">{{ competition.heading }}</h2>
             <p class="mt-4 max-w-3xl text-gray-600">{{ competition.intro }}</p>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
@@ -168,7 +168,7 @@ sitemapPriority: 0.7
     ============================================================ -->
     <div id="with-without" class="w-full py-16 sm:py-24 px-6 comparison-section-bg scroll-mt-16">
         <div class="max-w-screen-lg mx-auto">
-            <p class="uppercase tracking-widest text-xs font-semibold text-indigo-400 mb-2">05 · With / without FlowFuse</p>
+            <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">05 · With / without FlowFuse</p>
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6">
                 <div>
                     <h3 class="text-gray-500 m-0">Without FlowFuse</h3>

src/use-cases.njk

@@ -3,15 +3,15 @@ layout: layouts/base.njk
 sitemapPriority: 0.8
 title: "Use Cases"
 meta:
-  title: "Use Cases | FlowFuse"
+  title: "Use Cases"
   description: "Generic operational workflow patterns for industrial teams. Turn events into action with FlowFuse. Placeholder skeleton hub."
 ---
 <div class="w-full">
 
     <!-- HERO with CTA buttons -->
     <div class="w-full px-6 bg-[radial-gradient(ellipse_120%_140%_at_50%_-20%,theme(colors.indigo.50)_0%,theme(colors.white)_60%)]">
         <div class="max-w-screen-lg mx-auto py-16 sm:py-24 text-center">
-            <p class="uppercase tracking-widest text-sm font-semibold text-indigo-500 mb-4">Use cases</p>
+            <p class="uppercase text-sm font-semibold text-indigo-500 mb-4">Use cases</p>
             <h1 class="m-auto max-w-3xl font-medium">Turn industrial events into <span class="text-indigo-600">action</span></h1>
             <p class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">Operational workflow patterns that follow Event, Decision, Action. Explore how each one is operationalized with FlowFuse.</p>
             <div class="mt-10 flex flex-wrap gap-4 justify-center">
@@ -25,7 +25,7 @@ meta:
         <div class="max-w-screen-lg mx-auto">
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {% for uc in collections["use-case"] | sort(false, true, "data.title") %}
-                <a href="{{ uc.url }}" class="group flex flex-col gap-3 rounded-xl border border-gray-200 p-6 bg-white hover:border-indigo-300 hover:shadow-sm transition-all">
+                <a href="{{ uc.url }}" class="group hover:no-underline flex flex-col gap-3 rounded-xl border border-gray-200 p-6 bg-white hover:border-indigo-300 hover:shadow-sm transition-all">
                     <h3 class="m-0 text-gray-800 group-hover:text-indigo-600 transition-colors">{{ uc.data.title }}</h3>
                     <p class="m-0 text-gray-600 text-sm flex-grow">{{ uc.data.problem }}</p>
                     <span class="mt-2 text-indigo-600 text-sm font-semibold flex items-center gap-2">
@@ -38,15 +38,11 @@ meta:
         </div>
     </div>
 
-    <!-- RESOURCES BLOCK PLACEHOLDER -->
-    {% set relatedTag = "" %}
-    {% include "components/related-resources.njk" %}
-
     <!-- CLOSING CTA BAND -->
     <div class="w-full px-6 py-20">
         <div class="ff-blue-card max-md:max-w-xl md:max-w-screen-lg mx-auto pt-12 pb-10 text-center">
             <h3 class="mb-4 w-full text-center">See it on your workflow</h3>
-            <p class="text-gray-600 mb-8 max-w-xl mx-auto">Talk to an expert, or get started with FlowFuse today.</p>
+            <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">Talk to an expert, or get started with FlowFuse today.</p>
             <div class="flex flex-wrap gap-4 justify-center">
                 <a class="ff-btn ff-btn--highlight min-h-[40px] uppercase" href="/contact-us/" onclick="capture('cta-talk-to-expert', {'position': 'footer', 'page': 'use-cases-hub'})">Talk to an expert</a>
                 <a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-join', {'position': 'footer', 'page': 'use-cases-hub'})">Get started</a>