7c05bd2346
- Fix newsletter subscribe box centering on homepage - Fix header overlap on product pages (pt-[72px] instead of pt-[100px]) - Add scroll-mt-[72px] for smooth scroll anchor offset - Add HeroVideo component with video hero placeholder - Add REDESIGN_SPECIFICATION.md with 9-phase design plan - Clean up globals.css theme declarations and comments - Update Header with improved sticky behavior and cart - Update ProductDetail with better layout and spacing - Update CartDrawer with improved slide-out cart UI - Add English translations for updated pages - Various CSS refinements across pages
82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { Product } from "@/types/saleor";
|
|
import { getProductPrice, getProductImage, getLocalizedProduct } from "@/lib/saleor";
|
|
|
|
interface ProductCardProps {
|
|
product: Product;
|
|
index?: number;
|
|
locale?: string;
|
|
}
|
|
|
|
export default function ProductCard({ product, index = 0, locale = "SR" }: ProductCardProps) {
|
|
const image = getProductImage(product);
|
|
const price = getProductPrice(product);
|
|
const localized = getLocalizedProduct(product, locale);
|
|
const isAvailable = product.variants?.[0]?.quantityAvailable > 0;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
>
|
|
<Link href={`/products/${localized.slug}`} className="group block">
|
|
{/* Image Container */}
|
|
<div className="relative aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
|
|
{image ? (
|
|
<Image
|
|
src={image}
|
|
alt={localized.name}
|
|
fill
|
|
className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
|
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center text-[#999999]">
|
|
<span className="text-sm">No image</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Out of Stock Overlay */}
|
|
{!isAvailable && (
|
|
<div className="absolute inset-0 bg-white/80 flex items-center justify-center">
|
|
<span className="text-sm uppercase tracking-[0.1em] text-[#666666]">
|
|
{locale === "EN" ? "Out of Stock" : "Nema na stanju"}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Hover Quick Add (optional) */}
|
|
<div className="absolute inset-x-0 bottom-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
|
|
<button
|
|
className="w-full py-3 bg-black text-white text-xs uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
// Quick add functionality can be added here
|
|
}}
|
|
>
|
|
{locale === "EN" ? "Quick Add" : "Dodaj u korpu"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Product Info */}
|
|
<div className="text-center">
|
|
<h3 className="text-[15px] font-medium text-[#1a1a1a] mb-1 group-hover:text-[#666666] transition-colors line-clamp-1">
|
|
{localized.name}
|
|
</h3>
|
|
|
|
<p className="text-[14px] text-[#666666]">
|
|
{price || (locale === "EN" ? "Contact for price" : "Kontaktirajte za cenu")}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
);
|
|
}
|