Merge remote-tracking branch 'origin/integration/properties' into iss…

…ue/1054-Integrate_CRUD_endpoints_properties # Conflicts: # landing-page/components/Header.tsx # landing-page/components/sections/SectionBase.tsx # landing-page/components/sections/landing/ExpansionSection.tsx # landing-page/pages/404.tsx # landing-page/pages/index.tsx # landing-page/pages/join/index.tsx # landing-page/pages/mediquu/index.tsx # landing-page/pages/product/analytics/index.tsx # landing-page/pages/product/cloud/index.tsx # landing-page/pages/product/impulse/index.tsx # landing-page/pages/story/index.tsx # landing-page/pages/talks/index.tsx # landing-page/pages/team/index.tsx # landing-page/pages/tech-radar/index.tsx # lib/components/properties/PropertyBase.tsx # pnpm-lock.yaml # tasks/components/layout/TaskDetailView.tsx # tasks/package.json
helpwave · Sep 18, 2024 · 46a4cfa · 46a4cfa
2 parents 3436cee + 3bdcb84
commit 46a4cfa
Show file tree

Hide file tree

Showing 40 changed files with 581 additions and 252 deletions.
diff --git a/landing-page/components/Footer.tsx b/landing-page/components/Footer.tsx
@@ -49,9 +49,10 @@ const linkGroups: Record<Categories, LinkType[]> = {
     { name: 'web', link: 'https://github.com/helpwave/web' },
     { name: 'mobile-app', link: 'https://github.com/helpwave/mobile-app' },
     { name: 'services', link: 'https://github.com/helpwave/services' },
-    { name: 'Staging  ~ tasks', link: 'https://staging-tasks.helpwave.de' },
+    { name: 'helpwave tasks (staging)', link: 'https://staging-tasks.helpwave.de' },
   ],
   general: [
+    { name: 'Support', link: 'https://support.helpwave.de' },
     { name: 'Imprint', link: 'https://cdn.helpwave.de/imprint.html' },
     { name: 'Privacy', link: 'https://cdn.helpwave.de/privacy.html' },
     { name: 'Cookies', link: '', onClick: () => CookieConsent.showPreferences() },
@@ -63,7 +64,9 @@ const linkGroups: Record<Categories, LinkType[]> = {
     { name: 'Credits', link: '/credits', openInCurrentTab: true },
   ],
   products: [
-    { name: 'tasks', link: '/product/tasks' },
+    { name: 'helpwave tasks', link: '/product/tasks' },
+    { name: 'App Zum Doc', link: 'https://app-zum-doc.de/' },
+    { name: 'mediQuu Netzmanager', link: 'https://mediquu.de/mediquu_netzmanager.html' },
     /* { name: 'scaffold', link: '/product/scaffold' },
       { name: 'cloud', link: '/product/cloud' },
       { name: 'impulse', link: '/product/impulse' },

diff --git a/landing-page/components/Header.tsx b/landing-page/components/Header.tsx
@@ -12,12 +12,13 @@ import { Chip } from '@helpwave/common/components/ChipList'
 
 const homeURL = '/'
 
-const linkNames = ['products', 'mediquu', 'story', 'team', 'talks', 'tasks'] as const
+const linkNames = ['products', 'mediquu', 'story', 'support', 'team', 'talks', 'tasks', 'appzumdoc', 'netzmanager'] as const
 type LinkNames = typeof linkNames[number]
 
 type LinkType = {
   name: LinkNames,
-  url: string
+  url: string,
+  external?: boolean
 }
 
 type SubLinkType = LinkType & {
@@ -32,6 +33,16 @@ const items: SubLinkType[] = [
       {
         name: 'tasks',
         url: '/tasks',
+      },
+      {
+        name: 'appzumdoc',
+        url: 'https://app-zum-doc.de',
+        external: true
+      },
+      {
+        name: 'netzmanager',
+        url: 'https://mediquu.de/mediquu_netzmanager.html',
+        external: true
       }
     ]
   },
@@ -47,6 +58,10 @@ const items: SubLinkType[] = [
     name: 'talks',
     url: '/talks'
   },
+  {
+    name: 'support',
+    url: 'https://support.helpwave.de',
+  },
   {
     name: 'team',
     url: '/team'
@@ -65,7 +80,10 @@ const defaultHeaderTranslation: Record<Languages, HeaderTranslation> = {
     team: 'Team',
     contact: 'Contact us',
     tasks: 'tasks',
+    support: 'Support',
     talks: 'Podcast',
+    appzumdoc: 'App Zum Doc',
+    netzmanager: 'mediQuu Netzmanager',
   },
   de: {
     products: 'Produkte',
@@ -74,7 +92,10 @@ const defaultHeaderTranslation: Record<Languages, HeaderTranslation> = {
     team: 'Team',
     contact: 'Kontakt',
     tasks: 'tasks',
+    support: 'Hilfe',
     talks: 'Podcast',
+    appzumdoc: 'App Zum Doc',
+    netzmanager: 'mediQuu Netzmanager',
   }
 }
 
@@ -86,18 +107,18 @@ const Header = () => {
 
   return (
     <>
-      <div className={tw('absolute flex flex-row justify-center top-0 w-screen z-[50] bg-white mobile:px-6 tablet:px-12 desktop:px-24')}>
+      <div className={tw('absolute flex flex-row justify-center top-0 w-screen z-[50] bg-hw-grayscale-50 mobile:px-6 tablet:px-12 desktop:px-24')}>
         <nav className={tw('flex pt-2 items-center justify-between w-full max-w-[1200px]')}>
           <Link href={homeURL} className={tw('flex flex-row gap-x-1 items-center text-2xl')}>
             <Helpwave />
             <MarkdownInterpreter text={'\\helpwave'} />
           </Link>
           <div className={tw('mobile:hidden w-full')}>
-            <div className={tw('flex flex-wrap items-center justify-evenly')}>
+            <div className={tw('flex flex-wrap items-center justify-end gap-x-6')}>
               {items.map(({
                 name,
                 url,
-                subpage
+                subpage,
               }) => (
                 <div key={name}>
                   {subpage === undefined ? (
@@ -120,16 +141,17 @@ const Header = () => {
                     >
                       {subpage.map(({
                         name: subPageName,
-                        url: subPageUrl
+                        url: subPageUrl,
+                        external: subPageExternal,
                       }) =>
                         (
-                          <Link key={subPageName} className={tw('cursor-pointer')} href={url + subPageUrl}>
-                            <MenuItem alignment="left">
-                              <Span className={navigationItemStyle}>
-                                {subPageName}
-                              </Span>
-                            </MenuItem>
-                          </Link>
+                        <Link key={subPageName} className={tw('cursor-pointer')} href={subPageExternal ? subPageUrl : url + subPageUrl}>
+                          <MenuItem alignment="left">
+                            <Span className={navigationItemStyle}>
+                              {translation[subPageName]}
+                            </Span>
+                          </MenuItem>
+                        </Link>
                         ))}
                     </Menu>
                   )}
@@ -154,7 +176,7 @@ const Header = () => {
       </div>
 
       {navbarOpen && (
-        <div className={tw('absolute w-screen h-screen z-[100] bg-white')}>
+        <div className={tw('absolute w-screen h-screen z-[100] bg-hw-grayscale-50')}>
           <div className={tw('text-center content-center fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2')}>
             <button onClick={() => setNavbarOpen(false)} className={tw('mb-5')}>
               <X size={64} />
@@ -171,36 +193,37 @@ const Header = () => {
             {items.map(({
               name,
               url,
-              subpage
+              subpage,
             }) => (
               <div key={name} className={tw('w-full p-2')}>
                 {subpage === undefined ? (
                   <Link href={url} onClick={() => setNavbarOpen(false)}>
                     <Span type="heading">
-                      {name}
+                      {translation[name]}
                     </Span>
                   </Link>
                 ) : (
                   <Menu<HTMLDivElement> alignment="tl" trigger={(onClick, ref) => (
                     <div ref={ref} onClick={onClick} className={tw('cursor-pointer select-none')}>
                       <Span type="heading">
-                        {name}
+                        {translation[name]}
                       </Span>
                     </div>
                   )}>
                     {subpage.map(({
                       name: subPageName,
-                      url: subPageUrl
+                      url: subPageUrl,
+                      external: subPageExternal
                     }) =>
                       (
-                        <Link key={subPageName} className={tw('cursor-pointer')} onClick={() => setNavbarOpen(false)}
-                              href={url + subPageUrl}>
-                          <MenuItem alignment="left">
-                            <Span type="heading">
-                              {subPageName}
-                            </Span>
-                          </MenuItem>
-                        </Link>
+                      <Link key={subPageName} className={tw('cursor-pointer')} onClick={() => setNavbarOpen(false)}
+                        href={subPageExternal ? subPageUrl : url + subPageUrl}>
+                        <MenuItem alignment="left">
+                          <Span type="heading">
+                            {translation[subPageName]}
+                          </Span>
+                        </MenuItem>
+                      </Link>
                       ))}
                   </Menu>
                 )}

diff --git a/landing-page/components/NewsLetterForm.tsx b/landing-page/components/NewsLetterForm.tsx
@@ -197,7 +197,7 @@ export const NewsLetterForm = ({
                 ...prevState,
                 industry
               }))}
-              className={tw('!w-full !max-w-[300px]')}
+              className={tw('!w-full !max-w-[300px] bg-white')}
             />
           </div>
           <div className={tw('flex flex-row justify-end mt-4')}>

diff --git a/landing-page/components/Page.tsx b/landing-page/components/Page.tsx
@@ -1,11 +1,17 @@
 import type { HTMLAttributes, ReactNode } from 'react'
 import { tx } from '@twind/core'
+import Head from 'next/head'
 import Header from '@/components/Header'
 import Footer from '@/components/Footer'
+import titleWrapper from '@/utils/titleWrapper'
 
 export type PageProps = HTMLAttributes<HTMLDivElement> & {
   header?: ReactNode,
   footer?: ReactNode,
+  /**
+   * An addition to the page title used to differentiate subpages
+   */
+  pageTitleAddition: string | undefined,
   outerClassName?: string
 }
 
@@ -16,6 +22,7 @@ export const Page = ({
   children,
   header = (<Header/>),
   footer = (<Footer/>),
+  pageTitleAddition,
   className,
   outerClassName,
   ...restProps
@@ -24,6 +31,9 @@ export const Page = ({
     <div {...restProps}
          className={tx('w-screen h-screen relative overflow-x-hidden bg-white', outerClassName)}>
       {header}
+      <Head>
+        <title>{titleWrapper(pageTitleAddition)}</title>
+      </Head>
       <main className={tx('w-full pt-16', className)}>
         {children}
         {footer}

diff --git a/landing-page/components/sections/SectionBase.tsx b/landing-page/components/sections/SectionBase.tsx
@@ -13,15 +13,15 @@ type SectionBaseProps = PropsWithChildren & {
 export const SectionBase = ({
   children,
   useDefaultStyle = true,
-  backgroundColor = 'white',
+  backgroundColor = 'gray',
   outerClassName,
   className,
 }: SectionBaseProps) => {
   return (
     <div className={tx('flex flex-col items-center w-full', {
-      'bg-white': backgroundColor === 'white',
-      'bg-gray-100': backgroundColor === 'gray',
-      'bg-black': backgroundColor === 'black',
+      'bg-hw-grayscale-0': backgroundColor === 'white',
+      'bg-hw-grayscale-50': backgroundColor === 'gray',
+      '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

diff --git a/landing-page/components/sections/landing/Partners.tsx b/landing-page/components/sections/landing/Partners.tsx
@@ -27,6 +27,10 @@ const images: Partner[] = [
     name: 'REACH',
     url: 'https://cdn.helpwave.de/partners/reach.svg'
   },
+  {
+    name: 'RWTH Aachen University',
+    url: 'https://cdn.helpwave.de/partners/rwth_logo.svg',
+  },
   {
     name: 'Digital Hub münsterLAND',
     url: 'https://cdn.helpwave.de/partners/digitalhub_muensterland.png'

diff --git a/landing-page/components/sections/landing/StepsToDigitalizationSection.tsx b/landing-page/components/sections/landing/StepsToDigitalizationSection.tsx
@@ -3,6 +3,7 @@ import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import { Span } from '@helpwave/common/components/Span'
 import { MarkdownInterpreter } from '@helpwave/common/components/MarkdownInterpreter'
+import type { TextImageProps } from '@helpwave/common/components/TextImage'
 import { TextImage } from '@helpwave/common/components/TextImage'
 import { Carousel } from '@helpwave/common/components/layout/Carousel'
 import { useState } from 'react'
@@ -54,43 +55,62 @@ export const StepsToDigitalizationSection = () => {
   const translation = useTranslation(defaultStepsToDigitalizationSectionTranslation)
   const [modalValue, setModalValue] = useState<{titleText: string, description: string}>()
 
+  const items: TextImageProps[] = [
+    {
+      badge: `${translation.step} #1`,
+      title: translation.step1Title,
+      description: translation.step1Description,
+      // make attribution https://www.freepik.com/free-photo/doctors-looking-laptop-while-sitting_5480800.htm#fromView=search&page=1&position=38&uuid=4c39262c-c1b1-4f11-a15e-7446ad1974d3
+      imageUrl: 'https://cdn.helpwave.de/landing_page/doctors_discussing.jpg',
+      color: 'primary',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.step1Title,
+        description: translation.step1Description
+      })
+    },
+    {
+      badge: `${translation.step} #2`,
+      title: translation.step2Title,
+      description: translation.step2Description,
+      // make attribution https://www.freepik.com/free-photo/wide-shot-huge-tree-trunk-near-lake-surrounded-by-trees-blue-sky_7841618.htm#fromView=search&page=1&position=0&uuid=0752105f-3120-4f34-b3b7-48dd4a616223
+      imageUrl: 'https://cdn.helpwave.de/landing_page/lake.jpg',
+      color: 'secondary',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.step2Title,
+        description: translation.step2Description
+      })
+    },
+    {
+      badge: `${translation.step} #3`,
+      title: translation.step3Title,
+      description: translation.step3Description,
+      // make attribution https://www.freepik.com/free-vector/infographic-dashboard-element-set_6209714.htm#fromView=search&page=1&position=45&uuid=12db1ee2-bec5-40ce-a317-5d240ad56f12
+      imageUrl: 'https://cdn.helpwave.de/landing_page/dashboard.jpg',
+      color: 'secondaryDark',
+      onShowMoreClicked: () => setModalValue({
+        titleText: translation.step3Title,
+        description: translation.step3Description
+      })
+    },
+  ]
+
   return (
-    <SectionBase className={tw('flex flex-col gap-y-8 w-full !px-0 !max-w-[1600px]')}>
+    <SectionBase className={tw('flex flex-col gap-y-8 w-full !max-w-[1600px]')} outerClassName={tw('!px-0')}>
       <div className={tw('flex flex-col items-center text-center gap-y-2')}>
         <h2><Span type="title" className={tw('!text-3xl')}><MarkdownInterpreter text={translation.title}/></Span></h2>
         <Span className={tw('font-space font-semibold')}><MarkdownInterpreter text={translation.description}/></Span>
       </div>
-      <Carousel hintNext={true} heights={{ tablet: 300 }}>
-        <TextImage
-          badge={`${translation.step} #1`}
-          title={translation.step1Title}
-          description={translation.step1Description}
-          // TODO make attribution https://www.freepik.com/free-photo/doctors-looking-laptop-while-sitting_5480800.htm#fromView=search&page=1&position=38&uuid=4c39262c-c1b1-4f11-a15e-7446ad1974d3
-          imageUrl="https://cdn.helpwave.de/landing_page/doctors_discussing.jpg"
-          color="primary"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.step1Title, description: translation.step1Description })}
-        />
-        <TextImage
-          badge={`${translation.step} #2`}
-          title={translation.step2Title}
-          description={translation.step2Description}
-          // TODO make attribution https://www.freepik.com/free-photo/wide-shot-huge-tree-trunk-near-lake-surrounded-by-trees-blue-sky_7841618.htm#fromView=search&page=1&position=0&uuid=0752105f-3120-4f34-b3b7-48dd4a616223
-          imageUrl="https://cdn.helpwave.de/landing_page/lake.jpg"
-          color="secondary"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.step2Title, description: translation.step2Description })}
-        />
-        <TextImage
-          badge={`${translation.step} #3`}
-          title={translation.step3Title}
-          description={translation.step3Description}
-          // TODO make attribution https://www.freepik.com/free-vector/infographic-dashboard-element-set_6209714.htm#fromView=search&page=1&position=45&uuid=12db1ee2-bec5-40ce-a317-5d240ad56f12
-          imageUrl="https://cdn.helpwave.de/landing_page/dashboard.jpg"
-          color="secondaryDark"
-          className={tw('h-full overflow-hidden')}
-          onShowMoreClicked={() => setModalValue({ titleText: translation.step3Title, description: translation.step3Description })}
-        />
+      <Carousel
+        hintNext={true}
+        heights={{ tablet: 300 }}
+        onCardClick={index => items[index]!.onShowMoreClicked!()}
+        blurColor="hw-grayscale-50"
+      >
+        {items.map((value, index) => (
+          <div key={index} className={tw('px-[2.5%] h-full')}>
+            <TextImage {...value} className={tw('h-full overflow-hidden')}/>
+          </div>
+        ))}
       </Carousel>
       <Modal
         id="stepsToDigitizationModal"