feat(AISearch): creada vista para la búsqueda por IA de recetas

src/views/AISearch.vue

+<script setup>
+import Header from '@/components/Header.vue';
+</script>
+
+<template>
+    <Header></Header>
+    <div class="container my-5">
+        <section class="text-center mb-5">
+            <h1 class="display-5 fw-bold text-center-custom">Búsqueda por Inteligencia Artificial</h1>
+            <p class="lead">
+                Descubre nuevas recetas de forma inteligente. Introduce algunos ingredientes o el nombre de una receta y deja que nuestra IA te sorprenda con los resultados.
+            </p>
+        </section>
+
+        <section class="row justify-content-center mb-5">
+            <div class="col-md-8">
+                <form @submit.prevent="searchRecipes" class="d-flex search-box-custom">
+                    <input 
+                        type="text" 
+                        class="form-control me-2" 
+                        placeholder="Escribe ingredientes o el nombre de una receta..." 
+                        aria-label="Buscar"
+                        v-model="query"
+                    >
+                    <button class="btn btn-search-ai" type="submit">
+                        <i class="bi bi-search"></i> Buscar
+                    </button>
+                </form>
+            </div>
+        </section>
+
+        <section v-if="results.length" class="recipes-container">
+            <div class="row mb-4" v-for="recipe in results" :key="recipe.id">
+                <div class="card h-100 recipe-card-custom">
+                    <div class="card-body">
+                        <h5 class="card-title">{{ recipe.name }}</h5>
+                        <p class="card-text">{{ recipe.description }}</p>
+                        <div class="d-flex justify-content-end">
+                            <button @click="openModal(recipe)" class="btn btn-primary-custom mt-auto">Ver más</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="text-center mt-4">
+                <button @click="loadMore" class="btn btn-secondary-custom">
+                    Ver más recetas
+                </button>
+            </div>
+        </section>
+
+        <div class="modal fade" id="recipeModal" tabindex="-1" aria-labelledby="recipeModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-lg">
+                <div class="modal-content modal-custom">
+                    </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.text-center-custom {
+    color: #2C0C21;
+}
+
+.search-box-custom .form-control:focus {
+    border-color: #793E6C;
+    box-shadow: 0 0 0 0.25rem rgba(121, 62, 108, 0.25);
+}
+
+.btn-search-ai {
+    background-color: #793E6C;
+    color: #fff;
+    font-weight: 600;
+}
+
+.btn-search-ai:hover {
+    background-color: #5e3054;
+    color: #fff;
+}
+
+.recipes-container .row {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+.recipe-card-custom {
+    border: none;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.recipe-card-custom:hover {
+    transform: translateY(-5px);
+}
+
+.recipe-card-custom .card-title {
+    color: #793E6C;
+    font-weight: 700;
+}
+
+.btn-primary-custom {
+    border-color: #793E6C;
+    color: #793E6C;
+}
+
+.btn-primary-custom:hover {
+    background-color: #793E6C;
+    color: white;
+}
+
+.btn-secondary-custom {
+    background-color: #ECE1EA;
+    color: #2C0C21;
+    font-weight: 500;
+    border: 1px solid #ECE1EA;
+}
+
+.btn-secondary-custom:hover {
+    background-color: #f1e0ee;
+    border-color: #d1c8cd;
+}
+</style>
+
+<script>
+import { Modal } from 'bootstrap';
+
+export default {
+  data() {
+    return {
+      query: '',
+      results: [],
+      page: 0,
+      selectedRecipe: null
+    };
+  },
+  methods: {
+    async searchRecipes() {
+      this.page = 0;
+      this.results = [];
+      await this.fetchRecipes();
+    },
+    async loadMore() {
+      this.page++;
+      await this.fetchRecipes();
+    },
+    async fetchRecipes() {
+      // Simula la llamada a la API
+      const newRecipes = this.simulateApiCall(this.query, this.page);
+      this.results.push(...newRecipes);
+    },
+    simulateApiCall(query, page) {
+      // Esta es una función de ejemplo que simula los resultados
+      console.log(`Buscando "${query}" - Página ${page}`);
+      const baseId = page * 4;
+      return [        
+                { id: baseId + 1, 
+                    name: 'Receta de Ejemplo 1', 
+                    description: 'Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes.'},        
+                { id: baseId + 2, 
+                    name: 'Receta de Ejemplo 2', 
+                    description: 'Una descripción corta de la receta...'},        
+                { id: baseId + 3, 
+                    name: 'Receta de Ejemplo 3', 
+                    description: 'Una descripción corta de la receta...'}      
+            ];
+    },
+    openModal(recipe) {
+      this.selectedRecipe = recipe;
+      // Aquí puedes cargar el contenido completo de la receta, ya sea desde la API o si ya lo tienes
+      const modalElement = document.getElementById('recipeModal');
+      const bsModal = new Modal(modalElement);
+      bsModal.show();
+    }
+  }
+};
+</script>
\ No newline at end of file