49 lines
2.0 KiB
JavaScript
49 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { ShoppingCart, Building2 } from 'lucide-react'; // Assuming you're using lucide-react for icons
|
|
import { useTranslations } from 'next-intl';
|
|
import Link from 'next/link';
|
|
|
|
const Sides = () => {
|
|
|
|
const t = useTranslations("HomePage.Sides")
|
|
return (
|
|
<section className="w-full py-12 md:py-24 lg:py-32 bg-background text-sm bg-primary-800/40 ">
|
|
<div className="container px-4 md:px-6 mx-auto">
|
|
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-center mb-12">
|
|
{t("title")}
|
|
</h2>
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
{/* First Card */}
|
|
<Link href={"/products/fmcg"} className="flex flex-col items-center text-center bg-white shadow-lg rounded-lg p-6 hover:scale-105 transition-all">
|
|
<div className="flex flex-col items-center">
|
|
<ShoppingCart className="w-12 h-12 mb-4 text-primary" />
|
|
<h3 className="text-2xl font-bold">{t("fmcg.title")}</h3>
|
|
<p className="text-muted-foreground">{t("fmcg.subtitle")}</p>
|
|
</div>
|
|
<div className="mt-4">
|
|
<p className="text-muted-foreground text-base">
|
|
{t("fmcg.description")}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Second Card */}
|
|
<Link href={"/products/construction"} className="flex flex-col items-center text-center bg-white shadow-lg rounded-lg p-6 hover:scale-105 transition-all">
|
|
<div className="flex flex-col items-center">
|
|
<Building2 className="w-12 h-12 mb-4 text-primary" />
|
|
<h3 className="text-2xl font-bold">{t("construction.title")}</h3>
|
|
<p className="text-muted-foreground">{t("construction.subtitle")}</p>
|
|
</div>
|
|
<div className="mt-4">
|
|
<p className="text-muted-foreground text-base">
|
|
{t("construction.description")}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Sides; |