41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import Link from 'next/link';
|
|
import type { Metadata } from 'next';
|
|
import { fetchBrands } from '@/lib/api';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Marcas — MercadoDeVida',
|
|
description: 'Todas las marcas de productos naturales y ecológicos.',
|
|
};
|
|
|
|
export default async function BrandsPage() {
|
|
const brands = await fetchBrands();
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900" style={{ fontFamily: 'var(--font-heading)' }}>
|
|
Nuestras marcas
|
|
</h1>
|
|
<p className="mt-2 text-gray-600">
|
|
Descubre las marcas de confianza que trabajan con nosotros.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 justify-center">
|
|
{brands.map((brand) => (
|
|
<Link key={brand.id} href={`/brands/${brand.slug}`}>
|
|
<div className="p-6 bg-gray-50 hover:bg-[#70ad47] hover:text-white rounded-xl border border-gray-200 hover:border-[#70ad47] transition-all text-center group">
|
|
<div className="w-14 h-14 mx-auto mb-3 bg-[#70ad47]/10 group-hover:bg-white/20 rounded-full flex items-center justify-center">
|
|
<span className="text-xl font-bold text-[#70ad47] group-hover:text-white">
|
|
{brand.name.slice(0, 2).toUpperCase()}
|
|
</span>
|
|
</div>
|
|
<p className="font-semibold text-sm">{brand.name}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|