chore: initialize repository

Author: DasProffi

.github/workflows/linting.yaml

@@ -0,0 +1,19 @@
+name: Linting
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run build

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# IDEs
+.idea
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,16 @@
+# helpwave landing page
+This repository represents the helpwave home page hosted [here](https://helpwave.de).
+
+## Installation and development
+
+```bash
+npm ci
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+#### Linting
+```bash
+npm run lint
+```

components/Divider.tsx

@@ -0,0 +1,12 @@
+export type DividerProps = {
+  rotate?: number,
+}
+
+export const Divider = ({ rotate = 0 }: DividerProps) => (
+  <div
+    className="w-full border border-dashed border-spacing-20"
+    style={{ transform: `rotate(${rotate}deg)` }}
+  />
+)
+
+export default Divider

components/Footer.tsx

@@ -0,0 +1,136 @@
+import { useEffect } from 'react'
+import { useTranslation } from '@helpwave/hightide'
+import * as CookieConsent from 'vanilla-cookieconsent'
+import { Helpwave } from '@helpwave/hightide'
+import type { Languages } from '@helpwave/hightide'
+import { useLanguage } from '@helpwave/hightide'
+import { Select } from '@helpwave/hightide'
+import pluginConfig from '../utils/CookieConsentConfig'
+import FooterLinkGroup from './FooterLinkGroup'
+import 'vanilla-cookieconsent/dist/cookieconsent.css'
+import type { ThemeType, ThemeTypeTranslation } from '@helpwave/hightide'
+import { defaultThemeTypeTranslation } from '@helpwave/hightide'
+import { useTheme } from '@helpwave/hightide'
+
+type Categories = 'socials' | 'general' | 'products' | 'development'
+type FooterTranslation = { [key in Categories]: string } & ThemeTypeTranslation
+
+const defaultFooterTranslation: Record<Languages, FooterTranslation> = {
+  en: {
+    socials: 'socials',
+    general: 'general',
+    products: 'products',
+    development: 'development',
+    ...defaultThemeTypeTranslation.en,
+  },
+  de: {
+    socials: 'social',
+    general: 'allgemein',
+    products: 'produkte',
+    development: 'entwicklung',
+    ...defaultThemeTypeTranslation.de,
+  }
+}
+
+type LinkType = { name: string, link: string, openInCurrentTab?: boolean, onClick?: () => void }
+const linkGroups: Record<Categories, LinkType[]> = {
+  socials: [
+    { name: 'GitHub', link: 'https://github.com/helpwave/' },
+    { name: 'LinkedIn', link: 'https://linkedin.com/company/helpwave/' },
+    { name: 'Instagram', link: 'https://instagram.com/helpwave_de/' },
+    { name: 'Twitter', link: 'https://twitter.com/helpwave_org' },
+    { name: 'YouTube', link: 'https://www.youtube.com/@helpwave' },
+    { name: 'Twitch', link: 'https://www.twitch.tv/helpwave' },
+    { name: 'Spotify', link: 'https://open.spotify.com/show/6hL5UMytp81gmURnfn3dS9' },
+    { name: 'Apple Podcasts', link: 'https://podcasts.apple.com/us/podcast/helpwave-talks/id1695217116' },
+    { name: 'Google Podcasts', link: 'https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy9lNTE1NWZhMC9wb2RjYXN0L3Jzcw' },
+    { name: 'Slack', link: 'https://helpwave.slack.com' },
+  ],
+  development: [
+    { name: 'Status', link: 'https://helpwave.betteruptime.com/' },
+    { 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: 'helpwave tasks', link: 'https://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() },
+    { name: 'Contact', link: 'mailto:[email protected]' },
+    { name: 'Pitchdeck', link: 'https://cdn.helpwave.de/helpwave_pitchdeck.pdf' },
+    { 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: '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' },
+      { name: 'analytics', link: '/product/analytics' },
+      { name: 'core', link: '/product/core' }, */
+  ]
+}
+
+const grouping: (Categories[])[] = [
+  ['socials'],
+  ['general', 'products'],
+  ['development']
+]
+
+const Footer = () => {
+  const year = new Date().getFullYear()
+  const { language, setLanguage } = useLanguage()
+  const { theme, setTheme } = useTheme()
+  const translation = useTranslation(defaultFooterTranslation, {})
+
+  useEffect(() => {
+    CookieConsent.run(pluginConfig)
+  }, [])
+
+  return (
+    <div className="w-screen bg-black text-white py-8 col items-center justify-center">
+      <div className="flex flex-wrap w-full max-w-[900px] max-tablet:px-6 tablet:px-24 desktop:px-24 mx-auto justify-between">
+        {grouping.map((groups, index) => (
+          <div key={index} className="col max-tablet:w-full w-[192px] max-tablet:text-center max-tablet:items-center">
+            {groups.map((category) => (
+              <FooterLinkGroup key={category} title={translation[category]} links={linkGroups[category]} />
+            ))}
+            {index === 2 && (
+              <>
+                <Select<Languages>
+                  value={language}
+                  onChange={(language) => setLanguage(language)}
+                  options={[
+                    { value: 'de', label: 'Deutsch' },
+                    { value: 'en', label: 'English' }
+                  ]}>
+                </Select>
+                <Select<ThemeType>
+                  value={theme}
+                  onChange={(theme) => setTheme(theme)}
+                  options={[
+                    { value: 'light', label: translation.light },
+                    { value: 'dark', label: translation.dark }
+                  ]}>
+                </Select>
+              </>
+            )}
+          </div>
+        ))}
+      </div>
+      <div
+        className="row w-full h-[128px] items-center justify-center mx-auto font-space">
+        <Helpwave color="white" size={128} />
+        <span className="textstyle-title-normal">&copy; {year} helpwave</span>
+      </div>
+    </div>
+  )
+}
+
+export default Footer

components/FooterLinkGroup.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link'
+
+export type FooterLinkGroupProps = {
+  title: string,
+  links: {
+    name: string,
+    link: string,
+    onClick?: () => void,
+    openInCurrentTab?: boolean,
+  }[],
+}
+
+const FooterLinkGroup = ({
+  title,
+  links,
+}: FooterLinkGroupProps) => {
+  return (
+    <div className="mb-8">
+      <div className="py-2 font-semibold text-lg">{title}</div>
+      <ul>
+        {links.map(({ name, link, onClick, openInCurrentTab }) => (
+          <li key={link}>
+            <Link onClick={onClick} target={onClick === undefined ? (openInCurrentTab ? '_top' : '_blank') : ''} href={link} className="py-1">{name}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default FooterLinkGroup