merge instruction and create model

components/InstructionsCard.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
+    <h2 class="text-2xl font-bold mb-4">How to Create Your Model and Generate Images</h2>
+
+    <p class="mb-4">
+      Follow these two simple steps to create your images:
+    </p>
+
+    <!-- Step 1 -->
+    <div class="mb-6">
+      <h3 class="text-xl font-semibold mb-2">Step 1: Create Your Model</h3>
+      <p class="mb-2">
+        Upload 12-20 images to build your model. Make sure to include a variety of angles, clothing, and zoom levels. When ready, click the "Train" button. The AI will take about 1 hour to process. You can leave the page and return later.
+      </p>
+    </div>
+
+    <!-- Step 2 -->
+    <div class="mb-6">
+      <h3 class="text-xl font-semibold mb-2">Step 2: Generate Your Images</h3>
+      <p class="mb-2">
+        After training, create your images by selecting a category and your style preferences. The AI will generate the images based on your input.
+      </p>
+    </div>
+
+    <!-- Restrictions Section -->
+    <div class="bg-gray-800 p-4 rounded-lg mt-6">
+      <h3 class="text-xl font-semibold mb-4">Image Restrictions</h3>
+      <p class="mb-2">
+        Please note that the following restrictions apply when uploading images:
+      </p>
+      <ul class="list-disc list-inside mb-4">
+        <li>No images of people smoking.</li>
+        <li>No images involving drug use.</li>
+        <li>No images of children.</li>
+        <li>No nudity or explicit content.</li>
+        <li>No violence or blood.</li>
+      </ul>
+      <p>
+        These limitations are enforced by the AI platform and must be followed at all times.
+      </p>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

components/Navbar.vue

@@ -44,13 +44,6 @@ const CREATEMODEL: Item = {
 	command: () => router.push("/createmodel"),
 };
 
-const INSTRUCTIONS: Item = {
-	label: "Instructions",
-	icon: "pi pi-map",
-	to: "/instructions",
-	command: () => router.push("/instructions"),
-};
-
 const PROFILE: Item = {
 	label: "Profile",
 	icon: "pi pi-user",
@@ -74,7 +67,7 @@ const LOGOUT: Item = {
 
 const items = ref<Item[]>([HOME, LOGIN]);
 if (status.value === "authenticated") {
-	items.value = [HOME, INSTRUCTIONS, CREATEMODEL, CREATEIMAGES, PROFILE, LOGOUT];
+	items.value = [HOME, CREATEMODEL, CREATEIMAGES, PROFILE, LOGOUT];
 }
 
 const activeRoute = computed(() => router.currentRoute.value.path);

pages/createmodel.vue

@@ -1,5 +1,16 @@
 <template>
-  <div>
-    <TrainFormContainer />
+  <div class="flex flex-col md:flex-row md:space-x-6 space-y-6 md:space-y-0 p-6">
+    <!-- Instruções -->
+    <div class="md:w-8/12 w-full">
+      <InstructionsCard />
+    </div>
+
+    <!-- Formulário de Treinamento -->
+    <div class="md:w-5/12 w-full">
+      <TrainFormContainer />
+    </div>
   </div>
 </template>
+
+<script setup lang="ts">
+</script>