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

import Link from "next/link";
import React from "react";
import CardNormal from "src/components/Cards/CardNormal/page";

const Products = () => {
  const data = [
    {
      id: 1,
      persianName: "Hydrating Cream",
      englishName: "Hydrating Cream",
      description:
        "A deeply moisturizing cream that keeps your skin hydrated all day long.",
      cost: 250000,
      costWithDiscount: 200000,
      hasDiscount: true,
      discountPercent: 20,
      stock: 5,
      mainImage: "4",
    },
    {
      id: 2,
      persianName: "Hair Strengthening Shampoo",
      englishName: "Hair Strengthening Shampoo",
      description:
        "A nourishing shampoo that strengthens hair roots and prevents hair fall.",
      cost: 180000,
      costWithDiscount: 150000,
      hasDiscount: true,
      discountPercent: 17,
      stock: 2,
      mainImage: "3",
    },
    {
      id: 3,
      persianName: "Vitamin C Serum",
      englishName: "Vitamin C Serum",
      description:
        "An antioxidant-rich serum that brightens skin and reduces signs of aging.",
      cost: 300000,
      costWithDiscount: 270000,
      hasDiscount: true,
      discountPercent: 10,
      stock: 3,
      mainImage: "1",
    },
    {
      id: 4,
      persianName: "Charcoal Face Mask",
      englishName: "Charcoal Face Mask",
      description:
        "A detoxifying mask that removes impurities and unclogs pores for a fresh look.",
      cost: 220000,
      costWithDiscount: 220000,
      hasDiscount: false,
      discountPercent: 0,
      stock: 8,
      mainImage: "4",
    },
    {
      id: 5,
      persianName: "Body Lotion",
      englishName: "Body Lotion",
      description:
        "A lightweight body lotion that nourishes and hydrates dry skin.",
      cost: 210000,
      costWithDiscount: 185000,
      hasDiscount: true,
      discountPercent: 12,
      stock: 6,
      mainImage: "2",
    },
    {
      id: 6,
      persianName: "Aloe Vera Gel",
      englishName: "Aloe Vera Gel",
      description:
        "A soothing gel enriched with aloe vera to calm irritated skin.",
      cost: 160000,
      costWithDiscount: 160000,
      hasDiscount: false,
      discountPercent: 0,
      stock: 10,
      mainImage: "3",
    },
    {
      id: 7,
      persianName: "Sunscreen SPF 50",
      englishName: "Sunscreen SPF 50",
      description:
        "A broad-spectrum sunscreen that protects against UV rays and prevents sunburn.",
      cost: 280000,
      costWithDiscount: 230000,
      hasDiscount: true,
      discountPercent: 18,
      stock: 4,
      mainImage: "1",
    },
    {
      id: 8,
      persianName: "Face Cleanser",
      englishName: "Face Cleanser",
      description:
        "A gentle face cleanser that removes dirt and oil without stripping moisture.",
      cost: 190000,
      costWithDiscount: 170000,
      hasDiscount: true,
      discountPercent: 10,
      stock: 7,
      mainImage: "2",
    },
    {
      id: 9,
      persianName: "Moisturizing Cream",
      englishName: "Moisturizing Cream",
      description:
        "A rich cream that provides deep hydration for soft and smooth skin.",
      cost: 260000,
      costWithDiscount: 260000,
      hasDiscount: false,
      discountPercent: 0,
      stock: 9,
      mainImage: "4",
    },
    {
      id: 10,
      persianName: "Eye Serum",
      englishName: "Eye Serum",
      description:
        "A lightweight eye serum that reduces puffiness and dark circles.",
      cost: 350000,
      costWithDiscount: 310000,
      hasDiscount: true,
      discountPercent: 12,
      stock: 5,
      mainImage: "3",
    },
    {
      id: 11,
      persianName: "Lip Balm",
      englishName: "Lip Balm",
      description:
        "A moisturizing lip balm that prevents chapped lips and adds a subtle shine.",
      cost: 90000,
      costWithDiscount: 80000,
      hasDiscount: true,
      discountPercent: 11,
      stock: 12,
      mainImage: "1",
    },
    {
      id: 12,
      persianName: "Hand Cream",
      englishName: "Hand Cream",
      description:
        "A fast-absorbing hand cream that keeps hands soft and hydrated.",
      cost: 170000,
      costWithDiscount: 150000,
      hasDiscount: true,
      discountPercent: 12,
      stock: 6,
      mainImage: "2",
    },
    {
      id: 13,
      persianName: "Night Repair Serum",
      englishName: "Night Repair Serum",
      description:
        "A serum that works overnight to repair and rejuvenate your skin.",
      cost: 390000,
      costWithDiscount: 350000,
      hasDiscount: true,
      discountPercent: 10,
      stock: 4,
      mainImage: "3",
    },
    {
      id: 14,
      persianName: "Shaving Cream",
      englishName: "Shaving Cream",
      description:
        "A rich shaving cream that provides a smooth and irritation-free shave.",
      cost: 200000,
      costWithDiscount: 200000,
      hasDiscount: false,
      discountPercent: 0,
      stock: 9,
      mainImage: "4",
    },

    {
      id: 15,
      persianName: "Shaving ",
      englishName: "Shaving ",
      description:
        "A fast-absorbing hand cream that keeps hands soft and hydrated.",
      cost: 200000,
      costWithDiscount: 200000,
      hasDiscount: false,
      discountPercent: 0,
      stock: 9,
      mainImage: "1",
    },
  ];

  return (
    <div className="my-[120px]">
      <div className="xs:px-3 md:px-10 md:container md:mx-auto mb-10">
        <div className="text-left relative mb-10">
          <h2 className="text-[30px] font-bold relative z-10 xs:text-center lg:text-left">
            ADVANCED HORIZON SERVICES LLC Products{" "}
          </h2>
          <p className="mb-0 text-sm text-gray-400 xs:text-center lg:text-left">
            
          </p>
        </div>

        <div className="grid  xs:grid-cols-2 lg:grid-cols-5 gap-5">
          {data?.map((e, index) => (
            <div key={index} className="relative">
              <CardNormal data={e} priority />
            </div>
          ))}
        </div>

        {/* <div className="flex justify-center">
          <Link href={"categories/Product-20Listing-Page"}>
            <button className="btn btn-primary px-10 text-sm ">
              {" "}
              See All Products
            </button>
          </Link>
        </div> */}
      </div>
    </div>
  );
};

export default Products;