Marc Mintel
275a857554
Some checks failed
Build & Deploy / 🔍 Prepare (push) Failing after 4s
Build & Deploy / 🧪 QA (push) Has been skipped
Build & Deploy / 🏗️ Build (push) Has been skipped
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
213 lines
11 KiB
TypeScript
213 lines
11 KiB
TypeScript
import { notFound } from 'next/navigation';
|
|
import { Container, Badge, Heading } from '@/components/ui';
|
|
import { setRequestLocale, getTranslations } 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(props: any) {
|
|
const params = await props.params;
|
|
const locale = params?.locale || 'de'; // fallback to 'de' if undefined
|
|
const references = await getAllReferences(locale);
|
|
return references.map((ref) => ({
|
|
slug: ref.slug,
|
|
locale
|
|
}));
|
|
}
|
|
|
|
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);
|
|
const t = await getTranslations('ReferenceDetail');
|
|
|
|
if (!reference) {
|
|
notFound();
|
|
}
|
|
|
|
// MDX components mapping for industrial typography
|
|
const mdxComponents = {
|
|
Heading,
|
|
h1: (props: any) => <Heading level={1} size="2" className="hidden" {...props} />, // Hidden because Hero handles H1
|
|
h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4 text-neutral-dark" {...props} />,
|
|
h3: (props: any) => <Heading level={3} size="4" className="mt-12 mb-4 text-primary" {...props} />,
|
|
h4: (props: any) => <Heading level={4} size="5" className="mt-8 mb-4 uppercase tracking-widest text-neutral-500" {...props} />,
|
|
p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-medium max-w-3xl" {...props} />,
|
|
ul: (props: any) => <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 my-12" {...props} />,
|
|
ol: (props: any) => <ol className="list-decimal pl-6 mb-8 space-y-3 text-base md:text-lg text-text-secondary font-medium max-w-3xl" {...props} />,
|
|
li: (props: any) => {
|
|
// Smart Metric Card Logic
|
|
let text = '';
|
|
if (typeof props.children === 'string') {
|
|
text = props.children;
|
|
} else if (Array.isArray(props.children)) {
|
|
text = props.children.map((c: any) => typeof c === 'string' ? c : '').join('');
|
|
}
|
|
|
|
const match = text.match(/^([\d.,]+)\s*(m|Satz|Stück|km|kV|Fasern)\b(.*)/);
|
|
|
|
if (match && typeof props.children === 'string') {
|
|
const [, value, unit, rest] = match;
|
|
return (
|
|
<li className="bg-white p-6 md:p-8 rounded-3xl border border-neutral-100 flex flex-col justify-center hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:border-primary/30 transition-all duration-500 group hover:-translate-y-1 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-neutral-50 to-transparent rounded-bl-full -z-10 group-hover:from-primary/5 transition-colors duration-500" />
|
|
<div className="flex items-baseline gap-2 mb-3">
|
|
<span className="text-4xl md:text-5xl font-bold font-heading text-primary tracking-tight">{value}</span>
|
|
<span className="text-lg md:text-xl font-bold text-neutral-400">{unit}</span>
|
|
</div>
|
|
<span className="text-neutral-600 font-semibold text-sm md:text-base leading-snug">{rest.replace(/^[\s-]*\s/, '')}</span>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<li className="bg-neutral-50 p-6 rounded-3xl border border-neutral-100 flex items-start gap-4 hover:shadow-md transition-all duration-300 group hover:-translate-y-1">
|
|
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5 group-hover:bg-primary/20 transition-colors">
|
|
<svg className="w-4 h-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<span className="text-neutral-700 font-semibold leading-relaxed">{props.children}</span>
|
|
</li>
|
|
);
|
|
},
|
|
a: (props: any) => <a className="text-primary hover:text-primary-dark underline decoration-primary/30 underline-offset-4 hover:decoration-primary transition-all font-bold" {...props} />,
|
|
strong: (props: any) => <strong className="font-bold text-neutral-900" {...props} />,
|
|
blockquote: (props: any) => (
|
|
<blockquote className="border-l-4 border-primary pl-6 py-3 my-10 italic bg-neutral-50 rounded-r-2xl text-neutral-700 font-medium max-w-3xl shadow-sm" {...props} />
|
|
),
|
|
hr: (props: any) => <hr className="my-16 border-t-2 border-neutral-100 max-w-3xl" {...props} />,
|
|
img: (props: any) => <img className="rounded-2xl shadow-2xl my-12 max-w-full h-auto border border-neutral-100" {...props} />,
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-white">
|
|
{/* Hero Section */}
|
|
<section className="bg-[#050B14] text-white pt-28 pb-10 md:pt-52 md:pb-24 min-h-[30vh] md:min-h-[45vh] flex flex-col justify-end 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-30 mix-blend-luminosity scale-105"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#050B14] via-[#050B14]/70 to-transparent" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[#050B14] via-[#050B14]/40 to-transparent" />
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-0 opacity-20 z-0 pointer-events-none">
|
|
<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 uppercase tracking-widest text-xs font-bold"
|
|
eventProperties={{ location: 'reference_back_btn' }}
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
{t('backToOverview')}
|
|
</TrackedLink>
|
|
</div>
|
|
<div className="max-w-5xl">
|
|
<Badge variant="accent" className="mb-6">
|
|
{t('projectReference')}
|
|
</Badge>
|
|
<Heading level={1} variant="white" className="mb-10 leading-[1.1] md:text-6xl lg:text-7xl drop-shadow-lg">
|
|
{reference.frontmatter.title}
|
|
</Heading>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 mt-12 md:mt-16">
|
|
<div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
|
|
<MapPin className="w-8 h-8 text-primary shrink-0 opacity-80" />
|
|
<div>
|
|
<p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('location')}</p>
|
|
<p className="font-semibold text-lg md:text-xl text-white/90">{reference.frontmatter.location}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
|
|
<Briefcase className="w-8 h-8 text-primary shrink-0 opacity-80" />
|
|
<div>
|
|
<p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('client')}</p>
|
|
<p className="font-semibold text-lg md:text-xl text-white/90 line-clamp-2">{reference.frontmatter.client}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4 p-6 md:p-8 bg-white/5 rounded-3xl border border-white/10 backdrop-blur-md transition-all hover:bg-white/10">
|
|
<Calendar className="w-8 h-8 text-primary shrink-0 opacity-80" />
|
|
<div>
|
|
<p className="text-xs text-white/50 mb-1.5 uppercase tracking-widest font-bold">{t('period')}</p>
|
|
<p className="font-semibold text-lg md:text-xl text-white/90">{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">{t('scopeTitle')}</h2>
|
|
|
|
<div className="w-full">
|
|
<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">
|
|
{t('viewAll')}
|
|
</span>
|
|
<ButtonOverlay variant="primary" />
|
|
</TrackedLink>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|