LLC/src/view/Landing/components/Sides.jsx

import React from 'react';
import { ShoppingCart, Building2 } from 'lucide-react'; // Assuming you're using lucide-react for icons
import { useTranslations } from 'next-intl';

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 */}
          <div className="flex flex-col items-center text-center bg-white shadow-lg rounded-lg p-6">
            <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>
          </div>

          {/* Second Card */}
          <div className="flex flex-col items-center text-center bg-white shadow-lg rounded-lg p-6">
            <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>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Sides;