feat: add calcom links for calendar booking

src/components/Card.tsx

@@ -41,7 +41,9 @@ const Card: React.FC<Props> = ({
         <h2 className='font-grotesk font-medium text-2xl leading-8 mt-3 line-clamp-2'>{title}</h2>
       )}
       {teaser && <p className='pt-4'>{teaser}</p>}
-      {href && <LinkButton small caption={'Weiterlesen'} dark href={href} className='mt-5' />}
+      {href && (
+        <LinkButton small caption={'Weiterlesen'} variant='dark' href={href} className='mt-5' />
+      )}
     </div>
   )
 }

src/components/Footer.tsx

@@ -45,9 +45,18 @@ const Footer: React.FC<Props> = ({ children }: Props) => {
       </div>
       <div className={'z-10 col-span-1 lg:col-span-6'}>
         <h3 className={'text-xl md:text-bb-3xl font-grotesk'}>
-          Du möchtest mit uns zusammenarbeiten? Wir freuen uns auf deine E-Mail.
+          Du möchtest mit uns zusammenarbeiten? Wir freuen uns auf ein Gespräch oder eine E-Mail.
         </h3>
-        <LinkButton className='mt-5' caption={'Schreib uns'} href='mailto:[email protected]' />
+        <div className='flex gap-4 mt-5'>
+          <LinkButton
+            variant='dark'
+            className=''
+            caption={'Gespräch buchen'}
+            href='https://cal.bitbetter.de/team/bitbetter/projekt-anfrage'
+            newTab
+          />
+          <LinkButton className='' caption={'E-Mail schreiben'} href='mailto:[email protected]' />
+        </div>
         <div
           className={
             'flex flex-col md:flex-row justify-between text-base md:text-lg leading-[1.4] mt-[11.5rem] md:mt-[17.875rem]'

src/components/HeroSection.tsx

@@ -19,7 +19,7 @@ const HeroSection: React.FC<Props> = ({ title, subtitle, buttonCaption }: Props)
           <LinkButton
             className='mt-8'
             caption={buttonCaption}
-            dark={true}
+            variant='dark'
             href={'mailto:[email protected]'}
           />
         )}

src/components/LinkButton.tsx

@@ -4,7 +4,8 @@ interface Props {
   caption: string
   className?: string
   href?: string
-  dark?: boolean
+  variant?: 'dark' | 'white' | 'grey'
+  grey?: boolean
   newTab?: boolean
   small?: boolean
 }
