DIGIT CON – Konferenz

REACT APP Landing Page für Konferenz-Anmeldung

Dieses REACT Projekt ist ein Übungsbeispiel für eine moderne, interaktive Landing Page für die fiktive DIGIT CON – eine vier Tage dauernde Konferenz rund um digitale Innovationen für eine junge dynamische Zielgruppe. Das Projekt wurde speziell entwickelt, um eine ansprechende und funktionale Plattform zu schaffen, die Besucher dazu einlädt, sich kostenlos für die Konferenz zu registrieren. Im Fokus stand eine klare, benutzerfreundliche Struktur, die die wichtigsten Informationen – von den Speakern über die Workshops bis hin zur Registrierung – effizient präsentiert.

Die App wurde mit Entwicklungsserver Vite mit React und TypeScript entwickelt. Sie basiert auf einer komponentenbasierten Architektur, um Flexibilität und Wiederverwendbarkeit sicherzustellen. Die Daten werden aus JSON-Dateien dynamisch in die Komponenten geladen, die zur Ansicht der Sprecher und Workshops dienen. Tailwind CSS und Framer Motion sorgen für ein modernes und dynamisches Design, das Nutzer durch animierte Elemente visuell anspricht. Ergänzend wurde eine Material UI-Komponente für Funktionalität sowie mit Leaflet eine Kartenansicht in der FAQ-Section verwendet.

Die DIGIT CON Landing Page demonstriert den Einsatz moderner Webtechnologien wie React, Tailwind CSS, Framer Motion, Material UI und Leaflet, um eine ansprechende und interaktive Konferenz-Website zu schaffen. Durch die Integration dynamischer Inhalte, responsiver Designprinzipien und interaktiver Features wurde ein durchdachtes Konzept realisiert.

GitHub: AlexaSta-hello/digit-conf
Website: https://digit-conf.pages.dev/

Website-Tour starten:

Funktionalitäten und Bibliotheken

Die Website ist so aufgebaut, dass sie Besuchern die wichtigsten Informationen über die Konferenz und die Möglichkeit sich zu Registrieren bietet. Dynamische und interaktive Elemente machen die Nutzererfahrung intuitiv und ansprechend:

React und komponentenbasierte Architektur

Modularer Aufbau mit dedizierten Komponenten wie SpeakerCard und WorkshopCard, die Daten dynamisch aus JSON-Dateien laden.
Effizientes State-Management für reibungslose Interaktivität.

Tailwind CSS

Präzises Styling mit einer individuellen Farbpalette, responsiven Layouts und ansprechenden Hover-Effekten.

Framer Motion

Animierte Datumsanzeige, Scroll Animationen und Hover-Effekte, die die Benutzererfahrung lebendiger gestalten.

Material UI (MUI)

FAQ-Bereich mit Akkordeon-Komponenten für eine intuitive Darstellung häufiger Fragen.

React Hook Form

Registrierungsformular mit validierten Eingaben, das Nutzern eine einfache Anmeldung ermöglicht.

Bilder und Design

Die Speaker Fotos stammen von pexels. Danke an Italo Melo, Karolina Grabowska, Luri, Mikhail Nilov, Polina Tankhilevitch, Tima Miroshnichenko – gestaltet mit Canva-Elementen
Die Icons, sowie Hintergrundbild und Video stammen von Canva. Das Layout von mir.