feat: add adaptive titles for landing page (#1089)

helpwave · Sep 5, 2024 · fcb990f · fcb990f
1 parent 1fd7148
commit fcb990f
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 14 deletions.
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/pages/404.tsx b/landing-page/pages/404.tsx
@@ -38,7 +38,7 @@ const defaultNotFoundTranslation: Record<Languages, NotFoundTranslation> = {
 const NotFound: NextPage = () => {
   const translation = useTranslation(defaultNotFoundTranslation)
   return (
-    <Page className={tw('h-screen')}>
+    <Page className={tw('h-screen')} pageTitleAddition={translation.notFound}>
       <SectionBase className={tw('flex flex-col h-full items-center justify-center text-center')} outerClassName={tw('h-full')}>
         <Helpwave className={tw('w-full left-1/2')} size={256} animate="bounce"/>
         <h1 className={tw('text-9xl mobile:text-6xl font-space mb-8')}>{`404 ${translation.notFound}`}</h1>

diff --git a/landing-page/pages/credits/index.tsx b/landing-page/pages/credits/index.tsx
@@ -82,7 +82,7 @@ const CreditsPage: NextPage = ({ overwriteTranslation }: PropsForTranslation<Cre
   const imageUrl = 'https://cdn.helpwave.de/landing_page/credits.jpg'
 
   return (
-    <Page>
+    <Page pageTitleAddition={translation.title}>
       <SectionBase
         className={tw('flex flex-row mobile:!flex-wrap-reverse w-full gap-x-16 gap-y-8 justify-between mobile:justify-center items-center')}
       >

diff --git a/landing-page/pages/index.tsx b/landing-page/pages/index.tsx
@@ -1,5 +1,8 @@
 import { tw } from '@helpwave/common/twind'
 import type { NextPage } from 'next'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import type { PropsForTranslation } from '@helpwave/common/hooks/useTranslation'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import MarketStatsSection from '../components/sections/landing/MarketStatsSection'
 import PartnerSection from '../components/sections/landing/Partners'
 import StartSection from '../components/sections/landing/StartSection'
@@ -8,9 +11,23 @@ import VisionSection from '@/components/sections/landing/VisionSection'
 import { TasksDemoSection } from '@/components/sections/landing/TasksDemoSection'
 import { StepsToDigitalizationSection } from '@/components/sections/landing/StepsToDigitalizationSection'
 
-const Home: NextPage = () => {
+type HomeTranslation = {
+  home: string
+}
+
+const defaultHomeTranslation: Record<Languages, HomeTranslation> = {
+  en: {
+    home: 'Home',
+  },
+  de: {
+    home: 'Home',
+  }
+}
+
+const Home: NextPage = ({ overwriteTranslation }: PropsForTranslation<HomeTranslation>) => {
+  const translation = useTranslation(defaultHomeTranslation, overwriteTranslation)
   return (
-    <Page outerClassName={tw('z-0')} className={tw('z-0')}>
+    <Page outerClassName={tw('z-0')} className={tw('z-0')} pageTitleAddition={translation.home}>
       <StartSection/>
       <PartnerSection/>
       <VisionSection/>

diff --git a/landing-page/pages/join/index.tsx b/landing-page/pages/join/index.tsx
@@ -3,6 +3,8 @@ import type { NextPage } from 'next'
 import { RadialRings } from '@helpwave/common/components/Ring'
 import { useEffect, useState } from 'react'
 import { Span } from '@helpwave/common/components/Span'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import type { NewsLetterFormType } from '@/components/NewsLetterForm'
 import { NewsLetterForm } from '@/components/NewsLetterForm'
 import { submitHubSpotForm } from '@/utils/hubspot'
@@ -39,7 +41,21 @@ const submitNewsLetterForm = (form: NewsLetterFormType) => submitHubSpotForm(
   ]
 )
 
+type NewsLetterTranslation = {
+  title: string
+}
+
+const defaultNewsLetterTranslation: Record<Languages, NewsLetterTranslation> = {
+  en: {
+    title: 'Join Newsletter',
+  },
+  de: {
+    title: 'Newsletter anmelden',
+  }
+}
+
 const NewsLetter: NextPage = () => {
+  const translation = useTranslation(defaultNewsLetterTranslation)
   const [{ width, height }, setSize] = useState<{width: number, height: number}>({ width: 0, height: 0 })
 
   useEffect(() => {
@@ -64,7 +80,7 @@ const NewsLetter: NextPage = () => {
   const waveWidth = (sizeCircle2 - sizeCircle1) / 20
 
   return (
-    <Page className={tw('w-screen h-screen relative z-0')}>
+    <Page className={tw('w-screen h-screen relative z-0')} pageTitleAddition={translation.title}>
       <div className={tw('h-screen z-[1]')}>
         <div className={tw('relative h-full overflow-hidden')}>
           <div className={tw(`absolute left-0 top-1/2 z-[-1] -translate-x-1/2 -translate-y-1/2`)}>

diff --git a/landing-page/pages/mediquu/index.tsx b/landing-page/pages/mediquu/index.tsx
@@ -10,7 +10,7 @@ import { Page } from '@/components/Page'
 
 const MediQuuPage: NextPage = () => {
   return (
-    <Page>
+    <Page pageTitleAddition="MediQuu">
       <MediQuuHeaderSection/>
       <MediQuuInformationSection/>
       <BrandDescriptionsSection/>

diff --git a/landing-page/pages/product/analytics/index.tsx b/landing-page/pages/product/analytics/index.tsx
@@ -4,7 +4,7 @@ import { Page } from '@/components/Page'
 
 const Analytics: NextPage = () => {
   return (
-    <Page>
+    <Page pageTitleAddition="Analytics">
       <div className={tw('pt-32 pb-16')}>
         <div className={tw('desktop:w-5/12 desktop:mx-auto mobile:mx-8 relative z-[1]')}>
           <h1 className={tw('font-space text-6xl font-bold')}>

diff --git a/landing-page/pages/product/cloud/index.tsx b/landing-page/pages/product/cloud/index.tsx
@@ -4,7 +4,7 @@ import { Page } from '@/components/Page'
 
 const Cloud: NextPage = () => {
   return (
-    <Page>
+    <Page pageTitleAddition="Cloud">
       <div className={tw('pt-32 pb-16')}>
         <div className={tw('desktop:w-5/12 desktop:mx-auto mobile:mx-8 relative z-[1]')}>
           <h1 className={tw('font-space text-6xl font-bold')}>

diff --git a/landing-page/pages/product/impulse/index.tsx b/landing-page/pages/product/impulse/index.tsx
@@ -4,7 +4,7 @@ import { Page } from '@/components/Page'
 
 const Impulse: NextPage = () => {
   return (
-    <Page>
+    <Page pageTitleAddition="Impulse">
       <div className={tw('pt-32 pb-16')}>
         <div className={tw('desktop:w-5/12 desktop:mx-auto mobile:mx-8 relative z-[1]')}>
           <h1 className={tw('font-space text-6xl font-bold')}>

diff --git a/landing-page/pages/product/tasks/index.tsx b/landing-page/pages/product/tasks/index.tsx
@@ -12,7 +12,7 @@ import { PropertiesSection } from '@/components/sections/tasks/PropertiesSection
 
 const Tasks: NextPage = () => {
   return (
-    <Page>
+    <Page pageTitleAddition="Tasks">
       <StartSection/>
       {/*
         Waiting for approval of UKM

diff --git a/landing-page/pages/story/index.tsx b/landing-page/pages/story/index.tsx
@@ -1,11 +1,27 @@
 import type { NextPage } from 'next'
+import type { Languages } from '@helpwave/common/hooks/useLanguage'
+import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import StoryHeader from '@/components/sections/story/StoryHeader'
 import { Page } from '@/components/Page'
 import { StorySliderSection } from '@/components/sections/landing/StoriesSliderSection'
 
+type StoryTranslation = {
+  title: string
+}
+
+const defaultStoryTranslation: Record<Languages, StoryTranslation> = {
+  en: {
+    title: 'Story',
+  },
+  de: {
+    title: 'Story',
+  }
+}
+
 const Story: NextPage = () => {
+  const translation = useTranslation(defaultStoryTranslation)
   return (
-    <Page>
+    <Page pageTitleAddition={translation.title}>
       <StoryHeader/>
       <StorySliderSection/>
     </Page>

diff --git a/landing-page/pages/talks/index.tsx b/landing-page/pages/talks/index.tsx
@@ -5,7 +5,7 @@ import { Page } from '@/components/Page'
 
 const Talks: NextPage = () => {
   return (
-    <Page>
+    <Page pageTitleAddition="Talks">
       <StartSection/>
       <EpisodeSection/>
     </Page>

diff --git a/landing-page/pages/team/index.tsx b/landing-page/pages/team/index.tsx
@@ -4,7 +4,7 @@ import { Page } from '@/components/Page'
 
 const Team: NextPage = () => {
   return (
-    <Page>
+    <Page pageTitleAddition="Team">
       <TeamSection/>
     </Page>
   )

diff --git a/landing-page/pages/tech-radar/index.tsx b/landing-page/pages/tech-radar/index.tsx
@@ -5,7 +5,7 @@ import { Page } from '@/components/Page'
 
 const TechRadar: NextPage = () => {
   return (
-    <Page>
+    <Page pageTitleAddition="Tech Radar">
       <div className={tw('mt-16 flex items-center justify-center')}>
         <TechRadarComponent/>
       </div>

diff --git a/landing-page/utils/titleWrapper.ts b/landing-page/utils/titleWrapper.ts
@@ -0,0 +1,5 @@
+const defaultTitle = 'helpwave'
+
+const titleWrapper = (title?: string) => title ? `${title} ~ ${defaultTitle}` : defaultTitle
+
+export default titleWrapper