@@ -15,14 +16,17 @@ const LinkButton: React.FC<Props> = ({
   href,
   newTab,
   small,
-  dark = false,
+  variant = 'white',
 }: Props) => {
+  const colorClasses = {
+    dark: 'bg-black text-white',
+    white: 'bg-white text-bb-grey-500',
+    grey: 'bg-bb-grey-200 text-bb-grey-500',
+  }
   return (
     <a
       href={href}
-      className={`flex w-fit gap-2 py-4 px-5 rounded-full items-center font-medium hover:bg-opacity-75 ${
-        dark ? 'bg-black text-white' : 'bg-white text-bb-grey-500'
-      } ${small ? 'py-[10px] px-4' : 'py-4 px-5'} ${className || ''}`}
+      className={`flex w-fit gap-2 py-4 px-5 rounded-full items-center font-medium hover:bg-opacity-75 ${colorClasses[variant] || ''} ${small ? 'py-[10px] px-4' : 'py-4 px-5'} ${className || ''}`}
       {...(newTab ? { target: '_blank' } : {})}
     >
       {caption}

src/components/Navbar.tsx

@@ -84,7 +84,7 @@ const Navbar: React.FC<Props> = ({ buttonCaption }) => {
               <LinkButton
                 className={'h-9'}
                 caption={buttonCaption}
-                dark={true}
+                variant='dark'
                 href={'mailto:[email protected]'}
               />
             </li>
@@ -97,7 +97,7 @@ const Navbar: React.FC<Props> = ({ buttonCaption }) => {
               className={'w-full justify-center'}
               small
               caption={buttonCaption}
-              dark={true}
+              variant='dark'
               href={'mailto:[email protected]'}
             />
           </div>

src/content/services/paperless-ngx.mdx

@@ -34,7 +34,7 @@ Paperless-ngx bietet inzwischen unter anderem folgenden Funktionen:
 - 🎉 Große Open-Source-Community mit Hilfe, Lösungen und Ideen
 
 ## Paperless-ngx ausprobieren: Demo-Instanz vorhanden
-Das Entwickler-Team hinter Paperless-ngx betreibt eine Demo-Instanz, die regelmäßig zurückgesetzt wird, aber sehr gut dazu geeignet ist, sich einen ersten Eindruck von Paperless-ngx zu verschaffen. Die Demo-Instanz ist unter [demo.paperless-ngx.com](https://demo.paperless-ngx.com/) zu erreichen. Hier sollten auf keinen Fall echte oder wichtigen Dokumente mit persönlichen Daten hochgeladen werden.
+Das Entwickler-Team hinter Paperless-ngx betreibt eine Demo-Instanz, die regelmäßig zurückgesetzt wird, aber sehr gut dazu geeignet ist, sich einen ersten Eindruck von Paperless-ngx zu verschaffen. Die Demo-Instanz ist unter [demo.paperless-ngx.com](https://demo.paperless-ngx.com/) zu erreichen. Hier sollten auf keinen Fall echte oder wichtigen Dokumente mit persönlichen Daten hochgeladen werden. Wir bieten außerdem individuelle, private Demo-Instanzen an, wenn Sie Paperless-ngx für sich ausprobieren möchten.
 
 ## Open-Source-Projekt: Kostenlose Nutzung, aber hohe technische Hürde
 
@@ -45,17 +45,26 @@ Durch seine Open-Source-Lizenz ist Paperless-ngx zwar kostenlos nutzbar, allerdi
 
 Wer die nötigen Kenntnisse zum Selbsthosten nicht mitbringt, oder die Zeit sparen will, ist bei uns richtig: Wir bieten den sicheren Betrieb von Paperless-ngx-Instanzen für unsere Kunden ab 20 Euro monatlich an. Nach einer kurzen Analyse der Anforderungen in Bezug auf die Ausstattung (Größe des Speichers, Zugangsmöglichkeiten, Domains, etc.) können wir üblicherweise binnen weniger Stunden eine Instanz provisionieren.
 
-<LinkButton
-  className={'not-prose mx-auto'}
-  caption={"Unverbindlich anfragen"}
-  dark={true}
-  href={'mailto:[email protected]'}
-/>
+<div class="flex gap-4 not-prose items-center justify-center">
+  <LinkButton
+    variant={'dark'}
+    caption={"Gespräch buchen"}
+    dark={true}
+    href={'https://cal.bitbetter.de/team/bitbetter/paperless-ngx'}
+    newTab={true}
+  />
+  <LinkButton
+    variant="grey"
+    caption={"E-Mail schreiben"}
+    href={'mailto:[email protected]'}
+  />
+</div>
 
 Wir helfen unter anderem bei folgenden Themen rund um Paperless-ngx:
 
 - Planung und Beratung über den sicheren Einsatz von Paperless-ngx (Ist es das richtige Werkzeug für mich?)
 - Betrieb und Wartung von Paperless-ngx-Instanzen (Managed Hosting) auf deutschen Servern (Ausstattung und Kapazität ganz nach den individuellen Kundenwünschen) und mit Backup-Lösung
-- Optional mit sicherem Zugang über gängige VPN-Lösungen
+- Optional mit sicherem Zugang über gängige VPN-Lösungen und Anbindung an ihr Firmen-VPN
+- Zusätzliche Absicherung von öffentlichen Instanzen durch Multi-Faktor-Authentifizierung
 - Support bei Problemen und Fragen rund um Paperless-ngx
 - Entwicklung von Paperless-ngx Erweiterungen, Automatisierungen und Core-Features