utopia-ui/src/pages/ConceptDE.tsx

import { CardPage } from 'utopia-ui'

export default function Concept() {
  return (
    <CardPage title='Concept'>
      <b>Utopia Game</b> is a cooperative <b>Real Life Manifestation Game</b>. While playing, we
      connect with ourselves, each other and our dreams to manifest them together.<br></br>
      <br></br>
      <div className='collapse collapse-arrow bg-base-200 mb-2'>
        <input type='radio' name='my-accordion-2' />
        <div className='collapse-title text-xl font-medium'>Real-Life-Manifestations-Spiel ? </div>
        <div className='collapse-content'>
          <div className='flex flex-row flex-wrap'>
            <div className='basis-full pr-4 pb-4'>
              Ähnlich wie bei einem Rollenspiel kann man sich sein eigenes Profil erstellen, mit dem
              Unterschied, dass hier echte Fähigkeiten abgebildet, geteilt und trainiert werden
              können.
            </div>
            <div className='basis-full  pr-4 pb-4'>
              Die Geschichte und das Storytelling orientiert sich an den realen Zuständen und
              Herausforderungen auf unserer Erde.
            </div>
            <div className='basis-full  pr-4 pb-4'>
              Des weiteren werden reale Ressourcen sichtbar und verfügbar gemacht, verwaltet und
              eingesetzt, ähnlich wie bei einem Strategie-Spiel.
            </div>
            <div className='basis-full  pr-4 pb-4'>
              Die Aufgaben des Projektmanagements können als Quests bzw. Spielaufträge abgebildet
              werden. Kleine und große Aufgaben werden in Abenteuer und Herausforderungen verwandelt
              und Probleme in Rätsel.
            </div>
          </div>
          <div className='basis-full  pr-4 pb-4'>
            Ziel des Spiels ist es, WinWinWin Situationen zu erzeugen. Win für Dich, Win für Uns,
            Win für die Welt.
          </div>
        </div>
      </div>
      <div className='collapse collapse-arrow bg-base-200 mb-2'>
        <input type='radio' name='my-accordion-2' />
        <div className='collapse-title text-xl font-medium'>Elemente des Spiels </div>
        <div className='collapse-content'>
          <div className='flex flex-row flex-wrap'>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> App</h3>
              Die App bietet eine interaktive geografische Karte als Spielfeld. Außerdem ermöglicht
              sie das Erstellen und Ansehen von Spieler-Profilen. Der Marktplatz zeigt Angebote und
              Bedürfnisse
            </div>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> Print Material</h3>
              Als Ergänzung und zum Offline-Spielen gibt es Flyer, Aufkleber, Schilder und
              Workbooks, welche zum Spielen einladen. Spieler erhalten Ausweise und Visitenkarten
              mit QR-Codes, die zu Vernetzung genutzt werden (später mehr)
            </div>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> Temporäre Events</h3>
              Wir kommen zusammen bei Workshops, auf Festivals und bei lokalen Treffen um uns zu
              connecten, Strukturen zu bilden und neue Spieler zu gewinnen.
            </div>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> Dauerhafte Strukturen</h3>
              Beim Spielen erschaffen wir dauerhafte materielle Strukturen wie Orte und
              Infrastruktur. Und Immaterielles wie Netzwerke aus Beziehungen, Geschichten,
              Informationen ...
            </div>
          </div>
        </div>
      </div>
      <div className='collapse collapse-arrow bg-base-200 mb-2'>
        <input type='radio' name='my-accordion-2' />
        <div className='collapse-title text-xl font-medium'>Ziel des Spiels </div>
        <div className='collapse-content'>
          <ol className='list-decimal list-inside pl-4'>
            <li>Ein dezentrales Netzwerk aufspannen</li>
            <li>Freie Entfaltung unserer kollektiven und individuellen Potentiale</li>
            <li>Aufbau kollektiver Strukturen und Co-Kreation</li>
          </ol>
        </div>
      </div>
      <div className='collapse collapse-arrow bg-base-200 mb-2'>
        <input type='radio' name='my-accordion-2' />
        <div className='collapse-title text-xl font-medium'>Ablauf </div>
        <div className='collapse-content'>
          Durch spielerische Elemente / Gamification wird der Spieler motiviert und angeleitet ...
          <h3 className='text-base my-3 font-medium'> Spieler Profile</h3>
          Der Spieler setzt sich mit sich selbst und seinen Fähigkeiten sowie tieferen Wünschen und
          Visionen auseinander und definiert seinen Charakter bzw. Spieler-Profil Dabei stehen
          folgende Fragen im Mittelpunkt:
          <ul className='list-disc list-inside pl-4 pt-4'>
            <li>Wie und in was für einer Welt möchte ich leben?</li>
            <li>
              Wer bin ich und was sind meine besonderen Fähigkeiten oder meine spezielle Aufgabe in
              diesem Leben?
            </li>
            <li>Was habe ich zu geben? Was kann und möchte ich mit anderen und der Welt teilen?</li>
            <li>
              Was brauche ich noch um ganz in meine Kraft zu kommen? Wie können mich andere dabei
              unterstützen?
            </li>
          </ul>
          <h3 className='text-base my-3 font-medium'> Ressourcen</h3>
          Der Spieler erforscht und definiert seine Angebote und Bedürfnisse, teilt seine Ressourcen
          und nutzt die des Netzwerks Z.B. Werkzeuge, Maschinen, Elektrogeräte, Fahrzeuge, Essen und
          Trinken, Schlafplätze, Mitfahrten, Bücher, Zugang zum Internet, individuelle Fähigkeiten
          sowie Hilfe im Alltag
          <h3 className='text-base my-3 font-medium'> Projekte umsetzen</h3>
          Der Spieler schließt sich Projekten an und startet selbst welche. Das Spiel unterstützt
          beim Projektmanagement oder beim Crowdfunding So entstehen Strukturen, Veranstaltungen,
          dauerhafte Orte, Infrastruktur und alles was wir brauchen um unsere menschlichen
          Bedürfnisse im Einklang mit Mutter Erde zu befriedigen.
          <h3 className='text-base my-3 font-medium'> Wandel sichtbar machen</h3>
          Der Spieler wird motiviert die neu entstehende Welt zu kartieren und zu dokumentieren
          indem er ...
          <ul className='list-disc list-inside pl-4 pt-4'>
            <li>Orte, Veranstaltungen usw. in der Karte einträgt</li>

            <li>Projekte mit Text, Bild und Ton dokumentiert</li>

            <li>Geschichten des Wandels erzählt</li>
          </ul>
        </div>
      </div>
      <div className='collapse collapse-arrow bg-base-200 mb-2'>
        <input type='radio' name='my-accordion-2' />
        <div className='collapse-title text-xl font-medium'>Web of Trust </div>
        <div className='collapse-content'>
          <div className='flex flex-row flex-wrap'>
            Während wir uns mit anderen Menschen im echten Leben connecten und unser persönliches
            Netzwerk aufbauen, tauschen wir gleichzeitig kryptografische Schlüssel aus und bauen ein
            sogenanntes Web of Trust.
            <div className='basis-full'>
              <div className='divider divider-vertical'></div>
            </div>
            <h3 className='text-base basis-full my-3 font-medium'> Dezentrale IDs</h3>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <img className='float-right h-24 px-4' src='/public-private-key.svg'></img>

              <p>
                Wenn wir unser Profil erstellen wird gleichzeitig ein Schlüsselpaar bestehend aus
                einem privaten und einem öffentlichen Schlüssel erzeugt.
              </p>
            </div>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <p className='basis-full pb-4'>
                Den öffentlichen Schlüssel teilen wir mit unseren Freunden und diese können damit
                Daten für uns verschlüsseln.
              </p>

              <p className='basis-full'>
                Den privaten Schlüssel halten wir geheim. Er wird benötigt um Daten die für uns
                verschlüsselt wurden auf unserem Gerät wieder zu entschlüsselt.
              </p>
            </div>
            <div className='basis-full'>
              <div className='divider divider-vertical'></div>
            </div>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> Schlüsseltausch</h3>
              <img className='float-left h-32 px-4' src='/qr-scan.svg'></img>
              Wenn wir Menschen im echten Leben begegnen tauschen wir unsere öffentlichen Schlüssel
              via QR-Code-Scan oder auf Papier.
            </div>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> Private Daten teilen</h3>
              <img className='float-right h-32 px-4' src='/web-of-trust.svg'></img>
              Innerhalb unseres Netzwerkes können wir dann unsere Profile, Angebote, Bedürfnisse,
              Projekte, Orte und Veranstaltungen ende-zu-ende-verschlüsselt teilen.
            </div>
          </div>
        </div>
      </div>
      <div className='collapse collapse-arrow bg-base-200 mb-2'>
        <input type='radio' name='my-accordion-2' />
        <h2 className='collapse-title text-xl font-semibold'>Prinzipien </h2>
        <div className='collapse-content'>
          <div className='flex flex-row flex-wrap'>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> Alles ist nur ein Spiel</h3>
              Alles passiert freiwillig, aus uns selbst heraus im Flow. Jeder ist jederzeit
              eingeladen mitzumachen.
            </div>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> Kein Geld</h3>
              Da beim Geld der Spaß bekanntlich aufhört, bezahlen wir uns beim Spielen gegenseitig
              kein Geld.
            </div>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> Dezentrale Strukturen</h3>
              Alle Strukturen, die wir erschaffen, gestalten wir dezentral und frei von Hierarchien.
              Für alle gelten die gleichen Regeln.
            </div>
            <div className='basis-full md:basis-1/2 pr-4 pb-4'>
              <h3 className='text-base my-3 font-medium'> Real Life</h3>
              Veränderung passiert im echten Leben. Wir nutzen das Internet nur wo es direkt hilft
              echte Begegnungen zu organisieren.
            </div>
          </div>
        </div>
      </div>
    </CardPage>
  )
}