Compare commits
65 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 69dd79dfad | |||
| a6c4cc53f9 | |||
| 29f83f8151 | |||
| cec08e3ab3 | |||
| 837567c1f4 | |||
| 4dcc0061fc | |||
| bd25ec935d | |||
| b3b85202eb | |||
| b4b0c7c48a | |||
| 35fb37bb14 | |||
| fb2d385e88 | |||
| c54085fe3f | |||
| 232c55c566 | |||
| 52d81ea6cc | |||
| bc0e7c2283 | |||
| 6d2152998b | |||
| f727e2abfb | |||
| f04163f56d | |||
| e9e209d6e7 | |||
| 9af6a53325 | |||
| 8627bae98b | |||
| 17620482da | |||
| c5e9a67546 | |||
| 1b7e42ccc9 | |||
| 7a2382606e | |||
| 3b16dbe08d | |||
| 09d0395233 | |||
| 857c055862 | |||
| 500c2c64f4 | |||
| e13ce8bcec | |||
| feb8372a7c | |||
| c190a4f67e | |||
| 6717b32d44 | |||
| f1732917bc | |||
| 1f666d1b34 | |||
| ab42590206 | |||
| 7d4ff03806 | |||
| 26ed3e3f1f | |||
| eaf40dec7c | |||
| d56ce045c3 | |||
| 586b6cdee8 | |||
| f1b8ee1188 | |||
| 88cc214ddb | |||
| 25facb995f | |||
| 7b01924055 | |||
| 474672b2a1 | |||
| 7e552bbea5 | |||
| 21886a693c | |||
| 45944cbfa7 | |||
| 761c9c956f | |||
| e18559b83c | |||
| 818ccc8fae | |||
| b64b2ccf25 | |||
| e219b3b818 | |||
| 88628ee663 | |||
| 734dd19725 | |||
| 3175b99177 | |||
| 1986280520 | |||
| d4437f5274 | |||
| f09c338d0d | |||
| 91d6073a58 | |||
| c5f2642d05 | |||
| c2bfdc7e7c | |||
| 5625428113 | |||
| 8f9a37466c |
@@ -20,6 +20,7 @@ concurrency:
|
||||
env:
|
||||
PUPPETEER_SKIP_DOWNLOAD: "true"
|
||||
COREPACK_NPM_REGISTRY: "https://registry.npmmirror.com"
|
||||
GIT_HTTP_VERSION: HTTP/1.1
|
||||
|
||||
|
||||
jobs:
|
||||
@@ -49,9 +50,7 @@ jobs:
|
||||
echo "=== Tool Cache Usage ==="
|
||||
du -sh /opt/hostedtoolcache/* || true
|
||||
du -sh /opt/hostedtoolcache/.[!.]* || true
|
||||
echo "Purging old tool caches..."
|
||||
rm -rf /opt/hostedtoolcache/* || true
|
||||
rm -rf /opt/hostedtoolcache/.[!.]* || true
|
||||
echo "Purging old tool caches skipped to prevent runner corruption."
|
||||
echo "=== Host Disk Usage ==="
|
||||
docker run --rm -v /:/host-root alpine df -h || true
|
||||
echo "=== Host Inode Usage ==="
|
||||
@@ -60,23 +59,7 @@ jobs:
|
||||
docker ps --format "table {{.Names}}\t{{.Status}}\t{{.Image}}" || true
|
||||
echo "=== Host Docker Info ==="
|
||||
docker info || true
|
||||
echo "Pruning host Buildkit builder caches aggressively..."
|
||||
for container in $(docker ps --filter "name=buildx_buildkit_builder" --format "{{.Names}}"); do
|
||||
echo "Pruning Buildkit inside container: $container"
|
||||
docker exec -i "$container" buildctl prune --all || true
|
||||
done
|
||||
echo "Removing buildkit builder containers to clear overlay storage..."
|
||||
containers=$(docker ps -a --filter "name=buildx_buildkit_builder" -q)
|
||||
if [ -n "$containers" ]; then
|
||||
docker rm -f $containers || true
|
||||
fi
|
||||
echo "=== Truncating host Docker container log files ==="
|
||||
docker run --rm -v /:/host-root alpine sh -c "truncate -s 0 /host-root/mnt/HC_Volume_104796416/docker/containers/*/*.log" || true
|
||||
echo "Purging old build layers, unused volumes and images..."
|
||||
docker builder prune -a -f || true
|
||||
docker volume prune -f || true
|
||||
docker system prune -a -f --volumes || true
|
||||
echo "=== System Disk Usage After Prune ==="
|
||||
echo "=== System Disk Usage After Check ==="
|
||||
df -h || true
|
||||
|
||||
- name: Checkout repository
|
||||
@@ -112,6 +95,15 @@ jobs:
|
||||
fi
|
||||
else
|
||||
TARGET="branch"
|
||||
|
||||
# Check if this exact commit has a tag. If so, skip the branch deploy
|
||||
# because the tag pipeline will handle the production/staging deploy.
|
||||
git fetch --tags --quiet || true
|
||||
if git describe --tags --exact-match HEAD >/dev/null 2>&1; then
|
||||
echo "Commit has a tag. Skipping branch deployment to favor tag deployment."
|
||||
TARGET="skip"
|
||||
fi
|
||||
|
||||
SLUG=$(echo "$REF" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//')
|
||||
IMAGE_TAG="branch-${SLUG}-${SHORT_SHA}"
|
||||
ENV_FILE=".env.branch-${SLUG}"
|
||||
@@ -218,6 +210,13 @@ jobs:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: 🚦 Priority Gate Check
|
||||
env:
|
||||
GITEA_PAT: ${{ secrets.GITEA_PAT }}
|
||||
CURRENT_RUN_ID: ${{ github.run_id }}
|
||||
CURRENT_TARGET: ${{ needs.prepare.outputs.target }}
|
||||
run: bash scripts/priority-gate.sh
|
||||
|
||||
- name: 🔐 Registry Auth
|
||||
id: auth
|
||||
env:
|
||||
@@ -297,6 +296,13 @@ jobs:
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: 🚦 Priority Gate Check
|
||||
env:
|
||||
GITEA_PAT: ${{ secrets.GITEA_PAT }}
|
||||
CURRENT_RUN_ID: ${{ github.run_id }}
|
||||
CURRENT_TARGET: ${{ needs.prepare.outputs.target }}
|
||||
run: bash scripts/priority-gate.sh
|
||||
- name: 📝 Generate Environment
|
||||
shell: bash
|
||||
env:
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{"chromeFlags":"--no-sandbox --disable-setuid-sandbox --disable-dev-shm-usage --headless=new","port":59457}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -2,7 +2,6 @@
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { getAppServices } from '@/lib/services/create-services';
|
||||
import { Button, Heading } from '@/components/ui';
|
||||
import { Terminal, Activity, AlertTriangle, RefreshCw, Home, ShieldAlert } from 'lucide-react';
|
||||
import { m } from 'framer-motion';
|
||||
@@ -26,9 +25,7 @@ export default function Error({
|
||||
return;
|
||||
}
|
||||
|
||||
const services = getAppServices();
|
||||
services.errors.captureException(error);
|
||||
services.logger.error('Application error caught by boundary', {
|
||||
console.error('Application error caught by boundary', {
|
||||
message: error?.message || 'Unknown error',
|
||||
stack: error?.stack,
|
||||
digest: error?.digest,
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { Footer } from '@/components/layout/Footer';
|
||||
import { Header } from '@/components/layout/Header';
|
||||
import { MobileBottomNav } from '@/components/layout/MobileBottomNav';
|
||||
import JsonLd from '@/components/JsonLd';
|
||||
import SkipLink from '@/components/SkipLink';
|
||||
import AnalyticsShell from '@/components/analytics/AnalyticsShell';
|
||||
@@ -17,7 +16,10 @@ import { mapFileSlugToTranslated } from '@/lib/slugs';
|
||||
import { cookies } from 'next/headers';
|
||||
|
||||
import { TransitionProvider } from '@/components/providers/TransitionProvider';
|
||||
import { InitialLoader } from '@/components/providers/InitialLoader';
|
||||
|
||||
import { DynamicInitialLoader as InitialLoader } from '@/components/providers/DynamicInitialLoader';
|
||||
import { DynamicMobileBottomNav as MobileBottomNav } from '@/components/layout/DynamicMobileBottomNav';
|
||||
|
||||
import { DynamicCorporateBackground as CorporateBackground } from '@/components/decorations/DynamicCorporateBackground';
|
||||
import { DynamicPageTransitionShutter as PageTransitionShutter } from '@/components/providers/DynamicPageTransitionShutter';
|
||||
|
||||
@@ -197,7 +199,7 @@ export default async function Layout(props: {
|
||||
|
||||
<main
|
||||
id="main-content"
|
||||
className="flex-grow animate-fade-in overflow-visible"
|
||||
className="flex-grow overflow-visible"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -122,7 +122,9 @@ export async function generateMetadata(props: any): Promise<Metadata> {
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Home(props: any) {
|
||||
import { preload } from 'react-dom';
|
||||
|
||||
export default async function Home(props: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await props.params;
|
||||
|
||||
if (locale !== 'de' && locale !== 'en') {
|
||||
@@ -130,6 +132,7 @@ export default async function Home(props: any) {
|
||||
}
|
||||
|
||||
setRequestLocale(locale);
|
||||
preload('/germany-map.svg', { as: 'image', fetchPriority: 'high' });
|
||||
|
||||
const mdx = await getMdxContent(locale, 'home');
|
||||
const allReferences = await getAllReferences(locale);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Container } from '@/components/ui';
|
||||
import { Container } from '@/components/ui/Container';
|
||||
import { getTranslations, setRequestLocale } from 'next-intl/server';
|
||||
import { Metadata } from 'next';
|
||||
import TrackedLink from '@/components/analytics/TrackedLink';
|
||||
@@ -7,7 +7,8 @@ import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
|
||||
import { SITE_URL } from '@/lib/schema';
|
||||
import Image from 'next/image';
|
||||
import { standorteData, standorteLocations } from '@/lib/standorte-data';
|
||||
import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
|
||||
import nextDynamic from 'next/dynamic';
|
||||
const InteractiveGermanyMap = nextDynamic(() => import('@/components/blocks/InteractiveGermanyMap').then(mod => mod.InteractiveGermanyMap));
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{
|
||||
@@ -33,11 +34,15 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
|
||||
};
|
||||
}
|
||||
|
||||
import { preload } from 'react-dom';
|
||||
|
||||
export default async function StandorteOverview(props: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await props.params;
|
||||
const safeLocale = locale === 'de' ? 'de' : 'en';
|
||||
setRequestLocale(safeLocale);
|
||||
const t = await getTranslations('StandardPage');
|
||||
|
||||
preload('/germany-map.svg', { as: 'image', fetchPriority: 'high' });
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-neutral-50 pb-16 md:pb-24">
|
||||
@@ -70,6 +75,7 @@ export default async function StandorteOverview(props: { params: Promise<{ local
|
||||
alt={standort.name}
|
||||
fill
|
||||
className="object-cover transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] filter grayscale-[20%] group-hover:scale-105 group-hover:grayscale-0"
|
||||
sizes="(max-width: 768px) 200px, 384px"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/10 transition-colors duration-500" />
|
||||
|
||||
@@ -85,9 +91,9 @@ export default async function StandorteOverview(props: { params: Promise<{ local
|
||||
{/* Content Section */}
|
||||
<div className="flex flex-col flex-grow p-6 md:p-8 bg-white">
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<h3 className="text-xl md:text-2xl font-bold font-heading text-neutral-dark transition-colors leading-[1.2] group-hover:text-primary">
|
||||
<h2 className="text-xl md:text-2xl font-bold font-heading text-neutral-dark transition-colors leading-[1.2] group-hover:text-primary">
|
||||
{standort.name}
|
||||
</h3>
|
||||
</h2>
|
||||
<ArrowUpRight className="w-5 h-5 text-neutral-400 group-hover:text-primary transition-colors shrink-0" />
|
||||
</div>
|
||||
|
||||
@@ -98,7 +104,7 @@ export default async function StandorteOverview(props: { params: Promise<{ local
|
||||
{/* Meta Data */}
|
||||
<div className="flex flex-col gap-3 mt-auto border-t border-neutral-100 pt-6 relative z-10">
|
||||
<div className="min-w-0">
|
||||
<span className="block text-[10px] uppercase tracking-widest text-neutral-400 font-bold mb-1">
|
||||
<span className="block text-[10px] uppercase tracking-widest text-neutral-500 font-bold mb-1">
|
||||
{safeLocale === 'de' ? 'Adresse' : 'Address'}
|
||||
</span>
|
||||
<span className="flex items-start gap-2 text-sm font-semibold text-neutral-700 leading-tight">
|
||||
@@ -117,7 +123,7 @@ export default async function StandorteOverview(props: { params: Promise<{ local
|
||||
<div className="mt-12 md: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">{t('nextProjectTitle')}</h3>
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-4">{t('nextProjectTitle')}</h2>
|
||||
<p className="text-lg text-white/70 mb-8">{t('nextProjectDesc')}</p>
|
||||
<TrackedLink
|
||||
href={`/${safeLocale}/${safeLocale === 'de' ? 'kontakt' : 'contact'}`}
|
||||
|
||||
@@ -132,7 +132,7 @@ export async function sendContactFormAction(formData: FormData) {
|
||||
|
||||
// Notify via Gotify (Internal)
|
||||
await services.notifications.notify({
|
||||
title: `📩 ${notificationSubject}`,
|
||||
title: `📩 [E-TIB] ${notificationSubject}`,
|
||||
message: `New message from ${name} (${email}):\n\n${message}`,
|
||||
priority: 5,
|
||||
});
|
||||
@@ -153,7 +153,7 @@ export async function sendContactFormAction(formData: FormData) {
|
||||
services.errors.captureException(error, { action: 'sendContactFormAction', email });
|
||||
|
||||
await services.notifications.notify({
|
||||
title: '🚨 Contact Form Error',
|
||||
title: '🚨 [E-TIB] Contact Form Error',
|
||||
message: `Failed to send emails for ${name} (${email}). Error: ${errorMsg}`,
|
||||
priority: 8,
|
||||
});
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
'use client';
|
||||
|
||||
import * as Sentry from '@sentry/nextjs';
|
||||
import Error from 'next/error';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
@@ -10,7 +9,7 @@ export default function GlobalError({
|
||||
error: Error & { digest?: string };
|
||||
}) {
|
||||
useEffect(() => {
|
||||
Sentry.captureException(error);
|
||||
console.error('Global Error:', error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
|
||||
@@ -87,3 +87,35 @@
|
||||
}
|
||||
}
|
||||
/* trigger rebuild */
|
||||
|
||||
@layer utilities {
|
||||
@keyframes hero-fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-hero-fade-in-up {
|
||||
animation: hero-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@keyframes hero-zoom-out {
|
||||
from {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-hero-zoom-out {
|
||||
animation: hero-zoom-out 1.5s ease-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
48
bundle-stats.json
Normal file
48
bundle-stats.json
Normal file
@@ -0,0 +1,48 @@
|
||||
.next/static/chunks/0b521531212fbb38.js
|
||||
.next/static/chunks/0c4bd4931d57e66a.js
|
||||
.next/static/chunks/114976d6e8233fa6.js
|
||||
.next/static/chunks/163f657a16afbe5e.js
|
||||
.next/static/chunks/1c2f1bc547a6b6db.js
|
||||
.next/static/chunks/2583fa7802927c7b.js
|
||||
.next/static/chunks/30da1bf4e9770388.js
|
||||
.next/static/chunks/38b815a6d50481c3.js
|
||||
.next/static/chunks/3dc2f63532eb2144.js
|
||||
.next/static/chunks/3e327b4e2347bc0f.js
|
||||
.next/static/chunks/3ef3cefd2dae1060.js
|
||||
.next/static/chunks/45499dd88f8aa0be.js
|
||||
.next/static/chunks/4b9828b23c1decfd.js
|
||||
.next/static/chunks/4c801febc70daa53.js
|
||||
.next/static/chunks/4d5ea13dba62fe42.js
|
||||
.next/static/chunks/4dffe404993f353e.js
|
||||
.next/static/chunks/4f185d0c413fdb9e.js
|
||||
.next/static/chunks/4f69e8e09eeae4d6.js
|
||||
.next/static/chunks/4fa8be7f170d31f3.js
|
||||
.next/static/chunks/583b451485662887.js
|
||||
.next/static/chunks/5e1e2d5c357c1b57.js
|
||||
.next/static/chunks/6216b234a7a88a60.js
|
||||
.next/static/chunks/651fbbae0062342b.js
|
||||
.next/static/chunks/66a1b90666fc2830.js
|
||||
.next/static/chunks/6c0ddf2fd63ab912.js
|
||||
.next/static/chunks/72cf73de45fde6cf.js
|
||||
.next/static/chunks/75ea3a278c540e05.js
|
||||
.next/static/chunks/77a84d4dc662b7cf.js
|
||||
.next/static/chunks/7c603cfd5a61abd1.js
|
||||
.next/static/chunks/84ddf763fbc98e13.js
|
||||
.next/static/chunks/885c97d656f95ebd.js
|
||||
.next/static/chunks/8d6ae249fcc5e38f.js
|
||||
.next/static/chunks/920f860e909b2eb8.js
|
||||
.next/static/chunks/951d03271d663d8a.js
|
||||
.next/static/chunks/a094276392fca24a.js
|
||||
.next/static/chunks/a2e7fbe3f294caac.js
|
||||
.next/static/chunks/a6c9d757034eb86a.js
|
||||
.next/static/chunks/a6dc76eec9924929.js
|
||||
.next/static/chunks/c3f21c4df538784a.js
|
||||
.next/static/chunks/c641ee8514fa0552.js
|
||||
.next/static/chunks/d8c0ef20e0ad9790.js
|
||||
.next/static/chunks/e60e6d615bf7d2f5.js
|
||||
.next/static/chunks/e714b6ccaf8d5f12.js
|
||||
.next/static/chunks/eeebcf8c8de1a29a.js
|
||||
.next/static/chunks/f0b47c1f19d25fd2.js
|
||||
.next/static/chunks/f8d5b1a2accefb4c.js
|
||||
.next/static/chunks/fa18a72fd9fb11d5.js
|
||||
.next/static/chunks/turbopack-2aac2a40101e9988.js
|
||||
@@ -3,7 +3,7 @@
|
||||
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { m, LazyMotion, AnimatePresence } from 'framer-motion';
|
||||
import { m, AnimatePresence, LazyMotion } from 'framer-motion';
|
||||
import { useRouter, useSearchParams, usePathname } from 'next/navigation';
|
||||
|
||||
interface LightboxProps {
|
||||
|
||||
@@ -2,34 +2,28 @@
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { usePathname, useSearchParams } from 'next/navigation';
|
||||
import { getAppServices } from '@/lib/services/create-services';
|
||||
import { useAnalytics } from './useAnalytics';
|
||||
|
||||
/**
|
||||
* AnalyticsProvider Component
|
||||
*
|
||||
* Automatically tracks pageviews on client-side route changes.
|
||||
* This component handles navigation events for the Umami analytics service.
|
||||
*
|
||||
* Note: Website ID is now centrally managed on the server side via a proxy,
|
||||
* so it's no longer needed as a prop here.
|
||||
*/
|
||||
export default function AnalyticsProvider() {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const { trackPageview } = useAnalytics();
|
||||
|
||||
useEffect(() => {
|
||||
if (!pathname) return;
|
||||
|
||||
const services = getAppServices();
|
||||
const url = `${pathname}${searchParams?.size ? `?${searchParams.toString()}` : ''}`;
|
||||
|
||||
// Track pageview with the full URL
|
||||
// The service will relay this to our internal proxy which injects the Website ID
|
||||
services.analytics.trackPageview(url);
|
||||
|
||||
// Services like logger are already sub-initialized in getAppServices()
|
||||
// so we don't need to log here manually.
|
||||
}, [pathname, searchParams]);
|
||||
trackPageview(url);
|
||||
}, [pathname, searchParams, trackPageview]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -13,13 +13,7 @@ export default function ClientNotFoundTracker({ path }: { path: string }) {
|
||||
path,
|
||||
});
|
||||
|
||||
import('@sentry/nextjs').then((Sentry) => {
|
||||
Sentry.withScope((scope) => {
|
||||
scope.setTag('status_code', '404');
|
||||
scope.setTag('path', path);
|
||||
Sentry.captureMessage(`Route Not Found: ${path}`, 'warning');
|
||||
});
|
||||
});
|
||||
|
||||
}, [trackEvent, path]);
|
||||
|
||||
return null;
|
||||
|
||||
@@ -1,73 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { getAppServices } from '@/lib/services/create-services';
|
||||
import type { AnalyticsEventProperties } from '@/lib/services/analytics/analytics-service';
|
||||
|
||||
export type AnalyticsEventProperties = Record<string, any>;
|
||||
|
||||
/**
|
||||
* Sends a payload to the proxy API without loading backend config/logger dependencies.
|
||||
*/
|
||||
function sendAnalyticsPayload(type: 'event', data: Record<string, any>) {
|
||||
if (typeof window === 'undefined') return;
|
||||
if (process.env.NEXT_PUBLIC_CI === 'true') return;
|
||||
|
||||
const payload = {
|
||||
hostname: window.location.hostname,
|
||||
screen: `${window.screen.width}x${window.screen.height}`,
|
||||
language: navigator.language,
|
||||
referrer: document.referrer,
|
||||
title: document.title,
|
||||
...data,
|
||||
};
|
||||
|
||||
try {
|
||||
fetch('/stats/api/send', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ type, payload }),
|
||||
keepalive: true,
|
||||
}).catch(e => console.error('[Umami] Failed to send payload', e));
|
||||
} catch (error) {
|
||||
console.error('[Umami] Error sending analytics', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom hook for tracking analytics events with Umami.
|
||||
*
|
||||
* Provides a convenient way to track custom events throughout your application.
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* import { useAnalytics } from '@/components/analytics/useAnalytics';
|
||||
*
|
||||
* function MyComponent() {
|
||||
* const { trackEvent, trackPageview } = useAnalytics();
|
||||
*
|
||||
* const handleButtonClick = () => {
|
||||
* trackEvent('button_click', {
|
||||
* button_id: 'cta-primary',
|
||||
* page: 'homepage'
|
||||
* });
|
||||
* };
|
||||
*
|
||||
* return <button onClick={handleButtonClick}>Click me</button>;
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* // Track a custom pageview
|
||||
* const { trackPageview } = useAnalytics();
|
||||
* trackPageview('/custom-path?param=value');
|
||||
* ```
|
||||
*/
|
||||
export function useAnalytics() {
|
||||
const services = getAppServices();
|
||||
|
||||
/**
|
||||
* Track a custom event with optional properties.
|
||||
*
|
||||
* @param eventName - The name of the event to track
|
||||
* @param properties - Optional event properties (metadata)
|
||||
*/
|
||||
const trackEvent = useCallback(
|
||||
(eventName: string, properties?: AnalyticsEventProperties) => {
|
||||
services.analytics.track(eventName, properties);
|
||||
sendAnalyticsPayload('event', {
|
||||
name: eventName,
|
||||
data: properties,
|
||||
url: window.location.pathname + window.location.search,
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('[Umami] Tracked event:', eventName, properties);
|
||||
}
|
||||
},
|
||||
[services]
|
||||
[]
|
||||
);
|
||||
|
||||
/**
|
||||
* Track a pageview (useful for custom navigation or SPA routing).
|
||||
*
|
||||
* @param url - The URL to track (defaults to current location)
|
||||
*/
|
||||
const trackPageview = useCallback(
|
||||
(url?: string) => {
|
||||
services.analytics.trackPageview(url);
|
||||
sendAnalyticsPayload('event', {
|
||||
url: url || window.location.pathname + window.location.search,
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('[Umami] Tracked pageview:', url ?? 'current location');
|
||||
}
|
||||
},
|
||||
[services]
|
||||
[]
|
||||
);
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { AnimatePresence, m } from 'framer-motion';
|
||||
import { MessageSquare, X, Check, Image as ImageIcon, Type, StickyNote, Download, Trash2, List } from "lucide-react";
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
|
||||
import { m, Variants } from 'framer-motion';
|
||||
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
|
||||
import { LogoArcs } from '@/components/ui/LogoArcs';
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
import { Container } from '@/components/ui/Container';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { useScroll, useTransform, m } from 'framer-motion';
|
||||
import { Building2, Compass, Layers, ArrowDownToLine, Wrench, Factory, Zap, MapPin, CheckCircle2 } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
|
||||
|
||||
@@ -4,7 +4,7 @@ import React, { Suspense } from 'react';
|
||||
import { Section, Container } from '@/components/ui';
|
||||
import { ContactForm } from '@/components/forms/ContactForm';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
|
||||
const ContactMap = dynamic(() => import('@/components/ContactMap'), {
|
||||
ssr: false,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
import { useLocale } from 'next-intl';
|
||||
|
||||
export function DataGridPulse() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useRef } from 'react';
|
||||
import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { useScroll, useTransform, m } from 'framer-motion';
|
||||
import { useLocale } from 'next-intl';
|
||||
|
||||
export function DeepDrillAnimation() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export function GrowthChart() {
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { Badge, Container, Heading } from '@/components/ui';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
@@ -17,25 +16,7 @@ export interface HeroSectionProps {
|
||||
ctaHref?: string;
|
||||
}
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.15,
|
||||
delayChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }
|
||||
},
|
||||
};
|
||||
// CSS animations replace Framer Motion for better LCP
|
||||
|
||||
export const HeroSection: React.FC<HeroSectionProps> = (props) => {
|
||||
const { title, badge, subtitle, backgroundImage, alignment, ctaLabel, ctaHref } = props;
|
||||
@@ -47,12 +28,9 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
|
||||
className={`relative min-h-[35vh] md:min-h-[50vh] flex items-center pt-28 pb-10 md:pt-36 md:pb-24 overflow-hidden bg-neutral-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
|
||||
>
|
||||
{bgSrc && (
|
||||
<m.div
|
||||
<div
|
||||
key={`hero-bg-${pathname}`}
|
||||
className="absolute inset-0 z-0"
|
||||
initial={{ scale: 1.05, opacity: 1 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 1.5, ease: "easeOut" }}
|
||||
className="absolute inset-0 z-0 animate-hero-zoom-out"
|
||||
>
|
||||
<Image
|
||||
src={bgSrc}
|
||||
@@ -74,37 +52,34 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
|
||||
|
||||
{/* Top Fade for Header Navigation Readability */}
|
||||
<div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
|
||||
</m.div>
|
||||
</div>
|
||||
)}
|
||||
<Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
|
||||
<m.div
|
||||
<div
|
||||
key={`hero-content-${pathname}`}
|
||||
className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{badge && (
|
||||
<m.div variants={itemVariants}>
|
||||
<div className="animate-hero-fade-in-up" style={{ animationDelay: '0.1s', opacity: 0, animationFillMode: 'forwards' }}>
|
||||
<Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
|
||||
{badge}
|
||||
</Badge>
|
||||
</m.div>
|
||||
</div>
|
||||
)}
|
||||
<m.div variants={itemVariants}>
|
||||
<Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
|
||||
{title}
|
||||
</Heading>
|
||||
</m.div>
|
||||
<div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.25s' : '0.1s', opacity: 0, animationFillMode: 'forwards' }}>
|
||||
<Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
|
||||
{title}
|
||||
</Heading>
|
||||
</div>
|
||||
{subtitle && (
|
||||
<m.div variants={itemVariants}>
|
||||
<div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.4s' : '0.25s', opacity: 0, animationFillMode: 'forwards' }}>
|
||||
<p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
|
||||
{subtitle}
|
||||
</p>
|
||||
</m.div>
|
||||
</div>
|
||||
)}
|
||||
{ctaLabel && ctaHref && (
|
||||
<m.div variants={itemVariants} className={`mt-8 ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`}>
|
||||
<div className={`mt-8 animate-hero-fade-in-up ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`} style={{ animationDelay: badge ? '0.55s' : '0.4s', opacity: 0, animationFillMode: 'forwards' }}>
|
||||
<Button
|
||||
href={ctaHref}
|
||||
variant="accent"
|
||||
@@ -115,9 +90,9 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
|
||||
→
|
||||
</span>
|
||||
</Button>
|
||||
</m.div>
|
||||
</div>
|
||||
)}
|
||||
</m.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useRef, useCallback, useMemo } from 'react';
|
||||
import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
|
||||
import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
|
||||
import { MapPin, ArrowUpRight } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
|
||||
import { Location, projectLocations } from '@/lib/map-data';
|
||||
import { standorteLocations } from '@/lib/standorte-data';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
|
||||
const InteractiveMapPins = dynamic(() => import('./InteractiveMapPins'), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
interface Stat {
|
||||
value: string;
|
||||
suffix?: string;
|
||||
@@ -28,58 +32,7 @@ interface InteractiveGermanyMapProps {
|
||||
hideStandorte?: boolean;
|
||||
}
|
||||
|
||||
const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => (
|
||||
<div
|
||||
className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
|
||||
style={{
|
||||
left: `${loc.x}%`,
|
||||
top: `${loc.y}%`,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
onMouseEnter={() => onEnter(loc)}
|
||||
onMouseLeave={onLeave}
|
||||
onTouchStart={() => onEnter(loc)}
|
||||
onClick={() => onEnter(loc)}
|
||||
>
|
||||
<div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${isActive ? 'bg-white scale-150 shadow-[0_0_10px_rgba(130,237,32,1)]' : 'bg-primary/80 group-hover/minor:bg-white group-hover/minor:scale-150'}`} />
|
||||
<div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
|
||||
</div>
|
||||
));
|
||||
MinorNode.displayName = 'MinorNode';
|
||||
|
||||
const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: Location, isActive: boolean, idx: number, onEnter: (loc: Location) => void, onLeave: () => void }) => {
|
||||
const isHQ = loc.type === 'hq';
|
||||
const isBranch = loc.type === 'branch';
|
||||
return (
|
||||
<div
|
||||
className={`absolute transform -translate-x-1/2 -translate-y-1/2 group/pin cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20 hover:z-40'}`}
|
||||
style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
|
||||
onMouseEnter={() => onEnter(loc)}
|
||||
onMouseLeave={onLeave}
|
||||
onTouchStart={() => onEnter(loc)}
|
||||
onClick={() => onEnter(loc)}
|
||||
>
|
||||
{(isHQ || isBranch) && (
|
||||
<div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
|
||||
)}
|
||||
<m.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', delay: idx * 0.1 }}
|
||||
className={`relative flex items-center justify-center rounded-full shadow-[0_0_20px_rgba(130,237,32,0.6)] transition-transform duration-300 ${
|
||||
isActive ? 'scale-125 z-30 ring-4 ring-primary/40' : 'scale-100 group-hover/pin:scale-110'
|
||||
} ${
|
||||
isHQ || isBranch
|
||||
? 'w-7 h-7 bg-primary text-[#050B14]'
|
||||
: 'w-4 h-4 bg-white ring-[3px] ring-primary'
|
||||
}`}
|
||||
>
|
||||
{(isHQ || isBranch) && <MapPin className="w-4 h-4" />}
|
||||
</m.div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
MajorNode.displayName = 'MajorNode';
|
||||
|
||||
export function InteractiveGermanyMap({
|
||||
badge,
|
||||
@@ -135,12 +88,12 @@ export function InteractiveGermanyMap({
|
||||
|
||||
const mapBackground = useMemo(() => (
|
||||
<div className="absolute inset-0 opacity-[0.25] mix-blend-screen drop-shadow-2xl brightness-200 pointer-events-none transform-gpu">
|
||||
<Image
|
||||
<img
|
||||
src="/germany-map.svg"
|
||||
alt={locale === 'en' ? "Map of Germany" : "Deutschlandkarte"}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
className="w-full h-full object-cover"
|
||||
fetchPriority="high"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
), [locale]);
|
||||
@@ -210,116 +163,14 @@ export function InteractiveGermanyMap({
|
||||
|
||||
{mapBackground}
|
||||
|
||||
{finalLocations.filter(l => l.type === 'minor_node').map((loc, idx) => (
|
||||
<MinorNode
|
||||
key={`minor-${loc.id || idx}`}
|
||||
loc={loc}
|
||||
isActive={activeLocation === loc}
|
||||
onEnter={handleMouseEnter}
|
||||
onLeave={handleMouseLeave}
|
||||
/>
|
||||
))}
|
||||
|
||||
{finalLocations.filter(l => l.type !== 'minor_node').map((loc, idx) => (
|
||||
<MajorNode
|
||||
key={loc.id}
|
||||
loc={loc}
|
||||
idx={idx}
|
||||
isActive={activeLocation?.id === loc.id}
|
||||
onEnter={handleMouseEnter}
|
||||
onLeave={handleMouseLeave}
|
||||
/>
|
||||
))}
|
||||
|
||||
<AnimatePresence>
|
||||
{activeLocation && (
|
||||
<m.div
|
||||
key="tooltip"
|
||||
initial={{ opacity: 0, y: 10, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 10, scale: 0.95 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="absolute z-[9999] pointer-events-auto bottom-[-60px] left-1/2 -translate-x-1/2 w-[calc(100vw_-_2rem)] max-w-[320px] md:w-max md:bottom-auto md:left-[var(--md-left)] md:top-[var(--md-top)] md:[transform:var(--md-transform)]"
|
||||
style={{
|
||||
'--md-left': `${activeLocation.x}%`,
|
||||
'--md-top': `${activeLocation.y}%`,
|
||||
'--md-transform': activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
|
||||
} as React.CSSProperties}
|
||||
onMouseEnter={() => handleMouseEnter(activeLocation)}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<div className="bg-[#050B14]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl w-full text-white overflow-hidden">
|
||||
{activeLocation.featuredImage && (
|
||||
<div className="relative w-full h-32 bg-neutral-900">
|
||||
<Image
|
||||
src={activeLocation.featuredImage}
|
||||
alt={activeLocation.name}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#050B14] to-transparent opacity-90" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<MapPin className="w-3.5 h-3.5 text-primary" />
|
||||
<span className="text-xs font-bold text-primary uppercase tracking-wider">
|
||||
{t(`types.${activeLocation.type === 'minor_node' ? 'project' : activeLocation.type}`)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-heading font-bold text-lg leading-tight mb-2">
|
||||
{activeLocation.name}
|
||||
</div>
|
||||
{activeLocation.type !== 'minor_node' ? (
|
||||
<div className="text-white/60 text-sm line-clamp-3 mb-3">
|
||||
{activeLocation.description}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-white/60 text-xs mb-3">
|
||||
{t(`descriptions.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(activeLocation.details || activeLocation.type === 'minor_node') && (
|
||||
<ul className="mb-3 space-y-1.5 border-t border-white/10 pt-3">
|
||||
{activeLocation.type === 'minor_node' ? (
|
||||
<>
|
||||
<li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
|
||||
<CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
|
||||
<span>{t(`features.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}</span>
|
||||
</li>
|
||||
<li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
|
||||
<CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
|
||||
<span>{t('features.method')}</span>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
activeLocation.details?.map((detail, i) => (
|
||||
<li key={i} className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
|
||||
<CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
|
||||
<span>{detail}</span>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{activeLocation.href && (activeLocation.type === 'hq' || activeLocation.type === 'branch') && (
|
||||
<Link
|
||||
href={activeLocation.href.startsWith('/') ? `/${locale}${activeLocation.href}` : activeLocation.href}
|
||||
className="inline-flex items-center text-xs font-bold text-primary hover:text-white transition-colors mt-2"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{t('learnMore')}
|
||||
<ArrowUpRight className="w-3.5 h-3.5 ml-1" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</m.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<InteractiveMapPins
|
||||
locations={finalLocations}
|
||||
locale={locale}
|
||||
t={t}
|
||||
activeLocation={activeLocation}
|
||||
handleMouseEnter={handleMouseEnter}
|
||||
handleMouseLeave={handleMouseLeave}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
195
components/blocks/InteractiveMapPins.tsx
Normal file
195
components/blocks/InteractiveMapPins.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { m, AnimatePresence, LazyMotion } from 'framer-motion';
|
||||
import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { Location } from '@/lib/map-data';
|
||||
|
||||
const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
|
||||
|
||||
const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => (
|
||||
<div
|
||||
className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
|
||||
style={{
|
||||
left: `${loc.x}%`,
|
||||
top: `${loc.y}%`,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
}}
|
||||
onMouseEnter={() => onEnter(loc)}
|
||||
onMouseLeave={onLeave}
|
||||
onTouchStart={() => onEnter(loc)}
|
||||
onClick={() => onEnter(loc)}
|
||||
>
|
||||
<div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${isActive ? 'bg-white scale-150 shadow-[0_0_10px_rgba(130,237,32,1)]' : 'bg-primary/80 group-hover/minor:bg-white group-hover/minor:scale-150'}`} />
|
||||
<div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
|
||||
</div>
|
||||
));
|
||||
MinorNode.displayName = 'MinorNode';
|
||||
|
||||
const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: Location, isActive: boolean, idx: number, onEnter: (loc: Location) => void, onLeave: () => void }) => {
|
||||
const isHQ = loc.type === 'hq';
|
||||
const isBranch = loc.type === 'branch';
|
||||
return (
|
||||
<div
|
||||
className={`absolute transform -translate-x-1/2 -translate-y-1/2 group/pin cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20 hover:z-40'}`}
|
||||
style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
|
||||
onMouseEnter={() => onEnter(loc)}
|
||||
onMouseLeave={onLeave}
|
||||
onTouchStart={() => onEnter(loc)}
|
||||
onClick={() => onEnter(loc)}
|
||||
>
|
||||
{(isHQ || isBranch) && (
|
||||
<div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
|
||||
)}
|
||||
<m.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', delay: idx * 0.1 }}
|
||||
className={`relative flex items-center justify-center rounded-full shadow-[0_0_20px_rgba(130,237,32,0.6)] transition-transform duration-300 ${
|
||||
isActive ? 'scale-125 z-30 ring-4 ring-primary/40' : 'scale-100 group-hover/pin:scale-110'
|
||||
} ${
|
||||
isHQ || isBranch
|
||||
? 'w-7 h-7 bg-primary text-[#050B14]'
|
||||
: 'w-4 h-4 bg-white ring-[3px] ring-primary'
|
||||
}`}
|
||||
>
|
||||
{(isHQ || isBranch) && <MapPin className="w-4 h-4" />}
|
||||
</m.div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
MajorNode.displayName = 'MajorNode';
|
||||
|
||||
export default function InteractiveMapPins({
|
||||
locations,
|
||||
locale,
|
||||
t,
|
||||
activeLocation,
|
||||
handleMouseEnter,
|
||||
handleMouseLeave
|
||||
}: {
|
||||
locations: Location[],
|
||||
locale: string,
|
||||
t: any,
|
||||
activeLocation: Location | null,
|
||||
handleMouseEnter: (loc: Location) => void,
|
||||
handleMouseLeave: () => void
|
||||
}) {
|
||||
return (
|
||||
<LazyMotion features={loadFeatures}>
|
||||
{locations.filter(l => l.type === 'minor_node').map((loc, idx) => (
|
||||
<MinorNode
|
||||
key={`minor-${loc.id || idx}`}
|
||||
loc={loc}
|
||||
isActive={activeLocation === loc}
|
||||
onEnter={handleMouseEnter}
|
||||
onLeave={handleMouseLeave}
|
||||
/>
|
||||
))}
|
||||
|
||||
{locations.filter(l => l.type !== 'minor_node').map((loc, idx) => (
|
||||
<MajorNode
|
||||
key={loc.id}
|
||||
loc={loc}
|
||||
idx={idx}
|
||||
isActive={activeLocation?.id === loc.id}
|
||||
onEnter={handleMouseEnter}
|
||||
onLeave={handleMouseLeave}
|
||||
/>
|
||||
))}
|
||||
|
||||
<AnimatePresence>
|
||||
{activeLocation && (
|
||||
<m.div
|
||||
key="tooltip"
|
||||
initial={{ opacity: 0, y: 10, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 10, scale: 0.95 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="absolute z-[9999] pointer-events-auto bottom-[-60px] left-1/2 -translate-x-1/2 w-[calc(100vw_-_2rem)] max-w-[320px] md:w-max md:bottom-auto md:left-[var(--md-left)] md:top-[var(--md-top)] md:[transform:var(--md-transform)]"
|
||||
style={{
|
||||
'--md-left': `${activeLocation.x}%`,
|
||||
'--md-top': `${activeLocation.y}%`,
|
||||
'--md-transform': activeLocation.x < 50 ? 'translate(20px, -50%)' : 'translate(calc(-100% - 20px), -50%)',
|
||||
} as React.CSSProperties}
|
||||
onMouseEnter={() => handleMouseEnter(activeLocation)}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<div className="bg-[#050B14]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl w-full text-white overflow-hidden">
|
||||
{activeLocation.featuredImage && (
|
||||
<div className="relative w-full h-32 bg-neutral-900">
|
||||
<Image
|
||||
src={activeLocation.featuredImage}
|
||||
alt={activeLocation.name}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 320px"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#050B14] to-transparent opacity-90" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<MapPin className="w-3.5 h-3.5 text-primary" />
|
||||
<span className="text-xs font-bold text-primary uppercase tracking-wider">
|
||||
{t(`types.${activeLocation.type === 'minor_node' ? 'project' : activeLocation.type}`)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-heading font-bold text-lg leading-tight mb-2">
|
||||
{activeLocation.name}
|
||||
</div>
|
||||
{activeLocation.type !== 'minor_node' ? (
|
||||
<div className="text-white/60 text-sm line-clamp-3 mb-3">
|
||||
{activeLocation.description}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-white/60 text-xs mb-3">
|
||||
{t(`descriptions.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(activeLocation.details || activeLocation.type === 'minor_node') && (
|
||||
<ul className="mb-3 space-y-1.5 border-t border-white/10 pt-3">
|
||||
{activeLocation.type === 'minor_node' ? (
|
||||
<>
|
||||
<li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
|
||||
<CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
|
||||
<span>{t(`features.${['wind','pv','fiber','power','battery'].includes(activeLocation.description || '') ? activeLocation.description : 'default'}`)}</span>
|
||||
</li>
|
||||
<li className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
|
||||
<CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
|
||||
<span>{t('features.method')}</span>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
activeLocation.details?.map((detail, i) => (
|
||||
<li key={i} className="text-[11px] text-white/80 flex items-start gap-2 font-medium">
|
||||
<CheckCircle2 className="w-3 h-3 text-primary shrink-0 mt-0.5" />
|
||||
<span>{detail}</span>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{activeLocation.href && (activeLocation.type === 'hq' || activeLocation.type === 'branch') && (
|
||||
<Link
|
||||
href={activeLocation.href.startsWith('/') ? `/${locale}${activeLocation.href}` : activeLocation.href}
|
||||
className="inline-flex items-center text-xs font-bold text-primary hover:text-white transition-colors mt-2"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{t('learnMore')}
|
||||
<ArrowUpRight className="w-3.5 h-3.5 ml-1" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</m.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</LazyMotion>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export interface JobListingBlockProps {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
|
||||
@@ -127,7 +127,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
|
||||
<div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 pointer-events-none" />
|
||||
|
||||
{/* Carousel: centered first card with peek on both sides */}
|
||||
<LazyMotion features={domAnimation}>
|
||||
|
||||
<div
|
||||
ref={containerRef}
|
||||
onMouseDown={onMouseDown}
|
||||
@@ -189,7 +189,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
|
||||
})}
|
||||
|
||||
</div>
|
||||
</LazyMotion>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="container relative z-10 mt-4 flex justify-center">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useRef } from 'react';
|
||||
import { useScroll, useTransform, m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { useScroll, useTransform, m } from 'framer-motion';
|
||||
import { useLocale } from 'next-intl';
|
||||
|
||||
export function ScaleOfImpact() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
|
||||
import { m, Variants } from 'framer-motion';
|
||||
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
|
||||
|
||||
export interface ServicePanelData {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
|
||||
import { m, Variants } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
|
||||
@@ -128,7 +128,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
|
||||
? 'opacity-30 grayscale-0 scale-105'
|
||||
: 'opacity-40 grayscale-[50%] group-hover:opacity-30 group-hover:grayscale-0 group-hover:scale-110'
|
||||
}`}
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
sizes="(max-width: 768px) 200px, 384px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import React from 'react';
|
||||
import TrackedLink from '@/components/analytics/TrackedLink';
|
||||
import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
|
||||
export interface SupportCTAProps {
|
||||
title: string;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import { useScroll, useTransform, useSpring, m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { useScroll, useTransform, useSpring, m } from 'framer-motion';
|
||||
import { LogoArcs } from '@/components/ui/LogoArcs';
|
||||
|
||||
function MagneticRing({
|
||||
@@ -25,34 +25,45 @@ function MagneticRing({
|
||||
// Only run on client with mouse
|
||||
if (window.matchMedia("(pointer: coarse)").matches) return;
|
||||
|
||||
let ticking = false;
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!ref.current) return;
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(() => {
|
||||
if (!ref.current) {
|
||||
ticking = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
|
||||
const distX = e.clientX - centerX;
|
||||
const distY = e.clientY - centerY;
|
||||
const distance = Math.sqrt(distX * Math.pow(distX, 2) + Math.pow(distY, 2)); // Fix: correct pythagoras
|
||||
const distX = e.clientX - centerX;
|
||||
const distY = e.clientY - centerY;
|
||||
const actualDistance = Math.sqrt(distX * distX + distY * distY);
|
||||
|
||||
// Calculate actual distance correctly
|
||||
const actualDistance = Math.sqrt(distX * distX + distY * distY);
|
||||
|
||||
if (actualDistance < pullRadius) {
|
||||
// Exponential falloff for natural magnetic feel
|
||||
const pullFactor = Math.pow(1 - (actualDistance / pullRadius), 2);
|
||||
|
||||
// Target offset (fraction of the distance based on strength)
|
||||
x.set(distX * pullFactor * (pullStrength / 100));
|
||||
y.set(distY * pullFactor * (pullStrength / 100));
|
||||
} else {
|
||||
// Return to origin smoothly
|
||||
x.set(0);
|
||||
y.set(0);
|
||||
if (actualDistance < pullRadius) {
|
||||
// Exponential falloff for natural magnetic feel
|
||||
const pullFactor = Math.pow(1 - (actualDistance / pullRadius), 2);
|
||||
|
||||
// Target offset (fraction of the distance based on strength)
|
||||
x.set(distX * pullFactor * (pullStrength / 100));
|
||||
y.set(distY * pullFactor * (pullStrength / 100));
|
||||
} else {
|
||||
// Return to origin smoothly
|
||||
x.set(0);
|
||||
y.set(0);
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mousemove', handleMouseMove, { passive: true });
|
||||
return () => window.removeEventListener('mousemove', handleMouseMove);
|
||||
}, [x, y, pullRadius, pullStrength]);
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
|
||||
export function EUFundingBadge() {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m } from 'framer-motion';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { sendContactFormAction } from '@/app/actions/contact';
|
||||
|
||||
|
||||
7
components/layout/DynamicMobileBottomNav.tsx
Normal file
7
components/layout/DynamicMobileBottomNav.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
'use client';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
export const DynamicMobileBottomNav = dynamic(
|
||||
() => import('./MobileBottomNav').then(mod => mod.MobileBottomNav),
|
||||
{ ssr: false }
|
||||
);
|
||||
@@ -111,6 +111,7 @@ export function Header({ navLinks }: HeaderProps) {
|
||||
priority
|
||||
fetchPriority="high"
|
||||
sizes="192px"
|
||||
unoptimized
|
||||
/>
|
||||
{/* Masked sweep overlay on hover */}
|
||||
<div
|
||||
|
||||
@@ -4,7 +4,7 @@ import * as React from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { TransitionLink } from '@/components/ui/TransitionLink';
|
||||
import { Home, Layers, Star, Mail, Menu } from 'lucide-react';
|
||||
import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
|
||||
import { m, AnimatePresence } from 'framer-motion';
|
||||
|
||||
export interface NavLink {
|
||||
label: string;
|
||||
|
||||
7
components/providers/DynamicInitialLoader.tsx
Normal file
7
components/providers/DynamicInitialLoader.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
'use client';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
export const DynamicInitialLoader = dynamic(
|
||||
() => import('./InitialLoader').then(mod => mod.InitialLoader),
|
||||
{ ssr: false }
|
||||
);
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
|
||||
import { m, AnimatePresence } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
|
||||
import { m, AnimatePresence } from 'framer-motion';
|
||||
import { useTransition } from './TransitionProvider';
|
||||
import Image from 'next/image';
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useMotionValue, useTransform, animate, useInView, m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { useMotionValue, useTransform, animate, useInView, m } from 'framer-motion';
|
||||
|
||||
interface AnimatedCounterProps {
|
||||
value: number;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useInView, m, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { useInView, m } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// Sentry initialization move to GlitchtipErrorReportingService to allow lazy-loading
|
||||
// for PageSpeed 100 optimizations. This file is now empty to prevent the SDK
|
||||
// from being included in the initial JS bundle.
|
||||
import * as Sentry from '@sentry/nextjs';
|
||||
export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
|
||||
|
||||
export {};
|
||||
|
||||
11921
lh-desktop.json
Normal file
11921
lh-desktop.json
Normal file
File diff suppressed because one or more lines are too long
11867
lh-report.json
Normal file
11867
lh-report.json
Normal file
File diff suppressed because one or more lines are too long
11818
lh-standorte.json
Normal file
11818
lh-standorte.json
Normal file
File diff suppressed because one or more lines are too long
@@ -2,7 +2,6 @@ import { AppServices } from './app-services';
|
||||
import { NoopAnalyticsService } from './analytics/noop-analytics-service';
|
||||
import { UmamiAnalyticsService } from './analytics/umami-analytics-service';
|
||||
import { MemoryCacheService } from './cache/memory-cache-service';
|
||||
import { GlitchtipErrorReportingService } from './errors/glitchtip-error-reporting-service';
|
||||
import { NoopErrorReportingService } from './errors/noop-error-reporting-service';
|
||||
import { NoopLoggerService } from './logging/noop-logger-service';
|
||||
import { PinoLoggerService } from './logging/pino-logger-service';
|
||||
@@ -68,17 +67,7 @@ export function getAppServices(): AppServices {
|
||||
logger.info('Notification service initialized (noop)');
|
||||
|
||||
// Create error reporting service (GlitchTip/Sentry or no-op)
|
||||
const errors = sentryEnabled
|
||||
? new GlitchtipErrorReportingService(
|
||||
{
|
||||
enabled: true,
|
||||
dsn: config.errors.glitchtip.dsn,
|
||||
tracesSampleRate: 0.1, // Default to 10% sampling
|
||||
},
|
||||
logger,
|
||||
notifications,
|
||||
)
|
||||
: new NoopErrorReportingService();
|
||||
const errors = new NoopErrorReportingService();
|
||||
|
||||
if (sentryEnabled) {
|
||||
logger.info(
|
||||
|
||||
@@ -73,7 +73,7 @@ export class GlitchtipErrorReportingService implements ErrorReportingService {
|
||||
const contextStr = context ? `\nContext: ${JSON.stringify(context, null, 2)}` : '';
|
||||
|
||||
await this.notifications.notify({
|
||||
title: '🔥 Critical Error Captured',
|
||||
title: '🔥 [E-TIB] Critical Error Captured',
|
||||
message: `Error: ${errorMessage}${contextStr}`,
|
||||
priority: 7,
|
||||
});
|
||||
@@ -92,7 +92,7 @@ export class GlitchtipErrorReportingService implements ErrorReportingService {
|
||||
(level === 'error' || level === 'fatal' || message.includes('Route Not Found'))
|
||||
) {
|
||||
await this.notifications.notify({
|
||||
title: level === 'warning' ? '⚠️ Warning Captured' : '🔥 Critical Message Captured',
|
||||
title: level === 'warning' ? '⚠️ [E-TIB] Warning Captured' : '🔥 [E-TIB] Critical Message Captured',
|
||||
message: message,
|
||||
priority: level === 'warning' ? 5 : 7,
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import withMintelConfig from '@mintel/next-config';
|
||||
import { baseNextConfig } from '@mintel/next-config';
|
||||
import withBundleAnalyzer from '@next/bundle-analyzer';
|
||||
import { withSentryConfig } from '@sentry/nextjs';
|
||||
|
||||
@@ -15,7 +15,7 @@ const nextConfig = {
|
||||
pagesBufferLength: 2,
|
||||
},
|
||||
experimental: {
|
||||
optimizeCss: true,
|
||||
inlineCss: true,
|
||||
staleTimes: {
|
||||
dynamic: 0,
|
||||
static: 30,
|
||||
@@ -24,7 +24,6 @@ const nextConfig = {
|
||||
'lucide-react',
|
||||
'framer-motion',
|
||||
'@/components/ui',
|
||||
'@sentry/nextjs',
|
||||
'react-hook-form',
|
||||
'zod',
|
||||
'date-fns',
|
||||
@@ -55,6 +54,8 @@ const nextConfig = {
|
||||
...config.resolve.alias,
|
||||
'next/dist/build/polyfills/polyfill-module': false,
|
||||
'next/dist/build/polyfills/polyfill-nomodule': false,
|
||||
'core-js': false,
|
||||
'regenerator-runtime': false,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -548,14 +549,58 @@ const withAnalyzer = withBundleAnalyzer({
|
||||
enabled: process.env.ANALYZE === 'true',
|
||||
});
|
||||
|
||||
// withMintelConfig internally sets output:'standalone' and wraps with withSentryConfig.
|
||||
// In dev mode, standalone triggers @vercel/nft file tracing on every compile through
|
||||
// VirtioFS, which hammers CPU. Strip it for dev.
|
||||
const withMDX = createMDX({});
|
||||
let resolvedConfig = withMDX(withAnalyzer(withMintelConfig(nextConfig)));
|
||||
let resolvedConfig = withMDX(withAnalyzer(nextConfig));
|
||||
|
||||
// Apply next-intl manually (bypassing withMintelConfig to control Sentry)
|
||||
import createNextIntlPlugin from 'next-intl/plugin';
|
||||
const withNextIntl = createNextIntlPlugin();
|
||||
resolvedConfig = withNextIntl(resolvedConfig);
|
||||
|
||||
// Removed withSentryConfig completely to eliminate the 170KB client-side bloat and Array.from legacy polyfill.
|
||||
// Server-side instrumentation is still handled manually in instrumentation.ts.
|
||||
|
||||
// Manually merge baseNextConfig properties
|
||||
const finalConfig = {
|
||||
...baseNextConfig,
|
||||
...resolvedConfig,
|
||||
images: {
|
||||
...baseNextConfig.images,
|
||||
...(resolvedConfig.images || {}),
|
||||
remotePatterns: [
|
||||
...(baseNextConfig.images?.remotePatterns || []),
|
||||
...(resolvedConfig.images?.remotePatterns || [])
|
||||
]
|
||||
},
|
||||
rewrites: async () => {
|
||||
let baseRewrites = [];
|
||||
if (typeof baseNextConfig.rewrites === 'function') {
|
||||
baseRewrites = await baseNextConfig.rewrites();
|
||||
}
|
||||
let configRewrites = { beforeFiles: [], fallback: [], afterFiles: [] };
|
||||
if (typeof resolvedConfig.rewrites === 'function') {
|
||||
const res = await resolvedConfig.rewrites();
|
||||
if (Array.isArray(res)) {
|
||||
configRewrites.fallback = res;
|
||||
} else {
|
||||
configRewrites = res;
|
||||
}
|
||||
}
|
||||
return {
|
||||
beforeFiles: configRewrites.beforeFiles || [],
|
||||
fallback: [
|
||||
...(configRewrites.fallback || []),
|
||||
...baseRewrites
|
||||
],
|
||||
afterFiles: configRewrites.afterFiles || []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
if (!isProd) {
|
||||
delete resolvedConfig.output;
|
||||
delete finalConfig.output;
|
||||
}
|
||||
|
||||
export default resolvedConfig;
|
||||
export default finalConfig;
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
"prepare": "husky",
|
||||
"preinstall": "npx only-allow pnpm"
|
||||
},
|
||||
"version": "2.2.57",
|
||||
"version": "2.2.91",
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"@parcel/watcher",
|
||||
@@ -150,7 +150,8 @@
|
||||
],
|
||||
"overrides": {
|
||||
"next": "16.1.6",
|
||||
"minimatch": ">=10.2.2"
|
||||
"minimatch": ">=10.2.2",
|
||||
"framer-motion": "^12.38.0"
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
|
||||
40
pnpm-lock.yaml
generated
40
pnpm-lock.yaml
generated
@@ -7,6 +7,7 @@ settings:
|
||||
overrides:
|
||||
next: 16.1.6
|
||||
minimatch: '>=10.2.2'
|
||||
framer-motion: ^12.38.0
|
||||
|
||||
importers:
|
||||
|
||||
@@ -52,7 +53,7 @@ importers:
|
||||
specifier: ^2.1.1
|
||||
version: 2.1.1
|
||||
framer-motion:
|
||||
specifier: ^12.34.0
|
||||
specifier: ^12.38.0
|
||||
version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
graphql:
|
||||
specifier: ^16.12.0
|
||||
@@ -4843,20 +4844,6 @@ packages:
|
||||
fraction.js@5.3.4:
|
||||
resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
|
||||
|
||||
framer-motion@11.18.2:
|
||||
resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
|
||||
peerDependencies:
|
||||
'@emotion/is-prop-valid': '*'
|
||||
react: ^18.0.0 || ^19.0.0
|
||||
react-dom: ^18.0.0 || ^19.0.0
|
||||
peerDependenciesMeta:
|
||||
'@emotion/is-prop-valid':
|
||||
optional: true
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
|
||||
framer-motion@12.38.0:
|
||||
resolution: {integrity: sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==}
|
||||
peerDependencies:
|
||||
@@ -6142,15 +6129,9 @@ packages:
|
||||
module-details-from-path@1.0.4:
|
||||
resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
|
||||
|
||||
motion-dom@11.18.1:
|
||||
resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
|
||||
|
||||
motion-dom@12.38.0:
|
||||
resolution: {integrity: sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==}
|
||||
|
||||
motion-utils@11.18.1:
|
||||
resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
|
||||
|
||||
motion-utils@12.36.0:
|
||||
resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==}
|
||||
|
||||
@@ -9246,7 +9227,7 @@ snapshots:
|
||||
dependencies:
|
||||
'@medv/finder': 4.0.2
|
||||
clsx: 2.1.1
|
||||
framer-motion: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
framer-motion: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
html2canvas: 1.4.1
|
||||
lucide-react: 0.441.0(react@19.2.4)
|
||||
next: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(sass@1.98.0)
|
||||
@@ -12941,15 +12922,6 @@ snapshots:
|
||||
|
||||
fraction.js@5.3.4: {}
|
||||
|
||||
framer-motion@11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
|
||||
dependencies:
|
||||
motion-dom: 11.18.1
|
||||
motion-utils: 11.18.1
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
react: 19.2.4
|
||||
react-dom: 19.2.4(react@19.2.4)
|
||||
|
||||
framer-motion@12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
|
||||
dependencies:
|
||||
motion-dom: 12.38.0
|
||||
@@ -14577,16 +14549,10 @@ snapshots:
|
||||
|
||||
module-details-from-path@1.0.4: {}
|
||||
|
||||
motion-dom@11.18.1:
|
||||
dependencies:
|
||||
motion-utils: 11.18.1
|
||||
|
||||
motion-dom@12.38.0:
|
||||
dependencies:
|
||||
motion-utils: 12.36.0
|
||||
|
||||
motion-utils@11.18.1: {}
|
||||
|
||||
motion-utils@12.36.0: {}
|
||||
|
||||
mri@1.2.0: {}
|
||||
|
||||
39
psi-standorte.json
Normal file
39
psi-standorte.json
Normal file
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"error": {
|
||||
"code": 429,
|
||||
"message": "Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'pagespeedonline.googleapis.com' for consumer 'project_number:583797351490'.",
|
||||
"errors": [
|
||||
{
|
||||
"message": "Quota exceeded for quota metric 'Queries' and limit 'Queries per day' of service 'pagespeedonline.googleapis.com' for consumer 'project_number:583797351490'.",
|
||||
"domain": "global",
|
||||
"reason": "rateLimitExceeded"
|
||||
}
|
||||
],
|
||||
"status": "RESOURCE_EXHAUSTED",
|
||||
"details": [
|
||||
{
|
||||
"@type": "type.googleapis.com/google.rpc.ErrorInfo",
|
||||
"reason": "RATE_LIMIT_EXCEEDED",
|
||||
"domain": "googleapis.com",
|
||||
"metadata": {
|
||||
"service": "pagespeedonline.googleapis.com",
|
||||
"quota_location": "global",
|
||||
"quota_limit_value": "0",
|
||||
"consumer": "projects/583797351490",
|
||||
"quota_metric": "pagespeedonline.googleapis.com/default",
|
||||
"quota_limit": "defaultPerDayPerProject",
|
||||
"quota_unit": "1/d/{project}"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "type.googleapis.com/google.rpc.Help",
|
||||
"links": [
|
||||
{
|
||||
"description": "Request a higher quota limit.",
|
||||
"url": "https://cloud.google.com/docs/quotas/help/request_increase"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
36
run-lh.cjs
Normal file
36
run-lh.cjs
Normal file
@@ -0,0 +1,36 @@
|
||||
const fs = require('fs');
|
||||
const { execSync } = require('child_process');
|
||||
|
||||
console.log("Running Lighthouse...");
|
||||
try {
|
||||
execSync('npx lighthouse "https://e-tib.com/de/standorte?v=2" --chrome-flags="--headless --no-sandbox" --output json --output-path ./lh-report.json', { stdio: 'inherit' });
|
||||
} catch(e) {
|
||||
console.log("Lighthouse run failed", e.message);
|
||||
}
|
||||
|
||||
const data = JSON.parse(fs.readFileSync('./lh-report.json', 'utf8'));
|
||||
const score = data.categories.performance.score * 100;
|
||||
console.log("\n==================================");
|
||||
console.log(`PERFORMANCE SCORE: ${score}`);
|
||||
console.log("==================================\n");
|
||||
|
||||
console.log("FAILING METRICS (Score < 1.0):");
|
||||
Object.values(data.audits).filter(a => a.score !== null && a.score < 1).forEach(a => {
|
||||
console.log(`- ${a.id}: ${a.score} (${a.displayValue || 'No display value'})`);
|
||||
if (a.details && a.details.items && a.details.items.length > 0) {
|
||||
if (a.id === 'image-delivery-insight' || a.id === 'unused-javascript' || a.id === 'modern-image-formats' || a.id === 'uses-responsive-images') {
|
||||
console.log(" Items:");
|
||||
a.details.items.forEach(item => {
|
||||
console.log(` URL: ${item.url || item.node?.nodeLabel || 'unknown'}`);
|
||||
if (item.wastedBytes) console.log(` Wasted KB: ${(item.wastedBytes / 1024).toFixed(2)}`);
|
||||
if (item.wastedMs) console.log(` Wasted Ms: ${item.wastedMs}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log("\nLCP BREAKDOWN:");
|
||||
const lcpElement = data.audits['largest-contentful-paint-element'];
|
||||
if (lcpElement && lcpElement.details && lcpElement.details.items) {
|
||||
console.log("LCP Element:", lcpElement.details.items[0].node.snippet);
|
||||
}
|
||||
36
run-lh.js
Normal file
36
run-lh.js
Normal file
@@ -0,0 +1,36 @@
|
||||
const fs = require('fs');
|
||||
const { execSync } = require('child_process');
|
||||
|
||||
console.log("Running Lighthouse...");
|
||||
try {
|
||||
execSync('npx lighthouse "https://e-tib.com/de/standorte?v=2" --chrome-flags="--headless --no-sandbox" --output json --output-path ./lh-report.json', { stdio: 'inherit' });
|
||||
} catch(e) {
|
||||
console.log("Lighthouse run failed", e.message);
|
||||
}
|
||||
|
||||
const data = JSON.parse(fs.readFileSync('./lh-report.json', 'utf8'));
|
||||
const score = data.categories.performance.score * 100;
|
||||
console.log("\n==================================");
|
||||
console.log(`PERFORMANCE SCORE: ${score}`);
|
||||
console.log("==================================\n");
|
||||
|
||||
console.log("FAILING METRICS (Score < 1.0):");
|
||||
Object.values(data.audits).filter(a => a.score !== null && a.score < 1).forEach(a => {
|
||||
console.log(`- ${a.id}: ${a.score} (${a.displayValue || 'No display value'})`);
|
||||
if (a.details && a.details.items && a.details.items.length > 0) {
|
||||
if (a.id === 'image-delivery-insight' || a.id === 'unused-javascript' || a.id === 'modern-image-formats' || a.id === 'uses-responsive-images') {
|
||||
console.log(" Items:");
|
||||
a.details.items.forEach(item => {
|
||||
console.log(` URL: ${item.url || item.node?.nodeLabel || 'unknown'}`);
|
||||
if (item.wastedBytes) console.log(` Wasted KB: ${item.wastedBytes / 1024}`);
|
||||
if (item.wastedMs) console.log(` Wasted Ms: ${item.wastedMs}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log("\nLCP BREAKDOWN:");
|
||||
const lcpElement = data.audits['largest-contentful-paint-element'];
|
||||
if (lcpElement && lcpElement.details && lcpElement.details.items) {
|
||||
console.log("LCP Element:", lcpElement.details.items[0].node.snippet);
|
||||
}
|
||||
@@ -6,13 +6,14 @@ module.exports = async (browser, context) => {
|
||||
const page = await browser.newPage();
|
||||
// Using LHCI_URL or TARGET_URL if available
|
||||
const targetUrl =
|
||||
process.env.LHCI_URL || process.env.TARGET_URL || 'https://testing.klz-cables.com';
|
||||
process.env.LHCI_URL || process.env.TARGET_URL || 'https://testing.e-tib.com';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
console.log(`🔑 LHCI Auth: Setting gatekeeper cookie for ${new URL(targetUrl).hostname}...`);
|
||||
console.log(`🔑 LHCI Auth: Setting gatekeeper cookie (${authCookieName}) for ${new URL(targetUrl).hostname}...`);
|
||||
|
||||
await page.setCookie({
|
||||
name: 'klz_gatekeeper_session',
|
||||
name: authCookieName,
|
||||
value: gatekeeperPassword,
|
||||
domain: new URL(targetUrl).hostname,
|
||||
path: '/',
|
||||
|
||||
@@ -19,6 +19,7 @@ const targetUrl =
|
||||
'http://localhost:3000';
|
||||
const limit = process.env.PAGESPEED_LIMIT ? parseInt(process.env.PAGESPEED_LIMIT) : 20; // Default limit to avoid infinite runs
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
async function main() {
|
||||
console.log(`\n🚀 Starting PageSpeed test for: ${targetUrl}`);
|
||||
@@ -32,7 +33,7 @@ async function main() {
|
||||
// We might need to bypass gatekeeper for the sitemap fetch too
|
||||
const response = await axios.get(sitemapUrl, {
|
||||
headers: {
|
||||
Cookie: `klz_gatekeeper_session=${gatekeeperPassword}`,
|
||||
Cookie: `${authCookieName}=${gatekeeperPassword}`,
|
||||
},
|
||||
validateStatus: (status) => status < 400,
|
||||
});
|
||||
@@ -77,7 +78,7 @@ async function main() {
|
||||
// Handle authentication for staging/testing
|
||||
// Lighthouse can set cookies via --collect.settings.extraHeaders
|
||||
const extraHeaders = JSON.stringify({
|
||||
Cookie: `klz_gatekeeper_session=${gatekeeperPassword}`,
|
||||
Cookie: `${authCookieName}=${gatekeeperPassword}`,
|
||||
});
|
||||
|
||||
// Detect Chrome path from Puppeteer installation if not provided
|
||||
@@ -147,7 +148,7 @@ async function main() {
|
||||
execSync(lhciCommand, {
|
||||
encoding: 'utf8',
|
||||
stdio: 'inherit',
|
||||
env: { ...process.env, CHROME_PATH: chromePath },
|
||||
env: { ...process.env, CHROME_PATH: chromePath, TARGET_URL: targetUrl },
|
||||
});
|
||||
} catch (err: any) {
|
||||
console.warn('⚠️ LHCI assertion finished with warnings or errors.');
|
||||
|
||||
@@ -70,7 +70,9 @@ while IFS= read -r run; do
|
||||
elif [ "$CURRENT_PRIO" -lt "$RUN_PRIO" ]; then
|
||||
echo "Current workflow has LOWER priority ($CURRENT_PRIO < $RUN_PRIO). Aborting self."
|
||||
curl -s -X POST -H "Authorization: token $GITEA_PAT" "$API_BASE/$CURRENT_RUN_ID/cancel"
|
||||
exit 1
|
||||
echo "Waiting for Gitea to process cancellation..."
|
||||
sleep 15
|
||||
exit 0
|
||||
else
|
||||
# Equal priority: Newer wins
|
||||
if [ "$CURRENT_RUN_ID" -gt "$RUN_ID" ]; then
|
||||
@@ -79,7 +81,9 @@ while IFS= read -r run; do
|
||||
else
|
||||
echo "Equal priority, but current is older. Aborting self."
|
||||
curl -s -X POST -H "Authorization: token $GITEA_PAT" "$API_BASE/$CURRENT_RUN_ID/cancel"
|
||||
exit 1
|
||||
echo "Waiting for Gitea to process cancellation..."
|
||||
sleep 15
|
||||
exit 0
|
||||
fi
|
||||
fi
|
||||
done <<< "$RUNS"
|
||||
|
||||
9
skip_branch_script.sh
Normal file
9
skip_branch_script.sh
Normal file
@@ -0,0 +1,9 @@
|
||||
if [[ "${{ github.ref_type }}" == "branch" && "${{ github.ref_name }}" != "main" && "${{ github.ref_name }}" != "master" ]]; then
|
||||
# Fetch tags from remote for this specific commit to check if it's being tagged simultaneously
|
||||
TAGS=$(git ls-remote --tags origin | grep "${{ github.sha }}" || true)
|
||||
if [[ -n "$TAGS" ]]; then
|
||||
echo "Dieser Commit hat einen Tag! Überspringe Preview-Deployment, damit der Tag-Deploy Vorrang hat."
|
||||
echo "target=skip" >> $GITHUB_OUTPUT
|
||||
exit 0
|
||||
fi
|
||||
fi
|
||||
Reference in New Issue
Block a user