66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import {useEffect, useState} from 'react';
|
|
import Link from 'next/link';
|
|
import {PhoneOutlined} from '@ant-design/icons';
|
|
import {useLanguage} from '@/app/context/LanguageContext';
|
|
import {commerceCopy} from '@/data/commerce';
|
|
import HorizontalShowcase from './HorizontalShowcase';
|
|
import MobileShowcase from './MobileShowcase';
|
|
|
|
const MOBILE_BREAKPOINT = 768;
|
|
|
|
export default function ShowcaseSection() {
|
|
const {t, locale} = useLanguage();
|
|
const copy = commerceCopy[locale];
|
|
const [isMobile, setIsMobile] = useState<boolean | null>(null);
|
|
|
|
useEffect(() => {
|
|
const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
|
|
const handleChange = (event: MediaQueryListEvent) => setIsMobile(event.matches);
|
|
|
|
setIsMobile(mediaQuery.matches);
|
|
mediaQuery.addEventListener('change', handleChange);
|
|
|
|
return () => mediaQuery.removeEventListener('change', handleChange);
|
|
}, []);
|
|
|
|
if (isMobile === null) return null;
|
|
if (!isMobile)
|
|
return (
|
|
<>
|
|
<HorizontalShowcase />
|
|
<section className="px-6 md:px-16 py-14 bg-surface border-t border-subtle">
|
|
<div className="max-w-5xl mx-auto flex flex-wrap items-center justify-between gap-6 rounded-2xl border border-subtle bg-elevated p-7">
|
|
<div className="max-w-2xl">
|
|
<h3 className="text-2xl font-bold text-primary">{copy.supportOrderTitle}</h3>
|
|
<p className="mt-3 text-secondary leading-7">{copy.supportOrderDescription}</p>
|
|
</div>
|
|
<a
|
|
href={`tel:${t.contactInfo.orderPhoneHref}`}
|
|
className="inline-flex items-center justify-center gap-2 rounded-xl bg-brand px-6 py-3 font-bold text-ink-950 transition-colors hover:bg-brand-300"
|
|
dir="ltr"
|
|
>
|
|
<PhoneOutlined />
|
|
<span>{copy.callSupport}</span>
|
|
<span>{t.contactInfo.orderPhone}</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className="max-w-7xl mx-auto px-5 md:px-8 py-8 flex flex-wrap justify-between items-center gap-4">
|
|
<h2 className="text-2xl font-bold text-primary">{copy.featuredProducts}</h2>
|
|
<Link href="/products" className="text-brand-400 hover:underline">
|
|
{copy.allProducts}
|
|
</Link>
|
|
</div>
|
|
<MobileShowcase />
|
|
</>
|
|
);
|
|
}
|