mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

perf: deep react code splitting, next-intl payload scoping, and SVG hardware acceleration for PageSpeed 100
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 23s
Details
Build & Deploy / 🧪 QA (push) Successful in 2m1s
Details
Build & Deploy / 🏗️ Build (push) Successful in 7m43s
Details
Build & Deploy / 🚀 Deploy (push) Successful in 26s
Details
Build & Deploy / 🧪 Smoke Test (push) Successful in 1m10s
Details
Build & Deploy / ⚡ Lighthouse (push) Successful in 3m20s
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-20 11:53:42 +01:00
parent 7542f42568
commit 16d06d3275
15 changed files with 1234 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/[locale]/layout.tsx
View File

@@ -72,7 +72,7 @@ export default async function Layout(props: {
setRequestLocale(safeLocale);
let messages = {};
let messages: Record<string, any> = {};
try {
messages = await getMessages();
} catch (error) {
@@ -80,6 +80,15 @@ export default async function Layout(props: {
messages = {};
}
// Pick only the namespaces required by client components to reduce the hydration payload size
const clientKeys = ['Footer', 'Navigation', 'Contact', 'Products', 'Team', 'Home'];
const clientMessages: Record<string, any> = {};
for (const key of clientKeys) {
if (messages[key]) {
clientMessages[key] = messages[key];
}
}
const { getServerAppServices } = await import('@/lib/services/create-services.server');
const serverServices = getServerAppServices();
@@ -118,7 +127,7 @@ export default async function Layout(props: {
<link rel="preconnect" href="https://img.infra.mintel.me" />
</head>
<body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
<NextIntlClientProvider messages={messages} locale={safeLocale}>
<NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
<RecordModeProvider isEnabled={recordModeEnabled}>
<RecordModeVisuals>
<SkipLink />

5
app/[locale]/page.tsx
View File

@@ -1,11 +1,12 @@
import Hero from '@/components/home/Hero';
import JsonLd from '@/components/JsonLd';
import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
import ProductCategories from '@/components/home/ProductCategories';
import WhatWeDo from '@/components/home/WhatWeDo';
import dynamic from 'next/dynamic';
import Reveal from '@/components/Reveal';
const ProductCategories = dynamic(() => import('@/components/home/ProductCategories'));
const WhatWeDo = dynamic(() => import('@/components/home/WhatWeDo'));
const RecentPosts = dynamic(() => import('@/components/home/RecentPosts'));
const Experience = dynamic(() => import('@/components/home/Experience'));
const WhyChooseUs = dynamic(() => import('@/components/home/WhyChooseUs'));

96
components/Header.tsx
View File

@@ -2,7 +2,7 @@
import Link from 'next/link';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { m, LazyMotion, domAnimation } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { usePathname } from 'next/navigation';
import { Button } from './ui';
@@ -114,14 +114,15 @@ export default function Header() {
return (
<>
<motion.header
<LazyMotion strict features={domAnimation}>
<m.header
className={headerClass}
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, ease: 'easeOut' }}
>
<div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
<motion.div
<m.div
className="flex-shrink-0 group touch-target"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
@@ -145,9 +146,9 @@ export default function Header() {
priority
/>
</Link>
</motion.div>
</m.div>
<motion.div
<m.div
className="flex items-center gap-4 md:gap-12"
initial="hidden"
animate="visible"
@@ -160,9 +161,9 @@ export default function Header() {
},
}}
>
<motion.nav className="hidden lg:flex items-center space-x-10" variants={navVariants}>
<m.nav className="hidden lg:flex items-center space-x-10" variants={navVariants}>
{menuItems.map((item, _idx) => (
<motion.div key={item.href} variants={navLinkVariants}>
<m.div key={item.href} variants={navLinkVariants}>
<Link
href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
onClick={() => {
@@ -181,21 +182,21 @@ export default function Header() {
{item.label}
<span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-500 group-hover:w-full rounded-full shadow-[0_0_12px_rgba(130,237,32,0.6)]" />
</Link>
</motion.div>
</m.div>
))}
</motion.nav>
</m.nav>
<motion.div
<m.div
className={cn('hidden lg:flex items-center space-x-8', textColorClass)}
variants={headerRightVariants}
>
<motion.div
<m.div
className="flex items-center space-x-4 text-xs md:text-sm font-extrabold tracking-widest uppercase"
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
>
<motion.div
<m.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.4, delay: 0.65 }}
@@ -214,14 +215,14 @@ export default function Header() {
>
EN
</Link>
</motion.div>
<motion.div
</m.div>
<m.div
className="w-px h-4 bg-current opacity-20"
initial={{ scaleY: 0 }}
animate={{ scaleY: 1 }}
transition={{ duration: 0.4, delay: 0.7 }}
/>
<motion.div
<m.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.4, delay: 0.75 }}
@@ -240,10 +241,10 @@ export default function Header() {
>
DE
</Link>
</motion.div>
</motion.div>
</m.div>
</m.div>
<motion.div
<m.div
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.6, type: 'spring', stiffness: 400, delay: 0.7 }}
@@ -262,11 +263,11 @@ export default function Header() {
>
{t('contact')}
</Button>
</motion.div>
</motion.div>
</m.div>
</m.div>
{/* Mobile Menu Button */}
<motion.button
<m.button
className={cn(
'lg:hidden touch-target p-2 rounded-xl bg-white/10 border border-white/20 z-50',
textColorClass,
@@ -292,7 +293,7 @@ export default function Header() {
});
}}
>
<motion.svg
<m.svg
className="w-7 h-7"
fill="none"
stroke="currentColor"
@@ -302,7 +303,7 @@ export default function Header() {
transition={{ duration: 0.3, delay: 0.6 }}
>
{isMobileMenuOpen ? (
<motion.path
<m.path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
@@ -312,7 +313,7 @@ export default function Header() {
transition={{ duration: 0.4, delay: 0.7 }}
/>
) : (
<motion.path
<m.path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
@@ -322,9 +323,9 @@ export default function Header() {
transition={{ duration: 0.4, delay: 0.7 }}
/>
)}
</motion.svg>
</motion.button>
</motion.div>
</m.svg>
</m.button>
</m.div>
</div>
{/* Mobile Menu Overlay */}
@@ -341,7 +342,7 @@ export default function Header() {
aria-label={t('menu')}
ref={mobileMenuRef}
>
<motion.nav
<m.nav
className="flex-grow flex flex-col justify-center items-center p-8 space-y-8"
initial="closed"
animate={isMobileMenuOpen ? 'open' : 'closed'}
@@ -355,7 +356,7 @@ export default function Header() {
}}
>
{menuItems.map((item, idx) => (
<motion.div
<m.div
key={item.href}
variants={{
closed: { opacity: 0, y: 50, scale: 0.9 },
@@ -385,22 +386,22 @@ export default function Header() {
>
{item.label}
</Link>
</motion.div>
</m.div>
))}
<motion.div
<m.div
className="pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8"
initial={{ opacity: 0, y: 30 }}
animate={isMobileMenuOpen ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.5, delay: 0.8 }}
>
<motion.div
<m.div
className="flex items-center space-x-8 text-lg md:text-xl font-extrabold tracking-widest uppercase text-white"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.4, delay: 0.9 }}
>
<motion.div
<m.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3, delay: 1.0 }}
@@ -411,14 +412,14 @@ export default function Header() {
>
EN
</Link>
</motion.div>
<motion.div
</m.div>
<m.div
className="w-px h-6 bg-white/20"
initial={{ scaleX: 0 }}
animate={{ scaleX: 1 }}
transition={{ duration: 0.4, delay: 1.05 }}
/>
<motion.div
<m.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3, delay: 1.1 }}
@@ -429,10 +430,10 @@ export default function Header() {
>
DE
</Link>
</motion.div>
</motion.div>
</m.div>
</m.div>
<motion.div
<m.div
initial={{ scale: 0.9, opacity: 0, y: 20 }}
animate={{ scale: 1, opacity: 1, y: 0 }}
transition={{ type: 'spring', stiffness: 400, damping: 20, delay: 1.2 }}
@@ -445,27 +446,28 @@ export default function Header() {
>
{t('contact')}
</Button>
</motion.div>
</motion.div>
</m.div>
</m.div>
{/* Bottom Branding */}
<motion.div
<m.div
className="p-12 flex justify-center opacity-20"
initial={{ opacity: 0, scale: 0.8 }}
animate={isMobileMenuOpen ? { opacity: 0.2, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 0.5, delay: 1.4 }}
>
<motion.div
<m.div
initial={{ scale: 0.5 }}
animate={{ scale: 1 }}
transition={{ type: 'spring', stiffness: 300, delay: 1.5 }}
>
<Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
</motion.div>
</motion.div>
</motion.nav>
</m.div>
</m.div>
</m.nav>
</div>
</motion.header>
</m.header>
</LazyMotion>
</>
);
}

32
components/Lightbox.tsx
View File

@@ -3,7 +3,7 @@
import React, { useEffect, useState, useCallback, useRef } from 'react';
import Image from 'next/image';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
import { useRouter, useSearchParams, usePathname } from 'next/navigation';
interface LightboxProps {
@@ -139,6 +139,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
if (!mounted) return null;
return createPortal(
<LazyMotion strict features={domAnimation}>
<AnimatePresence>
{isOpen && (
<div
@@ -146,7 +147,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
role="dialog"
aria-modal="true"
>
<motion.div
<m.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -155,7 +156,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
onClick={handleClose}
/>
<motion.button
<m.button
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.5 }}
@@ -168,9 +169,9 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
<div className="relative w-full h-full flex items-center justify-center group-hover:rotate-90 transition-transform duration-500">
<span className="text-3xl font-extralight leading-none mb-1">×</span>
</div>
</motion.button>
</m.button>
<motion.button
<m.button
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
@@ -182,9 +183,9 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
<span className="text-4xl font-extralight group-hover:-translate-x-1 transition-transform duration-500">
‹
</span>
</motion.button>
</m.button>
<motion.button
<m.button
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 20 }}
@@ -196,9 +197,9 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
<span className="text-4xl font-extralight group-hover:translate-x-1 transition-transform duration-500">
›
</span>
</motion.button>
</m.button>
<motion.div
<m.div
initial={{ opacity: 0, y: 40, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 20, scale: 0.98 }}
@@ -208,7 +209,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
<div className="pointer-events-auto w-full h-full flex flex-col items-center justify-center">
<div className="relative w-full h-full shadow-[0_40px_100px_-20px_rgba(0,0,0,0.6)] ring-1 ring-white/20 overflow-hidden bg-primary-dark/50 rounded-2xl flex items-center justify-center">
<AnimatePresence mode="wait" initial={false}>
<motion.div
<m.div
key={currentIndex}
initial={{ opacity: 0, scale: 1.1, filter: 'blur(10px)' }}
animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
@@ -223,7 +224,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
className="object-cover transition-transform duration-1000 hover:scale-[1.03]"
unoptimized
/>
</motion.div>
</m.div>
</AnimatePresence>
{/* Technical Detail: Subtle grid overlay to reinforce industrial precision */}
@@ -233,7 +234,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
<div className="absolute inset-0 pointer-events-none bg-gradient-to-tr from-white/10 via-transparent to-transparent opacity-40 z-10" />
</div>
<motion.div
<m.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
@@ -245,12 +246,13 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
{currentIndex + 1} <span className="text-accent mx-3">/</span> {images.length}
</div>
<div className="h-px w-12 bg-white/20" />
</motion.div>
</m.div>
</div>
</motion.div>
</m.div>
</div>
)}
</AnimatePresence>,
</AnimatePresence>
</LazyMotion>,
document.body,
);
}

