feat: update and fix graphics on landing page (#1149)

* feat: update images on tasks sections and fix appstore buttons

* feat: open appstores in different tab

landing-page/components/TasksAppStoreBadge.tsx

@@ -29,10 +29,10 @@ export const TasksAppStoreBadge = () => {
   }[language]
 
   return (
-    <Link href={linkURL}>
+    <Link href={linkURL} target="_blank">
       <Image
         alt={alt} src={imageURL} height={0} width={156}
-        className={tw('w-full !h-[54px]')}
+        className={tw('w-full min-h-[54px] max-h-[54px] min-w-[156px] max-w-[156px]')}
       />
     </Link>
   )

landing-page/components/TasksPlaystoreBadge.tsx

@@ -1,7 +1,7 @@
 import { useLanguage } from '@helpwave/common/hooks/useLanguage'
 import Image from 'next/image'
 import Link from 'next/link'
-import { tw } from '@twind/core'
+import { tx } from '@twind/core'
 
 /**
  * WHEN USING MAKE THE NECESSARY ATTRIBUTION TO GOOGLE
@@ -26,9 +26,8 @@ export const TasksPlaystoreBadge = () => {
     en: '/images/google_play_badge_english.png'
   }[language]
   return (
-    <Link
-      href={linkURL}>
-      <Image alt={alt} src={imageURL} height={0} width={0} className={tw('w-full !h-[54px]')}/>
+    <Link href={linkURL} target="_blank">
+      <Image alt={alt} src={imageURL} height={0} width={0} className={tx('w-full min-h-[54px] max-h-[54px] min-w-[182px] max-w-[182px]')}/>
     </Link>
   )
 }

landing-page/components/sections/SectionBase.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react'
-import { tx } from '@twind/core'
+import { apply, tx } from '@twind/core'
 
 type BackgroundColor = 'white' | 'black' | 'gray' | 'darkSecondary' | 'darkPrimary'
 
@@ -24,7 +24,7 @@ export const SectionBase = ({
       'bg-hw-grayscale-1000': backgroundColor === 'black',
       'bg-hw-secondary-800': backgroundColor === 'darkSecondary',
       'bg-hw-primary-900': backgroundColor === 'darkPrimary',
-      'desktop:px-24 tablet:px-12 mobile:px-6 py-16': useDefaultStyle
+      [apply('desktop:px-24 tablet:px-12 mobile:px-6 py-16')]: useDefaultStyle
     }, outerClassName)}>
       <div
         className={tx(

landing-page/components/sections/tasks/MobileFeatureSection.tsx

@@ -37,18 +37,18 @@ export const MobileFeatureSection = ({ overwriteTranslation }: PropsForTranslati
 
   return (
     <SectionBase
-      className={tw('flex flex-row mobile:!flex-wrap-reverse w-full gap-8 justify-between mobile:justify-center items-center text-white')}
+      className={tw('flex flex-row mobile:!flex-wrap-reverse w-full gap-8 justify-between mobile:justify-center text-white')}
       backgroundColor="darkSecondary"
       outerClassName={tw('!pb-0')}
     >
-      <div className={tw('flex flex-col gap-y-2 pb-16 desktop:w-3/5')}>
-        <div className={tw('flex flex-col gap-y-2 mobile:pb-0 mobile:text-center')}>
+      <div className={tw('flex flex-col gap-y-2 pb-16 desktop:w-3/5 justify-center')}>
+        <div className={tw('flex flex-col gap-y-2 mobile:pb-0')}>
           <h1><Span type="title" className={tw('!text-4xl')}>{translation.title}</Span></h1>
           <Span className={tw('font-space font-semibold')}><MarkdownInterpreter text={translation.description}/></Span>
         </div>
         <div
           // DO NOT CHANGE THE GAP. IT IS MANDATORY BY Apple
-          className={tw('flex flex-wrap gap-x-8 gap-y-4 mt-6 mobile:justify-center')}
+          className={tw('flex flex-wrap gap-x-8 gap-y-4 mt-6')}
         >
           <TasksPlaystoreBadge/>
           <TasksAppStoreBadge/>
@@ -59,15 +59,14 @@ export const MobileFeatureSection = ({ overwriteTranslation }: PropsForTranslati
         </div>
       </div>
       <div
-        // TODO fix image size
-        className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full w-2/5 z-10 desktop:min-h-[400px]')}
+        className={tw('flex flex-col items-center justify-end rounded-l-3xl w-2/5 mobile:w-full tablet:min-w-[220px] z-10 max-h-[70vh] min-h-[100%] desktop:min-h-[400px]')}
       >
         <Image
           src={imageUrl}
           alt=""
           width={0}
           height={0}
-          className={tw('w-fit max-h-[70vh] mobile:-translate-x-[6%]')}
+          className={tw('w-fit h-full max-h-[70vh] mobile:-translate-x-[6%]')}
         />
       </div>
     </SectionBase>

landing-page/components/sections/tasks/PatientSection.tsx

@@ -33,18 +33,19 @@ export const PatientSection = ({ overwriteTranslation }: PropsForTranslation<Pat
 
   return (
     <SectionBase
-      className={tw('flex flex-row mobile:!flex-wrap w-full gap-x-32 gap-y-8 justify-between mobile:justify-center items-center')}
+      outerClassName={tw('tablet:pb-0 desktop:pb-0')}
+      className={tw('flex flex-row mobile:!flex-wrap w-full gap-x-16 gap-y-8 justify-between mobile:justify-center items-center')}
       backgroundColor="gray"
     >
       <div
-        className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full w-2/5 z-10')}
+        className={tw('flex flex-row items-end justify-center rounded-l-3xl mobile:w-full w-2/5 z-10 min-w-[250px]')}
       >
         <Image
           src={imageUrl}
           alt=""
-          width={0}
-          height={0}
-          className={tw('w-fit max-h-[70vh]')}
+          width={371}
+          height={649}
+          className={tw('max-h-[70vh]')}
         />
       </div>
       <div className={tw('flex flex-col gap-y-2 pb-16 mobile:pb-0')}>

landing-page/components/sections/tasks/PropertiesSection.tsx

@@ -33,17 +33,18 @@ export const PropertiesSection = ({ overwriteTranslation }: PropsForTranslation<
 
   return (
     <SectionBase
+      outerClassName={tw('desktop:py-0 tablet:py-0')}
       className={tw('flex flex-row mobile:!flex-wrap w-full gap-x-16 gap-y-8 justify-between mobile:justify-center items-center')}
     >
       <div
-        className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full desktop:min-w-[40%] w-2/5 z-10')}
+        className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full min-w-[40%] w-2/5 z-10')}
       >
         <Image
           src={imageUrl}
           alt=""
-          width={0}
-          height={0}
-          className={tw('w-fit max-h-[70vh]')}
+          width={443}
+          height={649}
+          className={tw('max-h-[70vh]')}
         />
       </div>
       <div className={tw('flex flex-col gap-y-2 pb-16 mobile:pb-0')}>

landing-page/components/sections/tasks/StartSection.tsx

@@ -42,7 +42,7 @@ const StartSection = ({ overwriteTranslation }: PropsForTranslation<StartSection
         src={screenshotURL}
         width={0}
         height={0}
-        className={tx(`object-contain w-full desktop:w-1/2 desktop:scale-125 -rotate-12`)}
+        className={tx(`object-contain w-full desktop:min-w-[40%] desktop:scale-125 -rotate-12`)}
       />
       <div className={tw('flex flex-col gap-y-4')}>
         <Link href={demoURL} target="_blank">

landing-page/components/sections/tasks/TasksKanbanSection.tsx

@@ -47,7 +47,7 @@ export const TasksKanbanSection = ({ overwriteTranslation }: PropsForTranslation
         </div>
       </div>
       <div
-        className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full min-w-[50%] z-10')}
+        className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-5/6 min-w-[50%] z-10')}
       >
         <Image
           src={imageUrl}