diff --git a/package-lock.json b/package-lock.json index 2168899..0bd4fca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-spinners": "^0.15.0", + "swiper": "^11.2.6", "tailwind-merge": "^3.0.2" }, "devDependencies": { @@ -5337,6 +5338,25 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "11.2.6", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz", + "integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/tailwind-merge": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz", diff --git a/package.json b/package.json index a874d8d..ca96f53 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "react": "^19.0.0", "react-dom": "^19.0.0", "react-spinners": "^0.15.0", + "swiper": "^11.2.6", "tailwind-merge": "^3.0.2" }, "devDependencies": { diff --git a/src/app/globals.css b/src/app/globals.css index 3cbf337..6cccb40 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -37,6 +37,7 @@ textarea::placeholder { @theme { --color-primary: black; + --color-description: #888888; --spacing-maxWidth: 1100px; } diff --git a/src/app/home/DanakServices.tsx b/src/app/home/DanakServices.tsx new file mode 100644 index 0000000..327b69d --- /dev/null +++ b/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('') + + return ( +
+
+

+ سرویس های داناک +

+ +
+
مشاهده همه
+ +
+
+ +
+ + +
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' + )}> +
+ همه +
+
+ + +
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' + )}> +
+ +
+
+ ابزارهای کاربردی +
+
+ + + +
+ +
+ + + +
+
+ ) +} + +export default DanakServices \ No newline at end of file diff --git a/src/app/home/WhyDanak.tsx b/src/app/home/WhyDanak.tsx new file mode 100644 index 0000000..1b0bb51 --- /dev/null +++ b/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 ( +
+
+
+

+ چرا داناک؟ +

+ +

+ ما در داناک با ترکیب خلاقیت، تخصص و تکنولوژی‌های روز، راهکارهای نرم‌افزاری منحصربه‌فردی ارائه می‌دهیم که کسب‌وکار شما را به سطحی بالاتر می‌برد. +

+ +
+ +
+
+ } + title='مشاوره' + description='راهکارهای نرم‌افزاری مدرن با عملکرد بالا و کمترین زمان اجرا.' + /> +
+
+ } + title='خدمات امنیت' + description='سرویس های قابل اعتماد با استانداردهای امنیتی پیشرفته.' + /> +
+
+ } + title='خدمات پشتیبانی' + description='همیشه در کنار شما هستیم تا بهترین تجربه را داشته باشید.' + /> +
+
+ } + title='راهکارهای اختصاصی' + description='نرم‌افزارهایی متناسب با نیازهای خاص کسب‌وکار شما.' + /> +
+
+
+
+ ) +} + +export default WhyDanak \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d866214..2403b23 100644 --- a/src/app/layout.tsx +++ b/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' diff --git a/src/app/page.tsx b/src/app/page.tsx index 954f925..8350cf6 100644 --- a/src/app/page.tsx +++ b/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 = () => { + + + + ) } diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 3778c1b..12918db 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -15,11 +15,12 @@ const Button: FC = memo((props) => { const buttonClass = clx( 'flex rounded-xl items-center justify-center text-center h-10 text-sm bg-primary text-white w-full', - rest.disabled && 'cursor-not-allowed opacity-60' + rest.disabled && 'cursor-not-allowed opacity-60', + className ); return ( -