why danak and danak servces in landing
This commit is contained in:
hamid zarghami
Generated
+20
@@ -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",
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -37,6 +37,7 @@ textarea::placeholder {
|
||||
|
||||
@theme {
|
||||
--color-primary: black;
|
||||
--color-description: #888888;
|
||||
--spacing-maxWidth: 1100px;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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'
|
||||
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -15,11 +15,12 @@ const Button: FC<Props> = 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 (
|
||||
<button {...rest} className={`${buttonClass} ${className || ''}`} >
|
||||
<button {...rest} className={buttonClass} >
|
||||
{isLoading ? (
|
||||
<div className='flex gap-2 items-center'>
|
||||
{percentage && percentage > 0 ? <span>{percentage}%</span> : <MoonLoader size={20} color='#fff' />}
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { FC, ReactNode } from 'react'
|
||||
|
||||
type Props = {
|
||||
icon: ReactNode,
|
||||
title: string,
|
||||
description: string
|
||||
}
|
||||
|
||||
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 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}
|
||||
</div>
|
||||
|
||||
<div className='flex-1'>
|
||||
<h3 className='text-lg'>
|
||||
{props.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className='mt-3 text-description leading-6 text-sm'>
|
||||
{props.description}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InfoBox
|
||||
@@ -1,11 +1,15 @@
|
||||
import { ArrowLeft } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
|
||||
const ServiceItem: FC = () => {
|
||||
type Props = {
|
||||
isShort?: boolean
|
||||
}
|
||||
|
||||
const ServiceItem: FC<Props> = (props) => {
|
||||
return (
|
||||
<div className='flex-1 bg-white rounded-4xl p-10'>
|
||||
<div className='flex-1 bg-white rounded-4xl p-7'>
|
||||
<div className='flex justify-between'>
|
||||
<div className='size-[70px] rounded-2xl bg-orange-400'></div>
|
||||
<div className='size-[65px] rounded-2xl bg-orange-400'></div>
|
||||
<div className='h-8 bg-primary text-white px-4 rounded-2xl text-sm flex items-center'>
|
||||
دسته بندی
|
||||
</div>
|
||||
@@ -15,20 +19,35 @@ const ServiceItem: FC = () => {
|
||||
دی منو
|
||||
</h3>
|
||||
|
||||
<p className='text-xs font-light mt-1'>
|
||||
منو دیجیتال رستوران
|
||||
</p>
|
||||
|
||||
<p className='mt-6 text-sm leading-7'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم استلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
|
||||
</p>
|
||||
|
||||
<div className='flex justify-end mt-6'>
|
||||
<div className='flex gap-1.5 items-center'>
|
||||
<div className='text-sm'>جزییات</div>
|
||||
<ArrowLeft size={20} color='black' />
|
||||
</div>
|
||||
<div className='text-xs font-light mt-1 flex justify-between'>
|
||||
<p>منو دیجیتال رستوران</p>
|
||||
{
|
||||
props.isShort &&
|
||||
<div className='flex'>
|
||||
<div className='flex gap-1.5 items-center'>
|
||||
<div className='text-sm'>جزییات</div>
|
||||
<ArrowLeft size={20} color='black' />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
!props.isShort &&
|
||||
<p className='mt-6 text-sm leading-7'>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم استلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
|
||||
</p>
|
||||
}
|
||||
|
||||
{
|
||||
!props.isShort &&
|
||||
<div className='flex justify-end mt-6'>
|
||||
<div className='flex gap-1.5 items-center'>
|
||||
<div className='text-sm'>جزییات</div>
|
||||
<ArrowLeft size={20} color='black' />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user