Merge branch 'feature/excel' into feature-ai-search, resolve conflicts

2026-03-21 15:46:12 +01:00
parent 9ba1ddf2a6 b0d66c4192
commit 1ad12a9818
255 changed files with 30803 additions and 1041 deletions
--- a/components/ExcelDownload.tsx
+++ b/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>
+  );
+}