Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| adbf2855d8 | |||
| 87942dff41 | |||
| 38bd728393 | |||
| 547e62f9d4 | |||
| 27fc34e186 | |||
| d068d68d7a | |||
| 908f2b0b69 | |||
| 272b7a397b | |||
| 9edfe24509 |
@@ -189,8 +189,7 @@ export default async function Layout(props: {
|
||||
<link rel="preconnect" href="https://img.infra.mintel.me" />
|
||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||
<link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
|
||||
{/* Preload critical hero video */}
|
||||
<link rel="preload" as="video" href="/assets/videos/web/hero-bohrung.mp4" type="video/mp4" />
|
||||
|
||||
</head>
|
||||
<body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white">
|
||||
<NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
|
||||
|
||||
@@ -38,6 +38,10 @@ const mdxComponents = (references: any[]) => ({
|
||||
AnimatedCounter,
|
||||
InteractiveGermanyMap,
|
||||
ScaleOfImpact,
|
||||
img: (props: any) => {
|
||||
// We proxy it through Next.js image optimizer
|
||||
return <img {...props} src={`/_next/image?url=${encodeURIComponent(props.src)}&w=1920&q=75`} loading="lazy" decoding="async" />;
|
||||
}
|
||||
});
|
||||
|
||||
export async function generateMetadata(props: any): Promise<Metadata> {
|
||||
|
||||
@@ -40,7 +40,10 @@ export async function POST(request: NextRequest) {
|
||||
website: websiteId,
|
||||
};
|
||||
|
||||
const umamiEndpoint = config.analytics.umami.apiEndpoint;
|
||||
let umamiEndpoint = config.analytics.umami.apiEndpoint || 'https://analytics.infra.mintel.me';
|
||||
if (!umamiEndpoint.startsWith('http')) {
|
||||
umamiEndpoint = `https://${umamiEndpoint}`;
|
||||
}
|
||||
|
||||
// Log the event (internal only)
|
||||
logger.debug('Forwarding analytics event', {
|
||||
|
||||
@@ -41,31 +41,42 @@ export function HeroVideo(props: HeroVideoProps) {
|
||||
const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
|
||||
const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/contact`;
|
||||
|
||||
const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
|
||||
useEffect(() => {
|
||||
// Delay loading the video until after the page has visually painted the LCP image
|
||||
const timer = setTimeout(() => {
|
||||
setVideoSrcLoaded(true);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-[85svh] md:h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
|
||||
{/* Background color while video loads */}
|
||||
<div className="absolute inset-0 z-0 bg-neutral-dark" />
|
||||
|
||||
{videoUrl ? (
|
||||
{/* ALWAYS render the Next.js optimized Image as the LCP element */}
|
||||
<Image
|
||||
key={`img-${pathname}-${posterSrc}`}
|
||||
src={posterSrc}
|
||||
alt={posterAlt}
|
||||
fill
|
||||
className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
|
||||
sizes="100vw"
|
||||
priority
|
||||
/>
|
||||
|
||||
{/* Render video on top if available, but defer src to avoid blocking LCP */}
|
||||
{videoUrl && (
|
||||
<video
|
||||
key={`${pathname}-${videoUrl}`}
|
||||
className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
|
||||
src={videoUrl}
|
||||
className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
|
||||
src={videoSrcLoaded ? videoUrl : undefined}
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
preload="auto"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
key={`img-${pathname}-${posterSrc}`}
|
||||
src={posterSrc}
|
||||
alt={posterAlt}
|
||||
fill
|
||||
className="object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
|
||||
sizes="100vw"
|
||||
priority
|
||||
preload="none"
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -4,51 +4,29 @@ import React, { useEffect, useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
|
||||
const PRELOAD_VIDEOS = [
|
||||
'/assets/videos/web/hero-bohrung.mp4'
|
||||
];
|
||||
|
||||
export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?: boolean }) {
|
||||
const [isLoading, setIsLoading] = useState(shouldShowLoader);
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldShowLoader) return;
|
||||
|
||||
// Fallback Timeout (4 Sekunden), falls Videos hängen
|
||||
const timeout = setTimeout(() => {
|
||||
finishLoading();
|
||||
}, 4000);
|
||||
|
||||
let videosLoaded = 0;
|
||||
|
||||
const checkAllLoaded = () => {
|
||||
videosLoaded++;
|
||||
if (videosLoaded === PRELOAD_VIDEOS.length) {
|
||||
clearTimeout(timeout);
|
||||
// Kleine Verzögerung für die smootheness
|
||||
setTimeout(finishLoading, 800);
|
||||
}
|
||||
};
|
||||
|
||||
PRELOAD_VIDEOS.forEach((src) => {
|
||||
const video = document.createElement('video');
|
||||
video.preload = 'auto';
|
||||
video.oncanplaythrough = checkAllLoaded;
|
||||
video.onerror = checkAllLoaded; // bei Fehler trotzdem weitermachen
|
||||
video.src = src;
|
||||
video.load();
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
return () => clearTimeout(timeout);
|
||||
}, [shouldShowLoader]);
|
||||
|
||||
const finishLoading = () => {
|
||||
// Set a session cookie so the server knows not to render the loader again
|
||||
document.cookie = "etib_initial_loader_v5=true; path=/; samesite=lax";
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldShowLoader) return;
|
||||
|
||||
// Just show the animation for a short time to allow UI to mount,
|
||||
// we don't preload 10MB videos anymore to save pagespeed!
|
||||
const timeout = setTimeout(() => {
|
||||
finishLoading();
|
||||
}, 1200);
|
||||
|
||||
// Cleanup
|
||||
return () => clearTimeout(timeout);
|
||||
}, [shouldShowLoader]);
|
||||
|
||||
// Wenn wir serverseitig rendern und es nicht zeigen sollen, return null
|
||||
if (!shouldShowLoader) return null;
|
||||
|
||||
|
||||
@@ -88,7 +88,7 @@ description: "Die E-TIB GmbH ist Ihr zuverlässiger Partner für komplexe Kabelt
|
||||
{/* Right Column: Imagery & Mission */}
|
||||
<div className="lg:col-span-7 relative">
|
||||
<div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
|
||||
<img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB im Einsatz" className="w-full h-full object-cover" />
|
||||
<img src="/_next/image?url=%2Fassets%2Fphotos%2FEtib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg&w=1920&q=75" alt="E-TIB im Einsatz" className="w-full h-full object-cover" loading="lazy" decoding="async" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
||||
|
||||
@@ -88,7 +88,7 @@ description: "E-TIB GmbH is your reliable partner for complex cable routes, hori
|
||||
{/* Right Column: Imagery & Mission */}
|
||||
<div className="lg:col-span-7 relative">
|
||||
<div className="aspect-[4/3] md:aspect-[16/9] lg:aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl relative border border-neutral-200/50">
|
||||
<img src="/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg" alt="E-TIB in action" className="w-full h-full object-cover" />
|
||||
<img src="/_next/image?url=%2Fassets%2Fphotos%2FEtib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-100.jpg&w=1920&q=75" alt="E-TIB in action" className="w-full h-full object-cover" loading="lazy" decoding="async" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-neutral-dark/95 via-neutral-dark/40 to-transparent"></div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 w-full p-8 md:p-12">
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
"prepare": "husky",
|
||||
"preinstall": "npx only-allow pnpm"
|
||||
},
|
||||
"version": "2.2.20",
|
||||
"version": "2.2.23",
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"@parcel/watcher",
|
||||
|
||||
3
proxy.ts
3
proxy.ts
@@ -9,8 +9,9 @@ export default createMiddleware({
|
||||
export const config = {
|
||||
// Match all pathnames except for
|
||||
// - /api (API routes)
|
||||
// - /stats (Analytics proxy)
|
||||
// - /_next (Next.js internals)
|
||||
// - /_static (inside /public)
|
||||
// - all root files inside /public (e.g. /favicon.ico)
|
||||
matcher: ['/((?!api|_next|assets|_static|_vercel|[\\w-]+\\.\\w+).*)']
|
||||
matcher: ['/((?!api|stats|_next|assets|_static|_vercel|[\\w-]+\\.\\w+).*)']
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user