+ Hinweis: Die Preise sind in US-Dollar angegeben und können sich ändern.
+ Die Gesamtkosten basieren auf 1 Million Input-Token und 0,5 Millionen Output-Token.
+
+
+
+
+
diff --git a/apps/bauntown/apps/landing/src/components/Navigation.astro b/apps/bauntown/apps/landing/src/components/Navigation.astro
new file mode 100644
index 000000000..adc4d0c4f
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/components/Navigation.astro
@@ -0,0 +1,647 @@
+---
+import { getLangFromUrl, useTranslations } from "../utils/i18n";
+import ThemeToggle from "./ThemeToggle.astro";
+import LanguageSwitcher from "./LanguageSwitcher.astro";
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+const pathname = Astro.url.pathname;
+
+// URLs with language prefix - use explicit /de/ for German too
+const homeUrl = `/${lang}`;
+const modelsUrl = `/${lang}/models`;
+const projectsUrl = `/${lang}/projects`;
+const tutorialsUrl = `/${lang}/tutorials`;
+const toolsUrl = `/${lang}/tools`;
+const visionUrl = `/${lang}/vision`;
+const joinUrl = `/${lang}/join`;
+const supportUrl = `/${lang}/support`;
+const membersUrl = `/${lang}/members`;
+
+// Function to check if the current page matches a given path
+const isActive = (path: string) => {
+ if (path === homeUrl) {
+ // Special case for home: only match exactly
+ return pathname === homeUrl || pathname === `${homeUrl}/`;
+ }
+ // For other pages, check if the pathname starts with the path
+ return pathname.startsWith(path);
+};
+---
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/config.ts b/apps/bauntown/apps/landing/src/content/config.ts
new file mode 100644
index 000000000..447681625
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/config.ts
@@ -0,0 +1,181 @@
+import { defineCollection, z } from 'astro:content';
+
+const toolsCollection = defineCollection({
+ type: 'content',
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ category: z.enum(['Design', 'Development', 'Productivity', 'Hosting']),
+ image: z.string().optional(),
+ author: z.string().default('BaunTown'),
+ featured: z.boolean().default(false),
+ website: z.string().optional(),
+ pricing: z.enum(['Free', 'Freemium', 'Paid']).default('Freemium'),
+ tags: z.array(z.string()).optional(),
+ externalLinks: z.array(z.object({
+ title: z.string(),
+ url: z.string(),
+ })).optional(),
+ }),
+});
+
+const newsCollection = defineCollection({
+ type: 'content',
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ category: z.enum(['AI', 'Web', 'Development', 'Design', 'Community', 'Product']),
+ image: z.string().optional(),
+ author: z.string().default('BaunTown'),
+ featured: z.boolean().default(false),
+ tags: z.array(z.string()).optional(),
+ externalLinks: z.array(z.object({
+ title: z.string(),
+ url: z.string(),
+ })).optional(),
+ }),
+});
+
+const modelsCollection = defineCollection({
+ type: 'content',
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ category: z.enum(['Text', 'Bild']),
+ image: z.string().optional(),
+ author: z.string().default('BaunTown'),
+ featured: z.boolean().default(false),
+ tags: z.array(z.string()).optional(),
+ externalLinks: z.array(z.object({
+ title: z.string(),
+ url: z.string(),
+ })).optional(),
+ }),
+});
+
+const projectsCollection = defineCollection({
+ type: 'content',
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ category: z.enum(['Web', 'Mobile', 'Desktop', 'IoT', 'AI', 'Design']),
+ image: z.string().optional(),
+ author: z.string().default('BaunTown'),
+ featured: z.boolean().default(false),
+ status: z.enum(['active', 'completed', 'archived']).default('active'),
+ tags: z.array(z.string()).optional(),
+ githubUrl: z.string().optional(),
+ demoUrl: z.string().optional(),
+ technologies: z.array(z.string()).optional(),
+ }),
+});
+
+const tutorialsCollection = defineCollection({
+ type: 'content',
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ category: z.enum(['UI & UX', 'Business', 'Users', 'Branding', 'Marketing', 'Vibecoding']),
+ image: z.string().optional(),
+ author: z.string().default('BaunTown'),
+ featured: z.boolean().default(false),
+ // Course related fields
+ course: z.string().optional(),
+ courseName: z.string().optional(),
+ lessonNumber: z.number().optional(),
+ }),
+});
+
+const missionsCollection = defineCollection({
+ type: 'content',
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ difficulty: z.enum(['beginner', 'intermediate', 'advanced']),
+ duration: z.string(), // e.g. "2-3 hours", "1 day"
+ skills: z.array(z.string()),
+ image: z.string().optional(),
+ featured: z.boolean().default(false),
+ category: z.enum(['UI & UX', 'Business', 'Users', 'Branding', 'Marketing', 'Vibecoding']).default('UI & UX'),
+ status: z.enum(['active', 'completed', 'upcoming']).default('active'),
+ participants: z.array(z.string()).optional(),
+ githubRepo: z.string().optional(),
+ }),
+});
+
+const visionCollection = defineCollection({
+ type: 'content',
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ image: z.string().optional(),
+ featured: z.boolean().default(false),
+ category: z.enum(['product', 'technology', 'community', 'future']),
+ timeline: z.string(), // e.g. "2025-2030", "Long-term"
+ status: z.enum(['current', 'planned', 'exploring']),
+ contributors: z.array(z.string()).optional(),
+ relatedLinks: z.array(z.object({
+ title: z.string(),
+ url: z.string(),
+ })).optional(),
+ }),
+});
+
+const joinCollection = defineCollection({
+ type: 'content',
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ image: z.string().optional(),
+ heroTitle: z.string().optional(),
+ heroDescription: z.string().optional(),
+ newsletterTitle: z.string().optional(),
+ newsletterDescription: z.string().optional(),
+ submissionTitle: z.string().optional(),
+ submissionDescription: z.string().optional(),
+ }),
+});
+
+const membersCollection = defineCollection({
+ type: 'content',
+ schema: z.object({
+ name: z.string(),
+ role: z.string(),
+ bio: z.string(),
+ image: z.string().optional(),
+ github: z.string().optional(),
+ twitter: z.string().optional(),
+ linkedin: z.string().optional(),
+ website: z.string().optional(),
+ featured: z.boolean().default(false),
+ order: z.number().default(999),
+ }),
+});
+
+export const collections = {
+ 'news': newsCollection,
+ 'models': modelsCollection,
+ 'projects': projectsCollection,
+ 'tutorials': tutorialsCollection,
+ 'missions': missionsCollection,
+ 'vision': visionCollection,
+ 'join': joinCollection,
+ 'members': membersCollection,
+ 'tools': toolsCollection,
+};
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/de/contribute.md b/apps/bauntown/apps/landing/src/content/join/de/contribute.md
new file mode 100644
index 000000000..6a61a15a0
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/de/contribute.md
@@ -0,0 +1,29 @@
+---
+title: Code beitragen
+description: Hilf uns, BaunTown zu verbessern und zu erweitern.
+pubDate: 2025-04-01
+image: /images/bauntown-code.png
+category: community
+featured: true
+---
+
+## Code beitragen
+
+Als Open-Source-Projekt lebt BaunTown von den Beiträgen der Community. Egal ob du ein erfahrener Entwickler bist oder gerade erst anfängst, es gibt viele Möglichkeiten, wie du beitragen kannst.
+
+### Wie du helfen kannst
+
+- **Bug-Fixes**: Wenn du einen Fehler findest, erstelle einen Issue oder einen Pull Request.
+- **Neue Features**: Hast du eine Idee für ein neues Feature? Teile sie mit uns!
+- **Dokumentation**: Hilf uns, unsere Dokumentation zu verbessern.
+- **Code-Qualität**: Verbessere die Codequalität durch Refactoring.
+
+### Erste Schritte
+
+1. Fork das Repository auf GitHub
+2. Clone dein Fork auf deinen lokalen Computer
+3. Erstelle einen Branch für deine Änderungen
+4. Mache deine Änderungen und committe sie
+5. Pushe deinen Branch und erstelle einen Pull Request
+
+Wir freuen uns auf deine Beiträge!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/de/events.md b/apps/bauntown/apps/landing/src/content/join/de/events.md
new file mode 100644
index 000000000..acb846676
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/de/events.md
@@ -0,0 +1,26 @@
+---
+title: Events & Meetups
+description: Treffe die BaunTown-Community persönlich bei unseren Events.
+pubDate: 2025-04-01
+image: /images/bauntown-events.png
+category: community
+featured: true
+---
+
+## Events & Meetups
+
+Die BaunTown-Community trifft sich regelmäßig zu verschiedenen Events, Workshops und Hackathons. Diese Veranstaltungen bieten eine großartige Möglichkeit, andere Mitglieder kennenzulernen, zusammen zu lernen und an spannenden Projekten zu arbeiten.
+
+### Kommende Events
+
+- **BaunTown Hackathon 2025**: Ein zweitägiger Hackathon, bei dem Teams an innovativen Projekten arbeiten.
+- **Monatliche Meetups**: Jeden letzten Donnerstag im Monat treffen wir uns online oder in verschiedenen Städten.
+- **Workshops**: Regelmäßige Workshops zu verschiedenen Technologien und Themen.
+
+### Vergangene Events
+
+Schau dir die Highlights und Projekte unserer vergangenen Events an und hol dir Inspiration für deine eigenen Projekte.
+
+### Eigenes Event organisieren
+
+Möchtest du ein lokales BaunTown-Meetup in deiner Stadt organisieren? Wir unterstützen dich gerne dabei! Kontaktiere uns für weitere Informationen und Ressourcen.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/de/index.md b/apps/bauntown/apps/landing/src/content/join/de/index.md
new file mode 100644
index 000000000..6a8ab7a04
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/de/index.md
@@ -0,0 +1,36 @@
+---
+title: Werde Teil der Community
+description: Mitmachen, Inhalte einreichen und zum BaunTown-Projekt beitragen.
+pubDate: 2025-04-01
+image: /images/bauntown-community.png
+heroTitle: Gemeinsam gestalten wir die digitale Zukunft
+heroDescription: BaunTown lebt durch seine Community. Entdecke, wie du mit deinen Fähigkeiten und Ideen einen wertvollen Beitrag leisten kannst.
+newsletterTitle: Bleibe auf dem Laufenden
+newsletterDescription: Abonniere unseren Newsletter und erhalte regelmäßige Updates zu neuen Tutorials, Missionen und Community-Events.
+submissionTitle: Deine Ideen einreichen
+submissionDescription: Hast du Ideen für Tutorials, Missionen oder Visionen? Teile sie mit uns und der Community!
+---
+
+## Werde Teil der Community
+
+BaunTown ist eine dynamische Gemeinschaft von Entwicklern, Designern und Visionären, die gemeinsam an innovativen Technologien arbeiten. Bei uns gibt es vielfältige Möglichkeiten, deine Fähigkeiten einzubringen und gleichzeitig wertvolle Erfahrungen zu sammeln.
+
+### Newsletter abonnieren
+
+Mit unserem Newsletter bleibst du stets informiert über neue Entwicklungen, Tutorials und spannende Missionen. Wir versenden regelmäßig kuratierte Inhalte und exklusive Updates für unsere Community-Mitglieder.
+
+### Inhalte einreichen
+
+Möchtest du dein Fachwissen teilen und anderen helfen? Du kannst Vorschläge für Tutorials, praktische Missionen oder zukunftsweisende Visionen einreichen. Unser erfahrenes Team unterstützt dich dabei, deine Ideen in hochwertige Inhalte umzusetzen, die der Community zugutekommen.
+
+### An Missionen teilnehmen
+
+Unsere Missionen sind praxisnahe Coding-Projekte mit echtem Mehrwert. Hier arbeitest du in einem kollaborativen Umfeld und baust dein Portfolio mit relevanten Projekten auf. Von Einsteiger-Herausforderungen bis hin zu komplexen Aufgaben für Fortgeschrittene – für jeden Kenntnisstand ist etwas dabei.
+
+### Feedback geben
+
+Deine Meinung ist wertvoll! Teile uns mit, was dir gefällt und wo du Verbesserungspotenzial siehst. Durch kontinuierliches Feedback können wir BaunTown gemeinsam weiterentwickeln und die Plattform noch nützlicher gestalten.
+
+### Code beitragen
+
+BaunTown ist ein Open-Source-Projekt, das von seinen Beitragenden lebt. Wenn du über technische Fähigkeiten verfügst, kannst du direkt zum Quellcode beitragen, Fehler beheben oder die Dokumentation verbessern. Jeder Beitrag, egal wie klein, hilft der gesamten Community.
diff --git a/apps/bauntown/apps/landing/src/content/join/de/sponsor.md b/apps/bauntown/apps/landing/src/content/join/de/sponsor.md
new file mode 100644
index 000000000..57173127c
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/de/sponsor.md
@@ -0,0 +1,28 @@
+---
+title: BaunTown unterstützen
+description: Hilf uns, BaunTown nachhaltig weiterzuentwickeln.
+pubDate: 2025-04-01
+image: /images/bauntown-sponsor.png
+category: support
+featured: true
+---
+
+## BaunTown unterstützen
+
+BaunTown ist ein Projekt, das von Leidenschaft und Community-Engagement angetrieben wird. Um unsere Vision voranzutreiben, sind wir auf Unterstützung angewiesen.
+
+### Warum unterstützen?
+
+- **Nachhaltigkeit**: Deine Unterstützung hilft uns, das Projekt langfristig zu erhalten.
+- **Neue Features**: Ermögliche die Entwicklung neuer Funktionen und Verbesserungen.
+- **Community**: Unterstütze eine wachsende Community von Lernenden und Entwicklern.
+- **Bildung**: Hilf uns, qualitativ hochwertige Lernressourcen kostenlos anzubieten.
+
+### Unterstützungsmöglichkeiten
+
+- **GitHub Sponsors**: Unterstütze uns direkt über GitHub Sponsors.
+- **Open Collective**: Trage bei über unsere Open Collective Seite.
+- **Einmalige Spende**: Auch einmalige Spenden sind willkommen.
+- **Unternehmenssponsoring**: Interesse an Unternehmenssponsoring? Kontaktiere uns direkt.
+
+Jeder Beitrag zählt und hilft uns, BaunTown weiterzuentwickeln!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/en/contribute.md b/apps/bauntown/apps/landing/src/content/join/en/contribute.md
new file mode 100644
index 000000000..5012e9a33
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/en/contribute.md
@@ -0,0 +1,29 @@
+---
+title: Contribute Code
+description: Help us improve and expand BaunTown.
+pubDate: 2025-04-01
+image: /images/bauntown-code.png
+category: community
+featured: true
+---
+
+## Contribute Code
+
+As an open-source project, BaunTown thrives on community contributions. Whether you're an experienced developer or just getting started, there are many ways you can contribute.
+
+### How You Can Help
+
+- **Bug Fixes**: If you find a bug, create an issue or submit a pull request.
+- **New Features**: Do you have an idea for a new feature? Share it with us!
+- **Documentation**: Help us improve our documentation.
+- **Code Quality**: Improve code quality through refactoring.
+
+### Getting Started
+
+1. Fork the repository on GitHub
+2. Clone your fork to your local machine
+3. Create a branch for your changes
+4. Make your changes and commit them
+5. Push your branch and create a pull request
+
+We look forward to your contributions!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/en/events.md b/apps/bauntown/apps/landing/src/content/join/en/events.md
new file mode 100644
index 000000000..7932a5854
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/en/events.md
@@ -0,0 +1,26 @@
+---
+title: Events & Meetups
+description: Meet the BaunTown community in person at our events.
+pubDate: 2025-04-01
+image: /images/bauntown-events.png
+category: community
+featured: true
+---
+
+## Events & Meetups
+
+The BaunTown community regularly meets for various events, workshops, and hackathons. These gatherings provide a great opportunity to meet other members, learn together, and work on exciting projects.
+
+### Upcoming Events
+
+- **BaunTown Hackathon 2025**: A two-day hackathon where teams work on innovative projects.
+- **Monthly Meetups**: Every last Thursday of the month, we meet online or in different cities.
+- **Workshops**: Regular workshops on various technologies and topics.
+
+### Past Events
+
+Check out the highlights and projects from our past events and get inspiration for your own projects.
+
+### Organize Your Own Event
+
+Would you like to organize a local BaunTown meetup in your city? We're happy to support you! Contact us for more information and resources.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/en/index.md b/apps/bauntown/apps/landing/src/content/join/en/index.md
new file mode 100644
index 000000000..7a441bc65
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/en/index.md
@@ -0,0 +1,36 @@
+---
+title: Join Our Community
+description: Participate, submit content, and contribute to the BaunTown project.
+pubDate: 2025-04-01
+image: /images/bauntown-community.png
+heroTitle: Together we shape the digital future
+heroDescription: BaunTown thrives through its vibrant community. Discover how your skills and ideas can make a meaningful impact.
+newsletterTitle: Stay Informed
+newsletterDescription: Subscribe to our newsletter and receive curated updates on new tutorials, missions, and community events.
+submissionTitle: Share Your Ideas
+submissionDescription: Do you have innovative concepts for tutorials, missions, or visions? Share them with us and the community!
+---
+
+## Join Our Community
+
+BaunTown is a dynamic community of developers, designers, and visionaries working together on cutting-edge technology. There are numerous ways to contribute your skills while gaining valuable experience in return.
+
+### Subscribe to the Newsletter
+
+Our newsletter keeps you informed about the latest developments, tutorials, and exciting missions. We regularly send out curated content and exclusive updates for our community members.
+
+### Submit Content
+
+Do you want to share your expertise and help others grow? You can propose ideas for tutorials, practical missions, or forward-thinking visions. Our experienced team will support you in transforming your ideas into high-quality content that benefits the entire community.
+
+### Participate in Missions
+
+Our missions are hands-on coding projects with real-world impact. Here, you'll work in a collaborative environment and build your portfolio with relevant projects. From beginner challenges to complex tasks for advanced developers—there's something for every skill level.
+
+### Provide Feedback
+
+Your opinion matters! Let us know what you enjoy and where you see room for improvement. Through continuous feedback, we can evolve BaunTown together and make the platform even more valuable.
+
+### Contribute Code
+
+BaunTown is an open-source project that thrives on its contributors. If you have technical skills, you can contribute directly to the codebase, fix bugs, or improve documentation. Every contribution, no matter how small, helps the entire community.
diff --git a/apps/bauntown/apps/landing/src/content/join/en/sponsor.md b/apps/bauntown/apps/landing/src/content/join/en/sponsor.md
new file mode 100644
index 000000000..4f6f4b4e8
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/en/sponsor.md
@@ -0,0 +1,28 @@
+---
+title: Support BaunTown
+description: Help us sustain and grow BaunTown.
+pubDate: 2025-04-01
+image: /images/bauntown-sponsor.png
+category: support
+featured: true
+---
+
+## Support BaunTown
+
+BaunTown is a project fueled by passion and community engagement. To advance our vision, we rely on support from people like you.
+
+### Why Support?
+
+- **Sustainability**: Your support helps us maintain the project long-term.
+- **New Features**: Enable the development of new features and improvements.
+- **Community**: Support a growing community of learners and developers.
+- **Education**: Help us provide quality learning resources for free.
+
+### Support Options
+
+- **GitHub Sponsors**: Support us directly through GitHub Sponsors.
+- **Open Collective**: Contribute through our Open Collective page.
+- **One-time Donations**: One-time donations are also welcome.
+- **Corporate Sponsorship**: Interested in corporate sponsorship? Contact us directly.
+
+Every contribution counts and helps us continue developing BaunTown!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/it/contribute.md b/apps/bauntown/apps/landing/src/content/join/it/contribute.md
new file mode 100644
index 000000000..29ac7fcf1
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/it/contribute.md
@@ -0,0 +1,29 @@
+---
+title: Contribuisci al Codice
+description: Aiutaci a migliorare ed espandere BaunTown.
+pubDate: 2025-04-01
+image: /images/bauntown-code.png
+category: community
+featured: true
+---
+
+## Contribuisci al Codice
+
+Come progetto open-source, BaunTown prospera grazie ai contributi della comunità. Che tu sia uno sviluppatore esperto o che tu stia solo iniziando, ci sono molti modi in cui puoi contribuire.
+
+### Come Puoi Aiutare
+
+- **Correzioni di Bug**: Se trovi un bug, crea un issue o invia una pull request.
+- **Nuove Funzionalità**: Hai un'idea per una nuova funzionalità? Condividila con noi!
+- **Documentazione**: Aiutaci a migliorare la nostra documentazione.
+- **Qualità del Codice**: Migliora la qualità del codice attraverso il refactoring.
+
+### Per Iniziare
+
+1. Fai un fork del repository su GitHub
+2. Clona il tuo fork sulla tua macchina locale
+3. Crea un branch per le tue modifiche
+4. Fai le tue modifiche e committale
+5. Pusha il tuo branch e crea una pull request
+
+Aspettiamo con ansia i tuoi contributi!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/it/events.md b/apps/bauntown/apps/landing/src/content/join/it/events.md
new file mode 100644
index 000000000..0cd1e9109
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/it/events.md
@@ -0,0 +1,26 @@
+---
+title: Eventi & Meetup
+description: Incontra la comunità BaunTown di persona ai nostri eventi.
+pubDate: 2025-04-01
+image: /images/bauntown-events.png
+category: community
+featured: true
+---
+
+## Eventi & Meetup
+
+La comunità BaunTown si incontra regolarmente per vari eventi, workshop e hackathon. Questi incontri offrono un'ottima opportunità per incontrare altri membri, imparare insieme e lavorare su progetti entusiasmanti.
+
+### Prossimi Eventi
+
+- **BaunTown Hackathon 2025**: Un hackathon di due giorni in cui i team lavorano su progetti innovativi.
+- **Meetup Mensili**: Ogni ultimo giovedì del mese, ci incontriamo online o in diverse città.
+- **Workshop**: Workshop regolari su varie tecnologie e argomenti.
+
+### Eventi Passati
+
+Dai un'occhiata ai momenti salienti e ai progetti dei nostri eventi passati e trova ispirazione per i tuoi progetti.
+
+### Organizza il Tuo Evento
+
+Vorresti organizzare un meetup locale di BaunTown nella tua città? Siamo felici di supportarti! Contattaci per maggiori informazioni e risorse.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/it/index.md b/apps/bauntown/apps/landing/src/content/join/it/index.md
new file mode 100644
index 000000000..4d8a1c0c0
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/it/index.md
@@ -0,0 +1,36 @@
+---
+title: Unisciti alla Nostra Comunità
+description: Partecipa, invia contenuti e contribuisci al progetto BaunTown.
+pubDate: 2025-04-01
+image: /images/bauntown-community.png
+heroTitle: Insieme costruiamo il futuro
+heroDescription: BaunTown prospera attraverso la sua comunità. Scopri come puoi unirti e contribuire.
+newsletterTitle: Resta Aggiornato
+newsletterDescription: Iscriviti alla nostra newsletter e ricevi aggiornamenti regolari su nuovi tutorial, missioni ed eventi della comunità.
+submissionTitle: Invia le Tue Idee
+submissionDescription: Hai idee per tutorial, missioni o visioni? Condividile con noi e con la comunità!
+---
+
+## Unisciti alla Nostra Comunità
+
+BaunTown è una comunità di costruttori che lavorano insieme sul futuro della tecnologia. Ci sono molti modi in cui puoi partecipare e dare il tuo contributo.
+
+### Iscriviti alla Newsletter
+
+Resta aggiornato con gli ultimi sviluppi, tutorial e missioni. La nostra newsletter viene inviata regolarmente e contiene contenuti esclusivi e aggiornamenti.
+
+### Invia Contenuti
+
+Hai esperienza in un'area specifica e vuoi condividere le tue conoscenze? Puoi inviare idee per tutorial, missioni o visioni. Ti aiuteremo a trasformare le tue idee in contenuti di alta qualità.
+
+### Partecipa alle Missioni
+
+Le nostre missioni sono progetti di codifica pratici dove puoi collaborare con altri e acquisire esperienza preziosa. Dai progetti per principianti a quelli avanzati, c'è qualcosa per tutti.
+
+### Fornisci Feedback
+
+Il tuo feedback ci aiuta a migliorare la piattaforma. Facci sapere cosa ti piace e cosa possiamo fare meglio.
+
+### Contribuisci al Codice
+
+BaunTown è un progetto open source. Se hai competenze tecniche, puoi contribuire direttamente al codice o aiutare con la documentazione.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/join/it/sponsor.md b/apps/bauntown/apps/landing/src/content/join/it/sponsor.md
new file mode 100644
index 000000000..b10b96f76
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/join/it/sponsor.md
@@ -0,0 +1,28 @@
+---
+title: Supporta BaunTown
+description: Aiutaci a sostenere e far crescere BaunTown.
+pubDate: 2025-04-01
+image: /images/bauntown-sponsor.png
+category: support
+featured: true
+---
+
+## Supporta BaunTown
+
+BaunTown è un progetto alimentato dalla passione e dal coinvolgimento della comunità. Per far progredire la nostra visione, contiamo sul supporto di persone come te.
+
+### Perché Supportare?
+
+- **Sostenibilità**: Il tuo supporto ci aiuta a mantenere il progetto a lungo termine.
+- **Nuove Funzionalità**: Permetti lo sviluppo di nuove funzionalità e miglioramenti.
+- **Comunità**: Sostieni una comunità in crescita di studenti e sviluppatori.
+- **Educazione**: Aiutaci a fornire risorse di apprendimento di qualità gratuitamente.
+
+### Opzioni di Supporto
+
+- **GitHub Sponsors**: Supportaci direttamente tramite GitHub Sponsors.
+- **Open Collective**: Contribuisci attraverso la nostra pagina Open Collective.
+- **Donazioni Una Tantum**: Anche le donazioni una tantum sono benvenute.
+- **Sponsorizzazione Aziendale**: Interessato alla sponsorizzazione aziendale? Contattaci direttamente.
+
+Ogni contributo conta e ci aiuta a continuare a sviluppare BaunTown!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/members/de/nils-weiser.md b/apps/bauntown/apps/landing/src/content/members/de/nils-weiser.md
new file mode 100644
index 000000000..358818f89
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/members/de/nils-weiser.md
@@ -0,0 +1,10 @@
+---
+name: "Nils Weiser"
+role: "Backend-Entwickler"
+bio: "Spezialist für Serverarchitektur und Datenbanken mit Schwerpunkt auf skalierbaren Lösungen. Nils ist verantwortlich für die robuste technische Infrastruktur von BaunTown."
+image: "/images/members/avatar-placeholder.png"
+github: "nilsweiser"
+linkedin: "nils-weiser"
+featured: true
+order: 3
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/members/de/till-schneider.md b/apps/bauntown/apps/landing/src/content/members/de/till-schneider.md
new file mode 100644
index 000000000..da3a67bc0
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/members/de/till-schneider.md
@@ -0,0 +1,11 @@
+---
+name: "Till Schneider"
+role: "Gründer & Entwickler"
+bio: "Full-Stack Entwickler mit Fokus auf Web-Technologien und KI-Integration. Till hat BaunTown gegründet, um eine Plattform für offenes, kollaboratives Lernen zu schaffen."
+image: "/images/members/avatar-placeholder.png"
+github: "tillschneider"
+linkedin: "tillschneider"
+website: "https://bauntown.com"
+featured: true
+order: 1
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/members/de/tobias-mueller.md b/apps/bauntown/apps/landing/src/content/members/de/tobias-mueller.md
new file mode 100644
index 000000000..3cd4b0911
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/members/de/tobias-mueller.md
@@ -0,0 +1,11 @@
+---
+name: "Tobias Müller"
+role: "Design Lead"
+bio: "UI/UX Designer mit Erfahrung in der Gestaltung intuitiver Benutzeroberflächen. Tobias bringt seine Expertise für visuelles Design und Benutzererfahrung in das BaunTown-Team ein."
+image: "/images/members/avatar-placeholder.png"
+github: "tobiasmdesign"
+twitter: "tobiasmdesign"
+linkedin: "tobias-mueller-design"
+featured: true
+order: 2
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/members/en/nils-weiser.md b/apps/bauntown/apps/landing/src/content/members/en/nils-weiser.md
new file mode 100644
index 000000000..632955405
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/members/en/nils-weiser.md
@@ -0,0 +1,10 @@
+---
+name: "Nils Weiser"
+role: "Backend Developer"
+bio: "Specialist in server architecture and databases with a focus on scalable solutions. Nils is responsible for BaunTown's robust technical infrastructure."
+image: "/images/members/avatar-placeholder.png"
+github: "nilsweiser"
+linkedin: "nils-weiser"
+featured: true
+order: 3
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/members/en/till-schneider.md b/apps/bauntown/apps/landing/src/content/members/en/till-schneider.md
new file mode 100644
index 000000000..d24d5a275
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/members/en/till-schneider.md
@@ -0,0 +1,11 @@
+---
+name: "Till Schneider"
+role: "Founder & Developer"
+bio: "Full-stack developer with a focus on web technologies and AI integration. Till founded BaunTown to create a platform for open, collaborative learning."
+image: "/images/members/avatar-placeholder.png"
+github: "tillschneider"
+linkedin: "tillschneider"
+website: "https://bauntown.com"
+featured: true
+order: 1
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/members/en/tobias-mueller.md b/apps/bauntown/apps/landing/src/content/members/en/tobias-mueller.md
new file mode 100644
index 000000000..2ac254e1e
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/members/en/tobias-mueller.md
@@ -0,0 +1,11 @@
+---
+name: "Tobias Müller"
+role: "Design Lead"
+bio: "UI/UX designer with experience crafting intuitive user interfaces. Tobias brings his expertise in visual design and user experience to the BaunTown team."
+image: "/images/members/avatar-placeholder.png"
+github: "tobiasmdesign"
+twitter: "tobiasmdesign"
+linkedin: "tobias-mueller-design"
+featured: true
+order: 2
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/members/it/nils-weiser.md b/apps/bauntown/apps/landing/src/content/members/it/nils-weiser.md
new file mode 100644
index 000000000..6c694ca89
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/members/it/nils-weiser.md
@@ -0,0 +1,10 @@
+---
+name: "Nils Weiser"
+role: "Sviluppatore Backend"
+bio: "Specialista in architettura server e database con focus su soluzioni scalabili. Nils è responsabile della robusta infrastruttura tecnica di BaunTown."
+image: "/images/members/avatar-placeholder.png"
+github: "nilsweiser"
+linkedin: "nils-weiser"
+featured: true
+order: 3
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/members/it/till-schneider.md b/apps/bauntown/apps/landing/src/content/members/it/till-schneider.md
new file mode 100644
index 000000000..c6a0e545b
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/members/it/till-schneider.md
@@ -0,0 +1,11 @@
+---
+name: "Till Schneider"
+role: "Fondatore & Sviluppatore"
+bio: "Sviluppatore full-stack con focus su tecnologie web e integrazione AI. Till ha fondato BaunTown per creare una piattaforma di apprendimento aperto e collaborativo."
+image: "/images/members/avatar-placeholder.png"
+github: "tillschneider"
+linkedin: "tillschneider"
+website: "https://bauntown.com"
+featured: true
+order: 1
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/members/it/tobias-mueller.md b/apps/bauntown/apps/landing/src/content/members/it/tobias-mueller.md
new file mode 100644
index 000000000..c266e641a
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/members/it/tobias-mueller.md
@@ -0,0 +1,11 @@
+---
+name: "Tobias Müller"
+role: "Lead Designer"
+bio: "Designer UI/UX con esperienza nella creazione di interfacce utente intuitive. Tobias porta la sua competenza in design visivo ed esperienza utente al team di BaunTown."
+image: "/images/members/avatar-placeholder.png"
+github: "tobiasmdesign"
+twitter: "tobiasmdesign"
+linkedin: "tobias-mueller-design"
+featured: true
+order: 2
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/missions/de/astro-blog.md b/apps/bauntown/apps/landing/src/content/missions/de/astro-blog.md
new file mode 100644
index 000000000..fdd0f6afc
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/missions/de/astro-blog.md
@@ -0,0 +1,959 @@
+---
+title: "Erstelle einen persönlichen Blog mit Astro"
+description: "Lerne, wie du einen modernen, performanten Blog mit Astro und Markdown erstellst und ihn kostenlos veröffentlichst."
+pubDate: 2025-03-25
+difficulty: "beginner"
+duration: "2-3 Stunden"
+skills: ["Astro", "Markdown", "CSS", "HTML"]
+image: "/images/missions/astro-blog.png"
+featured: true
+status: "active"
+category: "Business"
+participants: ["Max Müller", "Jana Schmidt", "Tobias Weber"]
+githubRepo: "https://github.com/bauntown/astro-blog-mission"
+---
+
+# Erstelle einen persönlichen Blog mit Astro
+
+In dieser Mission wirst du einen modernen, schnellen Blog mit Astro erstellen, der Markdown für Inhalte verwendet, und ihn kostenlos veröffentlichen.
+
+## Missionsziele
+
+Nach Abschluss dieser Mission wirst du:
+
+1. Eine Astro-Webanwendung von Grund auf erstellt haben
+2. Markdown für Blogposts verwenden können
+3. Eine responsive Layout-Struktur implementiert haben
+4. Eine Kategorien- und Tagging-Funktionalität hinzugefügt haben
+5. Deinen Blog kostenlos veröffentlicht haben
+
+## Voraussetzungen
+
+- Grundlegende HTML-, CSS- und JavaScript-Kenntnisse
+- Grundlegende Terminal/Kommandozeilen-Kenntnisse
+- Node.js und npm installiert
+- Ein GitHub-Konto
+
+Keine Sorge, wenn du nicht alle Voraussetzungen erfüllst. Diese Mission eignet sich auch für Anfänger und enthält Schritt-für-Schritt-Anleitungen.
+
+## Schritt 1: Astro-Projekt einrichten
+
+Wir beginnen mit der Einrichtung eines neuen Astro-Projekts. Öffne dein Terminal und führe die folgenden Befehle aus:
+
+```bash
+# Erstelle ein neues Astro-Projekt
+npm create astro@latest my-blog
+
+# Navigiere in das Projektverzeichnis
+cd my-blog
+
+# Starte den Entwicklungsserver
+npm run dev
+```
+
+Besuche `http://localhost:3000` in deinem Browser, um deine neue Astro-Website zu sehen.
+
+## Schritt 2: Blog-Layout erstellen
+
+Als Nächstes erstellen wir ein grundlegendes Layout für unseren Blog. Erstelle eine neue Datei unter `src/layouts/BlogLayout.astro`:
+
+```astro
+---
+// src/layouts/BlogLayout.astro
+const { title, description } = Astro.props;
+---
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+```
+
+## Schritt 8: Bilder hinzufügen
+
+Erstelle ein Verzeichnis für Bilder unter `public/images/` und füge dort folgende Bilder hinzu:
+- `first-post.jpg` (für deinen ersten Blogpost)
+- `second-post.jpg` (für deinen zweiten Blogpost)
+- `profile.jpg` (für deine "Über mich"-Seite)
+
+Du kannst eigene Bilder verwenden oder Beispielbilder von Diensten wie [Unsplash](https://unsplash.com/) herunterladen.
+
+## Schritt 9: Seite veröffentlichen
+
+Es gibt mehrere Möglichkeiten, deinen Astro-Blog zu veröffentlichen. Wir verwenden hier [Netlify](https://www.netlify.com/), da es einen großzügigen kostenlosen Plan anbietet.
+
+1. Erstelle ein Git-Repository für dein Projekt:
+```bash
+git init
+git add .
+git commit -m "Initial commit"
+```
+
+2. Erstelle ein Repository auf GitHub und pushe deinen Code dorthin
+
+3. Melde dich bei Netlify an oder erstelle ein neues Konto
+
+4. Klicke auf "New site from Git" und wähle dein GitHub-Repository aus
+
+5. Verwende die folgenden Build-Einstellungen:
+ - Build command: `npm run build`
+ - Publish directory: `dist`
+
+6. Klicke auf "Deploy site"
+
+Netlify wird automatisch deine Seite erstellen und veröffentlichen. Du erhältst eine URL wie `https://your-site-name.netlify.app`, unter der dein Blog erreichbar ist.
+
+## Bonus: Tag-Seiten erstellen
+
+Als Bonus-Feature erstellen wir dynamische Seiten für Tags. Erstelle eine neue Datei unter `src/pages/tags/[tag].astro`:
+
+```astro
+---
+// src/pages/tags/[tag].astro
+import BlogLayout from '../../layouts/BlogLayout.astro';
+
+export async function getStaticPaths() {
+ const posts = await Astro.glob('../blog/*.md');
+
+ // Alle Tags sammeln
+ const allTags = posts.reduce((tags, post) => {
+ const postTags = post.frontmatter.tags || [];
+ postTags.forEach(tag => {
+ if (!tags.includes(tag)) {
+ tags.push(tag);
+ }
+ });
+ return tags;
+ }, []);
+
+ // Einen Pfad für jeden Tag erstellen
+ return allTags.map(tag => {
+ // Posts filtern, die diesen Tag enthalten
+ const filteredPosts = posts.filter(post =>
+ post.frontmatter.tags && post.frontmatter.tags.includes(tag)
+ );
+
+ return {
+ params: { tag },
+ props: { posts: filteredPosts, tag }
+ };
+ });
+}
+
+const { posts, tag } = Astro.props;
+---
+
+
+
+
+
+
+```
+
+## Herzlichen Glückwunsch!
+
+Du hast erfolgreich einen persönlichen Blog mit Astro erstellt und veröffentlicht! Hier sind einige Ideen für die Weiterentwicklung:
+
+- Eine Suchfunktion hinzufügen
+- Kommentarfunktion mit Disqus oder Utterances integrieren
+- Eine Kontaktseite mit Formular erstellen
+- Dark Mode implementieren
+- Analytics hinzufügen, um Besuche zu tracken
+
+Wenn du Fragen hast oder Hilfe benötigst, zögere nicht, im GitHub-Repository der Mission einen Issue zu erstellen oder dich an die Community zu wenden!
+
+Happy Blogging! 🚀
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/missions/de/vibecoding-mission.mdx b/apps/bauntown/apps/landing/src/content/missions/de/vibecoding-mission.mdx
new file mode 100644
index 000000000..0d2e0a3e6
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/missions/de/vibecoding-mission.mdx
@@ -0,0 +1,116 @@
+---
+title: "Mission Vibecoding: Erstelle einen intuitiven Code-Generator"
+description: "Entwickle einen Generator, der auf Basis eines 'Vibe'-Inputs kreative und intuitive Codevorschläge erzeugt."
+pubDate: 2025-03-30
+difficulty: "intermediate"
+duration: "2-3 Wochen"
+skills: ["JavaScript", "AI", "Kreative Programmierung", "UI/UX"]
+image: "/images/tutorials/nobackground/vibecode-bauntown-tutorial.png"
+featured: true
+category: "Vibecoding"
+status: "active"
+participants: ["Max Müller", "Sarah Weber"]
+githubRepo: "bauntown/vibecoding-generator"
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+
+# Mission Vibecoding: Erstelle einen intuitiven Code-Generator
+
+## Missionsübersicht
+
+Diese Mission fordert dich heraus, einen Code-Generator zu entwickeln, der auf Basis eines Stimmungs-Inputs (einer "Vibe") vorschlägt, wie Code geschrieben werden könnte. Stell es dir wie einen kreativen Assistenten vor, der nicht nur funktionalen Code liefert, sondern auch deinem persönlichen Stil und der gewünschten Ästhetik entspricht.
+
+
+
+## Hintergrund und Motivation
+
+Programmierung wird oft als rein logischer Prozess betrachtet, aber erfahrene Entwickler wissen, dass es auch eine kreative, künstlerische Komponente gibt. Die Art, wie Code geschrieben wird - seine Struktur, Namenskonventionen, Abstraktionsebenen - kann eine ästhetische Qualität haben, die weit über bloße Funktionalität hinausgeht.
+
+Diese Mission zielt darauf ab, das Konzept des "Vibecoding" zu erforschen - einer Herangehensweise an die Programmierung, bei der Intuition, ästhetische Präferenzen und persönlicher Stil eine ebenso wichtige Rolle spielen wie technische Korrektheit.
+
+## Missionsziele
+
+1. **Entwickle eine Webanwendung**, die Benutzereingaben für "Vibes" akzeptiert (z.B. "minimalistisch", "verspielt", "elegant", "retro")
+2. **Implementiere einen Generator**, der basierend auf diesen Vibes verschiedene Code-Snippets erstellt
+3. **Erstelle mindestens drei unterschiedliche Stil-Profile**, die unterschiedliche Programmierästhetiken repräsentieren
+4. **Integriere eine Lernkomponente**, die es dem Generator ermöglicht, aus Feedback zu lernen und sich anzupassen
+5. **Dokumentiere den Prozess und die Philosophie** hinter deinem Ansatz zum Vibecoding
+
+## Technische Anforderungen
+
+### Frontend
+
+- Eine benutzerfreundliche Web-Oberfläche mit:
+ - Eingabefeld für textliche "Vibe"-Beschreibungen
+ - Visualisierung der generierten Code-Stile
+ - Werkzeuge zum Vergleichen verschiedener Stile
+ - Feedback-Mechanismus
+
+### Backend
+
+- Ein System zur Interpretation von "Vibe"-Inputs
+- Ein Code-Generierungsmodul mit verschiedenen stilistischen Profilen
+- Eine Datenbank zur Speicherung von Benutzerpräferenzen und Feedback
+- Optional: Integration mit einem LLM für erweiterte Generierungsfähigkeiten
+
+### Vibecoding-Komponente
+
+- Implementierung verschiedener Stil-Profile (z.B. minimalistisch, expressiv, funktional)
+- Algorithmen zur Anpassung von Codestrukturen basierend auf Vibes
+- Namenskonventions-Generator, der zum gewählten Stil passt
+- Kommentierungsstil-Anpassung basierend auf der Vibe
+
+## Herausforderungen
+
+- **Die Subjektivität von "Vibes"**: Wie übersetzt man vage ästhetische Konzepte in konkreten Code?
+- **Balancieren von Stil und Funktion**: Der generierte Code sollte nicht nur gut aussehen, sondern auch gut funktionieren
+- **Persönliche Präferenzen**: Entwickle ein System, das individuellen Geschmack lernen und darauf reagieren kann
+- **Messung von Erfolg**: Wie bewertet man, ob ein generierter Code tatsächlich die gewünschte Vibe erreicht?
+
+## Ressourcen
+
+- **Code-Stil-Analysetools**: JSLint, ESLint, Prettier
+- **NLP-Bibliotheken**: für die Interpretation von Vibe-Beschreibungen
+- **Design-Theorie-Ressourcen**: für die Entwicklung verschiedener ästhetischer Profile
+- **Code-Beispiele**: Sammlungen von Code in verschiedenen Stilen zum Trainieren deines Systems
+
+## Erfolgsmetriken
+
+- Die Anwendung kann mindestens drei klar unterscheidbare Codestile generieren
+- Benutzer können die Vibes intuitiv steuern und erhalten konsistente Ergebnisse
+- Der generierte Code ist nicht nur stilistisch ansprechend, sondern auch funktional korrekt
+- Das System kann aus Benutzerfeedback lernen und die Generierung verbessern
+
+## Bonus-Herausforderungen
+
+1. **Stil-Mixologie**: Erlaube Benutzern, verschiedene Vibes zu kombinieren (z.B. "minimalistisch mit einem Hauch von Retro")
+2. **Sprach-Agnostik**: Erweitere den Generator, um in mehreren Programmiersprachen zu arbeiten
+3. **Code-zu-Vibe**: Implementiere die Umkehrfunktion - analysiere bestehenden Code und beschreibe seine Vibe
+4. **Teamprofile**: Entwickle ein Feature, das verschiedene Vibes für verschiedene Teammitglieder speichert und zusammenführt
+
+## Einreichung
+
+Deine Einreichung sollte enthalten:
+
+1. Den Quellcode deiner Vibecoding-Generator-Anwendung
+2. Eine Dokumentation, die deinen Ansatz, Herausforderungen und Lösungen erklärt
+3. Beispiele für generierten Code in verschiedenen Stilen
+4. Ein kurzes Video oder eine Präsentation, die deine Anwendung demonstriert
+5. Eine Reflexion über die Philosophie des Vibecoding und ihre Bedeutung für die Softwareentwicklung
+
+## Zeitplan
+
+- **Woche 1**: Konzeptentwicklung und Forschung zu verschiedenen Code-Ästhetiken
+- **Woche 2**: Implementierung des Grundsystems und der ersten Stil-Profile
+- **Woche 3**: Verfeinerung, Testen und Dokumentation
+
+## Team
+
+Diese Mission kann entweder individuell oder in kleinen Teams von 2-3 Personen abgeschlossen werden. Bei Teameinreichungen sollte klar dokumentiert werden, wer für welche Aspekte des Projekts verantwortlich war.
+
+## Fazit
+
+Die "Mission Vibecoding" fordert dich heraus, über die rein funktionalen Aspekte der Programmierung hinauszudenken und den expressiven, künstlerischen Charakter des Codes zu erforschen. Indem du einen Generator entwickelst, der unterschiedliche "Vibes" in Code umsetzen kann, wirst du ein tieferes Verständnis dafür entwickeln, wie Code nicht nur als Anweisung für Computer, sondern auch als Kommunikationsmedium zwischen Menschen fungiert.
+
+Diese Mission verbindet technische Fähigkeiten mit kreativer Sensibilität und fordert dich auf, die Grenzen dessen zu erweitern, was Programmierung sein kann. Viel Erfolg, und mögen deine Vibes harmonisch sein!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/missions/en/astro-blog.md b/apps/bauntown/apps/landing/src/content/missions/en/astro-blog.md
new file mode 100644
index 000000000..80de060fb
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/missions/en/astro-blog.md
@@ -0,0 +1,959 @@
+---
+title: "Build a Personal Blog with Astro"
+description: "Learn how to create a modern, high-performance blog with Astro and Markdown and publish it for free."
+pubDate: 2025-03-25
+difficulty: "beginner"
+duration: "2-3 hours"
+skills: ["Astro", "Markdown", "CSS", "HTML"]
+image: "/images/missions/astro-blog.png"
+featured: true
+status: "active"
+category: "Business"
+participants: ["Max Miller", "Jane Smith", "Thomas Weber"]
+githubRepo: "https://github.com/bauntown/astro-blog-mission"
+---
+
+# Build a Personal Blog with Astro
+
+In this mission, you'll create a modern, fast blog with Astro that uses Markdown for content, and publish it for free.
+
+## Mission Objectives
+
+After completing this mission, you will have:
+
+1. Created an Astro web application from scratch
+2. Used Markdown for blog posts
+3. Implemented a responsive layout structure
+4. Added categories and tagging functionality
+5. Published your blog for free
+
+## Prerequisites
+
+- Basic HTML, CSS, and JavaScript knowledge
+- Basic terminal/command line knowledge
+- Node.js and npm installed
+- A GitHub account
+
+Don't worry if you don't meet all the prerequisites. This mission is suitable for beginners and includes step-by-step instructions.
+
+## Step 1: Set Up Your Astro Project
+
+Let's start by setting up a new Astro project. Open your terminal and run the following commands:
+
+```bash
+# Create a new Astro project
+npm create astro@latest my-blog
+
+# Navigate to the project directory
+cd my-blog
+
+# Start the development server
+npm run dev
+```
+
+Visit `http://localhost:3000` in your browser to see your new Astro website.
+
+## Step 2: Create a Blog Layout
+
+Next, let's create a basic layout for our blog. Create a new file at `src/layouts/BlogLayout.astro`:
+
+```astro
+---
+// src/layouts/BlogLayout.astro
+const { title, description } = Astro.props;
+---
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Now, create a CSS file for our global styling at `public/styles/global.css`:
+
+```css
+/* public/styles/global.css */
+:root {
+ --color-primary: #3b82f6;
+ --color-text: #1f2937;
+ --color-text-light: #6b7280;
+ --color-bg: #ffffff;
+ --color-bg-dark: #f3f4f6;
+ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+}
+
+html {
+ font-family: var(--font-sans);
+ color: var(--color-text);
+ background-color: var(--color-bg);
+}
+
+body {
+ line-height: 1.6;
+}
+
+a {
+ color: var(--color-primary);
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 1.5rem 0 1rem;
+ line-height: 1.2;
+}
+
+h1 {
+ font-size: 2.25rem;
+}
+
+p, ul, ol {
+ margin-bottom: 1.25rem;
+}
+
+.container {
+ width: 90%;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 0 1rem;
+}
+
+header {
+ padding: 1.5rem 0;
+ border-bottom: 1px solid #e5e7eb;
+ margin-bottom: 2rem;
+}
+
+header .container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--color-text);
+}
+
+nav ul {
+ display: flex;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+nav li {
+ margin-left: 1.5rem;
+}
+
+nav a {
+ color: var(--color-text);
+}
+
+footer {
+ margin-top: 4rem;
+ padding: 2rem 0;
+ text-align: center;
+ color: var(--color-text-light);
+ font-size: 0.875rem;
+ border-top: 1px solid #e5e7eb;
+}
+
+main {
+ min-height: 70vh;
+}
+```
+
+## Step 3: Create Your First Blog Posts
+
+Now, let's create some blog posts using Markdown. Create a new directory `src/pages/blog/` and add two Markdown files.
+
+Create `src/pages/blog/first-post.md`:
+
+```markdown
+---
+layout: ../../layouts/BlogPostLayout.astro
+title: My First Blog Post
+date: 2025-03-01
+author: Your Name
+description: This is my very first blog post on my new Astro website.
+image: /images/first-post.jpg
+alt: An image for my first post
+tags: ["astro", "blogging", "getting started"]
+---
+
+# My First Blog Post
+
+Published on March 1, 2025
+
+Welcome to my first blog post! Here I'll be sharing my experiences with Astro.
+
+## Why I Chose Astro
+
+Astro is a modern static site generator that's perfect for content-focused websites like blogs. Here are some reasons why I chose Astro:
+
+1. **Performance**: Astro only loads the JavaScript that's actually needed
+2. **Flexibility**: I can use my preferred UI components
+3. **Markdown Integration**: Perfect for blog posts!
+
+```
+
+Create `src/pages/blog/second-post.md`:
+
+```markdown
+---
+layout: ../../layouts/BlogPostLayout.astro
+title: My Second Blog Post
+date: 2025-03-10
+author: Your Name
+description: In this post, I talk about my first few weeks with Astro.
+image: /images/second-post.jpg
+alt: An image for my second post
+tags: ["astro", "progress", "learning"]
+---
+
+# My Second Blog Post
+
+Published on March 10, 2025
+
+After a few weeks with Astro, I can say that I'm impressed! The development experience is excellent.
+
+## What I've Learned So Far
+
+- Astro project structure
+- Creating components
+- Using Markdown for content
+- Sharing data between pages
+
+The best part is that the pages load incredibly fast!
+```
+
+## Step 4: Create a Blog Post Layout
+
+Now we need a special layout for our blog posts. Create a new file at `src/layouts/BlogPostLayout.astro`:
+
+```astro
+---
+// src/layouts/BlogPostLayout.astro
+import BlogLayout from './BlogLayout.astro';
+
+const { frontmatter } = Astro.props;
+const { title, date, author, image, alt, tags, description } = frontmatter;
+
+// Format the date
+const formattedDate = new Date(date).toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+});
+---
+
+
+
+
+
+
+
+
+```
+
+## Step 5: Create a Blog Index Page
+
+Now, let's create an index page for all blog posts. Create a new file at `src/pages/blog/index.astro`:
+
+```astro
+---
+// src/pages/blog/index.astro
+import BlogLayout from '../../layouts/BlogLayout.astro';
+import { getCollection } from 'astro:content';
+
+// Collect all Markdown files in the blog directory
+const posts = await Astro.glob('./*.md');
+
+// Sort posts by date (newest first)
+const sortedPosts = posts.sort((a, b) => {
+ return new Date(b.frontmatter.date).valueOf() -
+ new Date(a.frontmatter.date).valueOf();
+});
+---
+
+
+
+
+
+
+```
+
+## Step 6: Create a Home Page
+
+Now, let's create a simple home page. Replace the content of `src/pages/index.astro` with the following:
+
+```astro
+---
+// src/pages/index.astro
+import BlogLayout from '../layouts/BlogLayout.astro';
+
+// Get the latest posts
+const posts = await Astro.glob('./blog/*.md');
+const recentPosts = posts
+ .sort((a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf())
+ .slice(0, 3);
+---
+
+
+
+
Welcome to My Blog
+
A personal blog about web development, technology, and more.
+
+
+
+
+```
+
+## Step 8: Add Images
+
+Create a directory for images at `public/images/` and add the following images:
+- `first-post.jpg` (for your first blog post)
+- `second-post.jpg` (for your second blog post)
+- `profile.jpg` (for your About page)
+
+You can use your own images or download sample images from services like [Unsplash](https://unsplash.com/).
+
+## Step 9: Publish Your Site
+
+There are several ways to publish your Astro blog. We'll use [Netlify](https://www.netlify.com/) here since it offers a generous free tier.
+
+1. Create a Git repository for your project:
+```bash
+git init
+git add .
+git commit -m "Initial commit"
+```
+
+2. Create a repository on GitHub and push your code there
+
+3. Sign in to Netlify or create a new account
+
+4. Click on "New site from Git" and select your GitHub repository
+
+5. Use the following build settings:
+ - Build command: `npm run build`
+ - Publish directory: `dist`
+
+6. Click on "Deploy site"
+
+Netlify will automatically build and publish your site. You'll get a URL like `https://your-site-name.netlify.app` where your blog will be accessible.
+
+## Bonus: Create Tag Pages
+
+As a bonus feature, let's create dynamic pages for tags. Create a new file at `src/pages/tags/[tag].astro`:
+
+```astro
+---
+// src/pages/tags/[tag].astro
+import BlogLayout from '../../layouts/BlogLayout.astro';
+
+export async function getStaticPaths() {
+ const posts = await Astro.glob('../blog/*.md');
+
+ // Collect all tags
+ const allTags = posts.reduce((tags, post) => {
+ const postTags = post.frontmatter.tags || [];
+ postTags.forEach(tag => {
+ if (!tags.includes(tag)) {
+ tags.push(tag);
+ }
+ });
+ return tags;
+ }, []);
+
+ // Create a path for each tag
+ return allTags.map(tag => {
+ // Filter posts that contain this tag
+ const filteredPosts = posts.filter(post =>
+ post.frontmatter.tags && post.frontmatter.tags.includes(tag)
+ );
+
+ return {
+ params: { tag },
+ props: { posts: filteredPosts, tag }
+ };
+ });
+}
+
+const { posts, tag } = Astro.props;
+---
+
+
+
+
+
+
+```
+
+## Congratulations!
+
+You've successfully created a personal blog with Astro and published it! Here are some ideas for further development:
+
+- Add a search function
+- Integrate comments with Disqus or Utterances
+- Create a contact page with a form
+- Implement a dark mode
+- Add analytics to track visits
+
+If you have any questions or need help, don't hesitate to create an issue in the mission's GitHub repository or reach out to the community!
+
+Happy Blogging! 🚀
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/missions/en/vibecoding-mission.mdx b/apps/bauntown/apps/landing/src/content/missions/en/vibecoding-mission.mdx
new file mode 100644
index 000000000..25d068212
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/missions/en/vibecoding-mission.mdx
@@ -0,0 +1,116 @@
+---
+title: "Mission Vibecoding: Create an Intuitive Code Generator"
+description: "Develop a generator that produces creative and intuitive code suggestions based on a 'vibe' input."
+pubDate: 2025-03-30
+difficulty: "intermediate"
+duration: "2-3 weeks"
+skills: ["JavaScript", "AI", "Creative Programming", "UI/UX"]
+image: "/images/tutorials/nobackground/vibecode-bauntown-tutorial.png"
+featured: true
+category: "Vibecoding"
+status: "active"
+participants: ["Max Müller", "Sarah Weber"]
+githubRepo: "bauntown/vibecoding-generator"
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+
+# Mission Vibecoding: Create an Intuitive Code Generator
+
+## Mission Overview
+
+This mission challenges you to develop a code generator that suggests ways to write code based on a mood input (a "vibe"). Think of it as a creative assistant that doesn't just deliver functional code, but also aligns with your personal style and desired aesthetics.
+
+
+
+## Background and Motivation
+
+Programming is often considered a purely logical process, but experienced developers know there's also a creative, artistic component. The way code is written—its structure, naming conventions, levels of abstraction—can have an aesthetic quality that goes well beyond mere functionality.
+
+This mission aims to explore the concept of "Vibecoding"—an approach to programming where intuition, aesthetic preferences, and personal style play just as important a role as technical correctness.
+
+## Mission Objectives
+
+1. **Develop a web application** that accepts user inputs for "vibes" (e.g., "minimalist," "playful," "elegant," "retro")
+2. **Implement a generator** that creates various code snippets based on these vibes
+3. **Create at least three distinct style profiles** representing different programming aesthetics
+4. **Integrate a learning component** that allows the generator to learn from feedback and adapt
+5. **Document the process and philosophy** behind your approach to Vibecoding
+
+## Technical Requirements
+
+### Frontend
+
+- A user-friendly web interface with:
+ - Input field for textual "vibe" descriptions
+ - Visualization of generated code styles
+ - Tools for comparing different styles
+ - Feedback mechanism
+
+### Backend
+
+- A system for interpreting "vibe" inputs
+- A code generation module with various stylistic profiles
+- A database for storing user preferences and feedback
+- Optional: Integration with an LLM for enhanced generation capabilities
+
+### Vibecoding Component
+
+- Implementation of different style profiles (e.g., minimalist, expressive, functional)
+- Algorithms for adapting code structures based on vibes
+- Naming convention generator that matches the chosen style
+- Comment style adjustment based on the vibe
+
+## Challenges
+
+- **The Subjectivity of "Vibes"**: How do you translate vague aesthetic concepts into concrete code?
+- **Balancing Style and Function**: The generated code should not only look good but also work well
+- **Personal Preferences**: Develop a system that can learn individual taste and respond to it
+- **Measuring Success**: How do you evaluate whether generated code actually achieves the desired vibe?
+
+## Resources
+
+- **Code Style Analysis Tools**: JSLint, ESLint, Prettier
+- **NLP Libraries**: for interpreting vibe descriptions
+- **Design Theory Resources**: for developing different aesthetic profiles
+- **Code Examples**: Collections of code in various styles to train your system
+
+## Success Metrics
+
+- The application can generate at least three clearly distinguishable code styles
+- Users can intuitively control the vibes and receive consistent results
+- The generated code is not only stylistically appealing but also functionally correct
+- The system can learn from user feedback and improve generation
+
+## Bonus Challenges
+
+1. **Style Mixology**: Allow users to combine different vibes (e.g., "minimalist with a touch of retro")
+2. **Language Agnosticism**: Expand the generator to work in multiple programming languages
+3. **Code-to-Vibe**: Implement the reverse function—analyze existing code and describe its vibe
+4. **Team Profiles**: Develop a feature that stores different vibes for different team members and merges them
+
+## Submission
+
+Your submission should include:
+
+1. The source code of your Vibecoding generator application
+2. Documentation explaining your approach, challenges, and solutions
+3. Examples of generated code in different styles
+4. A short video or presentation demonstrating your application
+5. A reflection on the philosophy of Vibecoding and its significance for software development
+
+## Timeline
+
+- **Week 1**: Concept development and research on different code aesthetics
+- **Week 2**: Implementation of the basic system and the first style profiles
+- **Week 3**: Refinement, testing, and documentation
+
+## Team
+
+This mission can be completed either individually or in small teams of 2-3 people. For team submissions, it should be clearly documented who was responsible for which aspects of the project.
+
+## Conclusion
+
+The "Mission Vibecoding" challenges you to think beyond the purely functional aspects of programming and explore the expressive, artistic character of code. By developing a generator that can translate different "vibes" into code, you'll develop a deeper understanding of how code functions not just as an instruction for computers, but also as a communication medium between humans.
+
+This mission combines technical skills with creative sensibility and invites you to expand the boundaries of what programming can be. Good luck, and may your vibes be harmonious!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/models/de/compare-models.mdx b/apps/bauntown/apps/landing/src/content/models/de/compare-models.mdx
new file mode 100644
index 000000000..780bdb0da
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/models/de/compare-models.mdx
@@ -0,0 +1,20 @@
+---
+title: "Modelle vergleichen"
+description: "Vergleiche alle verfügbaren KI-Modelle auf einen Blick."
+pubDate: 2025-04-15
+category: "Text"
+featured: false
+author: "BaunTown"
+tags: ["vergleich", "modelle", "KI"]
+image: "/images/ai-model-comparsion-bauntown-custombuildfuture.png"
+---
+
+import ModelsComparisonTable from "../../../components/ModelsComparisonTable.astro"
+
+# KI-Modelle im Vergleich
+
+Diese Übersicht hilft dir, das optimale KI-Modell für deine Anforderungen zu finden. Die Tabelle zeigt wichtige Kennzahlen wie Kosten, Token-Limits und Hosting-Optionen.
+
+
+
+Die angegebenen Kosten beziehen sich auf 1 Million Token und sind in US-Dollar angegeben. Bei der Auswahl eines Modells solltest du neben den Kosten auch die Trainingsdaten-Aktualität und die maximalen Token-Limits berücksichtigen.
diff --git a/apps/bauntown/apps/landing/src/content/models/de/google-gemini.md b/apps/bauntown/apps/landing/src/content/models/de/google-gemini.md
new file mode 100644
index 000000000..c015c223d
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/models/de/google-gemini.md
@@ -0,0 +1,45 @@
+---
+title: "Google Gemini 2.5 Pro: Ein Durchbruch in der KI-Technologie"
+description: "Google hat kürzlich das Gemini 2.5 Pro-Modell vorgestellt, das als das fortschrittlichste KI-Modell des Unternehmens gilt und mit seiner enormen Kontextfenstergröße neue Maßstäbe setzt."
+pubDate: 2025-03-25
+category: "Text"
+featured: true
+author: "BaunTown"
+tags: ["Google", "Gemini", "KI", "Multimodal", "Kontextfenster"]
+image: "/images/models/google-gemini-2.5pro-bauntown.png"
+externalLinks:
+ - title: "Offizielle Google Ankündigung"
+ url: "https://blog.google/technology/google-deepmind/gemini-model-thinking-updates-march-2025/#gemini-2-5-thinking"
+ - title: "Gemini - Ausprobieren"
+ url: "https://gemini.google.com"
+---
+
+Google hat kürzlich das Gemini 2.5 Pro-Modell vorgestellt, das als das fortschrittlichste KI-Modell des Unternehmens gilt. Mit bahnbrechenden Funktionen wie multimodaler Verarbeitung, verbesserter Problemlösungsfähigkeit und einer enormen Kontextfenstergröße von bis zu 2 Millionen Tokens setzt dieses Modell neue Maßstäbe in der KI-Entwicklung. Die Reaktionen auf diese Innovation sind weltweit vielfältig und spiegeln sowohl Begeisterung als auch kritische Reflexion wider.
+
+## Hauptmerkmale des Gemini 2.5 Pro
+
+**Multimodale Fähigkeiten**: Das Modell kann Text, Bilder, Audio und Video gleichzeitig verarbeiten, was es besonders vielseitig macht. Diese Funktion ermöglicht Anwendungen in Bereichen wie Multimedia-Analyse, Bildung und kreativer Inhaltserstellung.
+
+**Erweitertes Kontextfenster**: Mit einem Kontextfenster von 1 Million Tokens (bald 2 Millionen) kann Gemini 2.5 Pro umfangreiche Datenmengen analysieren und über längere Interaktionen hinweg den Überblick behalten. Dies ist besonders nützlich für komplexe Projekte wie die Analyse von Forschungsarbeiten oder großen Codebasen.
+
+**Verbesserte Problemlösung und Logik**: Das Modell ist darauf ausgelegt, Aufgaben schrittweise zu analysieren und präzise Antworten zu liefern. Diese Fähigkeit macht es ideal für Anwendungen in Wissenschaft, Technik und Wirtschaft.
+
+**Optimierte Leistung**: Durch den Einsatz von Reinforcement Learning und Mixture-of-Experts-Techniken ist das Modell nicht nur genauer, sondern auch schneller als seine Vorgänger.
+
+**Fortschritte im Codieren**: Gemini 2.5 Pro kann Code schreiben, debuggen und optimieren, was es zu einem wertvollen Werkzeug für Entwickler macht.
+
+## Globale Reaktionen
+
+Die Einführung von Gemini 2.5 Pro hat weltweit Aufmerksamkeit erregt:
+
+**Begeisterung in der Entwicklergemeinschaft**: Viele Entwickler loben die Geschwindigkeit und Genauigkeit des Modells, insbesondere bei Codierungsaufgaben. Einige berichten, dass sie Projekte, die normalerweise Monate gedauert hätten, in wenigen Stunden abschließen konnten.
+
+**Vergleich mit Konkurrenzmodellen**: In Online-Diskussionen wird Gemini 2.5 Pro oft mit Modellen wie Claude 3.7 oder GPT-4 verglichen. Während Gemini in Bereichen wie Kontextverarbeitung und multimodaler Analyse führend ist, gibt es auch Kritik an spezifischen Schwächen, etwa bei der Bearbeitung einfacher Aufgaben.
+
+**Kritikpunkte**: Einige Nutzer bemängeln, dass das Modell bei sehr großen Kontexten an Genauigkeit verliert oder gelegentlich "übervorsichtig" agiert, indem es Aufgaben ablehnt, die es als unpraktisch einstuft.
+
+**Breitere Verfügbarkeit**: Die Entscheidung von Google, das Modell kostenlos für alle Nutzer zugänglich zu machen (mit Einschränkungen für nicht zahlende Nutzer), wurde positiv aufgenommen und ermöglicht einer größeren Zielgruppe den Zugang zu modernster KI-Technologie.
+
+## Fazit
+
+Gemini 2.5 Pro markiert einen bedeutenden Fortschritt in der KI-Technologie und bietet beeindruckende Funktionen für eine Vielzahl von Anwendungen. Während es weltweit Lob für seine Leistungsfähigkeit erhält, zeigt die Diskussion auch, dass Raum für Verbesserungen bleibt – insbesondere im Vergleich zu anderen führenden Modellen auf dem Markt. Dennoch scheint Google mit diesem Modell einen wichtigen Schritt in Richtung einer noch breiteren Nutzung von KI gemacht zu haben.
diff --git a/apps/bauntown/apps/landing/src/content/models/de/openai-gpt4o.md b/apps/bauntown/apps/landing/src/content/models/de/openai-gpt4o.md
new file mode 100644
index 000000000..96f71db60
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/models/de/openai-gpt4o.md
@@ -0,0 +1,47 @@
+---
+title: "Revolution der KI-Bildgenerierung: OpenAIs GPT-4o setzt neue Maßstäbe"
+description: "OpenAI hat kürzlich sein neuestes Modell, GPT-4o, vorgestellt, das die Bildgenerierung direkt integriert und damit einen bedeutenden Fortschritt in der KI-Technologie markiert."
+pubDate: 2025-03-25
+category: "Bild"
+featured: true
+author: "BaunTown"
+tags: ["GPT-4o", "OpenAI", "KI", "Multimodal", "Bildgenerierung"]
+image: "/images/models/openai-gpt4o-imagemode-bauntown.png"
+externalLinks:
+ - title: "Offizielle OpenAI Ankündigung"
+ url: "https://openai.com/index/introducing-4o-image-generation/"
+ - title: "ChatGPT - Bilder erstellen"
+ url: "https://chat.openai.com"
+ - title: "Sora - OpenAI's Video & Bild Plattform"
+ url: "https://sora.com"
+---
+
+OpenAI hat kürzlich sein neuestes Modell, GPT-4o, vorgestellt, das die Bildgenerierung direkt integriert und damit einen bedeutenden Fortschritt in der KI-Technologie markiert. Dieses Modell kann Bilder basierend auf Textaufforderungen erstellen, hochgeladene Bilder bearbeiten und sogar mehrere Objekte präzise darstellen. Es zeichnet sich durch eine verbesserte Textdarstellung in Bildern aus, ein Bereich, in dem frühere Modelle wie DALL-E oft Schwierigkeiten hatten.
+
+Besonders bemerkenswert ist, dass GPT-4o perfekte Hände rendern kann - ein Problem, mit dem frühere KI-Bildgeneratoren oft zu kämpfen hatten. Die Fähigkeit, anatomisch korrekte und realistische Hände zu erstellen, stellt einen signifikanten Durchbruch dar und ermöglicht wesentlich natürlichere und überzeugendere Bilder.
+
+## Technologische Innovationen
+
+GPT-4o verwendet eine autoregressive Methode zur Bildgenerierung, die sich von der Diffusionsmethode früherer Modelle unterscheidet. Es ermöglicht Nutzern, Bilder durch Dialog zu modifizieren und visuelle Elemente aus hochgeladenen Bildern in neue Kreationen zu integrieren. Beispiele reichen von fotorealistischen Bildern bis hin zu kreativen Darstellungen im Stil von Studio Ghibli oder anderen bekannten Ästhetiken.
+
+Ein bemerkenswertes Feature ist die Integration von C2PA-Metadaten, die kennzeichnen, dass ein Bild von KI generiert wurde. Dies soll Transparenz schaffen und Missbrauch verhindern. Zudem hat OpenAI Sicherheitsmaßnahmen eingeführt, um die Erstellung sensibler oder unangemessener Inhalte zu blockieren.
+
+Obwohl die Weboberfläche von ChatGPT bereits Zugang zur Bildgenerierung bietet, steht die API für Entwickler noch nicht zur Verfügung. OpenAI hat jedoch angekündigt, dass die API in den nächsten Wochen veröffentlicht werden soll, was Entwicklern die Möglichkeit geben wird, diese Technologie in ihre eigenen Anwendungen zu integrieren.
+
+## Globale Reaktionen
+
+Die Veröffentlichung des Modells hat weltweit für Aufsehen gesorgt. Innerhalb einer Stunde nach der Einführung gewann ChatGPT über eine Million neue Nutzer, insbesondere wegen der Möglichkeit, Bilder im Stil von Studio Ghibli zu erstellen. Diese Funktion wurde zunächst nur zahlenden Nutzern angeboten, bevor sie auch für die kostenlose Nutzung freigegeben wurde – allerdings mit Einschränkungen wie einer Begrenzung auf drei Bilder pro Tag.
+
+Die Popularität führte jedoch auch zu Kontroversen. Kritiker äußerten Bedenken hinsichtlich der Auswirkungen auf Künstler und Designer sowie rechtliche Fragen zur Nachahmung bekannter Stile. OpenAI reagierte darauf mit angepassten Moderationsrichtlinien, die unter anderem die Erstellung von Bildern öffentlicher Persönlichkeiten erlauben, solange diese nicht gegen Richtlinien verstoßen.
+
+## Kontroversen und Herausforderungen
+
+Ein viraler Trend mit Studio-Ghibli-Bildern löste rechtliche Diskussionen aus, da Stilreplikationen in einer rechtlichen Grauzone liegen. OpenAI betonte zwar, dass individuelle Künstlerstile nicht nachgeahmt werden dürfen, doch die Debatte um den Schutz geistigen Eigentums bleibt bestehen. Gleichzeitig gibt es Bedenken hinsichtlich der potenziellen Auswirkungen auf Arbeitsplätze in kreativen Branchen.
+
+## Ausblick
+
+Mit GPT-4o hat OpenAI einen neuen Standard für multimodale KI-Modelle gesetzt. Die Fähigkeit, Text und Bilder nahtlos zu kombinieren, eröffnet zahlreiche Anwendungen – von sozialen Medien bis hin zu Geschäftsanwendungen. Besonders beeindruckend ist die Fähigkeit des Modells, Bilder freizustellen, was es zu einem wertvollen Werkzeug für Designer und Mediengestalter macht.
+
+Interessierte Nutzer können bereits jetzt auf [ChatGPT](https://chat.openai.com) zugreifen, um Bilder zu erstellen, während [Sora.com](https://sora.com) eine alternative Oberfläche von OpenAI bietet, die speziell für Bild- und Videoerstellung optimiert ist.
+
+Dennoch bleibt abzuwarten, wie sich rechtliche und ethische Herausforderungen weiterentwickeln und wie andere Unternehmen auf diesen technologischen Fortschritt reagieren werden, besonders wenn die API-Verfügbarkeit in den kommenden Wochen ausgeweitet wird.
diff --git a/apps/bauntown/apps/landing/src/content/models/en/compare-models.mdx b/apps/bauntown/apps/landing/src/content/models/en/compare-models.mdx
new file mode 100644
index 000000000..43129b7fd
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/models/en/compare-models.mdx
@@ -0,0 +1,20 @@
+---
+title: "Compare Models"
+description: "Compare all available AI models at a glance."
+pubDate: 2025-04-15
+category: "Text"
+featured: false
+author: "BaunTown"
+tags: ["comparison", "models", "AI"]
+image: "/images/ai-model-comparsion-bauntown-custombuildfuture.png"
+---
+
+import ModelsComparisonTable from "../../../components/ModelsComparisonTable.astro"
+
+# AI Models Comparison
+
+This overview helps you find the optimal AI model for your requirements. The table shows key metrics such as costs, token limits, and hosting options.
+
+
+
+All costs are listed in US dollars per 1 million tokens. When selecting a model, consider not only the costs but also the training data cutoff date and maximum token limits for your specific use case.
diff --git a/apps/bauntown/apps/landing/src/content/models/en/google-gemini.md b/apps/bauntown/apps/landing/src/content/models/en/google-gemini.md
new file mode 100644
index 000000000..f535feec4
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/models/en/google-gemini.md
@@ -0,0 +1,45 @@
+---
+title: "Google Gemini 2.5 Pro: A Breakthrough in AI Technology"
+description: "Google recently unveiled the Gemini 2.5 Pro model, considered the company's most advanced AI model, setting new standards with its massive context window."
+pubDate: 2025-03-25
+category: "Text"
+featured: true
+author: "BaunTown"
+tags: ["Google", "Gemini", "AI", "Multimodal", "Context Window"]
+image: "/images/models/google-gemini-2.5pro-bauntown.png"
+externalLinks:
+ - title: "Official Google Announcement"
+ url: "https://blog.google/technology/google-deepmind/gemini-model-thinking-updates-march-2025/#gemini-2-5-thinking"
+ - title: "Try Gemini"
+ url: "https://gemini.google.com"
+---
+
+Google recently unveiled the Gemini 2.5 Pro model, considered the company's most advanced AI model. With groundbreaking features such as multimodal processing, improved problem-solving capabilities, and an enormous context window of up to 2 million tokens, this model sets new standards in AI development. Reactions to this innovation are diverse worldwide, reflecting both enthusiasm and critical reflection.
+
+## Key Features of Gemini 2.5 Pro
+
+**Multimodal Capabilities**: The model can process text, images, audio, and video simultaneously, making it particularly versatile. This feature enables applications in areas such as multimedia analysis, education, and creative content creation.
+
+**Extended Context Window**: With a context window of 1 million tokens (soon to be 2 million), Gemini 2.5 Pro can analyze extensive amounts of data and maintain overview across longer interactions. This is especially useful for complex projects such as analyzing research papers or large codebases.
+
+**Enhanced Problem Solving and Logic**: The model is designed to analyze tasks step by step and deliver precise answers. This capability makes it ideal for applications in science, technology, and business.
+
+**Optimized Performance**: Through the use of reinforcement learning and mixture-of-experts techniques, the model is not only more accurate but also faster than its predecessors.
+
+**Advances in Coding**: Gemini 2.5 Pro can write, debug, and optimize code, making it a valuable tool for developers.
+
+## Global Reactions
+
+The introduction of Gemini 2.5 Pro has attracted worldwide attention:
+
+**Enthusiasm in the Developer Community**: Many developers praise the model's speed and accuracy, particularly for coding tasks. Some report that they were able to complete projects that would normally take months in just a few hours.
+
+**Comparison with Competitive Models**: In online discussions, Gemini 2.5 Pro is often compared to models like Claude 3.7 or GPT-4. While Gemini leads in areas such as context processing and multimodal analysis, there is also criticism of specific weaknesses, such as in handling simple tasks.
+
+**Points of Criticism**: Some users criticize that the model loses accuracy with very large contexts or occasionally acts "overly cautious" by rejecting tasks it deems impractical.
+
+**Broader Availability**: Google's decision to make the model freely accessible to all users (with limitations for non-paying users) has been positively received and allows a larger audience access to cutting-edge AI technology.
+
+## Conclusion
+
+Gemini 2.5 Pro marks a significant advance in AI technology and offers impressive features for a variety of applications. While it receives worldwide praise for its capabilities, the discussion also shows that there is room for improvement – particularly in comparison to other leading models on the market. Nevertheless, Google seems to have taken an important step toward even broader use of AI with this model.
diff --git a/apps/bauntown/apps/landing/src/content/models/en/openai-gpt4o.md b/apps/bauntown/apps/landing/src/content/models/en/openai-gpt4o.md
new file mode 100644
index 000000000..c72766c51
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/models/en/openai-gpt4o.md
@@ -0,0 +1,47 @@
+---
+title: "AI Image Generation Revolution: OpenAI's GPT-4o Sets New Standards"
+description: "OpenAI recently unveiled its latest model, GPT-4o, which directly integrates image generation, marking a significant advancement in AI technology."
+pubDate: 2025-03-25
+category: "Bild"
+featured: true
+author: "BaunTown"
+tags: ["GPT-4o", "OpenAI", "AI", "Multimodal", "Image Generation"]
+image: "/images/models/openai-gpt4o-imagemode-bauntown.png"
+externalLinks:
+ - title: "Official OpenAI Announcement"
+ url: "https://openai.com/index/introducing-4o-image-generation/"
+ - title: "ChatGPT - Create Images"
+ url: "https://chat.openai.com"
+ - title: "Sora - OpenAI's Video & Image Platform"
+ url: "https://sora.com"
+---
+
+OpenAI recently unveiled its latest model, GPT-4o, which directly integrates image generation, marking a significant advancement in AI technology. This model can create images based on text prompts, edit uploaded images, and even accurately represent multiple objects. It stands out for its improved text rendering in images, an area where previous models like DALL-E often struggled.
+
+Particularly noteworthy is that GPT-4o can render perfect hands - a problem that earlier AI image generators often struggled with. The ability to create anatomically correct and realistic hands represents a significant breakthrough and enables much more natural and convincing images.
+
+## Technological Innovations
+
+GPT-4o uses an autoregressive method for image generation, which differs from the diffusion method of earlier models. It allows users to modify images through dialogue and integrate visual elements from uploaded images into new creations. Examples range from photorealistic images to creative representations in the style of Studio Ghibli or other well-known aesthetics.
+
+A remarkable feature is the integration of C2PA metadata, which indicates that an image was generated by AI. This is intended to create transparency and prevent misuse. Additionally, OpenAI has introduced safety measures to block the creation of sensitive or inappropriate content.
+
+Although ChatGPT's web interface already provides access to image generation, the API for developers is not yet available. However, OpenAI has announced that the API will be released in the coming weeks, giving developers the opportunity to integrate this technology into their own applications.
+
+## Global Reactions
+
+The release of the model has caused a sensation worldwide. Within an hour of its introduction, ChatGPT gained over a million new users, particularly because of the ability to create images in the style of Studio Ghibli. This feature was initially offered only to paying users before being made available for free use - albeit with restrictions such as a limit of three images per day.
+
+However, the popularity also led to controversies. Critics expressed concerns about the impact on artists and designers, as well as legal questions about the imitation of well-known styles. OpenAI responded with adjusted moderation guidelines, which, among other things, allow the creation of images of public figures as long as they do not violate guidelines.
+
+## Controversies and Challenges
+
+A viral trend with Studio Ghibli images sparked legal discussions, as style replications exist in a legal gray area. While OpenAI emphasized that individual artist styles should not be imitated, the debate about the protection of intellectual property remains. At the same time, there are concerns about the potential impact on jobs in creative industries.
+
+## Outlook
+
+With GPT-4o, OpenAI has set a new standard for multimodal AI models. The ability to seamlessly combine text and images opens up numerous applications - from social media to business applications. Particularly impressive is the model's ability to segment and extract images, making it a valuable tool for designers and media creators.
+
+Interested users can already access [ChatGPT](https://chat.openai.com) to create images, while [Sora.com](https://sora.com) offers an alternative interface from OpenAI that is specifically optimized for image and video creation.
+
+Nevertheless, it remains to be seen how legal and ethical challenges will evolve and how other companies will respond to this technological advancement, especially as API availability expands in the coming weeks.
diff --git a/apps/bauntown/apps/landing/src/content/models/it/compare-models.mdx b/apps/bauntown/apps/landing/src/content/models/it/compare-models.mdx
new file mode 100644
index 000000000..ec5e93770
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/models/it/compare-models.mdx
@@ -0,0 +1,20 @@
+---
+title: "Confronta Modelli"
+description: "Confronta tutti i modelli di IA disponibili a colpo d'occhio."
+pubDate: 2025-04-15
+category: "Text"
+featured: false
+author: "BaunTown"
+tags: ["confronto", "modelli", "AI"]
+image: "/images/models/modelle-vergleich-bauntown.png"
+---
+
+import ModelsComparisonTable from "../../../components/ModelsComparisonTable.astro"
+
+# Confronta Modelli
+
+Qui trovi una tabella di confronto chiara di tutti i modelli disponibili.
+
+
+
+{/* Aggiungi ulteriori spiegazioni o note qui se necessario. */}
diff --git a/apps/bauntown/apps/landing/src/content/models/it/google-gemini.md b/apps/bauntown/apps/landing/src/content/models/it/google-gemini.md
new file mode 100644
index 000000000..732807522
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/models/it/google-gemini.md
@@ -0,0 +1,45 @@
+---
+title: "Google Gemini 2.5 Pro: Una svolta nella tecnologia AI"
+description: "Google ha recentemente presentato il modello Gemini 2.5 Pro, considerato il modello AI più avanzato dell'azienda, stabilendo nuovi standard con la sua enorme finestra di contesto."
+pubDate: 2025-03-25
+category: "Text"
+featured: true
+author: "BaunTown"
+tags: ["Google", "Gemini", "IA", "Multimodale", "Finestra di contesto"]
+image: "/images/models/google-gemini-2.5pro-bauntown.png"
+externalLinks:
+ - title: "Annuncio ufficiale di Google"
+ url: "https://blog.google/technology/google-deepmind/gemini-model-thinking-updates-march-2025/#gemini-2-5-thinking"
+ - title: "Prova Gemini"
+ url: "https://gemini.google.com"
+---
+
+Google ha recentemente presentato il modello Gemini 2.5 Pro, considerato il modello di intelligenza artificiale più avanzato dell'azienda. Con caratteristiche rivoluzionarie come l'elaborazione multimodale, migliori capacità di risoluzione dei problemi e un'enorme finestra di contesto fino a 2 milioni di token, questo modello stabilisce nuovi standard nello sviluppo dell'IA. Le reazioni a questa innovazione sono diverse in tutto il mondo, riflettendo sia entusiasmo che riflessione critica.
+
+## Caratteristiche principali di Gemini 2.5 Pro
+
+**Capacità multimodali**: Il modello può elaborare simultaneamente testo, immagini, audio e video, rendendolo particolarmente versatile. Questa funzionalità consente applicazioni in aree come l'analisi multimediale, l'educazione e la creazione di contenuti creativi.
+
+**Finestra di contesto estesa**: Con una finestra di contesto di 1 milione di token (presto 2 milioni), Gemini 2.5 Pro può analizzare grandi quantità di dati e mantenere una visione d'insieme durante interazioni più lunghe. Questo è particolarmente utile per progetti complessi come l'analisi di documenti di ricerca o grandi basi di codice.
+
+**Migliorata risoluzione dei problemi e logica**: Il modello è progettato per analizzare i compiti passo dopo passo e fornire risposte precise. Questa capacità lo rende ideale per applicazioni in scienza, tecnologia e business.
+
+**Prestazioni ottimizzate**: Attraverso l'uso di reinforcement learning e tecniche di mixture-of-experts, il modello non è solo più accurato ma anche più veloce rispetto ai suoi predecessori.
+
+**Progressi nella codifica**: Gemini 2.5 Pro può scrivere, debuggare e ottimizzare codice, rendendolo uno strumento prezioso per gli sviluppatori.
+
+## Reazioni globali
+
+L'introduzione di Gemini 2.5 Pro ha attirato l'attenzione mondiale:
+
+**Entusiasmo nella comunità degli sviluppatori**: Molti sviluppatori lodano la velocità e l'accuratezza del modello, in particolare per le attività di codifica. Alcuni riferiscono di essere stati in grado di completare progetti che normalmente richiederebbero mesi in poche ore.
+
+**Confronto con modelli concorrenti**: Nelle discussioni online, Gemini 2.5 Pro viene spesso confrontato con modelli come Claude 3.7 o GPT-4. Mentre Gemini è leader in aree come l'elaborazione del contesto e l'analisi multimodale, ci sono anche critiche su debolezze specifiche, come nella gestione di compiti semplici.
+
+**Punti di critica**: Alcuni utenti criticano che il modello perde precisione con contesti molto grandi o occasionalmente agisce in modo "eccessivamente cauto", rifiutando compiti che considera poco pratici.
+
+**Più ampia disponibilità**: La decisione di Google di rendere il modello accessibile gratuitamente a tutti gli utenti (con limitazioni per gli utenti non paganti) è stata accolta positivamente e consente a un pubblico più ampio di accedere alla tecnologia AI all'avanguardia.
+
+## Conclusione
+
+Gemini 2.5 Pro segna un progresso significativo nella tecnologia dell'intelligenza artificiale e offre funzionalità impressionanti per una varietà di applicazioni. Mentre riceve elogi a livello mondiale per le sue capacità, la discussione mostra anche che c'è spazio per miglioramenti – in particolare rispetto ad altri modelli leader sul mercato. Tuttavia, Google sembra aver fatto un passo importante verso un uso ancora più ampio dell'IA con questo modello.
diff --git a/apps/bauntown/apps/landing/src/content/models/it/openai-gpt4o.md b/apps/bauntown/apps/landing/src/content/models/it/openai-gpt4o.md
new file mode 100644
index 000000000..e0edff6cd
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/models/it/openai-gpt4o.md
@@ -0,0 +1,47 @@
+---
+title: "Rivoluzione nella generazione di immagini AI: OpenAI GPT-4o stabilisce nuovi standard"
+description: "OpenAI ha recentemente svelato il suo ultimo modello, GPT-4o, che integra direttamente la generazione di immagini, segnando un significativo avanzamento nella tecnologia AI."
+pubDate: 2025-03-25
+category: "Bild"
+featured: true
+author: "BaunTown"
+tags: ["GPT-4o", "OpenAI", "AI", "Multimodale", "Generazione di immagini"]
+image: "/images/models/openai-gpt4o-imagemode-bauntown.png"
+externalLinks:
+ - title: "Annuncio ufficiale di OpenAI"
+ url: "https://openai.com/index/introducing-4o-image-generation/"
+ - title: "ChatGPT - Crea immagini"
+ url: "https://chat.openai.com"
+ - title: "Sora - Piattaforma video e immagini di OpenAI"
+ url: "https://sora.com"
+---
+
+OpenAI ha recentemente presentato il suo ultimo modello, GPT-4o, che integra direttamente la generazione di immagini, segnando un importante progresso nella tecnologia dell'IA. Questo modello può creare immagini basate su prompt testuali, modificare immagini caricate e persino rappresentare con precisione oggetti multipli. Si distingue per la sua migliore rappresentazione del testo nelle immagini, un'area in cui modelli precedenti come DALL-E spesso avevano difficoltà.
+
+Particolarmente degno di nota è che GPT-4o può rendere mani perfette - un problema con cui i precedenti generatori di immagini AI hanno spesso lottato. La capacità di creare mani anatomicamente corrette e realistiche rappresenta una svolta significativa e consente immagini molto più naturali e convincenti.
+
+## Innovazioni tecnologiche
+
+GPT-4o utilizza un metodo autoregressivo per la generazione di immagini, che differisce dal metodo di diffusione dei modelli precedenti. Permette agli utenti di modificare le immagini attraverso il dialogo e di integrare elementi visivi da immagini caricate in nuove creazioni. Gli esempi vanno da immagini fotorealistiche a rappresentazioni creative nello stile dello Studio Ghibli o di altre estetiche ben note.
+
+Una caratteristica notevole è l'integrazione dei metadati C2PA, che indicano che un'immagine è stata generata dall'IA. Questo serve a creare trasparenza e prevenire abusi. Inoltre, OpenAI ha introdotto misure di sicurezza per bloccare la creazione di contenuti sensibili o inappropriati.
+
+Sebbene l'interfaccia web di ChatGPT fornisca già accesso alla generazione di immagini, l'API per gli sviluppatori non è ancora disponibile. Tuttavia, OpenAI ha annunciato che l'API sarà rilasciata nelle prossime settimane, dando agli sviluppatori l'opportunità di integrare questa tecnologia nelle proprie applicazioni.
+
+## Reazioni globali
+
+Il rilascio del modello ha suscitato sensazione in tutto il mondo. Entro un'ora dalla sua introduzione, ChatGPT ha guadagnato oltre un milione di nuovi utenti, in particolare per la possibilità di creare immagini nello stile dello Studio Ghibli. Questa funzione è stata inizialmente offerta solo agli utenti paganti prima di essere resa disponibile per l'uso gratuito - seppur con restrizioni come un limite di tre immagini al giorno.
+
+Tuttavia, la popolarità ha portato anche a controversie. I critici hanno espresso preoccupazioni sull'impatto su artisti e designer, nonché questioni legali sull'imitazione di stili noti. OpenAI ha risposto con linee guida di moderazione adattate che, tra le altre cose, consentono la creazione di immagini di personaggi pubblici purché non violino le linee guida.
+
+## Controversie e sfide
+
+Una tendenza virale con immagini dello Studio Ghibli ha acceso discussioni legali, poiché le repliche di stile esistono in una zona grigia legale. Sebbene OpenAI abbia sottolineato che gli stili degli artisti individuali non dovrebbero essere imitati, il dibattito sulla protezione della proprietà intellettuale rimane. Allo stesso tempo, ci sono preoccupazioni circa il potenziale impatto sui posti di lavoro nelle industrie creative.
+
+## Prospettive
+
+Con GPT-4o, OpenAI ha stabilito un nuovo standard per i modelli di IA multimodali. La capacità di combinare perfettamente testo e immagini apre numerose applicazioni - dai social media alle applicazioni aziendali. Particolarmente impressionante è la capacità del modello di segmentare ed estrarre immagini, rendendolo uno strumento prezioso per designer e creatori di media.
+
+Gli utenti interessati possono già accedere a [ChatGPT](https://chat.openai.com) per creare immagini, mentre [Sora.com](https://sora.com) offre un'interfaccia alternativa di OpenAI specificamente ottimizzata per la creazione di immagini e video.
+
+Tuttavia, resta da vedere come si evolveranno le sfide legali ed etiche e come altre aziende risponderanno a questo progresso tecnologico, specialmente con l'espansione della disponibilità delle API nelle prossime settimane.
diff --git a/apps/bauntown/apps/landing/src/content/projects/de/bauntown-website.md b/apps/bauntown/apps/landing/src/content/projects/de/bauntown-website.md
new file mode 100644
index 000000000..738d95053
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/projects/de/bauntown-website.md
@@ -0,0 +1,59 @@
+---
+title: "BaunTown"
+description: "Eine Community-Plattform zum Teilen von Wissen, Tools und Ressourcen, um Entwicklern zu helfen, gemeinsam bessere digitale Produkte zu erstellen."
+pubDate: 2024-04-04
+category: "Web"
+featured: true
+status: "active"
+technologies: ["Astro", "TypeScript", "CSS", "Markdown", "Netlify", "Stripe"]
+image: "/images/projects/bauntown-project-bauntown-platform.png"
+author: "Till Schneider"
+githubUrl: "https://github.com/bauntown/website"
+demoUrl: "https://baun.town"
+---
+
+# BaunTown Plattform
+
+BaunTown ist unsere zentrale Wissensaustausch-Plattform, die geschaffen wurde, um die wiederkehrende Herausforderung der Verteilung von Lernmaterialien, Assets und Informationen nach Workshops und Zusammenarbeit zu lösen. Sie dient als Drehscheibe für unsere Community, um auf Tutorials, Tool-Empfehlungen und Projekteinblicke zuzugreifen.
+
+## Die Herausforderung
+
+Nach Workshops und Schulungen standen wir immer wieder vor denselben Problemen:
+- Teilnehmer fragten nach Assets, Dateien und Dokumentation
+- Kein zentraler Ort zur Speicherung und gemeinsamen Nutzung von Materialien
+- Schwierigkeiten bei der Nachverfolgung, wer Zugang zu welchen Ressourcen hat
+- Bedarf an einem Ort, um Neuzugängen unsere Arbeitsmethoden zu zeigen
+
+## Unsere Lösung
+
+BaunTown bietet:
+
+- **Mehrsprachige Inhalte** in Deutsch, Englisch und Italienisch
+- **Statische Website-Architektur** für optimale Performance und SEO
+- **Tool-Empfehlungen** mit Einblicken in unsere Nutzungsweise
+- **Strukturierte Tutorials** mit eingebetteten Ressourcen und Videos
+- **Content-Einreichungssystem** für Community-Beiträge
+- **Newsletter-Integration** für Updates und Ankündigungen
+- **Unterstützungsoptionen** über Stripe für Nachhaltigkeit
+
+## Technische Umsetzung
+
+Die Plattform nutzt einen modernen Tech-Stack:
+- **Astro** für statische Site-Generierung mit minimalem JavaScript
+- **Content Collections** für strukturierte, typsichere Inhalte
+- **Markdown/MDX** für einfache Inhaltserstellung
+- **Netlify Functions** für serverlose Backend-Operationen
+- **Google Workspace Integration** für Datenspeicherung
+- **Stripe** für Zahlungsabwicklung
+- **Plausible Analytics** für datenschutzfreundliches Tracking
+
+## Zukunftsvision
+
+BaunTown wird sich weiterentwickeln mit:
+- Erweiterter Tutorial-Bibliothek zu Entwicklungs- und Design-Themen
+- Detailliertere Projektvorstellungen und Fallstudien
+- Mitgliederprofile für Mitwirkende
+- Verbesserte Community-Funktionen und Diskussionsmöglichkeiten
+- Integration mit unseren anderen Produkten und Dienstleistungen
+
+Die Plattform verkörpert unsere Werte des gemeinschaftlichen Lernens, Bauens und Verdienens - sie bietet eine Grundlage für den Wissensaustausch und demonstriert gleichzeitig die modernen Entwicklungsansätze, für die wir eintreten.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/projects/de/memoro-app.md b/apps/bauntown/apps/landing/src/content/projects/de/memoro-app.md
new file mode 100644
index 000000000..7786b8f4d
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/projects/de/memoro-app.md
@@ -0,0 +1,80 @@
+---
+title: "Memoro"
+description: "KI-gestützte mobile Anwendung zur Umwandlung von Gesprächen und Gedanken in strukturierte Dokumente."
+pubDate: 2024-04-08
+category: "Mobile"
+featured: true
+status: "active"
+technologies: ["React Native", "Expo", "Supabase", "Azure OpenAI", "Azure Speech", "RevenueCat", "PostHog"]
+image: "/images/projects/memoro-project-bauntown-app.png"
+author: "Till Schneider"
+githubUrl: "https://github.com/bauntown/memoro"
+demoUrl: "https://www.memoro.ai"
+---
+
+# Memoro App
+
+Memoro ist unsere führende mobile Anwendung, die die Dokumentation revolutioniert, indem sie gesprochene Gespräche und Gedanken automatisch in strukturierte Dokumente umwandelt und den Nutzern bis zu 75% der Zeit für Dokumentationsaufgaben erspart.
+
+## Die Herausforderung
+
+In der heutigen Arbeitswelt wird Dokumentation immer wichtiger, während gleichzeitig die Zeitressourcen schrumpfen:
+
+- Wachsende Dokumentationsanforderungen in allen Branchen
+- Fachkräftemangel, der effiziente Dokumentation noch wichtiger macht
+- Wertvolle Informationen gehen in unstrukturierten Gesprächen verloren
+- Zeitaufwändige manuelle Transkription und Organisation von Besprechungsnotizen
+- Bedarf an mehrsprachiger Unterstützung in diversen Arbeitsumgebungen
+- Datenschutzbedenken bei bestehenden Dokumentationslösungen
+
+## Unsere Lösung
+
+Memoro adressiert diese Herausforderungen mit unserem innovativen "Speech-to-Form"-System:
+
+- **Mühelose Aufnahme** mit einfacher Ein-Tipp-Steuerung
+- **Intelligente Transkription** mit Sprechererkennung
+- **KI-gestützte Analyse** für automatische Zusammenfassung und Informationsextraktion
+- **Mehrsprachige Unterstützung** mit 24 Sprachen und 2 Dialekten
+- **Branchenspezifische Vorlagen** für verschiedene Anwendungsfälle
+- **Datenschutzorientiertes Design** mit DSGVO-Konformität und EU-basierter Verarbeitung
+- **Formularerstellung** zur Umwandlung unstrukturierter Gespräche in standardisierte Dokumente
+
+## Technische Umsetzung
+
+Die Anwendung nutzt modernste Technologien:
+
+- **React Native mit Expo** für plattformübergreifende mobile Entwicklung
+- **Supabase** für Backend-Dienste und Authentifizierung (Migration von Firebase)
+- **Azure Speech** für hochwertige Audioverarbeitung und Transkription
+- **Azure OpenAI** für kontextbewusste Dokumentenerstellung
+- **RevenueCat** für Abo-Management
+- **PostHog** für datenschutzkonforme Analytik (ersetzt Google Analytics)
+- **Jira** für Projektmanagement und Feature-Entwicklung
+
+Eine wichtige technische Weiterentwicklung war unsere Migration von Firebase zu Supabase, angetrieben durch verbesserte DSGVO-Konformität, stärkere Ausrichtung an Open-Source-Prinzipien und Vorbereitung auf potenzielle Self-Hosting-Optionen in der Zukunft.
+
+## Anwendungsfälle und Wirkung
+
+Memoro dient verschiedenen professionellen Szenarien:
+
+- **Bildungseinrichtungen**: Automatische Erfassung von Vorlesungsinhalten und Diskussionen
+- **Geschäftsbesprechungen**: Erstellung strukturierter Protokolle mit Aufgaben und Entscheidungen
+- **Gesundheitswesen**: Erstellung konformer Patientendokumentation
+- **Bau und Handwerk**: Dokumentation von Baustellenbesichtigungen und Spezifikationen
+- **Kreative Bereiche**: Erfassung von Brainstorming-Sitzungen und Umwandlung in umsetzbare Pläne
+
+Mit über 1.600 registrierten Nutzern, 650 monatlich aktiven Nutzern und mehr als 3.000 aufgezeichneten Stunden hat Memoro unseren Nutzern bereits schätzungsweise 12.000+ Arbeitsstunden erspart.
+
+## Zukünftige Roadmap
+
+Unsere Entwicklung konzentriert sich auf mehrere Schlüsselbereiche:
+
+- **Self-Service-Vorlagenplattform**, die es Nutzern ermöglicht, eigene Formularvorlagen zu erstellen und zu teilen
+- **Unternehmensintegration** mit CRM- und ERP-Systemen
+- **Erweiterte Analytik** für tiefere Einblicke in Gesprächsmuster
+- **Kollaborationsfunktionen** für teambasierte Dokumentenerstellung
+- **On-Premise-Lösungen** für Organisationen mit strengen Datenanforderungen
+
+Wir verbessern außerdem unsere kontextbezogenen Verständnisfähigkeiten, um die Qualität der automatisierten Dokumentation in spezialisierten Domänen und technischen Bereichen weiter zu optimieren.
+
+Memoro repräsentiert unsere Vision für Technologie, die in den Hintergrund tritt und gleichzeitig die menschliche Produktivität steigert - damit Menschen sich auf Gespräche und Ideen konzentrieren können, anstatt auf die Mechanik der Dokumentation.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/projects/en/bauntown-website.md b/apps/bauntown/apps/landing/src/content/projects/en/bauntown-website.md
new file mode 100644
index 000000000..005175b36
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/projects/en/bauntown-website.md
@@ -0,0 +1,59 @@
+---
+title: "BaunTown"
+description: "A community platform for sharing knowledge, tools, and resources to help builders create better digital products together."
+pubDate: 2024-04-04
+category: "Web"
+featured: true
+status: "active"
+technologies: ["Astro", "TypeScript", "CSS", "Markdown", "Netlify", "Stripe"]
+image: "/images/projects/bauntown-project-bauntown-platform.png"
+author: "Till Schneider"
+githubUrl: "https://github.com/bauntown/website"
+demoUrl: "https://baun.town"
+---
+
+# BaunTown Platform
+
+BaunTown is our central knowledge-sharing platform, created to solve the recurring challenge of distributing learning materials, assets, and information after workshops and collaborative sessions. It serves as a hub for our community to access tutorials, tool recommendations, and project insights.
+
+## The Challenge
+
+After hosting workshops and training sessions, we consistently faced the same problems:
+- Participants asking for assets, files, and documentation
+- No centralized place to store and share materials
+- Difficulty tracking who has access to what resources
+- Need for a place to show our working methods to newcomers
+
+## Our Solution
+
+BaunTown provides:
+
+- **Multilingual Content** in German, English, and Italian
+- **Static Site Architecture** for optimal performance and SEO
+- **Tool Recommendations** with insights on how we use them
+- **Structured Tutorials** with embedded resources and videos
+- **Content Submission System** for community contributions
+- **Newsletter Integration** for updates and announcements
+- **Support Options** through Stripe for sustainability
+
+## Technical Implementation
+
+The platform uses a modern tech stack:
+- **Astro** for static site generation with minimal JavaScript
+- **Content Collections** for structured, type-safe content
+- **Markdown/MDX** for easy content creation
+- **Netlify Functions** for serverless backend operations
+- **Google Workspace Integration** for data storage
+- **Stripe** for payment processing
+- **Plausible Analytics** for privacy-friendly usage tracking
+
+## Future Vision
+
+BaunTown will continue to evolve with:
+- Expanded tutorial library covering development and design topics
+- More detailed project showcases and case studies
+- Member profiles for contributors
+- Enhanced community features and discussion capabilities
+- Integration with our other products and services
+
+The platform embodies our values of collaborative learning, building, and earning - providing a foundation for sharing knowledge while demonstrating the modern development approaches we advocate for.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/projects/en/memoro-app.md b/apps/bauntown/apps/landing/src/content/projects/en/memoro-app.md
new file mode 100644
index 000000000..29359b4d4
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/projects/en/memoro-app.md
@@ -0,0 +1,80 @@
+---
+title: "Memoro"
+description: "AI-powered mobile application for transforming conversations and thoughts into structured documents."
+pubDate: 2024-04-08
+category: "Mobile"
+featured: true
+status: "active"
+technologies: ["React Native", "Expo", "Supabase", "Azure OpenAI", "Azure Speech", "RevenueCat", "PostHog"]
+image: "/images/projects/memoro-project-bauntown-app.png"
+author: "Till Schneider"
+githubUrl: "https://github.com/bauntown/memoro"
+demoUrl: "https://www.memoro.ai"
+---
+
+# Memoro App
+
+Memoro is our flagship mobile application that revolutionizes documentation by automatically transforming spoken conversations and thoughts into structured documents, saving users up to 75% of time spent on documentation tasks.
+
+## The Challenge
+
+In today's professional environment, documentation has become increasingly important while time resources continue to shrink:
+
+- Growing documentation requirements across all industries
+- Skilled labor shortages making efficient documentation even more critical
+- Valuable information lost in unstructured conversations
+- Time-consuming manual transcription and organization of meeting notes
+- Need for multilingual support in diverse work environments
+- Privacy concerns with existing documentation solutions
+
+## Our Solution
+
+Memoro addresses these challenges with our innovative "Speech-to-Form" system:
+
+- **Effortless Recording** with simple one-tap controls
+- **Smart Transcription** that recognizes different speakers
+- **AI-powered Analysis** for automatic summarization and information extraction
+- **Multilingual Support** with 24 languages and 2 dialects
+- **Industry-specific Templates** customized for different use cases
+- **Privacy-first Design** with GDPR compliance and EU-based processing
+- **Form Generation** that transforms unstructured conversations into standardized documents
+
+## Technical Implementation
+
+The application leverages cutting-edge technologies:
+
+- **React Native with Expo** for cross-platform mobile development
+- **Supabase** for backend services and authentication (migrating from Firebase)
+- **Azure Speech** for high-quality audio processing and transcription
+- **Azure OpenAI** for context-aware document generation
+- **RevenueCat** for subscription management
+- **PostHog** for privacy-compliant analytics (replacing Google Analytics)
+- **Jira** for project management and feature development
+
+A key technical evolution has been our migration from Firebase to Supabase, driven by enhanced GDPR compliance, closer alignment with open-source principles, and preparing for potential self-hosting options in the future.
+
+## Use Cases and Impact
+
+Memoro serves diverse professional scenarios:
+
+- **Educational Settings**: Automatically capturing lecture content and discussions
+- **Business Meetings**: Generating structured minutes with action items and decisions
+- **Healthcare**: Creating compliant patient documentation
+- **Construction and Trades**: Documenting site visits and specifications
+- **Creative Fields**: Capturing brainstorming sessions and converting to actionable plans
+
+With over 1,600 registered users, 650 monthly active users, and more than 3,000 recorded hours, Memoro has already saved an estimated 12,000+ work hours for our users.
+
+## Future Roadmap
+
+Our development focuses on several key areas:
+
+- **Self-Service Template Platform** allowing users to create and share custom form templates
+- **Enterprise Integration** with CRM and ERP systems
+- **Expanded Analytics** for deeper insights into conversation patterns
+- **Collaboration Features** for team-based document creation
+- **On-premise Solutions** for organizations with strict data sovereignty requirements
+
+We're also enhancing our contextual understanding capabilities to further improve the quality of automated documentation across specialized domains and technical fields.
+
+Memoro represents our vision for technology that fades into the background while amplifying human productivity - letting people focus on conversations and ideas rather than the mechanics of documentation.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/projects/it/bauntown-website.md b/apps/bauntown/apps/landing/src/content/projects/it/bauntown-website.md
new file mode 100644
index 000000000..e15c0fd5f
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/projects/it/bauntown-website.md
@@ -0,0 +1,59 @@
+---
+title: "BaunTown"
+description: "Una piattaforma comunitaria per condividere conoscenze, strumenti e risorse per aiutare i costruttori a creare insieme prodotti digitali migliori."
+pubDate: 2024-04-04
+category: "Web"
+featured: true
+status: "active"
+technologies: ["Astro", "TypeScript", "CSS", "Markdown", "Netlify", "Stripe"]
+image: "/images/projects/bauntown-project-bauntown-platform.png"
+author: "Till Schneider"
+githubUrl: "https://github.com/bauntown/website"
+demoUrl: "https://baun.town"
+---
+
+# Piattaforma BaunTown
+
+BaunTown è la nostra piattaforma centrale per la condivisione delle conoscenze, creata per risolvere la sfida ricorrente della distribuzione di materiali didattici, risorse e informazioni dopo workshop e sessioni collaborative. Serve come hub per la nostra comunità per accedere a tutorial, raccomandazioni di strumenti e approfondimenti sui progetti.
+
+## La Sfida
+
+Dopo aver ospitato workshop e sessioni di formazione, abbiamo costantemente affrontato gli stessi problemi:
+- Partecipanti che chiedevano assets, file e documentazione
+- Nessun luogo centralizzato per archiviare e condividere materiali
+- Difficoltà nel tracciare chi ha accesso a quali risorse
+- Necessità di un luogo per mostrare i nostri metodi di lavoro ai nuovi arrivati
+
+## La Nostra Soluzione
+
+BaunTown offre:
+
+- **Contenuti Multilingue** in tedesco, inglese e italiano
+- **Architettura di Sito Statico** per prestazioni e SEO ottimali
+- **Raccomandazioni di Strumenti** con approfondimenti su come li utilizziamo
+- **Tutorial Strutturati** con risorse e video incorporati
+- **Sistema di Invio Contenuti** per contributi della comunità
+- **Integrazione Newsletter** per aggiornamenti e annunci
+- **Opzioni di Supporto** tramite Stripe per la sostenibilità
+
+## Implementazione Tecnica
+
+La piattaforma utilizza uno stack tecnologico moderno:
+- **Astro** per la generazione di siti statici con JavaScript minimo
+- **Content Collections** per contenuti strutturati e type-safe
+- **Markdown/MDX** per una facile creazione di contenuti
+- **Netlify Functions** per operazioni backend serverless
+- **Integrazione Google Workspace** per l'archiviazione dei dati
+- **Stripe** per l'elaborazione dei pagamenti
+- **Plausible Analytics** per il tracciamento rispettoso della privacy
+
+## Visione Futura
+
+BaunTown continuerà a evolversi con:
+- Libreria di tutorial ampliata che copre argomenti di sviluppo e design
+- Vetrine di progetti più dettagliate e casi di studio
+- Profili dei membri per i contributori
+- Funzionalità comunitarie migliorate e capacità di discussione
+- Integrazione con i nostri altri prodotti e servizi
+
+La piattaforma incarna i nostri valori di apprendimento collaborativo, costruzione e guadagno - fornendo una base per la condivisione delle conoscenze mentre dimostra gli approcci di sviluppo moderni che sosteniamo.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/projects/it/memoro-app.md b/apps/bauntown/apps/landing/src/content/projects/it/memoro-app.md
new file mode 100644
index 000000000..a7b4ac3d6
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/projects/it/memoro-app.md
@@ -0,0 +1,80 @@
+---
+title: "Memoro"
+description: "Applicazione mobile basata su IA per trasformare conversazioni e pensieri in documenti strutturati."
+pubDate: 2024-04-08
+category: "Mobile"
+featured: true
+status: "active"
+technologies: ["React Native", "Expo", "Supabase", "Azure OpenAI", "Azure Speech", "RevenueCat", "PostHog"]
+image: "/images/projects/memoro-project-bauntown-app.png"
+author: "Till Schneider"
+githubUrl: "https://github.com/bauntown/memoro"
+demoUrl: "https://www.memoro.ai"
+---
+
+# App Memoro
+
+Memoro è la nostra applicazione mobile di punta che rivoluziona la documentazione trasformando automaticamente conversazioni e pensieri in documenti strutturati, facendo risparmiare agli utenti fino al 75% del tempo dedicato alle attività di documentazione.
+
+## La Sfida
+
+Nell'ambiente professionale odierno, la documentazione è diventata sempre più importante mentre le risorse di tempo continuano a diminuire:
+
+- Crescenti requisiti di documentazione in tutti i settori
+- Carenza di manodopera qualificata che rende ancora più cruciale una documentazione efficiente
+- Informazioni preziose perse in conversazioni non strutturate
+- Trascrizione manuale e organizzazione dispendiosa in termini di tempo degli appunti delle riunioni
+- Necessità di supporto multilingue in ambienti di lavoro diversificati
+- Preoccupazioni sulla privacy con le soluzioni di documentazione esistenti
+
+## La Nostra Soluzione
+
+Memoro affronta queste sfide con il nostro innovativo sistema "Speech-to-Form":
+
+- **Registrazione senza sforzo** con semplici controlli a un tocco
+- **Trascrizione intelligente** che riconosce i diversi parlanti
+- **Analisi basata su IA** per la sintesi automatica e l'estrazione delle informazioni
+- **Supporto multilingue** con 24 lingue e 2 dialetti
+- **Modelli specifici per settore** personalizzati per diversi casi d'uso
+- **Design orientato alla privacy** con conformità GDPR ed elaborazione basata nell'UE
+- **Generazione di moduli** che trasforma conversazioni non strutturate in documenti standardizzati
+
+## Implementazione Tecnica
+
+L'applicazione sfrutta tecnologie all'avanguardia:
+
+- **React Native con Expo** per lo sviluppo mobile multipiattaforma
+- **Supabase** per servizi backend e autenticazione (in migrazione da Firebase)
+- **Azure Speech** per l'elaborazione audio e la trascrizione di alta qualità
+- **Azure OpenAI** per la generazione di documenti contestualizzati
+- **RevenueCat** per la gestione degli abbonamenti
+- **PostHog** per analisi conformi alla privacy (in sostituzione di Google Analytics)
+- **Jira** per la gestione dei progetti e lo sviluppo delle funzionalità
+
+Un'importante evoluzione tecnica è stata la nostra migrazione da Firebase a Supabase, guidata da una maggiore conformità al GDPR, un maggiore allineamento con i principi open-source e la preparazione per potenziali opzioni di self-hosting in futuro.
+
+## Casi d'Uso e Impatto
+
+Memoro serve diversi scenari professionali:
+
+- **Ambienti educativi**: Cattura automatica dei contenuti delle lezioni e delle discussioni
+- **Riunioni aziendali**: Generazione di verbali strutturati con elementi d'azione e decisioni
+- **Sanità**: Creazione di documentazione conforme per i pazienti
+- **Costruzione e artigianato**: Documentazione di sopralluoghi e specifiche
+- **Campi creativi**: Cattura di sessioni di brainstorming e conversione in piani attuabili
+
+Con oltre 1.600 utenti registrati, 650 utenti attivi mensilmente e più di 3.000 ore registrate, Memoro ha già fatto risparmiare ai nostri utenti circa 12.000+ ore di lavoro.
+
+## Roadmap Futura
+
+Il nostro sviluppo si concentra su diverse aree chiave:
+
+- **Piattaforma self-service per modelli** che consente agli utenti di creare e condividere modelli di moduli personalizzati
+- **Integrazione aziendale** con sistemi CRM ed ERP
+- **Analisi avanzata** per approfondimenti sui modelli di conversazione
+- **Funzionalità di collaborazione** per la creazione di documenti basata sul team
+- **Soluzioni on-premise** per organizzazioni con requisiti rigorosi di sovranità dei dati
+
+Stiamo anche migliorando le nostre capacità di comprensione contestuale per migliorare ulteriormente la qualità della documentazione automatizzata in domini specializzati e campi tecnici.
+
+Memoro rappresenta la nostra visione di una tecnologia che scompare sullo sfondo mentre amplifica la produttività umana - permettendo alle persone di concentrarsi sulle conversazioni e le idee piuttosto che sulla meccanica della documentazione.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/claude-code.md b/apps/bauntown/apps/landing/src/content/tools/de/claude-code.md
new file mode 100644
index 000000000..58af42a35
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/claude-code.md
@@ -0,0 +1,85 @@
+---
+title: 'Claude Code'
+description: 'Revolutionäre KI-basierte Unterstützung für Softwareentwicklung im Terminal'
+pubDate: 2024-06-03
+updatedDate: 2024-06-03
+category: 'Development'
+image: '/images/tools/claudecode-tool-bauntown-coding.png'
+featured: true
+pricing: 'Paid'
+website: 'https://claude.ai/code'
+tags: ['KI', 'Softwareentwicklung', 'Automatisierung', 'Terminal', 'Refactoring']
+externalLinks:
+ - title: 'Anthropic Website'
+ url: 'https://www.anthropic.com/'
+ - title: 'Claude Code Dokumentation'
+ url: 'https://docs.anthropic.com/claude/code'
+---
+
+## Überblick
+
+Claude Code ist ein innovatives Tool, das von Anthropic entwickelt wurde, um Softwareentwickler effizienter zu unterstützen. Es handelt sich um ein agentisches Codierungswerkzeug, das direkt im Terminal arbeitet und natürliche Sprachbefehle nutzt, um Aufgaben wie Refactoring, Dokumentation und Debugging zu automatisieren.
+
+## Was ist Claude Code?
+
+Claude Code integriert sich nahtlos in die Entwicklungsumgebung, ohne zusätzliche Server oder komplexe Konfigurationen. Es bietet Entwicklern die Möglichkeit, ihre Codebasis zu analysieren, zu verbessern und Fehler zu beheben. Die wichtigsten Funktionen umfassen:
+
+- **Code-Refactoring**: Optimierung und Verbesserung der Codebasis mit KI-gestützten Vorschlägen.
+- **Fehlerbehebung**: Identifikation und Lösung von Problemen wie fehlenden Abhängigkeiten oder Leistungsengpässen.
+- **Code-Verständnis**: Beantwortung von Fragen zur Architektur, Logik und den Abhängigkeiten des Codes.
+- **Automatisierte Tests und Linting**: Ausführung von Tests und Verbesserung der Codequalität.
+- **Git-Integration**: Bearbeitung von Commit-Historien, Lösung von Merge-Konflikten und Generierung von Pull Requests.
+
+## Vorteile für Entwickler
+
+Claude Code richtet sich an verschiedene Zielgruppen:
+
+- **Softwareentwickler**: Verbesserung der Codequalität und Wartbarkeit.
+- **Open-Source-Beitragende**: Erleichterung der Arbeit mit unbekannten Codebasen.
+- **DevOps-Ingenieure**: Automatisierung von Codeüberprüfungen und Qualitätssicherungsaufgaben.
+
+## Wie funktioniert Claude Code?
+
+Im Gegensatz zu traditionellen Codierungsassistenten wie GitHub Copilot geht Claude Code über bloße Vorschläge hinaus. Es kann eigenständig Befehle ausführen, Dateien lesen und bearbeiten sowie Fehler identifizieren und beheben. Dabei nutzt es spezialisierte Tools wie:
+
+- **BashTool**: Ausführung von Shell-Befehlen.
+- **FileReadTool & FileEditTool**: Lesen und Bearbeiten von Dateien.
+- **GlobTool & GrepTool**: Suche nach Dateien oder spezifischen Inhalten.
+- **AgentTool**: Delegation komplexer Aufgaben an Unteragenten.
+
+## Praktische Anwendungen
+
+### Refactoring
+
+Claude Code hilft Entwicklern dabei, die Lesbarkeit und Wartbarkeit ihrer Projekte zu verbessern. Es kann beispielsweise Modul-Dokumentationen erstellen oder Kommentare hinzufügen, um den Code verständlicher zu machen.
+
+### Fehlerbehebung
+
+Das Tool analysiert Fehlermeldungen und bietet Lösungen an. Es kann fehlende Importe identifizieren oder Laufzeitfehler beheben. In einem Beispiel fügte Claude Code Kommentare hinzu, um Warnungen zu unterdrücken, ohne die Funktionalität zu beeinträchtigen.
+
+### Automatisierung
+
+Mit seiner Fähigkeit zur eigenständigen Ausführung von Befehlen reduziert Claude Code den Zeitaufwand für repetitive Aufgaben erheblich. Anthropic behauptet, dass Aufgaben, die früher 45 Minuten dauerten, jetzt in Sekunden erledigt werden können.
+
+## Wie wir Claude Code bei BaunTown nutzen
+
+Bei BaunTown setzen wir Claude Code strategisch ein, jedoch mit einem bewussten Blick auf die Kosteneffizienz:
+
+- Wir nutzen Claude Code parallel mit kostengünstigeren Tools wie Windsurf AI oder Cursor, um die täglichen Kosten zu optimieren.
+- Für High-Level-Features und UI-Design-Aufgaben setzen wir bevorzugt auf Claude Code, da es hier die besten Ergebnisse liefert.
+- Bei komplexen Refactoring-Aufgaben oder beim Einarbeiten in unbekannte Codebasen ist Claude Code unser bevorzugtes Tool.
+- Für Routine-Aufgaben und einfachere Entwicklungsarbeiten verwenden wir kostengünstigere Alternativen.
+
+## Preismodell und Kostenmanagement
+
+Claude Code kann je nach Nutzungsintensität zu erheblichen Kosten führen:
+
+- Die Kosten können zwischen 10-70 Dollar pro Tag und Person liegen, abhängig von der Nutzungsintensität und den ausgeführten Aufgaben.
+- Es gibt kein Flat-Rate-Modell, sondern eine nutzungsbasierte Abrechnung.
+- Die Kosten variieren je nach Modellgröße, Tokenlänge und Anzahl der Anfragen.
+
+## Zukunftsperspektiven
+
+Obwohl Claude Code noch in der Vorschauphase ist, zeigt es großes Potenzial für die Transformation der Softwareentwicklung. Es ermöglicht Entwicklern nicht nur Zeitersparnis, sondern auch eine tiefere Integration von KI in den Entwicklungsprozess. Mit zukünftigen Verbesserungen könnte es sogar möglich sein, komplette Projekte autonom zu generieren.
+
+Claude Code markiert einen bedeutenden Schritt in Richtung einer neuen Ära der Softwareentwicklung – einer Ära, in der Entwickler ihre Arbeit durch intelligente Automatisierung auf ein neues Niveau heben können. Trotz der höheren Kosten im Vergleich zu anderen KI-Codierungswerkzeugen bietet es in bestimmten Szenarien einen klaren Mehrwert, der die Investition rechtfertigt.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/claude.md b/apps/bauntown/apps/landing/src/content/tools/de/claude.md
new file mode 100644
index 000000000..862dabe93
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/claude.md
@@ -0,0 +1,76 @@
+---
+title: 'Claude'
+description: 'Fortschrittlicher KI-Assistent von Anthropic für Konversation, Texterstellung und Analyse'
+pubDate: 2024-06-01
+updatedDate: 2024-06-01
+category: 'Development'
+image: '/images/tools/claude-tool-bauntown-coding.png'
+featured: false
+pricing: 'Freemium'
+website: 'https://claude.ai'
+tags: ['KI', 'Texterstellung', 'Produktivität', 'Assistenz', 'Kommunikation']
+externalLinks:
+ - title: 'Claude Dokumentation'
+ url: 'https://docs.anthropic.com/claude/'
+ - title: 'Claude API'
+ url: 'https://docs.anthropic.com/claude/reference/'
+---
+
+## Überblick
+
+Claude ist ein fortschrittlicher KI-Assistent, entwickelt von Anthropic, der für hilfsbereite, harmlose und ehrliche Konversationen konzipiert wurde. Mit seinem Fokus auf Sicherheit und verantwortungsvoller KI-Nutzung bietet Claude eine Vielzahl von Anwendungsfällen, von der Texterstellung über die Datenanalyse bis hin zur kreativen Zusammenarbeit.
+
+## Hauptmerkmale
+
+### Natürliche Konversation
+
+Claude zeichnet sich durch sein natürliches, menschenähnliches Konversationsverhalten aus. Es kann komplexe Anweisungen verstehen, Kontextinformationen über längere Gespräche hinweg behalten und nuancierte Antworten liefern, die auf die spezifischen Bedürfnisse des Nutzers zugeschnitten sind.
+
+### Textgenerierung und -bearbeitung
+
+Einer der Hauptanwendungsfälle für Claude ist die Unterstützung bei der Texterstellung. Es kann bei der Erstellung von Blog-Beiträgen, E-Mails, Berichten, Marketingmaterial und kreativen Inhalten helfen. Claude kann auch bestehenden Text überarbeiten, um Stil, Ton und Klarheit zu verbessern.
+
+### Programmierunterstützung
+
+Claude bietet umfassende Unterstützung für Entwickler, einschließlich der Erklärung von Codekonzepten, der Hilfe bei der Fehlersuche, der Generierung von Code-Beispielen und der Dokumentationserstellung. Es kann mit verschiedenen Programmiersprachen umgehen und bei der Code-Optimierung helfen.
+
+### Informationsverarbeitung und -analyse
+
+Mit der Fähigkeit, große Mengen an Informationen zu verarbeiten, kann Claude bei der Zusammenfassung von Dokumenten, der Extraktion wichtiger Erkenntnisse und der Organisation von Daten helfen. Es kann komplexe Themen erklären und sie in verständliche Konzepte zerlegen.
+
+### Multimodales Verständnis
+
+Die neuesten Versionen von Claude unterstützen multimodale Interaktionen, wodurch der Assistent sowohl Text als auch Bilder verstehen kann. Dies ermöglicht Anwendungsfälle wie die Analyse von visuellen Daten, die Beschreibung von Diagrammen und Grafiken sowie die Arbeit mit Text in Bildern.
+
+## Wie wir Claude bei BaunTown nutzen
+
+Bei BaunTown setzen wir Claude für eine Vielzahl von Aufgaben ein:
+
+- Erstellung und Verbesserung von Dokumentationen und technischen Anleitungen
+- Brainstorming für neue Funktionen und Projekte
+- Unterstützung bei der Code-Entwicklung und Fehlersuche
+- Übersetzung und Lokalisierung von Inhalten für verschiedene Sprachen
+- Zusammenfassung von Meetings und Erstellung von Aktionspunkten
+- Recherche und Analyse für Markttrends und technologische Entwicklungen
+
+## Preismodell
+
+Claude bietet verschiedene Zugriffsoptionen:
+
+- **Claude Free**: Begrenzter Zugriff auf die Web-Oberfläche mit Einschränkungen bei der Nutzungshäufigkeit und Funktionalität.
+- **Claude Pro ($20 pro Monat)**: Prioritätszugriff während Spitzenzeiten, höhere Nutzungslimits und Zugriff auf die neuesten Claude-Modelle.
+- **Claude API**: Nutzungsbasierte Preisgestaltung für Entwickler und Unternehmen, die Claude in ihre Anwendungen integrieren möchten, mit Preisen basierend auf Token-Verbrauch.
+- **Enterprise-Lösungen**: Maßgeschneiderte Preise und Funktionen für Unternehmen mit spezifischen Anforderungen an Sicherheit, Skalierbarkeit und Support.
+
+## Warum wir es empfehlen
+
+Claude hat sich zu einem unschätzbaren Werkzeug in unserem Workflow entwickelt aus folgenden Gründen:
+
+- Die beeindruckende Fähigkeit, komplexe Anweisungen zu verstehen und umzusetzen
+- Der Fokus auf Sicherheit und verantwortungsvolle KI-Nutzung, was für unsere ethischen Standards wichtig ist
+- Die Vielseitigkeit bei der Bewältigung einer breiten Palette von Aufgaben, von der kreativen Erstellung bis zur technischen Unterstützung
+- Die kontinuierliche Verbesserung durch regelmäßige Updates und neue Funktionen
+- Die nahtlose Integration in unsere bestehenden Tools und Workflows durch die API
+- Die Fähigkeit, zeitaufwändige Aufgaben zu automatisieren und dadurch mehr Raum für kreative und strategische Arbeit zu schaffen
+
+Claude ermöglicht es uns, effizienter zu arbeiten, während wir gleichzeitig die Qualität unserer Ausgaben verbessern, was ihn zu einem unverzichtbaren Teil unseres Toolsets macht.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/cursor.md b/apps/bauntown/apps/landing/src/content/tools/de/cursor.md
new file mode 100644
index 000000000..b495c29de
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/cursor.md
@@ -0,0 +1,71 @@
+---
+title: 'Cursor'
+description: 'Ein leistungsstarker Code-Editor mit KI-Integration für schnellere Entwicklung'
+pubDate: 2024-06-18
+updatedDate: 2024-06-18
+category: 'Development'
+image: '/images/tools/cursor-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://cursor.sh'
+tags: ['Entwicklung', 'KI', 'IDE', 'Produktivität']
+externalLinks:
+ - title: 'Cursor Dokumentation'
+ url: 'https://cursor.sh/docs'
+ - title: 'Cursor auf GitHub'
+ url: 'https://github.com/getcursor/cursor'
+---
+
+## Überblick
+
+Cursor ist ein moderner Code-Editor, der auf Visual Studio Code basiert und mit leistungsstarker KI-Unterstützung erweitert wurde. Er integriert fortschrittliche Sprachmodelle, um Codegenerierung, Fehlersuche und intelligente Vorschläge direkt in die Entwicklungsumgebung zu bringen.
+
+## Hauptmerkmale
+
+### KI-gestützte Codegenerierung
+
+Mit Cursor kannst du Code durch natürliche Sprachbeschreibungen generieren lassen. Du beschreibst einfach, was dein Code tun soll, und die KI schlägt entsprechende Implementierungen vor.
+
+### Intelligente Codevervollständigung
+
+Über die traditionelle Autovervollständigung hinaus versteht Cursor den Kontext deines Codes und kann ganze Funktionen oder Methoden vorschlagen, die zu deinem Projekt passen.
+
+### Fehlerdiagnose und -behebung
+
+Bei Fehlern oder Bugs kann Cursor Erklärungen liefern und Lösungsvorschläge machen. Die KI analysiert deinen Code und identifiziert mögliche Probleme und deren Ursachen.
+
+### Chat-Schnittstelle
+
+Die integrierte Chat-Funktion ermöglicht es dir, mit der KI über deinen Code zu diskutieren, Fragen zu stellen oder Erklärungen zu bestimmten Code-Abschnitten zu erhalten.
+
+### VSCode-Kompatibilität
+
+Da Cursor auf VSCode basiert, ist er mit den meisten VSCode-Erweiterungen kompatibel und bietet eine vertraute Benutzeroberfläche für Entwickler, die bereits mit VSCode arbeiten.
+
+## Wie wir Cursor bei BaunTown nutzen
+
+Bei BaunTown setzen wir Cursor ein für:
+
+- Schnelle Prototypentwicklung, um Ideen zügig umzusetzen
+- Komplexe Refactoring-Aufgaben, bei denen die KI beim Verständnis und der Umstrukturierung des Codes hilft
+- Lernzwecke, da die KI exzellente Erklärungen zu Codeabschnitten liefern kann
+- Die Beschleunigung wiederkehrender Entwicklungsaufgaben durch KI-generierte Codefragmente
+
+## Preismodell
+
+Cursor bietet folgende Preisoptionen:
+
+- **Free**: Grundlegende KI-Funktionen mit einer begrenzten Anzahl von Anfragen pro Tag
+- **Pro ($20/Monat)**: Unbegrenzte KI-Anfragen, Zugang zu erweiterten KI-Modellen und zusätzliche Funktionen
+- **Teams**: Unternehmensangebote mit zusätzlichen Verwaltungsfeatures
+
+## Warum wir es empfehlen
+
+Als Entwickler haben wir festgestellt, dass Cursor unsere Produktivität erheblich steigert, insbesondere bei:
+
+- Der Erkundung neuer Bibliotheken oder Frameworks, da die KI praktische Beispiele und Erklärungen liefern kann
+- Dem Schreiben von wiederholenden Codeabschnitten, die die KI größtenteils automatisieren kann
+- Der Fehlersuche, da die KI oft Probleme erkennt, die leicht zu übersehen sind
+- Der Dokumentation und dem Verständnis von vorhandenem Code
+
+Cursor hat die Art und Weise verändert, wie wir Code schreiben, und ermöglicht es uns, uns mehr auf die Problemlösung und weniger auf die Syntax zu konzentrieren.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/discord.md b/apps/bauntown/apps/landing/src/content/tools/de/discord.md
new file mode 100644
index 000000000..06ff1a512
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/discord.md
@@ -0,0 +1,76 @@
+---
+title: 'Discord'
+description: 'Chat- und Community-Plattform für Text-, Sprach- und Videokommunikation'
+pubDate: 2024-06-05
+updatedDate: 2024-06-05
+category: 'Productivity'
+image: '/images/tools/discord-tool-bauntown-coding.png'
+featured: false
+pricing: 'Freemium'
+website: 'https://discord.com'
+tags: ['Kommunikation', 'Community', 'Chat', 'Voice', 'Kollaboration']
+externalLinks:
+ - title: 'Discord Support Center'
+ url: 'https://support.discord.com/'
+ - title: 'Discord Developer Portal'
+ url: 'https://discord.com/developers/docs/intro'
+---
+
+## Überblick
+
+Discord ist eine digitale Kommunikationsplattform, die ursprünglich für Spieler entwickelt wurde, sich aber zu einem vielseitigen Tool für Communities, Teams und Freunde entwickelt hat. Die Plattform kombiniert Text-, Sprach- und Videokommunikation mit Tools für Community-Management und -Engagement.
+
+## Hauptmerkmale
+
+### Server und Kanäle
+
+Discord ist um die Konzepte von Servern und Kanälen herum aufgebaut. Server fungieren als Community-Hubs, während Kanäle innerhalb dieser Server für unterschiedliche Themen, Projekte oder Teams eingerichtet werden können. Diese Struktur ermöglicht eine organisierte Kommunikation auch in großen Gruppen.
+
+### Text-, Sprach- und Videokommunikation
+
+Die Plattform unterstützt verschiedene Kommunikationsformen: Textkanäle für asynchrone Diskussionen und Dokumentation, Sprachkanäle für Live-Gespräche und Video für persönlichere Interaktionen. Die Möglichkeit, Bildschirme zu teilen, macht Discord auch zu einem nützlichen Tool für Zusammenarbeit und Präsentationen.
+
+### Bots und Integrationen
+
+Discord bietet eine umfangreiche API, die die Entwicklung von Bots und Integrationen ermöglicht. Diese können verwendet werden, um Workflows zu automatisieren, Erinnerungen zu senden, Umfragen durchzuführen, Musik zu spielen und vieles mehr. Die wachsende Bot-Ökosystem erweitert die Funktionalität von Discord erheblich.
+
+### Rollen und Berechtigungen
+
+Mit dem Rollen- und Berechtigungssystem von Discord können Server-Administratoren genau steuern, wer Zugriff auf welche Kanäle hat und welche Aktionen ausgeführt werden können. Dies ermöglicht die Schaffung von moderierten Bereichen, privaten Kanälen und hierarchischen Strukturen.
+
+### Community-Engagement
+
+Discord bietet Funktionen wie Reaktionen, Threads, Foren und Events, die das Community-Engagement fördern. Server können öffentlich oder privat sein, und Einladungslinks machen es einfach, neue Mitglieder aufzunehmen.
+
+## Wie wir Discord bei BaunTown nutzen
+
+Bei BaunTown verwenden wir Discord für:
+
+- Community-Management und Mitglieder-Engagement
+- Interne Team-Kommunikation und Projektkoordination
+- Live-Coding-Sessions und Workshops mit Bildschirmfreigabe
+- Beantwortung technischer Fragen und Peer-Support
+- Ankündigungen und Updates zu Projekten
+- Networking und soziale Interaktionen zwischen Community-Mitgliedern
+
+## Preismodell
+
+Discord bietet verschiedene Abonnementoptionen:
+
+- **Free**: Grundlegende Funktionen, einschließlich Server-Erstellung, Text- und Sprachkanäle mit einigen Einschränkungen.
+- **Discord Nitro Basic (2,99 € pro Monat)**: Verbesserte Personalisierungsoptionen und höhere Upload-Grenzen.
+- **Discord Nitro (9,99 € pro Monat)**: Premium-Funktionen wie höhere Videoqualität, größere Upload-Größen, mehr Personalisierungsoptionen und Server-Boosts.
+- **Server Boosts**: Separate Upgrades, die für Server gekauft werden können, um zusätzliche Funktionen freizuschalten.
+
+## Warum wir es empfehlen
+
+Discord hat sich als unverzichtbares Tool für unsere Community-Bildung und Teamzusammenarbeit erwiesen. Wir schätzen besonders:
+
+- Die Flexibilität, sowohl asynchrone als auch Echtzeit-Kommunikation zu unterstützen, was für verteilte Teams ideal ist
+- Die intuitive Benutzeroberfläche, die es neuen Mitgliedern leicht macht, sich zurechtzufinden
+- Die robusten Moderations- und Sicherheitstools zum Schutz unserer Community
+- Die Möglichkeit, Bots für die Automatisierung von Routineaufgaben zu nutzen
+- Die Fähigkeit, Interessengruppen innerhalb derselben Plattform zu verwalten
+- Die kontinuierliche Entwicklung und Hinzufügung neuer Funktionen
+
+Discord hat uns geholfen, eine lebendige, engagierte Community aufzubauen und gleichzeitig unsere internen Kommunikationsabläufe zu optimieren.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/expo.md b/apps/bauntown/apps/landing/src/content/tools/de/expo.md
new file mode 100644
index 000000000..ed1bbbe1b
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/expo.md
@@ -0,0 +1,73 @@
+---
+title: 'Expo'
+description: 'Entwicklungs-Framework und Plattform für universelle React-Anwendungen'
+pubDate: 2024-05-25
+updatedDate: 2024-05-25
+category: 'Development'
+image: '/images/tools/expo-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://expo.dev'
+tags: ['React Native', 'Mobile', 'App-Entwicklung', 'Cross-Platform', 'JavaScript']
+externalLinks:
+ - title: 'Expo Dokumentation'
+ url: 'https://docs.expo.dev/'
+ - title: 'Expo Blog'
+ url: 'https://blog.expo.dev/'
+---
+
+## Überblick
+
+Expo ist ein leistungsstarkes Framework und eine Plattform-Suite für die Entwicklung universeller React-Anwendungen. Es bietet eine Reihe von Tools und Services, die den Prozess der Erstellung, Bereitstellung und schnellen Iteration von iOS-, Android- und Web-Apps mit JavaScript und React vereinfachen.
+
+## Hauptmerkmale
+
+### Expo SDK
+
+Das Expo SDK ist eine umfangreiche Sammlung von nativen APIs und Modulen, die für die React Native-Entwicklung abstrahiert wurden. Es deckt alles von Kamera- und Audiozugriff bis hin zu Push-Benachrichtigungen und In-App-Käufen ab. Dies ermöglicht Entwicklern, auf native Funktionen zuzugreifen, ohne nativen Code schreiben zu müssen.
+
+### Expo Go
+
+Die Expo Go App ermöglicht ein sofortiges Testen von Anwendungen auf physischen Geräten während der Entwicklung. Entwickler können QR-Codes scannen, um ihre Anwendungen auf realen Geräten zu testen, ohne komplexe Build-Prozesse durchlaufen zu müssen. Dies beschleunigt den Entwicklungszyklus erheblich.
+
+### Expo CLI
+
+Die Befehlszeilenschnittstelle von Expo vereinfacht das Erstellen, Testen und Veröffentlichen von Projekten. Mit einem einzelnen Befehl können Entwickler neue Projekte starten, Anwendungen auf verschiedenen Simulatoren testen oder Builds für die Veröffentlichung erstellen.
+
+### EAS Build und Submit
+
+Expo Application Services (EAS) ermöglicht es Entwicklern, native Builds in der Cloud zu erstellen und Anwendungen direkt an App Stores zu übermitteln. Dies beseitigt die Notwendigkeit, lokale Build-Umgebungen einzurichten, und rationalisiert den Veröffentlichungsprozess.
+
+### Updates über die Luft (OTA)
+
+Einer der leistungsstärksten Aspekte von Expo ist die Fähigkeit, JavaScript-Updates direkt an Benutzer zu senden, ohne durch den App Store-Überprüfungsprozess gehen zu müssen. Dies ermöglicht schnelle Fehlerbehebungen und Funktionsaktualisierungen.
+
+## Wie wir Expo bei BaunTown nutzen
+
+Bei BaunTown setzen wir Expo für mehrere mobile Projekte ein:
+
+- Schnelle Prototypisierung neuer App-Ideen
+- Entwicklung und Bereitstellung unserer mobilen Anwendungen
+- Plattformübergreifende Bereitstellung (iOS, Android und Web) mit einem einzigen Codebase
+- Einfache Integration mit unseren bestehenden React-basierten Webprojekten
+- Schnelle Veröffentlichung von Updates für unsere Benutzer
+
+## Preismodell
+
+Expo bietet mehrere Preisoptionen:
+
+- **Free**: Ideal für unabhängige Entwickler und kleine Projekte mit begrenzten Anforderungen. Bietet Zugang zu den Kernfunktionen, jedoch mit bestimmten Einschränkungen.
+- **Production ($499/Monat)**: Für wachsende Teams mit größeren Anforderungen, einschließlich erweiterter Build-Minuten, mehr Push-Benachrichtigungen und priorisiertem Support.
+- **Enterprise**: Für größere Organisationen, die alle Premium-Funktionen mit individueller Unterstützung, SLAs und dedizierten Ressourcen benötigen.
+
+## Warum wir es empfehlen
+
+Expo hat unsere mobile Anwendungsentwicklung revolutioniert aus mehreren Gründen:
+
+- **Entwicklungsgeschwindigkeit**: Mit Expo können wir Anwendungen viel schneller entwickeln und iterieren als mit traditionellen nativen Ansätzen.
+- **Einheitliche Codebasis**: Die Fähigkeit, einen Großteil unseres Codes über Plattformen hinweg wiederzuverwenden, reduziert Entwicklungszeit und Wartungsaufwand erheblich.
+- **Einfacher Einstieg**: Die flache Lernkurve macht es neuen Teammitgliedern leicht, sich einzuarbeiten, besonders wenn sie bereits Erfahrung mit React für das Web haben.
+- **OTA-Updates**: Die Möglichkeit, Anwendungen zu aktualisieren, ohne durch App Store-Überprüfungen zu gehen, beschleunigt unseren Fehlerbehebungs- und Funktionsbereitstellungszyklus.
+- **Vielseitigkeit**: Die Unterstützung für "Bare Workflow" bedeutet, dass wir bei Bedarf native Code-Erweiterungen hinzufügen können, was Flexibilität für komplexere Anwendungen bietet.
+
+Für Teams, die schnell mobile Anwendungen entwickeln und bereitstellen möchten, besonders wenn sie bereits mit dem React-Ökosystem vertraut sind, ist Expo eine ausgezeichnete Wahl, die viele der komplexen Aspekte der nativen App-Entwicklung abstrahiert.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/figma.md b/apps/bauntown/apps/landing/src/content/tools/de/figma.md
new file mode 100644
index 000000000..8f7b967ed
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/figma.md
@@ -0,0 +1,68 @@
+---
+title: 'Figma'
+description: 'Professionelles Designtool für UI/UX, das Kollaboration und Prototyping ermöglicht'
+pubDate: 2024-06-20
+updatedDate: 2024-06-20
+category: 'Design'
+image: '/images/tools/figma-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://www.figma.com'
+tags: ['Design', 'UI/UX', 'Prototyping', 'Kollaboration']
+externalLinks:
+ - title: 'Figma Lernressourcen'
+ url: 'https://help.figma.com/hc/en-us/categories/360002051613-Getting-Started'
+ - title: 'Figma für Anfänger: Tutorial'
+ url: 'https://www.figma.com/resources/learn-design/'
+---
+
+## Überblick
+
+Figma ist ein browserbasiertes Design- und Prototyping-Tool für digitale Projekte. Es ermöglicht Designern und Teams, Benutzeroberflächen (UI), Interaktionen und Prototypen für Websites, Apps und andere digitale Produkte zu erstellen.
+
+## Hauptmerkmale
+
+### Kollaboration in Echtzeit
+
+Einer der größten Vorteile von Figma ist die Möglichkeit zur Echtzeit-Zusammenarbeit. Mehrere Personen können gleichzeitig an derselben Datei arbeiten, was die Teamarbeit erheblich vereinfacht. Kommentare und Anmerkungen ermöglichen eine direkte Kommunikation innerhalb des Designs.
+
+### Komponenten-System
+
+Mit Figmas Komponenten-System können wiederverwendbare Elemente erstellt werden, die konsistent im gesamten Design eingesetzt werden können. Änderungen an einer Komponente werden automatisch überall aktualisiert, was die Wartung großer Designsysteme erleichtert.
+
+### Auto Layout
+
+Diese Funktion ermöglicht es, responsive Designs zu erstellen, die sich automatisch an unterschiedliche Bildschirmgrößen anpassen. Es vereinfacht auch die Anordnung von Elementen, da Abstände und Ausrichtungen automatisch berechnet werden können.
+
+### Prototyping
+
+Figma bietet leistungsstarke Prototyping-Funktionen, mit denen Interaktionen und Übergänge zwischen verschiedenen Bildschirmen erstellt werden können. Dies ermöglicht es, die Benutzererfahrung zu testen, bevor mit der eigentlichen Entwicklung begonnen wird.
+
+### Design-Systeme
+
+Mit Figma können umfassende Design-Systeme erstellt werden, die alle visuellen Elemente einer Marke oder eines Produkts definieren. Dies fördert die Konsistenz über verschiedene Projekte hinweg.
+
+## Wie wir Figma bei BaunTown nutzen
+
+Bei BaunTown verwenden wir Figma für:
+
+- Erstellung und Wartung unseres Designsystems
+- Wireframing neuer Funktionen und Seiten
+- Gestaltung von UI-Komponenten und Layouts
+- Prototypen zur Visualisierung von Benutzerflüssen
+- Kollaboration zwischen Designern und Entwicklern
+- Präsentation von Designkonzepten für Stakeholder
+
+## Preismodell
+
+Figma bietet verschiedene Preisstufen an:
+
+- **Starter (Free)**: Für Einzelpersonen und kleine Teams. Begrenzt auf 3 Figma-Dateien und 3 FigJam-Dateien.
+- **Professional (12$ pro Editor/Monat)**: Für professionelle Teams mit unbegrenzten Dateien und erweiterter Freigabe.
+- **Organization (45$ pro Editor/Monat)**: Für größere Unternehmen mit zusätzlichen Sicherheits- und Verwaltungsfunktionen.
+
+## Warum wir es empfehlen
+
+Figma hat unseren Design-Workflow revolutioniert durch seine Zugänglichkeit (browserbasiert, plattformübergreifend), kollaborative Funktionen und die nahtlose Integration in den Entwicklungsprozess. Es ermöglicht es uns, schneller zu iterieren und engere Zusammenarbeit zwischen Design und Entwicklung zu fördern.
+
+Die intuitive Benutzeroberfläche und die umfangreiche Community mit Vorlagen und Plugins machen Figma zu einem unverzichtbaren Werkzeug in unserem Entwicklungsprozess.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/github.md b/apps/bauntown/apps/landing/src/content/tools/de/github.md
new file mode 100644
index 000000000..687008db7
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/github.md
@@ -0,0 +1,79 @@
+---
+title: 'GitHub'
+description: 'Kollaborative Plattform für Versionskontrolle und gemeinsame Softwareentwicklung'
+pubDate: 2024-05-28
+updatedDate: 2024-05-28
+category: 'Development'
+image: '/images/tools/github-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://github.com'
+tags: ['Versionskontrolle', 'Git', 'Kollaboration', 'Open Source', 'CI/CD']
+externalLinks:
+ - title: 'GitHub Dokumentation'
+ url: 'https://docs.github.com/'
+ - title: 'GitHub Skills'
+ url: 'https://skills.github.com/'
+---
+
+## Überblick
+
+GitHub ist die weltweit führende Plattform für Softwareentwicklung und -kollaboration. Basierend auf dem Git-Versionskontrollsystem bietet GitHub einen zentralen Ort für die gemeinsame Arbeit an Code, die Nachverfolgung von Änderungen und die Verwaltung von Softwareprojekten jeder Größe. Mit über 100 Millionen Entwicklern weltweit und mehr als 400 Millionen Repositories ist GitHub der Standard für moderne Softwareentwicklung.
+
+## Hauptmerkmale
+
+### Repositories & Versionskontrolle
+
+Das Herzstück von GitHub sind Repositories, die als zentrale Speicherorte für Projektdateien dienen. Jede Änderung wird nachverfolgt, was eine detaillierte Nachverfolgung der Geschichte des Projekts ermöglicht. Entwickler können problemlos zu früheren Versionen zurückkehren, Änderungen vergleichen und Konflikte lösen.
+
+### Pull Requests & Code-Reviews
+
+Mit Pull Requests können Entwickler Änderungen vorschlagen, die dann von anderen Teammitgliedern überprüft werden können. Diese Funktion fördert Zusammenarbeit, Qualitätskontrolle und Wissensaustausch. Code-Reviews werden durch integrierte Tools wie differenzielle Code-Ansicht und inline-Kommentare erleichtert.
+
+### Issues & Projektmanagement
+
+GitHub Issues ermöglicht das Nachverfolgen von Bugs, Aufgaben und Funktionsanfragen in einem strukturierten Format. Mit Funktionen wie Etiketten, Meilensteinen und Zuweisung von Personen können Teams Aufgaben effektiv verwalten. Projektboards bieten visuelle Kanban-ähnliche Ansichten für laufende Arbeit.
+
+### GitHub Actions & CI/CD
+
+GitHub Actions automatisiert Workflows direkt im Repository. Entwickler können benutzerdefinierte Workflows für kontinuierliche Integration und kontinuierliche Bereitstellung (CI/CD) erstellen, die automatisch bei bestimmten Ereignissen wie Push oder Pull Requests ausgelöst werden.
+
+### Zusammenarbeit & Transparenz
+
+GitHub fördert Zusammenarbeit durch transparente Prozesse. Jeder kann sehen, wer welche Änderungen vorgenommen hat, wann diese vorgenommen wurden und warum. Diskussionen sind kontextbezogen und direkt an den betreffenden Code gebunden.
+
+### GitHub Copilot
+
+Eine der neuesten Innovationen ist GitHub Copilot, ein KI-gestützter Programmierassistent, der in die Entwicklungsumgebung integriert werden kann und Codevorschläge basierend auf Kommentaren und bestehendem Code macht.
+
+## Wie wir GitHub bei BaunTown nutzen
+
+Bei BaunTown ist GitHub ein zentrales Element unserer Entwicklungsprozesse:
+
+- **Code-Hosting & Versionierung**: Alle unsere Projekte werden in GitHub-Repositories gespeichert und versioniert, vom Website-Quellcode bis zu Mobilanwendungen.
+- **Kollaborative Entwicklung**: Wir verwenden Pull Requests und Code-Reviews, um Qualität zu gewährleisten und gemeinsam an Projekten zu arbeiten.
+- **Projektmanagement**: Issues werden genutzt, um Aufgaben zu verfolgen und zu priorisieren, während Projektboards die Visualisierung des Arbeitsfortschritts ermöglichen.
+- **Automatisierung**: GitHub Actions automatisiert unsere Test-, Build- und Deployment-Prozesse, was manuelle Eingriffe reduziert und Konsistenz erhöht.
+- **Dokumentation**: Wir nutzen GitHub Pages und Markdown-Dateien, um Projektdokumentation direkt neben dem Code zu hosten.
+- **Community-Engagement**: Für unsere Open-Source-Projekte vereinfacht GitHub die Interaktion mit externen Mitwirkenden und macht Projekte leichter zugänglich.
+
+## Preismodell
+
+GitHub bietet verschiedene Preispläne an:
+
+- **Free**: Unbegrenzte öffentliche und private Repositories, bis zu 3 Mitarbeiter für private Repositories, und grundlegende Funktionen. Ideal für persönliche Projekte und kleine Teams.
+- **Team ($4 pro Benutzer/Monat)**: Unbegrenzte Mitarbeiter, erweiterte Berechtigungen und zusätzliche Zusammenarbeitsfunktionen.
+- **Enterprise ($21 pro Benutzer/Monat)**: Erweiterte Sicherheit, Compliance-Features und unternehmensweite Verwaltungstools.
+- **GitHub One**: Maßgeschneiderte Lösung für Großunternehmen mit angepasstem Preismodell.
+
+## Warum wir es empfehlen
+
+GitHub ist mehr als nur ein Tool – es ist ein Ökosystem, das moderne Softwareentwicklungspraktiken ermöglicht und fördert. Wir empfehlen GitHub aus mehreren Gründen:
+
+- **Industriestandard**: GitHub ist der Goldstandard in der Branche, was Zusammenarbeit und Erfahrungsaustausch mit der globalen Entwicklercommunity vereinfacht.
+- **Nahtlose Integration**: Die Integration mit beliebten Tools und Services ist reibungslos, von IDE-Integrationen bis hin zu Verbindungen mit Projekt-Management-Tools.
+- **Skalierbarkeit**: GitHub funktioniert gleichermaßen gut für kleine persönliche Projekte wie für groß angelegte Unternehmensentwicklung.
+- **Kontinuierliche Innovation**: Microsoft's Unterstützung hat das Innovationstempo beschleunigt, mit regelmäßigen neuen Funktionen, die die Plattform kontinuierlich verbessern.
+- **Community**: Die riesige Nutzerbasis bedeutet, dass Unterstützung, Lösungen und Beispiele für fast jedes Problem leicht zu finden sind.
+
+Für Teams jeder Größe bietet GitHub die nötige Infrastruktur, um effizient zusammenzuarbeiten, qualitativ hochwertige Software zu erstellen und kontinuierlich zu liefern.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/google-workspace.md b/apps/bauntown/apps/landing/src/content/tools/de/google-workspace.md
new file mode 100644
index 000000000..c6eaa189a
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/google-workspace.md
@@ -0,0 +1,76 @@
+---
+title: 'Google Workspace'
+description: 'Produktivitäts- und Kollaborationstools für Teams jeder Größe'
+pubDate: 2024-06-10
+updatedDate: 2024-06-10
+category: 'Productivity'
+image: '/images/tools/googleworkspace-tool-bauntown-coding.png'
+featured: false
+pricing: 'Paid'
+website: 'https://workspace.google.com'
+tags: ['Produktivität', 'Kollaboration', 'Cloud', 'E-Mail', 'Dokumente']
+externalLinks:
+ - title: 'Google Workspace Learning Center'
+ url: 'https://support.google.com/a/users'
+ - title: 'Google Workspace Admin Help'
+ url: 'https://support.google.com/a/answer/9212'
+---
+
+## Überblick
+
+Google Workspace (früher G Suite) ist eine Sammlung von Cloud-basierten Produktivitäts- und Kollaborationstools, die von Google entwickelt wurden. Es umfasst Anwendungen wie Gmail, Google Drive, Google Docs, Google Sheets, Google Slides, Google Meet und mehr, die alle darauf ausgelegt sind, die Zusammenarbeit in Teams zu verbessern und die Produktivität zu steigern.
+
+## Hauptmerkmale
+
+### Kommunikationstools
+
+Google Workspace bietet robuste E-Mail-Lösungen mit Gmail für Unternehmen, einschließlich individueller E-Mail-Adressen für Ihre Domain. Mit Google Meet können Teams Videokonferenzen mit Bildschirmfreigabe, Aufnahme und Live-Untertiteln durchführen. Google Chat ermöglicht direkte Nachrichten und Gruppenchats für schnelle Team-Kommunikation.
+
+### Dokumente und Dateispeicher
+
+Mit Google Drive erhalten Teams sicheren Cloud-Speicher für alle ihre Dateien. Google Docs, Sheets und Slides ermöglichen die Erstellung und gemeinsame Bearbeitung von Dokumenten, Tabellen und Präsentationen in Echtzeit. Die automatische Speicherung und umfangreiche Versionsgeschichte sorgen dafür, dass keine Arbeit verloren geht.
+
+### Kalender und Planung
+
+Google Kalender erleichtert die Koordination von Terminen und Meetings mit gemeinsamen Kalendern, automatischen Erinnerungen und einfacher Integration mit anderen Google Workspace-Tools. Die Möglichkeit, Besprechungsräume zu buchen und die Verfügbarkeit von Teammitgliedern zu sehen, macht die Terminplanung effizient.
+
+### Sicherheit und Verwaltung
+
+Google Workspace bietet robuste Sicherheitsfunktionen wie Zwei-Faktor-Authentifizierung, erweiterte Datenverschlüsselung und umfangreiche Administrator-Steuerelemente. Die zentrale Verwaltungskonsole ermöglicht es IT-Administratoren, Benutzer, Geräte und Sicherheitseinstellungen einfach zu verwalten.
+
+### Integration und Erweiterbarkeit
+
+Durch die nahtlose Integration zwischen allen Google Workspace-Anwendungen wird der Arbeitsablauf vereinfacht. Zusätzlich gibt es Hunderte von Drittanbieter-Integrationen und Add-ons, die den Funktionsumfang erweitern. Die Google Workspace Marketplace bietet zahlreiche Apps für spezielle Anforderungen.
+
+## Wie wir Google Workspace bei BaunTown nutzen
+
+Bei BaunTown verwenden wir Google Workspace für:
+
+- Unternehmens-E-Mail-Hosting mit unserer bauntown.com-Domain
+- Gemeinsames Bearbeiten von Projektdokumenten und Präsentationen
+- Datei- und Ressourcenmanagement mit strukturierten Team Drives
+- Virtuelle Meetings und Workshops mit Google Meet
+- Projektplanung und Terminkoordination mit Google Kalender
+- Formularerstellung für Feedback und Datenerfassung
+
+## Preismodell
+
+Google Workspace bietet verschiedene Abonnementpläne:
+
+- **Business Starter (5,75 € pro Benutzer/Monat)**: Grundlegende Geschäfts-E-Mails, 30 GB Speicher, Videokonferenzen und mehr.
+- **Business Standard (11,50 € pro Benutzer/Monat)**: Alles aus Starter plus 2 TB Speicher, erweiterte Meeting-Funktionen und Sicherheitskontrollen.
+- **Business Plus (17,30 € pro Benutzer/Monat)**: Alles aus Standard plus 5 TB Speicher, erweiterte Sicherheits- und Verwaltungsfunktionen.
+- **Enterprise**: Kontaktbasierte Preisgestaltung mit unbegrenztem Speicher und umfassenden Sicherheits- und Compliance-Tools.
+
+## Warum wir es empfehlen
+
+Google Workspace hat sich für uns als unverzichtbar erwiesen, besonders wegen:
+
+- Der nahtlosen Zusammenarbeit in Echtzeit, die es Teams ermöglicht, gleichzeitig an denselben Dokumenten zu arbeiten
+- Der zuverlässigen Cloud-Infrastruktur mit hoher Verfügbarkeit und minimalen Ausfallzeiten
+- Der benutzerfreundlichen Oberfläche, die minimal Training erfordert, da die meisten bereits mit Google-Produkten vertraut sind
+- Der kontinuierlichen Verbesserung durch regelmäßige Updates und neue Funktionen
+- Der starken Mobil-Unterstützung, die es ermöglicht, von überall aus zu arbeiten
+- Der umfassenden Sicherheitsfunktionen zum Schutz sensibler Daten
+
+Google Workspace hat unsere teamübergreifende Kommunikation und Zusammenarbeit erheblich verbessert und bildet das Rückgrat unserer täglichen Arbeitsabläufe.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/memoro.md b/apps/bauntown/apps/landing/src/content/tools/de/memoro.md
new file mode 100644
index 000000000..d2a93998b
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/memoro.md
@@ -0,0 +1,98 @@
+---
+title: 'Memoro'
+description: 'KI-gestützte Speech-to-Form-Anwendung für automatisierte Dokumentation von Gesprächen und Gedanken'
+pubDate: 2024-04-08
+updatedDate: 2024-04-08
+category: 'Productivity'
+image: '/images/tools/memoro-tools-bauntown-app.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://www.memoro.ai/'
+tags: ['KI', 'Dokumentation', 'Spracherkennung', 'Produktivität', 'Mobile App']
+externalLinks:
+ - title: 'Instagram'
+ url: 'https://www.instagram.com/memoroai/'
+ - title: 'LinkedIn'
+ url: 'https://www.linkedin.com/company/memoroai'
+---
+
+## Überblick
+
+Memoro ist eine innovative mobile Anwendung, die mit KI-gestützter Spracherkennung die Dokumentation von Gesprächen und Gedanken revolutioniert. Das Kernelement ist ein "Speech-to-Form-System", das gesprochene Sprache automatisch in strukturierte Dokumente umwandelt und so den Dokumentationsaufwand drastisch reduziert.
+
+## Was ist Memoro?
+
+Memoro wurde als Antwort auf die wachsenden Dokumentationsanforderungen in Unternehmen bei gleichzeitigem Fachkräftemangel entwickelt. Die App ermöglicht die Echtzeit-Dokumentation während der Arbeit - sei es in Meetings, Baubesprechungen, Verkaufsgesprächen oder Interviews. Das Besondere an Memoro ist, dass die Technik im Hintergrund bleibt und sich nahtlos in natürliche Arbeitsabläufe integriert.
+
+Hauptfunktionen:
+
+- **Einfache Aufnahme**: Ein zentraler Aufnahmeknopf zum Starten und Beenden von Aufnahmen
+- **Intelligente Transkription**: Transkribiert das Gesprochene Wort für Wort mit Sprechererkennung
+- **KI-gestützte Analyse**: Fasst den Inhalt zusammen und extrahiert wichtige Informationen wie Aufgaben und Termine
+- **Mehrsprachigkeit**: Unterstützung von 24 Sprachen und 2 Dialekten für Aufnahme, Transkription und Übersetzung
+- **Formulargenerierung**: Wandelt unstrukturierte Gespräche in standardisierte Dokumente um
+- **Branchenspezifische Modi**: Anpassbare Modi für verschiedene Berufsgruppen und Anwendungsfälle
+
+## Vorteile und Anwendungsfälle
+
+Memoro bietet erhebliche Zeitersparnisse von bis zu 75% bei Dokumentationsaufgaben (8-16 Stunden/Woche). Die App eignet sich für verschiedene Anwendungsfälle:
+
+- **Studierende**: Vorlesungsmitschriften, Brainstorming für Abschlussarbeiten
+- **Büroarbeiter**: Meetingprotokolle, E-Mail-Diktate
+- **Handwerker**: Materiallisten, Baubesprechungen
+- **Pflegekräfte**: Maßnahmenplanung, Dokumentation
+- **Marketingexperten**: Interviewführung und -analyse
+- **Kreative**: Ideensammlung und Selbstreflexion
+
+## Wie funktioniert Memoro?
+
+Die Anwendung nutzt modernste KI-Technologien für Spracherkennung und Textanalyse. Der Prozess ist denkbar einfach:
+
+1. Gespräch oder Gedanken mit der App aufnehmen
+2. Die KI transkribiert die Aufnahme und erkennt verschiedene Sprecher
+3. Wichtige Informationen werden automatisch extrahiert und kategorisiert
+4. Die Inhalte werden in strukturierte Formulare oder Dokumente umgewandelt
+5. Die fertigen Dokumente können geteilt oder in andere Systeme exportiert werden
+
+## Technische Details
+
+- **Plattformen**: iOS (Apple App Store) und Android (Google Play Store)
+- **Desktop-Zugang**: Lesefunktion für aufgenommene Memos
+- **Datenspeicherung**: Firebase Cloud mit Servern in Frankfurt, Deutschland
+- **Audioverarbeitung**: Azure Speech, gehostet in Frankfurt
+- **KI-gestützte Analysen**: Azure OpenAI, gehostet in Paris
+- **Datenschutz**: DSGVO-konform mit Ende-zu-Ende-Verschlüsselung
+
+## Wie wir Memoro bei BaunTown nutzen
+
+Bei BaunTown setzen wir Memoro für verschiedene Zwecke ein:
+
+- **Dokumentation von Teammeetings**: Unsere wöchentlichen Besprechungen werden automatisch protokolliert
+- **Erfassung von Projektideen**: Spontane Gedanken und Konzepte werden direkt festgehalten
+- **Kundengespräche**: Besprechungen mit Partnern und Kunden werden strukturiert dokumentiert
+- **Wissensmanagement**: Implizites Wissen wird systematisch erfasst und geteilt
+
+Besonders wertvoll ist für uns die Zeitersparnis und die Möglichkeit, uns während Gesprächen voll auf die Inhalte zu konzentrieren, anstatt nebenbei Notizen machen zu müssen.
+
+## Preismodell
+
+Memoro bietet verschiedene Preisstufen an:
+
+- **Kostenlose Version**: 180 Minuten/Monat, max. 50 Minuten/Aufnahme, 22 Memos/Tag
+- **Plus**: 9€/Monat (600 Minuten/Monat, 100 Minuten/Memo)
+- **Pro**: 23€/Monat (1800 Minuten/Monat, 200 Minuten/Memo)
+- **Ultra**: 42€/Monat (4800 Minuten/Monat, 300 Minuten/Memo)
+
+Bei jährlicher Abrechnung gibt es 20% Rabatt. Für Bildungseinrichtungen und gemeinnützige Organisationen werden Sonderkonditionen angeboten.
+
+## Das Team hinter Memoro
+
+Memoro wurde von einem erfahrenen Team entwickelt:
+
+- **Till Schneider**: Produktdesign & Marketing, erfahrener Filmemacher und Mediendesigner
+- **Tobias Müller**: Technische Leitung, Full-Stack-Entwickler mit Expertise in KI-Systemen
+- **Nils Weiser**: Erfahrener Entwickler mit Schwerpunkt Cloud-Infrastrukturen und Skalierung
+
+## Zukunftsaussichten
+
+Memoro entwickelt sich kontinuierlich weiter. Geplant ist unter anderem die Entwicklung einer Self-Service-Plattform, die es Kunden ermöglicht, eigene Dokumentationsvorlagen zu erstellen und zu teilen, sowie erweiterte Enterprise-Funktionen mit CRM/ERP-Integration.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/netlify.md b/apps/bauntown/apps/landing/src/content/tools/de/netlify.md
new file mode 100644
index 000000000..bfa514b0b
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/netlify.md
@@ -0,0 +1,74 @@
+---
+title: 'Netlify'
+description: 'Eine moderne Hosting-Plattform für statische Websites und serverlose Funktionen'
+pubDate: 2024-06-15
+updatedDate: 2024-06-15
+category: 'Hosting'
+image: '/images/tools/netlify-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://www.netlify.com'
+tags: ['Hosting', 'Serverless', 'CI/CD', 'JAMstack']
+externalLinks:
+ - title: 'Netlify Dokumentation'
+ url: 'https://docs.netlify.com/'
+ - title: 'Netlify Blog'
+ url: 'https://www.netlify.com/blog/'
+---
+
+## Überblick
+
+Netlify ist eine leistungsstarke Plattform für das Hosting von Websites und Web-Anwendungen, die auf statischen Dateien oder serverlosen Funktionen basieren. Es bietet eine umfassende Lösung für moderne Web-Projekte mit automatisierter Bereitstellung, globaler CDN-Verteilung und integrierter CI/CD-Pipeline.
+
+## Hauptmerkmale
+
+### Kontinuierliche Bereitstellung
+
+Netlify verbindet sich direkt mit deinem Git-Repository (GitHub, GitLab, Bitbucket) und stellt automatisch Updates bereit, wenn du Änderungen in deinem Repository vornimmst. Jeder Git-Push löst einen neuen Build aus, wodurch der gesamte Prozess von der Entwicklung bis zur Produktion optimiert wird.
+
+### Serverlose Funktionen
+
+Mit Netlify Functions kannst du Backend-Code ausführen, ohne eigene Server verwalten zu müssen. Diese serverlosen Funktionen sind ideal für API-Endpunkte, Authentifizierung, Formularverarbeitung und andere dynamische Funktionen.
+
+### Edge-Netzwerk und CDN
+
+Netlify nutzt ein globales CDN (Content Delivery Network), um deine Website blitzschnell zu jedem Nutzer weltweit zu bringen. Es bietet automatische SSL-Zertifikate, HTTP/2 und weitere Optimierungen für maximale Performance.
+
+### Formulare und Authentifizierung
+
+Mit Netlify Forms kannst du HTML-Formulare ohne eigenen Server verarbeiten. Netlify Identity bietet ein vollständiges Authentifizierungs- und Benutzerverwaltungssystem für deine Anwendung.
+
+### Branching und Preview-Deployments
+
+Für jeden Pull-Request oder Branch erstellt Netlify automatisch eine dedizierte Vorschauumgebung, in der du Änderungen testen kannst, bevor sie in die Produktion gelangen.
+
+## Wie wir Netlify bei BaunTown nutzen
+
+Bei BaunTown setzen wir Netlify für folgende Zwecke ein:
+
+- Hosting unserer Hauptwebsite, die mit Astro gebaut ist
+- Bereitstellung von Preview-Umgebungen für neue Features
+- Serverlose Funktionen für Kontaktformulare und Newsletter-Anmeldungen
+- Automatisierte Bereitstellungspipeline für regelmäßige Updates
+- A/B-Tests für neue Design-Elemente
+
+## Preismodell
+
+Netlify bietet verschiedene Preisstufen:
+
+- **Starter (Free)**: Perfekt für persönliche Projekte und kleine Websites. Beinhaltet serverlose Funktionen, kontinuierliche Bereitstellung und SSL.
+- **Pro ($19/Monat)**: Für professionelle Websites mit mehr Bandbreite, mehr Funktionen und zusätzlichen Optionen.
+- **Business ($99/Monat)**: Für größere Teams und Unternehmen mit erweiterten Sicherheits- und Kollaborationsfunktionen.
+- **Enterprise**: Maßgeschneiderte Lösungen für große Unternehmen.
+
+## Warum wir es empfehlen
+
+Netlify hat unseren Deployment-Workflow erheblich vereinfacht. Zu den Vorteilen, die wir besonders schätzen, gehören:
+
+- **Einfachheit**: Die Einrichtung einer Website dauert nur wenige Minuten, und die Bereitstellung ist vollständig automatisiert.
+- **Performance**: Das globale CDN-Netzwerk sorgt für schnelle Ladezeiten weltweit.
+- **Entwicklerfreundlichkeit**: Die nahtlose Integration mit Git und die Preview-Deployments beschleunigen den Entwicklungszyklus.
+- **Serverlose Architektur**: Wir können dynamische Funktionen ohne eigene Server implementieren, was die Wartungskosten reduziert.
+- **Skalierbarkeit**: Netlify wächst mit unseren Projekten und bietet zuverlässige Performance auch bei hohem Verkehrsaufkommen.
+
+Ob für kleine persönliche Projekte oder komplexe Unternehmenswebsites - Netlify hat sich als zuverlässige und leistungsstarke Hosting-Lösung bewährt.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/plausible.md b/apps/bauntown/apps/landing/src/content/tools/de/plausible.md
new file mode 100644
index 000000000..1a8557ffe
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/plausible.md
@@ -0,0 +1,81 @@
+---
+title: 'Plausible Analytics'
+description: 'Datenschutzfreundliche und leichtgewichtige Alternative zu Google Analytics'
+pubDate: 2024-05-25
+updatedDate: 2024-05-25
+category: 'Productivity'
+image: '/images/tools/plausible-tool-bauntown-coding.png'
+featured: false
+pricing: 'Paid'
+website: 'https://plausible.io'
+tags: ['Analytics', 'Datenschutz', 'Webentwicklung', 'DSGVO', 'Open Source']
+externalLinks:
+ - title: 'Plausible Dokumentation'
+ url: 'https://plausible.io/docs'
+ - title: 'Plausible auf GitHub'
+ url: 'https://github.com/plausible/analytics'
+---
+
+## Überblick
+
+Plausible Analytics ist eine leichtgewichtige und datenschutzfreundliche Alternative zu traditionellen Webanalyse-Tools wie Google Analytics. Es wurde mit dem Ziel entwickelt, eine einfache, transparente und DSGVO-konforme Möglichkeit zu bieten, Websitebesuche zu verfolgen, ohne dabei die Privatsphäre der Benutzer zu beeinträchtigen oder die Ladezeiten der Website zu verlängern.
+
+## Hauptmerkmale
+
+### Datenschutzorientiert
+
+Plausible wurde von Grund auf datenschutzorientiert entwickelt. Es sammelt keine persönlich identifizierbaren Informationen, verwendet keine Cookies und verfolgt Benutzer nicht über verschiedene Websites hinweg. Dies bedeutet, dass in den meisten Fällen keine Cookie-Banner erforderlich sind und die Plattform vollständig DSGVO-, CCPA- und PECR-konform ist.
+
+### Offener und transparenter Ansatz
+
+Als Open-Source-Projekt ist der gesamte Quellcode von Plausible auf GitHub verfügbar. Dies sorgt für Transparenz in Bezug darauf, welche Daten gesammelt werden und wie sie verarbeitet werden. Nutzer haben die Möglichkeit, Plausible selbst zu hosten oder den offiziellen Cloud-Service zu nutzen.
+
+### Leichtgewichtige Implementierung
+
+Der Tracking-Skript von Plausible ist weniger als 1 KB groß, im Vergleich zu mehr als 45 KB bei Google Analytics. Dies trägt dazu bei, die Website-Performance zu verbessern und die Ladezeiten zu reduzieren, was sich positiv auf SEO und Benutzererfahrung auswirken kann.
+
+### Einfach zu verstehende Metriken
+
+Plausible bietet ein übersichtliches und leicht verständliches Dashboard, das die wichtigsten Webanalyse-Metriken wie Seitenaufrufe, Referrer, Top-Seiten und Besucherquellen anzeigt. Es verzichtet bewusst auf übermäßig komplexe Daten und konzentriert sich auf das Wesentliche.
+
+### Gemeinsame Dashboards
+
+Mit Plausible können Dashboards einfach mit Teammitgliedern oder Kunden geteilt werden, ohne dass Passwörter geteilt werden müssen. Jedes Dashboard hat eine eindeutige, aber nicht erratbare URL, die mit relevanten Personen geteilt werden kann. Optional können Dashboards auch passwortgeschützt werden.
+
+### Benutzerdefinierte Ereignisse und Ziele
+
+Die Plattform unterstützt benutzerdefinierte Ereignisse zum Tracking von Conversions und Zielen, wie z.B. Newsletter-Anmeldungen, Downloads oder abgeschlossene Einkäufe. Dies ermöglicht ein detaillierteres Verständnis des Benutzerverhaltens auf der Website.
+
+## Wie wir Plausible bei BaunTown nutzen
+
+Bei BaunTown setzen wir Plausible Analytics für verschiedene Zwecke ein:
+
+- **Website-Performance-Messung**: Tracking von Besucherzahlen, Verweildauer und Absprungraten, um die Effektivität unserer Website zu bewerten.
+- **Content-Strategie-Optimierung**: Identifizierung beliebter Inhalte und Seiten, um unsere Content-Strategie zu verbessern.
+- **Marketing-Kampagnen-Analyse**: Messung des Erfolgs von Marketing-Kampagnen durch benutzerdefinierte Ereignisse und UTM-Parameter.
+- **Referrer-Tracking**: Verständnis darüber, woher unsere Besucher kommen und welche externen Quellen am effektivsten sind.
+- **Geräte- und Browseranalyse**: Einblick in die technischen Aspekte unserer Besucher, um die Kompatibilität zu verbessern.
+- **Öffentliche Transparenz**: Teilen unserer Analysen mit der Community, um Offenheit und Transparenz zu fördern.
+
+## Preismodell
+
+Plausible bietet ein nutzungsbasiertes Preismodell:
+
+- **Starter ($9/Monat)**: Für bis zu 10.000 Seitenaufrufe pro Monat, inklusive unbegrenzter Websites und Teammitglieder.
+- **Growth ($19/Monat)**: Für bis zu 100.000 Seitenaufrufe pro Monat.
+- **Business ($69/Monat)**: Für bis zu 1 Million Seitenaufrufe pro Monat.
+- **Enterprise**: Maßgeschneiderte Pläne für Websites mit höherem Verkehr.
+
+Alle Pläne bieten einen 30-tägigen kostenlosen Testzeitraum ohne Kreditkartenangabe. Für selbstgehostete Installationen fallen keine Gebühren an, jedoch muss die Infrastruktur selbst verwaltet werden.
+
+## Warum wir es empfehlen
+
+Wir empfehlen Plausible aus mehreren Gründen:
+
+- **Datenschutz-Compliance**: In einer Zeit, in der der Datenschutz immer wichtiger wird, bietet Plausible eine rechtlich sichere Lösung, die keine Cookie-Banner erfordert.
+- **Performance-Vorteile**: Der leichtgewichtige Ansatz verbessert die Website-Performance, was sowohl für Benutzer als auch für SEO von Vorteil ist.
+- **Benutzerfreundlichkeit**: Das Dashboard ist intuitiv und liefert die wichtigsten Informationen auf einen Blick, ohne überwältigend zu sein.
+- **Transparenz**: Als Open-Source-Plattform bietet Plausible Einblick in die Funktionsweise, was Vertrauen schafft.
+- **Ethische Alternative**: Plausible stellt eine ethischere Alternative zu den datengetriebenen, werbezentrierten Modellen der großen Tech-Unternehmen dar.
+
+Für Website-Betreiber, die eine datenschutzfreundliche, einfache und effektive Analyseplattform suchen, ist Plausible eine ausgezeichnete Wahl, die technische Effizienz mit ethischen Grundsätzen verbindet.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/revenuecat.md b/apps/bauntown/apps/landing/src/content/tools/de/revenuecat.md
new file mode 100644
index 000000000..460e1e039
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/revenuecat.md
@@ -0,0 +1,79 @@
+---
+title: 'RevenueCat'
+description: 'Plattform für In-App-Abonnements und Kaufverwaltung in mobilen Apps'
+pubDate: 2024-05-22
+updatedDate: 2024-05-22
+category: 'Development'
+image: '/images/tools/revenuecat-tool-bauntown-coding.png'
+featured: false
+pricing: 'Freemium'
+website: 'https://www.revenuecat.com/'
+tags: ['Mobil', 'In-App-Käufe', 'Abonnements', 'Monetarisierung', 'Entwicklung']
+externalLinks:
+ - title: 'RevenueCat Dokumentation'
+ url: 'https://docs.revenuecat.com/'
+ - title: 'RevenueCat SDK GitHub'
+ url: 'https://github.com/RevenueCat/purchases-ios'
+---
+
+## Überblick
+
+RevenueCat ist eine leistungsstarke Plattform, die die Implementierung, Verwaltung und Optimierung von In-App-Käufen und Abonnements in mobilen Apps erheblich vereinfacht. Sie dient als Backend-as-a-Service für In-App-Käufe und bietet eine einheitliche API für den Umgang mit App Store-Mechanismen über iOS, Android und verschiedene Cross-Platform-Frameworks hinweg.
+
+## Hauptmerkmale
+
+### Plattformübergreifende Integration
+
+RevenueCat bietet eine einheitliche API für iOS, Android, React Native, Flutter, Unity, Cordova und mehr. Dies ermöglicht Entwicklern, denselben Code für In-App-Käufe auf verschiedenen Plattformen zu verwenden, was die Entwicklung und Wartung erheblich vereinfacht.
+
+### Abonnementverwaltung
+
+Die Plattform automatisiert komplexe Aufgaben wie Testzeitraum-Konvertierungen, Verlängerungen, Rückerstattungen und Abo-Upgrades. Sie verfolgt den Abonnementstatus von Benutzern in Echtzeit und synchronisiert Daten zwischen App Store, Google Play und Ihrer App.
+
+### Entitlements-API
+
+Mit RevenueCat können Entwickler produktbezogene Berechtigungen (Entitlements) definieren, die unabhängig von spezifischen Store-Produkten sind. Dies ermöglicht eine flexiblere Produktgestaltung und einfachere A/B-Tests ohne App-Updates.
+
+### Webhooks und Integrationen
+
+Die Plattform lässt sich mit Business-Tools wie Stripe, Adjust, AppsFlyer, Mixpanel, Segment und vielen anderen integrieren. Webhooks können bei Abonnement-Ereignissen ausgelöst werden, um eigene Systeme zu aktualisieren oder Marketing-Aktionen auszulösen.
+
+### Analytik-Dashboard
+
+RevenueCat bietet detaillierte Einblicke in Kennzahlen wie monatlich wiederkehrende Einnahmen (MRR), Abonnentenzahlen, Konversionsraten und Abwanderungsraten. Das Dashboard ermöglicht die Nachverfolgung der Performance über verschiedene Plattformen und Produkte hinweg.
+
+### Kundenportal
+
+Mit RevenueCat können Entwickler ein benutzerdefiniertes Kundenportal einrichten, in dem Kunden ihre Abonnements selbst verwalten können. Dies reduziert Support-Anfragen und verbessert die Kundenzufriedenheit.
+
+## Wie wir RevenueCat bei BaunTown nutzen
+
+Bei BaunTown setzen wir RevenueCat für mehrere mobile App-Projekte ein:
+
+- **Vereinfachte Abo-Implementierung**: Wir verwenden die SDKs von RevenueCat, um Abonnements und In-App-Käufe schnell in unsere Apps zu implementieren.
+- **Cross-Platform-Konsistenz**: Bei Apps, die sowohl für iOS als auch Android verfügbar sind, nutzen wir RevenueCat, um eine einheitliche Kauferfahrung zu gewährleisten.
+- **A/B-Preistests**: Mit der Entitlements-API führen wir Preistests durch, um die optimale Preisgestaltung zu finden, ohne App-Updates veröffentlichen zu müssen.
+- **Umsatzanalyse**: Wir nutzen das Analytics-Dashboard, um Einnahmen, Konversionsraten und Abonnentenbindung zu verfolgen und zu optimieren.
+- **Integrationen mit Marketing-Tools**: Durch die Integration mit unseren Analytics- und CRM-Systemen können wir gezielte Marketing-Kampagnen für verschiedene Benutzergruppen durchführen.
+
+## Preismodell
+
+RevenueCat bietet drei Hauptpreisstufen:
+
+- **Free**: Für Apps mit einem Jahresumsatz unter $10.000, mit grundlegenden Funktionen für Starts und kleinen Apps.
+- **Starter ($119/Monat)**: Für Apps mit einem Jahresumsatz zwischen $10.000 und $400.000, mit erweiterten Features wie Webhooks, Integrationen und Kundensupport.
+- **Pro ($499/Monat)**: Für größere Apps mit einem Jahresumsatz über $400.000, mit zusätzlichen Funktionen wie mehreren API-Keys, höheren Ratenbegrenzungen und priorisiertem Support.
+
+Alle Pläne bieten eine prozentuale Gebühr von 0-1,9% des Umsatzes, abhängig vom gewählten Plan und dem generierten Umsatz.
+
+## Warum wir es empfehlen
+
+RevenueCat hat sich für uns aus mehreren Gründen als unverzichtbar erwiesen:
+
+- **Zeit- und Ressourceneinsparung**: Die Implementierung und Wartung von In-App-Käufen ohne RevenueCat kann Wochen an Entwicklungszeit in Anspruch nehmen und erfordert fortlaufende Aufmerksamkeit für Server-Updates und API-Änderungen.
+- **Zuverlässigkeit**: RevenueCat bietet eine zuverlässige Infrastruktur mit einer Verfügbarkeit von 99,9%, was für geschäftskritische Transaktionen entscheidend ist.
+- **Bessere Einblicke**: Das Analytics-Dashboard bietet wertvolle Einblicke in das Benutzerverhalten und die Umsatzströme, die mit den nativen App Store-Tools allein nicht möglich wären.
+- **Flexibilität bei der Produktgestaltung**: Die Entitlements-API ermöglicht es uns, Produktangebote anzupassen und zu experimentieren, ohne App-Updates einreichen zu müssen.
+- **Skalierbarkeit**: Die Plattform wächst mit unseren Apps und bietet robuste Lösungen sowohl für kleine als auch für große Anwendungen.
+
+Für Entwickler, die In-App-Käufe oder Abonnements in ihre mobilen Apps implementieren möchten, bietet RevenueCat einen erheblichen Mehrwert und kann den Entwicklungsaufwand dramatisch reduzieren, während es gleichzeitig Einblicke und Flexibilität bietet, die für die Optimierung der App-Monetarisierung entscheidend sind.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/testflight.md b/apps/bauntown/apps/landing/src/content/tools/de/testflight.md
new file mode 100644
index 000000000..9de106d09
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/testflight.md
@@ -0,0 +1,69 @@
+---
+title: 'TestFlight'
+description: 'Apples Beta-Testing-Plattform für iOS, iPadOS, macOS, tvOS und watchOS Apps'
+pubDate: 2024-05-20
+updatedDate: 2024-05-20
+category: 'Development'
+image: '/images/tools/testflight-tool-bauntown-coding.png'
+featured: false
+pricing: 'Free'
+website: 'https://developer.apple.com/testflight/'
+tags: ['Testing', 'iOS', 'App-Entwicklung', 'Beta', 'Apple']
+externalLinks:
+ - title: 'TestFlight Dokumentation'
+ url: 'https://developer.apple.com/documentation/testflight'
+ - title: 'App Store Connect Hilfe'
+ url: 'https://help.apple.com/app-store-connect/'
+---
+
+## Überblick
+
+TestFlight ist Apples offizielle Beta-Testing-Plattform, die es Entwicklern ermöglicht, ihre iOS, iPadOS, macOS, tvOS und watchOS Apps an Tester zu verteilen, bevor sie im App Store veröffentlicht werden. Es bietet eine gestraffte Methode, um Feedback zu sammeln, Bugs zu identifizieren und die Benutzererfahrung zu optimieren, bevor eine App offiziell veröffentlicht wird.
+
+## Hauptmerkmale
+
+### Einfache Verteilung
+
+TestFlight vereinfacht die Verteilung von Beta-Versionen durch ein einfaches Einladungssystem. Entwickler können Tester über E-Mail einladen oder öffentliche Links erstellen, die bis zu 10.000 externe Tester unterstützen. Für interne Tests innerhalb eines Entwicklerteams können bis zu 100 Mitglieder der Apple Developer-Organisation teilnehmen.
+
+### Versions-Management
+
+Die Plattform ermöglicht es Entwicklern, mehrere Builds einer App gleichzeitig zu verwalten. Verschiedene Versionen können an unterschiedliche Testergruppen verteilt werden, was A/B-Tests und gezielte Funktionsevaluierung ermöglicht. TestFlight bietet detaillierte Build-Informationen und gibt Entwicklern die Kontrolle darüber, welche Versionen für welche Tester verfügbar sind.
+
+### Feedback-Sammlung
+
+TestFlight enthält integrierte Feedback-Mechanismen, die es Testern ermöglichen, einfach Probleme zu melden, Screenshots zu teilen und Kommentare an Entwickler zu senden. Diese direkte Feedback-Schleife ist entscheidend für die Identifizierung von Benutzerproblemen und die Verfeinerung der App vor der öffentlichen Veröffentlichung.
+
+### Automatische Installationsbenachrichtigungen
+
+Wenn neue Build-Versionen verfügbar sind, sendet TestFlight automatisch Benachrichtigungen an Tester. Dies stellt sicher, dass Tester immer Zugriff auf die neueste Version der App haben und fördert kontinuierliches Feedback während des Entwicklungsprozesses.
+
+### Ablaufmanagement
+
+TestFlight-Builds laufen nach 90 Tagen automatisch ab, um sicherzustellen, dass Tester nicht langfristig veraltete Versionen verwenden. Entwickler können den Zugang zu bestimmten Builds nach Bedarf auch vor diesem Zeitraum entfernen oder aktualisieren.
+
+## Wie wir TestFlight bei BaunTown nutzen
+
+Bei BaunTown integrieren wir TestFlight in unseren Entwicklungsprozess auf folgende Weise:
+
+- Interne Tests für unser Entwicklungsteam in den frühen Phasen neuer Funktionen
+- Beta-Tests mit ausgewählten Benutzergruppen vor größeren Updates
+- Sammlung von Feedback zur Benutzeroberfläche und Benutzererfahrung
+- Validierung der App-Performance auf verschiedenen Geräten und iOS-Versionen
+- Vorveröffentlichungs-QA-Tests für Stabilität und Funktionalität
+
+## Preismodell
+
+TestFlight ist ein kostenloser Service von Apple für alle registrierten Apple Developer-Programmteilnehmer. Die einzigen damit verbundenen Kosten sind die jährliche Apple Developer-Programmgebühr (99 USD für Einzelpersonen oder 299 USD für Organisationen).
+
+## Warum wir es empfehlen
+
+TestFlight hat sich als unverzichtbares Werkzeug in unserem iOS-Entwicklungsprozess erwiesen aus mehreren Gründen:
+
+- **Nahtlose Integration**: Als Apple-Produkt integriert sich TestFlight nahtlos in das Apple-Entwicklerökosystem, einschließlich App Store Connect und Xcode.
+- **Benutzerfreundlichkeit**: Der Einladungsprozess und die Installation von Beta-Apps sind für Tester unkompliziert, was zu höheren Teilnahmeraten führt.
+- **Stabilitätstests**: Die Fähigkeit, unsere Apps auf einer Vielzahl von echten Geräten zu testen, hilft, gerätespezifische Probleme zu identifizieren, die in simulierten Umgebungen möglicherweise nicht auftreten.
+- **Zuverlässige Bereitstellung**: Das System von Apple stellt sicher, dass Updates zuverlässig an Tester verteilt werden, mit minimalem Verwaltungsaufwand für das Entwicklungsteam.
+- **Compliance und Sicherheit**: Die Plattform erfüllt die strengen Sicherheits- und Datenschutzanforderungen von Apple, was für die Verteilung von Software an externe Tester wichtig ist.
+
+Für jedes Team, das iOS-Apps entwickelt, ist TestFlight zu einem Standard-Tool geworden, das den Übergang von der Entwicklung zur Produktion vereinfacht und sicherstellt, dass Apps gründlich getestet werden, bevor sie im App Store für die Öffentlichkeit zugänglich gemacht werden.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/de/windsurf-ai.md b/apps/bauntown/apps/landing/src/content/tools/de/windsurf-ai.md
new file mode 100644
index 000000000..041cd9569
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/de/windsurf-ai.md
@@ -0,0 +1,101 @@
+---
+title: 'Windsurf AI'
+description: 'Eine Revolution in der Softwareentwicklung durch KI-gestützte Entwicklungsumgebung'
+pubDate: 2024-05-18
+updatedDate: 2024-05-18
+category: 'Development'
+image: '/images/tools/windsurf-ide-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://windsurf.ai'
+tags: ['KI', 'IDE', 'Softwareentwicklung', 'Code-Generierung', 'Produktivität']
+externalLinks:
+ - title: 'Codeium Website'
+ url: 'https://codeium.com/'
+ - title: 'Windsurf AI Dokumentation'
+ url: 'https://docs.windsurf.ai/'
+---
+
+## Überblick
+
+Windsurf AI ist eine bahnbrechende integrierte Entwicklungsumgebung (IDE), die künstliche Intelligenz (KI) nahtlos in den Entwicklungsprozess integriert. Entwickelt von Codeium, bietet Windsurf eine Kombination aus Copilot-Funktionalität und autonomen Agenten, die die Produktivität von Entwicklern erheblich steigert.
+
+## Hauptmerkmale
+
+### Supercomplete
+
+Diese Funktion geht über herkömmliche Autovervollständigung hinaus, indem sie die Absicht des Entwicklers vorhersagt. Beispielsweise kann Windsurf Python-Funktionen mit korrekten Docstrings und maßgeschneiderter Funktionalität generieren, basierend auf dem Kontext des Codes.
+
+### Cascade
+
+Cascade ist ein interaktives KI-Tool, das Code generiert oder modifiziert und dabei iterative Rückmeldungen vom Entwickler einholt. Es ermöglicht zudem die Integration von Bildern, um HTML-, CSS- und JavaScript-Code zu erstellen, der visuelle Designs nachahmt.
+
+### Multi-Datei-Bearbeitung
+
+Windsurf unterstützt kontextbewusste Änderungen über mehrere Dateien hinweg, was besonders bei großen Projekten hilfreich ist. Die KI versteht die Beziehungen zwischen Dateien und sorgt für Konsistenz.
+
+### Memories
+
+Diese Funktion speichert Kontextinformationen über Projekte, entweder automatisch oder durch benutzerdefinierte Regeln. Dies verbessert die Kontinuität und Präzision bei der Zusammenarbeit zwischen Entwickler und KI.
+
+### AI-Terminal
+
+Mit dem integrierten Terminal können Entwickler Code generieren, Fehler beheben und direkt im Terminal arbeiten. Diese Funktion kombiniert Coding und Debugging in einem einzigen Arbeitsbereich.
+
+## Vorteile von Windsurf
+
+### Produktivitätssteigerung
+
+Windsurf reduziert Kontextwechsel und bietet schnelle, präzise Vorschläge für Codeänderungen. Dies beschleunigt den Entwicklungsprozess erheblich.
+
+### Datenschutz
+
+Im Gegensatz zu vielen anderen Tools trainiert Windsurf seine Modelle nicht mit nicht genehmigten Daten und bietet Optionen wie Verschlüsselung und Null-Tage-Datenspeicherung.
+
+### Flexibilität
+
+Die IDE ist kompatibel mit verschiedenen Betriebssystemen (Windows, macOS, Linux) und kann mit anderen Entwicklungsumgebungen wie WebStorm kombiniert werden.
+
+### Kostenlose Nutzung
+
+Windsurf bietet eine großzügige kostenlose Version mit erweiterten Funktionen wie unbegrenztem Zugriff auf KI-Modelle und Autovervollständigung.
+
+## Vergleich mit anderen IDEs
+
+Windsurf hebt sich durch seine Fähigkeit hervor, sowohl als Copilot als auch als autonomer Agent zu agieren, was es von anderen IDEs wie Cursor unterscheidet.
+
+| Feature | Windsurf Editor | Cursor | VS Code (mit Plugins) |
+|---------------------------|---|---|---|
+| KI-Agenten-Unterstützung | ✅ Ja | ❌ Nein | ❌ Nein |
+| Multi-Datei-Bearbeitung | ✅ Ja | ✅ Ja | ❌ Nein |
+| Vollständige Kontextbewusstheit | ✅ Ja | ❌ Nein | ❌ Nein |
+
+## Anwendungsfälle
+
+Windsurf eignet sich hervorragend für:
+
+- **Debugging großer Projekte**: Die KI erkennt Probleme in Echtzeit und schlägt Lösungen vor.
+- **Effiziente Bearbeitung komplexer Codebasen**: Multi-Datei-Unterstützung ermöglicht kohärente Änderungen.
+- **Kollaborative Entwicklung**: Entwickler können mit der KI zusammenarbeiten, um Aufgaben schneller zu erledigen.
+
+## Wie wir Windsurf AI bei BaunTown nutzen
+
+Bei BaunTown haben wir Windsurf AI in unseren Entwicklungsprozess integriert, um:
+
+- Die Einarbeitungszeit für neue Teammitglieder zu verkürzen
+- Die Code-Qualität durch KI-gestützte Vorschläge zu verbessern
+- Routineaufgaben zu automatisieren und mehr Zeit für kreative Problemlösungen zu gewinnen
+- Die Dokumentation unserer Codebase zu optimieren
+- Den Onboarding-Prozess für neue Projekte zu beschleunigen
+
+## Preismodell
+
+Windsurf AI bietet verschiedene Preisoptionen:
+
+- **Free**: Unbegrenzter Zugriff auf grundlegende KI-Funktionen, ideal für Einzelentwickler und kleine Teams.
+- **Pro ($12/Monat)**: Erweiterte Funktionen wie Memories und tiefere Kontextanalyse.
+- **Enterprise**: Maßgeschneiderte Lösungen für große Teams mit zusätzlichen Sicherheits- und Verwaltungsfunktionen.
+
+## Fazit
+
+Windsurf AI ist mehr als nur ein Werkzeug – es ist ein intelligenter Partner für Entwickler. Mit seinen innovativen Funktionen wie Cascade und Memories sowie seiner Fähigkeit zur tiefen Kontextanalyse revolutioniert es die Art und Weise, wie Software entwickelt wird. Für Anfänger ebenso wie für erfahrene Entwickler bietet Windsurf eine intuitive Benutzeroberfläche und eine Vielzahl von Funktionen, die den Workflow optimieren.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/debug.js b/apps/bauntown/apps/landing/src/content/tools/debug.js
new file mode 100644
index 000000000..661263edf
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/debug.js
@@ -0,0 +1,5 @@
+// This is just a file to help debug tools collection
+// You can run it with Node.js
+
+// The problem might be with how Astro loads content collections
+console.log("Debug file for tools collection");
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/claude-code.md b/apps/bauntown/apps/landing/src/content/tools/en/claude-code.md
new file mode 100644
index 000000000..0ac58b74f
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/claude-code.md
@@ -0,0 +1,85 @@
+---
+title: 'Claude Code'
+description: 'Revolutionary AI-based support for software development in the terminal'
+pubDate: 2024-06-03
+updatedDate: 2024-06-03
+category: 'Development'
+image: '/images/tools/claudecode-tool-bauntown-coding.png'
+featured: true
+pricing: 'Paid'
+website: 'https://claude.ai/code'
+tags: ['AI', 'Software Development', 'Automation', 'Terminal', 'Refactoring']
+externalLinks:
+ - title: 'Anthropic Website'
+ url: 'https://www.anthropic.com/'
+ - title: 'Claude Code Documentation'
+ url: 'https://docs.anthropic.com/claude/code'
+---
+
+## Overview
+
+Claude Code is an innovative tool developed by Anthropic to support software developers more efficiently. It is an agentive coding tool that works directly in the terminal and uses natural language commands to automate tasks such as refactoring, documentation, and debugging.
+
+## What is Claude Code?
+
+Claude Code integrates seamlessly into the development environment without additional servers or complex configurations. It offers developers the ability to analyze, improve, and fix their codebase. The key features include:
+
+- **Code Refactoring**: Optimization and improvement of the codebase with AI-powered suggestions.
+- **Troubleshooting**: Identification and resolution of issues such as missing dependencies or performance bottlenecks.
+- **Code Understanding**: Answering questions about architecture, logic, and code dependencies.
+- **Automated Testing and Linting**: Running tests and improving code quality.
+- **Git Integration**: Editing commit histories, resolving merge conflicts, and generating pull requests.
+
+## Benefits for Developers
+
+Claude Code targets various user groups:
+
+- **Software Developers**: Improvement of code quality and maintainability.
+- **Open Source Contributors**: Easier work with unfamiliar codebases.
+- **DevOps Engineers**: Automation of code reviews and quality assurance tasks.
+
+## How Does Claude Code Work?
+
+Unlike traditional coding assistants such as GitHub Copilot, Claude Code goes beyond mere suggestions. It can independently execute commands, read and edit files, and identify and fix errors. It uses specialized tools such as:
+
+- **BashTool**: Execution of shell commands.
+- **FileReadTool & FileEditTool**: Reading and editing files.
+- **GlobTool & GrepTool**: Searching for files or specific content.
+- **AgentTool**: Delegation of complex tasks to sub-agents.
+
+## Practical Applications
+
+### Refactoring
+
+Claude Code helps developers improve the readability and maintainability of their projects. It can create module documentation or add comments to make the code more understandable.
+
+### Troubleshooting
+
+The tool analyzes error messages and provides solutions. It can identify missing imports or fix runtime errors. In one example, Claude Code added comments to suppress warnings without affecting functionality.
+
+### Automation
+
+With its ability to independently execute commands, Claude Code significantly reduces the time spent on repetitive tasks. Anthropic claims that tasks that previously took 45 minutes can now be completed in seconds.
+
+## How We Use Claude Code at BaunTown
+
+At BaunTown, we deploy Claude Code strategically, with a conscious eye on cost efficiency:
+
+- We use Claude Code in parallel with more cost-effective tools like Windsurf AI or Cursor to optimize daily expenses.
+- For high-level features and UI design tasks, we prefer Claude Code as it delivers the best results in these areas.
+- For complex refactoring tasks or when familiarizing ourselves with unknown codebases, Claude Code is our preferred tool.
+- For routine tasks and simpler development work, we use more cost-effective alternatives.
+
+## Pricing Model and Cost Management
+
+Claude Code can lead to significant costs depending on usage intensity:
+
+- Costs can range from $10-70 per day per person, depending on usage intensity and tasks performed.
+- There is no flat-rate model, but rather usage-based billing.
+- Costs vary based on model size, token length, and number of requests.
+
+## Future Perspectives
+
+Although Claude Code is still in the preview phase, it shows great potential for transforming software development. It not only saves developers time but also enables deeper integration of AI into the development process. With future improvements, it might even be possible to autonomously generate complete projects.
+
+Claude Code marks a significant step towards a new era of software development – an era in which developers can take their work to a new level through intelligent automation. Despite the higher costs compared to other AI coding tools, it offers clear added value in certain scenarios that justifies the investment.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/claude.md b/apps/bauntown/apps/landing/src/content/tools/en/claude.md
new file mode 100644
index 000000000..abd569ed4
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/claude.md
@@ -0,0 +1,76 @@
+---
+title: 'Claude'
+description: 'Advanced AI assistant from Anthropic for conversation, text generation, and analysis'
+pubDate: 2024-06-01
+updatedDate: 2024-06-01
+category: 'Development'
+image: '/images/tools/claude-tool-bauntown-coding.png'
+featured: false
+pricing: 'Freemium'
+website: 'https://claude.ai'
+tags: ['AI', 'Text Generation', 'Productivity', 'Assistance', 'Communication']
+externalLinks:
+ - title: 'Claude Documentation'
+ url: 'https://docs.anthropic.com/claude/'
+ - title: 'Claude API'
+ url: 'https://docs.anthropic.com/claude/reference/'
+---
+
+## Overview
+
+Claude is an advanced AI assistant developed by Anthropic, designed for helpful, harmless, and honest conversations. With its focus on safety and responsible AI use, Claude offers a wide range of applications, from text generation and data analysis to creative collaboration.
+
+## Key Features
+
+### Natural Conversation
+
+Claude excels at natural, human-like conversation. It can understand complex instructions, maintain context information across extended conversations, and provide nuanced responses tailored to the specific needs of the user.
+
+### Text Generation and Editing
+
+One of the primary use cases for Claude is assistance with text creation. It can help draft blog posts, emails, reports, marketing materials, and creative content. Claude can also refine existing text to improve style, tone, and clarity.
+
+### Programming Assistance
+
+Claude provides comprehensive support for developers, including explaining code concepts, helping with debugging, generating code examples, and creating documentation. It can work with various programming languages and assist with code optimization.
+
+### Information Processing and Analysis
+
+With the ability to process large amounts of information, Claude can help with summarizing documents, extracting key insights, and organizing data. It can explain complex topics and break them down into understandable concepts.
+
+### Multimodal Understanding
+
+The latest versions of Claude support multimodal interactions, allowing the assistant to understand both text and images. This enables use cases such as analyzing visual data, describing charts and graphics, and working with text in images.
+
+## How We Use Claude at BaunTown
+
+At BaunTown, we employ Claude for a variety of tasks:
+
+- Creating and improving documentation and technical guides
+- Brainstorming new features and projects
+- Assisting with code development and debugging
+- Translating and localizing content for different languages
+- Summarizing meetings and creating action points
+- Researching and analyzing market trends and technological developments
+
+## Pricing Model
+
+Claude offers several access options:
+
+- **Claude Free**: Limited access to the web interface with restrictions on usage frequency and functionality.
+- **Claude Pro ($20 per month)**: Priority access during peak times, higher usage limits, and access to the latest Claude models.
+- **Claude API**: Usage-based pricing for developers and businesses looking to integrate Claude into their applications, with prices based on token consumption.
+- **Enterprise Solutions**: Custom pricing and features for organizations with specific requirements for security, scalability, and support.
+
+## Why We Recommend It
+
+Claude has become an invaluable tool in our workflow for several reasons:
+
+- The impressive ability to understand and execute complex instructions
+- The focus on safety and responsible AI use, which is important for our ethical standards
+- The versatility in handling a wide range of tasks, from creative creation to technical support
+- The continuous improvement through regular updates and new features
+- The seamless integration into our existing tools and workflows through the API
+- The ability to automate time-consuming tasks, thus creating more space for creative and strategic work
+
+Claude enables us to work more efficiently while improving the quality of our outputs, making it an essential part of our toolset.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/cursor.md b/apps/bauntown/apps/landing/src/content/tools/en/cursor.md
new file mode 100644
index 000000000..becccfd4c
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/cursor.md
@@ -0,0 +1,71 @@
+---
+title: 'Cursor'
+description: 'A powerful code editor with AI integration for faster development'
+pubDate: 2024-06-18
+updatedDate: 2024-06-18
+category: 'Development'
+image: '/images/tools/cursor-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://cursor.sh'
+tags: ['Development', 'AI', 'IDE', 'Productivity']
+externalLinks:
+ - title: 'Cursor Documentation'
+ url: 'https://cursor.sh/docs'
+ - title: 'Cursor on GitHub'
+ url: 'https://github.com/getcursor/cursor'
+---
+
+## Overview
+
+Cursor is a modern code editor based on Visual Studio Code and enhanced with powerful AI assistance. It integrates advanced language models to bring code generation, debugging, and intelligent suggestions directly into the development environment.
+
+## Key Features
+
+### AI-Powered Code Generation
+
+With Cursor, you can generate code through natural language descriptions. You simply describe what you want your code to do, and the AI suggests corresponding implementations.
+
+### Intelligent Code Completion
+
+Beyond traditional autocomplete, Cursor understands the context of your code and can suggest entire functions or methods that fit your project.
+
+### Error Diagnosis and Resolution
+
+When encountering errors or bugs, Cursor can provide explanations and solution suggestions. The AI analyzes your code and identifies potential problems and their causes.
+
+### Chat Interface
+
+The integrated chat feature allows you to discuss your code with the AI, ask questions, or get explanations for specific code segments.
+
+### VSCode Compatibility
+
+Since Cursor is based on VSCode, it's compatible with most VSCode extensions and offers a familiar user interface for developers who already work with VSCode.
+
+## How We Use Cursor at BaunTown
+
+At BaunTown, we use Cursor for:
+
+- Rapid prototype development to quickly implement ideas
+- Complex refactoring tasks where AI helps understand and restructure code
+- Learning purposes, as the AI provides excellent explanations of code segments
+- Accelerating recurring development tasks through AI-generated code snippets
+
+## Pricing Model
+
+Cursor offers the following pricing options:
+
+- **Free**: Basic AI features with a limited number of requests per day
+- **Pro ($20/month)**: Unlimited AI requests, access to advanced AI models, and additional features
+- **Teams**: Enterprise offerings with additional administrative features
+
+## Why We Recommend It
+
+As developers, we've found that Cursor significantly increases our productivity, especially when:
+
+- Exploring new libraries or frameworks, as the AI can provide practical examples and explanations
+- Writing repetitive code segments, which the AI can largely automate
+- Debugging, as the AI often identifies problems that are easy to overlook
+- Documenting and understanding existing code
+
+Cursor has changed the way we write code, allowing us to focus more on problem-solving and less on syntax.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/discord.md b/apps/bauntown/apps/landing/src/content/tools/en/discord.md
new file mode 100644
index 000000000..677a563d2
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/discord.md
@@ -0,0 +1,76 @@
+---
+title: 'Discord'
+description: 'Chat and community platform for text, voice, and video communication'
+pubDate: 2024-06-05
+updatedDate: 2024-06-05
+category: 'Productivity'
+image: '/images/tools/discord-tool-bauntown-coding.png'
+featured: false
+pricing: 'Freemium'
+website: 'https://discord.com'
+tags: ['Communication', 'Community', 'Chat', 'Voice', 'Collaboration']
+externalLinks:
+ - title: 'Discord Support Center'
+ url: 'https://support.discord.com/'
+ - title: 'Discord Developer Portal'
+ url: 'https://discord.com/developers/docs/intro'
+---
+
+## Overview
+
+Discord is a digital communication platform initially designed for gamers but has evolved into a versatile tool for communities, teams, and friends. The platform combines text, voice, and video communication with tools for community management and engagement.
+
+## Key Features
+
+### Servers and Channels
+
+Discord is built around the concepts of servers and channels. Servers act as community hubs, while channels within these servers can be set up for different topics, projects, or teams. This structure allows for organized communication even in large groups.
+
+### Text, Voice, and Video Communication
+
+The platform supports various forms of communication: text channels for asynchronous discussions and documentation, voice channels for live conversations, and video for more personal interactions. The ability to share screens makes Discord a useful tool for collaboration and presentations as well.
+
+### Bots and Integrations
+
+Discord provides an extensive API that allows for the development of bots and integrations. These can be used to automate workflows, send reminders, conduct polls, play music, and much more. The growing bot ecosystem significantly extends Discord's functionality.
+
+### Roles and Permissions
+
+Discord's role and permission system allows server administrators to precisely control who has access to which channels and what actions they can perform. This enables the creation of moderated areas, private channels, and hierarchical structures.
+
+### Community Engagement
+
+Discord offers features like reactions, threads, forums, and events that foster community engagement. Servers can be public or private, and invitation links make it easy to bring in new members.
+
+## How We Use Discord at BaunTown
+
+At BaunTown, we use Discord for:
+
+- Community management and member engagement
+- Internal team communication and project coordination
+- Live coding sessions and workshops with screen sharing
+- Answering technical questions and peer support
+- Announcements and updates about projects
+- Networking and social interactions between community members
+
+## Pricing Model
+
+Discord offers several subscription options:
+
+- **Free**: Basic features including server creation, text and voice channels with some limitations.
+- **Discord Nitro Basic ($2.99 per month)**: Enhanced personalization options and higher upload limits.
+- **Discord Nitro ($9.99 per month)**: Premium features like higher video quality, larger upload sizes, more personalization options, and server boosts.
+- **Server Boosts**: Separate upgrades that can be purchased for servers to unlock additional features.
+
+## Why We Recommend It
+
+Discord has proven to be an indispensable tool for our community building and team collaboration. We particularly appreciate:
+
+- The flexibility to support both asynchronous and real-time communication, which is ideal for distributed teams
+- The intuitive user interface that makes it easy for new members to navigate
+- The robust moderation and safety tools to protect our community
+- The ability to use bots for automating routine tasks
+- The capability to manage interest groups within the same platform
+- The continuous development and addition of new features
+
+Discord has helped us build a vibrant, engaged community while also streamlining our internal communication workflows.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/expo.md b/apps/bauntown/apps/landing/src/content/tools/en/expo.md
new file mode 100644
index 000000000..d3b8521e4
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/expo.md
@@ -0,0 +1,73 @@
+---
+title: 'Expo'
+description: 'Development framework and platform for universal React applications'
+pubDate: 2024-05-25
+updatedDate: 2024-05-25
+category: 'Development'
+image: '/images/tools/expo-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://expo.dev'
+tags: ['React Native', 'Mobile', 'App Development', 'Cross-Platform', 'JavaScript']
+externalLinks:
+ - title: 'Expo Documentation'
+ url: 'https://docs.expo.dev/'
+ - title: 'Expo Blog'
+ url: 'https://blog.expo.dev/'
+---
+
+## Overview
+
+Expo is a powerful framework and platform suite for developing universal React applications. It provides a set of tools and services that simplify the process of building, deploying, and rapidly iterating on iOS, Android, and web apps using JavaScript and React.
+
+## Key Features
+
+### Expo SDK
+
+The Expo SDK is a comprehensive collection of native APIs and modules abstracted for React Native development. It covers everything from camera and audio access to push notifications and in-app purchases. This allows developers to access native functionalities without having to write native code.
+
+### Expo Go
+
+The Expo Go app enables immediate testing of applications on physical devices during development. Developers can scan QR codes to test their applications on real devices without going through complex build processes. This significantly speeds up the development cycle.
+
+### Expo CLI
+
+Expo's command-line interface simplifies the process of creating, testing, and publishing projects. With a single command, developers can start new projects, test applications on different simulators, or create builds for distribution.
+
+### EAS Build and Submit
+
+Expo Application Services (EAS) allows developers to create native builds in the cloud and submit applications directly to app stores. This eliminates the need to set up local build environments and streamlines the publishing process.
+
+### Over-the-Air Updates (OTA)
+
+One of the most powerful aspects of Expo is the ability to send JavaScript updates directly to users without going through the app store review process. This allows for quick bug fixes and feature updates.
+
+## How We Use Expo at BaunTown
+
+At BaunTown, we use Expo for several mobile projects:
+
+- Rapid prototyping of new app ideas
+- Developing and deploying our mobile applications
+- Cross-platform deployment (iOS, Android, and web) with a single codebase
+- Easy integration with our existing React-based web projects
+- Quickly publishing updates to our users
+
+## Pricing Model
+
+Expo offers several pricing options:
+
+- **Free**: Ideal for independent developers and small projects with limited requirements. Provides access to core features but with certain limitations.
+- **Production ($499/month)**: For growing teams with larger requirements, including enhanced build minutes, more push notifications, and prioritized support.
+- **Enterprise**: For larger organizations requiring all premium features with custom support, SLAs, and dedicated resources.
+
+## Why We Recommend It
+
+Expo has revolutionized our mobile application development for several reasons:
+
+- **Development Speed**: With Expo, we can develop and iterate on applications much faster than with traditional native approaches.
+- **Unified Codebase**: The ability to reuse much of our code across platforms significantly reduces development time and maintenance overhead.
+- **Easy Onboarding**: The shallow learning curve makes it easy for new team members to get up to speed, especially if they already have experience with React for the web.
+- **OTA Updates**: The ability to update applications without going through app store reviews accelerates our bug fixing and feature deployment cycle.
+- **Versatility**: The support for "bare workflow" means we can add native code extensions when needed, providing flexibility for more complex applications.
+
+For teams looking to quickly develop and deploy mobile applications, especially if they're already familiar with the React ecosystem, Expo is an excellent choice that abstracts away many of the complex aspects of native app development.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/figma.md b/apps/bauntown/apps/landing/src/content/tools/en/figma.md
new file mode 100644
index 000000000..58fc1e301
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/figma.md
@@ -0,0 +1,68 @@
+---
+title: 'Figma'
+description: 'Professional design tool for UI/UX that enables collaboration and prototyping'
+pubDate: 2024-06-20
+updatedDate: 2024-06-20
+category: 'Design'
+image: '/images/tools/figma-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://www.figma.com'
+tags: ['Design', 'UI/UX', 'Prototyping', 'Collaboration']
+externalLinks:
+ - title: 'Figma Learning Resources'
+ url: 'https://help.figma.com/hc/en-us/categories/360002051613-Getting-Started'
+ - title: 'Figma for Beginners: Tutorial'
+ url: 'https://www.figma.com/resources/learn-design/'
+---
+
+## Overview
+
+Figma is a browser-based design and prototyping tool for digital projects. It allows designers and teams to create user interfaces (UI), interactions, and prototypes for websites, apps, and other digital products.
+
+## Key Features
+
+### Real-time Collaboration
+
+One of Figma's biggest advantages is its real-time collaboration capability. Multiple people can work on the same file simultaneously, which greatly simplifies teamwork. Comments and annotations enable direct communication within the design.
+
+### Component System
+
+Figma's component system allows for the creation of reusable elements that can be consistently used throughout the design. Changes to a component are automatically updated everywhere, making maintenance of large design systems easier.
+
+### Auto Layout
+
+This feature enables the creation of responsive designs that automatically adapt to different screen sizes. It also simplifies the arrangement of elements as spacing and alignment can be calculated automatically.
+
+### Prototyping
+
+Figma offers powerful prototyping features that allow for the creation of interactions and transitions between different screens. This makes it possible to test the user experience before actual development begins.
+
+### Design Systems
+
+With Figma, comprehensive design systems can be created that define all visual elements of a brand or product. This promotes consistency across different projects.
+
+## How We Use Figma at BaunTown
+
+At BaunTown, we use Figma for:
+
+- Creating and maintaining our design system
+- Wireframing new features and pages
+- Designing UI components and layouts
+- Prototyping to visualize user flows
+- Collaboration between designers and developers
+- Presenting design concepts to stakeholders
+
+## Pricing Model
+
+Figma offers various pricing tiers:
+
+- **Starter (Free)**: For individuals and small teams. Limited to 3 Figma files and 3 FigJam files.
+- **Professional ($12 per editor/month)**: For professional teams with unlimited files and advanced sharing capabilities.
+- **Organization ($45 per editor/month)**: For larger companies with additional security and administration features.
+
+## Why We Recommend It
+
+Figma has revolutionized our design workflow through its accessibility (browser-based, cross-platform), collaborative features, and seamless integration into the development process. It enables us to iterate faster and foster closer collaboration between design and development.
+
+The intuitive user interface and extensive community with templates and plugins make Figma an indispensable tool in our development process.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/github.md b/apps/bauntown/apps/landing/src/content/tools/en/github.md
new file mode 100644
index 000000000..9e67d6a10
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/github.md
@@ -0,0 +1,79 @@
+---
+title: 'GitHub'
+description: 'Collaborative platform for version control and joint software development'
+pubDate: 2024-05-28
+updatedDate: 2024-05-28
+category: 'Development'
+image: '/images/tools/github-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://github.com'
+tags: ['Version Control', 'Git', 'Collaboration', 'Open Source', 'CI/CD']
+externalLinks:
+ - title: 'GitHub Documentation'
+ url: 'https://docs.github.com/'
+ - title: 'GitHub Skills'
+ url: 'https://skills.github.com/'
+---
+
+## Overview
+
+GitHub is the world's leading platform for software development and collaboration. Based on the Git version control system, GitHub provides a central location for collaborating on code, tracking changes, and managing software projects of any size. With over 100 million developers worldwide and more than 400 million repositories, GitHub has become the standard for modern software development.
+
+## Key Features
+
+### Repositories & Version Control
+
+The heart of GitHub is repositories, which serve as central storage locations for project files. Every change is tracked, allowing for detailed tracking of the project's history. Developers can easily revert to previous versions, compare changes, and resolve conflicts.
+
+### Pull Requests & Code Reviews
+
+With Pull Requests, developers can propose changes that can then be reviewed by other team members. This feature promotes collaboration, quality control, and knowledge sharing. Code reviews are facilitated by integrated tools such as differential code view and inline comments.
+
+### Issues & Project Management
+
+GitHub Issues allows tracking bugs, tasks, and feature requests in a structured format. With features like labels, milestones, and person assignments, teams can effectively manage tasks. Project boards provide visual Kanban-like views for ongoing work.
+
+### GitHub Actions & CI/CD
+
+GitHub Actions automates workflows directly in the repository. Developers can create custom workflows for continuous integration and continuous deployment (CI/CD) that automatically trigger on certain events like pushes or pull requests.
+
+### Collaboration & Transparency
+
+GitHub promotes collaboration through transparent processes. Anyone can see who made what changes, when they were made, and why. Discussions are contextual and directly tied to the relevant code.
+
+### GitHub Copilot
+
+One of the newest innovations is GitHub Copilot, an AI-powered programming assistant that can be integrated into the development environment and makes code suggestions based on comments and existing code.
+
+## How We Use GitHub at BaunTown
+
+At BaunTown, GitHub is a central element of our development processes:
+
+- **Code Hosting & Versioning**: All our projects are stored and versioned in GitHub repositories, from website source code to mobile applications.
+- **Collaborative Development**: We use Pull Requests and Code Reviews to ensure quality and work together on projects.
+- **Project Management**: Issues are used to track and prioritize tasks, while project boards enable visualization of work progress.
+- **Automation**: GitHub Actions automates our testing, building, and deployment processes, reducing manual interventions and increasing consistency.
+- **Documentation**: We use GitHub Pages and Markdown files to host project documentation right alongside the code.
+- **Community Engagement**: For our open-source projects, GitHub simplifies interaction with external contributors and makes projects more accessible.
+
+## Pricing Model
+
+GitHub offers various pricing plans:
+
+- **Free**: Unlimited public and private repositories, up to 3 collaborators for private repositories, and basic features. Ideal for personal projects and small teams.
+- **Team ($4 per user/month)**: Unlimited collaborators, enhanced permissions, and additional collaboration features.
+- **Enterprise ($21 per user/month)**: Advanced security, compliance features, and enterprise-wide management tools.
+- **GitHub One**: Customized solution for large enterprises with tailored pricing model.
+
+## Why We Recommend It
+
+GitHub is more than just a tool – it's an ecosystem that enables and promotes modern software development practices. We recommend GitHub for several reasons:
+
+- **Industry Standard**: GitHub is the gold standard in the industry, which simplifies collaboration and experience sharing with the global developer community.
+- **Seamless Integration**: Integration with popular tools and services is smooth, from IDE integrations to connections with project management tools.
+- **Scalability**: GitHub works equally well for small personal projects and large-scale enterprise development.
+- **Continuous Innovation**: Microsoft's support has accelerated the pace of innovation, with regular new features that continuously improve the platform.
+- **Community**: The huge user base means that support, solutions, and examples for almost any problem are easy to find.
+
+For teams of any size, GitHub provides the necessary infrastructure to collaborate efficiently, create high-quality software, and deliver continuously.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/google-workspace.md b/apps/bauntown/apps/landing/src/content/tools/en/google-workspace.md
new file mode 100644
index 000000000..1b588ac00
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/google-workspace.md
@@ -0,0 +1,76 @@
+---
+title: 'Google Workspace'
+description: 'Productivity and collaboration tools for teams of all sizes'
+pubDate: 2024-06-10
+updatedDate: 2024-06-10
+category: 'Productivity'
+image: '/images/tools/googleworkspace-tool-bauntown-coding.png'
+featured: false
+pricing: 'Paid'
+website: 'https://workspace.google.com'
+tags: ['Productivity', 'Collaboration', 'Cloud', 'Email', 'Documents']
+externalLinks:
+ - title: 'Google Workspace Learning Center'
+ url: 'https://support.google.com/a/users'
+ - title: 'Google Workspace Admin Help'
+ url: 'https://support.google.com/a/answer/9212'
+---
+
+## Overview
+
+Google Workspace (formerly G Suite) is a collection of cloud-based productivity and collaboration tools developed by Google. It includes applications like Gmail, Google Drive, Google Docs, Google Sheets, Google Slides, Google Meet, and more, all designed to enhance team collaboration and boost productivity.
+
+## Key Features
+
+### Communication Tools
+
+Google Workspace offers robust email solutions with Gmail for business, including custom email addresses for your domain. With Google Meet, teams can conduct video conferences with screen sharing, recording, and live captions. Google Chat enables direct messaging and group chats for quick team communication.
+
+### Documents and File Storage
+
+With Google Drive, teams get secure cloud storage for all their files. Google Docs, Sheets, and Slides allow for the creation and collaborative editing of documents, spreadsheets, and presentations in real-time. Automatic saving and extensive version history ensure no work is lost.
+
+### Calendar and Scheduling
+
+Google Calendar makes it easy to coordinate appointments and meetings with shared calendars, automatic reminders, and easy integration with other Google Workspace tools. The ability to book meeting rooms and see team member availability makes scheduling efficient.
+
+### Security and Administration
+
+Google Workspace provides robust security features such as two-factor authentication, advanced data encryption, and comprehensive administrator controls. The central management console allows IT administrators to easily manage users, devices, and security settings.
+
+### Integration and Extensibility
+
+Seamless integration between all Google Workspace applications simplifies workflow. Additionally, there are hundreds of third-party integrations and add-ons that extend functionality. The Google Workspace Marketplace offers numerous apps for specialized requirements.
+
+## How We Use Google Workspace at BaunTown
+
+At BaunTown, we use Google Workspace for:
+
+- Corporate email hosting with our bauntown.com domain
+- Collaborative editing of project documents and presentations
+- File and resource management with structured team drives
+- Virtual meetings and workshops with Google Meet
+- Project planning and appointment coordination with Google Calendar
+- Form creation for feedback and data collection
+
+## Pricing Model
+
+Google Workspace offers several subscription plans:
+
+- **Business Starter ($6 per user/month)**: Basic business email, 30GB storage, video conferencing, and more.
+- **Business Standard ($12 per user/month)**: Everything in Starter plus 2TB storage, enhanced meeting features, and security controls.
+- **Business Plus ($18 per user/month)**: Everything in Standard plus 5TB storage, enhanced security and management features.
+- **Enterprise**: Contact-based pricing with unlimited storage and comprehensive security and compliance tools.
+
+## Why We Recommend It
+
+Google Workspace has proven essential for us, especially because of:
+
+- The seamless real-time collaboration that allows teams to work on the same documents simultaneously
+- The reliable cloud infrastructure with high availability and minimal downtime
+- The user-friendly interface that requires minimal training as most are already familiar with Google products
+- The continuous improvement through regular updates and new features
+- The strong mobile support that enables working from anywhere
+- The comprehensive security features to protect sensitive data
+
+Google Workspace has significantly improved our cross-team communication and collaboration and forms the backbone of our daily workflows.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/memoro.md b/apps/bauntown/apps/landing/src/content/tools/en/memoro.md
new file mode 100644
index 000000000..d35f5b58f
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/memoro.md
@@ -0,0 +1,98 @@
+---
+title: 'Memoro'
+description: 'AI-powered speech-to-form application for automated documentation of conversations and thoughts'
+pubDate: 2024-04-08
+updatedDate: 2024-04-08
+category: 'Productivity'
+image: '/images/tools/memoro-tools-bauntown-app.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://www.memoro.ai/'
+tags: ['AI', 'Documentation', 'Speech Recognition', 'Productivity', 'Mobile App']
+externalLinks:
+ - title: 'Instagram'
+ url: 'https://www.instagram.com/memoroai/'
+ - title: 'LinkedIn'
+ url: 'https://www.linkedin.com/company/memoroai'
+---
+
+## Overview
+
+Memoro is an innovative mobile application that revolutionizes how people document conversations and capture thoughts using AI-powered speech recognition. The core element is a "Speech-to-Form system" that automatically converts spoken language into structured documents, dramatically reducing documentation effort.
+
+## What is Memoro?
+
+Memoro was developed in response to growing documentation requirements in businesses coupled with skilled labor shortages. The app enables real-time documentation during work - whether in meetings, construction discussions, sales conversations, or interviews. What makes Memoro special is that the technology stays in the background, seamlessly integrating into natural workflows.
+
+Key features:
+
+- **Simple recording**: A central recording button for easily starting and stopping recordings
+- **Intelligent transcription**: Transcribes spoken words verbatim with speaker recognition
+- **AI-powered analysis**: Summarizes content and extracts important information like tasks and appointments
+- **Multilingual support**: Support for 24 languages and 2 dialects for recording, transcription, and translation
+- **Form generation**: Converts unstructured conversations into standardized documents
+- **Industry-specific modes**: Customizable modes for different professions and use cases
+
+## Benefits and Use Cases
+
+Memoro offers significant time savings of up to 75% on documentation tasks (8-16 hours/week). The app is suitable for various use cases:
+
+- **Students**: Lecture notes, brainstorming for thesis work
+- **Office workers**: Meeting minutes, email dictation
+- **Craftspeople**: Material lists, construction meetings
+- **Healthcare workers**: Care planning, documentation
+- **Marketing experts**: Interview conduction and analysis
+- **Creative professionals**: Idea collection and self-reflection
+
+## How Memoro Works
+
+The application uses state-of-the-art AI technologies for speech recognition and text analysis. The process is remarkably simple:
+
+1. Record conversations or thoughts with the app
+2. The AI transcribes the recording and recognizes different speakers
+3. Important information is automatically extracted and categorized
+4. Content is converted into structured forms or documents
+5. Finished documents can be shared or exported to other systems
+
+## Technical Details
+
+- **Platforms**: iOS (Apple App Store) and Android (Google Play Store)
+- **Desktop access**: Reading functionality for recorded memos
+- **Data storage**: Firebase Cloud with servers in Frankfurt, Germany
+- **Audio processing**: Azure Speech, hosted in Frankfurt
+- **AI-powered analysis**: Azure OpenAI, hosted in Paris
+- **Data protection**: GDPR-compliant with end-to-end encryption
+
+## How We Use Memoro at BaunTown
+
+At BaunTown, we use Memoro for various purposes:
+
+- **Team meeting documentation**: Our weekly meetings are automatically documented
+- **Capturing project ideas**: Spontaneous thoughts and concepts are recorded directly
+- **Client conversations**: Meetings with partners and clients are documented in a structured way
+- **Knowledge management**: Implicit knowledge is systematically captured and shared
+
+Particularly valuable to us is the time savings and the ability to fully focus on content during conversations, instead of having to take notes simultaneously.
+
+## Pricing Model
+
+Memoro offers various pricing tiers:
+
+- **Free version**: 180 minutes/month, max. 50 minutes/recording, 22 memos/day
+- **Plus**: €9/month (600 minutes/month, 100 minutes/memo)
+- **Pro**: €23/month (1800 minutes/month, 200 minutes/memo)
+- **Ultra**: €42/month (4800 minutes/month, 300 minutes/memo)
+
+With annual billing, there's a 20% discount. Special conditions are offered for educational institutions and non-profit organizations.
+
+## The Team Behind Memoro
+
+Memoro was developed by an experienced team:
+
+- **Till Schneider**: Product design & marketing, experienced filmmaker and media designer
+- **Tobias Müller**: Technical direction, full-stack developer with expertise in AI systems
+- **Nils Weiser**: Experienced developer specializing in cloud infrastructure and scaling
+
+## Future Outlook
+
+Memoro continues to evolve. Plans include developing a self-service platform that allows customers to create and share their own documentation templates, as well as extended enterprise features with CRM/ERP integration.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/netlify.md b/apps/bauntown/apps/landing/src/content/tools/en/netlify.md
new file mode 100644
index 000000000..75db810ce
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/netlify.md
@@ -0,0 +1,74 @@
+---
+title: 'Netlify'
+description: 'A modern hosting platform for static websites and serverless functions'
+pubDate: 2024-06-15
+updatedDate: 2024-06-15
+category: 'Hosting'
+image: '/images/tools/netlify-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://www.netlify.com'
+tags: ['Hosting', 'Serverless', 'CI/CD', 'JAMstack']
+externalLinks:
+ - title: 'Netlify Documentation'
+ url: 'https://docs.netlify.com/'
+ - title: 'Netlify Blog'
+ url: 'https://www.netlify.com/blog/'
+---
+
+## Overview
+
+Netlify is a powerful platform for hosting websites and web applications based on static files or serverless functions. It offers a comprehensive solution for modern web projects with automated deployment, global CDN distribution, and integrated CI/CD pipeline.
+
+## Key Features
+
+### Continuous Deployment
+
+Netlify connects directly to your Git repository (GitHub, GitLab, Bitbucket) and automatically deploys updates when you make changes to your repository. Every Git push triggers a new build, streamlining the entire process from development to production.
+
+### Serverless Functions
+
+With Netlify Functions, you can run backend code without managing your own servers. These serverless functions are ideal for API endpoints, authentication, form processing, and other dynamic features.
+
+### Edge Network and CDN
+
+Netlify uses a global CDN (Content Delivery Network) to deliver your website at lightning speed to every user worldwide. It provides automatic SSL certificates, HTTP/2, and other optimizations for maximum performance.
+
+### Forms and Authentication
+
+With Netlify Forms, you can process HTML forms without your own server. Netlify Identity provides a complete authentication and user management system for your application.
+
+### Branching and Preview Deployments
+
+For every pull request or branch, Netlify automatically creates a dedicated preview environment where you can test changes before they go to production.
+
+## How We Use Netlify at BaunTown
+
+At BaunTown, we use Netlify for:
+
+- Hosting our main website built with Astro
+- Providing preview environments for new features
+- Serverless functions for contact forms and newsletter signups
+- Automated deployment pipeline for regular updates
+- A/B testing for new design elements
+
+## Pricing Model
+
+Netlify offers various pricing tiers:
+
+- **Starter (Free)**: Perfect for personal projects and small websites. Includes serverless functions, continuous deployment, and SSL.
+- **Pro ($19/month)**: For professional websites with more bandwidth, more functions, and additional options.
+- **Business ($99/month)**: For larger teams and companies with advanced security and collaboration features.
+- **Enterprise**: Customized solutions for large enterprises.
+
+## Why We Recommend It
+
+Netlify has significantly simplified our deployment workflow. The benefits we particularly appreciate include:
+
+- **Simplicity**: Setting up a website takes only a few minutes, and deployment is fully automated.
+- **Performance**: The global CDN network ensures fast loading times worldwide.
+- **Developer-friendly**: The seamless integration with Git and preview deployments accelerate the development cycle.
+- **Serverless architecture**: We can implement dynamic features without our own servers, reducing maintenance costs.
+- **Scalability**: Netlify grows with our projects and provides reliable performance even with high traffic volumes.
+
+Whether for small personal projects or complex enterprise websites, Netlify has proven to be a reliable and powerful hosting solution.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/plausible.md b/apps/bauntown/apps/landing/src/content/tools/en/plausible.md
new file mode 100644
index 000000000..975df744b
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/plausible.md
@@ -0,0 +1,81 @@
+---
+title: 'Plausible Analytics'
+description: 'Privacy-friendly and lightweight alternative to Google Analytics'
+pubDate: 2024-05-25
+updatedDate: 2024-05-25
+category: 'Productivity'
+image: '/images/tools/plausible-tool-bauntown-coding.png'
+featured: false
+pricing: 'Paid'
+website: 'https://plausible.io'
+tags: ['Analytics', 'Privacy', 'Web Development', 'GDPR', 'Open Source']
+externalLinks:
+ - title: 'Plausible Documentation'
+ url: 'https://plausible.io/docs'
+ - title: 'Plausible on GitHub'
+ url: 'https://github.com/plausible/analytics'
+---
+
+## Overview
+
+Plausible Analytics is a lightweight and privacy-friendly alternative to traditional web analytics tools like Google Analytics. It was developed with the goal of providing a simple, transparent, and GDPR-compliant way to track website visits without compromising user privacy or extending website load times.
+
+## Key Features
+
+### Privacy-Oriented
+
+Plausible was built from the ground up with privacy in mind. It doesn't collect any personally identifiable information, doesn't use cookies, and doesn't track users across different websites. This means that in most cases, no cookie banners are required, and the platform is fully compliant with GDPR, CCPA, and PECR.
+
+### Open and Transparent Approach
+
+As an open-source project, all of Plausible's source code is available on GitHub. This ensures transparency regarding what data is collected and how it's processed. Users have the option to self-host Plausible or use the official cloud service.
+
+### Lightweight Implementation
+
+Plausible's tracking script is less than 1 KB in size, compared to more than 45 KB for Google Analytics. This helps improve website performance and reduce load times, which can positively impact SEO and user experience.
+
+### Easy-to-Understand Metrics
+
+Plausible offers a clear and easy-to-understand dashboard that displays the most important web analytics metrics such as page views, referrers, top pages, and visitor sources. It deliberately avoids excessively complex data and focuses on the essentials.
+
+### Shared Dashboards
+
+With Plausible, dashboards can be easily shared with team members or clients without having to share passwords. Each dashboard has a unique, but not guessable URL that can be shared with relevant persons. Optionally, dashboards can also be password-protected.
+
+### Custom Events and Goals
+
+The platform supports custom events for tracking conversions and goals, such as newsletter sign-ups, downloads, or completed purchases. This allows for a more detailed understanding of user behavior on the website.
+
+## How We Use Plausible at BaunTown
+
+At BaunTown, we use Plausible Analytics for various purposes:
+
+- **Website Performance Measurement**: Tracking visitor numbers, time spent, and bounce rates to evaluate the effectiveness of our website.
+- **Content Strategy Optimization**: Identifying popular content and pages to improve our content strategy.
+- **Marketing Campaign Analysis**: Measuring the success of marketing campaigns through custom events and UTM parameters.
+- **Referrer Tracking**: Understanding where our visitors come from and which external sources are most effective.
+- **Device and Browser Analysis**: Insight into the technical aspects of our visitors to improve compatibility.
+- **Public Transparency**: Sharing our analytics with the community to promote openness and transparency.
+
+## Pricing Model
+
+Plausible offers a usage-based pricing model:
+
+- **Starter ($9/month)**: For up to 10,000 page views per month, including unlimited websites and team members.
+- **Growth ($19/month)**: For up to 100,000 page views per month.
+- **Business ($69/month)**: For up to 1 million page views per month.
+- **Enterprise**: Custom plans for websites with higher traffic.
+
+All plans offer a 30-day free trial without credit card details. For self-hosted installations, there are no fees, but the infrastructure must be managed independently.
+
+## Why We Recommend It
+
+We recommend Plausible for several reasons:
+
+- **Privacy Compliance**: In an era where privacy is increasingly important, Plausible offers a legally secure solution that doesn't require cookie banners.
+- **Performance Benefits**: The lightweight approach improves website performance, which is beneficial for both users and SEO.
+- **User-Friendliness**: The dashboard is intuitive and provides the most important information at a glance without being overwhelming.
+- **Transparency**: As an open-source platform, Plausible offers insight into how it works, which builds trust.
+- **Ethical Alternative**: Plausible represents a more ethical alternative to the data-driven, advertising-centric models of big tech companies.
+
+For website operators looking for a privacy-friendly, simple, and effective analytics platform, Plausible is an excellent choice that combines technical efficiency with ethical principles.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/revenuecat.md b/apps/bauntown/apps/landing/src/content/tools/en/revenuecat.md
new file mode 100644
index 000000000..3808a7cfc
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/revenuecat.md
@@ -0,0 +1,79 @@
+---
+title: 'RevenueCat'
+description: 'Platform for in-app subscription and purchase management in mobile apps'
+pubDate: 2024-05-22
+updatedDate: 2024-05-22
+category: 'Development'
+image: '/images/tools/revenuecat-tool-bauntown-coding.png'
+featured: false
+pricing: 'Freemium'
+website: 'https://www.revenuecat.com/'
+tags: ['Mobile', 'In-App Purchases', 'Subscriptions', 'Monetization', 'Development']
+externalLinks:
+ - title: 'RevenueCat Documentation'
+ url: 'https://docs.revenuecat.com/'
+ - title: 'RevenueCat SDK GitHub'
+ url: 'https://github.com/RevenueCat/purchases-ios'
+---
+
+## Overview
+
+RevenueCat is a powerful platform that significantly simplifies the implementation, management, and optimization of in-app purchases and subscriptions in mobile apps. It serves as a backend-as-a-service for in-app purchases and provides a unified API for handling app store mechanisms across iOS, Android, and various cross-platform frameworks.
+
+## Key Features
+
+### Cross-Platform Integration
+
+RevenueCat offers a unified API for iOS, Android, React Native, Flutter, Unity, Cordova, and more. This allows developers to use the same code for in-app purchases across different platforms, greatly simplifying development and maintenance.
+
+### Subscription Management
+
+The platform automates complex tasks such as trial conversions, renewals, refunds, and subscription upgrades. It tracks user subscription status in real-time and synchronizes data between the App Store, Google Play, and your app.
+
+### Entitlements API
+
+With RevenueCat, developers can define product-related entitlements that are independent of specific store products. This enables more flexible product design and easier A/B testing without app updates.
+
+### Webhooks and Integrations
+
+The platform integrates with business tools like Stripe, Adjust, AppsFlyer, Mixpanel, Segment, and many others. Webhooks can be triggered on subscription events to update your own systems or trigger marketing actions.
+
+### Analytics Dashboard
+
+RevenueCat provides detailed insights into metrics such as monthly recurring revenue (MRR), subscriber numbers, conversion rates, and churn rates. The dashboard allows tracking performance across different platforms and products.
+
+### Customer Portal
+
+With RevenueCat, developers can set up a custom customer portal where customers can manage their subscriptions themselves. This reduces support requests and improves customer satisfaction.
+
+## How We Use RevenueCat at BaunTown
+
+At BaunTown, we use RevenueCat for several mobile app projects:
+
+- **Simplified Subscription Implementation**: We use RevenueCat's SDKs to quickly implement subscriptions and in-app purchases in our apps.
+- **Cross-Platform Consistency**: For apps available on both iOS and Android, we use RevenueCat to ensure a unified purchase experience.
+- **A/B Price Testing**: With the Entitlements API, we conduct price tests to find the optimal pricing without having to publish app updates.
+- **Revenue Analysis**: We use the analytics dashboard to track and optimize revenue, conversion rates, and subscriber retention.
+- **Integrations with Marketing Tools**: By integrating with our analytics and CRM systems, we can conduct targeted marketing campaigns for different user groups.
+
+## Pricing Model
+
+RevenueCat offers three main pricing tiers:
+
+- **Free**: For apps with annual revenue under $10,000, with basic features for startups and small apps.
+- **Starter ($119/month)**: For apps with annual revenue between $10,000 and $400,000, with advanced features like webhooks, integrations, and customer support.
+- **Pro ($499/month)**: For larger apps with annual revenue over $400,000, with additional features like multiple API keys, higher rate limits, and prioritized support.
+
+All plans offer a percentage fee of 0-1.9% of revenue, depending on the chosen plan and the generated revenue.
+
+## Why We Recommend It
+
+RevenueCat has proven indispensable to us for several reasons:
+
+- **Time and Resource Savings**: Implementing and maintaining in-app purchases without RevenueCat can take weeks of development time and requires ongoing attention for server updates and API changes.
+- **Reliability**: RevenueCat provides a reliable infrastructure with 99.9% availability, which is crucial for business-critical transactions.
+- **Better Insights**: The analytics dashboard offers valuable insights into user behavior and revenue streams that wouldn't be possible with the native app store tools alone.
+- **Flexibility in Product Design**: The Entitlements API allows us to customize product offerings and experiment without having to submit app updates.
+- **Scalability**: The platform grows with our apps and provides robust solutions for both small and large applications.
+
+For developers looking to implement in-app purchases or subscriptions in their mobile apps, RevenueCat offers significant added value and can dramatically reduce development effort while providing insights and flexibility that are crucial for optimizing app monetization.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/testflight.md b/apps/bauntown/apps/landing/src/content/tools/en/testflight.md
new file mode 100644
index 000000000..fe82b323a
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/testflight.md
@@ -0,0 +1,69 @@
+---
+title: 'TestFlight'
+description: "Apple's beta testing platform for iOS, iPadOS, macOS, tvOS, and watchOS apps"
+pubDate: 2024-05-20
+updatedDate: 2024-05-20
+category: 'Development'
+image: '/images/tools/testflight-tool-bauntown-coding.png'
+featured: false
+pricing: 'Free'
+website: 'https://developer.apple.com/testflight/'
+tags: ['Testing', 'iOS', 'App Development', 'Beta', 'Apple']
+externalLinks:
+ - title: 'TestFlight Documentation'
+ url: 'https://developer.apple.com/documentation/testflight'
+ - title: 'App Store Connect Help'
+ url: 'https://help.apple.com/app-store-connect/'
+---
+
+## Overview
+
+TestFlight is Apple's official beta testing platform, allowing developers to distribute their iOS, iPadOS, macOS, tvOS, and watchOS apps to testers before they're released on the App Store. It provides a streamlined method for gathering feedback, identifying bugs, and optimizing user experience prior to an app's official launch.
+
+## Key Features
+
+### Easy Distribution
+
+TestFlight simplifies beta version distribution through a straightforward invitation system. Developers can invite testers via email or create public links, supporting up to 10,000 external testers. For internal testing within a development team, up to 100 members of the Apple Developer organization can participate.
+
+### Version Management
+
+The platform allows developers to manage multiple builds of an app simultaneously. Different versions can be distributed to different tester groups, enabling A/B testing and targeted feature evaluation. TestFlight provides detailed build information and gives developers control over which versions are available to which testers.
+
+### Feedback Collection
+
+TestFlight includes built-in feedback mechanisms that make it easy for testers to report issues, share screenshots, and send comments to developers. This direct feedback loop is crucial for identifying user problems and refining the app before public release.
+
+### Automatic Installation Notifications
+
+When new build versions are available, TestFlight automatically sends notifications to testers. This ensures testers always have access to the latest version of the app and encourages continuous feedback throughout the development process.
+
+### Expiration Management
+
+TestFlight builds automatically expire after 90 days, ensuring testers aren't using outdated versions long-term. Developers can also remove or update access to specific builds before this timeframe as needed.
+
+## How We Use TestFlight at BaunTown
+
+At BaunTown, we integrate TestFlight into our development process in the following ways:
+
+- Internal testing for our development team in early stages of new features
+- Beta testing with selected user groups before major updates
+- Collecting feedback on UI and UX
+- Validating app performance across different devices and iOS versions
+- Pre-release QA testing for stability and functionality
+
+## Pricing Model
+
+TestFlight is a free service from Apple for all registered Apple Developer Program participants. The only associated costs are the annual Apple Developer Program fee ($99 for individuals or $299 for organizations).
+
+## Why We Recommend It
+
+TestFlight has proven to be an indispensable tool in our iOS development process for several reasons:
+
+- **Seamless Integration**: As an Apple product, TestFlight integrates seamlessly with the Apple developer ecosystem, including App Store Connect and Xcode.
+- **User-Friendliness**: The invitation process and installation of beta apps is straightforward for testers, leading to higher participation rates.
+- **Stability Testing**: The ability to test our apps on a variety of real devices helps identify device-specific issues that might not appear in simulated environments.
+- **Reliable Delivery**: Apple's system ensures updates are reliably distributed to testers, with minimal administrative overhead for the development team.
+- **Compliance and Security**: The platform meets Apple's stringent security and privacy requirements, which is important for distributing software to external testers.
+
+For any team developing iOS apps, TestFlight has become a standard tool that streamlines the transition from development to production and ensures apps are thoroughly tested before they're made available to the public on the App Store.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/en/windsurf-ai.md b/apps/bauntown/apps/landing/src/content/tools/en/windsurf-ai.md
new file mode 100644
index 000000000..76ff8a667
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/en/windsurf-ai.md
@@ -0,0 +1,101 @@
+---
+title: 'Windsurf AI'
+description: 'A revolution in software development through AI-powered development environment'
+pubDate: 2024-05-18
+updatedDate: 2024-05-18
+category: 'Development'
+image: '/images/tools/windsurf-ide-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://windsurf.ai'
+tags: ['AI', 'IDE', 'Software Development', 'Code Generation', 'Productivity']
+externalLinks:
+ - title: 'Codeium Website'
+ url: 'https://codeium.com/'
+ - title: 'Windsurf AI Documentation'
+ url: 'https://docs.windsurf.ai/'
+---
+
+## Overview
+
+Windsurf AI is a groundbreaking integrated development environment (IDE) that seamlessly integrates artificial intelligence (AI) into the development process. Developed by Codeium, Windsurf offers a combination of copilot functionality and autonomous agents that significantly increases developer productivity.
+
+## Key Features
+
+### Supercomplete
+
+This feature goes beyond conventional auto-completion by predicting the developer's intent. For example, Windsurf can generate Python functions with correct docstrings and customized functionality based on the context of the code.
+
+### Cascade
+
+Cascade is an interactive AI tool that generates or modifies code while soliciting iterative feedback from the developer. It also allows the integration of images to create HTML, CSS, and JavaScript code that mimics visual designs.
+
+### Multi-File Editing
+
+Windsurf supports context-aware changes across multiple files, which is particularly helpful for large projects. The AI understands the relationships between files and ensures consistency.
+
+### Memories
+
+This feature stores contextual information about projects, either automatically or through custom rules. This improves continuity and precision in the collaboration between developer and AI.
+
+### AI Terminal
+
+With the integrated terminal, developers can generate code, fix errors, and work directly in the terminal. This feature combines coding and debugging in a single workspace.
+
+## Benefits of Windsurf
+
+### Productivity Boost
+
+Windsurf reduces context switching and provides quick, precise suggestions for code changes. This significantly accelerates the development process.
+
+### Privacy
+
+Unlike many other tools, Windsurf does not train its models on unapproved data and offers options such as encryption and zero-day data storage.
+
+### Flexibility
+
+The IDE is compatible with various operating systems (Windows, macOS, Linux) and can be combined with other development environments like WebStorm.
+
+### Free Usage
+
+Windsurf offers a generous free version with advanced features such as unlimited access to AI models and auto-completion.
+
+## Comparison with Other IDEs
+
+Windsurf stands out for its ability to act as both a copilot and an autonomous agent, distinguishing it from other IDEs like Cursor.
+
+| Feature | Windsurf Editor | Cursor | VS Code (with plugins) |
+|---------------------------|---|---|---|
+| AI Agent Support | ✅ Yes | ❌ No | ❌ No |
+| Multi-File Editing | ✅ Yes | ✅ Yes | ❌ No |
+| Full Context Awareness | ✅ Yes | ❌ No | ❌ No |
+
+## Use Cases
+
+Windsurf is excellent for:
+
+- **Debugging Large Projects**: The AI identifies problems in real time and suggests solutions.
+- **Efficient Editing of Complex Codebases**: Multi-file support enables coherent changes.
+- **Collaborative Development**: Developers can collaborate with the AI to complete tasks more quickly.
+
+## How We Use Windsurf AI at BaunTown
+
+At BaunTown, we've integrated Windsurf AI into our development process to:
+
+- Reduce onboarding time for new team members
+- Improve code quality through AI-powered suggestions
+- Automate routine tasks and free up more time for creative problem solving
+- Optimize the documentation of our codebase
+- Accelerate the onboarding process for new projects
+
+## Pricing Model
+
+Windsurf AI offers various pricing options:
+
+- **Free**: Unlimited access to basic AI features, ideal for individual developers and small teams.
+- **Pro ($12/month)**: Advanced features such as Memories and deeper context analysis.
+- **Enterprise**: Customized solutions for large teams with additional security and management features.
+
+## Conclusion
+
+Windsurf AI is more than just a tool – it's an intelligent partner for developers. With its innovative features like Cascade and Memories, as well as its ability for deep context analysis, it revolutionizes the way software is developed. For beginners and experienced developers alike, Windsurf offers an intuitive user interface and a variety of features that optimize workflow.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/claude-code.md b/apps/bauntown/apps/landing/src/content/tools/it/claude-code.md
new file mode 100644
index 000000000..68ba6bf9d
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/claude-code.md
@@ -0,0 +1,85 @@
+---
+title: 'Claude Code'
+description: 'Supporto rivoluzionario basato su AI per lo sviluppo software nel terminale'
+pubDate: 2024-06-03
+updatedDate: 2024-06-03
+category: 'Development'
+image: '/images/tools/claudecode-tool-bauntown-coding.png'
+featured: true
+pricing: 'Paid'
+website: 'https://claude.ai/code'
+tags: ['AI', 'Sviluppo Software', 'Automazione', 'Terminale', 'Refactoring']
+externalLinks:
+ - title: 'Sito Web Anthropic'
+ url: 'https://www.anthropic.com/'
+ - title: 'Documentazione Claude Code'
+ url: 'https://docs.anthropic.com/claude/code'
+---
+
+## Panoramica
+
+Claude Code è uno strumento innovativo sviluppato da Anthropic per supportare gli sviluppatori software in modo più efficiente. È uno strumento di codifica basato su agenti che opera direttamente nel terminale e utilizza comandi in linguaggio naturale per automatizzare attività come il refactoring, la documentazione e il debugging.
+
+## Cos'è Claude Code?
+
+Claude Code si integra perfettamente nell'ambiente di sviluppo senza server aggiuntivi o configurazioni complesse. Offre agli sviluppatori la possibilità di analizzare, migliorare e correggere la propria codebase. Le funzionalità chiave includono:
+
+- **Refactoring del codice**: Ottimizzazione e miglioramento della codebase con suggerimenti basati sull'AI.
+- **Risoluzione dei problemi**: Identificazione e risoluzione di problemi come dipendenze mancanti o colli di bottiglia nelle prestazioni.
+- **Comprensione del codice**: Rispondere a domande sull'architettura, la logica e le dipendenze del codice.
+- **Testing e linting automatizzati**: Esecuzione di test e miglioramento della qualità del codice.
+- **Integrazione Git**: Modifica delle cronologie dei commit, risoluzione dei conflitti di merge e generazione di pull request.
+
+## Vantaggi per gli sviluppatori
+
+Claude Code si rivolge a vari gruppi di utenti:
+
+- **Sviluppatori software**: Miglioramento della qualità e della manutenibilità del codice.
+- **Contributori open source**: Lavoro più facile con codebase non familiari.
+- **Ingegneri DevOps**: Automazione delle revisioni del codice e dei compiti di garanzia della qualità.
+
+## Come funziona Claude Code?
+
+A differenza degli assistenti di codifica tradizionali come GitHub Copilot, Claude Code va oltre i semplici suggerimenti. Può eseguire comandi in modo indipendente, leggere e modificare file, identificare e correggere errori. Utilizza strumenti specializzati come:
+
+- **BashTool**: Esecuzione di comandi shell.
+- **FileReadTool & FileEditTool**: Lettura e modifica di file.
+- **GlobTool & GrepTool**: Ricerca di file o contenuti specifici.
+- **AgentTool**: Delega di compiti complessi a sub-agenti.
+
+## Applicazioni pratiche
+
+### Refactoring
+
+Claude Code aiuta gli sviluppatori a migliorare la leggibilità e la manutenibilità dei loro progetti. Può creare documentazione per moduli o aggiungere commenti per rendere il codice più comprensibile.
+
+### Risoluzione dei problemi
+
+Lo strumento analizza i messaggi di errore e fornisce soluzioni. Può identificare importazioni mancanti o correggere errori di runtime. In un esempio, Claude Code ha aggiunto commenti per sopprimere avvisi senza influenzare la funzionalità.
+
+### Automazione
+
+Con la sua capacità di eseguire comandi in modo indipendente, Claude Code riduce significativamente il tempo dedicato a compiti ripetitivi. Anthropic afferma che attività che prima richiedevano 45 minuti ora possono essere completate in pochi secondi.
+
+## Come utilizziamo Claude Code in BaunTown
+
+A BaunTown, impieghiamo Claude Code in modo strategico, con un occhio attento all'efficienza dei costi:
+
+- Utilizziamo Claude Code in parallelo con strumenti più economici come Windsurf AI o Cursor per ottimizzare le spese giornaliere.
+- Per funzionalità di alto livello e compiti di UI design, preferiamo Claude Code poiché offre i migliori risultati in queste aree.
+- Per compiti complessi di refactoring o quando ci familiarizziamo con codebase sconosciute, Claude Code è il nostro strumento preferito.
+- Per attività di routine e lavori di sviluppo più semplici, utilizziamo alternative più economiche.
+
+## Modello di prezzo e gestione dei costi
+
+Claude Code può comportare costi significativi a seconda dell'intensità di utilizzo:
+
+- I costi possono variare da 10 a 70 dollari al giorno per persona, a seconda dell'intensità di utilizzo e delle attività svolte.
+- Non esiste un modello a tariffa fissa, ma piuttosto una fatturazione basata sull'utilizzo.
+- I costi variano in base alla dimensione del modello, alla lunghezza dei token e al numero di richieste.
+
+## Prospettive future
+
+Sebbene Claude Code sia ancora in fase di anteprima, mostra un grande potenziale per trasformare lo sviluppo software. Non solo fa risparmiare tempo agli sviluppatori, ma consente anche una più profonda integrazione dell'AI nel processo di sviluppo. Con miglioramenti futuri, potrebbe essere possibile generare autonomamente progetti completi.
+
+Claude Code segna un passo significativo verso una nuova era dello sviluppo software – un'era in cui gli sviluppatori possono portare il loro lavoro a un nuovo livello attraverso l'automazione intelligente. Nonostante i costi più elevati rispetto ad altri strumenti di codifica AI, offre un chiaro valore aggiunto in determinati scenari che giustifica l'investimento.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/claude.md b/apps/bauntown/apps/landing/src/content/tools/it/claude.md
new file mode 100644
index 000000000..cac2d3ed1
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/claude.md
@@ -0,0 +1,76 @@
+---
+title: 'Claude'
+description: 'Assistente AI avanzato di Anthropic per conversazione, generazione di testo e analisi'
+pubDate: 2024-06-01
+updatedDate: 2024-06-01
+category: 'Development'
+image: '/images/tools/claude-tool-bauntown-coding.png'
+featured: false
+pricing: 'Freemium'
+website: 'https://claude.ai'
+tags: ['AI', 'Generazione di testo', 'Produttività', 'Assistenza', 'Comunicazione']
+externalLinks:
+ - title: 'Documentazione Claude'
+ url: 'https://docs.anthropic.com/claude/'
+ - title: 'API Claude'
+ url: 'https://docs.anthropic.com/claude/reference/'
+---
+
+## Panoramica
+
+Claude è un assistente AI avanzato sviluppato da Anthropic, progettato per conversazioni utili, innocue e oneste. Con il suo focus sulla sicurezza e sull'uso responsabile dell'AI, Claude offre una vasta gamma di applicazioni, dalla generazione di testo e analisi dei dati alla collaborazione creativa.
+
+## Caratteristiche principali
+
+### Conversazione naturale
+
+Claude eccelle nella conversazione naturale e simile a quella umana. Può comprendere istruzioni complesse, mantenere informazioni contestuali durante conversazioni estese e fornire risposte sfumate adattate alle specifiche esigenze dell'utente.
+
+### Generazione e modifica di testo
+
+Uno dei casi d'uso principali per Claude è l'assistenza nella creazione di testi. Può aiutare a redigere post di blog, email, report, materiali di marketing e contenuti creativi. Claude può anche perfezionare testi esistenti per migliorarne stile, tono e chiarezza.
+
+### Assistenza alla programmazione
+
+Claude fornisce un supporto completo per gli sviluppatori, inclusa la spiegazione di concetti di codice, l'aiuto con il debugging, la generazione di esempi di codice e la creazione di documentazione. Può lavorare con vari linguaggi di programmazione e assistere nell'ottimizzazione del codice.
+
+### Elaborazione e analisi delle informazioni
+
+Con la capacità di elaborare grandi quantità di informazioni, Claude può aiutare a riassumere documenti, estrarre approfondimenti chiave e organizzare dati. Può spiegare argomenti complessi e scomporli in concetti comprensibili.
+
+### Comprensione multimodale
+
+Le versioni più recenti di Claude supportano interazioni multimodali, consentendo all'assistente di comprendere sia testo che immagini. Ciò permette casi d'uso come l'analisi di dati visivi, la descrizione di grafici e la lavorazione con testo nelle immagini.
+
+## Come utilizziamo Claude in BaunTown
+
+A BaunTown, impieghiamo Claude per una varietà di compiti:
+
+- Creazione e miglioramento di documentazione e guide tecniche
+- Brainstorming per nuove funzionalità e progetti
+- Assistenza nello sviluppo di codice e debugging
+- Traduzione e localizzazione di contenuti per diverse lingue
+- Riassunto di riunioni e creazione di punti d'azione
+- Ricerca e analisi di tendenze di mercato e sviluppi tecnologici
+
+## Modello di prezzo
+
+Claude offre diverse opzioni di accesso:
+
+- **Claude Free**: Accesso limitato all'interfaccia web con restrizioni sulla frequenza di utilizzo e funzionalità.
+- **Claude Pro ($20 al mese)**: Accesso prioritario durante i periodi di punta, limiti di utilizzo più elevati e accesso ai modelli Claude più recenti.
+- **Claude API**: Prezzi basati sull'utilizzo per sviluppatori e aziende che desiderano integrare Claude nelle loro applicazioni, con prezzi basati sul consumo di token.
+- **Soluzioni Enterprise**: Prezzi e funzionalità personalizzati per organizzazioni con requisiti specifici per sicurezza, scalabilità e supporto.
+
+## Perché lo raccomandiamo
+
+Claude è diventato uno strumento inestimabile nel nostro flusso di lavoro per diversi motivi:
+
+- L'impressionante capacità di comprendere ed eseguire istruzioni complesse
+- L'attenzione alla sicurezza e all'uso responsabile dell'AI, importante per i nostri standard etici
+- La versatilità nel gestire un'ampia gamma di compiti, dalla creazione creativa al supporto tecnico
+- Il miglioramento continuo attraverso aggiornamenti regolari e nuove funzionalità
+- L'integrazione perfetta nei nostri strumenti e flussi di lavoro esistenti attraverso l'API
+- La capacità di automatizzare attività dispendiose in termini di tempo, creando così più spazio per lavoro creativo e strategico
+
+Claude ci permette di lavorare in modo più efficiente migliorando al contempo la qualità dei nostri output, rendendolo una parte essenziale del nostro set di strumenti.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/cursor.md b/apps/bauntown/apps/landing/src/content/tools/it/cursor.md
new file mode 100644
index 000000000..319f92aa3
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/cursor.md
@@ -0,0 +1,71 @@
+---
+title: 'Cursor'
+description: 'Un potente editor di codice con integrazione AI per uno sviluppo più rapido'
+pubDate: 2024-06-18
+updatedDate: 2024-06-18
+category: 'Development'
+image: '/images/tools/cursor-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://cursor.sh'
+tags: ['Sviluppo', 'AI', 'IDE', 'Produttività']
+externalLinks:
+ - title: 'Documentazione Cursor'
+ url: 'https://cursor.sh/docs'
+ - title: 'Cursor su GitHub'
+ url: 'https://github.com/getcursor/cursor'
+---
+
+## Panoramica
+
+Cursor è un moderno editor di codice basato su Visual Studio Code e potenziato con potenti funzionalità di assistenza AI. Integra modelli di linguaggio avanzati per portare generazione di codice, debugging e suggerimenti intelligenti direttamente nell'ambiente di sviluppo.
+
+## Caratteristiche principali
+
+### Generazione di codice basata su AI
+
+Con Cursor, puoi generare codice attraverso descrizioni in linguaggio naturale. Descrivi semplicemente cosa vuoi che il tuo codice faccia, e l'AI suggerisce implementazioni corrispondenti.
+
+### Completamento intelligente del codice
+
+Oltre all'autocompletamento tradizionale, Cursor comprende il contesto del tuo codice e può suggerire intere funzioni o metodi che si adattano al tuo progetto.
+
+### Diagnosi e risoluzione degli errori
+
+Quando incontri errori o bug, Cursor può fornire spiegazioni e suggerimenti per la soluzione. L'AI analizza il tuo codice e identifica potenziali problemi e le loro cause.
+
+### Interfaccia di chat
+
+La funzione di chat integrata ti permette di discutere del tuo codice con l'AI, fare domande o ottenere spiegazioni per specifici segmenti di codice.
+
+### Compatibilità con VSCode
+
+Poiché Cursor è basato su VSCode, è compatibile con la maggior parte delle estensioni VSCode e offre un'interfaccia utente familiare per gli sviluppatori che già lavorano con VSCode.
+
+## Come utilizziamo Cursor in BaunTown
+
+A BaunTown, utilizziamo Cursor per:
+
+- Sviluppo rapido di prototipi per implementare velocemente le idee
+- Complessi task di refactoring dove l'AI aiuta a comprendere e ristrutturare il codice
+- Scopi di apprendimento, poiché l'AI fornisce eccellenti spiegazioni dei segmenti di codice
+- Accelerare attività di sviluppo ricorrenti attraverso snippet di codice generati dall'AI
+
+## Modello di prezzo
+
+Cursor offre le seguenti opzioni di prezzo:
+
+- **Free**: Funzionalità AI di base con un numero limitato di richieste al giorno
+- **Pro ($20/mese)**: Richieste AI illimitate, accesso a modelli AI avanzati e funzionalità aggiuntive
+- **Teams**: Offerte aziendali con funzionalità amministrative aggiuntive
+
+## Perché lo raccomandiamo
+
+Come sviluppatori, abbiamo scoperto che Cursor aumenta significativamente la nostra produttività, soprattutto quando:
+
+- Esplorando nuove librerie o framework, poiché l'AI può fornire esempi pratici e spiegazioni
+- Scrivendo segmenti di codice ripetitivi, che l'AI può automatizzare in gran parte
+- Facendo debug, poiché l'AI spesso identifica problemi facili da trascurare
+- Documentando e comprendendo il codice esistente
+
+Cursor ha cambiato il modo in cui scriviamo codice, permettendoci di concentrarci maggiormente sulla risoluzione dei problemi e meno sulla sintassi.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/discord.md b/apps/bauntown/apps/landing/src/content/tools/it/discord.md
new file mode 100644
index 000000000..90c79af64
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/discord.md
@@ -0,0 +1,76 @@
+---
+title: 'Discord'
+description: 'Piattaforma di chat e community per comunicazione testuale, vocale e video'
+pubDate: 2024-06-05
+updatedDate: 2024-06-05
+category: 'Productivity'
+image: '/images/tools/discord-tool-bauntown-coding.png'
+featured: false
+pricing: 'Freemium'
+website: 'https://discord.com'
+tags: ['Comunicazione', 'Community', 'Chat', 'Voce', 'Collaborazione']
+externalLinks:
+ - title: 'Centro Supporto Discord'
+ url: 'https://support.discord.com/'
+ - title: 'Portale Sviluppatori Discord'
+ url: 'https://discord.com/developers/docs/intro'
+---
+
+## Panoramica
+
+Discord è una piattaforma di comunicazione digitale inizialmente progettata per i giocatori ma si è evoluta in uno strumento versatile per comunità, team e amici. La piattaforma combina comunicazione testuale, vocale e video con strumenti per la gestione e il coinvolgimento della community.
+
+## Caratteristiche principali
+
+### Server e Canali
+
+Discord è costruito attorno ai concetti di server e canali. I server fungono da hub comunitari, mentre i canali all'interno di questi server possono essere configurati per diversi argomenti, progetti o team. Questa struttura consente una comunicazione organizzata anche in gruppi numerosi.
+
+### Comunicazione Testuale, Vocale e Video
+
+La piattaforma supporta varie forme di comunicazione: canali di testo per discussioni asincrone e documentazione, canali vocali per conversazioni dal vivo e video per interazioni più personali. La capacità di condividere schermi rende Discord uno strumento utile anche per la collaborazione e le presentazioni.
+
+### Bot e Integrazioni
+
+Discord fornisce un'API estesa che permette lo sviluppo di bot e integrazioni. Questi possono essere utilizzati per automatizzare i flussi di lavoro, inviare promemoria, condurre sondaggi, riprodurre musica e molto altro. L'ecosistema di bot in crescita estende significativamente la funzionalità di Discord.
+
+### Ruoli e Permessi
+
+Il sistema di ruoli e permessi di Discord consente agli amministratori del server di controllare con precisione chi ha accesso a quali canali e quali azioni possono eseguire. Ciò permette la creazione di aree moderate, canali privati e strutture gerarchiche.
+
+### Coinvolgimento della Community
+
+Discord offre funzionalità come reazioni, thread, forum ed eventi che favoriscono il coinvolgimento della community. I server possono essere pubblici o privati, e i link di invito rendono facile l'ingresso di nuovi membri.
+
+## Come utilizziamo Discord in BaunTown
+
+A BaunTown, utilizziamo Discord per:
+
+- Gestione della community e coinvolgimento dei membri
+- Comunicazione interna del team e coordinamento dei progetti
+- Sessioni di codifica dal vivo e workshop con condivisione dello schermo
+- Rispondere a domande tecniche e supporto tra pari
+- Annunci e aggiornamenti sui progetti
+- Networking e interazioni sociali tra i membri della community
+
+## Modello di prezzo
+
+Discord offre diverse opzioni di abbonamento:
+
+- **Gratuito**: Funzionalità di base tra cui creazione di server, canali di testo e vocali con alcune limitazioni.
+- **Discord Nitro Basic (2,99 € al mese)**: Opzioni di personalizzazione avanzate e limiti di caricamento più elevati.
+- **Discord Nitro (9,99 € al mese)**: Funzionalità premium come qualità video superiore, dimensioni di caricamento maggiori, più opzioni di personalizzazione e potenziamenti server.
+- **Server Boosts**: Aggiornamenti separati che possono essere acquistati per i server per sbloccare funzionalità aggiuntive.
+
+## Perché lo raccomandiamo
+
+Discord si è dimostrato uno strumento indispensabile per la costruzione della nostra community e la collaborazione del team. Apprezziamo particolarmente:
+
+- La flessibilità di supportare sia la comunicazione asincrona che in tempo reale, ideale per team distribuiti
+- L'interfaccia utente intuitiva che facilita la navigazione ai nuovi membri
+- I robusti strumenti di moderazione e sicurezza per proteggere la nostra community
+- La possibilità di utilizzare bot per automatizzare attività di routine
+- La capacità di gestire gruppi di interesse all'interno della stessa piattaforma
+- Lo sviluppo continuo e l'aggiunta di nuove funzionalità
+
+Discord ci ha aiutato a costruire una community vivace e coinvolta mentre ottimizzava i nostri flussi di comunicazione interna.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/expo.md b/apps/bauntown/apps/landing/src/content/tools/it/expo.md
new file mode 100644
index 000000000..0f26caa62
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/expo.md
@@ -0,0 +1,73 @@
+---
+title: 'Expo'
+description: 'Framework di sviluppo e piattaforma per applicazioni React universali'
+pubDate: 2024-05-25
+updatedDate: 2024-05-25
+category: 'Development'
+image: '/images/tools/expo-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://expo.dev'
+tags: ['React Native', 'Mobile', 'Sviluppo App', 'Cross-Platform', 'JavaScript']
+externalLinks:
+ - title: 'Documentazione Expo'
+ url: 'https://docs.expo.dev/'
+ - title: 'Blog Expo'
+ url: 'https://blog.expo.dev/'
+---
+
+## Panoramica
+
+Expo è un potente framework e una suite di piattaforme per lo sviluppo di applicazioni React universali. Fornisce un insieme di strumenti e servizi che semplificano il processo di creazione, distribuzione e rapida iterazione di app iOS, Android e web utilizzando JavaScript e React.
+
+## Caratteristiche principali
+
+### Expo SDK
+
+L'Expo SDK è una raccolta completa di API native e moduli astratti per lo sviluppo React Native. Copre tutto, dall'accesso alla fotocamera e all'audio fino alle notifiche push e agli acquisti in-app. Questo permette agli sviluppatori di accedere a funzionalità native senza dover scrivere codice nativo.
+
+### Expo Go
+
+L'app Expo Go consente il test immediato delle applicazioni su dispositivi fisici durante lo sviluppo. Gli sviluppatori possono scansionare codici QR per testare le loro applicazioni su dispositivi reali senza passare attraverso complessi processi di compilazione. Questo accelera significativamente il ciclo di sviluppo.
+
+### Expo CLI
+
+L'interfaccia a riga di comando di Expo semplifica il processo di creazione, test e pubblicazione dei progetti. Con un singolo comando, gli sviluppatori possono avviare nuovi progetti, testare applicazioni su diversi simulatori o creare build per la distribuzione.
+
+### EAS Build e Submit
+
+Expo Application Services (EAS) consente agli sviluppatori di creare build native nel cloud e inviare applicazioni direttamente agli app store. Questo elimina la necessità di configurare ambienti di build locali e semplifica il processo di pubblicazione.
+
+### Aggiornamenti Over-the-Air (OTA)
+
+Uno degli aspetti più potenti di Expo è la capacità di inviare aggiornamenti JavaScript direttamente agli utenti senza passare attraverso il processo di revisione dell'app store. Questo permette correzioni rapide di bug e aggiornamenti di funzionalità.
+
+## Come utilizziamo Expo in BaunTown
+
+A BaunTown, utilizziamo Expo per diversi progetti mobili:
+
+- Prototipazione rapida di nuove idee per app
+- Sviluppo e distribuzione delle nostre applicazioni mobili
+- Distribuzione cross-platform (iOS, Android e web) con un'unica base di codice
+- Facile integrazione con i nostri progetti web esistenti basati su React
+- Pubblicazione rapida di aggiornamenti ai nostri utenti
+
+## Modello di prezzo
+
+Expo offre diverse opzioni di prezzo:
+
+- **Gratuito**: Ideale per sviluppatori indipendenti e piccoli progetti con requisiti limitati. Fornisce accesso alle funzionalità principali ma con alcune limitazioni.
+- **Production ($499/mese)**: Per team in crescita con requisiti maggiori, inclusi minuti di build potenziati, più notifiche push e supporto prioritario.
+- **Enterprise**: Per organizzazioni più grandi che richiedono tutte le funzionalità premium con supporto personalizzato, SLA e risorse dedicate.
+
+## Perché lo raccomandiamo
+
+Expo ha rivoluzionato il nostro sviluppo di applicazioni mobili per diversi motivi:
+
+- **Velocità di sviluppo**: Con Expo, possiamo sviluppare e iterare sulle applicazioni molto più velocemente rispetto agli approcci nativi tradizionali.
+- **Base di codice unificata**: La possibilità di riutilizzare gran parte del nostro codice su diverse piattaforme riduce significativamente il tempo di sviluppo e il carico di manutenzione.
+- **Facile inserimento**: La curva di apprendimento poco ripida rende facile per i nuovi membri del team mettersi al passo, specialmente se hanno già esperienza con React per il web.
+- **Aggiornamenti OTA**: La capacità di aggiornare le applicazioni senza passare attraverso le revisioni dell'app store accelera il nostro ciclo di correzione bug e implementazione di funzionalità.
+- **Versatilità**: Il supporto per il "bare workflow" significa che possiamo aggiungere estensioni di codice nativo quando necessario, fornendo flessibilità per applicazioni più complesse.
+
+Per i team che desiderano sviluppare e distribuire rapidamente applicazioni mobili, specialmente se hanno già familiarità con l'ecosistema React, Expo è una scelta eccellente che astrae molti degli aspetti complessi dello sviluppo di app native.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/figma.md b/apps/bauntown/apps/landing/src/content/tools/it/figma.md
new file mode 100644
index 000000000..a3b67c55a
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/figma.md
@@ -0,0 +1,68 @@
+---
+title: 'Figma'
+description: 'Strumento di design professionale per UI/UX che consente collaborazione e prototipazione'
+pubDate: 2024-06-20
+updatedDate: 2024-06-20
+category: 'Design'
+image: '/images/tools/figma-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://www.figma.com'
+tags: ['Design', 'UI/UX', 'Prototipazione', 'Collaborazione']
+externalLinks:
+ - title: 'Risorse di apprendimento Figma'
+ url: 'https://help.figma.com/hc/en-us/categories/360002051613-Getting-Started'
+ - title: 'Figma per principianti: Tutorial'
+ url: 'https://www.figma.com/resources/learn-design/'
+---
+
+## Panoramica
+
+Figma è uno strumento di design e prototipazione basato su browser per progetti digitali. Permette a designer e team di creare interfacce utente (UI), interazioni e prototipi per siti web, app e altri prodotti digitali.
+
+## Caratteristiche principali
+
+### Collaborazione in tempo reale
+
+Uno dei maggiori vantaggi di Figma è la capacità di collaborazione in tempo reale. Più persone possono lavorare contemporaneamente sullo stesso file, il che semplifica notevolmente il lavoro di squadra. Commenti e annotazioni permettono una comunicazione diretta all'interno del design.
+
+### Sistema di componenti
+
+Il sistema di componenti di Figma consente di creare elementi riutilizzabili che possono essere utilizzati in modo coerente in tutto il design. Le modifiche a un componente vengono aggiornate automaticamente ovunque, facilitando la manutenzione di grandi sistemi di design.
+
+### Auto Layout
+
+Questa funzione permette di creare design responsivi che si adattano automaticamente a diverse dimensioni dello schermo. Semplifica anche la disposizione degli elementi poiché spaziatura e allineamento possono essere calcolati automaticamente.
+
+### Prototipazione
+
+Figma offre potenti funzionalità di prototipazione che consentono di creare interazioni e transizioni tra diverse schermate. Questo rende possibile testare l'esperienza utente prima che inizi lo sviluppo effettivo.
+
+### Sistemi di design
+
+Con Figma, è possibile creare sistemi di design completi che definiscono tutti gli elementi visivi di un marchio o di un prodotto. Ciò promuove la coerenza tra diversi progetti.
+
+## Come utilizziamo Figma in BaunTown
+
+A BaunTown, utilizziamo Figma per:
+
+- Creare e mantenere il nostro sistema di design
+- Wireframing di nuove funzionalità e pagine
+- Progettazione di componenti UI e layout
+- Prototipazione per visualizzare i flussi utente
+- Collaborazione tra designer e sviluppatori
+- Presentazione di concetti di design agli stakeholder
+
+## Modello di prezzo
+
+Figma offre vari livelli di prezzo:
+
+- **Starter (Gratuito)**: Per individui e piccoli team. Limitato a 3 file Figma e 3 file FigJam.
+- **Professional (12$ per editor/mese)**: Per team professionali con file illimitati e funzionalità di condivisione avanzate.
+- **Organization (45$ per editor/mese)**: Per aziende più grandi con funzionalità aggiuntive di sicurezza e amministrazione.
+
+## Perché lo raccomandiamo
+
+Figma ha rivoluzionato il nostro flusso di lavoro di design grazie alla sua accessibilità (basato su browser, multipiattaforma), funzionalità collaborative e integrazione senza soluzione di continuità nel processo di sviluppo. Ci permette di iterare più velocemente e favorire una più stretta collaborazione tra design e sviluppo.
+
+L'interfaccia utente intuitiva e la vasta community con template e plugin rendono Figma uno strumento indispensabile nel nostro processo di sviluppo.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/github.md b/apps/bauntown/apps/landing/src/content/tools/it/github.md
new file mode 100644
index 000000000..04957878d
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/github.md
@@ -0,0 +1,79 @@
+---
+title: 'GitHub'
+description: 'Piattaforma collaborativa per il controllo versione e lo sviluppo congiunto di software'
+pubDate: 2024-05-28
+updatedDate: 2024-05-28
+category: 'Development'
+image: '/images/tools/github-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://github.com'
+tags: ['Controllo Versione', 'Git', 'Collaborazione', 'Open Source', 'CI/CD']
+externalLinks:
+ - title: 'Documentazione GitHub'
+ url: 'https://docs.github.com/'
+ - title: 'GitHub Skills'
+ url: 'https://skills.github.com/'
+---
+
+## Panoramica
+
+GitHub è la piattaforma leader mondiale per lo sviluppo e la collaborazione software. Basata sul sistema di controllo versione Git, GitHub fornisce una posizione centrale per collaborare sul codice, tracciare le modifiche e gestire progetti software di qualsiasi dimensione. Con oltre 100 milioni di sviluppatori in tutto il mondo e più di 400 milioni di repository, GitHub è diventato lo standard per lo sviluppo software moderno.
+
+## Caratteristiche principali
+
+### Repository e Controllo Versione
+
+Il cuore di GitHub sono i repository, che fungono da posizioni centrali di archiviazione per i file di progetto. Ogni modifica viene tracciata, consentendo un monitoraggio dettagliato della storia del progetto. Gli sviluppatori possono facilmente tornare a versioni precedenti, confrontare modifiche e risolvere conflitti.
+
+### Pull Request e Code Review
+
+Con le Pull Request, gli sviluppatori possono proporre modifiche che possono poi essere revisionate da altri membri del team. Questa funzionalità promuove la collaborazione, il controllo qualità e la condivisione delle conoscenze. Le revisioni del codice sono facilitate da strumenti integrati come la visualizzazione differenziale del codice e i commenti inline.
+
+### Issues e Gestione Progetti
+
+GitHub Issues permette di tracciare bug, attività e richieste di funzionalità in un formato strutturato. Con funzionalità come etichette, milestone e assegnazioni di persone, i team possono gestire efficacemente le attività. Le bacheche di progetto forniscono visualizzazioni simili a Kanban per il lavoro in corso.
+
+### GitHub Actions e CI/CD
+
+GitHub Actions automatizza i flussi di lavoro direttamente nel repository. Gli sviluppatori possono creare flussi di lavoro personalizzati per l'integrazione continua e la distribuzione continua (CI/CD) che si attivano automaticamente in determinati eventi come push o pull request.
+
+### Collaborazione e Trasparenza
+
+GitHub promuove la collaborazione attraverso processi trasparenti. Chiunque può vedere chi ha apportato quali modifiche, quando sono state fatte e perché. Le discussioni sono contestuali e direttamente legate al codice pertinente.
+
+### GitHub Copilot
+
+Una delle innovazioni più recenti è GitHub Copilot, un assistente di programmazione basato su AI che può essere integrato nell'ambiente di sviluppo e fa suggerimenti di codice basati su commenti e codice esistente.
+
+## Come utilizziamo GitHub in BaunTown
+
+A BaunTown, GitHub è un elemento centrale dei nostri processi di sviluppo:
+
+- **Hosting del Codice e Versionamento**: Tutti i nostri progetti sono archiviati e versionati in repository GitHub, dal codice sorgente del sito web alle applicazioni mobili.
+- **Sviluppo Collaborativo**: Utilizziamo Pull Request e Code Review per garantire la qualità e lavorare insieme ai progetti.
+- **Gestione Progetti**: Gli Issues vengono utilizzati per tracciare e dare priorità alle attività, mentre le bacheche di progetto permettono la visualizzazione dell'avanzamento del lavoro.
+- **Automazione**: GitHub Actions automatizza i nostri processi di test, build e deployment, riducendo gli interventi manuali e aumentando la coerenza.
+- **Documentazione**: Utilizziamo GitHub Pages e file Markdown per ospitare la documentazione del progetto direttamente accanto al codice.
+- **Coinvolgimento della Community**: Per i nostri progetti open-source, GitHub semplifica l'interazione con i contributori esterni e rende i progetti più accessibili.
+
+## Modello di prezzo
+
+GitHub offre vari piani di prezzo:
+
+- **Free**: Repository pubblici e privati illimitati, fino a 3 collaboratori per repository privati e funzionalità di base. Ideale per progetti personali e piccoli team.
+- **Team ($4 per utente/mese)**: Collaboratori illimitati, permessi avanzati e funzionalità di collaborazione aggiuntive.
+- **Enterprise ($21 per utente/mese)**: Sicurezza avanzata, funzionalità di conformità e strumenti di gestione a livello aziendale.
+- **GitHub One**: Soluzione personalizzata per grandi imprese con modello di prezzo su misura.
+
+## Perché lo raccomandiamo
+
+GitHub è più di un semplice strumento – è un ecosistema che abilita e promuove pratiche moderne di sviluppo software. Raccomandiamo GitHub per diversi motivi:
+
+- **Standard Industriale**: GitHub è lo standard d'oro nel settore, il che semplifica la collaborazione e la condivisione di esperienza con la comunità globale di sviluppatori.
+- **Integrazione Perfetta**: L'integrazione con strumenti e servizi popolari è fluida, dalle integrazioni IDE alle connessioni con strumenti di gestione progetti.
+- **Scalabilità**: GitHub funziona altrettanto bene per piccoli progetti personali e sviluppo aziendale su larga scala.
+- **Innovazione Continua**: Il supporto di Microsoft ha accelerato il ritmo di innovazione, con nuove funzionalità regolari che migliorano continuamente la piattaforma.
+- **Community**: L'enorme base di utenti significa che supporto, soluzioni ed esempi per quasi qualsiasi problema sono facili da trovare.
+
+Per team di qualsiasi dimensione, GitHub fornisce l'infrastruttura necessaria per collaborare in modo efficiente, creare software di alta qualità e distribuire continuamente.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/google-workspace.md b/apps/bauntown/apps/landing/src/content/tools/it/google-workspace.md
new file mode 100644
index 000000000..eb816c664
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/google-workspace.md
@@ -0,0 +1,76 @@
+---
+title: 'Google Workspace'
+description: 'Strumenti di produttività e collaborazione per team di tutte le dimensioni'
+pubDate: 2024-06-10
+updatedDate: 2024-06-10
+category: 'Productivity'
+image: '/images/tools/googleworkspace-tool-bauntown-coding.png'
+featured: false
+pricing: 'Paid'
+website: 'https://workspace.google.com'
+tags: ['Produttività', 'Collaborazione', 'Cloud', 'Email', 'Documenti']
+externalLinks:
+ - title: 'Centro di apprendimento Google Workspace'
+ url: 'https://support.google.com/a/users'
+ - title: 'Aiuto per amministratori di Google Workspace'
+ url: 'https://support.google.com/a/answer/9212'
+---
+
+## Panoramica
+
+Google Workspace (precedentemente G Suite) è una raccolta di strumenti di produttività e collaborazione basati su cloud sviluppati da Google. Include applicazioni come Gmail, Google Drive, Google Docs, Google Sheets, Google Slides, Google Meet e molti altri, tutti progettati per migliorare la collaborazione del team e aumentare la produttività.
+
+## Caratteristiche principali
+
+### Strumenti di comunicazione
+
+Google Workspace offre soluzioni email robuste con Gmail per aziende, inclusi indirizzi email personalizzati per il tuo dominio. Con Google Meet, i team possono condurre videoconferenze con condivisione dello schermo, registrazione e sottotitoli in tempo reale. Google Chat permette messaggistica diretta e chat di gruppo per una rapida comunicazione di team.
+
+### Documenti e archiviazione file
+
+Con Google Drive, i team ottengono archiviazione cloud sicura per tutti i loro file. Google Docs, Sheets e Slides permettono la creazione e la modifica collaborativa di documenti, fogli di calcolo e presentazioni in tempo reale. Il salvataggio automatico e una estesa cronologia delle versioni garantiscono che nessun lavoro vada perso.
+
+### Calendario e pianificazione
+
+Google Calendar facilita il coordinamento di appuntamenti e riunioni con calendari condivisi, promemoria automatici e facile integrazione con altri strumenti Google Workspace. La possibilità di prenotare sale riunioni e vedere la disponibilità dei membri del team rende la pianificazione efficiente.
+
+### Sicurezza e amministrazione
+
+Google Workspace offre robuste funzionalità di sicurezza come l'autenticazione a due fattori, crittografia avanzata dei dati e controlli amministrativi completi. La console di gestione centrale consente agli amministratori IT di gestire facilmente utenti, dispositivi e impostazioni di sicurezza.
+
+### Integrazione ed estensibilità
+
+L'integrazione perfetta tra tutte le applicazioni Google Workspace semplifica il flusso di lavoro. Inoltre, ci sono centinaia di integrazioni e componenti aggiuntivi di terze parti che estendono la funzionalità. Il Google Workspace Marketplace offre numerose app per requisiti specializzati.
+
+## Come utilizziamo Google Workspace in BaunTown
+
+A BaunTown, utilizziamo Google Workspace per:
+
+- Hosting di email aziendale con il nostro dominio bauntown.com
+- Modifica collaborativa di documenti di progetto e presentazioni
+- Gestione di file e risorse con team drive strutturati
+- Riunioni virtuali e workshop con Google Meet
+- Pianificazione di progetti e coordinamento appuntamenti con Google Calendar
+- Creazione di moduli per feedback e raccolta dati
+
+## Modello di prezzo
+
+Google Workspace offre diversi piani di abbonamento:
+
+- **Business Starter (5,75 € per utente/mese)**: Email aziendale di base, 30GB di spazio di archiviazione, videoconferenze e altro.
+- **Business Standard (11,50 € per utente/mese)**: Tutto lo Starter più 2TB di spazio di archiviazione, funzionalità di riunione avanzate e controlli di sicurezza.
+- **Business Plus (17,30 € per utente/mese)**: Tutto lo Standard più 5TB di spazio di archiviazione, funzionalità avanzate di sicurezza e gestione.
+- **Enterprise**: Prezzi basati su contatto con spazio di archiviazione illimitato e strumenti completi di sicurezza e conformità.
+
+## Perché lo raccomandiamo
+
+Google Workspace si è dimostrato essenziale per noi, soprattutto per:
+
+- La collaborazione perfetta in tempo reale che permette ai team di lavorare contemporaneamente sugli stessi documenti
+- L'infrastruttura cloud affidabile con elevata disponibilità e tempi di inattività minimi
+- L'interfaccia user-friendly che richiede una formazione minima poiché la maggior parte è già familiare con i prodotti Google
+- Il miglioramento continuo attraverso aggiornamenti regolari e nuove funzionalità
+- Il forte supporto mobile che permette di lavorare da qualsiasi luogo
+- Le funzionalità di sicurezza complete per proteggere i dati sensibili
+
+Google Workspace ha migliorato significativamente la nostra comunicazione e collaborazione tra team e costituisce la spina dorsale dei nostri flussi di lavoro quotidiani.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/memoro.md b/apps/bauntown/apps/landing/src/content/tools/it/memoro.md
new file mode 100644
index 000000000..708ed63d0
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/memoro.md
@@ -0,0 +1,98 @@
+---
+title: 'Memoro'
+description: 'Applicazione AI per la conversione automatica del parlato in documenti strutturati'
+pubDate: 2024-04-08
+updatedDate: 2024-04-08
+category: 'Productivity'
+image: '/images/tools/memoro-tools-bauntown-app.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://www.memoro.ai/'
+tags: ['AI', 'Documentazione', 'Riconoscimento vocale', 'Produttività', 'App mobile']
+externalLinks:
+ - title: 'Instagram'
+ url: 'https://www.instagram.com/memoroai/'
+ - title: 'LinkedIn'
+ url: 'https://www.linkedin.com/company/memoroai'
+---
+
+## Panoramica
+
+Memoro è un'innovativa applicazione mobile che rivoluziona il modo in cui le persone documentano conversazioni e catturano pensieri utilizzando il riconoscimento vocale potenziato dall'intelligenza artificiale. L'elemento centrale è un "sistema Speech-to-Form" che converte automaticamente il linguaggio parlato in documenti strutturati, riducendo drasticamente lo sforzo di documentazione.
+
+## Cos'è Memoro?
+
+Memoro è stato sviluppato in risposta ai crescenti requisiti di documentazione nelle aziende, uniti alla carenza di manodopera qualificata. L'app consente la documentazione in tempo reale durante il lavoro - sia in riunioni, discussioni di costruzione, conversazioni di vendita o interviste. Ciò che rende speciale Memoro è che la tecnologia rimane in background, integrandosi perfettamente nei flussi di lavoro naturali.
+
+Caratteristiche principali:
+
+- **Registrazione semplice**: Un pulsante centrale di registrazione per avviare e interrompere facilmente le registrazioni
+- **Trascrizione intelligente**: Trascrive parola per parola con riconoscimento del parlante
+- **Analisi basata su AI**: Riassume il contenuto ed estrae informazioni importanti come compiti e appuntamenti
+- **Supporto multilingue**: Supporto per 24 lingue e 2 dialetti per registrazione, trascrizione e traduzione
+- **Generazione di moduli**: Converte conversazioni non strutturate in documenti standardizzati
+- **Modalità specifiche per settore**: Modalità personalizzabili per diverse professioni e casi d'uso
+
+## Vantaggi e Casi d'Uso
+
+Memoro offre significativi risparmi di tempo fino al 75% sui compiti di documentazione (8-16 ore/settimana). L'app è adatta a vari casi d'uso:
+
+- **Studenti**: Appunti di lezione, brainstorming per lavori di tesi
+- **Impiegati d'ufficio**: Verbali di riunione, dettatura di email
+- **Artigiani**: Liste di materiali, riunioni di costruzione
+- **Operatori sanitari**: Pianificazione dell'assistenza, documentazione
+- **Esperti di marketing**: Conduzione e analisi di interviste
+- **Professionisti creativi**: Raccolta di idee e auto-riflessione
+
+## Come Funziona Memoro
+
+L'applicazione utilizza tecnologie AI all'avanguardia per il riconoscimento vocale e l'analisi del testo. Il processo è straordinariamente semplice:
+
+1. Registra conversazioni o pensieri con l'app
+2. L'AI trascrive la registrazione e riconosce i diversi parlanti
+3. Le informazioni importanti vengono automaticamente estratte e categorizzate
+4. Il contenuto viene convertito in moduli o documenti strutturati
+5. I documenti finiti possono essere condivisi o esportati in altri sistemi
+
+## Dettagli Tecnici
+
+- **Piattaforme**: iOS (Apple App Store) e Android (Google Play Store)
+- **Accesso desktop**: Funzionalità di lettura per i memo registrati
+- **Archiviazione dati**: Firebase Cloud con server a Francoforte, Germania
+- **Elaborazione audio**: Azure Speech, ospitato a Francoforte
+- **Analisi basata su AI**: Azure OpenAI, ospitato a Parigi
+- **Protezione dei dati**: Conforme al GDPR con crittografia end-to-end
+
+## Come Utilizziamo Memoro a BaunTown
+
+A BaunTown, utilizziamo Memoro per vari scopi:
+
+- **Documentazione delle riunioni di team**: Le nostre riunioni settimanali vengono documentate automaticamente
+- **Cattura di idee di progetto**: Pensieri e concetti spontanei vengono registrati direttamente
+- **Conversazioni con i clienti**: Le riunioni con partner e clienti vengono documentate in modo strutturato
+- **Gestione della conoscenza**: La conoscenza implicita viene sistematicamente catturata e condivisa
+
+Particolarmente prezioso per noi è il risparmio di tempo e la capacità di concentrarci completamente sul contenuto durante le conversazioni, invece di dover prendere appunti contemporaneamente.
+
+## Modello di Prezzo
+
+Memoro offre vari livelli di prezzo:
+
+- **Versione gratuita**: 180 minuti/mese, max. 50 minuti/registrazione, 22 memo/giorno
+- **Plus**: 9€/mese (600 minuti/mese, 100 minuti/memo)
+- **Pro**: 23€/mese (1800 minuti/mese, 200 minuti/memo)
+- **Ultra**: 42€/mese (4800 minuti/mese, 300 minuti/memo)
+
+Con fatturazione annuale, c'è uno sconto del 20%. Condizioni speciali sono offerte per istituzioni educative e organizzazioni non-profit.
+
+## Il Team Dietro Memoro
+
+Memoro è stato sviluppato da un team esperto:
+
+- **Till Schneider**: Design del prodotto e marketing, filmmaker esperto e designer multimediale
+- **Tobias Müller**: Direzione tecnica, sviluppatore full-stack con competenza in sistemi AI
+- **Nils Weiser**: Sviluppatore esperto specializzato in infrastrutture cloud e scalabilità
+
+## Prospettive Future
+
+Memoro continua a evolversi. I piani includono lo sviluppo di una piattaforma self-service che consente ai clienti di creare e condividere i propri modelli di documentazione, nonché funzionalità aziendali estese con integrazione CRM/ERP.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/netlify.md b/apps/bauntown/apps/landing/src/content/tools/it/netlify.md
new file mode 100644
index 000000000..5ee11950a
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/netlify.md
@@ -0,0 +1,74 @@
+---
+title: 'Netlify'
+description: 'Una moderna piattaforma di hosting per siti web statici e funzioni serverless'
+pubDate: 2024-06-15
+updatedDate: 2024-06-15
+category: 'Hosting'
+image: '/images/tools/netlify-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://www.netlify.com'
+tags: ['Hosting', 'Serverless', 'CI/CD', 'JAMstack']
+externalLinks:
+ - title: 'Documentazione Netlify'
+ url: 'https://docs.netlify.com/'
+ - title: 'Blog Netlify'
+ url: 'https://www.netlify.com/blog/'
+---
+
+## Panoramica
+
+Netlify è una potente piattaforma per l'hosting di siti web e applicazioni web basate su file statici o funzioni serverless. Offre una soluzione completa per progetti web moderni con distribuzione automatizzata, distribuzione CDN globale e pipeline CI/CD integrata.
+
+## Caratteristiche principali
+
+### Distribuzione continua
+
+Netlify si connette direttamente al tuo repository Git (GitHub, GitLab, Bitbucket) e distribuisce automaticamente gli aggiornamenti quando apporti modifiche al tuo repository. Ogni push Git attiva una nuova build, ottimizzando l'intero processo dallo sviluppo alla produzione.
+
+### Funzioni Serverless
+
+Con Netlify Functions, puoi eseguire codice backend senza gestire i tuoi server. Queste funzioni serverless sono ideali per endpoint API, autenticazione, elaborazione di moduli e altre funzionalità dinamiche.
+
+### Rete Edge e CDN
+
+Netlify utilizza una CDN globale (Content Delivery Network) per fornire il tuo sito web a velocità fulminea a ogni utente in tutto il mondo. Fornisce certificati SSL automatici, HTTP/2 e altre ottimizzazioni per massime prestazioni.
+
+### Moduli e Autenticazione
+
+Con Netlify Forms, puoi elaborare moduli HTML senza un tuo server. Netlify Identity fornisce un sistema completo di autenticazione e gestione utenti per la tua applicazione.
+
+### Branching e Deployment di anteprima
+
+Per ogni pull request o branch, Netlify crea automaticamente un ambiente di anteprima dedicato dove puoi testare le modifiche prima che vadano in produzione.
+
+## Come utilizziamo Netlify in BaunTown
+
+A BaunTown, utilizziamo Netlify per:
+
+- Hosting del nostro sito web principale costruito con Astro
+- Fornitura di ambienti di anteprima per nuove funzionalità
+- Funzioni serverless per moduli di contatto e iscrizioni alla newsletter
+- Pipeline di distribuzione automatizzata per aggiornamenti regolari
+- Test A/B per nuovi elementi di design
+
+## Modello di prezzo
+
+Netlify offre vari livelli di prezzo:
+
+- **Starter (Gratuito)**: Perfetto per progetti personali e piccoli siti web. Include funzioni serverless, distribuzione continua e SSL.
+- **Pro ($19/mese)**: Per siti web professionali con più larghezza di banda, più funzioni e opzioni aggiuntive.
+- **Business ($99/mese)**: Per team e aziende più grandi con funzionalità avanzate di sicurezza e collaborazione.
+- **Enterprise**: Soluzioni personalizzate per grandi imprese.
+
+## Perché lo raccomandiamo
+
+Netlify ha semplificato notevolmente il nostro workflow di deployment. I vantaggi che apprezziamo particolarmente includono:
+
+- **Semplicità**: La configurazione di un sito web richiede solo pochi minuti e la distribuzione è completamente automatizzata.
+- **Prestazioni**: La rete CDN globale garantisce tempi di caricamento rapidi in tutto il mondo.
+- **Orientato agli sviluppatori**: L'integrazione perfetta con Git e i deployment di anteprima accelerano il ciclo di sviluppo.
+- **Architettura serverless**: Possiamo implementare funzionalità dinamiche senza i nostri server, riducendo i costi di manutenzione.
+- **Scalabilità**: Netlify cresce con i nostri progetti e fornisce prestazioni affidabili anche con volumi di traffico elevati.
+
+Che si tratti di piccoli progetti personali o di complessi siti web aziendali, Netlify si è dimostrata una soluzione di hosting affidabile e potente.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/plausible.md b/apps/bauntown/apps/landing/src/content/tools/it/plausible.md
new file mode 100644
index 000000000..f72fb6bf1
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/plausible.md
@@ -0,0 +1,81 @@
+---
+title: 'Plausible Analytics'
+description: 'Alternativa rispettosa della privacy e leggera a Google Analytics'
+pubDate: 2024-05-25
+updatedDate: 2024-05-25
+category: 'Productivity'
+image: '/images/tools/plausible-tool-bauntown-coding.png'
+featured: false
+pricing: 'Paid'
+website: 'https://plausible.io'
+tags: ['Analytics', 'Privacy', 'Sviluppo Web', 'GDPR', 'Open Source']
+externalLinks:
+ - title: 'Documentazione Plausible'
+ url: 'https://plausible.io/docs'
+ - title: 'Plausible su GitHub'
+ url: 'https://github.com/plausible/analytics'
+---
+
+## Panoramica
+
+Plausible Analytics è un'alternativa leggera e rispettosa della privacy ai tradizionali strumenti di analisi web come Google Analytics. È stato sviluppato con l'obiettivo di fornire un modo semplice, trasparente e conforme al GDPR per monitorare le visite al sito web senza compromettere la privacy degli utenti o aumentare i tempi di caricamento del sito.
+
+## Caratteristiche principali
+
+### Orientato alla privacy
+
+Plausible è stato costruito da zero con la privacy in mente. Non raccoglie informazioni personali identificabili, non utilizza cookie e non traccia gli utenti attraverso diversi siti web. Questo significa che nella maggior parte dei casi non sono necessari banner per i cookie e la piattaforma è completamente conforme a GDPR, CCPA e PECR.
+
+### Approccio aperto e trasparente
+
+Come progetto open source, tutto il codice sorgente di Plausible è disponibile su GitHub. Ciò garantisce trasparenza riguardo a quali dati vengono raccolti e come vengono elaborati. Gli utenti hanno la possibilità di auto-ospitare Plausible o utilizzare il servizio cloud ufficiale.
+
+### Implementazione leggera
+
+Lo script di tracciamento di Plausible è inferiore a 1 KB di dimensione, rispetto a più di 45 KB per Google Analytics. Questo aiuta a migliorare le prestazioni del sito web e ridurre i tempi di caricamento, con un impatto positivo su SEO ed esperienza utente.
+
+### Metriche facili da capire
+
+Plausible offre una dashboard chiara e facile da comprendere che visualizza le metriche di analisi web più importanti come visualizzazioni di pagina, referrer, pagine principali e fonti di visitatori. Evita deliberatamente dati eccessivamente complessi e si concentra sull'essenziale.
+
+### Dashboard condivise
+
+Con Plausible, le dashboard possono essere facilmente condivise con membri del team o clienti senza dover condividere password. Ogni dashboard ha un URL unico, ma non indovinabile, che può essere condiviso con le persone rilevanti. Facoltativamente, le dashboard possono anche essere protette da password.
+
+### Eventi personalizzati e obiettivi
+
+La piattaforma supporta eventi personalizzati per il monitoraggio di conversioni e obiettivi, come iscrizioni a newsletter, download o acquisti completati. Ciò consente una comprensione più dettagliata del comportamento degli utenti sul sito web.
+
+## Come utilizziamo Plausible in BaunTown
+
+A BaunTown, utilizziamo Plausible Analytics per vari scopi:
+
+- **Misurazione delle prestazioni del sito web**: Monitoraggio del numero di visitatori, tempo trascorso e tassi di rimbalzo per valutare l'efficacia del nostro sito web.
+- **Ottimizzazione della strategia dei contenuti**: Identificazione di contenuti e pagine popolari per migliorare la nostra strategia di contenuto.
+- **Analisi delle campagne di marketing**: Misurazione del successo delle campagne di marketing attraverso eventi personalizzati e parametri UTM.
+- **Monitoraggio dei referrer**: Comprensione della provenienza dei nostri visitatori e quali fonti esterne sono più efficaci.
+- **Analisi di dispositivi e browser**: Approfondimento degli aspetti tecnici dei nostri visitatori per migliorare la compatibilità.
+- **Trasparenza pubblica**: Condivisione delle nostre analisi con la community per promuovere apertura e trasparenza.
+
+## Modello di prezzo
+
+Plausible offre un modello di prezzo basato sull'utilizzo:
+
+- **Starter ($9/mese)**: Per fino a 10.000 visualizzazioni di pagina al mese, inclusi siti web e membri del team illimitati.
+- **Growth ($19/mese)**: Per fino a 100.000 visualizzazioni di pagina al mese.
+- **Business ($69/mese)**: Per fino a 1 milione di visualizzazioni di pagina al mese.
+- **Enterprise**: Piani personalizzati per siti web con traffico più elevato.
+
+Tutti i piani offrono una prova gratuita di 30 giorni senza dettagli della carta di credito. Per le installazioni auto-ospitate non ci sono costi, ma l'infrastruttura deve essere gestita in modo indipendente.
+
+## Perché lo raccomandiamo
+
+Raccomandiamo Plausible per diversi motivi:
+
+- **Conformità alla privacy**: In un'epoca in cui la privacy è sempre più importante, Plausible offre una soluzione legalmente sicura che non richiede banner per i cookie.
+- **Vantaggi prestazionali**: L'approccio leggero migliora le prestazioni del sito web, beneficiando sia gli utenti che la SEO.
+- **Facilità d'uso**: La dashboard è intuitiva e fornisce le informazioni più importanti a colpo d'occhio senza essere travolgente.
+- **Trasparenza**: Come piattaforma open source, Plausible offre approfondimenti sul suo funzionamento, costruendo fiducia.
+- **Alternativa etica**: Plausible rappresenta un'alternativa più etica ai modelli guidati dai dati e incentrati sulla pubblicità delle grandi aziende tecnologiche.
+
+Per gli operatori di siti web alla ricerca di una piattaforma di analisi rispettosa della privacy, semplice ed efficace, Plausible è un'ottima scelta che combina efficienza tecnica con principi etici.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/revenuecat.md b/apps/bauntown/apps/landing/src/content/tools/it/revenuecat.md
new file mode 100644
index 000000000..bccda9a09
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/revenuecat.md
@@ -0,0 +1,79 @@
+---
+title: 'RevenueCat'
+description: 'Piattaforma per la gestione di abbonamenti e acquisti in-app nelle applicazioni mobili'
+pubDate: 2024-05-22
+updatedDate: 2024-05-22
+category: 'Development'
+image: '/images/tools/revenuecat-tool-bauntown-coding.png'
+featured: false
+pricing: 'Freemium'
+website: 'https://www.revenuecat.com/'
+tags: ['Mobile', 'Acquisti In-App', 'Abbonamenti', 'Monetizzazione', 'Sviluppo']
+externalLinks:
+ - title: 'Documentazione RevenueCat'
+ url: 'https://docs.revenuecat.com/'
+ - title: 'RevenueCat SDK GitHub'
+ url: 'https://github.com/RevenueCat/purchases-ios'
+---
+
+## Panoramica
+
+RevenueCat è una potente piattaforma che semplifica notevolmente l'implementazione, la gestione e l'ottimizzazione degli acquisti in-app e degli abbonamenti nelle applicazioni mobili. Funge da backend-as-a-service per gli acquisti in-app e fornisce un'API unificata per gestire i meccanismi degli app store su iOS, Android e vari framework cross-platform.
+
+## Caratteristiche principali
+
+### Integrazione Cross-Platform
+
+RevenueCat offre un'API unificata per iOS, Android, React Native, Flutter, Unity, Cordova e altro ancora. Questo permette agli sviluppatori di utilizzare lo stesso codice per gli acquisti in-app su diverse piattaforme, semplificando notevolmente lo sviluppo e la manutenzione.
+
+### Gestione degli abbonamenti
+
+La piattaforma automatizza compiti complessi come le conversioni di prova, i rinnovi, i rimborsi e gli upgrade degli abbonamenti. Traccia lo stato dell'abbonamento dell'utente in tempo reale e sincronizza i dati tra App Store, Google Play e la tua app.
+
+### API per i diritti (Entitlements)
+
+Con RevenueCat, gli sviluppatori possono definire diritti relativi ai prodotti che sono indipendenti dai prodotti specifici dello store. Ciò consente una progettazione dei prodotti più flessibile e test A/B più semplici senza aggiornamenti dell'app.
+
+### Webhook e integrazioni
+
+La piattaforma si integra con strumenti aziendali come Stripe, Adjust, AppsFlyer, Mixpanel, Segment e molti altri. I webhook possono essere attivati su eventi di abbonamento per aggiornare i tuoi sistemi o attivare azioni di marketing.
+
+### Dashboard analitica
+
+RevenueCat fornisce approfondimenti dettagliati su metriche come entrate ricorrenti mensili (MRR), numero di abbonati, tassi di conversione e tassi di abbandono. La dashboard permette di tracciare le performance su diverse piattaforme e prodotti.
+
+### Portale clienti
+
+Con RevenueCat, gli sviluppatori possono configurare un portale clienti personalizzato dove i clienti possono gestire autonomamente i loro abbonamenti. Ciò riduce le richieste di supporto e migliora la soddisfazione dei clienti.
+
+## Come utilizziamo RevenueCat in BaunTown
+
+A BaunTown, utilizziamo RevenueCat per diversi progetti di app mobili:
+
+- **Implementazione semplificata degli abbonamenti**: Utilizziamo gli SDK di RevenueCat per implementare rapidamente abbonamenti e acquisti in-app nelle nostre app.
+- **Coerenza cross-platform**: Per le app disponibili sia su iOS che Android, utilizziamo RevenueCat per garantire un'esperienza di acquisto unificata.
+- **Test di prezzo A/B**: Con l'API Entitlements, conduciamo test di prezzo per trovare la tariffazione ottimale senza dover pubblicare aggiornamenti dell'app.
+- **Analisi delle entrate**: Utilizziamo la dashboard analitica per tracciare e ottimizzare entrate, tassi di conversione e fidelizzazione degli abbonati.
+- **Integrazioni con strumenti di marketing**: Integrando con i nostri sistemi di analisi e CRM, possiamo condurre campagne di marketing mirate per diversi gruppi di utenti.
+
+## Modello di prezzo
+
+RevenueCat offre tre principali livelli di prezzo:
+
+- **Free**: Per app con entrate annuali inferiori a $10.000, con funzionalità di base per startup e piccole app.
+- **Starter ($119/mese)**: Per app con entrate annuali tra $10.000 e $400.000, con funzionalità avanzate come webhook, integrazioni e supporto clienti.
+- **Pro ($499/mese)**: Per app più grandi con entrate annuali superiori a $400.000, con funzionalità aggiuntive come chiavi API multiple, limiti di frequenza più elevati e supporto prioritario.
+
+Tutti i piani offrono una commissione percentuale dallo 0 all'1,9% delle entrate, a seconda del piano scelto e delle entrate generate.
+
+## Perché lo raccomandiamo
+
+RevenueCat si è dimostrato indispensabile per noi per diversi motivi:
+
+- **Risparmio di tempo e risorse**: L'implementazione e la manutenzione degli acquisti in-app senza RevenueCat può richiedere settimane di tempo di sviluppo e richiede attenzione continua per aggiornamenti del server e modifiche API.
+- **Affidabilità**: RevenueCat fornisce un'infrastruttura affidabile con disponibilità del 99,9%, fondamentale per transazioni critiche per il business.
+- **Migliori approfondimenti**: La dashboard analitica offre preziosi approfondimenti sul comportamento degli utenti e sui flussi di entrate che non sarebbero possibili solo con gli strumenti nativi degli app store.
+- **Flessibilità nella progettazione dei prodotti**: L'API Entitlements ci permette di personalizzare le offerte di prodotti e sperimentare senza dover inviare aggiornamenti dell'app.
+- **Scalabilità**: La piattaforma cresce con le nostre app e fornisce soluzioni robuste sia per applicazioni piccole che grandi.
+
+Per gli sviluppatori che desiderano implementare acquisti in-app o abbonamenti nelle loro applicazioni mobili, RevenueCat offre un significativo valore aggiunto e può ridurre drasticamente lo sforzo di sviluppo fornendo approfondimenti e flessibilità cruciali per ottimizzare la monetizzazione delle app.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/testflight.md b/apps/bauntown/apps/landing/src/content/tools/it/testflight.md
new file mode 100644
index 000000000..e6c189dc1
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/testflight.md
@@ -0,0 +1,69 @@
+---
+title: 'TestFlight'
+description: 'Piattaforma di beta testing di Apple per app iOS, iPadOS, macOS, tvOS e watchOS'
+pubDate: 2024-05-20
+updatedDate: 2024-05-20
+category: 'Development'
+image: '/images/tools/testflight-tool-bauntown-coding.png'
+featured: false
+pricing: 'Free'
+website: 'https://developer.apple.com/testflight/'
+tags: ['Testing', 'iOS', 'Sviluppo App', 'Beta', 'Apple']
+externalLinks:
+ - title: 'Documentazione TestFlight'
+ url: 'https://developer.apple.com/documentation/testflight'
+ - title: 'Aiuto App Store Connect'
+ url: 'https://help.apple.com/app-store-connect/'
+---
+
+## Panoramica
+
+TestFlight è la piattaforma ufficiale di beta testing di Apple, che consente agli sviluppatori di distribuire le loro app iOS, iPadOS, macOS, tvOS e watchOS ai tester prima che vengano rilasciate sull'App Store. Fornisce un metodo semplificato per raccogliere feedback, identificare bug e ottimizzare l'esperienza utente prima del lancio ufficiale di un'app.
+
+## Caratteristiche principali
+
+### Distribuzione semplice
+
+TestFlight semplifica la distribuzione delle versioni beta attraverso un sistema di inviti immediato. Gli sviluppatori possono invitare i tester via email o creare link pubblici, supportando fino a 10.000 tester esterni. Per i test interni all'interno di un team di sviluppo, possono partecipare fino a 100 membri dell'organizzazione Apple Developer.
+
+### Gestione delle versioni
+
+La piattaforma consente agli sviluppatori di gestire contemporaneamente più build di un'app. Diverse versioni possono essere distribuite a diversi gruppi di tester, permettendo test A/B e valutazione mirata delle funzionalità. TestFlight fornisce informazioni dettagliate sulle build e offre agli sviluppatori il controllo su quali versioni sono disponibili per quali tester.
+
+### Raccolta feedback
+
+TestFlight include meccanismi di feedback integrati che facilitano ai tester la segnalazione di problemi, la condivisione di screenshot e l'invio di commenti agli sviluppatori. Questo ciclo di feedback diretto è cruciale per identificare i problemi degli utenti e perfezionare l'app prima del rilascio pubblico.
+
+### Notifiche automatiche di installazione
+
+Quando sono disponibili nuove versioni delle build, TestFlight invia automaticamente notifiche ai tester. Questo assicura che i tester abbiano sempre accesso all'ultima versione dell'app e incoraggia un feedback continuo durante tutto il processo di sviluppo.
+
+### Gestione della scadenza
+
+Le build di TestFlight scadono automaticamente dopo 90 giorni, assicurando che i tester non utilizzino versioni obsolete a lungo termine. Gli sviluppatori possono anche rimuovere o aggiornare l'accesso a specifiche build prima di questo periodo, se necessario.
+
+## Come utilizziamo TestFlight in BaunTown
+
+A BaunTown, integriamo TestFlight nel nostro processo di sviluppo nei seguenti modi:
+
+- Test interni per il nostro team di sviluppo nelle prime fasi delle nuove funzionalità
+- Beta testing con gruppi di utenti selezionati prima di aggiornamenti importanti
+- Raccolta di feedback su UI e UX
+- Convalida delle prestazioni dell'app su diversi dispositivi e versioni iOS
+- Test QA pre-rilascio per stabilità e funzionalità
+
+## Modello di prezzo
+
+TestFlight è un servizio gratuito di Apple per tutti i partecipanti registrati all'Apple Developer Program. Gli unici costi associati sono la quota annuale dell'Apple Developer Program (99 USD per individui o 299 USD per organizzazioni).
+
+## Perché lo raccomandiamo
+
+TestFlight si è dimostrato uno strumento indispensabile nel nostro processo di sviluppo iOS per diversi motivi:
+
+- **Integrazione perfetta**: Come prodotto Apple, TestFlight si integra perfettamente con l'ecosistema di sviluppo Apple, inclusi App Store Connect e Xcode.
+- **Facilità d'uso**: Il processo di invito e l'installazione delle app beta sono semplici per i tester, portando a tassi di partecipazione più elevati.
+- **Test di stabilità**: La possibilità di testare le nostre app su una varietà di dispositivi reali aiuta a identificare problemi specifici del dispositivo che potrebbero non apparire in ambienti simulati.
+- **Distribuzione affidabile**: Il sistema di Apple garantisce che gli aggiornamenti siano distribuiti in modo affidabile ai tester, con un sovraccarico amministrativo minimo per il team di sviluppo.
+- **Conformità e sicurezza**: La piattaforma soddisfa i rigorosi requisiti di sicurezza e privacy di Apple, fondamentali per la distribuzione di software a tester esterni.
+
+Per qualsiasi team che sviluppa app iOS, TestFlight è diventato uno strumento standard che semplifica la transizione dallo sviluppo alla produzione e garantisce che le app siano testate accuratamente prima di essere rese disponibili al pubblico sull'App Store.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tools/it/windsurf-ai.md b/apps/bauntown/apps/landing/src/content/tools/it/windsurf-ai.md
new file mode 100644
index 000000000..d11243e1c
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tools/it/windsurf-ai.md
@@ -0,0 +1,101 @@
+---
+title: 'Windsurf AI'
+description: "Una rivoluzione nello sviluppo software attraverso un ambiente di sviluppo potenziato dall'intelligenza artificiale"
+pubDate: 2024-05-18
+updatedDate: 2024-05-18
+category: 'Development'
+image: '/images/tools/windsurf-ide-tool-bauntown-coding.png'
+featured: true
+pricing: 'Freemium'
+website: 'https://windsurf.ai'
+tags: ['AI', 'IDE', 'Sviluppo Software', 'Generazione di Codice', 'Produttività']
+externalLinks:
+ - title: 'Sito Web Codeium'
+ url: 'https://codeium.com/'
+ - title: 'Documentazione Windsurf AI'
+ url: 'https://docs.windsurf.ai/'
+---
+
+## Panoramica
+
+Windsurf AI è un innovativo ambiente di sviluppo integrato (IDE) che incorpora perfettamente l'intelligenza artificiale (AI) nel processo di sviluppo. Sviluppato da Codeium, Windsurf offre una combinazione di funzionalità copilot e agenti autonomi che aumenta significativamente la produttività degli sviluppatori.
+
+## Caratteristiche principali
+
+### Supercomplete
+
+Questa funzionalità va oltre il completamento automatico convenzionale prevedendo l'intento dello sviluppatore. Ad esempio, Windsurf può generare funzioni Python con docstring corretti e funzionalità personalizzate basate sul contesto del codice.
+
+### Cascade
+
+Cascade è uno strumento AI interattivo che genera o modifica il codice richiedendo feedback iterativi dallo sviluppatore. Permette anche l'integrazione di immagini per creare codice HTML, CSS e JavaScript che imita design visivi.
+
+### Modifica Multi-File
+
+Windsurf supporta modifiche contestuali su più file, particolarmente utili per progetti di grandi dimensioni. L'AI comprende le relazioni tra i file e garantisce coerenza.
+
+### Memories
+
+Questa funzionalità memorizza informazioni contestuali sui progetti, automaticamente o tramite regole personalizzate. Ciò migliora la continuità e la precisione nella collaborazione tra sviluppatore e AI.
+
+### AI Terminal
+
+Con il terminale integrato, gli sviluppatori possono generare codice, correggere errori e lavorare direttamente nel terminale. Questa funzionalità combina codifica e debugging in un unico spazio di lavoro.
+
+## Vantaggi di Windsurf
+
+### Aumento della produttività
+
+Windsurf riduce i cambi di contesto e fornisce suggerimenti rapidi e precisi per le modifiche al codice. Ciò accelera significativamente il processo di sviluppo.
+
+### Privacy
+
+A differenza di molti altri strumenti, Windsurf non addestra i suoi modelli su dati non approvati e offre opzioni come la crittografia e l'archiviazione dati a zero giorni.
+
+### Flessibilità
+
+L'IDE è compatibile con vari sistemi operativi (Windows, macOS, Linux) e può essere combinato con altri ambienti di sviluppo come WebStorm.
+
+### Utilizzo gratuito
+
+Windsurf offre una generosa versione gratuita con funzionalità avanzate come l'accesso illimitato ai modelli AI e il completamento automatico.
+
+## Confronto con altri IDE
+
+Windsurf si distingue per la sua capacità di agire sia come copilot che come agente autonomo, distinguendosi da altri IDE come Cursor.
+
+| Funzionalità | Windsurf Editor | Cursor | VS Code (con plugin) |
+|---------------------------|---|---|---|
+| Supporto agenti AI | ✅ Sì | ❌ No | ❌ No |
+| Modifica multi-file | ✅ Sì | ✅ Sì | ❌ No |
+| Consapevolezza contestuale completa | ✅ Sì | ❌ No | ❌ No |
+
+## Casi d'uso
+
+Windsurf è eccellente per:
+
+- **Debugging di progetti complessi**: L'AI identifica problemi in tempo reale e suggerisce soluzioni.
+- **Modifica efficiente di codebase complesse**: Il supporto multi-file consente modifiche coerenti.
+- **Sviluppo collaborativo**: Gli sviluppatori possono collaborare con l'AI per completare i compiti più rapidamente.
+
+## Come utilizziamo Windsurf AI in BaunTown
+
+A BaunTown, abbiamo integrato Windsurf AI nel nostro processo di sviluppo per:
+
+- Ridurre il tempo di inserimento per i nuovi membri del team
+- Migliorare la qualità del codice attraverso suggerimenti basati sull'AI
+- Automatizzare le attività di routine e liberare più tempo per la risoluzione creativa dei problemi
+- Ottimizzare la documentazione della nostra codebase
+- Accelerare il processo di inserimento per nuovi progetti
+
+## Modello di prezzo
+
+Windsurf AI offre varie opzioni di prezzo:
+
+- **Free**: Accesso illimitato alle funzionalità AI di base, ideale per sviluppatori individuali e piccoli team.
+- **Pro ($12/mese)**: Funzionalità avanzate come Memories e analisi contestuale più profonda.
+- **Enterprise**: Soluzioni personalizzate per grandi team con funzionalità aggiuntive di sicurezza e gestione.
+
+## Conclusione
+
+Windsurf AI è più di un semplice strumento – è un partner intelligente per gli sviluppatori. Con le sue funzionalità innovative come Cascade e Memories, nonché la sua capacità di analisi contestuale profonda, rivoluziona il modo in cui il software viene sviluppato. Per principianti e sviluppatori esperti, Windsurf offre un'interfaccia utente intuitiva e una varietà di funzionalità che ottimizzano il flusso di lavoro.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/astro-first-steps.md b/apps/bauntown/apps/landing/src/content/tutorials/de/astro-first-steps.md
new file mode 100644
index 000000000..98908e6a5
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/astro-first-steps.md
@@ -0,0 +1,136 @@
+---
+title: "Erste Schritte mit Astro"
+description: "Eine Einführung in Astro und wie du dein erstes Projekt startest."
+pubDate: 2025-03-15
+category: "Business"
+featured: true
+image: "/images/tutorials/nobackground/website-with-astro-bauntown-tutorial.png"
+author: "Till Schneider"
+---
+
+# Erste Schritte mit Astro
+
+Astro ist ein modernes Web-Framework für die Erstellung von schnellen, inhaltsorientierten Websites. In diesem Tutorial lernst du die Grundlagen von Astro kennen und wie du dein erstes Projekt startest.
+
+## Was ist Astro?
+
+Astro ist ein **All-in-One Web-Framework** mit Fokus auf Content und Performance. Es ermöglicht dir, Websites mit weniger JavaScript bei gleichzeitiger Beibehaltung einer reaktiven Benutzeroberfläche zu erstellen.
+
+Die Hauptvorteile von Astro sind:
+
+- **Inhaltszentrierung**: Optimiert für inhaltsorientierte Websites wie Blogs, E-Commerce und Dokumentationsseiten
+- **Server-First**: Verschiebt so viel Arbeit wie möglich vom Browser auf den Server
+- **Zero-JS Standard**: Kein JavaScript wird standardmäßig an den Browser gesendet
+- **Edge-ready**: Deployment überall - auch am Edge
+- **Anpassbar**: Tailwind, MDX und über 100 Integrationen zur Auswahl
+- **UI-agnostisch**: Unterstützt React, Preact, Svelte, Vue, Solid, Lit und mehr
+
+## Astro installieren
+
+Mit npm kannst du ein neues Astro-Projekt ganz einfach erstellen:
+
+```bash
+# Neues Projekt mit npm erstellen
+npm create astro@latest
+```
+
+Der Astro-Installationsassistent führt dich durch die Schritte zur Einrichtung deines neuen Projekts. Du kannst eine Vorlage auswählen, TypeScript hinzufügen und vieles mehr.
+
+## Projektstruktur
+
+Ein typisches Astro-Projekt sieht so aus:
+
+```
+/
+├── public/
+│ └── favicon.svg
+├── src/
+│ ├── components/
+│ │ └── Card.astro
+│ ├── layouts/
+│ │ └── Layout.astro
+│ └── pages/
+│ └── index.astro
+└── package.json
+```
+
+Die wichtigsten Verzeichnisse sind:
+
+- `src/pages/`: Enthält deine Seiten. Jede `.astro`-Datei wird zu einer Route auf deiner Website.
+- `src/components/`: Enthält wiederverwendbare UI-Komponenten.
+- `src/layouts/`: Enthält Layouts für deine Seiten.
+- `public/`: Enthält statische Assets wie Bilder und Schriftarten.
+
+## Astro-Komponenten
+
+Astro-Komponenten sind die Grundbausteine einer Astro-Website. Sie verwenden eine HTML-ähnliche Syntax mit JSX-Expressions:
+
+```astro
+---
+// Der Component Script (JS/TS)
+const greeting = "Hallo";
+const name = "Astro";
+---
+
+
+
+
{greeting}, {name}!
+
Willkommen zu Astro!
+
+
+
+```
+
+## Inhalts-Collections
+
+Astro v2.0+ führte Content Collections ein, die einen strukturierten Weg bieten, um mit Markdown, MDX und anderen Inhaltsformaten zu arbeiten:
+
+```typescript
+// src/content/config.ts
+import { defineCollection, z } from 'astro:content';
+
+const blogCollection = defineCollection({
+ schema: z.object({
+ title: z.string(),
+ pubDate: z.date(),
+ tags: z.array(z.string()),
+ }),
+});
+
+export const collections = {
+ 'blog': blogCollection,
+};
+```
+
+## Routing und Navigation
+
+Astro verwendet ein dateibasiertes Routing-System. Alle `.astro`, `.md` oder `.mdx` Dateien in deinem `src/pages/` Verzeichnis werden automatisch zu Seiten auf deiner Website:
+
+- `src/pages/index.astro` → `yourdomain.com/`
+- `src/pages/about.astro` → `yourdomain.com/about`
+- `src/pages/posts/post-1.md` → `yourdomain.com/posts/post-1`
+
+## Mehrsprachige Websites
+
+Astro bietet verschiedene Möglichkeiten, mehrsprachige Websites zu erstellen:
+
+1. Mit Routing-Parametern: `src/pages/[lang]/about.astro`
+2. Mit Content Collections und Filtern nach Sprache
+3. Mit Integrationen wie `astro-i18n-aut`
+
+## Nächste Schritte
+
+Nachdem du die Grundlagen erlernt hast, könntest du:
+
+1. Eine neue Komponente erstellen
+2. Eine neue Seite hinzufügen
+3. Mit Content Collections arbeiten
+4. Einen Blog oder ein Portfolio einrichten
+5. Eine Integration wie React oder Tailwind CSS hinzufügen
+
+Viel Spaß beim Entwickeln mit Astro!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/content-collections.md b/apps/bauntown/apps/landing/src/content/tutorials/de/content-collections.md
new file mode 100644
index 000000000..21a7abfca
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/content-collections.md
@@ -0,0 +1,139 @@
+---
+title: "Content Collections in Astro"
+description: "Wie man Content Collections für strukturierte Inhalte in Astro nutzt."
+pubDate: 2025-03-18
+category: "Marketing"
+---
+
+# Content Collections in Astro
+
+Content Collections sind eine leistungsstarke Funktion in Astro, die dir ermöglicht, Markdown, MDX und andere Inhaltsformate zu organisieren und zu validieren. In diesem Tutorial lernst du, wie du Content Collections erstellen und verwenden kannst.
+
+## Was sind Content Collections?
+
+Content Collections bieten dir:
+
+- Ein strukturiertes System zum Organisieren deiner Inhalte
+- Typ-Sicherheit und Validierung mit Schemas
+- Vereinfachten Zugriff auf deine Inhalte über eine API
+
+## Einrichtung von Content Collections
+
+So richtest du Content Collections ein:
+
+1. Erstelle ein `content/` Verzeichnis in deinem `src/` Ordner
+2. Erstelle Unterverzeichnisse für deine Sammlungen (z.B. `src/content/blog/`)
+3. Erstelle eine `src/content/config.ts` Datei, um deine Sammlungen zu definieren
+
+Hier ist ein Beispiel für eine Konfigurationsdatei:
+
+```typescript
+// src/content/config.ts
+import { defineCollection, z } from "astro:content";
+
+const blogCollection = defineCollection({
+ type: "content", // 'content' oder 'data'
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ tags: z.array(z.string()).default(["allgemein"]),
+ image: z.string().optional(),
+ }),
+});
+
+export const collections = {
+ blog: blogCollection,
+};
+```
+
+## Inhalte hinzufügen
+
+Nach der Einrichtung kannst du Markdown oder MDX Dateien zu deinen Sammlungen hinzufügen:
+
+```markdown
+---
+title: "Mein erster Beitrag"
+description: "Dies ist mein erster Blogbeitrag mit Astro Content Collections."
+pubDate: 2025-03-10
+tags: ["astro", "markdown"]
+---
+
+# Mein erster Beitrag
+
+Hier ist der Inhalt meines ersten Beitrags.
+```
+
+## Auf Sammlungen zugreifen
+
+Du kannst auf deine Sammlungen zugreifen, indem du die `getCollection` oder `getEntry` Funktionen verwendest:
+
+```astro
+---
+import { getCollection, getEntry } from 'astro:content';
+
+// Alle Einträge einer Sammlung abrufen
+const allBlogPosts = await getCollection('blog');
+
+// Nach bestimmten Kriterien filtern
+const featuredPosts = await getCollection('blog', ({ data }) => {
+ return data.tags.includes('featured');
+});
+
+// Einen bestimmten Eintrag abrufen
+const specificPost = await getEntry('blog', 'post-slug');
+---
+
+
+```
+
+## Inhalte rendern
+
+Um den Inhalt eines Eintrags zu rendern, musst du zuerst die `render()` Methode aufrufen:
+
+```astro
+---
+import { getEntry } from 'astro:content';
+import BlogLayout from '../layouts/BlogLayout.astro';
+
+// Eintrag aus der URL-Parameter holen
+const { slug } = Astro.params;
+const entry = await getEntry('blog', slug);
+
+// Den Inhalt rendern
+const { Content } = await entry.render();
+---
+
+
+
+
+```
+
+## Typsicherheit
+
+Content Collections bieten vollständige TypeScript-Integration, sodass du Zugriff auf Typen für deine Sammlungen hast:
+
+```typescript
+import type { CollectionEntry } from "astro:content";
+
+// Typen für deine Sammlungen
+type BlogPost = CollectionEntry<"blog">;
+
+// Komponenten-Prop-Typ
+interface Props {
+ post: BlogPost;
+}
+```
+
+## Zusammenfassung
+
+Content Collections bieten eine leistungsstarke und typsichere Möglichkeit, mit Markdown und anderen Inhaltsformaten in Astro zu arbeiten. Sie helfen dir, deine Inhalte zu organisieren, zu validieren und effizient zu verwenden.
+
+Mit Content Collections kannst du komplexe, inhaltsreiche Websites wie Blogs, Dokumentationen und Portfolios einfach erstellen und verwalten.
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/figma-autolayout.mdx b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-autolayout.mdx
new file mode 100644
index 000000000..32a3ce8d1
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-autolayout.mdx
@@ -0,0 +1,221 @@
+---
+title: "Auto Layout und Responsive Design in Figma"
+description: "Lerne, wie du mit Auto Layout flexible, responsive Designs in Figma erstellst, die sich an verschiedene Bildschirmgrößen anpassen."
+pubDate: 2025-03-28
+category: "UI & UX"
+image: "/images/tutorials/nobackground/figma-basics-bauntown-tutorial.png"
+author: "Anna Schmidt"
+course: "figma-basics"
+courseName: "Figma Grundlagen"
+lessonNumber: 4
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+import FigmaEmbed from '../../../components/FigmaEmbed.astro';
+
+# Auto Layout und Responsive Design in Figma
+
+Willkommen zur vierten Lektion unseres Figma-Grundlagenkurses! In dieser Lektion vertiefen wir unser Verständnis von Auto Layout und lernen, wie wir responsive Designs erstellen, die sich an verschiedene Bildschirmgrößen anpassen.
+
+
+
+## Auto Layout: Aufbau auf den Grundlagen
+
+In der zweiten Lektion haben wir die Grundlagen von Auto Layout kennengelernt. Jetzt werden wir tiefer einsteigen und fortgeschrittene Techniken erkunden.
+
+### Warum Auto Layout so wichtig ist
+
+Auto Layout hat die Art und Weise, wie Designer in Figma arbeiten, revolutioniert:
+
+- **Reduzierter manueller Aufwand**: Keine Notwendigkeit, Elemente manuell neu zu positionieren
+- **Konsistenz**: Gleichmäßige Abstände und Ausrichtungen werden automatisch beibehalten
+- **Flexibilität**: Designs passen sich automatisch an Inhaltsänderungen an
+- **Responsive Design**: Einfache Erstellung von Layouts, die sich an verschiedene Bildschirmgrößen anpassen
+
+
+
+## Auto Layout: Fortgeschrittene Techniken
+
+### Verschachtelte Auto Layouts
+
+Die wahre Kraft von Auto Layout entfaltet sich durch Verschachtelung:
+
+1. Erstelle einen übergeordneten vertikalen Auto Layout-Frame
+2. Füge horizontale Auto Layout-Frames hinzu
+3. Verschachtele weitere Auto Layouts nach Bedarf
+
+Beispiel einer verschachtelten Struktur:
+```
+Vertical Auto Layout (Card)
+├── Horizontal Auto Layout (Header)
+│ ├── Avatar
+│ └── Vertical Auto Layout (Meta)
+│ ├── Name
+│ └── Date
+├── Image
+└── Vertical Auto Layout (Content)
+ ├── Title
+ ├── Description
+ └── Horizontal Auto Layout (Actions)
+ ├── Button 1
+ └── Button 2
+```
+
+### Fill und Fixed Sizing
+
+Auto Layout-Elemente können auf zwei Arten dimensioniert werden:
+
+- **Hug Contents**: Element passt sich der Größe seines Inhalts an
+- **Fill**: Element dehnt sich aus, um den verfügbaren Platz zu füllen
+- **Fixed**: Element behält eine feste Größe, unabhängig vom Inhalt
+
+Durch Kombinieren dieser Optionen kannst du komplexe, responsive Layouts erstellen:
+
+1. Wähle ein Element in einem Auto Layout
+2. Im Properties-Panel, unter "Auto Layout"
+3. Setze Width/Height auf Hug, Fill oder Fixed
+
+### Alignment und Distribution
+
+Die Ausrichtung von Elementen innerhalb eines Auto Layouts ist entscheidend:
+
+1. Wähle einen Auto Layout-Frame
+2. Im Properties-Panel, unter "Auto Layout"
+3. Wähle die horizontale und vertikale Ausrichtung
+
+Optionen für die Verteilung von Elementen:
+- **Pack**: Elemente dicht aneinander packen (Standard)
+- **Space Between**: Gleichmäßiger Abstand zwischen Elementen
+- **Space Around**: Gleichmäßiger Abstand um Elemente herum
+
+### Padding vs. Gap
+
+Zwei wichtige Abstandskonzepte in Auto Layout:
+
+- **Padding**: Abstand zwischen dem Inhalt und dem Rand des Frames
+- **Gap**: Abstand zwischen den Elementen innerhalb des Frames
+
+Richtige Verwendung:
+- Verwende einheitliches Padding für konsistente Ränder
+- Passe den Gap an, um die Beziehung zwischen Elementen zu definieren
+
+### Resizing-Verhalten
+
+Auto Layout-Frames können unterschiedlich auf Größenänderungen reagieren:
+
+1. Wähle einen Auto Layout-Frame
+2. Im Properties-Panel, unter "Auto Layout"
+3. Konfiguriere das Resizing-Verhalten:
+ - **Hug Contents (Horizontal/Vertical)**: Schrumpft oder wächst mit dem Inhalt
+ - **Fill Container**: Dehnt sich aus, um den Container zu füllen
+ - **Fixed Width/Height**: Behält die festgelegte Größe bei
+
+## Responsive Design-Strategien in Figma
+
+### Constraints & Auto Layout kombinieren
+
+Für wirklich responsive Designs kombiniere Auto Layout mit Constraints:
+
+1. Verwende Auto Layout für dynamische Inhaltsanordnung
+2. Setze Constraints für Elemente, die bestimmten Regeln folgen sollen
+3. Verwende das "Fill" Property für Elemente, die sich ausdehnen sollen
+
+### Viewport-basiertes Design
+
+Erstelle mehrere Frames für verschiedene Viewports:
+
+1. Desktop (1440px breit)
+2. Tablet (768px breit)
+3. Smartphone (375px breit)
+
+Verwende dann:
+- Konsistente Komponenten über alle Viewports
+- Angepasste Auto Layouts für jede Größe
+- Prototypen-Verbindungen, um zu zeigen, wie das Design reagiert
+
+### Responsive Komponenten erstellen
+
+Komponenten können responsiv gestaltet werden:
+
+1. Erstelle eine Komponente mit Auto Layout
+2. Verwende "Fill" für Elemente, die sich strecken sollen
+3. Setze Textfelder auf "Fill horizontal" für Zeilenumbruch
+4. Erstelle Varianten für verschiedene Bildschirmgrößen
+
+### Breakpoints simulieren
+
+Simuliere CSS-Breakpoints in Figma:
+
+1. Erstelle mehrere Frames für verschiedene Breakpoints
+2. Passe das Layout für jeden Breakpoint an
+3. Dokumentiere die Anpassungen für Entwickler
+4. Verbinde die Frames im Prototype-Modus, um eine responsive Vorschau zu erstellen
+
+## Praktische Übungen
+
+Lass uns das Gelernte mit einigen praktischen Übungen festigen:
+
+### Übung 1: Responsive Navigationsleiste
+
+1. Erstelle eine horizontale Navigationsleiste mit Auto Layout
+2. Füge ein Logo links und Menüpunkte rechts hinzu
+3. Verwende "Space Between" für die Verteilung
+4. Erstelle eine Tablet- und Mobile-Variante
+5. Für Mobile: Konvertiere die Navigation in einen Burger-Menü-Button
+
+### Übung 2: Responsive Card-Layout
+
+1. Erstelle eine Card mit Bild, Titel, Text und Button
+2. Verwende Auto Layout für konsistentes Padding und Abstände
+3. Erstelle eine Version mit horizontal angeordnetem Inhalt für Desktop
+4. Erstelle eine vertikale Version für Mobile
+5. Stelle sicher, dass der Text korrekt umbricht
+
+### Übung 3: Responsives Raster
+
+1. Erstelle einen Container-Frame mit Auto Layout (vertikal)
+2. Füge mehrere Zeilen mit Auto Layout (horizontal) hinzu
+3. Füge Card-Komponenten in jede Zeile ein
+4. Passe die Anzahl der Cards pro Zeile für verschiedene Viewports an:
+ - Desktop: 3-4 Cards pro Zeile
+ - Tablet: 2 Cards pro Zeile
+ - Mobile: 1 Card pro Zeile
+
+## Best Practices für Auto Layout und Responsive Design
+
+- **8-Pixel-Grid**: Verwende ein 8-Pixel-Grid für konsistente Abstände
+- **Komponenten-basierter Ansatz**: Baue responsive Komponenten, die du in größeren Layouts verwendest
+- **Design-Tokens**: Verwende konsistente Werte für Abstände, Schriftgrößen, etc.
+- **Layout-Dokumentation**: Dokumentiere, wie sich dein Design bei verschiedenen Größen verhält
+- **Überprüfe Edge Cases**: Teste dein Design mit sehr kurzem und sehr langem Text
+- **Progressive Enhancement**: Beginne mit dem Mobile-Design und erweitere es für größere Bildschirme
+
+## Für Entwickler: Figma to Code
+
+Als Entwickler ist es wichtig zu verstehen, wie Figma Auto Layout zu CSS-Konzepten übersetzt wird:
+
+| Figma Auto Layout | CSS Equivalent |
+|-------------------|----------------|
+| Vertical/Horizontal | Flexbox: flex-direction |
+| Alignment | Flexbox: align-items, justify-content |
+| Gap | gap property in Flexbox |
+| Padding | padding property |
+| Fill | flex-grow: 1 |
+| Fixed | Specific width/height |
+| Space Between | justify-content: space-between |
+
+Diese Übersetzungstabelle hilft dir, Figma-Designs effizienter in Code umzusetzen.
+
+## Für die nächste Lektion
+
+In der nächsten Lektion werden wir uns mit **Prototyping und Interaktionen** beschäftigen. Du wirst lernen, wie du deine statischen Designs in interaktive Prototypen verwandelst, die Nutzerinteraktionen simulieren.
+
+Bis dahin empfehle ich dir, mit Auto Layout und responsivenDesigns zu experimentieren. Versuche, ein komplexes UI-Element zu erstellen, das sich an verschiedene Bildschirmgrößen anpasst.
+
+## Hilfreiche Ressourcen
+
+- [Figma Auto Layout Documentation](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-layouts-with-Auto-layout)
+- [Responsive Design in Figma](https://www.figma.com/best-practices/responsive-design-in-figma/)
+- [Figma's Official Auto Layout Tutorials](https://www.youtube.com/playlist?list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4)
+
+Hast du Fragen zu Auto Layout oder Responsive Design? Hinterlasse gerne einen Kommentar unten!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/figma-basics.mdx b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-basics.mdx
new file mode 100644
index 000000000..b64d4fe4c
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-basics.mdx
@@ -0,0 +1,111 @@
+---
+title: "Figma Grundlagen - Kursübersicht"
+description: "Ein umfassender Kurs zu den Grundlagen von Figma, vom Einstieg bis zum Design-Handoff für Entwickler."
+pubDate: 2025-03-20
+category: "UI & UX"
+featured: true
+image: "/images/tutorials/nobackground/figma-basics-bauntown-tutorial.png"
+author: "Anna Schmidt"
+course: "figma-basics"
+courseName: "Figma Grundlagen"
+lessonNumber: 0
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+import FigmaEmbed from '../../../components/FigmaEmbed.astro';
+
+# Figma Grundlagen - Kursübersicht
+
+Willkommen zu unserem umfassenden Figma-Grundlagenkurs! In diesem Kurs lernst du alles Wichtige über Figma - von den ersten Schritten bis hin zur effektiven Zusammenarbeit mit Entwicklern.
+
+
+
+## Was dich in diesem Kurs erwartet
+
+Dieser Kurs besteht aus sechs aufeinander aufbauenden Lektionen, die dir einen gründlichen Einblick in die Arbeit mit Figma geben. Ob du Designer, Entwickler oder einfach neugierig bist - dieser Kurs ist so gestaltet, dass du die Leistungsfähigkeit von Figma voll ausschöpfen kannst.
+
+
+
+## Kursinhalt
+
+### [Lektion 1: Einführung in Figma](/tutorials/figma-intro)
+
+In dieser ersten Lektion lernst du die Grundlagen von Figma kennen:
+- Was ist Figma und warum ist es so beliebt?
+- Die Figma-Benutzeroberfläche verstehen
+- Erste Schritte und grundlegende Werkzeuge
+- Figma-Terminologie und Konzepte
+- Dein erstes Figma-Design erstellen
+
+### [Lektion 2: Frames und Layout in Figma](/tutorials/figma-frames)
+
+In der zweiten Lektion tauchen wir tiefer in die Strukturierung von Designs ein:
+- Was sind Frames und wie arbeitet man mit ihnen
+- Das Grid-System in Figma
+- Constraints für responsive Elemente
+- Layout-Grundlagen und Organisation
+- Praktische Übungen zur Strukturierung von Designs
+
+### [Lektion 3: Komponenten und Varianten](/tutorials/figma-components)
+
+Die dritte Lektion zeigt dir, wie du wiederverwendbare Design-Elemente erstellst:
+- Komponenten erstellen und verwalten
+- Mit Instanzen arbeiten und Overrides nutzen
+- Varianten für verschiedene Zustände und Versionen
+- Aufbau eines konsistenten Designsystems
+- Praktische Anwendung mit UI-Komponenten
+
+### [Lektion 4: Auto Layout und Responsive Design](/tutorials/figma-autolayout)
+
+In der vierten Lektion lernst du, wie du flexible Designs erstellst:
+- Auto Layout-Grundlagen und fortgeschrittene Techniken
+- Responsive Designs mit Auto Layout erstellen
+- Verschachtelung von Auto Layouts für komplexe UIs
+- Alignment und Distribution verstehen
+- Responsives Design für verschiedene Geräte
+
+### [Lektion 5: Prototyping und Interaktionen](/tutorials/figma-prototyping)
+
+Die fünfte Lektion zeigt dir, wie du deine Designs zum Leben erweckst:
+- Grundlagen des Prototypings in Figma
+- Interaktionen und Übergänge erstellen
+- Smart Animate für flüssige Animationen
+- Komplexe Interaktionen und bedingte Navigation
+- Prototypen testen und teilen
+
+### [Lektion 6: Design-to-Development Handoff](/tutorials/figma-handoff)
+
+In der letzten Lektion lernst du, wie du deine Designs effektiv an Entwickler übergibst:
+- Der Inspect-Modus in Figma
+- Designs für den Handoff vorbereiten
+- Design-Tokens und Designsysteme dokumentieren
+- Effektive Kommunikation zwischen Design und Entwicklung
+- Best Practices für einen reibungslosen Handoff
+
+## Für wen ist dieser Kurs geeignet?
+
+Dieser Kurs ist ideal für:
+
+- **Designer**, die ihre Figma-Fähigkeiten verbessern möchten
+- **Entwickler**, die Designprozesse besser verstehen wollen
+- **Produktmanager**, die effektiver mit Design- und Entwicklungsteams kommunizieren möchten
+- **Einsteiger**, die die Grundlagen des UI/UX-Designs lernen wollen
+- **Teams**, die ihre Design-to-Development-Workflows optimieren möchten
+
+## Vorkenntnisse
+
+Für diesen Kurs sind keine speziellen Vorkenntnisse erforderlich. Ein grundlegendes Verständnis von Design-Konzepten ist hilfreich, aber nicht notwendig. Du brauchst lediglich:
+
+- Einen Figma-Account (die kostenlose Version reicht für diesen Kurs)
+- Einen modernen Webbrowser (Chrome, Firefox, Safari oder Edge)
+- Neugierde und Lernbereitschaft!
+
+## Über die Autorin
+
+Anna Schmidt ist eine erfahrene UI/UX-Designerin mit über 8 Jahren Berufserfahrung. Sie hat mit zahlreichen Teams zusammengearbeitet und Figma seit den frühen Betaphasen genutzt. Ihre Leidenschaft ist es, komplexe Design-Konzepte verständlich zu erklären und die Zusammenarbeit zwischen Designern und Entwicklern zu verbessern.
+
+## Los geht's!
+
+Bereit, deine Figma-Reise zu beginnen? Starte mit [Lektion 1: Einführung in Figma](/tutorials/figma-intro) und arbeite dich durch die Lektionen. Jede Lektion baut auf der vorherigen auf, also empfehlen wir, sie in der angegebenen Reihenfolge zu absolvieren.
+
+Viel Spaß beim Lernen!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/figma-components.mdx b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-components.mdx
new file mode 100644
index 000000000..121ae5183
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-components.mdx
@@ -0,0 +1,189 @@
+---
+title: "Komponenten und Varianten in Figma"
+description: "Lerne, wie du Designsysteme mit wiederverwendbaren Komponenten und ihren Varianten in Figma erstellst."
+pubDate: 2025-03-27
+category: "UI & UX"
+image: "/images/tutorials/nobackground/figma-basics-bauntown-tutorial.png"
+author: "Anna Schmidt"
+course: "figma-basics"
+courseName: "Figma Grundlagen"
+lessonNumber: 3
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+import FigmaEmbed from '../../../components/FigmaEmbed.astro';
+
+# Komponenten und Varianten in Figma
+
+Willkommen zur dritten Lektion unseres Figma-Grundlagenkurses! In dieser Lektion werden wir uns mit Komponenten und Varianten beschäftigen - den Baublöcken für skalierbare und konsistente Designsysteme.
+
+
+
+## Was sind Komponenten?
+
+Komponenten in Figma sind wiederverwendbare Design-Elemente, die an mehreren Stellen in deinem Design eingesetzt werden können. Sie funktionieren ähnlich wie Komponenten in React oder Vue.js, falls du mit diesen Frameworks vertraut bist.
+
+Die Schlüsselkonzepte bei Komponenten sind:
+
+- **Main Component**: Die Hauptkomponente, die als "Master" oder Quelle dient
+- **Instance**: Eine Kopie der Hauptkomponente, die in deinen Designs verwendet wird
+- **Overrides**: Anpassungen an einer Instanz, die nicht die Hauptkomponente beeinflussen
+- **Inheritance**: Änderungen an der Hauptkomponente werden auf alle Instanzen übertragen
+
+## Komponenten erstellen und verwenden
+
+### Eine Komponente erstellen
+
+1. Gestalte das Element, das du als Komponente erstellen möchtest (z.B. ein Button)
+2. Wähle das Element aus
+3. Klicke auf das "Create Component"-Symbol in der oberen Toolbar oder drücke `Ctrl+Alt+K` (Windows) oder `⌘+Option+K` (Mac)
+
+Die Komponente wird nun mit einer lila Umrandung markiert, was anzeigt, dass es sich um eine Hauptkomponente handelt.
+
+### Komponenten-Instanzen verwenden
+
+Um eine Instanz einer Komponente zu erstellen:
+
+1. Wähle die Hauptkomponente aus
+2. Kopiere sie (`Ctrl+C` / `⌘+C`) und füge sie ein (`Ctrl+V` / `⌘+V`) oder ziehe sie mit der Alt-Taste gedrückt
+3. Oder finde die Komponente in der Assets-Seitenleiste und ziehe sie in dein Design
+
+### Komponenten organisieren
+
+Für ein effizientes Designsystem solltest du deine Komponenten organisieren:
+
+1. Erstelle einen separaten Frame oder eine Seite für dein Komponentensystem
+2. Gruppiere ähnliche Komponenten zusammen (z.B. alle Button-Varianten)
+3. Benenne Komponenten klar und konsistent (z.B. "Button/Primary", "Button/Secondary")
+4. Verwende Beschreibungen für Komponenten, um ihre Verwendung zu dokumentieren
+
+
+
+## Komponenten-Eigenschaften bearbeiten
+
+### Instanz-Overrides
+
+Instanzen können angepasst werden, ohne die Hauptkomponente zu beeinflussen:
+
+1. Wähle eine Instanz aus
+2. Ändere Eigenschaften wie Farbe, Text, Größe usw.
+3. Diese Änderungen gelten nur für diese spezifische Instanz
+
+Wenn du eine Eigenschaft zurücksetzen möchtest, klicke auf den Reset-Button (kreisförmiger Pfeil) neben der Eigenschaft im Properties-Panel.
+
+### Hauptkomponente aktualisieren
+
+Wenn du die Hauptkomponente änderst, werden diese Änderungen auf alle Instanzen übertragen:
+
+1. Finde und wähle die Hauptkomponente aus
+2. Nimm Änderungen vor
+3. Alle Instanzen werden aktualisiert, wobei Overrides erhalten bleiben
+
+### Detached Instances
+
+Manchmal möchtest du eine Instanz komplett von ihrer Hauptkomponente trennen:
+
+1. Rechtsklick auf eine Instanz
+2. Wähle "Detach Instance"
+3. Die Instanz wird zu einer unabhängigen Form oder Gruppe
+
+Beachte, dass diese Aktion nicht rückgängig gemacht werden kann, außer durch manuelles Ersetzen mit einer neuen Instanz.
+
+## Varianten
+
+Varianten sind ein mächtiges Feature in Figma, das es dir ermöglicht, verschiedene Zustände oder Versionen einer Komponente innerhalb einer einzigen Hauptkomponente zu definieren.
+
+### Varianten erstellen
+
+1. Erstelle mehrere ähnliche Komponenten (z.B. Button-Zustände: Normal, Hover, Pressed, Disabled)
+2. Wähle alle diese Komponenten aus
+3. Klicke auf "Combine as variants" in der Properties-Leiste oder im Rechtsklick-Menü
+
+### Varianten-Eigenschaften definieren
+
+Nach dem Kombinieren von Komponenten als Varianten:
+
+1. Im Properties-Panel erscheint ein "Variant"-Abschnitt
+2. Definiere die Eigenschaften für deine Varianten (z.B. "State": "Normal", "Hover", "Pressed")
+3. Du kannst mehrere Eigenschaften hinzufügen (z.B. "Size": "Small", "Medium", "Large")
+
+### Varianten verwenden
+
+Wenn du Varianten in deinem Design verwendest:
+
+1. Ziehe eine Instanz der Variante in dein Design
+2. Im Properties-Panel kannst du zwischen den verfügbaren Varianten wechseln
+3. In Prototypen kannst du Interaktionen definieren, die zwischen Varianten wechseln
+
+## Praktische Übungen
+
+Lass uns das Gelernte mit einigen praktischen Übungen festigen:
+
+### Übung 1: Button-Komponente mit Varianten
+
+1. Erstelle einen Button mit Hintergrund, Text und Padding
+2. Mache ihn zu einer Komponente
+3. Dupliziere den Button und ändere seinen Stil für verschiedene Zustände:
+ - Normal: Standardfarbe
+ - Hover: Leicht hellere Farbe
+ - Pressed: Dunklere Farbe
+ - Disabled: Ausgegraute Farbe
+4. Kombiniere diese als Varianten mit der Eigenschaft "State"
+5. Erstelle eine weitere Dimension mit "Size" (Small, Medium, Large)
+
+### Übung 2: Input-Feld-Komponente
+
+1. Erstelle ein Text-Input-Feld mit Label und Placeholder
+2. Mache es zu einer Komponente
+3. Erstelle Varianten für verschiedene Zustände:
+ - Empty: Nur Placeholder-Text
+ - Filled: Mit eingegebenem Text
+ - Focus: Mit Fokus-Umrandung
+ - Error: Mit Fehlermeldung
+4. Verwende diese Input-Felder in einem Formular-Design
+
+### Übung 3: Card-Komponente mit verschachtelten Komponenten
+
+1. Erstelle eine Card-Komponente mit Bild, Titel, Text und Button
+2. Mache den Button innerhalb der Card zu einer eigenen Komponente
+3. Erstelle verschiedene Card-Varianten (z.B. mit/ohne Bild, mit verschiedenen Layouts)
+4. Experimentiere mit Overrides für einzelne Card-Instanzen
+
+## Komponenten-Bibliotheken und Teams
+
+In professionellen Arbeitsumgebungen werden Komponenten oft in Bibliotheken organisiert:
+
+### Komponenten-Bibliothek erstellen
+
+1. Erstelle eine neue Figma-Datei für deine Bibliothek
+2. Organisiere deine Komponenten nach Kategorien
+3. Gehe zu File > Publish Library, um sie zu veröffentlichen
+
+### Bibliotheken in Teams verwenden
+
+1. Team-Mitglieder können eine veröffentlichte Bibliothek aktivieren
+2. Komponenten erscheinen im Assets-Panel
+3. Änderungen an der Bibliothek können an alle Team-Mitglieder weitergegeben werden
+
+## Best Practices für Komponenten
+
+- **Sinnvolle Namensgebung**: Verwende ein klares Benennungsschema (z.B. "Kategorie/Unterkategorie/Variante")
+- **Beschreibungen hinzufügen**: Dokumentiere, wie und wann Komponenten verwendet werden sollten
+- **Varianten sinnvoll strukturieren**: Gruppiere ähnliche Komponenten als Varianten
+- **Auto Layout nutzen**: Verwende Auto Layout für flexible, responsive Komponenten
+- **Konsistente Eigenschaften**: Halte Abstände, Radien und andere Eigenschaften konsistent
+- **Versionierung**: Kommuniziere größere Änderungen an Komponenten mit deinem Team
+
+## Für die nächste Lektion
+
+In der nächsten Lektion werden wir uns mit **Auto Layout und Responsive Design** beschäftigen. Du wirst lernen, wie du flexible und anpassungsfähige Designs erstellst, die auf verschiedenen Bildschirmgrößen funktionieren.
+
+Bis dahin empfehle ich dir, mit Komponenten und Varianten zu experimentieren. Versuche, ein kleines Designsystem mit grundlegenden UI-Elementen zu erstellen.
+
+## Hilfreiche Ressourcen
+
+- [Figma Components Documentation](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-Components-in-Figma)
+- [Figma Variants Documentation](https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants)
+- [Material Design System für Figma](https://www.figma.com/community/file/778763161265841481)
+
+Hast du Fragen zu Komponenten und Varianten? Hinterlasse gerne einen Kommentar unten!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/figma-frames.mdx b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-frames.mdx
new file mode 100644
index 000000000..8e5a9804e
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-frames.mdx
@@ -0,0 +1,167 @@
+---
+title: "Frames und Layout in Figma"
+description: "Lerne, wie du mit Frames arbeitest, Layouts organisierst und responsive Designs in Figma erstellst."
+pubDate: 2025-03-26
+category: "UI & UX"
+image: "/images/tutorials/nobackground/figma-basics-bauntown-tutorial.png"
+author: "Anna Schmidt"
+course: "figma-basics"
+courseName: "Figma Grundlagen"
+lessonNumber: 2
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+import FigmaEmbed from '../../../components/FigmaEmbed.astro';
+
+# Frames und Layout in Figma
+
+Willkommen zur zweiten Lektion unseres Figma-Grundlagenkurses! Nachdem wir uns in der ersten Lektion mit den Grundlagen von Figma vertraut gemacht haben, tauchen wir nun tiefer in ein essenzielles Konzept ein: Frames und Layout-Strukturen.
+
+
+
+## Was sind Frames?
+
+Frames sind die grundlegenden Container in Figma, vergleichbar mit Artboards in Adobe-Produkten oder Divs in der Webentwicklung. Sie helfen dir, dein Design zu organisieren und zu strukturieren.
+
+Die wichtigsten Merkmale von Frames:
+
+- **Feste Größe**: Frames haben definierte Dimensionen
+- **Verschachtelung**: Frames können innerhalb anderer Frames platziert werden
+- **Scrollverhalten**: Frames können für Prototyping scrollbar gemacht werden
+- **Layout-Einstellungen**: Frames können Auto-Layout-Funktionen nutzen
+
+Um einen neuen Frame zu erstellen, drücke einfach `F` auf deiner Tastatur oder wähle das Frame-Tool aus der Werkzeugleiste.
+
+## Mit Frames arbeiten
+
+### Vordefinierte Frame-Größen
+
+Figma bietet viele vordefinierte Frame-Größen für verschiedene Geräte und Zwecke:
+
+- **Mobilgeräte**: iPhone, Android-Telefone
+- **Tablets**: iPad, Android-Tablets
+- **Desktop**: Verschiedene Bildschirmgrößen
+- **Social Media**: Instagram-Post, Twitter-Header, etc.
+- **Benutzerdefiniert**: Eigene Größen für spezielle Anforderungen
+
+Beim Erstellen eines neuen Frames wird eine Liste dieser vordefinierten Größen angezeigt, aus der du wählen kannst.
+
+### Frame-Hierarchie
+
+In Figma können Frames verschachtelt werden, wodurch eine hierarchische Struktur entsteht. Dies ist besonders nützlich für:
+
+- **Organisieren von UI-Komponenten**: Header, Content, Footer
+- **Erstellen von komplexen Layouts**: Verschachtelte Grids und Strukturen
+- **Verbessern der Wiederverwendbarkeit**: Elemente gruppieren für leichtere Wiederverwendung
+
+Im Ebenen-Panel kannst du diese Hierarchie leicht erkennen und verwalten.
+
+## Layout-Grundlagen in Figma
+
+### Das Grid-System
+
+Grids helfen dir, deine Designs konsistent und ausgerichtet zu halten:
+
+1. Wähle einen Frame aus
+2. Im Eigenschaften-Panel, scrolle zum Abschnitt "Layout Grid"
+3. Klicke auf das "+"-Symbol, um ein Grid hinzuzufügen
+4. Wähle zwischen drei Grid-Typen:
+ - **Grid**: Ein gleichmäßiges Rastermuster
+ - **Columns**: Vertikale Spalten (wie in Web-Frameworks)
+ - **Rows**: Horizontale Zeilen
+
+Typischerweise verwenden Webdesigns ein 12-Spalten-Grid, aber du kannst dies nach Bedarf anpassen.
+
+### Constraints
+
+Constraints bestimmen, wie sich Elemente verhalten, wenn sich die Größe ihres übergeordneten Frames ändert:
+
+1. Wähle ein Element innerhalb eines Frames
+2. Im Eigenschaften-Panel, finde den Abschnitt "Constraints"
+3. Setze horizontale und vertikale Constraints
+
+Mögliche Constraints-Einstellungen:
+- **Left/Right/Center**: Horizontale Positionierung
+- **Top/Bottom/Center**: Vertikale Positionierung
+- **Left & Right/Top & Bottom**: Dehnen in eine Richtung
+- **Scale**: Proportionale Skalierung
+
+Mit Constraints kannst du responsive Designs erstellen, die sich an verschiedene Bildschirmgrößen anpassen.
+
+## Auto Layout
+
+Auto Layout ist eine der leistungsstärksten Funktionen in Figma, ähnlich wie Flexbox in CSS. Es ermöglicht dir, dynamische, responsive Layouts zu erstellen.
+
+### Auto Layout hinzufügen
+
+1. Wähle einen Frame oder mehrere Elemente aus
+2. Drücke `Shift + A` oder wähle "Auto Layout" aus dem Kontextmenü
+
+### Auto Layout-Eigenschaften
+
+Nach dem Hinzufügen von Auto Layout kannst du verschiedene Einstellungen anpassen:
+
+- **Direction**: Horizontal oder vertikal
+- **Spacing Between Items**: Abstand zwischen Elementen
+- **Padding**: Innenabstand des Frames
+- **Alignment**: Ausrichtung der Elemente innerhalb des Frames
+- **Distribution**: Wie der Platz zwischen Elementen verteilt wird
+
+### Verschachtelte Auto Layouts
+
+Du kannst Auto Layouts verschachteln, um komplexe, responsive UI-Strukturen zu erstellen:
+
+1. Erstelle einen vertikalen Auto Layout-Frame für die Hauptstruktur
+2. Füge horizontale Auto Layout-Frames für Zeilen hinzu
+3. Passe die Eigenschaften jedes Layouts an
+
+Dies ermöglicht komplexe Strukturen wie Cards, Listen oder ganze Seitenlayouts.
+
+
+
+## Praktische Übungen
+
+Lass uns das Gelernte mit einigen praktischen Übungen festigen:
+
+### Übung 1: Responsiver Header
+
+1. Erstelle einen Frame mit Auto Layout (horizontal)
+2. Füge ein Logo links und Navigationslinks rechts hinzu
+3. Wende "Space Between" für die Verteilung an
+4. Ändere die Frame-Breite und beobachte, wie das Layout reagiert
+
+### Übung 2: Card-Layout
+
+1. Erstelle einen Card-Frame mit Auto Layout (vertikal)
+2. Füge ein Bild, eine Überschrift, einen Text und einen Button hinzu
+3. Wende Padding und Abstände zwischen den Elementen an
+4. Dupliziere die Card und erstelle ein Grid von Cards
+
+### Übung 3: Verschachteltes Layout
+
+1. Erstelle einen App-Screen-Frame
+2. Füge einen Header, einen Content-Bereich und einen Footer hinzu
+3. Wende Auto Layout auf jeden Bereich an
+4. Experimentiere mit verschiedenen Constraints und Anpassungen
+
+## Tipps für effiziente Layouts
+
+- **Konsistente Abstände**: Verwende ein einheitliches Abstandssystem (8px, 16px, 24px, etc.)
+- **Frame-Komponenten**: Mache häufig verwendete Frame-Strukturen zu Komponenten
+- **Kommentare**: Füge Kommentare zu komplexen Layouts hinzu, um deinen Teammitgliedern zu helfen
+- **Ordentliche Namensgebung**: Benenne deine Frames und Ebenen klar und konsistent
+- **Layout-Grid anpassen**: Passe dein Grid an dein spezifisches Projekt an
+
+## Für die nächste Lektion
+
+In der dritten Lektion werden wir uns mit **Komponenten und Varianten** beschäftigen. Du wirst lernen, wie du wiederverwendbare UI-Elemente erstellst und verschiedene Zustände für interaktive Komponenten definierst.
+
+Bis dahin empfehle ich dir, mit Frames, Auto Layout und Constraints zu experimentieren. Versuche, einige gängige UI-Strukturen nachzubauen, um dein Verständnis zu festigen.
+
+## Hilfreiche Ressourcen
+
+- [Figma Auto Layout Documentation](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-layouts-with-Auto-layout)
+- [Figma Constraints Documentation](https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize)
+- [Layout Grid Best Practices](https://www.figma.com/resource-library/layout-grids-figma/)
+
+Hast du Fragen zu Frames und Layouts? Hinterlasse gerne einen Kommentar unten!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/figma-handoff.mdx b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-handoff.mdx
new file mode 100644
index 000000000..667e2cc08
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-handoff.mdx
@@ -0,0 +1,258 @@
+---
+title: "Design-to-Development Handoff in Figma"
+description: "Lerne, wie du deine Figma-Designs effektiv an Entwickler übergibst und eine nahtlose Zusammenarbeit zwischen Design und Entwicklung ermöglichst."
+pubDate: 2025-03-30
+category: "Users"
+image: "/images/tutorials/nobackground/figma-basics-bauntown-tutorial.png"
+author: "Anna Schmidt"
+course: "figma-basics"
+courseName: "Figma Grundlagen"
+lessonNumber: 6
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+import FigmaEmbed from '../../../components/FigmaEmbed.astro';
+
+# Design-to-Development Handoff in Figma
+
+Willkommen zur sechsten und letzten Lektion unseres Figma-Grundlagenkurses! In dieser Lektion werden wir uns damit beschäftigen, wie du deine Figma-Designs effektiv an Entwickler übergibst und eine nahtlose Zusammenarbeit zwischen Design und Entwicklung ermöglichst.
+
+
+
+## Warum ein guter Handoff wichtig ist
+
+Der Übergang vom Design zur Entwicklung ist ein kritischer Moment im Produktentwicklungsprozess. Ein gut durchgeführter Handoff kann:
+
+- **Zeit sparen**: Weniger Rückfragen und Missverständnisse
+- **Genauigkeit verbessern**: Exakte Umsetzung des Designs
+- **Zusammenarbeit fördern**: Besseres Verständnis zwischen Designern und Entwicklern
+- **Qualität steigern**: Weniger Diskrepanzen zwischen Design und Implementierung
+- **Prozesse optimieren**: Reibungsloserer Workflow für alle Beteiligten
+
+
+
+## Der Inspect-Modus in Figma
+
+Der Inspect-Modus ist das Herzstück des Design-to-Development Handoffs in Figma:
+
+### Zugriff auf den Inspect-Modus
+
+1. Teile dein Figma-Design mit Entwicklern (mindestens "Viewer"-Berechtigung)
+2. Entwickler können per Rechtsklick auf ein Element den "Inspect"-Tab öffnen
+3. Alternativ können sie auf den "Inspect"-Tab neben "Design" und "Prototype" klicken
+
+### Was Entwickler im Inspect-Modus sehen können
+
+- **CSS-Eigenschaften**: Farben, Schriftarten, Abstände, Schatten, etc.
+- **Messungen**: Abstände zwischen Elementen und Dimensionen
+- **Assets**: Zugriff auf exportierbare Bilder und Icons
+- **Code**: Generierte CSS-, iOS- oder Android-Snippets
+- **Eigenschaften**: Alle Style-Informationen zu einem Element
+
+## Vorbereitung deines Designs für den Handoff
+
+### Ordentliche Organisation
+
+Ein sauber organisiertes Design ist essentiell für einen erfolgreichen Handoff:
+
+1. **Klare Namensgebung**: Benenne alle Frames, Gruppen und Ebenen sinnvoll
+2. **Sinnvolle Hierarchie**: Organisiere Elemente in einer logischen Struktur
+3. **Seiten nutzen**: Trenne Screens, Komponenten und Dokumentation auf verschiedene Seiten
+4. **Konsistente Struktur**: Verwende durchgängig die gleiche Organisationsstruktur
+
+### Aufräumen vor dem Handoff
+
+Bevor du dein Design an Entwickler übergibst:
+
+1. **Nicht benötigte Ebenen ausblenden**: Verstecke Entwürfe und Alternative
+2. **Varianten konsolidieren**: Stelle sicher, dass alle Komponenten-Varianten vollständig sind
+3. **Flow überprüfen**: Stelle sicher, dass der Prototyp alle notwendigen Interaktionen enthält
+4. **Kommentare hinzufügen**: Ergänze Erklärungen zu komplexen oder ungewöhnlichen Elementen
+
+## Design-Systeme und Tokens
+
+### Design-Tokens für Entwickler
+
+Design-Tokens sind benannte Designvariablen, die in Code übersetzt werden können:
+
+1. **Farben**: Primärfarben, Sekundärfarben, Fehlerfarben, etc.
+2. **Typografie**: Schriftfamilien, -größen, Zeilenhöhen
+3. **Abstände**: Standardabstände zwischen Elementen
+4. **Radien**: Standardradien für abgerundete Ecken
+5. **Schatten**: Verschiedene Schatten für unterschiedliche Erhöhungen
+
+Diese Tokens sollten in Figma definiert und dokumentiert werden:
+
+- Verwende Styles für Farben, Text und Effekte
+- Benenne sie konsistent und nachvollziehbar
+- Dokumentiere ihre Verwendung
+
+### Dokumentation des Design-Systems
+
+Eine umfassende Dokumentation deines Design-Systems hilft Entwicklern:
+
+1. Erstelle eine dedizierte Seite für die Design-System-Dokumentation
+2. Dokumentiere alle Komponenten und ihre Varianten
+3. Erkläre Verwendungszwecke und Einschränkungen
+4. Füge Beispiele und Anti-Beispiele hinzu
+
+## Spezifische Aspekte für Web-Entwicklung
+
+### Responsive Designs dokumentieren
+
+Für Web-Projekte ist es wichtig, das responsive Verhalten zu dokumentieren:
+
+1. Erstelle Versionen deines Designs für verschiedene Breakpoints
+2. Dokumentiere, wie sich Layouts ändern
+3. Erkläre, wie Auto Layout und Constraints in CSS übersetzt werden sollten
+
+| Figma | CSS Equivalent |
+|-------|----------------|
+| Auto Layout (Horizontal) | display: flex; flex-direction: row; |
+| Auto Layout (Vertical) | display: flex; flex-direction: column; |
+| Space Between | justify-content: space-between; |
+| Fill Container | flex-grow: 1; |
+| Fixed Width/Height | width/height: [value]px; |
+| Hug Contents | width/height: auto; or width/height: fit-content; |
+
+### Assets für Web exportieren
+
+Web-Entwickler benötigen optimierte Assets:
+
+1. Verwende SVGs wo immer möglich für skalierbare Icons
+2. Für Rasterbilder exportiere in verschiedenen Auflösungen (@1x, @2x)
+3. Optimiere Dateigröße ohne Qualitätsverlust
+4. Benenne Assets klar und konsistent
+
+## Spezifische Aspekte für Mobile-Entwicklung
+
+### iOS-spezifische Übergabe
+
+Für iOS-Entwickler:
+
+1. Verwende standardisierte iOS-Komponenten wo möglich
+2. Dokumentiere Abstände in Punkten (pt) nicht Pixeln
+3. Beachte die Safe Area für verschiedene iOS-Geräte
+4. Berücksichtige Dark Mode und verschiedene Geräteausrichtungen
+
+### Android-spezifische Übergabe
+
+Für Android-Entwickler:
+
+1. Verwende Material Design-Komponenten wo passend
+2. Dokumentiere Abstände in dp (Density-independent Pixels)
+3. Berücksichtige die vielfältigen Bildschirmgrößen und -verhältnisse
+4. Beachte verschiedene Navigationsstile (Gesten vs. Buttons)
+
+## Kommunikation und Zusammenarbeit
+
+### Effektive Kommentare
+
+Kommentare in Figma sind ein mächtiges Werkzeug für die Zusammenarbeit:
+
+1. Platziere Kommentare direkt auf dem Design
+2. Sei spezifisch und klar in deinen Anmerkungen
+3. Verknüpfe relevante Personen mit @-Mentions
+4. Markiere Kommentare als erledigt, wenn sie bearbeitet wurden
+
+### Handoff-Meetings
+
+Ein persönliches oder virtuelles Handoff-Meeting kann sehr wertvoll sein:
+
+1. Präsentiere das Design und seine Grundprinzipien
+2. Erkläre komplexe Interaktionen und Animationen
+3. Beantworte Fragen direkt
+4. Dokumentiere Entscheidungen und Anpassungen
+
+### Kontinuierlicher Austausch
+
+Der Handoff ist nicht das Ende der Zusammenarbeit:
+
+1. Bleibe verfügbar für Rückfragen während der Entwicklung
+2. Überprüfe regelmäßig den Implementierungsfortschritt
+3. Sei offen für technische Einschränkungen und Anpassungen
+4. Aktualisiere das Design basierend auf technischem Feedback
+
+## Praktische Übungen
+
+Lass uns das Gelernte mit einigen praktischen Übungen festigen:
+
+### Übung 1: Design-Audit für Handoff
+
+1. Nimm eines deiner bestehenden Designs
+2. Überprüfe die Namensgebung und Struktur
+3. Stelle sicher, dass alle Styles und Komponenten konsistent sind
+4. Füge Kommentare für komplexe oder ungewöhnliche Elemente hinzu
+
+### Übung 2: Tokens-Dokumentation
+
+1. Identifiziere alle Design-Tokens in deinem Design
+2. Erstelle eine Dokumentationsseite mit allen Tokens
+3. Organisiere sie in Kategorien (Farben, Typografie, Abstände, etc.)
+4. Dokumentiere Namen und Werte für Entwickler
+
+### Übung 3: Responsives Design dokumentieren
+
+1. Erstelle Versionen eines UI-Elements für verschiedene Breakpoints
+2. Dokumentiere, wie sich das Element anpasst
+3. Erstelle eine Referenztabelle mit Figma-Eigenschaften und CSS-Äquivalenten
+4. Füge Kommentare mit Erklärungen hinzu
+
+## Tools und Plugins für den Handoff
+
+### Figma-Plugins
+
+Einige nützliche Plugins für den Design-to-Development Handoff:
+
+1. **Inspect Tokens**: Zeigt Design-Tokens im Inspect-Modus an
+2. **Figma to HTML/CSS/React**: Generiert Code aus Designs
+3. **Stark**: Hilft bei der Überprüfung der Barrierefreiheit
+4. **Content Reel**: Hilft, realistische Inhalte zu erstellen
+5. **Redlines**: Erzeugt detaillierte Messungsdiagramme
+
+### Externe Tools
+
+Zusätzlich zu Figma gibt es externe Tools, die den Handoff unterstützen:
+
+1. **Zeplin**: Spezialisiertes Tool für Design Handoff
+2. **Avocode**: Hilft bei der Extraktion von Assets und Styles
+3. **Abstract**: Versionskontrolle für Designdateien
+4. **Storybook**: Brücke zwischen Design-Systems und Code
+
+## Best Practices für den Handoff
+
+- **Designsystem verwenden**: Nutze ein konsistentes Designsystem mit benannten Styles
+- **Prototypen teilen**: Gib Entwicklern Zugriff auf interaktive Prototypen
+- **Versionen nachverfolgen**: Dokumentiere Änderungen und Versionen klar
+- **Standards festlegen**: Etabliere Benennungskonventionen und Strukturstandards
+- **Realistische Daten**: Verwende realistische Inhalte statt Platzhaltertext
+- **Edge Cases berücksichtigen**: Dokumentiere, wie mit Extremfällen umgegangen werden soll
+- **Handoff-Checkliste**: Erstelle eine Checkliste für einen vollständigen Handoff
+
+## Abschluss des Figma-Grundlagenkurses
+
+Herzlichen Glückwunsch! Du hast nun alle sechs Lektionen unseres Figma-Grundlagenkurses abgeschlossen:
+
+1. **Einführung in Figma**: Grundlegende Konzepte und Oberfläche
+2. **Frames und Layout**: Strukturierung und Organisation von Designs
+3. **Komponenten und Varianten**: Wiederverwendbare Design-Elemente
+4. **Auto Layout und Responsive Design**: Flexible und anpassungsfähige Layouts
+5. **Prototyping und Interaktionen**: Interaktive Prototypen erstellen
+6. **Design-to-Development Handoff**: Effektive Übergabe an Entwickler
+
+Mit diesen Kenntnissen bist du nun in der Lage, Figma effektiv für deine Design-Workflow zu nutzen und nahtlos mit Entwicklungsteams zusammenzuarbeiten.
+
+## Weiterführende Ressourcen
+
+Um dein Figma-Wissen weiter zu vertiefen, empfehle ich dir folgende Ressourcen:
+
+- [Figma's Official Learn Design System](https://www.figma.com/resources/learn-design/)
+- [Figma Developer Documentation](https://www.figma.com/developers)
+- [Figma Community](https://www.figma.com/community) für Templates und Vorlagen
+- [Figma Youtube Channel](https://www.youtube.com/figmadesign) für fortgeschrittene Tutorials
+
+## Dein Feedback ist willkommen!
+
+Wir hoffen, dieser Kurs hat dir geholfen, Figma besser zu verstehen und effektiver zu nutzen. Wir freuen uns über dein Feedback – hinterlasse gerne einen Kommentar unten oder kontaktiere uns direkt.
+
+Viel Erfolg bei deinen zukünftigen Design-Projekten mit Figma!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/figma-intro.mdx b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-intro.mdx
new file mode 100644
index 000000000..447591b5b
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-intro.mdx
@@ -0,0 +1,115 @@
+---
+title: "Einführung in Figma"
+description: "Entdecke die Grundlagen von Figma und warum es ein unverzichtbares Werkzeug für Designer und Entwickler ist."
+pubDate: 2025-03-25
+category: "UI & UX"
+featured: true
+image: "/images/tutorials/nobackground/figma-basics-bauntown-tutorial.png"
+author: "Anna Schmidt"
+course: "figma-basics"
+courseName: "Figma Grundlagen"
+lessonNumber: 1
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+import FigmaEmbed from '../../../components/FigmaEmbed.astro';
+
+# Einführung in Figma
+
+Willkommen zum ersten Teil unseres umfassenden Figma-Grundlagenkurses! In dieser Lektion lernst du, was Figma ist, warum es so beliebt ist und wie du deine ersten Schritte machen kannst.
+
+
+
+## Was ist Figma?
+
+Figma ist ein leistungsstarkes, webbasiertes Design-Tool, das Designern und Entwicklern die Zusammenarbeit bei der Erstellung von Benutzeroberflächen und Prototypen ermöglicht. Im Gegensatz zu herkömmlichen Design-Tools läuft Figma direkt im Browser, was bedeutet, dass du keine schwere Software installieren musst und plattformübergreifend (Windows, Mac, Linux) arbeiten kannst.
+
+Die Hauptstärken von Figma sind:
+
+- **Echtzeitkollaboration**: Mehrere Teammitglieder können gleichzeitig an einem Design arbeiten
+- **Cloudbasierte Speicherung**: Deine Projekte sind immer aktuell und von überall zugänglich
+- **Umfangreiche Design-Funktionen**: Von einfachen Wireframes bis hin zu komplexen, interaktiven Prototypen
+- **Komponenten-System**: Wiederverwendbare Design-Elemente für Konsistenz und Effizienz
+- **Nahtlose Integration**: Hervorragende Anbindung an andere Tools und Plattformen
+
+## Warum Figma lernen?
+
+Für **Designer** bietet Figma einen modernen Workflow, der die Zusammenarbeit vereinfacht und die Design-Iteration beschleunigt. Die cloud-basierte Natur eliminiert Versionsprobleme und ermöglicht schnelles Feedback.
+
+Für **Entwickler** ist das Verständnis von Figma entscheidend, um Designs präzise umzusetzen. Figma bietet spezielle Entwicklertools, die genaue CSS-Werte, Assets und Spezifikationen bereitstellen, was den Übergang vom Design zum Code erheblich vereinfacht.
+
+Für **Produktmanager** bietet Figma einen klaren Einblick in den Design-Prozess und ermöglicht es, frühzeitig Feedback zu geben und Änderungen vorzuschlagen, ohne den Workflow zu unterbrechen.
+
+## Figma vs. andere Design-Tools
+
+Im Vergleich zu anderen populären Design-Tools wie Adobe XD, Sketch oder InVision hat Figma einige entscheidende Vorteile:
+
+| Feature | Figma | Sketch | Adobe XD | InVision |
+|---------|-------|--------|----------|----------|
+| Plattform | Web, macOS, Windows | Nur macOS | macOS, Windows | Web |
+| Echtzeit-Kollaboration | ✅ | ❌ (Nur mit Plugins) | ❌ (Beschränkt) | ❌ |
+| Prototyping | ✅ | ✅ (Begrenzt) | ✅ | ✅ |
+| Cloud-Speicherung | ✅ | ❌ (Nur mit Sketch Cloud) | ✅ (Mit Creative Cloud) | ✅ |
+| Auto-Layout | ✅ | ❌ | ✅ (Begrenzt) | ❌ |
+| Kostenlose Version | ✅ | ❌ | ✅ | ✅ (Begrenzt) |
+
+## Erste Schritte in Figma
+
+Lass uns direkt einsteigen! Um mit Figma zu beginnen:
+
+1. Besuche [figma.com](https://www.figma.com/) und erstelle ein kostenloses Konto
+2. Bestätige deine E-Mail-Adresse
+3. Logge dich ein und klicke auf "New File" oder "New Design File", um dein erstes Projekt zu starten
+
+
+
+## Die Figma-Oberfläche verstehen
+
+Die Benutzeroberfläche von Figma besteht aus mehreren Schlüsselbereichen:
+
+- **Menüleiste**: Oben, enthält Datei-Operationen, Bearbeitungswerkzeuge und Einstellungen
+- **Werkzeugleiste**: Links, bietet Zugriff auf Formen, Text und andere Designelemente
+- **Eigenschaften-Panel**: Rechts, zeigt Eigenschaften des aktuell ausgewählten Elements
+- **Ebenen-Panel**: Links unten, listet alle Elemente im Design hierarchisch auf
+- **Arbeitsfläche**: Der Hauptbereich, in dem du deine Designs erstellst
+- **Kommentare**: Rechts, ermöglicht Feedback und Diskussionen
+
+Nimm dir Zeit, diese Bereiche zu erkunden und dich mit ihrer Funktion vertraut zu machen.
+
+## Die Terminologie von Figma
+
+Bevor wir weitermachen, sollten wir einige wichtige Begriffe in Figma klären:
+
+- **Frame**: Ein begrenzter Bereich, der als Container für deine Designs dient (ähnlich wie eine Artboard in anderen Tools)
+- **Group**: Eine Sammlung von Objekten, die zusammen bearbeitet werden können
+- **Layer**: Jedes einzelne Element in deinem Design
+- **Component**: Wiederverwendbare Design-Elemente, die in mehreren Designs konsistent sein können
+- **Variant**: Verschiedene Zustände eines Components (z.B. Button: normal, hover, pressed)
+- **Auto Layout**: Ähnlich wie Flexbox in CSS, ermöglicht responsive Anordnungen
+- **Constraints**: Regeln, die bestimmen, wie sich Elemente anpassen, wenn die Größe ihres Containers geändert wird
+
+## Übung: Dein erstes Figma-Design
+
+Lass uns ein einfaches Design erstellen, um die Grundfunktionen zu üben:
+
+1. Erstelle einen neuen Frame (Tastenkürzel: F) und wähle ein Smartphone-Format
+2. Füge ein Rechteck für einen Header hinzu
+3. Füge Text für einen Titel hinzu
+4. Erstelle einen Button mit abgerundeten Ecken
+5. Füge Icons oder Bilder hinzu
+
+Experiment mit verschiedenen Farben, Schriftarten und Stilen, um dich mit den Grundfunktionen vertraut zu machen.
+
+## Für die nächste Lektion
+
+In der nächsten Lektion werden wir uns mit **Frames und Layout** beschäftigen und lernen, wie wir effektiv mit dem Grid-System arbeiten und Constraints für responsive Designs einsetzen können.
+
+Bis dahin empfehle ich dir, mit der Figma-Oberfläche zu experimentieren und dich mit den grundlegenden Werkzeugen vertraut zu machen. Je mehr du übst, desto fließender wird dein Workflow sein!
+
+## Hilfreiche Ressourcen
+
+- [Offizielle Figma Learning Center](https://help.figma.com/hc/en-us/categories/360002051613-Getting-Started)
+- [Figma YouTube Channel](https://www.youtube.com/figmadesign)
+- [Figma Community](https://www.figma.com/community)
+
+Hast du Fragen zur ersten Lektion? Hinterlasse gerne einen Kommentar unten!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/figma-prototyping.mdx b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-prototyping.mdx
new file mode 100644
index 000000000..42bf3111e
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/figma-prototyping.mdx
@@ -0,0 +1,250 @@
+---
+title: "Prototyping und Interaktionen in Figma"
+description: "Lerne, wie du statische Designs in interaktive Prototypen verwandelst und Nutzerinteraktionen in Figma simulierst."
+pubDate: 2025-03-29
+category: "UI & UX"
+image: "/images/tutorials/nobackground/figma-basics-bauntown-tutorial.png"
+author: "Anna Schmidt"
+course: "figma-basics"
+courseName: "Figma Grundlagen"
+lessonNumber: 5
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+import FigmaEmbed from '../../../components/FigmaEmbed.astro';
+
+# Prototyping und Interaktionen in Figma
+
+Willkommen zur fünften Lektion unseres Figma-Grundlagenkurses! In dieser Lektion werden wir uns damit beschäftigen, wie du deine statischen Designs in interaktive Prototypen verwandelst und realistische Nutzerinteraktionen simulierst.
+
+
+
+## Warum Prototyping wichtig ist
+
+Prototyping ist der Prozess, bei dem du deine statischen Designs mit Interaktivität versehen kannst. Dies bietet zahlreiche Vorteile:
+
+- **Frühes Feedback**: Teste deine Design-Ideen, bevor du Code schreibst
+- **Bessere Kommunikation**: Vermittle deinen Stakeholdern, wie das Produkt funktionieren wird
+- **Usability-Testing**: Identifiziere Probleme in deinem Design-Flow
+- **Iteratives Design**: Verbessere dein Design basierend auf Nutzerfeedback
+- **Spezifikationen für Entwickler**: Zeige genau, wie Interaktionen funktionieren sollen
+
+
+
+## Grundlagen des Prototypings in Figma
+
+### Der Prototyping-Modus
+
+Um mit dem Prototyping zu beginnen:
+
+1. Öffne dein Figma-Design
+2. Klicke auf den "Prototype"-Tab im rechten Panel (neben "Design")
+3. Deine Frames werden nun als einzelne Screens behandelt
+
+### Verbindungen erstellen
+
+Verbindungen (Connections) definieren, wie Nutzer zwischen verschiedenen Screens navigieren:
+
+1. Wähle ein Element aus, das die Interaktion auslösen soll (z.B. ein Button)
+2. Klicke auf den blauen Punkt am Element und ziehe eine Verbindung zum Ziel-Frame
+3. Ein Interaktions-Panel öffnet sich, in dem du die Details der Interaktion definieren kannst
+
+### Interaktionstypen
+
+In Figma kannst du verschiedene Arten von Interaktionen definieren:
+
+- **On Click/Tap**: Ausgelöst durch Klick oder Tippen (am häufigsten verwendet)
+- **On Drag**: Ausgelöst durch Ziehen eines Elements
+- **Mouse Enter/Leave**: Ausgelöst, wenn der Mauszeiger ein Element betritt/verlässt
+- **After Delay**: Ausgelöst nach einer bestimmten Zeit
+- **On Key Press**: Ausgelöst durch Tastatureingaben
+- **On Voice Command**: Ausgelöst durch Sprachbefehle
+
+### Übergangsanimationen
+
+Figma bietet verschiedene Übergangsanimationen:
+
+1. **Instant**: Keine Animation, sofortiger Wechsel
+2. **Dissolve**: Sanftes Ein- und Ausblenden
+3. **Slide**: Verschieben von Bildschirmen in verschiedene Richtungen
+4. **Push**: Ein Screen schiebt den anderen aus dem Weg
+5. **Move In/Out**: Elemente bewegen sich in den/aus dem Bildschirm
+6. **Smart Animate**: Figma animiert automatisch Elemente, die in beiden Frames vorhanden sind
+
+Du kannst auch die Dauer und Beschleunigungskurve des Übergangs anpassen.
+
+## Fortgeschrittenes Prototyping
+
+### Komponentenstatus und Varianten
+
+Für einfache Zustandsänderungen innerhalb eines Screens:
+
+1. Erstelle Komponenten-Varianten für verschiedene Zustände (z.B. Button: Normal, Hover, Pressed)
+2. Im Prototyping-Modus, setze die Interaktion auf "Change to"
+3. Wähle die Variante aus, zu der gewechselt werden soll
+
+### Overlay-Screens
+
+Für Modals, Tooltips oder Dropdown-Menüs:
+
+1. Erstelle einen separaten Frame für das Overlay
+2. Erstelle eine Verbindung zu diesem Frame
+3. Setze die Präsentationsart auf "Overlay"
+4. Definiere die Position (Centered, Manuell, etc.)
+5. Optional: Setze einen Hintergrund-Dimmer und Schließ-Verhalten
+
+### Scrolling-Verhalten
+
+Für lange Inhalte oder horizontales Scrollen:
+
+1. Erstelle einen Frame, der größer ist als der Viewport
+2. Im Prototyping-Panel, setze das Overflow-Verhalten auf "Vertical Scrolling", "Horizontal Scrolling" oder "Both"
+
+### Fixierte Elemente
+
+Für Header, Footer oder Navigation, die beim Scrollen sichtbar bleiben:
+
+1. Wähle das Element, das fixiert bleiben soll
+2. Im Prototyping-Panel, aktiviere "Fix position when scrolling"
+3. Wähle, ob das Element oben, unten, links oder rechts fixiert sein soll
+
+## Smart Animate: Fortgeschrittene Techniken
+
+Smart Animate ist eine der mächtigsten Funktionen in Figma's Prototyping-Toolset:
+
+### Wie Smart Animate funktioniert
+
+1. Figma identifiziert Elemente mit gleicher ID in Start- und Ziel-Frame
+2. Es animiert automatisch Änderungen in Position, Größe, Rotation, Farbe, etc.
+3. Elemente, die nur in einem Frame existieren, werden ein- oder ausgeblendet
+
+### Smart Animate effektiv nutzen
+
+Für optimale Smart Animate-Ergebnisse:
+
+1. **Gleiche Strukturen**: Behalte die gleiche Ebenenstruktur und -benennung bei
+2. **Komponenten verwenden**: Komponenten helfen Figma, Elemente zu identifizieren
+3. **Kleinschrittigkeit**: Teile komplexe Animationen in mehrere kleine auf
+
+### Beispiele für Smart Animate
+
+- **Expandierende Cards**: Eine Card, die sich in einen Detailbildschirm verwandelt
+- **Menü-Transitionen**: Animierte Übergänge zwischen Menüzuständen
+- **Micro-Animationen**: Kleine Bewegungen wie Button-Feedback oder Icon-Transformationen
+
+## Komplexe Interaktionen
+
+### Bedingte Navigation
+
+Für komplexere Flows mit Verzweigungen:
+
+1. Wähle ein Element aus
+2. Erstelle mehrere Verbindungen zu verschiedenen Frames
+3. Definiere Bedingungen für jede Verbindung
+4. Benutze "While hovering", "While pressing" oder andere Bedingungen
+
+### Prototyping mit Variablen
+
+Seit neueren Figma-Versionen kannst du mit Variablen arbeiten:
+
+1. Erstelle eine Variable (z.B. "isLoggedIn")
+2. Setze Werte für diese Variable in verschiedenen Interaktionen
+3. Verwende diese Variablen für bedingte Navigation oder Anzeige
+
+Dieses Feature ermöglicht fortgeschrittene Prototypen mit "Memory"-Funktionalität.
+
+## Praktische Übungen
+
+Lass uns das Gelernte mit einigen praktischen Übungen festigen:
+
+### Übung 1: Login-Flow
+
+1. Erstelle einen Login-Screen mit Formularfeldern und einem Submit-Button
+2. Erstelle einen Success-Screen und einen Error-Screen
+3. Verbinde den Submit-Button mit beiden Screens, um verschiedene Pfade zu simulieren
+4. Verwende Smart Animate für einen flüssigen Übergang
+
+### Übung 2: Interaktive Navigation
+
+1. Erstelle eine Navigationsleiste mit mehreren Tabs
+2. Verbinde jeden Tab mit dem entsprechenden Content-Screen
+3. Verwende Smart Animate, um den aktiven Tab-Indikator zu animieren
+4. Stelle sicher, dass der aktive Tab hervorgehoben bleibt
+
+### Übung 3: Micro-Interaktionen
+
+1. Erstelle eine Komponente mit verschiedenen Varianten (z.B. ein Like-Button)
+2. Implementiere einen Klick-Zustandswechsel zwischen den Varianten
+3. Füge eine Animation hinzu, wenn der Button gedrückt wird
+4. Experimentiere mit verschiedenen Timing-Einstellungen
+
+## Prototypen testen und teilen
+
+### Präsentationsmodus
+
+Um deinen Prototyp zu testen:
+
+1. Klicke auf den "Present"-Button in der oberen rechten Ecke
+2. Der Prototyp öffnet sich im Vollbildmodus
+3. Interagiere mit dem Prototyp, um den Flow zu testen
+4. Drücke Escape, um zum Editor zurückzukehren
+
+### Device Preview
+
+Für mobile Designs:
+
+1. Öffne den Präsentationsmodus
+2. Wähle ein Gerät aus dem Dropdown-Menü
+3. Der Prototyp wird in einer Gerätevorschau angezeigt
+
+### Prototypen teilen
+
+Um deinen Prototyp mit anderen zu teilen:
+
+1. Klicke auf den "Share"-Button in der oberen rechten Ecke
+2. Erstelle einen Link zum Prototyp
+3. Definiere Berechtigungen (Viewer, Editor, etc.)
+4. Optional: Aktiviere die Kommentarfunktion für Feedback
+
+## Integration in den Design-to-Development-Workflow
+
+### Handoff-Dokumentation
+
+Für eine effiziente Übergabe an Entwickler:
+
+1. Erstelle klare Interaktionsspezifikationen
+2. Dokumentiere Übergänge und Timing
+3. Beschreibe bedingte Logik und Edge Cases
+4. Verwende Kommentare, um spezifische Details hervorzuheben
+
+### Vorschau für Entwickler
+
+Entwickler können den Prototyp nutzen, um:
+
+1. CSS-Übergänge und -Animationen besser zu verstehen
+2. Interaktionslogik zu visualisieren
+3. Genaue Timing-Werte zu extrahieren
+4. Edge Cases und Fehlerzustände zu erkennen
+
+## Best Practices für Prototyping
+
+- **Start einfach**: Beginne mit grundlegenden Flows, bevor du komplexe Animationen hinzufügst
+- **Realistische Inhalte**: Verwende realistische Texte und Bilder für aussagekräftigere Tests
+- **Konsistente Übergänge**: Halte ähnliche Übergänge im gesamten Prototyp konsistent
+- **Performance beachten**: Zu viele komplexe Animationen können zu Performance-Problemen führen
+- **Testen mit Nutzern**: Sammle Feedback von realen Nutzern, nicht nur vom Design-Team
+- **Iterieren**: Verbessere deinen Prototyp basierend auf Feedback und Erkenntnissen
+
+## Für die nächste Lektion
+
+In der nächsten und letzten Lektion unseres Kurses werden wir uns mit **Design-to-Development Handoff** beschäftigen. Du wirst lernen, wie du deine Designs effektiv an Entwickler übergibst und wie du Figma für eine nahtlose Zusammenarbeit zwischen Design und Entwicklung nutzt.
+
+Bis dahin empfehle ich dir, mit Prototyping zu experimentieren. Erstelle einen kompletten User Flow für eine App-Funktion und teste ihn mit Freunden oder Kollegen.
+
+## Hilfreiche Ressourcen
+
+- [Figma Prototyping Documentation](https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma)
+- [Advanced Prototyping in Figma](https://www.figma.com/blog/advanced-prototyping-in-figma/)
+- [Smart Animate Best Practices](https://www.figma.com/best-practices/creating-and-organizing-variants/smart-animate-between-variants/)
+
+Hast du Fragen zu Prototyping oder Interaktionen? Hinterlasse gerne einen Kommentar unten!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/i18n-astro.md b/apps/bauntown/apps/landing/src/content/tutorials/de/i18n-astro.md
new file mode 100644
index 000000000..b0b360d70
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/i18n-astro.md
@@ -0,0 +1,209 @@
+---
+title: "Mehrsprachige Websites mit Astro"
+description: "Ein umfassender Leitfaden zur Implementierung von i18n in Astro-Projekten."
+pubDate: 2025-03-20
+category: "Branding"
+---
+
+# Mehrsprachige Websites mit Astro
+
+Astro bietet dir verschiedene Möglichkeiten, mehrsprachige (i18n) Websites zu erstellen. In diesem Tutorial lernst du, wie du eine mehrsprachige Website mit Astro aufbauen kannst.
+
+## Übersicht der Ansätze
+
+Es gibt verschiedene Ansätze für die Implementierung von i18n in Astro:
+
+1. **Manuelles Routing** mit `[lang]`-Parametern
+2. **Content Collections** mit sprachspezifischen Unterordnern
+3. **i18n-Integrationen** wie `astro-i18n-aut`
+
+Wir werden jeden dieser Ansätze im Detail betrachten.
+
+## Manuelles Routing
+
+Der einfachste Ansatz verwendet dateibasiertes Routing mit dynamischen Parametern:
+
+```
+src/pages/[lang]/index.astro
+src/pages/[lang]/about.astro
+src/pages/index.astro (Standardsprache)
+src/pages/about.astro (Standardsprache)
+```
+
+In deinen Komponenten kannst du dann:
+
+```astro
+---
+// src/pages/[lang]/index.astro
+const { lang } = Astro.params;
+---
+
+
+
+
+```
+
+## Übersetzungen verwalten
+
+Erstelle eine zentrale Datei für Übersetzungen:
+
+```typescript
+// src/i18n/ui.ts
+export const languages = {
+ de: 'Deutsch',
+ en: 'English',
+};
+
+export const defaultLang = 'de';
+
+export const ui = {
+ de: {
+ 'nav.home': 'Startseite',
+ 'nav.about': 'Über uns',
+ },
+ en: {
+ 'nav.home': 'Home',
+ 'nav.about': 'About',
+ },
+};
+```
+
+Und Hilfsfunktionen:
+
+```typescript
+// src/utils/i18n.ts
+import { ui, defaultLang } from '../i18n/ui';
+
+export function getLangFromUrl(url: URL) {
+ const [, lang] = url.pathname.split('/');
+ if (lang in ui) return lang as keyof typeof ui;
+ return defaultLang;
+}
+
+export function useTranslations(lang: keyof typeof ui) {
+ return function t(key: keyof typeof ui[typeof defaultLang]) {
+ return ui[lang][key] || ui[defaultLang][key];
+ };
+}
+```
+
+Verwende sie in deinen Komponenten:
+
+```astro
+---
+import { getLangFromUrl, useTranslations } from '../utils/i18n';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+
+```
+
+## Content Collections für Mehrsprachigkeit
+
+Du kannst Content Collections verwenden, um übersetzten Inhalt zu verwalten:
+
+```
+src/content/blog/de/post-1.md
+src/content/blog/en/post-1.md
+```
+
+Dann greife spezifisch auf die Inhalte zu:
+
+```astro
+---
+import { getCollection } from 'astro:content';
+
+// Get current language from URL
+const { lang } = Astro.params;
+
+// Get posts in the current language
+const posts = await getCollection('blog', ({ id }) => {
+ return id.startsWith(`${lang}/`);
+});
+---
+
+
+```
+
+## Zusammenfassung
+
+Astro bietet dir flexible Optionen für die Erstellung mehrsprachiger Websites. Ob du einen manuellen Ansatz bevorzugst oder eine spezialisierte Integration nutzt, hängt von deinen spezifischen Anforderungen ab.
+
+Mit einer klaren Struktur für Übersetzungen und den richtigen Hilfsfunktionen kannst du eine nahtlose mehrsprachige Benutzererfahrung schaffen.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/de/vibecoding-basics.md b/apps/bauntown/apps/landing/src/content/tutorials/de/vibecoding-basics.md
new file mode 100644
index 000000000..34ccb01b2
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/de/vibecoding-basics.md
@@ -0,0 +1,169 @@
+---
+title: "Vibecoding: Die Kunst des intuitiven Programmierens"
+description: "Entdecke, wie du mit Vibecoding deine Programmierfähigkeiten auf ein neues Level bringst und intuitivere, kreativere Code-Lösungen entwickelst."
+pubDate: 2025-03-25
+category: "Vibecoding"
+featured: true
+image: "/images/tutorials/nobackground/vibecode-bauntown-tutorial.png"
+author: "Max Müller"
+---
+
+# Vibecoding: Die Kunst des intuitiven Programmierens
+
+Willkommen zu unserem Vibecoding-Tutorial! In dieser neuen Disziplin des Programmierens geht es darum, den Flow zu finden und intuitive Lösungen zu entwickeln, die über traditionelle Programmierparadigmen hinausgehen.
+
+## Was ist Vibecoding?
+
+Vibecoding ist ein Ansatz zum Programmieren, der technische Präzision mit kreativer Intuition verbindet. Anstatt nur nach standardisierten Mustern zu arbeiten, ermutigt Vibecoding Entwickler dazu, ihre Intuition zu nutzen und mit Code zu "fühlen".
+
+Die Grundprinzipien sind:
+
+1. **Flow über Struktur**: Finde einen mentalen Zustand, in dem der Code natürlich fließt
+2. **Intuition über Regeln**: Vertraue deinem Instinkt bei Designentscheidungen
+3. **Expressivität über Konvention**: Drücke deine einzigartige Perspektive durch deinen Code aus
+4. **Harmonie über Effizienz**: Strebe nach Code, der nicht nur funktioniert, sondern sich auch harmonisch anfühlt
+
+## Warum Vibecoding?
+
+In einer Zeit, in der Programmieren zunehmend standardisiert wird und KI-Tools immer mehr Routine-Coding übernehmen, wird die menschliche Intuition zum entscheidenden Differenzierungsmerkmal. Vibecoding stärkt genau diese menschliche Komponente.
+
+Einige Vorteile sind:
+
+- **Kreativere Lösungsansätze** für komplexe Probleme
+- **Höhere Zufriedenheit** beim Programmieren
+- **Persönlicherer Code**, der deine Denkweise widerspiegelt
+- **Bessere Zusammenarbeit** durch tieferes Verständnis der eigenen und fremden Code-Intentionen
+
+## Einstieg ins Vibecoding
+
+### 1. Den Flow-Zustand erreichen
+
+Der erste Schritt im Vibecoding ist, einen mentalen Zustand zu erreichen, in dem du vollständig im Programmieren aufgehst. Hier einige Techniken:
+
+```javascript
+// Traditionelles Coding
+function processData(data) {
+ const results = [];
+ for (let i = 0; i < data.length; i++) {
+ if (data[i].status === 'active') {
+ results.push(data[i].value * 2);
+ }
+ }
+ return results;
+}
+
+// Vibecoding Ansatz
+function enhanceActiveValues(data) {
+ return data
+ .filter(item => item.isActive())
+ .map(item => item.amplify());
+}
+```
+
+Die zweite Version ist nicht nur kürzer, sondern drückt auch klarer die Intention aus - wir verstärken aktive Werte, anstatt sie nur zu verarbeiten.
+
+### 2. Auf deine Intuition hören
+
+Vibecoding ermutigt dich, auf dein Bauchgefühl zu hören. Wenn eine Lösung "richtig" erscheint, obwohl sie nicht dem Standard entspricht, erkunde sie:
+
+```python
+# Standard-Ansatz
+def validate_user_input(input_string):
+ if len(input_string) < 3:
+ return False
+ if not input_string[0].isalpha():
+ return False
+ if not all(c.isalnum() or c == '_' for c in input_string):
+ return False
+ return True
+
+# Intuitiver Vibecoding-Ansatz
+def feels_like_valid_username(name):
+ is_substantial = len(name) >= 3
+ starts_properly = name[0].isalpha()
+ has_acceptable_chars = all(c.isalnum() or c == '_' for c in name)
+
+ return is_substantial and starts_properly and has_acceptable_chars
+```
+
+Die Funktion `feels_like_valid_username` drückt nicht nur aus, was sie tut, sondern auch, wie du als Entwickler über die Validierung denkst.
+
+### 3. Deinen Code-Rhythmus finden
+
+Beim Vibecoding geht es nicht nur darum, WAS dein Code tut, sondern auch WIE er es tut. Achte auf den Rhythmus und die Ästhetik:
+
+```javascript
+// Funktionaler, aber rhythmischer Ansatz
+const processTransactions = transactions =>
+ transactions
+ .filter(tx => tx.isComplete)
+ .sort((a, b) => b.date - a.date)
+ .map(tx => ({
+ id: tx.id,
+ amount: formatCurrency(tx.amount),
+ date: formatDate(tx.date)
+ }))
+ .slice(0, 10);
+```
+
+Dieser Code hat einen natürlichen Fluss - filtern, sortieren, transformieren, begrenzen - der sich gut anfühlt und leicht zu verstehen ist.
+
+## Übungen für Vibecoding
+
+1. **Code-Meditation**: Verbring 5 Minuten damit, einen bestehenden Code zu betrachten, ohne ihn zu ändern. Spüre seinen Rhythmus und seine Absicht.
+
+2. **Refactoring nach Gefühl**: Nimm einen funktionierenden Code und refaktoriere ihn nicht nach Best Practices, sondern nach dem, was sich für dich richtig anfühlt.
+
+3. **Pair-Vibecoding**: Programmiere mit einem Partner, wobei ihr abwechselnd Code schreibt und nur durch nonverbale Hinweise kommuniziert.
+
+## Fortgeschrittene Vibecoding-Konzepte
+
+### Code-Harmonie
+
+Bei fortgeschrittenem Vibecoding streben wir nach Harmonie im Code - ein Zustand, in dem alle Teile natürlich zusammenpassen:
+
+```typescript
+// Ein harmonisches Interface-Design
+interface Resonance {
+ source: T;
+ amplify(factor: number): Resonance;
+ combine(other: Resonance): Resonance;
+ release(): T;
+}
+
+class SoundResonance implements Resonance {
+ constructor(private buffer: AudioBuffer) {}
+
+ amplify(factor: number): Resonance {
+ // Implementation...
+ return this;
+ }
+
+ combine(other: Resonance): Resonance {
+ // Implementation...
+ return this;
+ }
+
+ release(): AudioBuffer {
+ return this.buffer;
+ }
+}
+```
+
+### Code-Intuition schulen
+
+Je mehr du mit Vibecoding praktizierst, desto stärker wird deine Code-Intuition. Hier einige Übungen:
+
+1. **Code-Blindfolding**: Schreibe eine Funktion ohne sie zu testen, nur basierend auf deiner Intuition, wie sie funktionieren sollte.
+
+2. **Intuitive Namensgebung**: Benenne Variablen und Funktionen nach deinem ersten Gefühl, nicht nach Konventionen.
+
+3. **Codeless Programming**: Entwirf eine Lösung vollständig im Kopf, bevor du auch nur eine Zeile Code schreibst.
+
+## Abschluss
+
+Vibecoding ist mehr als nur eine Technik - es ist ein Paradigmenwechsel in der Art, wie wir über Programmieren denken. Indem wir unsere Intuition und Kreativität in den Vordergrund stellen, können wir Code erschaffen, der nicht nur funktional, sondern auch ausdrucksstark und persönlich ist.
+
+In einer Welt, in der immer mehr Programmierung automatisiert wird, ist Vibecoding eine Möglichkeit, die menschliche Komponente zu betonen und unsere einzigartige Perspektive einzubringen.
+
+Bereit, mit dem Vibecoding zu beginnen? Öffne deinen Editor, schließe deine Augen für einen Moment, und lass deinen Code fließen!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/en/astro-first-steps.md b/apps/bauntown/apps/landing/src/content/tutorials/en/astro-first-steps.md
new file mode 100644
index 000000000..4ef0c650e
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/en/astro-first-steps.md
@@ -0,0 +1,136 @@
+---
+title: "Getting Started with Astro"
+description: "An introduction to Astro and how to start your first project."
+pubDate: 2025-03-15
+category: "Business"
+featured: true
+image: "/images/tutorials/nobackground/website-with-astro-bauntown-tutorial.png"
+author: "Till Schneider"
+---
+
+# Getting Started with Astro
+
+Astro is a modern web framework for building fast, content-focused websites. In this tutorial, you'll learn the basics of Astro and how to start your first project.
+
+## What is Astro?
+
+Astro is an **all-in-one web framework** focused on content and performance. It allows you to build websites with less JavaScript while maintaining a reactive user interface.
+
+The main benefits of Astro are:
+
+- **Content-focused**: Optimized for content-rich websites like blogs, e-commerce, and documentation
+- **Server-first**: Shifts as much work as possible from the browser to the server
+- **Zero-JS by default**: No JavaScript is sent to the browser by default
+- **Edge-ready**: Deploy anywhere - including at the edge
+- **Customizable**: Tailwind, MDX, and over 100 integrations to choose from
+- **UI-agnostic**: Supports React, Preact, Svelte, Vue, Solid, Lit, and more
+
+## Installing Astro
+
+You can easily create a new Astro project using npm:
+
+```bash
+# Create a new project with npm
+npm create astro@latest
+```
+
+The Astro setup wizard will guide you through the steps to set up your new project. You can choose a template, add TypeScript, and more.
+
+## Project Structure
+
+A typical Astro project looks like this:
+
+```
+/
+├── public/
+│ └── favicon.svg
+├── src/
+│ ├── components/
+│ │ └── Card.astro
+│ ├── layouts/
+│ │ └── Layout.astro
+│ └── pages/
+│ └── index.astro
+└── package.json
+```
+
+The key directories are:
+
+- `src/pages/`: Contains your pages. Each `.astro` file becomes a route on your website.
+- `src/components/`: Contains reusable UI components.
+- `src/layouts/`: Contains layouts for your pages.
+- `public/`: Contains static assets like images and fonts.
+
+## Astro Components
+
+Astro components are the building blocks of an Astro website. They use an HTML-like syntax with JSX expressions:
+
+```astro
+---
+// The Component Script (JS/TS)
+const greeting = "Hello";
+const name = "Astro";
+---
+
+
+
+
{greeting}, {name}!
+
Welcome to Astro!
+
+
+
+```
+
+## Content Collections
+
+Astro v2.0+ introduced Content Collections, which provide a structured way to work with Markdown, MDX, and other content formats:
+
+```typescript
+// src/content/config.ts
+import { defineCollection, z } from 'astro:content';
+
+const blogCollection = defineCollection({
+ schema: z.object({
+ title: z.string(),
+ pubDate: z.date(),
+ tags: z.array(z.string()),
+ }),
+});
+
+export const collections = {
+ 'blog': blogCollection,
+};
+```
+
+## Routing and Navigation
+
+Astro uses a file-based routing system. All `.astro`, `.md`, or `.mdx` files in your `src/pages/` directory automatically become pages on your website:
+
+- `src/pages/index.astro` → `yourdomain.com/`
+- `src/pages/about.astro` → `yourdomain.com/about`
+- `src/pages/posts/post-1.md` → `yourdomain.com/posts/post-1`
+
+## Multilingual Websites
+
+Astro offers various ways to create multilingual websites:
+
+1. Using routing parameters: `src/pages/[lang]/about.astro`
+2. Using content collections and filtering by language
+3. Using integrations like `astro-i18n-aut`
+
+## Next Steps
+
+After learning the basics, you might want to:
+
+1. Create a new component
+2. Add a new page
+3. Work with content collections
+4. Set up a blog or portfolio
+5. Add an integration like React or Tailwind CSS
+
+Happy developing with Astro!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/en/content-collections.md b/apps/bauntown/apps/landing/src/content/tutorials/en/content-collections.md
new file mode 100644
index 000000000..520281ba7
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/en/content-collections.md
@@ -0,0 +1,139 @@
+---
+title: "Content Collections in Astro"
+description: "How to use Content Collections for structured content in Astro."
+pubDate: 2025-03-18
+category: "Marketing"
+---
+
+# Content Collections in Astro
+
+Content Collections are a powerful feature in Astro that allows you to organize and validate Markdown, MDX, and other content formats. In this tutorial, you'll learn how to create and use Content Collections.
+
+## What are Content Collections?
+
+Content Collections provide you with:
+
+- A structured system for organizing your content
+- Type safety and validation with schemas
+- Simplified access to your content through an API
+
+## Setting up Content Collections
+
+Here's how to set up Content Collections:
+
+1. Create a `content/` directory in your `src/` folder
+2. Create subdirectories for your collections (e.g. `src/content/blog/`)
+3. Create a `src/content/config.ts` file to define your collections
+
+Here's an example configuration file:
+
+```typescript
+// src/content/config.ts
+import { defineCollection, z } from 'astro:content';
+
+const blogCollection = defineCollection({
+ type: 'content', // 'content' or 'data'
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ tags: z.array(z.string()).default(['general']),
+ image: z.string().optional(),
+ }),
+});
+
+export const collections = {
+ 'blog': blogCollection,
+};
+```
+
+## Adding Content
+
+After setup, you can add Markdown or MDX files to your collections:
+
+```markdown
+---
+title: "My First Post"
+description: "This is my first blog post using Astro Content Collections."
+pubDate: 2025-03-10
+tags: ["astro", "markdown"]
+---
+
+# My First Post
+
+Here's the content of my first post.
+```
+
+## Accessing Collections
+
+You can access your collections using the `getCollection` or `getEntry` functions:
+
+```astro
+---
+import { getCollection, getEntry } from 'astro:content';
+
+// Get all entries in a collection
+const allBlogPosts = await getCollection('blog');
+
+// Filter by specific criteria
+const featuredPosts = await getCollection('blog', ({ data }) => {
+ return data.tags.includes('featured');
+});
+
+// Get a specific entry
+const specificPost = await getEntry('blog', 'post-slug');
+---
+
+
+```
+
+## Rendering Content
+
+To render the content of an entry, you first need to call the `render()` method:
+
+```astro
+---
+import { getEntry } from 'astro:content';
+import BlogLayout from '../layouts/BlogLayout.astro';
+
+// Get entry from URL parameter
+const { slug } = Astro.params;
+const entry = await getEntry('blog', slug);
+
+// Render the content
+const { Content } = await entry.render();
+---
+
+
+
+
+```
+
+## Type Safety
+
+Content Collections provide full TypeScript integration, giving you access to types for your collections:
+
+```typescript
+import type { CollectionEntry } from 'astro:content';
+
+// Types for your collections
+type BlogPost = CollectionEntry<'blog'>;
+
+// Component prop type
+interface Props {
+ post: BlogPost;
+}
+```
+
+## Summary
+
+Content Collections provide a powerful and type-safe way to work with Markdown and other content formats in Astro. They help you organize, validate, and efficiently use your content.
+
+With Content Collections, you can easily create and manage complex, content-rich websites like blogs, documentation, and portfolios.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/en/figma-basics.mdx b/apps/bauntown/apps/landing/src/content/tutorials/en/figma-basics.mdx
new file mode 100644
index 000000000..16bb3d04d
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/en/figma-basics.mdx
@@ -0,0 +1,111 @@
+---
+title: "Figma Basics - Course Overview"
+description: "A comprehensive course on Figma fundamentals, from getting started to design handoff for developers."
+pubDate: 2025-03-20
+category: "UI & UX"
+featured: true
+image: "/images/tutorials/bauntown-figma-basics.png"
+author: "Anna Schmidt"
+course: "figma-basics"
+courseName: "Figma Basics"
+lessonNumber: 0
+---
+
+import YouTubeVideo from '../../../components/YouTubeVideo.astro';
+import FigmaEmbed from '../../../components/FigmaEmbed.astro';
+
+# Figma Basics - Course Overview
+
+Welcome to our comprehensive Figma fundamentals course! In this course, you'll learn everything important about Figma - from first steps to effective collaboration with developers.
+
+
+
+## What to expect in this course
+
+This course consists of six sequential lessons that provide you with a thorough insight into working with Figma. Whether you're a designer, developer, or simply curious - this course is designed to help you harness the full power of Figma.
+
+
+
+## Course Content
+
+### [Lesson 1: Introduction to Figma](/en/tutorials/figma-intro)
+
+In this first lesson, you'll learn the basics of Figma:
+- What is Figma and why is it so popular?
+- Understanding the Figma interface
+- First steps and basic tools
+- Figma terminology and concepts
+- Creating your first Figma design
+
+### [Lesson 2: Frames and Layout in Figma](/en/tutorials/figma-frames)
+
+In the second lesson, we dive deeper into structuring designs:
+- What are frames and how to work with them
+- The grid system in Figma
+- Constraints for responsive elements
+- Layout basics and organization
+- Practical exercises for structuring designs
+
+### [Lesson 3: Components and Variants](/en/tutorials/figma-components)
+
+The third lesson shows you how to create reusable design elements:
+- Creating and managing components
+- Working with instances and using overrides
+- Variants for different states and versions
+- Building a consistent design system
+- Practical application with UI components
+
+### [Lesson 4: Auto Layout and Responsive Design](/en/tutorials/figma-autolayout)
+
+In the fourth lesson, you'll learn how to create flexible designs:
+- Auto Layout basics and advanced techniques
+- Creating responsive designs with Auto Layout
+- Nesting Auto Layouts for complex UIs
+- Understanding alignment and distribution
+- Responsive design for different devices
+
+### [Lesson 5: Prototyping and Interactions](/en/tutorials/figma-prototyping)
+
+The fifth lesson shows you how to bring your designs to life:
+- Basics of prototyping in Figma
+- Creating interactions and transitions
+- Smart Animate for fluid animations
+- Complex interactions and conditional navigation
+- Testing and sharing prototypes
+
+### [Lesson 6: Design-to-Development Handoff](/en/tutorials/figma-handoff)
+
+In the final lesson, you'll learn how to effectively hand off your designs to developers:
+- The Inspect mode in Figma
+- Preparing designs for handoff
+- Documenting design tokens and design systems
+- Effective communication between design and development
+- Best practices for a smooth handoff
+
+## Who is this course for?
+
+This course is ideal for:
+
+- **Designers** who want to improve their Figma skills
+- **Developers** who want to better understand design processes
+- **Product managers** who want to communicate more effectively with design and development teams
+- **Beginners** who want to learn the basics of UI/UX design
+- **Teams** who want to optimize their design-to-development workflows
+
+## Prerequisites
+
+No special prior knowledge is required for this course. A basic understanding of design concepts is helpful but not necessary. You only need:
+
+- A Figma account (the free version is sufficient for this course)
+- A modern web browser (Chrome, Firefox, Safari, or Edge)
+- Curiosity and willingness to learn!
+
+## About the Author
+
+Anna Schmidt is an experienced UI/UX designer with over 8 years of professional experience. She has collaborated with numerous teams and has been using Figma since its early beta phases. Her passion is explaining complex design concepts in an understandable way and improving collaboration between designers and developers.
+
+## Let's Get Started!
+
+Ready to begin your Figma journey? Start with [Lesson 1: Introduction to Figma](/en/tutorials/figma-intro) and work your way through the lessons. Each lesson builds on the previous one, so we recommend completing them in the order provided.
+
+Enjoy learning!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/en/i18n-astro.md b/apps/bauntown/apps/landing/src/content/tutorials/en/i18n-astro.md
new file mode 100644
index 000000000..d5ede0f87
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/en/i18n-astro.md
@@ -0,0 +1,209 @@
+---
+title: "Multilingual Websites with Astro"
+description: "A comprehensive guide to implementing i18n in Astro projects."
+pubDate: 2025-03-20
+category: "Branding"
+---
+
+# Multilingual Websites with Astro
+
+Astro offers several approaches for creating multilingual (i18n) websites. In this tutorial, you'll learn how to build a multilingual website with Astro.
+
+## Overview of Approaches
+
+There are different approaches to implementing i18n in Astro:
+
+1. **Manual routing** with `[lang]` parameters
+2. **Content Collections** with language-specific subdirectories
+3. **i18n integrations** like `astro-i18n-aut`
+
+We'll explore each of these approaches in detail.
+
+## Manual Routing
+
+The simplest approach uses file-based routing with dynamic parameters:
+
+```
+src/pages/[lang]/index.astro
+src/pages/[lang]/about.astro
+src/pages/index.astro (default language)
+src/pages/about.astro (default language)
+```
+
+In your components, you can then:
+
+```astro
+---
+// src/pages/[lang]/index.astro
+const { lang } = Astro.params;
+---
+
+
+
+
+```
+
+## Managing Translations
+
+Create a central file for translations:
+
+```typescript
+// src/i18n/ui.ts
+export const languages = {
+ en: 'English',
+ de: 'Deutsch',
+};
+
+export const defaultLang = 'en';
+
+export const ui = {
+ en: {
+ 'nav.home': 'Home',
+ 'nav.about': 'About',
+ },
+ de: {
+ 'nav.home': 'Startseite',
+ 'nav.about': 'Über uns',
+ },
+};
+```
+
+And helper functions:
+
+```typescript
+// src/utils/i18n.ts
+import { ui, defaultLang } from '../i18n/ui';
+
+export function getLangFromUrl(url: URL) {
+ const [, lang] = url.pathname.split('/');
+ if (lang in ui) return lang as keyof typeof ui;
+ return defaultLang;
+}
+
+export function useTranslations(lang: keyof typeof ui) {
+ return function t(key: keyof typeof ui[typeof defaultLang]) {
+ return ui[lang][key] || ui[defaultLang][key];
+ };
+}
+```
+
+Use them in your components:
+
+```astro
+---
+import { getLangFromUrl, useTranslations } from '../utils/i18n';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+
+```
+
+## Content Collections for Multilingual Content
+
+You can use Content Collections to manage translated content:
+
+```
+src/content/blog/en/post-1.md
+src/content/blog/de/post-1.md
+```
+
+Then access content specifically:
+
+```astro
+---
+import { getCollection } from 'astro:content';
+
+// Get current language from URL
+const { lang } = Astro.params;
+
+// Get posts in the current language
+const posts = await getCollection('blog', ({ id }) => {
+ return id.startsWith(`${lang}/`);
+});
+---
+
+
+```
+
+## Summary
+
+Astro provides flexible options for creating multilingual websites. Whether you prefer a manual approach or use a specialized integration depends on your specific requirements.
+
+With a clear structure for translations and the right helper functions, you can create a seamless multilingual user experience.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/en/vibecoding-basics.md b/apps/bauntown/apps/landing/src/content/tutorials/en/vibecoding-basics.md
new file mode 100644
index 000000000..f43dc84f2
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/en/vibecoding-basics.md
@@ -0,0 +1,169 @@
+---
+title: "Vibecoding: The Art of Intuitive Programming"
+description: "Discover how to elevate your programming skills to a new level with Vibecoding and develop more intuitive, creative code solutions."
+pubDate: 2025-03-25
+category: "Vibecoding"
+featured: true
+image: "/images/tutorials/nobackground/vibecode-bauntown-tutorial.png"
+author: "Max Müller"
+---
+
+# Vibecoding: The Art of Intuitive Programming
+
+Welcome to our Vibecoding tutorial! This new programming discipline is all about finding your flow and developing intuitive solutions that go beyond traditional programming paradigms.
+
+## What is Vibecoding?
+
+Vibecoding is an approach to programming that combines technical precision with creative intuition. Rather than working solely with standardized patterns, Vibecoding encourages developers to use their intuition and "feel" with code.
+
+The core principles are:
+
+1. **Flow over Structure**: Find a mental state where code naturally flows
+2. **Intuition over Rules**: Trust your instinct when making design decisions
+3. **Expressiveness over Convention**: Express your unique perspective through your code
+4. **Harmony over Efficiency**: Strive for code that not only works but feels harmonious
+
+## Why Vibecoding?
+
+In an era where programming is increasingly standardized and AI tools take over more routine coding tasks, human intuition becomes the critical differentiator. Vibecoding strengthens precisely this human component.
+
+Some benefits include:
+
+- **More creative approaches** to complex problems
+- **Higher satisfaction** while programming
+- **More personal code** that reflects your way of thinking
+- **Better collaboration** through deeper understanding of your own and others' code intentions
+
+## Getting Started with Vibecoding
+
+### 1. Achieving the Flow State
+
+The first step in Vibecoding is to reach a mental state where you are completely immersed in programming. Here are some techniques:
+
+```javascript
+// Traditional coding
+function processData(data) {
+ const results = [];
+ for (let i = 0; i < data.length; i++) {
+ if (data[i].status === 'active') {
+ results.push(data[i].value * 2);
+ }
+ }
+ return results;
+}
+
+// Vibecoding approach
+function enhanceActiveValues(data) {
+ return data
+ .filter(item => item.isActive())
+ .map(item => item.amplify());
+}
+```
+
+The second version isn't just shorter—it more clearly expresses the intention. We're enhancing active values, not just processing them.
+
+### 2. Listening to Your Intuition
+
+Vibecoding encourages you to listen to your gut feeling. If a solution "feels right" even if it doesn't conform to standards, explore it:
+
+```python
+# Standard approach
+def validate_user_input(input_string):
+ if len(input_string) < 3:
+ return False
+ if not input_string[0].isalpha():
+ return False
+ if not all(c.isalnum() or c == '_' for c in input_string):
+ return False
+ return True
+
+# Intuitive Vibecoding approach
+def feels_like_valid_username(name):
+ is_substantial = len(name) >= 3
+ starts_properly = name[0].isalpha()
+ has_acceptable_chars = all(c.isalnum() or c == '_' for c in name)
+
+ return is_substantial and starts_properly and has_acceptable_chars
+```
+
+The function `feels_like_valid_username` not only expresses what it does but also how you as a developer think about validation.
+
+### 3. Finding Your Code Rhythm
+
+Vibecoding isn't just about WHAT your code does, but HOW it does it. Pay attention to rhythm and aesthetics:
+
+```javascript
+// Functional but rhythmic approach
+const processTransactions = transactions =>
+ transactions
+ .filter(tx => tx.isComplete)
+ .sort((a, b) => b.date - a.date)
+ .map(tx => ({
+ id: tx.id,
+ amount: formatCurrency(tx.amount),
+ date: formatDate(tx.date)
+ }))
+ .slice(0, 10);
+```
+
+This code has a natural flow—filter, sort, transform, limit—that feels good and is easy to understand.
+
+## Exercises for Vibecoding
+
+1. **Code Meditation**: Spend 5 minutes contemplating existing code without changing it. Feel its rhythm and intention.
+
+2. **Refactoring by Feel**: Take working code and refactor it not according to best practices, but according to what feels right to you.
+
+3. **Pair Vibecoding**: Program with a partner, taking turns writing code and communicating only through non-verbal cues.
+
+## Advanced Vibecoding Concepts
+
+### Code Harmony
+
+In advanced Vibecoding, we strive for harmony in code—a state where all parts naturally fit together:
+
+```typescript
+// A harmonious interface design
+interface Resonance {
+ source: T;
+ amplify(factor: number): Resonance;
+ combine(other: Resonance): Resonance;
+ release(): T;
+}
+
+class SoundResonance implements Resonance {
+ constructor(private buffer: AudioBuffer) {}
+
+ amplify(factor: number): Resonance {
+ // Implementation...
+ return this;
+ }
+
+ combine(other: Resonance): Resonance {
+ // Implementation...
+ return this;
+ }
+
+ release(): AudioBuffer {
+ return this.buffer;
+ }
+}
+```
+
+### Training Code Intuition
+
+The more you practice Vibecoding, the stronger your code intuition becomes. Here are some exercises:
+
+1. **Code Blindfolding**: Write a function without testing it, based solely on your intuition of how it should work.
+
+2. **Intuitive Naming**: Name variables and functions based on your first feeling, not according to conventions.
+
+3. **Codeless Programming**: Design a solution entirely in your head before writing a single line of code.
+
+## Conclusion
+
+Vibecoding is more than just a technique—it's a paradigm shift in how we think about programming. By putting our intuition and creativity at the forefront, we can create code that is not only functional but also expressive and personal.
+
+In a world where more and more programming is automated, Vibecoding is a way to emphasize the human component and bring our unique perspective.
+
+Ready to start Vibecoding? Open your editor, close your eyes for a moment, and let your code flow!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/it/astro-first-steps.md b/apps/bauntown/apps/landing/src/content/tutorials/it/astro-first-steps.md
new file mode 100644
index 000000000..5715bfd11
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/it/astro-first-steps.md
@@ -0,0 +1,136 @@
+---
+title: "Primi passi con Astro"
+description: "Un'introduzione ad Astro e come iniziare il tuo primo progetto."
+pubDate: 2025-03-15
+category: "Business"
+featured: true
+image: "/images/tutorials/nobackground/website-with-astro-bauntown-tutorial.png"
+author: "Till Schneider"
+---
+
+# Primi passi con Astro
+
+Astro è un framework web moderno per creare siti web veloci e orientati ai contenuti. In questo tutorial, imparerai le basi di Astro e come iniziare il tuo primo progetto.
+
+## Cos'è Astro?
+
+Astro è un **framework web all-in-one** focalizzato su contenuti e prestazioni. Ti permette di costruire siti web con meno JavaScript mantenendo un'interfaccia utente reattiva.
+
+I principali vantaggi di Astro sono:
+
+- **Orientato ai contenuti**: Ottimizzato per siti web ricchi di contenuti come blog, e-commerce e documentazione
+- **Server-first**: Sposta quanto più lavoro possibile dal browser al server
+- **Zero-JS di default**: Nessun JavaScript viene inviato al browser per impostazione predefinita
+- **Pronto per l'Edge**: Puoi effettuare il deployment ovunque - anche sull'edge
+- **Personalizzabile**: Tailwind, MDX, e oltre 100 integrazioni tra cui scegliere
+- **UI-agnostico**: Supporta React, Preact, Svelte, Vue, Solid, Lit e altro ancora
+
+## Installare Astro
+
+Puoi creare facilmente un nuovo progetto Astro utilizzando npm:
+
+```bash
+# Crea un nuovo progetto con npm
+npm create astro@latest
+```
+
+La procedura guidata di configurazione di Astro ti guiderà attraverso i passi per configurare il tuo nuovo progetto. Puoi scegliere un template, aggiungere TypeScript e altro ancora.
+
+## Struttura del progetto
+
+Un tipico progetto Astro si presenta così:
+
+```
+/
+├── public/
+│ └── favicon.svg
+├── src/
+│ ├── components/
+│ │ └── Card.astro
+│ ├── layouts/
+│ │ └── Layout.astro
+│ └── pages/
+│ └── index.astro
+└── package.json
+```
+
+Le directory chiave sono:
+
+- `src/pages/`: Contiene le tue pagine. Ogni file `.astro` diventa una route sul tuo sito web.
+- `src/components/`: Contiene componenti UI riutilizzabili.
+- `src/layouts/`: Contiene layout per le tue pagine.
+- `public/`: Contiene asset statici come immagini e font.
+
+## Componenti Astro
+
+I componenti Astro sono i blocchi di costruzione di un sito web Astro. Utilizzano una sintassi simile a HTML con espressioni JSX:
+
+```astro
+---
+// Lo Script del Componente (JS/TS)
+const saluto = "Ciao";
+const nome = "Astro";
+---
+
+
+
+
{saluto}, {nome}!
+
Benvenuto in Astro!
+
+
+
+```
+
+## Content Collections
+
+Astro v2.0+ ha introdotto le Content Collections, che forniscono un modo strutturato per lavorare con Markdown, MDX e altri formati di contenuto:
+
+```typescript
+// src/content/config.ts
+import { defineCollection, z } from 'astro:content';
+
+const blogCollection = defineCollection({
+ schema: z.object({
+ title: z.string(),
+ pubDate: z.date(),
+ tags: z.array(z.string()),
+ }),
+});
+
+export const collections = {
+ 'blog': blogCollection,
+};
+```
+
+## Routing e Navigazione
+
+Astro utilizza un sistema di routing basato sui file. Tutti i file `.astro`, `.md` o `.mdx` nella tua directory `src/pages/` diventano automaticamente pagine sul tuo sito web:
+
+- `src/pages/index.astro` → `yourdomain.com/`
+- `src/pages/about.astro` → `yourdomain.com/about`
+- `src/pages/posts/post-1.md` → `yourdomain.com/posts/post-1`
+
+## Siti Web Multilingua
+
+Astro offre vari modi per creare siti web multilingua:
+
+1. Utilizzando parametri di routing: `src/pages/[lang]/about.astro`
+2. Utilizzando Content Collections e filtrando per lingua
+3. Utilizzando integrazioni come `astro-i18n-aut`
+
+## Prossimi passi
+
+Dopo aver imparato le basi, potresti voler:
+
+1. Creare un nuovo componente
+2. Aggiungere una nuova pagina
+3. Lavorare con Content Collections
+4. Configurare un blog o un portfolio
+5. Aggiungere un'integrazione come React o Tailwind CSS
+
+Buon sviluppo con Astro!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/it/content-collections.md b/apps/bauntown/apps/landing/src/content/tutorials/it/content-collections.md
new file mode 100644
index 000000000..a1efd62df
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/it/content-collections.md
@@ -0,0 +1,139 @@
+---
+title: "Content Collections in Astro"
+description: "Come utilizzare le Content Collections per contenuti strutturati in Astro."
+pubDate: 2025-03-18
+category: "Marketing"
+---
+
+# Content Collections in Astro
+
+Le Content Collections sono una potente funzionalità di Astro che ti permette di organizzare e validare Markdown, MDX e altri formati di contenuto. In questo tutorial, imparerai come creare e utilizzare le Content Collections.
+
+## Cosa sono le Content Collections?
+
+Le Content Collections ti forniscono:
+
+- Un sistema strutturato per organizzare i tuoi contenuti
+- Sicurezza dei tipi e validazione con schemi
+- Accesso semplificato ai tuoi contenuti attraverso un'API
+
+## Configurare le Content Collections
+
+Ecco come configurare le Content Collections:
+
+1. Crea una directory `content/` nella tua cartella `src/`
+2. Crea sottodirectory per le tue collezioni (ad es. `src/content/blog/`)
+3. Crea un file `src/content/config.ts` per definire le tue collezioni
+
+Ecco un esempio di file di configurazione:
+
+```typescript
+// src/content/config.ts
+import { defineCollection, z } from 'astro:content';
+
+const blogCollection = defineCollection({
+ type: 'content', // 'content' o 'data'
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ pubDate: z.date(),
+ updatedDate: z.date().optional(),
+ tags: z.array(z.string()).default(['generale']),
+ image: z.string().optional(),
+ }),
+});
+
+export const collections = {
+ 'blog': blogCollection,
+};
+```
+
+## Aggiungere Contenuti
+
+Dopo la configurazione, puoi aggiungere file Markdown o MDX alle tue collezioni:
+
+```markdown
+---
+title: "Il mio primo post"
+description: "Questo è il mio primo post del blog usando Astro Content Collections."
+pubDate: 2025-03-10
+tags: ["astro", "markdown"]
+---
+
+# Il mio primo post
+
+Ecco il contenuto del mio primo post.
+```
+
+## Accedere alle Collezioni
+
+Puoi accedere alle tue collezioni utilizzando le funzioni `getCollection` o `getEntry`:
+
+```astro
+---
+import { getCollection, getEntry } from 'astro:content';
+
+// Ottieni tutte le voci in una collezione
+const allBlogPosts = await getCollection('blog');
+
+// Filtra per criteri specifici
+const featuredPosts = await getCollection('blog', ({ data }) => {
+ return data.tags.includes('featured');
+});
+
+// Ottieni una voce specifica
+const specificPost = await getEntry('blog', 'post-slug');
+---
+
+
+```
+
+## Rendere i Contenuti
+
+Per rendere il contenuto di una voce, devi prima chiamare il metodo `render()`:
+
+```astro
+---
+import { getEntry } from 'astro:content';
+import BlogLayout from '../layouts/BlogLayout.astro';
+
+// Ottieni la voce dal parametro URL
+const { slug } = Astro.params;
+const entry = await getEntry('blog', slug);
+
+// Renderizza il contenuto
+const { Content } = await entry.render();
+---
+
+
+
+
+```
+
+## Sicurezza dei Tipi
+
+Le Content Collections forniscono piena integrazione con TypeScript, dandoti accesso ai tipi per le tue collezioni:
+
+```typescript
+import type { CollectionEntry } from 'astro:content';
+
+// Tipi per le tue collezioni
+type BlogPost = CollectionEntry<'blog'>;
+
+// Tipo prop del componente
+interface Props {
+ post: BlogPost;
+}
+```
+
+## Riepilogo
+
+Le Content Collections forniscono un modo potente e typesafe per lavorare con Markdown e altri formati di contenuto in Astro. Ti aiutano a organizzare, validare e utilizzare efficacemente i tuoi contenuti.
+
+Con le Content Collections, puoi facilmente creare e gestire siti web complessi e ricchi di contenuti come blog, documentazione e portfolio.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/it/fondamenti-figma.md b/apps/bauntown/apps/landing/src/content/tutorials/it/fondamenti-figma.md
new file mode 100644
index 000000000..7a73208df
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/it/fondamenti-figma.md
@@ -0,0 +1,124 @@
+---
+title: "Fondamenti di Figma per Sviluppatori"
+description: "Impara i fondamenti di Figma per collaborare meglio con i designer e comprendere i progetti UI."
+pubDate: 2025-03-20
+category: "UI & UX"
+featured: true
+image: "/images/tutorials/bauntown-figma-basics.png"
+author: "Anna Schmidt"
+---
+
+# Fondamenti di Figma per Sviluppatori
+
+Figma è uno strumento di design potente utilizzato in molti team di sviluppo. Come sviluppatore, comprendere le basi è fondamentale per una collaborazione efficace con i designer.
+
+## Cos'è Figma?
+
+Figma è uno strumento di design basato sul web utilizzato per creare interfacce utente, prototipi e sistemi di design. Essendo basato sul cloud, è eccellente per la collaborazione tra designer e sviluppatori.
+
+I principali vantaggi di Figma sono:
+
+- **Basato sul web**: Non richiede installazione, funziona nel browser
+- **Collaborazione in tempo reale**: Più persone possono lavorare simultaneamente su un design
+- **Multi-piattaforma**: Funziona su Mac, Windows e Linux
+- **Ampie funzionalità di prototipazione**: Crea prototipi interattivi
+- **Componenti e sistemi di design**: Costruisci elementi UI riutilizzabili
+
+## Comprendere l'Interfaccia di Figma
+
+L'interfaccia utente di Figma consiste in diverse aree:
+
+- **Barra laterale**: Contiene pagine, livelli e risorse
+- **Canvas**: L'area principale per il design
+- **Pannello delle proprietà**: Mostra le impostazioni per gli elementi selezionati
+- **Barra degli strumenti**: Contiene strumenti per creare e modificare i design
+
+## Frame e Gruppi
+
+Un frame in Figma è paragonabile a un container o a un `
` in HTML. I frame possono essere creati per diverse dimensioni dello schermo e aiutano a organizzare il design.
+
+```
+Frame (Smartphone)
+├── Gruppo (Header)
+│ ├── Testo "Logo"
+│ └── Gruppo (Icone di navigazione)
+├── Gruppo (Contenuto)
+│ ├── Testo "Titolo"
+│ └── Testo "Descrizione"
+└── Gruppo (Footer)
+ └── ...
+```
+
+## Componenti e Varianti
+
+I componenti in Figma sono elementi di design riutilizzabili, simili ai componenti in React o Vue. Aiutano a creare e mantenere sistemi di design.
+
+Le varianti permettono di definire diversi stati di un componente, ad esempio, diversi stati di un pulsante:
+
+- Normale
+- Hover
+- Premuto
+- Disabilitato
+
+## Auto Layout
+
+L'Auto Layout in Figma è simile a Flexbox in CSS. Permette un design responsivo all'interno dei frame e aiuta a posizionare e scalare gli elementi automaticamente.
+
+Le proprietà dell'Auto Layout includono:
+
+- **Direzione**: Orizzontale o verticale
+- **Spaziatura**: Spazio tra gli elementi
+- **Padding**: Spaziatura interna del frame
+- **Allineamento**: Allineamento degli elementi
+
+## Comprendere i Design Token
+
+I design token sono gli elementi costitutivi di un sistema di design. Includono:
+
+- **Colori**: Colore primario, colore secondario, colore di successo, colore di errore, ecc.
+- **Tipografia**: Font, dimensioni dei font, altezze delle linee
+- **Spaziatura**: Spaziatura standard tra gli elementi
+- **Ombre**: Varie profondità delle ombre
+- **Raggi**: Arrotondamento standard degli angoli
+
+Come sviluppatore, è importante comprendere questi token e applicarli coerentemente nel tuo codice.
+
+## Fondamenti di Prototipazione
+
+Figma permette di creare prototipi interattivi che mostrano come funzionerà un'applicazione. Ecco le basi:
+
+1. **Connessioni**: Collega i frame per simulare la navigazione
+2. **Interazioni**: Definisci quali azioni attivano le transizioni (clic, hover, ecc.)
+3. **Animazioni**: Scegli effetti di transizione tra i frame
+4. **Smart Animate**: Anima oggetti che appaiono in entrambi i frame
+
+## Preparare i Design per lo Sviluppo
+
+Come sviluppatore, dovresti essere in grado di estrarre le seguenti informazioni da un design Figma:
+
+- **Valori CSS**: Colori, spaziatura, dimensioni dei font, ecc.
+- **Risorse**: Immagini e icone
+- **Comportamento responsivo**: Come si comporta il design su diverse dimensioni dello schermo
+- **Interazioni**: Quali elementi sono interattivi e cosa succede durante l'interazione
+
+## Plugin Figma per Sviluppatori
+
+Alcuni plugin utili per la collaborazione tra designer e sviluppatori:
+
+- **Figma to HTML/CSS/React**: Genera codice dai design
+- **Inspect**: Mostra valori CSS esatti
+- **Design Tokens**: Esporta i design token in vari formati
+- **Redlines**: Mostra spaziatura e dimensioni
+
+## Consigli per la Collaborazione Designer-Sviluppatore
+
+1. **Trova un linguaggio comune**: Concorda sulla terminologia con il tuo designer
+2. **Stabilisci un sistema di design**: Usa componenti riutilizzabili e una denominazione coerente
+3. **Sincronizzati regolarmente**: Tieni riunioni regolari per evitare incomprensioni
+4. **Fornisci feedback**: Condividi limitazioni e possibilità tecniche tempestivamente
+
+## Conclusione
+
+Comprendere Figma come sviluppatore può migliorare significativamente la collaborazione con i designer e accelerare il processo di sviluppo. Con le basi di questo tutorial, puoi comprendere meglio i design e implementarli con maggiore precisione.
+
+Hai domande su Figma o sulla collaborazione tra designer e sviluppatori? Sentiti libero di lasciare un commento qui sotto!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/it/i18n-astro.md b/apps/bauntown/apps/landing/src/content/tutorials/it/i18n-astro.md
new file mode 100644
index 000000000..33d19c373
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/it/i18n-astro.md
@@ -0,0 +1,209 @@
+---
+title: "Siti Web Multilingua con Astro"
+description: "Una guida completa all'implementazione di i18n nei progetti Astro."
+pubDate: 2025-03-20
+category: "Branding"
+---
+
+# Siti Web Multilingua con Astro
+
+Astro offre diversi approcci per creare siti web multilingua (i18n). In questo tutorial, imparerai come costruire un sito web multilingua con Astro.
+
+## Panoramica degli Approcci
+
+Ci sono diversi approcci per implementare i18n in Astro:
+
+1. **Routing manuale** con parametri `[lang]`
+2. **Content Collections** con sottodirectory specifiche per lingua
+3. **Integrazioni i18n** come `astro-i18n-aut`
+
+Esploreremo ciascuno di questi approcci in dettaglio.
+
+## Routing Manuale
+
+L'approccio più semplice utilizza il routing basato sui file con parametri dinamici:
+
+```
+src/pages/[lang]/index.astro
+src/pages/[lang]/about.astro
+src/pages/index.astro (lingua predefinita)
+src/pages/about.astro (lingua predefinita)
+```
+
+Nei tuoi componenti, puoi quindi:
+
+```astro
+---
+// src/pages/[lang]/index.astro
+const { lang } = Astro.params;
+---
+
+
+
+
+```
+
+## Gestire le Traduzioni
+
+Crea un file centrale per le traduzioni:
+
+```typescript
+// src/i18n/ui.ts
+export const languages = {
+ it: 'Italiano',
+ en: 'English',
+};
+
+export const defaultLang = 'it';
+
+export const ui = {
+ it: {
+ 'nav.home': 'Home',
+ 'nav.about': 'Chi siamo',
+ },
+ en: {
+ 'nav.home': 'Home',
+ 'nav.about': 'About',
+ },
+};
+```
+
+E funzioni helper:
+
+```typescript
+// src/utils/i18n.ts
+import { ui, defaultLang } from '../i18n/ui';
+
+export function getLangFromUrl(url: URL) {
+ const [, lang] = url.pathname.split('/');
+ if (lang in ui) return lang as keyof typeof ui;
+ return defaultLang;
+}
+
+export function useTranslations(lang: keyof typeof ui) {
+ return function t(key: keyof typeof ui[typeof defaultLang]) {
+ return ui[lang][key] || ui[defaultLang][key];
+ };
+}
+```
+
+Usale nei tuoi componenti:
+
+```astro
+---
+import { getLangFromUrl, useTranslations } from '../utils/i18n';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+
+```
+
+## Content Collections per Contenuti Multilingua
+
+Puoi utilizzare Content Collections per gestire contenuti tradotti:
+
+```
+src/content/blog/it/post-1.md
+src/content/blog/en/post-1.md
+```
+
+Poi accedi ai contenuti specificamente:
+
+```astro
+---
+import { getCollection } from 'astro:content';
+
+// Ottieni la lingua corrente dall'URL
+const { lang } = Astro.params;
+
+// Ottieni i post nella lingua corrente
+const posts = await getCollection('blog', ({ id }) => {
+ return id.startsWith(`${lang}/`);
+});
+---
+
+
+```
+
+## Riepilogo
+
+Astro fornisce opzioni flessibili per creare siti web multilingua. Che tu preferisca un approccio manuale o utilizzi un'integrazione specializzata dipende dalle tue esigenze specifiche.
+
+Con una struttura chiara per le traduzioni e le giuste funzioni helper, puoi creare un'esperienza utente multilingua senza soluzione di continuità.
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/tutorials/it/vibecoding-basics.md b/apps/bauntown/apps/landing/src/content/tutorials/it/vibecoding-basics.md
new file mode 100644
index 000000000..06ce8a2b1
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/tutorials/it/vibecoding-basics.md
@@ -0,0 +1,169 @@
+---
+title: "Vibecoding: L'Arte della Programmazione Intuitiva"
+description: "Scopri come elevare le tue competenze di programmazione a un nuovo livello con il Vibecoding e sviluppare soluzioni di codice più intuitive e creative."
+pubDate: 2025-03-25
+category: "Vibecoding"
+featured: true
+image: "/images/tutorials/nobackground/vibecode-bauntown-tutorial.png"
+author: "Max Müller"
+---
+
+# Vibecoding: L'Arte della Programmazione Intuitiva
+
+Benvenuto al nostro tutorial sul Vibecoding! Questa nuova disciplina di programmazione riguarda la ricerca del flusso e lo sviluppo di soluzioni intuitive che vanno oltre i paradigmi tradizionali.
+
+## Cos'è il Vibecoding?
+
+Il Vibecoding è un approccio alla programmazione che combina precisione tecnica con intuizione creativa. Invece di lavorare esclusivamente con modelli standardizzati, il Vibecoding incoraggia gli sviluppatori a usare la loro intuizione e "sentire" con il codice.
+
+I principi fondamentali sono:
+
+1. **Flusso invece di Struttura**: Trovare uno stato mentale in cui il codice fluisce naturalmente
+2. **Intuizione invece di Regole**: Fidarsi del proprio istinto quando si prendono decisioni di design
+3. **Espressività invece di Convenzione**: Esprimere la propria prospettiva unica attraverso il codice
+4. **Armonia invece di Efficienza**: Puntare a un codice che non solo funziona ma si sente armonioso
+
+## Perché il Vibecoding?
+
+In un'epoca in cui la programmazione è sempre più standardizzata e gli strumenti di AI assumono compiti di codifica di routine, l'intuizione umana diventa il differenziatore critico. Il Vibecoding rafforza precisamente questa componente umana.
+
+Alcuni vantaggi includono:
+
+- **Approcci più creativi** ai problemi complessi
+- **Maggiore soddisfazione** durante la programmazione
+- **Codice più personale** che riflette il tuo modo di pensare
+- **Migliore collaborazione** attraverso una comprensione più profonda delle intenzioni del codice proprio e altrui
+
+## Iniziare con il Vibecoding
+
+### 1. Raggiungere lo Stato di Flusso
+
+Il primo passo nel Vibecoding è raggiungere uno stato mentale in cui sei completamente immerso nella programmazione. Ecco alcune tecniche:
+
+```javascript
+// Codifica tradizionale
+function processData(data) {
+ const results = [];
+ for (let i = 0; i < data.length; i++) {
+ if (data[i].status === 'active') {
+ results.push(data[i].value * 2);
+ }
+ }
+ return results;
+}
+
+// Approccio Vibecoding
+function enhanceActiveValues(data) {
+ return data
+ .filter(item => item.isActive())
+ .map(item => item.amplify());
+}
+```
+
+La seconda versione non è solo più breve, ma esprime più chiaramente l'intenzione. Stiamo migliorando valori attivi, non solo elaborandoli.
+
+### 2. Ascoltare la Tua Intuizione
+
+Il Vibecoding ti incoraggia ad ascoltare la tua sensazione istintiva. Se una soluzione "sembra giusta" anche se non è conforme agli standard, esplorala:
+
+```python
+# Approccio standard
+def validate_user_input(input_string):
+ if len(input_string) < 3:
+ return False
+ if not input_string[0].isalpha():
+ return False
+ if not all(c.isalnum() or c == '_' for c in input_string):
+ return False
+ return True
+
+# Approccio intuitivo di Vibecoding
+def feels_like_valid_username(name):
+ is_substantial = len(name) >= 3
+ starts_properly = name[0].isalpha()
+ has_acceptable_chars = all(c.isalnum() or c == '_' for c in name)
+
+ return is_substantial and starts_properly and has_acceptable_chars
+```
+
+La funzione `feels_like_valid_username` non esprime solo cosa fa ma anche come tu come sviluppatore pensi alla validazione.
+
+### 3. Trovare il Tuo Ritmo di Codice
+
+Il Vibecoding non riguarda solo COSA fa il tuo codice, ma COME lo fa. Presta attenzione al ritmo e all'estetica:
+
+```javascript
+// Approccio funzionale ma ritmico
+const processTransactions = transactions =>
+ transactions
+ .filter(tx => tx.isComplete)
+ .sort((a, b) => b.date - a.date)
+ .map(tx => ({
+ id: tx.id,
+ amount: formatCurrency(tx.amount),
+ date: formatDate(tx.date)
+ }))
+ .slice(0, 10);
+```
+
+Questo codice ha un flusso naturale—filtra, ordina, trasforma, limita—che si sente bene ed è facile da capire.
+
+## Esercizi per il Vibecoding
+
+1. **Meditazione sul Codice**: Trascorri 5 minuti contemplando il codice esistente senza cambiarlo. Senti il suo ritmo e la sua intenzione.
+
+2. **Refactoring per Sensazione**: Prendi un codice funzionante e rifallo non secondo le migliori pratiche, ma secondo ciò che ti sembra giusto.
+
+3. **Pair Vibecoding**: Programma con un partner, alternandovi a scrivere codice e comunicando solo attraverso segnali non verbali.
+
+## Concetti Avanzati di Vibecoding
+
+### Armonia del Codice
+
+Nel Vibecoding avanzato, ci sforziamo di raggiungere l'armonia nel codice—uno stato in cui tutte le parti si adattano naturalmente:
+
+```typescript
+// Un design di interfaccia armonioso
+interface Resonance {
+ source: T;
+ amplify(factor: number): Resonance;
+ combine(other: Resonance): Resonance;
+ release(): T;
+}
+
+class SoundResonance implements Resonance {
+ constructor(private buffer: AudioBuffer) {}
+
+ amplify(factor: number): Resonance {
+ // Implementation...
+ return this;
+ }
+
+ combine(other: Resonance): Resonance {
+ // Implementation...
+ return this;
+ }
+
+ release(): AudioBuffer {
+ return this.buffer;
+ }
+}
+```
+
+### Allenare l'Intuizione del Codice
+
+Più pratichi il Vibecoding, più forte diventa la tua intuizione del codice. Ecco alcuni esercizi:
+
+1. **Codifica alla Cieca**: Scrivi una funzione senza testarla, basandoti esclusivamente sulla tua intuizione di come dovrebbe funzionare.
+
+2. **Denominazione Intuitiva**: Nomina variabili e funzioni in base alla tua prima sensazione, non secondo le convenzioni.
+
+3. **Programmazione Senza Codice**: Progetta una soluzione interamente nella tua mente prima di scrivere una sola riga di codice.
+
+## Conclusione
+
+Il Vibecoding è più di una semplice tecnica—è un cambiamento di paradigma nel modo in cui pensiamo alla programmazione. Mettendo in primo piano la nostra intuizione e creatività, possiamo creare codice che non è solo funzionale ma anche espressivo e personale.
+
+In un mondo in cui sempre più programmazione è automatizzata, il Vibecoding è un modo per enfatizzare la componente umana e portare la nostra prospettiva unica.
+
+Pronto per iniziare con il Vibecoding? Apri il tuo editor, chiudi gli occhi per un momento e lascia fluire il tuo codice!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/de/community-learning.md b/apps/bauntown/apps/landing/src/content/vision/de/community-learning.md
new file mode 100644
index 000000000..e69cac9ef
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/de/community-learning.md
@@ -0,0 +1,148 @@
+---
+title: "Community-basiertes Lernen: Die Zukunft der Entwicklerbildung"
+description: "Unsere Vision für ein kollaboratives, praxisorientiertes Lernmodell, das auf Community-Interaktion und realen Projekten basiert."
+pubDate: 2025-03-15
+category: "community"
+timeline: "2025-2028"
+status: "planned"
+featured: true
+image: "/images/vision/community-learning.png"
+contributors: ["David Wagner", "Sophie Klein", "Marcus Hoffmann"]
+relatedLinks: [
+ {
+ title: "Community of Practice Framework",
+ url: "https://www.communityofpractice.ca/background/what-is-a-community-of-practice/"
+ },
+ {
+ title: "The Future of Learning Communities",
+ url: "https://www.mckinsey.com/industries/education/our-insights/how-to-create-learning-communities-in-times-of-crisis-five-design-principles"
+ }
+]
+---
+
+# Community-basiertes Lernen: Die Zukunft der Entwicklerbildung
+
+Bei BaunTown glauben wir, dass das Erlernen von Programmierung und Softwareentwicklung am effektivsten in einer aktiven, unterstützenden Community stattfindet. Unsere Vision ist es, ein Lernökosystem zu schaffen, das traditionelle Bildungsmodelle durch praxisorientierte, gemeinschaftsbasierte Lernpfade ergänzt und teilweise ersetzt.
+
+## Die Herausforderungen der traditionellen Bildung
+
+Die Art und Weise, wie Entwickler heute lernen, steht vor mehreren Herausforderungen:
+
+- **Theorie-Praxis-Lücke**: Traditionelle Kurse und Bootcamps konzentrieren sich oft auf isolierte Übungen, die wenig mit realen Projekten zu tun haben
+- **Fehlende Betreuung**: Selbststudium lässt viele Lernende ohne Anleitung oder Feedback
+- **Künstliche Lernumgebungen**: Die meisten Lernplattformen simulieren Entwicklungsumgebungen, anstatt in echten zu arbeiten
+- **Isoliertes Lernen**: Das Erlernen komplexer Fähigkeiten allein ist ineffizient und demotivierend
+- **Schnelle Technologieänderungen**: Lehrpläne und Kurse können mit dem Tempo der Branche nicht Schritt halten
+
+## Unsere Vision für Community-basiertes Lernen
+
+Wir sehen die Zukunft des Lernens in einem Community-zentrierten Ansatz mit folgenden Schlüsselelementen:
+
+### 1. Lernen durch Beitragen
+
+Lernende arbeiten an realen Open-Source-Projekten mit echter Auswirkung und nicht an isolierten Übungen. Dies bietet:
+
+- **Authentische Erfahrung** mit echten Entwicklungsworkflows
+- **Unmittelbares Feedback** von erfahrenen Entwicklern
+- **Sichtbare Fortschritte** durch Beiträge, die tatsächlich genutzt werden
+- **Portfolio-Aufbau** parallel zum Lernprozess
+
+### 2. Peer-Learning-Gemeinschaften
+
+Kleine, fokussierte Gruppen von Lernenden, die zusammenarbeiten und voneinander lernen:
+
+- **Gegenseitige Unterstützung** und Motivation
+- **Verschiedene Perspektiven** und Lösungsansätze
+- **Entwicklung von Soft Skills** wie Kommunikation und Zusammenarbeit
+- **Aufbau eines beruflichen Netzwerks** während des Lernens
+
+### 3. Mentorschaft-Ökosystem
+
+Ein strukturiertes System, das Mentoren und Lernende verbindet:
+
+- **1:1-Mentorschaft** für personalisierte Anleitung
+- **Gruppen-Mentorschaft** für breitere Perspektiven
+- **Gegenseitige Mentorschaft** zwischen Peers
+- **Mentoring-Kreisläufe**, die Lernende ermutigen, selbst zu Mentoren zu werden
+
+### 4. Praxisorientierte Missionen
+
+Anstelle von abstrakten Kursen bieten wir "Missionen" an - echte Herausforderungen mit klaren Zielen:
+
+- **Projektbasiertes Lernen** in einem strukturierten Rahmen
+- **Progression von einfach zu komplex** in natürlicher Weise
+- **Interdisziplinäre Aufgaben**, die verschiedene Fähigkeiten verbinden
+- **Teambasierte Herausforderungen**, die Zusammenarbeit fördern
+
+## Die technologische Grundlage
+
+Um diese Vision zu verwirklichen, entwickeln wir mehrere Technologien und Plattformen:
+
+### BaunTown Learning Hub
+
+Eine Plattform, die:
+
+- **Lernpfade kuratiert** basierend auf Community-Feedback und Branchentrends
+- **Missionen und Projekte organisiert** für verschiedene Schwierigkeitsgrade
+- **Fortschritte verfolgt** durch Beiträge zu Open-Source-Projekten
+- **Mentoren und Lernende zusammenbringt** basierend auf Zielen und Expertise
+
+### Collaboration Spaces
+
+Virtuelle Umgebungen für gemeinsames Lernen:
+
+- **Code-Kollaboration in Echtzeit** mit integrierten Lernressourcen
+- **Synchrone und asynchrone Kommunikationstools**
+- **Dokumentations- und Wissensmanagement-Werkzeuge**
+- **Integrierte Code-Review- und Feedback-Mechanismen**
+
+### Learning Analytics
+
+Datengestützte Tools, die:
+
+- **Persönliche Lernpfade optimieren** basierend auf Stärken und Schwächen
+- **Fortschritte visualisieren** multidimensional
+- **Community-Gesundheit messen** und fördern
+- **Mentorschaft-Wirksamkeit bewerten** für kontinuierliche Verbesserung
+
+## Umsetzungsplan
+
+Unsere Roadmap für die Verwirklichung dieser Vision:
+
+### Phase 1: Grundlagen (2025)
+
+- Launch der ersten Version des BaunTown Learning Hub
+- Etablierung von Pilot-Lerngemeinschaften in ausgewählten Technologiebereichen
+- Entwicklung eines Mentorentrainings-Programms
+- Erstellung der ersten Missionen-Sets
+
+### Phase 2: Wachstum (2026-2027)
+
+- Erweiterung auf mehr Technologiebereiche und Schwierigkeitsgrade
+- Integration mit populären Open-Source-Projekten für Lernmissionen
+- Aufbau eines Anerkennung- und Zertifizierungssystems
+- Entwicklung von Tools für Community-Gesundheit und -Wachstum
+
+### Phase 3: Skalierung (2027-2028)
+
+- Aufbau eines selbsttragenden Mentorschaft-Netzwerks
+- Partnerschaft mit Unternehmen für praxisnahe Industrieprojekte
+- Entwicklung von Enterprise-Lösungen für interne Lerngemeinschaften
+- Internationalisierung und kulturelle Anpassung
+
+## Zusammenarbeit und Beitrag
+
+Diese Vision lebt von der Beteiligung der Community. Wir laden dich ein:
+
+- **Feedback zu geben** zu unseren Lernkonzepten und -tools
+- **Als Mentor zu fungieren** für aufstrebende Entwickler
+- **Lernmissionen zu entwerfen** basierend auf deiner Expertise
+- **Deine eigene Lernreise zu teilen** um anderen zu helfen
+
+## Die Zukunft des Lernens gestalten
+
+Wir glauben, dass Community-basiertes Lernen nicht nur effektiver ist, sondern auch eine inklusivere, nachhaltigere Art des Wissensaustauschs darstellt. Indem wir die Grenzen zwischen Lernen, Arbeiten und Beitragen verwischen, schaffen wir ein Ökosystem, in dem kontinuierliches Lernen natürlich und bereichernd ist.
+
+---
+
+Hast du Ideen oder möchtest du an dieser Vision mitarbeiten? Wir freuen uns auf deine Beteiligung!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/de/gemeinsam-bauen.md b/apps/bauntown/apps/landing/src/content/vision/de/gemeinsam-bauen.md
new file mode 100644
index 000000000..c685c5965
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/de/gemeinsam-bauen.md
@@ -0,0 +1,119 @@
+---
+title: "Gemeinsam Bauen: Kollaborative Technologieentwicklung"
+description: "Unsere Vision für eine neue Ära des gemeinschaftlichen Bauens von Technologien und digitalen Lösungen."
+pubDate: 2025-04-02
+category: "technology"
+timeline: "2025-2027"
+status: "current"
+featured: true
+image: "/images/vision/gemeinsam-bauen.png"
+contributors: ["Marcus Hoffmann", "Judith Berg", "Till Schneider"]
+relatedLinks: [
+ {
+ title: "Open Source Development Model",
+ url: "https://opensource.org/osd"
+ },
+ {
+ title: "Collaborative Innovation Networks",
+ url: "https://en.wikipedia.org/wiki/Collaborative_innovation_network"
+ }
+]
+---
+
+# Gemeinsam Bauen: Kollaborative Technologieentwicklung
+
+In BaunTown glauben wir, dass die besten digitalen Lösungen nicht in Isolation, sondern durch gemeinschaftliche Zusammenarbeit entstehen. Unsere Vision für "Gemeinsam Bauen" definiert einen neuen Ansatz für die kollaborative Entwicklung technologischer Innovationen - jenseits traditioneller Organisationsgrenzen und geografischer Beschränkungen.
+
+## Die Herausforderungen moderner Technologieentwicklung
+
+Trotz vieler Fortschritte in der Zusammenarbeit stehen wir immer noch vor bedeutenden Hürden:
+
+- **Fragmentierte Expertise**: Spezialisiertes Wissen ist über viele Personen und Organisationen verteilt
+- **Ressourcenungleichgewicht**: Ungleicher Zugang zu Tools, Infrastruktur und Entwicklungsressourcen
+- **Redundante Entwicklung**: Parallele Lösungsentwicklung ohne Wissensaustausch
+- **Nachhaltigkeitsprobleme**: Projekte scheitern oft durch mangelnde Community-Unterstützung
+- **Innovations-Silos**: Wertvolle Ideen bleiben in geschlossenen Teams gefangen
+
+## Unsere Vision: Gemeinsam Bauen
+
+### 1. Offene Innovationsökosysteme
+
+Strukturen, die Zusammenarbeit über traditionelle Grenzen hinweg ermöglichen:
+
+- **Modulare Architektur**: Systemdesign, das verteilte Beiträge erleichtert und fördert
+- **Öffentliche Entwicklungsprozesse**: Transparente Entscheidungen und sichtbare Entwicklungsschritte
+- **Kollaborative Roadmaps**: Gemeinsame Vision und Planung für technologische Entwicklung
+- **Inklusives Governance-Modell**: Entscheidungsstrukturen, die verschiedene Stakeholder einbeziehen
+
+### 2. Gemeinschaftliche Ressourcenpools
+
+Gemeinsame Ressourcen, die Entwicklung demokratisieren:
+
+- **Geteilte Infrastruktur**: Zugang zu Entwicklungs-, Test- und Bereitstellungsumgebungen
+- **Wissensdatenbanken**: Kollektiv gepflegte technische Dokumentation und Best Practices
+- **Skill-Sharing-Netzwerke**: Austausch von Expertise für spezifische Entwicklungsherausforderungen
+- **Crowd-finanzierte Entwicklung**: Gemeinsame Finanzierungsmodelle für wichtige Funktionen
+
+### 3. Organische Zusammenarbeit
+
+Prozesse, die natürliche, effektive Zusammenarbeit fördern:
+
+- **Digitale Gilde**: Meister-Geselle-Modelle in der modernen Softwareentwicklung
+- **Flexible Beitragsmodelle**: Möglichkeiten für Beteiligung auf verschiedenen Ebenen und Zeitskalen
+- **Synchrone und asynchrone Zusammenarbeit**: Tools und Prozesse für global verteilte Teams
+- **Community-Health-Monitoring**: Metriken und Praktiken für nachhaltige Gemeinschaften
+
+### 4. Technologie-gestützte Kollaboration
+
+Tools, die verteilte Zusammenarbeit ermöglichen:
+
+- **Collaborative IDEs**: Umgebungen für Echtzeit-Programmierung in Teams
+- **Verteilte Versionskontrolle+**: Erweiterte Funktionen für komplexe Zusammenarbeit
+- **KI-unterstützte Koordination**: Intelligente Systeme zur Optimierung der Teamarbeit
+- **Visualisierungstools**: Darstellung komplexer Systeme für besseres gemeinsames Verständnis
+
+## Die Vorteile des gemeinsamen Bauens
+
+Dieses Modell bietet transformative Vorteile:
+
+- **Beschleunigte Innovation** durch Nutzung kollektiver Intelligenz
+- **Höhere Qualität** durch diverse Perspektiven und breiteres Testing
+- **Nachhaltige Lösungen** mit breiter Community-Unterstützung
+- **Demokratisierter Zugang** zu Technologieentwicklung
+- **Resilientere Systeme** durch verteilte Verantwortung und Wartung
+
+## Unser Implementierungsplan
+
+### Phase 1: Fundament (2025)
+
+- Einrichtung der BaunTown Collaboration Platform für verteilte Entwicklung
+- Definition von Standards und Protokollen für effektive Zusammenarbeit
+- Initiierung von 5 Pilotprojekten mit offener Entwicklungsmethodik
+- Aufbau eines initialen Netzwerks von Entwicklern, Designern und Domänenexperten
+
+### Phase 2: Expansion (2026)
+
+- Skalierung auf 25+ aktive Kollaborationsprojekte in verschiedenen Domänen
+- Implementierung fortgeschrittener Tools für verteilte Zusammenarbeit
+- Entwicklung von Metriken zur Messung der Kollaborationseffektivität
+- Aufbau von Partnerschaften mit Bildungseinrichtungen und Unternehmen
+
+### Phase 3: Konsolidierung (2027)
+
+- Etablierung eines selbsttragenden Ökosystems für Zusammenarbeit
+- Veröffentlichung von Forschung über effektive Kollaborationsmodelle
+- Entwicklung von Bildungsprogrammen für kollaborative Entwicklung
+- Gründung eines Innovations-Hubs für komplexe technologische Herausforderungen
+
+## Sei Teil der Baumeister-Community
+
+Unsere Vision für "Gemeinsam Bauen" lebt von aktiver Beteiligung. Wir laden dich ein:
+
+- **An offenen Projekten teilzunehmen**, die deine Interessen oder Expertise ansprechen
+- **Ressourcen und Wissen zu teilen**, die allen zugute kommen
+- **Neue Kollaborationsmodelle vorzuschlagen** basierend auf deinen Erfahrungen
+- **Eine Brücke zu bauen** zwischen verschiedenen Communities und Expertisen
+
+---
+
+Durch gemeinsames Bauen können wir technologische Lösungen schaffen, die nicht nur technisch herausragend sind, sondern auch die kollektive Weisheit und Vielfalt unserer Community widerspiegeln. Bist du bereit, mit uns zu bauen?
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/de/gemeinsam-lernen.md b/apps/bauntown/apps/landing/src/content/vision/de/gemeinsam-lernen.md
new file mode 100644
index 000000000..b30c05b10
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/de/gemeinsam-lernen.md
@@ -0,0 +1,109 @@
+---
+title: "Gemeinsam Lernen: Die Kraft kollektiver Bildung"
+description: "Unsere Vision für ein gemeinschaftsbasiertes Bildungsmodell, das traditionelle Lernformen ergänzt und erweitert."
+pubDate: 2025-04-01
+category: "community"
+timeline: "2025-2027"
+status: "current"
+featured: true
+image: "/images/vision/gemeinsam-lernen.png"
+contributors: ["Sophie Klein", "David Wagner", "Till Schneider"]
+relatedLinks: [
+ {
+ title: "Community of Practice Framework",
+ url: "https://www.communityofpractice.ca/background/what-is-a-community-of-practice/"
+ },
+ {
+ title: "Peer Learning Strategies",
+ url: "https://www.mckinsey.com/industries/education/our-insights/how-to-create-learning-communities-in-times-of-crisis-five-design-principles"
+ }
+]
+---
+
+# Gemeinsam Lernen: Die Kraft kollektiver Bildung
+
+Bei BaunTown glauben wir an die transformative Kraft des gemeinsamen Lernens. In einer Welt, in der Technologie und Wissen exponentiell wachsen, kann kein Einzelner alles alleine meistern. Unsere Vision ist ein Ökosystem, in dem Lernen durch Gemeinschaft verstärkt, beschleunigt und bereichert wird.
+
+## Warum gemeinsames Lernen notwendig ist
+
+Die traditionelle Bildung steht vor erheblichen Herausforderungen:
+
+- **Informationsüberflutung**: Die Menge an technischem Wissen verdoppelt sich alle 18 Monate
+- **Isoliertes Lernen**: Alleiniges Lernen führt oft zu Wissenslücken und fehlenden Perspektiven
+- **Theorie-Praxis-Lücke**: Formale Bildung vermittelt selten die praktische Anwendung in realen Szenarien
+- **Motivationshürden**: Ohne Gemeinschaft fehlt oft die Beständigkeit für langfristiges Lernen
+
+## Unsere Vision für kollektives Lernen
+
+### 1. Peer-Learning-Netzwerke
+
+Wir schaffen strukturierte Gemeinschaften, in denen Wissen fließt:
+
+- **Wissensaustausch-Zirkel**: Regelmäßige Sessions, in denen Mitglieder ihr Fachwissen teilen
+- **Skill-Mapping**: Identifikation komplementärer Fähigkeiten für optimalen Wissenstransfer
+- **Gemeinsame Lernpfade**: Koordinierte Lernreisen für Gruppen mit ähnlichen Zielen
+- **Gegenseitige Accountability**: Systeme, die kontinuierliches Engagement fördern
+
+### 2. Praxisnahe Lernökosysteme
+
+Lernen durch aktives Tun in echten Projekten:
+
+- **Project-Based Learning**: Kompetenzentwicklung durch Arbeit an realen Herausforderungen
+- **Lernende Organisationen**: Communities, die kontinuierliches Lernen in ihre Struktur integrieren
+- **Iteratives Feedback**: Schnelle Lernzyklen durch konstantes Feedback der Gemeinschaft
+- **Dokumentierte Lernreisen**: Teilen von Erkenntnissen und Herausforderungen als Lernressource
+
+### 3. Technologie-gestützte Kollaboration
+
+Digitale Werkzeuge, die gemeinsames Lernen ermöglichen:
+
+- **Synchrone Kollaborationsräume**: Virtuelle Umgebungen für Echtzeit-Zusammenarbeit
+- **Wissens-Repositories**: Gemeinschaftlich kuratierte Sammlungen von Lerninhalten
+- **Learning Analytics**: Datengestützte Einblicke in kollektive Lernprozesse
+- **KI-unterstützte Lernpfade**: Intelligente Systeme, die optimale Lerngemeinschaften vorschlagen
+
+## Die Vorteile gemeinsamen Lernens
+
+Kollektives Lernen bietet einzigartige Vorteile:
+
+- **Beschleunigte Kompetenzentwicklung** durch Zugang zu vielfältigem Wissen und Erfahrungen
+- **Tieferes Verständnis** durch Erklären und Diskutieren von Konzepten
+- **Erweiterte Perspektiven** durch Einblicke aus verschiedenen Hintergründen und Denkweisen
+- **Nachhaltigere Motivation** durch soziale Bindung und geteilte Verantwortung
+- **Praxisnahes Lernen** durch kollaborative Arbeit an echten Projekten
+
+## Unser Implementierungsplan
+
+### Phase 1: Grundlagen (2025)
+
+- Einrichtung der ersten Learning Circles mit definierten Lernzielen
+- Entwicklung von Protokollen für effektives Peer-Learning
+- Aufbau einer digitalen Infrastruktur für Wissensaustausch
+- Pilotierung von 10 gemeinschaftsbasierten Lernprojekten
+
+### Phase 2: Wachstum (2026)
+
+- Skalierung auf 50+ Learning Circles in verschiedenen Fachbereichen
+- Integration von Mentoring-Strukturen in die Lerngemeinschaften
+- Entwicklung von Metriken zur Messung kollektiver Lerneffektivität
+- Erstellung von Playbooks für selbstorganisierte Lerngruppen
+
+### Phase 3: Reife (2027)
+
+- Etablierung eines selbsttragenden Ökosystems für gemeinschaftliches Lernen
+- Partnerschaft mit Bildungseinrichtungen für hybride Lernmodelle
+- Entwicklung von Zertifizierungen für in der Gemeinschaft erworbene Kompetenzen
+- Veröffentlichung von Forschung über die Effektivität kollektiver Lernmethoden
+
+## Mach mit bei unserer Vision
+
+Gemeinsames Lernen beginnt mit dir. Wir laden dich ein:
+
+- **Teil einer Lerngemeinschaft zu werden**, die deine Leidenschaft teilt
+- **Dein Wissen zu teilen** und von anderen zu lernen
+- **Lernressourcen beizusteuern**, die allen zugute kommen
+- **Feedback zu geben**, wie wir kollektives Lernen verbessern können
+
+---
+
+Gemeinsam können wir eine neue Ära des Lernens schaffen – inklusiver, effektiver und bereichernder als je zuvor. Bist du dabei?
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/de/gemeinsam-verdienen.md b/apps/bauntown/apps/landing/src/content/vision/de/gemeinsam-verdienen.md
new file mode 100644
index 000000000..719b832df
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/de/gemeinsam-verdienen.md
@@ -0,0 +1,119 @@
+---
+title: "Gemeinsam Verdienen: Neue Modelle für kollektive Wertschöpfung"
+description: "Unsere Vision für faire, transparente und gemeinschaftsorientierte Modelle der wirtschaftlichen Teilhabe im digitalen Zeitalter."
+pubDate: 2025-04-03
+category: "future"
+timeline: "2025-2028"
+status: "exploring"
+featured: true
+image: "/images/vision/gemeinsam-verdienen.png"
+contributors: ["Lena Fischer", "Till Schneider", "Michael Werner"]
+relatedLinks: [
+ {
+ title: "Platform Cooperativism",
+ url: "https://platform.coop/about/vision-and-advantages/"
+ },
+ {
+ title: "Web3 and Decentralized Value Creation",
+ url: "https://ethereum.org/en/dao/"
+ }
+]
+---
+
+# Gemeinsam Verdienen: Neue Modelle für kollektive Wertschöpfung
+
+In BaunTown glauben wir, dass die Zukunft der Arbeit und des wirtschaftlichen Erfolgs in gemeinschaftlichen Modellen liegt. "Gemeinsam Verdienen" ist unsere Vision für ein neues Paradigma, das faire Wertschöpfung und -verteilung in den Mittelpunkt stellt – eine Alternative zu traditionellen hierarchischen und zentralisierten Wirtschaftssystemen.
+
+## Die Probleme aktueller Wirtschaftsmodelle
+
+Das bestehende System der Wertschöpfung weist fundamentale Herausforderungen auf:
+
+- **Ungleiche Wertverteilung**: Die Schöpfer von Wert profitieren oft am wenigsten
+- **Zentralisierte Plattformen**: Wenige Unternehmen kontrollieren die digitalen Märkte
+- **Intransparente Vergütungssysteme**: Undurchsichtige Entscheidungen über Entlohnung
+- **Fehlende Anerkennung**: Viele Beiträge bleiben unsichtbar und unvergütet
+- **Kurzfristiges Denken**: Fokus auf schnelle Gewinne statt nachhaltiger Werterzeugung
+
+## Unsere Vision: Gemeinsam Verdienen
+
+### 1. Kollaborative Wertschöpfungsnetze
+
+Strukturen, die gemeinsame Wertschöpfung ermöglichen und belohnen:
+
+- **Beitragsbasierte Vergütungsmodelle**: Faire Belohnung basierend auf tatsächlichen Beiträgen
+- **Transparente Wertströme**: Sichtbarmachung der gesamten Wertschöpfungskette
+- **Dezentrale Entscheidungsstrukturen**: Gemeinsame Bestimmung von Prioritäten und Vergütung
+- **Komplementäre Fähigkeitsnetze**: Kombination verschiedener Kompetenzen für maximale Wertschöpfung
+
+### 2. Nachhaltige Einkommensquellen
+
+Neue Modelle für zuverlässige, diversifizierte Einkommen:
+
+- **Community-getriebene Projekte**: Gemeinsam finanzierte und umgesetzte Initiativen
+- **Mikro-Vergütungssysteme**: Automatisierte Belohnung auch für kleinste wertvolle Beiträge
+- **Langzeitige Beteiligungsmodelle**: Nachhaltige Einnahmen statt einmaliger Zahlungen
+- **Skill-basierte Einkommensströme**: Monetarisierung spezifischer Fähigkeiten in flexiblen Arrangements
+
+### 3. Kollektive Eigentums- und Beteiligungsmodelle
+
+Strukturen, die gemeinsames Eigentum an Wertschöpfung ermöglichen:
+
+- **Digitale Kooperativen**: Gemeinsam verwaltete und genutzte Plattformen
+- **Community-Owned Assets**: Kollektiver Besitz von Infrastruktur und geistigem Eigentum
+- **Dezentralisierte Autonome Organisationen (DAOs)**: Blockchain-basierte Gemeinschaftsstrukturen
+- **Bürgergetriebene Innovations-Pools**: Gemeinsame Finanzierung und Nutzung von Innovationen
+
+### 4. Technologie für wirtschaftliche Gerechtigkeit
+
+Tools, die faire Wertverteilung unterstützen:
+
+- **Transparente Abrechnungssysteme**: Offene Einblicke in Einnahmen und Vergütungen
+- **Automatisierte Gewinnverteilung**: Smart Contracts zur fairen Aufteilung von Einnahmen
+- **Reputationssysteme**: Erfassung und Belohnung verschiedener Wertbeiträge
+- **Distributed Ledger**: Unveränderliche Aufzeichnung von Beiträgen und Anteilen
+
+## Die Vorteile des gemeinsamen Verdienens
+
+Dieser Ansatz bietet transformative Vorteile:
+
+- **Gerechtere Verteilung** von wirtschaftlichem Erfolg
+- **Höhere Motivation** durch direkte Beteiligung am Erfolg
+- **Nachhaltigere Geschäftsmodelle** durch langfristige Anreize
+- **Resilientere Einkommensstrukturen** durch Diversifizierung
+- **Stärkere Gemeinschaften** durch gemeinsame wirtschaftliche Interessen
+
+## Unser Implementierungsplan
+
+### Phase 1: Exploration (2025)
+
+- Experimentieren mit verschiedenen Einkommens- und Beteiligungsmodellen
+- Aufbau der BaunTown Contribution Platform zur Sichtbarmachung von Wertbeiträgen
+- Pilotierung von 3 kollaborativen Geschäftsmodellen in verschiedenen Domänen
+- Entwicklung von Frameworks für transparente Wertschöpfungsketten
+
+### Phase 2: Etablierung (2026-2027)
+
+- Skalierung auf 10+ nachhaltige kollektive Einkommensströme
+- Implementierung fortgeschrittener Tools für automatisierte Gewinnverteilung
+- Gründung der ersten vollständig community-getriebenen Kooperativen
+- Entwicklung eines Bildungsprogramms für neue Wirtschaftsmodelle
+
+### Phase 3: Transformation (2027-2028)
+
+- Aufbau eines Ökosystems vernetzter kollaborativer Wirtschaftseinheiten
+- Partnerschaft mit traditionellen Unternehmen für hybride Wertschöpfungsmodelle
+- Einflussnahme auf politische Rahmenbedingungen für gemeinschaftliche Wirtschaftsmodelle
+- Veröffentlichung von Forschung zur Effektivität kollaborativer Wirtschaftsformen
+
+## Werde Teil der Bewegung
+
+Unsere Vision für "Gemeinsam Verdienen" lebt vom aktiven Engagement. Wir laden dich ein:
+
+- **An Pilotprojekten teilzunehmen**, die neue Vergütungsmodelle erproben
+- **Deine Erfahrungen mit alternativen Wirtschaftsmodellen zu teilen**
+- **Neue Ideen für gemeinsame Wertschöpfung einzubringen**
+- **Teil eines Netzwerks zu werden**, das faire wirtschaftliche Teilhabe priorisiert
+
+---
+
+Durch die Entwicklung und Umsetzung neuer Modelle des "Gemeinsam Verdienens" können wir ein Wirtschaftssystem schaffen, das nicht nur effizient, sondern auch gerecht und inklusiv ist. Bist du bereit, mit uns neue Wege des wirtschaftlichen Erfolgs zu erkunden?
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/de/local-first-web.md b/apps/bauntown/apps/landing/src/content/vision/de/local-first-web.md
new file mode 100644
index 000000000..e3af40698
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/de/local-first-web.md
@@ -0,0 +1,150 @@
+---
+title: "Local-First Web: Die Zukunft der Anwendungsentwicklung"
+description: "Unsere Vision für die Entwicklung von Webanwendungen, die offline funktionieren, Dateneigentum respektieren und Zusammenarbeit in Echtzeit ermöglichen."
+pubDate: 2025-03-28
+category: "technology"
+timeline: "2025-2030"
+status: "current"
+featured: true
+image: "/images/vision/local-first-web.png"
+contributors: ["Marie Schmidt", "Thomas Weber", "Lisa Müller"]
+relatedLinks: [
+ {
+ title: "Local-First Software",
+ url: "https://www.inkandswitch.com/local-first/"
+ },
+ {
+ title: "CRDTs for Mortals",
+ url: "https://tinybase.org/blog/crdts-for-mortals/"
+ }
+]
+---
+
+# Local-First Web: Die Zukunft der Anwendungsentwicklung
+
+Bei BaunTown glauben wir, dass die Zukunft des Webs in Local-First-Anwendungen liegt. Dies sind Anwendungen, die vorrangig lokal auf den Geräten der Benutzer laufen, ihre Daten lokal speichern und trotzdem die Zusammenarbeit und Synchronisation zwischen verschiedenen Geräten und Benutzern ermöglichen.
+
+## Warum Local-First?
+
+Die heutigen Webanwendungen basieren größtenteils auf einer Client-Server-Architektur, bei der Daten hauptsächlich auf Servern gespeichert werden. Dies bringt einige Nachteile mit sich:
+
+- **Abhängigkeit von der Internetverbindung**: Keine oder eingeschränkte Funktionalität ohne Internet
+- **Latenz**: Verzögerungen bei Benutzerinteraktionen aufgrund von Netzwerkanfragen
+- **Dateneigentum**: Die Daten der Benutzer werden auf Servern von Unternehmen gespeichert
+- **Datenschutz**: Erhöhtes Risiko für Datenlecks und -missbrauch
+- **Lebensdauer**: Anwendungen können abgeschaltet werden, wenn Unternehmen ihre Strategie ändern
+
+Local-First-Anwendungen lösen diese Probleme, indem sie:
+
+1. **Offline-Funktionalität** priorisieren
+2. Die **Datenhoheit** zurück an die Benutzer geben
+3. **Sofortige Reaktionsfähigkeit** bieten
+4. **Langlebigkeit** der Daten sicherstellen
+5. **Echtzeit-Zusammenarbeit** ohne zentrale Server ermöglichen
+
+## Die technische Grundlage
+
+Unsere Vision für Local-First-Anwendungen basiert auf mehreren Schlüsseltechnologien:
+
+### CRDTs (Conflict-free Replicated Data Types)
+
+CRDTs sind spezielle Datenstrukturen, die es ermöglichen, Daten auf mehreren Geräten zu replizieren und zu bearbeiten, ohne komplexe Konfliktlösungsstrategien zu benötigen. Sie bilden die Grundlage für die Echtzeit-Zusammenarbeit in Local-First-Anwendungen.
+
+```javascript
+// Vereinfachtes Beispiel eines CRDT-basierten Texteditors
+const doc = new YDoc();
+const text = doc.getText('shared-text');
+
+// Lokale Änderungen
+text.insert(0, 'Hello ');
+text.insert(6, 'World');
+
+// Diese Änderungen können mit anderen Geräten synchronisiert werden,
+// ohne Konflikte zu verursachen, selbst wenn die Geräte offline waren
+```
+
+### Web Storage APIs
+
+Moderne Browser bieten leistungsfähige Speicher-APIs wie IndexedDB und FileSystem API, die es ermöglichen, große Datenmengen lokal zu speichern und effizient zu verwalten.
+
+### P2P-Synchronisation
+
+Für die Synchronisation zwischen Geräten setzen wir auf Peer-to-Peer-Technologien, die es ermöglichen, Daten direkt zwischen Geräten zu übertragen, ohne einen zentralen Server zu benötigen.
+
+## Unsere Initiativen
+
+Bei BaunTown arbeiten wir an mehreren Projekten, um diese Vision zu verwirklichen:
+
+### 1. LocalStore
+
+Ein datenbankunabhängiges Framework für die lokale Datenspeicherung in Webanwendungen, das eine einheitliche API für verschiedene Speicher-Backends bietet und nahtlos mit CRDTs integriert werden kann.
+
+### 2. SyncProtocol
+
+Ein offenes Protokoll für die Synchronisation von Daten zwischen verschiedenen Geräten, das sowohl P2P-Kommunikation als auch Server-basierte Synchronisation unterstützt.
+
+### 3. LocalKit
+
+Ein UI-Komponenten-Kit, das speziell für Local-First-Anwendungen entwickelt wurde und Offline-Indikatoren, Synchronisationskontrollen und andere wichtige Benutzeroberflächen-Elemente bietet.
+
+## Anwendungsfälle
+
+Local-First-Anwendungen eignen sich besonders gut für:
+
+- **Kreativwerkzeuge**: Textverarbeitung, Grafikdesign, Audiobearbeitung
+- **Wissensmanagementsysteme**: Notizen-Apps, PKM-Tools, Wikis
+- **Zusammenarbeit**: Projektmanagement, Dokumentenerstellung, Chat
+- **Persönliche Tools**: Finanztracker, Gesundheits-Apps, Tagebücher
+
+## Roadmap
+
+Unsere Roadmap für die Verwirklichung dieser Vision umfasst:
+
+### Phase 1: Grundlagen (2025-2026)
+
+- Entwicklung der Core-Bibliotheken (LocalStore, SyncProtocol)
+- Veröffentlichung von Open-Source-Referenzimplementierungen
+- Erstellung von Dokumentation und Tutorials
+
+### Phase 2: Ökosystem (2026-2028)
+
+- Aufbau einer Community rund um Local-First-Technologien
+- Integration mit beliebten Frameworks (React, Vue, Svelte)
+- Entwicklung von Tools für die einfache Erstellung von Local-First-Anwendungen
+
+### Phase 3: Mainstream-Adoption (2028-2030)
+
+- Zusammenarbeit mit größeren Plattformen und Unternehmen
+- Standardisierung von Protokollen und APIs
+- Erweiterung auf mobile Plattformen und Desktop-Anwendungen
+
+## Herausforderungen und Lösungsansätze
+
+Wir sind uns der Herausforderungen bewusst, die mit dieser Vision verbunden sind:
+
+### Datensicherheit
+
+Local-First bedeutet nicht, dass Daten ungeschützt sind. Wir arbeiten an Ende-zu-Ende-Verschlüsselungslösungen, die sowohl die lokale Speicherung als auch die Synchronisation absichern.
+
+### Skalierbarkeit
+
+P2P-Netzwerke stehen vor Herausforderungen bei der Skalierung. Unser hybrider Ansatz kombiniert P2P-Kommunikation mit optionalen Server-Komponenten für größere Anwendungsfälle.
+
+### UX-Komplexität
+
+Die Benutzeroberfläche für Offline-Funktionalität und Synchronisation kann komplex sein. Unser LocalKit-Projekt zielt darauf ab, bewährte UX-Muster zu etablieren und zu standardisieren.
+
+## Mitmachen
+
+Wir laden Entwickler, Designer und Visionäre ein, sich an dieser Reise zu beteiligen:
+
+- **Beitragen** zu unseren Open-Source-Projekten
+- **Experimentieren** mit Local-First-Technologien in eigenen Projekten
+- **Teilen** von Erfahrungen und Best Practices mit der Community
+- **Feedback geben** zu unseren Initiativen und Roadmap
+
+Gemeinsam können wir ein Web aufbauen, das Benutzer in den Mittelpunkt stellt, Dateneigentum respektiert und echte Zusammenarbeit ermöglicht, ohne von zentralisierten Diensten abhängig zu sein.
+
+---
+
+Hast du Ideen oder Feedback zu dieser Vision? Wir freuen uns, von dir zu hören!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/en/collaborative-building.md b/apps/bauntown/apps/landing/src/content/vision/en/collaborative-building.md
new file mode 100644
index 000000000..259681430
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/en/collaborative-building.md
@@ -0,0 +1,119 @@
+---
+title: "Collaborative Building: Collective Technology Development"
+description: "Our vision for a new era of community-based development of technologies and digital solutions."
+pubDate: 2025-04-02
+category: "technology"
+timeline: "2025-2027"
+status: "current"
+featured: true
+image: "/images/vision/gemeinsam-bauen.png"
+contributors: ["Marcus Hoffman", "Judith Berg", "Till Schneider"]
+relatedLinks: [
+ {
+ title: "Open Source Development Model",
+ url: "https://opensource.org/osd"
+ },
+ {
+ title: "Collaborative Innovation Networks",
+ url: "https://en.wikipedia.org/wiki/Collaborative_innovation_network"
+ }
+]
+---
+
+# Collaborative Building: Collective Technology Development
+
+At BaunTown, we believe that the best digital solutions are not created in isolation but through community collaboration. Our vision for "Collaborative Building" defines a new approach to the collective development of technological innovations - beyond traditional organizational boundaries and geographic constraints.
+
+## The Challenges of Modern Technology Development
+
+Despite many advances in collaboration, we still face significant hurdles:
+
+- **Fragmented expertise**: Specialized knowledge is distributed across many individuals and organizations
+- **Resource imbalance**: Unequal access to tools, infrastructure, and development resources
+- **Redundant development**: Parallel solution development without knowledge exchange
+- **Sustainability issues**: Projects often fail due to lack of community support
+- **Innovation silos**: Valuable ideas remain trapped in closed teams
+
+## Our Vision: Collaborative Building
+
+### 1. Open Innovation Ecosystems
+
+Structures that enable collaboration across traditional boundaries:
+
+- **Modular architecture**: System design that facilitates and encourages distributed contributions
+- **Public development processes**: Transparent decisions and visible development steps
+- **Collaborative roadmaps**: Shared vision and planning for technological development
+- **Inclusive governance model**: Decision structures that involve various stakeholders
+
+### 2. Community Resource Pools
+
+Shared resources that democratize development:
+
+- **Shared infrastructure**: Access to development, testing, and deployment environments
+- **Knowledge databases**: Collectively maintained technical documentation and best practices
+- **Skill-sharing networks**: Exchange of expertise for specific development challenges
+- **Crowd-funded development**: Shared funding models for important features
+
+### 3. Organic Collaboration
+
+Processes that foster natural, effective collaboration:
+
+- **Digital guild**: Master-apprentice models in modern software development
+- **Flexible contribution models**: Opportunities for participation at various levels and timescales
+- **Synchronous and asynchronous collaboration**: Tools and processes for globally distributed teams
+- **Community health monitoring**: Metrics and practices for sustainable communities
+
+### 4. Technology-Supported Collaboration
+
+Tools that enable distributed collaboration:
+
+- **Collaborative IDEs**: Environments for real-time programming in teams
+- **Distributed version control+**: Enhanced features for complex collaboration
+- **AI-assisted coordination**: Intelligent systems to optimize teamwork
+- **Visualization tools**: Representation of complex systems for better shared understanding
+
+## The Benefits of Collaborative Building
+
+This model offers transformative advantages:
+
+- **Accelerated innovation** through utilizing collective intelligence
+- **Higher quality** through diverse perspectives and broader testing
+- **Sustainable solutions** with broad community support
+- **Democratized access** to technology development
+- **More resilient systems** through distributed responsibility and maintenance
+
+## Our Implementation Plan
+
+### Phase 1: Foundation (2025)
+
+- Setup of the BaunTown Collaboration Platform for distributed development
+- Definition of standards and protocols for effective collaboration
+- Initiation of 5 pilot projects with open development methodology
+- Building an initial network of developers, designers, and domain experts
+
+### Phase 2: Expansion (2026)
+
+- Scaling to 25+ active collaboration projects in various domains
+- Implementation of advanced tools for distributed collaboration
+- Development of metrics to measure collaboration effectiveness
+- Building partnerships with educational institutions and companies
+
+### Phase 3: Consolidation (2027)
+
+- Establishment of a self-sustaining ecosystem for collaboration
+- Publication of research on effective collaboration models
+- Development of educational programs for collaborative development
+- Foundation of an innovation hub for complex technological challenges
+
+## Be Part of the Builder Community
+
+Our vision for "Collaborative Building" thrives on active participation. We invite you to:
+
+- **Participate in open projects** that address your interests or expertise
+- **Share resources and knowledge** that benefit everyone
+- **Propose new collaboration models** based on your experiences
+- **Build bridges** between different communities and expertise
+
+---
+
+Through collaborative building, we can create technological solutions that are not only technically excellent but also reflect the collective wisdom and diversity of our community. Are you ready to build with us?
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/en/collaborative-earning.md b/apps/bauntown/apps/landing/src/content/vision/en/collaborative-earning.md
new file mode 100644
index 000000000..fccc78dc9
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/en/collaborative-earning.md
@@ -0,0 +1,119 @@
+---
+title: "Collaborative Earning: New Models for Collective Value Creation"
+description: "Our vision for fair, transparent, and community-oriented models of economic participation in the digital age."
+pubDate: 2025-04-03
+category: "future"
+timeline: "2025-2028"
+status: "exploring"
+featured: true
+image: "/images/vision/gemeinsam-verdienen.png"
+contributors: ["Lena Fischer", "Till Schneider", "Michael Werner"]
+relatedLinks: [
+ {
+ title: "Platform Cooperativism",
+ url: "https://platform.coop/about/vision-and-advantages/"
+ },
+ {
+ title: "Web3 and Decentralized Value Creation",
+ url: "https://ethereum.org/en/dao/"
+ }
+]
+---
+
+# Collaborative Earning: New Models for Collective Value Creation
+
+At BaunTown, we believe that the future of work and economic success lies in community models. "Collaborative Earning" is our vision for a new paradigm that puts fair value creation and distribution at the center – an alternative to traditional hierarchical and centralized economic systems.
+
+## The Problems of Current Economic Models
+
+The existing system of value creation presents fundamental challenges:
+
+- **Unequal value distribution**: The creators of value often benefit the least
+- **Centralized platforms**: Few companies control digital markets
+- **Non-transparent compensation systems**: Opaque decisions about remuneration
+- **Lack of recognition**: Many contributions remain invisible and unrewarded
+- **Short-term thinking**: Focus on quick profits instead of sustainable value creation
+
+## Our Vision: Collaborative Earning
+
+### 1. Collaborative Value Creation Networks
+
+Structures that enable and reward joint value creation:
+
+- **Contribution-based compensation models**: Fair rewards based on actual contributions
+- **Transparent value flows**: Visibility of the entire value chain
+- **Decentralized decision structures**: Joint determination of priorities and compensation
+- **Complementary skill networks**: Combination of different competencies for maximum value creation
+
+### 2. Sustainable Income Sources
+
+New models for reliable, diversified income:
+
+- **Community-driven projects**: Jointly financed and implemented initiatives
+- **Micro-compensation systems**: Automated rewards even for the smallest valuable contributions
+- **Long-term participation models**: Sustainable revenue instead of one-time payments
+- **Skill-based income streams**: Monetization of specific skills in flexible arrangements
+
+### 3. Collective Ownership and Participation Models
+
+Structures that enable shared ownership of value creation:
+
+- **Digital cooperatives**: Jointly managed and used platforms
+- **Community-owned assets**: Collective ownership of infrastructure and intellectual property
+- **Decentralized Autonomous Organizations (DAOs)**: Blockchain-based community structures
+- **Citizen-driven innovation pools**: Joint financing and use of innovations
+
+### 4. Technology for Economic Justice
+
+Tools that support fair value distribution:
+
+- **Transparent accounting systems**: Open insights into revenues and compensation
+- **Automated profit distribution**: Smart contracts for fair distribution of revenues
+- **Reputation systems**: Capturing and rewarding different value contributions
+- **Distributed ledger**: Immutable recording of contributions and shares
+
+## The Benefits of Collaborative Earning
+
+This approach offers transformative advantages:
+
+- **More equitable distribution** of economic success
+- **Higher motivation** through direct participation in success
+- **More sustainable business models** through long-term incentives
+- **More resilient income structures** through diversification
+- **Stronger communities** through shared economic interests
+
+## Our Implementation Plan
+
+### Phase 1: Exploration (2025)
+
+- Experimenting with different income and participation models
+- Building the BaunTown Contribution Platform to visualize value contributions
+- Piloting 3 collaborative business models in different domains
+- Development of frameworks for transparent value chains
+
+### Phase 2: Establishment (2026-2027)
+
+- Scaling to 10+ sustainable collective income streams
+- Implementation of advanced tools for automated profit distribution
+- Founding the first fully community-driven cooperatives
+- Development of an educational program for new economic models
+
+### Phase 3: Transformation (2027-2028)
+
+- Building an ecosystem of interconnected collaborative economic units
+- Partnership with traditional companies for hybrid value creation models
+- Influencing political frameworks for community economic models
+- Publication of research on the effectiveness of collaborative economic forms
+
+## Join the Movement
+
+Our vision for "Collaborative Earning" thrives on active engagement. We invite you to:
+
+- **Participate in pilot projects** that test new compensation models
+- **Share your experiences with alternative economic models**
+- **Contribute new ideas for joint value creation**
+- **Become part of a network** that prioritizes fair economic participation
+
+---
+
+By developing and implementing new models of "Collaborative Earning," we can create an economic system that is not only efficient but also fair and inclusive. Are you ready to explore new ways of economic success with us?
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/en/collaborative-learning.md b/apps/bauntown/apps/landing/src/content/vision/en/collaborative-learning.md
new file mode 100644
index 000000000..2634b0a20
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/en/collaborative-learning.md
@@ -0,0 +1,109 @@
+---
+title: "Collaborative Learning: The Power of Collective Education"
+description: "Our vision for a community-based educational model that complements and extends traditional forms of learning."
+pubDate: 2025-04-01
+category: "community"
+timeline: "2025-2027"
+status: "current"
+featured: true
+image: "/images/vision/gemeinsam-lernen.png"
+contributors: ["Sophie Klein", "David Wagner", "Till Schneider"]
+relatedLinks: [
+ {
+ title: "Community of Practice Framework",
+ url: "https://www.communityofpractice.ca/background/what-is-a-community-of-practice/"
+ },
+ {
+ title: "Peer Learning Strategies",
+ url: "https://www.mckinsey.com/industries/education/our-insights/how-to-create-learning-communities-in-times-of-crisis-five-design-principles"
+ }
+]
+---
+
+# Collaborative Learning: The Power of Collective Education
+
+At BaunTown, we believe in the transformative power of learning together. In a world where technology and knowledge grow exponentially, no individual can master everything alone. Our vision is an ecosystem where learning is amplified, accelerated, and enriched through community.
+
+## Why Collaborative Learning is Necessary
+
+Traditional education faces significant challenges:
+
+- **Information overload**: The amount of technical knowledge doubles every 18 months
+- **Isolated learning**: Learning alone often leads to knowledge gaps and missing perspectives
+- **Theory-practice gap**: Formal education rarely conveys practical application in real scenarios
+- **Motivation hurdles**: Without community, long-term learning often lacks consistency
+
+## Our Vision for Collective Learning
+
+### 1. Peer Learning Networks
+
+We create structured communities where knowledge flows:
+
+- **Knowledge exchange circles**: Regular sessions where members share their expertise
+- **Skill mapping**: Identification of complementary skills for optimal knowledge transfer
+- **Shared learning paths**: Coordinated learning journeys for groups with similar goals
+- **Mutual accountability**: Systems that promote continuous engagement
+
+### 2. Practice-Oriented Learning Ecosystems
+
+Learning through active doing in real projects:
+
+- **Project-based learning**: Competency development through work on real challenges
+- **Learning organizations**: Communities that integrate continuous learning into their structure
+- **Iterative feedback**: Rapid learning cycles through constant community feedback
+- **Documented learning journeys**: Sharing insights and challenges as learning resources
+
+### 3. Technology-Supported Collaboration
+
+Digital tools that enable collaborative learning:
+
+- **Synchronous collaboration spaces**: Virtual environments for real-time collaboration
+- **Knowledge repositories**: Community-curated collections of learning content
+- **Learning analytics**: Data-driven insights into collective learning processes
+- **AI-supported learning paths**: Intelligent systems that suggest optimal learning communities
+
+## The Benefits of Collaborative Learning
+
+Collective learning offers unique advantages:
+
+- **Accelerated skill development** through access to diverse knowledge and experiences
+- **Deeper understanding** through explaining and discussing concepts
+- **Expanded perspectives** through insights from different backgrounds and ways of thinking
+- **More sustainable motivation** through social bonds and shared responsibility
+- **Practical learning** through collaborative work on real projects
+
+## Our Implementation Plan
+
+### Phase 1: Foundations (2025)
+
+- Establishment of the first Learning Circles with defined learning objectives
+- Development of protocols for effective peer learning
+- Building a digital infrastructure for knowledge exchange
+- Piloting 10 community-based learning projects
+
+### Phase 2: Growth (2026)
+
+- Scaling to 50+ Learning Circles in various disciplines
+- Integration of mentoring structures into learning communities
+- Development of metrics to measure collective learning effectiveness
+- Creation of playbooks for self-organized learning groups
+
+### Phase 3: Maturity (2027)
+
+- Establishment of a self-sustaining ecosystem for community learning
+- Partnership with educational institutions for hybrid learning models
+- Development of certifications for competencies acquired in the community
+- Publication of research on the effectiveness of collective learning methods
+
+## Join Our Vision
+
+Collaborative learning begins with you. We invite you to:
+
+- **Become part of a learning community** that shares your passion
+- **Share your knowledge** and learn from others
+- **Contribute learning resources** that benefit everyone
+- **Provide feedback** on how we can improve collective learning
+
+---
+
+Together, we can create a new era of learning – more inclusive, effective, and enriching than ever before. Are you in?
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/en/community-learning.md b/apps/bauntown/apps/landing/src/content/vision/en/community-learning.md
new file mode 100644
index 000000000..77ab1d610
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/en/community-learning.md
@@ -0,0 +1,148 @@
+---
+title: "Community-Based Learning: The Future of Developer Education"
+description: "Our vision for a collaborative, practice-oriented learning model based on community interaction and real-world projects."
+pubDate: 2025-03-15
+category: "community"
+timeline: "2025-2028"
+status: "planned"
+featured: true
+image: "/images/vision/community-learning.png"
+contributors: ["David Wagner", "Sophie Klein", "Marcus Hoffman"]
+relatedLinks: [
+ {
+ title: "Community of Practice Framework",
+ url: "https://www.communityofpractice.ca/background/what-is-a-community-of-practice/"
+ },
+ {
+ title: "The Future of Learning Communities",
+ url: "https://www.mckinsey.com/industries/education/our-insights/how-to-create-learning-communities-in-times-of-crisis-five-design-principles"
+ }
+]
+---
+
+# Community-Based Learning: The Future of Developer Education
+
+At BaunTown, we believe that learning programming and software development is most effective within an active, supportive community. Our vision is to create a learning ecosystem that complements and partially replaces traditional educational models with practice-oriented, community-based learning paths.
+
+## The Challenges of Traditional Education
+
+The way developers learn today faces several challenges:
+
+- **Theory-practice gap**: Traditional courses and bootcamps often focus on isolated exercises that have little to do with real projects
+- **Lack of guidance**: Self-study leaves many learners without direction or feedback
+- **Artificial learning environments**: Most learning platforms simulate development environments instead of working in real ones
+- **Isolated learning**: Learning complex skills alone is inefficient and demotivating
+- **Rapid technological changes**: Curricula and courses can't keep pace with the industry
+
+## Our Vision for Community-Based Learning
+
+We see the future of learning in a community-centered approach with the following key elements:
+
+### 1. Learning by Contributing
+
+Learners work on real open-source projects with actual impact, not isolated exercises. This provides:
+
+- **Authentic experience** with real development workflows
+- **Immediate feedback** from experienced developers
+- **Visible progress** through contributions that are actually used
+- **Portfolio building** parallel to the learning process
+
+### 2. Peer-Learning Communities
+
+Small, focused groups of learners who collaborate and learn from each other:
+
+- **Mutual support** and motivation
+- **Diverse perspectives** and solution approaches
+- **Development of soft skills** like communication and collaboration
+- **Building a professional network** while learning
+
+### 3. Mentorship Ecosystem
+
+A structured system connecting mentors and learners:
+
+- **1:1 mentorship** for personalized guidance
+- **Group mentorship** for broader perspectives
+- **Mutual mentorship** between peers
+- **Mentoring cycles** that encourage learners to become mentors themselves
+
+### 4. Practice-Oriented Missions
+
+Instead of abstract courses, we offer "missions" - real challenges with clear goals:
+
+- **Project-based learning** in a structured framework
+- **Progression from simple to complex** in a natural way
+- **Interdisciplinary tasks** that connect different skills
+- **Team-based challenges** that promote collaboration
+
+## The Technological Foundation
+
+To realize this vision, we're developing several technologies and platforms:
+
+### BaunTown Learning Hub
+
+A platform that:
+
+- **Curates learning paths** based on community feedback and industry trends
+- **Organizes missions and projects** for various difficulty levels
+- **Tracks progress** through contributions to open-source projects
+- **Connects mentors and learners** based on goals and expertise
+
+### Collaboration Spaces
+
+Virtual environments for collaborative learning:
+
+- **Real-time code collaboration** with integrated learning resources
+- **Synchronous and asynchronous communication tools**
+- **Documentation and knowledge management tools**
+- **Integrated code review and feedback mechanisms**
+
+### Learning Analytics
+
+Data-driven tools that:
+
+- **Optimize personal learning paths** based on strengths and weaknesses
+- **Visualize progress** multi-dimensionally
+- **Measure and promote community health**
+- **Evaluate mentorship effectiveness** for continuous improvement
+
+## Implementation Plan
+
+Our roadmap for realizing this vision:
+
+### Phase 1: Foundations (2025)
+
+- Launch of the first version of BaunTown Learning Hub
+- Establishment of pilot learning communities in selected technology areas
+- Development of a mentor training program
+- Creation of the first mission sets
+
+### Phase 2: Growth (2026-2027)
+
+- Expansion to more technology areas and difficulty levels
+- Integration with popular open-source projects for learning missions
+- Building a recognition and certification system
+- Development of tools for community health and growth
+
+### Phase 3: Scaling (2027-2028)
+
+- Building a self-sustaining mentorship network
+- Partnership with companies for practice-oriented industry projects
+- Development of enterprise solutions for internal learning communities
+- Internationalization and cultural adaptation
+
+## Collaboration and Contribution
+
+This vision thrives on community involvement. We invite you to:
+
+- **Provide feedback** on our learning concepts and tools
+- **Serve as a mentor** for aspiring developers
+- **Design learning missions** based on your expertise
+- **Share your own learning journey** to help others
+
+## Shaping the Future of Learning
+
+We believe that community-based learning is not only more effective but also represents a more inclusive, sustainable form of knowledge exchange. By blurring the boundaries between learning, working, and contributing, we create an ecosystem where continuous learning is natural and enriching.
+
+---
+
+Do you have ideas or would you like to contribute to this vision? We look forward to your involvement!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/en/local-first-web.md b/apps/bauntown/apps/landing/src/content/vision/en/local-first-web.md
new file mode 100644
index 000000000..985dd8a4a
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/en/local-first-web.md
@@ -0,0 +1,150 @@
+---
+title: "Local-First Web: The Future of Application Development"
+description: "Our vision for developing web applications that work offline, respect data ownership, and enable real-time collaboration."
+pubDate: 2025-03-28
+category: "technology"
+timeline: "2025-2030"
+status: "current"
+featured: true
+image: "/images/vision/local-first-web.png"
+contributors: ["Marie Schmidt", "Thomas Weber", "Lisa Miller"]
+relatedLinks: [
+ {
+ title: "Local-First Software",
+ url: "https://www.inkandswitch.com/local-first/"
+ },
+ {
+ title: "CRDTs for Mortals",
+ url: "https://tinybase.org/blog/crdts-for-mortals/"
+ }
+]
+---
+
+# Local-First Web: The Future of Application Development
+
+At BaunTown, we believe the future of the web lies in local-first applications. These are applications that primarily run locally on users' devices, store their data locally, and yet enable collaboration and synchronization between different devices and users.
+
+## Why Local-First?
+
+Today's web applications are largely based on a client-server architecture, where data is primarily stored on servers. This brings several disadvantages:
+
+- **Dependence on internet connection**: No or limited functionality without internet
+- **Latency**: Delays in user interactions due to network requests
+- **Data ownership**: Users' data is stored on company servers
+- **Privacy**: Increased risk of data leaks and misuse
+- **Longevity**: Applications can be shut down when companies change their strategy
+
+Local-first applications solve these problems by:
+
+1. **Prioritizing offline functionality**
+2. Giving **data sovereignty** back to users
+3. Providing **immediate responsiveness**
+4. Ensuring **longevity** of data
+5. Enabling **real-time collaboration** without central servers
+
+## The Technical Foundation
+
+Our vision for local-first applications is based on several key technologies:
+
+### CRDTs (Conflict-free Replicated Data Types)
+
+CRDTs are special data structures that allow data to be replicated and edited on multiple devices without requiring complex conflict resolution strategies. They form the foundation for real-time collaboration in local-first applications.
+
+```javascript
+// Simplified example of a CRDT-based text editor
+const doc = new YDoc();
+const text = doc.getText('shared-text');
+
+// Local changes
+text.insert(0, 'Hello ');
+text.insert(6, 'World');
+
+// These changes can be synchronized with other devices
+// without causing conflicts, even if the devices were offline
+```
+
+### Web Storage APIs
+
+Modern browsers offer powerful storage APIs like IndexedDB and FileSystem API, which allow large amounts of data to be stored locally and managed efficiently.
+
+### P2P Synchronization
+
+For synchronization between devices, we rely on peer-to-peer technologies that allow data to be transferred directly between devices without requiring a central server.
+
+## Our Initiatives
+
+At BaunTown, we're working on several projects to realize this vision:
+
+### 1. LocalStore
+
+A database-agnostic framework for local data storage in web applications that provides a unified API for different storage backends and can be seamlessly integrated with CRDTs.
+
+### 2. SyncProtocol
+
+An open protocol for synchronizing data between different devices, supporting both P2P communication and server-based synchronization.
+
+### 3. LocalKit
+
+A UI component kit specifically designed for local-first applications, providing offline indicators, synchronization controls, and other important user interface elements.
+
+## Use Cases
+
+Local-first applications are particularly well-suited for:
+
+- **Creative tools**: Word processing, graphic design, audio editing
+- **Knowledge management systems**: Note-taking apps, PKM tools, wikis
+- **Collaboration**: Project management, document creation, chat
+- **Personal tools**: Finance trackers, health apps, journals
+
+## Roadmap
+
+Our roadmap for realizing this vision includes:
+
+### Phase 1: Foundations (2025-2026)
+
+- Development of core libraries (LocalStore, SyncProtocol)
+- Release of open-source reference implementations
+- Creation of documentation and tutorials
+
+### Phase 2: Ecosystem (2026-2028)
+
+- Building a community around local-first technologies
+- Integration with popular frameworks (React, Vue, Svelte)
+- Development of tools for easy creation of local-first applications
+
+### Phase 3: Mainstream Adoption (2028-2030)
+
+- Collaboration with larger platforms and companies
+- Standardization of protocols and APIs
+- Extension to mobile platforms and desktop applications
+
+## Challenges and Solution Approaches
+
+We are aware of the challenges associated with this vision:
+
+### Data Security
+
+Local-first doesn't mean that data is unprotected. We're working on end-to-end encryption solutions that secure both local storage and synchronization.
+
+### Scalability
+
+P2P networks face challenges with scaling. Our hybrid approach combines P2P communication with optional server components for larger use cases.
+
+### UX Complexity
+
+The user interface for offline functionality and synchronization can be complex. Our LocalKit project aims to establish and standardize proven UX patterns.
+
+## Get Involved
+
+We invite developers, designers, and visionaries to join this journey:
+
+- **Contribute** to our open-source projects
+- **Experiment** with local-first technologies in your own projects
+- **Share** experiences and best practices with the community
+- **Provide feedback** on our initiatives and roadmap
+
+Together, we can build a web that puts users at the center, respects data ownership, and enables true collaboration without depending on centralized services.
+
+---
+
+Do you have ideas or feedback about this vision? We'd love to hear from you!
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/it/apprendimento-collaborativo.md b/apps/bauntown/apps/landing/src/content/vision/it/apprendimento-collaborativo.md
new file mode 100644
index 000000000..de938fe47
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/it/apprendimento-collaborativo.md
@@ -0,0 +1,109 @@
+---
+title: "Apprendimento Collaborativo: Il Potere dell'Educazione Collettiva"
+description: "La nostra visione per un modello educativo basato sulla comunità che integra ed estende le forme tradizionali di apprendimento."
+pubDate: 2025-04-01
+category: "community"
+timeline: "2025-2027"
+status: "current"
+featured: true
+image: "/images/vision/gemeinsam-lernen.png"
+contributors: ["Sophie Klein", "David Wagner", "Till Schneider"]
+relatedLinks: [
+ {
+ title: "Community of Practice Framework",
+ url: "https://www.communityofpractice.ca/background/what-is-a-community-of-practice/"
+ },
+ {
+ title: "Peer Learning Strategies",
+ url: "https://www.mckinsey.com/industries/education/our-insights/how-to-create-learning-communities-in-times-of-crisis-five-design-principles"
+ }
+]
+---
+
+# Apprendimento Collaborativo: Il Potere dell'Educazione Collettiva
+
+A BaunTown, crediamo nel potere trasformativo dell'apprendimento collettivo. In un mondo in cui la tecnologia e la conoscenza crescono in modo esponenziale, nessun individuo può padroneggiare tutto da solo. La nostra visione è un ecosistema in cui l'apprendimento viene amplificato, accelerato e arricchito attraverso la comunità.
+
+## Perché l'Apprendimento Collaborativo è Necessario
+
+L'educazione tradizionale si trova di fronte a sfide significative:
+
+- **Sovraccarico di informazioni**: La quantità di conoscenze tecniche raddoppia ogni 18 mesi
+- **Apprendimento isolato**: Imparare da soli porta spesso a lacune di conoscenza e prospettive mancanti
+- **Divario teoria-pratica**: L'educazione formale raramente trasmette l'applicazione pratica in scenari reali
+- **Ostacoli motivazionali**: Senza comunità, l'apprendimento a lungo termine spesso manca di costanza
+
+## La Nostra Visione per l'Apprendimento Collettivo
+
+### 1. Reti di Apprendimento tra Pari
+
+Creiamo comunità strutturate dove la conoscenza fluisce:
+
+- **Circoli di scambio di conoscenze**: Sessioni regolari in cui i membri condividono la loro esperienza
+- **Mappatura delle competenze**: Identificazione di abilità complementari per un trasferimento ottimale delle conoscenze
+- **Percorsi di apprendimento condivisi**: Viaggi di apprendimento coordinati per gruppi con obiettivi simili
+- **Responsabilità reciproca**: Sistemi che promuovono l'impegno continuo
+
+### 2. Ecosistemi di Apprendimento Orientati alla Pratica
+
+Imparare attraverso il fare attivo in progetti reali:
+
+- **Apprendimento basato su progetti**: Sviluppo delle competenze attraverso il lavoro su sfide reali
+- **Organizzazioni che apprendono**: Comunità che integrano l'apprendimento continuo nella loro struttura
+- **Feedback iterativo**: Cicli di apprendimento rapidi attraverso il feedback costante della comunità
+- **Viaggi di apprendimento documentati**: Condivisione di intuizioni e sfide come risorse di apprendimento
+
+### 3. Collaborazione Supportata dalla Tecnologia
+
+Strumenti digitali che consentono l'apprendimento collaborativo:
+
+- **Spazi di collaborazione sincrona**: Ambienti virtuali per la collaborazione in tempo reale
+- **Repository di conoscenza**: Collezioni di contenuti di apprendimento curate dalla comunità
+- **Analisi dell'apprendimento**: Informazioni basate sui dati sui processi di apprendimento collettivo
+- **Percorsi di apprendimento supportati dall'IA**: Sistemi intelligenti che suggeriscono comunità di apprendimento ottimali
+
+## I Vantaggi dell'Apprendimento Collaborativo
+
+L'apprendimento collettivo offre vantaggi unici:
+
+- **Sviluppo accelerato delle competenze** attraverso l'accesso a conoscenze ed esperienze diverse
+- **Comprensione più profonda** attraverso la spiegazione e la discussione dei concetti
+- **Prospettive ampliate** attraverso intuizioni da background e modi di pensare diversi
+- **Motivazione più sostenibile** attraverso legami sociali e responsabilità condivisa
+- **Apprendimento pratico** attraverso il lavoro collaborativo su progetti reali
+
+## Il Nostro Piano di Implementazione
+
+### Fase 1: Fondamenta (2025)
+
+- Istituzione dei primi Circoli di Apprendimento con obiettivi di apprendimento definiti
+- Sviluppo di protocolli per un efficace apprendimento tra pari
+- Costruzione di un'infrastruttura digitale per lo scambio di conoscenze
+- Pilotaggio di 10 progetti di apprendimento basati sulla comunità
+
+### Fase 2: Crescita (2026)
+
+- Ampliamento a oltre 50 Circoli di Apprendimento in varie discipline
+- Integrazione di strutture di mentorship nelle comunità di apprendimento
+- Sviluppo di metriche per misurare l'efficacia dell'apprendimento collettivo
+- Creazione di manuali per gruppi di apprendimento auto-organizzati
+
+### Fase 3: Maturità (2027)
+
+- Istituzione di un ecosistema autosufficiente per l'apprendimento comunitario
+- Partnership con istituzioni educative per modelli di apprendimento ibridi
+- Sviluppo di certificazioni per competenze acquisite nella comunità
+- Pubblicazione di ricerche sull'efficacia dei metodi di apprendimento collettivo
+
+## Unisciti alla Nostra Visione
+
+L'apprendimento collaborativo inizia con te. Ti invitiamo a:
+
+- **Diventare parte di una comunità di apprendimento** che condivide la tua passione
+- **Condividere le tue conoscenze** e imparare dagli altri
+- **Contribuire con risorse di apprendimento** che vadano a beneficio di tutti
+- **Fornire feedback** su come possiamo migliorare l'apprendimento collettivo
+
+---
+
+Insieme, possiamo creare una nuova era di apprendimento - più inclusiva, efficace e arricchente che mai. Ci stai?
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/it/costruzione-collaborativa.md b/apps/bauntown/apps/landing/src/content/vision/it/costruzione-collaborativa.md
new file mode 100644
index 000000000..23fc796ea
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/it/costruzione-collaborativa.md
@@ -0,0 +1,119 @@
+---
+title: "Costruzione Collaborativa: Sviluppo Tecnologico Collettivo"
+description: "La nostra visione per una nuova era di sviluppo comunitario di tecnologie e soluzioni digitali."
+pubDate: 2025-04-02
+category: "technology"
+timeline: "2025-2027"
+status: "current"
+featured: true
+image: "/images/vision/gemeinsam-bauen.png"
+contributors: ["Marcus Hoffman", "Judith Berg", "Till Schneider"]
+relatedLinks: [
+ {
+ title: "Modello di Sviluppo Open Source",
+ url: "https://opensource.org/osd"
+ },
+ {
+ title: "Reti di Innovazione Collaborativa",
+ url: "https://en.wikipedia.org/wiki/Collaborative_innovation_network"
+ }
+]
+---
+
+# Costruzione Collaborativa: Sviluppo Tecnologico Collettivo
+
+A BaunTown, crediamo che le migliori soluzioni digitali non vengano create in isolamento, ma attraverso la collaborazione della comunità. La nostra visione di "Costruzione Collaborativa" definisce un nuovo approccio allo sviluppo collettivo di innovazioni tecnologiche - al di là dei tradizionali confini organizzativi e dei limiti geografici.
+
+## Le Sfide dello Sviluppo Tecnologico Moderno
+
+Nonostante molti progressi nella collaborazione, affrontiamo ancora ostacoli significativi:
+
+- **Competenze frammentate**: Le conoscenze specialistiche sono distribuite tra molti individui e organizzazioni
+- **Squilibrio delle risorse**: Accesso disuguale a strumenti, infrastrutture e risorse di sviluppo
+- **Sviluppo ridondante**: Sviluppo parallelo di soluzioni senza scambio di conoscenze
+- **Problemi di sostenibilità**: I progetti spesso falliscono per mancanza di supporto della comunità
+- **Silos di innovazione**: Idee preziose rimangono intrappolate in team chiusi
+
+## La Nostra Visione: Costruzione Collaborativa
+
+### 1. Ecosistemi di Innovazione Aperti
+
+Strutture che permettono la collaborazione oltre i confini tradizionali:
+
+- **Architettura modulare**: Design del sistema che facilita e incoraggia contributi distribuiti
+- **Processi di sviluppo pubblici**: Decisioni trasparenti e fasi di sviluppo visibili
+- **Roadmap collaborative**: Visione e pianificazione condivise per lo sviluppo tecnologico
+- **Modello di governance inclusivo**: Strutture decisionali che coinvolgono vari stakeholder
+
+### 2. Pool di Risorse Comunitarie
+
+Risorse condivise che democratizzano lo sviluppo:
+
+- **Infrastruttura condivisa**: Accesso ad ambienti di sviluppo, test e deployment
+- **Database di conoscenze**: Documentazione tecnica e best practice mantenute collettivamente
+- **Reti di condivisione delle competenze**: Scambio di expertise per specifiche sfide di sviluppo
+- **Sviluppo finanziato dalla comunità**: Modelli di finanziamento condivisi per funzionalità importanti
+
+### 3. Collaborazione Organica
+
+Processi che favoriscono una collaborazione naturale ed efficace:
+
+- **Gilda digitale**: Modelli maestro-apprendista nello sviluppo software moderno
+- **Modelli di contribuzione flessibili**: Opportunità di partecipazione a vari livelli e tempistiche
+- **Collaborazione sincrona e asincrona**: Strumenti e processi per team distribuiti globalmente
+- **Monitoraggio della salute della comunità**: Metriche e pratiche per comunità sostenibili
+
+### 4. Collaborazione Supportata dalla Tecnologia
+
+Strumenti che consentono la collaborazione distribuita:
+
+- **IDE collaborativi**: Ambienti per la programmazione in tempo reale in team
+- **Controllo di versione distribuito+**: Funzionalità avanzate per la collaborazione complessa
+- **Coordinamento assistito dall'IA**: Sistemi intelligenti per ottimizzare il lavoro di squadra
+- **Strumenti di visualizzazione**: Rappresentazione di sistemi complessi per una migliore comprensione condivisa
+
+## I Vantaggi della Costruzione Collaborativa
+
+Questo modello offre vantaggi trasformativi:
+
+- **Innovazione accelerata** attraverso l'utilizzo dell'intelligenza collettiva
+- **Qualità superiore** attraverso prospettive diverse e test più ampi
+- **Soluzioni sostenibili** con ampio supporto della comunità
+- **Accesso democratizzato** allo sviluppo tecnologico
+- **Sistemi più resilienti** attraverso responsabilità e manutenzione distribuite
+
+## Il Nostro Piano di Implementazione
+
+### Fase 1: Fondamenta (2025)
+
+- Configurazione della Piattaforma di Collaborazione BaunTown per lo sviluppo distribuito
+- Definizione di standard e protocolli per una collaborazione efficace
+- Avvio di 5 progetti pilota con metodologia di sviluppo aperta
+- Costruzione di una rete iniziale di sviluppatori, designer ed esperti di dominio
+
+### Fase 2: Espansione (2026)
+
+- Scalabilità a 25+ progetti di collaborazione attivi in vari domini
+- Implementazione di strumenti avanzati per la collaborazione distribuita
+- Sviluppo di metriche per misurare l'efficacia della collaborazione
+- Costruzione di partnership con istituzioni educative e aziende
+
+### Fase 3: Consolidamento (2027)
+
+- Istituzione di un ecosistema autosufficiente per la collaborazione
+- Pubblicazione di ricerche su modelli di collaborazione efficaci
+- Sviluppo di programmi educativi per lo sviluppo collaborativo
+- Fondazione di un hub di innovazione per sfide tecnologiche complesse
+
+## Entra a Far Parte della Comunità dei Costruttori
+
+La nostra visione di "Costruzione Collaborativa" prospera sulla partecipazione attiva. Ti invitiamo a:
+
+- **Partecipare a progetti aperti** che affrontano i tuoi interessi o competenze
+- **Condividere risorse e conoscenze** che vanno a beneficio di tutti
+- **Proporre nuovi modelli di collaborazione** basati sulle tue esperienze
+- **Costruire ponti** tra diverse comunità e competenze
+
+---
+
+Attraverso la costruzione collaborativa, possiamo creare soluzioni tecnologiche che non sono solo tecnicamente eccellenti, ma riflettono anche la saggezza collettiva e la diversità della nostra comunità. Sei pronto a costruire con noi?
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/content/vision/it/guadagno-collaborativo.md b/apps/bauntown/apps/landing/src/content/vision/it/guadagno-collaborativo.md
new file mode 100644
index 000000000..051835e15
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/content/vision/it/guadagno-collaborativo.md
@@ -0,0 +1,119 @@
+---
+title: "Guadagno Collaborativo: Nuovi Modelli per la Creazione di Valore Collettivo"
+description: "La nostra visione per modelli di partecipazione economica equi, trasparenti e orientati alla comunità nell'era digitale."
+pubDate: 2025-04-03
+category: "future"
+timeline: "2025-2028"
+status: "exploring"
+featured: true
+image: "/images/vision/gemeinsam-verdienen.png"
+contributors: ["Lena Fischer", "Till Schneider", "Michael Werner"]
+relatedLinks: [
+ {
+ title: "Platform Cooperativism",
+ url: "https://platform.coop/about/vision-and-advantages/"
+ },
+ {
+ title: "Web3 e Creazione di Valore Decentralizzata",
+ url: "https://ethereum.org/en/dao/"
+ }
+]
+---
+
+# Guadagno Collaborativo: Nuovi Modelli per la Creazione di Valore Collettivo
+
+A BaunTown, crediamo che il futuro del lavoro e del successo economico risieda nei modelli comunitari. "Guadagno Collaborativo" è la nostra visione per un nuovo paradigma che mette al centro la creazione e la distribuzione equa del valore – un'alternativa ai tradizionali sistemi economici gerarchici e centralizzati.
+
+## I Problemi dei Modelli Economici Attuali
+
+L'attuale sistema di creazione di valore presenta sfide fondamentali:
+
+- **Distribuzione disuguale del valore**: I creatori di valore spesso beneficiano meno
+- **Piattaforme centralizzate**: Poche aziende controllano i mercati digitali
+- **Sistemi di compensazione non trasparenti**: Decisioni opache sulla remunerazione
+- **Mancanza di riconoscimento**: Molti contributi rimangono invisibili e non ricompensati
+- **Pensiero a breve termine**: Focus su profitti rapidi invece che sulla creazione di valore sostenibile
+
+## La Nostra Visione: Guadagno Collaborativo
+
+### 1. Reti di Creazione di Valore Collaborativo
+
+Strutture che consentono e premiano la creazione congiunta di valore:
+
+- **Modelli di compensazione basati sui contributi**: Ricompense eque basate sui contributi effettivi
+- **Flussi di valore trasparenti**: Visibilità dell'intera catena del valore
+- **Strutture decisionali decentralizzate**: Determinazione congiunta di priorità e compensi
+- **Reti di competenze complementari**: Combinazione di diverse competenze per la massima creazione di valore
+
+### 2. Fonti di Reddito Sostenibili
+
+Nuovi modelli per un reddito affidabile e diversificato:
+
+- **Progetti guidati dalla comunità**: Iniziative finanziate e implementate congiuntamente
+- **Sistemi di micro-compensazione**: Ricompense automatizzate anche per i più piccoli contributi di valore
+- **Modelli di partecipazione a lungo termine**: Entrate sostenibili invece di pagamenti una tantum
+- **Flussi di reddito basati sulle competenze**: Monetizzazione di competenze specifiche in accordi flessibili
+
+### 3. Modelli di Proprietà e Partecipazione Collettiva
+
+Strutture che consentono la proprietà condivisa della creazione di valore:
+
+- **Cooperative digitali**: Piattaforme gestite e utilizzate congiuntamente
+- **Asset di proprietà della comunità**: Proprietà collettiva di infrastrutture e proprietà intellettuale
+- **Organizzazioni Autonome Decentralizzate (DAO)**: Strutture comunitarie basate su blockchain
+- **Pool di innovazione guidati dai cittadini**: Finanziamento e utilizzo congiunti delle innovazioni
+
+### 4. Tecnologia per la Giustizia Economica
+
+Strumenti che supportano un'equa distribuzione del valore:
+
+- **Sistemi di contabilità trasparenti**: Visione aperta di entrate e compensi
+- **Distribuzione automatizzata dei profitti**: Smart contract per una distribuzione equa delle entrate
+- **Sistemi di reputazione**: Cattura e ricompensa di diversi contributi di valore
+- **Distributed ledger**: Registrazione immutabile di contributi e quote
+
+## I Vantaggi del Guadagno Collaborativo
+
+Questo approccio offre vantaggi trasformativi:
+
+- **Distribuzione più equa** del successo economico
+- **Maggiore motivazione** attraverso la partecipazione diretta al successo
+- **Modelli di business più sostenibili** attraverso incentivi a lungo termine
+- **Strutture di reddito più resilienti** attraverso la diversificazione
+- **Comunità più forti** attraverso interessi economici condivisi
+
+## Il Nostro Piano di Implementazione
+
+### Fase 1: Esplorazione (2025)
+
+- Sperimentazione con diversi modelli di reddito e partecipazione
+- Costruzione della Piattaforma di Contribuzione BaunTown per visualizzare i contributi di valore
+- Pilotaggio di 3 modelli di business collaborativi in diversi domini
+- Sviluppo di framework per catene del valore trasparenti
+
+### Fase 2: Stabilimento (2026-2027)
+
+- Scalabilità a 10+ flussi di reddito collettivi sostenibili
+- Implementazione di strumenti avanzati per la distribuzione automatizzata dei profitti
+- Fondazione delle prime cooperative completamente guidate dalla comunità
+- Sviluppo di un programma educativo per nuovi modelli economici
+
+### Fase 3: Trasformazione (2027-2028)
+
+- Costruzione di un ecosistema di unità economiche collaborative interconnesse
+- Partnership con aziende tradizionali per modelli ibridi di creazione di valore
+- Influenza sui quadri politici per modelli economici comunitari
+- Pubblicazione di ricerche sull'efficacia delle forme economiche collaborative
+
+## Unisciti al Movimento
+
+La nostra visione di "Guadagno Collaborativo" prospera sull'impegno attivo. Ti invitiamo a:
+
+- **Partecipare a progetti pilota** che testano nuovi modelli di compensazione
+- **Condividere le tue esperienze con modelli economici alternativi**
+- **Contribuire con nuove idee per la creazione congiunta di valore**
+- **Diventare parte di una rete** che dà priorità alla partecipazione economica equa
+
+---
+
+Sviluppando e implementando nuovi modelli di "Guadagno Collaborativo", possiamo creare un sistema economico che non è solo efficiente, ma anche equo e inclusivo. Sei pronto a esplorare con noi nuovi modi di successo economico?
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/global.d.ts b/apps/bauntown/apps/landing/src/global.d.ts
new file mode 100644
index 000000000..6df57c755
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/global.d.ts
@@ -0,0 +1,6 @@
+// Global type definitions for the project
+
+// Add scrollToElement to the window object
+interface Window {
+ scrollToElement(element: HTMLElement, offset?: number): void;
+}
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/i18n/ui.ts b/apps/bauntown/apps/landing/src/i18n/ui.ts
new file mode 100644
index 000000000..fd40ee651
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/i18n/ui.ts
@@ -0,0 +1,544 @@
+export const languages = {
+ de: 'Deutsch',
+ en: 'English',
+ it: 'Italiano'
+};
+
+export const defaultLang = 'de';
+
+export const ui = {
+ de: {
+ 'nav.home': 'Startseite',
+ 'nav.news': 'News',
+ 'nav.models': 'Modelle',
+ 'nav.projects': 'Projekte',
+ 'nav.tutorials': 'Tutorials',
+ 'nav.tools': 'Tools',
+ 'nav.vision': 'Vision',
+ 'nav.join': 'Mitmachen',
+ 'nav.support': 'Unterstützen',
+ 'nav.darkMode': 'Dunkelmodus',
+ 'nav.menu': 'Menü',
+
+ 'tutorials.categories.UI & UX': 'UI & UX',
+ 'tutorials.categories.Business': 'Business',
+ 'tutorials.categories.Users': 'Benutzer',
+ 'tutorials.categories.Branding': 'Branding',
+ 'tutorials.categories.Marketing': 'Marketing',
+ 'tutorials.categories.Vibecoding': 'Vibecoding',
+ 'tutorials.readMore': 'Weiterlesen',
+ 'tutorials.allTutorials': 'Alle Tutorials',
+ 'tutorials.filterAll': 'Alle',
+ 'tutorials.headerDescription': 'Entdecke unsere neuesten Tutorials',
+ 'tutorials.featured': 'Neue Tutorials',
+
+ 'models.categories.AI': 'Künstliche Intelligenz',
+ 'models.categories.Web': 'Web',
+ 'models.categories.Development': 'Entwicklung',
+ 'models.categories.Design': 'Design',
+ 'models.categories.Community': 'Community',
+ 'models.categories.Product': 'Produkt',
+ 'models.categories.Text': 'Text',
+ 'models.categories.Bild': 'Bild',
+ 'models.readMore': 'Weiterlesen',
+ 'models.allModels': 'Alle Modelle',
+ 'models.filterAll': 'Alle',
+ 'models.headerDescription': 'Erfahre mehr über die neuesten KI-Modelle und ihre Fähigkeiten',
+ 'models.featured': 'Aktuelle Modelle',
+
+ 'tools.categories.Design': 'Design',
+ 'tools.categories.Development': 'Entwicklung',
+ 'tools.categories.Productivity': 'Produktivität',
+ 'tools.categories.Hosting': 'Hosting',
+ 'tools.pricing.Free': 'Kostenlos',
+ 'tools.pricing.Freemium': 'Freemium',
+ 'tools.pricing.Paid': 'Kostenpflichtig',
+ 'tools.readMore': 'Mehr erfahren',
+ 'tools.allTools': 'Alle Tools',
+ 'tools.filterAll': 'Alle',
+ 'tools.headerDescription': 'Entdecke Tools, die uns beim Bauen helfen',
+ 'tools.featured': 'Empfohlene Tools',
+ 'tools.website': 'Website',
+
+ 'news.categories.AI': 'Künstliche Intelligenz',
+ 'news.categories.Web': 'Web',
+ 'news.categories.Development': 'Entwicklung',
+ 'news.categories.Design': 'Design',
+ 'news.categories.Community': 'Community',
+ 'news.categories.Product': 'Produkt',
+ 'news.readMore': 'Weiterlesen',
+ 'news.allNews': 'Alle News',
+ 'news.filterAll': 'Alle',
+ 'news.headerDescription': 'Erfahre mehr über die neuesten Entwicklungen und Neuigkeiten',
+ 'news.featured': 'Aktuelle News',
+
+ 'projects.categories.Web': 'Web',
+ 'projects.categories.Mobile': 'Mobile',
+ 'projects.categories.Desktop': 'Desktop',
+ 'projects.categories.IoT': 'IoT',
+ 'projects.categories.AI': 'Künstliche Intelligenz',
+ 'projects.categories.Design': 'Design',
+ 'projects.status.active': 'Aktiv',
+ 'projects.status.completed': 'Abgeschlossen',
+ 'projects.status.archived': 'Archiviert',
+ 'projects.readMore': 'Projekt ansehen',
+ 'projects.allProjects': 'Alle Projekte',
+ 'projects.filterAll': 'Alle',
+ 'projects.headerDescription': 'Entdecke unsere aktuellen und abgeschlossenen Projekte',
+ 'projects.featured': 'Aktuelle Projekte',
+ 'projects.technologies': 'Technologien',
+ 'projects.demo': 'Demo',
+ 'projects.github': 'GitHub',
+
+ 'missions.difficulty.beginner': 'Anfänger',
+ 'missions.difficulty.intermediate': 'Fortgeschritten',
+ 'missions.difficulty.advanced': 'Profi',
+ 'missions.status.active': 'Aktiv',
+ 'missions.status.completed': 'Abgeschlossen',
+ 'missions.status.upcoming': 'Demnächst',
+ 'missions.categories.UI & UX': 'UI & UX',
+ 'missions.categories.Business': 'Business',
+ 'missions.categories.Users': 'Benutzer',
+ 'missions.categories.Branding': 'Branding',
+ 'missions.categories.Marketing': 'Marketing',
+ 'missions.categories.Vibecoding': 'Vibecoding',
+ 'missions.readMore': 'Mission starten',
+ 'missions.allMissions': 'Alle Missionen',
+ 'missions.viewAll': 'Alle Missionen',
+ 'missions.filterAll': 'Alle',
+ 'missions.headerDescription': 'Nimm an praktischen Coding-Missionen teil und baue echte Projekte',
+ 'missions.featured': 'Neue Missionen',
+ 'missions.duration': 'Dauer',
+ 'missions.difficulty': 'Schwierigkeit',
+ 'missions.skills': 'Benötigte Skills',
+ 'missions.participants': 'Teilnehmer',
+
+ 'vision.category.product': 'Produkt',
+ 'vision.category.technology': 'Technologie',
+ 'vision.category.community': 'Community',
+ 'vision.category.future': 'Zukunft',
+ 'vision.status.current': 'Aktuell',
+ 'vision.status.planned': 'Geplant',
+ 'vision.status.exploring': 'In Erforschung',
+ 'vision.readMore': 'Mehr erfahren',
+ 'vision.allVisions': 'Alle Visionen',
+ 'vision.filterAll': 'Alle',
+ 'vision.headerDescription': 'Entdecke unsere Visionen für die Zukunft von BaunTown und der Technologiebranche',
+ 'vision.featured': 'Hervorgehobene Visionen',
+ 'vision.timeline': 'Zeitrahmen',
+ 'vision.contributors': 'Mitwirkende',
+ 'vision.relatedLinks': 'Verwandte Links',
+
+ 'footer.copyright': 'Alle Rechte vorbehalten',
+ 'footer.team': 'Unser Team',
+ 'footer.membersLink': 'Mitglieder',
+ 'home.hero.title': 'Willkommen bei BaunTown',
+ 'home.hero.subtitle': 'Eine Gemeinschaft von Buildern',
+ 'home.hero.description': 'Gemeinsam bauen wir die nächste Generation von Software - Custom Build Future',
+ 'home.hero.cta': 'Entdecken',
+ 'home.section1.title': 'Gemeinsam Bauen',
+ 'home.section1.description': 'Bei BaunTown glauben wir an die Kraft der Zusammenarbeit. Unsere Community besteht aus leidenschaftlichen Entwicklern, Designern und Visionären.',
+ 'home.section2.title': 'Zukunft Gestalten',
+ 'home.section2.description': 'Wir entwickeln innovative Lösungen, die die Art und Weise verändern, wie wir mit Technologie interagieren.',
+ 'home.section3.title': 'Gemeinsam Wachsen',
+ 'home.section3.description': 'Lerne von Experten, teile dein Wissen und wachse als Teil unserer dynamischen Community.',
+ 'home.featured': 'Unsere Vision',
+
+ 'join.title': 'Werde Teil der Community',
+ 'join.newsletterTitle': 'Newsletter abonnieren',
+ 'join.newsletterDesc': 'Erhalte Updates zu neuen Tutorials, Missionen und Events.',
+ 'join.emailPlaceholder': 'Deine E-Mail-Adresse',
+ 'join.subscribe': 'Abonnieren',
+ 'join.submissionTitle': 'Deine Idee einreichen',
+ 'join.submissionDesc': 'Teile deine kreativen Ideen mit unserer Community und hilf uns, BaunTown gemeinsam weiterzuentwickeln.',
+ 'join.submissionType': 'Art des Beitrags',
+ 'join.submissionMission': 'Coding-Mission',
+ 'join.submissionTutorial': 'Tutorial/Guide',
+ 'join.submissionVision': 'Zukunftsvision',
+ 'join.submissionTitlePlaceholder': 'Ein prägnanter Titel für deine Idee',
+ 'join.submissionDescPlaceholder': 'Beschreibe deine Idee im Detail. Was macht sie besonders? Welchen Nutzen bietet sie der Community?',
+ 'join.submissionEmail': 'Deine Kontakt-E-Mail',
+ 'join.submissionEmailPlaceholder': 'Wir melden uns bei dir, wenn wir deine Idee umsetzen möchten',
+ 'join.submissionSubmit': 'Idee einreichen',
+ 'join.success': 'Danke für deine Newsletter-Anmeldung! 🎉',
+ 'join.newsletterSuccess': 'Danke für deine Anmeldung! Du erhältst bald spannende Updates zu BaunTown. Schau auch in deinen Spam-Ordner, falls die E-Mail nicht ankommt.',
+ 'join.submissionSuccessTitle': 'Vielen Dank für deine Einreichung! 🌟',
+ 'join.submissionSuccessMessage': 'Wir haben deine Idee erhalten und werden sie sorgfältig prüfen. Wenn sie für BaunTown passt, melden wir uns bei dir für die weiteren Schritte. Dein Engagement trägt maßgeblich zur Entwicklung unserer Community bei!',
+ 'join.addToPage': 'Zu Missionen, Tutorials oder Vision hinzufügen:',
+ 'join.readMore': 'Mehr erfahren',
+
+ 'support.title': 'Unterstütze uns',
+ 'support.subtitle': 'Hilf BaunTown zu wachsen',
+ 'support.description': 'Deine Unterstützung hilft, BaunTown zu verbessern und zu erweitern.',
+ 'support.buyMeACoffee': 'Kaffee spendieren',
+ 'support.recurring': 'Regelmäßige Unterstützung',
+ 'support.onetime': 'Einmalige Spende',
+ 'support.thankYou': 'Vielen Dank für deine Unterstützung!',
+ 'support.amount': 'Betrag',
+ 'support.currency': 'EUR',
+ 'support.paymentMethod': 'Zahlungsmethode',
+ 'support.payWithStripe': 'Mit Stripe bezahlen',
+ 'support.payWithPayPal': 'Mit PayPal bezahlen',
+ 'support.success': 'Zahlung erfolgreich!',
+ 'support.error': 'Zahlungsfehler. Bitte versuche es erneut.',
+ 'newsletter.unsubscribeSuccess': 'Erfolgreich abgemeldet',
+ 'newsletter.unsubscribeMessage': 'Du hast dich erfolgreich von unserem Newsletter abgemeldet. Wir würden uns freuen, dich in Zukunft wieder als Abonnenten zu haben!',
+ 'common.backToHome': 'Zurück zur Startseite'
+ },
+ en: {
+ 'nav.home': 'Home',
+ 'nav.news': 'News',
+ 'nav.models': 'Models',
+ 'nav.projects': 'Projects',
+ 'nav.tutorials': 'Tutorials',
+ 'nav.tools': 'Tools',
+ 'nav.vision': 'Vision',
+ 'nav.join': 'Join',
+ 'nav.support': 'Support Us',
+ 'nav.darkMode': 'Dark Mode',
+ 'nav.menu': 'Menu',
+
+ 'tutorials.categories.UI & UX': 'UI & UX',
+ 'tutorials.categories.Business': 'Business',
+ 'tutorials.categories.Users': 'Users',
+ 'tutorials.categories.Branding': 'Branding',
+ 'tutorials.categories.Marketing': 'Marketing',
+ 'tutorials.categories.Vibecoding': 'Vibecoding',
+ 'tutorials.readMore': 'Read More',
+ 'tutorials.allTutorials': 'All Tutorials',
+ 'tutorials.filterAll': 'All',
+ 'tutorials.headerDescription': 'Discover our latest tutorials',
+ 'tutorials.featured': 'New Tutorials',
+
+ 'models.categories.AI': 'Artificial Intelligence',
+ 'models.categories.Web': 'Web',
+ 'models.categories.Development': 'Development',
+ 'models.categories.Design': 'Design',
+ 'models.categories.Community': 'Community',
+ 'models.categories.Product': 'Product',
+ 'models.categories.Text': 'Text',
+ 'models.categories.Bild': 'Image',
+ 'models.readMore': 'Read More',
+ 'models.allModels': 'All Models',
+ 'models.filterAll': 'All',
+ 'models.headerDescription': 'Learn more about the latest AI models and their capabilities',
+ 'models.featured': 'Latest Models',
+
+ 'tools.categories.Design': 'Design',
+ 'tools.categories.Development': 'Development',
+ 'tools.categories.Productivity': 'Productivity',
+ 'tools.categories.Hosting': 'Hosting',
+ 'tools.pricing.Free': 'Free',
+ 'tools.pricing.Freemium': 'Freemium',
+ 'tools.pricing.Paid': 'Paid',
+ 'tools.readMore': 'Learn More',
+ 'tools.allTools': 'All Tools',
+ 'tools.filterAll': 'All',
+ 'tools.headerDescription': 'Discover tools that help us build better projects',
+ 'tools.featured': 'Recommended Tools',
+ 'tools.website': 'Website',
+
+ 'news.categories.AI': 'Artificial Intelligence',
+ 'news.categories.Web': 'Web',
+ 'news.categories.Development': 'Development',
+ 'news.categories.Design': 'Design',
+ 'news.categories.Community': 'Community',
+ 'news.categories.Product': 'Product',
+ 'news.readMore': 'Read More',
+ 'news.allNews': 'All News',
+ 'news.filterAll': 'All',
+ 'news.headerDescription': 'Stay updated with the latest developments and news',
+ 'news.featured': 'Latest News',
+
+ 'projects.categories.Web': 'Web',
+ 'projects.categories.Mobile': 'Mobile',
+ 'projects.categories.Desktop': 'Desktop',
+ 'projects.categories.IoT': 'IoT',
+ 'projects.categories.AI': 'Artificial Intelligence',
+ 'projects.categories.Design': 'Design',
+ 'projects.status.active': 'Active',
+ 'projects.status.completed': 'Completed',
+ 'projects.status.archived': 'Archived',
+ 'projects.readMore': 'View Project',
+ 'projects.allProjects': 'All Projects',
+ 'projects.filterAll': 'All',
+ 'projects.headerDescription': 'Explore our current and completed projects',
+ 'projects.featured': 'Current Projects',
+ 'projects.technologies': 'Technologies',
+ 'projects.demo': 'Demo',
+ 'projects.github': 'GitHub',
+
+ 'missions.difficulty.beginner': 'Beginner',
+ 'missions.difficulty.intermediate': 'Intermediate',
+ 'missions.difficulty.advanced': 'Advanced',
+ 'missions.status.active': 'Active',
+ 'missions.status.completed': 'Completed',
+ 'missions.status.upcoming': 'Upcoming',
+ 'missions.categories.UI & UX': 'UI & UX',
+ 'missions.categories.Business': 'Business',
+ 'missions.categories.Users': 'Users',
+ 'missions.categories.Branding': 'Branding',
+ 'missions.categories.Marketing': 'Marketing',
+ 'missions.categories.Vibecoding': 'Vibecoding',
+ 'missions.readMore': 'Start Mission',
+ 'missions.allMissions': 'All Missions',
+ 'missions.viewAll': 'All Missions',
+ 'missions.filterAll': 'All',
+ 'missions.headerDescription': 'Join practical coding missions and build real projects',
+ 'missions.featured': 'New Missions',
+ 'missions.duration': 'Duration',
+ 'missions.difficulty': 'Difficulty',
+ 'missions.skills': 'Required Skills',
+ 'missions.participants': 'Participants',
+
+ 'vision.category.product': 'Product',
+ 'vision.category.technology': 'Technology',
+ 'vision.category.community': 'Community',
+ 'vision.category.future': 'Future',
+ 'vision.status.current': 'Current',
+ 'vision.status.planned': 'Planned',
+ 'vision.status.exploring': 'Exploring',
+ 'vision.readMore': 'Learn More',
+ 'vision.allVisions': 'All Visions',
+ 'vision.filterAll': 'All',
+ 'vision.headerDescription': 'Discover our visions for the future of BaunTown and the tech industry',
+ 'vision.featured': 'Featured Visions',
+ 'vision.timeline': 'Timeline',
+ 'vision.contributors': 'Contributors',
+ 'vision.relatedLinks': 'Related Links',
+
+ 'footer.copyright': 'All rights reserved',
+ 'footer.team': 'Our Team',
+ 'footer.membersLink': 'Members',
+ 'home.hero.title': 'Welcome to BaunTown',
+ 'home.hero.subtitle': 'A Community of Builders',
+ 'home.hero.description': 'Together we build the next generation of software - Custom Build Future',
+ 'home.hero.cta': 'Explore',
+ 'home.section1.title': 'Build Together',
+ 'home.section1.description': 'At BaunTown, we believe in the power of collaboration. Our community consists of passionate developers, designers, and visionaries.',
+ 'home.section2.title': 'Shape the Future',
+ 'home.section2.description': 'We develop innovative solutions that change the way we interact with technology.',
+ 'home.section3.title': 'Grow Together',
+ 'home.section3.description': 'Learn from experts, share your knowledge, and grow as part of our dynamic community.',
+ 'home.featured': 'Our Vision',
+
+ 'join.title': 'Join Our Community',
+ 'join.newsletterTitle': 'Subscribe to Newsletter',
+ 'join.newsletterDesc': 'Get updates on new tutorials, missions, and events.',
+ 'join.emailPlaceholder': 'Your email address',
+ 'join.subscribe': 'Subscribe',
+ 'join.submissionTitle': 'Submit Your Idea',
+ 'join.submissionDesc': 'Share your creative ideas with our community and help us improve BaunTown together.',
+ 'join.submissionType': 'Contribution Type',
+ 'join.submissionMission': 'Coding Mission',
+ 'join.submissionTutorial': 'Tutorial/Guide',
+ 'join.submissionVision': 'Future Vision',
+ 'join.submissionTitlePlaceholder': 'A concise title for your idea',
+ 'join.submissionDescPlaceholder': 'Describe your idea in detail. What makes it special? How will it benefit the community?',
+ 'join.submissionEmail': 'Your Contact Email',
+ 'join.submissionEmailPlaceholder': 'We\'ll reach out if we decide to implement your idea',
+ 'join.submissionSubmit': 'Submit Idea',
+ 'join.success': 'Thank you for subscribing to our newsletter! 🎉',
+ 'join.newsletterSuccess': 'Thanks for signing up! You\'ll soon receive exciting updates about BaunTown. Please check your spam folder if you don\'t see our email.',
+ 'join.submissionSuccessTitle': 'Thank you for your submission! 🌟',
+ 'join.submissionSuccessMessage': 'We\'ve received your idea and will review it carefully. If it\'s a good fit for BaunTown, we\'ll contact you about next steps. Your contribution is vital to our community\'s growth!',
+ 'join.addToPage': 'Add to Missions, Tutorials, or Vision pages:',
+ 'join.readMore': 'Learn More',
+
+ 'support.title': 'Support Us',
+ 'support.subtitle': 'Help us grow BaunTown',
+ 'support.description': 'Your support helps maintain and improve BaunTown.',
+ 'support.buyMeACoffee': 'Buy us a coffee',
+ 'support.recurring': 'Recurring Support',
+ 'support.onetime': 'One-time Donation',
+ 'support.thankYou': 'Thank you for your support!',
+ 'support.amount': 'Amount',
+ 'support.currency': 'EUR',
+ 'support.paymentMethod': 'Payment Method',
+ 'support.payWithStripe': 'Pay with Stripe',
+ 'support.payWithPayPal': 'Pay with PayPal',
+ 'support.success': 'Payment successful!',
+ 'support.error': 'Payment error. Please try again.',
+ 'newsletter.unsubscribeSuccess': 'Successfully unsubscribed',
+ 'newsletter.unsubscribeMessage': 'You have successfully unsubscribed from our newsletter. We would be happy to have you as a subscriber again in the future!',
+ 'common.backToHome': 'Back to home'
+ },
+ it: {
+ 'nav.home': 'Home',
+ 'nav.news': 'News',
+ 'nav.models': 'Modelli',
+ 'nav.projects': 'Progetti',
+ 'nav.tutorials': 'Tutorial',
+ 'nav.tools': 'Strumenti',
+ 'nav.vision': 'Visione',
+ 'nav.join': 'Partecipa',
+ 'nav.support': 'Supportaci',
+ 'nav.darkMode': 'Modalità scura',
+ 'nav.menu': 'Menu',
+
+ 'tutorials.categories.UI & UX': 'UI & UX',
+ 'tutorials.categories.Business': 'Business',
+ 'tutorials.categories.Users': 'Utenti',
+ 'tutorials.categories.Branding': 'Branding',
+ 'tutorials.categories.Marketing': 'Marketing',
+ 'tutorials.categories.Vibecoding': 'Vibecoding',
+ 'tutorials.readMore': 'Leggi di più',
+ 'tutorials.allTutorials': 'Tutti i tutorial',
+ 'tutorials.filterAll': 'Tutti',
+ 'tutorials.headerDescription': 'Scopri i nostri ultimi tutorial',
+ 'tutorials.featured': 'Nuovi Tutorial',
+
+ 'models.categories.AI': 'Intelligenza Artificiale',
+ 'models.categories.Web': 'Web',
+ 'models.categories.Development': 'Sviluppo',
+ 'models.categories.Design': 'Design',
+ 'models.categories.Community': 'Comunità',
+ 'models.categories.Product': 'Prodotto',
+ 'models.categories.Text': 'Testo',
+ 'models.categories.Bild': 'Immagine',
+ 'models.readMore': 'Leggi di più',
+ 'models.allModels': 'Tutti i Modelli',
+ 'models.filterAll': 'Tutte',
+ 'models.headerDescription': 'Scopri di più sui modelli di intelligenza artificiale più recenti e le loro capacità',
+ 'models.featured': 'Modelli Recenti',
+
+ 'tools.categories.Design': 'Design',
+ 'tools.categories.Development': 'Sviluppo',
+ 'tools.categories.Productivity': 'Produttività',
+ 'tools.categories.Hosting': 'Hosting',
+ 'tools.pricing.Free': 'Gratuito',
+ 'tools.pricing.Freemium': 'Freemium',
+ 'tools.pricing.Paid': 'A pagamento',
+ 'tools.readMore': 'Scopri di più',
+ 'tools.allTools': 'Tutti gli Strumenti',
+ 'tools.filterAll': 'Tutti',
+ 'tools.headerDescription': 'Scopri gli strumenti che utilizziamo per costruire progetti migliori',
+ 'tools.featured': 'Strumenti Consigliati',
+ 'tools.website': 'Sito Web',
+
+ 'news.categories.AI': 'Intelligenza Artificiale',
+ 'news.categories.Web': 'Web',
+ 'news.categories.Development': 'Sviluppo',
+ 'news.categories.Design': 'Design',
+ 'news.categories.Community': 'Comunità',
+ 'news.categories.Product': 'Prodotto',
+ 'news.readMore': 'Leggi di più',
+ 'news.allNews': 'Tutte le Notizie',
+ 'news.filterAll': 'Tutte',
+ 'news.headerDescription': 'Resta aggiornato con gli ultimi sviluppi e notizie',
+ 'news.featured': 'Ultime Notizie',
+
+ 'projects.categories.Web': 'Web',
+ 'projects.categories.Mobile': 'Mobile',
+ 'projects.categories.Desktop': 'Desktop',
+ 'projects.categories.IoT': 'IoT',
+ 'projects.categories.AI': 'Intelligenza Artificiale',
+ 'projects.categories.Design': 'Design',
+ 'projects.status.active': 'Attivo',
+ 'projects.status.completed': 'Completato',
+ 'projects.status.archived': 'Archiviato',
+ 'projects.readMore': 'Visualizza Progetto',
+ 'projects.allProjects': 'Tutti i Progetti',
+ 'projects.filterAll': 'Tutti',
+ 'projects.headerDescription': 'Esplora i nostri progetti attuali e completati',
+ 'projects.featured': 'Progetti Attuali',
+ 'projects.technologies': 'Tecnologie',
+ 'projects.demo': 'Demo',
+ 'projects.github': 'GitHub',
+
+ 'missions.difficulty.beginner': 'Principiante',
+ 'missions.difficulty.intermediate': 'Intermedio',
+ 'missions.difficulty.advanced': 'Avanzato',
+ 'missions.status.active': 'Attivo',
+ 'missions.status.completed': 'Completato',
+ 'missions.status.upcoming': 'In arrivo',
+ 'missions.categories.UI & UX': 'UI & UX',
+ 'missions.categories.Business': 'Business',
+ 'missions.categories.Users': 'Utenti',
+ 'missions.categories.Branding': 'Branding',
+ 'missions.categories.Marketing': 'Marketing',
+ 'missions.categories.Vibecoding': 'Vibecoding',
+ 'missions.readMore': 'Inizia Missione',
+ 'missions.allMissions': 'Tutte le Missioni',
+ 'missions.viewAll': 'Tutte le Missioni',
+ 'missions.filterAll': 'Tutte',
+ 'missions.headerDescription': 'Partecipa a missioni di codifica pratiche e costruisci progetti reali',
+ 'missions.featured': 'Nuove Missioni',
+ 'missions.duration': 'Durata',
+ 'missions.difficulty': 'Difficoltà',
+ 'missions.skills': 'Competenze Richieste',
+ 'missions.participants': 'Partecipanti',
+
+ 'vision.category.product': 'Prodotto',
+ 'vision.category.technology': 'Tecnologia',
+ 'vision.category.community': 'Comunità',
+ 'vision.category.future': 'Futuro',
+ 'vision.status.current': 'Attuale',
+ 'vision.status.planned': 'Pianificata',
+ 'vision.status.exploring': 'In esplorazione',
+ 'vision.readMore': 'Scopri di più',
+ 'vision.allVisions': 'Tutte le Visioni',
+ 'vision.filterAll': 'Tutte',
+ 'vision.headerDescription': 'Scopri le nostre visioni per il futuro di BaunTown e dell\'industria tecnologica',
+ 'vision.featured': 'Visioni in Evidenza',
+ 'vision.timeline': 'Cronologia',
+ 'vision.contributors': 'Contributori',
+ 'vision.relatedLinks': 'Link Correlati',
+
+ 'footer.copyright': 'Tutti i diritti riservati',
+ 'footer.team': 'Il Nostro Team',
+ 'footer.membersLink': 'Membri',
+ 'home.hero.title': 'Benvenuti a BaunTown',
+ 'home.hero.subtitle': 'Una Comunità di Costruttori',
+ 'home.hero.description': 'Insieme costruiamo la prossima generazione di software - Custom Build Future',
+ 'home.hero.cta': 'Esplora',
+ 'home.section1.title': 'Costruire Insieme',
+ 'home.section1.description': 'A BaunTown, crediamo nel potere della collaborazione. La nostra comunità è composta da sviluppatori, designer e visionari appassionati.',
+ 'home.section2.title': 'Plasmare il Futuro',
+ 'home.section2.description': 'Sviluppiamo soluzioni innovative che cambiano il modo in cui interagiamo con la tecnologia.',
+ 'home.section3.title': 'Crescere Insieme',
+ 'home.section3.description': 'Impara dagli esperti, condividi le tue conoscenze e cresci come parte della nostra comunità dinamica.',
+ 'home.featured': 'La Nostra Visione',
+
+ 'join.title': 'Unisciti alla Comunità',
+ 'join.newsletterTitle': 'Iscriviti alla Newsletter',
+ 'join.newsletterDesc': 'Ricevi aggiornamenti su nuovi tutorial, missioni ed eventi.',
+ 'join.emailPlaceholder': 'Il tuo indirizzo email',
+ 'join.subscribe': 'Iscriviti',
+ 'join.submissionTitle': 'Invia la Tua Idea',
+ 'join.submissionDesc': 'Condividi le tue idee creative con la nostra comunità e aiutaci a migliorare BaunTown insieme.',
+ 'join.submissionType': 'Tipo di Contributo',
+ 'join.submissionMission': 'Missione di Coding',
+ 'join.submissionTutorial': 'Tutorial/Guida',
+ 'join.submissionVision': 'Visione Futura',
+ 'join.submissionTitlePlaceholder': 'Un titolo conciso per la tua idea',
+ 'join.submissionDescPlaceholder': 'Descrivi la tua idea in dettaglio. Cosa la rende speciale? Come beneficerà la comunità?',
+ 'join.submissionEmail': 'La Tua Email di Contatto',
+ 'join.submissionEmailPlaceholder': 'Ti contatteremo se decidiamo di implementare la tua idea',
+ 'join.submissionSubmit': 'Invia Idea',
+ 'join.success': 'Grazie per esserti iscritto alla nostra newsletter! 🎉',
+ 'join.newsletterSuccess': 'Grazie per esserti iscritto! Riceverai presto aggiornamenti interessanti su BaunTown. Controlla la cartella dello spam se non vedi la nostra email.',
+ 'join.submissionSuccessTitle': 'Grazie per il tuo contributo! 🌟',
+ 'join.submissionSuccessMessage': 'Abbiamo ricevuto la tua idea e la esamineremo attentamente. Se è adatta a BaunTown, ti contatteremo per i prossimi passi. Il tuo contributo è fondamentale per la crescita della nostra comunità!',
+ 'join.addToPage': 'Aggiungi alle pagine Missioni, Tutorial o Visione:',
+ 'join.readMore': 'Scopri di più',
+
+ 'support.title': 'Supportaci',
+ 'support.subtitle': 'Aiutaci a far crescere BaunTown',
+ 'support.description': 'Il tuo supporto aiuta a mantenere e migliorare BaunTown.',
+ 'support.buyMeACoffee': 'Offrici un caffè',
+ 'support.recurring': 'Supporto ricorrente',
+ 'support.onetime': 'Donazione singola',
+ 'support.thankYou': 'Grazie per il tuo supporto!',
+ 'support.amount': 'Importo',
+ 'support.currency': 'EUR',
+ 'support.paymentMethod': 'Metodo di pagamento',
+ 'support.payWithStripe': 'Paga con Stripe',
+ 'support.payWithPayPal': 'Paga con PayPal',
+ 'support.success': 'Pagamento riuscito!',
+ 'support.error': 'Errore nel pagamento. Riprova.',
+ 'newsletter.unsubscribeSuccess': 'Cancellazione avvenuta con successo',
+ 'newsletter.unsubscribeMessage': 'Ti sei cancellato con successo dalla nostra newsletter. Ci piacerebbe averti di nuovo come abbonato in futuro!',
+ 'common.backToHome': 'Torna alla home'
+ }
+} as const;
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/layouts/CourseLayout.astro b/apps/bauntown/apps/landing/src/layouts/CourseLayout.astro
new file mode 100644
index 000000000..78fa9fe05
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/layouts/CourseLayout.astro
@@ -0,0 +1,670 @@
+---
+import Layout from './Layout.astro';
+import { getLangFromUrl, useTranslations } from '../utils/i18n';
+import type { CollectionEntry } from 'astro:content';
+import { getCollection } from 'astro:content';
+
+interface Props {
+ tutorial: CollectionEntry<'tutorials'>;
+ courseName: string;
+}
+
+const { tutorial, courseName } = Astro.props;
+const { data } = tutorial;
+const lang = getLangFromUrl(Astro.url);
+
+// Format date based on language
+const formattedDate = new Intl.DateTimeFormat(lang === 'de' ? 'de-DE' : 'en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+}).format(data.pubDate);
+
+// Category translation
+const t = useTranslations(lang);
+const categoryKey = `tutorials.categories.${data.category}` as const;
+
+// Get all tutorials that belong to this course
+const allTutorials = await getCollection('tutorials', ({ id, data }) => {
+ return id.startsWith(lang + '/') && data.course === courseName;
+});
+
+// Sort by lesson number
+const sortedCourseLessons = allTutorials.sort(
+ (a, b) => (a.data.lessonNumber || 0) - (b.data.lessonNumber || 0)
+);
+
+// Find current lesson index
+const currentLessonIndex = sortedCourseLessons.findIndex(lesson =>
+ lesson.slug === tutorial.slug
+);
+
+// Get next and previous lessons
+const previousLesson = currentLessonIndex > 0 ? sortedCourseLessons[currentLessonIndex - 1] : null;
+const nextLesson = currentLessonIndex < sortedCourseLessons.length - 1 ? sortedCourseLessons[currentLessonIndex + 1] : null;
+
+// Generate lesson URLs
+function getLessonUrl(lesson: CollectionEntry<'tutorials'>) {
+ const slugParts = lesson.slug.split('/');
+ const fileName = slugParts[slugParts.length - 1];
+
+ return lang === 'de'
+ ? `/tutorials/${fileName}`
+ : `/${lang}/tutorials/${fileName}`;
+}
+---
+
+
+
+
+
+
+
+
+
+
+
{data.courseName || courseName}
+
Lektion {data.lessonNumber} von {sortedCourseLessons.length}
+
+
+
diff --git a/apps/bauntown/apps/landing/src/pages/[lang]/join/index.astro b/apps/bauntown/apps/landing/src/pages/[lang]/join/index.astro
new file mode 100644
index 000000000..cbc7fa239
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/[lang]/join/index.astro
@@ -0,0 +1,320 @@
+---
+import Layout from "../../../layouts/Layout.astro";
+import { getLangFromUrl, useTranslations } from "../../../utils/i18n";
+import Newsletter from "../../../components/Newsletter.astro";
+import ContentSubmission from "../../../components/ContentSubmission.astro";
+import Card from "../../../components/Card.astro";
+import HeroSection from "../../../components/HeroSection.astro";
+import { languages } from "../../../i18n/ui";
+import { getCollection } from "astro:content";
+
+// Define static paths for ALL supported languages
+export async function getStaticPaths() {
+ const joinEntries = await Promise.all(
+ Object.keys(languages).map(async (lang) => {
+ const langEntries = await getCollection("join", ({ id }) => {
+ return id.startsWith(`${lang}/`);
+ });
+
+ // Get the main entry (index.md) and other entries
+ const mainEntry = langEntries.find((entry) =>
+ entry.id.endsWith("/index.md")
+ );
+ const otherEntries = langEntries.filter(
+ (entry) => !entry.id.endsWith("/index.md")
+ );
+
+ return {
+ params: { lang },
+ props: {
+ entry: mainEntry,
+ otherEntries: otherEntries,
+ },
+ };
+ })
+ );
+
+ return joinEntries;
+}
+
+// Get current language from URL
+const { lang } = Astro.params;
+const { entry, otherEntries = [] } = Astro.props;
+const t = useTranslations(lang as keyof typeof languages);
+
+// Debugging information
+console.log("Current language:", lang);
+console.log("Entry loaded:", entry?.id);
+console.log("Entry data:", entry?.data);
+
+// Set hero title based on language
+const heroTitle = lang === "de"
+ ? "Gemeinsam gestalten wir die digitale Zukunft"
+ : lang === "it"
+ ? "Insieme costruiamo il futuro"
+ : "Together we shape the digital future";
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/bauntown/apps/landing/src/pages/[lang]/members.astro b/apps/bauntown/apps/landing/src/pages/[lang]/members.astro
new file mode 100644
index 000000000..499bc89b7
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/[lang]/members.astro
@@ -0,0 +1,140 @@
+---
+import { getCollection } from 'astro:content';
+import { languages } from '../../i18n/ui';
+import { getLangFromUrl, useTranslations } from '../../utils/i18n';
+import Layout from '../../layouts/Layout.astro';
+import TeamMembers from '../../components/TeamMembers.astro';
+
+// Define static paths for ALL supported languages
+export function getStaticPaths() {
+ return Object.keys(languages)
+ .map(lang => ({ params: { lang } }));
+}
+
+// For SSR mode
+export const prerender = true;
+
+// Get current language from URL
+const { lang } = Astro.params;
+const t = useTranslations(lang as keyof typeof languages);
+
+// Get members in current language
+const allMembers = await getCollection('members', ({ id }) => {
+ return id.startsWith(lang + '/');
+});
+
+// Sort by order, then by name
+const sortedMembers = allMembers
+ .sort((a, b) => a.data.order - b.data.order || a.data.name.localeCompare(b.data.name));
+---
+
+
+
+
+
{t('footer.team')}
+
Meet the team behind BaunTown - the people who are passionate about building a community of learners and builders.
+
+
+
+
+
+
+
+
+
{t('footer.membersLink')}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/[lang]/missions/[...slug].astro b/apps/bauntown/apps/landing/src/pages/[lang]/missions/[...slug].astro
new file mode 100644
index 000000000..4fe9a0c82
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/[lang]/missions/[...slug].astro
@@ -0,0 +1,48 @@
+---
+import { getCollection } from 'astro:content';
+import MissionLayout from '../../../layouts/MissionLayout.astro';
+import { languages } from '../../../i18n/ui';
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+ const missionsEntries = await Promise.all(
+ Object.keys(languages)
+ .map(async (lang) => {
+ const langMissions = await getCollection('missions', ({ id }) => {
+ return id.startsWith(`${lang}/`);
+ });
+
+ return langMissions.map(mission => {
+ // Get just the filename part from the slug
+ const slugParts = mission.slug.split('/');
+ const fileName = slugParts[slugParts.length - 1];
+
+ return {
+ params: {
+ lang,
+ slug: fileName
+ },
+ props: { mission },
+ };
+ });
+ })
+ );
+
+ // Flatten array of arrays
+ return missionsEntries.flat();
+}
+
+const { mission } = Astro.props;
+
+// Sicherheitsabfrage für Mission
+if (!mission) {
+ return Astro.redirect('/404');
+}
+
+const { Content } = await mission.render();
+---
+
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/[lang]/missions/index.astro b/apps/bauntown/apps/landing/src/pages/[lang]/missions/index.astro
new file mode 100644
index 000000000..973ff9fd2
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/[lang]/missions/index.astro
@@ -0,0 +1,530 @@
+---
+import { languages } from '../../../i18n/ui';
+import { getLangFromUrl, useTranslations } from '../../../utils/i18n';
+import Layout from '../../../layouts/Layout.astro';
+import MissionCard from '../../../components/MissionCard.astro';
+import ContentSubmission from '../../../components/ContentSubmission.astro';
+import Newsletter from '../../../components/Newsletter.astro';
+import { getCollection } from 'astro:content';
+
+// Define static paths for ALL supported languages
+export function getStaticPaths() {
+ return Object.keys(languages)
+ .map(lang => ({ params: { lang } }));
+}
+
+// Get current language from URL
+const { lang } = Astro.params;
+const t = useTranslations(lang as keyof typeof languages);
+
+// Get missions in current language
+const allMissions = await getCollection('missions', ({ id }) => {
+ return id.startsWith(lang + '/');
+});
+
+// Sort by date with newest first
+const sortedMissions = allMissions.sort(
+ (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+
+// Group by difficulty
+const difficulties = ['beginner', 'intermediate', 'advanced'] as const;
+const missionsByDifficulty = difficulties.reduce((acc, difficulty) => {
+ acc[difficulty] = sortedMissions.filter(mission => mission.data.difficulty === difficulty);
+ return acc;
+}, {} as Record<(typeof difficulties)[number], typeof sortedMissions>);
+
+// Group by category
+const categories = ['UI & UX', 'Business', 'Users', 'Branding', 'Marketing'] as const;
+const missionsByCategory = categories.reduce((acc, category) => {
+ acc[category] = sortedMissions.filter(mission => mission.data.category === category);
+ return acc;
+}, {} as Record<(typeof categories)[number], typeof sortedMissions>);
+
+// Group by status (keep for backward compatibility)
+const statuses = ['active', 'upcoming', 'completed'] as const;
+const missionsByStatus = statuses.reduce((acc, status) => {
+ acc[status] = sortedMissions.filter(mission => mission.data.status === status);
+ return acc;
+}, {} as Record<(typeof statuses)[number], typeof sortedMissions>);
+
+// Get active missions
+const activeMissions = missionsByStatus['active'];
+---
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/[lang]/support.astro b/apps/bauntown/apps/landing/src/pages/[lang]/support.astro
new file mode 100644
index 000000000..83ae04456
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/[lang]/support.astro
@@ -0,0 +1,357 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import { getLangFromUrl, useTranslations } from '../../utils/i18n';
+import PaymentForm from '../../components/PaymentForm.astro';
+
+export async function getStaticPaths() {
+ return [
+ { params: { lang: 'en' } },
+ { params: { lang: 'de' } },
+ { params: { lang: 'it' } }
+ ];
+}
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+
+
+
+
{t('support.title')}
+
{t('support.subtitle')}
+
{t('support.description')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{t('support.buyMeACoffee')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/[lang]/team.astro b/apps/bauntown/apps/landing/src/pages/[lang]/team.astro
new file mode 100644
index 000000000..2e2c1e532
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/[lang]/team.astro
@@ -0,0 +1,59 @@
+---
+import { getCollection } from 'astro:content';
+import { languages } from '../../i18n/ui';
+import { getLangFromUrl, useTranslations } from '../../utils/i18n';
+import Layout from '../../layouts/Layout.astro';
+import TeamMembers from '../../components/TeamMembers.astro';
+
+// Define static paths for ALL supported languages
+export function getStaticPaths() {
+ return Object.keys(languages)
+ .map(lang => ({ params: { lang } }));
+}
+
+// For SSR mode
+export const prerender = true;
+
+// Get current language from URL
+const { lang } = Astro.params;
+const t = useTranslations(lang as keyof typeof languages);
+
+// Get members in current language
+const allMembers = await getCollection('members', ({ id }) => {
+ return id.startsWith(lang + '/');
+});
+
+// Sort by order, then by name
+const sortedMembers = allMembers
+ .sort((a, b) => a.data.order - b.data.order || a.data.name.localeCompare(b.data.name));
+---
+
+
+
+
{t('footer.team')}
+
Meet the team behind BaunTown - the people who are passionate about building a community of learners and builders.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/[lang]/tools/[...slug].astro b/apps/bauntown/apps/landing/src/pages/[lang]/tools/[...slug].astro
new file mode 100644
index 000000000..c8d2344a1
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/[lang]/tools/[...slug].astro
@@ -0,0 +1,52 @@
+---
+import { getCollection } from "astro:content";
+import ToolLayout from "../../../layouts/ToolLayout.astro";
+import { languages } from "../../../i18n/ui";
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+ const toolEntries = await Promise.all(
+ Object.keys(languages).map(async (lang) => {
+ const langTools = await getCollection("tools", ({ id }) => {
+ console.log("Tool ID in [...slug]:", id);
+ return id.startsWith(`${lang}/`);
+ });
+
+ console.log(`Found ${langTools.length} tools for language ${lang}`);
+
+ return langTools.map((tool) => {
+ // Get just the filename part from the slug
+ const slugParts = tool.slug.split("/");
+ const fileName = slugParts[slugParts.length - 1];
+
+ console.log("Tool slug:", tool.slug, "-> fileName:", fileName);
+
+ return {
+ params: {
+ lang,
+ slug: fileName,
+ },
+ props: { tool },
+ };
+ });
+ })
+ );
+
+ // Flatten array of arrays
+ return toolEntries.flat();
+}
+
+const { tool } = Astro.props;
+
+// Sicherheitsabfrage für Tools
+if (!tool) {
+ return Astro.redirect("/404");
+}
+
+const { Content } = await tool.render();
+---
+
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/[lang]/tools/index.astro b/apps/bauntown/apps/landing/src/pages/[lang]/tools/index.astro
new file mode 100644
index 000000000..c362e29e6
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/[lang]/tools/index.astro
@@ -0,0 +1,416 @@
+---
+import { languages } from "../../../i18n/ui";
+import { getLangFromUrl, useTranslations } from "../../../utils/i18n";
+import Layout from "../../../layouts/Layout.astro";
+import ToolCard from "../../../components/ToolCard.astro";
+import ContentSubmission from "../../../components/ContentSubmission.astro";
+import { getCollection } from "astro:content";
+
+// Define static paths for ALL supported languages
+export function getStaticPaths() {
+ return Object.keys(languages).map((lang) => ({ params: { lang } }));
+}
+
+// Get current language from URL
+const { lang } = Astro.params;
+const t = useTranslations(lang as keyof typeof languages);
+
+// Get tools in current language
+const allTools = await getCollection("tools", ({ id }) => {
+ console.log("Tool ID:", id);
+ return id.startsWith(lang + "/");
+});
+
+// Debug info
+console.log("Language:", lang);
+console.log("All tools count:", allTools.length);
+
+// Sort by date with newest first
+const sortedTools = allTools.sort(
+ (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+
+// Group by category
+const categories = ["Design", "Development", "Productivity", "Hosting"] as const;
+const toolsByCategory = categories.reduce(
+ (acc, category) => {
+ acc[category] = sortedTools.filter(
+ (tool) => tool.data.category === category
+ );
+ return acc;
+ },
+ {} as Record<(typeof categories)[number], typeof sortedTools>
+);
+---
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/api/create-payment-intent.ts b/apps/bauntown/apps/landing/src/pages/api/create-payment-intent.ts
new file mode 100644
index 000000000..63e6c16fd
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/api/create-payment-intent.ts
@@ -0,0 +1,43 @@
+// This is a mock API endpoint that would typically use the Stripe SDK
+// In a real implementation, you would need to install and use 'stripe' npm package
+// and set up your Stripe secret key from environment variables
+
+export async function POST({ request }) {
+ try {
+ const data = await request.json();
+ const { amount, isRecurring } = data;
+
+ // Mock response - in a real implementation, you would use Stripe SDK
+ // to create a PaymentIntent or a Subscription
+ const mockClientSecret = 'mock_stripe_client_secret_' + Math.random().toString(36).substring(2, 15);
+
+ return new Response(
+ JSON.stringify({
+ clientSecret: mockClientSecret,
+ amount,
+ isRecurring
+ }),
+ {
+ status: 200,
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ }
+ );
+ } catch (error) {
+ console.error('Error:', error);
+ return new Response(
+ JSON.stringify({
+ error: {
+ message: 'Failed to create payment intent'
+ }
+ }),
+ {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ }
+ );
+ }
+}
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/api/create-paypal-order.ts b/apps/bauntown/apps/landing/src/pages/api/create-paypal-order.ts
new file mode 100644
index 000000000..a227e3552
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/api/create-paypal-order.ts
@@ -0,0 +1,43 @@
+// This is a mock API endpoint that would typically use the PayPal SDK
+// In a real implementation, you would need to install and use '@paypal/checkout-server-sdk'
+// and set up your PayPal credentials from environment variables
+
+export async function POST({ request }) {
+ try {
+ const data = await request.json();
+ const { amount, isRecurring } = data;
+
+ // Mock response - in a real implementation, you would use PayPal SDK
+ // to create an order or a subscription
+ const mockOrderId = 'mock_paypal_order_' + Math.random().toString(36).substring(2, 15);
+
+ return new Response(
+ JSON.stringify({
+ orderId: mockOrderId,
+ amount,
+ isRecurring
+ }),
+ {
+ status: 200,
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ }
+ );
+ } catch (error) {
+ console.error('Error:', error);
+ return new Response(
+ JSON.stringify({
+ error: {
+ message: 'Failed to create PayPal order'
+ }
+ }),
+ {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ }
+ );
+ }
+}
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/index.astro b/apps/bauntown/apps/landing/src/pages/index.astro
new file mode 100644
index 000000000..5d62c59cb
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/index.astro
@@ -0,0 +1,133 @@
+---
+import { getLangFromUrl, useTranslations } from '../utils/i18n';
+import Layout from '../layouts/Layout.astro';
+import TutorialCard from '../components/TutorialCard.astro';
+import { getCollection } from 'astro:content';
+import { defaultLang } from '../i18n/ui';
+
+// Redirect to /de/ (with language code) for consistency
+const redirectUrl = new URL('/de/', Astro.url);
+return Astro.redirect(redirectUrl.toString());
+
+// The rest of this code won't execute due to the redirect
+// but is kept for reference
+const lang = defaultLang;
+const t = useTranslations(lang);
+
+// Get tutorials in current language
+const allTutorials = await getCollection('tutorials', ({ id }) => {
+ return id.startsWith(lang + '/');
+});
+
+// Sort by date with newest first
+const sortedTutorials = allTutorials.sort(
+ (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+
+// Group by category
+const categories = ['basics', 'advanced', 'integrations'] as const;
+const tutorialsByCategory = categories.reduce((acc, category) => {
+ acc[category] = sortedTutorials.filter(tutorial => tutorial.data.category === category);
+ return acc;
+}, {} as Record<(typeof categories)[number], typeof sortedTutorials>);
+
+// Get featured tutorials
+const featuredTutorials = sortedTutorials.filter(tutorial => tutorial.data.featured);
+---
+
+
+
+
+
+ )
+ )}
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/news/index.astro b/apps/bauntown/apps/landing/src/pages/news/index.astro
new file mode 100644
index 000000000..0575a8bd1
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/news/index.astro
@@ -0,0 +1,7 @@
+---
+import { defaultLang } from '../../i18n/ui';
+
+// Redirect to the default language
+Astro.response.status = 301;
+Astro.response.headers.set('Location', `/${defaultLang}/news`);
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/projects/index.astro b/apps/bauntown/apps/landing/src/pages/projects/index.astro
new file mode 100644
index 000000000..f749645db
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/projects/index.astro
@@ -0,0 +1,7 @@
+---
+import { defaultLang } from '../../i18n/ui';
+
+// Redirect to the default language
+Astro.response.status = 301;
+Astro.response.headers.set('Location', `/${defaultLang}/projects`);
+---
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/support-cancel.astro b/apps/bauntown/apps/landing/src/pages/support-cancel.astro
new file mode 100644
index 000000000..53c55cab9
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/support-cancel.astro
@@ -0,0 +1,9 @@
+---
+import { defaultLang } from '../i18n/ui';
+---
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/pages/support-success.astro b/apps/bauntown/apps/landing/src/pages/support-success.astro
new file mode 100644
index 000000000..15cc2f137
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/pages/support-success.astro
@@ -0,0 +1,456 @@
+---
+import Layout from "../layouts/Layout.astro";
+import { defaultLang } from "../i18n/ui";
+---
+
+
+
+
+
+
+
+
+
+
+
Vielen Dank für deinen Kaffee!
+
+ Deine Unterstützung hilft uns, BaunTown weiterzuentwickeln und mehr
+ kostenlose Inhalte zu erstellen.
+
+
+ )
+ )}
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/scripts/analytics.ts b/apps/bauntown/apps/landing/src/scripts/analytics.ts
new file mode 100644
index 000000000..a8501d3de
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/scripts/analytics.ts
@@ -0,0 +1,138 @@
+// Umami Analytics Custom Events Helper
+declare global {
+ interface Window {
+ umami?: {
+ track: (eventName: string, eventData?: Record) => void;
+ };
+ }
+}
+
+// Helper function to track events
+export function trackEvent(eventName: string, eventData?: Record) {
+ if (typeof window !== 'undefined' && window.umami) {
+ window.umami.track(eventName, eventData);
+ }
+}
+
+// Predefined event types for consistency
+export const EVENTS = {
+ // Navigation
+ NAV_CLICK: 'nav-click',
+ FOOTER_CLICK: 'footer-click',
+ LANGUAGE_SWITCH: 'language-switch',
+ THEME_TOGGLE: 'theme-toggle',
+
+ // Content Views
+ TUTORIAL_VIEW: 'tutorial-view',
+ PROJECT_VIEW: 'project-view',
+ TOOL_VIEW: 'tool-view',
+ MODEL_VIEW: 'model-view',
+ MISSION_VIEW: 'mission-view',
+
+ // User Actions
+ JOIN_CLICK: 'join-click',
+ SUPPORT_CLICK: 'support-click',
+ MEMBER_VIEW: 'member-view',
+
+ // Payment/Donation
+ COFFEE_SELECT: 'coffee-select',
+ PAYMENT_TYPE_CHANGE: 'payment-type-change',
+ CHECKOUT_START: 'checkout-start',
+ CHECKOUT_SUCCESS: 'checkout-success',
+ CHECKOUT_CANCEL: 'checkout-cancel',
+
+ // External Links
+ DISCORD_CLICK: 'discord-click',
+ GITHUB_CLICK: 'github-click',
+ EXTERNAL_LINK: 'external-link',
+
+ // Content Interactions
+ VIDEO_PLAY: 'video-play',
+ FIGMA_EMBED_VIEW: 'figma-embed-view',
+ CODE_COPY: 'code-copy',
+
+ // Search & Filter
+ SEARCH: 'search',
+ FILTER_CHANGE: 'filter-change',
+
+ // Scroll Depth
+ SCROLL_25: 'scroll-25',
+ SCROLL_50: 'scroll-50',
+ SCROLL_75: 'scroll-75',
+ SCROLL_100: 'scroll-100',
+} as const;
+
+// Initialize scroll tracking
+export function initScrollTracking() {
+ if (typeof window === 'undefined') return;
+
+ const scrollDepths = [25, 50, 75, 100];
+ const trackedDepths = new Set();
+
+ const checkScrollDepth = () => {
+ const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+ const scrolled = window.scrollY;
+ const scrollPercentage = (scrolled / scrollHeight) * 100;
+
+ scrollDepths.forEach(depth => {
+ if (scrollPercentage >= depth && !trackedDepths.has(depth)) {
+ trackedDepths.add(depth);
+ trackEvent(`scroll-${depth}`, { depth });
+ }
+ });
+ };
+
+ // Debounce scroll events
+ let scrollTimer: NodeJS.Timeout;
+ window.addEventListener('scroll', () => {
+ clearTimeout(scrollTimer);
+ scrollTimer = setTimeout(checkScrollDepth, 100);
+ });
+}
+
+// Auto-track external links
+export function initExternalLinkTracking() {
+ if (typeof window === 'undefined') return;
+
+ document.addEventListener('click', (e) => {
+ const target = e.target as HTMLElement;
+ const link = target.closest('a');
+
+ if (link && link.href) {
+ const url = new URL(link.href);
+ const currentHost = window.location.hostname;
+
+ // Track external links
+ if (url.hostname !== currentHost && !url.hostname.includes('localhost')) {
+ // Special cases for known platforms
+ if (url.hostname.includes('discord')) {
+ trackEvent(EVENTS.DISCORD_CLICK, { url: url.href });
+ } else if (url.hostname.includes('github')) {
+ trackEvent(EVENTS.GITHUB_CLICK, { url: url.href });
+ } else {
+ trackEvent(EVENTS.EXTERNAL_LINK, {
+ domain: url.hostname,
+ url: url.href
+ });
+ }
+ }
+ }
+ });
+}
+
+// Initialize all tracking on page load
+export function initAnalytics() {
+ if (typeof window === 'undefined') return;
+
+ // Wait for Umami to be loaded
+ const checkUmami = setInterval(() => {
+ if (window.umami) {
+ clearInterval(checkUmami);
+ initScrollTracking();
+ initExternalLinkTracking();
+ }
+ }, 100);
+
+ // Stop checking after 5 seconds
+ setTimeout(() => clearInterval(checkUmami), 5000);
+}
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/src/styles/global.css b/apps/bauntown/apps/landing/src/styles/global.css
new file mode 100644
index 000000000..e63b9e69f
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/styles/global.css
@@ -0,0 +1,36 @@
+:root {
+ --text-color: #1e293b;
+ --text-muted: #64748b;
+ --background-color: #ffffff;
+ --background-color-rgb: 255, 255, 255;
+ --card-bg: #f8f9fa;
+ --container-bg: #ffffff;
+ --hover-bg: rgba(243, 244, 246, 0.8);
+ --border-color: #e2e8f0;
+ --border-color-rgb: 226, 232, 240;
+ --accent-color: #f97316;
+ --accent-color-rgb: 249, 115, 22;
+ --accent-hover: #ea580c;
+}
+
+[data-theme="dark"] {
+ --text-color: #f1f5f9;
+ --text-muted: #94a3b8;
+ --background-color: #0f172a;
+ --background-color-rgb: 15, 23, 42;
+ --card-bg: #1e293b;
+ --container-bg: #000000;
+ --hover-bg: rgba(30, 41, 59, 0.8);
+ --border-color: #334155;
+ --border-color-rgb: 51, 65, 85;
+}
+
+html {
+ scroll-padding-top: 20px;
+ scroll-behavior: smooth;
+}
+
+body {
+ color: var(--text-color);
+ background-color: var(--background-color);
+}
diff --git a/apps/bauntown/apps/landing/src/utils/i18n.ts b/apps/bauntown/apps/landing/src/utils/i18n.ts
new file mode 100644
index 000000000..da7b93dc1
--- /dev/null
+++ b/apps/bauntown/apps/landing/src/utils/i18n.ts
@@ -0,0 +1,25 @@
+import { ui, defaultLang, languages } from '../i18n/ui';
+
+export function getLangFromUrl(url: URL) {
+ const [, lang] = url.pathname.split('/');
+ if (lang in languages) return lang as keyof typeof ui;
+ return defaultLang;
+}
+
+export function useTranslations(lang: keyof typeof ui) {
+ return function t(key: keyof typeof ui[typeof defaultLang]) {
+ try {
+ // First check if the lang object exists
+ if (ui[lang] === undefined) {
+ // If requested language doesn't exist, safely fall back to default
+ return ui[defaultLang]?.[key] || `[Missing: ${key}]`;
+ }
+
+ // Try to get the translation in the requested language, fall back to default
+ return ui[lang][key] || ui[defaultLang]?.[key] || `[Missing: ${key}]`;
+ } catch (error) {
+ console.error(`Translation error for key "${String(key)}" in language "${lang}":`, error);
+ return `[Error: ${key}]`;
+ }
+ };
+}
\ No newline at end of file
diff --git a/apps/bauntown/apps/landing/tsconfig.json b/apps/bauntown/apps/landing/tsconfig.json
new file mode 100644
index 000000000..8bf91d3bb
--- /dev/null
+++ b/apps/bauntown/apps/landing/tsconfig.json
@@ -0,0 +1,5 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "include": [".astro/types.d.ts", "**/*"],
+ "exclude": ["dist"]
+}
diff --git a/apps/bauntown/package.json b/apps/bauntown/package.json
new file mode 100644
index 000000000..780acd4c8
--- /dev/null
+++ b/apps/bauntown/package.json
@@ -0,0 +1,12 @@
+{
+ "name": "bauntown",
+ "version": "1.0.0",
+ "private": true,
+ "description": "BaunTown - Community website for developers and creators",
+ "scripts": {
+ "dev": "turbo run dev",
+ "dev:landing": "pnpm --filter @bauntown/landing dev",
+ "build": "turbo run build",
+ "type-check": "turbo run type-check"
+ }
+}
diff --git a/apps/bauntown/readme/Informations-AI-Models-API-Costs.csv b/apps/bauntown/readme/Informations-AI-Models-API-Costs.csv
new file mode 100644
index 000000000..91a2e3966
--- /dev/null
+++ b/apps/bauntown/readme/Informations-AI-Models-API-Costs.csv
@@ -0,0 +1,15 @@
+KI Modell Text,Hersteller,Input Costs / 1M tokens,Cached Input / 1M tokens,Output Costs / 1M tokens,Input Toke Limit,Output Token Limit,Batch API,Hoster,Training Data Cut-off,"Kosten pro 1M Input 0,5M Output"
+o1,OpenAI,15,"7,5",60,200000,100000,50% for 24 hours,"OpenAI, Azure",Oktober 2023,45
+gpt 4.1,OpenAI,2,"0,5",8,1000000,32768,50% for 24 hours,"OpenAI, Azure",Juni 2024,6
+GPT-4o,OpenAI,"2,5","1,25",10,128000,16384,50% for 24 hours,"OpenAI, Azure",Oktober 2023,"7,5"
+gpt 4.1-mini,OpenAI,"0,4","0,1","1,6",1000000,32768,50% for 24 hours,"OpenAI, Azure",Juni 2024,"1,2"
+gpt 4.1-nano,OpenAI,"0,1","0,025","0,4",1000000,32768,50% for 24 hours,"OpenAI, Azure",Juni 2024,"0,3"
+o3-mini,OpenAI,"1,1","0,55","4,4",200000,100000,50% for 24 hours,"OpenAI, Azure",Oktober 2023,"3,3"
+Claude Sonnet 3.7,Antrophic,3,Up to 90%,15,200000,8192,50% for 24 hours,"Google, Amazon, Antrophic",April 2024,"10,5"
+Claude Haiku 3.5,Antrophic,"0,8",Up to 90%,4,200000,8192,50% for 24 hours,"Google, Amazon, Antrophic",Juli 2024,"2,8"
+Deepseek R1,Deepseek,"0,55","0,14","2,19",64000,8192,,Deepseek,Juli 2024,"1,645"
+Deepseek V3,Deepseek,"0,27","0,07","1,1",64000,8192,,Deepseek,Dezember 2024,"0,82"
+GPT-4o mini,OpenAI,"0,15","0,075","0,6",128000,16384,50% for 24 hours,"OpenAI, Azure",Oktober 2023,"0,45"
+Gemini 2.5 Pro,,"1,25",,10,1.048.576,65.536,,Google,Januar 2025,"6,25"
+Gemini 2.0 Flash,Google,"0,1","0,025","0,4",1.048.576,8192,,Google,Juni 2024,"0,3"
+Gemini 2.0 Flash-Lite,Google,"0,075","0,01875","0,3",1.048.576,8192,,Google,Juni 2024,"0,225"
\ No newline at end of file
diff --git a/apps/bauntown/readme/PlausibleCustomEventsReadMe.md b/apps/bauntown/readme/PlausibleCustomEventsReadMe.md
new file mode 100644
index 000000000..bf8958178
--- /dev/null
+++ b/apps/bauntown/readme/PlausibleCustomEventsReadMe.md
@@ -0,0 +1,114 @@
+Custom events
+note
+If you use the custom events feature, then these count towards your billable monthly pageviews.
+
+Custom events allow you to measure button clicks, purchases, subscription signups, form completions and pretty much any other action that you wish your visitors to take.
+
+"Custom events" is an optional enhanced measurement that's not included in our default script. This is because we want to keep the default script as simple and lightweight as possible. If you want to track custom events, here's how to enable it:
+
+Step 1: Enable "Custom events" for your site
+You can enable "Custom events" as an optional measurement when adding a new site to your Plausible account. If the site has already been added to your account, you can control what data is collected in the "Site Installation" area of the "General" section in your site settings.
+
+Enable custom events tracking during onboarding
+Step 2: Change the snippet on your site
+The tracking snippet changes depending on your selection of optional measurements. When making changes to your optional measurements, do ensure to insert the newest snippet into your site for all tracking to work as expected.
+
+Your Plausible tracking snippet should be inserted into the Header () section of your site. Place the tracking script within the … tags.
+
+Using WordPress?
+The quickest way to start tracking custom events is to use our official WordPress plugin
+
+Step 3: Add a CSS class name to the element you want to track on your site
+Use pageview goals to track the "thank you" page or the order confirmation page
+As an alternative to custom events, check out the pageview goals. Since pageviews are collected automatically, you don’t need to change your website’s code to measure pageview goals. This makes pageview goals the easiest way to start tracking any type of conversions.
+
+Tag the site element you want to track with a CSS class name. How to do this varies depending on the site builder, CMS or framework you've used to build your site.
+
+For instance, if you're using WordPress, you can click on any block element you want to track such as a button or a form. This will open up the block menu on the right-hand side of your screen.
+
+Click on any WordPress block element you want to track such as a button or a form
+You can then click on "Advanced" and add a CSS class name in the "Additional CSS class(es)" field. Add the CSS class name in this format: plausible-event-name=MyEventName. For instance, if you want to track form submissions on your contact form, you could use: plausible-event-name=Form+Submit.
+
+To represent a space character in the event names, you can use a + sign
+For example: plausible-event-name=Form+Submit will display as Form Submit in your dashboard
+
+Add a CSS class name in the 'Additional CSS class(es)' field
+When tracking form submits, it is important to tag the
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+