diff --git a/app/[locale]/products/[...slug]/page.tsx b/app/[locale]/products/[...slug]/page.tsx index d1ed843f..4daee5ee 100644 --- a/app/[locale]/products/[...slug]/page.tsx +++ b/app/[locale]/products/[...slug]/page.tsx @@ -5,6 +5,7 @@ import ProductSidebar from '@/components/ProductSidebar'; import ProductTabs from '@/components/ProductTabs'; import ProductTechnicalData from '@/components/ProductTechnicalData'; import RelatedProducts from '@/components/RelatedProducts'; +import DatasheetDownload from '@/components/DatasheetDownload'; import { Badge, Container, Heading, Section } from '@/components/ui'; import { getDatasheetPath } from '@/lib/datasheets'; import { getAllProducts, getProductBySlug } from '@/lib/mdx'; @@ -362,6 +363,19 @@ export default async function ProductPage({ params }: ProductPageProps) { + {/* Datasheet Download Section - Only for Medium Voltage for now */} + {categoryFileSlug === 'medium-voltage-cables' && datasheetPath && ( +
+
+

+ {t('downloadDatasheet')} +

+
+
+ +
+ )} + {/* Structured Data */} + + {/* Animated Background Gradient */} +
+ + {/* Inner Content */} +
+ {/* Icon Container */} + + ); +} diff --git a/components/ProductSidebar.tsx b/components/ProductSidebar.tsx index f61162a2..feae4f3e 100644 --- a/components/ProductSidebar.tsx +++ b/components/ProductSidebar.tsx @@ -3,6 +3,7 @@ import Image from 'next/image'; import { useTranslations } from 'next-intl'; import RequestQuoteForm from '@/components/RequestQuoteForm'; +import DatasheetDownload from '@/components/DatasheetDownload'; import Scribble from '@/components/Scribble'; import { cn } from '@/components/ui/utils'; @@ -64,33 +65,7 @@ export default function ProductSidebar({ productName, productImage, datasheetPat {/* Datasheet Download */} {datasheetPath && ( - -
-
- - - -
-
-

- {t('downloadDatasheet')} -

-

- {t('downloadDatasheetDesc')} -

-
-
- - - -
-
-
+ )}
); diff --git a/lib/datasheets.ts b/lib/datasheets.ts index e049a9e1..c15a35bd 100644 --- a/lib/datasheets.ts +++ b/lib/datasheets.ts @@ -15,6 +15,9 @@ export function getDatasheetPath(slug: string, locale: string): string | null { // Normalize slug: remove common suffixes that might not be in the PDF filename const normalizedSlug = slug.replace(/-hv$|-mv$/, ''); + // Subdirectories to search in + const subdirs = ['', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar']; + // List of patterns to try for the current locale const patterns = [ `${slug}-${locale}.pdf`, @@ -25,10 +28,13 @@ export function getDatasheetPath(slug: string, locale: string): string | null { `${normalizedSlug}-3-${locale}.pdf`, ]; - for (const pattern of patterns) { - const filePath = path.join(datasheetsDir, pattern); - if (fs.existsSync(filePath)) { - return `/datasheets/${pattern}`; + for (const subdir of subdirs) { + for (const pattern of patterns) { + const relativePath = path.join(subdir, pattern); + const filePath = path.join(datasheetsDir, relativePath); + if (fs.existsSync(filePath)) { + return `/datasheets/${relativePath}`; + } } } @@ -42,10 +48,13 @@ export function getDatasheetPath(slug: string, locale: string): string | null { `${normalizedSlug}-2-en.pdf`, `${normalizedSlug}-3-en.pdf`, ]; - for (const pattern of enPatterns) { - const filePath = path.join(datasheetsDir, pattern); - if (fs.existsSync(filePath)) { - return `/datasheets/${pattern}`; + for (const subdir of subdirs) { + for (const pattern of enPatterns) { + const relativePath = path.join(subdir, pattern); + const filePath = path.join(datasheetsDir, relativePath); + if (fs.existsSync(filePath)) { + return `/datasheets/${relativePath}`; + } } } } diff --git a/styles/globals.css b/styles/globals.css index f526a41a..33568ed0 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -37,7 +37,12 @@ --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-gradient-x: gradient-x 15s ease infinite; + @keyframes gradient-x { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; }