animations
This commit is contained in:
@@ -20,7 +20,7 @@ export default async function LocaleLayout({
|
||||
<body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark">
|
||||
<NextIntlClientProvider messages={messages} locale={locale}>
|
||||
<Header />
|
||||
<main className="flex-grow animate-fade-in">
|
||||
<main className="flex-grow animate-fade-in overflow-visible">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -6,6 +6,11 @@ import ProductTabs from '@/components/ProductTabs';
|
||||
import RequestQuoteForm from '@/components/RequestQuoteForm';
|
||||
import RelatedProducts from '@/components/RelatedProducts';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { Section, Container, Heading, Badge, Button } from '@/components/ui';
|
||||
import ProductsIllustration from '@/components/products/ProductsIllustration';
|
||||
import Scribble from '@/components/Scribble';
|
||||
|
||||
interface ProductPageProps {
|
||||
params: {
|
||||
@@ -17,10 +22,28 @@ interface ProductPageProps {
|
||||
const components = {
|
||||
ProductTechnicalData,
|
||||
ProductTabs,
|
||||
p: (props: any) => <div {...props} className="mb-4" />,
|
||||
p: (props: any) => <p {...props} className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8" />,
|
||||
h2: (props: any) => (
|
||||
<div className="relative mt-20 mb-10">
|
||||
<h2 {...props} className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-primary tracking-tight" />
|
||||
<div className="absolute -bottom-4 left-0 w-24 h-1.5 bg-accent rounded-full" />
|
||||
</div>
|
||||
),
|
||||
h3: (props: any) => <h3 {...props} className="text-2xl md:text-3xl lg:text-4xl font-bold text-primary mt-16 mb-6 tracking-tight" />,
|
||||
ul: (props: any) => <ul {...props} className="list-disc pl-8 mb-10 space-y-4 text-text-secondary text-lg md:text-xl" />,
|
||||
li: (props: any) => <li {...props} className="pl-2 marker:text-accent marker:font-bold" />,
|
||||
table: (props: any) => (
|
||||
<div className="overflow-x-auto my-8">
|
||||
<table {...props} className="min-w-full divide-y divide-neutral-dark border border-neutral-dark" />
|
||||
<div className="overflow-x-auto my-16 rounded-3xl border border-neutral-dark/10 shadow-xl bg-white p-1">
|
||||
<table {...props} className="min-w-full divide-y divide-neutral-dark/10" />
|
||||
</div>
|
||||
),
|
||||
th: (props: any) => <th {...props} className="px-8 py-6 bg-neutral-light/50 text-left text-xs font-black uppercase tracking-[0.25em] text-primary/60" />,
|
||||
td: (props: any) => <td {...props} className="px-8 py-6 text-text-secondary border-t border-neutral-dark/5 text-lg md:text-xl" />,
|
||||
hr: () => <hr className="my-20 border-t-2 border-neutral-dark/5" />,
|
||||
blockquote: (props: any) => (
|
||||
<div className="my-12 p-8 md:p-12 bg-primary-dark rounded-3xl relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 w-48 h-48 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl group-hover:bg-accent/20 transition-colors duration-700" />
|
||||
<div className="relative z-10 italic text-2xl md:text-3xl text-white/90 leading-relaxed font-medium" {...props} />
|
||||
</div>
|
||||
),
|
||||
};
|
||||
@@ -28,49 +51,90 @@ const components = {
|
||||
export default async function ProductPage({ params }: ProductPageProps) {
|
||||
const { locale, slug } = params;
|
||||
const productSlug = slug[slug.length - 1];
|
||||
const t = await getTranslations('Products');
|
||||
|
||||
// Check if it's a category page
|
||||
const categories = ['low-voltage-cables', 'medium-voltage-cables', 'high-voltage-cables', 'solar-cables'];
|
||||
if (categories.includes(productSlug)) {
|
||||
const allProducts = await getAllProducts(locale);
|
||||
const categoryTitle = productSlug.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
|
||||
const categoryKey = productSlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
const categoryTitle = t(`categories.${categoryKey}.title`);
|
||||
|
||||
// Filter products for this category
|
||||
// Note: MDX categories are like "Low Voltage Cables"
|
||||
const filteredProducts = allProducts.filter(p =>
|
||||
p.frontmatter.categories.some(cat => cat.toLowerCase().replace(/\s+/g, '-') === productSlug)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<h1 className="text-4xl font-bold text-primary mb-8">{categoryTitle}</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredProducts.map((product) => (
|
||||
<Link
|
||||
key={product.slug}
|
||||
href={`/${locale}/products/${productSlug}/${product.slug}`}
|
||||
className="group block bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all border border-neutral-dark"
|
||||
>
|
||||
<div className="aspect-[4/3] relative bg-neutral-light">
|
||||
{product.frontmatter.images?.[0] && (
|
||||
<img
|
||||
src={product.frontmatter.images[0]}
|
||||
alt={product.frontmatter.title}
|
||||
className="w-full h-full object-contain p-4 group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-text-primary group-hover:text-primary transition-colors">
|
||||
{product.frontmatter.title}
|
||||
</h2>
|
||||
<p className="text-text-secondary mt-2 line-clamp-2 text-sm">
|
||||
{product.frontmatter.description}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col min-h-screen bg-white">
|
||||
<section className="relative min-h-[50vh] flex items-center pt-32 pb-20 overflow-hidden bg-primary-dark">
|
||||
<ProductsIllustration />
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-4xl animate-slide-up">
|
||||
<nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
|
||||
<Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>
|
||||
<span className="mx-3 opacity-30">/</span>
|
||||
<span className="text-white/90">{categoryTitle}</span>
|
||||
</nav>
|
||||
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white mb-8 tracking-tight leading-[1.05]">
|
||||
{categoryTitle}
|
||||
</h1>
|
||||
<div className="h-1.5 w-24 bg-accent rounded-full" />
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<Section className="bg-neutral-light relative z-20 -mt-12 rounded-t-[48px] md:rounded-t-[64px]">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredProducts.map((product) => (
|
||||
<Link
|
||||
key={product.slug}
|
||||
href={`/${locale}/products/${productSlug}/${product.slug}`}
|
||||
className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
|
||||
>
|
||||
<div className="aspect-[4/3] relative bg-neutral-light/30 p-12 overflow-hidden">
|
||||
{product.frontmatter.images?.[0] && (
|
||||
<>
|
||||
<Image
|
||||
src={product.frontmatter.images[0]}
|
||||
alt={product.frontmatter.title}
|
||||
fill
|
||||
className="object-contain p-8 transition-transform duration-700 group-hover:scale-110 z-10"
|
||||
/>
|
||||
{/* Subtle reflection/shadow effect */}
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 w-2/3 h-4 bg-black/5 blur-xl rounded-full" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-8 md:p-10">
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{product.frontmatter.categories.map((cat, i) => (
|
||||
<span key={i} className="text-[10px] font-bold uppercase tracking-widest text-primary/40">
|
||||
{cat}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-text-primary group-hover:text-primary transition-colors mb-4 leading-tight">
|
||||
{product.frontmatter.title}
|
||||
</h2>
|
||||
<p className="text-text-secondary line-clamp-2 text-base leading-relaxed mb-8">
|
||||
{product.frontmatter.description}
|
||||
</p>
|
||||
<div className="flex items-center text-primary font-bold group-hover:text-accent-dark transition-colors">
|
||||
<span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-1">
|
||||
{t('details')}
|
||||
</span>
|
||||
<svg className="w-5 h-5 ml-3 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -81,63 +145,127 @@ export default async function ProductPage({ params }: ProductPageProps) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-primary mb-4">{product.frontmatter.title}</h1>
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{product.frontmatter.categories.map((cat, idx) => (
|
||||
<span key={idx} className="bg-neutral-dark text-text-secondary px-2 py-1 rounded text-sm">
|
||||
{cat}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
const isFallback = (product.frontmatter as any).isFallback;
|
||||
const categorySlug = slug[0];
|
||||
const categoryKey = categorySlug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
const categoryTitle = t(`categories.${categoryKey}.title`);
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2">
|
||||
{/* Main Content Area */}
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-neutral-dark">
|
||||
<MDXRemote source={product.content} components={components} />
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-neutral-light">
|
||||
{/* Product Hero */}
|
||||
<section className="relative pt-40 pb-32 overflow-hidden bg-primary-dark">
|
||||
<ProductsIllustration />
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-5xl animate-slide-up">
|
||||
<nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
|
||||
<Link href={`/${locale}/products`} className="hover:text-accent transition-colors">{t('title')}</Link>
|
||||
<span className="mx-3 opacity-30">/</span>
|
||||
<Link href={`/${locale}/products/${categorySlug}`} className="hover:text-accent transition-colors">{categoryTitle}</Link>
|
||||
<span className="mx-3 opacity-30">/</span>
|
||||
<span className="text-white/90">{product.frontmatter.title}</span>
|
||||
</nav>
|
||||
|
||||
<div className="flex flex-col lg:flex-row lg:items-end justify-between gap-12">
|
||||
<div className="flex-1">
|
||||
{isFallback && (
|
||||
<div className="mb-6 inline-flex items-center px-3 py-1 rounded-md bg-accent/10 border border-accent/20 text-accent text-[10px] font-bold uppercase tracking-widest">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-accent mr-2 animate-pulse" />
|
||||
{t('englishVersion')}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-3 mb-8">
|
||||
{product.frontmatter.categories.map((cat, idx) => (
|
||||
<Badge key={idx} variant="accent" className="bg-white/10 text-white/90 border-white/10 backdrop-blur-md px-4 py-1.5">
|
||||
{cat}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white mb-0 tracking-tight leading-[1.05]">
|
||||
{product.frontmatter.title}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Related Products */}
|
||||
<RelatedProducts
|
||||
currentSlug={productSlug}
|
||||
categories={product.frontmatter.categories}
|
||||
locale={locale}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-4 space-y-6">
|
||||
{/* Image Gallery */}
|
||||
{product.frontmatter.images && product.frontmatter.images.length > 0 && (
|
||||
<div className="bg-white p-4 rounded-lg shadow-sm border border-neutral-dark">
|
||||
<div className="relative aspect-square mb-4 bg-neutral-light rounded overflow-hidden">
|
||||
<img
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<Section className="bg-neutral-light relative z-20 -mt-16 pt-0">
|
||||
<Container>
|
||||
{/* Large Product Image Section */}
|
||||
{product.frontmatter.images && product.frontmatter.images.length > 0 && (
|
||||
<div className="relative -mt-24 mb-24 animate-slide-up" style={{ animationDelay: '200ms' }}>
|
||||
<div className="bg-white shadow-2xl border border-neutral-dark/5 overflow-hidden p-10 md:p-16 lg:p-20">
|
||||
<div className="relative w-full aspect-[21/9]">
|
||||
<Image
|
||||
src={product.frontmatter.images[0]}
|
||||
alt={product.frontmatter.title}
|
||||
className="w-full h-full object-contain"
|
||||
fill
|
||||
className="object-contain transition-transform duration-1000 hover:scale-105"
|
||||
priority
|
||||
/>
|
||||
{/* Subtle reflection/shadow effect */}
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-3/4 h-12 bg-black/5 blur-3xl rounded-[100%]" />
|
||||
</div>
|
||||
|
||||
{product.frontmatter.images.length > 1 && (
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{product.frontmatter.images.slice(1, 5).map((img, idx) => (
|
||||
<div key={idx} className="relative aspect-square border border-neutral-dark rounded overflow-hidden bg-neutral-light">
|
||||
<img src={img} alt="" className="w-full h-full object-cover" />
|
||||
<div className="flex justify-center gap-6 mt-16">
|
||||
{product.frontmatter.images.slice(0, 5).map((img, idx) => (
|
||||
<div key={idx} className="relative w-24 h-24 md:w-32 md:h-32 border-2 border-neutral-dark/10 rounded-xl overflow-hidden bg-neutral-light/20 hover:border-accent transition-all duration-300 cursor-pointer group">
|
||||
<Image src={img} alt="" fill className="object-cover transition-transform duration-500 group-hover:scale-110" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-16 lg:gap-24 relative items-start overflow-visible">
|
||||
<div className="flex-1 w-full">
|
||||
{/* Main Content Area */}
|
||||
<div className="prose prose-lg md:prose-xl prose-slate max-w-none prose-headings:text-primary prose-headings:font-extrabold prose-a:text-primary prose-strong:text-primary prose-img:rounded-3xl prose-img:shadow-2xl">
|
||||
<MDXRemote source={product.content} components={components} />
|
||||
</div>
|
||||
|
||||
{/* Related Products */}
|
||||
<RelatedProducts
|
||||
currentSlug={productSlug}
|
||||
categories={product.frontmatter.categories}
|
||||
locale={locale}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Request Quote Form */}
|
||||
<RequestQuoteForm productName={product.frontmatter.title} />
|
||||
<div className="w-full lg:w-[450px] xl:w-[500px] lg:sticky lg:top-32">
|
||||
<div className="lg:translate-x-12 xl:translate-x-20">
|
||||
{/* Request Quote Form */}
|
||||
<div className="bg-white rounded-3xl shadow-2xl border border-neutral-dark/5 overflow-hidden">
|
||||
<div className="bg-primary-dark p-6 md:p-8 text-white relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-40 h-40 bg-accent/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl" />
|
||||
|
||||
{/* Product Thumbnail for Sticky State */}
|
||||
{product.frontmatter.images?.[0] && (
|
||||
<div className="relative w-full aspect-[16/9] mb-6 rounded-xl overflow-hidden bg-white/10 backdrop-blur-md p-3 border border-white/10 z-10">
|
||||
<Image
|
||||
src={product.frontmatter.images[0]}
|
||||
alt=""
|
||||
fill
|
||||
className="object-contain p-1"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h3 className="text-xl md:text-2xl font-extrabold mb-2 relative z-10 tracking-tight">{t('requestQuote')}</h3>
|
||||
<p className="text-white/60 text-sm relative z-10 leading-relaxed">{t('requestQuoteDesc')}</p>
|
||||
</div>
|
||||
<div className="p-6 md:p-8">
|
||||
<RequestQuoteForm productName={product.frontmatter.title} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container, Heading, Card, Badge } from '@/components/ui';
|
||||
import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
|
||||
import ProductsIllustration from '@/components/products/ProductsIllustration';
|
||||
import Scribble from '@/components/Scribble';
|
||||
|
||||
interface ProductsPageProps {
|
||||
params: {
|
||||
@@ -46,52 +48,74 @@ export default function ProductsPage({ params }: ProductsPageProps) {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-neutral-light">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-primary-dark text-white py-32 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-accent/10 skew-x-12 translate-x-1/4" />
|
||||
</div>
|
||||
<section className="relative min-h-[70vh] flex items-center pt-40 pb-32 overflow-hidden bg-primary-dark">
|
||||
<ProductsIllustration />
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-4xl animate-slide-up">
|
||||
<Heading level={1} subtitle="Product Portfolio" className="text-white mb-6">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
</Heading>
|
||||
<p className="text-2xl text-white/70 leading-relaxed max-w-2xl">
|
||||
<Badge variant="accent" className="mb-8 bg-white/10 text-white border border-white/20 backdrop-blur-md px-4 py-1.5">
|
||||
{t('heroSubtitle')}
|
||||
</Badge>
|
||||
<h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white mb-8 tracking-tight leading-[1.05]">
|
||||
{t.rich('title', {
|
||||
green: (chunks) => (
|
||||
<span className="relative inline-block">
|
||||
<span className="relative z-10 text-accent italic">{chunks}</span>
|
||||
<Scribble variant="circle" className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30" />
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-white/70 leading-relaxed max-w-2xl mb-12">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<Button href="#categories" variant="accent" size="lg" className="group">
|
||||
{t('viewProducts')}
|
||||
<span className="ml-3 transition-transform group-hover:translate-y-1">↓</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<Section className="bg-neutral-light -mt-16 relative z-20">
|
||||
<Section id="categories" className="bg-neutral-light relative z-20 -mt-16 rounded-t-[48px] md:rounded-t-[64px] pt-24">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
|
||||
{categories.map((category, idx) => (
|
||||
<Link key={idx} href={category.href} className="group block">
|
||||
<Card className="h-full border-none shadow-xl hover:shadow-2xl transition-all duration-700 rounded-[40px] overflow-hidden bg-white">
|
||||
<div className="relative h-[400px] overflow-hidden">
|
||||
<Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[32px] md:rounded-[48px] overflow-hidden bg-white">
|
||||
<div className="relative h-[300px] md:h-[400px] overflow-hidden">
|
||||
<Image
|
||||
src={category.img}
|
||||
alt={category.title}
|
||||
fill
|
||||
className="object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||
className="object-cover transition-transform duration-1000 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark/90 via-primary-dark/20 to-transparent" />
|
||||
<div className="absolute top-8 right-8 w-20 h-20 bg-white/10 backdrop-blur-xl rounded-3xl flex items-center justify-center border border-white/20 shadow-2xl">
|
||||
<img src={category.icon} alt="" className="w-12 h-12 brightness-0 invert" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-primary-dark/60 via-transparent to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
|
||||
|
||||
<div className="absolute top-6 right-6 md:top-8 md:right-8 w-16 h-16 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-2xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
|
||||
<img src={category.icon} alt="" className="w-10 h-10 md:w-12 md:h-12 brightness-0 invert opacity-80" />
|
||||
</div>
|
||||
<div className="absolute bottom-10 left-10 right-10">
|
||||
<Badge variant="accent" className="mb-4 shadow-lg">Category</Badge>
|
||||
<h2 className="text-4xl font-bold text-white mb-4 leading-tight">{category.title}</h2>
|
||||
|
||||
<div className="absolute bottom-8 left-8 md:bottom-10 md:left-10 right-8 md:right-10">
|
||||
<Badge variant="accent" className="mb-4 shadow-lg bg-accent text-primary-dark border-none">
|
||||
{t('categoryLabel')}
|
||||
</Badge>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white leading-tight transition-transform duration-500 group-hover:translate-x-1">
|
||||
{category.title}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-12">
|
||||
<p className="text-text-secondary text-xl leading-relaxed mb-10">
|
||||
<div className="p-8 md:p-10">
|
||||
<p className="text-text-secondary text-lg leading-relaxed mb-8">
|
||||
{category.desc}
|
||||
</p>
|
||||
<div className="flex items-center text-primary font-extrabold text-lg group-hover:text-accent-dark transition-colors">
|
||||
{t('viewProducts')}
|
||||
<div className="ml-4 w-12 h-12 rounded-full bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300">
|
||||
<svg className="w-6 h-6 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div className="flex items-center text-primary font-bold text-lg group-hover:text-accent-dark transition-colors">
|
||||
<span className="border-b-2 border-primary/10 group-hover:border-accent-dark transition-colors pb-1">
|
||||
{t('viewProducts')}
|
||||
</span>
|
||||
<div className="ml-4 w-10 h-10 rounded-full bg-primary-light flex items-center justify-center text-primary group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
|
||||
<svg className="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
@@ -107,19 +131,19 @@ export default function ProductsPage({ params }: ProductsPageProps) {
|
||||
{/* Technical Support CTA */}
|
||||
<Section className="bg-white">
|
||||
<Container>
|
||||
<div className="bg-primary-dark rounded-[60px] p-16 md:p-24 relative overflow-hidden">
|
||||
<div className="bg-primary-dark rounded-[48px] md:rounded-[64px] p-12 md:p-20 lg:p-24 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-accent/5 -skew-x-12 translate-x-1/4" />
|
||||
<div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
|
||||
<div className="max-w-2xl text-center lg:text-left">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Need Technical Assistance?</h2>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-8 tracking-tight">{t('cta.title')}</h2>
|
||||
<p className="text-xl text-white/70 leading-relaxed">
|
||||
Our team of experts is ready to help you find the perfect cable solution for your specific technical requirements and environmental conditions.
|
||||
{t('cta.description')}
|
||||
</p>
|
||||
</div>
|
||||
<Link href={`/${params.locale}/contact`} className="inline-flex items-center justify-center h-20 px-12 rounded-full bg-accent text-primary-dark font-extrabold text-xl hover:bg-accent-dark transition-all shadow-2xl shadow-accent/20 group">
|
||||
Contact Experts
|
||||
<Button href={`/${params.locale}/contact`} variant="accent" size="xl" className="group whitespace-nowrap">
|
||||
{t('cta.button')}
|
||||
<span className="ml-4 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@@ -99,18 +99,15 @@ export default function TeamPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-6 grid grid-cols-2 gap-6">
|
||||
{[
|
||||
{ label: 'Founded', value: '1998' },
|
||||
{ label: 'Global Reach', value: '45+' },
|
||||
{ label: 'Team Members', value: '120+' },
|
||||
{ label: 'Innovation Awards', value: '12' },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-[32px] hover:bg-white/10 transition-colors">
|
||||
<div className="text-4xl font-extrabold text-accent mb-2">{stat.value}</div>
|
||||
<div className="text-sm font-bold uppercase tracking-widest text-white/50">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="lg:col-span-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-[32px] hover:bg-white/10 transition-colors">
|
||||
<div className="text-4xl font-extrabold text-accent mb-2">Expertise</div>
|
||||
<div className="text-sm font-bold uppercase tracking-widest text-white/50">Decades of Industry Knowledge</div>
|
||||
</div>
|
||||
<div className="p-8 bg-white/5 backdrop-blur-md border border-white/10 rounded-[32px] hover:bg-white/10 transition-colors">
|
||||
<div className="text-4xl font-extrabold text-accent mb-2">Network</div>
|
||||
<div className="text-sm font-bold uppercase tracking-widest text-white/50">Strong Global Partnerships</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user