Terminseite hinzugefügt, React-Komponenten hinzugefügt

docusaurus.config.js

@@ -105,6 +105,7 @@ module.exports = {
           ]
         },
         */
+        {to: '/termine', label: 'Termine'},   
         {to: '/contact', label: 'Kontakt'},
         {
           type: 'dropdown',

src/components/BannerTermine.jsx

+import React from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl'
+
+export default function BannerTermine({children}) {
+  const bgSource = useBaseUrl('/images/banner.svg')
+
+  return <div className={'flex'}>
+    <div className={'w-screen bg-repeat-x bg-yellow-400 max-w-screen'}
+         style={{backgroundImage: `url('${bgSource}')`, margin: '0 -9999rem', padding: '2rem 9999rem'}}>
+    </div>
+    <div className={'flex p-8 gap-8'} style={{ width: "100%" }}>
+      {children}
+    </div>
+  </div>
+}
\ No newline at end of file

src/components/MailToButtonTermine.jsx

+import React from 'react'
+
+export default function MailToButtonTermine({ recipient, label, subject, body }) {
+  return <a className={'btn border border-yellow-400 text-gray-800 hover:text-yellow-600 hover:border-yellow-600 cursor-pointer'} target={'_blank'} onClick={(e) => {
+    window.open(`mailto:${recipient}?subject=${subject}&body=${body}`, '_blank')
+    e.preventDefault()
+  }}>{label}</a>
+}

src/pages/termine.mdx

+---
+hide_table_of_contents: true
+
+---
+import MailToButtonTermine from '@components/MailToButtonTermine'
+import BannerTermine from '@components/BannerTermine'
+import Card from '@components/Card'
+import MailToButton from '@components/MailToButton'
+
+<header className="max-w-3xl mx-auto text-center pb-16">
+  <h1 className="h1 mb-4">Termine</h1>
+    <h3 className="h3 mb-4">Veranstaltungen zu FIT-Connect</h3>
+  <p className="wtext-xl text-gray-600">Möchten Sie mehr über FIT-Connect erfahren?  <br/>  
+ Möchten Sie Onlinedienste oder Fachverfahren an FIT-Connect anbinden?  <br/>
+ Arbeiten Sie als Software-Architekt oder -Entwickler an der Klärung technischer Fragen zur Anbindung?  <br/>
+ Unsere Experten informieren  Sie in regelmäßigen Abständen.  <br/>
+ Die folgenden Themen stehen zur Auswahl::</p>
+</header>
+<BannerTermine>
+  <div style={{ width: "33%" }} >
+   <Card title={'FIT-Connect anbinden'} icon={'Support'}>
+      <p className="text-gray-600 text-center">
+        Unsere Experten erläutern in monatlichen Abständen, wie Sie Onlinedienste und Fachverfahren an FIT-Connect anschließen.  <br/>
+        Erster Termin ist Donnerstag, der 25. August. Danach wiederholt sich der Termin an jedem letzten Donnerstag im Monat (bei Bedarf).  <br/>
+        Teilnehmer sind alle Ansprechpartner für Onlinedienste oder Fachverfahren, die an einer Anbindung interessiert sind.  <br/>
+        Bei dieser Veranstaltungsreihe stellen unsere Experten Ihnen den Prozess der Anbindung vor.  <br/>
+        Mit der folgenden Schaltfläche rufen Sie Ihr E-Mail-Programm auf:  <br/>
+        Schreiben Sie uns eine E-Mail und wir informieren Sie regelmäßig über die nächste Informationsveranstaltung zur Anbindung von Onlinediensten und Fachverfahren an FIT-Connect.  
+      </p>
+    <MailToButtonTermine label={'Emails für diese Termine erhalten'} recipient={'fit-connect-support@fjd.de'} subject={'FIT-Connect anbinden'} body={'Sehr geehrte Damen und Herren, senden Sie mir bitte regelmäßig E-Mails zum Thema FIT-Connect anbinden. Mit freundlichen Grüßen'} />
+    </Card>
+  </div>
+   <div style={{ width: "33%" }} >
+     <Card title={'FIT-Connect nutzen'} icon={'Support'}>
+     <p className="text-gray-600 text-center">
+        Bei dieser Veranstaltungsreihe stehen die folgenden Themen auf der Agenda: Planung und Fortschritt bei Features und Releases von FIT-Connect, Kommunikation von  Upgrades einzelner Umgebungen, konzeptionell Diskussion aktueller Themen, Bearbeitung angefragter Themen.
+        Teilnehmer sind hier alle Ansprechpartner für Onlinedienste oder Fachverfahren, die bereits eine Planung zur Anbindung an FIT-Connect durchführten.  <br/>  
+        Erster Termin ist Donnerstag, der 25. August. Danach wiederholt sich der Termin an jedem letzten Donnerstag im Monat.  <br/>
+        Mit der folgenden Schaltfläche rufen Sie Ihr E-Mail-Programm auf:  <br/>
+        Schreiben Sie uns eine E-Mail und wir informieren Sie regelmäßig über die nächsten Termine dieser Informationsreihe.   
+      </p>
+    <MailToButtonTermine label={'Emails für diese Termine erhalten'} recipient={'fit-connect-support@fjd.de'} subject={'FIT-Connect nutzen'} body={'Sehr geehrte Damen und Herren, senden Sie mir bitte regelmäßig E-Mails zum Thema FIT-Connect nutzen. Mit freundlichen Grüßen'} />
+  </Card>
+  </div>
+   <div style={{ width: "33%" }} >
+  <Card title={'FIT-Connect im Detail'} icon={'Support'}>
+      <p className="text-gray-600 text-center">
+        Bei diesen Terminen geht es um folgenen Themen: Klärung technischer Rückfragen und Anmerkungen (jedoch keine Standardfälle, die mit Hilfe der Dokumentation oder des Supports lösbar sind), technische Feinkonzeption oder Qualitätssicherung von Spezifikationen, Diskussion von Best Practice Prozesen, Updates der API und notwendige Änderungen.  <br/>
+        Teilnehmer sind Entwickler aus angebundenen und anzubindenden Verfahren sowie Architekten aus dem Nutzerkreis.  <br/>  
+        Nächster Termin ist Donnerstag, der 11. August. Danach wiederholt sich der Termin an jedem zweiten Donnerstag im Monat.  <br/>
+        Mit der folgenden Schaltfläche rufen Sie Ihr E-Mail-Programm auf: <br/>
+        Schreiben Sie uns eine E-Mail und wir informieren Sie regelmäßig.   
+      </p>
+    <MailToButtonTermine label={'Emails für diese Termine erhalten'} recipient={'fit-connect-support@fjd.de'} subject={'FIT-Connect im Detail'} body={'Sehr geehrte Damen und Herren, senden Sie mir bitte regelmäßig E-Mails zum Thema FIT-Connect im Detail. Mit freundlichen Grüßen'} />
+  </Card>
+  </div>
+</BannerTermine>
\ No newline at end of file