danak/danak-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blog

Browse Source
This commit is contained in:
hamid zarghami
2025-04-12 09:39:55 +03:30
parent 90c3d3658a
commit c05d7072f0
11 changed files with 342 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/blogs/[id]/page.tsx
+84
View File
File diff suppressed because one or more lines are too long
src/app/blogs/components/BigBlogItem.tsx
+50
View File
@@ -0,0 +1,50 @@
import { FC } from 'react'
import Image from 'next/image'
import { ArrowLeft, Calendar2, Profile } from 'iconsax-react'
const BigBlogItem: FC = () => {
return (
<div className='w-full rounded-4xl bg-white p-7 flex gap-6'>
<Image src='https://picsum.photos/seed/picsum/200/300' alt='blog' width={300} height={300} className='size-[150px] object-cover rounded-4xl' />
<div className='flex-1'>
<h4 className='font-bold text-sm leading-6'>
سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
</h4>
<div className='mt-3 flex gap-3 text-xs'>
<div className='flex text-[#7D818C] items-center gap-1'>
<Profile
size={18}
color='#7D818C'
/>
<h6 className='text-sm'>
نویسنده
</h6>
</div>
<div className='flex text-[#7D818C] items-center gap-1'>
<Calendar2
size={18}
color='#7D818C'
/>
<h6 className='text-sm'>
۱۴۰۳/۱۲/۰۱
</h6>
</div>
</div>
<p className='mt-3 text-sm leading-5'>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...
</p>
<div className='mt-3 flex gap-1 text-sm text-[#8C90A3]'>
<div>ادامه ی مطلب</div>
<ArrowLeft
size={18}
color='#8C90A3'
/>
</div>
</div>
</div>
)
}
export default BigBlogItem
src/app/blogs/components/Category.tsx
+28
View File
@@ -0,0 +1,28 @@
import { clx } from '@/helpers/utils'
import { FC } from 'react'
const Category: FC = () => {
return (
<div className='w-full rounded-4xl bg-white p-4'>
<h4>
دسته بندی مطالب
</h4>
<div className='flex flex-col gap-4 mt-7 text-sm'>
<div className={clx(
'h-10 bg-[#ECEFF6] rounded-xl p-2.5 flex items-center gap-2',
'bg-black text-white'
)}>
<div className='size-5 bg-white rounded-full'></div>
<h6>همه</h6>
</div>
<div className='h-10 bg-[#ECEFF6] rounded-xl p-2.5 flex items-center gap-2'>
<div className='size-5 bg-black rounded-full'></div>
<h6>تکنولوژی</h6>
</div>
</div>
</div>
)
}
export default Category
src/app/blogs/components/ContactUs.tsx
+72
View File
@@ -0,0 +1,72 @@
import Image from 'next/image'
import { FC } from 'react'
const ContactUs: FC = () => {
return (
<div className='w-full rounded-4xl bg-white p-4'>
<h4>
تماس با ما
</h4>
<div className='flex gap-4 mt-6'>
<div className='flex-1 bg-[#0A66C2] text-white rounded-xl p-4'>
<Image
src='/images/linkedin2.svg'
alt='contact us'
width={25}
height={25}
className='size-6'
/>
<div className='mt-1.5'>
<h6 className='text-sm font-bold'>
لینکدین داناک
</h6>
<div className='text-xs mt-1'>
به ما بپیوندید
</div>
</div>
</div>
<div className='flex-1 bg-[#FF0302] text-white rounded-xl p-4'>
<Image
src='/images/youtube.svg'
alt='contact us'
width={25}
height={25}
className='size-6'
/>
<div className='mt-1.5'>
<h6 className='text-sm font-bold'>
یوتیوب داناک
</h6>
<div className='text-xs mt-1'>
به ما بپیوندید
</div>
</div>
</div>
</div>
<div className='flex-1 instagram-gradient text-white rounded-xl p-4 mt-4'>
<Image
src='/images/instagram2.svg'
alt='contact us'
width={25}
height={25}
className='size-6'
/>
<div className='mt-1.5'>
<h6 className='text-sm font-bold'>
اینستاگرام داناک
</h6>
<div className='text-xs mt-1'>
به ما بپیوندید
</div>
</div>
</div>
</div>
)
}
export default ContactUs
src/app/blogs/components/MiniBlogItem.tsx
+21
View File
@@ -0,0 +1,21 @@
import Image from 'next/image'
import { FC } from 'react'
const MiniBlogItem: FC = () => {
return (
<div className='flex items-center gap-2'>
<Image
src='https://picsum.photos/seed/picsum/200/300'
alt='blog'
width={72}
height={72}
className='rounded-xl size-[72px] min-w-[72px] object-cover'
/>
<h6 className='text-xs leading-5 font-bold'>
سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
</h6>
</div>
)
}
export default MiniBlogItem
src/app/blogs/components/MostVisited.tsx
+20
View File
@@ -0,0 +1,20 @@
import { FC } from 'react'
import MiniBlogItem from './MiniBlogItem'
const MostVisited: FC = () => {
return (
<div className='w-full rounded-4xl bg-white p-4'>
<h4>
پر بازدیدترین ها
</h4>
<div className='flex flex-col gap-6 mt-7 text-sm'>
<MiniBlogItem />
<MiniBlogItem />
<MiniBlogItem />
</div>
</div>
)
}
export default MostVisited
src/app/blogs/page.tsx
+30 -1
View File
@@ -1,10 +1,39 @@
import { FC } from 'react'
import HeroSection from './components/HeroSection'
import Category from './components/Category'
import BigBlogItem from './components/BigBlogItem'
import MostVisited from './components/MostVisited'
import ContactUs from './components/ContactUs'
const Blogs: FC = () => {
return (
<div className='max-w-maxWidth mx-auto'>
<HeroSection />
<h1 className='text-2xl font-bold mt-10'>
مجله داناک
</h1>
<div className='mt-10 flex gap-8'>
<div className='w-[261px]'>
<Category />
</div>
<div className='flex-1 flex flex-col gap-8'>
<BigBlogItem />
<BigBlogItem />
<BigBlogItem />
</div>
<div className='w-[261px]'>
<MostVisited />
<div className='mt-6'>
<ContactUs />
</div>
<div className='mt-6'>
<MostVisited />
</div>
</div>
</div>
</div>
)
}
src/app/globals.css
+11
View File
@@ -71,3 +71,14 @@ tbody tr {
.dltr {
direction: ltr;
}
.instagram-gradient {
background: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
}