blog

2025-04-12 09:39:55 +03:30
parent 90c3d3658a
commit c05d7072f0
11 changed files with 342 additions and 1 deletions
@@ -0,0 +1,12 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7047_26290)">
+<path d="M12.5 2.25098C15.8398 2.25098 16.2354 2.26562 17.5488 2.32422C18.7695 2.37793 19.4287 2.58301 19.8682 2.75391C20.4492 2.97852 20.8691 3.25195 21.3037 3.68652C21.7432 4.12598 22.0117 4.54102 22.2363 5.12207C22.4072 5.56152 22.6123 6.22559 22.666 7.44141C22.7246 8.75977 22.7393 9.15527 22.7393 12.4902C22.7393 15.8301 22.7246 16.2256 22.666 17.5391C22.6123 18.7598 22.4072 19.4189 22.2363 19.8584C22.0117 20.4395 21.7383 20.8594 21.3037 21.2939C20.8643 21.7334 20.4492 22.002 19.8682 22.2266C19.4287 22.3975 18.7646 22.6025 17.5488 22.6563C16.2305 22.7148 15.835 22.7295 12.5 22.7295C9.16016 22.7295 8.76465 22.7148 7.45117 22.6563C6.23047 22.6025 5.57129 22.3975 5.13184 22.2266C4.55078 22.002 4.13086 21.7285 3.69629 21.2939C3.25684 20.8545 2.98828 20.4395 2.76367 19.8584C2.59277 19.4189 2.3877 18.7549 2.33398 17.5391C2.27539 16.2207 2.26074 15.8252 2.26074 12.4902C2.26074 9.15039 2.27539 8.75488 2.33398 7.44141C2.3877 6.2207 2.59277 5.56152 2.76367 5.12207C2.98828 4.54102 3.26172 4.12109 3.69629 3.68652C4.13574 3.24707 4.55078 2.97852 5.13184 2.75391C5.57129 2.58301 6.23535 2.37793 7.45117 2.32422C8.76465 2.26562 9.16016 2.25098 12.5 2.25098ZM12.5 0C9.10645 0 8.68164 0.0146484 7.34863 0.0732422C6.02051 0.131836 5.10742 0.34668 4.31641 0.654297C3.49121 0.976562 2.79297 1.40137 2.09961 2.09961C1.40137 2.79297 0.976562 3.49121 0.654297 4.31152C0.34668 5.10742 0.131836 6.01562 0.0732422 7.34375C0.0146484 8.68164 0 9.10645 0 12.5C0 15.8936 0.0146484 16.3184 0.0732422 17.6514C0.131836 18.9795 0.34668 19.8926 0.654297 20.6836C0.976562 21.5088 1.40137 22.207 2.09961 22.9004C2.79297 23.5938 3.49121 24.0234 4.31152 24.3408C5.10742 24.6484 6.01562 24.8633 7.34375 24.9219C8.67676 24.9805 9.10156 24.9951 12.4951 24.9951C15.8887 24.9951 16.3135 24.9805 17.6465 24.9219C18.9746 24.8633 19.8877 24.6484 20.6787 24.3408C21.499 24.0234 22.1973 23.5938 22.8906 22.9004C23.584 22.207 24.0137 21.5088 24.3311 20.6885C24.6387 19.8926 24.8535 18.9844 24.9121 17.6563C24.9707 16.3232 24.9854 15.8984 24.9854 12.5049C24.9854 9.11133 24.9707 8.68652 24.9121 7.35352C24.8535 6.02539 24.6387 5.11231 24.3311 4.32129C24.0234 3.49121 23.5986 2.79297 22.9004 2.09961C22.207 1.40625 21.5088 0.976563 20.6885 0.65918C19.8926 0.351562 18.9844 0.136719 17.6562 0.078125C16.3184 0.0146484 15.8936 0 12.5 0Z" fill="white"/>
+<path d="M12.5 6.0791C8.95508 6.0791 6.0791 8.95508 6.0791 12.5C6.0791 16.0449 8.95508 18.9209 12.5 18.9209C16.0449 18.9209 18.9209 16.0449 18.9209 12.5C18.9209 8.95508 16.0449 6.0791 12.5 6.0791ZM12.5 16.665C10.2002 16.665 8.33496 14.7998 8.33496 12.5C8.33496 10.2002 10.2002 8.33496 12.5 8.33496C14.7998 8.33496 16.665 10.2002 16.665 12.5C16.665 14.7998 14.7998 16.665 12.5 16.665Z" fill="white"/>
+<path d="M20.6738 5.8252C20.6738 6.65528 20 7.32422 19.1748 7.32422C18.3447 7.32422 17.6758 6.65039 17.6758 5.8252C17.6758 4.99512 18.3496 4.32617 19.1748 4.32617C20 4.32617 20.6738 5 20.6738 5.8252Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_7047_26290">
+<rect width="25" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.1545 0H1.84549C1.35603 0 0.886626 0.194435 0.540531 0.540531C0.194435 0.886626 0 1.35603 0 1.84549V23.1545C0 23.644 0.194435 24.1134 0.540531 24.4595C0.886626 24.8056 1.35603 25 1.84549 25H23.1545C23.644 25 24.1134 24.8056 24.4595 24.4595C24.8056 24.1134 25 23.644 25 23.1545V1.84549C25 1.35603 24.8056 0.886626 24.4595 0.540531C24.1134 0.194435 23.644 0 23.1545 0ZM7.45139 21.2969H3.69271V9.35764H7.45139V21.2969ZM5.56944 7.70312C5.14309 7.70072 4.72699 7.57208 4.37368 7.33342C4.02037 7.09477 3.74567 6.7568 3.58425 6.36218C3.42283 5.96755 3.38192 5.53395 3.4667 5.1161C3.55147 4.69825 3.75813 4.31487 4.06058 4.01436C4.36303 3.71384 4.74772 3.50965 5.16611 3.42756C5.5845 3.34547 6.01783 3.38916 6.41141 3.55311C6.80499 3.71706 7.14119 3.99392 7.37757 4.34876C7.61395 4.7036 7.73992 5.12051 7.73958 5.54688C7.74361 5.83233 7.69012 6.11567 7.5823 6.38C7.47449 6.64434 7.31456 6.88427 7.11205 7.08549C6.90954 7.2867 6.66859 7.44509 6.40357 7.5512C6.13854 7.65731 5.85486 7.70898 5.56944 7.70312ZM21.3056 21.3073H17.5486V14.7847C17.5486 12.8611 16.7309 12.2674 15.6753 12.2674C14.5608 12.2674 13.467 13.1076 13.467 14.8333V21.3073H9.70833V9.36632H13.3229V11.0208H13.3715C13.7344 10.2865 15.0052 9.03125 16.9444 9.03125C19.0417 9.03125 21.3073 10.276 21.3073 13.9219L21.3056 21.3073Z" fill="#0A66C2"/>
+</svg>
@@ -0,0 +1,11 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7047_25788)">
+<path d="M24.5021 6.44336C24.3607 5.9115 24.0822 5.42609 23.6943 5.03571C23.3064 4.64533 22.8228 4.36367 22.2918 4.21893C20.3373 3.69336 12.5248 3.69336 12.5248 3.69336C12.5248 3.69336 4.71228 3.69336 2.75773 4.21893C2.22679 4.36367 1.74318 4.64533 1.35529 5.03571C0.967401 5.42609 0.688849 5.9115 0.547508 6.44336C0.0247803 8.40643 0.0247803 12.5002 0.0247803 12.5002C0.0247803 12.5002 0.0247803 16.5939 0.547508 18.557C0.688849 19.0889 0.967401 19.5743 1.35529 19.9646C1.74318 20.355 2.22679 20.6367 2.75773 20.7814C4.71228 21.307 12.5248 21.307 12.5248 21.307C12.5248 21.307 20.3373 21.307 22.2918 20.7814C22.8228 20.6367 23.3064 20.355 23.6943 19.9646C24.0822 19.5743 24.3607 19.0889 24.5021 18.557C25.0248 16.5939 25.0248 12.5002 25.0248 12.5002C25.0248 12.5002 25.0248 8.40643 24.5021 6.44336Z" fill="white"/>
+<path d="M9.96802 16.2174V8.78271L16.5021 12.5L9.96802 16.2174Z" fill="#ED1919"/>
+</g>
+<defs>
+<clipPath id="clip0_7047_25788">
+<rect width="25" height="25" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
    )
 }
@@ -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%
+  );
+}