home blog section

app/home/Home.tsx

@@ -1,5 +1,6 @@
 import BannerSection from "./components/BannerSection";
 import BestSellerCategories from "./components/BestSellerCategories";
+import BlogsSection from "./components/BlogsSection";
 import CategorySection from "./components/CategorySection";
 import OrderByApplication from "./components/OrderByApplication";
 import OrderRegistrationSteps from "./components/OrderRegistrationSteps";
@@ -16,6 +17,7 @@ const Home = () => {
       <OrderByApplication />
       <BestSellerCategories />
       <OrderRegistrationSteps />
+      <BlogsSection />
     </div>
   );
 };

app/home/components/BlogCard.tsx

@@ -0,0 +1,21 @@
+import BlogImage from "@/assets/images/blog-image.png";
+import { ArrowLeft } from "iconsax-reactjs";
+import Image from "next/image";
+import { FC } from "react";
+
+const BlogCard: FC = () => {
+  return (
+    <div className="bg-white shadow-[0_4px_20px_rgba(0,0,0,0.1)] p-4 rounded-3xl">
+      <Image src={BlogImage} alt="Blog Image" width={1000} height={1000} className="w-full h-auto rounded-2xl" />
+      <div className="mt-4 text-[13px] text-[#A7ADB3] font-bold">۰۴ تیر ۱۴۰۵</div>
+      <div className="mt-2 font-bold">راهنمای انتخاب بنر مناسب</div>
+      <p className="mt-2 text-sm text-[#67727C]">با انواع بنر، کاربردها و نکات مهم انتخاب آشنا شوید تا بهترین گزینه را متناسب با نیاز و بودجه خود انتخاب کنید.</p>
+      <div className="mt-2 flex items-center gap-2 text-primary">
+        <div className="text-xs font-bold">مشاهده</div>
+        <ArrowLeft size={16} color="currentColor" className="mt-px" />
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;

app/home/components/BlogsSection.tsx

@@ -0,0 +1,19 @@
+import GridWrapper from "@/app/components/GridWrapper";
+import { FC } from "react";
+import BlogCard from "./BlogCard";
+
+const BlogsSection: FC = () => {
+  return (
+    <div className="mt-[120px] px-[120px]">
+      <div className="text-2xl font-bold">مقالات ما</div>
+      <GridWrapper desktop={4} mobile={1} className="mt-12">
+        <BlogCard />
+        <BlogCard />
+        <BlogCard />
+        <BlogCard />
+      </GridWrapper>
+    </div>
+  );
+};
+
+export default BlogsSection;