@gaulatti/giorgia 0.1.57

package/src/templates/partials/components/snack.hbs

@@ -0,0 +1,92 @@
+{{#*inline 'snackMetaImageRow'}}
+  {{#if category}}
+    <div class='w-full flex items-center justify-between {{#if metaTextSize}}{{metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+      <span class='text-[#8f0d00] dark:text-[#ff2e1a] uppercase font-bold tracking-wider'>{{category}}</span>
+      {{#if readTime}}
+        <span class='article-time text-slate-500 dark:text-slate-400'>{{readTime}}</span>
+      {{/if}}
+    </div>
+  {{else if (lookup categories 0)}}
+    {{#with (lookup categories 0)}}
+      <div class='w-full flex items-center justify-between {{#if ../metaTextSize}}{{../metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+        <span class='text-[#8f0d00] dark:text-[#ff2e1a] uppercase font-bold tracking-wider'>{{name}}</span>
+        {{#if ../readTime}}
+          <span class='article-time text-slate-500 dark:text-slate-400'>{{../readTime}}</span>
+        {{/if}}
+      </div>
+    {{/with}}
+  {{else if readTime}}
+    <div class='w-full flex items-center justify-end {{#if metaTextSize}}{{metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+      <span class='article-time text-slate-500 dark:text-slate-400'>{{readTime}}</span>
+    </div>
+  {{/if}}
+{{/inline}}
+
+{{#*inline 'snackMetaInline'}}
+  {{#if category}}
+    <div class='flex items-center {{#if metaTextSize}}{{metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+      <span class='text-[#8f0d00] dark:text-[#ff2e1a] uppercase font-bold tracking-wider'>{{category}}</span>
+      {{#if readTime}}
+          <span class='mx-2 text-slate-400 dark:text-slate-500'>•</span>
+          <span class='article-time text-slate-500 dark:text-slate-400'>{{readTime}}</span>
+      {{/if}}
+    </div>
+  {{else if (lookup categories 0)}}
+    {{#with (lookup categories 0)}}
+      <div class='flex items-center {{#if ../metaTextSize}}{{../metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+        <span class='text-[#8f0d00] dark:text-[#ff2e1a] uppercase font-bold tracking-wider'>{{name}}</span>
+        {{#if ../readTime}}
+          <span class='mx-2 text-slate-400 dark:text-slate-500'>•</span>
+          <span class='article-time text-slate-500 dark:text-slate-400'>{{../readTime}}</span>
+        {{/if}}
+      </div>
+    {{/with}}
+  {{else if readTime}}
+    <div class='flex items-center {{#if metaTextSize}}{{metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+      <span class='article-time text-slate-500 dark:text-slate-400'>{{readTime}}</span>
+    </div>
+  {{/if}}
+{{/inline}}
+
+<article class='{{#if className}}flex flex-col h-full {{className}} items-stretch{{else}}flex flex-col h-full py-4 border-t border-slate-100 dark:border-slate-800 items-stretch{{/if}}'>
+  {{#unless (eq showImage false)}}
+    {{#if image}}
+      {{> snackMetaImageRow}}
+    {{else if featuredImage.url}}
+      {{> snackMetaImageRow}}
+    {{/if}}
+  {{/unless}}
+
+  <div class='{{#if (eq showImage false)}}flex flex-col h-full{{else if image}}flex items-start gap-4{{else if featuredImage.url}}flex items-start gap-4{{else}}flex flex-col h-full{{/if}}'>
+    <div class='flex-1'>
+      {{#if (eq showImage false)}}
+        {{> snackMetaInline}}
+      {{else if image}}
+      {{else if featuredImage.url}}
+      {{else}}
+        {{> snackMetaInline}}
+      {{/if}}
+
+      <h3 class='{{#if titleFontWeight}}{{titleFontWeight}}{{else}}font-bold{{/if}} {{#if titleTextSize}}{{titleTextSize}}{{else}}text-lg{{/if}} leading-snug text-slate-900 dark:text-slate-100 {{#if titleClasses}}{{titleClasses}}{{else}}font-encode{{/if}}'>
+        <a href='{{url}}' class='hover:text-[#8f0d00] dark:hover:text-[#ff2e1a] transition-colors'>{{title}}</a>
+      </h3>
+      {{#unless (eq showExcerpt false)}}
+        {{#if excerpt}}
+          <p class='text-slate-500 dark:text-slate-400 {{#if excerptTextSize}}{{excerptTextSize}}{{else}}text-lg{{/if}} {{#if excerptClasses}}{{excerptClasses}}{{else}}font-serif leading-relaxed line-clamp-3{{/if}}'>{{excerpt}}</p>
+        {{/if}}
+      {{/unless}}
+    </div>
+
+    {{#unless (eq showImage false)}}
+      {{#if image}}
+        <a href='{{url}}' class='{{#if imageSize}}{{imageSize}}{{else}}w-32 h-24{{/if}} flex-shrink-0 block'>
+          <img src='{{image}}' alt='{{alt}}' class='w-full h-full object-cover rounded {{#if imageClasses}}{{imageClasses}}{{/if}}' />
+        </a>
+      {{else if featuredImage.url}}
+        <a href='{{url}}' class='{{#if imageSize}}{{imageSize}}{{else}}w-32 h-24{{/if}} flex-shrink-0 block'>
+          <img src='{{featuredImage.url}}' alt='{{featuredImage.alt}}' class='w-full h-full object-cover rounded {{#if imageClasses}}{{imageClasses}}{{/if}}' />
+        </a>
+      {{/if}}
+    {{/unless}}
+  </div>
+</article>

package/src/templates/partials/components/spotlight-hero.hbs

@@ -0,0 +1,59 @@
+<section class='spotlight-hero relative w-full min-h-[800px] md:min-h-[900px] bg-[#0C0C0C] overflow-hidden' data-carousel='spotlight'>
+  <div class='carousel-background absolute inset-0 w-full h-full'>
+    {{#if slides}}
+      {{#each slides}}
+        <div class='carousel-slide {{#if @first}}active opacity-100{{else}}hidden opacity-0{{/if}} absolute inset-0 bg-cover bg-center transition-opacity duration-700' style='background-image: radial-gradient(71.75% 69.5% at 50% 47.39%, rgba(0, 0, 0, 0) 0%, #000000 100%), url({{image}});'></div>
+      {{/each}}
+    {{else if hero.url}}
+      <div class='carousel-slide active opacity-100 absolute inset-0 bg-cover bg-center transition-opacity duration-700' style='background-image: radial-gradient(71.75% 69.5% at 50% 47.39%, rgba(0, 0, 0, 0) 0%, #000000 100%), url({{hero.url}});'></div>
+    {{else}}
+      <div class='carousel-slide active opacity-100 absolute inset-0 bg-cover bg-center transition-opacity duration-700' style='background-image: radial-gradient(71.75% 69.5% at 50% 47.39%, rgba(0, 0, 0, 0) 0%, #000000 100%), url(https://images.unsplash.com/photo-1586348943529-beaae6c28db9?w=1440&h=882&fit=crop);'></div>
+    {{/if}}
+  </div>
+
+  <div class='absolute bottom-0 left-0 right-0 h-[200px] pointer-events-none' style='background: linear-gradient(180deg, rgba(3, 7, 18, 0) 0%, var(--color-slate-950) 46.88%);'></div>
+
+  <div class='container mx-auto relative py-12 md:py-20 px-4 flex flex-col justify-end min-h-[800px] md:min-h-[900px]'>
+    <div class='absolute right-0 top-20 flex items-center gap-4'>
+      {{#if slides}}
+        {{#each slides}}
+          <button class='carousel-dot w-3 h-3 rounded-full {{#if @first}}active{{/if}}' data-slide='{{@index}}' aria-label='Go to slide {{add @index 1}}'></button>
+        {{/each}}
+      {{else}}
+        <button class='carousel-dot w-3 h-3 rounded-full active' data-slide='0' aria-label='Go to slide 1'></button>
+      {{/if}}
+      <button class='carousel-next w-10 h-10 flex items-center justify-center' aria-label='Next slide'>
+        <svg width='15' height='27' viewBox='0 0 15 27' fill='none'>
+          <path d='M1.5 1.5L13.5 13.5L1.5 25.5' stroke='#FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path>
+        </svg>
+      </button>
+    </div>
+
+    <div class='w-full max-w-[592px] border-l border-white pl-4 md:pl-10 flex flex-col gap-4 md:gap-6 mb-8 md:mb-12'>
+      <h1 class='text-3xl md:text-[44px] leading-tight md:leading-[56px] font-normal text-white font-sans'>
+        <a href='{{articleUrl slug=slug categories=categories language=@root.language}}' class='hover:text-slate-300 transition-colors'>{{title}}</a>
+      </h1>
+      <p class='text-xl md:text-2xl leading-7 md:leading-8 text-white self-stretch font-serif'>{{excerpt}}</p>
+      <a href='{{articleUrl slug=slug categories=categories language=@root.language}}' class='border border-[#717273] rounded-md px-4 py-[11px] h-11 flex items-center justify-center whitespace-nowrap self-start hover:bg-white/10 transition-colors'>
+        <span class='text-white text-base font-medium leading-[22px] font-sans'>Read More</span>
+      </a>
+    </div>
+
+    <div class='w-full flex flex-col gap-6'>
+      <div class='grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6'>
+        {{#each (slice related 0 4)}}
+          {{> components/headline
+            url=url
+            title=title
+            time=(formatDate (coalesce updatedAt publishedAt))
+            timestamp=(coalesce updatedAt publishedAt)
+            image=image
+            featuredImage=featuredImage
+            titleClass='text-sm lg:text-base leading-tight lg:leading-[22px] font-medium text-[#F9FAFB] font-sans'
+            imageFallbackBgClass='bg-slate-700'
+          }}
+        {{/each}}
+      </div>
+    </div>
+  </div>
+</section>

package/src/templates/partials/components/trending.hbs

@@ -0,0 +1,14 @@
+<div class='container mx-auto px-4 flex justify-around'>
+  <section class='inline-flex mx-auto my-6 gap-15 overflow-x-auto whitespace-nowrap scrollbar-thin scrollbar-thumb-slate-300 scrollbar-track-transparent'>
+    <article class='gap-1 flex items-center flex-none'>
+      <div class='flex flex-row items-center'>
+        <span class='h-2 w-2 rounded-full bg-[#b21100] mr-2'></span>
+        <span class='text-[#8f0d00] font-medium mr-1'>En vivo</span>
+      </div>
+      <span class='text-[#121212]'>Clásico Universitario</span>
+    </article>
+    <article class='gap-2 flex font-normal items-center flex-none'>Trending Up: Apagón en España</article>
+    <article class='gap-2 flex font-normal items-center flex-none'>Trending Up: Copa Libertadores</article>
+    <article class='gap-2 flex font-normal items-center flex-none'>Trending Up: Terremoto en Magallanes</article>
+  </section>
+</div>

package/src/templates/partials/components/ui/accordion.hbs

@@ -0,0 +1,30 @@
+<div class='border border-slate-200 dark:border-slate-800 {{#if className}}{{className}}{{/if}}'>
+  {{#each items}}
+    <details class='group border-b border-slate-200 dark:border-slate-800 last:border-b-0' {{#if open}}open{{/if}}>
+      <summary class='flex cursor-pointer list-none items-start justify-between gap-6 px-6 py-5 marker:hidden [&::-webkit-details-marker]:hidden hover:bg-slate-50 dark:hover:bg-slate-900/50'>
+        <span class='flex min-w-0 flex-col'>
+          <span class='text-base font-semibold text-slate-900 dark:text-slate-100'>{{title}}</span>
+          {{#if subtitle}}
+            <span class='mt-1.5 text-sm text-slate-500 dark:text-slate-400'>{{subtitle}}</span>
+          {{/if}}
+        </span>
+        <span class='mt-1 shrink-0 text-slate-400 transition-transform duration-200 group-open:rotate-180 group-open:text-[#8f0d00] dark:group-open:text-[#ff2e1a]' aria-hidden='true'>
+          <svg viewBox='0 0 20 20' fill='currentColor' class='h-5 w-5'>
+            <path fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'></path>
+          </svg>
+        </span>
+      </summary>
+      <div class='grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 group-open:grid-rows-[1fr]'>
+        <div class='overflow-hidden'>
+          <div class='border-l-2 border-[#b21100] dark:border-[#ff2e1a] mx-6 mb-6 mt-1 pl-5 pb-1 text-sm leading-relaxed text-slate-700 dark:text-slate-300'>
+            {{#if html}}
+              {{{html}}}
+            {{else}}
+              {{{content}}}
+            {{/if}}
+          </div>
+        </div>
+      </div>
+    </details>
+  {{/each}}
+</div>

package/src/templates/partials/components/ui/breadcrumb.hbs

@@ -0,0 +1,16 @@
+<nav aria-label='Breadcrumb' class='{{#if className}}{{className}}{{/if}}'>
+  <ol class='inline-flex flex-wrap items-center text-sm py-1'>
+    {{#each items}}
+      <li class='inline-flex items-center'>
+        {{#if @last}}
+          <span aria-current='page' class='font-semibold text-slate-900 dark:text-slate-100 px-1.5'>{{label}}</span>
+        {{else}}
+          <a href='{{coalesce url href}}' class='px-1.5 text-slate-500 transition-colors hover:text-[#8f0d00] dark:text-slate-400 dark:hover:text-[#ff2e1a]'>
+            {{label}}
+          </a>
+          <span class='text-slate-300 dark:text-slate-600 select-none font-light' aria-hidden='true'>/</span>
+        {{/if}}
+      </li>
+    {{/each}}
+  </ol>
+</nav>

package/src/templates/partials/components/ui/icon-button.hbs

@@ -0,0 +1,19 @@
+{{#if href}}
+  <a
+    href='{{href}}'
+    class='inline-flex items-center justify-center rounded-full w-9 h-9 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 transition-colors hover:border-[#b21100] hover:text-[#8f0d00] dark:hover:border-[#ff2e1a] dark:hover:text-[#ff2e1a] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#b21100] {{#if className}}{{className}}{{/if}}'
+    {{#if title}}title='{{title}}'{{/if}}
+    {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}}
+  >
+    {{{icon}}}
+  </a>
+{{else}}
+  <button
+    type='{{coalesce type "button"}}'
+    class='inline-flex items-center justify-center rounded-full w-9 h-9 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 transition-colors hover:border-[#b21100] hover:text-[#8f0d00] dark:hover:border-[#ff2e1a] dark:hover:text-[#ff2e1a] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#b21100] {{#if className}}{{className}}{{/if}}'
+    {{#if title}}title='{{title}}'{{/if}}
+    {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}}
+  >
+    {{{icon}}}
+  </button>
+{{/if}}

package/src/templates/partials/components/ui/loading-spinner.hbs

@@ -0,0 +1,27 @@
+<div class='inline-flex items-center justify-center gap-2 {{#if className}}{{className}}{{/if}}' role='status' aria-live='polite'>
+  {{#if (eq size "sm")}}
+    <svg viewBox='0 0 24 24' class='h-4 w-4 text-[#8f0d00] dark:text-[#ff2e1a]' fill='none' aria-hidden='true'>
+      <circle cx='12' cy='12' r='9' stroke='currentColor' stroke-width='2' opacity='0.15'/>
+      <circle cx='12' cy='12' r='9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-dasharray='16 40' fill='none'>
+        <animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.75s' repeatCount='indefinite'/>
+      </circle>
+    </svg>
+  {{else}}
+    {{#if (eq size "lg")}}
+      <svg viewBox='0 0 24 24' class='h-12 w-12 text-[#8f0d00] dark:text-[#ff2e1a]' fill='none' aria-hidden='true'>
+        <circle cx='12' cy='12' r='9' stroke='currentColor' stroke-width='2' opacity='0.15'/>
+        <circle cx='12' cy='12' r='9' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='20 36' fill='none'>
+          <animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.75s' repeatCount='indefinite'/>
+        </circle>
+      </svg>
+    {{else}}
+      <svg viewBox='0 0 24 24' class='h-8 w-8 text-[#8f0d00] dark:text-[#ff2e1a]' fill='none' aria-hidden='true'>
+        <circle cx='12' cy='12' r='9' stroke='currentColor' stroke-width='2' opacity='0.15'/>
+        <circle cx='12' cy='12' r='9' stroke='currentColor' stroke-width='2.25' stroke-linecap='round' stroke-dasharray='18 38' fill='none'>
+          <animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.75s' repeatCount='indefinite'/>
+        </circle>
+      </svg>
+    {{/if}}
+  {{/if}}
+  <span class='sr-only'>{{coalesce label "Loading"}}</span>
+</div>

package/src/templates/partials/components/ui/pagination.hbs

@@ -0,0 +1,56 @@
+<nav aria-label='Pagination' class='flex items-center justify-center gap-6 {{#if className}}{{className}}{{/if}}'>
+  {{#if prev.url}}
+    <a
+      href='{{prev.url}}'
+      class='inline-flex items-center gap-1 text-sm font-medium text-slate-500 dark:text-slate-400 transition-colors hover:text-[#8f0d00] dark:hover:text-[#ff2e1a]'
+      aria-label='Previous page'
+    >
+      <svg viewBox='0 0 20 20' fill='currentColor' class='h-4 w-4' aria-hidden='true'><path fill-rule='evenodd' d='M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z' clip-rule='evenodd'/></svg>
+      {{coalesce prev.label "Prev"}}
+    </a>
+  {{else}}
+    <span class='inline-flex items-center gap-1 text-sm font-medium text-slate-300 dark:text-slate-700' aria-disabled='true'>
+      <svg viewBox='0 0 20 20' fill='currentColor' class='h-4 w-4' aria-hidden='true'><path fill-rule='evenodd' d='M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z' clip-rule='evenodd'/></svg>
+      {{coalesce prev.label "Prev"}}
+    </span>
+  {{/if}}
+
+  <ol class='flex items-center gap-0.5'>
+    {{#each pages}}
+      <li>
+        {{#if ellipsis}}
+          <span class='inline-flex h-9 w-9 items-center justify-center text-sm text-slate-400 dark:text-slate-500'>…</span>
+        {{else}}
+          {{#if current}}
+            <span aria-current='page' class='inline-flex h-9 w-9 items-center justify-center text-sm font-bold text-[#8f0d00] dark:text-[#ff2e1a] border-b-2 border-[#b21100] dark:border-[#ff2e1a]'>
+              {{label}}
+            </span>
+          {{else}}
+            <a
+              href='{{url}}'
+              class='inline-flex h-9 w-9 items-center justify-center text-sm font-medium text-slate-600 dark:text-slate-300 transition-colors hover:text-[#8f0d00] dark:hover:text-[#ff2e1a]'
+            >
+              {{label}}
+            </a>
+          {{/if}}
+        {{/if}}
+      </li>
+    {{/each}}
+  </ol>
+
+  {{#if next.url}}
+    <a
+      href='{{next.url}}'
+      class='inline-flex items-center gap-1 text-sm font-medium text-slate-500 dark:text-slate-400 transition-colors hover:text-[#8f0d00] dark:hover:text-[#ff2e1a]'
+      aria-label='Next page'
+    >
+      {{coalesce next.label "Next"}}
+      <svg viewBox='0 0 20 20' fill='currentColor' class='h-4 w-4' aria-hidden='true'><path fill-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/></svg>
+    </a>
+  {{else}}
+    <span class='inline-flex items-center gap-1 text-sm font-medium text-slate-300 dark:text-slate-700' aria-disabled='true'>
+      {{coalesce next.label "Next"}}
+      <svg viewBox='0 0 20 20' fill='currentColor' class='h-4 w-4' aria-hidden='true'><path fill-rule='evenodd' d='M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/></svg>
+    </span>
+  {{/if}}
+</nav>

package/src/templates/partials/components/ui/scroll-area.hbs

@@ -0,0 +1,12 @@
+<div
+  class='{{#if (eq orientation "both")}}overflow-auto{{else}}{{#if (eq orientation "horizontal")}}overflow-x-auto overflow-y-hidden{{else}}overflow-y-auto overflow-x-hidden{{/if}}{{/if}} [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-slate-300 [&::-webkit-scrollbar-thumb:hover]:bg-slate-400 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500 {{#if className}}{{className}}{{/if}}'
+  {{#if maxHeight}}style='max-height: {{maxHeight}};'{{/if}}
+>
+  {{#if content}}
+    {{{content}}}
+  {{else}}
+    {{#if @partial-block}}
+      {{> @partial-block}}
+    {{/if}}
+  {{/if}}
+</div>

package/src/templates/partials/components/ui/status-badge.hbs

@@ -0,0 +1,21 @@
+<span class='inline-flex items-baseline gap-3 {{#if className}}{{className}}{{/if}}'>
+  <span class='inline-flex items-center gap-1.5 border-l-2 pl-2 pr-3 py-0.5 text-xs font-semibold uppercase tracking-wider leading-5
+    {{#if (eq variant "live")}}border-emerald-500 bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300
+    {{else}}{{#if (eq variant "offline")}}border-slate-400 bg-slate-100 text-slate-600 dark:bg-slate-800/60 dark:text-slate-400
+    {{else}}{{#if (eq variant "warning")}}border-amber-500 bg-amber-50 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400
+    {{else}}{{#if (eq variant "info")}}border-sky-500 bg-sky-50 text-sky-700 dark:bg-sky-950/30 dark:text-sky-400
+    {{else}}border-slate-400 bg-slate-100 text-slate-600 dark:bg-slate-800/60 dark:text-slate-400
+    {{/if}}{{/if}}{{/if}}{{/if}}'>
+    <span class='h-1.5 w-1.5 rounded-full flex-shrink-0
+      {{#if (eq variant "live")}}bg-emerald-500 animate-pulse
+      {{else}}{{#if (eq variant "offline")}}bg-slate-400
+      {{else}}{{#if (eq variant "warning")}}bg-amber-500
+      {{else}}{{#if (eq variant "info")}}bg-sky-500
+      {{else}}bg-slate-500
+      {{/if}}{{/if}}{{/if}}{{/if}}'></span>
+    <span>{{label}}</span>
+  </span>
+  {{#if description}}
+    <span class='text-xs leading-5 text-slate-500 dark:text-slate-400'>{{description}}</span>
+  {{/if}}
+</span>

package/src/templates/partials/footers/footer-full.hbs

@@ -0,0 +1,79 @@
+<footer
+  class='sticky top-[100vh] bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 mt-8 transition-colors'
+  style='view-transition-name: site-footer;'
+>
+  <div class='container mx-auto px-4 py-6'>
+    <div class='flex flex-col md:grid md:grid-cols-3 items-center gap-4'>
+      <div class='flex items-center justify-center md:justify-start gap-3'>
+        <a
+          href='https://bsky.app/profile/fifthbell.com'
+          target='_blank'
+          rel='noopener noreferrer'
+          class='text-slate-600 dark:text-slate-400 hover:text-[#0085ff] dark:hover:text-[#0085ff] transition-colors'
+          aria-label='Follow us on Bluesky'
+        >
+          <svg class='w-5 h-5' viewBox='0 0 600 530' fill='currentColor'>
+            <path
+              d='M135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-.0174-2.9357-1.1937.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z'
+            ></path>
+          </svg>
+        </a>
+        <a
+          href='https://x.com/thisisfifthbell'
+          target='_blank'
+          rel='noopener noreferrer'
+          class='text-slate-600 dark:text-slate-400 hover:text-[#000000] dark:hover:text-[#ffffff] transition-colors'
+          aria-label='Follow us on X (Twitter)'
+        >
+          <svg class='w-5 h-5' viewBox='0 0 24 24' fill='currentColor'>
+            <path
+              d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'
+            ></path>
+          </svg>
+        </a>
+        <a
+          href='https://instagram.com/thisisfifthbell'
+          target='_blank'
+          rel='noopener noreferrer'
+          class='text-slate-600 dark:text-slate-400 hover:text-[#E4405F] dark:hover:text-[#E4405F] transition-colors'
+          aria-label='Follow us on Instagram'
+        >
+          <svg class='w-5 h-5' viewBox='0 0 24 24' fill='currentColor'>
+            <path
+              d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'
+            ></path>
+          </svg>
+        </a>
+        <a
+          href='https://www.youtube.com/@thisisfifthbell'
+          target='_blank'
+          rel='noopener noreferrer'
+          class='text-slate-600 dark:text-slate-400 hover:text-[#FF0000] dark:hover:text-[#FF0000] transition-colors'
+          aria-label='Subscribe on YouTube'
+        >
+          <svg class='w-5 h-5' viewBox='0 0 24 24' fill='currentColor'>
+            <path
+              d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'
+            ></path>
+          </svg>
+        </a>
+      </div>
+
+      <div class='flex items-center justify-center md:space-x-3'>
+        <div class='bg-slate-600 dark:bg-slate-700 text-slate-50 dark:text-slate-300 p-2 transition-colors'>
+          <svg class='w-5 h-5' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
+            <path d='M10.268 21a2 2 0 0 0 3.464 0'></path>
+            <path d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'></path>
+            <path d='M4 2C2.8 3.7 2 5.7 2 8'></path>
+            <path d='M22 8a10 10 0 0 0-2-6'></path>
+          </svg>
+        </div>
+        <span class='hidden md:inline text-slate-600 dark:text-slate-400 transition-colors'>fifth<span class='font-semibold'>bell</span></span>
+      </div>
+
+      <div class='flex items-center justify-center md:justify-end text-sm text-slate-600 dark:text-slate-400 transition-colors'>
+        <span>© 2026 fifth<b>bell</b>. All rights reserved.</span>
+      </div>
+    </div>
+  </div>
+</footer>

package/src/templates/partials/footers/footer-minimal.hbs

@@ -0,0 +1,5 @@
+<footer class='sticky top-[100vh] bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 mt-8 transition-colors' style='view-transition-name: site-footer;'>
+  <div class='container mx-auto px-4 py-6 text-center text-sm text-slate-600 dark:text-slate-400'>
+    <span>© 2026 fifth<b>bell</b>. All rights reserved.</span>
+  </div>
+</footer>