feat: vision page steps to digitalization slider (#1042)

* feat: update header (#1003) * feat: update header * chore: remove vision nav item and add contact link * feat: add story page header section (#1021) * feat: use sections * chore: remove border and shadow from header (#1032) * fix: hide mobile menu on tablet layout (#1036) * fix: fix overlapping scrollbar and add page template (#1038) * feat: add StepsToDigitalizationSection * fix: fix TextImage story * feat: add vision page partner section (#1033) * feat: update partner section * feat: add scroll to partner section * fix: fix import lint error * fix: fix linting * feat: add market stats section (#1030) * feat: update market stats section * chore: replace icons * feat: add vision section (#1044) * feat: add vision section * chore: translations * chore: remove todo --------- Co-authored-by: Max Schäfer <[email protected]> * chore: add en translation and lorem ipsum for de * feat: update tasks start section (#1022) * feat: update tasks start section * chore: translate en * fix: fix linting * feat: german translation and fix image not showing * chore: import only from one source Co-authored-by: Max Schäfer <[email protected]> --------- Co-authored-by: Max Schäfer <[email protected]> Co-authored-by: Max Schäfer <[email protected]> * feat: tasks product page trusted by section (#1045) * feat: add TrustedBySection * chore: update partners --------- Co-authored-by: Max Schäfer <[email protected]> * feat: add carousel component * feat: add custom Carousel component * feat: add animation to carousel component * feat: fix animation and add fade out * fix: fix overflow * feat: update vision page helpwave tasks (#1043) * feat: add tasksDemoSection * fix: fix image shadow * feat: update translations * feat: update translations and remove obsolete sections * feat: update layout in demo section * feat: add tasks feature sections (#1046) * feat: add feature section * feat: add other features to feature section * feat: update translations * fix: fix layout issues * feat: update translations * feat: make size more adaptive * feat: update images * fix: fix divider constructor * feat: update vision page header section (#1035) * feat: update vision header section * feat: update translations * feat: update image * feat: update image and layout * feat: update story page and add slider * feat: add modal to show cut off text * feat: credits page (#1050) * feat: credits page * chore: add more credits * fix: re-add podcast talks to menu * fix: wrap mediQuu page with Page component * chore: update texts of story page (#1053) * chore: update texts of story page * chore: comment trusted-by section out * fix: fix modal size * feat: limit modal width * feat: limit modal width on mobile * feat: update sliders --------- Co-authored-by: Max Schäfer <[email protected]> Co-authored-by: Max Schäfer <[email protected]>
helpwave · May 31, 2024 · d90f188 · d90f188
1 parent e93ad77
commit d90f188
Show file tree

Hide file tree

Showing 17 changed files with 731 additions and 33 deletions.
diff --git a/landing-page/components/PartnerList.tsx b/landing-page/components/PartnerList.tsx
@@ -32,7 +32,7 @@ export const PartnerList = ({
       >
         <DividerInserter
           className={tw('flex flex-row gap-x-6 items-center')}
-          divider={<VerticalDivider height={120}/>}
+          divider={(index) => (<VerticalDivider key={index} height={120}/>)}
         >
           {partners.map(partner => (
             <Image

diff --git a/landing-page/components/sections/landing/StepsToDigitalizationSection.tsx b/landing-page/components/sections/landing/StepsToDigitalizationSection.tsx
@@ -0,0 +1,110 @@
+import { tw } from '@helpwave/common/twind'
+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 { TextImage } from '@helpwave/common/components/TextImage'
+import { Carousel } from '@helpwave/common/components/layout/Carousel'
+import { useState } from 'react'
+import { Modal } from '@helpwave/common/components/modals/Modal'
+import Scrollbars from 'react-custom-scrollbars-2'
+import { SectionBase } from '@/components/sections/SectionBase'
+
+type StepsToDigitalizationSectionTranslation = {
+  title: string,
+  description: string,
+  step: string,
+  step1Title: string,
+  step1Description: string,
+  step2Title: string,
+  step2Description: string,
+  step3Title: string,
+  step3Description: string
+}
+
+const defaultStepsToDigitalizationSectionTranslation: Record<Languages, StepsToDigitalizationSectionTranslation> = {
+  en: {
+    title: '\\secondary{Digital exelence} in\\newline 3 simple steps',
+    description: 'Our approach is to implement more efficient and fun\\newline processes in a simple yet powerful way.',
+    step: 'Step',
+    step1Title: 'Define the mission',
+    step1Description: 'At helpwave we are committed to driving unprecedented innovation. We believe in improving patient care by developing cutting-edge software in all areas of patient care.',
+    step2Title: 'Apply Open Innovation',
+    step2Description: 'We believe in the open source approach to ensure the highest quality work product. This unique approach allows our dedicated development team to focus on translating your requirements into innovative software features.',
+    step3Title: 'Aim for disruption',
+    step3Description: 'Regulatory burdens and high entry barriers make it difficult for small companies to enter the market, leading to a lack of competition. helpwave is here to change that. We provide a platform that invites everyone to the table, not just only the big players.'
+  },
+  de: {
+    title: '\\secondary{Digitale Exelenz} in\\newline 3 Schritten',
+    description: 'Unser Ansatz ist es, effizientere Prozesse zu implementieren, die Spaß machen\\newline - und das auf einfache, aber wirkungsvolle Weise.',
+    step: 'Step',
+    step1Title: 'Definieren Sie die Mission', // TODO update
+    step1Description: 'Bei helpwave haben wir uns verpflichtet, beispiellose Innovationen voranzutreiben. Wir glauben an die Verbesserung der Patientenversorgung durch die Entwicklung innovativer Software in allen Bereichen der Patientenversorgung.',
+    step2Title: 'Offene Innovation anwenden',
+    step2Description: 'Wir glauben an den Open-Source-Ansatz, um die höchste Qualität des Arbeitsprodukts zu gewährleisten. Dieser einzigartige Ansatz ermöglicht es unserem engagierten Entwicklungsteam, sich auf die Umsetzung der Nutzer-Anforderungen in innovative Softwarefunktionen zu konzentrieren.',
+    step3Title: 'Disruption anstreben',
+    step3Description: 'Regulatorische Belastungen und hohe Eintrittsbarrieren erschweren den Markteintritt für kleine Unternehmen und führen zu mangelndem Wettbewerb. helpwave wird das ändern. Wir bieten eine Plattform, die jeden an den Tisch holt, nicht nur die großen Player.'
+  }
+}
+
+/**
+ * A Section for showing steps need for Digitalization
+ */
+export const StepsToDigitalizationSection = () => {
+  const translation = useTranslation(defaultStepsToDigitalizationSectionTranslation)
+  const [modalValue, setModalValue] = useState<{titleText: string, description: string}>()
+
+  return (
+    <SectionBase className={tw('flex flex-col gap-y-8 w-full !px-0 !max-w-[1600px]')}>
+      <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>
+      <Modal
+        id="stepsToDigitizationModal"
+        isOpen={modalValue !== undefined}
+        titleText={modalValue?.titleText}
+        description={(
+          <Scrollbars autoHeightMax={500} autoHeight={true}>
+            {modalValue?.description}
+          </Scrollbars>
+        )}
+        onBackgroundClick={() => setModalValue(undefined)}
+        onCloseClick={() => setModalValue(undefined)}
+        modalClassName={tw('max-w-[600px] mobile:max-w-[90%] w-full')}
+      />
+    </SectionBase>
+  )
+}
diff --git a/landing-page/components/sections/landing/StoriesSliderSection.tsx b/landing-page/components/sections/landing/StoriesSliderSection.tsx
@@ -0,0 +1,104 @@
+import { tw } from '@helpwave/common/twind'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import { TextImage } from '@helpwave/common/components/TextImage'
+import { Carousel } from '@helpwave/common/components/layout/Carousel'
+import { useState } from 'react'
+import { Modal } from '@helpwave/common/components/modals/Modal'
+import Scrollbars from 'react-custom-scrollbars-2'
+import { SectionBase } from '@/components/sections/SectionBase'
+
+type StorySliderSectionTranslation = {
+  chip1: string,
+  chip2: string,
+  chip3: string,
+  title1: string,
+  title2: string,
+  title3: string,
+  description1: string,
+  description2: string,
+  description3: string
+}
+
+const defaultStorySliderSectionTranslation: Record<Languages, StorySliderSectionTranslation> = {
+  en: {
+    chip1: 'Our Approach',
+    chip2: 'Collaborative',
+    chip3: 'Goal',
+    title1: 'Identifying the problem',
+    title2: 'helpwave tasks and the Open Innovation Concept',
+    title3: 'The Future of helpwave',
+    description1: 'helpwave was born out of a simple question: How can we leverage our software expertise to support healthcare professionals? We have all encountered outdated, clunky software in our daily work, and have observed its impact on patient care and our own lives. Despite significant investments, current solutions often fall short. This is where helpwave steps in. We are committed to providing healthcare heroes with efficient, affordable tools, empowering hospitals to regain control over their infrastructure and data. By providing seamless access to vital information, we aim to enhance patient care and ease the burden on healthcare workers.',
+    description2: 'helpwave is passionate about supporting those who dedicate their lives to patient care. We have developed helpwave tasks, a tool designed to simplify the lives of healthcare workers, integrating lean project management principles into healthcare teams. We collaborate closely with doctors, nurses, students, and administrators to enhance team organization, communication, and task management. At helpwave, we champion Open Innovation and Open Source principles, ensuring that our software is not only user-friendly but also community-driven and transparent. Join us in revolutionizing healthcare software, designed by healthcare workers, for healthcare workers.',
+    description3: 'Drawing from our experience developing helpwave tasks, we have identified a critical issue in the healthcare software landscape: Deployment is a nightmare. Hospital IT infrastructure is often unreliable, outdated, and insecure, burdened by interoperability gaps and regulatory hurdles that favor large players. Enter helpwave: We are developing a platform to streamline software deployment in healthcare, empowering hospitals with control over their infrastructure and data. Our innovative technology is not just laying the groundwork for healthcare digitization, it is also democratizing market entry for new players, embodying the essence of Open Innovation. Join us at the table to revolutionize healthcare together.'
+  },
+  de: {
+    chip1: 'Unser Ansatz',
+    chip2: 'Zusammenarbeit',
+    chip3: 'Ziel',
+    title1: 'Erkennen des Problems',
+    title2: 'helpwave tasks und das Open-Innovation-Konzept',
+    title3: 'Die Zukunft von helpwave',
+    description1: 'helpwave wurde aus einer einfachen Frage heraus geboren: Wie können wir unser Software-Know-how nutzen, um Fachkräfte im Gesundheitswesen zu unterstützen? Wir alle sind bei unserer täglichen Arbeit mit veralteter, klobiger Software konfrontiert und haben deren Auswirkungen auf die Patientenversorgung und unser eigenes Leben beobachtet. Trotz erheblicher Investitionen sind die derzeitigen Lösungen oft unzureichend. An dieser Stelle kommt helpwave ins Spiel. Wir haben es uns zur Aufgabe gemacht, die Helden des Gesundheitswesens mit effizienten, erschwinglichen Tools auszustatten, die es den Krankenhäusern ermöglichen, die Kontrolle über ihre Infrastruktur und Daten zurückzugewinnen. Durch die Bereitstellung eines nahtlosen Zugriffs auf wichtige Informationen wollen wir die Patientenversorgung verbessern und die Mitarbeiter im Gesundheitswesen entlasten.',
+    description2: 'helpwave hat es sich zur Aufgabe gemacht, diejenigen zu unterstützen, die ihr Leben der Patientenversorgung widmen. Wir haben helpwave tasks entwickelt, ein Tool, das das Leben der Mitarbeiter im Gesundheitswesen vereinfachen soll, indem es die Prinzipien des schlanken Projektmanagements in Teams im Gesundheitswesen integriert. Wir arbeiten eng mit Ärzten, Krankenschwestern, Studenten und Verwaltungsangestellten zusammen, um die Teamorganisation, die Kommunikation und das Aufgabenmanagement zu verbessern. Bei helpwave setzen wir uns für Open-Innovation- und Open-Source-Prinzipien ein, um sicherzustellen, dass unsere Software nicht nur benutzerfreundlich, sondern auch Community-gesteuert und transparent ist. Helfen Sie uns dabei, Software für das Gesundheitswesen zu revolutionieren - entwickelt von Mitarbeitern im Gesundheitswesen für Mitarbeiter im Gesundheitswesen.',
+    description3: 'Ausgehend von unserer Erfahrung bei der Entwicklung von helpwave tasks haben wir ein kritisches Problem in der Softwarelandschaft des Gesundheitswesens erkannt: Die Bereitstellung ist ein Albtraum. Die IT-Infrastruktur in Krankenhäusern ist oft unzuverlässig, veraltet und unsicher, belastet durch Interoperabilitätslücken und regulatorische Hürden, wodurch große Anbieter bevorzugt werden. Hier kommt helpwave ins Spiel: Wir entwickeln eine Plattform zur Straffung der Softwarebereitstellung im Gesundheitswesen, die den Krankenhäusern die Kontrolle über ihre Infrastruktur und Daten gibt. Unsere innovative Technologie legt nicht nur den Grundstein für die Digitalisierung des Gesundheitswesens, sondern demokratisiert auch den Markteintritt neuer Akteure und verkörpert damit die Essenz der Open-Innovation. Setzen Sie sich mit uns an einen Tisch, um das Gesundheitswesen gemeinsam zu revolutionieren.',
+  }
+}
+
+/**
+ * A Section for showing a slider on the story page
+ */
+export const StorySliderSection = () => {
+  const translation = useTranslation(defaultStorySliderSectionTranslation)
+  const [modalValue, setModalValue] = useState<{titleText: string, description: string}>()
+
+  return (
+    <SectionBase className={tw('flex flex-col gap-y-8 w-full !px-0 !max-w-[1600px]')}>
+      <Carousel hintNext={true}>
+        <TextImage
+          badge={translation.chip1}
+          title={translation.title1}
+          description={translation.description1}
+          // 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.title1, description: translation.description1 })}
+        />
+        <TextImage
+          badge={translation.chip2}
+          title={translation.title2}
+          description={translation.description2}
+          // 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.title2, description: translation.description2 })}
+        />
+        <TextImage
+          badge={translation.chip3}
+          title={translation.title3}
+          description={translation.description3}
+          // 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.title3, description: translation.description3 })}
+        />
+      </Carousel>
+      <Modal
+        id="storiesSliderModal"
+        isOpen={modalValue !== undefined}
+        titleText={modalValue?.titleText}
+        description={(
+          <Scrollbars autoHeightMax={500} autoHeight={true}>
+            {modalValue?.description}
+          </Scrollbars>
+        )}
+        onBackgroundClick={() => setModalValue(undefined)}
+        onCloseClick={() => setModalValue(undefined)}
+        modalClassName={tw('max-w-[600px] mobile:max-w-[90%] w-full')}
+      />
+    </SectionBase>
+  )
+}
diff --git a/landing-page/components/sections/story/StoryInUseAtSection.tsx b/landing-page/components/sections/story/StoryInUseAtSection.tsx
@@ -0,0 +1,51 @@
+import { tw } from '@helpwave/common/twind'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import Image from 'next/image'
+import { Span } from '@helpwave/common/components/Span'
+import { SectionBase } from '@/components/sections/SectionBase'
+import type { Partner } from '@/components/PartnerList'
+
+type StoryInUseAtSectionTranslation = {
+  title: string
+}
+
+const defaultStoryInUseAtSectionTranslation: Record<Languages, StoryInUseAtSectionTranslation> = {
+  en: {
+    title: 'In use at'
+  },
+  de: {
+    title: 'Benutzt von'
+  }
+}
+
+const images: Partner[] = [
+  {
+    name: 'UKM',
+    url: 'https://cdn.helpwave.de/partners/ukm.png'
+  },
+]
+
+const StoryInUseAtSection = () => {
+  const translation = useTranslation(defaultStoryInUseAtSectionTranslation)
+
+  return (
+    <SectionBase className={tw('flex flex-col gap-16 select-none justify-center items-center w-full')}>
+      <Span type="title" className={tw('!text-3xl')}>{translation.title}</Span>
+      <div className={tw('flex flex-row justify-center')}>
+        {images.map(partner => (
+          <Image
+            key={partner.name}
+            width={0}
+            height={0}
+            src={partner.url}
+            alt={partner.name}
+            className={tw('w-auto max-h-[120px]')}
+          />
+        ))}
+      </div>
+    </SectionBase>
+  )
+}
+
+export default StoryInUseAtSection