40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowRight } from "lucide-react";
|
|
import { SectionHeading } from "../common/SectionHeading";
|
|
import { ProductCard } from "../shop/ProductCard";
|
|
import { getFeaturedProducts } from "@/content/products";
|
|
|
|
export function FeaturedProducts() {
|
|
const featured = getFeaturedProducts(4);
|
|
|
|
return (
|
|
<section className="py-16 md:py-24 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<SectionHeading
|
|
eyebrow="Nasz Asortyment"
|
|
title="Polecane klimatyzatory z montażem"
|
|
subtitle="Poznaj wybrane modele urządzeń chłodzących i grzewczych od wiodących marek. Zapewniamy kompleksowy montaż."
|
|
align="center"
|
|
/>
|
|
|
|
{/* Products Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
|
{featured.map((product) => (
|
|
<ProductCard key={product.slug} product={product} />
|
|
))}
|
|
</div>
|
|
|
|
{/* Catalog Link */}
|
|
<div className="flex justify-center mt-12">
|
|
<Link href="/sklep" className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 group">
|
|
|
|
<span>Zobacz cały sklep</span>
|
|
<ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
|
|
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|