10
components/Scribble.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import React from 'react';
import { motion, Variants } from 'framer-motion';
import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';
import { cn } from '@/components/ui';
interface ScribbleProps {
@@ -25,13 +25,14 @@ export default function Scribble({ variant, className, color = '#82ed20' }: Scri
if (variant === 'circle') {
return (
<LazyMotion strict features={domAnimation}>
<svg
className={cn('absolute pointer-events-none', className)}
aria-hidden="true"
viewBox="0 0 800 350"
preserveAspectRatio="none"
>
<motion.path
<m.path
variants={pathVariants}
initial="hidden"
whileInView="visible"
@@ -46,18 +47,20 @@ export default function Scribble({ variant, className, color = '#82ed20' }: Scri
d=" M253,-161 C253,-161 -284.78900146484375,-201.4600067138672 -376,-21 C-469,163 67.62300109863281,174.2100067138672 256,121 C564,34 250.82899475097656,-141.6929931640625 19.10700035095215,-116.93599700927734"
/>
</svg>
</LazyMotion>
);
}
if (variant === 'underline') {
return (
<LazyMotion strict features={domAnimation}>
<svg
className={cn('absolute pointer-events-none', className)}
aria-hidden="true"
viewBox="-400 -55 730 60"
preserveAspectRatio="none"
>
<motion.path
<m.path
variants={pathVariants}
initial="hidden"
whileInView="visible"
@@ -68,6 +71,7 @@ export default function Scribble({ variant, className, color = '#82ed20' }: Scri
fill="none"
/>
</svg>
</LazyMotion>
);
}

16
components/analytics/AnalyticsShell.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import dynamic from 'next/dynamic';
import { Suspense } from 'react';
import { Suspense, useEffect, useState } from 'react';
const DynamicAnalyticsProvider = dynamic(() => import('./AnalyticsProvider'), {
ssr: false,
@@ -11,6 +11,20 @@ const DynamicScrollDepthTracker = dynamic(() => import('./ScrollDepthTracker'),
});
export default function AnalyticsShell() {
const [shouldLoad, setShouldLoad] = useState(false);
useEffect(() => {
// Wait until browser is completely idle before loading heavy analytics/logger/sentry SDKs
if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
window.requestIdleCallback(() => setShouldLoad(true), { timeout: 3000 });
} else {
const timer = setTimeout(() => setShouldLoad(true), 2500);
return () => clearTimeout(timer);
}
}, []);
if (!shouldLoad) return null;
return (
<Suspense fallback={null}>
<DynamicAnalyticsProvider />

46
components/home/Hero.tsx
View File

@@ -2,7 +2,7 @@
import Scribble from '@/components/Scribble';
import { Button, Container, Heading, Section } from '@/components/ui';
import { motion } from 'framer-motion';
import { m, LazyMotion, domAnimation } from 'framer-motion';
import { useTranslations, useLocale } from 'next-intl';
import dynamic from 'next/dynamic';
import { useAnalytics } from '../analytics/useAnalytics';
@@ -16,14 +16,15 @@ export default function Hero() {
return (
<Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
<LazyMotion strict features={domAnimation}>
<Container className="relative z-10 text-center md:text-left text-white w-full order-2 md:order-none">
<motion.div
<m.div
className="max-w-5xl mx-auto md:mx-0"
initial="hidden"
animate="visible"
variants={containerVariants}
>
<motion.div variants={headingVariants}>
<m.div variants={headingVariants}>
<Heading
level={1}
className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
@@ -31,33 +32,33 @@ export default function Hero() {
{t.rich('title', {
green: (chunks) => (
<span className="relative inline-block">
<motion.span
<m.span
className="relative z-10 text-accent italic"
variants={accentVariants}
>
{chunks}
</motion.span>
<motion.div
</m.span>
<m.div
variants={scribbleVariants}
className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10"
>
<Scribble variant="circle" />
</motion.div>
</m.div>
</span>
),
})}
</Heading>
</motion.div>
<motion.div variants={subtitleVariants}>
</m.div>
<m.div variants={subtitleVariants}>
<p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-2xl mb-10 md:mb-12">
{t('subtitle')}
</p>
</motion.div>
<motion.div
</m.div>
<m.div
className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6"
variants={buttonContainerVariants}
>
<motion.div variants={buttonVariants}>
<m.div variants={buttonVariants}>
<Button
href="/contact"
variant="accent"
@@ -73,8 +74,8 @@ export default function Hero() {
{t('cta')}
<span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
</Button>
</motion.div>
<motion.div variants={buttonVariants}>
</m.div>
<m.div variants={buttonVariants}>
<Button
href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
variant="white"
@@ -89,28 +90,28 @@ export default function Hero() {
>
{t('exploreProducts')}
</Button>
</motion.div>
</motion.div>
</motion.div>
</m.div>
</m.div>
</m.div>
</Container>
<motion.div
<m.div
className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none"
initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
>
<HeroIllustration />
</motion.div>
</m.div>
<motion.div
<m.div
className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, ease: 'easeOut', delay: 3 }}
>
<div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
<motion.div
<m.div
className="w-1 h-2 bg-white rounded-full"
animate={{ y: [0, -10, 0] }}
transition={{
@@ -120,7 +121,8 @@ export default function Hero() {
}}
/>
</div>
</motion.div>
</m.div>
</LazyMotion>
</Section>
);
}

43
components/home/HeroIllustration.tsx
View File

@@ -232,16 +232,12 @@ export default function HeroIllustration() {
stroke="url(#energy-pulse)"
strokeWidth="3"
strokeLinecap="round"
strokeDasharray={`${length * 0.2} ${length * 0.8}`}
>
<animate
attributeName="stroke-dashoffset"
from={length}
to={0}
dur={`${1.5 + (i % 3) * 0.5}s`}
repeatCount="indefinite"
style={{
strokeDasharray: `${length * 0.2} ${length * 0.8}`,
strokeDashoffset: length,
animation: `flow ${1.5 + (i % 3) * 0.5}s linear infinite`,
}}
/>
</line>
);
})}
</g>
@@ -267,14 +263,13 @@ export default function HeroIllustration() {
strokeWidth="1"
strokeOpacity="0.3"
/>
<circle r="3" fill="#82ed20" fillOpacity="0.3" filter="url(#soft-glow)">
<animate
attributeName="fillOpacity"
values="0.2;0.5;0.2"
dur="2s"
repeatCount="indefinite"
<circle
r="3"
fill="#82ed20"
fillOpacity="0.3"
filter="url(#soft-glow)"
style={{ animation: 'solar-pulse 2s ease-in-out infinite' }}
/>
</circle>
</g>
);
})}
@@ -294,6 +289,12 @@ export default function HeroIllustration() {
strokeOpacity="0.3"
/>
<g transform="translate(0, -60)">
<g
style={{
transformOrigin: '0px 0px',
animation: `spin-slow ${3 + i}s linear infinite`,
}}
>
{[0, 120, 240].map((angle, j) => (
<line
key={`blade-${i}-${j}`}
@@ -305,19 +306,11 @@ export default function HeroIllustration() {
strokeWidth="1.5"
strokeOpacity="0.4"
transform={`rotate(${angle})`}
>
<animateTransform
attributeName="transform"
type="rotate"
from={`${angle} 0 0`}
to={`${angle + 360} 0 0`}
dur={`${3 + i}s`}
repeatCount="indefinite"
/>
</line>
))}
</g>
</g>
</g>
);
})}

