blog collaboration in landing

next.config.ts

@@ -2,6 +2,19 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  images: {
+    domains: ["*"],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+      {
+        protocol: "http",
+        hostname: "**",
+      },
+    ],
+  },
 };
 
 export default nextConfig;

src/app/globals.css

@@ -53,3 +53,17 @@ tbody tr {
   border-top-left-radius: 23px;
   /* border-bottom-left-radius: 23px; */
 }
+
+.modalGlass2 {
+  background: rgba(0, 0, 0, 0.8);
+  background-blend-mode: multiply;
+
+  /* backdrop-filter: blur(5px); */
+}
+
+.modalGlass3 {
+  background: rgba(0, 0, 0, 0.4);
+  background-blend-mode: multiply;
+
+  backdrop-filter: blur(44px);
+}

src/app/home/Blog.tsx

@@ -0,0 +1,21 @@
+import BlogItem from '@/components/BlogItem'
+import SectionHeader from '@/components/SectionHeader'
+import { FC } from 'react'
+
+const Blog: FC = () => {
+    return (
+        <div className='mt-24 max-w-maxWidth mx-auto'>
+            <SectionHeader
+                title='بلاگ داناک'
+            />
+
+            <div className='flex gap-8 mt-16 items-center'>
+                <BlogItem />
+                <BlogItem />
+                <BlogItem />
+            </div>
+        </div>
+    )
+}
+
+export default Blog

src/app/home/Collaboration.tsx

