Improve onboarding, annotation, and calibration UI

src/components/OnboardingViews/OnboardingInfoView.tsx

@@ -16,54 +16,59 @@ export default function OnboardingInfoView({
   return (
     <div className="flex flex-col h-full bg-white">
       <div className="flex-1 flex items-center justify-center px-4">
-        <div className="max-w-2xl w-full">
+        <div className="max-w-[700px] w-full">
           {/* Header */}
-          <div className="text-center mb-4">
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">Willkommen</h1>
+          <div className="text-center mb-8 mt-4">
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">Willkommen und vielen Dank für deine Teilnahme!</h1>
           </div>
 
           {/* Info Section */}
           <div className="bg-blue-50 border border-blue-200 rounded-lg p-8 mb-8">
-            <h2 className="text-xl font-semibold text-gray-900 mb-4">Was ist das Ziel?</h2>
+            <h2 className="text-xl font-semibold text-gray-900 mb-4">Worum geht es?</h2>
             <p className="text-gray-700 mb-4">
-              Vielen Dank, dass Sie an diesem Experiment teilnehmen. Bevor Sie mit der Annotation beginnen, möchten wir gerne ein paar grundlegende Informationen über Sie und Ihre Erfahrung mit Dialekten sammeln.
+              Im Rahmen unserer Bachelorarbeit an der ZHAW untersuchen wir, wie authentisch ein KI-Modell Schweizerdeutsche Dialekte synthetisieren kann. Dazu sind wir auf deine Einschätzung angewiesen.
             </p>
             <p className="text-gray-700 mb-4">
-              Diese Informationen helfen uns, Ihre Annotationsergebnisse besser zu verstehen und zu bewerten. Alle Angaben werden vertraulich behandelt.
+              Deine Aufgabe ist es, kurze Audioaufnahmen anzuhören und zu bewerten, wie authentisch sie nach einem bestimmten Dialekt klingen. Es gibt dabei keine richtigen oder falschen Antworten – wichtig ist deine persönliche Einschätzung.
             </p>
           </div>
 
           {/* Instructions Section */}
           <div className="mb-8">
-            <h3 className="text-lg font-semibold text-gray-900 mb-4">Wie funktioniert es?</h3>
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">So läuft die Teilnahme ab:</h3>
             <ol className="space-y-3 text-gray-700">
               <li className="flex gap-3">
                 <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                   1
                 </span>
-                <span>Sie beantworten ein kurzes Umfrage-Formular</span>
+                <span>Du beantwortest zuerst ein paar kurze Fragen zu dir und deiner Erfahrung mit Schweizer Dialekten</span>
               </li>
               <li className="flex gap-3">
                 <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                   2
                 </span>
-                <span>Die Antworten werden gespeichert</span>
+                <span>Danach folgt eine kurze Kalibrierungsphase mit echten Dialektaufnahmen</span>
               </li>
               <li className="flex gap-3">
                 <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                   3
                 </span>
-                <span>Danach geht es zur Kalibrierungsphase</span>
-              </li>
-              <li className="flex gap-3">
-                <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
-                  4
-                </span>
-                <span>Anschließend können Sie mit der Annotation beginnen</span>
+                <span>Anschliessend beginnt die eigentliche Bewertung der synthetischen Aufnahmen</span>
               </li>
             </ol>
           </div>
 
+
+          {/* Participation Section */}
+          <div className="mb-8">
+            <p className="text-gray-700 mb-4">
+              Du entscheidest selbst, wie viele Aufnahmen du bewertest. Die gesamte Teilnahme inklusive Formular, Kalibrierung und 50 bewerteten Aufnahmen dauert etwa 30 Minuten. Unter allen Teilnehmenden, die 50 oder mehr Aufnahmen bewertet haben, <strong>verlosen wir 3x [Platzhalter]-Gutscheine im Wert von je [x].- CHF!</strong>
+            </p>
+            <p className="text-gray-700 mb-4">
+              Alle Angaben werden anonym ausgewertet und ausschliesslich zu Forschungszwecken verwendet.
+            </p>
+          </div>
+
           {/* Status */}
           {hasExistingAnswers && (
             <div className="bg-green-50 border border-green-200 rounded-lg p-6 mb-8">
@@ -77,9 +82,9 @@ export default function OnboardingInfoView({
           <div className="flex justify-center">
             <button
               onClick={handleContinue}
-              className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
+              className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors text-lg"
             >
-              Weiter zum Formular
+              Jetzt starten
             </button>
           </div>
         </div>