92 lines
3.7 KiB
TypeScript
92 lines
3.7 KiB
TypeScript
'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>
|
|
);
|
|
}
|