Venue.md

@@ -60,18 +60,17 @@ Ein weiterer Entscheidungspunkt war die Performance. Die Verwendung des virtuell
 ### [TypeScript](https://www.typescriptlang.org/)
 Wir haben uns dafür entschieden, TypeScript in unserem Projekt zu verwenden. TypeScript fügt JavaScript statische Typisierung hinzu, was die Entwicklung erleichtert und dabei hilft, viele Fehler bereits zur Entwicklungszeit zu erkennen. Dies führt zu einer verbesserten Entwicklererfahrung und macht den Code besser skalierbar und strukturierter. 
 
-### [MUI (Material UI)](https://mui.com/)
-MUI ist eine beliebte React-Komponentenbibliothek, die auf Google's Material Design basiert. Sie bietet eine breite Palette an vorgefertigten, stilvollen und anpassbaren UI-Komponenten.
+### [Tailwind CSS](https://www.ionos.de/digitalguide/websites/web-entwicklung/tailwind-css-im-ueberblick/)
+Tailwind CSS ist ein fortschrittliches CSS-Framework, das auf dem Utility-First-Ansatz basiert und Low-Level-CSS-Klassen in PostCSS bereitstellt. Wir haben Tailwind CSS für unser Farbschema und zur Erstellung des Designs unserer Komponenten genutzt.
 
 ### [Shadcn/UI](https://ui.shadcn.com/)
 Shadcn/UI ist eine Sammlung von UI-Komponenten, die speziell für die Integration mit React-Anwendungen entwickelt wurden. Diese Komponenten sind Barrierefrei implementiert, anpassbar und Open Cource, was uns eine große Flexibilität bietet. Die Bibliothek bietet eine Vielzahl vorgefertigter Komponenten, darunter Dashboards, Karten, Formulare und mehr. Dabei können die Komponenten leicht an spezifische Designanforderungen angepasst werden.
 
-## Design
-In diesem Abschnitt werden die Designprinzipien des Venue-Frontends beschrieben. Für das Desgin haben wir Google Fonts für Icons und ui.shadcn sowie Tailwind CSS für die allgemeinen UI-Elemente und das Styling verwendet. Diese ermöglichen eine schnelle und übereinstimmende Entwicklung und stellen sicher, dass das Design leicht anpassbar bleibt.
+### [MUI (Material UI)](https://mui.com/)
+MUI ist eine beliebte React-Komponentenbibliothek, die auf Google's Material Design basiert. Sie bietet eine breite Palette an vorgefertigten, stilvollen und anpassbaren UI-Komponenten. Eine Alternative, die wir für die Icons in Betracht gezogen hatten, war das [Set von Lucide](https://lucide.dev/icons/). Jedoch haben wir uns aufgrund der Auswahl an benötigten Icons und der etwas anschaulicheren Darstellung für das Material Icons entschieden.
 
-- **Tailwind CSS**: Ein Utility-First CSS-Framework, das eine schnelle und effiziente Erstellung von Designs ermöglicht.
-- **ui.shadcn**: Ein Set von UI-Komponenten, die speziell für die Erstellung moderner und ansprechender Benutzeroberflächen entwickelt wurden.
-- **Google Fonts**: Ein flexibles und anpassbares Icon-Set, das wir für die visuelle Unterstützung nutzen.
+## Design
+In diesem Abschnitt werden die Designprinzipien des Venue-Frontends beschrieben. 
 
 ### Farschemata
 Wir haben uns bei Venue für ein ansprechendes Dark Mode Farbschema entschieden, welches ein einheitliches, modernes Erscheinungsbild darstellt.
@@ -96,13 +95,79 @@ Unsere Farbpalette umfasst die folgenden Hauptfarben:
 - **Chat**: #374D56
   - Diese Farbe für den Chat-Bereich bietet einen angenehmen Kontrast, der die Lesbarkeit von Nachrichten verbessert und gleichzeitig zum Gesamtfarbschema passt.
 
-Mit diesem Farbschema haben wir eine benutzerfreundliche und visuell ansprechende Oberfläche geschaffen, die den Nutzern eine angenehme Interaktion ermöglicht.
+Mit diesem Farbschema wird eine benutzerfreundliche und visuell ansprechende Oberfläche geschaffen, die den Nutzern eine angenehme Interaktion ermöglicht.
 
 ### UI-Komponenten
+Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprechende Benutzeroberfläche zu gewährleisten. Diese Komponenten bieten eine breite Palette an Funktionen und Designs, die zur Optimierung der Benutzererfahrung beitragen. Nachfolgend werden die genutzten UI-Komponenten vorgestellt:
+
+- **Alert**
+  (Bild: Placeholder)
+  Alerts wurden verwendet, um wichtige Benachrichtigungen oder Hinweise anzuzeigen.
+
+- **Avatar**
+  (Bild: Placeholder)
+  Avatare wurden genutzt, um Benutzerbilder darzustellen.
+
+- **Button**
+  (Bild: Placeholder)
+  Buttons sind ein wesentlicher Bestandteil der Benutzeroberfläche und wurden verwendet, um Aktionen auszulösen oder Navigationen innerhalb der Anwendung zu erleichtern.
+
+- **Card**
+  (Bild: Placeholder)
+  Cards wurden eingesetzt, um Informationen oder Inhalte in einem übersichtlichen und ansprechenden Format darzustellen. Sie helfen dabei, Inhalte zu strukturieren und visuell hervorzuheben.
+
+- **Command**
+  (Bild: Placeholder)
+  Command-Komponenten wurden genutzt, um interaktive Befehle oder Aktionen zu repräsentieren. Sie bieten die Möglichkeit, bestimmte Aufgaben auszuführen oder Funktionen zu aktivieren.
+
+- **Dialog**
+  (Bild: Placeholder)
+  Dialogs wurden verwendet, um wichtige Informationen oder Interaktionsmöglichkeiten in einem modalen Fenster darzustellen. Damit wird der Fokus des Benutzers auf spezifische Inhalte gelenkt, da der Rest der Anwendung abgedunkelt wird.
+
+- **Input**
+  (Bild: Placeholder)
+  Input-Komponenten wurden genutzt, um Benutzereingaben entgegenzunehmen. Sie bieten eine Schnittstelle für die Interaktion mit Venue.
+
+- **Label**
+  (Bild: Placeholder)
+  Labels wurden verwendet, um Beschriftungen für andere UI-Elemente bereitzustellen. Sie helfen dabei, die Benutzerführung zu verbessern.
+
+- **Menubar**
+  (Bild: Placeholder)
+  Menubars wurden genutzt, um Navigationsoptionen bereitzustellen. Sie bieten eine strukturierte Möglichkeit, zwischen verschiedenen Bereichen oder Funktionen zu wechseln.
+
+- **Resizable**
+  (Bild: Placeholder)
+  Die Resizable-Komponente ermöglicht es, bestimmte UI-Elemente in der Größe anzupassen, um die Anpassbarkeit zu verbessern.
+
+- **Scroll-Area**
+  (Bild: Placeholder)
+  Scroll-Area-Komponenten wurden eingesetzt, um Inhalte darzustellen, die größer sind als der verfügbare Anzeigebereich. Sie ermöglichen es den Benutzern, durch umfangreiche Inhalte zu navigieren und dabei den Überblick zu behalten.
+
+- **Select**
+  (Bild: Placeholder)
+  Select-Komponenten wurden verwendet, um Dropdown-Listen bereitzustellen. Sie ermöglichen es den Benutzern, aus einer Liste von Optionen auszuwählen.
+
+- **Separator**
+  (Bild: Placeholder)
+  Separator-Komponenten wurden genutzt, um visuelle Trennlinien zwischen verschiedenen Elementen in der Benutzeroberfläche zu erstellen. Sie verbessern die visuelle Struktur und Lesbarkeit.
+
+- **Tabs**
+  (Bild: Placeholder)
+  Tabs wurden eingesetzt, um verschiedene Ansichten/ Reiter im Meeting Raum zu organisieren. Sie ermöglichen es den Benutzern, zwischen verschiedenen Inhalten/ Funktionen zu navigieren.
+
+- **Textarea**
+  (Bild: Placeholder)
+  Textarea-Komponenten wurden verwendet, um mehrzeilige Texteingaben oder Kommentare entgegenzunehmen. Sie bieten eine Schnittstelle für die Eingabe und Bearbeitung von längeren Texten.
+
+- **Toggle-Group und Toggle**
+  (Bild: Placeholder)
+  Toggle-Group- und Toggle-Komponenten wurden genutzt, um Umschaltfunktionen bereitzustellen. Sie ermöglichen es den Benutzern, zwischen zwei Zuständen zu wählen.
+
+Diese Komponenten wurden mit Blick auf Benutzerfreundlichkeit, Barrierefreiheit und Anpassbarkeit ausgewählt und trugen dazu bei, eine intuitive und effiziente Benutzeroberfläche für Venue zu gestalten.
 
 ### Icons
 
-Eine Alternative, die wir für die Icons in Betracht gezogen hatten, war das [Set von Lucide](https://lucide.dev/icons/). Jedoch haben wir uns aufgrund der Auswahl an benötigten Icons und der etwas anschaulicheren Darstellung für das [Set von Google Fonts](https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons&icon.size=24&icon.color=%235f6368&icon.platform=web) entschieden.