From e09adee7cd0d9ffbf587ca817e5802026a529058 Mon Sep 17 00:00:00 2001
From: Felix Thape <felix.thape@gmail.com>
Date: Thu, 26 Dec 2024 15:31:05 +0100
Subject: [PATCH 1/2] feat: update images on tasks sections and fix appstore
 buttons

---
 landing-page/components/TasksAppStoreBadge.tsx      |  2 +-
 landing-page/components/TasksPlaystoreBadge.tsx     |  7 +++----
 landing-page/components/sections/SectionBase.tsx    |  4 ++--
 .../sections/tasks/MobileFeatureSection.tsx         | 13 ++++++-------
 .../components/sections/tasks/PatientSection.tsx    | 11 ++++++-----
 .../components/sections/tasks/PropertiesSection.tsx |  9 +++++----
 .../components/sections/tasks/StartSection.tsx      |  2 +-
 .../sections/tasks/TasksKanbanSection.tsx           |  2 +-
 8 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/landing-page/components/TasksAppStoreBadge.tsx b/landing-page/components/TasksAppStoreBadge.tsx
index 1bf776d92..acf2b5cd1 100644
--- a/landing-page/components/TasksAppStoreBadge.tsx
+++ b/landing-page/components/TasksAppStoreBadge.tsx
@@ -32,7 +32,7 @@ export const TasksAppStoreBadge = () => {
     <Link href={linkURL}>
       <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>
   )
diff --git a/landing-page/components/TasksPlaystoreBadge.tsx b/landing-page/components/TasksPlaystoreBadge.tsx
index cce383f3f..7c5df86c5 100644
--- a/landing-page/components/TasksPlaystoreBadge.tsx
+++ b/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}>
+      <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>
   )
 }
diff --git a/landing-page/components/sections/SectionBase.tsx b/landing-page/components/sections/SectionBase.tsx
index da1bc929c..b3c7a191c 100644
--- a/landing-page/components/sections/SectionBase.tsx
+++ b/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(
diff --git a/landing-page/components/sections/tasks/MobileFeatureSection.tsx b/landing-page/components/sections/tasks/MobileFeatureSection.tsx
index ca516061d..f0608f820 100644
--- a/landing-page/components/sections/tasks/MobileFeatureSection.tsx
+++ b/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>
diff --git a/landing-page/components/sections/tasks/PatientSection.tsx b/landing-page/components/sections/tasks/PatientSection.tsx
index cbed93a6e..f7096754c 100644
--- a/landing-page/components/sections/tasks/PatientSection.tsx
+++ b/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')}>
diff --git a/landing-page/components/sections/tasks/PropertiesSection.tsx b/landing-page/components/sections/tasks/PropertiesSection.tsx
index 802773992..ec0a460a4 100644
--- a/landing-page/components/sections/tasks/PropertiesSection.tsx
+++ b/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')}>
diff --git a/landing-page/components/sections/tasks/StartSection.tsx b/landing-page/components/sections/tasks/StartSection.tsx
index 7bcdbd002..e33694855 100644
--- a/landing-page/components/sections/tasks/StartSection.tsx
+++ b/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">
diff --git a/landing-page/components/sections/tasks/TasksKanbanSection.tsx b/landing-page/components/sections/tasks/TasksKanbanSection.tsx
index 36b478272..e611da927 100644
--- a/landing-page/components/sections/tasks/TasksKanbanSection.tsx
+++ b/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}

From 6410ecff8f56b495d46385fd5395a166f9fe78ac Mon Sep 17 00:00:00 2001
From: Felix Thape <felix.thape@gmail.com>
Date: Thu, 26 Dec 2024 15:32:26 +0100
Subject: [PATCH 2/2] feat: open appstores in different tab

---
 landing-page/components/TasksAppStoreBadge.tsx  | 2 +-
 landing-page/components/TasksPlaystoreBadge.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/landing-page/components/TasksAppStoreBadge.tsx b/landing-page/components/TasksAppStoreBadge.tsx
index acf2b5cd1..d6c0d3051 100644
--- a/landing-page/components/TasksAppStoreBadge.tsx
+++ b/landing-page/components/TasksAppStoreBadge.tsx
@@ -29,7 +29,7 @@ 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 min-h-[54px] max-h-[54px] min-w-[156px] max-w-[156px]')}
diff --git a/landing-page/components/TasksPlaystoreBadge.tsx b/landing-page/components/TasksPlaystoreBadge.tsx
index 7c5df86c5..6645aa424 100644
--- a/landing-page/components/TasksPlaystoreBadge.tsx
+++ b/landing-page/components/TasksPlaystoreBadge.tsx
@@ -26,7 +26,7 @@ export const TasksPlaystoreBadge = () => {
     en: '/images/google_play_badge_english.png'
   }[language]
   return (
-    <Link href={linkURL}>
+    <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>
   )