161 lines
4.1 KiB
TypeScript
161 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
interface ProductCardProps {
|
|
title: string;
|
|
image: string;
|
|
slug: string;
|
|
getProduct: () => void;
|
|
}
|
|
|
|
export default function ProductCard({
|
|
title,
|
|
image,
|
|
slug,
|
|
getProduct,
|
|
}: ProductCardProps) {
|
|
const locale = useLocale();
|
|
const t = useTranslations();
|
|
|
|
return (
|
|
<Link
|
|
href={`/${locale}/catalog_page/products/${slug}`}
|
|
onClick={getProduct}
|
|
className="group block"
|
|
>
|
|
<article className="
|
|
relative
|
|
bg-neutral-900
|
|
border border-zinc-800
|
|
rounded-xl
|
|
overflow-hidden
|
|
transition-all duration-300
|
|
hover:border-red-600/60
|
|
hover:shadow-[0_0_24px_0_rgba(220,38,38,0.15)]
|
|
max-sm:max-w-100 max-sm:mx-auto max-sm:w-full
|
|
h-95 flex flex-col
|
|
">
|
|
|
|
{/* Top accent line */}
|
|
<div className="
|
|
absolute top-0 left-0 right-0 h-0.5
|
|
bg-linear-to-r from-transparent via-red-600 to-transparent
|
|
opacity-0 group-hover:opacity-100
|
|
transition-opacity duration-300
|
|
z-10
|
|
" />
|
|
|
|
{/* Image Container */}
|
|
<div className="
|
|
relative
|
|
h-48 sm:h-56 md:h-64
|
|
bg-zinc-900
|
|
border-b border-zinc-800
|
|
overflow-hidden
|
|
">
|
|
{/* Background pattern */}
|
|
<div className="
|
|
absolute inset-0
|
|
bg-[radial-gradient(circle_at_center,_rgba(39,39,42,0.8)_0%,_rgba(9,9,11,1)_100%)]
|
|
" />
|
|
|
|
<Image
|
|
src={image || "/placeholder.svg"}
|
|
alt={title}
|
|
fill
|
|
className="
|
|
object-contain
|
|
p-4
|
|
transition-transform duration-500
|
|
group-hover:scale-105
|
|
drop-shadow-[0_4px_12px_rgba(0,0,0,0.5)]
|
|
"
|
|
sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
|
|
/>
|
|
|
|
{/* Hover overlay */}
|
|
<div className="
|
|
absolute inset-0
|
|
bg-red-600/5
|
|
opacity-0 group-hover:opacity-100
|
|
transition-opacity duration-300
|
|
" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-5">
|
|
{/* Decorative line */}
|
|
<div className="
|
|
w-8 h-0.5
|
|
bg-red-600
|
|
mb-3
|
|
transition-all duration-300
|
|
group-hover:w-16
|
|
" />
|
|
|
|
<h3 className="
|
|
text-sm sm:text-base
|
|
font-bold
|
|
text-zinc-100
|
|
line-clamp-3
|
|
leading-snug
|
|
tracking-wide
|
|
transition-colors duration-300
|
|
group-hover:text-white
|
|
">
|
|
{title}
|
|
</h3>
|
|
|
|
{/* Bottom row */}
|
|
<div className="
|
|
flex items-center justify-between
|
|
mt-4 pt-4
|
|
border-t border-zinc-800
|
|
">
|
|
<span className="
|
|
text-xs
|
|
text-zinc-500
|
|
tracking-widest
|
|
uppercase
|
|
font-medium
|
|
">
|
|
{ t("home.services.learnmore")}
|
|
</span>
|
|
|
|
{/* Arrow */}
|
|
<div className="
|
|
flex items-center justify-center
|
|
w-7 h-7
|
|
rounded-full
|
|
border border-zinc-700
|
|
text-zinc-500
|
|
transition-all duration-300
|
|
group-hover:border-red-600
|
|
group-hover:text-red-500
|
|
group-hover:bg-red-600/10
|
|
">
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M2 6H10M10 6L7 3M10 6L7 9"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</Link>
|
|
);
|
|
} |