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
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import type { Product } from "@/types/saleor";
|
|
import ProductCard from "@/components/product/ProductCard";
|
|
|
|
interface ProductShowcaseProps {
|
|
products: Product[];
|
|
locale?: string;
|
|
}
|
|
|
|
export default function ProductShowcase({ products, locale = "SR" }: ProductShowcaseProps) {
|
|
if (!products || products.length === 0) return null;
|
|
|
|
return (
|
|
<section className="py-20 px-4">
|
|
<div className="container">
|
|
<motion.div
|
|
className="text-center mb-16"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="text-caption text-[#666666] mb-4 block">Our Collection</span>
|
|
<h2 className="text-3xl md:text-4xl font-medium mb-4">Our Products</h2>
|
|
<p className="text-[#666666] max-w-2xl mx-auto">
|
|
Discover our premium collection of natural oils for hair and skin care
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
|
|
{products.map((product, index) => (
|
|
<ProductCard key={product.id} product={product} index={index} locale={locale} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|