chore: optimize reference gallery, add typography plugin, fix SEO and map animations

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

@@ -146,44 +146,42 @@ export default async function Page(props: { params: Promise<{ locale: string; sl
 
       {/* Main Content Area */}
       <Container className="py-16 md:py-24">
-        <div className="max-w-4xl mx-auto">
-          {/* Excerpt/Lead paragraph if available */}
-          {pageData.frontmatter.excerpt && (
-            <div className="mb-16">
-              <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
-                {pageData.frontmatter.excerpt}
-              </p>
-            </div>
-          )}
-
-          {/* Main content */}
-          <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary">
-            <MDXRemote source={pageData.content} components={mdxComponents} />
+        {/* Excerpt/Lead paragraph if available */}
+        {pageData.frontmatter.excerpt && (
+          <div className="mb-16">
+            <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
+              {pageData.frontmatter.excerpt}
+            </p>
           </div>
+        )}
 
-          {/* Support Section */}
-          <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
-            <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
-            <div className="relative z-10 max-w-2xl">
-              <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>
-              <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
-              <TrackedLink
-                href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`}
-                className={getButtonClasses('accent', 'lg')}
-                eventProperties={{
-                  location: 'generic_page_support_cta',
-                  page_slug: slug,
-                }}
-              >
-                <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
-                  {t('contactUs')}
-                  <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
-                    &rarr;
-                  </span>
+        {/* Main content */}
+        <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary">
+          <MDXRemote source={pageData.content} components={mdxComponents} />
+        </div>
+
+        {/* Support Section */}
+        <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
+          <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
+          <div className="relative z-10 max-w-2xl">
+            <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>
+            <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
+            <TrackedLink
+              href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`}
+              className={getButtonClasses('accent', 'lg')}
+              eventProperties={{
+                location: 'generic_page_support_cta',
+                page_slug: slug,
+              }}
+            >
+              <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
+                {t('contactUs')}
+                <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
+                  &rarr;
                 </span>
-                <ButtonOverlay variant="accent" />
-              </TrackedLink>
-            </div>
+              </span>
+              <ButtonOverlay variant="accent" />
+            </TrackedLink>
           </div>
         </div>
       </Container>

app/[locale]/layout.tsx

@@ -91,6 +91,10 @@ export default async function Layout(props: {
       label: safeLocale === 'de' ? 'Über uns' : 'About Us', 
       url: `/${safeLocale}/${await mapFileSlugToTranslated('ueber-uns', safeLocale)}` 
     },
+    {
+      label: safeLocale === 'de' ? 'Referenzen' : 'References',
+      url: `/${safeLocale}/referenzen`
+    },
     { 
       label: safeLocale === 'de' ? 'Karriere' : 'Careers', 
       url: `/${safeLocale}/${await mapFileSlugToTranslated('karriere', safeLocale)}` 
@@ -103,7 +107,7 @@ export default async function Layout(props: {
  
   const companyInfo = {
     contactEmail: 'info@e-tib.com',
-    contactPhone: '+49 15207230518',
+    contactPhone: '+49 (0) 3561 / 68577 33',
     address: 'Gewerbestraße 22\n03172 Guben'
   };
 

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

@@ -0,0 +1,166 @@
+import { notFound } from 'next/navigation';
+import { Container, Badge, Heading } from '@/components/ui';
+import { setRequestLocale } from 'next-intl/server';
+import { Metadata } from 'next';
+import { getReferenceBySlug, getAllReferences } from '@/lib/references';
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import { SITE_URL } from '@/lib/schema';
+import TrackedLink from '@/components/analytics/TrackedLink';
+import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
+import { MapPin, Calendar, Briefcase, ChevronLeft } from 'lucide-react';
+import Image from 'next/image';
+
+interface PageProps {
+  params: Promise<{
+    locale: string;
+    slug: string;
+  }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale, slug } = await params;
+  if (locale !== 'de' && locale !== 'en') return {};
+
+  const reference = await getReferenceBySlug(slug, locale);
+  if (!reference) return {};
+
+  return {
+    title: `${reference.frontmatter.title} | Referenzen | E-TIB Gruppe`,
+    description: `Details zum Projekt ${reference.frontmatter.title} in ${reference.frontmatter.location}.`,
+    alternates: {
+      canonical: `${SITE_URL}/${locale}/referenzen/${slug}`,
+    },
+    openGraph: {
+      title: `${reference.frontmatter.title} | E-TIB`,
+      description: `Details zum Projekt ${reference.frontmatter.title} in ${reference.frontmatter.location}.`,
+      url: `${SITE_URL}/${locale}/referenzen/${slug}`,
+    },
+  };
+}
+
+export async function generateStaticParams({ params }: { params: { locale: string } }) {
+  const references = await getAllReferences(params.locale);
+  return references.map((ref) => ({
+    slug: ref.slug,
+  }));
+}
+
+export default async function ReferenceDetail(props: { params: Promise<{ locale: string; slug: string }> }) {
+  const { locale, slug } = await props.params;
+  
+  if (locale !== 'de' && locale !== 'en') {
+    notFound();
+  }
+  
+  setRequestLocale(locale);
+  const reference = await getReferenceBySlug(slug, locale);
+
+  if (!reference) {
+    notFound();
+  }
+
+  // MDX components mapping can be expanded if we use custom components in reference MDX
+  const mdxComponents = {
+    ul: ({ children }: any) => <ul className="space-y-4 my-8 pl-0 list-none">{children}</ul>,
+    li: ({ children }: any) => (
+      <li className="flex items-start gap-4 p-4 bg-neutral-50 rounded-2xl border border-neutral-100 shadow-sm">
+        <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center shrink-0 mt-0.5">
+          <div className="w-2.5 h-2.5 rounded-full bg-primary" />
+        </div>
+        <span className="text-lg font-medium text-neutral-800">{children}</span>
+      </li>
+    ),
+  };
+
+  return (
+    <div className="flex flex-col min-h-screen bg-white">
+      {/* Hero Section */}
+      <section className="bg-[#050B14] text-white py-20 md:py-32 relative overflow-hidden">
+        {reference.frontmatter.featuredImage && (
+          <div className="absolute inset-0 z-0">
+            <Image
+              src={reference.frontmatter.featuredImage}
+              alt={reference.frontmatter.title}
+              fill
+              className="object-cover opacity-25 mix-blend-luminosity scale-105"
+              priority
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-[#050B14] via-[#050B14]/60 to-transparent" />
+            <div className="absolute inset-0 bg-gradient-to-r from-[#050B14] via-transparent to-transparent" />
+          </div>
+        )}
+        <div className="absolute inset-0 opacity-20 z-0">
+          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/30 via-transparent to-transparent" />
+        </div>
+        <Container className="relative z-10">
+          <div className="mb-12">
+            <TrackedLink
+              href={`/${locale}/referenzen`}
+              className="inline-flex items-center gap-2 text-white/60 hover:text-white transition-colors"
+              eventProperties={{ location: 'reference_back_btn' }}
+            >
+              <ChevronLeft className="w-5 h-5" />
+              Zurück zur Übersicht
+            </TrackedLink>
+          </div>
+          <div className="max-w-4xl">
+            <Badge variant="accent" className="mb-4 md:mb-6">
+              Projektreferenz
+            </Badge>
+            <Heading level={1} variant="white" className="mb-8 leading-tight">
+              {reference.frontmatter.title}
+            </Heading>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
+              <div className="flex items-start gap-4 p-6 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-sm">
+                <MapPin className="w-8 h-8 text-primary shrink-0" />
+                <div>
+                  <p className="text-sm text-white/50 mb-1 uppercase tracking-wider font-bold">Ort</p>
+                  <p className="font-semibold text-lg">{reference.frontmatter.location}</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-4 p-6 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-sm">
+                <Briefcase className="w-8 h-8 text-primary shrink-0" />
+                <div>
+                  <p className="text-sm text-white/50 mb-1 uppercase tracking-wider font-bold">Auftraggeber</p>
+                  <p className="font-semibold text-lg">{reference.frontmatter.client}</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-4 p-6 bg-white/5 rounded-2xl border border-white/10 backdrop-blur-sm">
+                <Calendar className="w-8 h-8 text-primary shrink-0" />
+                <div>
+                  <p className="text-sm text-white/50 mb-1 uppercase tracking-wider font-bold">Zeitraum</p>
+                  <p className="font-semibold text-lg">{reference.frontmatter.dateString || new Date(reference.frontmatter.date).getFullYear()}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </section>
+
+      {/* Main Content Area */}
+      <Container className="py-16 md:py-24">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl font-bold text-neutral-dark mb-8">Leistungsumfang & Projektbeschreibung</h2>
+          
+          <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary">
+            <MDXRemote source={reference.content} components={mdxComponents} />
+          </div>
+
+          <div className="mt-20 flex justify-center">
+             <TrackedLink
+                href={`/${locale}/referenzen`}
+                className={getButtonClasses('primary', 'lg')}
+                eventProperties={{ location: 'reference_bottom_back_btn' }}
+              >
+                <span className="relative z-10 flex items-center justify-center gap-2">
+                  Alle Referenzen ansehen
+                </span>
+                <ButtonOverlay variant="primary" />
+              </TrackedLink>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}

app/[locale]/referenzen/page.tsx

@@ -0,0 +1,172 @@
+import { Container, Heading, Badge } from '@/components/ui';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { Metadata } from 'next';
+import { getAllReferences } from '@/lib/references';
+import TrackedLink from '@/components/analytics/TrackedLink';
+import { MapPin, Calendar, Briefcase, ArrowUpRight } from 'lucide-react';
+import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
+import { SITE_URL } from '@/lib/schema';
+import Image from 'next/image';
+import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
+import { defaultLocations } from '@/lib/map-data';
+
+interface PageProps {
+  params: Promise<{
+    locale: string;
+  }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { locale } = await params;
+  if (locale !== 'de' && locale !== 'en') return {};
+
+  return {
+    title: 'Referenzen | E-TIB Gruppe',
+    description: 'Erfolgreich abgeschlossene Projekte der E-TIB Gruppe im Bereich Kabeltiefbau, Spülbohrtechnik und Netzinfrastruktur.',
+    alternates: {
+      canonical: `${SITE_URL}/${locale}/referenzen`,
+      languages: {
+        de: `${SITE_URL}/de/referenzen`,
+        en: `${SITE_URL}/en/referenzen`,
+        'x-default': `${SITE_URL}/en/referenzen`,
+      },
+    },
+  };
+}
+
+export default async function ReferenzenOverview(props: { params: Promise<{ locale: string }> }) {
+  const { locale } = await props.params;
+  setRequestLocale(locale);
+  const t = await getTranslations('StandardPage');
+
+  const references = await getAllReferences(locale);
+  
+  // Enrich the static map locations with dynamic project data (images, details)
+  const enrichedLocations = defaultLocations.map(loc => {
+    if (loc.type === 'project') {
+      const ref = references.find(r => r.slug === loc.id);
+      if (ref) {
+        return {
+          ...loc,
+          featuredImage: ref.frontmatter.featuredImage,
+          details: [
+            ref.frontmatter.client || 'Kunde',
+            ref.frontmatter.dateString || new Date(ref.frontmatter.date).getFullYear().toString(),
+          ],
+        };
+      }
+    }
+    return loc;
+  });
+
+  return (
+    <div className="flex flex-col min-h-screen bg-neutral-50 pb-16 md:pb-24">
+      {/* Map Hero Section */}
+      <InteractiveGermanyMap
+        isHero={true}
+        badge="Unsere Referenzen"
+        title={<>Erfolgreich umgesetzte<br/>Projekte.</>}
+        description="Vom Breitbandausbau bis zur komplexen 110kV-Trasse: Ein Auszug unserer bundesweiten Projekte, bei denen wir Infrastruktur für die Zukunft geschaffen haben. Entdecken Sie unsere Standorte."
+        locations={enrichedLocations}
+      />
+
+      {/* Main Content Area */}
+      <Container className="relative z-20 mt-16 md:mt-24">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+          {references.map((ref) => (
+            <TrackedLink
+              key={ref.slug}
+              href={`/${locale}/referenzen/${ref.slug}`}
+              className="group flex flex-col bg-white border border-neutral-100 rounded-3xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
+              eventProperties={{
+                location: 'referenzen_grid',
+                target_slug: ref.slug,
+              }}
+            >
+              <div className="flex flex-col h-full relative">
+                {/* Image Section */}
+                <div className="relative h-64 w-full bg-[#f4f4f5] overflow-hidden shrink-0 border-b border-neutral-100">
+                  {ref.frontmatter.featuredImage ? (
+                    <Image
+                      src={ref.frontmatter.featuredImage}
+                      alt={ref.frontmatter.title}
+                      fill
+                      className="object-cover group-hover:scale-105 transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] filter grayscale-[20%] group-hover:grayscale-0"
+                    />
+                  ) : (
+                    <div className="absolute inset-0 bg-[#f4f4f5] flex items-center justify-center">
+                      <Image src="/assets/logo.png" alt="E-TIB Logo" width={80} height={80} className="opacity-20 grayscale" />
+                    </div>
+                  )}
+                  <div className="absolute inset-0 bg-black/5 group-hover:bg-transparent transition-colors duration-500" />
+                  
+                  {/* Location Badge */}
+                  <div className="absolute top-4 left-4 z-10">
+                    <span className="bg-white/95 backdrop-blur-md text-neutral-dark px-3 py-1.5 rounded-sm text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5 shadow-sm border border-neutral-200">
+                      <MapPin className="w-3 h-3 text-primary" />
+                      {ref.frontmatter.location}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Content Section */}
+                <div className="flex flex-col flex-grow p-6 md:p-8 bg-white">
+                  <h3 className="text-xl md:text-2xl font-bold font-heading text-neutral-dark mb-6 group-hover:text-primary transition-colors line-clamp-3 leading-[1.2]">
+                    {ref.frontmatter.title}
+                  </h3>
+                  
+                  {/* Technical Meta Data */}
+                  <div className="grid grid-cols-[1fr_1fr] gap-4 mt-auto border-t border-neutral-100 pt-6 pr-16 md:pr-20 relative z-10">
+                    <div className="min-w-0">
+                      <span className="block text-[10px] uppercase tracking-widest text-neutral-400 font-bold mb-1">Kunde</span>
+                      <span className="flex items-center gap-1.5 text-sm font-semibold text-neutral-700">
+                        <Briefcase className="w-3.5 h-3.5 text-primary shrink-0" />
+                        <span className="truncate">{ref.frontmatter.client}</span>
+                      </span>
+                    </div>
+                    <div className="min-w-0">
+                      <span className="block text-[10px] uppercase tracking-widest text-neutral-400 font-bold mb-1">Zeitraum</span>
+                      <span className="flex items-center gap-1.5 text-sm font-semibold text-neutral-700">
+                        <Calendar className="w-3.5 h-3.5 text-primary shrink-0" />
+                        <span className="truncate">{ref.frontmatter.dateString || new Date(ref.frontmatter.date).getFullYear()}</span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                
+                {/* Industrial Hover Indicator */}
+                <div className="absolute right-6 bottom-6 md:right-8 md:bottom-8 w-10 h-10 bg-neutral-50 border border-neutral-200 rounded flex items-center justify-center transform group-hover:bg-primary group-hover:border-primary transition-colors duration-300">
+                  <ArrowUpRight className="w-5 h-5 text-neutral-dark group-hover:text-white transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300" />
+                </div>
+              </div>
+            </TrackedLink>
+          ))}
+        </div>
+
+        {/* Support Section */}
+        <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group">
+          <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
+          <div className="relative z-10 max-w-2xl">
+            <h3 className="text-2xl md:text-3xl font-bold mb-4">Ihr nächstes Projekt?</h3>
+            <p className="text-lg text-white/70 mb-8">Lassen Sie uns gemeinsam herausragende Infrastruktur bauen.</p>
+            <TrackedLink
+              href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`}
+              className={getButtonClasses('accent', 'lg')}
+              eventProperties={{
+                location: 'referenzen_support_cta',
+              }}
+            >
+              <span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
+                {t('contactUs')}
+                <span className="ml-2 transition-transform group-hover/btn:translate-x-1">
+                  &rarr;
+                </span>
+              </span>
+              <ButtonOverlay variant="accent" />
+            </TrackedLink>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}

app/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @config "../tailwind.config.cjs";