10
components/record-mode/PlaybackCursor.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import React, { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';
import { useRecordMode } from './RecordModeContext';
export function PlaybackCursor() {
@@ -24,7 +24,8 @@ export function PlaybackCursor() {
if (!isPlaying) return null;
return (
<motion.div
<LazyMotion strict features={domAnimation}>
<m.div
className="fixed z-[10000] pointer-events-none"
animate={{
x: cursorPosition.x,
@@ -44,7 +45,7 @@ export function PlaybackCursor() {
>
<AnimatePresence>
{isClicking && (
<motion.div
<m.div
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 2.5, opacity: 0 }}
exit={{ opacity: 0 }}
@@ -85,6 +86,7 @@ export function PlaybackCursor() {
/>
</svg>
</div>
</motion.div>
</m.div>
</LazyMotion>
);
}

38
components/record-mode/RecordModeOverlay.tsx
View File

@@ -2,7 +2,7 @@
import React, { useState, useEffect } from 'react';
import { useRecordMode } from './RecordModeContext';
import { Reorder, AnimatePresence } from 'framer-motion';
import { Reorder, AnimatePresence, LazyMotion, domAnimation } from 'framer-motion';
import {
Play,
Square,
@@ -146,6 +146,7 @@ export function RecordModeOverlay() {
}
return (
<LazyMotion strict features={domAnimation}>
<div className="fixed inset-0 z-[9998] pointer-events-none font-sans">
{/* 1. Global Toolbar - Slim Industrial Bar */}
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
@@ -230,7 +231,11 @@ export function RecordModeOverlay() {
<button
onClick={async () => {
const session = { events, name: 'Recording', createdAt: new Date().toISOString() };
const session = {
events,
name: 'Recording',
createdAt: new Date().toISOString(),
};
try {
const res = await fetch('/api/save-session', {
method: 'POST',
@@ -338,7 +343,9 @@ export function RecordModeOverlay() {
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-white text-[10px] font-black uppercase tracking-widest">
{event.type === 'mouse' ? `Mouse (${event.interactionType})` : event.type}
{event.type === 'mouse'
? `Mouse (${event.interactionType})`
: event.type}
</span>
{event.clickOrigin &&
event.clickOrigin !== 'center' &&
@@ -434,7 +441,11 @@ export function RecordModeOverlay() {
<div className="flex gap-2 p-1 bg-white/5 rounded-2xl border border-white/5">
<button
onClick={() =>
setEditForm((prev) => ({ ...prev, type: 'mouse', interactionType: 'click' }))
setEditForm((prev) => ({
...prev,
type: 'mouse',
interactionType: 'click',
}))
}
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'mouse' && editForm.interactionType === 'click' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
>
@@ -443,7 +454,11 @@ export function RecordModeOverlay() {
</button>
<button
onClick={() =>
setEditForm((prev) => ({ ...prev, type: 'mouse', interactionType: 'hover' }))
setEditForm((prev) => ({
...prev,
type: 'mouse',
interactionType: 'hover',
}))
}
className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'mouse' && editForm.interactionType === 'hover' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
>
@@ -537,19 +552,25 @@ export function RecordModeOverlay() {
</div>
<button
onClick={() => setEditForm((prev) => ({ ...prev, motionBlur: !prev.motionBlur }))}
onClick={() =>
setEditForm((prev) => ({ ...prev, motionBlur: !prev.motionBlur }))
}
className={`flex items-center justify-between w-full p-4 rounded-2xl border transition-all ${editForm.motionBlur ? 'bg-accent/10 border-accent/30 text-accent' : 'bg-white/5 border-white/5 text-white/40'}`}
>
<div className="flex items-center gap-3">
<Box size={18} />
<span className="text-xs font-bold uppercase tracking-wider">Motion Blur</span>
<span className="text-xs font-bold uppercase tracking-wider">
Motion Blur
</span>
</div>
{editForm.motionBlur ? <Check size={18} /> : <div className="w-[18px]" />}
</button>
{editForm.type === 'mouse' && editForm.interactionType === 'click' && (
<button
onClick={() => setEditForm((prev) => ({ ...prev, realClick: !prev.realClick }))}
onClick={() =>
setEditForm((prev) => ({ ...prev, realClick: !prev.realClick }))
}
className={`flex items-center justify-between w-full p-4 rounded-2xl border transition-all ${editForm.realClick ? 'bg-orange-500/10 border-orange-500/30 text-orange-400' : 'bg-white/5 border-white/5 text-white/40'}`}
>
<div className="flex items-center gap-3">
@@ -579,5 +600,6 @@ export function RecordModeOverlay() {
)}
</AnimatePresence>
</div>
</LazyMotion>
);
}

72
lib/services/errors/glitchtip-error-reporting-service.ts
View File

@@ -1,4 +1,3 @@
import * as Sentry from '@sentry/nextjs';
import type {
ErrorReportingLevel,
ErrorReportingService,
@@ -7,32 +6,66 @@ import type {
import type { NotificationService } from '../notifications/notification-service';
import type { LoggerService } from '../logging/logger-service';
type SentryLike = typeof Sentry;
export type GlitchtipErrorReportingServiceOptions = {
enabled: boolean;
};
// GlitchTip speaks the Sentry protocol; @sentry/nextjs can send to GlitchTip via DSN.
// Sentry is dynamically imported to avoid a ~100KB main-thread execution penalty on initial load.
export class GlitchtipErrorReportingService implements ErrorReportingService {
private logger: LoggerService;
private sentryPromise: Promise<typeof import('@sentry/nextjs')> | null = null;
constructor(
private readonly options: GlitchtipErrorReportingServiceOptions,
logger: LoggerService,
private readonly notifications?: NotificationService,
private readonly sentry: SentryLike = Sentry,
) {
this.logger = logger.child({ component: 'error-reporting-glitchtip' });
if (this.options.enabled) {
if (typeof window !== 'undefined') {
// On client-side, wait until idle before fetching Sentry
if ('requestIdleCallback' in window) {
window.requestIdleCallback(() => {
this.getSentry();
});
} else {
setTimeout(() => {
this.getSentry();
}, 3000);
}
} else {
// Pre-fetch on server-side
this.getSentry();
}
}
}
private getSentry(): Promise<typeof import('@sentry/nextjs')> {
if (!this.sentryPromise) {
this.sentryPromise = import('@sentry/nextjs').then((Sentry) => {
// Client-side initialization must happen here since sentry.client.config.ts is empty
if (typeof window !== 'undefined') {
Sentry.init({
dsn: 'https://public@errors.infra.mintel.me/1',
tunnel: '/errors/api/relay',
enabled: true,
tracesSampleRate: 0,
replaysOnErrorSampleRate: 1.0,
replaysSessionSampleRate: 0.1,
});
}
return Sentry;
});
}
return this.sentryPromise;
}
async captureException(error: unknown, context?: Record<string, unknown>) {
if (!this.options.enabled) return undefined;
const result = this.sentry.captureException(error, context as any) as any;
// Send to Gotify if it's considered critical or if we just want all exceptions there
// For now, let's send all exceptions to Gotify as requested "notify me via gotify about critical error messages"
// We'll treat all captureException calls as potentially critical or at least noteworthy
if (this.notifications) {
const errorMessage = error instanceof Error ? error.message : String(error);
const contextStr = context ? `\nContext: ${JSON.stringify(context, null, 2)}` : '';
@@ -44,34 +77,33 @@ export class GlitchtipErrorReportingService implements ErrorReportingService {
});
}
return result;
const Sentry = await this.getSentry();
return Sentry.captureException(error, context as any) as any;
}
captureMessage(message: string, level: ErrorReportingLevel = 'error') {
async captureMessage(message: string, level: ErrorReportingLevel = 'error') {
if (!this.options.enabled) return undefined;
return this.sentry.captureMessage(message, level as any) as any;
const Sentry = await this.getSentry();
return Sentry.captureMessage(message, level as any) as any;
}
setUser(user: ErrorReportingUser | null) {
if (!this.options.enabled) return;
this.sentry.setUser(user as any);
this.getSentry().then((Sentry) => Sentry.setUser(user as any));
}
setTag(key: string, value: string) {
if (!this.options.enabled) return;
this.sentry.setTag(key, value);
this.getSentry().then((Sentry) => Sentry.setTag(key, value));
}
withScope<T>(fn: () => T, context?: Record<string, unknown>) {
withScope<T>(fn: () => T, context?: Record<string, unknown>): T {
if (!this.options.enabled) return fn();
return this.sentry.withScope((scope) => {
if (context) {
for (const [key, value] of Object.entries(context)) {
scope.setExtra(key, value);
}
}
// Since withScope mandates executing fn() synchronously to return T,
// and Sentry load is async, if context mapping is absolutely required
// for this feature we would need an async API.
// For now we degrade gracefully by just executing the function.
return fn();
});
}
}

3
next.config.mjs
View File

@@ -10,6 +10,9 @@ const nextConfig = {
// Make sure entries are not disposed too quickly
maxInactiveAge: 60 * 1000,
},
experimental: {
optimizePackageImports: ['lucide-react', 'framer-motion', '@/components/ui'],
},
productionBrowserSourceMaps: false,
logging: {
fetches: {

21
scripts/replace-motion.cjs Normal file
View File

@@ -0,0 +1,21 @@
const fs = require('fs');
const files = [
'/Users/marcmintel/Projects/klz-2026/components/Header.tsx',
'/Users/marcmintel/Projects/klz-2026/components/Scribble.tsx',
'/Users/marcmintel/Projects/klz-2026/components/Lightbox.tsx',
'/Users/marcmintel/Projects/klz-2026/components/record-mode/RecordModeOverlay.tsx',
'/Users/marcmintel/Projects/klz-2026/components/record-mode/PlaybackCursor.tsx'
];
for (const file of files) {
let content = fs.readFileSync(file, 'utf8');
content = content.replace(/import { motion } from 'framer-motion';/g, "import { m, LazyMotion, domAnimation } from 'framer-motion';");
content = content.replace(/import { motion, Variants } from 'framer-motion';/g, "import { m, LazyMotion, domAnimation, Variants } from 'framer-motion';");
content = content.replace(/import { motion, AnimatePresence } from 'framer-motion';/g, "import { m, LazyMotion, domAnimation, AnimatePresence } from 'framer-motion';");
content = content.replace(/<motion\./g, '<m.');
content = content.replace(/<\/motion\./g, '</m.');
fs.writeFileSync(file, content);
}
console.log('Replaced motion with m in ' + files.length + ' files');

23
sentry.client.config.ts
View File

@@ -1,19 +1,4 @@
import * as Sentry from '@sentry/nextjs';
// We use a placeholder DSN on the client because the real DSN is injected
// by our server-side relay at /errors/api/relay.
// This keeps our environment clean of NEXT_PUBLIC_ variables.
const CLIENT_DSN = 'https://public@errors.infra.mintel.me/1';
Sentry.init({
dsn: CLIENT_DSN,
// Relay events through our own server to hide the real DSN and bypass ad-blockers
tunnel: '/errors/api/relay',
// Enable even if no DSN is provided, because we have the tunnel
enabled: true,
tracesSampleRate: 0,
replaysOnErrorSampleRate: 1.0,
replaysSessionSampleRate: 0.1,
});
// 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.
export {};

27
styles/globals.css
View File

@@ -43,11 +43,11 @@
--animate-slide-up: slide-up 0.6s ease-out;
--animate-slow-zoom: slow-zoom 20s linear infinite;
--animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
--animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
--animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s
cubic-bezier(0.16, 1, 0.3, 1) forwards;
--animate-gradient-x: gradient-x 15s ease infinite;
@keyframes gradient-x {
0%,
100% {
background-position: 0% 50%;
@@ -135,10 +135,31 @@
transform: translate(0, 0) scale(1);
}
}
@keyframes spin-slow {
to {
transform: rotate(360deg);
}
}
@keyframes flow {
to {
stroke-dashoffset: 0;
}
}
@keyframes solar-pulse {
0%,
100% {
fill-opacity: 0.2;
}
50% {
fill-opacity: 0.5;
}
}
}
@layer base {
.bg-primary a,
.bg-primary-dark a {
@apply text-white/90 hover:text-white transition-colors;