From fa02ac597fdb82b54fe4397bbd5f42a357225a7f Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Thu, 26 Feb 2026 12:13:35 +0100
Subject: [PATCH] fix: resolve pipeline timeouts, 418 hydration errors, and
 english category link 404s

---
 .gitea/workflows/deploy.yml              | 94 +++++++-----------------
 app/[locale]/blog/[slug]/page.tsx        |  4 +-
 app/[locale]/blog/page.tsx               | 79 +++++++++++---------
 app/[locale]/products/[...slug]/page.tsx | 25 +++++--
 app/sitemap.ts                           | 21 +++++-
 components/RelatedProducts.tsx           |  4 +-
 components/home/RecentPosts.tsx          | 77 +++++++++++--------
 docker-compose.yml                       |  4 +-
 8 files changed, 160 insertions(+), 148 deletions(-)

diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml
index 9423afba..b85a7334 100644
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -94,6 +94,8 @@ jobs:
             TRAEFIK_RULE="Host(\"$TRAEFIK_HOST\")"
             PRIMARY_HOST="$TRAEFIK_HOST"
           fi
+          
+          GATEKEEPER_HOST="gatekeeper.$PRIMARY_HOST"
 
           {
             echo "target=$TARGET"
@@ -101,6 +103,7 @@ jobs:
             echo "env_file=$ENV_FILE"
             echo "traefik_host=$PRIMARY_HOST"
             echo "traefik_rule=$TRAEFIK_RULE"
+            echo "gatekeeper_host=$GATEKEEPER_HOST"
             echo "next_public_url=https://$PRIMARY_HOST"
             if [[ "$TARGET" == "production" ]]; then
               echo "project_name=klz-cablescom"
@@ -231,6 +234,7 @@ jobs:
       PROJECT_NAME:         ${{ needs.prepare.outputs.project_name }}
       NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
       TRAEFIK_HOST:         ${{ needs.prepare.outputs.traefik_host }}
+      GATEKEEPER_HOST:      ${{ needs.prepare.outputs.gatekeeper_host }}
       
       # Secrets mapping (Payload CMS)
       PAYLOAD_SECRET:          ${{ secrets.PAYLOAD_SECRET || vars.PAYLOAD_SECRET || 'you-need-to-set-a-payload-secret' }}
@@ -282,7 +286,7 @@ jobs:
           AUTH_MIDDLEWARE_UNPROTECTED="$STD_MW"
 
           # Gatekeeper Origin
-          GATEKEEPER_ORIGIN="$NEXT_PUBLIC_BASE_URL/gatekeeper"
+          GATEKEEPER_ORIGIN="https://$GATEKEEPER_HOST"
 
           {
             echo "# Generated by CI - $TARGET"
@@ -318,6 +322,7 @@ jobs:
             echo "PROJECT_NAME=$PROJECT_NAME"
             printf 'TRAEFIK_HOST_RULE=%s\n' "$TRAEFIK_RULE"
             echo "TRAEFIK_HOST=$TRAEFIK_HOST"
+            echo "GATEKEEPER_HOST=$GATEKEEPER_HOST"
             echo "TRAEFIK_ENTRYPOINT=websecure"
             echo "TRAEFIK_TLS=true"
             echo "TRAEFIK_CERT_RESOLVER=le"
@@ -431,7 +436,21 @@ jobs:
       - name: Install dependencies
         id: deps
         run: pnpm install --frozen-lockfile
-      - name: 🔍 Install Chromium (for Asset Scan)
+      - name: 📦 Cache APT Packages
+        uses: actions/cache@v4
+        with:
+          path: /var/cache/apt/archives
+          key: apt-cache-${{ runner.os }}-${{ runner.arch }}-chromium
+
+      - name: 💾 Cache Chromium
+        id: cache-chromium
+        uses: actions/cache@v4
+        with:
+          path: /usr/bin/chromium
+          key: ${{ runner.os }}-chromium-native-${{ hashFiles('package.json') }}
+          
+      - name: 🔍 Install Chromium (Native & ARM64)
+        if: steps.cache-chromium.outputs.cache-hit != 'true'
         run: |
           rm -f /etc/apt/apt.conf.d/docker-clean
           apt-get update
@@ -502,70 +521,9 @@ jobs:
           PUPPETEER_EXECUTABLE_PATH: /usr/bin/chromium
           CHROME_PATH: /usr/bin/chromium
         run: pnpm check:assets
-
-  # ──────────────────────────────────────────────────────────────────────────────
-  # JOB 6: Performance & Accessibility (Lighthouse + WCAG)
-  # ──────────────────────────────────────────────────────────────────────────────
-  performance:
-    name: ⚡ Performance & Accessibility
-    needs: [prepare, post_deploy_checks]
-    continue-on-error: true
-    if: needs.post_deploy_checks.result == 'success' && needs.prepare.outputs.target != 'branch'
-    runs-on: docker
-    container:
-      image: catthehacker/ubuntu:act-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 10
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: 🔐 Registry Auth
-        run: |
-          echo "@mintel:registry=https://${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}" > .npmrc
-          echo "//${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}/:_authToken=${{ secrets.REGISTRY_PASS }}" >> .npmrc
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-      - name: 🔍 Install Chromium (Native & ARM64)
-        run: |
-          rm -f /etc/apt/apt.conf.d/docker-clean
-          apt-get update
-          apt-get install -y gnupg wget ca-certificates
-          
-          # Detect OS
-          OS_ID=$(. /etc/os-release && echo $ID)
-          CODENAME=$(. /etc/os-release && echo $VERSION_CODENAME)
-          
-          if [ "$OS_ID" = "debian" ]; then
-            echo "🎯 Debian detected - installing native chromium"
-            apt-get install -y chromium
-          else
-            echo "🎯 Ubuntu detected - adding xtradeb PPA"
-            mkdir -p /etc/apt/keyrings
-            KEY_ID="82BB6851C64F6880"
-            
-            # Fetch PPA key
-            wget -qO- "https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x$KEY_ID" | gpg --dearmor > /etc/apt/keyrings/xtradeb.gpg
-            
-            # Add PPA repository
-            echo "deb [signed-by=/etc/apt/keyrings/xtradeb.gpg] http://ppa.launchpad.net/xtradeb/apps/ubuntu $CODENAME main" > /etc/apt/sources.list.d/xtradeb-ppa.list
-            
-            # PRIORITY PINNING: Force PPA over Snap-dummy
-            printf "Package: *\nPin: release o=LP-PPA-xtradeb-apps\nPin-Priority: 1001\n" > /etc/apt/preferences.d/xtradeb
-            
-            apt-get update
-            apt-get install -y --allow-downgrades chromium
-          fi
-          
-          # Standardize binary paths
-          [ -f /usr/bin/chromium ] && ln -sf /usr/bin/chromium /usr/bin/google-chrome
-          [ -f /usr/bin/chromium ] && ln -sf /usr/bin/chromium /usr/bin/chromium-browser
       - name: ⚡ Lighthouse CI
+        if: always() && steps.deps.outcome == 'success'
+        continue-on-error: true
         env:
           NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
           GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
@@ -573,6 +531,8 @@ jobs:
           PAGESPEED_LIMIT: 8
         run: pnpm run pagespeed:test
       - name: ♿ WCAG Audit
+        if: always() && steps.deps.outcome == 'success'
+        continue-on-error: true
         env:
           NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
           GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
@@ -585,7 +545,7 @@ jobs:
   # ──────────────────────────────────────────────────────────────────────────────
   notifications:
     name: 🔔 Notify
-    needs: [prepare, deploy, post_deploy_checks, performance]
+    needs: [prepare, deploy, post_deploy_checks]
     if: always()
     runs-on: docker
     container:
@@ -596,7 +556,7 @@ jobs:
         run: |
           DEPLOY="${{ needs.deploy.result }}"
           SMOKE="${{ needs.post_deploy_checks.result }}"
-          PERF="${{ needs.performance.result }}"
+          PERF="${{ needs.post_deploy_checks.result }}"
           TARGET="${{ needs.prepare.outputs.target }}"
           VERSION="${{ needs.prepare.outputs.image_tag }}"
           URL="${{ needs.prepare.outputs.next_public_url }}"
diff --git a/app/[locale]/blog/[slug]/page.tsx b/app/[locale]/blog/[slug]/page.tsx
index 4d4894cf..819a0a19 100644
--- a/app/[locale]/blog/[slug]/page.tsx
+++ b/app/[locale]/blog/[slug]/page.tsx
@@ -105,7 +105,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
                   {post.frontmatter.title}
                 </Heading>
                 <div className="flex flex-wrap items-center gap-6 text-white/80 text-sm md:text-base font-medium">
-                  <time dateTime={post.frontmatter.date}>
+                  <time dateTime={post.frontmatter.date} suppressHydrationWarning>
                     {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                       year: 'numeric',
                       month: 'long',
@@ -142,7 +142,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
               {post.frontmatter.title}
             </Heading>
             <div className="flex items-center gap-6 text-text-primary/80 font-medium">
-              <time dateTime={post.frontmatter.date}>
+              <time dateTime={post.frontmatter.date} suppressHydrationWarning>
                 {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                   year: 'numeric',
                   month: 'long',
diff --git a/app/[locale]/blog/page.tsx b/app/[locale]/blog/page.tsx
index d81c6959..5892351f 100644
--- a/app/[locale]/blog/page.tsx
+++ b/app/[locale]/blog/page.tsx
@@ -84,12 +84,9 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                 {featuredPost &&
                   (new Date(featuredPost.frontmatter.date) > new Date() ||
                     featuredPost.frontmatter.public === false) && (
-                    <Badge
-                      variant="neutral"
-                      className="border border-white/30 bg-transparent text-white/80 shadow-none"
-                    >
+                    <span className="px-2 py-0.5 border border-white/40 text-white/80 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold">
                       Draft Preview
-                    </Badge>
+                    </span>
                   )}
               </div>
               {featuredPost && (
@@ -156,66 +153,76 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
           </Reveal>
 
           {/* Grid for remaining posts */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-12">
+          <div className="grid grid-cols-1 gap-12">
             {remainingPosts.map((post, idx) => (
-              <Reveal key={post.slug} delay={idx * 100}>
-                <Link href={`/${locale}/blog/${post.slug}`} className="group block">
+              <Reveal key={post.slug} delay={idx * 50}>
+                <Link
+                  href={`/${locale}/blog/${post.slug}`}
+                  className="group block focus:outline-none"
+                >
                   <Card
                     tag="article"
-                    className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-2xl md:rounded-3xl overflow-hidden"
+                    className="relative flex flex-col justify-end border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden min-h-[450px] md:min-h-[500px]"
                   >
                     {post.frontmatter.featuredImage && (
-                      <div className="relative h-48 md:h-72 overflow-hidden">
+                      <>
                         <Image
                           src={post.frontmatter.featuredImage.split('?')[0]}
                           alt={post.frontmatter.title}
                           fill
-                          className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
+                          className="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                           style={{
                             objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
                           }}
-                          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                          sizes="(max-width: 768px) 100vw, 100vw"
+                          loading="lazy"
                         />
-                        <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                        <div className="absolute inset-0 bg-neutral-dark/40 group-hover:bg-neutral-dark/30 transition-colors duration-500" />
+                      </>
+                    )}
+
+                    <div className="relative z-10 w-full p-6 md:p-10 bg-neutral-dark/50 backdrop-blur-md border-t border-white/10 flex flex-col">
+                      <div className="flex flex-wrap items-center gap-4 mb-4">
                         {post.frontmatter.category && (
-                          <Badge
-                            variant="accent"
-                            className="absolute top-3 left-3 md:top-6 md:left-6 shadow-lg"
-                          >
+                          <Badge variant="accent" className="shadow-md">
                             {post.frontmatter.category}
                           </Badge>
                         )}
+                        {(new Date(post.frontmatter.date) > new Date() ||
+                          post.frontmatter.public === false) && (
+                          <span className="px-2 py-0.5 border border-white/40 text-white/90 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold bg-neutral-dark/40 shadow-sm">
+                            Draft Preview
+                          </span>
+                        )}
                       </div>
-                    )}
-                    <div className="p-5 md:p-10 flex flex-col flex-1">
-                      <div className="flex items-center gap-3 text-[10px] md:text-sm font-bold text-primary/70 mb-2 md:mb-4 tracking-widest uppercase">
-                        <span>
+
+                      <div className="flex items-center gap-3 text-xs md:text-sm font-bold text-white/80 mb-3 tracking-widest uppercase">
+                        <time dateTime={post.frontmatter.date} suppressHydrationWarning>
                           {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                             year: 'numeric',
                             month: 'long',
                             day: 'numeric',
                           })}
-                        </span>
-                        {(new Date(post.frontmatter.date) > new Date() ||
-                          post.frontmatter.public === false) && (
-                            <span className="px-1.5 py-0.5 border border-current rounded-sm text-[9px] md:text-xs">
-                              Draft
-                            </span>
-                          )}
+                        </time>
                       </div>
-                      <h3 className="text-lg md:text-2xl font-bold text-primary mb-3 md:mb-6 group-hover:text-accent-dark transition-colors line-clamp-3 md:line-clamp-4 leading-tight">
+
+                      <h3 className="text-xl md:text-3xl font-bold text-white mb-4 group-hover:text-accent transition-colors drop-shadow-md leading-tight max-w-4xl">
                         {post.frontmatter.title}
                       </h3>
-                      <p className="text-text-secondary text-sm md:text-lg line-clamp-3 md:line-clamp-4 mb-4 md:mb-8 leading-relaxed">
-                        {post.frontmatter.excerpt}
-                      </p>
-                      <div className="mt-auto pt-4 md:pt-8 border-t border-neutral-medium flex items-center justify-between">
-                        <span className="text-saturated text-sm md:text-base font-extrabold group-hover:text-accent-dark transition-colors">
+
+                      {post.frontmatter.excerpt && (
+                        <p className="text-white/90 text-sm md:text-lg line-clamp-3 mb-6 max-w-4xl drop-shadow-sm leading-relaxed">
+                          {post.frontmatter.excerpt}
+                        </p>
+                      )}
+
+                      <div className="mt-auto flex items-center justify-between border-t border-white/20 pt-6">
+                        <span className="text-accent text-sm md:text-base font-extrabold group-hover:text-white transition-colors">
                           {t('readMore')}
                         </span>
-                        <div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300">
+                        <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 backdrop-blur-sm border border-white/20">
                           <svg
-                            className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1"
+                            className="w-5 h-5 transition-transform group-hover:translate-x-1"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24"
diff --git a/app/[locale]/products/[...slug]/page.tsx b/app/[locale]/products/[...slug]/page.tsx
index fe376ea9..b2a41e3b 100644
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -125,11 +125,26 @@ export default async function ProductPage({ params }: ProductPageProps) {
       ? t(`categories.${categoryKey}.title`)
       : fileSlug;
 
-    const filteredProducts = allProducts.filter((p) =>
-      p.frontmatter.categories.some(
-        (cat) => cat.toLowerCase().replace(/\s+/g, '-') === fileSlug || cat === categoryTitle,
-      ),
-    );
+    const filteredProducts = allProducts.filter((p) => {
+      const firstCat = p.frontmatter.categories[0] || '';
+      const normalizedCat = firstCat.toLowerCase().replace(/\s+/g, '-');
+      let pFileSlug = 'low-voltage-cables';
+      if (normalizedCat === 'hochspannungskabel' || normalizedCat === 'high-voltage-cables')
+        pFileSlug = 'high-voltage-cables';
+      else if (
+        normalizedCat === 'mittelspannungskabel' ||
+        normalizedCat === 'medium-voltage-cables'
+      )
+        pFileSlug = 'medium-voltage-cables';
+      else if (
+        normalizedCat === 'solarkabel' ||
+        normalizedCat === 'solar-cables' ||
+        normalizedCat === 'solar'
+      )
+        pFileSlug = 'solar-cables';
+
+      return pFileSlug === fileSlug;
+    });
 
     const productsWithTranslatedSlugs = await Promise.all(
       filteredProducts.map(async (p) => ({
diff --git a/app/sitemap.ts b/app/sitemap.ts
index 97d1fc1b..40750c01 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -58,9 +58,24 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     for (const product of productsMetadata) {
       if (!product.frontmatter || !product.slug) continue;
 
-      const category =
-        product.frontmatter.categories[0]?.toLowerCase().replace(/\s+/g, '-') || 'other';
-      const translatedCategory = await mapFileSlugToTranslated(category, locale);
+      const firstCat = product.frontmatter.categories[0] || '';
+      const normalizedCat = firstCat.toLowerCase().replace(/\s+/g, '-');
+      let categoryFileSlug = 'low-voltage-cables';
+      if (normalizedCat === 'hochspannungskabel' || normalizedCat === 'high-voltage-cables')
+        categoryFileSlug = 'high-voltage-cables';
+      else if (
+        normalizedCat === 'mittelspannungskabel' ||
+        normalizedCat === 'medium-voltage-cables'
+      )
+        categoryFileSlug = 'medium-voltage-cables';
+      else if (
+        normalizedCat === 'solarkabel' ||
+        normalizedCat === 'solar-cables' ||
+        normalizedCat === 'solar'
+      )
+        categoryFileSlug = 'solar-cables';
+
+      const translatedCategory = await mapFileSlugToTranslated(categoryFileSlug, locale);
       const translatedSlug = await mapFileSlugToTranslated(product.slug, locale);
 
       sitemapEntries.push({
diff --git a/components/RelatedProducts.tsx b/components/RelatedProducts.tsx
index f6591665..808dcd72 100644
--- a/components/RelatedProducts.tsx
+++ b/components/RelatedProducts.tsx
@@ -41,10 +41,8 @@ export default async function RelatedProducts({
       ];
       const catFileSlug =
         categorySlugs.find((slug) => {
-          const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-          const title = t(`categories.${key}.title`);
           return product.frontmatter.categories.some(
-            (cat) => cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title,
+            (cat) => cat.toLowerCase().replace(/\s+/g, '-') === slug,
           );
         }) || 'low-voltage-cables';
 
diff --git a/components/home/RecentPosts.tsx b/components/home/RecentPosts.tsx
index 34b3f3a9..332552aa 100644
--- a/components/home/RecentPosts.tsx
+++ b/components/home/RecentPosts.tsx
@@ -36,39 +36,51 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
           </Link>
         </div>
 
-        <ul className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 list-none p-0 m-0">
+        <ul className="grid grid-cols-1 gap-10 list-none p-0 m-0">
           {recentPosts.map((post, idx) => (
             <li key={`${post.slug}-${idx}`}>
-              <Link href={`/${locale}/blog/${post.slug}`} className="group block h-full">
+              <Link
+                href={`/${locale}/blog/${post.slug}`}
+                className="group block h-full focus:outline-none"
+              >
                 <Card
                   tag="article"
-                  className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl"
+                  className="relative flex flex-col justify-end border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden min-h-[400px] md:min-h-[450px]"
                 >
                   {post.frontmatter.featuredImage && (
-                    <div className="relative h-64 overflow-hidden">
+                    <>
                       <Image
                         src={post.frontmatter.featuredImage.split('?')[0]}
                         alt={post.frontmatter.title}
                         fill
-                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                        className="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                         style={{
                           objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
                         }}
-                        sizes="(max-width: 768px) 100vw, 33vw"
+                        sizes="(max-width: 768px) 100vw, 100vw"
                         loading="lazy"
                       />
-                      <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                      <div className="absolute inset-0 bg-neutral-dark/40 group-hover:bg-neutral-dark/30 transition-colors duration-500" />
+                    </>
+                  )}
+
+                  <div className="relative z-10 w-full p-6 md:p-8 bg-neutral-dark/50 backdrop-blur-md border-t border-white/10 flex flex-col">
+                    <div className="flex flex-wrap items-center gap-4 mb-4">
                       {post.frontmatter.category && (
-                        <Badge variant="accent" className="absolute top-4 left-4 shadow-md">
+                        <Badge variant="accent" className="shadow-md">
                           {post.frontmatter.category}
                         </Badge>
                       )}
+                      {(new Date(post.frontmatter.date) > new Date() ||
+                        post.frontmatter.public === false) && (
+                        <span className="px-2 py-0.5 border border-white/40 text-white/90 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold bg-neutral-dark/40 shadow-sm">
+                          Draft Preview
+                        </span>
+                      )}
                     </div>
-                  )}
-                  <div className="p-6 md:p-8 flex flex-col flex-grow">
-                    <div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
-                      <span className="w-6 md:w-8 h-px bg-neutral-medium" />
-                      <time dateTime={post.frontmatter.date}>
+
+                    <div className="flex items-center gap-3 text-xs md:text-sm font-bold text-white/80 mb-3 tracking-widest uppercase">
+                      <time dateTime={post.frontmatter.date} suppressHydrationWarning>
                         {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                           year: 'numeric',
                           month: 'long',
@@ -76,25 +88,30 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
                         })}
                       </time>
                     </div>
-                    <h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
+
+                    <h3 className="text-xl md:text-2xl font-bold text-white mb-4 group-hover:text-accent transition-colors drop-shadow-md leading-tight max-w-4xl">
                       {post.frontmatter.title}
                     </h3>
-                    <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
-                      {t('readMore')}
-                      <svg
-                        className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M17 8l4 4m0 0l-4 4m4-4H3"
-                        />
-                      </svg>
+
+                    <div className="mt-auto flex items-center justify-between border-t border-white/20 pt-6">
+                      <span className="text-accent text-sm md:text-base font-extrabold group-hover:text-white transition-colors">
+                        {t('readMore')}
+                      </span>
+                      <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 backdrop-blur-sm border border-white/20">
+                        <svg
+                          className="w-5 h-5 transition-transform group-hover:translate-x-1"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M17 8l4 4m0 0l-4 4m4-4H3"
+                          />
+                        </svg>
+                      </div>
                     </div>
                   </div>
                 </Card>
diff --git a/docker-compose.yml b/docker-compose.yml
index d7f3ba28..41ddc6ed 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -61,13 +61,13 @@ services:
     labels:
       - "traefik.enable=true"
       - "traefik.http.services.${PROJECT_NAME:-klz}-gatekeeper-svc.loadbalancer.server.port=3000"
-      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.address=http://${PROJECT_NAME:-klz}-gatekeeper:3000/gatekeeper/api/verify"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.address=http://${PROJECT_NAME:-klz}-gatekeeper:3000/api/verify"
       - "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.trustForwardHeader=true"
       - "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.authResponseHeaders=X-Auth-User"
       - "traefik.docker.network=infra"
 
       # Gatekeeper Public Router (Login/Auth UI)
-      - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && PathRegexp(`^/(login|gatekeeper)(/.*)?`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.rule=Host(`${GATEKEEPER_HOST:-gatekeeper.klz-cables.com}`)"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.tls=${TRAEFIK_TLS:-false}"