refactor: Replace hardcoded domain with SITE_URL constant across metadata and schema definitions for improved configurability.

app/[locale]/products/page.tsx

@@ -7,6 +7,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
 import { getOGImageMetadata } from '@/lib/metadata';
+import { SITE_URL } from '@/lib/schema';
 
 interface ProductsPageProps {
   params: {
@@ -14,7 +15,9 @@ interface ProductsPageProps {
   };
 }
 
-export async function generateMetadata({ params: { locale } }: ProductsPageProps): Promise<Metadata> {
+export async function generateMetadata({
+  params: { locale },
+}: ProductsPageProps): Promise<Metadata> {
   const t = await getTranslations({ locale, namespace: 'Products' });
   const title = t('meta.title') || t('title');
   const description = t('meta.description') || t('subtitle');
@@ -24,15 +27,15 @@ export async function generateMetadata({ params: { locale } }: ProductsPageProps
     alternates: {
       canonical: `/${locale}/products`,
       languages: {
-        'de': '/de/products',
-        'en': '/en/products',
+        de: '/de/products',
+        en: '/en/products',
         'x-default': '/en/products',
       },
     },
     openGraph: {
       title: `${title} | KLZ Cables`,
       description,
-      url: `https://klz-cables.com/${locale}/products`,
+      url: `${SITE_URL}/${locale}/products`,
       images: getOGImageMetadata('products', title, locale),
     },
     twitter: {
@@ -58,29 +61,29 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
       desc: t('categories.lowVoltage.description'),
       img: '/uploads/2024/11/low-voltage-category.webp',
       icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${params.locale}/products/${lowVoltageSlug}`
+      href: `/${params.locale}/products/${lowVoltageSlug}`,
     },
     {
       title: t('categories.mediumVoltage.title'),
       desc: t('categories.mediumVoltage.description'),
       img: '/uploads/2024/11/medium-voltage-category.webp',
       icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${params.locale}/products/${mediumVoltageSlug}`
+      href: `/${params.locale}/products/${mediumVoltageSlug}`,
     },
     {
       title: t('categories.highVoltage.title'),
       desc: t('categories.highVoltage.description'),
       img: '/uploads/2024/11/high-voltage-category.webp',
       icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${params.locale}/products/${highVoltageSlug}`
+      href: `/${params.locale}/products/${highVoltageSlug}`,
     },
     {
       title: t('categories.solar.title'),
       desc: t('categories.solar.description'),
       img: '/uploads/2024/11/solar-category.webp',
       icon: '/uploads/2024/11/Solar.svg',
-      href: `/${params.locale}/products/${solarSlug}`
-    }
+      href: `/${params.locale}/products/${solarSlug}`,
+    },
   ];
 
   return (
@@ -89,7 +92,10 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
       <section className="relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark">
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
-            <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg px-3 py-1 md:px-4 md:py-1.5">
+            <Badge
+              variant="saturated"
+              className="mb-4 md:mb-8 shadow-lg px-3 py-1 md:px-4 md:py-1.5"
+            >
               {t('heroSubtitle')}
             </Badge>
             <Heading level={1} className="text-white mb-4 md:mb-8">
@@ -97,16 +103,24 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                 green: (chunks) => (
                   <span className="relative inline-block">
                     <span className="relative z-10 text-accent italic">{chunks}</span>
-                    <Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block" />
+                    <Scribble
+                      variant="circle"
+                      className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block"
+                    />
                   </span>
-                )
+                ),
               })}
             </Heading>
             <p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
               {t('subtitle')}
             </p>
             <div className="flex flex-wrap gap-4 md:gap-6">
-              <Button href="#categories" variant="accent" size="lg" className="group w-full md:w-auto">
+              <Button
+                href="#categories"
+                variant="accent"
+                size="lg"
+                className="group w-full md:w-auto"
+              >
                 {t('viewProducts')}
                 <span className="ml-3 transition-transform group-hover:translate-y-1">↓</span>
               </Button>
@@ -123,8 +137,8 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                 <Link key={idx} href={category.href} className="group block">
                   <Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white active:scale-[0.98]">
                     <div className="relative h-[200px] md:h-[400px] overflow-hidden">
-                      <Image 
-                        src={category.img} 
+                      <Image
+                        src={category.img}
                         alt={category.title}
                         fill
                         className="object-cover transition-transform duration-1000 group-hover:scale-105"
@@ -132,13 +146,22 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                         unoptimized
                       />
                       <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
-                      
+
                       <div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
-                        <Image src={category.icon} alt="" width={24} height={24} className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
+                        <Image
+                          src={category.icon}
+                          alt=""
+                          width={24}
+                          height={24}
+                          className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80"
+                        />
                       </div>
 
                       <div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10">
-                        <Badge variant="accent" className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs">
+                        <Badge
+                          variant="accent"
+                          className="mb-2 md:mb-4 shadow-lg bg-accent text-primary-dark border-none text-[10px] md:text-xs"
+                        >
                           {t('categoryLabel')}
                         </Badge>
                         <h2 className="text-xl md:text-4xl font-bold text-white leading-tight transition-transform duration-500 group-hover:translate-x-1">
@@ -155,8 +178,18 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                           {t('viewProducts')}
                         </span>
                         <div className="ml-3 md:ml-4 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 shadow-sm">
-                          <svg className="w-4 h-4 md:w-5 md: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
+                            className="w-4 h-4 md:w-5 md: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>
@@ -168,7 +201,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
           </div>
         </Container>
       </Section>
-      
+
       {/* Technical Support CTA */}
       <Reveal>
         <Section className="bg-white py-12 md:py-28">
@@ -177,14 +210,23 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
               <div className="absolute top-0 right-0 w-1/2 h-full bg-accent/5 -skew-x-12 translate-x-1/4" />
               <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-6 md:gap-12">
                 <div className="max-w-2xl text-center lg:text-left">
-                  <h2 className="text-2xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-8 tracking-tight">{t('cta.title')}</h2>
+                  <h2 className="text-2xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-8 tracking-tight">
+                    {t('cta.title')}
+                  </h2>
                   <p className="text-base md:text-xl text-white/70 leading-relaxed">
                     {t('cta.description')}
                   </p>
                 </div>
-                <Button href={`/${params.locale}/contact`} variant="accent" size="lg" className="group whitespace-nowrap w-full md:w-auto md:h-16 md:px-10 md:text-xl">
+                <Button
+                  href={`/${params.locale}/contact`}
+                  variant="accent"
+                  size="lg"
+                  className="group whitespace-nowrap w-full md:w-auto md:h-16 md:px-10 md:text-xl"
+                >
                   {t('cta.button')}
-                  <span className="ml-4 transition-transform group-hover:translate-x-2">&rarr;</span>
+                  <span className="ml-4 transition-transform group-hover:translate-x-2">
+                    &rarr;
+                  </span>
                 </Button>
               </div>
             </div>