Article Title
-Article content with proper spacing.
-My Page Content
- {/* Your content here */} -Left
- Right
-
- Desktop only content
-
-```
-
-### 4. Show on Mobile Only
-```tsx
-
- Mobile only content
-
-```
-
-## Performance Optimization
-
-### 1. Image Optimization
-- Use `quality="auto"` for automatic optimization
-- Implement responsive `src` sets
-- Enable lazy loading
-- Use blur placeholders
-
-### 2. Component Optimization
-- Use `React.memo()` for expensive components
-- Implement proper key props
-- Avoid unnecessary re-renders
-- Use dynamic imports for heavy components
-
-### 3. CSS Optimization
-- Use Tailwind's JIT compiler
-- Minimize custom CSS
-- Leverage CSS containment
-- Implement proper z-index layers
-
-## Browser Support
-
-- **iOS Safari**: 12+
-- **Chrome**: 90+
-- **Firefox**: 88+
-- **Edge**: 90+
-- **Samsung Internet**: 13+
-
-## Accessibility Standards
-
-- **WCAG 2.1 AA** compliance
-- **Keyboard navigation** support
-- **Screen reader** compatibility
-- **Color contrast** 4.5:1 minimum
-- **Focus indicators** visible
-
-## Testing Strategy
-
-### 1. Manual Testing
-- Test on real devices
-- Check all breakpoints
-- Verify touch interactions
-- Test with screen readers
-
-### 2. Automated Testing
-- Use responsive test utilities
-- Validate design rules
-- Generate reports
-- Monitor performance
-
-### 3. Browser DevTools
-- Use device emulation
-- Test network throttling
-- Check accessibility
-- Audit performance
-
-## Migration Guide
-
-### From Static to Responsive
-
-1. **Update components** with responsive props
-2. **Add breakpoint** classes
-3. **Implement fluid** typography
-4. **Optimize images** for responsive
-5. **Test on all** devices
-
-### Legacy Support
-
-For older components:
-```tsx
-// Wrap with ResponsiveWrapper
-
-
-```
-
-**After (Tailwind):**
-```tsx
-
-
-
-
-
-```
-
-### 3. Responsive Design
-All components use mobile-first responsive classes:
-- `sm:`, `md:`, `lg:`, `xl:`, `2xl:` prefixes
-- Fluid typography with `clamp()` in Tailwind config
-- Custom responsive utilities (`.mobile-only`, `.tablet-only`, etc.)
-
-## Benefits
-
-### 1. Performance
-- **Reduced CSS bundle size** from 1,083 lines to 84 lines
-- **Better caching** - Tailwind generates optimized utility classes
-- **No unused CSS** - PurgeCSS removes unused utilities
-
-### 2. Maintainability
-- **Single source of truth** - All design tokens in Tailwind config
-- **Consistent spacing** - Standardized scale across all components
-- **Type safety** - TypeScript integration with design tokens
-
-### 3. Developer Experience
-- **Rapid prototyping** - No need to write custom CSS
-- **IntelliSense support** - Tailwind CSS IntelliSense extension
-- **Visual consistency** - Design system enforced by configuration
-
-### 4. Future-Proofing
-- **Dark mode ready** - Easy to add dark mode support
-- **Design tokens** - Centralized configuration for future updates
-- **Component library** - Reusable, styled components
-
-## Migration Checklist
-
-### ✅ Completed
-- [x] Remove legacy CSS files
-- [x] Clean up globals.scss
-- [x] Update Tailwind configuration
-- [x] Remove inline styles from components
-- [x] Convert WordPress classes to Tailwind
-- [x] Verify all components use Tailwind
-- [x] Remove unused CSS files
-- [x] Install required dependencies (clsx, tailwind-merge)
-
-### ⏭️ Next Steps
-- [ ] Test all pages for visual consistency
-- [ ] Verify responsive design across breakpoints
-- [ ] Test accessibility (focus states, keyboard navigation)
-- [ ] Performance testing (bundle size, load times)
-- [ ] Cross-browser compatibility testing
-
-## Files Modified
-
-### Core Files
-1. **`app/globals.scss`** - Reduced from 84 to essential styles only
-2. **`tailwind.config.js`** - Optimized configuration
-3. **`components/ui/Loading.tsx`** - Removed inline styles
-4. **`components/forms/FormTextarea.tsx`** - Removed inline styles
-5. **`components/forms/FormSelect.tsx`** - Removed inline styles
-
-### Deleted Files
-1. **`styles/design-tokens.scss`** - 370 lines
-2. **`styles/base.scss`** - 713 lines
-3. **`styles/`** directory - Empty, removed
-
-## Performance Impact
-
-### Before Migration
-- **Global CSS**: 1,083 lines
-- **Component CSS**: Multiple files with redundant styles
-- **WordPress classes**: Throughout HTML content
-- **Inline styles**: In multiple components
-
-### After Migration
-- **Global CSS**: 84 lines (92% reduction)
-- **Tailwind utilities**: Generated on-demand
-- **Clean components**: Only Tailwind classes
-- **No inline styles**: All styling via classes
-
-## Conclusion
-
-The migration from WordPress/Salient to Tailwind CSS has been completed successfully. The application now uses a modern, maintainable, and performant styling architecture that:
-
-1. **Eliminates 1,083 lines** of redundant CSS
-2. **Uses a consistent design system** via Tailwind config
-3. **Provides better developer experience** with utility-first classes
-4. **Ensures responsive design** across all devices
-5. **Maintains WordPress compatibility** for legacy content
-
-The new architecture is ready for future development and scaling, with a clean separation between design tokens, component styles, and global utilities.
\ No newline at end of file
diff --git a/WORDPRESS_SHORTCODE_FIX_SUMMARY.md b/WORDPRESS_SHORTCODE_FIX_SUMMARY.md
deleted file mode 100644
index 3ecf4c01..00000000
--- a/WORDPRESS_SHORTCODE_FIX_SUMMARY.md
+++ /dev/null
@@ -1,210 +0,0 @@
-# WordPress Shortcode & Image Handling Fix - Complete Summary
-
-## Overview
-Successfully enhanced the ContentRenderer and html-compat.ts to properly handle WordPress shortcodes and ensure all images display correctly with Next.js Image optimization.
-
-## ✅ Completed Tasks
-
-### 1. Enhanced Shortcode Processing in `lib/html-compat.ts`
-
-**Added comprehensive shortcode conversion functions:**
-- `processVcRowShortcodes()` - Converts `[vc_row]` to flex containers with background support
-- `processVcColumnShortcodes()` - Converts `[vc_column]` to responsive width classes
-- `processVcColumnTextShortcodes()` - Converts `[vc_column_text]` to prose styling
-- `processVcImageShortcodes()` - Converts `[vc_single_image]` to img tags with data attributes
-- `processVcButtonShortcodes()` - Converts `[vc_btn]` to styled buttons
-- `processVcSeparatorShortcodes()` - Converts `[vc_separator]` to HR elements
-- `processVcVideoShortcodes()` - Converts `[vc_video]` to video elements
-- `processBackgroundShortcodes()` - Handles background image/video attributes
-
-**Key Features:**
-- ✅ Parses shortcode attributes (bg_image, bg_color, color_overlay, etc.)
-- ✅ Converts to Tailwind classes and inline styles
-- ✅ Handles complex attributes like gradients, overlays, and video backgrounds
-- ✅ Supports Salient/Visual Composer specific attributes
-
-### 2. Enhanced ContentRenderer in `components/content/ContentRenderer.tsx`
-
-**Updated image handling:**
-- ✅ Uses `getMediaById()` and `getMediaByUrl()` from data layer
-- ✅ Converts WordPress image IDs to local paths
-- ✅ Properly dimensions images using media metadata
-- ✅ Uses Next.js Image component with optimization
-- ✅ Handles external images with regular img tags
-
-**Enhanced HTML parsing:**
-- ✅ Added `parseStyleString()` helper for inline styles
-- ✅ Support for video elements with sources
-- ✅ Background image/video handling with data attributes
-- ✅ Color overlay support with opacity
-- ✅ Parallax background support
-- ✅ Style prop conversion from string to object
-
-**Safe element rendering:**
-- ✅ Only allows safe HTML tags and attributes
-- ✅ Uses Next.js Link for internal links
-- ✅ External links open in new tabs with security attributes
-- ✅ Proper error handling for missing media
-
-### 3. Integration with Data Layer
-
-**Image URL replacement:**
-- ✅ Uses `getAssetMap()` for bulk URL replacement
-- ✅ Falls back to `getMediaByUrl()` for individual images
-- ✅ Handles both full URLs and relative paths
-- ✅ Supports WordPress upload directory structure
-
-### 4. Test Page Creation
-
-**Created comprehensive test page:**
-- ✅ `app/[locale]/example/components-demo/page.tsx`
-- ✅ Tests all shortcode types
-- ✅ Tests image handling with real media IDs
-- ✅ Tests background images and overlays
-- ✅ Tests button styles and layouts
-- ✅ Tests typography and spacing
-
-## 🎯 WordPress Shortcodes Now Supported
-
-### Layout Shortcodes
-- `[vc_row]` → `
-
-
-
- Title
-Content
- -`
-- `[vc_column width="6"]` → `
`
-- `[vc_column_text]` → `
`
-
-### Background & Styling
-- `bg_image="1234"` → Background image from media library
-- `bg_color="#ffffff"` → Background color
-- `color_overlay="#000000"` → Dark overlay with opacity
-- `enable_gradient="true"` → Gradient backgrounds
-- `top_padding="4%"` → Padding styles
-
-### Content Elements
-- `[vc_btn color="primary" title="Click" link="#"]` → Styled buttons
-- `[vc_single_image src="1234" align="center"]` → Next.js Image
-- `[vc_separator color="primary"]` → Styled HR
-- `[vc_video mp4="url" webm="url"]` → Video backgrounds
-
-### Image Handling
-- ✅ WordPress media IDs → local paths
-- ✅ Automatic dimensions from metadata
-- ✅ Next.js Image optimization
-- ✅ Alignment (left, right, center)
-- ✅ Sizing (thumbnail, medium, large, full)
-
-## 🔧 Technical Implementation Details
-
-### Shortcode Processing Flow
-1. **Input**: WordPress HTML with shortcodes
-2. **processHTML()**: Calls enhanced shortcode processor
-3. **Shortcode conversion**: Converts to HTML with data attributes
-4. **Asset replacement**: URLs → local paths
-5. **Class conversion**: WordPress → Tailwind classes
-6. **HTML parsing**: Safe React element creation
-7. **Output**: Clean React components
-
-### Image Processing Flow
-1. **Detect**: `data-wp-image-id` or src attributes
-2. **Lookup**: `getMediaById()` or `getMediaByUrl()`
-3. **Extract**: localPath, width, height, alt
-4. **Render**: Next.js Image with proper props
-5. **Fallback**: Regular img for external URLs
-
-### Background Processing
-1. **Data attributes**: `data-bg-image`, `data-video-bg`
-2. **Style generation**: Inline styles for backgrounds
-3. **Overlay handling**: Absolute positioned overlay divs
-4. **Video backgrounds**: Auto-playing muted videos
-5. **Parallax**: CSS classes for scroll effects
-
-## 📁 Files Modified
-
-### Core Files
-- `lib/html-compat.ts` - Enhanced shortcode processing
-- `components/content/ContentRenderer.tsx` - Enhanced rendering
-- `lib/data.ts` - Existing data layer (used by ContentRenderer)
-
-### Test Files
-- `app/[locale]/example/components-demo/page.tsx` - Comprehensive test page
-
-## ✅ Build Verification
-
-The project builds successfully with:
-```
-✓ Build completed
-✓ All routes generated
-✓ No TypeScript errors in production build
-✓ Components compiled correctly
-```
-
-## 🎨 Visual Results
-
-### Before Fix
-- ❌ Shortcodes displayed as raw text
-- ❌ Images broken or missing
-- ❌ No proper styling
-- ❌ No background support
-
-### After Fix
-- ✅ Shortcodes converted to proper HTML
-- ✅ Images display with Next.js optimization
-- ✅ Tailwind styling applied
-- ✅ Backgrounds, overlays, gradients work
-- ✅ Buttons styled correctly
-- ✅ Layouts responsive
-
-## 🚀 Usage Examples
-
-### Basic Usage
-```tsx
-import { ContentRenderer } from '@/components/content/ContentRenderer';
-
-',
- to: ['info@klz-cables.com'],
- subject: locale === 'de' ? 'Neue Kontaktanfrage' : 'New Contact Inquiry',
- html: `
-
- {
- const locale = (params.locale as string) || 'en';
- const post = getPostBySlug(params.slug, locale as 'en' | 'de');
-
- if (!post) {
- return {
- title: 'Post not found',
- };
- }
-
- const site = getSiteInfo();
-
- // Get featured image URL if available
- let featuredImageUrl: string | undefined;
- if (post.featuredImage) {
- const media = getMediaById(post.featuredImage);
- if (media) {
- featuredImageUrl = media.localPath;
- }
- }
-
- return {
- title: `${post.title} | ${site.title}`,
- description: post.excerptHtml || undefined,
- alternates: {
- canonical: getLocalizedPath(`/blog/${post.slug}`, locale as 'en' | 'de'),
- languages: {
- 'en': `/en/blog/${post.slug}`,
- 'de': `/de/blog/${post.slug}`,
- },
- },
- openGraph: {
- title: post.title,
- description: post.excerptHtml || undefined,
- type: 'article',
- locale,
- publishedTime: post.datePublished,
- modifiedTime: post.updatedAt,
- ...(featuredImageUrl && {
- images: [{ url: featuredImageUrl, alt: post.title }],
- }),
- },
- };
-}
-
-export async function generateStaticParams() {
- const postsEN = getPostsByLocale('en');
- const postsDE = getPostsByLocale('de');
-
- const enParams = postsEN.map((post: any) => ({
- slug: post.slug,
- locale: 'en',
- }));
-
- const deParams = postsDE.map((post: any) => ({
- slug: post.slug,
- locale: 'de',
- }));
-
- return [...enParams, ...deParams];
-}
-
-export default async function BlogDetailPage({ params }: PageProps) {
- const locale = (params.locale as string) || 'en';
- const post = getPostBySlug(params.slug, locale as 'en' | 'de');
-
- if (!post) {
- notFound();
- }
-
- // Content is already processed during data export
-
- return (
- <>
-
-
-
- {/* Locale Switcher */}
- {
- const locale = (params?.locale as string) || 'en';
- const site = getSiteInfo();
- const title = t('blog.title', locale as 'en' | 'de');
- const description = t('blog.description', locale as 'en' | 'de');
-
- return {
- title: `${title} | ${site.title}`,
- description,
- alternates: {
- canonical: getLocalizedPath('/blog', locale as 'en' | 'de'),
- languages: {
- 'en': '/en/blog',
- 'de': '/de/blog',
- },
- },
- openGraph: {
- title: `${title} | ${site.title}`,
- description,
- type: 'website',
- locale,
- },
- };
-}
-
-export default async function BlogPage({ params }: PageProps) {
- const locale = (params?.locale as string) || 'en';
- const posts = getPostsByLocale(locale as 'en' | 'de');
- const categories = getCategoriesByLocale(locale as 'en' | 'de');
-
- const title = t('blog.title', locale as 'en' | 'de');
- const description = t('blog.description', locale as 'en' | 'de');
-
- // Get featured posts (first 3)
- const featuredPosts = posts.slice(0, 3);
- // Get remaining posts
- const remainingPosts = posts.slice(3);
-
- return (
- <>
- {
- const { locale } = params;
- const slug = locale === 'de' ? 'kontakt' : 'contact';
-
- const page = await getPageBySlug(slug, locale);
-
- if (!page) {
- return {
- title: 'Contact Not Found',
- };
- }
-
- return {
- title: page.title,
- description: page.excerptHtml || '',
- alternates: {
- languages: {
- de: '/de/kontakt',
- en: '/en/contact',
- },
- },
- };
-}
-
-export default async function ContactPage({ params }: PageProps) {
- const { locale } = params;
- const slug = locale === 'de' ? 'kontakt' : 'contact';
-
- const page = await getPageBySlug(slug, locale);
-
- if (!page) {
- notFound();
- }
-
- // Get featured image if available
- const featuredImage = page.featuredImage ? getMediaById(page.featuredImage) : null;
-
- // Content is already processed during data export
- const contentToDisplay = page.contentHtml && page.contentHtml.trim() !== ''
- ? page.contentHtml
- : page.excerptHtml;
-
- // Breadcrumb items
- const breadcrumbItems = [
- { label: locale === 'de' ? 'Kontakt' : 'Contact' }
- ];
-
- return (
- <>
- ]*>/g, '') : undefined}
- backgroundImage={featuredImage.localPath}
- backgroundAlt={page.title}
- height="md"
- variant="dark"
- overlay={true}
- overlayOpacity={0.5}
- />
- )}
-
- {/* Main Content */}
-
- {!featuredImage && (
-
-
- )}
-
- {/* Content from WordPress */}
- {contentToDisplay && (
-
-
- )}
-
- {/* Contact Form */}
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/app/[locale]/example/components-demo/page.tsx b/app/[locale]/example/components-demo/page.tsx
deleted file mode 100644
index c3a68807..00000000
--- a/app/[locale]/example/components-demo/page.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import { ContentRenderer } from '@/components/content/ContentRenderer';
-import { Section } from '@/components/content/Section';
-import { Container } from '@/components/ui/Container';
-
-// Test content with various WordPress shortcodes and images
-const testContent = `
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/app/[locale]/example/page.tsx b/app/[locale]/example/page.tsx
deleted file mode 100644
index ba74b9f3..00000000
--- a/app/[locale]/example/page.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { Metadata } from 'next';
-import { Container } from '@/components/ui/Container';
-import { Button } from '@/components/ui/Button';
-import { Card, CardHeader, CardBody, CardFooter } from '@/components/ui/Card';
-import { Grid, GridItem } from '@/components/ui/Grid';
-import { Badge } from '@/components/ui/Badge';
-
-export const metadata: Metadata = {
- title: 'Layout Example | KLZ Cables',
- description: 'Example page demonstrating the new layout components',
-};
-
-export default function ExamplePage() {
- return (
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
deleted file mode 100644
index 37c44376..00000000
--- a/app/[locale]/layout.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import '../globals.css';
-import { Layout } from '@/components/layout/Layout';
-import { CookieConsent } from '@/components/CookieConsent';
-
-const inter = Inter({
- subsets: ['latin', 'latin-ext'],
- display: 'swap',
-});
-
-export const metadata: Metadata = {
- title: 'KLZ Cables',
- description: 'Professional cable solutions for industrial applications',
- metadataBase: new URL('https://klz-cables.com'),
- alternates: {
- canonical: '/',
- languages: {
- 'en': '/en',
- 'de': '/de',
- },
- },
- openGraph: {
- title: 'KLZ Cables',
- description: 'Professional cable solutions for industrial applications',
- type: 'website',
- locale: 'en',
- siteName: 'KLZ Cables',
- },
-};
-
-export default function LocaleLayout({
- children,
- params: { locale },
-}: {
- children: React.ReactNode;
- params: { locale: string };
-}) {
- return (
- <>
-
- {children}
-
- {
- const { locale, slug = 'home' } = params;
-
- // Map root path to actual home page slugs
- const homeSlugs: Record = {
- 'en': 'corporate-3-landing-2',
- 'de': 'start'
- };
-
- const actualSlug = slug === 'home' ? homeSlugs[locale] || 'home' : slug;
- const page = await getPageBySlug(actualSlug, locale);
-
- if (!page) {
- return {
- title: 'Page Not Found',
- };
- }
-
- return {
- title: page.title,
- description: page.excerptHtml || '',
- alternates: {
- languages: {
- de: slug === 'home' ? '/de' : `/de/${slug}`,
- en: slug === 'home' ? '/en' : `/en/${slug}`,
- },
- },
- };
-}
-
-export default async function Page({ params }: PageProps) {
- const { locale, slug = 'home' } = params;
-
- // Map root path to actual home page slugs
- const homeSlugs: Record = {
- 'en': 'corporate-3-landing-2',
- 'de': 'start'
- };
-
- const actualSlug = slug === 'home' ? homeSlugs[locale] || 'home' : slug;
- const page = await getPageBySlug(actualSlug, locale);
-
- if (!page) {
- notFound();
- }
-
- // Special handling for home page vs other pages
- const isHomePage = slug === 'home' || actualSlug === 'corporate-3-landing-2' || actualSlug === 'start';
-
- if (isHomePage) {
- // HOME PAGE: Render content directly without additional wrappers
- // The content already contains full vc_row structures with backgrounds
- return (
- <>
-
-
-
-
-
- );
- }
-
- // STANDARD PAGES: Use the existing layout with hero and containers
- const contentToDisplay = page.contentHtml || page.excerptHtml;
- const featuredImage = page.featuredImage ? getMediaById(page.featuredImage) : null;
-
- return (
- <>
-
-
- )}
-
- {/* Main Content */}
-
- {/* Title - only show if no featured image */}
- {!featuredImage && (
-
-
- )}
-
- {/* Content with pattern parsing */}
- {contentToDisplay && (
-
-
- )}
-
-
- {/* Locale Switcher */}
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/app/[locale]/product-category/[slug]/page.tsx b/app/[locale]/product-category/[slug]/page.tsx
deleted file mode 100644
index 108def5f..00000000
--- a/app/[locale]/product-category/[slug]/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { notFound } from 'next/navigation'
-import { getAllCategories, getProductsByCategorySlugWithExcel } from '@/lib/data'
-import { ProductList } from '@/components/ProductList'
-import { Metadata } from 'next'
-
-interface PageProps {
- params: {
- slug: string;
- locale: string;
- };
-}
-
-export async function generateMetadata({ params }: PageProps): Promise {
- const categories = getAllCategories()
- const category = categories.find(c => c.slug === params.slug && c.locale === params.locale)
-
- if (!category) {
- return {
- title: 'Category not found',
- }
- }
-
- return {
- title: category.name,
- description: category.description || `Products in ${category.name}`
- }
-}
-
-export default async function ProductCategoryPage({ params }: PageProps) {
- const categories = getAllCategories()
- const category = categories.find(c => c.slug === params.slug && c.locale === params.locale)
-
- if (!category) {
- notFound()
- }
-
- const products = getProductsByCategorySlugWithExcel(params.slug, params.locale)
-
- return (
- {
- const locale = (params.locale as string) || 'en';
- const product = getProductBySlugWithExcel(params.slug, locale as 'en' | 'de');
-
- if (!product) {
- return {
- title: 'Product not found',
- };
- }
-
- const site = getSiteInfo();
-
- return {
- title: `${product.name} | ${site.title}`,
- description: product.shortDescriptionHtml || product.descriptionHtml.substring(0, 160) || '',
- alternates: {
- canonical: getLocalizedPath(`/product/${product.slug}`, locale as 'en' | 'de'),
- languages: {
- 'en': `/en/product/${product.slug}`,
- 'de': `/de/product/${product.slug}`,
- },
- },
- openGraph: {
- title: product.name,
- description: product.shortDescriptionHtml || product.descriptionHtml.substring(0, 160) || '',
- type: 'website',
- locale,
- ...(product.images && product.images.length > 0 && {
- images: product.images.map(img => ({ url: img, alt: product.name })),
- }),
- },
- };
-}
-
-export async function generateStaticParams() {
- const productsEN = getAllProducts();
- const productsDE = getAllProducts();
-
- const enParams = productsEN.filter(p => p.locale === 'en').map((product) => ({
- slug: product.slug,
- locale: 'en',
- }));
-
- const deParams = productsDE.filter(p => p.locale === 'de').map((product) => ({
- slug: product.slug,
- locale: 'de',
- }));
-
- return [...enParams, ...deParams];
-}
-
-export default async function ProductDetailPage({ params }: PageProps) {
- const locale = (params.locale as string) || 'en';
- const product = getProductBySlugWithExcel(params.slug, locale as 'en' | 'de');
-
- if (!product) {
- notFound();
- }
-
- // Content is already processed during data export
- const processedDescription = product.descriptionHtml || '';
- const processedShortDescription = product.shortDescriptionHtml || '';
-
- // Get related products (same category)
- const allProducts = getAllProducts();
- const relatedProducts = allProducts
- .filter((p: any) =>
- p.locale === locale &&
- p.slug !== product.slug &&
- p.categories?.some((cat: any) => product.categories?.some((pc: any) => pc.slug === cat.slug))
- )
- .slice(0, 4);
-
- // Prepare technical data for display
- const hasExcelData = product.excelConfigurations && product.excelConfigurations.length > 0;
- const hasExcelAttributes = product.excelAttributes && product.excelAttributes.length > 0;
-
- return (
- <>
- ";
- inherits: false;
- initial-value: #0000;
-}
-@property --tw-gradient-via {
- syntax: "";
- inherits: false;
- initial-value: #0000;
-}
-@property --tw-gradient-to {
- syntax: "";
- inherits: false;
- initial-value: #0000;
-}
-@property --tw-gradient-stops {
- syntax: "*";
- inherits: false;
-}
-@property --tw-gradient-via-stops {
- syntax: "*";
- inherits: false;
-}
-@property --tw-gradient-from-position {
- syntax: "";
- inherits: false;
- initial-value: 0%;
-}
-@property --tw-gradient-via-position {
- syntax: "";
- inherits: false;
- initial-value: 50%;
-}
-@property --tw-gradient-to-position {
- syntax: "";
- inherits: false;
- initial-value: 100%;
-}
-@property --tw-leading {
- syntax: "*";
- inherits: false;
-}
-@property --tw-font-weight {
- syntax: "*";
- inherits: false;
-}
-@property --tw-tracking {
- syntax: "*";
- inherits: false;
-}
-@property --tw-shadow {
- syntax: "*";
- inherits: false;
- initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
- syntax: "*";
- inherits: false;
-}
-@property --tw-shadow-alpha {
- syntax: "";
- inherits: false;
- initial-value: 100%;
-}
-@property --tw-inset-shadow {
- syntax: "*";
- inherits: false;
- initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
- syntax: "*";
- inherits: false;
-}
-@property --tw-inset-shadow-alpha {
- syntax: "";
- inherits: false;
- initial-value: 100%;
-}
-@property --tw-ring-color {
- syntax: "*";
- inherits: false;
-}
-@property --tw-ring-shadow {
- syntax: "*";
- inherits: false;
- initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
- syntax: "*";
- inherits: false;
-}
-@property --tw-inset-ring-shadow {
- syntax: "*";
- inherits: false;
- initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
- syntax: "*";
- inherits: false;
-}
-@property --tw-ring-offset-width {
- syntax: "";
- inherits: false;
- initial-value: 0px;
-}
-@property --tw-ring-offset-color {
- syntax: "*";
- inherits: false;
- initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
- syntax: "*";
- inherits: false;
- initial-value: 0 0 #0000;
-}
-@property --tw-outline-style {
- syntax: "*";
- inherits: false;
- initial-value: solid;
-}
-@property --tw-blur {
- syntax: "*";
- inherits: false;
-}
-@property --tw-brightness {
- syntax: "*";
- inherits: false;
-}
-@property --tw-contrast {
- syntax: "*";
- inherits: false;
-}
-@property --tw-grayscale {
- syntax: "*";
- inherits: false;
-}
-@property --tw-hue-rotate {
- syntax: "*";
- inherits: false;
-}
-@property --tw-invert {
- syntax: "*";
- inherits: false;
-}
-@property --tw-opacity {
- syntax: "*";
- inherits: false;
-}
-@property --tw-saturate {
- syntax: "*";
- inherits: false;
-}
-@property --tw-sepia {
- syntax: "*";
- inherits: false;
-}
-@property --tw-drop-shadow {
- syntax: "*";
- inherits: false;
-}
-@property --tw-drop-shadow-color {
- syntax: "*";
- inherits: false;
-}
-@property --tw-drop-shadow-alpha {
- syntax: "";
- inherits: false;
- initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
- syntax: "*";
- inherits: false;
-}
-@property --tw-backdrop-blur {
- syntax: "*";
- inherits: false;
-}
-@property --tw-backdrop-brightness {
- syntax: "*";
- inherits: false;
-}
-@property --tw-backdrop-contrast {
- syntax: "*";
- inherits: false;
-}
-@property --tw-backdrop-grayscale {
- syntax: "*";
- inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
- syntax: "*";
- inherits: false;
-}
-@property --tw-backdrop-invert {
- syntax: "*";
- inherits: false;
-}
-@property --tw-backdrop-opacity {
- syntax: "*";
- inherits: false;
-}
-@property --tw-backdrop-saturate {
- syntax: "*";
- inherits: false;
-}
-@property --tw-backdrop-sepia {
- syntax: "*";
- inherits: false;
-}
-@property --tw-duration {
- syntax: "*";
- inherits: false;
-}
-@property --tw-ease {
- syntax: "*";
- inherits: false;
-}
-@keyframes spin {
- to {
- transform: rotate(360deg);
- }
-}
-@keyframes pulse {
- 50% {
- opacity: 0.5;
- }
-}
-@keyframes bounce {
- 0%, 100% {
- transform: translateY(-25%);
- animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
- }
- 50% {
- transform: none;
- animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
- }
-}
-
-/* Custom animations for WordPress Salient compatibility */
-@keyframes zoomOutReveal {
- 0% {
- transform: scale(1.1);
- opacity: 0;
- }
- 100% {
- transform: scale(1);
- opacity: 1;
- }
-}
-
-@keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
-
-@keyframes fadeInUp {
- 0% {
- opacity: 0;
- transform: translateY(20px);
- }
- 100% {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-.animate-zoom-out {
- animation: zoomOutReveal 1.5s ease-out forwards;
-}
-
-.animate-fade-in {
- animation: fadeIn 1s ease-out forwards;
-}
-
-.animate-fade-in-up {
- animation: fadeInUp 0.8s ease-out forwards;
-}
-
-/* Parallax effects */
-.parallax-slow {
- transform: translateY(var(--parallax-offset, 0));
- transition: transform 0.1s linear;
-}
-
-.parallax-medium {
- transform: translateY(calc(var(--parallax-offset, 0) * 1.5));
- transition: transform 0.1s linear;
-}
-
-.parallax-fast {
- transform: translateY(calc(var(--parallax-offset, 0) * 2));
- transition: transform 0.1s linear;
-}
-
-/* Drop shadow for text contrast */
-.drop-shadow-lg {
- filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
-}
-
-.drop-shadow-md {
- filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
-}
-
-/* Utility for full-height sections with proper spacing */
-.min-h-screen-safe {
- min-height: 100vh;
- min-height: 100dvh;
-}
-
-/* Flex centering utilities for full-screen positioning */
-.flex-center {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.items-start-justify-center {
- display: flex;
- align-items: flex-start;
- justify-content: center;
-}
-
-.items-end-justify-center {
- display: flex;
- align-items: flex-end;
- justify-content: center;
-}
-
-/* WPBakery/VC Row Compatibility Classes */
-.vc-row {
- display: flex;
- flex-wrap: wrap;
- margin-left: -1rem;
- margin-right: -1rem;
-}
-
-.vc-row.full-width-bg {
- width: 100vw;
- position: relative;
- left: 50%;
- right: 50%;
- margin-left: -50vw;
- margin-right: -50vw;
-}
-
-.vc-row.full-width {
- width: 100%;
-}
-
-.vc-row.full-height {
- min-height: 100vh;
- display: flex;
- align-items: center;
-}
-
-.vc-row.middle-content {
- min-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.vc-row.top-content {
- min-height: 100vh;
- display: flex;
- align-items: flex-start;
-}
-
-.vc-row.bottom-content {
- min-height: 100vh;
- display: flex;
- align-items: flex-end;
-}
-
-.vc-row.equal-height {
- display: flex;
- align-items: stretch;
-}
-
-.vc-row.flex-col {
- flex-direction: column;
-}
-
-.vc-row.text-center {
- text-align: center;
-}
-
-.vc-row.text-right {
- text-align: right;
-}
-
-.vc-row.text-left {
- text-align: left;
-}
-
-.vc-row.text-light {
- color: #ffffff;
-}
-
-.vc-row.text-dark {
- color: #1a1a1a;
-}
-
-.vc-row.overflow-visible {
- overflow: visible;
-}
-
-.vc-row.rounded-none {
- border-radius: 0;
-}
-
-.vc-row.has-video-mp4,
-.vc-row.has-video-webm {
- position: relative;
- overflow: hidden;
-}
-
-.vc-row.parallax-bg {
- position: relative;
- overflow: hidden;
-}
-
-.vc-row.parallax-bg::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-attachment: fixed;
- background-size: cover;
- background-position: center;
- z-index: -1;
-}
-
-/* VC Column Classes */
-.vc-column {
- padding-left: 1rem;
- padding-right: 1rem;
- flex: 1;
- min-width: 0;
-}
-
-.vc-column.w-full {
- width: 100%;
- flex: 0 0 100%;
-}
-
-.vc-column.w-1\/2 {
- width: 50%;
- flex: 0 0 50%;
-}
-
-.vc-column.w-1\/3 {
- width: 33.333%;
- flex: 0 0 33.333%;
-}
-
-.vc-column.w-1\/4 {
- width: 25%;
- flex: 0 0 25%;
-}
-
-.vc-column.w-2\/3 {
- width: 66.667%;
- flex: 0 0 66.667%;
-}
-
-.vc-column.w-3\/4 {
- width: 75%;
- flex: 0 0 75%;
-}
-
-/* VC Text Column */
-.vc-column-text {
- width: 100%;
-}
-
-/* VC Separator */
-.vc-separator {
- border-top: 1px solid #e5e7eb;
- margin-top: 1.5rem;
- margin-bottom: 1.5rem;
-}
-
-.vc-separator.border-primary {
- border-color: #0056b3;
-}
-
-.vc-separator.border-secondary {
- border-color: #6c757d;
-}
-
-.vc-separator.border-white {
- border-color: #ffffff;
-}
-
-/* VC Button */
-.vc-btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- padding: 0.5rem 1rem;
- border-radius: 0.375rem;
- font-weight: 600;
- transition: all 0.2s;
- text-decoration: none;
- cursor: pointer;
- border: 2px solid transparent;
-}
-
-.vc-btn.bg-primary {
- background-color: #0056b3;
- color: #ffffff;
-}
-
-.vc-btn.bg-primary:hover {
- background-color: #003d82;
-}
-
-.vc-btn.bg-secondary {
- background-color: #6c757d;
- color: #ffffff;
-}
-
-.vc-btn.bg-secondary:hover {
- background-color: #5a6268;
-}
-
-.vc-btn.border-2 {
- border: 2px solid #0056b3;
- color: #0056b3;
- background: transparent;
-}
-
-.vc-btn.border-2:hover {
- background-color: #0056b3;
- color: #ffffff;
-}
-
-.vc-btn.bg-white {
- background-color: #ffffff;
- color: #1a1a1a;
-}
-
-.vc-btn.bg-white:hover {
- background-color: #f8f9fa;
-}
-
-.vc-btn.px-6 {
- padding-left: 1.5rem;
- padding-right: 1.5rem;
-}
-
-.vc-btn.py-3 {
- padding-top: 0.75rem;
- padding-bottom: 0.75rem;
-}
-
-.vc-btn.text-lg {
- font-size: 1.125rem;
-}
-
-.vc-btn.px-3 {
- padding-left: 0.75rem;
- padding-right: 0.75rem;
-}
-
-.vc-btn.py-1 {
- padding-top: 0.25rem;
- padding-bottom: 0.25rem;
-}
-
-.vc-btn.text-sm {
- font-size: 0.875rem;
-}
-
-.vc-btn.w-full {
- width: 100%;
-}
-
-/* VC Single Image */
-.vc-single-image {
- max-width: 100%;
- height: auto;
- display: block;
-}
-
-.vc-single-image.mx-auto {
- margin-left: auto;
- margin-right: auto;
-}
-
-.vc-single-image.float-left {
- float: left;
- margin-right: 1rem;
- margin-bottom: 1rem;
-}
-
-.vc-single-image.float-right {
- float: right;
- margin-left: 1rem;
- margin-bottom: 1rem;
-}
-
-/* Video Background Container */
-.vc-video-bg {
- position: relative;
- overflow: hidden;
-}
-
-.vc-video-bg video {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- min-width: 100%;
- min-height: 100%;
- width: auto;
- height: auto;
- object-fit: cover;
- z-index: 0;
-}
-
-.vc-video-bg .vc-video-content {
- position: relative;
- z-index: 1;
-}
-
-/* Split Line Heading */
-.split-line-heading {
- text-align: center;
- margin: 2rem 0;
-}
-
-.split-line-heading .split-heading {
- font-size: 2.5rem;
- font-weight: 700;
- line-height: 1.2;
- margin: 0;
-}
-
-.split-line-heading .split-heading .line {
- display: block;
- margin: 0.25rem 0;
-}
-
-.split-line-heading .split-heading .line-separator {
- display: block;
- width: 60px;
- height: 3px;
- background: #0056b3;
- margin: 0.5rem auto;
-}
-
-.split-line-heading.text-left .split-heading .line-separator {
- margin: 0.5rem 0;
- margin-left: 0;
-}
-
-.split-line-heading.text-right .split-heading .line-separator {
- margin: 0.5rem 0;
- margin-right: 0;
-}
-
-/* Responsive adjustments for WPBakery classes */
-@media (max-width: 768px) {
- .vc-row.full-width-bg {
- width: 100%;
- position: static;
- left: auto;
- right: auto;
- margin-left: 0;
- margin-right: 0;
- }
-
- .vc-row.full-height,
- .vc-row.middle-content,
- .vc-row.top-content,
- .vc-row.bottom-content {
- min-height: auto;
- padding: 3rem 0;
- }
-
- .vc-column.w-1\/2,
- .vc-column.w-1\/3,
- .vc-column.w-1\/4,
- .vc-column.w-2\/3,
- .vc-column.w-3\/4 {
- width: 100%;
- flex: 0 0 100%;
- }
-
- .split-line-heading .split-heading {
- font-size: 1.75rem;
- }
-}
-
-/* Additional utility for video background detection */
-.has-video-background {
- position: relative;
- overflow: hidden;
-}
-
-.has-video-background::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.3);
- z-index: 1;
-}
-
-.has-video-background video {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- min-width: 100%;
- min-height: 100%;
- width: auto;
- height: auto;
- object-fit: cover;
- z-index: 0;
-}
-
-.has-video-background .video-content {
- position: relative;
- z-index: 2;
-}
-@layer properties {
- @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
- *, ::before, ::after, ::backdrop {
- --tw-translate-x: 0;
- --tw-translate-y: 0;
- --tw-translate-z: 0;
- --tw-scale-x: 1;
- --tw-scale-y: 1;
- --tw-scale-z: 1;
- --tw-rotate-x: initial;
- --tw-rotate-y: initial;
- --tw-rotate-z: initial;
- --tw-skew-x: initial;
- --tw-skew-y: initial;
- --tw-space-y-reverse: 0;
- --tw-border-style: solid;
- --tw-gradient-position: initial;
- --tw-gradient-from: #0000;
- --tw-gradient-via: #0000;
- --tw-gradient-to: #0000;
- --tw-gradient-stops: initial;
- --tw-gradient-via-stops: initial;
- --tw-gradient-from-position: 0%;
- --tw-gradient-via-position: 50%;
- --tw-gradient-to-position: 100%;
- --tw-leading: initial;
- --tw-font-weight: initial;
- --tw-tracking: initial;
- --tw-shadow: 0 0 #0000;
- --tw-shadow-color: initial;
- --tw-shadow-alpha: 100%;
- --tw-inset-shadow: 0 0 #0000;
- --tw-inset-shadow-color: initial;
- --tw-inset-shadow-alpha: 100%;
- --tw-ring-color: initial;
- --tw-ring-shadow: 0 0 #0000;
- --tw-inset-ring-color: initial;
- --tw-inset-ring-shadow: 0 0 #0000;
- --tw-ring-inset: initial;
- --tw-ring-offset-width: 0px;
- --tw-ring-offset-color: #fff;
- --tw-ring-offset-shadow: 0 0 #0000;
- --tw-outline-style: solid;
- --tw-blur: initial;
- --tw-brightness: initial;
- --tw-contrast: initial;
- --tw-grayscale: initial;
- --tw-hue-rotate: initial;
- --tw-invert: initial;
- --tw-opacity: initial;
- --tw-saturate: initial;
- --tw-sepia: initial;
- --tw-drop-shadow: initial;
- --tw-drop-shadow-color: initial;
- --tw-drop-shadow-alpha: 100%;
- --tw-drop-shadow-size: initial;
- --tw-backdrop-blur: initial;
- --tw-backdrop-brightness: initial;
- --tw-backdrop-contrast: initial;
- --tw-backdrop-grayscale: initial;
- --tw-backdrop-hue-rotate: initial;
- --tw-backdrop-invert: initial;
- --tw-backdrop-opacity: initial;
- --tw-backdrop-saturate: initial;
- --tw-backdrop-sepia: initial;
- --tw-duration: initial;
- --tw-ease: initial;
- }
- }
-}
diff --git a/app/globals.scss b/app/globals.scss
deleted file mode 100644
index 8c6958cc..00000000
--- a/app/globals.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * KLZ Cables Global Styles
- * Minimal global styles + Tailwind CSS
- */
-
-@import "tailwindcss";
-
-/*
- * ESSENTIAL GLOBAL STYLES ONLY
- * All component styles should use Tailwind utilities
- * Design tokens are available via Tailwind config
- */
-
-/* Custom Scrollbar - Essential for UX */
-::-webkit-scrollbar {
- width: 8px;
- height: 8px;
-}
-
-::-webkit-scrollbar-track {
- background: #e9ecef;
-}
-
-::-webkit-scrollbar-thumb {
- background: #0056b3;
- border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: #003d82;
-}
-
-/* Focus Styles for Accessibility */
-*:focus-visible {
- outline: 2px solid #0056b3;
- outline-offset: 2px;
-}
-
-/* Smooth scrolling */
-html {
- scroll-behavior: smooth;
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
- *,
- *::before,
- *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- scroll-behavior: auto !important;
- }
-}
-
-/* Print styles */
-@media print {
- .navbar,
- .cookie-consent,
- .locale-switcher,
- .submit-btn,
- .btn {
- display: none !important;
- }
-
- body {
- background: white;
- color: black;
- }
-
- .container {
- max-width: 100%;
- padding: 0;
- }
-
- a::after {
- content: " (" attr(href) ")";
- }
-}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
deleted file mode 100644
index fc4ccabf..00000000
--- a/app/layout.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import './globals.css';
-
-const inter = Inter({
- subsets: ['latin', 'latin-ext'],
- display: 'swap',
-});
-
-export const metadata: Metadata = {
- title: 'KLZ Cables',
- description: 'Professional cable solutions for industrial applications',
- metadataBase: new URL('https://klz-cables.com'),
- alternates: {
- canonical: '/',
- languages: {
- 'en': '/en',
- 'de': '/de',
- },
- },
- openGraph: {
- title: 'KLZ Cables',
- description: 'Professional cable solutions for industrial applications',
- type: 'website',
- locale: 'en',
- siteName: 'KLZ Cables',
- },
- icons: {
- icon: '/favicon.ico',
- apple: '/apple-touch-icon.png',
- },
-};
-
-export default function RootLayout({
- children,
-}: {
- children: React.ReactNode;
-}) {
- return (
-
-
-
-
-
-
- {children}
-
-
- );
-}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
deleted file mode 100644
index aea70fb1..00000000
--- a/app/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { redirect } from 'next/navigation';
-
-export default function RootPage() {
- // Redirect root path to default locale
- redirect('/en');
-}
\ No newline at end of file
diff --git a/app/robots.ts b/app/robots.ts
deleted file mode 100644
index dfba197a..00000000
--- a/app/robots.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MetadataRoute } from 'next';
-
-export default function robots(): MetadataRoute.Robots {
- const baseUrl = process.env.SITE_URL || 'https://klz-cables.com';
-
- return {
- rules: {
- userAgent: '*',
- allow: '/',
- disallow: [
- '/api/',
- '/admin/',
- '/private/',
- '/wp-admin/',
- '/wp-content/',
- '/wp-includes/',
- ],
- },
- sitemap: `${baseUrl}/sitemap.xml`,
- };
-}
\ No newline at end of file
diff --git a/app/sitemap.ts b/app/sitemap.ts
deleted file mode 100644
index c49a1e8d..00000000
--- a/app/sitemap.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { MetadataRoute } from 'next';
-import { getAllPages, getAllPosts, getAllProducts, getAllCategories } from '../lib/data';
-
-export default async function sitemap(): Promise {
- const baseUrl = process.env.SITE_URL || 'https://klz-cables.com';
- const urls: MetadataRoute.Sitemap = [];
-
- // Add homepage
- urls.push({
- url: baseUrl,
- lastModified: new Date(),
- changeFrequency: 'daily',
- priority: 1,
- });
-
- // Add all pages
- try {
- const pages = await getAllPages();
- pages.forEach(page => {
- urls.push({
- url: `${baseUrl}/${page.slug}`,
- lastModified: new Date(page.updatedAt || Date.now()),
- changeFrequency: 'weekly',
- priority: 0.8,
- });
- });
- } catch (error) {
- console.warn('Could not fetch pages for sitemap:', error);
- }
-
- // Add blog posts
- try {
- const posts = await getAllPosts();
- posts.forEach(post => {
- urls.push({
- url: `${baseUrl}/blog/${post.slug}`,
- lastModified: new Date(post.updatedAt || Date.now()),
- changeFrequency: 'weekly',
- priority: 0.6,
- });
- });
- } catch (error) {
- console.warn('Could not fetch posts for sitemap:', error);
- }
-
- // Add products
- try {
- const products = await getAllProducts();
- products.forEach(product => {
- urls.push({
- url: `${baseUrl}/product/${product.slug}`,
- lastModified: new Date(product.updatedAt || Date.now()),
- changeFrequency: 'monthly',
- priority: 0.5,
- });
- });
- } catch (error) {
- console.warn('Could not fetch products for sitemap:', error);
- }
-
- // Add product categories
- try {
- const categories = await getAllCategories();
- categories.forEach(category => {
- urls.push({
- url: `${baseUrl}/product-category/${category.slug}`,
- lastModified: new Date(Date.now()),
- changeFrequency: 'monthly',
- priority: 0.4,
- });
- });
- } catch (error) {
- console.warn('Could not fetch categories for sitemap:', error);
- }
-
- return urls;
-}
\ No newline at end of file
diff --git a/components/ContactForm.tsx b/components/ContactForm.tsx
deleted file mode 100644
index 18edb051..00000000
--- a/components/ContactForm.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { usePathname } from 'next/navigation';
-import { getDictionary } from '@/lib/i18n';
-import { Card, CardBody, CardHeader, Button } from '@/components/ui';
-import { FormField, FormInput, FormTextarea, FormError, FormSuccess } from '@/components/forms';
-
-interface FormData {
- name: string;
- email: string;
- phone: string;
- subject: string;
- message: string;
-}
-
-export function ContactForm() {
- const pathname = usePathname();
- const locale = pathname.split('/')[1] || 'en';
- const [dict, setDict] = useState({});
- const [formData, setFormData] = useState({
- name: '',
- email: '',
- phone: '',
- subject: '',
- message: '',
- });
-
- const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
- const [errors, setErrors] = useState>({});
-
- // Load dictionary on component mount and when locale changes
- useEffect(() => {
- const loadDict = async () => {
- try {
- const loadedDict = await getDictionary(locale as 'en' | 'de');
- setDict(loadedDict);
- } catch (error) {
- console.error('Error loading dictionary:', error);
- // Set empty dictionary to prevent infinite loading
- setDict({});
- }
- };
- loadDict();
- }, [locale]);
-
- const t = (key: string): string => {
- if (!dict || Object.keys(dict).length === 0) return key;
-
- const keys = key.split('.');
- let value: any = dict;
-
- for (const k of keys) {
- value = value?.[k];
- if (value === undefined) return key;
- }
-
- return value || key;
- };
-
- const validateForm = (): boolean => {
- const newErrors: Partial = {};
-
- if (!formData.name.trim()) {
- newErrors.name = t('contact.errors.nameRequired');
- }
-
- if (!formData.email.trim()) {
- newErrors.email = t('contact.errors.emailRequired');
- } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
- newErrors.email = t('contact.errors.emailInvalid');
- }
-
- if (!formData.message.trim()) {
- newErrors.message = t('contact.errors.messageRequired');
- }
-
- setErrors(newErrors);
- return Object.keys(newErrors).length === 0;
- };
-
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
-
- if (!validateForm()) {
- return;
- }
-
- setStatus('loading');
-
- try {
- const response = await fetch(`/${locale}/api/contact`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({
- ...formData,
- locale,
- }),
- });
-
- if (response.ok) {
- setStatus('success');
- setFormData({
- name: '',
- email: '',
- phone: '',
- subject: '',
- message: '',
- });
- } else {
- setStatus('error');
- }
- } catch (error) {
- console.error('Contact form error:', error);
- setStatus('error');
- }
- };
-
- const handleChange = (e: React.ChangeEvent) => {
- const { name, value } = e.target;
- setFormData(prev => ({
- ...prev,
- [name]: value,
- }));
-
- // Clear error when user starts typing
- if (errors[name as keyof FormData]) {
- setErrors(prev => ({
- ...prev,
- [name]: undefined,
- }));
- }
- };
-
- return (
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/components/CookieConsent.tsx b/components/CookieConsent.tsx
deleted file mode 100644
index b3e6c8cf..00000000
--- a/components/CookieConsent.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { t, getLocaleFromPath } from '@/lib/i18n';
-import { usePathname } from 'next/navigation';
-import { Card, CardBody, CardFooter } from '@/components/ui';
-import { Button } from '@/components/ui';
-
-export function CookieConsent() {
- const [showBanner, setShowBanner] = useState(false);
- const [isMounted, setIsMounted] = useState(false);
- const [isAnimating, setIsAnimating] = useState(false);
- const pathname = usePathname();
- const locale = getLocaleFromPath(pathname);
-
- useEffect(() => {
- setIsMounted(true);
- const consent = localStorage.getItem('cookie-consent');
- if (!consent) {
- // Small delay to ensure smooth entrance animation
- setTimeout(() => {
- setShowBanner(true);
- setIsAnimating(true);
- }, 500);
- }
- }, []);
-
- const handleAccept = () => {
- localStorage.setItem('cookie-consent', 'accepted');
- setIsAnimating(false);
- setTimeout(() => setShowBanner(false), 300);
- };
-
- const handleDecline = () => {
- localStorage.setItem('cookie-consent', 'declined');
- setIsAnimating(false);
- setTimeout(() => setShowBanner(false), 300);
- };
-
- if (!isMounted || !showBanner) {
- return null;
- }
-
- return (
- {fullTitle}
-
-
-
-
- {/* Canonical URL */}
-
-
- {/* Alternate Languages */}
-
-
-
-
- {/* Open Graph */}
-
-
-
-
-
-
-
- {ogImages.map((image, index) => (
-
- ))}
-
- {publishedTime && (
-
- )}
-
- {modifiedTime && (
-
- )}
-
- {authors && authors.length > 0 && (
-
- )}
-
- {/* Twitter Card */}
-
-
-
- {ogImages[0] && (
-
- )}
-
- {/* Site Info */}
-
-
-
- {/* Favicon (placeholder) */}
-
-
-
- );
-}
-
-export function generateSEOMetadata(props: SEOProps) {
- const site = getSiteInfo();
- const fullTitle = props.title === 'Home' ? site.title : `${props.title} | ${site.title}`;
- const description = props.description || site.description;
- const canonicalUrl = `${site.baseUrl}${props.path || '/'}`;
-
- const alternateLocale = props.locale === 'en' ? 'de' : 'en';
- const alternatePath = props.path && props.path !== '/' ? props.path : '';
- const alternateUrl = `${site.baseUrl}/${alternateLocale}${alternatePath}`;
-
- return {
- title: fullTitle,
- description,
- metadataBase: new URL(site.baseUrl),
- alternates: {
- canonical: canonicalUrl,
- languages: {
- [props.locale || 'en']: canonicalUrl,
- [alternateLocale]: alternateUrl,
- },
- },
- openGraph: {
- title: fullTitle,
- description,
- type: props.type || 'website',
- locale: props.locale || 'en',
- siteName: site.title,
- url: canonicalUrl,
- ...(props.images && props.images.length > 0 && {
- images: props.images.map(img => ({ url: img, alt: fullTitle })),
- }),
- ...(props.publishedTime && { publishedTime: props.publishedTime }),
- ...(props.modifiedTime && { modifiedTime: props.modifiedTime }),
- ...(props.authors && { authors: props.authors }),
- },
- twitter: {
- card: 'summary_large_image',
- title: fullTitle,
- description,
- ...(props.images && props.images[0] && { images: [props.images[0]] }),
- },
- authors: props.authors ? props.authors.map(name => ({ name })) : undefined,
- };
-}
\ No newline at end of file
diff --git a/components/cards/BaseCard.tsx b/components/cards/BaseCard.tsx
deleted file mode 100644
index 2f201537..00000000
--- a/components/cards/BaseCard.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-'use client';
-
-import React, { ReactNode, HTMLAttributes, forwardRef } from 'react';
-import Link from 'next/link';
-import { cn } from '@/lib/utils';
-import { Card } from '@/components/ui';
-
-// Base card sizes
-export type CardSize = 'sm' | 'md' | 'lg';
-
-// Base card layouts
-export type CardLayout = 'vertical' | 'horizontal';
-
-// Base card props interface
-export interface BaseCardProps extends Omit, 'title'> {
- /** Card title */
- title?: ReactNode;
- /** Card description/excerpt */
- description?: ReactNode;
- /** Card image URL */
- image?: string;
- /** Card image alt text */
- imageAlt?: string;
- /** Card size */
- size?: CardSize;
- /** Card layout */
- layout?: CardLayout;
- /** Card href/link */
- href?: string;
- /** Card badge/badges */
- badge?: ReactNode;
- /** Card footer content */
- footer?: ReactNode;
- /** Card header content */
- header?: ReactNode;
- /** Loading state */
- loading?: boolean;
- /** Hover effect */
- hoverable?: boolean;
- /** Card variant */
- variant?: 'elevated' | 'flat' | 'bordered';
- /** Image height */
- imageHeight?: 'sm' | 'md' | 'lg' | 'xl';
- /** Children content */
- children?: ReactNode;
-}
-
-// Helper function to get size styles
-const getSizeStyles = (size: CardSize, layout: CardLayout) => {
- const sizeMap = {
- vertical: {
- sm: { container: 'max-w-xs', image: 'h-32', padding: 'p-3' },
- md: { container: 'max-w-sm', image: 'h-48', padding: 'p-4' },
- lg: { container: 'max-w-md', image: 'h-64', padding: 'p-6' },
- },
- horizontal: {
- sm: { container: 'max-w-sm', image: 'h-24 w-24', padding: 'p-3' },
- md: { container: 'max-w-lg', image: 'h-32 w-32', padding: 'p-4' },
- lg: { container: 'max-w-xl', image: 'h-40 w-40', padding: 'p-6' },
- },
- };
-
- return sizeMap[layout][size];
-};
-
-// Helper function to get image height
-const getImageHeight = (height: CardSize | 'sm' | 'md' | 'lg' | 'xl') => {
- const heightMap = {
- sm: 'h-32',
- md: 'h-48',
- lg: 'h-64',
- xl: 'h-80',
- };
- return heightMap[height] || heightMap['md'];
-};
-
-// Skeleton loader component
-const CardSkeleton = ({ layout, size }: { layout: CardLayout; size: CardSize }) => {
- const sizeStyles = getSizeStyles(size, layout);
-
- return (
- (
- (
- {
- title,
- description,
- image,
- imageAlt = '',
- size = 'md',
- layout = 'vertical',
- href,
- badge,
- footer,
- header,
- loading = false,
- hoverable = true,
- variant = 'elevated',
- imageHeight,
- className = '',
- children,
- ...props
- },
- ref
- ) => {
- const sizeStyles = getSizeStyles(size, layout);
-
- // Loading state
- if (loading) {
- return
- {cardContent}
-
-
- );
- }
-
- // Otherwise, just return the card
- return (
-
- {cardContent}
-
- );
- }
-);
-
-BaseCard.displayName = 'BaseCard';
\ No newline at end of file
diff --git a/components/cards/BlogCard.tsx b/components/cards/BlogCard.tsx
deleted file mode 100644
index 11252def..00000000
--- a/components/cards/BlogCard.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-'use client';
-
-import React from 'react';
-import { BaseCard, BaseCardProps, CardSize, CardLayout } from './BaseCard';
-import { Badge, BadgeGroup } from '@/components/ui';
-import { formatDate } from '@/lib/utils';
-import { Post } from '@/lib/data';
-
-// BlogCard specific props
-export interface BlogCardProps extends Omit {
- /** Post data from WordPress */
- post: Post;
- /** Display date */
- showDate?: boolean;
- /** Display categories */
- showCategories?: boolean;
- /** Read more text */
- readMoreText?: string;
- /** Excerpt length */
- excerptLength?: number;
- /** Locale for formatting */
- locale?: string;
-}
-
-// Helper to extract categories from post (mock implementation since Post doesn't have categories)
-const getPostCategories = (post: Post): string[] => {
- // In a real implementation, this would come from the post data
- // For now, return a mock category based on post ID
- return post.id % 2 === 0 ? ['News', 'Updates'] : ['Blog', 'Tips'];
-};
-
-// Helper to get featured image URL
-const getFeaturedImageUrl = (post: Post): string | undefined => {
- // In a real implementation, this would use getMediaById
- // For now, return a placeholder or the featured image if available
- if (post.featuredImage) {
- // This would be resolved through the data layer
- return `/media/${post.featuredImage}.jpg`;
- }
- return undefined;
-};
-
-// Helper to truncate text
-const truncateText = (text: string, length: number): string => {
- if (text.length <= length) return text;
- return text.slice(0, length - 3) + '...';
-};
-
-export const BlogCard: React.FC = ({
- post,
- size = 'md',
- layout = 'vertical',
- showDate = true,
- showCategories = true,
- readMoreText = 'Read More',
- excerptLength = 150,
- locale = 'de',
- className = '',
- ...props
-}) => {
- // Get post data
- const title = post.title;
- const excerpt = post.excerptHtml ? post.excerptHtml.replace(/<[^>]*>/g, '') : '';
- const truncatedExcerpt = truncateText(excerpt, excerptLength);
- const featuredImageUrl = getFeaturedImageUrl(post);
- const categories = showCategories ? getPostCategories(post) : [];
- const date = showDate ? formatDate(post.datePublished, locale === 'de' ? 'de-DE' : 'en-US') : '';
-
- // Build badge component for categories
- const badge = showCategories && categories.length > 0 ? (
-
- {categories.map((category, index) => (
-
- {category}
-
- ))}
-
- ) : null;
-
- // Build header with date
- const header = date ? (
-
- {date}
-
- ) : null;
-
- // Build footer with read more link
- const footer = (
-
- {readMoreText} →
-
- );
-
- // Build description
- const description = truncatedExcerpt ? (
-
- ) : null;
-
- return (
- = (props) => (
- = (props) => (
- = (props) => (
- = (props) => (
-
- {posts.map(post => (
-
-```
-
-### Product Catalog
-```tsx
-import { ProductCard, CardGrid4 } from '@/components/cards';
-
-
- {products.map(product => (
-
-```
-
-### Category Navigation
-```tsx
-import { CategoryCard, CardGridAuto } from '@/components/cards';
-
-
- {categories.map(category => (
-
-```
-
-## Key Benefits
-
-1. **Consistency**: All cards follow the same patterns
-2. **Flexibility**: Multiple sizes, layouts, and variants
-3. **Type Safety**: Full TypeScript support
-4. **Performance**: Optimized with proper loading states
-5. **Accessibility**: Semantic HTML and ARIA support
-6. **Maintainability**: Clean, documented code
-7. **Extensibility**: Easy to add new variants
-8. **Internationalization**: Built-in locale support
-
-## Migration Path
-
-### From ProductList
-```tsx
-// Old
-
- {products.map(product => (
-
-```
-
-## Testing Recommendations
-
-1. **Visual Testing**: Check all sizes and layouts
-2. **Responsive Testing**: Test on mobile, tablet, desktop
-3. **Data Testing**: Test with various data states
-4. **Loading States**: Verify skeleton loaders
-5. **Empty States**: Test with empty arrays
-6. **Link Navigation**: Verify href routing
-7. **Interactive Elements**: Test buttons and hover effects
-
-## Future Enhancements
-
-- [ ] Add animation variants
-- [ ] Support for video backgrounds
-- [ ] Lazy loading with Intersection Observer
-- [ ] Progressive image loading
-- [ ] Custom color schemes
-- [ ] Drag and drop support
-- [ ] Touch gestures for mobile
-- [ ] A/B testing variants
-
-## Documentation
-
-- ✅ Comprehensive README.md
-- ✅ Inline code comments
-- ✅ TypeScript JSDoc comments
-- ✅ Usage examples in CardsExample.tsx
-- ✅ Props documentation
-- ✅ Best practices guide
-
-## Quality Assurance
-
-- ✅ TypeScript compilation
-- ✅ Consistent naming conventions
-- ✅ Proper error handling
-- ✅ Performance considerations
-- ✅ Accessibility compliance
-- ✅ Design system alignment
-
-## Conclusion
-
-The card components are production-ready and provide a solid foundation for displaying WordPress content in a consistent, flexible, and performant way. They integrate seamlessly with the existing codebase and follow all established patterns and best practices.
\ No newline at end of file
diff --git a/components/cards/CardGrid.tsx b/components/cards/CardGrid.tsx
deleted file mode 100644
index 1bed8997..00000000
--- a/components/cards/CardGrid.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-'use client';
-
-import React, { ReactNode } from 'react';
-import { cn } from '@/lib/utils';
-import { LoadingSkeleton } from '@/components/ui';
-
-// CardGrid column options
-export type GridColumns = 1 | 2 | 3 | 4;
-
-// CardGrid gap options
-export type GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-// CardGrid props interface
-export interface CardGridProps {
- /** Card items to render */
- items?: ReactNode[];
- /** Number of columns */
- columns?: GridColumns;
- /** Gap spacing */
- gap?: GridGap;
- /** Loading state */
- loading?: boolean;
- /** Empty state message */
- emptyMessage?: string;
- /** Empty state component */
- emptyComponent?: ReactNode;
- /** Loading skeleton count */
- skeletonCount?: number;
- /** Additional classes */
- className?: string;
- /** Children (alternative to items) */
- children?: ReactNode;
-}
-
-// Helper function to get gap classes
-const getGapClasses = (gap: GridGap): string => {
- const gapMap = {
- xs: 'gap-2',
- sm: 'gap-4',
- md: 'gap-6',
- lg: 'gap-8',
- xl: 'gap-12',
- };
- return gapMap[gap];
-};
-
-// Helper function to get column classes
-const getColumnClasses = (columns: GridColumns): string => {
- const columnMap = {
- 1: 'grid-cols-1',
- 2: 'grid-cols-1 md:grid-cols-2',
- 3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
- 4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
- };
- return columnMap[columns];
-};
-
-// Skeleton loader component
-const GridSkeleton = ({
- count,
- columns,
- gap
-}: {
- count: number;
- columns: GridColumns;
- gap: GridGap;
-}) => {
- const gapClasses = getGapClasses(gap);
- const columnClasses = getColumnClasses(columns);
-
- return (
- = ({
- items,
- columns = 3,
- gap = 'md',
- loading = false,
- emptyMessage,
- emptyComponent,
- skeletonCount = 6,
- className = '',
- children,
-}) => {
- // Use children if provided, otherwise use items
- const content = children || items;
-
- // Loading state
- if (loading) {
- return (
- = (props) => (
- = (props) => (
- = (props) => (
- = ({
- gap = 'md',
- className = '',
- ...props
-}) => {
- const gapClasses = getGapClasses(gap);
-
- return (
-
- {/* Header */}
-
-
- {mockPosts.map(post => (
-
-
-
-
- {/* Product Cards Section */}
-
-
- {mockProducts.map(product => (
-
-
-
- {mockProducts.map(product => (
-
-
-
- {/* Category Cards Section */}
-
-
- {mockCategories.map(category => (
-
-
-
- {mockCategories.map(category => (
-
-
-
-
- {/* Loading States Section */}
-
-
-
- {/* Mixed Content Section */}
-
-
-
-
-
- {/* Usage Examples */}
-
-
-
- {/* Best Practices */}
-
-
-
- );
-};
-
-export default CardsExample;
\ No newline at end of file
diff --git a/components/cards/CategoryCard.tsx b/components/cards/CategoryCard.tsx
deleted file mode 100644
index 802a3e33..00000000
--- a/components/cards/CategoryCard.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-'use client';
-
-import React from 'react';
-import { BaseCard, BaseCardProps, CardSize, CardLayout } from './BaseCard';
-import { Badge, BadgeGroup } from '@/components/ui';
-import { ProductCategory } from '@/lib/data';
-import { cn } from '@/lib/utils';
-
-// CategoryCard specific props
-export interface CategoryCardProps extends Omit {
- /** Category data from WordPress */
- category: ProductCategory;
- /** Display product count */
- showCount?: boolean;
- /** Display description */
- showDescription?: boolean;
- /** Display as icon instead of image */
- useIcon?: boolean;
- /** Icon component (if useIcon is true) */
- icon?: React.ReactNode;
- /** Category type */
- categoryType?: 'product' | 'blog';
- /** Locale for formatting */
- locale?: string;
-}
-
-// Helper to get category image
-const getCategoryImage = (category: ProductCategory): string | undefined => {
- // In a real implementation, this would use getMediaById
- // For now, return a placeholder based on category ID
- if (category.id % 3 === 0) {
- return '/media/6517-medium-voltage-category.webp';
- } else if (category.id % 3 === 1) {
- return '/media/6521-low-voltage-category.webp';
- } else {
- return '/media/10863-klz-directory-2-scaled.webp';
- }
-};
-
-// Helper to get icon for category
-const getCategoryIcon = (category: ProductCategory): React.ReactNode => {
- const iconMap = {
- 1: '🔌', // Low Voltage
- 2: '⚡', // Medium Voltage
- 3: '🏭', // Industrial
- 4: '🏗️', // Construction
- 5: '🏠', // Residential
- };
-
- return iconMap[category.id as keyof typeof iconMap] || '📁';
-};
-
-// Helper to get category color variant
-const getCategoryVariant = (category: ProductCategory): 'primary' | 'secondary' | 'success' | 'info' => {
- const variants = ['primary', 'secondary', 'success', 'info'] as const;
- return variants[category.id % variants.length];
-};
-
-export const CategoryCard: React.FC = ({
- category,
- size = 'md',
- layout = 'vertical',
- showCount = true,
- showDescription = true,
- useIcon = false,
- icon,
- categoryType = 'product',
- locale = 'de',
- className = '',
- ...props
-}) => {
- // Get category data
- const title = category.name;
- const description = showDescription && category.description ?
- category.description.replace(/<[^>]*>/g, '').substring(0, 100) + (category.description.length > 100 ? '...' : '') :
- '';
- const count = showCount ? category.count : 0;
- const image = useIcon ? undefined : getCategoryImage(category);
- const categoryIcon = icon || getCategoryIcon(category);
-
- // Build badge with count
- const badge = showCount && count > 0 ? (
-
- {count} {locale === 'de' ? 'Produkte' : 'Products'}
-
- ) : null;
-
- // Build header with icon
- const header = useIcon ? (
-
- {categoryIcon}
-
- ) : null;
-
- // Build footer with link text
- const footer = (
-
- {locale === 'de' ? 'Anzeigen' : 'View'} →
-
- );
-
- // Build description with count
- const descriptionContent = (
-
- {/* For vertical layout with icon, add icon above title */}
- {useIcon && layout === 'vertical' && (
-
- );
-};
-
-// CategoryCard variations
-export const CategoryCardVertical: React.FC = (props) => (
- = (props) => (
- = (props) => (
- = (props) => (
- = (props) => (
- {
- /** Product data from WordPress */
- product: Product;
- /** Display price */
- showPrice?: boolean;
- /** Display stock status */
- showStock?: boolean;
- /** Display SKU */
- showSku?: boolean;
- /** Display categories */
- showCategories?: boolean;
- /** Display add to cart button */
- showAddToCart?: boolean;
- /** Display view details button */
- showViewDetails?: boolean;
- /** Enable image hover swap */
- enableImageSwap?: boolean;
- /** Locale for formatting */
- locale?: string;
- /** Add to cart handler */
- onAddToCart?: (product: Product) => void;
-}
-
-// Helper to get price display
-const getPriceDisplay = (product: Product) => {
- const { regularPrice, salePrice, currency } = product;
-
- if (salePrice && salePrice !== regularPrice) {
- return {
- current: salePrice,
- original: regularPrice,
- isOnSale: true,
- formatted: `${salePrice} ${currency} ~~${regularPrice} ${currency}~~`
- };
- }
-
- return {
- current: regularPrice,
- original: null,
- isOnSale: false,
- formatted: `${regularPrice} ${currency}`
- };
-};
-
-// Helper to get stock status
-const getStockStatus = (stockStatus: string, locale: string = 'de') => {
- const statusMap = {
- instock: {
- text: locale === 'de' ? 'Auf Lager' : 'In Stock',
- variant: 'success' as const,
- },
- outofstock: {
- text: locale === 'de' ? 'Nicht auf Lager' : 'Out of Stock',
- variant: 'error' as const,
- },
- onbackorder: {
- text: locale === 'de' ? 'Nachbestellung' : 'On Backorder',
- variant: 'warning' as const,
- },
- };
-
- return statusMap[stockStatus as keyof typeof statusMap] || statusMap.outofstock;
-};
-
-// Helper to get product image
-const getProductImage = (product: Product, index: number = 0): string | undefined => {
- if (product.images && product.images.length > index) {
- return product.images[index];
- }
- if (product.featuredImage) {
- return product.featuredImage;
- }
- return undefined;
-};
-
-export const ProductCard: React.FC = ({
- product,
- size = 'md',
- layout = 'vertical',
- showPrice = true,
- showStock = true,
- showSku = false,
- showCategories = true,
- showAddToCart = true,
- showViewDetails = false,
- enableImageSwap = true,
- locale = 'de',
- onAddToCart,
- className = '',
- ...props
-}) => {
- const [currentImageIndex, setCurrentImageIndex] = useState(0);
-
- // Get product data
- const title = product.name;
- const description = product.shortDescriptionHtml ?
- product.shortDescriptionHtml.replace(/<[^>]*>/g, '').substring(0, 100) + '...' :
- '';
- const primaryImage = getProductImage(product, currentImageIndex);
- const priceInfo = showPrice ? getPriceDisplay(product) : null;
- const stockInfo = showStock ? getStockStatus(product.stockStatus, locale) : null;
- const categories = showCategories ? product.categories.map(c => c.name) : [];
- const sku = showSku ? product.sku : null;
-
- // Build badge component for categories and stock
- const badge = (
-
- {showStock && stockInfo && (
-
- {stockInfo.text}
-
- )}
- {categories.map((category, index) => (
-
- {category}
-
- ))}
-
- );
-
- // Build header with SKU
- const header = sku ? (
-
- SKU: {sku}
-
- ) : null;
-
- // Build price display
- const priceDisplay = priceInfo ? (
- = (props) => (
- = (props) => (
- = (props) => (
- = (props) => (
- console.log('Added:', p.name)}
-/>
-```
-
-### Category Grid
-
-```tsx
-import { CategoryCard, CardGrid4 } from '@/components/cards';
-
-
- {categories.map(category => (
-
-```
-
-### Mixed Content Grid
-
-```tsx
-import { BlogCard, ProductCard, CategoryCard, CardGridAuto } from '@/components/cards';
-
-
-
-```
-
-## Integration with WordPress Data
-
-All cards are designed to work with the WordPress data structures from `lib/data.ts`:
-
-```tsx
-import { getPostsForLocale, getProductsForLocale, getCategoriesForLocale } from '@/lib/data';
-
-// Get data
-const posts = getPostsForLocale('de');
-const products = getProductsForLocale('de');
-const categories = getCategoriesForLocale('de');
-
-// Use in components
-
- {products.map(product => (
-
-```
-
-## Best Practices
-
-1. **Always provide alt text** for images
-2. **Use appropriate sizes**: sm for lists, md for grids, lg for featured
-3. **Enable hover effects** for better UX
-4. **Show loading states** when fetching data
-5. **Handle empty states** gracefully
-6. **Use locale prop** for internationalization
-7. **Integrate with data layer** using types from `lib/data.ts`
-8. **Use CardGrid** for consistent spacing and responsive layouts
-
-## Responsive Design
-
-All components are fully responsive:
-
-- **Mobile**: Single column, stacked layout
-- **Tablet**: 2 columns, optimized spacing
-- **Desktop**: 3-4 columns, full features
-
-## Accessibility
-
-- Semantic HTML structure
-- Proper ARIA labels
-- Keyboard navigation support
-- Screen reader friendly
-- Focus indicators
-
-## Performance
-
-- Optimized with Next.js Image component
-- Lazy loading for images
-- Skeleton loading states
-- Efficient rendering with proper keys
-- Minimal bundle size
-
-## Migration from ProductList
-
-Replace the old ProductList with the new card components:
-
-**Before:**
-```tsx
-import { ProductList } from '@/components/ProductList';
-
-
- {products.map(product => (
-
-```
-
-## TypeScript Support
-
-All components include full TypeScript definitions:
-
-```tsx
-import { BlogCard, BlogCardProps } from '@/components/cards';
-import { Post } from '@/lib/data';
-
-const MyComponent: React.FC = () => {
- const post: Post = { /* ... */ };
-
- return = ({
- quote,
- author,
- role,
- company,
- rating = 0,
- avatar,
- variant = 'default',
- className = ''
-}) => {
- // Generate star rating
- const renderStars = () => {
- if (!rating || rating === 0) return null;
-
- const stars = [];
- const fullStars = Math.floor(rating);
- const hasHalfStar = rating % 1 >= 0.5;
-
- for (let i = 0; i < fullStars; i++) {
- stars.push(
- {
- // This would parse WordPress testimonial patterns
- // For now, returns basic structure
- return {
- quote: content.replace(/<[^>]*>/g, '').trim().substring(0, 300) // Strip HTML, limit length
- };
-}
-
-// Grid wrapper for multiple testimonials
-export const TestimonialGrid: React.FC<{
- testimonials: TestimonialCardProps[];
- columns?: 1 | 2 | 3;
- gap?: 'sm' | 'md' | 'lg';
- className?: string;
-}> = ({ testimonials, columns = 2, gap = 'md', className = '' }) => {
- const gapStyles = {
- sm: 'gap-4',
- md: 'gap-6',
- lg: 'gap-8'
- };
-
- const columnStyles = {
- 1: 'grid-cols-1',
- 2: 'grid-cols-1 md:grid-cols-2',
- 3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
- };
-
- return (
- = ({
- items,
- separator = '/',
- className = '',
- showHome = true,
- homeLabel = 'Home',
- homeHref = '/',
- collapseMobile = true,
-}) => {
- // Generate schema.org structured data
- const generateSchema = () => {
- const breadcrumbs = [
- ...(showHome ? [{ label: homeLabel, href: homeHref }] : []),
- ...items,
- ].map((item, index) => ({
- '@type': 'ListItem',
- position: index + 1,
- name: item.label,
- ...(item.href && { item: item.href }),
- }));
-
- return {
- '@context': 'https://schema.org',
- '@type': 'BreadcrumbList',
- itemListElement: breadcrumbs,
- };
- };
-
- // Render individual breadcrumb item
- const renderItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {
- const isHome = showHome && index === 0 && item.href === homeHref;
-
- const content = (
-
- {isHome && (
-
-
-
- )}
- {item.icon && {item.icon}}
-
- {item.label}
-
-
- );
-
- if (!isLast && item.href) {
- return (
-
- {content}
-
- );
- }
-
- return content;
- };
-
- const allItems = [
- ...(showHome ? [{ label: homeLabel, href: homeHref }] : []),
- ...items,
- ];
-
- // Schema.org JSON-LD
- const schema = generateSchema();
-
- return (
- <>
- {/* Schema.org structured data */}
-
-
- {/* Breadcrumbs navigation */}
-
-
- );
-};
-
-// Sub-components for variations
-export const BreadcrumbsCompact: React.FC> = ({
- items,
- separator = '›',
- className = '',
- showHome = true,
- homeLabel = 'Home',
- homeHref = '/',
-}) => {
- const allItems = [
- ...(showHome ? [{ label: homeLabel, href: homeHref }] : []),
- ...items,
- ];
-
- return (
-
- );
-};
-
-export const BreadcrumbsSimple: React.FC<{
- items: BreadcrumbItem[];
- className?: string;
-}> = ({ items, className = '' }) => {
- return (
-
- );
-};
-
-export default Breadcrumbs;
\ No newline at end of file
diff --git a/components/content/ContentComponentsExample.tsx b/components/content/ContentComponentsExample.tsx
deleted file mode 100644
index 28e7a388..00000000
--- a/components/content/ContentComponentsExample.tsx
+++ /dev/null
@@ -1,402 +0,0 @@
-/**
- * Content Components Example
- * Demonstrates how to use the content components with WordPress data
- */
-
-import React from 'react';
-import {
- Hero,
- Section,
- SectionHeader,
- SectionContent,
- SectionGrid,
- FeaturedImage,
- ContentRenderer,
- Breadcrumbs,
- ContentBlock,
- RichText,
- Avatar,
- ImageGallery,
-} from './index';
-import { Button, Card, CardHeader, CardBody, CardFooter, Grid } from '../ui';
-import { Page, Post, Product, getMediaById } from '../../lib/data';
-
-// Example: Hero component with WordPress data
-export const ExampleHero: React.FC<{
- page: Page;
-}> = ({ page }) => {
- const featuredMedia = page.featuredImage ? getMediaById(page.featuredImage) : null;
-
- return (
- ]*>/g, '') : undefined}
- backgroundImage={featuredMedia?.localPath}
- backgroundAlt={featuredMedia?.alt || page.title}
- height="lg"
- variant="dark"
- overlay={true}
- overlayOpacity={0.6}
- ctaText="Learn More"
- ctaLink="#content"
- />
- );
-};
-
-// Example: Section component for content blocks
-export const ExampleSection: React.FC<{
- title: string;
- content: string;
- background?: 'default' | 'light' | 'dark';
-}> = ({ title, content, background = 'default' }) => {
- return (
-
-
-
-
- );
-};
-
-// Example: Featured content grid
-export const ExampleContentGrid: React.FC<{
- posts: Post[];
-}> = ({ posts }) => {
- return (
-
-
- {posts.map((post) => {
- const featuredMedia = post.featuredImage ? getMediaById(post.featuredImage) : null;
- return (
-
- {featuredMedia && (
-
-
-
-
-
-
-
-
- );
- })}
-
-
- );
-};
-
-// Example: Product showcase
-export const ExampleProductShowcase: React.FC<{
- product: Product;
-}> = ({ product }) => {
- const images = product.images.map((img) => ({
- src: img,
- alt: product.name,
- }));
-
- return (
-
-
- );
-};
-
-// Example: Breadcrumbs with WordPress page structure
-export const ExampleBreadcrumbs: React.FC<{
- page: Page;
- ancestors?: Page[];
-}> = ({ page, ancestors = [] }) => {
- const items = [
- ...ancestors.map((p) => ({
- label: p.title,
- href: `/${p.locale}${p.path}`,
- })),
- {
- label: page.title,
- },
- ];
-
- return
- {/* Header */}
-
-
-
- {/* Featured Image */}
- {featuredMedia && (
-
- );
-};
-
-// Example: Product category grid
-export const ExampleProductGrid: React.FC<{
- products: Product[];
- category?: string;
-}> = ({ products, category }) => {
- return (
-
-
- );
-};
-
-export default {
- ExampleHero,
- ExampleSection,
- ExampleContentGrid,
- ExampleProductShowcase,
- ExampleBreadcrumbs,
- ExamplePageLayout,
- ExampleBlogPost,
- ExampleProductGrid,
-};
\ No newline at end of file
diff --git a/components/content/ContentRenderer.tsx b/components/content/ContentRenderer.tsx
deleted file mode 100644
index c9488ec4..00000000
--- a/components/content/ContentRenderer.tsx
+++ /dev/null
@@ -1,2118 +0,0 @@
-import React from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { cn } from '../../lib/utils';
-import { processHTML, processShortcodes } from '../../lib/html-compat';
-import { getMediaByUrl, getMediaById, getAssetMap } from '../../lib/data';
-import * as cheerio from 'cheerio';
-
-// Import components for WPBakery parsing
-import { Hero } from './Hero';
-import { Section } from './Section';
-import { Grid } from '../ui/Grid';
-import { Card } from '../ui/Card';
-import { FeaturedImage } from './FeaturedImage';
-import { ContactForm } from '../ContactForm';
-import { Slider, type Slide } from '../ui/Slider';
-import { TestimonialCard, parseWpTestimonial } from '../cards/TestimonialCard';
-import { Icon, parseWpIcon, IconButton, IconFeature } from '../ui/Icon';
-import { Button } from '../ui/Button';
-
-interface ContentRendererProps {
- content: string;
- className?: string;
- sanitize?: boolean;
- processAssets?: boolean;
- convertClasses?: boolean;
- parsePatterns?: boolean; // New prop for WPBakery parsing
- pageSlug?: string; // Optional page slug for page-specific parsing
-}
-
-interface ProcessedImage {
- src: string;
- alt: string;
- width?: number;
- height?: number;
-}
-
-/**
- * ContentRenderer Component
- * Handles rendering of WordPress HTML content with proper sanitization
- * and conversion to modern React components
- */
-export const ContentRenderer: React.FC = ({
- content,
- className = '',
- sanitize = true,
- processAssets = true,
- convertClasses = true,
- parsePatterns = true, // Enable WPBakery parsing by default
-}) => {
- // Process the HTML content
- const processedContent = React.useMemo(() => {
- let html = content;
-
- // Check for raw shortcodes and force processing if detected
- const shortcodeRegex = /\[[^\]]*\]/;
- if (shortcodeRegex.test(html)) {
- html = processShortcodes(html);
- }
-
- if (sanitize) {
- html = processHTML(html);
- }
-
- if (processAssets) {
- html = replaceWordPressAssets(html);
- }
-
- if (convertClasses) {
- html = convertWordPressClasses(html);
- }
-
- return html;
- }, [content, sanitize, processAssets, convertClasses]);
-
- // Parse and render the HTML
- const renderContent = () => {
- if (!processedContent) return null;
-
- // Check if WPBakery patterns should be parsed
- if (parsePatterns && containsWPBakeryPatterns(processedContent)) {
- return parseWPBakery(processedContent);
- }
-
- // Use a parser to convert HTML to React elements
- // For security, we'll use a custom parser that only allows safe elements
- return parseHTMLToReact(processedContent);
- };
-
- return (
-
-
- );
- }
-
- $row.remove();
- return;
- }
-
- // PATTERN 2: Contact Form
- if ($row.find('.frm_forms').length || $row.find('form').length) {
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
-
- // PATTERN 3: Numbered Features with h6 + h4 (Home page style)
- if (colCount === 1 && $row.find('h6').length && $row.find('h4').length) {
- const $cols = $row.find('> .vc-column');
- const features = $cols.map((j, colEl) => {
- const $col = $(colEl);
- const number = $col.find('h6').text().trim();
- const title = $col.find('h4').text().trim();
- const desc = $col.find('p').html() || '';
-
- return (
-
-
- );
-
- $row.remove();
- return;
- }
-
- // PATTERN 4: Numbered Features with h6 + h3 (Terms page style)
- if (colCount === 1 && $row.find('h6').length && $row.find('h3').length) {
- const $cols = $row.find('> .vc-column');
- const features = $cols.map((j, colEl) => {
- const $col = $(colEl);
- const number = $col.find('h6').text().trim();
- const title = $col.find('h3').text().trim();
- const paragraphs = $col.find('p').map((pIdx, pEl) => $(pEl).html() || '').get();
-
- return (
-
- {features}
-
- );
-
- $row.remove();
- return;
- }
-
- // PATTERN 5: Testimonials/Quotes (Team page style)
- const hasQuotes = rowText.includes('„') || rowText.includes('“') ||
- rowText.includes('Expertise') || rowText.includes('Experience');
- const hasTeamStructure = colCount === 1 && $row.find('h1, h2').length && rowText.includes('team');
-
- if (hasQuotes || hasTeamStructure) {
- // Extract testimonial content
- const $h1 = $row.find('h1').first();
- const $h2 = $row.find('h2').first();
- const $p = $row.find('p').first();
-
- const title = $h1.text().trim() || $h2.text().trim();
- const quote = $p.text().trim();
-
- if (quote && (quote.includes('„') || quote.includes('Expertise') || quote.includes('connect energy'))) {
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 6: PDF Download Link
- if ($row.find('a[href$=".pdf"]').length) {
- const $link = $row.find('a[href$=".pdf"]').first();
- const href = $link.attr('href');
- const text = $link.text().trim();
-
- elements.push(
-
-
-
- );
-
- $row.remove();
- return;
- }
-
- // PATTERN 7: Contact Info Block
- if (rowText.includes('@') || rowText.includes('Raiffeisenstraße') || rowText.includes('KLZ Cables')) {
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
-
- // PATTERN 8: Grid/Card Pattern (2-4 columns)
- if (colCount >= 2 && colCount <= 4) {
- // Check if this is a card grid (has titles and optional images)
- const hasCardContent = $cols.toArray().some(col => {
- const $col = $(col);
- return $col.find('h3, h4, h5').length > 0 || $col.find('img').length > 0;
- });
-
- if (hasCardContent) {
- const cards = $cols.map((j, colEl) => {
- const $col = $(colEl);
- const imgSrc = $col.find('img').first().attr('src');
- const titleEl = $col.find('h3, h4, h5').first();
- const title = titleEl.text().trim();
- const desc = $col.find('p').html() || '';
-
- // Remove processed elements to avoid duplication
- const $clone = $col.clone();
- $clone.find('img').remove();
- $clone.find('h3, h4, h5').remove();
- $clone.find('p').first().remove();
- const remainingContent = $clone.html()?.trim();
-
- return (
-
- {imgSrc && (
-
- );
- }).get();
-
- elements.push(
-
-
- {cards}
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 9: Nested Rows (Home page complex structure)
- if ($row.find('.vc-row').length > 0) {
- // This is a container row with nested content
- const innerHtml = $row.html();
- if (innerHtml) {
- elements.push(
-
-
- );
- }
-
- $row.remove();
- return;
- }
-
- // PATTERN 10: Simple Content Row (h3 + p)
- const $h3 = $row.find('h3').first();
- const $ps = $row.find('p');
-
- if ($h3.length && $ps.length && colCount === 1) {
- const title = $h3.text().trim();
- const content = $ps.map((pIdx, pEl) => $(pEl).html() || '').get().join('
'); - - // Calculate overlay opacity - const overlayOpacityValue = overlayStrength ? parseFloat(overlayStrength) : 0.5; - - elements.push( -
-
- );
-
- $row.remove();
- return;
- }
-
- // PATTERN 11: Empty or whitespace-only rows
- if (!rowText.trim() && colCount === 0) {
- $row.remove();
- return;
- }
-
- // PATTERN 12: Generic content row with background (no specific pattern)
- // This handles rows with backgrounds that don't match other patterns
- if (bgImage || bgColor || colorOverlay || videoMp4 || videoWebm) {
- const overlayOpacityValue = overlayStrength ? parseFloat(overlayStrength) : 0.5;
- const innerHtml = $row.html();
-
- if (innerHtml) {
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 13: Buttons (vc_btn, .btn classes)
- const $buttons = $row.find('a[class*="btn"], a.vc_btn, button.vc_btn');
- if ($buttons.length > 0) {
- const buttons = $buttons.map((btnIdx, btnEl) => {
- const $btn = $(btnEl);
- const text = $btn.text().trim();
- const href = $btn.attr('href');
- const classes = $btn.attr('class') || '';
-
- // Determine variant from classes
- let variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';
- if (classes.includes('btn-outline') || classes.includes('vc_btn-outline')) variant = 'outline';
- if (classes.includes('btn-secondary') || classes.includes('vc_btn-secondary')) variant = 'secondary';
- if (classes.includes('btn-ghost') || classes.includes('vc_btn-ghost')) variant = 'ghost';
-
- // Determine size
- let size: 'sm' | 'md' | 'lg' = 'md';
- if (classes.includes('btn-large') || classes.includes('vc_btn-lg')) size = 'lg';
- if (classes.includes('btn-small') || classes.includes('vc_btn-sm')) size = 'sm';
-
- return (
-
- );
- }).get();
-
- if (buttons.length > 0) {
- const overlayOpacityValue = overlayStrength ? parseFloat(overlayStrength) : 0.5;
-
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 14: Slider/Carousel (nectar_slider, vc_row with slider class)
- if ($row.hasClass('nectar-slider') || $row.hasClass('vc_row-slider') || $row.find('.nectar-slider').length > 0) {
- const slides: Slide[] = [];
-
- // Look for slide items within the row
- $row.find('.nectar-slide, .vc-slide, .slide-item').each((slideIdx, slideEl) => {
- const $slide = $(slideEl);
- const title = $slide.find('h1, h2, h3, h4').first().text().trim();
- const subtitle = $slide.find('h5, h6').first().text().trim();
- const description = $slide.find('p').first().text().trim();
- const imgSrc = $slide.find('img').first().attr('src') || $slide.attr('data-bg-image');
- const ctaLink = $slide.find('a').first().attr('href');
- const ctaText = $slide.find('a').first().text().trim();
-
- if (title || description || imgSrc) {
- slides.push({
- id: `slide-${i}-${slideIdx}`,
- title,
- subtitle,
- description,
- image: imgSrc ? replaceUrlInAttribute(imgSrc) : undefined,
- ctaLink: ctaLink ? replaceUrlInAttribute(ctaLink) : undefined,
- ctaText: ctaText || 'Learn More'
- });
- }
- });
-
- // Also check for simple content that could be slides
- if (slides.length === 0 && colCount >= 2) {
- $cols.each((colIdx, colEl) => {
- const $col = $(colEl);
- const title = $col.find('h2, h3, h4').first().text().trim();
- const description = $col.find('p').first().text().trim();
- const imgSrc = $col.find('img').first().attr('src');
-
- if (title || description || imgSrc) {
- slides.push({
- id: `slide-${i}-${colIdx}`,
- title,
- description,
- image: imgSrc ? replaceUrlInAttribute(imgSrc) : undefined
- });
- }
- });
- }
-
- if (slides.length > 0) {
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 14: Testimonials (quote blocks, testimonial divs)
- const hasTestimonialQuotes = rowText.includes('„') || rowText.includes('“') ||
- rowText.includes('"') || rowText.includes('Expertise') ||
- rowText.includes('Experience') || rowText.includes('recommend');
-
- const hasTestimonialStructure = $row.find('blockquote, .testimonial, .wpb_testimonial').length > 0;
-
- if (hasTestimonialQuotes || hasTestimonialStructure) {
- const testimonialElements: React.ReactNode[] = [];
-
- // Look for individual testimonial items
- $row.find('.testimonial, .wpb_testimonial, blockquote').each((tIdx, tEl) => {
- const $t = $(tEl);
- const quote = $t.find('p, .quote').first().text().trim() || $t.text().trim();
- const author = $t.find('.author, .name, h4, h5').first().text().trim();
- const role = $t.find('.role, .position').first().text().trim();
- const company = $t.find('.company').first().text().trim();
- const avatar = $t.find('img').first().attr('src');
- const ratingMatch = $t.text().match(/(\d+(\.\d+)?)\s*\/\s*5/);
- const rating = ratingMatch ? parseFloat(ratingMatch[1]) : 0;
-
- if (quote) {
- testimonialElements.push(
-
- {testimonialElements.length === 1 ? (
- testimonialElements[0]
- ) : (
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 15: Icons (vc_icon, .icon classes, font-awesome)
- const $icons = $row.find('[class*="vc_icon"], [class*="fa-"], .icon-item');
- if ($icons.length > 0 && rowText.length < 200) { // Only if minimal text
- const iconFeatures: React.ReactNode[] = [];
-
- // Try to find icon features in columns
- if (colCount >= 2) {
- $cols.each((colIdx, colEl) => {
- const $col = $(colEl);
- const $iconEl = $col.find('[class*="vc_icon"], [class*="fa-"], i[class*="fa-"]').first();
- const iconClass = $iconEl.attr('class') || '';
- const title = $col.find('h3, h4, h5, h6').first().text().trim();
- const description = $col.find('p').first().text().trim();
-
- if (iconClass && (title || description)) {
- const iconProps = parseWpIcon(iconClass);
- iconFeatures.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 16: External Resource Links (vlp-link-container)
- const $vlpLinks = $row.find('.vlp-link-container');
- if ($vlpLinks.length > 0) {
- const linkCards: React.ReactNode[] = [];
-
- $vlpLinks.each((linkIdx, linkEl) => {
- const $link = $(linkEl);
- const href = $link.find('a').first().attr('href') || '';
- const title = $link.find('.vlp-link-title').first().text().trim() || $link.find('a').first().text().trim();
- const summary = $link.find('.vlp-link-summary').first().text().trim();
- const imgSrc = $link.find('img').first().attr('src');
-
- if (href && title) {
- linkCards.push(
-
-
- {imgSrc && (
-
- );
- }
- });
-
- if (linkCards.length > 0) {
- elements.push(
-
-
- {linkCards}
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 17: Technical Specification Tables
- const $tables = $row.find('table');
- if ($tables.length > 0) {
- const tableElements: React.ReactNode[] = [];
-
- $tables.each((tableIdx, tableEl) => {
- const $table = $(tableEl);
- const $rows = $table.find('tr');
-
- // Check if this is a spec table (property/value format)
- const isSpecTable = $rows.length > 2 && $rows.eq(0).text().includes('Property');
-
- if (isSpecTable) {
- const specs: { property: string; value: string }[] = [];
-
- $rows.each((rowIdx, rowEl) => {
- if (rowIdx === 0) return; // Skip header
- const $row = $(rowEl);
- const $cells = $row.find('td');
- if ($cells.length >= 2) {
- specs.push({
- property: $cells.eq(0).text().trim(),
- value: $cells.eq(1).text().trim()
- });
- }
- });
-
- if (specs.length > 0) {
- tableElements.push(
-
- {tableElements}
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 18: FAQ Sections
- const $questions = $row.find('h3, h4').filter((idx, el) => {
- const text = $(el).text().trim();
- return text.endsWith('?') || text.toLowerCase().includes('faq') || text.toLowerCase().includes('question');
- });
-
- if ($questions.length > 0) {
- const faqItems: React.ReactNode[] = [];
-
- $questions.each((qIdx, qEl) => {
- const $q = $(qEl);
- const question = $q.text().trim();
- const $nextP = $q.next('p');
- const answer = $nextP.text().trim();
-
- if (question && answer) {
- faqItems.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 19: Call-to-Action (CTA) Sections
- const $ctaText = $row.text();
- const isCTA = $ctaText.includes('👉') ||
- $ctaText.includes('Contact Us') ||
- $ctaText.includes('Get in touch') ||
- $ctaText.includes('Send your inquiry') ||
- ($row.find('a[href*="contact"]').length > 0 && $row.find('h2, h3').length > 0);
-
- if (isCTA && colCount <= 2) {
- const $title = $row.find('h2, h3').first();
- const $desc = $row.find('p').first();
- const $button = $row.find('a').first();
-
- const title = $title.text().trim();
- const description = $desc.text().trim();
- const buttonText = $button.text().trim() || 'Contact Us';
- const buttonHref = $button.attr('href') || '/contact';
-
- if (title) {
- const overlayOpacityValue = overlayStrength ? parseFloat(overlayStrength) : 0.5;
-
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 20: Quote/Blockquote Sections
- const $blockquote = $row.find('blockquote').first();
- if ($blockquote.length > 0 && colCount === 1) {
- const quote = $blockquote.text().trim();
- const $cite = $blockquote.find('cite');
- const author = $cite.text().trim();
-
- if (quote) {
- const overlayOpacityValue = overlayStrength ? parseFloat(overlayStrength) : 0.5;
-
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 21: Numbered List with Icons
- const $listItems = $row.find('li');
- if ($listItems.length >= 3 && $row.find('i[class*="fa-"]').length > 0) {
- const items: React.ReactNode[] = [];
-
- $listItems.each((liIdx, liEl) => {
- const $li = $(liEl);
- const $icon = $li.find('i[class*="fa-"]').first();
- const iconClass = $icon.attr('class') || '';
- const text = $li.text().trim().replace(/\s+/g, ' ');
-
- if (text) {
- const iconProps = parseWpIcon(iconClass);
- items.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 22: Video Background Row (nectar-video-wrap or data-video-bg)
- if (hasVideoBg) {
- const overlayOpacityValue = overlayStrength ? parseFloat(overlayStrength) : 0.5;
- const innerHtml = $row.html();
-
- if (innerHtml) {
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // PATTERN 23: Video Embed with Text
- const $video = $row.find('video').first();
- if ($video.length > 0 && colCount === 1) {
- const videoSrc = $video.attr('src') || $video.find('source').first().attr('src');
- const $title = $row.find('h2, h3').first();
- const $desc = $row.find('p').first();
-
- if (videoSrc) {
- elements.push(
-
-
- );
-
- $row.remove();
- return;
- }
- }
-
- // FALLBACK: Generic section with nested content
- const innerHtml = $row.html();
- if (innerHtml) {
- elements.push(
-
-
- );
- }
-
- // Remove processed row to avoid duplication
- $row.remove();
- });
-
- // Handle any remaining loose content
- const remainingHtml = $.html().trim();
- if (remainingHtml) {
- elements.push(
- 
- );
- }
-
- // For local images, use Next.js Image component
- // Note: Next.js Image doesn't support srcSet prop, it handles optimization automatically
- return (
- = {
- // Salient/Vc_row classes - PRESERVED for pattern parsing
- // 'vc-row': 'flex flex-wrap -mx-4', // REMOVED - handled by parseWPBakery
- // 'vc_row-fluid': 'w-full', // REMOVED - handled by parseWPBakery
- // 'vc_col-sm-12': 'w-full px-4', // REMOVED - handled by parseWPBakery
- // 'vc_col-md-6': 'w-full md:w-1/2 px-4', // REMOVED - handled by parseWPBakery
- // 'vc_col-md-4': 'w-full md:w-1/3 px-4', // REMOVED - handled by parseWPBakery
- // 'vc_col-md-3': 'w-full md:w-1/4 px-4', // REMOVED - handled by parseWPBakery
- // 'vc_col-lg-6': 'w-full lg:w-1/2 px-4', // REMOVED - handled by parseWPBakery
- // 'vc_col-lg-4': 'w-full lg:w-1/3 px-4', // REMOVED - handled by parseWPBakery
- // 'vc_col-lg-3': 'w-full lg:w-1/4 px-4', // REMOVED - handled by parseWPBakery
-
- // Typography
- 'wpb_wrapper': 'space-y-4',
- 'wpb_text_column': 'prose max-w-none',
- 'wpb_content_element': 'mb-8',
- 'wpb_single_image': 'my-4',
- 'wpb_heading': 'text-2xl font-bold mb-2',
-
- // Alignment
- 'text-left': 'text-left',
- 'text-center': 'text-center',
- 'text-right': 'text-right',
- 'alignleft': 'float-left mr-4 mb-4',
- 'alignright': 'float-right ml-4 mb-4',
- 'aligncenter': 'mx-auto',
-
- // Colors
- 'accent-color': 'text-primary',
- 'primary-color': 'text-primary',
- 'secondary-color': 'text-secondary',
- 'text-color': 'text-gray-800',
- 'light-text': 'text-gray-300',
- 'dark-text': 'text-gray-900',
-
- // Backgrounds
- 'bg-light': 'bg-gray-50',
- 'bg-light-gray': 'bg-gray-100',
- 'bg-dark': 'bg-gray-900',
- 'bg-dark-gray': 'bg-gray-800',
- 'bg-primary': 'bg-primary',
- 'bg-secondary': 'bg-secondary',
- 'bg-white': 'bg-white',
- 'bg-transparent': 'bg-transparent',
-
- // Buttons
- 'btn': 'inline-flex items-center justify-center px-4 py-2 rounded-lg font-semibold transition-colors duration-200',
- 'btn-primary': 'bg-primary text-white hover:bg-primary-dark',
- 'btn-secondary': 'bg-secondary text-white hover:bg-secondary-light',
- 'btn-outline': 'border-2 border-primary text-primary hover:bg-primary hover:text-white',
- 'btn-large': 'px-6 py-3 text-lg',
- 'btn-small': 'px-3 py-1 text-sm',
-
- // Containers
- 'container': 'container mx-auto px-4',
- 'container-fluid': 'w-full px-4',
-
- // Spacing
- 'mt-0': 'mt-0', 'mb-0': 'mb-0',
- 'mt-2': 'mt-2', 'mb-2': 'mb-2',
- 'mt-4': 'mt-4', 'mb-4': 'mb-4',
- 'mt-6': 'mt-6', 'mb-6': 'mb-6',
- 'mt-8': 'mt-8', 'mb-8': 'mb-8',
- 'mt-12': 'mt-12', 'mb-12': 'mb-12',
-
- // WordPress specific
- 'wp-caption': 'figure',
- 'wp-caption-text': 'figcaption text-sm text-gray-600 mt-2',
- 'alignnone': 'block',
- 'size-full': 'w-full',
- 'size-large': 'w-full max-w-3xl',
- 'size-medium': 'w-full max-w-xl',
- 'size-thumbnail': 'w-32 h-32',
- };
-
- let processed = html;
-
- // Replace classes in HTML
- Object.entries(classMap).forEach(([wpClass, twClass]) => {
- // Handle class="..." with the class at the beginning
- const classRegex1 = new RegExp(`class=["']${wpClass}\\s+([^"']*)["']`, 'g');
- processed = processed.replace(classRegex1, (match, rest) => {
- const newClasses = `${twClass} ${rest}`.trim().replace(/\s+/g, ' ');
- return `class="${newClasses}"`;
- });
-
- // Handle class="..." with the class in the middle
- const classRegex2 = new RegExp(`class=["']([^"']*)\\s+${wpClass}\\s+([^"']*)["']`, 'g');
- processed = processed.replace(classRegex2, (match, before, after) => {
- const newClasses = `${before} ${twClass} ${after}`.trim().replace(/\s+/g, ' ');
- return `class="${newClasses}"`;
- });
-
- // Handle class="..." with the class at the end
- const classRegex3 = new RegExp(`class=["']([^"']*)\\s+${wpClass}["']`, 'g');
- processed = processed.replace(classRegex3, (match, before) => {
- const newClasses = `${before} ${twClass}`.trim().replace(/\s+/g, ' ');
- return `class="${newClasses}"`;
- });
-
- // Handle class="..." with only the class
- const classRegex4 = new RegExp(`class=["']${wpClass}["']`, 'g');
- processed = processed.replace(classRegex4, `class="${twClass}"`);
- });
-
- return processed;
-}
-
-/**
- * Get image props from source using the data layer
- * Enhanced to handle asset URL replacement and responsive images
- */
-function getImageProps(src: string): { src: string; width?: number; height?: number; alt?: string } {
- // Check if it's a data attribute for WordPress image ID
- if (src.startsWith('data-wp-image-id:')) {
- const imageId = src.replace('data-wp-image-id:', '');
- const media = getMediaById(parseInt(imageId));
- if (media) {
- return {
- src: media.localPath,
- width: media.width || 800,
- height: media.height || 600,
- alt: media.alt || ''
- };
- }
- }
-
- // Try to find by URL using asset map
- const assetMap = getAssetMap();
-
- // Check exact match
- if (assetMap[src]) {
- const media = getMediaByUrl(src);
- return {
- src: assetMap[src],
- width: media?.width || 800,
- height: media?.height || 600,
- alt: media?.alt || ''
- };
- }
-
- // Check for URL variations
- const variations = [
- src,
- src.replace('https://', 'http://'),
- src.replace('http://', 'https://'),
- src.replace('https://www.', 'https://'),
- src.replace('http://www.', 'http://'),
- src.replace('www.', ''),
- ];
-
- for (const variation of variations) {
- if (assetMap[variation]) {
- const media = getMediaByUrl(variation);
- return {
- src: assetMap[variation],
- width: media?.width || 800,
- height: media?.height || 600,
- alt: media?.alt || ''
- };
- }
- }
-
- // Try to find by filename
- const filename = src.split('/').pop();
- if (filename) {
- for (const [wpUrl, localPath] of Object.entries(assetMap)) {
- if (wpUrl.includes(filename)) {
- const media = getMediaByUrl(wpUrl);
- return {
- src: localPath,
- width: media?.width || 800,
- height: media?.height || 600,
- alt: media?.alt || ''
- };
- }
- }
- }
-
- // Check if it's already a local path
- if (src.startsWith('/media/')) {
- return { src, width: 800, height: 600 };
- }
-
- // Return as-is for external URLs
- return { src, width: 800, height: 600 };
-}
-
-/**
- * Process background attributes and convert to inline styles
- * Enhanced to handle asset URL replacement
- */
-function processBackgroundAttributes(element: HTMLElement): { style?: string; className?: string } {
- const result: { style?: string; className?: string } = {};
- const styles: string[] = [];
- const classes: string[] = [];
-
- // Check for data attributes from shortcodes
- const bgImage = element.getAttribute('data-bg-image');
- const bgVideo = element.getAttribute('data-video-bg');
- const videoMp4 = element.getAttribute('data-video-mp4');
- const videoWebm = element.getAttribute('data-video-webm');
- const parallax = element.getAttribute('data-parallax');
-
- // Handle background image
- if (bgImage) {
- const media = getMediaById(parseInt(bgImage));
- if (media) {
- styles.push(`background-image: url(${media.localPath})`);
- styles.push('background-size: cover');
- styles.push('background-position: center');
- classes.push('bg-cover', 'bg-center');
- }
- }
-
- // Handle video background
- if (bgVideo === 'true' && (videoMp4 || videoWebm)) {
- // This will be handled by a separate video component
- // For now, we'll add a marker class
- classes.push('has-video-background');
- if (videoMp4) element.setAttribute('data-video-mp4', videoMp4);
- if (videoWebm) element.setAttribute('data-video-webm', videoWebm);
- }
-
- // Handle parallax
- if (parallax === 'true') {
- classes.push('parallax-bg');
- }
-
- // Handle inline styles from shortcode attributes
- const colorOverlay = element.getAttribute('color_overlay');
- const overlayStrength = element.getAttribute('overlay_strength');
- const topPadding = element.getAttribute('top_padding');
- const bottomPadding = element.getAttribute('bottom_padding');
-
- if (colorOverlay) {
- const opacity = overlayStrength ? parseFloat(overlayStrength) : 0.5;
- styles.push(`position: relative`);
- classes.push('relative');
-
- // Add overlay as a child element marker
- element.setAttribute('data-color-overlay', colorOverlay);
- element.setAttribute('data-overlay-opacity', opacity.toString());
- }
-
- if (topPadding) {
- styles.push(`padding-top: ${topPadding}`);
- }
-
- if (bottomPadding) {
- styles.push(`padding-bottom: ${bottomPadding}`);
- }
-
- if (styles.length > 0) {
- result.style = styles.join('; ');
- }
-
- if (classes.length > 0) {
- result.className = classes.join(' ');
- }
-
- return result;
-}
-
-/**
- * Replace asset URLs in style strings
- */
-function replaceAssetUrlsInStyle(style: string): string {
- const assetMap = getAssetMap();
-
- return style.replace(/url\(([^)]+)\)/gi, (match, url) => {
- const cleanUrl = url.replace(/^["']|["']$/g, '');
-
- // Check exact match
- if (assetMap[cleanUrl]) {
- return `url(${assetMap[cleanUrl]})`;
- }
-
- // Check variations
- const variations = [
- cleanUrl,
- cleanUrl.replace('https://', 'http://'),
- cleanUrl.replace('http://', 'https://'),
- cleanUrl.replace('https://www.', 'https://'),
- cleanUrl.replace('http://www.', 'http://'),
- cleanUrl.replace('www.', ''),
- ];
-
- for (const variation of variations) {
- if (assetMap[variation]) {
- return `url(${assetMap[variation]})`;
- }
- }
-
- // Check by filename
- const filename = cleanUrl.split('/').pop();
- if (filename) {
- for (const [wpUrl, localPath] of Object.entries(assetMap)) {
- if (wpUrl.includes(filename)) {
- return `url(${localPath})`;
- }
- }
- }
-
- return match;
- });
-}
-
-/**
- * Replace srcset URLs with local paths
- */
-function replaceSrcset(srcset: string): string {
- const assetMap = getAssetMap();
-
- return srcset.split(',').map((src) => {
- const [url, descriptor] = src.trim().split(/\s+/);
-
- // Check exact match
- if (assetMap[url]) {
- return descriptor ? `${assetMap[url]} ${descriptor}` : assetMap[url];
- }
-
- // Check variations
- const variations = [
- url,
- url.replace('https://', 'http://'),
- url.replace('http://', 'https://'),
- url.replace('https://www.', 'https://'),
- url.replace('http://www.', 'http://'),
- url.replace('www.', ''),
- ];
-
- for (const variation of variations) {
- if (assetMap[variation]) {
- return descriptor ? `${assetMap[variation]} ${descriptor}` : assetMap[variation];
- }
- }
-
- // Check by filename
- const filename = url.split('/').pop();
- if (filename) {
- for (const [wpUrl, localPath] of Object.entries(assetMap)) {
- if (wpUrl.includes(filename)) {
- return descriptor ? `${localPath} ${descriptor}` : localPath;
- }
- }
- }
-
- return src;
- }).join(', ');
-}
-
-/**
- * Replace a single URL with local path
- */
-function replaceUrlInAttribute(url: string | null): string {
- if (!url) return '';
-
- const assetMap = getAssetMap();
-
- // Check exact match
- if (assetMap[url]) {
- return assetMap[url];
- }
-
- // Check variations
- const variations = [
- url,
- url.replace('https://', 'http://'),
- url.replace('http://', 'https://'),
- url.replace('https://www.', 'https://'),
- url.replace('http://www.', 'http://'),
- url.replace('www.', ''),
- ];
-
- for (const variation of variations) {
- if (assetMap[variation]) {
- return assetMap[variation];
- }
- }
-
- // Check by filename
- const filename = url.split('/').pop();
- if (filename) {
- for (const [wpUrl, localPath] of Object.entries(assetMap)) {
- if (wpUrl.includes(filename)) {
- return localPath;
- }
- }
- }
-
- return url;
-}
-
-// Sub-components for specific content types
-export const ContentBlock: React.FC<{
- title?: string;
- content: string;
- className?: string;
-}> = ({ title, content, className = '' }) => (
- = ({
- src,
- alt,
- width,
- height,
- aspectRatio = 'auto',
- size = 'md',
- caption,
- priority = false,
- className = '',
- objectFit = 'cover',
- lazy = true,
- responsiveSrc,
- quality = 'auto',
- placeholder = 'empty',
- blurDataURL,
-}) => {
- const hasDimensions = width && height;
- const shouldLazyLoad = !priority && lazy;
-
- // Get responsive image source
- const getResponsiveSrc = () => {
- if (responsiveSrc) {
- if (typeof window === 'undefined') return responsiveSrc.mobile || src;
-
- const viewport = getViewport();
- if (viewport.isMobile && responsiveSrc.mobile) return responsiveSrc.mobile;
- if (viewport.isTablet && responsiveSrc.tablet) return responsiveSrc.tablet;
- if (viewport.isDesktop && responsiveSrc.desktop) return responsiveSrc.desktop;
- }
- return src;
- };
-
- // Get optimal quality
- const getQuality = () => {
- if (quality === 'auto') {
- if (typeof window === 'undefined') return 75;
- const viewport = getViewport();
- return getOptimalImageQuality(viewport);
- }
- return quality;
- };
-
- // Generate responsive sizes attribute
- const getSizes = () => {
- const baseSizes = generateImageSizes();
-
- // Adjust based on component size prop
- switch (size) {
- case 'sm':
- return '(max-width: 640px) 50vw, (max-width: 768px) 33vw, 25vw';
- case 'md':
- return '(max-width: 640px) 75vw, (max-width: 768px) 50vw, 33vw';
- case 'lg':
- return baseSizes;
- case 'xl':
- return '(max-width: 640px) 100vw, (max-width: 768px) 75vw, 50vw';
- case 'full':
- return '100vw';
- default:
- return baseSizes;
- }
- };
-
- const responsiveImageSrc = getResponsiveSrc();
- const optimalQuality = getQuality();
-
- return (
-
-
- {caption}
-
- )}
-
- );
-};
-
-// Sub-components for common image patterns
-export const Avatar: React.FC<{
- src: string;
- alt: string;
- size?: 'sm' | 'md' | 'lg';
- className?: string;
-}> = ({ src, alt, size = 'md', className = '' }) => {
- const sizeClasses = {
- sm: 'w-8 h-8',
- md: 'w-12 h-12',
- lg: 'w-16 h-16',
- }[size];
-
- return (
- = ({
- title,
- subtitle,
- backgroundImage,
- backgroundAlt = '',
- height = 'md',
- variant = 'default',
- ctaText,
- ctaLink,
- ctaVariant = 'primary',
- overlay = true,
- overlayOpacity,
- children,
- className = '',
- backgroundColor,
- colorOverlay,
- overlayStrength,
- enableGradient = false,
- gradientDirection = 'left_to_right',
- colorOverlay2,
- parallaxBg = false,
- parallaxBgSpeed = 'medium',
- bgImageAnimation = 'none',
- topPadding,
- bottomPadding,
- textAlignment = 'center',
- textColor = 'light',
- shapeType,
- scenePosition = 'center',
- fullScreenRowPosition,
- videoBg,
- videoMp4,
- videoWebm,
-}) => {
- const hasBackground = !!backgroundImage;
- const hasCTA = !!ctaText && !!ctaLink;
- const hasColorOverlay = !!colorOverlay;
- const hasGradient = !!enableGradient;
- const hasParallax = !!parallaxBg;
- const hasVideo = !!(videoMp4?.trim()) || !!(videoWebm?.trim());
- const heroRef = useRef(null);
- const videoRef = useRef(null);
-
- // Calculate overlay opacity
- const overlayOpacityValue = overlayOpacity ?? (overlayStrength !== undefined ? overlayStrength : 0.5);
-
- // Get text alignment
- const textAlignClass = {
- left: 'text-left',
- center: 'text-center',
- right: 'text-right',
- }[textAlignment];
-
- // Get text color
- const textColorClass = textColor === 'light' ? 'text-white' : 'text-gray-900';
- const subtitleTextColorClass = textColor === 'light' ? 'text-gray-100' : 'text-gray-600';
-
- // Get gradient direction
- const gradientDirectionClass = {
- 'left_to_right': 'bg-gradient-to-r',
- 'right_to_left': 'bg-gradient-to-l',
- 'top_to_bottom': 'bg-gradient-to-b',
- 'bottom_to_top': 'bg-gradient-to-t',
- }[gradientDirection];
-
- // Get parallax speed
- const parallaxSpeedClass = {
- slow: 'parallax-slow',
- medium: 'parallax-medium',
- fast: 'parallax-fast',
- }[parallaxBgSpeed];
-
- // Get background animation
- const bgAnimationClass = {
- none: '',
- 'zoom-out-reveal': 'animate-zoom-out',
- 'fade-in': 'animate-fade-in',
- }[bgImageAnimation];
-
- // Calculate padding from props
- const customPaddingStyle = {
- paddingTop: topPadding || undefined,
- paddingBottom: bottomPadding || undefined,
- };
-
- // Parallax effect handler
- useEffect(() => {
- if (!hasParallax || !heroRef.current) return;
-
- const handleScroll = () => {
- if (!heroRef.current) return;
-
- const rect = heroRef.current.getBoundingClientRect();
- const viewportHeight = window.innerHeight;
-
- // Calculate offset based on scroll position
- const scrollProgress = (viewportHeight - rect.top) / (viewportHeight + rect.height);
- const offset = scrollProgress * 50; // Max 50px offset
-
- // Apply to CSS variable
- heroRef.current.style.setProperty('--parallax-offset', `${offset}px`);
- };
-
- handleScroll(); // Initial call
- window.addEventListener('scroll', handleScroll, { passive: true });
-
- return () => window.removeEventListener('scroll', handleScroll);
- }, [hasParallax]);
-
- return (
-
- {/* Video Background */}
- {hasVideo && (
-
- );
-};
-
-// Sub-components for more complex hero layouts
-export const HeroContent: React.FC<{
- title: string;
- subtitle?: string;
- children?: React.ReactNode;
- className?: string;
-}> = ({ title, subtitle, children, className = '' }) => (
-
${locale === 'de' ? 'Neue Kontaktanfrage' : 'New Contact Inquiry'}
-${locale === 'de' ? 'Name' : 'Name'}: ${name}
-${locale === 'de' ? 'E-Mail' : 'Email'}: ${email}
-${locale === 'de' ? 'Nachricht' : 'Message'}:
-${message}
--
${locale === 'de' ? 'Gesendet über' : 'Sent via'} KLZ Cables Website
- `, - }); - - if (error) { - console.error('Resend error:', error); - return NextResponse.json( - { error: 'Failed to send email' }, - { status: 500 } - ); - } - - return NextResponse.json( - { success: true, data }, - { status: 200 } - ); - - } catch (error) { - console.error('Contact API error:', error); - return NextResponse.json( - { error: 'Internal server error' }, - { status: 500 } - ); - } -} \ No newline at end of file diff --git a/app/[locale]/blog/[slug]/page.tsx b/app/[locale]/blog/[slug]/page.tsx deleted file mode 100644 index 65af7d78..00000000 --- a/app/[locale]/blog/[slug]/page.tsx +++ /dev/null @@ -1,254 +0,0 @@ -import { notFound } from 'next/navigation'; -import type { Metadata } from 'next'; -import Link from 'next/link'; -import { getPostBySlug, getPostsByLocale, getMediaById, getSiteInfo } from '@/lib/data'; -import { getLocalizedPath } from '@/lib/i18n'; -import { t } from '@/lib/i18n'; -import { SEO } from '@/components/SEO'; -import { LocaleSwitcher } from '@/components/LocaleSwitcher'; -import { ContentRenderer } from '@/components/content/ContentRenderer'; - -interface PageProps { - params: { - slug: string; - locale?: string; - }; -} - -function RelatedPosts({ currentSlug, locale }: { currentSlug: string; locale: 'en' | 'de' }) { - const allPosts = getPostsByLocale(locale); - const currentPost = allPosts.find((p: any) => p.slug === currentSlug); - - if (!currentPost) return null; - - // Get recent posts (excluding current) - const relatedPosts = allPosts - .filter((p: any) => p.slug !== currentSlug) - .slice(0, 3); - - if (relatedPosts.length === 0) return null; - - return ( -
-
- );
-}
-
-export async function generateMetadata({ params }: PageProps): Promise- {t('blog.relatedPosts', locale as 'en' | 'de')} -
-
- {relatedPosts.map((post: any) => (
-
- {post.featuredImage && (() => {
- const media = getMediaById(post.featuredImage);
- return media ? (
-
-
- 
-
- ) : null;
- })()}
-
-
-
- ))}
- - {post.title} -
-
-
-
- {t('blog.readMore', locale as 'en' | 'de')} →
-
-
- {/* Back to blog link */}
-
-
-
- {/* Featured Image */}
- {post.featuredImage && (() => {
- const media = getMediaById(post.featuredImage);
- return media ? (
-
-
-
-
- {t('blog.backToBlog', locale as 'en' | 'de')}
-
-
-
- {/* Article Header */}
-
-
-
-
- - {post.title} -
- - {post.excerptHtml && ( -
-
-
-
- ) : null;
- })()}
-
- {/* Article Content */}
-
-
-
- {/* Article Footer */}
-
-
- {/* Related Posts */}
-
-
-
- );
-}
\ No newline at end of file
diff --git a/app/[locale]/blog/page.tsx b/app/[locale]/blog/page.tsx
deleted file mode 100644
index bbb5deca..00000000
--- a/app/[locale]/blog/page.tsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import { Metadata } from 'next';
-import Link from 'next/link';
-import { getPostsByLocale, getCategoriesByLocale, getMediaById } from '@/lib/data';
-import { getSiteInfo, t, getLocalizedPath } from '@/lib/i18n';
-import { SEO } from '@/components/SEO';
-import { LocaleSwitcher } from '@/components/LocaleSwitcher';
-import { ContentRenderer } from '@/components/content/ContentRenderer';
-
-interface PageProps {
- params: {
- locale?: string;
- };
-}
-
-export async function generateStaticParams() {
- return [
- { locale: 'en' },
- { locale: 'de' },
- ];
-}
-
-export async function generateMetadata({ params }: PageProps): Promise
-
-
-
-
- {/* Locale Switcher */}
-
-
-
-
-
- {/* Categories */}
- {categories.length > 0 && (
- - {title} -
-- {description} -
-
-
- )}
-
- {/* Featured Posts */}
- {featuredPosts.length > 0 && (
- - {t('blog.categories', locale as 'en' | 'de')} -
-
- {categories.map((category) => (
-
- {category.name}
-
- ))}
-
-
-
- )}
-
- {/* All Posts */}
- {remainingPosts.length > 0 && (
- - {t('blog.featured', locale as 'en' | 'de')} -
-
- {featuredPosts.map((post) => (
-
- {post.featuredImage && (() => {
- const media = getMediaById(post.featuredImage);
- return media ? (
-
- ))}
-
-
-
-
- ) : null;
- })()}
-
-
-
-
-
- - - {post.title} - -
-
-
-
- {t('blog.readMore', locale as 'en' | 'de')}
-
-
-
-
- )}
-
- {/* Empty State */}
- {posts.length === 0 && (
- - {t('blog.allPosts', locale as 'en' | 'de')} -
-
- {remainingPosts.map((post) => (
-
-
- ))}
-
-
-
-
-
-
-
- {post.featuredImage && (() => {
- const media = getMediaById(post.featuredImage);
- return media ? (
-
-
-
-
- ) : null;
- })()}
-
-
- - - {post.title} - -
-
-
-
- {t('blog.readMore', locale as 'en' | 'de')}
-
-
-
-
- )}
-
-
-
- - {t('blog.noPosts', locale as 'en' | 'de')} -
-- {t('blog.noPostsDescription', locale as 'en' | 'de')} -
-
-
-
- );
-}
\ No newline at end of file
diff --git a/app/[locale]/contact/page.tsx b/app/[locale]/contact/page.tsx
deleted file mode 100644
index dd01d02d..00000000
--- a/app/[locale]/contact/page.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { notFound } from 'next/navigation';
-import { getPageBySlug, getAllPages, getMediaById } from '@/lib/data';
-import { Metadata } from 'next';
-import { SEO } from '@/components/SEO';
-import { ContentRenderer } from '@/components/content/ContentRenderer';
-import { Breadcrumbs } from '@/components/content/Breadcrumbs';
-import { Hero } from '@/components/content/Hero';
-import { ContactForm } from '@/components/ContactForm';
-import { ResponsiveSection, ResponsiveWrapper } from '@/components/layout/ResponsiveWrapper';
-
-interface PageProps {
- params: {
- locale: string;
- };
-}
-
-export async function generateStaticParams() {
- const pages = await getAllPages();
- // Filter for contact pages only
- const contactPages = pages.filter(p => p.slug === 'contact' || p.slug === 'kontakt');
- return contactPages.map((page) => ({
- locale: page.locale,
- }));
-}
-
-export async function generateMetadata({ params }: PageProps): Promise
-
- - {page.title} -
- {page.excerptHtml && ( -
-
-
-
-
-
-
- WordPress Shortcode Test
-This page demonstrates the enhanced ContentRenderer handling various WordPress shortcodes and image formats.
-
-
-
-
-
-
-
- Left Column
-This column uses vc_col-md-6 shortcode converted to Tailwind classes.
- Contact Button -
-
-
- ![Medium Voltage Cable]()
-
- Right Column
-Content in the right column with proper spacing and styling.
-
-
-
-
-
-
-
- Background Image Section
-This section has a background image from WordPress media library.
-
-
-
-
-
-
- ![Low Voltage Cable]()
- ![NA2XSF2X Cable]()
-
- Image Gallery
-Multiple images with different alignments:
-Images should display correctly with proper Next.js Image optimization and alignment.
-
-
-
-
-
-
-
- Dark Section with Buttons
-Various button styles should work correctly:
- -
-
-
-
-
-
-
- Typography Test
-Regular paragraph text with bold text, italic text, and external links.
--
-
- List item 1 -
- List item 2 -
- List item 3 -
--This is a blockquote with proper styling.
-
-
-
-
-
-
-
- Column 1
-One-third width column.
-
-
-
-
- Column 2
-One-third width column.
-
-
-
-
- Column 3
-One-third width column.
-
-
-`;
-
-const testContentWithShortcodes = `
-[vc_row bg_color="#f8f9fa" top_padding="4%" bottom_padding="4%"]
- [vc_column width="12"]
- [vc_column_text]
-
-
-
- ![Medium Voltage Cables]()
-
- Direct Image References
-Images referenced by ID should be converted to Next.js Image components:
-Raw Shortcode Test
-This content uses raw WordPress shortcodes that should be processed by html-compat.ts
- [/vc_column_text] - [/vc_column] -[/vc_row] - -[vc_row] - [vc_column width="6"] - [vc_column_text] -Left Side
-Content with [vc_btn color="primary" title="Click Here" link="#"] embedded.
- [/vc_column_text] - [/vc_column] - [vc_column width="6"] - [vc_column_text] -Right Side
-Another column with [vc_single_image src="6521" align="right"] embedded.
- [/vc_column_text] - [/vc_column] -[/vc_row] - -[vc_row bg_image="45528" top_padding="15%" bottom_padding="15%" color_overlay="#000000" overlay_strength="0.7"] - [vc_column] - [vc_column_text text_color="light" text_align="center"] -Background Image with Overlay
-This should show an image with dark overlay and white text.
- [/vc_column_text] - [/vc_column] -[/vc_row] - -[vc_row enable_gradient="true" gradient_direction="left_to_right"] - [vc_column] - [vc_column_text text_align="center"] -Gradient Background
-This row should have a gradient background.
- [/vc_column_text] - [/vc_column] -[/vc_row] -`; - -export default function ComponentsDemoPage() { - return ( -
-
-
-
-
- ContentRenderer Test Page
-- Testing WordPress shortcode conversion and image handling -
-
-
-
- Processed HTML Content
-
-
-
- Raw Shortcode Content
-
-
- What This Tests:
--
-
- ✅ [vc_row] → flex containers with background support -
- ✅ [vc_column] → responsive width classes -
- ✅ [vc_column_text] → prose styling -
- ✅ [vc_btn] → styled buttons -
- ✅ [vc_single_image] → Next.js Image components -
- ✅ Background images from WordPress IDs -
- ✅ Color overlays and gradients -
- ✅ Image alignment and sizing -
- ✅ URL replacement from data layer -
- ✅ Inline styles and attributes -
- {/* Hero Section */}
-
-
-
-
-
- {/* Feature Cards */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Component Showcase */}
-
-
-
-
-
- {/* Integration Example */}
-
-
-
-
-
-
-
-
-
-
-
- {/* Breadcrumb Demo */}
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/app/[locale]/example/subpage/page.tsx b/app/[locale]/example/subpage/page.tsx
deleted file mode 100644
index b95c8bd4..00000000
--- a/app/[locale]/example/subpage/page.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Metadata } from 'next';
-import { Container } from '@/components/ui/Container';
-import { Layout } from '@/components/layout/Layout';
-import { Card, CardHeader, CardBody } from '@/components/ui/Card';
-import { Button } from '@/components/ui/Button';
-import Link from 'next/link';
-
-export const metadata: Metadata = {
- title: 'Subpage Example | KLZ Cables',
- description: 'Example subpage demonstrating breadcrumb functionality',
-};
-
-export default function Subpage({ params: { locale } }: { params: { locale: string } }) {
- // Breadcrumb configuration
- const breadcrumb = [
- { title: 'Example', path: `/${locale}/example` },
- { title: 'Subpage', path: `/${locale}/example/subpage` }
- ];
-
- return (
- - Layout Components Demo -
-- Showcasing the new Header, Footer, Layout, and MobileMenu components -
-
-
-
-
- Key Features
-
- New
-
- Responsive Header
-- Sticky header with mobile hamburger menu, locale switcher, and contact CTA. - Fully responsive with smooth animations. -
-
- Updated
-
- Smart Footer
-- 4-column responsive layout with company info, quick links, - product categories, and contact details. -
-
- Enhanced
-
- Mobile Menu
-- Slide-out drawer with smooth animations, full navigation, - language switcher, and contact information. -
-UI Components
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Buttons
-
-
-
-
-
-
-
-
-
-
-
- Badges
-
- Primary
- Secondary
- Success
- Warning
- Error
-
- Container & Grid
-- The Container component provides responsive max-width and padding, - while Grid offers flexible column layouts. -
-1
- 2
- 3
- 4
- Integration Example
-How to Use in Your Pages
-
- {`// app/[locale]/my-page/page.tsx
-import { Metadata } from 'next';
-import { Container } from '@/components/ui/Container';
-import { Layout } from '@/components/layout/Layout';
-
-export const metadata: Metadata = {
- title: 'My Page | KLZ Cables',
- description: 'My custom page description',
-};
-
-export default function MyPage({ params: { locale } }: { params: { locale: string } }) {
- return (
-
-
- My Page Content
- {/* Your content here */}
-
-
- );
-}`}
-
- Breadcrumb Support
-- The Layout component supports optional breadcrumbs. Check the URL bar - and try navigating to see the breadcrumb in action. -
- - - -
- {/* Page Header */}
-
-
-
-
-
-
-
- {/* Navigation */}
-
-
-
-
-
-
-
-
-
-
- {/* Content */}
- Subpage with Breadcrumb
-- This page demonstrates the breadcrumb functionality in the Layout component. - Notice the breadcrumb navigation above this content area. -
-Breadcrumb Features
--
-
- - ✓ - Automatic breadcrumb generation based on current URL - -
- - ✓ - Clickable links for all parent pages - -
- - ✓ - Current page shown as non-clickable text - -
- - ✓ - Responsive design that works on all screen sizes - -
- - ✓ - Optional feature - only shown when breadcrumb prop is provided - -
-
-
-
-
-
-
-
-
- {/* Code Example */}
- How to Use Breadcrumbs
-
- {`// In your page component:
-import { Layout } from '@/components/layout/Layout';
-
-export default function MyPage({ params: { locale } }) {
- const breadcrumb = [
- { title: 'Home', path: \`/\${locale}\` },
- { title: 'Products', path: \`/\${locale}/products\` },
- { title: 'Details', path: \`/\${locale}/products/123\` }
- ];
-
- return (
-
- {/* Your content */}
-
- );
-}`}
-
-
-
-
- {/* Locale switcher at bottom */}
-
-
- - {page.title} -
-- {page.title} -
-
-
- )
-}
\ No newline at end of file
diff --git a/app/[locale]/product/page.tsx b/app/[locale]/product/page.tsx
deleted file mode 100644
index 5ddc8a17..00000000
--- a/app/[locale]/product/page.tsx
+++ /dev/null
@@ -1,335 +0,0 @@
-import { Metadata } from 'next';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-import { getProductBySlugWithExcel, getAllProducts, getCategoriesByLocale } from '@/lib/data';
-import { getSiteInfo, t, getLocaleFromPath, getLocalizedPath } from '@/lib/i18n';
-import { SEO } from '@/components/SEO';
-import { LocaleSwitcher } from '@/components/LocaleSwitcher';
-import { ContentRenderer } from '@/components/content/ContentRenderer';
-
-interface PageProps {
- params: {
- slug: string;
- locale?: string;
- };
-}
-
-export async function generateMetadata({ params }: PageProps): Promise{category.name}
- - {category.description && ( -{category.description}
- )} - - {products.length > 0 ? ( -No products found in this category.
- )} -
-
-
- {/* Locale Switcher */}
-
- {/* Back to products link */}
-
-
-
-
- {t('products.backToProducts', locale as 'en' | 'de')}
-
-
-
-
- {/* Product Images */}
-
-
- {/* Related Products */}
- {relatedProducts.length > 0 && (
-
- {product.images && product.images.length > 0 ? (
- <>
-
-
- {/* Product Info */}
-
- {product.images.map((img: string, index: number) => (
-
-
- 
-
- ))}
-
- 
-
-
- ) : (
-
-
-
- )}
-
- {/* Categories */}
- {product.categories && product.categories.length > 0 && (
-
-
- {product.categories.map((cat: any) => (
-
- {cat.name}
-
- ))}
-
- )}
-
- - {product.name} -
- - {product.sku && ( -- {t('products.sku', locale as 'en' | 'de')}: {product.sku} -
- )} - - {processedShortDescription && ( -
-
- )}
-
- {/* Excel Technical Data Section */}
- {(hasExcelData || hasExcelAttributes) && (
-
-
- )}
-
- {/* Product Description */}
- {processedDescription && (
- - {locale === 'de' ? 'Technische Daten' : 'Technical Data'} -
- - {/* Configurations */} - {hasExcelData && ( -
-
- )}
-
- {/* Excel Attributes */}
- {hasExcelAttributes && (
- - {locale === 'de' ? 'Konfigurationen' : 'Configurations'} -
-
- {product.excelConfigurations!.map((config: string, index: number) => (
-
- {config}
-
- ))}
-
-
- {product.excelAttributes!.map((attr: any, index: number) => (
-
- )}
-
-
- ))}
-
- {attr.name}
-
-
- {attr.options.length === 1
- ? attr.options[0]
- : attr.options.slice(0, 3).join(' / ') + (attr.options.length > 3 ? ' / ...' : '')
- }
-
-
-
- )}
-
- {/* Actions */}
- - {t('products.description', locale as 'en' | 'de')} -
-
-
-
-
- {t('products.inquire', locale as 'en' | 'de')}
-
-
-
- {t('products.backToProducts', locale as 'en' | 'de')}
-
-
-
-
- )}
- - {t('products.relatedProducts', locale as 'en' | 'de')} -
-
- {relatedProducts.map((relatedProduct: any) => (
-
- {relatedProduct.images && relatedProduct.images.length > 0 ? (
-
-
- 
-
- ) : (
-
-
-
- )}
-
-
-
- ))}
- - {relatedProduct.name} -
- {relatedProduct.shortDescriptionHtml && ( -
-
- )}
-
- {t('products.viewDetails', locale as 'en' | 'de')} →
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/app/[locale]/products/page.tsx b/app/[locale]/products/page.tsx
deleted file mode 100644
index b8309600..00000000
--- a/app/[locale]/products/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { t } from '@/lib/i18n'
-import { ProductList } from '@/components/ProductList'
-import { getProductsForLocaleWithExcel } from '@/lib/data'
-import { Locale } from '@/lib/i18n'
-
-interface PageProps {
- params: {
- locale: Locale;
- };
-}
-
-export function generateMetadata({ params }: PageProps) {
- return {
- title: t('products.title', params.locale),
- description: t('products.description', params.locale),
- }
-}
-
-export default async function ProductsPage({ params }: PageProps) {
- const products = getProductsForLocaleWithExcel(params.locale)
-
- // Get unique categories
- const categories = Array.from(
- new Set(products
- .filter(p => p.locale === params.locale)
- .flatMap(p => p.categories.map(c => c.slug))
- )
- )
-
- return (
-
-
-
- p.locale === params.locale)} locale={params.locale} />
- ) : (
-
- )
-}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
deleted file mode 100644
index 98c4216d..00000000
--- a/app/globals.css
+++ /dev/null
@@ -1,3715 +0,0 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
-@layer theme {
- :root, :host {
- --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
- "Courier New", monospace;
- --color-red-50: oklch(97.1% 0.013 17.38);
- --color-red-200: oklch(88.5% 0.062 18.334);
- --color-red-500: oklch(63.7% 0.237 25.331);
- --color-red-600: oklch(57.7% 0.245 27.325);
- --color-red-800: oklch(44.4% 0.177 26.899);
- --color-orange-50: oklch(98% 0.016 73.684);
- --color-orange-100: oklch(95.4% 0.038 75.164);
- --color-orange-200: oklch(90.1% 0.076 70.697);
- --color-orange-700: oklch(55.3% 0.195 38.402);
- --color-orange-900: oklch(40.8% 0.123 38.172);
- --color-yellow-100: oklch(97.3% 0.071 103.193);
- --color-yellow-500: oklch(79.5% 0.184 86.047);
- --color-yellow-800: oklch(47.6% 0.114 61.907);
- --color-green-50: oklch(98.2% 0.018 155.826);
- --color-green-100: oklch(96.2% 0.044 156.743);
- --color-green-200: oklch(92.5% 0.084 155.995);
- --color-green-700: oklch(52.7% 0.154 150.069);
- --color-green-800: oklch(44.8% 0.119 151.328);
- --color-green-900: oklch(39.3% 0.095 152.535);
- --color-blue-50: oklch(97% 0.014 254.604);
- --color-blue-100: oklch(93.2% 0.032 255.585);
- --color-blue-200: oklch(88.2% 0.059 254.128);
- --color-blue-500: oklch(62.3% 0.214 259.815);
- --color-blue-600: oklch(54.6% 0.245 262.881);
- --color-blue-700: oklch(48.8% 0.243 264.376);
- --color-blue-800: oklch(42.4% 0.199 265.638);
- --color-blue-900: oklch(37.9% 0.146 265.522);
- --color-indigo-50: oklch(96.2% 0.018 272.314);
- --color-purple-50: oklch(97.7% 0.014 308.299);
- --color-purple-100: oklch(94.6% 0.033 307.174);
- --color-purple-200: oklch(90.2% 0.063 306.703);
- --color-purple-700: oklch(49.6% 0.265 301.924);
- --color-purple-900: oklch(38.1% 0.176 304.987);
- --color-gray-50: oklch(98.5% 0.002 247.839);
- --color-gray-100: oklch(96.7% 0.003 264.542);
- --color-gray-200: oklch(92.8% 0.006 264.531);
- --color-gray-300: oklch(87.2% 0.01 258.338);
- --color-gray-400: oklch(70.7% 0.022 261.325);
- --color-gray-500: oklch(55.1% 0.027 264.364);
- --color-gray-600: oklch(44.6% 0.03 256.802);
- --color-gray-700: oklch(37.3% 0.034 259.733);
- --color-gray-800: oklch(27.8% 0.033 256.848);
- --color-gray-900: oklch(21% 0.034 264.665);
- --color-black: #000;
- --color-white: #fff;
- --spacing: 0.25rem;
- --container-xs: 20rem;
- --container-sm: 24rem;
- --container-md: 28rem;
- --container-lg: 32rem;
- --container-xl: 36rem;
- --container-2xl: 42rem;
- --container-3xl: 48rem;
- --container-4xl: 56rem;
- --container-5xl: 64rem;
- --container-6xl: 72rem;
- --container-7xl: 80rem;
- --text-xs: 0.75rem;
- --text-xs--line-height: calc(1 / 0.75);
- --text-sm: 0.875rem;
- --text-sm--line-height: calc(1.25 / 0.875);
- --text-base: 1rem;
- --text-base--line-height: calc(1.5 / 1);
- --text-lg: 1.125rem;
- --text-lg--line-height: calc(1.75 / 1.125);
- --text-xl: 1.25rem;
- --text-xl--line-height: calc(1.75 / 1.25);
- --text-2xl: 1.5rem;
- --text-2xl--line-height: calc(2 / 1.5);
- --text-3xl: 1.875rem;
- --text-3xl--line-height: calc(2.25 / 1.875);
- --text-4xl: 2.25rem;
- --text-4xl--line-height: calc(2.5 / 2.25);
- --text-5xl: 3rem;
- --text-5xl--line-height: 1;
- --text-6xl: 3.75rem;
- --text-6xl--line-height: 1;
- --font-weight-light: 300;
- --font-weight-normal: 400;
- --font-weight-medium: 500;
- --font-weight-semibold: 600;
- --font-weight-bold: 700;
- --tracking-tight: -0.025em;
- --tracking-wider: 0.05em;
- --leading-tight: 1.25;
- --leading-relaxed: 1.625;
- --radius-sm: 0.25rem;
- --radius-md: 0.375rem;
- --radius-lg: 0.5rem;
- --radius-xl: 0.75rem;
- --radius-2xl: 1rem;
- --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
- --animate-spin: spin 1s linear infinite;
- --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
- --animate-bounce: bounce 1s infinite;
- --blur-sm: 8px;
- --aspect-video: 16 / 9;
- --default-transition-duration: 150ms;
- --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- --default-font-family: var(--font-sans);
- --default-mono-font-family: var(--font-mono);
- }
-}
-@layer base {
- *, ::after, ::before, ::backdrop, ::file-selector-button {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- border: 0 solid;
- }
- html, :host {
- line-height: 1.5;
- -webkit-text-size-adjust: 100%;
- tab-size: 4;
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
- font-feature-settings: var(--default-font-feature-settings, normal);
- font-variation-settings: var(--default-font-variation-settings, normal);
- -webkit-tap-highlight-color: transparent;
- }
- hr {
- height: 0;
- color: inherit;
- border-top-width: 1px;
- }
- abbr:where([title]) {
- -webkit-text-decoration: underline dotted;
- text-decoration: underline dotted;
- }
- h1, h2, h3, h4, h5, h6 {
- font-size: inherit;
- font-weight: inherit;
- }
- a {
- color: inherit;
- -webkit-text-decoration: inherit;
- text-decoration: inherit;
- }
- b, strong {
- font-weight: bolder;
- }
- code, kbd, samp, pre {
- font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
- font-feature-settings: var(--default-mono-font-feature-settings, normal);
- font-variation-settings: var(--default-mono-font-variation-settings, normal);
- font-size: 1em;
- }
- small {
- font-size: 80%;
- }
- sub, sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
- }
- sub {
- bottom: -0.25em;
- }
- sup {
- top: -0.5em;
- }
- table {
- text-indent: 0;
- border-color: inherit;
- border-collapse: collapse;
- }
- :-moz-focusring {
- outline: auto;
- }
- progress {
- vertical-align: baseline;
- }
- summary {
- display: list-item;
- }
- ol, ul, menu {
- list-style: none;
- }
- img, svg, video, canvas, audio, iframe, embed, object {
- display: block;
- vertical-align: middle;
- }
- img, video {
- max-width: 100%;
- height: auto;
- }
- button, input, select, optgroup, textarea, ::file-selector-button {
- font: inherit;
- font-feature-settings: inherit;
- font-variation-settings: inherit;
- letter-spacing: inherit;
- color: inherit;
- border-radius: 0;
- background-color: transparent;
- opacity: 1;
- }
- :where(select:is([multiple], [size])) optgroup {
- font-weight: bolder;
- }
- :where(select:is([multiple], [size])) optgroup option {
- padding-inline-start: 20px;
- }
- ::file-selector-button {
- margin-inline-end: 4px;
- }
- ::placeholder {
- opacity: 1;
- }
- @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
- ::placeholder {
- color: currentcolor;
- @supports (color: color-mix(in lab, red, red)) {
- color: color-mix(in oklab, currentcolor 50%, transparent);
- }
- }
- }
- textarea {
- resize: vertical;
- }
- ::-webkit-search-decoration {
- -webkit-appearance: none;
- }
- ::-webkit-date-and-time-value {
- min-height: 1lh;
- text-align: inherit;
- }
- ::-webkit-datetime-edit {
- display: inline-flex;
- }
- ::-webkit-datetime-edit-fields-wrapper {
- padding: 0;
- }
- ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
- padding-block: 0;
- }
- ::-webkit-calendar-picker-indicator {
- line-height: 1;
- }
- :-moz-ui-invalid {
- box-shadow: none;
- }
- button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
- appearance: button;
- }
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
- height: auto;
- }
- [hidden]:where(:not([hidden="until-found"])) {
- display: none !important;
- }
-}
-@layer utilities {
- .\@container\/thread {
- container-type: inline-size;
- container-name: thread;
- }
- .pointer-events-none {
- pointer-events: none;
- }
- .collapse {
- visibility: collapse;
- }
- .invisible {
- visibility: hidden;
- }
- .visible {
- visibility: visible;
- }
- .absolute {
- position: absolute;
- }
- .fixed {
- position: fixed;
- }
- .relative {
- position: relative;
- }
- .static {
- position: static;
- }
- .sticky {
- position: sticky;
- }
- .inset-0 {
- inset: calc(var(--spacing) * 0);
- }
- .end-\(--thread-content-margin\) {
- inset-inline-end: var(--thread-content-margin);
- }
- .end-0 {
- inset-inline-end: calc(var(--spacing) * 0);
- }
- .top-0 {
- top: calc(var(--spacing) * 0);
- }
- .top-1\/2 {
- top: calc(1/2 * 100%);
- }
- .right-0 {
- right: calc(var(--spacing) * 0);
- }
- .right-2 {
- right: calc(var(--spacing) * 2);
- }
- .right-3 {
- right: calc(var(--spacing) * 3);
- }
- .right-4 {
- right: calc(var(--spacing) * 4);
- }
- .bottom-0 {
- bottom: calc(var(--spacing) * 0);
- }
- .bottom-4 {
- bottom: calc(var(--spacing) * 4);
- }
- .left-0 {
- left: calc(var(--spacing) * 0);
- }
- .left-3 {
- left: calc(var(--spacing) * 3);
- }
- .left-\[50\%\]\! {
- left: 50% !important;
- }
- .left-auto {
- left: auto;
- }
- .z-0 {
- z-index: 0;
- }
- .z-10 {
- z-index: 10;
- }
- .z-20 {
- z-index: 20;
- }
- .z-30 {
- z-index: 30;
- }
- .z-40 {
- z-index: 40;
- }
- .z-50 {
- z-index: 50;
- }
- .z-100 {
- z-index: 100;
- }
- .float-left {
- float: left;
- }
- .float-right {
- float: right;
- }
- .container {
- width: 100%;
- @media (width >= 40rem) {
- max-width: 40rem;
- }
- @media (width >= 48rem) {
- max-width: 48rem;
- }
- @media (width >= 64rem) {
- max-width: 64rem;
- }
- @media (width >= 80rem) {
- max-width: 80rem;
- }
- @media (width >= 96rem) {
- max-width: 96rem;
- }
- }
- .m-0 {
- margin: calc(var(--spacing) * 0);
- }
- .m-2 {
- margin: calc(var(--spacing) * 2);
- }
- .m-4 {
- margin: calc(var(--spacing) * 4);
- }
- .m-6 {
- margin: calc(var(--spacing) * 6);
- }
- .m-8 {
- margin: calc(var(--spacing) * 8);
- }
- .m-auto {
- margin: auto;
- }
- .-mx-4 {
- margin-inline: calc(var(--spacing) * -4);
- }
- .mx-auto {
- margin-inline: auto;
- }
- .my-4 {
- margin-block: calc(var(--spacing) * 4);
- }
- .my-auto {
- margin-block: auto;
- }
- .-mt-\[2rem\] {
- margin-top: calc(2rem * -1);
- }
- .mt-0 {
- margin-top: calc(var(--spacing) * 0);
- }
- .mt-0\.5 {
- margin-top: calc(var(--spacing) * 0.5);
- }
- .mt-1 {
- margin-top: calc(var(--spacing) * 1);
- }
- .mt-2 {
- margin-top: calc(var(--spacing) * 2);
- }
- .mt-3 {
- margin-top: calc(var(--spacing) * 3);
- }
- .mt-4 {
- margin-top: calc(var(--spacing) * 4);
- }
- .mt-6 {
- margin-top: calc(var(--spacing) * 6);
- }
- .mt-8 {
- margin-top: calc(var(--spacing) * 8);
- }
- .mt-10 {
- margin-top: calc(var(--spacing) * 10);
- }
- .mt-12 {
- margin-top: calc(var(--spacing) * 12);
- }
- .mt-16 {
- margin-top: calc(var(--spacing) * 16);
- }
- .mt-20 {
- margin-top: calc(var(--spacing) * 20);
- }
- .mt-auto {
- margin-top: auto;
- }
- .mr-1 {
- margin-right: calc(var(--spacing) * 1);
- }
- .mr-1\.5 {
- margin-right: calc(var(--spacing) * 1.5);
- }
- .mr-2 {
- margin-right: calc(var(--spacing) * 2);
- }
- .mr-2\.5 {
- margin-right: calc(var(--spacing) * 2.5);
- }
- .mr-4 {
- margin-right: calc(var(--spacing) * 4);
- }
- .mb-0 {
- margin-bottom: calc(var(--spacing) * 0);
- }
- .mb-1 {
- margin-bottom: calc(var(--spacing) * 1);
- }
- .mb-2 {
- margin-bottom: calc(var(--spacing) * 2);
- }
- .mb-3 {
- margin-bottom: calc(var(--spacing) * 3);
- }
- .mb-4 {
- margin-bottom: calc(var(--spacing) * 4);
- }
- .mb-6 {
- margin-bottom: calc(var(--spacing) * 6);
- }
- .mb-8 {
- margin-bottom: calc(var(--spacing) * 8);
- }
- .mb-10 {
- margin-bottom: calc(var(--spacing) * 10);
- }
- .mb-12 {
- margin-bottom: calc(var(--spacing) * 12);
- }
- .mb-16 {
- margin-bottom: calc(var(--spacing) * 16);
- }
- .mb-48 {
- margin-bottom: calc(var(--spacing) * 48);
- }
- .-ml-2 {
- margin-left: calc(var(--spacing) * -2);
- }
- .ml-1 {
- margin-left: calc(var(--spacing) * 1);
- }
- .ml-1\.5 {
- margin-left: calc(var(--spacing) * 1.5);
- }
- .ml-2 {
- margin-left: calc(var(--spacing) * 2);
- }
- .ml-2\.5 {
- margin-left: calc(var(--spacing) * 2.5);
- }
- .ml-4 {
- margin-left: calc(var(--spacing) * 4);
- }
- .line-clamp-2 {
- overflow: hidden;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- }
- .line-clamp-3 {
- overflow: hidden;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- }
- .block {
- display: block;
- }
- .contents {
- display: contents;
- }
- .flex {
- display: flex;
- }
- .grid {
- display: grid;
- }
- .hidden {
- display: none;
- }
- .inline {
- display: inline;
- }
- .inline-block {
- display: inline-block;
- }
- .inline-flex {
- display: inline-flex;
- }
- .table {
- display: table;
- }
- .aspect-\[4\/3\] {
- aspect-ratio: 4/3;
- }
- .aspect-\[16\/9\] {
- aspect-ratio: 16/9;
- }
- .aspect-\[21\/9\] {
- aspect-ratio: 21/9;
- }
- .aspect-auto {
- aspect-ratio: auto;
- }
- .aspect-square {
- aspect-ratio: 1 / 1;
- }
- .aspect-video {
- aspect-ratio: var(--aspect-video);
- }
- .size-full {
- width: 100%;
- height: 100%;
- }
- .h-0 {
- height: calc(var(--spacing) * 0);
- }
- .h-0\.5 {
- height: calc(var(--spacing) * 0.5);
- }
- .h-2 {
- height: calc(var(--spacing) * 2);
- }
- .h-2\.5 {
- height: calc(var(--spacing) * 2.5);
- }
- .h-3 {
- height: calc(var(--spacing) * 3);
- }
- .h-4 {
- height: calc(var(--spacing) * 4);
- }
- .h-5 {
- height: calc(var(--spacing) * 5);
- }
- .h-6 {
- height: calc(var(--spacing) * 6);
- }
- .h-8 {
- height: calc(var(--spacing) * 8);
- }
- .h-10 {
- height: calc(var(--spacing) * 10);
- }
- .h-12 {
- height: calc(var(--spacing) * 12);
- }
- .h-16 {
- height: calc(var(--spacing) * 16);
- }
- .h-20 {
- height: calc(var(--spacing) * 20);
- }
- .h-24 {
- height: calc(var(--spacing) * 24);
- }
- .h-32 {
- height: calc(var(--spacing) * 32);
- }
- .h-40 {
- height: calc(var(--spacing) * 40);
- }
- .h-48 {
- height: calc(var(--spacing) * 48);
- }
- .h-64 {
- height: calc(var(--spacing) * 64);
- }
- .h-80 {
- height: calc(var(--spacing) * 80);
- }
- .h-auto {
- height: auto;
- }
- .h-full {
- height: 100%;
- }
- .h-px {
- height: 1px;
- }
- .h-screen {
- height: 100vh;
- }
- .min-h-4 {
- min-height: calc(var(--spacing) * 4);
- }
- .min-h-8 {
- min-height: calc(var(--spacing) * 8);
- }
- .min-h-\[44px\] {
- min-height: 44px;
- }
- .min-h-\[300px\] {
- min-height: 300px;
- }
- .min-h-\[400px\] {
- min-height: 400px;
- }
- .min-h-\[500px\] {
- min-height: 500px;
- }
- .min-h-\[600px\] {
- min-height: 600px;
- }
- .min-h-screen {
- min-height: 100vh;
- }
- .w-1\/2 {
- width: calc(1/2 * 100%);
- }
- .w-1\/3 {
- width: calc(1/3 * 100%);
- }
- .w-1\/4 {
- width: calc(1/4 * 100%);
- }
- .w-2\.5 {
- width: calc(var(--spacing) * 2.5);
- }
- .w-2\/3 {
- width: calc(2/3 * 100%);
- }
- .w-3 {
- width: calc(var(--spacing) * 3);
- }
- .w-3\/4 {
- width: calc(3/4 * 100%);
- }
- .w-4 {
- width: calc(var(--spacing) * 4);
- }
- .w-5 {
- width: calc(var(--spacing) * 5);
- }
- .w-5\/6 {
- width: calc(5/6 * 100%);
- }
- .w-6 {
- width: calc(var(--spacing) * 6);
- }
- .w-8 {
- width: calc(var(--spacing) * 8);
- }
- .w-10 {
- width: calc(var(--spacing) * 10);
- }
- .w-12 {
- width: calc(var(--spacing) * 12);
- }
- .w-16 {
- width: calc(var(--spacing) * 16);
- }
- .w-20 {
- width: calc(var(--spacing) * 20);
- }
- .w-24 {
- width: calc(var(--spacing) * 24);
- }
- .w-32 {
- width: calc(var(--spacing) * 32);
- }
- .w-40 {
- width: calc(var(--spacing) * 40);
- }
- .w-48 {
- width: calc(var(--spacing) * 48);
- }
- .w-64 {
- width: calc(var(--spacing) * 64);
- }
- .w-\[100cqw\] {
- width: 100cqw;
- }
- .w-auto {
- width: auto;
- }
- .w-fit {
- width: fit-content;
- }
- .w-full {
- width: 100%;
- }
- .w-px {
- width: 1px;
- }
- .w-screen {
- width: 100vw;
- }
- .max-w-\(--thread-content-max-width\) {
- max-width: var(--thread-content-max-width);
- }
- .max-w-2xl {
- max-width: var(--container-2xl);
- }
- .max-w-3xl {
- max-width: var(--container-3xl);
- }
- .max-w-4xl {
- max-width: var(--container-4xl);
- }
- .max-w-5xl {
- max-width: var(--container-5xl);
- }
- .max-w-6xl {
- max-width: var(--container-6xl);
- }
- .max-w-7xl {
- max-width: var(--container-7xl);
- }
- .max-w-\[calc\(var\(--thread-content-max-width\)\*2\/3\)\] {
- max-width: calc(var(--thread-content-max-width) * 2 / 3);
- }
- .max-w-full {
- max-width: 100%;
- }
- .max-w-lg {
- max-width: var(--container-lg);
- }
- .max-w-md {
- max-width: var(--container-md);
- }
- .max-w-none {
- max-width: none;
- }
- .max-w-sm {
- max-width: var(--container-sm);
- }
- .max-w-xl {
- max-width: var(--container-xl);
- }
- .max-w-xs {
- max-width: var(--container-xs);
- }
- .min-w-\(--thread-content-width\) {
- min-width: var(--thread-content-width);
- }
- .min-w-0 {
- min-width: calc(var(--spacing) * 0);
- }
- .min-w-\[44px\] {
- min-width: 44px;
- }
- .min-w-\[calc\(var\(--thread-content-max-width\)\/3\)\] {
- min-width: calc(var(--thread-content-max-width) / 3);
- }
- .min-w-full {
- min-width: 100%;
- }
- .flex-1 {
- flex: 1;
- }
- .flex-shrink-0 {
- flex-shrink: 0;
- }
- .flex-grow {
- flex-grow: 1;
- }
- .grow {
- flex-grow: 1;
- }
- .translate-x-0 {
- --tw-translate-x: calc(var(--spacing) * 0);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- .translate-x-\[-50\%\] {
- --tw-translate-x: -50%;
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- .translate-x-full {
- --tw-translate-x: 100%;
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- .-translate-y-1\/2 {
- --tw-translate-y: calc(calc(1/2 * 100%) * -1);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- .translate-y-0 {
- --tw-translate-y: calc(var(--spacing) * 0);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- .translate-y-\[2rem\] {
- --tw-translate-y: 2rem;
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- .translate-y-full {
- --tw-translate-y: 100%;
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- .scale-0 {
- --tw-scale-x: 0%;
- --tw-scale-y: 0%;
- --tw-scale-z: 0%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- }
- .scale-95 {
- --tw-scale-x: 95%;
- --tw-scale-y: 95%;
- --tw-scale-z: 95%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- }
- .scale-100 {
- --tw-scale-x: 100%;
- --tw-scale-y: 100%;
- --tw-scale-z: 100%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- }
- .scale-105 {
- --tw-scale-x: 105%;
- --tw-scale-y: 105%;
- --tw-scale-z: 105%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- }
- .rotate-0 {
- rotate: 0deg;
- }
- .rotate-45 {
- rotate: 45deg;
- }
- .rotate-90 {
- rotate: 90deg;
- }
- .transform {
- transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
- }
- .animate-bounce {
- animation: var(--animate-bounce);
- }
- .animate-pulse {
- animation: var(--animate-pulse);
- }
- .animate-spin {
- animation: var(--animate-spin);
- }
- .cursor-not-allowed {
- cursor: not-allowed;
- }
- .cursor-pointer {
- cursor: pointer;
- }
- .resize {
- resize: both;
- }
- .resize-y {
- resize: vertical;
- }
- .scroll-mt-\[calc\(var\(--header-height\)\+min\(200px\,max\(70px\,20svh\)\)\)\] {
- scroll-margin-top: calc(var(--header-height) + min(200px, max(70px, 20svh)));
- }
- .scroll-mb-\[var\(--thread-trailing-height\,150px\)\] {
- scroll-margin-bottom: var(--thread-trailing-height,150px);
- }
- .list-inside {
- list-style-position: inside;
- }
- .list-disc {
- list-style-type: disc;
- }
- .appearance-none {
- appearance: none;
- }
- .grid-cols-1 {
- grid-template-columns: repeat(1, minmax(0, 1fr));
- }
- .grid-cols-2 {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
- .grid-cols-3 {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- }
- .grid-cols-4 {
- grid-template-columns: repeat(4, minmax(0, 1fr));
- }
- .flex-col {
- flex-direction: column;
- }
- .flex-col-reverse {
- flex-direction: column-reverse;
- }
- .flex-row {
- flex-direction: row;
- }
- .flex-nowrap {
- flex-wrap: nowrap;
- }
- .flex-wrap {
- flex-wrap: wrap;
- }
- .items-center {
- align-items: center;
- }
- .items-end {
- align-items: flex-end;
- }
- .items-start {
- align-items: flex-start;
- }
- .items-stretch {
- align-items: stretch;
- }
- .justify-around {
- justify-content: space-around;
- }
- .justify-between {
- justify-content: space-between;
- }
- .justify-center {
- justify-content: center;
- }
- .justify-end {
- justify-content: flex-end;
- }
- .justify-start {
- justify-content: flex-start;
- }
- .gap-0 {
- gap: calc(var(--spacing) * 0);
- }
- .gap-1 {
- gap: calc(var(--spacing) * 1);
- }
- .gap-1\.5 {
- gap: calc(var(--spacing) * 1.5);
- }
- .gap-2 {
- gap: calc(var(--spacing) * 2);
- }
- .gap-3 {
- gap: calc(var(--spacing) * 3);
- }
- .gap-4 {
- gap: calc(var(--spacing) * 4);
- }
- .gap-6 {
- gap: calc(var(--spacing) * 6);
- }
- .gap-8 {
- gap: calc(var(--spacing) * 8);
- }
- .gap-10 {
- gap: calc(var(--spacing) * 10);
- }
- .gap-12 {
- gap: calc(var(--spacing) * 12);
- }
- .space-y-1 {
- :where(& > :not(:last-child)) {
- --tw-space-y-reverse: 0;
- margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
- margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
- }
- }
- .space-y-2 {
- :where(& > :not(:last-child)) {
- --tw-space-y-reverse: 0;
- margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
- margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
- }
- }
- .space-y-3 {
- :where(& > :not(:last-child)) {
- --tw-space-y-reverse: 0;
- margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
- margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
- }
- }
- .space-y-4 {
- :where(& > :not(:last-child)) {
- --tw-space-y-reverse: 0;
- margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
- margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
- }
- }
- .space-y-6 {
- :where(& > :not(:last-child)) {
- --tw-space-y-reverse: 0;
- margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
- margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
- }
- }
- .space-y-8 {
- :where(& > :not(:last-child)) {
- --tw-space-y-reverse: 0;
- margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
- margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
- }
- }
- .space-y-12 {
- :where(& > :not(:last-child)) {
- --tw-space-y-reverse: 0;
- margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
- margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
- }
- }
- .self-end {
- align-self: flex-end;
- }
- .truncate {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .overflow-auto {
- overflow: auto;
- }
- .overflow-hidden {
- overflow: hidden;
- }
- .overflow-scroll {
- overflow: scroll;
- }
- .overflow-x-auto {
- overflow-x: auto;
- }
- .overflow-y-auto {
- overflow-y: auto;
- }
- .rounded {
- border-radius: 0.25rem;
- }
- .rounded-2xl {
- border-radius: var(--radius-2xl);
- }
- .rounded-full {
- border-radius: calc(infinity * 1px);
- }
- .rounded-lg {
- border-radius: var(--radius-lg);
- }
- .rounded-md {
- border-radius: var(--radius-md);
- }
- .rounded-none {
- border-radius: 0;
- }
- .rounded-sm {
- border-radius: var(--radius-sm);
- }
- .rounded-xl {
- border-radius: var(--radius-xl);
- }
- .rounded-t-lg {
- border-top-left-radius: var(--radius-lg);
- border-top-right-radius: var(--radius-lg);
- }
- .border {
- border-style: var(--tw-border-style);
- border-width: 1px;
- }
- .border-0 {
- border-style: var(--tw-border-style);
- border-width: 0px;
- }
- .border-2 {
- border-style: var(--tw-border-style);
- border-width: 2px;
- }
- .border-4 {
- border-style: var(--tw-border-style);
- border-width: 4px;
- }
- .border-t {
- border-top-style: var(--tw-border-style);
- border-top-width: 1px;
- }
- .border-r {
- border-right-style: var(--tw-border-style);
- border-right-width: 1px;
- }
- .border-b {
- border-bottom-style: var(--tw-border-style);
- border-bottom-width: 1px;
- }
- .border-l {
- border-left-style: var(--tw-border-style);
- border-left-width: 1px;
- }
- .border-l-4 {
- border-left-style: var(--tw-border-style);
- border-left-width: 4px;
- }
- .border-blue-200 {
- border-color: var(--color-blue-200);
- }
- .border-gray-100 {
- border-color: var(--color-gray-100);
- }
- .border-gray-200 {
- border-color: var(--color-gray-200);
- }
- .border-gray-300 {
- border-color: var(--color-gray-300);
- }
- .border-gray-800 {
- border-color: var(--color-gray-800);
- }
- .border-green-200 {
- border-color: var(--color-green-200);
- }
- .border-purple-200 {
- border-color: var(--color-purple-200);
- }
- .border-red-200 {
- border-color: var(--color-red-200);
- }
- .border-red-500 {
- border-color: var(--color-red-500);
- }
- .border-transparent {
- border-color: transparent;
- }
- .border-white {
- border-color: var(--color-white);
- }
- .border-yellow-500 {
- border-color: var(--color-yellow-500);
- }
- .border-t-transparent {
- border-top-color: transparent;
- }
- .bg-black {
- background-color: var(--color-black);
- }
- .bg-black\/50 {
- background-color: color-mix(in srgb, #000 50%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
- }
- }
- .bg-blue-50 {
- background-color: var(--color-blue-50);
- }
- .bg-blue-100 {
- background-color: var(--color-blue-100);
- }
- .bg-blue-500 {
- background-color: var(--color-blue-500);
- }
- .bg-blue-600 {
- background-color: var(--color-blue-600);
- }
- .bg-gray-50 {
- background-color: var(--color-gray-50);
- }
- .bg-gray-100 {
- background-color: var(--color-gray-100);
- }
- .bg-gray-200 {
- background-color: var(--color-gray-200);
- }
- .bg-gray-300 {
- background-color: var(--color-gray-300);
- }
- .bg-gray-400 {
- background-color: var(--color-gray-400);
- }
- .bg-gray-500 {
- background-color: var(--color-gray-500);
- }
- .bg-gray-600 {
- background-color: var(--color-gray-600);
- }
- .bg-gray-700 {
- background-color: var(--color-gray-700);
- }
- .bg-gray-800 {
- background-color: var(--color-gray-800);
- }
- .bg-gray-900 {
- background-color: var(--color-gray-900);
- }
- .bg-green-50 {
- background-color: var(--color-green-50);
- }
- .bg-orange-50 {
- background-color: var(--color-orange-50);
- }
- .bg-purple-50 {
- background-color: var(--color-purple-50);
- }
- .bg-red-50 {
- background-color: var(--color-red-50);
- }
- .bg-transparent {
- background-color: transparent;
- }
- .bg-white {
- background-color: var(--color-white);
- }
- .bg-yellow-100 {
- background-color: var(--color-yellow-100);
- }
- .bg-gradient-to-br {
- --tw-gradient-position: to bottom right in oklab;
- background-image: linear-gradient(var(--tw-gradient-stops));
- }
- .bg-gradient-to-r {
- --tw-gradient-position: to right in oklab;
- background-image: linear-gradient(var(--tw-gradient-stops));
- }
- .bg-gradient-to-t {
- --tw-gradient-position: to top in oklab;
- background-image: linear-gradient(var(--tw-gradient-stops));
- }
- .from-black\/50 {
- --tw-gradient-from: color-mix(in srgb, #000 50%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- --tw-gradient-from: color-mix(in oklab, var(--color-black) 50%, transparent);
- }
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
- }
- .from-blue-50 {
- --tw-gradient-from: var(--color-blue-50);
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
- }
- .from-blue-600 {
- --tw-gradient-from: var(--color-blue-600);
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
- }
- .to-blue-800 {
- --tw-gradient-to: var(--color-blue-800);
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
- }
- .to-indigo-50 {
- --tw-gradient-to: var(--color-indigo-50);
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
- }
- .to-transparent {
- --tw-gradient-to: transparent;
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
- }
- .bg-\[length\:1\.5em_1\.5em\] {
- background-size: 1.5em 1.5em;
- }
- .bg-clip-text {
- background-clip: text;
- }
- .bg-\[position\:right_0\.5rem_center\] {
- background-position: right 0.5rem center;
- }
- .bg-no-repeat {
- background-repeat: no-repeat;
- }
- .object-contain {
- object-fit: contain;
- }
- .object-cover {
- object-fit: cover;
- }
- .object-fill {
- object-fit: fill;
- }
- .object-none {
- object-fit: none;
- }
- .object-scale-down {
- object-fit: scale-down;
- }
- .object-center {
- object-position: center;
- }
- .p-0 {
- padding: calc(var(--spacing) * 0);
- }
- .p-1 {
- padding: calc(var(--spacing) * 1);
- }
- .p-2 {
- padding: calc(var(--spacing) * 2);
- }
- .p-3 {
- padding: calc(var(--spacing) * 3);
- }
- .p-4 {
- padding: calc(var(--spacing) * 4);
- }
- .p-6 {
- padding: calc(var(--spacing) * 6);
- }
- .p-8 {
- padding: calc(var(--spacing) * 8);
- }
- .p-12 {
- padding: calc(var(--spacing) * 12);
- }
- .px-\(--thread-content-margin\) {
- padding-inline: var(--thread-content-margin);
- }
- .px-0 {
- padding-inline: calc(var(--spacing) * 0);
- }
- .px-2 {
- padding-inline: calc(var(--spacing) * 2);
- }
- .px-2\.5 {
- padding-inline: calc(var(--spacing) * 2.5);
- }
- .px-3 {
- padding-inline: calc(var(--spacing) * 3);
- }
- .px-4 {
- padding-inline: calc(var(--spacing) * 4);
- }
- .px-5 {
- padding-inline: calc(var(--spacing) * 5);
- }
- .px-6 {
- padding-inline: calc(var(--spacing) * 6);
- }
- .py-0 {
- padding-block: calc(var(--spacing) * 0);
- }
- .py-0\.5 {
- padding-block: calc(var(--spacing) * 0.5);
- }
- .py-1 {
- padding-block: calc(var(--spacing) * 1);
- }
- .py-1\.5 {
- padding-block: calc(var(--spacing) * 1.5);
- }
- .py-2 {
- padding-block: calc(var(--spacing) * 2);
- }
- .py-3 {
- padding-block: calc(var(--spacing) * 3);
- }
- .py-4 {
- padding-block: calc(var(--spacing) * 4);
- }
- .py-6 {
- padding-block: calc(var(--spacing) * 6);
- }
- .py-8 {
- padding-block: calc(var(--spacing) * 8);
- }
- .py-10 {
- padding-block: calc(var(--spacing) * 10);
- }
- .py-12 {
- padding-block: calc(var(--spacing) * 12);
- }
- .py-16 {
- padding-block: calc(var(--spacing) * 16);
- }
- .py-20 {
- padding-block: calc(var(--spacing) * 20);
- }
- .py-24 {
- padding-block: calc(var(--spacing) * 24);
- }
- .py-\[18px\] {
- padding-block: 18px;
- }
- .pt-0 {
- padding-top: calc(var(--spacing) * 0);
- }
- .pt-3 {
- padding-top: calc(var(--spacing) * 3);
- }
- .pt-4 {
- padding-top: calc(var(--spacing) * 4);
- }
- .pt-6 {
- padding-top: calc(var(--spacing) * 6);
- }
- .pt-8 {
- padding-top: calc(var(--spacing) * 8);
- }
- .pt-12 {
- padding-top: calc(var(--spacing) * 12);
- }
- .pr-10 {
- padding-right: calc(var(--spacing) * 10);
- }
- .pb-4 {
- padding-bottom: calc(var(--spacing) * 4);
- }
- .pb-10 {
- padding-bottom: calc(var(--spacing) * 10);
- }
- .pb-\[1\.5rem\] {
- padding-bottom: 1.5rem;
- }
- .pl-6 {
- padding-left: calc(var(--spacing) * 6);
- }
- .pl-10 {
- padding-left: calc(var(--spacing) * 10);
- }
- .text-center {
- text-align: center;
- }
- .text-left {
- text-align: left;
- }
- .text-right {
- text-align: right;
- }
- .text-start {
- text-align: start;
- }
- .font-mono {
- font-family: var(--font-mono);
- }
- .text-2xl {
- font-size: var(--text-2xl);
- line-height: var(--tw-leading, var(--text-2xl--line-height));
- }
- .text-3xl {
- font-size: var(--text-3xl);
- line-height: var(--tw-leading, var(--text-3xl--line-height));
- }
- .text-4xl {
- font-size: var(--text-4xl);
- line-height: var(--tw-leading, var(--text-4xl--line-height));
- }
- .text-base {
- font-size: var(--text-base);
- line-height: var(--tw-leading, var(--text-base--line-height));
- }
- .text-lg {
- font-size: var(--text-lg);
- line-height: var(--tw-leading, var(--text-lg--line-height));
- }
- .text-sm {
- font-size: var(--text-sm);
- line-height: var(--tw-leading, var(--text-sm--line-height));
- }
- .text-xl {
- font-size: var(--text-xl);
- line-height: var(--tw-leading, var(--text-xl--line-height));
- }
- .text-xs {
- font-size: var(--text-xs);
- line-height: var(--tw-leading, var(--text-xs--line-height));
- }
- .leading-none {
- --tw-leading: 1;
- line-height: 1;
- }
- .leading-relaxed {
- --tw-leading: var(--leading-relaxed);
- line-height: var(--leading-relaxed);
- }
- .leading-tight {
- --tw-leading: var(--leading-tight);
- line-height: var(--leading-tight);
- }
- .font-bold {
- --tw-font-weight: var(--font-weight-bold);
- font-weight: var(--font-weight-bold);
- }
- .font-light {
- --tw-font-weight: var(--font-weight-light);
- font-weight: var(--font-weight-light);
- }
- .font-medium {
- --tw-font-weight: var(--font-weight-medium);
- font-weight: var(--font-weight-medium);
- }
- .font-normal {
- --tw-font-weight: var(--font-weight-normal);
- font-weight: var(--font-weight-normal);
- }
- .font-semibold {
- --tw-font-weight: var(--font-weight-semibold);
- font-weight: var(--font-weight-semibold);
- }
- .tracking-tight {
- --tw-tracking: var(--tracking-tight);
- letter-spacing: var(--tracking-tight);
- }
- .tracking-wider {
- --tw-tracking: var(--tracking-wider);
- letter-spacing: var(--tracking-wider);
- }
- .break-words {
- overflow-wrap: break-word;
- }
- .whitespace-normal {
- white-space: normal;
- }
- .text-black {
- color: var(--color-black);
- }
- .text-blue-100 {
- color: var(--color-blue-100);
- }
- .text-blue-600 {
- color: var(--color-blue-600);
- }
- .text-blue-700 {
- color: var(--color-blue-700);
- }
- .text-blue-800 {
- color: var(--color-blue-800);
- }
- .text-blue-900 {
- color: var(--color-blue-900);
- }
- .text-current {
- color: currentcolor;
- }
- .text-gray-100 {
- color: var(--color-gray-100);
- }
- .text-gray-200 {
- color: var(--color-gray-200);
- }
- .text-gray-300 {
- color: var(--color-gray-300);
- }
- .text-gray-400 {
- color: var(--color-gray-400);
- }
- .text-gray-500 {
- color: var(--color-gray-500);
- }
- .text-gray-600 {
- color: var(--color-gray-600);
- }
- .text-gray-700 {
- color: var(--color-gray-700);
- }
- .text-gray-800 {
- color: var(--color-gray-800);
- }
- .text-gray-900 {
- color: var(--color-gray-900);
- }
- .text-green-700 {
- color: var(--color-green-700);
- }
- .text-green-800 {
- color: var(--color-green-800);
- }
- .text-green-900 {
- color: var(--color-green-900);
- }
- .text-orange-700 {
- color: var(--color-orange-700);
- }
- .text-orange-900 {
- color: var(--color-orange-900);
- }
- .text-purple-700 {
- color: var(--color-purple-700);
- }
- .text-purple-900 {
- color: var(--color-purple-900);
- }
- .text-red-600 {
- color: var(--color-red-600);
- }
- .text-red-800 {
- color: var(--color-red-800);
- }
- .text-transparent {
- color: transparent;
- }
- .text-white {
- color: var(--color-white);
- }
- .text-yellow-800 {
- color: var(--color-yellow-800);
- }
- .capitalize {
- text-transform: capitalize;
- }
- .lowercase {
- text-transform: lowercase;
- }
- .normal-case {
- text-transform: none;
- }
- .uppercase {
- text-transform: uppercase;
- }
- .italic {
- font-style: italic;
- }
- .line-through {
- text-decoration-line: line-through;
- }
- .underline {
- text-decoration-line: underline;
- }
- .opacity-0 {
- opacity: 0%;
- }
- .opacity-25 {
- opacity: 25%;
- }
- .opacity-50 {
- opacity: 50%;
- }
- .opacity-60 {
- opacity: 60%;
- }
- .opacity-70 {
- opacity: 70%;
- }
- .opacity-75 {
- opacity: 75%;
- }
- .opacity-90 {
- opacity: 90%;
- }
- .opacity-100 {
- opacity: 100%;
- }
- .\!shadow {
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
- }
- .shadow {
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- .shadow-2xl {
- --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- .shadow-lg {
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- .shadow-md {
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- .shadow-none {
- --tw-shadow: 0 0 #0000;
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- .shadow-sm {
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- .shadow-xl {
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- .ring-2 {
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- .shadow-gray-200\/50 {
- --tw-shadow-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 50%, transparent) var(--tw-shadow-alpha), transparent);
- }
- }
- .outline {
- outline-style: var(--tw-outline-style);
- outline-width: 1px;
- }
- .blur {
- --tw-blur: blur(8px);
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
- }
- .drop-shadow-lg {
- --tw-drop-shadow-size: drop-shadow(0 4px 4px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15)));
- --tw-drop-shadow: drop-shadow(var(--drop-shadow-lg));
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
- }
- .invert {
- --tw-invert: invert(100%);
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
- }
- .filter {
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
- }
- .backdrop-blur-sm {
- --tw-backdrop-blur: blur(var(--blur-sm));
- -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
- backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
- }
- .transition {
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
- }
- .transition\! {
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events !important;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
- transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
- }
- .transition-all {
- transition-property: all;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
- }
- .transition-colors {
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
- }
- .transition-opacity {
- transition-property: opacity;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
- }
- .transition-shadow {
- transition-property: box-shadow;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
- }
- .transition-transform {
- transition-property: transform, translate, scale, rotate;
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
- transition-duration: var(--tw-duration, var(--default-transition-duration));
- }
- .duration-150 {
- --tw-duration: 150ms;
- transition-duration: 150ms;
- }
- .duration-200 {
- --tw-duration: 200ms;
- transition-duration: 200ms;
- }
- .duration-300 {
- --tw-duration: 300ms;
- transition-duration: 300ms;
- }
- .duration-500 {
- --tw-duration: 500ms;
- transition-duration: 500ms;
- }
- .ease-in-out {
- --tw-ease: var(--ease-in-out);
- transition-timing-function: var(--ease-in-out);
- }
- .select-none {
- -webkit-user-select: none;
- user-select: none;
- }
- .\[--shadow-height\:45px\] {
- --shadow-height: 45px;
- }
- .\[--thread-content-margin\:--spacing\(4\)\] {
- --thread-content-margin: calc(var(--spacing) * 4);
- }
- .\[--thread-content-max-width\:40rem\] {
- --thread-content-max-width: 40rem;
- }
- .\[content-visibility\:auto\] {
- content-visibility: auto;
- }
- .\[scrollbar-gutter\:stable\] {
- scrollbar-gutter: stable;
- }
- .\*\:pointer-events-auto {
- :is(& > *) {
- pointer-events: auto;
- }
- }
- .group-hover\:scale-105 {
- &:is(:where(.group):hover *) {
- @media (hover: hover) {
- --tw-scale-x: 105%;
- --tw-scale-y: 105%;
- --tw-scale-z: 105%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- }
- }
- }
- .group-hover\:text-blue-600 {
- &:is(:where(.group):hover *) {
- @media (hover: hover) {
- color: var(--color-blue-600);
- }
- }
- }
- .peer-disabled\:cursor-not-allowed {
- &:is(:where(.peer):disabled ~ *) {
- cursor: not-allowed;
- }
- }
- .peer-disabled\:opacity-70 {
- &:is(:where(.peer):disabled ~ *) {
- opacity: 70%;
- }
- }
- .first\:pt-\[1px\] {
- &:first-child {
- padding-top: 1px;
- }
- }
- .first\:pt-\[3px\] {
- &:first-child {
- padding-top: 3px;
- }
- }
- .empty\:hidden {
- &:empty {
- display: none;
- }
- }
- .hover\:-translate-y-1 {
- &:hover {
- @media (hover: hover) {
- --tw-translate-y: calc(var(--spacing) * -1);
- translate: var(--tw-translate-x) var(--tw-translate-y);
- }
- }
- }
- .hover\:scale-105 {
- &:hover {
- @media (hover: hover) {
- --tw-scale-x: 105%;
- --tw-scale-y: 105%;
- --tw-scale-z: 105%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- }
- }
- }
- .hover\:bg-blue-100 {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-blue-100);
- }
- }
- }
- .hover\:bg-blue-600 {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-blue-600);
- }
- }
- }
- .hover\:bg-blue-700 {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-blue-700);
- }
- }
- }
- .hover\:bg-gray-50 {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-gray-50);
- }
- }
- }
- .hover\:bg-gray-100 {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-gray-100);
- }
- }
- }
- .hover\:bg-green-100 {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-green-100);
- }
- }
- }
- .hover\:bg-orange-100 {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-orange-100);
- }
- }
- }
- .hover\:bg-purple-100 {
- &:hover {
- @media (hover: hover) {
- background-color: var(--color-purple-100);
- }
- }
- }
- .hover\:bg-white\/10 {
- &:hover {
- @media (hover: hover) {
- background-color: color-mix(in srgb, #fff 10%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
- }
- }
- }
- }
- .hover\:text-blue-600 {
- &:hover {
- @media (hover: hover) {
- color: var(--color-blue-600);
- }
- }
- }
- .hover\:text-blue-700 {
- &:hover {
- @media (hover: hover) {
- color: var(--color-blue-700);
- }
- }
- }
- .hover\:text-blue-800 {
- &:hover {
- @media (hover: hover) {
- color: var(--color-blue-800);
- }
- }
- }
- .hover\:text-gray-900 {
- &:hover {
- @media (hover: hover) {
- color: var(--color-gray-900);
- }
- }
- }
- .hover\:text-white {
- &:hover {
- @media (hover: hover) {
- color: var(--color-white);
- }
- }
- }
- .hover\:underline {
- &:hover {
- @media (hover: hover) {
- text-decoration-line: underline;
- }
- }
- }
- .hover\:opacity-80 {
- &:hover {
- @media (hover: hover) {
- opacity: 80%;
- }
- }
- }
- .hover\:opacity-100 {
- &:hover {
- @media (hover: hover) {
- opacity: 100%;
- }
- }
- }
- .hover\:shadow-md {
- &:hover {
- @media (hover: hover) {
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- }
- }
- .hover\:shadow-xl {
- &:hover {
- @media (hover: hover) {
- --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- }
- }
- .hover\:shadow-gray-200\/70 {
- &:hover {
- @media (hover: hover) {
- --tw-shadow-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 70%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-gray-200) 70%, transparent) var(--tw-shadow-alpha), transparent);
- }
- }
- }
- }
- .focus\:ring-2 {
- &:focus {
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
- }
- }
- .focus\:ring-offset-2 {
- &:focus {
- --tw-ring-offset-width: 2px;
- --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
- }
- }
- .focus\:outline-none {
- &:focus {
- --tw-outline-style: none;
- outline-style: none;
- }
- }
- .focus-visible\:outline-hidden {
- &:focus-visible {
- --tw-outline-style: none;
- outline-style: none;
- @media (forced-colors: active) {
- outline: 2px solid transparent;
- outline-offset: 2px;
- }
- }
- }
- .focus-visible\:outline-2 {
- &:focus-visible {
- outline-style: var(--tw-outline-style);
- outline-width: 2px;
- }
- }
- .focus-visible\:outline-offset-\[-4px\] {
- &:focus-visible {
- outline-offset: -4px;
- }
- }
- .active\:scale-95 {
- &:active {
- --tw-scale-x: 95%;
- --tw-scale-y: 95%;
- --tw-scale-z: 95%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- }
- }
- .active\:bg-blue-200 {
- &:active {
- background-color: var(--color-blue-200);
- }
- }
- .active\:bg-gray-200 {
- &:active {
- background-color: var(--color-gray-200);
- }
- }
- .active\:bg-green-200 {
- &:active {
- background-color: var(--color-green-200);
- }
- }
- .active\:bg-orange-200 {
- &:active {
- background-color: var(--color-orange-200);
- }
- }
- .active\:bg-purple-200 {
- &:active {
- background-color: var(--color-purple-200);
- }
- }
- .disabled\:cursor-not-allowed {
- &:disabled {
- cursor: not-allowed;
- }
- }
- .disabled\:opacity-60 {
- &:disabled {
- opacity: 60%;
- }
- }
- .has-data-writing-block\:pointer-events-none {
- &:has(*[data-writing-block]) {
- pointer-events: none;
- }
- }
- .has-data-writing-block\:-mt-\(--shadow-height\) {
- &:has(*[data-writing-block]) {
- margin-top: calc(var(--shadow-height) * -1);
- }
- }
- .has-data-writing-block\:pt-\(--shadow-height\) {
- &:has(*[data-writing-block]) {
- padding-top: var(--shadow-height);
- }
- }
- .supports-\[content-visibility\:auto\]\:\[contain-intrinsic-size\:auto_100lvh\] {
- @supports (content-visibility:auto) {
- contain-intrinsic-size: auto 100lvh;
- }
- }
- .sm\:visible {
- @media (width >= 40rem) {
- visibility: visible;
- }
- }
- .sm\:mt-16 {
- @media (width >= 40rem) {
- margin-top: calc(var(--spacing) * 16);
- }
- }
- .sm\:block {
- @media (width >= 40rem) {
- display: block;
- }
- }
- .sm\:flex {
- @media (width >= 40rem) {
- display: flex;
- }
- }
- .sm\:hidden {
- @media (width >= 40rem) {
- display: none;
- }
- }
- .sm\:inline {
- @media (width >= 40rem) {
- display: inline;
- }
- }
- .sm\:grid-cols-2 {
- @media (width >= 40rem) {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
- }
- .sm\:flex-row {
- @media (width >= 40rem) {
- flex-direction: row;
- }
- }
- .sm\:items-center {
- @media (width >= 40rem) {
- align-items: center;
- }
- }
- .sm\:gap-3 {
- @media (width >= 40rem) {
- gap: calc(var(--spacing) * 3);
- }
- }
- .sm\:gap-4 {
- @media (width >= 40rem) {
- gap: calc(var(--spacing) * 4);
- }
- }
- .sm\:gap-6 {
- @media (width >= 40rem) {
- gap: calc(var(--spacing) * 6);
- }
- }
- .sm\:rounded-lg {
- @media (width >= 40rem) {
- border-radius: var(--radius-lg);
- }
- }
- .sm\:p-2 {
- @media (width >= 40rem) {
- padding: calc(var(--spacing) * 2);
- }
- }
- .sm\:p-8 {
- @media (width >= 40rem) {
- padding: calc(var(--spacing) * 8);
- }
- }
- .sm\:px-0 {
- @media (width >= 40rem) {
- padding-inline: calc(var(--spacing) * 0);
- }
- }
- .sm\:px-2 {
- @media (width >= 40rem) {
- padding-inline: calc(var(--spacing) * 2);
- }
- }
- .sm\:px-5 {
- @media (width >= 40rem) {
- padding-inline: calc(var(--spacing) * 5);
- }
- }
- .sm\:px-6 {
- @media (width >= 40rem) {
- padding-inline: calc(var(--spacing) * 6);
- }
- }
- .sm\:py-2 {
- @media (width >= 40rem) {
- padding-block: calc(var(--spacing) * 2);
- }
- }
- .sm\:py-6 {
- @media (width >= 40rem) {
- padding-block: calc(var(--spacing) * 6);
- }
- }
- .sm\:py-12 {
- @media (width >= 40rem) {
- padding-block: calc(var(--spacing) * 12);
- }
- }
- .sm\:py-16 {
- @media (width >= 40rem) {
- padding-block: calc(var(--spacing) * 16);
- }
- }
- .sm\:py-20 {
- @media (width >= 40rem) {
- padding-block: calc(var(--spacing) * 20);
- }
- }
- .sm\:py-24 {
- @media (width >= 40rem) {
- padding-block: calc(var(--spacing) * 24);
- }
- }
- .sm\:py-32 {
- @media (width >= 40rem) {
- padding-block: calc(var(--spacing) * 32);
- }
- }
- .sm\:text-4xl {
- @media (width >= 40rem) {
- font-size: var(--text-4xl);
- line-height: var(--tw-leading, var(--text-4xl--line-height));
- }
- }
- .sm\:text-5xl {
- @media (width >= 40rem) {
- font-size: var(--text-5xl);
- line-height: var(--tw-leading, var(--text-5xl--line-height));
- }
- }
- .sm\:text-sm {
- @media (width >= 40rem) {
- font-size: var(--text-sm);
- line-height: var(--tw-leading, var(--text-sm--line-height));
- }
- }
- .sm\:text-xl {
- @media (width >= 40rem) {
- font-size: var(--text-xl);
- line-height: var(--tw-leading, var(--text-xl--line-height));
- }
- }
- .md\:mb-12 {
- @media (width >= 48rem) {
- margin-bottom: calc(var(--spacing) * 12);
- }
- }
- .md\:block {
- @media (width >= 48rem) {
- display: block;
- }
- }
- .md\:flex {
- @media (width >= 48rem) {
- display: flex;
- }
- }
- .md\:hidden {
- @media (width >= 48rem) {
- display: none;
- }
- }
- .md\:min-h-\[400px\] {
- @media (width >= 48rem) {
- min-height: 400px;
- }
- }
- .md\:min-h-\[500px\] {
- @media (width >= 48rem) {
- min-height: 500px;
- }
- }
- .md\:min-h-\[600px\] {
- @media (width >= 48rem) {
- min-height: 600px;
- }
- }
- .md\:min-h-\[700px\] {
- @media (width >= 48rem) {
- min-height: 700px;
- }
- }
- .md\:w-1\/2 {
- @media (width >= 48rem) {
- width: calc(1/2 * 100%);
- }
- }
- .md\:w-1\/3 {
- @media (width >= 48rem) {
- width: calc(1/3 * 100%);
- }
- }
- .md\:w-1\/4 {
- @media (width >= 48rem) {
- width: calc(1/4 * 100%);
- }
- }
- .md\:w-auto {
- @media (width >= 48rem) {
- width: auto;
- }
- }
- .md\:max-w-3xl {
- @media (width >= 48rem) {
- max-width: var(--container-3xl);
- }
- }
- .md\:flex-none {
- @media (width >= 48rem) {
- flex: none;
- }
- }
- .md\:grid-cols-2 {
- @media (width >= 48rem) {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
- }
- .md\:grid-cols-3 {
- @media (width >= 48rem) {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- }
- }
- .md\:flex-row {
- @media (width >= 48rem) {
- flex-direction: row;
- }
- }
- .md\:items-center {
- @media (width >= 48rem) {
- align-items: center;
- }
- }
- .md\:gap-3 {
- @media (width >= 48rem) {
- gap: calc(var(--spacing) * 3);
- }
- }
- .md\:gap-4 {
- @media (width >= 48rem) {
- gap: calc(var(--spacing) * 4);
- }
- }
- .md\:gap-5 {
- @media (width >= 48rem) {
- gap: calc(var(--spacing) * 5);
- }
- }
- .md\:gap-6 {
- @media (width >= 48rem) {
- gap: calc(var(--spacing) * 6);
- }
- }
- .md\:gap-8 {
- @media (width >= 48rem) {
- gap: calc(var(--spacing) * 8);
- }
- }
- .md\:gap-12 {
- @media (width >= 48rem) {
- gap: calc(var(--spacing) * 12);
- }
- }
- .md\:gap-16 {
- @media (width >= 48rem) {
- gap: calc(var(--spacing) * 16);
- }
- }
- .md\:space-y-6 {
- @media (width >= 48rem) {
- :where(& > :not(:last-child)) {
- --tw-space-y-reverse: 0;
- margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
- margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
- }
- }
- }
- .md\:space-y-8 {
- @media (width >= 48rem) {
- :where(& > :not(:last-child)) {
- --tw-space-y-reverse: 0;
- margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
- margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
- }
- }
- }
- .md\:border-transparent {
- @media (width >= 48rem) {
- border-color: transparent;
- }
- }
- .md\:px-4 {
- @media (width >= 48rem) {
- padding-inline: calc(var(--spacing) * 4);
- }
- }
- .md\:px-5 {
- @media (width >= 48rem) {
- padding-inline: calc(var(--spacing) * 5);
- }
- }
- .md\:px-6 {
- @media (width >= 48rem) {
- padding-inline: calc(var(--spacing) * 6);
- }
- }
- .md\:px-8 {
- @media (width >= 48rem) {
- padding-inline: calc(var(--spacing) * 8);
- }
- }
- .md\:px-12 {
- @media (width >= 48rem) {
- padding-inline: calc(var(--spacing) * 12);
- }
- }
- .md\:px-16 {
- @media (width >= 48rem) {
- padding-inline: calc(var(--spacing) * 16);
- }
- }
- .md\:px-\[60px\] {
- @media (width >= 48rem) {
- padding-inline: 60px;
- }
- }
- .md\:py-6 {
- @media (width >= 48rem) {
- padding-block: calc(var(--spacing) * 6);
- }
- }
- .md\:py-8 {
- @media (width >= 48rem) {
- padding-block: calc(var(--spacing) * 8);
- }
- }
- .md\:py-12 {
- @media (width >= 48rem) {
- padding-block: calc(var(--spacing) * 12);
- }
- }
- .md\:py-16 {
- @media (width >= 48rem) {
- padding-block: calc(var(--spacing) * 16);
- }
- }
- .md\:py-20 {
- @media (width >= 48rem) {
- padding-block: calc(var(--spacing) * 20);
- }
- }
- .md\:py-24 {
- @media (width >= 48rem) {
- padding-block: calc(var(--spacing) * 24);
- }
- }
- .md\:py-32 {
- @media (width >= 48rem) {
- padding-block: calc(var(--spacing) * 32);
- }
- }
- .md\:pt-0 {
- @media (width >= 48rem) {
- padding-top: calc(var(--spacing) * 0);
- }
- }
- .md\:pb-6 {
- @media (width >= 48rem) {
- padding-bottom: calc(var(--spacing) * 6);
- }
- }
- .md\:pb-9 {
- @media (width >= 48rem) {
- padding-bottom: calc(var(--spacing) * 9);
- }
- }
- .md\:text-2xl {
- @media (width >= 48rem) {
- font-size: var(--text-2xl);
- line-height: var(--tw-leading, var(--text-2xl--line-height));
- }
- }
- .md\:text-3xl {
- @media (width >= 48rem) {
- font-size: var(--text-3xl);
- line-height: var(--tw-leading, var(--text-3xl--line-height));
- }
- }
- .md\:text-4xl {
- @media (width >= 48rem) {
- font-size: var(--text-4xl);
- line-height: var(--tw-leading, var(--text-4xl--line-height));
- }
- }
- .md\:text-5xl {
- @media (width >= 48rem) {
- font-size: var(--text-5xl);
- line-height: var(--tw-leading, var(--text-5xl--line-height));
- }
- }
- .md\:text-lg {
- @media (width >= 48rem) {
- font-size: var(--text-lg);
- line-height: var(--tw-leading, var(--text-lg--line-height));
- }
- }
- .md\:text-sm {
- @media (width >= 48rem) {
- font-size: var(--text-sm);
- line-height: var(--tw-leading, var(--text-sm--line-height));
- }
- }
- .md\:text-xl {
- @media (width >= 48rem) {
- font-size: var(--text-xl);
- line-height: var(--tw-leading, var(--text-xl--line-height));
- }
- }
- .md\:hover\:scale-105 {
- @media (width >= 48rem) {
- &:hover {
- @media (hover: hover) {
- --tw-scale-x: 105%;
- --tw-scale-y: 105%;
- --tw-scale-z: 105%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- }
- }
- }
- }
- .md\:active\:scale-100 {
- @media (width >= 48rem) {
- &:active {
- --tw-scale-x: 100%;
- --tw-scale-y: 100%;
- --tw-scale-z: 100%;
- scale: var(--tw-scale-x) var(--tw-scale-y);
- }
- }
- }
- .lg\:mt-0 {
- @media (width >= 64rem) {
- margin-top: calc(var(--spacing) * 0);
- }
- }
- .lg\:block {
- @media (width >= 64rem) {
- display: block;
- }
- }
- .lg\:grid {
- @media (width >= 64rem) {
- display: grid;
- }
- }
- .lg\:hidden {
- @media (width >= 64rem) {
- display: none;
- }
- }
- .lg\:w-1\/2 {
- @media (width >= 64rem) {
- width: calc(1/2 * 100%);
- }
- }
- .lg\:w-1\/3 {
- @media (width >= 64rem) {
- width: calc(1/3 * 100%);
- }
- }
- .lg\:w-1\/4 {
- @media (width >= 64rem) {
- width: calc(1/4 * 100%);
- }
- }
- .lg\:max-w-\[40rem\] {
- @media (width >= 64rem) {
- max-width: 40rem;
- }
- }
- .lg\:grid-cols-1 {
- @media (width >= 64rem) {
- grid-template-columns: repeat(1, minmax(0, 1fr));
- }
- }
- .lg\:grid-cols-2 {
- @media (width >= 64rem) {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
- }
- .lg\:grid-cols-3 {
- @media (width >= 64rem) {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- }
- }
- .lg\:grid-cols-4 {
- @media (width >= 64rem) {
- grid-template-columns: repeat(4, minmax(0, 1fr));
- }
- }
- .lg\:items-start {
- @media (width >= 64rem) {
- align-items: flex-start;
- }
- }
- .lg\:gap-4 {
- @media (width >= 64rem) {
- gap: calc(var(--spacing) * 4);
- }
- }
- .lg\:gap-6 {
- @media (width >= 64rem) {
- gap: calc(var(--spacing) * 6);
- }
- }
- .lg\:gap-8 {
- @media (width >= 64rem) {
- gap: calc(var(--spacing) * 8);
- }
- }
- .lg\:gap-12 {
- @media (width >= 64rem) {
- gap: calc(var(--spacing) * 12);
- }
- }
- .lg\:gap-x-12 {
- @media (width >= 64rem) {
- column-gap: calc(var(--spacing) * 12);
- }
- }
- .lg\:px-4 {
- @media (width >= 64rem) {
- padding-inline: calc(var(--spacing) * 4);
- }
- }
- .lg\:px-8 {
- @media (width >= 64rem) {
- padding-inline: calc(var(--spacing) * 8);
- }
- }
- .lg\:px-10 {
- @media (width >= 64rem) {
- padding-inline: calc(var(--spacing) * 10);
- }
- }
- .lg\:px-12 {
- @media (width >= 64rem) {
- padding-inline: calc(var(--spacing) * 12);
- }
- }
- .lg\:py-8 {
- @media (width >= 64rem) {
- padding-block: calc(var(--spacing) * 8);
- }
- }
- .lg\:py-16 {
- @media (width >= 64rem) {
- padding-block: calc(var(--spacing) * 16);
- }
- }
- .lg\:text-5xl {
- @media (width >= 64rem) {
- font-size: var(--text-5xl);
- line-height: var(--tw-leading, var(--text-5xl--line-height));
- }
- }
- .lg\:text-6xl {
- @media (width >= 64rem) {
- font-size: var(--text-6xl);
- line-height: var(--tw-leading, var(--text-6xl--line-height));
- }
- }
- .xl\:block {
- @media (width >= 80rem) {
- display: block;
- }
- }
- .xl\:hidden {
- @media (width >= 80rem) {
- display: none;
- }
- }
- .xl\:max-w-\[48rem\] {
- @media (width >= 80rem) {
- max-width: 48rem;
- }
- }
- .xl\:grid-cols-4 {
- @media (width >= 80rem) {
- grid-template-columns: repeat(4, minmax(0, 1fr));
- }
- }
- .xl\:gap-12 {
- @media (width >= 80rem) {
- gap: calc(var(--spacing) * 12);
- }
- }
- .xl\:px-5 {
- @media (width >= 80rem) {
- padding-inline: calc(var(--spacing) * 5);
- }
- }
- .xl\:px-12 {
- @media (width >= 80rem) {
- padding-inline: calc(var(--spacing) * 12);
- }
- }
- .xl\:px-16 {
- @media (width >= 80rem) {
- padding-inline: calc(var(--spacing) * 16);
- }
- }
- .xl\:py-20 {
- @media (width >= 80rem) {
- padding-block: calc(var(--spacing) * 20);
- }
- }
- .\32 xl\:px-16 {
- @media (width >= 96rem) {
- padding-inline: calc(var(--spacing) * 16);
- }
- }
- .\@xs\/thread\:px-0 {
- @container thread (width >= 20rem) {
- padding-inline: calc(var(--spacing) * 0);
- }
- }
- .\@sm\/thread\:px-1\.5 {
- @container thread (width >= 24rem) {
- padding-inline: calc(var(--spacing) * 1.5);
- }
- }
- .\@md\/thread\:px-4 {
- @container thread (width >= 28rem) {
- padding-inline: calc(var(--spacing) * 4);
- }
- }
- .dark\:border-white\/20 {
- @media (prefers-color-scheme: dark) {
- border-color: color-mix(in srgb, #fff 20%, transparent);
- @supports (color: color-mix(in lab, red, red)) {
- border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
- }
- }
- }
- .md\:dark\:border-transparent {
- @media (width >= 48rem) {
- @media (prefers-color-scheme: dark) {
- border-color: transparent;
- }
- }
- }
-}
-::-webkit-scrollbar {
- width: 8px;
- height: 8px;
-}
-::-webkit-scrollbar-track {
- background: #e9ecef;
-}
-::-webkit-scrollbar-thumb {
- background: #0056b3;
- border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
- background: #003d82;
-}
-*:focus-visible {
- outline: 2px solid #0056b3;
- outline-offset: 2px;
-}
-html {
- scroll-behavior: smooth;
-}
-@media (prefers-reduced-motion: reduce) {
- *, *::before, *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- scroll-behavior: auto !important;
- }
-}
-@media print {
- .navbar, .cookie-consent, .locale-switcher, .submit-btn, .btn {
- display: none !important;
- }
- body {
- background: white;
- color: black;
- }
- .container {
- max-width: 100%;
- padding: 0;
- }
- a::after {
- content: " (" attr(href) ")";
- }
-}
-@property --tw-translate-x {
- syntax: "*";
- inherits: false;
- initial-value: 0;
-}
-@property --tw-translate-y {
- syntax: "*";
- inherits: false;
- initial-value: 0;
-}
-@property --tw-translate-z {
- syntax: "*";
- inherits: false;
- initial-value: 0;
-}
-@property --tw-scale-x {
- syntax: "*";
- inherits: false;
- initial-value: 1;
-}
-@property --tw-scale-y {
- syntax: "*";
- inherits: false;
- initial-value: 1;
-}
-@property --tw-scale-z {
- syntax: "*";
- inherits: false;
- initial-value: 1;
-}
-@property --tw-rotate-x {
- syntax: "*";
- inherits: false;
-}
-@property --tw-rotate-y {
- syntax: "*";
- inherits: false;
-}
-@property --tw-rotate-z {
- syntax: "*";
- inherits: false;
-}
-@property --tw-skew-x {
- syntax: "*";
- inherits: false;
-}
-@property --tw-skew-y {
- syntax: "*";
- inherits: false;
-}
-@property --tw-space-y-reverse {
- syntax: "*";
- inherits: false;
- initial-value: 0;
-}
-@property --tw-border-style {
- syntax: "*";
- inherits: false;
- initial-value: solid;
-}
-@property --tw-gradient-position {
- syntax: "*";
- inherits: false;
-}
-@property --tw-gradient-from {
- syntax: "{t('products.title', params.locale)}
- - {categories.length > 0 && ( -
-
- )}
-
- {products.filter(p => p.locale === params.locale).length > 0 ? (
- {t('products.categories', params.locale)}
-
- {categories.map((category) => (
-
- {category}
-
- ))}
-
- {t('products.noProducts', params.locale)}
- )} -
-
- );
-}
\ No newline at end of file
diff --git a/components/LocaleSwitcher.tsx b/components/LocaleSwitcher.tsx
deleted file mode 100644
index ee5f7737..00000000
--- a/components/LocaleSwitcher.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { getLocaleFromPath, getLocalizedPath, type Locale } from '@/lib/i18n';
-import { Button } from '@/components/ui';
-
-export function LocaleSwitcher() {
- const pathname = usePathname();
- const currentLocale = getLocaleFromPath(pathname);
-
- const locales: Locale[] = ['en', 'de'];
-
- return (
-
-
-
-
-
-
-
-
-
-
- - {t('cookieConsent.message', locale)}{' '} - - {t('cookieConsent.privacyPolicy', locale)} - -
-
-
-
-
-
- {locales.map((locale) => {
- const isActive = currentLocale === locale;
- const label = locale === 'en' ? 'English' : 'Deutsch';
- const flag = locale === 'en' ? '🇺🇸' : '🇩🇪';
-
- // Get the current path without locale
- const currentPath = pathname.replace(/^\/(de|en)/, '') || '/';
- const href = getLocalizedPath(currentPath, locale);
-
- return (
-
-
-
- );
- })}
-
- );
-}
\ No newline at end of file
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
deleted file mode 100644
index 5da76a07..00000000
--- a/components/Navigation.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { getLocaleFromPath } from '@/lib/i18n'
-
-interface NavigationProps {
- logo?: string
- siteName: string
- locale: string
-}
-
-/**
- * @deprecated Use components/layout/Navigation instead
- */
-export function Navigation({ logo, siteName, locale }: NavigationProps) {
- const pathname = usePathname()
- const currentLocale = getLocaleFromPath(pathname)
-
- // Static menu for now - can be made dynamic later
- const mainMenu = [
- { title: 'Home', path: `/${locale}` },
- { title: 'Blog', path: `/${locale}/blog` },
- { title: 'Products', path: `/${locale}/products` },
- { title: 'Contact', path: `/${locale}/contact` }
- ]
-
- return (
-
- )
-}
\ No newline at end of file
diff --git a/components/ProductList.tsx b/components/ProductList.tsx
deleted file mode 100644
index f337f398..00000000
--- a/components/ProductList.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-'use client';
-
-import { Product } from '@/lib/data';
-import { ProductCard } from '@/components/cards/ProductCard';
-import { CardGrid } from '@/components/cards/CardGrid';
-import { useState, useMemo } from 'react';
-import { Button } from '@/components/ui';
-
-interface ProductListProps {
- products: Product[];
- locale?: 'de' | 'en';
- enableFiltering?: boolean;
- enableSorting?: boolean;
- enablePagination?: boolean;
- itemsPerPage?: number;
-}
-
-export function ProductList({
- products,
- locale = 'de',
- enableFiltering = false,
- enableSorting = false,
- enablePagination = false,
- itemsPerPage = 12
-}: ProductListProps) {
- const [currentPage, setCurrentPage] = useState(1);
- const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
- const [filterStock, setFilterStock] = useState<'all' | 'instock' | 'outofstock'>('all');
-
- // Filter products
- const filteredProducts = useMemo(() => {
- let filtered = [...products];
-
- // Filter by stock status
- if (filterStock !== 'all') {
- filtered = filtered.filter(p => p.stockStatus === filterStock);
- }
-
- // Sort products
- if (enableSorting) {
- filtered.sort((a, b) => {
- const aPrice = parseFloat(a.regularPrice?.replace(/[^\d.]/g, '') || '0');
- const bPrice = parseFloat(b.regularPrice?.replace(/[^\d.]/g, '') || '0');
-
- if (sortOrder === 'asc') {
- return aPrice - bPrice;
- } else {
- return bPrice - aPrice;
- }
- });
- }
-
- return filtered;
- }, [products, filterStock, sortOrder, enableSorting]);
-
- // Pagination
- const paginatedProducts = useMemo(() => {
- if (!enablePagination) return filteredProducts;
-
- const startIndex = (currentPage - 1) * itemsPerPage;
- const endIndex = startIndex + itemsPerPage;
- return filteredProducts.slice(startIndex, endIndex);
- }, [filteredProducts, currentPage, itemsPerPage, enablePagination]);
-
- const totalPages = enablePagination ? Math.ceil(filteredProducts.length / itemsPerPage) : 1;
-
- // Handlers
- const handleSortChange = () => {
- setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
- };
-
- const handleFilterChange = (status: 'all' | 'instock' | 'outofstock') => {
- setFilterStock(status);
- setCurrentPage(1); // Reset to first page
- };
-
- const handlePageChange = (page: number) => {
- setCurrentPage(page);
- window.scrollTo({ top: 0, behavior: 'smooth' });
- };
-
- // Loading state (for future use)
- const [isLoading, setIsLoading] = useState(false);
-
- if (products.length === 0) {
- return (
-
-
- );
- }
-
- return (
- - {locale === 'de' ? 'Keine Produkte gefunden' : 'No products found'} -
-- {locale === 'de' - ? 'Es wurden keine Produkte für diese Kategorie gefunden.' - : 'No products were found for this category.'} -
-
- {/* Controls */}
- {(enableFiltering || enableSorting) && (
-
- {paginatedProducts.map((product) => (
-
-
- {/* Pagination */}
- {enablePagination && totalPages > 1 && (
-
- );
-}
\ No newline at end of file
diff --git a/components/SEO.tsx b/components/SEO.tsx
deleted file mode 100644
index 712959a0..00000000
--- a/components/SEO.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { getSiteInfo } from '@/lib/i18n';
-import { ReactElement } from 'react';
-
-interface SEOProps {
- title: string;
- description?: string;
- locale?: 'en' | 'de';
- path?: string;
- type?: 'website' | 'article' | 'product';
- publishedTime?: string;
- modifiedTime?: string;
- authors?: string[];
- images?: string[];
-}
-
-export function SEO({
- title,
- description,
- locale = 'en',
- path = '/',
- type = 'website',
- publishedTime,
- modifiedTime,
- authors,
- images
-}: SEOProps): ReactElement {
- const site = getSiteInfo();
- const fullTitle = title === 'Home' ? site.title : `${title} | ${site.title}`;
- const fullDescription = description || site.description;
- const canonicalUrl = `${site.baseUrl}${path}`;
-
- // Generate alternate URLs
- const alternateLocale = locale === 'en' ? 'de' : 'en';
- const alternatePath = path === '/' ? '' : path;
- const alternateUrl = `${site.baseUrl}/${alternateLocale}${alternatePath}`;
-
- // Open Graph images
- const ogImages = images && images.length > 0
- ? images
- : [`${site.baseUrl}/og-image.jpg`];
-
- return (
- <>
- {/* Basic Meta Tags */}
-
-
- )}
-
- {/* Results count */}
-
- {enableFiltering && (
-
-
- {enableSorting && (
-
- )}
-
-
-
-
-
- )}
-
- {locale === 'de'
- ? `${filteredProducts.length} Produkte gefunden`
- : `${filteredProducts.length} products found`}
-
-
- {/* Product Grid */}
-
-
-
- {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-
- ))}
-
-
-
- )}
-
-
-
- );
-};
-
-// Main BaseCard Component
-export const BaseCard = forwardRef
-
-
-
-
-
-
- {/* eslint-disable-next-line @next/next/no-img-element */}
- 
-
- );
- };
-
- const renderHeader = () => {
- if (!header && !badge) return null;
- return (
-
- {header}
- {badge}
-
- );
- };
-
- const renderTitle = () => {
- if (!title) return null;
- return (
- - {title} -
- ); - }; - - const renderDescription = () => { - if (!description) return null; - return ( -
- {description}
-
- );
- };
-
- const renderFooter = () => {
- if (!footer) return null;
- return (
-
- {footer}
-
- );
- };
-
- // Card content
- const cardContent = (
-
- {layout === 'horizontal' && renderImage()}
-
- );
-
- // If href is provided, wrap in a Next.js Link
- if (href) {
- return (
-
-
- {renderHeader()}
- {renderTitle()}
- {renderDescription()}
- {children}
- {renderFooter()}
-
- {layout === 'vertical' && renderImage()}
-
- {Array.from({ length: count }).map((_, index) => (
-
- );
-};
-
-// Empty state component
-const EmptyState = ({
- message,
- customComponent
-}: {
- message?: string;
- customComponent?: ReactNode;
-}) => {
- if (customComponent) {
- return
-
-
- ))}
- {customComponent}
;
- }
-
- return (
-
-
- );
-};
-
-export const CardGrid: React.FC
- {message || 'No items to display'}
-
-
- {message ? '' : 'Try adjusting your filters or check back later'}
-
-
- {Array.isArray(content)
- ? content.map((item, index) => (
-
- );
-};
-
-// Grid variations
-export const CardGrid2: React.FC
- {item}
-
- ))
- : content
- }
-
- {props.items && Array.isArray(props.items)
- ? props.items.map((item, index) => (
-
- );
-};
\ No newline at end of file
diff --git a/components/cards/CardsExample.tsx b/components/cards/CardsExample.tsx
deleted file mode 100644
index 5d99a795..00000000
--- a/components/cards/CardsExample.tsx
+++ /dev/null
@@ -1,485 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import {
- BlogCard,
- ProductCard,
- CategoryCard,
- CardGrid,
- CardGrid2,
- CardGrid3,
- CardGrid4,
- CardGridAuto
-} from './index';
-import { Container, Button } from '@/components/ui';
-import { Post, Product, ProductCategory } from '@/lib/data';
-
-/**
- * CardsExample - Comprehensive example showing all card variations
- * This component demonstrates how to use the card components with real data
- */
-
-// Mock data for demonstration
-const mockPosts: Post[] = [
- {
- id: 1,
- translationKey: 'post-1',
- locale: 'de',
- slug: 'weltweite-lieferketten',
- path: '/de/blog/weltweite-lieferketten',
- title: 'Weltweite Lieferketten: Herausforderungen und Lösungen',
- titleHtml: 'Weltweite Lieferketten: Herausforderungen und Lösungen',
- contentHtml: '
- {item}
-
- ))
- : props.children
- }
- Die globalen Lieferketten stehen vor unprecedented Herausforderungen...
', - excerptHtml: 'Erfahren Sie mehr über die aktuellen Herausforderungen in globalen Lieferketten und wie wir Lösungen entwickeln.', - featuredImage: 10988, - datePublished: '2024-12-15', - updatedAt: '2024-12-15', - translation: null, - }, - { - id: 2, - translationKey: 'post-2', - locale: 'de', - slug: 'nachhaltige-energie', - path: '/de/blog/nachhaltige-energie', - title: 'Nachhaltige Energie: Die Zukunft der Stromversorgung', - titleHtml: 'Nachhaltige Energie: Die Zukunft der Stromversorgung', - contentHtml: 'Die Energiewende erfordert innovative Kabel- und Leitungslösungen...
', - excerptHtml: 'Entdecken Sie, wie moderne Kabeltechnologie zur Energiewende beiträgt.', - featuredImage: 20928, - datePublished: '2024-12-10', - updatedAt: '2024-12-10', - translation: null, - }, -]; - -const mockProducts: Product[] = [ - { - id: 1, - translationKey: 'product-1', - locale: 'de', - slug: 'n2xsfl2y-12-20kv', - path: '/de/produkte/n2xsfl2y-12-20kv', - name: 'N2XSFL2Y 12/20kV', - shortDescriptionHtml: 'Mittelspannungskabel mit LSA-Plus Verbindungssystem', - descriptionHtml: 'Das N2XSFL2Y Kabel ist für den Einsatz in Mittelspannungsnetzen optimiert...
', - images: [ - '/media/media-1766870855811-N2XSFL2Y-3-scaled.webp', - '/media/media-1766870855815-N2XSFL2Y-2-scaled.webp', - ], - featuredImage: '/media/media-1766870855811-N2XSFL2Y-3-scaled.webp', - sku: 'N2XSFL2Y-12-20KV', - regularPrice: '125.50', - salePrice: '', - currency: 'EUR', - stockStatus: 'instock', - categories: [{ id: 1, name: 'Mittelspannung', slug: 'mittelspannung' }], - attributes: [], - variations: [], - updatedAt: '2024-12-20', - translation: null, - }, - { - id: 2, - translationKey: 'product-2', - locale: 'de', - slug: 'na2xsf2x-0-6-1kv', - path: '/de/produkte/na2xsf2x-0-6-1kv', - name: 'NA2XSF2X 0,6/1kV', - shortDescriptionHtml: 'Niederspannungskabel für industrielle Anwendungen', - descriptionHtml: 'Robustes Niederspannungskabel für den industriellen Einsatz...
', - images: [ - '/media/47052-NA2XSF2X_3x1x300_RM-25_12-20kV-3.webp', - ], - featuredImage: '/media/47052-NA2XSF2X_3x1x300_RM-25_12-20kV-3.webp', - sku: 'NA2XSF2X-0-6-1KV', - regularPrice: '45.00', - salePrice: '38.50', - currency: 'EUR', - stockStatus: 'instock', - categories: [{ id: 2, name: 'Niederspannung', slug: 'niederspannung' }], - attributes: [], - variations: [], - updatedAt: '2024-12-18', - translation: null, - }, - { - id: 3, - translationKey: 'product-3', - locale: 'de', - slug: 'h1z2z2-k', - path: '/de/produkte/h1z2z2-k', - name: 'H1Z2Z2-K', - shortDescriptionHtml: 'Solarleiterkabel für Photovoltaikanlagen', - descriptionHtml: 'Spezielles Solarleiterkabel für den Einsatz in PV-Anlagen...
', - images: [ - '/media/media-1766870855813-H1Z2Z2-K-scaled.webp', - ], - featuredImage: '/media/media-1766870855813-H1Z2Z2-K-scaled.webp', - sku: 'H1Z2Z2-K', - regularPrice: '28.90', - salePrice: '', - currency: 'EUR', - stockStatus: 'onbackorder', - categories: [{ id: 3, name: 'Solar', slug: 'solar' }], - attributes: [], - variations: [], - updatedAt: '2024-12-22', - translation: null, - }, -]; - -const mockCategories: ProductCategory[] = [ - { - id: 1, - translationKey: 'cat-1', - locale: 'de', - slug: 'mittelspannung', - name: 'Mittelspannung', - path: '/de/produkt-kategorie/mittelspannung', - description: 'Kabel und Leitungen für Mittelspannungsnetze bis 36kV', - count: 12, - translation: null, - }, - { - id: 2, - translationKey: 'cat-2', - locale: 'de', - slug: 'niederspannung', - name: 'Niederspannung', - path: '/de/produkt-kategorie/niederspannung', - description: 'Kabel für Niederspannungsanwendungen bis 1kV', - count: 25, - translation: null, - }, - { - id: 3, - translationKey: 'cat-3', - locale: 'de', - slug: 'solar', - name: 'Solar', - path: '/de/produkt-kategorie/solar', - description: 'Spezielle Solarleiterkabel und Zubehör', - count: 8, - translation: null, - }, - { - id: 4, - translationKey: 'cat-4', - locale: 'de', - slug: 'industrie', - name: 'Industrie', - path: '/de/produkt-kategorie/industrie', - description: 'Industrielle Kabel für anspruchsvolle Umgebungen', - count: 18, - translation: null, - }, -]; - -export const CardsExample: React.FC = () => { - const [loading, setLoading] = useState(false); - - // Simulate loading - const simulateLoading = () => { - setLoading(true); - setTimeout(() => setLoading(false), 2000); - }; - - // Handle add to cart - const handleAddToCart = (product: Product) => { - console.log('Add to cart:', product.name); - alert(`"${product.name}" wurde zum Warenkorb hinzugefügt!`); - }; - - return ( -
-
-
- {/* Blog Cards Section */}
- - Card Components Showcase -
-- Comprehensive examples of all card variations for WordPress content -
-
-
-
- Blog Cards
- -Vertical Layout
-Horizontal Layout
-
- {mockPosts.map(post => (
-
-
- Different Sizes
-
-
- Product Cards
- -Grid Layout
-Horizontal Layout
-
- {mockProducts.map(product => (
-
-
- Image Hover Swap
-Category Cards
- -Standard Layout
-Icon-Based Layout
-Horizontal Layout
-
- {mockCategories.map(category => (
-
- Loading States
- -CardGrid Loading
- {loading && ( -Empty States
-Mixed Content Grid
-Usage Examples
- -
-
-
- Basic Blog Card
-
-{`
-
-
-
- Product Card with Cart
-
-{` console.log('Added:', p.name)}
-/>`}
-
-
- Category Card Grid
-
-{`
- {categories.map(cat => (
- `}
- Best Practices
--
-
- ✓ Use CardGrid components for consistent spacing and responsive layouts -
- ✓ Always provide alt text for images -
- ✓ Use appropriate sizes for different contexts (sm for lists, md for grids, lg for featured) -
- ✓ Enable hover effects for better user experience -
- ✓ Show loading states when fetching data -
- ✓ Handle empty states gracefully -
- ✓ Use the locale prop for internationalization -
- ✓ Integrate with your data layer using the types from lib/data.ts -
- {description &&
- );
-
- // Build icon content for vertical layout
- const iconContent = useIcon ? (
- {description}
}
- {showCount && count > 0 && (
-
- {count} {locale === 'de' ? 'Produkte' : 'Products'}
-
- )}
-
- {categoryIcon}
-
- ) : null;
-
- // Override title to include icon for horizontal layout
- const titleContent = useIcon && layout === 'horizontal' ? (
-
- {iconContent}
- {title}
-
- ) : title;
-
- return (
-
- {iconContent}
-
- )}
-
-
- {priceInfo.current}
-
- {priceInfo.isOnSale && (
-
- {priceInfo.original}
-
- )}
-
- ) : null;
-
- // Build footer with buttons
- const footer = (
-
- {showAddToCart && (
-
- )}
- {showViewDetails && (
-
- )}
-
- );
-
- // Build description with price
- const descriptionContent = (
-
- {description &&
- );
-
- // Handle image hover for swap
- const handleMouseEnter = () => {
- if (enableImageSwap && product.images && product.images.length > 1) {
- setCurrentImageIndex(1);
- }
- };
-
- const handleMouseLeave = () => {
- if (enableImageSwap) {
- setCurrentImageIndex(0);
- }
- };
-
- return (
- {description}
}
- {priceDisplay}
- {stars}
;
- };
-
- // Variant-specific styles
- const variantStyles = {
- default: 'bg-white border border-gray-200 shadow-sm',
- highlight: 'bg-gradient-to-br from-primary/5 to-secondary/5 border-primary/20 shadow-lg',
- compact: 'bg-gray-50 border border-gray-100 shadow-sm'
- };
-
- const paddingStyles = {
- default: 'p-6 md:p-8',
- highlight: 'p-6 md:p-8',
- compact: 'p-4 md:p-6'
- };
-
- const quoteIconStyles = {
- default: 'w-8 h-8 text-primary/30',
- highlight: 'w-10 h-10 text-primary/50',
- compact: 'w-6 h-6 text-primary/30'
- };
-
- return (
-
- {/* Quote Icon */}
-
- );
-};
-
-// Helper function to parse WordPress testimonial content
-export function parseWpTestimonial(content: string): Partial
-
-
- {/* Main Content */}
- -
- {/* Quote Text */}
-
-
- {/* Decorative corner accent for highlight variant */}
- {variant === 'highlight' && (
-
- )}
- - "{quote}" -- - {/* Rating */} - {rating > 0 && ( -
- {renderStars()}
-
- {rating.toFixed(1)}
-
-
- )}
-
- {/* Author Info */}
- {(author || role || company || avatar) && (
-
- {/* Avatar */}
- {avatar && (
-
- )}
-
- 
-
- )}
-
- {/* Author Details */}
-
- {author && (
-
-
- {author}
-
- )}
-
- {(role || company) && (
-
- {[role, company].filter(Boolean).join(' • ')}
-
- )}
-
- {testimonials.map((testimonial, index) => (
-
- );
-};
-
-export default TestimonialCard;
\ No newline at end of file
diff --git a/components/cards/index.ts b/components/cards/index.ts
deleted file mode 100644
index 5ef101ca..00000000
--- a/components/cards/index.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// Card Components Export
-// Base Card Component
-export { BaseCard, type BaseCardProps, type CardSize, type CardLayout } from './BaseCard';
-
-// Blog Card Components
-export {
- BlogCard,
- BlogCardVertical,
- BlogCardHorizontal,
- BlogCardSmall,
- BlogCardLarge,
- type BlogCardProps
-} from './BlogCard';
-
-// Product Card Components
-export {
- ProductCard,
- ProductCardVertical,
- ProductCardHorizontal,
- ProductCardSmall,
- ProductCardLarge,
- type ProductCardProps
-} from './ProductCard';
-
-// Category Card Components
-export {
- CategoryCard,
- CategoryCardVertical,
- CategoryCardHorizontal,
- CategoryCardSmall,
- CategoryCardLarge,
- CategoryCardIcon,
- type CategoryCardProps
-} from './CategoryCard';
-
-// Card Grid Components
-export {
- CardGrid,
- CardGrid2,
- CardGrid3,
- CardGrid4,
- CardGridAuto,
- type CardGridProps,
- type GridColumns,
- type GridGap
-} from './CardGrid';
-export { TestimonialCard, TestimonialGrid, parseWpTestimonial, type TestimonialCardProps } from './TestimonialCard';
\ No newline at end of file
diff --git a/components/content/Breadcrumbs.tsx b/components/content/Breadcrumbs.tsx
deleted file mode 100644
index 5b37b181..00000000
--- a/components/content/Breadcrumbs.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { cn } from '../../lib/utils';
-import { Container } from '../ui/Container';
-
-interface BreadcrumbItem {
- label: string;
- href?: string;
- icon?: React.ReactNode;
-}
-
-interface BreadcrumbsProps {
- items: BreadcrumbItem[];
- separator?: React.ReactNode;
- className?: string;
- showHome?: boolean;
- homeLabel?: string;
- homeHref?: string;
- collapseMobile?: boolean;
-}
-
-export const Breadcrumbs: React.FC
-
- )}
- {post.title}
- - {new Date(post.datePublished).toLocaleDateString()} - -
- {/* Product Images */}
-
-
- {product.featuredImage && (
-
-
- {/* Product Info */}
-
-
- )}
-
-
-
-
-
- {product.name}
-
-
- {product.regularPrice} {product.currency}
-
- {product.salePrice && (
-
- {product.salePrice} {product.currency}
-
- )}
-
-
- Categories:
-
- )}
-
-
- {product.categories.map((cat) => (
-
- {cat.name}
-
- ))}
-
-
-
-
-
-
- {/* Hero Section */}
- ]*>/g, '') : undefined}
- backgroundImage={featuredMedia?.localPath}
- backgroundAlt={featuredMedia?.alt || page.title}
- height="md"
- variant="dark"
- overlay
- overlayOpacity={0.5}
- />
-
- {/* Breadcrumbs */}
-
-
-
- {/* Related Posts */}
- {relatedPosts.length > 0 && (
-
-
- )}
-
- {/* CTA Section */}
-
-
-
- );
-};
-
-// Example: Blog post layout
-export const ExampleBlogPost: React.FC<{
- post: Post;
- author?: {
- name: string;
- avatar?: string;
- };
-}> = ({ post, author }) => {
- const featuredMedia = post.featuredImage ? getMediaById(post.featuredImage) : null;
-
- return (
-
-
-
- {relatedPosts.map((post) => (
-
-
-
-
-
-
-
- ))}
-
- {post.title}
-
-
- Ready to Get Started?
-- Contact us today for more information about our products and services. -
-
-
-
-
- {post.title}
-
-
- {author && (
-
-
- {author.avatar &&
- )}
-
-
- )}
-
- {/* Content */}
-
-
-
- {products.map((product) => {
- const image = product.featuredImage || product.images[0];
- return (
-
- {image && (
-
-
-
-
-
-
-
-
- );
- })}
-
-
-
- )}
- {product.name}
-
- {product.regularPrice} {product.currency}
-
-
- {renderContent()}
-
- );
-};
-
-/**
- * Check if content contains WPBakery patterns
- */
-function containsWPBakeryPatterns(html: string): boolean {
- const $ = cheerio.load(html);
- return $('.vc-row').length > 0 || $('.vc-column').length > 0;
-}
-
-/**
- * Parse WPBakery/Salient HTML patterns to React components
- * Converts vc_row/vc_column structures to modern components
- * Enhanced with page-specific patterns based on detailed analysis
- */
-function parseWPBakery(html: string): React.ReactNode[] {
- const $ = cheerio.load(html);
- const elements: React.ReactNode[] = [];
-
- // Process each vc-row
- $('.vc-row').each((i, rowEl) => {
- const $row = $(rowEl);
- const $cols = $row.find('> .vc-column');
- const colCount = $cols.length;
-
- // Check for full-width background
- const isFullWidth = $row.hasClass('full-width-bg') || $row.hasClass('full-width') || $row.attr('data-full-width');
-
- // Get background properties from data attributes
- const bgImage = $row.attr('data-bg-image') ||
- $row.attr('style')?.match(/background-image:\s*url\(([^)]+)\)/)?.[1] ||
- '';
- const bgColor = $row.attr('bg_color') || $row.attr('data-bg-color');
- const colorOverlay = $row.attr('color_overlay') || $row.attr('data-color-overlay');
- const overlayStrength = $row.attr('overlay_strength') || $row.attr('data-overlay-strength');
- const topPadding = $row.attr('top_padding');
- const bottomPadding = $row.attr('bottom_padding');
- const fullScreen = $row.attr('full_screen_row_position');
-
- // Video background attributes - enhanced detection
- const videoMp4 = $row.attr('video_mp4') || $row.attr('data-video-mp4') ||
- $row.find('[data-video-mp4]').attr('data-video-mp4');
- const videoWebm = $row.attr('video_webm') || $row.attr('data-video-webm') ||
- $row.find('[data-video-webm]').attr('data-video-webm');
-
- // Check if row has video background indicators
- const hasVideoBg = $row.attr('data-video-bg') === 'true' ||
- $row.hasClass('nectar-video-wrap') ||
- !!(videoMp4?.trim()) || !!(videoWebm?.trim());
-
- // Additional WordPress Salient props
- const enableGradient = $row.attr('enable_gradient') === 'true';
- const gradientDirection = $row.attr('gradient_direction') || 'left_to_right';
- const colorOverlay2 = $row.attr('color_overlay_2');
- const parallaxBg = $row.attr('parallax_bg') === 'true';
- const parallaxBgSpeed = $row.attr('parallax_bg_speed') || 'medium';
- const bgImageAnimation = $row.attr('bg_image_animation') || 'none';
- const textAlignment = $row.attr('text_align') || 'left';
- const textColor = $row.attr('text_color') || 'dark';
- const shapeType = $row.attr('shape_type');
- const scenePosition = $row.attr('scene_position') || 'center';
-
- // Get row text for pattern detection
- const rowText = $row.text();
-
- // PATTERN 1: Hero sections (single column with h1/h2)
- const firstCol = $cols.eq(0);
- const $title = firstCol.find('h1, h2').first();
- const hasHeroPattern = colCount === 1 && $title.length > 0;
-
- if (hasHeroPattern) {
- const title = $title.text().trim();
- const subtitle = firstCol.find('p').first().text().trim();
- const imgInCol = firstCol.find('img').first().attr('src');
- const heroBg = bgImage || imgInCol || '';
-
- // Clean up the title element from the column to avoid duplication
- const $clone = firstCol.clone();
- $clone.find('h1, h2').remove();
- $clone.find('p').first().remove();
- const remainingContent = $clone.html()?.trim();
-
- // Calculate overlay opacity
- const overlayOpacityValue = overlayStrength ? parseFloat(overlayStrength) : undefined;
-
- // Determine height based on full screen position
- let heroHeight: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'screen' = isFullWidth ? 'xl' : 'md';
- if (fullScreen === 'middle' || fullScreen === 'top' || fullScreen === 'bottom') {
- heroHeight = 'screen';
- }
-
- elements.push(
-
-
- );
- }).get();
-
- elements.push(
- {number}
-
-
- {title}
-
- {features}
-
-
-
- );
- }).get();
-
- elements.push(
-
-
- {paragraphs.map((p, idx) => (
- {number}
-
-
- {title}
-
-
- ))}
-
- {title &&
- {title}
} -- {quote} --
-
-
-
- )}
- {title && {title}
} - {desc &&
-
- )}
- '); - - // Calculate overlay opacity - const overlayOpacityValue = overlayStrength ? parseFloat(overlayStrength) : 0.5; - - elements.push( -
{title}
- 1 ? 'justify-center' : 'justify-start'
- )}>
- {buttons}
-
-
- {testimonialElements}
-
- )}
-
-
- );
- }
- });
- }
-
- if (iconFeatures.length > 0) {
- elements.push(
- = 3 ? 'md:grid md:grid-cols-3 md:gap-6 md:space-y-0' : ''
- )}>
- {iconFeatures}
-
-
-
- )}
- {title}
- {summary &&{summary}
} -
- 🔗
- {new URL(href).hostname}
-
-
- Related Resources
-
-
- );
- }
- } else {
- // Regular table - use default HTML rendering
- const tableHtml = $table.prop('outerHTML');
- if (tableHtml) {
- tableElements.push(
- Technical Specifications
--
- {specs.map((spec, idx) => (
-
- {spec.property} -
- {spec.value} -
-
- ))}
-
-
- );
- }
- }
- });
-
- if (tableElements.length > 0) {
- elements.push(
-
-
- );
- }
- });
-
- if (faqItems.length > 0) {
- elements.push(
- - {question} -
-{answer}
-Frequently Asked Questions
- {faqItems} -
-
- {title}
- {description &&{description}
} - -
-
- "
- - {quote} -- {author && ( - - — {author} - - )} -
-
- );
- }
- });
-
- if (items.length > 0) {
- elements.push(
-
-
-
-
- {text}
-
- {items}
-
-
-
-
-
-
-
- {$title.length > 0 &&
- {$title.text().trim()}
} - {$desc.length > 0 &&
-
- );
- }
-
- return elements;
-}
-
-/**
- * Parse HTML string to React elements
- * This is a safe parser that only allows specific tags and attributes
- * Works in both server and client environments
- */
-function parseHTMLToReact(html: string): React.ReactNode {
- // For server-side rendering, use a simple approach with dangerouslySetInnerHTML
- // The HTML has already been sanitized by processHTML, so it's safe
- if (typeof window === 'undefined') {
- return ;
- }
-
- // Client-side: use DOMParser for proper parsing
- // Define allowed tags and their properties
- const allowedTags = {
- div: ['className', 'id', 'style'],
- p: ['className', 'style'],
- h1: ['className', 'style'],
- h2: ['className', 'style'],
- h3: ['className', 'style'],
- h4: ['className', 'style'],
- h5: ['className', 'style'],
- h6: ['className', 'style'],
- span: ['className', 'style'],
- a: ['href', 'target', 'rel', 'className', 'title', 'style'],
- ul: ['className', 'style'],
- ol: ['className', 'style'],
- li: ['className', 'style'],
- strong: ['className', 'style'],
- b: ['className', 'style'],
- em: ['className', 'style'],
- i: ['className', 'style'],
- br: [],
- hr: ['className', 'style'],
- img: ['src', 'alt', 'width', 'height', 'className', 'style'],
- table: ['className', 'style'],
- thead: ['className', 'style'],
- tbody: ['className', 'style'],
- tr: ['className', 'style'],
- th: ['className', 'style'],
- td: ['className', 'style'],
- blockquote: ['className', 'style'],
- code: ['className', 'style'],
- pre: ['className', 'style'],
- small: ['className', 'style'],
- section: ['className', 'id', 'style'],
- article: ['className', 'id', 'style'],
- figure: ['className', 'style'],
- figcaption: ['className', 'style'],
- video: ['className', 'style', 'autoPlay', 'loop', 'muted', 'playsInline', 'poster'],
- source: ['src', 'type'],
- };
-
- // Create a temporary DOM element to parse the HTML
- const parser = new DOMParser();
- const doc = parser.parseFromString(html, 'text/html');
- const body = doc.body;
-
- // Recursive function to convert DOM nodes to React elements
- function convertNode(node: Node, index: number): React.ReactNode {
- if (node.nodeType === Node.TEXT_NODE) {
- return node.textContent;
- }
-
- if (node.nodeType !== Node.ELEMENT_NODE) {
- return null;
- }
-
- const element = node as HTMLElement;
- const tagName = element.tagName.toLowerCase();
-
- // Check if tag is allowed
- if (!allowedTags[tagName as keyof typeof allowedTags]) {
- // For unknown tags, just render their children
- return Array.from(node.childNodes).map((child, i) => convertNode(child, i));
- }
-
- // Build props
- const props: any = { key: index };
- const allowedProps = allowedTags[tagName as keyof typeof allowedTags];
-
- // Helper function to convert style string to object
- const parseStyleString = (styleStr: string): React.CSSProperties => {
- const styles: React.CSSProperties = {};
- if (!styleStr) return styles;
-
- styleStr.split(';').forEach(style => {
- const [key, value] = style.split(':').map(s => s.trim());
- if (key && value) {
- // Convert camelCase for React
- const camelKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
- (styles as any)[camelKey] = value;
- }
- });
-
- return styles;
- };
-
- // Handle special cases for different element types
- if (tagName === 'a' && element.getAttribute('href')) {
- const originalHref = element.getAttribute('href')!;
- const href = replaceUrlInAttribute(originalHref);
- const isExternal = href.startsWith('http') && !href.includes(window?.location?.hostname || '');
-
- if (isExternal) {
- props.href = href;
- props.target = '_blank';
- props.rel = 'noopener noreferrer';
- } else {
- // For internal links, use Next.js Link
- const children = Array.from(node.childNodes).map((child, i) => convertNode(child, i));
- return (
-
- {children}
-
- );
- }
- }
-
- if (tagName === 'img') {
- const src = element.getAttribute('src') || '';
- const alt = element.getAttribute('alt') || '';
- const widthAttr = element.getAttribute('width');
- const heightAttr = element.getAttribute('height');
- const dataWpImageId = element.getAttribute('data-wp-image-id');
- const srcset = element.getAttribute('srcset');
- const sizes = element.getAttribute('sizes') || '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw';
-
- // Handle WordPress image IDs
- if (dataWpImageId) {
- const media = getMediaById(parseInt(dataWpImageId));
- if (media) {
- const width = widthAttr ? parseInt(widthAttr) : (media.width || 800);
- const height = heightAttr ? parseInt(heightAttr) : (media.height || 600);
-
- return (
-
-
-
- );
- }
-
- // Handle divs with video background data attributes
- if (tagName === 'div' && element.getAttribute('data-video-bg') === 'true') {
- const className = element.className;
- const originalStyle = element.style.cssText;
- const processedStyle = replaceAssetUrlsInStyle(originalStyle);
- const style = parseStyleString(processedStyle);
- const mp4 = element.getAttribute('data-video-mp4');
- const webm = element.getAttribute('data-video-webm');
-
- const children = Array.from(node.childNodes).map((child, i) => convertNode(child, i));
-
- return (
-
- {children}
-
-
- {mp4 || webm ? (
-
- ) : null}
-
- );
- }
-
- // Standard attribute mapping
- allowedProps.forEach(prop => {
- if (prop === 'style') {
- // Handle style separately with asset URL replacement
- if (element.style.cssText) {
- const originalStyle = element.style.cssText;
- const processedStyle = replaceAssetUrlsInStyle(originalStyle);
- props.style = parseStyleString(processedStyle);
- }
- } else {
- const value = element.getAttribute(prop);
- if (value !== null) {
- props[prop] = value;
- }
- }
- });
-
- // Handle className specifically
- if (element.className && allowedProps.includes('className')) {
- props.className = element.className;
- }
-
- // Convert children
- const children = Array.from(node.childNodes).map((child, i) => convertNode(child, i));
-
- // Return React element
- return React.createElement(tagName, props, children);
- }
-
- // Convert all children of body
- return Array.from(body.childNodes).map((node, index) => convertNode(node, index));
-}
-
-/**
- * Replace WordPress asset URLs with local paths
- * Handles img src, srcset, data-src, and background-image URLs
- */
-function replaceWordPressAssets(html: string): string {
- try {
- const assetMap = getAssetMap();
- let processed = html;
-
- // Helper function to replace a single URL
- const replaceUrl = (url: string): string => {
- if (!url) return url;
-
- // Check exact match in asset map
- if (assetMap[url]) {
- return assetMap[url];
- }
-
- // Check for URL variations (http vs https, with/without www)
- const variations = [
- url,
- url.replace('https://', 'http://'),
- url.replace('http://', 'https://'),
- url.replace('https://www.', 'https://'),
- url.replace('http://www.', 'http://'),
- url.replace('www.', ''),
- ];
-
- for (const variation of variations) {
- if (assetMap[variation]) {
- return assetMap[variation];
- }
- }
-
- // Fallback: try to match by filename
- const filename = url.split('/').pop();
- if (filename) {
- for (const [wpUrl, localPath] of Object.entries(assetMap)) {
- if (wpUrl.includes(filename)) {
- return localPath;
- }
- }
- }
-
- return url;
- };
-
- // 1. Replace img src attributes
- processed = processed.replace(/src=["']([^"']+)["']/gi, (match, url) => {
- const replaced = replaceUrl(url);
- return match.replace(url, replaced);
- });
-
- // 2. Replace srcset attributes
- processed = processed.replace(/srcset=["']([^"']+)["']/gi, (match, srcset) => {
- const replaced = srcset.split(',').map((src: string) => {
- const [url, descriptor] = src.trim().split(/\s+/);
- const replacedUrl = replaceUrl(url);
- return descriptor ? `${replacedUrl} ${descriptor}` : replacedUrl;
- }).join(', ');
- return match.replace(srcset, replaced);
- });
-
- // 3. Replace data-src attributes (lazy loading)
- processed = processed.replace(/data-src=["']([^"']+)["']/gi, (match, url) => {
- const replaced = replaceUrl(url);
- return match.replace(url, replaced);
- });
-
- // 4. Replace background-image URLs in style attributes
- processed = processed.replace(/style=["']([^"']*background-image:\s*url\([^)]+\)[^"']*)["']/gi, (match, styleContent) => {
- const replaced = styleContent.replace(/url\(([^)]+)\)/gi, (urlMatch, url) => {
- // Remove quotes from URL if present
- const cleanUrl = url.replace(/^["']|["']$/g, '');
- const replacedUrl = replaceUrl(cleanUrl);
- return `url(${replacedUrl})`;
- });
- return match.replace(styleContent, replaced);
- });
-
- // 5. Replace URLs in inline style attributes for background-image
- processed = processed.replace(/background-image:\s*url\(([^)]+)\)/gi, (match, url) => {
- const cleanUrl = url.replace(/^["']|["']$/g, '');
- const replacedUrl = replaceUrl(cleanUrl);
- return `background-image: url(${replacedUrl})`;
- });
-
- // 6. Replace URLs in CSS url() functions within style tags
- processed = processed.replace(/url\(([^)]+)\)/gi, (match, url) => {
- const cleanUrl = url.replace(/^["']|["']$/g, '');
- // Only replace if it's a WordPress URL
- if (cleanUrl.includes('wp-content') || cleanUrl.includes('klz-cables')) {
- const replacedUrl = replaceUrl(cleanUrl);
- return `url(${replacedUrl})`;
- }
- return match;
- });
-
- // 7. Replace href attributes for links to media files (PDFs, etc.)
- processed = processed.replace(/href=["']([^"']+)["']/gi, (match, url) => {
- // Only replace if it's a media file URL
- if (url.includes('wp-content/uploads') && !url.match(/\.(html?|php)$/)) {
- const replaced = replaceUrl(url);
- return match.replace(url, replaced);
- }
- return match;
- });
-
- return processed;
- } catch (error) {
- console.warn('Error replacing asset URLs:', error);
- return html;
- }
-}
-
-/**
- * Convert WordPress/Salient classes to Tailwind equivalents
- * Note: vc-row and vc-column classes are preserved for pattern parsing
- */
-function convertWordPressClasses(html: string): string {
- const classMap: Record
- {children}
-
-
- {title &&
-);
-
-export const RichText: React.FC<{
- html: string;
- className?: string;
-}> = ({ html, className = '' }) => (
- {title}
} -
-
-
- {caption && (
-
-
- );
-};
-
-export const ImageGallery: React.FC<{
- images: Array<{
- src: string;
- alt: string;
- caption?: string;
- }>;
- cols?: 2 | 3 | 4;
- className?: string;
-}> = ({ images, cols = 3, className = '' }) => {
- const colClasses = {
- 2: 'grid-cols-1 md:grid-cols-2',
- 3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
- 4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
- }[cols];
-
- return (
-
- {images.map((image, index) => (
-
- );
-};
-
-export default FeaturedImage;
\ No newline at end of file
diff --git a/components/content/Hero.tsx b/components/content/Hero.tsx
deleted file mode 100644
index 3380140c..00000000
--- a/components/content/Hero.tsx
+++ /dev/null
@@ -1,438 +0,0 @@
-'use client';
-
-import React, { useEffect, useRef } from 'react';
-import Image from 'next/image';
-import { cn } from '../../lib/utils';
-import { Container } from '../ui/Container';
-import { Button } from '../ui/Button';
-
-// Hero height options
-type HeroHeight = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'screen';
-
-// Hero variant options
-type HeroVariant = 'default' | 'dark' | 'primary' | 'gradient';
-
-interface HeroProps {
- title: string;
- subtitle?: string;
- backgroundImage?: string;
- backgroundAlt?: string;
- height?: HeroHeight;
- variant?: HeroVariant;
- ctaText?: string;
- ctaLink?: string;
- ctaVariant?: 'primary' | 'secondary' | 'outline';
- overlay?: boolean;
- overlayOpacity?: number;
- children?: React.ReactNode;
- className?: string;
- // Additional props for background color and overlay
- backgroundColor?: string;
- colorOverlay?: string;
- overlayStrength?: number;
- // WordPress Salient-specific props
- enableGradient?: boolean;
- gradientDirection?: 'left_to_right' | 'right_to_left' | 'top_to_bottom' | 'bottom_to_top';
- colorOverlay2?: string;
- parallaxBg?: boolean;
- parallaxBgSpeed?: 'slow' | 'fast' | 'medium';
- bgImageAnimation?: 'none' | 'zoom-out-reveal' | 'fade-in';
- topPadding?: string;
- bottomPadding?: string;
- textAlignment?: 'left' | 'center' | 'right';
- textColor?: 'light' | 'dark';
- shapeType?: string;
- scenePosition?: 'center' | 'top' | 'bottom';
- fullScreenRowPosition?: 'middle' | 'top' | 'bottom';
- // Video background props
- videoBg?: string;
- videoMp4?: string;
- videoWebm?: string;
-}
-
-// Helper function to get height styles
-const getHeightStyles = (height: HeroHeight, fullScreenRowPosition?: string) => {
- const baseHeight = {
- sm: 'min-h-[300px] md:min-h-[400px]',
- md: 'min-h-[400px] md:min-h-[500px]',
- lg: 'min-h-[500px] md:min-h-[600px]',
- xl: 'min-h-[600px] md:min-h-[700px]',
- full: 'min-h-screen',
- screen: 'min-h-screen'
- }[height] || 'min-h-[500px] md:min-h-[600px]';
-
- // Handle full screen positioning
- if (fullScreenRowPosition === 'middle') {
- return `${baseHeight} flex items-center justify-center`;
- } else if (fullScreenRowPosition === 'top') {
- return `${baseHeight} items-start justify-center pt-12`;
- } else if (fullScreenRowPosition === 'bottom') {
- return `${baseHeight} items-end justify-center pb-12`;
- }
-
- return baseHeight;
-};
-
-// Helper function to get variant styles
-const getVariantStyles = (variant: HeroVariant) => {
- switch (variant) {
- case 'dark':
- return 'bg-gray-900 text-white';
- case 'primary':
- return 'bg-primary text-white';
- case 'gradient':
- return 'bg-gradient-to-br from-primary to-secondary text-white';
- default:
- return 'bg-gray-800 text-white';
- }
-};
-
-// Helper function to get overlay opacity
-const getOverlayOpacity = (opacity?: number) => {
- if (opacity === undefined) return 'bg-black/50';
- if (opacity >= 1) return 'bg-black';
- if (opacity <= 0) return 'bg-transparent';
- return `bg-black/${Math.round(opacity * 100)}`;
-};
-
-export const Hero: React.FC
-
-
- )}
-
- {/* Background Image with Parallax (fallback if no video) */}
- {hasBackground && !hasVideo && (
-
-
- )}
-
- {/* Background Variant (if no image) */}
- {!hasBackground && !backgroundColor && (
-
- )}
-
- {/* Gradient Overlay */}
- {hasGradient && (
-
- )}
-
- {/* Color Overlay (from WordPress color_overlay) */}
- {hasColorOverlay && (
-
- )}
-
- {/* Second Color Overlay (for gradients) */}
- {colorOverlay2 && (
-
- )}
-
- {/* Standard Overlay */}
- {overlay && hasBackground && !hasColorOverlay && (
-
- )}
-
- {/* Shape Divider (bottom) */}
- {shapeType && (
-
-
-
- )}
-
- {/* Content */}
-
-
- {/* Title */}
-
-
- - {title} -
- - {/* Subtitle */} - {subtitle && ( -- {subtitle} -
- )} - - {/* CTA Button */} - {hasCTA && ( -
-
-
- )}
-
- {/* Additional Content */}
- {children && (
-
- {children}
-
- )}
-
-
-);
-
-export const HeroActions: React.FC<{
- children: React.ReactNode;
- className?: string;
-}> = ({ children, className = '' }) => (
- {title}
- {subtitle &&{subtitle}
} - {children} -
- {children}
-
-);
-
-export default Hero;
\ No newline at end of file
diff --git a/components/content/README.md b/components/content/README.md
deleted file mode 100644
index 5e3c91ae..00000000
--- a/components/content/README.md
+++ /dev/null
@@ -1,350 +0,0 @@
-# Content Components
-
-Modern, component-based content rendering system for WordPress migration to Next.js. These components handle WordPress content display in a responsive, accessible, and SEO-friendly way.
-
-## Components Overview
-
-### 1. Hero Component (`Hero.tsx`)
-Full-width hero section with background image support, overlays, and CTAs.
-
-**Features:**
-- Background images with Next.js Image optimization
-- Text overlay for readability
-- Multiple height options (sm, md, lg, xl, full)
-- Optional CTA button
-- Responsive sizing
-- Variant support (default, dark, primary, gradient)
-
-**Usage:**
-```tsx
-import { Hero } from '@/components/content';
-
-`, `
- {subtitle}
- Subtitle Description... Detailed description... Paragraph 1... Paragraph 2... KLZ Cables Content... We've received your message...
- {helpText}
-
- {helpText}
- Simple contact form with validation Complete registration with multiple field types Advanced search with multiple filters Radio buttons for single choice selection All form components working together
- Comprehensive examples of all form components and patterns
-
- {helpText}
-
- {option.description}
-
- {helpText}
-
- {helpText}
-
- {helpText}
-
- {charCount}
- {maxLength ? ` / ${maxLength}` : ''}
- Content goes here This is a basic card with elevated variant. It includes a header, body content, and footer. Cards can include images for visual appeal. This card has a strong border and includes an icon in the header. Hover over this card to see the effect! Default Container (max-width: lg, padding: lg) Medium Container (max-width: md, padding: md) Fluid Container (full width) 12-column responsive grid: Grid with column spans: Responsive (1 col mobile, 2 tablet, 3 desktop): Color Variants: Sizes: With Icons: Rounded: Spinner Sizes: Spinner Variants: With Text: Loading Button: Skeleton Loaders:
- A comprehensive design system for your Next.js application
-
- This design system provides a complete set of reusable components
- that follow modern design principles and accessibility standards.
- Works perfectly on all devices from mobile to desktop. Follows WCAG guidelines with proper ARIA attributes. Fully typed with TypeScript for better developer experience. Ready to start building? {description} Card content goes here
- {slide.subtitle}
-
- {slide.description}
- The NA2XS(FL)2Y cable is a high-performance high-voltage cable with an aluminum conductor, XLPE insulation, and a waterproof PE sheath. It offers high operational reliability and is specifically designed for underground and demanding route installations. The NA2XS(FL)2Y meets the requirements of IEC 60840 and is suitable for installation in the ground, in cable ducts, indoors, in pipes, and outdoors. It is manufactured based on project specifications and is particularly used in transmission networks, utility infrastructures, and substations where safety and durability are top priorities. At its core, the cable features a compacted, multi-stranded aluminum conductor according to IEC 60228, embedded in a conductive inner layer, an XLPE insulation, and a fully bonded, extruded outer layer. The combination of a water-swellable tape, copper shielding with an open helix, and an additional water-swellable wrap effectively protects the cable from moisture ingress. The black PE sheath with firmly bonded aluminum tape (Alucopo) serves as both mechanical protection and a transverse water barrier. The NA2XS(FL)2Y is suitable for direct burial, mechanically robust, and offers excellent operational safety due to its partial discharge-free design and water-repellent construction. It is configured project-specifically and can be used flexibly – from urban energy projects to large industrial installations. The N2XS(FL)2Y cable is a customizable high-voltage cable featuring a well-designed protection system against water ingress and high electrical load capacity. It complies with international standards and is ideally suited for demanding energy infrastructure projects. The N2XS(FL)2Y is designed for installation in the ground, in cable ducts, pipes, outdoor areas, and indoor spaces. It complies with the IEC 60840 standard and can be tailored to specific project requirements. It is typically used in transmission networks, substations, and large industrial facilities where maximum reliability is essential. The cable features a multi-stranded copper conductor (class 2 according to IEC 60228). The insulation consists of cross-linked polyethylene (XLPE), embedded between a conductive inner layer and a conductive outer insulation layer. A water-swellable tape, together with copper wires and an open copper helix, provides effective shielding. The outer sheath is made of PE, firmly bonded with an aluminum laminate (Alucopo) – optimal protection against mechanical stress and moisture. The N2XS(FL)2Y is waterproof, suitable for underground installation, and resistant to mechanical stress – and thanks to its multi-layered shielding and water-blocking structure, it is particularly suited for critical high-voltage applications. Electrical performance is calculated based on the project – allowing precise adaptation to grid operation requirements. The H1Z2Z2-K cable is a highly flexible, halogen-free solar cable for modern photovoltaic systems. It meets the highest standards for safety, weather resistance, and electrical performance – for both indoor and outdoor use. The H1Z2Z2-K complies with DIN EN 50618 (VDE 0283-618) and is specifically designed for the cabling of photovoltaic systems. It can be installed permanently or used flexibly – indoors, outdoors, in industrial facilities, agricultural operations, or even in hazardous (explosive) areas. The cable is UV-, ozone- and water-resistant (AD7) and can be laid directly in the ground. The finely stranded tinned copper conductor (class 5) is double protected by cross-linked insulation and a cross-linked outer sheath made of polyolefin copolymer – halogen-free, flame-retardant, and highly abrasion-resistant. The cable is designed for a maximum conductor temperature of 120 °C and remains reliably flexible even at -40 °C (fixed installation). Its low smoke emission and high resistance to mechanical and thermal stress ensure safe, long-term operation. Halogen-free, flame-retardant, UV- and ozone-resistant Short-circuit and earth fault proof according to VDE-AR-E 2283-4 Approved for indoor, outdoor and hazardous (explosive) areas Suitable for direct burial CPR performance class: Eca The NA2X(F)K2Y high-voltage cable series is designed for industrial applications requiring robust electrical performance, featuring copper conductors and XLPE insulation suitable for voltage classes up to 110kV. Primarily used in power transmission and distribution networks. The NA2X(F)K2Y high-voltage cable series is engineered to meet the rigorous demands of modern industrial and power distribution applications. It combines high-grade copper conductors with cross-linked polyethylene (XLPE) insulation, ensuring superior dielectric strength and thermal cycling resilience. This cable series is optimized for high ampacity and excellent fault current withstand capabilities, making it ideal for environments where reliability and durability are paramount. The construction adheres to strict IEC compliance standards, ensuring both performance and safety. The NA2X(F)K2Y series not only meets IEC standards but also features a robust design to ensure electromagnetic compatibility (EMC). This design minimizes induced voltage effects, crucial in densely populated cable routes and close proximity to sensitive equipment. The N2X(F)K2Y high-voltage cable series, designed for 64/110kV applications, utilizes copper conductors and XLPE insulation to meet the rigorous demands of industrial power distribution and transmission. These cables are engineered for high ampacity and fault current withstand in diverse installation environments. The N2X(F)K2Y high-voltage cable series is tailored for robust performance in high-voltage power systems, featuring copper conductors and cross-linked polyethylene (XLPE) insulation. This combination ensures high dielectric strength and excellent thermal cycling resistance, crucial for maintaining integrity and functionality over long operational periods. Designed to support a wide range of industrial applications, the N2X(F)K2Y cable series excels in environments requiring high ampacity and effective fault current management. The cables' construction supports efficient heat dissipation and reduces the risk of thermal degradation even under high load conditions. Installation techniques such as trefoil formation, direct burial, and cable tray mounting are compatible with this series, providing flexibility and ease of deployment in varied operational landscapes. The N2X(F)K2Y series adheres to stringent IEC standards and meets CPR classification requirements, ensuring compliance with international safety and quality benchmarks. Additionally, the cables are designed to minimize electromagnetic interference, enhancing electromagnetic compatibility (EMC) and reducing induced voltages, which is critical in densely packed power installations. The NA2X(F)KLD2Y high-voltage cable series is designed for industrial applications requiring high voltage class and robust performance, featuring copper conductors and XLPE insulation suitable for direct burial and cable tray installations. The NA2X(F)KLD2Y high-voltage cable series is engineered to meet the rigorous demands of modern industrial electrical networks, offering high dielectric strength and excellent thermal cycling resistance. This series is ideal for applications that require reliable power distribution in high-voltage settings. This cable series is built with high-conductivity stranded copper conductors, ensuring superior ampacity and efficient power transmission. The cross-linked polyethylene (XLPE) insulation provides enhanced thermal properties and dielectric strength, critical for maintaining integrity under high voltage and temperature conditions. The NA2X(F)KLD2Y series supports various installation methods including direct burial and cable tray mounting. Its robust construction allows for installation in trefoil formation, optimizing space and reducing induced voltages. The N2X(F)KLD2Y-high-voltage-cables-2 series is designed for high-voltage applications, utilizing stranded copper conductors and XLPE insulation to ensure high ampacity and robust performance in industrial settings. The N2X(F)KLD2Y-high-voltage-cables-2 series is engineered to meet the rigorous demands of high-voltage power transmission with a focus on durability, efficiency, and safety. This series is ideal for applications requiring high dielectric strength and excellent thermal cycling resistance. This cable series is designed to optimize both electrical and thermal performance, making it suitable for a variety of installation environments: The cable's construction adheres to stringent IEC standards and carries the CE marking, affirming its compliance with the Construction Products Regulation (CPR classification). Furthermore, it is designed to minimize electromagnetic interference: The NA2XS(FL)2Y cable is a longitudinally watertight medium-voltage cable with an aluminium conductor, XLPE insulation, and a combined Al/PE sheath. It has been specifically developed for power supply networks that demand high mechanical strength and reliable protection against water ingress. The NA2XS(FL)2Y complies with standards DIN VDE 0276-620, HD 620 S2 and IEC 60502. It is ideal for installation in power supply networks (utilities), indoors, in cable ducts, outdoors, in soil, and in water. Thanks to its longitudinally watertight design and Al/PE sheath construction, it remains operational even when damaged – water ingress is effectively limited to the affected area. The cable features a multi-stranded aluminium conductor (Class 2 according to VDE 0295 / IEC 60228), surrounded by XLPE insulation with a tightly bonded outer conductive layer. A conductive, longitudinally watertight tape and a copper wire screen with counter helix ensure reliable field control. The cable is also equipped with a longitudinally watertight aluminum tape that is laminated to the black PE sheath. The result: high protection against mechanical stress and moisture ingress. The NA2XS(FL)2Y cable is suitable for underground installation, free from silicone and cadmium, and suited for environments with high mechanical stress. It withstands temperatures up to +90 °C in operation and up to +250 °C under short-circuit conditions. Thanks to its partial discharge-free design and water barrier, it is particularly well suited for critical supply areas in power infrastructure. The NA2XS(F)2Y cable is a longitudinally watertight medium-voltage cable with an aluminium conductor, XLPE insulation, and a durable PE sheath. It is designed for energy-efficient and safe installation in the ground and critical network areas. The NA2XS(F)2Y complies with standards DIN VDE 0276-620, HD 620 S2 and IEC 60502. It is suitable for installation indoors, in cable ducts, underground, in water, outdoors, or on cable trays. Its main applications are in utility grids, industrial facilities, and substations, where additional safety reserves against moisture ingress and mechanical stress are required. The conductor consists of multi-stranded aluminium (Class 2), surrounded by an inner conductive layer and XLPE insulation with a tightly bonded outer conductive layer – extruded in a single process for maximum operational safety. The shielding is provided by a copper wire braid with counter helix, complemented by a longitudinally watertight tape. The outer sheath is made of black PE (Type DMP2) and reliably protects against mechanical stress and moisture. The NA2XS(F)2Y is suitable for underground installation, free from silicone and cadmium, and resistant to paint-wetting impairment substances. It withstands continuous temperatures up to +90 °C and tolerates short-circuit loads up to +250 °C. Thanks to its well-designed, partial discharge-free structure, it is particularly well suited for safe power distribution in moist and complex installation environments. The NA2XS2Y cable is a high-performance medium-voltage cable with an aluminium conductor, XLPE insulation, and a robust PE sheath. It is perfectly suited for underground applications and impresses with its thermal load capacity, mechanical durability, and partial discharge-free design. The NA2XS2Y complies with DIN VDE 0276-620, HD 620 S2 and IEC 60502 standards, and is specifically designed for fixed installation indoors, in cable ducts, outdoors, in soil and water. It is commonly used in industrial facilities, switching stations, and power plants, especially where the cable is exposed to high mechanical stress during installation or operation. The cable features a multi-stranded aluminium conductor (Class 2 according to DIN VDE 0295 / IEC 60228). The XLPE insulation (Type DIX8) is inseparably bonded to the outer conductive layer and, together with the inner conductive layer, ensures partial discharge-free operation. The shielding consists of a copper wire braid with counter helix. The black PE sheath (Type DMP2) protects against moisture, mechanical pressure, and chemical exposure – but is not flame-retardant. NA2XS2Y is suitable for underground installation and for use at temperatures as low as -20 °C. It is free from silicone and cadmium, contains no paint-wetting impairment substances, and handles a continuous operating temperature of up to +90 °C, and up to +250 °C in short-circuit conditions. The black PE sheath makes this cable the ideal high-resilience solution for permanent underground medium-voltage installations. The NA2XSY cable is a medium-voltage cable with aluminium conductor, XLPE insulation, and copper shielding, suitable for underground installation. It is designed for demanding power distribution tasks and stands out for its high operational reliability, excellent installation properties, and thermal resistance up to 90 °C. The NA2XSY meets the requirements of DIN VDE 0276-620, HD 620 S2, and IEC 60502. It is suitable for installation indoors, in cable ducts, underground, in water, or outdoors – but only when installed with protection. Typical areas of application include industrial plants, power stations, and switching stations where medium voltage must be transported with high operational safety. The conductor consists of multi-stranded aluminium (Class 2 according to VDE 0295 / IEC 60228). The XLPE insulation is permanently bonded to the outer conductive layer to ensure a partial discharge-free structure. The structure also includes an inner conductive layer, conductive tape, a copper wire screen with counter helix, additional tape, and a red PVC sheath. The cable is flame-retardant and approved for underground installation (depending on the type). Thanks to its precise construction, the NA2XSY can also be easily installed in complex routing scenarios. It is free from silicone and cadmium, contains no paint-wetting impairment substances, and withstands short-circuit temperatures up to +250 °C. The concentric structure and tightly bonded conductive layers make this cable a reliable solution for medium-voltage power distribution where operational safety and ease of installation are essential. The N2XS(FL)2Y cable is a longitudinally watertight medium-voltage cable with a copper conductor, XLPE insulation, and a tightly bonded Al/PE sheath. It offers maximum operational safety for critical infrastructures and provides reliable protection against penetrating moisture. The N2XS(FL)2Y meets the standards DIN VDE 0276-620, HD 620 S2 and IEC 60502. It is ideally suited for installation indoors, in cable ducts, outdoors, in soil, in water, and on cable trays – especially in utility grids, industrial plants, and switching stations, where high demands on mechanical strength and water resistance apply. The cable design is based on a multi-stranded copper conductor (Class 2), an XLPE insulation with an extruded, tightly bonded outer conductive layer, and a longitudinally watertight, conductive tape. The shielding consists of copper wires with counter helix, complemented by an additional longitudinally watertight tape. The outer protection is achieved with a black PE sheath laminated with an aluminum tape – serving as an effective water barrier. The N2XS(FL)2Y is suitable for underground installation, designed for outdoor use, and withstands operating temperatures up to +90 °C and short-circuit loads up to +250 °C. It is free from silicone and cadmium and contains no substances that interfere with paint wetting. Thanks to its partial discharge-free design and the Al/PE layer, it is ideally suited for humid environments with high safety requirements. The N2XS(F)2Y cable is a longitudinally watertight medium-voltage cable with a copper conductor, XLPE insulation, and a durable PE sheath. It combines high electrical safety with a rugged outer layer, making it ideal for demanding grid operation applications. The N2XS(F)2Y complies with common standards DIN VDE 0276-620, HD 620 S2 and IEC 60502, and is suitable for installation indoors, in cable ducts, outdoors, in water, underground, and on cable trays. This cable proves its strengths especially in utility grids, industrial plants, and power stations – wherever durability, watertightness, and safety are essential. Inside is a bare, multi-stranded copper conductor (Class 2), surrounded by an extruded XLPE insulation with inner and bonded outer conductive layer. A longitudinally watertight, conductive tape, a copper wire screen with counter helix, and an additional longitudinally watertight layer ensure the design's integrity. The black PE outer sheath (Type DMP2) provides high mechanical strength. The N2XS(F)2Y is suitable for underground installation, resistant to aggressive environmental conditions, and withstands temperatures up to +90 °C in continuous operation and +250 °C in short-circuit conditions. It is free from silicone and cadmium-containing substances and, thanks to its partial discharge-free design, particularly suitable for networks with the highest demands on electrical operational safety and longevity. The N2XS2Y cable is a robust medium-voltage cable with a copper conductor, XLPE insulation, and a durable PE sheath. It ensures reliable power transmission even under high mechanical stress and demanding environmental conditions. The N2XS2Y complies with the standards DIN VDE 0276-620, HD 620 S2 and IEC 60502. It is suitable for installation indoors, in cable ducts, outdoors, in water, on cable trays, and especially underground. Thanks to its robust sheath, it is frequently used in industrial plants, power stations, and switching stations, where stability and durability are essential. The conductor consists of bare, multi-stranded copper (Class 2), surrounded by an inner conductive layer and XLPE insulation with a tightly bonded outer conductive layer. The shielding is provided by a copper wire braid with counter helix. Additionally, the cable includes a conductive tape and features a black PE sheath (Type DMP2) that protects against moisture and mechanical abrasion. The N2XS2Y is suitable for underground installation, free from silicone and cadmium, and not flame-retardant. It is rated for +90 °C in operation and +250 °C under short-circuit conditions. Thanks to its partial discharge-free design, it offers a high level of safety and is particularly well-suited for networks with heavy load and challenging routing conditions. The N2XSY cable is a high-performance medium-voltage cable with a copper conductor, XLPE insulation, and a PVC sheath. It offers excellent electrical characteristics and can be installed safely and efficiently, even in complex routing situations. The N2XSY meets the standards DIN VDE 0276-620, HD 620 S2 and IEC 60502. It is designed for installation indoors, in cable ducts, in water, underground, or outdoors (when protected). Whether in industrial plants, power stations, or substations – this cable ensures safe and low-loss power transmission in medium-voltage networks. The cable consists of a bare, multi-stranded copper conductor (Class 2), surrounded by XLPE insulation with a tightly bonded outer conductive layer. A conductive tape, a copper wire screen with counter helix, additional tape, and a red PVC sheath (Type DMV6) complete the construction. The extruded combination of insulation and conductive layer ensures partial discharge-free operation and high reliability. The N2XSY cable is suitable for underground installation, flame-retardant according to DIN VDE 0482-332-1-2, and free from silicone and cadmium-containing substances. With a +90 °C operating temperature and +250 °C short-circuit resistance, it is ideal for networks with high thermal loads. Excellent installation properties also allow for easy handling, even in complex routing scenarios. The NA2X2Y cable is a durable low-voltage cable with an aluminium conductor, PE insulation, and an HDPE sheath. It has been developed for fixed installations under increased mechanical stress and is particularly suitable for demanding industrial and energy infrastructure applications. The NA2X2Y complies with DIN VDE 0276-603 (HD 603) and is designed for fixed installation indoors, in cable ducts, underground, in water, or outdoors. It is primarily used in power plants, industrial facilities, and switching stations as well as local distribution networks – wherever robust cables are needed that can withstand high mechanical stress during installation and operation. The electrical conductor consists of aluminium, available as solid round (RE), stranded round (RM), or sector-shaped (SE/SM). The cores are PE-insulated, stranded together, and protected by a common EPDM sheath. The outer sheath is made of HDPE, black, UV-resistant, and highly resistant to abrasion, pressure, and moisture – ideal for long-term installations in demanding environments. NA2X2Y cables provide a technically robust and cost-efficient solution for power distribution in networks with increased requirements. Their high mechanical strength and weather resistance make them the first choice for demanding infrastructure applications in the energy and industrial sectors. The NA2XY cable is a robust low-voltage cable with an aluminium conductor, PE insulation, and a PVC sheath. It is designed for fixed installation under increased mechanical stress and is particularly suitable for power distribution in industrial and public supply networks. The NA2XY complies with DIN VDE 0276-603 (HD 603) and is ideal for fixed installation in indoor spaces, cable ducts, outdoors, in water, or underground. Typical areas of application include power plants, industrial facilities, and switching stations as well as local distribution networks, where mechanical stress during operation must be considered. The conductor is made of aluminium, available as solid round (RE) or stranded round (RM). The cores are insulated with PE (polyethylene), which provides excellent electrical insulation and high thermal resistance. The black PVC sheath is UV-resistant and reliably protects against moisture and environmental influences. NA2XY cables are the right choice for stable power distribution under mechanically demanding conditions. They provide an economical, durable solution for utilities, industry, and plant operators who rely on proven technology and high resilience. The N2X2Y cable is an XLPE-insulated low-voltage cable with an HDPE sheath, developed for fixed installations under demanding conditions. It stands out for its high thermal endurance and is ideally suited for use in power distribution systems with increased safety requirements. The N2X2Y complies with HD 603 S1 Part 5G and HD 627 S1 Part 4H (equivalent to DIN VDE 0276-603 and -627) and is designed for an operating frequency of 50 Hz. It is suitable for fixed installation indoors, underground, outdoors, and in industrial environments with high temperature and load requirements. The maximum operating temperature is +90 °C, and +250 °C is permissible under short-circuit conditions. The cable structure consists of copper conductors with XLPE insulation (cross-linked polyethylene). The cores are stranded and surrounded by a robust black HDPE sheath. The integrated concentric conductor made of copper wires is grounded at both ends and provides effective protection against potential differences and contact voltages. N2X2Y is ideal for installations in local networks, substations, and industrial plants as well as in power distribution systems, where high thermal endurance and mechanical strength are required. It provides a durable solution for demanding operating conditions – reliable and safe. The N2XY cable is an unarmoured low-voltage cable for power and control applications up to 0.6/1 kV. It is suitable for fixed installation in buildings, outdoors, in humid environments, and for direct burial – wherever no special mechanical stresses occur. The N2XY is used in low-voltage systems for power distribution – for example in cable trays, conduits, on walls, or directly underground. It can be installed both indoors and outdoors and is also suitable for humid environments. Thanks to various core configurations (single-core to four-core) and cross-sections up to 630 mm², the cable can be flexibly adapted to the respective application. The conductor consists of solid or stranded copper (RE or RM), with the cores insulated with XLPE (cross-linked polyethylene). The cable is embedded in a PVC filler compound and surrounded by a PVC outer sheath, which protects it against environmental influences and normal mechanical stress. N2XY is available as N2XY-J (with protective conductor) and N2XY-O (without protective conductor). It offers a space-saving, economical solution for low-voltage distribution without compromising on safety or quality. Typical applications include commercial and residential buildings, system installations, as well as connections between switchgear and distribution boards. The NAY2Y cable is an especially robust low-voltage cable with an aluminium conductor and an HDPE sheath, specifically developed for installations with high mechanical stress. It stands out for its durability in demanding environments – whether in industrial facilities, transformer stations, or local networks. The NAY2Y meets the requirements of TP PRAKAB 12/03 based on VDE 0276-603 and is suitable for fixed installation indoors, in cable ducts, underground, in water, and outdoors. It is ideal for applications in power plants, industrial and switching stations, as well as local supply networks – wherever mechanical stress during installation or operation plays a significant role. The conductor is made of aluminium, available as solid round (RE), stranded round (RM), or sector-shaped (SE/SM). The PVC-insulated cores are stranded together and protected by a common EPDM sheath. The outer sheath of HDPE (black, UV-resistant) makes the cable particularly resistant to pressure, abrasion, and moisture – perfect for long-term installations under challenging conditions. NAY2Y cables are the first choice for cabling projects with high loads, such as in industrial network construction or outdoor power distribution. They offer a robust, durable, and cost-efficient solution for stable power supply in a wide variety of environments. The NAYCWY cable is a shielded low-voltage cable with an aluminium conductor and a concentric copper conductor. It has been specifically developed for applications requiring additional protection against contact voltages – such as in industrial networks, local grids, or power distribution systems. The NAYCWY complies with DIN VDE 0276-603 (HD 603) and is suitable for use in power plants, industrial facilities, switching stations, and local networks. It can be permanently installed – indoors, in cable ducts, outdoors, underground, or in water. Thanks to its concentric conductor, it offers additional protection in case of mechanical damage and enables safe potential equalization. The electrical conductor consists of aluminium, available as stranded round (RM), sector-shaped solid (SE), or stranded (SM). The PVC core insulation and a common EPDM sheath protect the stranded cores. On top lies a concentric conductor made of bare copper wires with copper tape counter helix – ideally usable as PE or PEN conductor. A black UV-resistant PVC sheath reliably seals the cable from the outside. NAYCWY cables are used wherever electrical safety and shielding are required. The concentric conductor does not need to be separated when connecting to branch joints, which simplifies installation. This makes the cable particularly suitable for modern low-voltage networks with increased requirements for operational safety and contact protection. The NAYY cable is a versatile low-voltage cable with an aluminium conductor, designed for fixed installation in buildings, underground, in water, or outdoors. It provides a cost-effective solution for power distribution under normal mechanical requirements – ideal for local networks, industrial facilities, and power supply systems. The NAYY is a power distribution cable according to VDE 0276-603, particularly suitable for use in power plants, local networks, industrial facilities, and switching stations. Thanks to its robust design, it can be installed permanently – whether indoors, in cable ducts, outdoors, or underground. Even when installed in water, the cable remains reliable in operation. At its core is an aluminium conductor, available as solid round (RE), stranded round (RM), or sector-shaped (SE/SM). The conductors are PVC-insulated, stranded together, and protected by a common EPDM sheath. The outer PVC sheath is black, UV-resistant, and resistant to moisture and environmental influences. NAYY cables are ideally suited for permanent, cost-effective installations in supply networks, distribution systems, or building wiring. They provide a solid and durable solution for safe power distribution under standardized conditions. The NY2Y is an especially robust low-voltage cable for fixed installation under high mechanical demands – whether underground, in water, or in industrial environments. Thanks to its material combination, it is perfectly suited for a wide range of application conditions. The NY2Y is a low-voltage cable for use in power plants, industrial facilities, switching stations, and local distribution networks. It is suitable for fixed installation indoors, in cable ducts, outdoors, in water, and underground – wherever strong mechanical stress is expected during installation and operation. The construction complies with TP PRAKAB 16/03 based on VDE 0276-603. The cable consists of a copper conductor, available as solid round (RE), stranded round (RM), or sector-shaped stranded (SM). The PVC core insulation ensures electrical safety, while the cores are stranded together and protected by a common EPDM sheath. The outer sheath made of HDPE (black, UV-resistant) makes the NY2Y particularly resistant to abrasion, moisture, and environmental influences. NY2Y is ideally suited for applications with increased requirements for mechanical strength and weather resistance. Typical fields of use include power distribution in industrial plants, power stations, or transformer stations – but also in environments with moisture, direct sunlight, or chemical exposure. NYCWY cables are robust low-voltage cables with a concentric conductor, suitable for power distribution in buildings, industrial facilities, and underground installations. Thanks to their PVC insulation and sheath, they are mechanically durable, moisture-resistant, and versatile in use – even in concrete or water. The NYCWY is one of the classic low-voltage cables according to VDE standard and is designed for rated voltages up to 1 kV. It is used wherever reliable energy distribution is required – in buildings, industrial plants, transformer stations, or directly underground. It can also be easily installed in cable trays, concrete environments, or underwater. The choice of materials ensures that this cable withstands even harsh conditions – without the need for additional protective measures. The design is technically well thought out: a copper conductor forms the core, surrounded by PVC insulation that is both mechanically robust and electrically safe. This is followed by a concentric conductor in a corrugated shape, which serves as a protective or return conductor depending on the application. The outer layer is a durable PVC sheath that protects the cable against moisture, pressure, and chemical influences. The NYCWY is available in a wide range of versions – for example, 4x25/16, 4x70/35, or 4x185/95. The first number group indicates the number and cross-section of the current-carrying conductors, the second refers to the concentric conductor. This flexibility allows the cable to be adapted to different network requirements – from house connections to industrial power distribution. The NYY is a universally applicable low-voltage cable for fixed installation in buildings, outdoors, underground, or even in water – wherever no special mechanical stresses are to be expected. The NYY cable is a standardized low-voltage cable according to VDE 0276-603. It is used in power plants, industrial facilities, switching stations, and local distribution networks. It is suitable for fixed installation indoors, in cable ducts, outdoors, underground, and in water – always under the condition that no special mechanical stresses are present. The conductor consists of copper – available as solid round (RE), stranded round (RM), or sector-shaped stranded (SM). The cores are PVC-insulated, stranded together, and surrounded by a common EPDM core sheath. The outer sheath is made of black, UV-resistant PVC and reliably protects the cable against environmental influences and moisture. The NYY cable is ideally suited for conventional power distribution, where simple and durable technology is required. It is preferably used in places where installation is possible without increased mechanical demands – for example, inside buildings, in supply lines, or for underground installation in standard local networks. Das NA2XS(FL)2Y Kabel ist ein leistungsstarkes Hochspannungskabel mit Aluminiumleiter, XLPE-Isolation und wasserdichtem PE-Mantel. Es bietet hohe Betriebssicherheit und ist speziell für erdverlegte und anspruchsvolle Trassen konzipiert. Das NA2XS(FL)2Y erfüllt die Anforderungen der IEC 60840 und eignet sich für die Verlegung im Boden, in Kabelkanälen, Innenräumen, Rohren und im Freien. Es wird projektbezogen gefertigt und ist besonders in Übertragungsnetzen, Energieversorgerinfrastrukturen und Umspannwerken im Einsatz, wo Sicherheit und Langlebigkeit oberste Priorität haben. Im Kern arbeitet ein kompaktierter, mehrdrähtiger Aluminiumleiter nach IEC 60228, eingebettet in eine leitfähige Innenschicht, eine XLPE-Isolation und eine vollständig haftende, extrudierte Außenschicht. Die Kombination aus quellfähiger Bandierung, Kupferabschirmung mit offener Wendel und einer weiteren quellfähigen Bandage schützt das Kabel effektiv vor eindringender Feuchtigkeit. Der schwarze PE-Mantel mit fest verschweißtem Aluminiumband (Alucopo) dient gleichzeitig als mechanischer Schutz und Querwassersperre. Das NA2XS(FL)2Y ist erdverlegbar, mechanisch belastbar und bietet durch seinen teilentladungsfreien Aufbau und die wasserabweisende Konstruktion eine sehr hohe Betriebssicherheit. Es wird projektbezogen konfiguriert und ist flexibel einsetzbar – von urbanen Energieprojekten bis zu industriellen Großanlagen. Das N2XS(FL)2Y Kabel ist ein anpassbares Hochspannungskabel mit durchdachtem Schutzaufbau gegen Wassereintritt und hoher elektrischer Belastbarkeit. Es erfüllt internationale Normen und eignet sich ideal für anspruchsvolle Energieinfrastrukturen. Das N2XS(FL)2Y ist konzipiert für die Verlegung im Erdreich, in Kabelkanälen, in Rohren, im Freien und in Innenräumen. Es entspricht der Norm IEC 60840 und lässt sich individuell auf projektspezifische Anforderungen anpassen. Typisch eingesetzt wird es in Übertragungsnetzen, Umspannwerken und großen Industrieanlagen, wo maximale Zuverlässigkeit gefordert ist. Das Kabel verfügt über einen mehrdrähtigen Kupferleiter (Klasse 2 nach IEC 60228). Die Isolation besteht aus vernetztem Polyethylen (XLPE), eingebettet zwischen einer leitfähigen Innenschicht und einer leitfähigen äußeren Isolationsschicht. Eine quellfähige Bandierung sorgt gemeinsam mit Kupferdrähten und einer offenen Kupferwendel für eine effektive Abschirmung. Der Außenmantel besteht aus PE, das mit einer Aluminiumkaschierung (Alucopo) fest verbunden ist – optimaler Schutz gegen mechanische Belastung und Feuchtigkeit. Das N2XS(FL)2Y ist wasserdicht, erdverlegbar und mechanisch belastbar – und dank seiner mehrschichtigen Schirm- und Quellstruktur besonders für kritische Hochspannungsanwendungen geeignet. Die elektrische Leistungsfähigkeit wird projektbezogen berechnet – so lässt sich das Kabel exakt an die Anforderungen im Netzbetrieb anpassen. Das H1Z2Z2-K Kabel ist ein hochflexibles, halogenfreies Solarkabel für moderne Photovoltaikanlagen. Es erfüllt höchste Anforderungen an Sicherheit, Wetterbeständigkeit und elektrische Belastbarkeit – sowohl im Innen- als auch im Außeneinsatz. Das H1Z2Z2-K entspricht der Norm DIN EN 50618 (VDE 0283-618) und ist speziell für die Verkabelung von Photovoltaiksystemen konzipiert. Es kann fest verlegt oder flexibel geführt werden – im Gebäude, im Freien, in Industrieanlagen, landwirtschaftlichen Betrieben oder sogar in explosionsgefährdeten Bereichen. Die Leitung ist UV-, ozon- und wasserbeständig (AD7) und darf direkt in der Erde verlegt werden. Der feindrähtige verzinnt Kupferleiter (Klasse 5) ist doppelt geschützt durch eine vernetzte Isolierung und einen vernetzten Außenmantel aus Polyolefincopolymer – halogenfrei, flammwidrig und mit hoher Abriebfestigkeit. Das Kabel ist für eine maximale Leitertemperatur von 120 °C ausgelegt und bleibt auch bei -40 °C (fest verlegt) zuverlässig flexibel. Die geringe Rauchentwicklung und hohe Beständigkeit gegenüber mechanischen und thermischen Einflüssen sorgen für einen sicheren, langjährigen Betrieb. Halogenfrei, flammwidrig, UV- und ozonbeständig Kurzschluss- und erdschlusssicher gemäß VDE-AR-E 2283-4 Zugelassen für Innenräume, Außenbereiche und explosionsgefährdete Zonen Geeignet für direkte Erdverlegung CPR-Leistungsklasse: Eca Die NA2X(F)K2Y-Hochspannungskabelserie ist für Spannungsklassen von 64/110kV konzipiert und verwendet hochleitfähige Kupferleiter, ideal für industrielle Anwendungen, die hohe Strombelastbarkeit und ausgezeichnete Durchschlagsfestigkeit erfordern. Die NA2X(F)K2Y-Hochspannungskabelserie ist speziell für den Einsatz in Hochspannungsanwendungen entwickelt worden, wobei sie sich durch eine hohe Strombelastbarkeit und exzellente Kurzschlussstromfestigkeit auszeichnet. Diese Kabel sind mit einer fortschrittlichen XLPE-Isolierung ausgestattet, die eine hohe Durchschlagsfestigkeit und Thermozyklierungsfähigkeit bietet. Die NA2X(F)K2Y-Kabel sind für verschiedene Verlegeverfahren wie Erdverlegung, Kabeltrassen-Montage und Kleeblattformation geeignet. Diese Flexibilität in der Installation macht sie zu einer bevorzugten Wahl für vielfältige industrielle Anwendungen. Die Einhaltung internationaler und regionaler Normen ist für die NA2X(F)K2Y-Kabelserie von entscheidender Bedeutung. Diese Produkte sind vollständig IEC-konform und tragen die CE-Kennzeichnung, was ihre Qualität und Sicherheit in verschiedenen Anwendungsbereichen bestätigt. Die N2X(F)K2Y-Hochspannungskabelserie ist für Spannungsklassen von 64/110kV ausgelegt und verwendet hochleitfähige Kupferleiter, ideal für anspruchsvolle industrielle und infrastrukturelle Anwendungen, einschließlich Erdverlegung und Kabeltrassen-Montage. Die N2X(F)K2Y-Hochspannungskabelserie ist speziell für den Einsatz in Hochspannungsanwendungen konzipiert, wobei sie eine optimale Leistung durch die Verwendung von hochleitfähigem Kupfer und einer fortschrittlichen XLPE-Isolierung bietet. Diese Kombination gewährleistet eine hohe Durchschlagsfestigkeit und eine effiziente Thermozyklierung unter verschiedenen Betriebsbedingungen. Die Kabel der N2X(F)K2Y-Serie sind für ihre hohe Strombelastbarkeit und Kurzschlussstromfestigkeit bekannt, was sie zu einer zuverlässigen Wahl für kritische Infrastrukturen macht. Die elektromagnetische Verträglichkeit wird durch eine sorgfältige Konstruktion sichergestellt, die Spannungsinduzierungen minimiert und die Signalintegrität in komplexen Installationsszenarien bewahrt. Die Kabel entsprechen den internationalen Normen, einschließlich IEC-Konformität und CPR-Klassifizierung, und sind mit der CE-Kennzeichnung versehen. Diese Zertifizierungen bestätigen die Eignung der Kabel für den Einsatz unter den anspruchsvollsten Bedingungen und garantieren eine hohe Sicherheit und Zuverlässigkeit. Verfügbar in mehreren Konfigurationen, um den unterschiedlichen Anforderungen der Projekte gerecht zu werden, bietet die N2X(F)K2Y-Serie eine flexible Lösung für Hochspannungsanwendungen. Die NA2X(F)KLD2Y-Hochspannungskabelserie ist speziell für hohe Spannungsklassen (64/110kV) konzipiert und verwendet hochleitfähige Kupferleiter, ideal für industrielle Anwendungen, die hohe Strombelastbarkeit und Durchschlagsfestigkeit erfordern. Die NA2X(F)KLD2Y-Hochspannungskabelserie ist für den Einsatz in Hochspannungsanwendungen konzipiert und bietet eine optimale Lösung für anspruchsvolle industrielle Umgebungen. Mit ihrer fortschrittlichen XLPE-Isolierung und Kupferleitern erfüllt sie hohe Anforderungen an die Durchschlagsfestigkeit und Thermozyklierung. Die Kabelserie ist entwickelt, um eine hohe Strombelastbarkeit und Kurzschlussstromfestigkeit zu gewährleisten. Die Verwendung von hochreinem Kupfer maximiert die Leitfähigkeit und unterstützt effiziente Energieübertragung. Die XLPE-Isolierung bietet eine hervorragende thermische Beständigkeit und ermöglicht den Einsatz in verschiedenen thermischen Bedingungen. Die NA2X(F)KLD2Y-Kabelserie unterstützt diverse Verlegeverfahren wie Erdverlegung, Kabeltrassen-Montage und Kleeblattformation, was ihre Vielseitigkeit in der praktischen Anwendung unterstreicht. Sie entspricht den internationalen Normen, inklusive IEC-Konformität, CPR-Klassifizierung und trägt die CE-Kennzeichnung. Das N2X(F)KLD2Y-Hochspannungskabel der Serie 2 ist für Spannungsklassen von 64/110kV ausgelegt und verwendet hochleitfähige Kupferleiter, ideal für industrielle Hochspannungsanwendungen mit anspruchsvollen Umgebungsbedingungen. Die N2X(F)KLD2Y-Hochspannungskabel Serie 2 sind speziell für den Einsatz in Hochspannungsanwendungen konzipiert, wobei sie eine optimale Leistung durch die Verwendung von hochleitfähigen Kupferleitern und einer fortschrittlichen XLPE-Isolierung bieten. Diese Kabelserie ist besonders geeignet für anspruchsvolle industrielle Umgebungen, wo hohe Durchschlagsfestigkeit und Thermozyklierungsfähigkeit erforderlich sind. Die Kabel der Serie N2X(F)KLD2Y sind für ihre hohe Strombelastbarkeit und ausgezeichnete Kurzschlussstromfestigkeit bekannt. Die spezielle Konstruktion mit Kupferleitern und XLPE-Isolierung sorgt für eine hohe Durchschlagsfestigkeit und verbesserte thermische Eigenschaften, was sie ideal für den Einsatz in Hochspannungsnetzen macht. Die Kabelserie erfüllt strenge Anforderungen an die elektromagnetische Verträglichkeit (EMV), minimiert Spannungsinduzierungen und sorgt für eine zuverlässige Funktion in elektromagnetisch anspruchsvollen Umgebungen. Die Einhaltung der IEC-Normen, CPR-Klassifizierung und die CE-Kennzeichnung bestätigen die hohe Qualität und Sicherheit dieser Kabelserie. Das NA2XS(FL)2Y Kabel ist ein längswasserdichtes Mittelspannungskabel mit Aluminiumleiter, VPE-Isolation und einem kombinierten Alu-/PE-Mantel. Es wurde speziell für Versorgungsnetze entwickelt, bei denen hohe mechanische Belastbarkeit und Schutz gegen Wassereintritt gefordert sind. Das NA2XS(FL)2Y erfüllt die Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es ist ideal für die Verlegung in Energieversorgungsnetzen (EVU), Innenräumen, Kabelkanälen, im Freien, in Erde und in Wasser geeignet. Dank seiner Konstruktion mit längswasserdichter Ausführung und Alu-PE-Schichtenmantel bleibt es auch bei Beschädigungen betriebssicher – der Wassereinfluss wird gezielt auf die Schadstelle begrenzt. Das Kabel besitzt einen mehrdrähtigen Aluminiumleiter (Kl. 2 nach VDE 0295 / IEC 60228), umgeben von einer VPE-Isolierung mit festhaftender äußerer Leitschicht. Eine leitfähige, längswasserdichte Bandierung sowie eine Kupferdraht-Abschirmung mit Querleitwendel sorgen für zuverlässige Feldsteuerung. Zusätzlich ist das Kabel mit einer längswasserdichten Aluminiumbandierung ausgestattet, die fest mit dem schwarzen PE-Mantel verschweißt ist. Das Ergebnis: hoher Schutz vor mechanischer Belastung und eindringender Feuchtigkeit. Das NA2XS(FL)2Y Kabel ist erdverlegbar, silikon- und cadmiumfrei und eignet sich für Umgebungen mit hoher mechanischer Beanspruchung. Es hält Temperaturen bis +90 °C im Betrieb und bis +250 °C im Kurzschlussfall stand. Dank teilentladungsfreiem Aufbau und Querwassersperre ist es besonders gut für kritische Versorgungsbereiche in der Energieinfrastruktur geeignet. Das NA2XS(F)2Y Kabel ist ein längswasserdichtes Mittelspannungskabel mit Aluminiumleiter, VPE-Isolation und einem widerstandsfähigen PE-Mantel. Es wurde für die energieeffiziente und sichere Verlegung in Erdreich und kritischen Netzbereichen entwickelt. Das NA2XS(F)2Y entspricht den Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es eignet sich für die Verlegung in Innenräumen, Kabelkanälen, im Erdreich, im Wasser, im Freien oder auf Kabelpritschen. Der Einsatzschwerpunkt liegt in EVU-Netzen, Industrieanlagen und Umspannwerken, wo zusätzliche Sicherheitsreserven gegen eindringende Feuchtigkeit und mechanische Belastung erforderlich sind. Der Leiter besteht aus mehrdrähtigem Aluminium (Klasse 2), umgeben von einer inneren Leitschicht und einer VPE-Isolierung mit festhaftender äußerer Leitschicht – extrudiert in einem Arbeitsgang für maximale Betriebssicherheit. Die Abschirmung erfolgt durch eine Kupferdraht-Umspinnung mit Querleitwendel, ergänzt durch eine längswasserdichte Bandierung. Der Außenmantel besteht aus schwarzem PE (Typ DMP2) und schützt zuverlässig vor mechanischer Beanspruchung und Feuchtigkeit. Das NA2XS(F)2Y ist erdverlegbar, silikon- und cadmiumfrei sowie resistent gegen lackbenetzungsstörende Substanzen. Es hält Dauertemperaturen bis +90 °C stand und übersteht Kurzschlussbelastungen bis +250 °C. Dank seines durchdachten, teilentladungsfreien Aufbaus ist es besonders gut geeignet für die sichere Energieverteilung in feuchten, komplexen Installationsumgebungen. Das NA2XS2Y Kabel ist ein hoch belastbares Mittelspannungskabel mit Aluminiumleiter, VPE-Isolierung und widerstandsfähigem PE-Mantel. Es eignet sich hervorragend für erdverlegte Anwendungen und überzeugt durch thermische Belastbarkeit, mechanische Robustheit und teilentladungsfreien Aufbau. Das NA2XS2Y erfüllt die Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502 und ist speziell für die feste Verlegung in Innenräumen, Kabelkanälen, im Freien, in Erde und in Wasser ausgelegt. Es findet seinen Einsatz in Industrieanlagen, Schaltstationen und Kraftwerken, besonders dort, wo das Kabel beim Verlegen oder im Betrieb mechanisch stark beansprucht wird. Das Kabel ist mit einem mehrdrähtigen Aluminiumleiter (Kl. 2 nach DIN VDE 0295 / IEC 60228) ausgestattet. Die VPE-Isolation (Typ DIX8) ist untrennbar mit der äußeren Leitschicht verbunden und sorgt gemeinsam mit der inneren Leitschicht für einen teilentladungsfreien Betrieb. Die Abschirmung erfolgt über eine Umspinnung aus Kupferdrähten mit Querleitwendeln. Der Außenmantel aus schwarzem PE (Typ DMP2) schützt vor Feuchtigkeit, mechanischem Druck und chemischen Einflüssen – allerdings ohne Flammwidrigkeit. NA2XS2Y ist erdverlegbar und für den Einsatz bei Temperaturen ab -20 °C geeignet. Es ist silikon- und cadmiumfrei, frei von lackbenetzungsstörenden Stoffen und erreicht eine Betriebstemperatur von bis zu +90 °C, im Kurzschlussfall sogar bis +250 °C. Der schwarze PE-Mantel macht das Kabel zur ideal belastbaren Lösung für dauerhafte, unterirdische Mittelspannungsinstallationen. Das NA2XSY Kabel ist ein erdverlegbares Mittelspannungskabel mit Aluminiumleiter, VPE-Isolation und Kupferschirmung. Es wurde für anspruchsvolle Energieverteilungen konzipiert und überzeugt durch hohe Betriebssicherheit, gute Verlegeeigenschaften und thermische Belastbarkeit bis 90 °C. Das NA2XSY erfüllt die Anforderungen der Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es eignet sich für die Verlegung in Innenräumen, Kabelkanälen, im Erdreich, im Wasser oder im Freien – allerdings nur bei geschützter Verlegung. Typische Einsatzorte sind Industrieanlagen, Kraftwerke und Schaltanlagen, in denen Mittelspannung mit hoher Betriebssicherheit transportiert werden muss. Der Leiter besteht aus mehrdrähtigem Aluminium (Kl. 2 nach VDE 0295 / IEC 60228). Die VPE-Isolierung ist dauerhaft mit der äußeren Leitschicht verbunden, um eine teilentladungsfreie Struktur zu gewährleisten. Der Aufbau umfasst außerdem eine innere Leitschicht, leitfähige Bandierung, eine Cu-Abschirmung mit Querleitwendeln, zusätzliche Bandierung sowie einen roten PVC-Mantel. Das Kabel ist flammwidrig und für Erdverlegung freigegeben (je nach Typ). Dank seines präzisen Aufbaus lässt sich das NA2XSY auch bei komplexer Trassenführung gut verlegen. Es ist silikon- und cadmiumfrei, enthält keine lackbenetzungsstörenden Stoffe und hält Kurzschlusstemperaturen bis +250 °C stand. Der konzentrische Aufbau und die festhaftenden Leitschichten machen dieses Kabel zur zuverlässigen Lösung für mittelspannungsgeführte Energieverteilungen, bei denen Betriebssicherheit und Montagefreundlichkeit entscheidend sind. Das N2XS(FL)2Y Kabel ist ein längswasserdichtes Mittelspannungskabel mit Kupferleiter, VPE-Isolation und fest verschweißtem Al/PE-Mantel. Es bietet maximale Betriebssicherheit für kritische Infrastrukturen und schützt zuverlässig gegen eindringende Feuchtigkeit. Das N2XS(FL)2Y erfüllt die Standards DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es eignet sich hervorragend für die Verlegung in Innenräumen, Kabelkanälen, im Freien, in Erde, im Wasser sowie auf Kabelpritschen – insbesondere in EVU-Netzen, Industrieanlagen und Schaltstationen, wo erhöhte Anforderungen an mechanische Belastbarkeit und Wasserdichtigkeit bestehen. Der Kabelaufbau basiert auf einem mehrdrähtigen Kupferleiter (Klasse 2), einer VPE-Isolation mit extrudierter, fest haftender äußerer Leitschicht, sowie einer längswasserdichten, leitfähigen Bandierung. Die Abschirmung besteht aus Kupferdrähten mit Querleitwendel, ergänzt durch eine weitere längswasserdichte Bandierung. Der äußere Schutz wird durch eine fest mit dem schwarzen PE-Mantel verschweißte Aluminiumbandierung realisiert – sie wirkt als effektive Querwassersperre. Das N2XS(FL)2Y ist erdverlegbar, für Außenanwendungen geeignet und hält Betriebstemperaturen bis +90 °C sowie Kurzschlussbelastungen bis +250 °C stand. Es ist silikon- und cadmiumfrei und enthält keine lackbenetzungsstörenden Substanzen. Dank seines teilentladungsfreien Aufbaus und der Al/PE-Schicht ist es bestens geeignet für feuchte Umgebungen mit erhöhtem Sicherheitsbedarf. Das N2XS(F)2Y Kabel ist ein längswasserdichtes Mittelspannungskabel mit Kupferleiter, VPE-Isolation und widerstandsfähigem PE-Mantel. Es kombiniert hohe elektrische Sicherheit mit robuster Außenschicht für anspruchsvolle Anwendungen im Netzbetrieb. Das N2XS(F)2Y erfüllt die gängigen Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502 und ist für die Verlegung in Innenräumen, Kabelkanälen, im Freien, in Wasser, Erde und auf Kabelpritschen geeignet. Besonders in EVU-Netzen, Industrieanlagen und Kraftwerken spielt dieses Kabel seine Stärken aus – überall dort, wo Langlebigkeit, Wasserdichtigkeit und Sicherheit gefragt sind. Im Inneren befindet sich ein blanker, mehrdrähtiger Kupferleiter (Klasse 2), umgeben von einer extrudierten VPE-Isolation mit innerer und haftender äußerer Leitschicht. Eine längswasserdichte, leitfähige Bandierung, eine Abschirmung aus Kupferdrähten mit Querleitwendeln und eine zusätzliche längswasserdichte Lage sichern den Aufbau. Der schwarze PE-Außenmantel (Typ DMP2) sorgt für hohe mechanische Belastbarkeit. Das N2XS(F)2Y ist erdverlegbar, resistent gegen aggressive Umwelteinflüsse und hält Temperaturen bis +90 °C im Dauerbetrieb sowie +250 °C im Kurzschlussfall stand. Es ist frei von silikon- und cadmiumhaltigen Stoffen und dank des teilentladungsfreien Aufbaus besonders geeignet für Netze mit höchsten Anforderungen an elektrische Betriebssicherheit und Langlebigkeit. Das N2XS2Y Kabel ist ein robustes Mittelspannungskabel mit Kupferleiter, VPE-Isolation und widerstandsfähigem PE-Mantel. Es bietet eine zuverlässige Energieübertragung selbst bei hoher mechanischer Belastung und anspruchsvollen Umweltbedingungen. Das N2XS2Y erfüllt die Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es eignet sich zur Verlegung in Innenräumen, Kabelkanälen, im Freien, im Wasser, auf Kabelpritschen und insbesondere im Erdreich. Aufgrund seines widerstandsfähigen Mantels wird es häufig in Industrieanlagen, Kraftwerken und Schaltstationen eingesetzt, wo Stabilität und Langlebigkeit gefordert sind. Der Leiter besteht aus blankem, mehrdrähtigem Kupfer (Klasse 2), umgeben von einer inneren Leitschicht und einer VPE-Isolierung mit festhaftender äußerer Leitschicht. Die Abschirmung erfolgt über eine Kupferdraht-Umspinnung mit Querleitwendeln. Zusätzlich ist das Kabel mit einer leitfähigen Bandierung versehen und besitzt einen schwarzen PE-Mantel (Typ DMP2), der vor Feuchtigkeit und mechanischem Abrieb schützt. Das N2XS2Y ist erdverlegbar, silikon- und cadmiumfrei sowie nicht flammwidrig. Es ist für Temperaturen bis +90 °C im Betrieb und +250 °C im Kurzschlussfall ausgelegt. Dank seines teilentladungsfreien Aufbaus bietet es ein hohes Maß an Sicherheit und ist besonders gut für Netze mit hoher Belastung und schwieriger Trassenführung geeignet. Das N2XSY Kabel ist ein leistungsfähiges Mittelspannungskabel mit Kupferleiter, VPE-Isolation und PVC-Mantel. Es bietet hervorragende elektrische Eigenschaften und lässt sich auch bei komplexen Trassenführungen sicher und effizient verlegen. Das N2XSY erfüllt die Normen DIN VDE 0276-620, HD 620 S2 und IEC 60502. Es ist ausgelegt für die Verlegung in Innenräumen, Kabelkanälen, im Wasser, im Erdreich oder im Freien (bei geschützter Installation). Ob in Industrieanlagen, Kraftwerken oder Schaltanlagen – dieses Kabel sorgt für eine sichere und verlustarme Energieübertragung im Mittelspannungsbereich. Das Kabel besteht aus einem blanken, mehrdrähtigen Kupferleiter (Kl. 2), der von einer VPE-Isolation mit festhaftender äußerer Leitschicht umgeben ist. Eine leitfähige Bandierung, eine Abschirmung aus Kupferdrähten mit Querleitwendel, zusätzliche Bandierung und ein roter PVC-Mantel (Typ DMV6) runden den Aufbau ab. Die extrudierte Kombination von Isolierung und Leitschicht sorgt für einen teilentladungsfreien Betrieb und hohe Zuverlässigkeit. Das N2XSY Kabel ist erdverlegbar, flammwidrig nach DIN VDE 0482-332-1-2 und frei von silikon- und cadmiumhaltigen Stoffen. Mit +90 °C Betriebstemperatur und +250 °C Kurzschlussresistenz eignet es sich ideal für Netze mit hoher thermischer Belastung. Die ausgezeichneten Verlegeeigenschaften ermöglichen auch bei schwieriger Streckenführung eine einfache Handhabung. Das NA2X2Y Kabel ist ein strapazierfähiges Niederspannungskabel mit Aluminiumleiter, PE-Isolation und HDPE-Mantel. Es wurde für feste Verlegungen unter erhöhter mechanischer Beanspruchung entwickelt und eignet sich besonders für anspruchsvolle industrielle und energietechnische Infrastrukturen. Das NA2X2Y entspricht der Norm DIN VDE 0276-603 (HD 603) und ist ausgelegt für die feste Verlegung in Innenräumen, Kabelkanälen, im Erdreich, im Wasser oder im Freien. Es kommt bevorzugt in Kraftwerken, Industrieanlagen, Schaltanlagen und Ortsnetzen zum Einsatz – überall dort, wo robuste Kabel gefragt sind, die im Betrieb und bei der Verlegung hohen mechanischen Belastungen standhalten. Der elektrische Leiter besteht aus Aluminium, wahlweise als rund eindrähtig (RE), rund mehrdrähtig (RM) oder sektorförmig (SE/SM). Die Adern sind mit PE isoliert, verseilt und durch eine gemeinsame EPDM-Aderumhüllung geschützt. Der Außenmantel besteht aus HDPE, ist schwarz, UV-beständig und besonders widerstandsfähig gegenüber Abrieb, Druck und Feuchtigkeit – ideal für langfristige Installationen in anspruchsvollen Umgebungen. NA2X2Y Kabel bieten eine technisch robuste und wirtschaftliche Lösung für die Energieverteilung in Netzen mit erhöhten Anforderungen. Ihre hohe mechanische Belastbarkeit und Witterungsbeständigkeit machen sie zur ersten Wahl für anspruchsvolle Infrastrukturanwendungen im Energie- und Industriesektor. Das NA2XY Kabel ist ein robustes Niederspannungskabel mit Aluminiumleiter, PE-Isolation und PVC-Mantel. Es ist für feste Verlegung unter erhöhter mechanischer Belastung konzipiert und eignet sich besonders für Energieverteilungen in industriellen und öffentlichen Versorgungsnetzen. Das NA2XY entspricht der Norm DIN VDE 0276-603 (HD 603) und ist ideal für die feste Verlegung in Innenräumen, Kabelkanälen, im Freien, im Wasser oder im Erdreich geeignet. Typische Einsatzorte sind Kraftwerke, Industrieanlagen, Schaltanlagen sowie Ortsnetze, bei denen mechanische Belastung im Betrieb berücksichtigt werden muss. Der Leiter besteht aus Aluminium, verfügbar als rund eindrähtig (RE) oder rund mehrdrähtig (RM). Die Adern sind mit PE (Polyethylen) isoliert, was dem Kabel eine sehr gute elektrische Isolation und hohe thermische Belastbarkeit verleiht. Der schwarze PVC-Mantel ist UV-beständig und schützt zuverlässig vor Feuchtigkeit und Umgebungseinflüssen. NA2XY Kabel sind die richtige Wahl für stabile Energieverteilungen unter mechanisch anspruchsvollen Bedingungen. Sie bieten eine wirtschaftliche, langlebige Lösung für Netzbetreiber, Industrie und Anlagenbauer, die auf bewährte Technik und hohe Belastbarkeit setzen. Das N2X2Y Kabel ist ein VPE-isoliertes Niederspannungskabel mit HDPE-Mantel, das für feste Verlegungen unter anspruchsvollen Bedingungen entwickelt wurde. Es überzeugt durch seine hohe thermische Belastbarkeit und ist optimal für den Einsatz in Energieverteilungen mit erhöhten Sicherheitsanforderungen geeignet. Das N2X2Y entspricht den Normen HD 603 S1 Teil 5G und HD 627 S1 Teil 4H (gleichlautend mit DIN VDE 0276-603 und -627) und ist für eine Betriebsfrequenz von 50 Hz ausgelegt. Es eignet sich für die feste Verlegung in Innenräumen, im Erdreich, im Freien und in Industrieumgebungen mit hohen Temperatur- und Belastungsanforderungen. Die maximale Betriebstemperatur liegt bei +90 °C, im Kurzschlussfall sind +250 °C zulässig. Der Kabelaufbau besteht aus Kupferleitern mit VPE-Isolation (vernetztes Polyethylen). Die Adern sind verseilt und von einem robusten, schwarzen HDPE-Mantel umgeben. Der integrierte konzentrische Leiter aus Kupferdrähten wird an beiden Enden geerdet und sorgt für effektiven Schutz gegen Potenzialunterschiede und Berührungsspannungen. N2X2Y ist ideal für Installationen in Ortsnetzen, Umspannwerken, Industrieanlagen und Energieverteilungen, bei denen hohe thermische Belastbarkeit und mechanische Widerstandskraft gefragt sind. Es bietet eine langlebige Lösung für anspruchsvolle Einsatzbedingungen – zuverlässig und sicher. Das N2XY Kabel ist ein nicht armiertes Niederspannungskabel für Strom- und Steueranwendungen bis 0,6/1 kV. Es eignet sich für feste Verlegung in Gebäuden, im Freien, in feuchter Umgebung sowie bei direkter Erdverlegung – überall dort, wo keine besonderen mechanischen Belastungen auftreten. Das N2XY wird in Niederspannungsanlagen zur Energieverteilung eingesetzt – zum Beispiel in Kabeltrassen, Rohren, auf Wänden oder direkt im Erdreich. Es lässt sich sowohl im Innen- als auch im Außenbereich installieren und ist auch für feuchte Umgebungen geeignet. Dank verschiedener Aderkonfigurationen (einadrig bis vieradrig) und Querschnitten bis 630 mm² lässt sich das Kabel flexibel an die jeweilige Anwendung anpassen. Als Leiter dient massives oder mehrdrähtiges Kupfer (RE oder RM), die Adern sind mit XLPE (vernetztem Polyethylen) isoliert. Das Kabel ist eingebettet in eine PVC-Füllmasse und wird von einem PVC-Außenmantel umgeben, der das Kabel gegen Umwelteinflüsse und mechanische Beanspruchung im Normalbereich schützt. N2XY ist sowohl als N2XY-J (mit Schutzleiter) als auch als N2XY-O (ohne Schutzleiter) verfügbar. Es bietet eine platzsparende, wirtschaftliche Lösung für Verteilungen im Niederspannungsbereich, ohne auf Sicherheit oder Qualität zu verzichten. Typische Einsatzorte sind Gewerbe- und Wohnbauten, Anlageninstallationen sowie Verbindungen zwischen Schaltschränken und Verteilungen. Das NAY2Y Kabel ist ein besonders robustes Niederspannungskabel mit Aluminiumleiter und HDPE-Mantel, das speziell für Installationen mit hoher mechanischer Beanspruchung entwickelt wurde. Es überzeugt durch seine Widerstandsfähigkeit in anspruchsvollen Umgebungen – ob in Industrieanlagen, Trafostationen oder Ortsnetzen. Das NAY2Y erfüllt die Anforderungen der Norm TP PRAKAB 12/03 in Anlehnung an VDE 0276-603 und eignet sich für die feste Verlegung in Innenräumen, Kabelkanälen, im Erdreich, im Wasser und im Außenbereich. Es ist ideal für Anwendungen in Kraftwerken, Industrie- und Schaltanlagen sowie in lokalen Versorgungsnetzen – überall dort, wo mechanische Belastung im Betrieb oder bei der Verlegung eine Rolle spielt. Der Leiter besteht aus Aluminium, wahlweise als rund eindrähtig (RE), rund mehrdrähtig (RM) oder sektorförmig (SE/SM). Die PVC-isolierten Adern sind verseilt und werden von einer gemeinsamen EPDM-Aderumhüllung geschützt. Der äußere Mantel aus HDPE (schwarz, UV-beständig) macht das Kabel besonders widerstandsfähig gegenüber Druck, Abrieb und Feuchtigkeit – perfekt für langfristige Installationen unter schwierigen Bedingungen. NAY2Y Kabel sind erste Wahl bei Verkabelungsprojekten mit hoher Belastung, etwa im industriellen Netzbau oder bei der Energieverteilung im Außenbereich. Sie bieten eine robuste, langlebige und kosteneffiziente Lösung für stabile Stromversorgung in verschiedensten Umgebungen. Das NAYCWY Kabel ist ein geschirmtes Niederspannungskabel mit Aluminiumleiter und konzentrischem Leiter aus Kupfer. Es wurde speziell für Anwendungen entwickelt, bei denen zusätzlicher Schutz gegen Berührungsspannungen gefordert ist – etwa in industriellen Netzen, Ortsnetzen oder Energieverteilanlagen. Das NAYCWY entspricht der Norm DIN VDE 0276-603 (HD 603) und eignet sich für den Einsatz in Kraftwerken, Industrieanlagen, Schaltanlagen und Ortsnetzen. Es lässt sich fest verlegen – in Innenräumen, Kabelkanälen, im Freien, im Erdreich oder in Wasser. Dank des konzentrischen Leiters bietet es zusätzlichen Schutz bei mechanischer Beschädigung und ermöglicht eine sichere Potenzialführung. Der elektrische Leiter besteht aus Aluminium, wahlweise rund mehrdrähtig (RM), sektorförmig eindrähtig (SE) oder mehrdrähtig (SM). Die PVC-Aderisolation und eine gemeinsame EPDM-Aderumhüllung schützen die verseilten Adern. Darüber liegt ein konzentrischer Leiter aus blanken Kupferdrähten mit Kupferband-Querleitwendel – ideal als PE oder PEN-Leiter verwendbar. Ein schwarzer, UV-beständiger PVC-Mantel schließt das Kabel zuverlässig nach außen ab. NAYCWY Kabel kommen immer dann zum Einsatz, wenn elektrische Sicherheit und Schirmung gefragt sind. Der konzentrische Leiter muss beim Anschluss an Abzweigmuffen nicht getrennt werden, was die Montage vereinfacht. Damit ist das Kabel besonders geeignet für moderne Niederspannungsnetze mit erhöhten Anforderungen an Betriebssicherheit und Berührungsschutz. Das NAYY Kabel ist ein vielseitiges Niederspannungskabel mit Aluminiumleiter, das für die feste Verlegung in Gebäuden, im Erdreich, im Wasser oder im Freien konzipiert ist. Es bietet eine wirtschaftliche Lösung für Energieverteilungen unter normalen mechanischen Anforderungen – ideal für Ortsnetze, Industrieanlagen und Energieversorgungen. Das NAYY ist ein Energieverteilungskabel nach VDE 0276-603, das sich besonders für Anwendungen in Kraftwerken, Ortsnetzen, Industrie- und Schaltanlagen eignet. Dank seiner robusten Konstruktion lässt es sich fest verlegen – sei es im Innenraum, im Kabelkanal, im Freien oder im Erdreich. Auch bei Installation in Wasser bleibt das Kabel zuverlässig im Betrieb. Im Inneren arbeitet ein Aluminiumleiter, der wahlweise rund eindrähtig (RE), rund mehrdrähtig (RM) oder sektorförmig (SE/SM) ausgeführt ist. Die Leiter sind mit PVC isoliert, verseilt und durch eine gemeinsame EPDM-Aderumhüllung geschützt. Der äußere PVC-Mantel ist schwarz, UV-beständig und widerstandsfähig gegenüber Feuchtigkeit und Umweltbedingungen. NAYY Kabel eignen sich optimal für dauerhafte, wirtschaftliche Installationen in Versorgungsnetzen, Verteileranlagen oder bei Gebäudeverkabelungen. Sie bieten eine solide und langlebige Lösung, wenn es um sichere Energieverteilung unter standardisierten Bedingungen geht. Das NY2Y ist ein besonders widerstandsfähiges Niederspannungskabel für die feste Verlegung unter hohen mechanischen Anforderungen – ob im Erdreich, im Wasser oder in industrieller Umgebung. Dank seiner Materialkombination ist es für vielfältige Einsatzbedingungen bestens geeignet. Das NY2Y ist ein Niederspannungskabel für den Einsatz in Kraftwerken, Industrie- und Schaltanlagen sowie in Ortsnetzen. Es eignet sich für die feste Verlegung in Innenräumen, Kabelkanälen, im Freien, im Wasser und im Erdreich – überall dort, wo starke mechanische Belastungen beim Verlegen und im Betrieb zu erwarten sind. Die Konstruktion erfüllt die Vorgaben gemäß TP PRAKAB 16/03 in Anlehnung an VDE 0276-603. Das Kabel besteht aus einem Kupferleiter, verfügbar als rund eindrähtig (RE), rund mehrdrähtig (RM) oder sektorförmig mehrdrähtig (SM). Die PVC-Aderisolation sorgt für elektrische Sicherheit, die Adern sind verseilt und durch eine gemeinsame EPDM-Aderumhüllung geschützt. Der Außenmantel aus HDPE (schwarz, UV-beständig) macht das NY2Y besonders resistent gegen Abrieb, Feuchtigkeit und Umwelteinflüsse. NY2Y eignet sich hervorragend für Anwendungen mit erhöhten Anforderungen an mechanische Robustheit und Witterungsbeständigkeit. Typische Einsatzorte sind Energieverteilungen in industriellen Anlagen, Kraftwerken oder Trafostationen – aber auch in Umgebungen mit Feuchtigkeit, direkter Sonneneinstrahlung oder chemischer Belastung. NYCWY Kabel sind robuste Niederspannungskabel mit konzentrischem Leiter, geeignet für die Energieverteilung in Gebäuden, Industrieanlagen und bei Erdverlegung. Durch PVC-Isolierung und -Mantel sind sie mechanisch stabil, feuchtigkeitsresistent und vielseitig einsetzbar – auch in Beton oder Wasser. Das NYCWY gehört zu den klassischen Niederspannungskabeln nach VDE-Standard und ist für Nennspannungen bis 1 kV ausgelegt. Es kommt überall dort zum Einsatz, wo Energie zuverlässig verteilt werden muss – in Gebäuden, Industrieanlagen, Trafostationen oder direkt im Erdreich. Auch in Kabeltrassen, Betonumgebungen oder unter Wasser lässt es sich problemlos verlegen. Die Materialwahl sorgt dafür, dass dieses Kabel selbst unter rauen Bedingungen durchhält – ganz ohne zusätzliche Schutzmaßnahmen. Der Aufbau ist technisch durchdacht: Ein Kupferleiter bildet das Herzstück, umgeben von einer PVC-Isolierung, die mechanisch robust und elektrisch sicher ist. Darauf folgt ein konzentrischer Leiter in Wellenform, der je nach Anwendung als Schutz- oder Rückleiter dient. Den äußeren Abschluss bildet ein widerstandsfähiger PVC-Mantel, der das Kabel vor Feuchtigkeit, Druck und chemischen Einflüssen schützt. Erhältlich ist das NYCWY in einer Vielzahl von Ausführungen – zum Beispiel als 4x25/16, 4x70/35 oder 4x185/95. Die erste Zahlengruppe steht für die Anzahl und den Querschnitt der stromführenden Leiter, die zweite für den konzentrischen Leiter. Damit lässt sich das Kabel flexibel an verschiedene Netzanforderungen anpassen – vom Hausanschluss bis zur industriellen Energieverteilung. Das NYY ist ein universell einsetzbares Niederspannungskabel für feste Verlegung in Gebäuden, im Freien, im Erdreich oder sogar im Wasser – überall dort, wo keine besonderen mechanischen Belastungen zu erwarten sind. Das NYY Kabel ist ein standardisiertes Niederspannungskabel nach VDE 0276-603. Es kommt in Kraftwerken, Industrie- und Schaltanlagen sowie in Ortsnetzen zum Einsatz. Geeignet ist es für die feste Verlegung in Innenräumen, Kabelkanälen, im Freien, im Erdreich und in Wasser – immer unter der Voraussetzung, dass keine besonderen mechanischen Beanspruchungen auftreten. Der Leiter besteht aus Kupfer – wahlweise rund eindrähtig (RE), rund mehrdrähtig (RM) oder sektorförmig mehrdrähtig (SM). Die Adern sind mit PVC isoliert, verseilt und von einer gemeinsamen EPDM-Aderumhüllung umgeben. Der Außenmantel besteht aus schwarzem, UV-beständigem PVC und schützt das Kabel zuverlässig gegen Umwelteinflüsse und Feuchtigkeit. Das NYY Kabel eignet sich ideal für konventionelle Energieverteilungen, bei denen es auf einfache, langlebige Technik ankommt. Es wird bevorzugt dort eingesetzt, wo die Verlegung ohne erhöhte mechanische Anforderungen erfolgen kann – zum Beispiel im Gebäudeinneren, in Versorgungsleitungen oder bei der Erdverlegung im klassischen Ortsnetz. Stand November 2024 Diese Liefer- und Zahlungsbedingungen (L&Z) der KLZ Vertriebs GmbH gelten ausschließlich; entgegenstehende oder von unseren Bedingungen abweichende Bedingungen des Kunden erkennen wir nicht an, es sei denn, wir hätten ausdrücklich schriftlich ihrer Geltung zugestimmt. Unsere L&Z gelten auch dann, wenn wir in Kenntnis entgegenstehender oder von unseren L&Z abweichender Bedingungen des Bestellers die Lieferung an diesen vorbehaltlos ausführen. Unsere L&Z gelten nur gegenüber Unternehmern im Sinn von § 310 Abs. 1 BGB sowie juristischen Personen des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen. Nebenabreden, Vorbehalte, Änderungen, Ergänzungen usw. bedürfen zu ihrer Wirksamkeit unserer schriftlichen Bestätigung. Hinweise auf die Geltung gesetzlicher Vorschriften haben nur klarstellende Bedeutung. Auch ohne eine derartige Klarstellung gelten daher die gesetzlichen Vorschriften, soweit sie in diesen L&Z nicht unmittelbar abgeändert oder ausdrücklich ausgeschlossen werden. Sofern nicht ausdrücklich als bindend bezeichnet, sind unsere Angebote freibleibend; die Bestellung des Kunden ist als Angebot gemäß § 145 BGB zu qualifizieren. Alle von uns genannten Preise verstehen sich zzgl. der jeweiligen gesetzlichen Mehrwertsteuer vor Metallzuschlag fracht- frei innerhalb der Bundesrepublik Deutschland (Festland), jedoch ohne Abladen. Die Verkaufspreise, soweit sie als Hohlpreis deklariert sind, enthalten keinerlei Metallwerte. Diese werden zusätzlich separat berechnet. Basis zur Kupferabrechnung ist die Notierung “LME Copper official price cash offer”, Durchschnitt des Liefervormonats zuzüglich der dann aktuellen von uns benannten Kupfer-Prämie. Basis zur Aluminiumabrechnung ist die Notierung “LME Aluminium official price cash offer”, Durchschnitt des Liefervormonats zuzüglich der dann von uns benannten Aluminium-Prämie. USD werden auf Basis des EUR/USD LME-FX-Rate (MTLE) in EUR umgerechnet. Die entsprechenden Notierungen können Sie der Web-Seite www.westmetall.com entnehmen. Die Prämienzuschläge können stark variieren und KLZ behält sich das Recht vor, diese fristgerecht anzupassen, ungeachtet der Angebotslegung. Die von uns ausgewiesene Metallzahl ist eine rein kaufmännische Berechnungsgröße für den Metallinhalt, die in die Berechnung des Gesamtpreises eines Kabels eingeht. Damit entsprechen wir Ihrem Wunsch eine Vergleichbarkeit in ihrem System auf Hohlpreisbasis zu ermöglichen. Die Metallzahl gibt damit nicht das Gewicht des tatsächlich im Kabel enthaltenen Leitermetalls an. Sie ist ein rein kalkulatorischer Berechnungsfaktor, der jedoch keine unmittelbaren Rückschlüsse auf die im Kabel verwendeten Kupfer- bzw. Aluminiummengen zulässt. Wir weisen ausdrücklich darauf hin, final nur den Vollpreis für Vergleichszwecke heranzuziehen. Soweit Sie es wünschen andere Metallzahlen zu Grunde zu legen, sind wir gerne dazu bereit, das Angebot in den Bestandteilen umzurechnen. Bei jeglicher Änderung bleibt aber der Vollpreis der gleiche Betrag. Nach Auftragsbestätigung werden Änderungen an bestätigten Aufträgen nur nach Prüfung und gesonderter ausdrücklicher Zustimmung durch uns akzeptiert. Wir behalten uns bei allen Auftragsänderungen das Recht vor, einen durch die Änderung entstandenen Mehraufwand, wie z.B. Bearbeitungskosten oder Entsorgungskosten in Rechnung zu stellen. Wir behalten uns an den von uns gelieferten Waren – nachfolgend: Vorbehaltsware – bis zur vollständigen Begleichung aller unserer Forderungen aus den Geschäftsbeziehungen mit dem Besteller, das Eigentum vor. Der Eigentumsvorbehalt bleibt auch dann bestehen, wenn einzelne Forderungen in eine laufende Rechnung aufgenommen werden (Kontokorrentvorbehalt). Unsere Rechnungen sind 14 Tage nach Rechnungsdatum ohne jeden Abzug zahlbar. Bei Nichteinhaltung der vereinbarten Zahlungsbedingungen sind wir berechtigt, Zinsen in Höhe von 7 %-Punkten über dem Basiszinssatz zu berechnen; das Recht zur Geltendmachung weitergehender Schäden, insbesondere nachgewiesener höherer Zinsen, bleibt hiervon unberührt. Sämtliche Lieferzusagen unsererseits stehen, sofern nichts anderes ausdrücklich schriftlich vereinbart ist, unter dem Vorbehalt der richtigen und rechtzeitigen Belieferung durch unsere Produzenten. Wir behalten uns jederzeit Teillieferungen vor. Darüber hinaus behalten wir uns branchenübliche Über- oder Unterlieferungen bis zu 10 % der bestellten Menge vor. Die Lieferfrist wird individuell vereinbart bzw. von uns bei Annahme der Bestellung angegeben. Sofern wir verbindliche Lieferfristen aus Gründen, die wir nicht zu vertreten haben, nicht einhalten können (Nichtverfügbarkeit der Leistung), werden wir den Besteller hierüber unverzüglich informieren und gleichzeitig die voraussichtliche, neue Lieferfrist mitteilen. Ist die Leistung auch innerhalb der neuen Lieferfrist nicht verfügbar, sind wir berechtigt, ganz oder teilweise vom Vertrag zurückzutreten. Eine bereits erbrachte Gegenleistung des Bestellers werden wir unverzüglich erstatten. Nichtverfügbarkeit der Leistung liegt beispielsweise vor bei nicht recht- zeitiger Selbstbelieferung durch unseren Zulieferer, wenn wir ein kongruentes Deckungsgeschäft abgeschlossen haben, bei sonstigen Störungen in der Lieferkette etwa aufgrund höherer Gewalt oder wenn wir im Einzelfall zur Beschaffung nicht verpflichtet sind. Der Eintritt unseres Lieferverzugs bestimmt sich nach den gesetzlichen Vorschriften. In jedem Fall ist aber eine Mahnung durch den Käufer erforderlich. Die gesetzlichen Rechte bleiben im Übrigen unberührt. Fixgeschäfte setzen die ausdrückliche schriftliche Bezeichnung als solche voraus. Ansonsten ist der Besteller stets verpflichtet, uns schriftlich eine angemessene Nachfrist zu setzen, wenn von uns zugesagte Termine und/ oder Fristen nicht eingehalten werden. Wird auch die Nachfrist nicht eingehalten, ist der Besteller berechtigt, vom Vertrag zurückzutreten. Im Fall höherer Gewalt und/oder sonstiger von uns nicht vorhersehbarer außergewöhnlicher und/oder unverschuldeter Umstände, auch wenn sie bei unserem Vorlieferanten eintreten, verlängert sich eine von uns zugesagte Lieferfrist bis zur Behebung des vorerwähnten Ereignisses. Ist dieser Zeitpunkt nicht überblickbar, sind sowohl der Besteller als auch wir berechtigt, von dem abgeschlossenen Vertrag zurückzutreten. In diesem Fall sind beiderseits Schadensersatzansprüche ausgeschlossen. Wir verpflichten uns, bei Bekanntwerden vorerwähnter Umstände den Besteller hiervon unverzüglich zu benachrichtigen. Ist die Einhaltung eines Termins davon abhängig, dass uns seitens des Bestellers bestimmte Angaben und/oder Pläne, Freigabeerklärungen oder ähnliches erteilt werden, beginnt die Lieferfrist erst von dem Zeitpunkt an zu lau- fen, zu dem uns die vollständigen Angaben des Bestellers schriftlich vorliegen. Wird die Anlieferung auf Wunsch des Bestellers über den vertraglich vorgesehenen Zeitpunkt hinausgeschoben, kann von uns beginnend mit einer Frist von frühestens 10 Werktagen nach Anzeige der Versandbereitschaft dem Besteller ein Lagergeld in Höhe von 2 % des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch 10 % insgesamt berechnet werden. Wird uns ein Abrufauftrag erteilt und werden über die Abruftermine keine gesonderten schriftlichen Vereinbarungen getroffen, ist der Besteller verpflichtet, uns die einzelnen Abruftermine so mitzuteilen, dass zwischen Eingang der Abrufmitteilung bei uns und Auslieferung mindestens 14 Werktage und die letzte Auslieferung spätestens 90 Tage nach unserer Auftragsbestätigung liegt. Alle Angaben über Durchmesser, Gewicht, technische Gestaltung, Herstellung und Umfang der von uns zu liefernden Ware stehen unter dem Vorbehalt der Abweichung innerhalb der handelsüblichen zulässigen Toleranzen. Darüber hinaus behalten wir uns Änderungen, die einer technischen Verbesserung dienen, jederzeit vor. Farbabweichungen und/oder Abweichungen in der äußeren Beschaffenheit der von uns zu liefernden Ware, die jedoch deren Qualität und technische Wirksamkeit unbeeinflusst lässt, begründen keine Mängelhaftungsansprüche des Bestellers. Die Lieferung erfolgt DAP frei Bestimmungsort Deutschland, wo auch der Erfüllungsort für die Lieferung und eine etwaige Nacherfüllung ist. Wird die bestellte Ware von uns versandbereit gestellt und/oder verzögert sich die Versendung und/oder der Abruf aus Gründen, die vom Besteller zu vertreten sind, sind wir berechtigt, Ersatz des hieraus entstehenden Schadens einschließlich Mehraufwendungen zu verlangen. Hierfür berechnen wir eine pauschale Entschädigung i.H.v 2% des Rechnungsbetrages für jeden angefangenen Monat, maximal jedoch 10 % insgesamt beginnend mit der Lieferfrist bzw. – mangels einer Lieferfrist – mit der Mitteilung der Versandbereitschaft der Ware. Der Nachweis eines höheren Schadens und unsere gesetzlichen Ansprüche (insbesondere Ersatz von Mehraufwendungen, angemessene Entschädigung, Kündigung) bleiben unberührt; die Pauschale ist aber auf weitergehende Geldansprüche anzurechnen. Dem Besteller bleibt der Nachweis gestattet, dass uns überhaupt kein oder nur ein wesentlich geringerer Schaden als vorstehende Pauschale entstanden ist. Rücksendungen an uns, die nicht vorher von uns schriftlich bestätigt worden sind, erfolgen auf alleinige Gefahr des Bestellers. Wir haften nur dann für die Einhaltung objektiver Anforderungen an der Ware, wenn und soweit zwischen dem Besteller und uns keine Beschaffenheitsvereinbarung getroffen wurde. Die einzuhaltenden subjektiven Anforderungen gehen den einzuhaltenden objektiven Anforderungen vor. Im Zweifel ergeben sich die vereinbarten Anforderungen an die Ware aus dem von uns bereitgestellten Datenblatt. Einzelne, nicht immer auszuschließende marginale Abweichungen, dürfen durch Reparaturen, wie zum Beispiel Mantelmanschetten nachgebessert werden. Jedwede Mängelhaftungsansprüche des Bestellers setzen voraus, dass dieser die ihm übersandte Ware unverzüglich, d. h. in der Regel sofort bei Anlieferung (noch in Anwesenheit des Transporteurs) auf ihre ordnungsgemäße Beschaffenheit hin überprüft und uns zu verzeichnende sichtbare Mängel unmittelbar nach Erhalt der Ware und verdeckte Mängel unmittelbar nach deren Feststellung schriftlich mitteilt. Soweit ein rechtzeitig gerügter, nicht nur unerheblicher Mangel der Kaufsache vorliegt, sind wir nach unserer Wahl zur Mangelbeseitigung oder zur Ersatzlieferung (Nacherfüllung) berechtigt. Wir übernehmen im Rahmen der Nacherfüllung in keinem Fall Ein- oder Ausbaukosten, wenn und soweit die Mangelhaftigkeit der Ware zum Zeitpunkt des Einbaus dem Besteller bekannt oder grob fahrlässig unbekannt geblieben ist. Sind wir zur Mangelbeseitigung/Ersatzlieferung nicht bereit oder nicht in der Lage oder verzögert sich diese über angemessene Fristen hinaus aus Gründen, die wir zu vertreten haben, oder schlägt sie in sonstiger Weise fehl, so ist der Besteller nach seiner Wahl berechtigt, vom Vertrag zurückzutreten oder eine entsprechende Minderung des Kaufpreises zu verlangen. Weitergehende Ansprüche des Bestellers, gleich aus welchem Rechtsgrund, sind nach näherer Maßgabe der Regelungen in nachstehender Ziffer 15 ausgeschlossen bzw. beschränkt. Die Verjährungsfristen für Mängelhaftungsansprüche beträgt 24 Monate ab Übergabe der Ware. Sollte es bei einer Mängelrüge zu unterschiedlichen Meinungen bezüglich des Kabelschaden kommen, gilt hier im Zweifelsfall nur die Expertise des VDE-Instituts selbst. Andere, auch akkreditierte Testlabore, akzeptieren wir nicht. Wir weisen ausdrücklich daraufhin, dass beim Verlegen des Kabels in den Graben oder in Rohren, bzw. in Bauwerke eine ständige Sichtkontrolle durch den Kabelverleger vorzunehmen ist, ob Auffälligkeiten zu vermerken sind. Eine spätere Reklamation, die fahrlässiges Verhalten vermuten lässt, schränkt sich damit ein. Wir haften unbeschränkt nur für Vorsatz und grobe Fahrlässigkeit sowie für Schäden aus einer Verletzung von Leben, Körper oder Gesundheit, die auf mindestens fahrlässiger Pflichtverletzung unsererseits oder unserer gesetzlichen Vertreter oder Erfüllungsgehilfen beruhen; ebenso haften wir unbeschränkt im Fall von uns übernommenen bzw. abgegebenen Garantien und Zusicherungen, sofern ein davon umfasster Mangel unsere Haftung auslöst sowie im Fall einer Haftung nach dem Produkthaftungsgesetz oder sonstigen Gefährdungshaftungstatbeständen. Im Fall sonstiger schuldhafter Verletzung wesentlicher Vertragspflichten („Kardinalpflichten“) ist unsere verbleibende Haftung auf den vertragstypischen vorhersehbaren Schaden beschränkt. Mangelfolgeschäden sowie entgangener Gewinn schließen wir grundsätzlich aus. Unsere Kabel werden auf stabilen Vollholztrommeln geliefert. Auf Wunsch vermitteln wir Ihnen Partner, die diese Trommeln gegen eine Gebühr abholen. Es gilt ausschließlich das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts (CISG). Gerichtsstand ist nach unserer Wahl Stuttgart, der Erfüllungsort der Lieferverpflichtung oder das für den Sitz des Bestellers zuständige Gericht, sofern der Besteller Kaufmann, juristische Person des öffentlichen Rechts oder öffentlich-rechtliches Sondervermögen ist oder keinen allgemeinen Gerichtsstand im Inland hat. Mit der Veröffentlichung der vorliegenden L&Z im Internet werden alle von uns früher verwendeten Bedingungen gegenstandslos. [vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none”… Responsible for the content: KLZ Vertriebs GmbH info@klz-cables.com Local Court Stuttgart Copyright: [vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none”… The following information provides a simple overview of what happens to your personal data when you visit our website. Personal data are all data with which you can be personally identified. For detailed information on the subject of data protection, please refer to our data protection declaration listed below this text. The operators of these pages take the protection of your personal data very seriously. We treat your personal data confidentially and in accordance with the legal data protection regulations and this data protection declaration. When you use this website, various personal data is collected. Personal data is data with which you can be personally identified. This privacy policy explains what data we collect and what we use it for. It also explains how we do this and for what purpose. We would like to point out that data transmission over the Internet (e.g. communication by e-mail) can have security gaps. It is not possible to completely protect data from access by third parties. Many data processing operations are only possible with your express consent. You can revoke a previously granted consent at any time. For this purpose, an informal notification by e-mail to us is sufficient. The lawfulness of the data processing that took place up to the revocation remains unaffected by the revocation. In the event of violations of data protection law, the person concerned has a right of appeal to the competent supervisory authority. The competent supervisory authority for data protection issues is the data protection commissioner of the federal state in which our company is located. A list of the data protection officers and their contact details can be found at the following link: https://www.bfdi.bund.de/DE/Infothek/Anschriften_Links/anschriften_links-node.html. You have the right to have data which we process automatically on the basis of your consent or in fulfilment of a contract handed over to you or to a third party in a common, machine-readable format. If you request the direct transfer of the data to another responsible party, this will only be done to the extent that it is technically feasible. Within the framework of the applicable legal provisions, you have the right at any time to receive information free of charge about your stored personal data, its origin and recipients and the purpose of the data processing and, if applicable, a right to correct, block or delete this data. For this purpose, as well as for further questions regarding personal data, you can contact us at any time at the address given in the imprint. The use of contact data published within the scope of the imprint obligation for the transmission of not expressly requested advertising and information material is hereby contradicted. The operators of the site expressly reserve the right to take legal action in the event of unsolicited sending of advertising information, such as through spam e-mails. We only transfer personal data to third parties if this is necessary within the scope of processing the contract, e.g. to the credit institution commissioned with processing payments. Any further transmission of data will not take place or only if you have expressly agreed to the transmission. Your data will not be passed on to third parties without your express consent, for example for advertising purposes. The basis for data processing is Art. 6 Par. 1 letter b DSGVO, which permits the processing of data for the fulfilment of a contract or pre-contractual measures. [vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none”… We’ve received your message and will get back to you as soon as possible. Our team is already rolling up their sleeves to assist you! [vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#333333″ bg_image=”10432″ bg_position=”center center” background_image_loading=”default” bg_repeat=”no-repeat” scene_position=”center” top_padding=”15%” bottom_padding=”15%” text_color=”light” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” color_overlay=”#0a0a0a” overlay_strength=”0.8″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” parallax_bg=”true” parallax_bg_speed=”fast” gradient_type=”default” shape_type=””][vc_column… At KLZ, our expertise is built on generations of dedication to the energy industry. With decades of hands-on experience, we’ve grown alongside the evolution of cable technology, combining traditional craftsmanship with modern innovation. Each project we take on reflects a deep understanding of what it takes to create lasting, reliable energy solutions. Paired with historic illustrations from the industry’s early days, our story is a reminder of how far cables have come – and how much care has always gone into connecting the world. [vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#ffffff” bg_image=”10440″ bg_position=”center center” background_image_loading=”default” bg_repeat=”no-repeat” scene_position=”center” top_padding=”14%” bottom_padding=”12%” text_color=”light” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” enable_gradient=”true” color_overlay=”#0a0000″ color_overlay_2=”rgba(10,10,10,0.5)” overlay_strength=”0.8″ gradient_direction=”left_to_right” shape_divider_color=”#ffffff” shape_divider_position=”bottom” shape_divider_height=”350″ bg_image_animation=”none”… [vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_image=”10382″ bg_position=”center center” background_image_loading=”default” bg_repeat=”no-repeat” scene_position=”center” top_padding=”14%” bottom_padding=”5%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” zindex=”100″ overflow=”visible” color_overlay=”rgba(52,82,255,0.93)” color_overlay_2=”rgba(255,16,83,0.92)” overlay_strength=”0.95″ gradient_direction=”left_t_to_right_b” shape_divider_position=”bottom” bg_image_animation=”none” shape_type=”” gradient_type=”default”][vc_column column_padding=”no-extra-padding”… Powering everyday essentials with reliability and safety. The perfect balance between power and performance for industrial and urban grids. Delivering maximum power over long distances—without compromise. Connecting the sun’s energy to your sustainable future. At KLZ, cables run in our veins. Klaus began his journey at the renowned Felten & Guilleaume, following in the footsteps of his parents, who dedicated their lives to the same iconic company. For Klaus, this isn’t just work – it’s a legacy built on craftsmanship, innovation, and pride. We honor this history with original illustrations from Felten & Guilleaume’s era, once used as postcards. These images remind us of the generations who wired the world together – a tradition we proudly continue today.`, `
`, `
` (with Next.js Image)
-- Tables: `
`, ``, ``, `
`, ` `, ` `
-- Layout: ` `, ``, ``, ``
-- Quotes: `
`
-
-### 3. FeaturedImage Component (`FeaturedImage.tsx`)
-Optimized image display with responsive sizing and lazy loading.
-
-**Features:**
-- Next.js Image optimization
-- Lazy loading
-- Aspect ratio control
-- Caption support
-- Alt text handling
-- Priority loading option
-
-**Usage:**
-```tsx
-import { FeaturedImage } from '@/components/content';
-
-
-
-Featured Products
-
- {products.map(product => (
-
- {product.name}
-
- {/* Video Background */}
- {hasVideo && (
-
- );
-
- if (Component !== 'section') {
- return (
-
-
-
- )}
-
- {/* Background Image with Parallax (fallback if no video) */}
- {hasBackgroundImage && !hasVideo && (
-
-
- )}
-
- {/* Background Variant (if no image) */}
- {!hasBackgroundImage && !hasCustomBg && (
-
- )}
-
- {/* Gradient Overlay */}
- {hasGradient && (
-
- )}
-
- {/* Color Overlay (from WordPress color_overlay) */}
- {hasColorOverlay && (
-
- )}
-
- {/* Second Color Overlay (for gradients) */}
- {colorOverlay2 && (
-
- )}
-
- {/* Shape Divider (bottom) */}
- {shapeType && (
-
-
-
- )}
-
- {/* Content */}
-
- {fullWidth ? children : (
-
-
-
-
- )}
-
- {/* Background Image with Parallax (fallback if no video) */}
- {hasBackgroundImage && !hasVideo && (
-
-
- )}
-
- {/* Background Variant (if no image) */}
- {!hasBackgroundImage && !hasCustomBg && (
-
- )}
-
- {/* Gradient Overlay */}
- {hasGradient && (
-
- )}
-
- {/* Color Overlay */}
- {hasColorOverlay && (
-
- )}
-
- {/* Second Color Overlay */}
- {colorOverlay2 && (
-
- )}
-
- {/* Shape Divider */}
- {shapeType && (
-
-
-
- )}
-
-
- {fullWidth ? children : (
-
-
-
- );
-};
-
-export const SectionContent: React.FC<{
- children: React.ReactNode;
- className?: string;
-}> = ({ children, className = '' }) => (
-
- {title}
-
- {subtitle && (
-
- {children}
-
-);
-
-export const SectionGrid: React.FC<{
- children: React.ReactNode;
- cols?: 1 | 2 | 3 | 4;
- gap?: 'sm' | 'md' | 'lg' | 'xl';
- className?: string;
-}> = ({ children, cols = 3, gap = 'md', className = '' }) => {
- const gapClasses = {
- sm: 'gap-4 md:gap-6',
- md: 'gap-6 md:gap-8',
- lg: 'gap-8 md:gap-12',
- xl: 'gap-10 md:gap-16',
- }[gap];
-
- const colClasses = {
- 1: 'grid-cols-1',
- 2: 'grid-cols-1 md:grid-cols-2',
- 3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
- 4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
- }[cols];
-
- return (
-
- {children}
-
- );
-};
-
-export default Section;
\ No newline at end of file
diff --git a/components/content/WPBakeryMapping.md b/components/content/WPBakeryMapping.md
deleted file mode 100644
index 7ac9dec6..00000000
--- a/components/content/WPBakeryMapping.md
+++ /dev/null
@@ -1,359 +0,0 @@
-# WPBakery to Next.js Component Mapping - Detailed Analysis
-
-This document provides detailed per-page analysis of WPBakery patterns found in the WordPress site and how they are mapped to modern React components.
-
-## Pages Analyzed
-
-### 1. Home Pages (corporate-3-landing-2 / start)
-
-**Patterns Found:**
-- 25 vc-rows with 43 vc-columns total
-- Complex nested structure (24 nested rows)
-- Hero section with h1
-- Numbered features (h6 + h4 + p)
-- Card grids (2-4 columns)
-- Testimonial sections (16 instances)
-- Team member sections
-
-**Specific Mappings:**
-```html
-
-
-
-
-
-
-
-
-We are helping to expand...
-
-
-
-
-
-
-
-01
- Supply to energy suppliers...
-
-
-
-```
-
-**Home-Specific Enhancements:**
-- Handles 25+ row complexity through recursive parsing
-- Preserves nested structure for proper layout
-- Converts numbered features to modern flex layout
-- Maps testimonial quotes to styled blocks
-
-### 2. Team Pages (team)
-
-**Patterns Found:**
-- 8 vc-rows with 16 vc-columns
-- 4 testimonial sections with quotes
-- 7 nested rows
-- Quote patterns with German quotes („“)
-
-**Specific Mappings:**
-```html
-
-
-
-...
-
-
-
-```
-
-### 3. Terms Pages (terms / agbs)
-
-**Patterns Found:**
-- 19 vc-rows with 38 vc-columns
-- Numbered features with h6 + h3 (different from home)
-- PDF download link
-- 2 testimonial sections
-
-**Specific Mappings:**
-```html
-
-
-
-Michael Bodemer
- „Challenges exist to be solved...“
-
-
-
-
-
-
-
-1.
- Allgemeines
-
-
-
-```
-
-### 4. Contact Pages (contact / kontakt)
-
-**Patterns Found:**
-- 4 vc-rows with 7 vc-columns
-- Contact form (frm_forms)
-- Contact info blocks
-- 3 nested rows
-
-**Specific Mappings:**
-```html
-
-
- Download als PDF
-
-
-
-
-
-
-
-...
-
-
-
-
-```
-
-### 5. Legal/Privacy Pages (legal-notice, privacy-policy, impressum, datenschutz)
-
-**Patterns Found:**
-- 1 vc-row with 2 vc-columns
-- Hero section with h1
-- Simple content structure
-- Contact info blocks
-
-**Specific Mappings:**
-```html
-
-
-
-
Raiffeisenstraße 22
73630 Remshalden
-
-
-```
-
-### 6. Thanks Pages (thanks / danke)
-
-**Patterns Found:**
-- 2 vc-rows with 3 vc-columns
-- Hero pattern
-- Grid structure
-
-**Specific Mappings:**
-```html
-
-
-
-Legal Notice
-
-
-
-```
-
-### 7. Blog Pages (blog)
-
-**Patterns Found:**
-- 2 vc-rows (empty or minimal content)
-- No specific patterns
-
-**Specific Mappings:**
-- Falls back to generic parsing
-- Uses page-specific routing for blog listing
-
-### 8. Products Pages (products / produkte)
-
-**Patterns Found:**
-- Empty content
-- Uses page-specific routing for product catalog
-
-**Specific Mappings:**
-- Routes to `/products` or `/produkte` page components
-- Uses ProductList component
-
-## Parser Pattern Priority
-
-The parser processes patterns in this order:
-
-1. **Hero Sections** - Single column with h1/h2
-2. **Contact Forms** - Forms with frm_forms class
-3. **Numbered Features (Home)** - h6 + h4 structure
-4. **Numbered Features (Terms)** - h6 + h3 structure
-5. **Testimonials/Quotes** - Contains quotes or team structure
-6. **PDF Downloads** - Links ending in .pdf
-7. **Contact Info** - Contains @, addresses, or KLZ Cables
-8. **Grid/Card Patterns** - 2-4 columns with titles/images
-9. **Nested Rows** - Rows containing other rows
-10. **Simple Content** - h3 + p structure
-11. **Empty Rows** - Whitespace only
-12. **Fallback** - Generic section
-
-## Component Props Enhancement
-
-### ContentRenderer
-```typescript
-interface ContentRendererProps {
- content: string;
- className?: string;
- sanitize?: boolean;
- processAssets?: boolean;
- convertClasses?: boolean;
- parsePatterns?: boolean;
- pageSlug?: string; // NEW: For page-specific parsing
-}
-```
-
-### Usage Examples
-```tsx
-// Home page
-
-
-Thank you very much!
-
-
- );
- }
-
- // Checkbox group
- const groupLabelId = inputId ? `${inputId}-group-label` : undefined;
- const allSelected = options.every(opt => value.includes(opt.value));
- const someSelected = options.some(opt => value.includes(opt.value)) && !allSelected;
-
- // Update indeterminate state for group select all
- useEffect(() => {
- if (checkboxRef.current && someSelected) {
- checkboxRef.current.indeterminate = true;
- }
- }, [someSelected, value, options]);
-
- return (
-
-
-
-
-
- {showError && (
-
- {label && (
-
- )}
-
- {helpText && (
-
-
- {label && (
-
- );
-};
-
-FormCheckbox.displayName = 'FormCheckbox';
-
-export default FormCheckbox;
\ No newline at end of file
diff --git a/components/forms/FormError.tsx b/components/forms/FormError.tsx
deleted file mode 100644
index a4c39fbb..00000000
--- a/components/forms/FormError.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
-
-/**
- * FormError Component
- * Display error messages with different variants and animations
- */
-
-export interface FormErrorProps {
- errors?: string | string[];
- variant?: 'inline' | 'block' | 'toast';
- className?: string;
- showIcon?: boolean;
- animate?: boolean;
- id?: string;
-}
-
-export const FormError: React.FC
-
- )}
-
-
- {options.map((option) => {
- const optionId = `${inputId}-${option.value}`;
- const isChecked = value.includes(option.value);
-
- return (
-
-
- {helpText && (
-
-
-
-
- );
- })}
-
-
-
-
- {hasMultipleErrors ? (
-
- );
-};
-
-FormError.displayName = 'FormError';
-
-export default FormError;
\ No newline at end of file
diff --git a/components/forms/FormExamples.tsx b/components/forms/FormExamples.tsx
deleted file mode 100644
index f014de29..00000000
--- a/components/forms/FormExamples.tsx
+++ /dev/null
@@ -1,795 +0,0 @@
-import React, { useState } from 'react';
-import {
- FormField,
- useForm,
- useFormWithHelpers,
- type ValidationRules
-} from './index';
-import { Button } from '@/components/ui/Button';
-import { Card, CardBody, CardHeader } from '@/components/ui/Card';
-import { Container } from '@/components/ui/Container';
-
-/**
- * Form Examples
- * Comprehensive examples showing all form patterns and usage
- */
-
-// Example 1: Simple Contact Form
-export const ContactFormExample: React.FC = () => {
- const form = useForm({
- initialValues: {
- name: '',
- email: '',
- message: '',
- },
- validationRules: {
- name: { required: 'Name is required', minLength: { value: 2, message: 'Name must be at least 2 characters' } },
- email: { required: 'Email is required', email: true },
- message: { required: 'Message is required', minLength: { value: 10, message: 'Message must be at least 10 characters' } },
- },
- onSubmit: async (values) => {
- console.log('Form submitted:', values);
- // Simulate API call
- await new Promise(resolve => setTimeout(resolve, 1000));
- alert('Form submitted successfully!');
- form.reset();
- },
- });
-
- return (
-
- {errorArray.map((error, index) => (
-
- ) : (
-
- {showIcon &&
- )}
- Contact Form
- Registration Form
- Search & Filter
- Preferences Selection
-
-
- );
-};
-
-// Main Examples Page Component
-export const FormExamplesPage: React.FC = () => {
- return (
- Complete Form Example
- Submitted Data
-
- {JSON.stringify(submittedData, null, 2)}
-
-
-
-
-
-
- Form System Examples
-
-
-
- {showExternalLabel && label && (
-
- );
-};
-
-FormField.displayName = 'FormField';
-
-export default FormField;
\ No newline at end of file
diff --git a/components/forms/FormInput.tsx b/components/forms/FormInput.tsx
deleted file mode 100644
index 3eb88f8c..00000000
--- a/components/forms/FormInput.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { cn } from '@/lib/utils';
-import FormLabel from './FormLabel';
-import FormError from './FormError';
-
-/**
- * FormInput Component
- * Base input component with all HTML5 input types, validation states, icons, and clear button
- */
-
-export interface FormInputProps extends Omit
- {label && (
-
- );
-};
-
-FormInput.displayName = 'FormInput';
-
-export default FormInput;
\ No newline at end of file
diff --git a/components/forms/FormLabel.tsx b/components/forms/FormLabel.tsx
deleted file mode 100644
index 3bee6d9e..00000000
--- a/components/forms/FormLabel.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
-
-/**
- * FormLabel Component
- * Consistent label styling with required indicator and help text tooltip
- */
-
-export interface FormLabelProps extends React.LabelHTMLAttributes
- {showPrefix && (
-
-
- {helpText && (
-
- {prefix}
-
- )}
-
-
-
- {showSuffix && (
-
- {suffix}
-
- )}
-
- {showClearButton && (
-
- )}
-
- {label && (
-
- );
-};
-
-FormRadio.displayName = 'FormRadio';
-
-export default FormRadio;
\ No newline at end of file
diff --git a/components/forms/FormSelect.tsx b/components/forms/FormSelect.tsx
deleted file mode 100644
index 9d6f3a70..00000000
--- a/components/forms/FormSelect.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { cn } from '@/lib/utils';
-import FormLabel from './FormLabel';
-import FormError from './FormError';
-
-/**
- * FormSelect Component
- * Select dropdown with placeholder, multi-select support, and custom styling
- */
-
-export interface SelectOption {
- value: string | number;
- label: string;
- disabled?: boolean;
-}
-
-export interface FormSelectProps extends Omit
- {options.map((option) => {
- const optionId = `${inputId}-${option.value}`;
- const isChecked = value === option.value;
-
- return (
-
-
- {helpText && (
-
-
- );
- })}
-
-
-
- {isChecked && (
-
-
-
-
-
- )}
-
-
-
- {option.description && (
-
-
- {label && (
-
- );
-};
-
-FormSelect.displayName = 'FormSelect';
-
-export default FormSelect;
\ No newline at end of file
diff --git a/components/forms/FormSuccess.tsx b/components/forms/FormSuccess.tsx
deleted file mode 100644
index c8ac90eb..00000000
--- a/components/forms/FormSuccess.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { cn } from '@/lib/utils';
-
-/**
- * FormSuccess Component
- * Display success messages with different variants and auto-dismiss
- */
-
-export interface FormSuccessProps {
- message?: string;
- variant?: 'inline' | 'block' | 'toast';
- className?: string;
- showIcon?: boolean;
- animate?: boolean;
- autoDismiss?: boolean;
- autoDismissTimeout?: number;
- onClose?: () => void;
- id?: string;
-}
-
-export const FormSuccess: React.FC
- {showSearch && (
-
- )}
-
-
-
- {!showSearch && dropdownArrow}
-
-
- {helpText && (
-
-
- );
-};
-
-FormSuccess.displayName = 'FormSuccess';
-
-export default FormSuccess;
\ No newline at end of file
diff --git a/components/forms/FormTextarea.tsx b/components/forms/FormTextarea.tsx
deleted file mode 100644
index 92699bf0..00000000
--- a/components/forms/FormTextarea.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { cn } from '@/lib/utils';
-import FormLabel from './FormLabel';
-import FormError from './FormError';
-
-/**
- * FormTextarea Component
- * Textarea with resize options, character counter, auto-resize, and validation states
- */
-
-export interface FormTextareaProps extends Omit
- {showIcon &&
-
- {autoDismiss && (
-
- )}
-
- {label && (
-
- );
-};
-
-FormTextarea.displayName = 'FormTextarea';
-
-export default FormTextarea;
\ No newline at end of file
diff --git a/components/forms/README.md b/components/forms/README.md
deleted file mode 100644
index 6e78d770..00000000
--- a/components/forms/README.md
+++ /dev/null
@@ -1,632 +0,0 @@
-# KLZ Forms System
-
-A comprehensive, reusable form system for Next.js applications with full TypeScript support, accessibility features, and consistent styling.
-
-## Features
-
-- **Complete Form Components**: All essential form inputs with consistent styling
-- **Validation System**: Built-in validation with custom rules
-- **Type Safety**: Full TypeScript support
-- **Accessibility**: ARIA attributes and keyboard navigation
-- **Internationalization**: Ready for i18n
-- **Customizable**: Flexible props for different use cases
-- **Animation**: Smooth transitions and animations
-- **Error Handling**: Multiple error display modes
-- **Auto-resize**: Smart textarea resizing
-- **Character Count**: Built-in character counting
-
-## Installation
-
-The form system is already included in the project. All components use the existing design system tokens.
-
-## Components
-
-### FormField
-Wrapper component that provides consistent form field experience.
-
-```tsx
-
-
-
-
-
- {helpText && (
-
-
- {showError && (
-
-
-
-
-```
-
-### 2. Validate Before Submit
-```tsx
-const form = useForm({
- validationRules: {
- email: { required: true, email: true },
- },
- onSubmit: async (values) => {
- // Validation happens automatically
- // Only called if isValid is true
- },
-});
-```
-
-### 3. Show Errors Only After Touch
-```tsx
-{form.touched.email && form.errors.email && (
-
- {/* Logo and Branding */}
-
-
-
- {logo ? (
-
-
- {/* Desktop Navigation */}
-
- {isSvgLogo ? (
- // For SVG, use img tag with proper path handling
-
- ) : (
-
- ) : (
- // For other images, use Next.js Image with optimized sizes
-
-
- )}
-
- KLZ
-
- )}
-
- {siteName}
-
-
-
-
-
- {/* Mobile Menu */}
-
-
-
- {/* Header */}
-
- );
-}
\ No newline at end of file
diff --git a/components/layout/MobileMenu.tsx b/components/layout/MobileMenu.tsx
deleted file mode 100644
index caab292f..00000000
--- a/components/layout/MobileMenu.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
-import { usePathname } from 'next/navigation';
-import { Button } from '@/components/ui/Button';
-import { LocaleSwitcher } from '@/components/LocaleSwitcher';
-
-interface MobileMenuProps {
- locale: string;
- siteName: string;
- logo?: string;
- onClose?: () => void;
-}
-
-export function MobileMenu({ locale, siteName, logo, onClose }: MobileMenuProps) {
- const [isOpen, setIsOpen] = useState(false);
- const pathname = usePathname();
-
- // Main navigation menu
- const mainMenu = [
- { title: 'Home', path: `/${locale}` },
- { title: 'Blog', path: `/${locale}/blog` },
- { title: 'Products', path: `/${locale}/products` },
- { title: 'Contact', path: `/${locale}/contact` }
- ];
-
- // Product categories (could be dynamic from data)
- const productCategories = [
- { title: 'Medium Voltage', path: `/${locale}/product-category/medium-voltage` },
- { title: 'Low Voltage', path: `/${locale}/product-category/low-voltage` },
- { title: 'Accessories', path: `/${locale}/product-category/accessories` }
- ];
-
- // Close on route change
- useEffect(() => {
- setIsOpen(false);
- if (onClose) onClose();
- }, [pathname, onClose]);
-
- const toggleMenu = () => {
- setIsOpen(!isOpen);
- if (!isOpen && onClose) onClose();
- };
-
- const closeMenu = () => {
- setIsOpen(false);
- if (onClose) onClose();
- };
-
- const isSvgLogo = logo?.endsWith('.svg');
-
- return (
- <>
- {/* Mobile Toggle Button */}
-
-
- {/* Mobile Menu Overlay */}
- {isOpen && (
-
- )}
-
- {/* Mobile Menu Drawer */}
-
-
- )}
-
- {/* Content */}
-
-
-
- );
-}
\ No newline at end of file
diff --git a/components/layout/Navigation.tsx b/components/layout/Navigation.tsx
deleted file mode 100644
index 65ddd321..00000000
--- a/components/layout/Navigation.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { getLocaleFromPath } from '@/lib/i18n';
-
-interface NavigationProps {
- locale: string;
- variant?: 'header' | 'footer';
-}
-
-export function Navigation({ locale, variant = 'header' }: NavigationProps) {
- const pathname = usePathname();
- const currentLocale = getLocaleFromPath(pathname);
-
- // Main navigation menu
- const mainMenu = [
- { title: 'Home', path: `/${locale}` },
- { title: 'Blog', path: `/${locale}/blog` },
- { title: 'Products', path: `/${locale}/products` },
- { title: 'Contact', path: `/${locale}/contact` }
- ];
-
- // Determine styles based on variant
- const isHeader = variant === 'header';
- const baseClasses = isHeader
- ? 'hidden md:flex items-center gap-1'
- : 'flex flex-col gap-2';
-
- const linkClasses = isHeader
- ? 'px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary hover:bg-primary-light rounded-lg transition-colors relative'
- : 'text-sm text-gray-600 hover:text-primary transition-colors';
-
- const activeClasses = isHeader
- ? 'text-primary bg-primary-light font-semibold'
- : 'text-primary font-medium';
-
- return (
-
- );
-}
\ No newline at end of file
diff --git a/components/layout/ResponsiveWrapper.tsx b/components/layout/ResponsiveWrapper.tsx
deleted file mode 100644
index 28afae59..00000000
--- a/components/layout/ResponsiveWrapper.tsx
+++ /dev/null
@@ -1,337 +0,0 @@
-import React, { ReactNode } from 'react';
-import { cn } from '@/lib/utils';
-import { getViewport } from '@/lib/responsive';
-
-interface ResponsiveWrapperProps {
- children: ReactNode;
- className?: string;
- // Visibility control
- showOn?: ('mobile' | 'tablet' | 'desktop' | 'largeDesktop')[];
- hideOn?: ('mobile' | 'tablet' | 'desktop' | 'largeDesktop')[];
- // Mobile-specific behavior
- stackOnMobile?: boolean;
- centerOnMobile?: boolean;
- // Padding control
- padding?: 'none' | 'sm' | 'md' | 'lg' | 'responsive';
- // Container control
- container?: boolean;
- maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
-}
-
-/**
- * ResponsiveWrapper Component
- * Provides comprehensive responsive behavior for any content
- */
-export function ResponsiveWrapper({
- children,
- className = '',
- showOn,
- hideOn,
- stackOnMobile = false,
- centerOnMobile = false,
- padding = 'md',
- container = false,
- maxWidth = 'xl',
-}: ResponsiveWrapperProps) {
- // Get visibility classes
- const getVisibilityClasses = () => {
- let classes = '';
-
- if (showOn) {
- // Hide by default, show only on specified breakpoints
- classes += 'hidden ';
- if (showOn.includes('mobile')) classes += 'xs:block ';
- if (showOn.includes('tablet')) classes += 'md:block ';
- if (showOn.includes('desktop')) classes += 'lg:block ';
- if (showOn.includes('largeDesktop')) classes += 'xl:block ';
- }
-
- if (hideOn) {
- // Show by default, hide on specified breakpoints
- if (hideOn.includes('mobile')) classes += 'xs:hidden ';
- if (hideOn.includes('tablet')) classes += 'md:hidden ';
- if (hideOn.includes('desktop')) classes += 'lg:hidden ';
- if (hideOn.includes('largeDesktop')) classes += 'xl:hidden ';
- }
-
- return classes;
- };
-
- // Get mobile-specific classes
- const getMobileClasses = () => {
- let classes = '';
-
- if (stackOnMobile) {
- classes += 'flex-col xs:flex-row ';
- }
-
- if (centerOnMobile) {
- classes += 'items-center xs:items-start text-center xs:text-left ';
- }
-
- return classes;
- };
-
- // Get padding classes
- const getPaddingClasses = () => {
- switch (padding) {
- case 'none':
- return '';
- case 'sm':
- return 'px-3 py-2 xs:px-4 xs:py-3';
- case 'md':
- return 'px-4 py-3 xs:px-6 xs:py-4';
- case 'lg':
- return 'px-5 py-4 xs:px-8 xs:py-6';
- case 'responsive':
- return 'px-4 py-3 xs:px-6 xs:py-4 md:px-8 md:py-6 lg:px-10 lg:py-8';
- default:
- return 'px-4 py-3';
- }
- };
-
- // Get container classes if needed
- const getContainerClasses = () => {
- if (!container) return '';
-
- const maxWidthClasses = {
- sm: 'max-w-sm',
- md: 'max-w-md',
- lg: 'max-w-lg',
- xl: 'max-w-xl',
- '2xl': 'max-w-2xl',
- '3xl': 'max-w-3xl',
- full: 'max-w-full',
- };
-
- return `mx-auto ${maxWidthClasses[maxWidth]} w-full`;
- };
-
- const wrapperClasses = cn(
- // Base classes
- 'responsive-wrapper',
- // Visibility
- getVisibilityClasses(),
- // Mobile behavior
- getMobileClasses(),
- // Padding
- getPaddingClasses(),
- // Container
- getContainerClasses(),
- // Custom classes
- className
- );
-
- return
- {/* Header */}
-
-
-
-
- {/* Navigation */}
-
- {logo ? (
-
-
-
- {isSvgLogo ? (
-
- ) : (
-
- ) : (
-
-
- )}
-
- KLZ
-
- )}
- {siteName}
-
- {/* Main Navigation */}
-
-
- {/* Footer CTA */}
-
-
-
- {/* Product Categories */}
-
- Navigation
-
-
-
-
-
- {/* Language Switcher */}
-
- Product Categories
-
-
-
-
-
- {/* Contact Information */}
-
- Language
-
-
-
-
-
-
- Contact
-
-
-
-
-
-
-
- {children};
-}
-
-/**
- * ResponsiveGrid Wrapper
- * Creates responsive grid layouts with mobile-first approach
- */
-interface ResponsiveGridProps {
- children: ReactNode;
- className?: string;
- // Column configuration
- columns?: {
- mobile?: number;
- tablet?: number;
- desktop?: number;
- largeDesktop?: number;
- };
- gap?: 'none' | 'sm' | 'md' | 'lg' | 'responsive';
- // Mobile stacking
- stackMobile?: boolean;
- // Alignment
- alignItems?: 'start' | 'center' | 'end' | 'stretch';
- justifyItems?: 'start' | 'center' | 'end' | 'stretch';
-}
-
-export function ResponsiveGrid({
- children,
- className = '',
- columns = {},
- gap = 'md',
- stackMobile = false,
- alignItems = 'start',
- justifyItems = 'start',
-}: ResponsiveGridProps) {
- const getGridColumns = () => {
- if (stackMobile) {
- return `grid-cols-1 sm:grid-cols-2 md:grid-cols-${columns.tablet || 3} lg:grid-cols-${columns.desktop || 4}`;
- }
-
- const mobile = columns.mobile || 1;
- const tablet = columns.tablet || 2;
- const desktop = columns.desktop || 3;
- const largeDesktop = columns.largeDesktop || 4;
-
- return `grid-cols-${mobile} sm:grid-cols-${tablet} md:grid-cols-${desktop} lg:grid-cols-${largeDesktop}`;
- };
-
- const getGapClasses = () => {
- switch (gap) {
- case 'none':
- return 'gap-0';
- case 'sm':
- return 'gap-2 sm:gap-3 md:gap-4';
- case 'md':
- return 'gap-3 sm:gap-4 md:gap-6 lg:gap-8';
- case 'lg':
- return 'gap-4 sm:gap-6 md:gap-8 lg:gap-12';
- case 'responsive':
- return 'gap-2 xs:gap-3 sm:gap-4 md:gap-6 lg:gap-8 xl:gap-12';
- default:
- return 'gap-4';
- }
- };
-
- return (
-
- {children}
-
- );
-}
-
-/**
- * ResponsiveStack Wrapper
- * Creates vertical stack that becomes horizontal on larger screens
- */
-interface ResponsiveStackProps {
- children: ReactNode;
- className?: string;
- gap?: 'none' | 'sm' | 'md' | 'lg' | 'responsive';
- reverseOnMobile?: boolean;
- wrap?: boolean;
-}
-
-export function ResponsiveStack({
- children,
- className = '',
- gap = 'md',
- reverseOnMobile = false,
- wrap = false,
-}: ResponsiveStackProps) {
- const getGapClasses = () => {
- switch (gap) {
- case 'none':
- return 'gap-0';
- case 'sm':
- return 'gap-2 sm:gap-3 md:gap-4';
- case 'md':
- return 'gap-3 sm:gap-4 md:gap-6 lg:gap-8';
- case 'lg':
- return 'gap-4 sm:gap-6 md:gap-8 lg:gap-12';
- case 'responsive':
- return 'gap-2 xs:gap-3 sm:gap-4 md:gap-6 lg:gap-8';
- default:
- return 'gap-4';
- }
- };
-
- return (
-
- {children}
-
- );
-}
-
-/**
- * ResponsiveSection Wrapper
- * Optimized section with responsive padding and max-width
- */
-interface ResponsiveSectionProps {
- children: ReactNode;
- className?: string;
- padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'responsive';
- maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';
- centered?: boolean;
- safeArea?: boolean;
-}
-
-export function ResponsiveSection({
- children,
- className = '',
- padding = 'responsive',
- maxWidth = '6xl',
- centered = true,
- safeArea = false,
-}: ResponsiveSectionProps) {
- const getPaddingClasses = () => {
- switch (padding) {
- case 'none':
- return '';
- case 'sm':
- return 'px-3 py-4 xs:px-4 xs:py-6 md:px-6 md:py-8';
- case 'md':
- return 'px-4 py-6 xs:px-6 xs:py-8 md:px-8 md:py-12';
- case 'lg':
- return 'px-5 py-8 xs:px-8 xs:py-12 md:px-12 md:py-16';
- case 'xl':
- return 'px-6 py-10 xs:px-10 xs:py-14 md:px-16 md:py-20';
- case 'responsive':
- return 'px-4 py-6 xs:px-6 xs:py-8 md:px-8 md:py-12 lg:px-12 lg:py-16 xl:px-16 xl:py-20';
- default:
- return 'px-4 py-6';
- }
- };
-
- const getMaxWidthClasses = () => {
- const maxWidthMap = {
- sm: 'max-w-sm',
- md: 'max-w-md',
- lg: 'max-w-lg',
- xl: 'max-w-xl',
- '2xl': 'max-w-2xl',
- '3xl': 'max-w-3xl',
- '4xl': 'max-w-4xl',
- '5xl': 'max-w-5xl',
- '6xl': 'max-w-6xl',
- full: 'max-w-full',
- };
- return maxWidthMap[maxWidth];
- };
-
- return (
-
- {/* Icon - Left position */}
- {icon && iconPosition === 'left' && (
-
- {icon}
-
- )}
-
- {/* Badge content */}
- {children && {children}}
-
- {/* Icon - Right position */}
- {icon && iconPosition === 'right' && (
-
- {icon}
-
- )}
-
- );
- }
-);
-
-Badge.displayName = 'Badge';
-
-// Badge Group Component for multiple badges
-interface BadgeGroupProps extends HTMLAttributes
- {children}
-
- );
- }
-);
-
-BadgeGroup.displayName = 'BadgeGroup';
-
-// Export types for external use
-export type { BadgeProps, BadgeVariant, BadgeSize, BadgeGroupProps };
\ No newline at end of file
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
deleted file mode 100644
index de9718a5..00000000
--- a/components/ui/Button.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import React, { forwardRef, ButtonHTMLAttributes, ReactNode } from 'react';
-import { cn } from '../../lib/utils';
-import { getViewport, getTouchTargetSize } from '../../lib/responsive';
-
-// Button variants
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
-
-// Button sizes
-type ButtonSize = 'sm' | 'md' | 'lg';
-
-// Button props interface
-interface ButtonProps extends ButtonHTMLAttributes
-
-
- );
-};
-
-// Main Button component
-export const Button = forwardRef
- {children}
-
- );
- }
-);
-
-Card.displayName = 'Card';
-
-// Card Header Component
-export const CardHeader = forwardRef
-
- );
- }
-);
-
-CardHeader.displayName = 'CardHeader';
-
-// Card Body Component
-export const CardBody = forwardRef
- {icon &&
- {action && {icon}}
-
- {title && (
-
-
- {title}
-
- )}
- {subtitle && (
-
- {subtitle}
-
- )}
- {children}
- {action}}
-
- {children}
-
- );
- }
-);
-
-CardBody.displayName = 'CardBody';
-
-// Card Footer Component
-export const CardFooter = forwardRef
- {children}
-
- );
- }
-);
-
-CardFooter.displayName = 'CardFooter';
-
-// Card Image Component
-export const CardImage = forwardRef
- {/* eslint-disable-next-line @next/next/no-img-element */}
-
- );
- }
-
- return (
-
-
-
- {/* eslint-disable-next-line @next/next/no-img-element */}
-
- );
- }
-);
-
-CardImage.displayName = 'CardImage';
-
-// Export types for external use
-export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, CardImageProps, CardVariant };
\ No newline at end of file
diff --git a/components/ui/ComponentsExample.tsx b/components/ui/ComponentsExample.tsx
deleted file mode 100644
index d3e10ea1..00000000
--- a/components/ui/ComponentsExample.tsx
+++ /dev/null
@@ -1,431 +0,0 @@
-/**
- * UI Components Example
- *
- * This file demonstrates how to use all the UI components in the design system.
- * Each component is shown with various props and configurations.
- */
-
-import React from 'react';
-import {
- Button,
- Card,
- CardHeader,
- CardBody,
- CardFooter,
- CardImage,
- Container,
- Grid,
- GridItem,
- Badge,
- BadgeGroup,
- Loading,
- LoadingButton,
- LoadingSkeleton,
-} from './index';
-
-// Example Icons (using simple SVG)
-const ArrowRightIcon = () => (
-
-);
-
-const CheckIcon = () => (
-
-);
-
-const StarIcon = () => (
-
-);
-
-// Button Examples
-export const ButtonExamples = () => (
-
-
-
-);
-
-// Card Examples
-export const CardExamples = () => (
- Buttons
-
- {/* Primary Buttons */}
-
-
-
-
- } iconPosition="right">With Icon
-
-
-
-
- {/* Secondary Buttons */}
-
-
- }>Success
-
-
- {/* Outline Buttons */}
-
-
- }>With Icon
-
-
- {/* Ghost Buttons */}
-
-
-
-
-
-
-);
-
-// Container Examples
-export const ContainerExamples = () => (
- Cards
-
-
-
-
-
-);
-
-// Grid Examples
-export const GridExamples = () => (
- Containers
-
-
-
-);
-
-// Badge Examples
-export const BadgeExamples = () => (
- Grid System
-
- {/* Basic Grid */}
-
-
-
- {/* Grid with Span */}
-
- {item}
-
- ))}
-
-
-
- {/* Responsive Grid */}
-
-
-
- Item {item}
-
- ))}
-
-
-);
-
-// Loading Examples
-export const LoadingExamples = () => (
- Badges
-
-
- {/* Badge Variants */}
-
-
-
-
- {/* Badge Sizes */}
-
-
-
- {/* Badges with Icons */}
-
-
-
- {/* Rounded Badges */}
-
-
-
-
-);
-
-// Combined Example - Full Page Layout
-export const FullPageExample = () => (
- Loading Components
-
-
- {/* Spinner Sizes */}
-
-
-
-
- {/* Spinner Variants */}
-
-
-
-
-
- {/* Loading with Text */}
-
-
-
-
-
- {/* Loading Button */}
-
-
-
- {/* Loading Skeleton */}
-
-
-
-
-
- {/* Header Section */}
-
-
-
-
- {/* Hero Card */}
- UI Components Showcase
-
-
-
- {/* Action Section */}
- Features
-
-
-
-
-
- }>Star on GitHub
-
-
-
- );
-};
-
-export default AllComponentsExample;
\ No newline at end of file
diff --git a/components/ui/Container.tsx b/components/ui/Container.tsx
deleted file mode 100644
index 04dc7df8..00000000
--- a/components/ui/Container.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { forwardRef, ReactNode, HTMLAttributes } from 'react';
-import { cn } from '../../lib/utils';
-import { getViewport } from '../../lib/responsive';
-
-// Container props interface
-interface ContainerProps extends HTMLAttributes
- {children}
-
- );
- }
-);
-
-Container.displayName = 'Container';
-
-// Export types for external use
-export type { ContainerProps };
\ No newline at end of file
diff --git a/components/ui/Grid.tsx b/components/ui/Grid.tsx
deleted file mode 100644
index 8dca6d95..00000000
--- a/components/ui/Grid.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import React, { forwardRef, ReactNode, HTMLAttributes } from 'react';
-import { cn } from '../../lib/utils';
-import { getViewport } from '../../lib/responsive';
-
-// Grid column types
-type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-// Grid gap types
-type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'responsive';
-
-// Grid props interface
-interface GridProps extends HTMLAttributes
- {children}
-
- );
- }
-);
-
-Grid.displayName = 'Grid';
-
-// Grid Item Component
-export const GridItem = forwardRef
- {children}
-
- );
- }
-);
-
-GridItem.displayName = 'GridItem';
-
-// Export types for external use
-export type { GridProps, GridItemProps, GridCols, GridGap };
\ No newline at end of file
diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
deleted file mode 100644
index 3c9872c5..00000000
--- a/components/ui/Icon.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-'use client';
-
-import React from 'react';
-import { cn } from '../../lib/utils';
-import * as LucideIcons from 'lucide-react';
-
-// Supported icon types
-export type IconName =
- // Lucide icons (primary)
- | 'star' | 'check' | 'x' | 'arrow-left' | 'arrow-right' | 'chevron-left' | 'chevron-right'
- | 'quote' | 'phone' | 'mail' | 'map-pin' | 'clock' | 'calendar' | 'user' | 'users'
- | 'award' | 'briefcase' | 'building' | 'globe' | 'settings' | 'tool' | 'wrench'
- | 'shield' | 'lock' | 'key' | 'heart' | 'thumbs-up' | 'message-circle' | 'phone-call'
- | 'mail-open' | 'map' | 'navigation' | 'home' | 'info' | 'alert-circle' | 'check-circle'
- | 'x-circle' | 'plus' | 'minus' | 'search' | 'filter' | 'download' | 'upload'
- | 'share-2' | 'link' | 'external-link' | 'file-text' | 'file' | 'folder'
- // Font Awesome style aliases (for WP compatibility)
- | 'fa-star' | 'fa-check' | 'fa-times' | 'fa-arrow-left' | 'fa-arrow-right'
- | 'fa-quote-left' | 'fa-phone' | 'fa-envelope' | 'fa-map-marker' | 'fa-clock-o'
- | 'fa-calendar' | 'fa-user' | 'fa-users' | 'fa-trophy' | 'fa-briefcase'
- | 'fa-building' | 'fa-globe' | 'fa-cog' | 'fa-wrench' | 'fa-shield'
- | 'fa-lock' | 'fa-key' | 'fa-heart' | 'fa-thumbs-up' | 'fa-comment'
- | 'fa-phone-square' | 'fa-envelope-open' | 'fa-map' | 'fa-compass'
- | 'fa-home' | 'fa-info-circle' | 'fa-check-circle' | 'fa-times-circle'
- | 'fa-plus' | 'fa-minus' | 'fa-search' | 'fa-filter' | 'fa-download'
- | 'fa-upload' | 'fa-share-alt' | 'fa-link' | 'fa-external-link'
- | 'fa-file-text' | 'fa-file' | 'fa-folder';
-
-export interface IconProps {
- name: IconName;
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
- className?: string;
- color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted' | 'current';
- strokeWidth?: number;
- onClick?: () => void;
- ariaLabel?: string;
-}
-
-/**
- * Icon Component
- * Universal icon component supporting Lucide icons and Font Awesome aliases
- * Maps WPBakery vc_icon patterns to modern React icons
- */
-export const Icon: React.FC
-
- );
-};
-
-export default Icon;
\ No newline at end of file
diff --git a/components/ui/Loading.tsx b/components/ui/Loading.tsx
deleted file mode 100644
index d9d8c380..00000000
--- a/components/ui/Loading.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react';
-import { cn } from '../../lib/utils';
-
-// Loading sizes
-type LoadingSize = 'sm' | 'md' | 'lg' | 'xl';
-
-// Loading variants
-type LoadingVariant = 'primary' | 'secondary' | 'neutral' | 'contrast';
-
-// Loading props interface
-interface LoadingProps extends HTMLAttributes
-
- {title}
- {description && (
-
-
- );
- }
-
- return (
-
- {spinner}
- {text && (
-
- {text}
-
- )}
-
-
- {spinner}
- {text && (
-
- {text}
-
- )}
-
- );
- }
-);
-
-Loading.displayName = 'Loading';
-
-// Loading Button Component
-interface LoadingButtonProps extends HTMLAttributes
-
- {text}
-
- );
- }
-);
-
-LoadingButton.displayName = 'LoadingButton';
-
-// Loading Skeleton Component
-interface LoadingSkeletonProps extends HTMLAttributes
-
-Item 1
- Item 2
- Item 3
-
- {/* Slides Container */}
-
- );
-};
-
-// Helper function to convert WPBakery slider HTML to Slide array
-export function parseWpSlider(content: string): Slide[] {
- // This would parse nectar_slider or similar WPBakery slider patterns
- // For now, returns empty array - can be enhanced based on actual WP content
- return [];
-}
-
-export default Slider;
\ No newline at end of file
diff --git a/components/ui/index.ts b/components/ui/index.ts
deleted file mode 100644
index 0bb928da..00000000
--- a/components/ui/index.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// UI Components Export
-export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './Button';
-export {
- Card,
- CardHeader,
- CardBody,
- CardFooter,
- CardImage,
- type CardProps,
- type CardHeaderProps,
- type CardBodyProps,
- type CardFooterProps,
- type CardImageProps,
- type CardVariant
-} from './Card';
-export { Container, type ContainerProps } from './Container';
-export { Grid, GridItem, type GridProps, type GridItemProps, type GridCols, type GridGap } from './Grid';
-export {
- Badge,
- BadgeGroup,
- type BadgeProps,
- type BadgeVariant,
- type BadgeSize,
- type BadgeGroupProps
-} from './Badge';
-export {
- Loading,
- LoadingButton,
- LoadingSkeleton,
- type LoadingProps,
- type LoadingSize,
- type LoadingVariant,
- type LoadingButtonProps,
- type LoadingSkeletonProps
-} from './Loading';
-export { Slider, type Slide, type SliderProps, parseWpSlider } from './Slider';
-export { Icon, IconButton, IconFeature, parseWpIcon, type IconProps, type IconName } from './Icon';
\ No newline at end of file
diff --git a/data/attribute-check-results.json b/data/attribute-check-results.json
deleted file mode 100644
index 524b842a..00000000
--- a/data/attribute-check-results.json
+++ /dev/null
@@ -1,51 +0,0 @@
-[
- {
- "id": 46773,
- "name": "NA2XS(FL)2Y",
- "hasAttributes": false,
- "count": 0,
- "attributes": []
- },
- {
- "id": 46771,
- "name": "N2XS(FL)2Y",
- "hasAttributes": false,
- "count": 0,
- "attributes": []
- },
- {
- "id": 46769,
- "name": "H1Z2Z2-K",
- "hasAttributes": false,
- "count": 0,
- "attributes": []
- },
- {
- "id": 46767,
- "name": "NA2X(F)K2Y",
- "hasAttributes": false,
- "count": 0,
- "attributes": []
- },
- {
- "id": 46765,
- "name": "N2X(F)K2Y",
- "hasAttributes": false,
- "count": 0,
- "attributes": []
- },
- {
- "id": 46763,
- "name": "NA2X(F)KLD2Y",
- "hasAttributes": false,
- "count": 0,
- "attributes": []
- },
- {
- "id": 46761,
- "name": "N2X(F)KLD2Y",
- "hasAttributes": false,
- "count": 0,
- "attributes": []
- }
-]
\ No newline at end of file
diff --git a/data/backup/products-1767735299375.json b/data/backup/products-1767735299375.json
deleted file mode 100644
index 9b0dcf5a..00000000
--- a/data/backup/products-1767735299375.json
+++ /dev/null
@@ -1,27048 +0,0 @@
-[
- {
- "id": 46773,
- "translationKey": "na2xsfl2y-3",
- "locale": "en",
- "slug": "na2xsfl2y-3",
- "path": "/product/na2xsfl2y-3",
- "name": "NA2XS(FL)2Y",
- "shortDescriptionHtml": "
- {slides.map((slide, index) => (
-
-
- {/* Navigation Controls */}
- {showControls && slides.length > 1 && (
- <>
-
-
-
-
- )}
-
- {/* Indicators */}
- {showIndicators && slides.length > 1 && (
-
- {/* Background Image */}
- {slide.image && (
-
- ))}
-
-
- {/* Overlay for better text readability */}
-
-
- )}
-
- {/* Content */}
-
-
-
- {slide.subtitle && (
-
-
- {slide.title}
-
- )}
-
- {slide.description && (
-
- {slides.map((_, index) => (
-
- )}
-
- {/* Slide Counter (optional, for accessibility) */}
-
- {currentIndex + 1} / {slides.length}
-
- Ideal for high-voltage applications underground and outdoors
Structure and technical features
Properties and application benefits
Flexible in use – underground, underwater, and on cable trays
Technical structure
Application features
For long-term use in demanding environments
Construction and technical features
Key features at a glance
Engineering Overview
Technical Performance and Installation
Compliance and EMC Considerations
Engineering Overview
Technical Performance and Installation
Compliance and Electromagnetic Compatibility
Engineering Overview
Technical Performance and Construction
Installation and Compliance
Engineering Overview
Technical Performance and Installation
Compliance and EMC Considerations
Designed for use in power supply networks
Technical construction
Properties and applications
For high-performance power networks with enhanced protection requirements
Construction and material characteristics
Properties and fields of application
For harsh environments and heavy loads
Construction and technical features
Special features and application benefits
For high-performance medium-voltage networks
Technical construction
Application and properties
For demanding power distribution networks
Technical construction
Properties and benefits
Designed for high-performance network environments
Structure and technical characteristics
Applications and benefits
For underground installation and demanding environments
Technical construction
Features and application benefits
For powerful medium-voltage applications
Construction and technical features
Properties and application benefits
Optimal for mechanically demanding applications
Construction and properties
Application benefits
For demanding network applications
Technical construction
Fields of application
For demanding operating conditions
Construction and technical features
Fields of application
For fixed installation in standard applications
Technical construction
Variants and applications
For demanding installation conditions
Construction and material components
Typical applications
Designed for increased safety requirements
Technical construction
Application and special features
Versatile applications in network construction
Construction and materials
Typical applications
Reliable under heavy load
Detailed construction
Typical applications
Versatile use in power distribution
Construction and materials
Variants and cross-sections
Solid solution for standard applications
Construction and material properties
Fields of application
Ideal für Hochspannungsanwendungen im Erdreich und Freien
Aufbau und technische Merkmale
Eigenschaften und Einsatzvorteile
Flexibel im Einsatz – unter Erde, Wasser und auf Pritschen
Technischer Aufbau
Einsatzmerkmale
Für dauerhafte Einsätze in anspruchsvollen Umgebungen
Aufbau und technische Merkmale
Eigenschaften im Überblick
Technische Übersicht
Installations- und Konstruktionsmerkmale
Normen und Zertifizierungen
Technische Übersicht
Technische Leistung und Konstruktion
Normen und Konformität
Technische Übersicht
Technische Leistung und Konstruktion
Installations- und Normkonformität
Technische Übersicht
Technische Leistung und Konstruktion
EMV und Normkonformität
Entwickelt für den Einsatz in Energieversorgungsnetzen
Technischer Aufbau
Eigenschaften und Anwendung
Für leistungsstarke Versorgungsnetze mit erhöhtem Schutzbedarf
Aufbau und Materialeigenschaften
Eigenschaften und Einsatzbereiche
Für raue Umgebungen und intensive Belastung
Aufbau und technische Merkmale
Besondere Eigenschaften und Einsatzvorteile
Für leistungsstarke Mittelspannungsnetze
Technischer Aufbau
Anwendung und Eigenschaften
Für anspruchsvolle Energieverteilungsnetze
Technischer Aufbau
Eigenschaften und Vorteile
Entwickelt für leistungsstarke Netzumgebungen
Aufbau und technische Eigenschaften
Anwendungsbereiche und Vorteile
Für Erdverlegung und anspruchsvolle Umgebungen
Technischer Aufbau
Merkmale und Einsatzvorteile
Für kraftvolle Mittelspannungsanwendungen
Aufbau und technische Merkmale
Eigenschaften und Einsatzvorteile
Optimal für mechanisch belastete Anwendungen
Aufbau und Eigenschaften
Einsatzvorteile
Für anspruchsvolle Netzanwendungen
Technischer Aufbau
Einsatzbereiche
Für anspruchsvolle Betriebsbedingungen
Aufbau und technische Merkmale
Einsatzgebiete
Für die feste Verlegung in Standardanwendungen
Technischer Aufbau
Varianten und Einsatzmöglichkeiten
Für anspruchsvolle Verlegebedingungen
Aufbau und Materialkomponenten
Typische Einsatzgebiete
Entwickelt für erhöhte Anforderungen an Sicherheit
Technischer Aufbau
Anwendung und Besonderheiten
Vielfältige Einsatzmöglichkeiten im Netzbau
Aufbau und Materialien
Typische Anwendungen
Zuverlässig bei hoher Belastung
Aufbau im Detail
Typische Einsatzbereiche
Vielseitig einsetzbar in der Energieverteilung
Aufbau und Materialien
Varianten und Querschnitte
Solide Lösung für klassische Anwendungen
Aufbau und Materialeigenschaften
Einsatzbereiche
Liefer- und Zahlungsbedingungen
1. Allgemeines
2. Angebote
3. Preise
4. Metallnotierung
5. Metallzahl
6. Auftragsänderung / Auftragsstorno
7. Eigentumsvorbehalt
8. Zahlungsbedingungen | Aufrechnung | Zurückbehaltungsrechte
9. Liefervorbehalt | Teillieferungen
10. Lieferfristen und Liefertermine
11. Abrufaufträge
12. Maß- und Gewichtsangaben
13. Gefahrübergang und -tragung
14. Mängelhaftung
15. Schadenersatz | Gesamthaftung
16. Kabeltrommeln
",
- "excerptHtml": " 17. Sonstiges
",
- "excerptHtml": " Legal Notice
Michael Bodemer
Raiffeisenstraße 22
73630 Remshalden
www.klz-cables.com
HRB-Nr. 798037
Place of jurisdiction: Stuttgart
All texts, images and other information published on the website are subject to copyright unless otherwise indicated. Any duplication, distribution, storage, transmission, reproduction or forwarding of the contents without written permission is expressly prohibited. For further information, please contact the above address.",
- "excerptHtml": " Privacy Policy
1. Data protection at a glance
General information
2. General notes and compulsory information
Data protection
Revocation of your consent to data processing
Right of appeal to the competent supervisory authority
Right to data transferability
Information, blocking, deletion
Contradiction against advertising mails
3. Data collection in our company
Data transfer upon conclusion of the contract for services and digital contents
Thank you very much!
",
- "excerptHtml": "JTNDJTIxLS0lMjBHb29nbGUlMjB0YWclMjAlMjhndGFnLmpzJTI5JTIwLS0lM0UlMjAlM0NzY3JpcHQlMjBhc3luYyUyMHNyYyUzRCUyMmh0dHBzJTNBJTJGJTJGd3d3Lmdvb2dsZXRhZ21hbmFnZXIuY29tJTJGZ3RhZyUyRmpzJTNGaWQlM0RBVy0xNzA5NTg5MjIzOCUyMiUzRSUzQyUyRnNjcmlwdCUzRSUyMCUzQ3NjcmlwdCUzRSUyMHdpbmRvdy5kYXRhTGF5ZXIlMjAlM0QlMjB3aW5kb3cuZGF0YUxheWVyJTIwJTdDJTdDJTIwJTVCJTVEJTNCJTIwZnVuY3Rpb24lMjBndGFnJTI4JTI5JTdCZGF0YUxheWVyLnB1c2glMjhhcmd1bWVudHMlMjklM0IlN0QlMjBndGFnJTI4JTI3anMlMjclMkMlMjBuZXclMjBEYXRlJTI4JTI5JTI5JTNCJTIwZ3RhZyUyOCUyN2NvbmZpZyUyNyUyQyUyMCUyN0FXLTE3MDk1ODkyMjM4JTI3JTI5JTNCJTIwJTNDJTJGc2NyaXB0JTNF The bright sparks behind the power
We connect energy, expertise, and innovation to power a greener future.
Michael Bodemer
“Challenges exist to be solved, not to debate how complicated they are.”
Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project. A Legacy of Excellence in Every Connection
Klaus Mintel
“Sometimes all it takes is a clear head and a good cable to make the world a little better.”
Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor. ",
- "excerptHtml": "Our manifesto
How can we help you?
Have a project in mind?
",
- "excerptHtml": " KLZ Cables
Raiffeisenstraße 22
73630 Remshalden We are helping to expand the energy cable networks for a green future
Low Voltage Cables
Medium Voltage Cables
High Voltage
Solar Cables
Low Voltage Cables
Medium Voltage Cables
High Voltage Cables
Solar Cables
What we do
We ensure that the electricity flows – with quality-tested cables. From low voltage up to high voltage 01
Supply to energy suppliers, wind and solar parks, industry and trade
We support your projects from 1 to 220 kV, from simple NYY to high-voltage cables with segment conductors and aluminum sheaths, with a particular focus on medium-voltage cables. Whether NA2XS(F)2Y in standard design, or up to 1200 mm2 cross-section, with thick sheathing or in the desired lengths. We have partners with an enormous variety. 02
Supply of cables whose quality is certified
Cables are products that have to function 100%. For decades, often 80 to 100 years. Our cables are not only approved by VDE. The most well-known energy suppliers in Germany, the Netherlands and Austria trust us and our manufacturers. And often the requirements are even higher than those of the already strict VDE regulations. 03
We deliver on time because we know the consequences for you
Wind farm North Germany, coordinates XYZ, delivery Wednesday 2-4 p.m., no unloading option. Yes, we know that. We organize the logistics with a back office team that has up to 20 years of cable experience. Customs clearance and proper paperwork included. 04
The cable alone is not the solution
Stony ground? Perhaps a thicker outer sheath would be better? Damp ground? Can there be transverse watertight protection in addition to the longitudinal watertight tape? Longer individual lengths, but no thought given to the limitations of the laying crane? Or often underestimated? What can the floor in the warehouse support? A copper cable can easily weigh 10 tons per kilometer. We think for you and ask questions. Decades of experience rooted in cable history
Why choose us
Experience prevents many mistakes, but we learn something new every day 01
Expertise with depth
Our team has decades of experience – far beyond the founding of KLZ in 2009. The entire team has over 100 years of cable experience, gained in a wide variety of plants, from low voltage to medium voltage to high voltage. We know what cables smell like, what the colleague at the shielding machine is responsible for how testing is carried out. We know the main raw material manufacturers, know the risks of production, and can compare plants. Whether in old or new buildings. Anyone who has decades of audits and prequalification behind them knows where to look. And what are the right questions. 02
Tailor-made solutions for your project
When things get more complex, we involve our technical consultants. That’s where you need experts who haven’t just started their careers. You need people who read and understand standards and have sometimes been involved. We have them, and with their and our experience we differentiate ourselves from simple cable trading