h1 + ExpandableContent + ...

src/app/home/DanakSuggestedService.tsx

@@ -17,7 +17,7 @@ const DanakSuggestedService: FC = () => {
                 {
                     data?.data?.danakSuggestServices?.map((item) => {
                         return (
-                            <ServiceItem key={item.id} item={item} />
+                            <ServiceItem isShort key={item.id} item={item} />
                         )
                     })
                 }

src/app/products/DetailService.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { FC, Fragment } from 'react'
+import ExpandableContent from '@/components/ExpandableContent'
 import { useGetProductBySlug } from './hooks/useProductData'
 import ServiceHeader from './components/ServiceHeader'
 import moment from 'moment-jalaali'
@@ -94,8 +95,7 @@ const DetailService: FC<{ id: string }> = ({ id }) => {
                                 توضیحات کامل
                             </div>
                             {getDetailService.data?.data?.danakService?.metaDescription && (
-                                <p dangerouslySetInnerHTML={{ __html: getDetailService.data.data.danakService.metaDescription }} className='text-[13px] text-description mt-4 leading-6'>
-                                </p>
+                                <ExpandableContent html={getDetailService.data.data.danakService.metaDescription} />
                             )}
                         </div>
 

src/app/products/components/ServiceHeader.tsx

@@ -40,9 +40,9 @@ const ServiceHeader: FC<Props> = (props: Props) => {
                     <Image alt='icon' width={70} height={70} src={data?.icon} className='w-full h-full rounded-xl' />
                 </div>
                 <div>
-                    <div>
+                    <h1>
                         {data?.name}
-                    </div>
+                    </h1>
 
                     <p className='text-description mt-1 text-[11px]'>
                         {data?.description}