From 7d53bd7f988e0c922a7e383096a81a1e5f937a0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio?= <mauriciomb97@gmail.com>
Date: Wed, 9 Oct 2024 10:50:19 -0300
Subject: [PATCH] merge instruction and create model

---
 components/InstructionsCard.vue | 47 +++++++++++++++++++++++++++++++++
 components/Navbar.vue           |  9 +------
 pages/createmodel.vue           | 15 +++++++++--
 pages/instructions.vue          | 34 ------------------------
 4 files changed, 61 insertions(+), 44 deletions(-)
 create mode 100644 components/InstructionsCard.vue
 delete mode 100644 pages/instructions.vue

diff --git a/components/InstructionsCard.vue b/components/InstructionsCard.vue
new file mode 100644
index 0000000..46af313
--- /dev/null
+++ b/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>
diff --git a/components/Navbar.vue b/components/Navbar.vue
index b814a25..3b74336 100644
--- a/components/Navbar.vue
+++ b/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);
diff --git a/pages/createmodel.vue b/pages/createmodel.vue
index 4ec85d3..9db97a5 100644
--- a/pages/createmodel.vue
+++ b/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>
diff --git a/pages/instructions.vue b/pages/instructions.vue
deleted file mode 100644
index 1c43ed3..0000000
--- a/pages/instructions.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <Card>
-    <template #header>
-      <div class="mt-4">
-        <span class="text-4xl pl-5 font-bold">Instructions and FAQ</span>
-      </div>
-    </template>
-
-    <template #title>
-      <span class="text-2xl">How to create my images?</span>
-    </template>
-
-    <template #content>
-      <p>Yes! Two simple steps:</p>
-      <ol>
-        <li>Create your model (12-20 images, variety in angles, clothes, and closeness). Click "train"—it will take about 1 hour for the AI to train. You can leave this page and come back later.</li>
-        <li>Create images by selecting the category and styles.</li>
-      </ol>
-    </template>
-  </Card>
-
-  <Card>
-    <template #title>
-      <span class="text-2xl">What are the limitations and rules?</span>
-    </template>
-
-    <template #content>
-      <p>Yes, there are a few limitations: no smoking, no nudes, no drugs, and no blood. These are the AI limitations, so not only our rules.</p>
-    </template>
-  </Card>
-</template>
-
-<script lang="ts" setup>
-</script>