chore(blog): improve image quality and fix list item alignment; fix(hero): refactor title rendering to resolve console error; bump version to 2.0.3

- Add WebVitalsTracker component using useReportWebVitals
- Report LCP, CLS, FID, FCP, TTFB, and INP as Umami events
- Include rating (good/needs-improvement/poor) for meaningful metrics

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

@@ -88,6 +88,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
               alt={post.frontmatter.title}
               fill
               priority
+              quality={90}
               className="object-cover"
               sizes="100vw"
               style={{
@@ -113,7 +114,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
                 </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} suppressHydrationWarning>
-                    {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                    {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
                       year: 'numeric',
                       month: 'long',
                       day: 'numeric',
@@ -150,7 +151,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
             </Heading>
             <div className="flex items-center gap-6 text-text-primary/80 font-medium">
               <time dateTime={post.frontmatter.date} suppressHydrationWarning>
-                {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
                   year: 'numeric',
                   month: 'long',
                   day: 'numeric',

app/[locale]/blog/page.tsx

@@ -198,7 +198,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
 
                       <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, {
+                          {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
                             year: 'numeric',
                             month: 'long',
                             day: 'numeric',

app/actions/contact.ts

@@ -72,6 +72,7 @@ export async function sendContactFormAction(formData: FormData) {
     ? `Product Inquiry: ${productName}`
     : 'New Contact Form Submission';
   const confirmationSubject = 'Thank you for your inquiry';
+  const isTestSubmission = email === 'testing@mintel.me';
 
   try {
     // 2a. Send notification to Mintel/Client
@@ -84,26 +85,30 @@ export async function sendContactFormAction(formData: FormData) {
       }),
     );
 
-    const notificationResult = await sendEmail({
+    if (!isTestSubmission) {
-      replyTo: email,
+      const notificationResult = await sendEmail({
-      subject: notificationSubject,
+        replyTo: email,
-      html: notificationHtml,
-    });
-
-    if (notificationResult.success) {
-      logger.info('Notification email sent successfully', {
-        messageId: notificationResult.messageId,
-      });
-    } else {
-      logger.error('Notification email FAILED', {
-        error: notificationResult.error,
         subject: notificationSubject,
-        email,
+        html: notificationHtml,
       });
-      services.errors.captureException(
+
-        new Error(`Notification email failed: ${notificationResult.error}`),
+      if (notificationResult.success) {
-        { action: 'sendContactFormAction_notification', email },
+        logger.info('Notification email sent successfully', {
-      );
+          messageId: notificationResult.messageId,
+        });
+      } else {
+        logger.error('Notification email FAILED', {
+          error: notificationResult.error,
+          subject: notificationSubject,
+          email,
+        });
+        services.errors.captureException(
+          new Error(`Notification email failed: ${notificationResult.error}`),
+          { action: 'sendContactFormAction_notification', email },
+        );
+      }
+    } else {
+      logger.info('Skipping notification email for test submission', { email });
     }
 
     // 2b. Send confirmation to Customer (branded as KLZ Cables)
@@ -115,26 +120,30 @@ export async function sendContactFormAction(formData: FormData) {
       }),
     );
 
-    const confirmationResult = await sendEmail({
+    if (!isTestSubmission) {
-      to: email,
+      const confirmationResult = await sendEmail({
-      subject: confirmationSubject,
-      html: confirmationHtml,
-    });
-
-    if (confirmationResult.success) {
-      logger.info('Confirmation email sent successfully', {
-        messageId: confirmationResult.messageId,
-      });
-    } else {
-      logger.error('Confirmation email FAILED', {
-        error: confirmationResult.error,
-        subject: confirmationSubject,
         to: email,
+        subject: confirmationSubject,
+        html: confirmationHtml,
       });
-      services.errors.captureException(
+
-        new Error(`Confirmation email failed: ${confirmationResult.error}`),
+      if (confirmationResult.success) {
-        { action: 'sendContactFormAction_confirmation', email },
+        logger.info('Confirmation email sent successfully', {
-      );
+          messageId: confirmationResult.messageId,
+        });
+      } else {
+        logger.error('Confirmation email FAILED', {
+          error: confirmationResult.error,
+          subject: confirmationSubject,
+          to: email,
+        });
+        services.errors.captureException(
+          new Error(`Confirmation email failed: ${confirmationResult.error}`),
+          { action: 'sendContactFormAction_confirmation', email },
+        );
+      }
+    } else {
+      logger.info('Skipping confirmation email for test submission', { email });
     }
 
     // Notify via Gotify (Internal)

components/Footer.tsx

@@ -15,14 +15,14 @@ export default function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-primary text-white py-24 relative overflow-hidden content-visibility-auto">
+    <footer className="bg-primary text-white py-14 md:py-24 relative overflow-hidden content-visibility-auto">
       <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
 
       <Container>
         <h2 className="sr-only">Footer Navigation</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
+        <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-12 gap-10 md:gap-16 mb-12 md:mb-20">
-          {/* Brand Column */}
+          {/* Brand Column – full width on mobile */}
-          <div className="lg:col-span-4 space-y-8">
+          <div className="col-span-2 md:col-span-2 lg:col-span-4 space-y-6 md:space-y-8">
             <Link
               href={`/${locale}`}
               className="inline-block group"
@@ -67,9 +67,9 @@ export default function Footer() {
             </div>
           </div>
 
-          {/* Links Columns */}
+          {/* Legal Column */}
-          <div className="lg:col-span-2">
+          <div className="col-span-1 lg:col-span-2">
-            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
               {t('legal')}
             </h3>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
@@ -121,8 +121,9 @@ export default function Footer() {
             </ul>
           </div>
 
-          <div className="lg:col-span-2">
+          {/* Company Column */}
-            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+          <div className="col-span-1 lg:col-span-2">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
               {t('company')}
             </h3>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
@@ -189,9 +190,9 @@ export default function Footer() {
             </ul>
           </div>
 
-          {/* Recent Posts Column */}
+          {/* Recent Posts Column – full width on mobile */}
-          <div className="lg:col-span-4">
+          <div className="col-span-2 md:col-span-2 lg:col-span-4">
-            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs mb-5 md:mb-8">
               {t('recentPosts')}
             </h3>
             <ul className="space-y-6 list-none m-0 p-0">
@@ -242,7 +243,7 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/70 text-xs md:text-sm font-medium">
+        <div className="pt-8 md:pt-12 border-t border-white/10 flex flex-row justify-between items-center gap-4 text-white/70 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">
             <Link

components/Header.tsx

@@ -352,6 +352,29 @@ export default function Header() {
         ref={mobileMenuRef}
         inert={isMobileMenuOpen ? undefined : true}
       >
+        {/* Close Button inside overlay */}
+        <div className="flex justify-end p-6 pt-8">
+          <button
+            className="touch-target p-2 rounded-xl bg-white/10 border border-white/20 text-white hover:bg-white/20 transition-all duration-300"
+            aria-label={t('toggleMenu')}
+            onClick={() => {
+              setIsMobileMenuOpen(false);
+              trackEvent(AnalyticsEvents.BUTTON_CLICK, {
+                type: 'mobile_menu',
+                action: 'close',
+              });
+            }}
+          >
+            <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
         <nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
           {menuItems.map((item, idx) => (
             <div

components/PayloadRichText.tsx

@@ -42,7 +42,7 @@ const jsxConverters: JSXConverters = {
   // Use div instead of p for paragraphs to allow nested block elements (like the lists above)
   paragraph: ({ node, nodesToJSX }: any) => {
     return (
-      <div className="mb-6 leading-relaxed text-text-secondary">
+      <div className="mb-4 md:mb-6 leading-relaxed text-text-secondary last:mb-0">
         {nodesToJSX({ nodes: node.children })}
       </div>
     );
@@ -77,7 +77,7 @@ const jsxConverters: JSXConverters = {
     const children = nodesToJSX({ nodes: node.children });
     if (node?.listType === 'number') {
       return (
-        <ol className="list-decimal pl-6 my-6 space-y-2 text-text-secondary marker:text-primary marker:font-bold">
+        <ol className="list-decimal pl-4 space-y-2 text-text-secondary marker:text-primary marker:font-bold prose-p:mb-0">
           {children}
         </ol>
       );
@@ -86,7 +86,7 @@ const jsxConverters: JSXConverters = {
       return <ul className="list-none pl-0 my-6 space-y-2 text-text-secondary">{children}</ul>;
     }
     return (
-      <ul className="list-disc pl-6 my-6 space-y-2 text-text-secondary marker:text-primary">
+      <ul className="list-disc pl-4 space-y-2 text-text-secondary marker:text-primary prose-p:mb-0">
         {children}
       </ul>
     );

components/analytics/AnalyticsShell.tsx

@@ -9,6 +9,9 @@ const DynamicAnalyticsProvider = dynamic(() => import('./AnalyticsProvider'), {
 const DynamicScrollDepthTracker = dynamic(() => import('./ScrollDepthTracker'), {
   ssr: false,
 });
+const DynamicWebVitalsTracker = dynamic(() => import('./WebVitalsTracker'), {
+  ssr: false,
+});
 
 export default function AnalyticsShell() {
   const [shouldLoad, setShouldLoad] = useState(false);
@@ -34,6 +37,7 @@ export default function AnalyticsShell() {
     <Suspense fallback={null}>
       <DynamicAnalyticsProvider />
       <DynamicScrollDepthTracker />
+      <DynamicWebVitalsTracker />
     </Suspense>
   );
 }

components/analytics/WebVitalsTracker.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useReportWebVitals } from 'next/web-vitals';
+import { useAnalytics } from './useAnalytics';
+
+/**
+ * WebVitalsTracker component.
+ *
+ * Captures Next.js Web Vitals and reports them to Umami as custom events.
+ * This provides "meaningful" page speed tracking by measuring real user
+ * experiences (LCP, CLS, INP, etc.).
+ */
+export default function WebVitalsTracker() {
+  const { trackEvent } = useAnalytics();
+
+  useReportWebVitals((metric) => {
+    const { name, value, id, label } = metric;
+
+    // Determine rating (simplified version of web-vitals standards)
+    let rating: 'good' | 'needs-improvement' | 'poor' = 'good';
+
+    if (name === 'LCP') {
+      if (value > 4000) rating = 'poor';
+      else if (value > 2500) rating = 'needs-improvement';
+    } else if (name === 'CLS') {
+      if (value > 0.25) rating = 'poor';
+      else if (value > 0.1) rating = 'needs-improvement';
+    } else if (name === 'FID') {
+      if (value > 300) rating = 'poor';
+      else if (value > 100) rating = 'needs-improvement';
+    } else if (name === 'FCP') {
+      if (value > 3000) rating = 'poor';
+      else if (value > 1800) rating = 'needs-improvement';
+    } else if (name === 'TTFB') {
+      if (value > 1500) rating = 'poor';
+      else if (value > 800) rating = 'needs-improvement';
+    } else if (name === 'INP') {
+      if (value > 500) rating = 'poor';
+      else if (value > 200) rating = 'needs-improvement';
+    }
+
+    // Report to Umami
+    trackEvent('web-vital', {
+      metric: name,
+      value: Math.round(name === 'CLS' ? value * 1000 : value), // CLS is a score, multiply by 1000 to keep as integer if preferred
+      rating,
+      id,
+      label,
+      path: typeof window !== 'undefined' ? window.location.pathname : undefined,
+    });
+  });
+
+  return null;
+}

components/home/Hero.tsx

@@ -23,19 +23,27 @@ export default function Hero({ data }: { data?: any }) {
               className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
             >
               {data?.title ? (
-                <span
+                <>
-                  dangerouslySetInnerHTML={{
+                  {data.title.split(/(<green>.*?<\/green>)/g).map((part: string, i: number) => {
-                    __html: data.title
+                    if (part.startsWith('<green>') && part.endsWith('</green>')) {
-                      .replace(
+                      const content = part.replace(/<\/?green>/g, '');
-                        /<green>/g,
+                      return (
-                        '<span class="relative inline-block"><span class="relative z-10 text-accent italic inline-block">',
+                        <span key={i} className="relative inline-block">
-                      )
+                          <span className="relative z-10 text-accent italic inline-block">
-                      .replace(
+                            {content}
-                        /<\/green>/g,
+                          </span>
-                        '</span><div class="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both" style="animation-delay: 500ms;"><Scribble variant="circle" /></div></span>',
+                          <div
-                      ),
+                            className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both"
-                  }}
+                            style={{ animationDelay: '500ms' }}
-                />
+                          >
+                            <Scribble variant="circle" />
+                          </div>
+                        </span>
+                      );
+                    }
+                    return <span key={i}>{part}</span>;
+                  })}
+                </>
               ) : (
                 t.rich('title', {
                   green: (chunks) => (

components/home/RecentPosts.tsx

@@ -74,7 +74,7 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
                       suppressHydrationWarning
                       className="px-3 py-1 text-white/80 text-[10px] md:text-xs font-bold uppercase tracking-widest border border-white/20 rounded-full bg-white/10 backdrop-blur-md"
                     >
-                      {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                      {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
                         year: 'numeric',
                         month: 'short',
                         day: 'numeric',

lib/blog.ts

@@ -116,7 +116,7 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostD
         category: doc.category || '',
         featuredImage:
           typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-            ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
+            ? doc.featuredImage.url || doc.featuredImage.sizes?.card?.url
             : null,
         focalX:
           typeof doc.featuredImage === 'object' && doc.featuredImage !== null
@@ -162,7 +162,7 @@ export async function getAllPosts(locale: string): Promise<PostData[]> {
           category: doc.category || '',
           featuredImage:
             typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-              ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
+              ? doc.featuredImage.url || doc.featuredImage.sizes?.card?.url
               : null,
           focalX:
             typeof doc.featuredImage === 'object' && doc.featuredImage !== null

lib/services/create-services.server.ts

@@ -65,7 +65,15 @@ export function getServerAppServices(): AppServices {
   }
 
   const errors = config.errors.glitchtip.enabled
-    ? new GlitchtipErrorReportingService({ enabled: true }, logger, notifications)
+    ? new GlitchtipErrorReportingService(
+        {
+          enabled: true,
+          dsn: config.errors.glitchtip.dsn,
+          tracesSampleRate: 1.0, // Server-side we usually want higher visibility
+        },
+        logger,
+        notifications,
+      )
     : new NoopErrorReportingService();
 
   if (config.errors.glitchtip.enabled) {

lib/services/create-services.ts

@@ -69,7 +69,15 @@ export function getAppServices(): AppServices {
 
   // Create error reporting service (GlitchTip/Sentry or no-op)
   const errors = sentryEnabled
-    ? new GlitchtipErrorReportingService({ enabled: true }, logger, notifications)
+    ? new GlitchtipErrorReportingService(
+        {
+          enabled: true,
+          dsn: config.errors.glitchtip.dsn,
+          tracesSampleRate: 0.1, // Default to 10% sampling
+        },
+        logger,
+        notifications,
+      )
     : new NoopErrorReportingService();
 
   if (sentryEnabled) {

lib/services/errors/glitchtip-error-reporting-service.ts

@@ -8,6 +8,8 @@ import type { LoggerService } from '../logging/logger-service';
 
 export type GlitchtipErrorReportingServiceOptions = {
   enabled: boolean;
+  dsn?: string;
+  tracesSampleRate?: number;
 };
 
 // GlitchTip speaks the Sentry protocol; @sentry/nextjs can send to GlitchTip via DSN.
@@ -46,12 +48,12 @@ export class GlitchtipErrorReportingService implements ErrorReportingService {
     if (!this.sentryPromise) {
       this.sentryPromise = import('@sentry/nextjs').then((Sentry) => {
         // Client-side initialization must happen here since sentry.client.config.ts is empty
-        if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') {
+        if (typeof window !== 'undefined' && this.options.enabled) {
           Sentry.init({
-            dsn: 'https://public@errors.infra.mintel.me/1',
+            dsn: this.options.dsn || 'https://public@errors.infra.mintel.me/1',
             tunnel: '/errors/api/relay',
             enabled: true,
-            tracesSampleRate: 0,
+            tracesSampleRate: this.options.tracesSampleRate ?? 0.1,
             replaysOnErrorSampleRate: 1.0,
             replaysSessionSampleRate: 0.1,
           });

package.json

@@ -139,7 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.0.2",
+  "version": "2.2.5",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

scripts/check-forms.ts

@@ -66,16 +66,29 @@ async function main() {
 
   const page = await browser.newPage();
 
-  // 3. Inject Gatekeeper session bypassing auth screens
+  // 3. Authenticate through Gatekeeper login form
-  console.log(`\n🛡️ Injecting Gatekeeper Session...`);
+  console.log(`\n🛡️ Authenticating through Gatekeeper...`);
-  await page.setCookie({
+  try {
-    name: 'klz_gatekeeper_session',
+    // Navigate to a protected page so Gatekeeper redirects us to the login screen
-    value: gatekeeperPassword,
+    await page.goto(contactUrl, { waitUntil: 'networkidle0', timeout: 30000 });
-    domain: new URL(targetUrl).hostname,
+
-    path: '/',
+    // Check if we landed on the Gatekeeper login page
-    httpOnly: true,
+    const isGatekeeperPage = await page.$('input[name="password"]');
-    secure: targetUrl.startsWith('https://'),
+    if (isGatekeeperPage) {
-  });
+      await page.type('input[name="password"]', gatekeeperPassword);
+      await Promise.all([
+        page.waitForNavigation({ waitUntil: 'networkidle0', timeout: 30000 }),
+        page.click('button[type="submit"]'),
+      ]);
+      console.log(`✅ Gatekeeper authentication successful!`);
+    } else {
+      console.log(`✅ Already authenticated (no Gatekeeper gate detected).`);
+    }
+  } catch (err: any) {
+    console.error(`❌ Gatekeeper authentication failed: ${err.message}`);
+    await browser.close();
+    process.exit(1);
+  }
 
   let hasErrors = false;
 
@@ -155,9 +168,38 @@ async function main() {
     hasErrors = true;
   }
 
+  // 5. Cleanup: Delete test submissions from Payload CMS
+  console.log(`\n🧹 Starting cleanup of test submissions...`);
+  try {
+    const apiUrl = `${targetUrl.replace(/\/$/, '')}/api/form-submissions`;
+    const searchUrl = `${apiUrl}?where[email][equals]=testing@mintel.me`;
+
+    // Fetch test submissions
+    const searchResponse = await axios.get(searchUrl, {
+      headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
+    });
+
+    const testSubmissions = searchResponse.data.docs || [];
+    console.log(`   Found ${testSubmissions.length} test submissions to clean up.`);
+
+    for (const doc of testSubmissions) {
+      try {
+        await axios.delete(`${apiUrl}/${doc.id}`, {
+          headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
+        });
+        console.log(`   ✅ Deleted submission: ${doc.id}`);
+      } catch (delErr: any) {
+        console.error(`   ❌ Failed to delete submission ${doc.id}: ${delErr.message}`);
+      }
+    }
+  } catch (err: any) {
+    console.error(`❌ Cleanup failed: ${err.message}`);
+    // Don't mark the whole test as failed just because cleanup failed
+  }
+
   await browser.close();
 
-  // 5. Evaluation
+  // 6. Evaluation
   if (hasErrors) {
     console.error(`\n🚨 IMPORTANT: Form E2E checks failed. The CI build is failing.`);
     process.exit(1);