@fifthbell/brokaw 0.1.39

package/src/templates/partials/components/home/landing.hbs

@@ -0,0 +1,111 @@
+<div class='grid grid-cols-12 lg:grid-cols-12 gap-6 px-6'>
+  <div class='col-span-12 lg:col-span-9 xl:col-span-6 pt-6 lg:pt-8 space-y-12'>
+    {{#with homepageSlots.landing.headline1}}
+      <section class='lg:col-span-12 xl:col-span-8 flex flex-col'>
+        <a href='{{url}}' class='relative flex-shrink-0 block'>
+          <img src='{{featuredImage.url}}' alt='{{featuredImage.alt}}' class='w-full h-[400px] object-cover rounded' fetchpriority='high' />
+        </a>
+
+        <div class='mt-4 flex-grow flex flex-col'>
+          <div class='flex items-center text-slate-500 dark:text-slate-400 text-xs mb-4'>
+            <span class='uppercase font-bold tracking-wider'>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+            <span class='mx-2'>•</span>
+            <span class='article-time' data-timestamp='{{updatedAt}}'>{{formatDate updatedAt}}</span>
+          </div>
+
+          <h1 class='text-4xl font-bold font-encode text-slate-900 dark:text-slate-100 mb-4 leading-11'>
+            <a href='{{url}}' class='hover:text-[#b21100] dark:hover:text-[#ff2e1a] transition-colors'>{{title}}</a>
+          </h1>
+
+          <p class='text-slate-600 dark:text-slate-400 text-2xl mb-4 font-serif leading-8'>{{excerpt}}</p>
+
+          <div class='grid grid-cols-1 md:grid-cols-2 gap-6 mt-4 border-t border-slate-200 dark:border-slate-800 pt-6 flex-grow'>
+            {{#each ../homepageSlots.landing.sub1}}
+              {{> components/snack
+                url=url
+                title=title
+                excerpt=excerpt
+                showExcerpt=false
+                image=featuredImage.url
+                alt=featuredImage.alt
+                readTime=(formatDate updatedAt)
+                imageSize='w-24 h-24'
+                imageClasses=''
+                titleTextSize='text-lg'
+                titleFontWeight='font-medium'
+                titleClasses='font-encode'
+              }}
+            {{/each}}
+          </div>
+        </div>
+      </section>
+    {{/with}}
+  </div>
+
+  <div class='col-span-12 md:col-span-7 lg:col-span-3 pt-6 lg:pt-8 space-y-12'>
+    <section class='lg:col-span-1 xl:col-span-4 flex flex-col h-full justify-between'>
+      {{#with homepageSlots.landing.card5}}
+        <div class='bg-black text-white mb-6 flex-grow flex flex-col'>
+          <div class='flex-grow min-h-[250px] bg-cover bg-center flex flex-col justify-end' style='background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0.7) 50%, transparent 100%), url("{{featuredImage.url}}");'>
+            <div class='px-4'>
+              <span class='bg-[#b21100] text-white px-3 py-2 text-xs tracking-[1px] font-bold uppercase inline-block mb-2'>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+              <h2 class='text-2xl font-bold font-encode mb-2'>
+                <a href='{{url}}' class='hover:text-slate-300 transition-colors'>{{title}}</a>
+              </h2>
+            </div>
+          </div>
+          <div class='px-4 pb-4 flex-shrink-0'>
+            <p class='text-sm'>{{excerpt}}</p>
+            <span class='text-xs text-slate-500 dark:text-slate-400 mt-2 block'>{{formatDate updatedAt}}</span>
+          </div>
+        </div>
+      {{/with}}
+
+      {{#with homepageSlots.landing.headline6}}
+        <div class='flex flex-col'>
+          <a href='{{url}}' class='mb-4 flex-shrink-0 h-[180px] block'>
+            <img src='{{featuredImage.url}}' width='500' height='200' alt='{{featuredImage.alt}}' class='w-full h-full object-cover rounded' />
+          </a>
+          <div class='flex items-center text-slate-500 dark:text-slate-400 text-sm mb-2'>
+            <span class='uppercase font-bold'>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+            <span class='mx-2'>•</span>
+            <span>{{formatDate updatedAt}}</span>
+          </div>
+          <h2 class='text-xl font-bold font-encode mb-2 text-slate-900 dark:text-slate-100'>
+            <a href='{{url}}' class='hover:text-[#b21100] dark:hover:text-[#ff2e1a] transition-colors'>{{title}}</a>
+          </h2>
+          <p class='text-slate-600 dark:text-slate-400 flex-grow'>{{excerpt}}</p>
+        </div>
+      {{/with}}
+    </section>
+  </div>
+
+  <aside class='col-span-12 md:col-span-5 lg:col-span-12 xl:col-span-3 pt-6'>
+    <div class='space-y-10'>
+      <div class='space-y-6'>
+        <div class='flex items-center justify-between border-b border-slate-300 dark:border-slate-700 pb-2'>
+          <h3 class='kicker text-red-700 dark:text-red-500 text-lg'>Top Stories</h3>
+        </div>
+      </div>
+
+      <div class='space-y-6 lg:grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-1 lg:gap-6 lg:space-y-0'>
+        {{#each homepageSlots.landing.topStories}}
+          {{> components/snack
+            url=url
+            title=title
+            image=featuredImage.url
+            alt=featuredImage.alt
+            readTime=(formatDate updatedAt)
+            showExcerpt=false
+            className='pb-4 border-b border-slate-200 dark:border-slate-800'
+            imageSize='w-20 h-20'
+            imageClasses='bg-slate-200 grayscale hover:grayscale-0 transition-all'
+            titleTextSize='text-xl'
+            titleFontWeight='font-bold'
+            titleClasses='font-serif leading-snug'
+          }}
+        {{/each}}
+      </div>
+    </div>
+  </aside>
+</div>

package/src/templates/partials/components/home/main.hbs

@@ -0,0 +1,63 @@
+<div class='min-h-screen font-sans text-slate-900 dark:text-slate-100 antialiased'>
+  {{#unless (eq showHero false)}}
+    {{#if hero}}
+      {{> components/spotlight-hero
+        title=(coalesce heroTitle title)
+        slug=(coalesce heroSlug slug)
+        excerpt=(coalesce heroExcerpt excerpt)
+        hero=hero
+        slides=heroSlides
+        related=(coalesce heroRelated homepageSlots.landing.sub1)
+        categories=(coalesce heroCategories categories)
+      }}
+    {{else}}
+      {{#if heroSlides}}
+        {{> components/spotlight-hero
+          title=(coalesce heroTitle title)
+          slug=(coalesce heroSlug slug)
+          excerpt=(coalesce heroExcerpt excerpt)
+          hero=hero
+          slides=heroSlides
+          related=(coalesce heroRelated homepageSlots.landing.sub1)
+          categories=(coalesce heroCategories categories)
+        }}
+      {{/if}}
+    {{/if}}
+  {{/unless}}
+
+  <main class='max-w-[1440px] mx-auto min-h-screen'>
+    {{#unless (eq showTrending false)}}
+      {{> components/trending}}
+    {{/unless}}
+
+    {{#if showEditorialHero}}
+      {{> components/editorial-hero
+        title=(coalesce heroTitle title)
+        slug=(coalesce heroSlug slug)
+        excerpt=(coalesce heroExcerpt excerpt)
+        hero=hero
+        slides=heroSlides
+        related=(coalesce heroRelated homepageSlots.landing.sub1)
+        categories=(coalesce heroCategories categories)
+      }}
+    {{/if}}
+
+    {{#unless (eq showBreakingNews false)}}
+      {{#if breakingNews}}
+        {{> components/breaking-news breakingNews}}
+      {{/if}}
+    {{/unless}}
+
+    {{#unless (eq showLanding false)}}
+      {{> components/home/landing}}
+    {{/unless}}
+
+    {{#unless (eq showMustRead false)}}
+      {{> components/home/must-read}}
+    {{/unless}}
+
+    {{#unless (eq showMoreStories false)}}
+      {{> components/home/more-stories}}
+    {{/unless}}
+  </main>
+</div>

package/src/templates/partials/components/home/more-stories.hbs

@@ -0,0 +1,23 @@
+<div class='py-12 px-6'>
+  <div class='flex items-center gap-2 mb-6 border-l-4 border-[#b21100] pl-4'>
+    <h2 class='text-2xl font-bold tracking-tight font-serif'>More Stories</h2>
+  </div>
+  <div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12'>
+    {{#each homepageSlots.moreStories}}
+      {{> components/snack
+        url=url
+        title=title
+        excerpt=excerpt
+        categories=categories
+        readTime=(formatDate updatedAt)
+        showImage=false
+        metaTextSize='text-xs'
+        titleTextSize='text-lg'
+        titleFontWeight='font-bold'
+        titleClasses='font-encode'
+        excerptTextSize='text-lg'
+        excerptClasses='font-serif leading-relaxed'
+      }}
+    {{/each}}
+  </div>
+</div>

package/src/templates/partials/components/home/must-read.hbs

@@ -0,0 +1,77 @@
+<div class='grid grid-cols-12 lg:grid-cols-12 gap-6 px-6'>
+  <div class='col-span-12 lg:col-span-12 xl:col-span-9 pt-6 lg:pt-8 space-y-12'>
+    <div class='grid grid-cols-2 gap-6'>
+      <div class='col-span-2'>
+        <div class='flex items-center gap-2 mb-6 border-l-4 border-[#b21100] pl-4'>
+          <h2 class='text-2xl font-bold tracking-tight font-serif'>Must Read</h2>
+        </div>
+        {{#with homepageSlots.mustRead.lead}}
+          <article class='grid grid-cols-1 md:grid-cols-2 gap-6 items-start'>
+            <a href='{{url}}' class='block aspect-video overflow-hidden bg-slate-100'>
+              <img src='{{featuredImage.url}}' alt='{{featuredImage.alt}}' class='w-full h-full object-cover transition-transform duration-500 hover:scale-105' />
+            </a>
+            <div class='space-y-3'>
+              <div class='flex items-center text-xs font-bold uppercase tracking-wider text-[#b21100]'>
+                <span>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+              </div>
+              <h3 class='headline text-3xl font-bold font-serif leading-tight'>
+                <a href='{{url}}' class='hover:underline decoration-[#b21100]'>{{title}}</a>
+              </h3>
+              <p class='text-slate-600 dark:text-slate-400 font-serif leading-relaxed line-clamp-3 text-xl'>{{excerpt}}</p>
+              <span class='text-s text-slate-500 dark:text-slate-400 block font-sans'>{{formatDate updatedAt}}</span>
+            </div>
+          </article>
+        {{/with}}
+      </div>
+
+      {{#with homepageSlots.mustRead.headline16}}
+        <div class='col-span-1'>
+          <article class='group'>
+            <a href='{{url}}' class='block mb-4 overflow-hidden aspect-[3/2] bg-slate-100'>
+              <img src='{{featuredImage.url}}' alt='{{featuredImage.alt}}' class='w-full h-full object-cover transition-transform duration-500 group-hover:scale-105' />
+            </a>
+            <div class='space-y-2'>
+              <span class='text-xs font-bold text-[#b21100] uppercase tracking-wider'>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+              <h3 class='text-2xl font-bold font-serif leading-tight group-hover:underline'>
+                <a href='{{url}}'>{{title}}</a>
+              </h3>
+            </div>
+          </article>
+        </div>
+      {{/with}}
+
+      {{#with homepageSlots.mustRead.headline17}}
+        <div class='col-span-1'>
+          <article class='group'>
+            <a href='{{url}}' class='block mb-4 overflow-hidden aspect-[3/2] bg-slate-100'>
+              <img src='{{featuredImage.url}}' alt='{{featuredImage.alt}}' class='w-full h-full object-cover transition-transform duration-500 group-hover:scale-105' />
+            </a>
+            <div class='space-y-2'>
+              <span class='text-xs font-bold text-[#0066cc] uppercase tracking-wider'>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+              <h3 class='text-2xl font-bold font-serif leading-tight group-hover:underline'>
+                <a href='{{url}}'>{{title}}</a>
+              </h3>
+            </div>
+          </article>
+        </div>
+      {{/with}}
+    </div>
+  </div>
+
+  <aside class='col-span-12 xl:col-span-3 pt-6'>
+    <div class='space-y-10'>
+      <div class='space-y-6 md:grid grid-cols-2 xl:grid-cols-1 lg:gap-6 lg:space-y-0'>
+        {{#each homepageSlots.mustRead.sidebar}}
+          {{> components/snack
+            url=url
+            title=title
+            readTime=(formatDate updatedAt)
+            showImage=false
+            showExcerpt=false
+            className='pb-4 border-b border-slate-200 dark:border-slate-800 last:border-0'
+          }}
+        {{/each}}
+      </div>
+    </div>
+  </aside>
+</div>

package/src/templates/partials/components/live-story/main.hbs

@@ -0,0 +1,229 @@
+<main class='min-h-screen pb-16'>
+
+  {{!-- Hero Image --}}
+  {{#if featuredImage.url}}
+  <section class='relative w-full overflow-hidden'>
+    <div class='hidden lg:block absolute inset-0 pointer-events-none' aria-hidden='true'>
+      <img
+        src='{{featuredImage.url}}'
+        alt=''
+        class='w-full h-full object-cover scale-125 opacity-90'
+        style='filter: blur(16px);'
+      />
+    </div>
+
+    <div class='relative max-w-screen-xl mx-auto px-0 lg:px-6 xl:px-8'>
+      <figure
+        class='relative overflow-hidden lg:rounded-lg'
+        style='box-shadow: -34px 0 36px -26px rgba(0,0,0,0.55), -74px 0 74px -62px rgba(0,0,0,0.4), 34px 0 36px -26px rgba(0,0,0,0.55), 74px 0 74px -62px rgba(0,0,0,0.4);'
+      >
+        {{#if media}}
+          <div data-carousel='live-story-hero' class='relative'>
+            <div class='carousel-slide active opacity-100 transition-opacity duration-700'>
+              <img
+                src='{{featuredImage.url}}'
+                alt='{{featuredImage.alt}}'
+                class='w-full h-auto object-cover object-center'
+                style='max-height:520px;'
+                fetchpriority='high'
+              />
+            </div>
+            {{#each media}}
+            <div class='carousel-slide hidden opacity-0 transition-opacity duration-700'>
+              <img
+                src='{{url}}'
+                alt='{{alt}}'
+                class='w-full h-auto object-cover object-center'
+                style='max-height:520px;'
+                loading='lazy'
+              />
+            </div>
+            {{/each}}
+            <div class='absolute inset-x-0 bottom-4 z-20 flex items-center justify-center gap-2'>
+              <button type='button' class='carousel-dot w-2.5 h-2.5 rounded-full active' aria-label='Show image 1'></button>
+              {{#each media}}
+              <button type='button' class='carousel-dot w-2.5 h-2.5 rounded-full' aria-label='Show image'></button>
+              {{/each}}
+            </div>
+            <button
+              type='button'
+              class='carousel-next absolute right-3 top-1/2 -translate-y-1/2 z-20 w-9 h-9 rounded-full bg-black/55 text-white text-lg leading-none flex items-center justify-center'
+              aria-label='Next image'
+            >
+              &rsaquo;
+            </button>
+          </div>
+        {{else}}
+          <img
+            src='{{featuredImage.url}}'
+            alt='{{featuredImage.alt}}'
+            class='w-full h-auto object-cover object-center'
+            style='max-height:520px;'
+            fetchpriority='high'
+          />
+        {{/if}}
+      </figure>
+    </div>
+  </section>
+  {{/if}}
+
+  <div class='max-w-screen-xl mx-auto px-4 xl:px-8'>
+
+    {{!-- Story Header --}}
+    <header class='pt-8 pb-8 border-b border-slate-200 dark:border-slate-700'>
+      <div class='flex items-center gap-3 mb-4'>
+        <span class='inline-flex items-center px-3 py-1.5 bg-[#cc0000] text-white text-xs font-bold tracking-[0.08em] uppercase leading-none'>LIVE</span>
+        {{#with (lookup categories 0)}}
+          <span class='text-xs font-bold uppercase tracking-wider text-[#b21100] dark:text-[#ff2e1a]'>{{name}}</span>
+        {{/with}}
+        {{#if status}}
+          {{#if (eq status "live")}}
+            {{> 'components/ui/status-badge' variant="live" label=status}}
+          {{else if (eq status "ended")}}
+            {{> 'components/ui/status-badge' variant="offline" label=status}}
+          {{else if (eq status "archived")}}
+            {{> 'components/ui/status-badge' variant="offline" label=status}}
+          {{else}}
+            {{> 'components/ui/status-badge' variant="info" label=status}}
+          {{/if}}
+        {{/if}}
+        {{#if updatedAt}}
+          <span class='text-xs text-slate-500 dark:text-slate-400'>Last updated: <span class='article-time' data-timestamp='{{updatedAt}}'>{{formatDate updatedAt}}</span></span>
+        {{/if}}
+      </div>
+
+      <h1 class='text-3xl xl:text-5xl font-bold font-encode text-slate-900 dark:text-slate-100 leading-tight mb-4 max-w-4xl'>
+        {{title}}
+      </h1>
+
+      {{#if excerpt}}
+      <p class='text-xl text-slate-600 dark:text-slate-400 font-serif leading-relaxed mb-6 max-w-3xl'>
+        {{excerpt}}
+      </p>
+      {{/if}}
+    </header>
+
+    {{!-- Body Grid --}}
+    <div class='pt-8 xl:grid xl:grid-cols-12 xl:gap-12'>
+
+      {{!-- Feed Column --}}
+      <div class='xl:col-span-8'>
+
+        {{!-- Key Points Summary (kept in template, temporarily hidden) --}}
+        {{#if liveStory.keyPoints}}
+        <div class='hidden mb-10 rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700'>
+          <div class='px-6 py-3 bg-[#cc0000]'>
+            <h2 class='text-sm font-bold tracking-[0.06em] uppercase text-white leading-none'>Here's the latest</h2>
+          </div>
+          <div class='px-6 py-5 bg-slate-50 dark:bg-slate-800'>
+            <ul class='space-y-3'>
+              {{#each liveStory.keyPoints}}
+              <li class='flex items-start gap-3'>
+                <span class='w-2 h-2 rounded-full bg-[#cc0000] flex-shrink-0 mt-2'></span>
+                <p class='text-base leading-relaxed text-slate-700 dark:text-slate-300'>{{this}}</p>
+              </li>
+              {{/each}}
+            </ul>
+          </div>
+        </div>
+        {{/if}}
+
+        {{!-- SofaScore Match Momentum --}}
+        {{#with (sofascoreWidgetUrl sofascore_id) as |widgetUrl|}}
+        <div class='mb-10 rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900'>
+          <div class='px-6 py-3 bg-slate-100 dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700'>
+            <h2 class='text-sm font-bold tracking-[0.06em] uppercase text-slate-700 dark:text-slate-200 leading-none'>Match Momentum</h2>
+          </div>
+          <div class='p-4'>
+            <iframe
+              width='100%'
+              height='286'
+              src='{{widgetUrl}}'
+              title='SofaScore Attack Momentum'
+              frameborder='0'
+              scrolling='no'
+              loading='lazy'
+              referrerpolicy='no-referrer-when-downgrade'
+              style='border:0;'
+            ></iframe>
+            {{#with (sofascoreMatchUrl sofascore_id) as |matchUrl|}}
+              <div style='font-size:12px;font-family:Arial,sans-serif'>
+                <a href='{{matchUrl}}' target='_blank' rel='noreferrer'>{{title}} Live Score</a>
+              </div>
+            {{/with}}
+          </div>
+        </div>
+        {{/with}}
+
+        {{!-- Live Updates Timeline --}}
+        <div>
+          {{#each body}}
+            {{#if (eq type 'liveUpdate')}}
+            <div class='relative pl-9 pb-10'>
+              <div class='absolute left-0 top-[5px] w-4 h-4 rounded-full bg-[#4FC3F7] ring-4 ring-white dark:ring-slate-950 z-10'></div>
+              {{#unless @last}}
+              <div class='absolute left-[7px] top-5 bottom-0 w-0.5 bg-slate-200 dark:bg-slate-700'></div>
+              {{/unless}}
+              <div class='flex flex-col gap-1'>
+                <time class='text-sm font-semibold text-[#0ea5e9] dark:text-[#4FC3F7]'>{{formatDate timestamp}}</time>
+                {{#if headline}}
+                <h2 class='text-xl font-bold font-encode text-slate-900 dark:text-slate-100 leading-snug mt-1'>
+                  {{headline}}
+                </h2>
+                {{/if}}
+                {{#if html}}
+                <div class='text-base leading-relaxed text-slate-700 dark:text-slate-300 mt-2 [&_img]:w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:mt-3'>
+                  {{{html}}}
+                </div>
+                {{/if}}
+                {{#if media}}
+                <div class='mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3'>
+                  {{#each media}}
+                  <figure class='overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900'>
+                    <img src='{{url}}' alt='{{alt}}' class='w-full h-auto object-cover' loading='lazy' />
+                    {{#if caption}}
+                    <figcaption class='px-3 py-2 text-xs text-slate-500 dark:text-slate-400'>
+                      {{caption}}
+                    </figcaption>
+                    {{/if}}
+                  </figure>
+                  {{/each}}
+                </div>
+                {{/if}}
+              </div>
+            </div>
+            {{else}}
+            <div class='relative pl-9 pb-6'>
+              <div class='absolute left-[5px] top-[5px] w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-slate-600 z-10'></div>
+              {{#unless @last}}
+              <div class='absolute left-[9px] top-4 bottom-0 w-0.5 bg-slate-200 dark:bg-slate-700'></div>
+              {{/unless}}
+              <div>
+                {{> (lookup . 'type')}}
+              </div>
+            </div>
+            {{/if}}
+          {{/each}}
+        </div>
+
+      </div>
+
+      {{!-- Sidebar --}}
+      <aside class='xl:col-span-4 mt-10 xl:mt-0'>
+        <div class='sticky top-6'>
+          {{#if articles.[0]}}
+          <h3 class='text-xs font-bold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400 mb-4 pb-2 border-b border-slate-200 dark:border-slate-700'>
+            Related Articles
+          </h3>
+          <div>
+            {{#each (slice articles 0 6)}}
+              {{> components/snack showExcerpt=true}}
+            {{/each}}
+          </div>
+          {{/if}}
+        </div>
+      </aside>
+
+    </div>
+  </div>
+</main>

package/src/templates/partials/components/not-found/main.hbs

@@ -0,0 +1,28 @@
+<main class='flex-1 container mx-auto px-4 py-16'>
+  <div class='max-w-2xl mx-auto text-center'>
+    <div class='mb-8'>
+      <h1 class='text-9xl font-bold text-[#b21100] dark:text-[#ff2e1a]' aria-label='Page not found error'>404</h1>
+    </div>
+
+    <h2 class='text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4'>Page Not Found</h2>
+
+    <p class='text-xl text-slate-600 dark:text-slate-400 mb-8 font-serif leading-relaxed'>
+      We couldn't find the page you're looking for. The article or page you're trying to access may have been moved, deleted, or never existed.
+    </p>
+
+    <a href='{{logoLink}}' class='inline-flex items-center gap-2 bg-[#b21100] hover:bg-[#8a0d00] dark:bg-[#ff2e1a] dark:hover:bg-[#cc2515] text-white font-bold py-3 px-6 rounded transition-colors'>
+      <span>Go to Homepage</span>
+    </a>
+
+    <div class='mt-12 pt-8 border-t border-slate-200 dark:border-slate-800'>
+      <p class='text-sm text-slate-600 dark:text-slate-400 mb-4'>Or explore our categories:</p>
+      <div class='flex flex-wrap justify-center gap-4'>
+        {{#if navigation.categories}}
+          {{#each navigation.categories}}
+            <a href='/{{slug}}' class='text-[#b21100] dark:text-[#ff2e1a] hover:underline font-semibold'>{{name}}</a>
+          {{/each}}
+        {{/if}}
+      </div>
+    </div>
+  </div>
+</main>