update src/components/MiniComponents/OfferSection/index.js and src/index.scss

src/components/MiniComponents/OfferSection/index.js

@@ -1,7 +1,27 @@
 import React from "react";
+import Button from "../../ButtonDesign/Button";
 
 const OfferSection = () => {
-  return <div>OfferSection</div>;
+  return (
+    <div className="w-full flex flex-row items-center justify-between">
+      <button className="btn">sffsddfsfds</button>
+      <Button
+        text={"پیشنهاد سردبیر"}
+        className={
+          "w-[120px] px-2 py-2 bg-surface text-primaryDark text-xs font-bold rounded"
+        }
+      />
+      {/* divider */}
+      <hr className="w-full mx-4 border border-surfaceBorder" />
+      {/* left Button */}
+      <Button
+        text={"مشاهده بیشتر"}
+        className={
+          "w-[120px] p-2 bg-surface text-primaryDark text-xs font-bold rounded"
+        }
+      />
+    </div>
+  );
 };
 
 export default OfferSection;

src/index.scss

@@ -18,6 +18,23 @@ body {
   background-color: #f5f5f5;
 }
 
+.btn {
+  height: 300px;
+  position: relative;
+  background-color: #000;
+}
+
+.btn:before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 100px;
+  left: 0;
+  background-color: #000;
+  transform: skewX(25deg);
+}
+
 .rtl {
   direction: rtl;
 }