wip

components/ProductSidebar.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import RequestQuoteForm from '@/components/RequestQuoteForm';
+
+interface ProductSidebarProps {
+  productName: string;
+  productImage?: string;
+  datasheetPath?: string | null;
+}
+
+export default function ProductSidebar({ productName, productImage, datasheetPath }: ProductSidebarProps) {
+  const t = useTranslations('Products');
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // Show sidebar after scrolling down 400px (approx height of hero)
+      if (window.scrollY > 400) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    // Check initial scroll position
+    handleScroll();
+    
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div 
+      className={`hidden lg:block fixed top-32 right-8 z-50 w-[350px] xl:w-[400px] transition-all duration-700 transform ${
+        isVisible ? 'translate-x-0 opacity-100' : 'translate-x-[120%] opacity-0'
+      }`}
+    >
+      <div className="space-y-6">
+        {/* Request Quote Form */}
+        <div className="bg-white rounded-[32px] shadow-2xl border border-neutral-dark/5 overflow-hidden">
+          <div className="bg-primary-dark p-6 text-white relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-32 h-32 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl" />
+            
+            {/* Product Thumbnail */}
+            {productImage && (
+              <div className="relative w-full aspect-[21/9] mb-4 rounded-2xl overflow-hidden bg-white/5 backdrop-blur-xl p-4 border border-white/10 z-10">
+                <Image 
+                  src={productImage} 
+                  alt="" 
+                  fill 
+                  className="object-contain p-1"
+                />
+              </div>
+            )}
+
+            <h3 className="text-xl font-black mb-2 relative z-10 tracking-tight uppercase">{t('requestQuote')}</h3>
+            <p className="text-white/50 text-sm relative z-10 leading-relaxed font-medium">{t('requestQuoteDesc')}</p>
+          </div>
+          <div className="p-6">
+            <RequestQuoteForm productName={productName} />
+          </div>
+        </div>
+
+        {/* Datasheet Download */}
+        {datasheetPath && (
+          <a 
+            href={datasheetPath} 
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block bg-white/90 backdrop-blur-md rounded-[32px] border border-neutral-dark/5 overflow-hidden group hover:bg-white hover:shadow-xl transition-all duration-500 shadow-lg"
+          >
+            <div className="p-6 flex items-center gap-6">
+              <div className="w-14 h-14 rounded-2xl bg-neutral-light shadow-sm flex items-center justify-center flex-shrink-0 group-hover:bg-accent group-hover:text-white transition-all duration-500 text-accent">
+                <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-black text-primary mb-1 uppercase tracking-tight">{t('downloadDatasheet')}</h3>
+                <p className="text-text-secondary text-xs font-medium leading-relaxed">{t('downloadDatasheetDesc')}</p>
+              </div>
+            </div>
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}

components/ProductTabs.tsx

@@ -7,14 +7,17 @@ interface ProductTabsProps {
 
 export default function ProductTabs({ children, technicalData }: ProductTabsProps) {
   return (
-    <div className="space-y-12">
-      <div className="prose max-w-none">
+    <div className="space-y-24">
+      <div className="max-w-none">
         {children}
       </div>
 
       {technicalData && (
-        <div className="pt-8 border-t border-neutral-dark">
-          <h2 className="text-2xl font-bold text-primary-dark mb-6">Technical Specifications</h2>
+        <div className="pt-24 border-t-2 border-neutral-dark/5">
+          <div className="mb-16">
+            <h2 className="text-4xl md:text-5xl font-black text-primary tracking-tighter uppercase mb-4">Technical Specifications</h2>
+            <div className="h-1.5 w-24 bg-accent rounded-full" />
+          </div>
           <div className="not-prose">
             {technicalData}
           </div>

components/ProductTechnicalData.tsx

@@ -25,16 +25,19 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
   const { technicalItems = [], voltageTables = [] } = data;
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-16">
       {technicalItems.length > 0 && (
-        <div className="bg-neutral-light p-6 rounded-lg shadow-sm">
-          <h3 className="text-xl font-semibold mb-4">General Data</h3>
-          <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4">
+        <div className="bg-white p-8 md:p-12 rounded-[32px] shadow-sm border border-neutral-dark/5">
+          <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" />
+            General Data
+          </h3>
+          <dl className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-8">
             {technicalItems.map((item, idx) => (
-              <div key={idx} className="flex flex-col border-b border-neutral-dark pb-2 last:border-0">
-                <dt className="text-sm text-text-secondary">{item.label}</dt>
-                <dd className="text-base font-medium text-text-primary">
-                  {item.value} {item.unit && <span className="text-sm text-text-secondary ml-1">{item.unit}</span>}
+              <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>
             ))}
@@ -43,46 +46,47 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
       )}
 
       {voltageTables.map((table, idx) => (
-        <div key={idx} className="bg-neutral-light p-6 rounded-lg shadow-sm overflow-hidden">
-          <h3 className="text-xl font-semibold mb-4">
+        <div key={idx} className="bg-white p-8 md:p-12 rounded-[32px] shadow-sm border border-neutral-dark/5 overflow-hidden">
+          <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 
               : 'Technical Specifications'}
           </h3>
           
           {table.metaItems.length > 0 && (
-            <dl className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-6 bg-neutral p-4 rounded">
+            <dl className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 mb-12 bg-neutral-light/50 p-8 rounded-2xl border border-neutral-dark/5">
               {table.metaItems.map((item, mIdx) => (
                 <div key={mIdx}>
-                  <dt className="text-xs text-text-secondary uppercase tracking-wider">{item.label}</dt>
-                  <dd className="font-medium">{item.value} {item.unit}</dd>
+                  <dt className="text-[10px] font-black uppercase tracking-[0.2em] text-primary/40 mb-1">{item.label}</dt>
+                  <dd className="font-bold text-primary">{item.value} {item.unit}</dd>
                 </div>
               ))}
             </dl>
           )}
 
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-neutral-dark">
-              <thead className="bg-neutral">
+          <div className="overflow-x-auto -mx-8 md:-mx-12 px-8 md:px-12">
+            <table className="min-w-full border-separate border-spacing-0">
+              <thead>
                 <tr>
-                  <th scope="col" className="px-3 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider sticky left-0 bg-neutral z-10">
-                    Configuration
+                  <th scope="col" className="px-3 py-3 text-left text-[10px] font-black text-primary/40 uppercase tracking-[0.2em] sticky left-0 bg-white z-10 border-b border-neutral-dark/10">
+                    Config.
                   </th>
                   {table.columns.map((col, cIdx) => (
-                    <th key={cIdx} scope="col" className="px-3 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider whitespace-nowrap">
+                    <th key={cIdx} scope="col" className="px-3 py-3 text-left text-[10px] font-black text-primary/40 uppercase tracking-[0.2em] whitespace-nowrap border-b border-neutral-dark/10">
                       {col.label}
                     </th>
                   ))}
                 </tr>
               </thead>
-              <tbody className="bg-white divide-y divide-neutral-dark">
+              <tbody className="divide-y divide-neutral-dark/5">
                 {table.rows.map((row, rIdx) => (
-                  <tr key={rIdx} className="hover:bg-neutral-light transition-colors">
-                    <td className="px-3 py-3 text-sm font-medium text-text-primary sticky left-0 bg-white z-10 whitespace-nowrap">
+                  <tr key={rIdx} className="hover:bg-neutral-light/50 transition-colors group">
+                    <td className="px-3 py-2 text-xs font-bold text-primary sticky left-0 bg-white group-hover:bg-neutral-light/50 z-10 whitespace-nowrap">
                       {row.configuration}
                     </td>
                     {row.cells.map((cell, cellIdx) => (
-                      <td key={cellIdx} className="px-3 py-3 text-sm text-text-secondary whitespace-nowrap">
+                      <td key={cellIdx} className="px-3 py-2 text-xs text-text-secondary whitespace-nowrap">
                         {cell}
                       </td>
                     ))}