update src/components/Blog/Design7/index.js, src/components/MiniComponents/OfferSection/index.js, data.js and tailwind.config.js

src/components/Blog/Design7/index.js

@@ -1,13 +1,34 @@
 import React from "react";
 
-const Design7 = ({ featuredImage, featuredImageClassname }) => {
+const Design7 = ({
+  cardClass,
+  featuredImage,
+  featuredImageClassname,
+  playImage,
+  title,
+}) => {
   return (
-    <div className="flex flex-col items-center">
+    <div className={`flex flex-col rounded ${cardClass}`}>
-      <img
+      {/* Featured Image */}
-        src={featuredImage}
+      <div
-        className={`${featuredImageClassname}`}
+        className={`group w-full ${featuredImageClassname} relative flex items-center justify-center rounded  bg-no-repeat bg-cover bg-center transition ease-in-out duration-300 cursor-pointer`}
-        alt="blog"
+        style={{
-      />
+          backgroundImage: `${featuredImage}`,
+        }}
+      >
+        {/* play button */}
+        {playImage && (
+          <div
+            className={`bg-black bg-opacity-70 rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300`}
+          >
+            <img src={playImage} alt="play" className="w-5" />
+          </div>
+        )}
+      </div>
+      {/* Title */}
+      <p className="mx-1.5 mt-2 text-xs text-justify font-bold leading-6 text-ellipsis overflow-hidden whitespace-nowrap">
+        {title}
+      </p>
     </div>
   );
 };
@@ -15,14 +36,12 @@ const Design7 = ({ featuredImage, featuredImageClassname }) => {
 export default Design7;
 
 Design7.defaultProps = {
-  featuredImage: "images/offersectionalex-lvrs-HDjExSGuWUw-unsplash.svg",
+  cardClass: "w-[333px]",
-  featuredImageClassname: "",
-};
-
-//
 
-// offersectionalexander-mils-nG4ZimMIO_k-unsplash.svg
+  featuredImage: `url("images/VodDesign1watermelon.png")`,
+  featuredImageClassname: "min-h-[180px]",
 
-// offersectionkobby-mendez-w0_w3N_hG00-unsplash.svg
+  playImage: "images/VodDesign1white-play-button-icon.svg",
 
-// offersectionno-revisions-Fa8lOzYsTss-unsplash.svg
+  title: "ایا یخ های قطبی در حال اب شدن هستند؟ زنگ خطر به صدا در امد",
+};

src/components/MiniComponents/OfferSection/index.js

@@ -11,7 +11,7 @@ const OfferSection = () => {
         }
       />
       {/* divider */}
-      <hr className="w-full mx-4 border border-surfaceBorder" />
+      <hr className="w-full mr-4 border border-surfaceBorder" />
       {/* left Button */}
       <Button
         text={"مشاهده بیشتر"}

src/components/ShowCase/BlogShowcase1/index.js

@@ -0,0 +1,47 @@
+import React from "react";
+import OfferSection from "../../MiniComponents/OfferSection";
+import Design7 from "../../Blog/Design7";
+
+const BlogShowcase1 = ({ articles }) => {
+  return (
+    <section className="w-full p-2">
+      <OfferSection />
+      <div className="mt-5 flex flex-wrap items-center justify-between gap-4">
+        {articles.map((article) => (
+          <Design7
+            featuredImage={article.featuredImage}
+            title={article.title}
+            cardClass={"w-[265px]"}
+            playImage={article.playImage}
+          />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default BlogShowcase1;
+
+BlogShowcase1.defaultProps = {
+  articles: [
+    {
+      title: "ایا یخ های قطبی در حال اب شدن هستند؟ زنگ خطر به صدا در امد",
+      featuredImage: `url("images/offersectionalexander-mils-nG4ZimMIO_k-unsplash.svg")`,
+      playImage: false,
+    },
+    {
+      title: "همایش های بی خود و بی جهت برای مدیریت",
+      featuredImage: `url("images/offersectionalexander-mils-nG4ZimMIO_k-unsplash.svg")`,
+      playImage: false,
+    },
+    {
+      title: "کافین با کارامل مسیله چیست؟",
+      featuredImage: `url("images/offersectionkobby-mendez-w0_w3N_hG00-unsplash.svg")`,
+      playImage: false,
+    },
+    {
+      title: "ایا یخ های قطبی در حال اب شدن هستند؟ زنگ خطر به صدا در امد",
+      featuredImage: `url("images/offersectionno-revisions-Fa8lOzYsTss-unsplash.svg")`,
+    },
+  ],
+};

src/components/ShowCase/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import BlogShowcase1 from "./BlogShowcase1";
+
+function ShowCase() {
+  const list = {
+    1: <BlogShowcase1 />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default ShowCase;

src/redux/data.js

@@ -50,6 +50,7 @@ import ProductSalesAmount from "../components/ProductSalesAmount";
 import Avatar from "../components/Avatar";
 import Timeline from "../components/Timeline";
 import ThemeColor from "../components/ThemeColor";
+import ShowCase from "../components/ShowCase";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -764,6 +765,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Show Case",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Show Case",
+      component: <ShowCase />,
+      code: null,
+    },
+  },
   {
     name: "1Theme Color",
     author: "Andalib",