why danak and danak servces in landing

src/components/Button.tsx

@@ -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' />}

src/components/InfoBox.tsx

@@ -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

src/components/ServiceItem.tsx

@@ -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>
     )
 }