fix: restore missing SVG animations in HeroIllustration

.gitea/workflows/ci.yml

@@ -10,17 +10,31 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
           version: 10
           run_install: false
 
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
       - name: 🔐 Configure Private Registry
         run: |
           REGISTRY="${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}"

.gitea/workflows/deploy.yml

@@ -154,14 +154,26 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
           version: 10
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - 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
@@ -386,14 +398,26 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
           version: 10
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - 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
@@ -418,14 +442,26 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
           version: 10
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - 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

app/[locale]/blog/[slug]/page.tsx

@@ -5,6 +5,7 @@ import { MDXRemote } from 'next-mdx-remote/rsc';
 import { getPostBySlug, getAdjacentPosts, getReadingTime, getHeadings } from '@/lib/blog';
 import { Metadata } from 'next';
 import Link from 'next/link';
+import Image from 'next/image';
 import PostNavigation from '@/components/blog/PostNavigation';
 import PowerCTA from '@/components/blog/PowerCTA';
 import TableOfContents from '@/components/blog/TableOfContents';
@@ -77,10 +78,16 @@ export default async function BlogPost({ params }: BlogPostProps) {
       {/* Featured Image Header */}
       {post.frontmatter.featuredImage ? (
         <div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">
-          <div
-            className="absolute inset-0 bg-cover bg-center transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100"
-            style={{ backgroundImage: `url(${post.frontmatter.featuredImage})` }}
-          />
+          <div className="absolute inset-0 transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100">
+            <Image
+              src={`${post.frontmatter.featuredImage}?gravity=obj:face`}
+              alt={post.frontmatter.title}
+              fill
+              priority
+              className="object-cover"
+              sizes="100vw"
+            />
+          </div>
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/40 to-transparent" />
 
           {/* Title overlay on image */}

app/[locale]/blog/page.tsx

@@ -62,7 +62,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
           {featuredPost && featuredPost.frontmatter.featuredImage && (
             <>
               <Image
-                src={featuredPost.frontmatter.featuredImage}
+                src={`${featuredPost.frontmatter.featuredImage}?gravity=obj:face`}
                 alt={featuredPost.frontmatter.title}
                 fill
                 className="absolute inset-0 w-full h-full object-cover scale-105 animate-slow-zoom opacity-40 md:opacity-60"
@@ -160,7 +160,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                     {post.frontmatter.featuredImage && (
                       <div className="relative h-48 md:h-72 overflow-hidden">
                         <Image
-                          src={post.frontmatter.featuredImage}
+                          src={`${post.frontmatter.featuredImage}?gravity=obj:face`}
                           alt={post.frontmatter.title}
                           fill
                           className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"

app/[locale]/layout.tsx

@@ -81,7 +81,16 @@ export default async function Layout(props: {
   }
 
   // Pick only the namespaces required by client components to reduce the hydration payload size
-  const clientKeys = ['Footer', 'Navigation', 'Contact', 'Products', 'Team', 'Home'];
+  const clientKeys = [
+    'Footer',
+    'Navigation',
+    'Contact',
+    'Products',
+    'Team',
+    'Home',
+    'Error',
+    'StandardPage',
+  ];
   const clientMessages: Record<string, any> = {};
   for (const key of clientKeys) {
     if (messages[key]) {

components/home/HeroIllustration.tsx

@@ -125,8 +125,9 @@ export default function HeroIllustration() {
   }, []);
 
   const viewBox = isMobile ? '400 0 1000 1100' : '-400 -200 1800 1100';
-  const scale = isMobile ? 1.44 : 1;
-  const opacity = isMobile ? 0.6 : 0.85;
+  // Increase scale slightly and opacity significantly on mobile to fix the "thin" appearance
+  const scale = isMobile ? 1.6 : 1;
+  const opacity = isMobile ? 0.9 : 0.85;
 
   return (
     <div className="absolute inset-0 z-0 overflow-visible bg-primary w-full h-full">
@@ -154,15 +155,15 @@ export default function HeroIllustration() {
             <stop offset="70%" stopColor="white" stopOpacity="0.4" />
             <stop offset="100%" stopColor="white" stopOpacity="0" />
           </linearGradient>
-          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-            <feGaussianBlur stdDeviation="1.5" result="blur" />
+          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="3" result="blur" />
             <feMerge>
               <feMergeNode in="blur" />
               <feMergeNode in="SourceGraphic" />
             </feMerge>
           </filter>
-          <filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="1" result="blur" />
+          <filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
+            <feGaussianBlur stdDeviation="2" result="blur" />
             <feMerge>
               <feMergeNode in="blur" />
               <feMergeNode in="SourceGraphic" />
@@ -215,10 +216,10 @@ export default function HeroIllustration() {
           </g>
 
           {/* ANIMATED ENERGY FLOW */}
-          <g>
+          <g filter="url(#glow)">
             {POWER_LINES.map((line, i) => {
-              // Only animate a small subset of lines to reduce main-thread work significantly
-              if (i % 5 !== 0) return null;
+              // Only animate a subset of lines to reduce main-thread work
+              if (i % 2 !== 0) return null;
               const from = gridToScreen(line.from.col, line.from.row);
               const to = gridToScreen(line.to.col, line.to.row);
               const length = Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2));
@@ -232,12 +233,16 @@ export default function HeroIllustration() {
                   stroke="url(#energy-pulse)"
                   strokeWidth="3"
                   strokeLinecap="round"
-                  style={{
-                    strokeDasharray: `${length * 0.2} ${length * 0.8}`,
-                    strokeDashoffset: length,
-                    animation: `flow ${1.5 + (i % 3) * 0.5}s linear infinite`,
-                  }}
-                />
+                  strokeDasharray={`${length * 0.2} ${length * 0.8}`}
+                >
+                  <animate
+                    attributeName="stroke-dashoffset"
+                    from={length}
+                    to={0}
+                    dur={`${1.5 + (i % 3) * 0.5}s`}
+                    repeatCount="indefinite"
+                  />
+                </line>
               );
             })}
           </g>
@@ -263,13 +268,14 @@ export default function HeroIllustration() {
                   strokeWidth="1"
                   strokeOpacity="0.3"
                 />
-                <circle
-                  r="3"
-                  fill="#82ed20"
-                  fillOpacity="0.3"
-                  filter="url(#soft-glow)"
-                  style={{ animation: 'solar-pulse 2s ease-in-out infinite' }}
-                />
+                <circle r="3" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
+                  <animate
+                    attributeName="fillOpacity"
+                    values="0.2;0.5;0.2"
+                    dur="2s"
+                    repeatCount="indefinite"
+                  />
+                </circle>
               </g>
             );
           })}
@@ -289,26 +295,28 @@ export default function HeroIllustration() {
                   strokeOpacity="0.3"
                 />
                 <g transform="translate(0, -60)">
-                  <g
-                    style={{
-                      transformOrigin: '0px 0px',
-                      animation: `spin-slow ${3 + i}s linear infinite`,
-                    }}
-                  >
-                    {[0, 120, 240].map((angle, j) => (
-                      <line
-                        key={`blade-${i}-${j}`}
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="-30"
-                        stroke="white"
-                        strokeWidth="1.5"
-                        strokeOpacity="0.4"
-                        transform={`rotate(${angle})`}
+                  {[0, 120, 240].map((angle, j) => (
+                    <line
+                      key={`blade-${i}-${j}`}
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="-30"
+                      stroke="white"
+                      strokeWidth="1.5"
+                      strokeOpacity="0.4"
+                      transform={`rotate(${angle})`}
+                    >
+                      <animateTransform
+                        attributeName="transform"
+                        type="rotate"
+                        from={`${angle} 0 0`}
+                        to={`${angle + 360} 0 0`}
+                        dur={`${3 + i}s`}
+                        repeatCount="indefinite"
                       />
-                    ))}
-                  </g>
+                    </line>
+                  ))}
                 </g>
               </g>
             );

lib/env.ts

@@ -20,6 +20,8 @@ const booleanSchema = z.preprocess((val) => {
 const envExtension = {
   // Project specific overrides or additions
   AUTH_COOKIE_NAME: z.string().default('klz_gatekeeper_session'),
+  TARGET: z.string().optional(),
+  NEXT_PUBLIC_TARGET: z.string().optional(),
 
   // Gatekeeper specifics not in base
   GATEKEEPER_URL: z.string().url().default('http://gatekeeper:3000'),

lib/imgproxy-loader.ts

@@ -23,11 +23,28 @@ export default function imgproxyLoader({
     return src;
   }
 
+  // Check if src contains custom gravity query parameter
+  let gravity = 'sm'; // Use smart gravity (content-aware) by default
+  let cleanSrc = src;
+
+  try {
+    // Dummy base needed for relative URLs
+    const url = new URL(src, 'http://localhost');
+    const customGravity = url.searchParams.get('gravity');
+    if (customGravity) {
+      gravity = customGravity;
+      url.searchParams.delete('gravity');
+      cleanSrc = src.startsWith('http') ? url.href : url.pathname + url.search;
+    }
+  } catch (e) {
+    // Fallback if parsing fails
+  }
+
   // We use the width provided by Next.js for responsive images
   // Height is set to 0 to maintain aspect ratio
-  return getImgproxyUrl(src, {
+  return getImgproxyUrl(cleanSrc, {
     width,
     resizing_type: 'fit',
-    gravity: 'sm', // Use smart gravity (content-aware) instead of face detection (requires ML)
+    gravity,
   });
 }

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.