why danak and danak servces in landing

src/app/globals.css

@@ -37,6 +37,7 @@ textarea::placeholder {
 
 @theme {
   --color-primary: black;
+  --color-description: #888888;
   --spacing-maxWidth: 1100px;
 }
 

src/app/home/DanakServices.tsx

@@ -0,0 +1,76 @@
+'use client'
+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'
+
+const DanakServices: FC = () => {
+
+    const [categoryId, setCategoryId] = useState<string>('')
+
+    return (
+        <div className='mt-40 max-w-maxWidth mx-auto'>
+            <div className='flex justify-between items-center'>
+                <h2 className='text-2xl'>
+                    سرویس های داناک
+                </h2>
+
+                <div className='flex gap-1'>
+                    <div className='text-sm'>مشاهده همه</div>
+                    <ArrowLeft
+                        size={20}
+                        color='black'
+                    />
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <Swiper
+                    className='w-full'
+                    spaceBetween={15} // فاصله پیش‌فرض بین اسلایدها
+                    slidesPerView='auto'
+                >
+                    <SwiperSlide className='max-w-[158px]'>
+                        <div onClick={() => setCategoryId('')} className={clx(
+                            'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
+                            '' === categoryId && 'bg-white'
+                        )}>
+                            <div className='text-sm'>
+                                همه
+                            </div>
+                        </div>
+                    </SwiperSlide>
+                    <SwiperSlide className='max-w-[158px]'>
+                        <div onClick={() => setCategoryId('1')} className={clx(
+                            'h-10 cursor-pointer rounded-full border-2 border-white bg-white/45 flex gap-2 justify-center items-center',
+                            '1' === categoryId && 'bg-white'
+                        )}>
+                            <div className='size-5 rounded-full bg-blue-100'>
+
+                            </div>
+                            <div className='text-sm'>
+                                ابزارهای کاربردی
+                            </div>
+                        </div>
+                    </SwiperSlide>
+
+                </Swiper>
+            </div>
+
+            <div className='mt-16 flex gap-8'>
+                <ServiceItem
+                    isShort
+                />
+                <ServiceItem
+                    isShort
+                />
+                <ServiceItem
+                    isShort
+                />
+            </div>
+        </div>
+    )
+}
+
+export default DanakServices

src/app/home/WhyDanak.tsx

@@ -0,0 +1,72 @@
+import Button from '@/components/Button'
+import InfoBox from '@/components/InfoBox'
+import { Activity, Headphone, Profile2User, ShieldTick } from 'iconsax-react'
+import { FC } from 'react'
+
+const WhyDanak: FC = () => {
+    return (
+        <div className='w-full py-32 bg-gradient-to-l 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>
+
+                    <Button
+                        label='خدمات'
+                        className='mt-10 w-fit px-12'
+                    />
+                </div>
+
+                <div className='flex-1 flex gap-8 flex-wrap'>
+                    <div className='min-w-[40%] flex-1'>
+                        <InfoBox
+                            icon={<Profile2User
+                                size={24}
+                                color='#0A66C2'
+                            />}
+                            title='مشاوره'
+                            description='راهکارهای نرم‌افزاری مدرن با عملکرد بالا و کمترین زمان اجرا.'
+                        />
+                    </div>
+                    <div className='min-w-[40%] flex-1'>
+                        <InfoBox
+                            icon={<ShieldTick
+                                size={24}
+                                color='#FF7B00'
+                            />}
+                            title='خدمات امنیت'
+                            description='سرویس های قابل اعتماد با استانداردهای امنیتی پیشرفته.'
+                        />
+                    </div>
+                    <div className='min-w-[40%] flex-1'>
+                        <InfoBox
+                            icon={<Headphone
+                                size={24}
+                                color='#00980F'
+                            />}
+                            title='خدمات پشتیبانی'
+                            description='همیشه در کنار شما هستیم تا بهترین تجربه را داشته باشید.'
+                        />
+                    </div>
+                    <div className='min-w-[40%] flex-1'>
+                        <InfoBox
+                            icon={<Activity
+                                size={24}
+                                color='#FF00B8'
+                            />}
+                            title='راهکارهای اختصاصی'
+                            description='نرم‌افزارهایی متناسب با نیازهای خاص کسب‌وکار شما.'
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default WhyDanak

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import 'swiper/css'
 import "./globals.css";
 import '@/assets/fonts/irancell/style.css'
 

src/app/page.tsx

@@ -2,6 +2,8 @@ import { NextPage } from 'next'
 import Header from '@/shared/Header'
 import HeroSection from './home/HeroSection'
 import DanakSuggestedService from './home/DanakSuggestedService'
+import WhyDanak from './home/WhyDanak'
+import DanakServices from './home/DanakServices'
 
 const Home: NextPage = () => {
   return (
@@ -12,6 +14,10 @@ const Home: NextPage = () => {
 
       <DanakSuggestedService />
 
+      <WhyDanak />
+
+      <DanakServices />
+
     </div>
   )
 }