diff --git a/src/app/blogs/components/HeroSection.tsx b/src/app/blogs/components/HeroSection.tsx
new file mode 100644
index 0000000..826fbe9
--- /dev/null
+++ b/src/app/blogs/components/HeroSection.tsx
@@ -0,0 +1,37 @@
+import BlogItem from '@/components/BlogItem'
+import Image from 'next/image'
+import { FC } from 'react'
+
+const HeroSection: FC = () => {
+    return (
+        <div>
+            <div className='relative rounded-4xl overflow-hidden'>
+                <Image
+                    src={'/images/banner.webp'}
+                    alt='banner'
+                    width={1920}
+                    height={1080}
+                    className='w-full  object-cover xl:mt-14 mt-8 min-h-[210px]'
+                />
+
+                <div className='absolute bottom-0 h-[140px] modalGlass3 w-full p-6 text-white'>
+                    <h4 className='font-bold'>
+                        سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+                    </h4>
+
+                    <p className='text-sm mt-4 leading-7'>
+                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...
+                    </p>
+                </div>
+            </div>
+
+            <div className='flex gap-8 mt-10'>
+                <BlogItem />
+                <BlogItem />
+                <BlogItem />
+            </div>
+        </div>
+    )
+}
+
+export default HeroSection
\ No newline at end of file
diff --git a/src/app/blogs/page.tsx b/src/app/blogs/page.tsx
new file mode 100644
index 0000000..8319be3
--- /dev/null
+++ b/src/app/blogs/page.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react'
+import HeroSection from './components/HeroSection'
+
+const Blogs: FC = () => {
+    return (
+        <div className='max-w-maxWidth mx-auto'>
+            <HeroSection />
+        </div>
+    )
+}
+
+export default Blogs
\ No newline at end of file
diff --git a/src/components/BlogItem.tsx b/src/components/BlogItem.tsx
index 96828a4..7e0f005 100644
--- a/src/components/BlogItem.tsx
+++ b/src/components/BlogItem.tsx
@@ -16,7 +16,7 @@ const BlogItem: FC = () => {
             </div>
 
             <div className='absolute bottom-0 left-0 w-full modalGlass3 h-[180px]  rounded-b-3xl text-white p-6'>
-                <h6>
+                <h6 className='font-bold text-sm'>
                     سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                 </h6>