added featured categories section

src/components/parts/FeaturedArticles.tsx

@@ -0,0 +1,60 @@
+import React, { useMemo } from "react";
+import Typography from "components/typography/Typography";
+import CategoryCard from "components/Cards/CategoryCard";
+import {
+  SVGMedicine,
+  SVGAgricultural,
+  SVGHumanitarian,
+  SVGSocials,
+  SVGTechnicsAndTechology,
+  SVGFundamental,
+} from "components/icons";
+
+const categories = [
+  { id: 1, title: "Medical", count: 5617813, icon: <SVGMedicine /> },
+  {
+    id: 2,
+    title: "Technics and Technology",
+    count: 5617813,
+    icon: <SVGTechnicsAndTechology />,
+  },
+  { id: 3, title: "Fundamental", count: 5617813, icon: <SVGFundamental /> },
+  { id: 4, title: "Humanitarian", count: 5617813, icon: <SVGHumanitarian /> },
+  { id: 5, title: "Argicultural", count: 5617813, icon: <SVGAgricultural /> },
+  { id: 6, title: "Social", count: 5617813, icon: <SVGSocials /> },
+];
+
+export function FeaturedArticles() {
+  const categoryCards = useMemo(
+    () =>
+      categories.map((category) => (
+        <CategoryCard
+          title={category.title}
+          count={category.count}
+          iconChild={category.icon}
+        />
+      )),
+    categories
+  );
+
+  return (
+    <section className="w-full items-center justify-center">
+      <div className="pt-14 lg:pt-16 pb-4 md:pb-8 text-center">
+        <Typography
+          htmlTag="h1"
+          fontWeightVariant="semibold"
+          className="text-3xl mb-2"
+        >
+          Featured articles
+        </Typography>
+        <Typography htmlTag="h2" className="text-base text-gray-500">
+          Select the category of science <br className="visible sm:hidden" />
+          you are interested in
+        </Typography>
+      </div>
+      <div className="py-8 px-10 flex md:flex justify-start md:justify-center md:flex-wrap overflow-x-scroll md:overflow-hidden snap-x  scroll-smooth overscroll-x-contain">
+        {categoryCards}
+      </div>
+    </section>
+  );
+}