Fix our services title

bright · Feb 27, 2025 · c843544 · c843544
1 parent 890a504
commit c843544
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/src/our-services/Service.styled.ts b/src/our-services/Service.styled.ts
@@ -317,10 +317,6 @@ export const OurServicePageTitle = styled(CustomPageTitle)<{ language: boolean }
   }
   & span {
     color: ${variables.color.text2};
-    padding-right: ${variables.pxToRem(10)};
-    &:last-child {
-      padding-right: 0;
-    }
   }
   @media ${variables.device.laptop} {
     font-size: ${clampBuilder(1281, 1542, 45, 57)};
@@ -408,7 +404,7 @@ export const BoxesWrapper = styled.div`
 
 export const BoxImage = styled.div``;
 
-export const BoxTitle = styled.div`
+export const BoxTitle = styled.h3`
     font-size: 20px;
     font-weight: bold;
     padding: 32px 0;

diff --git a/src/our-services/Service.tsx b/src/our-services/Service.tsx
@@ -88,11 +88,13 @@ export default function Template({
   } = page
 
   const titleArr = title.split(' ')
-  const newTitle = titleArr.map((ta: string) => {
+  const newTitle = titleArr.map((ta: string, index: number) => {
     const highlightedWordArr = highlighted_word?.split(' ')
+    const isLastElement = index === titleArr.length - 1
+
     return (
       <span key={ta} className={highlightedWordArr?.includes(ta) ? 'highlighted-word' : ''}>
-        {ta}
+        {isLastElement ? ta : `${ta}\u0020`}
       </span>
     )
   })
@@ -118,7 +120,7 @@ export default function Template({
                 paddingTablet='0 0 16px'
                 paddingMobileProps='0 0 32px'
               >
-                <OurServicePageTitle language={de}>{newTitle}</OurServicePageTitle>
+                <OurServicePageTitle language={de}><span>{newTitle}</span></OurServicePageTitle>
               </CustomSection>
               <BulletsList>
                 {bullet_points && bullet_points.map((point: string) => <BulletList key={point}>{point}</BulletList>)}