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

src/components/Blog/Design7/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+const Design7 = () => {
+  return (
+    <div>
+      <img
+        src="images/offersectionalex-lvrs-HDjExSGuWUw-unsplash.svg"
+        class="rounded"
+      />
+    </div>
+  );
+};
+
+export default Design7;
+
+Design7.defaultProps = {
+    
+}
+
+
+// offersectionalexander-mils-nG4ZimMIO_k-unsplash.svg
+
+// offersectionkobby-mendez-w0_w3N_hG00-unsplash.svg
+
+// offersectionno-revisions-Fa8lOzYsTss-unsplash.svg

src/components/Blog/index.js

@@ -6,6 +6,7 @@ import Blog3 from "./design3";
 import Blog4 from "./design4";
 import Blog5 from "./design5";
 import Blog6 from "./design6";
+import Design7 from "./Design7";
 
 function Blogs() {
   const list = {
@@ -15,6 +16,7 @@ function Blogs() {
     4: <Blog4 />,
     5: <Blog5 />,
     6: <Blog6 />,
+    7: <Design7 />,
   };
   const [type, setType] = useState(1);
   return (

src/components/MiniComponents/OfferSection/index.js

@@ -4,11 +4,10 @@ import Button from "../../ButtonDesign/Button";
 const OfferSection = () => {
   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"
+          "w-[120px] px-2 py-2 bg-surface text-primaryDark text-xs font-bold rounded relative transform"
         }
       />
       {/* divider */}
@@ -25,3 +24,10 @@ const OfferSection = () => {
 };
 
 export default OfferSection;
+
+// .btn {
+//   position: relative;
+//   background-color: #000;
+//   overflow: hidden;
+//   transform: skew(-14deg);
+// }

src/index.scss

@@ -18,23 +18,6 @@ body {
   background-color: #f5f5f5;
 }
 
-.btn {
-  position: relative;
-  background-color: #000;
-  overflow: hidden;
-}
-
-.btn::before {
-  content: " ";
-  position: absolute;
-  left: -6.1em;
-  top: 50%;
-  transform: translateY(-50%) rotate(200deg);
-  background: #111;
-  width: 40%;
-  height: 140%;
-}
-
 .rtl {
   direction: rtl;
 }