create suggestion model, fix unfillable language

resources/css/app.css

@@ -9,6 +9,10 @@
         'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
+:root {
+  --ui-primary: rgb(255, 200, 0);
+}
+
 .main {
     text-align: center;
 }

resources/js/App.vue

@@ -29,6 +29,7 @@ import HowToPlay from "./components/HowToPlay.vue";
 
 
     <template #right>
+
       <HowToPlay/>
        <UColorModeSwitch :size="xl"/>
     </template>

resources/js/pages/HomeView.vue

@@ -96,7 +96,7 @@
     <template #footer>
       
       <template v-if="guesses.length < maxGuesses && !correct">
-      <div class="flex-container">
+      <div class="flex-container" v-if="guess.length > 0">
         <template v-for="word in words">
           <GuessWord :correctness="words.length == 3 ? -1 : (words.length > 3 ? -2 : -3)">
               {{ word }}

resources/js/pages/SuggestionView.vue

@@ -1,3 +1,20 @@
 <template>
     <h1>TLA suggestion form</h1>
+    <UCard>
+    <UForm>
+        <UFormField label="Acronym" required>
+            <UInput placeholder="Enter your TLA"></UInput>
+        </UFormField>
+        <UFormField label="Motto" required>
+            <UInput placeholder="Enter the motto for your TLA"></UInput>
+        </UFormField>
+        <UFormField label="Contex" required>
+            <UTextarea style="w-full" placeholder="Provide context for your TLA. This will be displayed upon completing the riddle of the day, either by guessing it correctly, or by running out of guesses."></UTextarea>
+        </UFormField>
+        <UButton>
+            salkdjf
+        </UButton>
+    </UForm>
+    </UCard>
+    
 </template>