feat: landing-page v2 (#1027)

landing-page/components/Footer.tsx

@@ -60,6 +60,7 @@ const linkGroups: Record<Categories, LinkType[]> = {
     { name: 'Onepager', link: 'https://cdn.helpwave.de/helpwave_onepager.pdf' },
     { name: 'LOI', link: 'https://cdn.helpwave.de/helpwave_letter_of_intent.pdf' },
     { name: 'Tech-Radar', link: '/tech-radar', openInCurrentTab: true },
+    { name: 'Credits', link: '/credits', openInCurrentTab: true },
   ],
   products: [
     { name: 'tasks', link: '/product/tasks' },

landing-page/components/Header.tsx

@@ -7,10 +7,12 @@ import Link from 'next/link'
 import { Menu, MenuItem } from '@helpwave/common/components/user-input/Menu'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
+import { MarkdownInterpreter } from '@helpwave/common/components/MarkdownInterpreter'
+import { Chip } from '@helpwave/common/components/ChipList'
 
 const homeURL = '/'
 
-const linkNames = ['products', 'story', 'team', 'talks', 'contact', 'tasks'] as const
+const linkNames = ['products', 'story', 'team', 'talks', 'tasks'] as const
 type LinkNames = typeof linkNames[number]
 
 type LinkType = {
@@ -37,54 +39,55 @@ const items: SubLinkType[] = [
     name: 'story',
     url: '/story'
   },
-  {
-    name: 'team',
-    url: '/team'
-  },
   {
     name: 'talks',
     url: '/talks'
   },
   {
-    name: 'contact',
-    url: 'mailto:[email protected]'
+    name: 'team',
+    url: '/team'
   },
 ]
 
-type HeaderTranslation = {[key in LinkNames]: string}
+type HeaderTranslation = {
+  contact: string
+} & { [key in LinkNames]: string }
 
 const defaultHeaderTranslation: Record<Languages, HeaderTranslation> = {
   en: {
-    products: 'products',
-    story: 'story',
-    team: 'team',
-    talks: 'talks',
-    contact: 'contact',
-    tasks: 'tasks'
+    products: 'Products',
+    story: 'Story',
+    team: 'Team',
+    contact: 'Contact us',
+    tasks: 'tasks',
+    talks: 'Podcast',
   },
   de: {
     products: 'Produkte',
     story: 'Geschichte',
     team: 'Team',
-    talks: 'Talks',
     contact: 'Kontakt',
-    tasks: 'tasks'
+    tasks: 'tasks',
+    talks: 'Podcast',
   }
 }
 
 const Header = () => {
   const [navbarOpen, setNavbarOpen] = useState(false)
   const translation = useTranslation(defaultHeaderTranslation, {})
 
+  const navigationItemStyle = tw('!font-bold font-space')
+
   return (
-    <div>
-      <div className={tw('w-screen z-[50] fixed shadow-sm top-0 border bg-white')}>
-        <nav className={tw('flex mobile:p-2 desktop:max-w-[1000px] items-center justify-between mx-auto')}>
-          <Link href={homeURL}>
+    <>
+      <div className={tw('absolute top-0 w-screen z-[50] bg-white')}>
+        <nav className={tw('flex mobile:px-4 tablet:px-8 desktop:px-16 items-center justify-between mobile:mx-auto w-full')}>
+          <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,
@@ -93,7 +96,7 @@ const Header = () => {
                 <div key={name}>
                   {subpage === undefined ? (
                     <Link href={url}>
-                      <Span type="navigationItem">
+                      <Span className={navigationItemStyle}>
                         {translation[name]}
                       </Span>
                     </Link>
@@ -102,7 +105,7 @@ const Header = () => {
                       alignment="tl"
                       trigger={(onClick, ref) => (
                         <div ref={ref} onClick={onClick} className={tw('cursor-pointer select-none')}>
-                          <Span type="navigationItem">
+                          <Span className={navigationItemStyle}>
                             {translation[name]}
                           </Span>
                         </div>
@@ -116,7 +119,7 @@ const Header = () => {
                         (
                           <Link key={subPageName} className={tw('cursor-pointer')} href={url + subPageUrl}>
                             <MenuItem alignment="left">
-                              <Span type="navigationItem">
+                              <Span className={navigationItemStyle}>
                                 {subPageName}
                               </Span>
                             </MenuItem>
@@ -126,22 +129,26 @@ const Header = () => {
                   )}
                 </div>
               ))}
+              <Link href="mailto:[email protected]">
+                <Chip
+                  variant="fullyRounded"
+                  color="black"
+                  className={tw('!py-2 !px-4 shadow-sm cursor-pointer')}
+                >
+                  {translation.contact}
+                </Chip>
+              </Link>
             </div>
           </div>
-
-          <div className={tw('w-full tablet:hidden desktop:hidden flex justify-between mx-2')}>
-            <Link href={homeURL}><span
-              className={tw('text-center text-2xl font-bold font-space')}>helpwave</span></Link>
-            <button onClick={() => setNavbarOpen(true)} className={tw('tablet:hidden desktop:hidden content-end')}
-                    aria-controls="navbar" aria-expanded="false">
-              <MenuIcon size={32}/>
-            </button>
-          </div>
+          <button onClick={() => setNavbarOpen(true)} className={tw('desktop:hidden tablet:hidden content-end')}
+                  aria-controls="navbar" aria-expanded="false">
+            <MenuIcon size={32}/>
+          </button>
         </nav>
       </div>
 
       {navbarOpen && (
-        <div className={tw('fixed w-screen h-screen z-[100] bg-white')}>
+        <div className={tw('absolute w-screen h-screen z-[100] bg-white')}>
           <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}/>
@@ -196,7 +203,7 @@ const Header = () => {
           </div>
         </div>
       )}
-    </div>
+    </>
   )
 }
 

landing-page/components/Page.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { tx } from '@twind/core'
+import Header from '@/components/Header'
+import Footer from '@/components/Footer'
+
+export type PageProps = HTMLAttributes<HTMLDivElement> & {
+  header?: ReactNode,
+  footer?: ReactNode,
+  outerClassName?: string
+}
+
+/**
+ * The template for any page component
+ */
+export const Page = ({
+  children,
+  header = (<Header/>),
+  footer = (<Footer/>),
+  className,
+  outerClassName,
+  ...restProps
+}: PageProps) => {
+  return (
+    <div {...restProps}
+         className={tx('w-screen h-screen relative overflow-x-hidden bg-white', outerClassName)}>
+      {header}
+      <main className={tx('w-full pt-16', className)}>
+        {children}
+        {footer}
+      </main>
+    </div>
+  )
+}

landing-page/components/PartnerList.tsx

@@ -0,0 +1,51 @@
+import { tw } from '@twind/core'
+import Image from 'next/image'
+import { VerticalDivider } from '@helpwave/common/components/VerticalDivider'
+import { Span } from '@helpwave/common/components/Span'
+import Scrollbars from 'react-custom-scrollbars-2'
+import { DividerInserter } from '@helpwave/common/components/layout/DividerInserter'
+
+export type Partner = {
+  name: string,
+  url: string
+}
+
+export type PartnerListProps = {
+  title: string,
+  partners: Partner[]
+}
+
+/**
+ * A List for showing different partners
+ */
+export const PartnerList = ({
+  title,
+  partners
+}: PartnerListProps) => {
+  return (
+    <div className={tw('flex flex-col gap-y-4 items-center w-full')}>
+      <Span type="title" className={tw('!text-2xl')}>{title}</Span>
+      <Scrollbars
+        autoHeight={true}
+        autoHeightMax={120}
+        universal={true}
+      >
+        <DividerInserter
+          className={tw('flex flex-row gap-x-6 items-center')}
+          divider={<VerticalDivider height={120}/>}
+        >
+          {partners.map(partner => (
+            <Image
+              key={partner.name}
+              width={0}
+              height={0}
+              src={partner.url}
+              alt={partner.name}
+              className={tw('w-auto max-h-[60px]')}
+            />
+          ))}
+        </DividerInserter>
+      </Scrollbars>
+    </div>
+  )
+}

landing-page/components/TasksAppStoreBadge.tsx

@@ -0,0 +1,39 @@
+import { useLanguage } from '@helpwave/common/hooks/useLanguage'
+import Image from 'next/image'
+import Link from 'next/link'
+import { tw } from '@twind/core'
+
+/**
+ * WHEN USING MAKE THE NECESSARY ATTRIBUTION TO APPLE
+ *
+ * https://developer.apple.com/app-store/marketing/guidelines/
+ *
+ * Margin of 10% of element to all sides (8px)
+ * Min height of 40px must be kepts
+ */
+export const TasksAppStoreBadge = () => {
+  const { language } = useLanguage()
+  const linkURL = {
+    de: 'https://apps.apple.com/de/app/helpwave-tasks/id6472594365?itsct=apps_box_badge&itscg=30200',
+    en: 'https://apps.apple.com/en/app/helpwave-tasks/id6472594365?itsct=apps_box_badge&itscg=30200'
+  }[language]
+
+  const alt = {
+    de: 'Jetzt bei Google Play',
+    en: 'Download on the App Store'
+  }[language]
+
+  const imageURL = {
+    de: 'https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/de-de?size=250x83&releaseDate=1702857600',
+    en: 'https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1702857600'
+  }[language]
+
+  return (
+    <Link href={linkURL}>
+      <Image
+        alt={alt} src={imageURL} height={0} width={156}
+        className={tw('w-full !h-[54px]')}
+      />
+    </Link>
+  )
+}

landing-page/components/TasksPlaystoreBadge.tsx

@@ -0,0 +1,34 @@
+import { useLanguage } from '@helpwave/common/hooks/useLanguage'
+import Image from 'next/image'
+import Link from 'next/link'
+import { tw } from '@twind/core'
+
+/**
+ * WHEN USING MAKE THE NECESSARY ATTRIBUTION TO GOOGLE
+ *
+ * https://play.google.com/intl/en_us/badges/
+ *
+ */
+export const TasksPlaystoreBadge = () => {
+  const { language } = useLanguage()
+  const linkURL = {
+    de: 'https://play.google.com/store/apps/details?id=de.helpwave.tasks&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1',
+    en: 'https://play.google.com/store/apps/details?id=de.helpwave.tasks&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'
+  }[language]
+
+  const alt = {
+    de: 'Jetzt bei Google Play',
+    en: 'Get it on Google Play'
+  }[language]
+
+  const imageURL = {
+    de: '/images/google_play_badge_german.png',
+    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>
+  )
+}

landing-page/components/sections/SectionBase.tsx

@@ -4,17 +4,17 @@ import { tx } from '@twind/core'
 type BackgroundColor = 'white' | 'black' | 'gray' | 'darkSecondary' | 'darkPrimary'
 
 type SectionBaseProps = PropsWithChildren & {
-  isFirstSection?: boolean,
   useDefaultStyle?: boolean,
   backgroundColor?: BackgroundColor,
+  outerClassName?: string,
   className?: string
 }
 
 export const SectionBase = ({
   children,
-  isFirstSection = false,
   useDefaultStyle = true,
   backgroundColor = 'white',
+  outerClassName,
   className,
 }: SectionBaseProps) => {
   return (
@@ -24,13 +24,12 @@ export const SectionBase = ({
       'bg-black': backgroundColor === 'black',
       'bg-hw-secondary-800': backgroundColor === 'darkSecondary',
       'bg-hw-primary-900': backgroundColor === 'darkPrimary'
-    })}>
+    }, outerClassName)}>
       <div
         className={tx(
           className,
           {
             'max-w-[1200px] desktop:px-24 tablet:px-12 mobile:px-6 py-16': useDefaultStyle,
-            'pt-32': useDefaultStyle && isFirstSection
           }
         )}
       >