Skip to content

Commit b2873fc

Browse files
DasProffiDasProffi
authored
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
1 parent c9946e0 commit b2873fc

File tree

8 files changed

+26
-26
lines changed

8 files changed

+26
-26
lines changed

‎landing-page/components/TasksAppStoreBadge.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ export const TasksAppStoreBadge = () => {
2929
}[language]
3030

3131
return (
32-
<Link href={linkURL}>
32+
<Link href={linkURL} target="_blank">
3333
<Image
3434
alt={alt} src={imageURL} height={0} width={156}
35-
className={tw('w-full !h-[54px]')}
35+
className={tw('w-full min-h-[54px] max-h-[54px] min-w-[156px] max-w-[156px]')}
3636
/>
3737
</Link>
3838
)

‎landing-page/components/TasksPlaystoreBadge.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useLanguage } from '@helpwave/common/hooks/useLanguage'
22
import Image from 'next/image'
33
import Link from 'next/link'
4-
import { tw } from '@twind/core'
4+
import { tx } from '@twind/core'
55

66
/**
77
* WHEN USING MAKE THE NECESSARY ATTRIBUTION TO GOOGLE
@@ -26,9 +26,8 @@ export const TasksPlaystoreBadge = () => {
2626
en: '/images/google_play_badge_english.png'
2727
}[language]
2828
return (
29-
<Link
30-
href={linkURL}>
31-
<Image alt={alt} src={imageURL} height={0} width={0} className={tw('w-full !h-[54px]')}/>
29+
<Link href={linkURL} target="_blank">
30+
<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]')}/>
3231
</Link>
3332
)
3433
}

‎landing-page/components/sections/SectionBase.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { PropsWithChildren } from 'react'
2-
import { tx } from '@twind/core'
2+
import { apply, tx } from '@twind/core'
33

44
type BackgroundColor = 'white' | 'black' | 'gray' | 'darkSecondary' | 'darkPrimary'
55

@@ -24,7 +24,7 @@ export const SectionBase = ({
2424
'bg-hw-grayscale-1000': backgroundColor === 'black',
2525
'bg-hw-secondary-800': backgroundColor === 'darkSecondary',
2626
'bg-hw-primary-900': backgroundColor === 'darkPrimary',
27-
'desktop:px-24 tablet:px-12 mobile:px-6 py-16': useDefaultStyle
27+
[apply('desktop:px-24 tablet:px-12 mobile:px-6 py-16')]: useDefaultStyle
2828
}, outerClassName)}>
2929
<div
3030
className={tx(

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,18 @@ export const MobileFeatureSection = ({ overwriteTranslation }: PropsForTranslati
3737

3838
return (
3939
<SectionBase
40-
className={tw('flex flex-row mobile:!flex-wrap-reverse w-full gap-8 justify-between mobile:justify-center items-center text-white')}
40+
className={tw('flex flex-row mobile:!flex-wrap-reverse w-full gap-8 justify-between mobile:justify-center text-white')}
4141
backgroundColor="darkSecondary"
4242
outerClassName={tw('!pb-0')}
4343
>
44-
<div className={tw('flex flex-col gap-y-2 pb-16 desktop:w-3/5')}>
45-
<div className={tw('flex flex-col gap-y-2 mobile:pb-0 mobile:text-center')}>
44+
<div className={tw('flex flex-col gap-y-2 pb-16 desktop:w-3/5 justify-center')}>
45+
<div className={tw('flex flex-col gap-y-2 mobile:pb-0')}>
4646
<h1><Span type="title" className={tw('!text-4xl')}>{translation.title}</Span></h1>
4747
<Span className={tw('font-space font-semibold')}><MarkdownInterpreter text={translation.description}/></Span>
4848
</div>
4949
<div
5050
// DO NOT CHANGE THE GAP. IT IS MANDATORY BY Apple
51-
className={tw('flex flex-wrap gap-x-8 gap-y-4 mt-6 mobile:justify-center')}
51+
className={tw('flex flex-wrap gap-x-8 gap-y-4 mt-6')}
5252
>
5353
<TasksPlaystoreBadge/>
5454
<TasksAppStoreBadge/>
@@ -59,15 +59,14 @@ export const MobileFeatureSection = ({ overwriteTranslation }: PropsForTranslati
5959
</div>
6060
</div>
6161
<div
62-
// TODO fix image size
63-
className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full w-2/5 z-10 desktop:min-h-[400px]')}
62+
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]')}
6463
>
6564
<Image
6665
src={imageUrl}
6766
alt=""
6867
width={0}
6968
height={0}
70-
className={tw('w-fit max-h-[70vh] mobile:-translate-x-[6%]')}
69+
className={tw('w-fit h-full max-h-[70vh] mobile:-translate-x-[6%]')}
7170
/>
7271
</div>
7372
</SectionBase>

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,19 @@ export const PatientSection = ({ overwriteTranslation }: PropsForTranslation<Pat
3333

3434
return (
3535
<SectionBase
36-
className={tw('flex flex-row mobile:!flex-wrap w-full gap-x-32 gap-y-8 justify-between mobile:justify-center items-center')}
36+
outerClassName={tw('tablet:pb-0 desktop:pb-0')}
37+
className={tw('flex flex-row mobile:!flex-wrap w-full gap-x-16 gap-y-8 justify-between mobile:justify-center items-center')}
3738
backgroundColor="gray"
3839
>
3940
<div
40-
className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full w-2/5 z-10')}
41+
className={tw('flex flex-row items-end justify-center rounded-l-3xl mobile:w-full w-2/5 z-10 min-w-[250px]')}
4142
>
4243
<Image
4344
src={imageUrl}
4445
alt=""
45-
width={0}
46-
height={0}
47-
className={tw('w-fit max-h-[70vh]')}
46+
width={371}
47+
height={649}
48+
className={tw('max-h-[70vh]')}
4849
/>
4950
</div>
5051
<div className={tw('flex flex-col gap-y-2 pb-16 mobile:pb-0')}>

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,18 @@ export const PropertiesSection = ({ overwriteTranslation }: PropsForTranslation<
3333

3434
return (
3535
<SectionBase
36+
outerClassName={tw('desktop:py-0 tablet:py-0')}
3637
className={tw('flex flex-row mobile:!flex-wrap w-full gap-x-16 gap-y-8 justify-between mobile:justify-center items-center')}
3738
>
3839
<div
39-
className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full desktop:min-w-[40%] w-2/5 z-10')}
40+
className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full min-w-[40%] w-2/5 z-10')}
4041
>
4142
<Image
4243
src={imageUrl}
4344
alt=""
44-
width={0}
45-
height={0}
46-
className={tw('w-fit max-h-[70vh]')}
45+
width={443}
46+
height={649}
47+
className={tw('max-h-[70vh]')}
4748
/>
4849
</div>
4950
<div className={tw('flex flex-col gap-y-2 pb-16 mobile:pb-0')}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const StartSection = ({ overwriteTranslation }: PropsForTranslation<StartSection
4242
src={screenshotURL}
4343
width={0}
4444
height={0}
45-
className={tx(`object-contain w-full desktop:w-1/2 desktop:scale-125 -rotate-12`)}
45+
className={tx(`object-contain w-full desktop:min-w-[40%] desktop:scale-125 -rotate-12`)}
4646
/>
4747
<div className={tw('flex flex-col gap-y-4')}>
4848
<Link href={demoURL} target="_blank">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const TasksKanbanSection = ({ overwriteTranslation }: PropsForTranslation
4747
</div>
4848
</div>
4949
<div
50-
className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-full min-w-[50%] z-10')}
50+
className={tw('flex flex-row bottom-0 justify-center rounded-l-3xl mobile:w-5/6 min-w-[50%] z-10')}
5151
>
5252
<Image
5353
src={imageUrl}

0 commit comments

Comments
 (0)