@@ -0,0 +1,58 @@
+import Button from '@/components/Button'
+import InfoBox from '@/components/InfoBox'
+import { DocumentCode, FavoriteChart } from 'iconsax-react'
+import { FC } from 'react'
+
+const Collaboration: FC = () => {
+    return (
+        <div className='w-full py-32 bg-gradient-to-r from-[#eef0f6] via-[#e2e5ec] to-[#dee1e9] mt-40 rounded-4xl'>
+            <div className='max-w-maxWidth mx-auto flex items-center gap-20'>
+                <div className='max-w-[300px]'>
+                    <h2 className='text-3xl'>
+                        همکاری با داناک
+                    </h2>
+
+                    <p className='mt-10 leading-7 text-sm'>
+                        با پیوستن به داناک، فرصت‌های جدیدی برای رشد و کسب درآمد خواهید داشت. چه به‌عنوان نماینده فروش و چه به‌عنوان توسعه‌دهنده، ما بستر مناسبی برای موفقیت شما فراهم کرده‌ایم.
+                    </p>
+
+                    <div className='flex gap-2 mt-10'>
+                        <Button
+                            label='توسعه دهندگان'
+                            className='w-fit px-5 whitespace-nowrap'
+                        />
+                        <Button
+                            label='نمایندگان'
+                            className='w-fit px-5 bg-transparent border border-black text-black whitespace-nowrap'
+                        />
+                    </div>
+                </div>
+
+                <div className='flex-1 flex gap-8 flex-wrap'>
+                    <div className='min-w-[40%] flex-1'>
+                        <InfoBox
+                            icon={<DocumentCode
+                                size={24}
+                                color='#00980F'
+                            />}
+                            title='توسعه دهندگان'
+                            description='اگر توسعه‌دهنده نرم‌افزار هستید، مارکت‌پلیس داناک بستری ایده‌آل برای عرضه محصولات شماست. نرم‌افزارهای خود را به مشتریان گسترده معرفی کنید و از یک پلتفرم حرفه‌ای برای فروش و پشتیبانی بهره ببرید.'
+                        />
+                    </div>
+                    <div className='min-w-[40%] flex-1'>
+                        <InfoBox
+                            icon={<FavoriteChart
+                                size={24}
+                                color='#FF7B00'
+                            />}
+                            title='نمایندگان فروش'
+                            description='اگر به فروش و بازاریابی علاقه دارید، می‌توانید به‌عنوان نماینده فروش محصولات ما فعالیت کنید. با دسترسی به مجموعه‌ای از راهکارهای نرم‌افزاری باکیفیت، کسب درآمد کنید و شبکه تجاری خود را گسترش دهید.'
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Collaboration

src/app/home/DanakServices.tsx

@@ -1,7 +1,7 @@
 'use client'
+import SectionHeader from '@/components/SectionHeader'
 import ServiceItem from '@/components/ServiceItem'
 import { clx } from '@/helpers/utils'
-import { ArrowLeft } from 'iconsax-react'
 import { FC, useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 
@@ -10,20 +10,10 @@ const DanakServices: FC = () => {
     const [categoryId, setCategoryId] = useState<string>('')
 
     return (
-        <div className='mt-40 max-w-maxWidth mx-auto'>
+        <div className='mt-24 max-w-maxWidth mx-auto'>
-            <div className='flex justify-between items-center'>
+            <SectionHeader
-                <h2 className='text-2xl'>
+                title='سرویس های داناک'
-                    سرویس های داناک
-                </h2>
-
-                <div className='flex gap-1'>
-                    <div className='text-sm'>مشاهده همه</div>
-                    <ArrowLeft
-                        size={20}
-                        color='black'
             />
-                </div>
-            </div>
 
             <div className='mt-6'>
                 <Swiper

src/app/page.tsx

@@ -4,6 +4,8 @@ import HeroSection from './home/HeroSection'
 import DanakSuggestedService from './home/DanakSuggestedService'
 import WhyDanak from './home/WhyDanak'
 import DanakServices from './home/DanakServices'
+import Blog from './home/Blog'
+import Collaboration from './home/Collaboration'
 
 const Home: NextPage = () => {
   return (
@@ -18,6 +20,10 @@ const Home: NextPage = () => {
 
       <DanakServices />
 
+      <Blog />
+
+      <Collaboration />
+
     </div>
   )
 }

src/components/BlogItem.tsx

@@ -0,0 +1,31 @@
+import Image from 'next/image'
+import { FC } from 'react'
+
+const BlogItem: FC = () => {
+    return (
+        <div className='flex-1 h-[390px] rounded-4xl overflow-hidden relative'>
+            <Image
+                src='https://picsum.photos/seed/picsum/200/300'
+                layout='fill'
+                objectFit='cover'
+                alt='blog'
+            />
+
+            <div className='absolute top-6 left-6 bg-black text-white h-8 px-5 rounded-xl flex items-center text-sm'>
+                دسته بندی
+            </div>
+
+            <div className='absolute bottom-0 left-0 w-full modalGlass3 h-[180px]  rounded-b-3xl text-white p-6'>
+                <h6>
+                    سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
+                </h6>
+
+                <p className='mt-4 text-sm'>
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه...
+                </p>
+            </div>
+        </div>
+    )
+}
+
+export default BlogItem

src/components/InfoBox.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 const InfoBox: FC<Props> = (props: Props) => {
     return (
-        <div className='flex-1 h-[185px] bg-gradient-to-r from-[#f9fafc] to-[#f1f3f8] rounded-4xl p-6 border-[3px] border-white '>
+        <div className='flex-1 min-h-[185px] bg-gradient-to-r from-[#f9fafc] to-[#f1f3f8] rounded-4xl p-6 border-[3px] border-white '>
             <div className='flex items-center gap-4'>
                 <div className="size-12 flex items-center justify-center bg-gradient-to-b from-[#f9fafc] to-[#f1f3f8] rounded-2xl shadow-[inset_4px_4px_6px_#e2e5ec,inset_-4px_-4px_6px_#ffffff] ">
                     {props.icon}

src/components/SectionHeader.tsx

@@ -0,0 +1,26 @@
+import { ArrowLeft } from 'iconsax-react'
+import { FC } from 'react'
+
+type Props = {
+    title: string
+}
+
+const SectionHeader: FC<Props> = (props) => {
+    return (
+        <div className='flex justify-between items-center'>
+            <h2 className='text-2xl'>
+                {props.title}
+            </h2>
+
+            <div className='flex gap-1'>
+                <div className='text-sm'>مشاهده همه</div>
+                <ArrowLeft
+                    size={20}
+                    color='black'
+                />
+            </div>
+        </div>
+    )
+}
+
+export default SectionHeader