feat: product catalog

components/BrochureCTA.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslations, useLocale } from 'next-intl';
+import { cn } from '@/components/ui/utils';
+import { requestBrochureAction } from '@/app/actions/brochure';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
+
+interface Props {
+    className?: string;
+    compact?: boolean;
+}
+
+/**
+ * BrochureCTA — Shows a button that opens a modal asking for an email address.
+ * The full-catalog PDF is ONLY revealed after email submission.
+ * No direct download link is exposed anywhere.
+ */
+export default function BrochureCTA({ className, compact = false }: Props) {
+    const t = useTranslations('Brochure');
+    const locale = useLocale();
+    const { trackEvent } = useAnalytics();
+    const formRef = useRef<HTMLFormElement>(null);
+
+    const [open, setOpen] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const [phase, setPhase] = useState<'form' | 'loading' | 'success' | 'error'>('form');
+    const [url, setUrl] = useState('');
+    const [err, setErr] = useState('');
+
+    useEffect(() => { setMounted(true); }, []);
+
+    useEffect(() => {
+        if (!open) return;
+        const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') closeModal(); };
+        document.addEventListener('keydown', onKey);
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.body.style.overflow = '';
+        };
+    }, [open]);
+
+    function openModal() { setOpen(true); }
+    function closeModal() {
+        setOpen(false);
+        setPhase('form');
+        setUrl('');
+        setErr('');
+    }
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        if (!formRef.current) return;
+        setPhase('loading');
+
+        const fd = new FormData(formRef.current);
+        fd.set('locale', locale);
+
+        try {
+            const res = await requestBrochureAction(fd);
+            if (res.success && res.brochureUrl) {
+                setUrl(res.brochureUrl);
+                setPhase('success');
+                trackEvent(AnalyticsEvents.DOWNLOAD, {
+                    file_name: `klz-product-catalog-${locale}.pdf`,
+                    file_type: 'brochure',
+                    location: 'brochure_modal',
+                });
+            } else {
+                setErr(res.error || 'Error');
+                setPhase('error');
+            }
+        } catch {
+            setErr('Network error');
+            setPhase('error');
+        }
+    }
+
+    // ── Trigger Button ─────────────────────────────────────────────────
+    const trigger = (
+        <div className={cn(className)}>
+            <button
+                type="button"
+                onClick={openModal}
+                className={cn(
+                    'group relative flex w-full items-center gap-4 overflow-hidden rounded-[28px] bg-[#000d26] border border-white/[0.08] text-left cursor-pointer',
+                    'transition-all duration-300 hover:border-[#82ed20]/30 hover:shadow-[0_8px_30px_rgba(0,0,0,0.3)]',
+                    compact ? 'p-4 md:p-5' : 'p-6 md:p-8',
+                )}
+            >
+                {/* Green top accent */}
+                <span className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#82ed20]/50 to-transparent" />
+
+                {/* Icon */}
+                <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/10 border border-[#82ed20]/20 group-hover:bg-[#82ed20] transition-colors duration-300">
+                    <svg className="h-5 w-5 text-[#82ed20] group-hover:text-[#000d26] transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                    </svg>
+                </span>
+
+                {/* Labels */}
+                <span className="flex-1 min-w-0">
+                    <span className="block text-[9px] font-black uppercase tracking-[0.2em] text-[#82ed20] mb-0.5">PDF Katalog</span>
+                    <span className={cn(
+                        'block font-black text-white uppercase tracking-tight group-hover:text-[#82ed20] transition-colors duration-200',
+                        compact ? 'text-base' : 'text-lg md:text-xl',
+                    )}>
+                        {t('ctaTitle')}
+                    </span>
+                </span>
+
+                {/* Arrow */}
+                <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-[#82ed20] group-hover:text-[#000d26] transition-all duration-300">
+                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+                    </svg>
+                </span>
+            </button>
+        </div>
+    );
+
+    // ── Modal ──────────────────────────────────────────────────────────
+    const modal = mounted && open ? createPortal(
+        <div style={{ position: 'fixed', inset: 0, zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem' }}>
+            {/* Backdrop */}
+            <div
+                style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.75)', backdropFilter: 'blur(4px)' }}
+                onClick={closeModal}
+            />
+
+            {/* Panel */}
+            <div style={{ position: 'relative', zIndex: 1, width: '100%', maxWidth: '26rem', borderRadius: '1.5rem', background: '#000d26', border: '1px solid rgba(255,255,255,0.1)', boxShadow: '0 40px 80px rgba(0,0,0,0.6)', overflow: 'hidden' }}>
+
+                {/* Green top bar */}
+                <div style={{ height: '3px', background: 'linear-gradient(90deg, #82ed20, #5cb516, #82ed20)' }} />
+
+                {/* Close */}
+                <button
+                    type="button"
+                    onClick={closeModal}
+                    style={{ position: 'absolute', top: '1rem', right: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '2rem', height: '2rem', borderRadius: '50%', background: 'rgba(255,255,255,0.05)', color: 'rgba(255,255,255,0.4)', border: 'none', cursor: 'pointer' }}
+                    aria-label={t('close')}
+                >
+                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+
+                <div style={{ padding: '2rem' }}>
+                    {/* Header */}
+                    <div style={{ marginBottom: '1.5rem' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '2.75rem', height: '2.75rem', borderRadius: '0.75rem', background: 'rgba(130,237,32,0.1)', border: '1px solid rgba(130,237,32,0.2)', marginBottom: '1rem' }}>
+                            <svg width="20" height="20" fill="none" stroke="#82ed20" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                            </svg>
+                        </div>
+                        <h2 style={{ margin: 0, fontSize: '1.5rem', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.03em', lineHeight: 1, marginBottom: '0.5rem' }}>
+                            {t('title')}
+                        </h2>
+                        <p style={{ margin: 0, fontSize: '0.875rem', color: 'rgba(255,255,255,0.5)', lineHeight: 1.6 }}>
+                            {t('subtitle')}
+                        </p>
+                    </div>
+
+                    {phase === 'success' ? (
+                        <div>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '1rem', borderRadius: '1rem', background: 'rgba(130,237,32,0.08)', border: '1px solid rgba(130,237,32,0.2)', marginBottom: '1rem' }}>
+                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '2.25rem', height: '2.25rem', borderRadius: '0.625rem', background: 'rgba(130,237,32,0.15)', flexShrink: 0 }}>
+                                    <svg width="18" height="18" fill="none" stroke="#82ed20" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                </div>
+                                <div>
+                                    <p style={{ margin: 0, fontSize: '0.875rem', fontWeight: 700, color: '#82ed20' }}>{t('successTitle')}</p>
+                                    <p style={{ margin: '0.125rem 0 0', fontSize: '0.75rem', color: 'rgba(255,255,255,0.5)' }}>{t('successDesc')}</p>
+                                </div>
+                            </div>
+                            <a
+                                href={url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem', width: '100%', padding: '1rem', borderRadius: '1rem', background: '#82ed20', color: '#000d26', fontWeight: 900, fontSize: '0.8125rem', textTransform: 'uppercase', letterSpacing: '0.1em', textDecoration: 'none' }}
+                            >
+                                <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                                        d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                </svg>
+                                {t('download')}
+                            </a>
+                        </div>
+                    ) : (
+                        <form ref={formRef} onSubmit={handleSubmit}>
+                            <label style={{ display: 'block', fontSize: '0.625rem', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.2em', color: 'rgba(255,255,255,0.4)', marginBottom: '0.5rem' }}>
+                                {t('emailLabel')}
+                            </label>
+                            <input
+                                name="email"
+                                type="email"
+                                required
+                                autoComplete="email"
+                                placeholder={t('emailPlaceholder')}
+                                disabled={phase === 'loading'}
+                                style={{ width: '100%', padding: '0.875rem 1rem', borderRadius: '0.75rem', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', fontSize: '0.875rem', fontWeight: 500, outline: 'none', boxSizing: 'border-box', marginBottom: '0.75rem' }}
+                            />
+
+                            {phase === 'error' && err && (
+                                <p style={{ margin: '0 0 0.75rem', fontSize: '0.75rem', color: '#f87171', fontWeight: 500 }}>{err}</p>
+                            )}
+
+                            <button
+                                type="submit"
+                                disabled={phase === 'loading'}
+                                style={{
+                                    width: '100%',
+                                    padding: '1rem',
+                                    borderRadius: '1rem',
+                                    background: phase === 'loading' ? 'rgba(255,255,255,0.1)' : '#82ed20',
+                                    color: phase === 'loading' ? 'rgba(255,255,255,0.4)' : '#000d26',
+                                    fontWeight: 900,
+                                    fontSize: '0.8125rem',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.1em',
+                                    border: 'none',
+                                    cursor: phase === 'loading' ? 'wait' : 'pointer',
+                                    marginBottom: '0.75rem',
+                                }}
+                            >
+                                {phase === 'loading' ? t('submitting') : t('submit')}
+                            </button>
+
+                            <p style={{ margin: 0, fontSize: '0.625rem', color: 'rgba(255,255,255,0.25)', textAlign: 'center', lineHeight: 1.6 }}>
+                                {t('privacyNote')}
+                            </p>
+                        </form>
+                    )}
+                </div>
+            </div>
+        </div>,
+        document.body,
+    ) : null;
+
+    return (
+        <>
+            {trigger}
+            {modal}
+        </>
+    );
+}

components/BrochureModal.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslations, useLocale } from 'next-intl';
+import { cn } from '@/components/ui/utils';
+import { requestBrochureAction } from '@/app/actions/brochure';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
+
+interface BrochureModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export default function BrochureModal({ isOpen, onClose }: BrochureModalProps) {
+    const t = useTranslations('Brochure');
+    const locale = useLocale();
+    const { trackEvent } = useAnalytics();
+    const formRef = useRef<HTMLFormElement>(null);
+    const [mounted, setMounted] = useState(false);
+
+    const [state, setState] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+    const [brochureUrl, setBrochureUrl] = useState<string | null>(null);
+    const [errorMsg, setErrorMsg] = useState('');
+
+    // Mount guard for SSR/portal
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    // Close on escape + lock scroll
+    useEffect(() => {
+        const handleEsc = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose();
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEsc);
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEsc);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, onClose]);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!formRef.current) return;
+
+        setState('submitting');
+        setErrorMsg('');
+
+        try {
+            const formData = new FormData(formRef.current);
+            formData.set('locale', locale);
+
+            const result = await requestBrochureAction(formData);
+
+            if (result.success && result.brochureUrl) {
+                setState('success');
+                setBrochureUrl(result.brochureUrl);
+                trackEvent(AnalyticsEvents.DOWNLOAD, {
+                    file_name: `klz-product-catalog-${locale}.pdf`,
+                    file_type: 'brochure',
+                    location: 'brochure_modal',
+                });
+            } else {
+                setState('error');
+                setErrorMsg(result.error || 'Something went wrong');
+            }
+        } catch {
+            setState('error');
+            setErrorMsg('Network error');
+        }
+    };
+
+    const handleClose = () => {
+        setState('idle');
+        setBrochureUrl(null);
+        setErrorMsg('');
+        onClose();
+    };
+
+    if (!mounted || !isOpen) return null;
+
+    const modal = (
+        <div
+            className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+            role="dialog"
+            aria-modal="true"
+        >
+            {/* Backdrop */}
+            <div
+                className="absolute inset-0 bg-black/70 backdrop-blur-sm"
+                onClick={handleClose}
+                aria-hidden="true"
+            />
+
+            {/* Modal Panel */}
+            <div className="relative z-10 w-full max-w-md rounded-[28px] bg-[#000d26] border border-white/10 shadow-[0_40px_80px_rgba(0,0,0,0.6)] overflow-hidden">
+                {/* Accent bar at top */}
+                <div className="h-1 w-full bg-gradient-to-r from-[#82ed20] via-[#5cb516] to-[#82ed20]" />
+
+                {/* Close Button */}
+                <button
+                    type="button"
+                    onClick={handleClose}
+                    className="absolute top-4 right-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/5 text-white/40 hover:bg-white/10 hover:text-white transition-colors"
+                    aria-label={t('close')}
+                >
+                    <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+
+                <div className="p-8 pt-7">
+                    {/* Icon + Header */}
+                    <div className="mb-7">
+                        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#82ed20]/10 border border-[#82ed20]/20 mb-4">
+                            <svg className="h-6 w-6 text-[#82ed20]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                            </svg>
+                        </div>
+                        <h2 className="text-2xl font-black text-white uppercase tracking-tight leading-none mb-2">
+                            {t('title')}
+                        </h2>
+                        <p className="text-sm text-white/50 leading-relaxed">
+                            {t('subtitle')}
+                        </p>
+                    </div>
+
+                    {state === 'success' && brochureUrl ? (
+                        <div>
+                            <div className="flex items-center gap-3 mb-6 p-4 rounded-2xl bg-[#82ed20]/10 border border-[#82ed20]/20">
+                                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/20">
+                                    <svg className="h-5 w-5 text-[#82ed20]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                </div>
+                                <div>
+                                    <p className="text-sm font-bold text-[#82ed20]">{t('successTitle')}</p>
+                                    <p className="text-xs text-white/50 mt-0.5">{t('successDesc')}</p>
+                                </div>
+                            </div>
+                            <a
+                                href={brochureUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center justify-center gap-3 w-full py-4 px-6 rounded-2xl bg-[#82ed20] hover:bg-[#6dd318] text-[#000d26] font-black text-sm uppercase tracking-widest transition-colors"
+                            >
+                                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                                        d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                </svg>
+                                {t('download')}
+                            </a>
+                        </div>
+                    ) : (
+                        <form ref={formRef} onSubmit={handleSubmit}>
+                            <div className="mb-5">
+                                <label
+                                    htmlFor="brochure-email"
+                                    className="block text-[10px] font-black uppercase tracking-[0.2em] text-white/40 mb-2"
+                                >
+                                    {t('emailLabel')}
+                                </label>
+                                <input
+                                    id="brochure-email"
+                                    name="email"
+                                    type="email"
+                                    required
+                                    autoComplete="email"
+                                    placeholder={t('emailPlaceholder')}
+                                    className="w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3.5 text-white placeholder:text-white/20 text-sm font-medium focus:outline-none focus:border-[#82ed20]/40 transition-colors"
+                                    disabled={state === 'submitting'}
+                                />
+                            </div>
+
+                            {state === 'error' && errorMsg && (
+                                <p className="text-red-400 text-xs mb-4 font-medium">{errorMsg}</p>
+                            )}
+
+                            <button
+                                type="submit"
+                                disabled={state === 'submitting'}
+                                className={cn(
+                                    'w-full py-4 px-6 rounded-2xl font-black text-sm uppercase tracking-widest transition-colors',
+                                    state === 'submitting'
+                                        ? 'bg-white/10 text-white/40 cursor-wait'
+                                        : 'bg-[#82ed20] hover:bg-[#6dd318] text-[#000d26]',
+                                )}
+                            >
+                                {state === 'submitting' ? t('submitting') : t('submit')}
+                            </button>
+
+                            <p className="mt-4 text-[10px] text-white/25 text-center leading-relaxed">
+                                {t('privacyNote')}
+                            </p>
+                        </form>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+
+    return createPortal(modal, document.body);
+}

components/DatasheetDownload.tsx

@@ -33,12 +33,12 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
         <div className="absolute inset-0 bg-gradient-to-r from-accent via-saturated to-accent opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />
 
         {/* Inner Content */}
-        <div className="relative flex items-center gap-6 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:p-8 border border-white/10">
+        <div className="relative flex items-center gap-5 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:px-6 md:py-6 border border-white/10">
           {/* Icon Container */}
-          <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-accent group-hover:border-white/20 transition-all duration-500">
+          <div className="relative flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-accent group-hover:border-white/20 transition-all duration-500">
             <div className="absolute inset-0 rounded-2xl bg-accent/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
             <svg
-              className="relative h-8 w-8 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
+              className="relative h-7 w-7 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -54,13 +54,13 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
           </div>
 
           {/* Text Content */}
-          <div className="flex-1">
+          <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
               <span className="text-[10px] font-black uppercase tracking-[0.2em] text-accent">
                 PDF Datasheet
               </span>
             </div>
-            <h3 className="text-xl md:text-2xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-accent transition-colors duration-300">
+            <h3 className="text-xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-accent transition-colors duration-300">
               {t('downloadDatasheet')}
             </h3>
             <p className="mt-2 text-sm font-medium text-white/60 leading-relaxed">
@@ -69,9 +69,9 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
           </div>
 
           {/* Arrow Icon */}
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-accent group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
+          <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-accent group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
             <svg
-              className="h-6 w-6"
+              className="h-5 w-5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"

components/ExcelDownload.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { cn } from '@/components/ui/utils';
+import { useTranslations } from 'next-intl';
+import { useAnalytics } from './analytics/useAnalytics';
+import { AnalyticsEvents } from './analytics/analytics-events';
+
+interface ExcelDownloadProps {
+    excelPath: string;
+    className?: string;
+}
+
+export default function ExcelDownload({ excelPath, className }: ExcelDownloadProps) {
+    const t = useTranslations('Products');
+    const { trackEvent } = useAnalytics();
+
+    return (
+        <div className={cn('mt-4 animate-slight-fade-in-from-bottom', className)}>
+            <a
+                href={excelPath}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() =>
+                    trackEvent(AnalyticsEvents.DOWNLOAD, {
+                        file_name: excelPath.split('/').pop(),
+                        file_path: excelPath,
+                        file_type: 'excel',
+                        location: 'product_page',
+                    })
+                }
+                className="group relative block w-full overflow-hidden rounded-[32px] bg-primary-dark p-1 transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] hover:-translate-y-1"
+            >
+                {/* Animated Background Gradient */}
+                <div className="absolute inset-0 bg-gradient-to-r from-emerald-500 via-teal-400 to-emerald-500 opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />
+
+                {/* Inner Content */}
+                <div className="relative flex items-center gap-5 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:px-6 md:py-6 border border-white/10">
+                    {/* Icon Container */}
+                    <div className="relative flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-emerald-600 group-hover:border-white/20 transition-all duration-500">
+                        <div className="absolute inset-0 rounded-2xl bg-emerald-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                        {/* Spreadsheet/Table Icon */}
+                        <svg
+                            className="relative h-7 w-7 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={1.5}
+                                d="M3 10h18M3 14h18M10 3v18M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6z"
+                            />
+                        </svg>
+                    </div>
+
+                    {/* Text Content */}
+                    <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                            <span className="text-[10px] font-black uppercase tracking-[0.2em] text-emerald-400">
+                                Excel Datasheet
+                            </span>
+                        </div>
+                        <h3 className="text-xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-emerald-400 transition-colors duration-300">
+                            {t('downloadExcel')}
+                        </h3>
+                        <p className="mt-2 text-sm font-medium text-white/60 leading-relaxed">
+                            {t('downloadExcelDesc')}
+                        </p>
+                    </div>
+
+                    {/* Arrow Icon */}
+                    <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-emerald-600 group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
+                        <svg
+                            className="h-5 w-5"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            aria-hidden="true"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2.5}
+                                d="M9 5l7 7-7 7"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </a>
+        </div>
+    );
+}

components/Footer.tsx

@@ -6,6 +6,7 @@ import { useTranslations, useLocale } from 'next-intl';
 import { Container } from './ui';
 import { useAnalytics } from './analytics/useAnalytics';
 import { AnalyticsEvents } from './analytics/analytics-events';
+import BrochureCTA from './BrochureCTA';
 
 export default function Footer() {
   const t = useTranslations('Footer');
@@ -187,6 +188,9 @@ export default function Footer() {
                   {navT('contact')}
                 </Link>
               </li>
+              <li className="pt-2">
+                <BrochureCTA compact className="opacity-80 hover:opacity-100 transition-opacity" />
+              </li>
             </ul>
           </div>
 

components/ProductSidebar.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import RequestQuoteForm from '@/components/RequestQuoteForm';
 import DatasheetDownload from '@/components/DatasheetDownload';
+import ExcelDownload from '@/components/ExcelDownload';
 import Scribble from '@/components/Scribble';
 import { cn } from '@/components/ui/utils';
 
@@ -11,6 +12,7 @@ interface ProductSidebarProps {
   productName: string;
   productImage?: string;
   datasheetPath?: string | null;
+  excelPath?: string | null;
   className?: string;
 }
 
@@ -18,6 +20,7 @@ export default function ProductSidebar({
   productName,
   productImage,
   datasheetPath,
+  excelPath,
   className,
 }: ProductSidebarProps) {
   const t = useTranslations('Products');
@@ -70,6 +73,9 @@ export default function ProductSidebar({
 
       {/* Datasheet Download */}
       {datasheetPath && <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />}
+
+      {/* Excel Download – right below datasheet */}
+      {excelPath && <ExcelDownload excelPath={excelPath} className="mt-0" />}
     </aside>
   );
 }

components/ProductTechnicalData.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { formatTechnicalValue } from '@/lib/utils/technical';
 
 interface KeyValueItem {
   label: string;
@@ -45,22 +46,40 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
             <div className="w-2 h-8 bg-accent rounded-full" />
             General Data
           </h3>
-          <dl className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 md:gap-x-12 md:gap-y-8">
-            {technicalItems.map((item, idx) => (
-              <div key={idx} className="flex flex-col group">
-                <dt className="text-sm font-bold uppercase tracking-widest text-primary/40 mb-2 group-hover:text-accent transition-colors">
-                  {item.label}
-                </dt>
-                <dd className="text-lg font-semibold text-text-primary">
-                  {item.value}{' '}
-                  {item.unit && (
-                    <span className="text-sm font-normal text-text-secondary ml-1">
-                      {item.unit}
-                    </span>
-                  )}
-                </dd>
-              </div>
-            ))}
+          <dl className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 md:gap-x-12 md:gap-y-8">
+            {technicalItems.map((item, idx) => {
+              const formatted = formatTechnicalValue(item.value);
+              return (
+                <div key={idx} className="flex flex-col group">
+                  <dt className="text-sm font-bold uppercase tracking-widest text-primary/40 mb-2 group-hover:text-accent transition-colors">
+                    {item.label}
+                  </dt>
+                  <dd className="text-lg font-semibold text-text-primary">
+                    {formatted.isList ? (
+                      <div className="flex flex-wrap gap-2 mt-1">
+                        {formatted.parts.map((p, pIdx) => (
+                          <span
+                            key={pIdx}
+                            className="inline-block px-3 py-1 bg-neutral-light border border-neutral-dark/10 rounded-lg text-xs font-bold text-primary shadow-sm hover:border-accent/40 transition-colors"
+                          >
+                            {p}
+                          </span>
+                        ))}
+                      </div>
+                    ) : (
+                      <>
+                        {item.value}{' '}
+                        {item.unit && (
+                          <span className="text-sm font-normal text-text-secondary ml-1">
+                            {item.unit}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </dd>
+                </div>
+              );
+            })}
           </dl>
         </div>
       )}
@@ -77,7 +96,7 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
             <h3 className="text-2xl font-bold text-primary mb-8 flex items-center gap-3">
               <div className="w-2 h-8 bg-accent rounded-full" />
               {table.voltageLabel !== 'Voltage unknown' &&
-              table.voltageLabel !== 'Spannung unbekannt'
+                table.voltageLabel !== 'Spannung unbekannt'
                 ? table.voltageLabel
                 : 'Technical Specifications'}
             </h3>
@@ -102,9 +121,8 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
               <div className="pointer-events-none absolute right-0 top-0 h-full w-8 bg-gradient-to-l from-white to-transparent z-20 md:hidden" />
               <div
                 id={`voltage-table-${idx}`}
-                className={`overflow-x-auto -mx-5 md:-mx-12 px-5 md:px-12 transition-all duration-500 ease-in-out ${
-                  !isExpanded && hasManyRows ? 'max-h-[400px] overflow-y-hidden' : 'max-h-[none]'
-                }`}
+                className={`overflow-x-auto -mx-5 md:-mx-12 px-5 md:px-12 transition-all duration-500 ease-in-out ${!isExpanded && hasManyRows ? 'max-h-[400px] overflow-y-hidden' : 'max-h-[none]'
+                  }`}
               >
                 <table className="min-w-full border-separate border-spacing-0">
                   <thead>

components/blog/TechnicalGrid.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import Scribble from '@/components/Scribble';
+import { formatTechnicalValue } from '@/lib/utils/technical';
 
 interface TechnicalGridItem {
   label: string;
@@ -18,25 +18,41 @@ export default function TechnicalGrid({ title, items }: TechnicalGridProps) {
         <h3 className="text-2xl font-bold text-text-primary mb-8 flex items-center gap-4 relative">
           <span className="relative inline-block">
             {title}
-            <Scribble 
-              variant="underline" 
-              className="absolute -bottom-2 left-0 w-full h-3 text-accent/40" 
+            <Scribble
+              variant="underline"
+              className="absolute -bottom-2 left-0 w-full h-3 text-accent/40"
             />
           </span>
         </h3>
       )}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {items.map((item, index) => (
-          <div key={index} className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden">
-            <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
-            <span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70">
-              {item.label}
-            </span>
-            <span className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
-              {item.value}
-            </span>
-          </div>
-        ))}
+        {items.map((item, index) => {
+          const formatted = formatTechnicalValue(item.value);
+          return (
+            <div key={index} className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden">
+              <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
+              <span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70">
+                {item.label}
+              </span>
+              <div className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
+                {formatted.isList ? (
+                  <div className="flex flex-wrap gap-2 mt-2">
+                    {formatted.parts.map((p, pIdx) => (
+                      <span
+                        key={pIdx}
+                        className="inline-block px-3 py-1 bg-neutral-light border border-neutral-dark/10 rounded-lg text-xs font-bold text-primary shadow-sm group-hover:border-accent/40 transition-colors"
+                      >
+                        {p}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  item.value
+                )}
+              </div>
+            </div>
+          );
+        })}
       </div>
     </div>
   );