app/marketplace/advertizers/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+import Image from "next/image";
+import React, { useState } from "react";
+
+const categories = [
+  "All advertising",
+  "Commissioned",
+  "Discount Ads",
+  "Brands Ads",
+  "Ebooks",
+  "Author ads",
+  "Artist Ads",
+  "Last Month ads",
+  "Upcoming ads",
+];
+
+const images = [
+  "/images/Airbnb_1.png",
+  "/images/Airbnb_2.png",
+  "/images/Airbnb_3.png",
+  "/images/Amazon_AWS.png",
+  "/images/Amazon_echo.png",
+  "/images/Element.png",
+  "/images/Huawei.png",
+  "/images/Netflix.png",
+  "/images/Qonto.png",
+  "/images/Samsung.png",
+];
+
+const Page: React.FC = () => {
+  const [selectedCategory, setSelectedCategory] = useState<string>(
+    categories[0]
+  );
+  const handleCategoryClick = (category: string) => {
+    setSelectedCategory(category);
+  };
+  return (
+    <div className="w-full h-full flex flex-col py-4 items-center justify-start bg-white">
+      <div className="w-[1280px] h-[282px]  bg-slate-400 rounded-md">
+        <Image
+          src="/images/Banner.png"
+          alt="advertizers"
+          width={1280}
+          height={282}
+        />
+      </div>
+      <div className="w-full px-4 bg-[#F3F3F3] mt-6 p-4 flex justify-center items-center">
+        <div className="flex flex-wrap gap-4">
+          {categories.map((category) => (
+            <button
+              key={category}
+              className={`px-5 py-2 rounded-md cursor-pointer duration-300 ${
+                selectedCategory === category
+                  ? "bg-black text-white"
+                  : "bg-white text-black"
+              }`}
+              onClick={() => handleCategoryClick(category)}
+            >
+              {category}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="w-[1280px] m-6 grid sm:grid-cols-1 md:grid-cols-5 gap-2">
+        {images.map((image, index) => (
+          <div
+            key={index}
+            className="flex w-full h-full flex-col items-center justify-start rounded-md"
+          >
+            <Image
+              key={index}
+              src={image}
+              alt="advertizers"
+              width={1290}
+              height={280}
+            />
+            <button className="px-15 py-1 border border-slate-800 rounded cursor-pointer">
+              List in Ebook
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Page;