INSTALE TAILWIND Y JQUERY GENTE

package.json

@@ -7,11 +7,17 @@
         "dev": "vite"
     },
     "devDependencies": {
-        "@tailwindcss/vite": "^4.0.0",
+        "@tailwindcss/vite": "^4.1.18",
+        "autoprefixer": "^10.4.22",
         "axios": "^1.8.2",
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^2.0.0",
-        "tailwindcss": "^4.0.0",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^4.1.18",
         "vite": "^7.0.4"
+    },
+    "dependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
+        "jquery": "^3.7.1"
     }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        '@tailwindcss/postcss': {},
+        autoprefixer: {},
+    },
+};

resources/css/app.css

@@ -1,17 +1,52 @@
-@import 'tailwindcss';
+/* 1. Importar fuente Montserrat */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');
 
+/* 2. Importar Tailwind (v4) */
+@import "tailwindcss";
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 @source '../../storage/framework/views/*.php';
 @source '../**/*.blade.php';
 @source '../**/*.js';
 
+/* 3. Configuración del Tema (NUEVO EN v4) */
 @theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    /* Definimos el color personalizado 'dark-bg' */
-        'Segoe UI Symbol', 'Noto Color Emoji';
+    --color-dark-bg: #121212; 
+    /* TRADUCCIÓN: fontFamily: { sans: [...] } */
+        --font-sans: 'Montserrat', sans-serif;
+
+    /* TRADUCCIÓN: colors: { ... } 
+       La sintaxis es: --color-nombre-del-color: valor; 
+    */
+    --color-neon-lime: #ccff00;
+    --color-dark-bg: #1a1a1a;
+    --color-panel-bg: #242424;
 }
 
-@keyframes gradientMove {
+/* 4. Patrón de fondo estilo "Técnico" */
-    0%{ background-position: 0% 50%;}
+.bg-grid-pattern {
-    50%{ background-position: 100% 50%;}
+    /* CAMBIO: Usamos rgba(255,255,255, 0.1) para que las líneas sean claras sobre fondo oscuro */
-    100%{ background-position: 0% 50%;}
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+                      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    background-size: 40px 40px;
+    background-position: center;
 }
+
+/* 5. Personalización del Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1a1a1a; 
+}
+
+::-webkit-scrollbar-thumb {
+    background: #444; 
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #ccff00; /* Verde Neón */
+}

resources/js/bootstrap.js

@@ -2,3 +2,10 @@ import axios from 'axios';
 window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Configuración de jQuery global (window.$)
+ */
+import jQuery from 'jquery';
+window.$ = jQuery;
+window.jQuery = jQuery;

resources/views/catalogo.blade.php

@@ -8,7 +8,6 @@
         @if ($products->count() > 0)
             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                 @foreach ($products as $prod)
-                    <x-ui.imagecard title="" aria-description="">
                     <div class="group p-4 border border-neutral-800 rounded-xl hover:border-neon-lime hover:-translate-y-1 transition-all duration-300">
                         {{-- Imagen si existe --}}
                         @if (!empty($prod->img))
@@ -48,9 +47,4 @@
             <p class="text-center text-gray-600 mt-10">No hay productos disponibles.</p>
         @endif
     </div>
-
-    <!-- Paginación -->
-    <div class="w-full flex justify-center">
-        {{ $products->links() }}
-    </div>
 </x-layout>

resources/views/components/layout.blade.php

@@ -6,41 +6,14 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>{{ $title ?? 'Lauck Dashboard' }}</title>
     
-    <!-- Fuentes -->
+    <!-- VITE: Esto carga tu Tailwind compilado y JS -->
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap" rel="stylesheet">
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
-    
-    <!-- Tailwind y Config -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Montserrat', 'sans-serif'],
-                    },
-                    colors: {
-                        'neon-lime': '#ccff00',
-                        'dark-bg': '#1a1a1a',
-                        'panel-bg': '#242424',
-                    }
-                }
-            }
-        }
-    </script>
-    <style>
-        .bg-grid-pattern {
-            background-image: linear-gradient(to right, #333 1px, transparent 1px),
-            linear-gradient(to bottom, #333 1px, transparent 1px);
-            background-size: 40px 40px;
-            background-position: center;
-        }
-    </style>
 </head>
 
 <body class="bg-dark-bg text-gray-300 font-sans antialiased min-h-screen flex flex-col relative overflow-x-hidden">
 
     <!-- Fondo grilla global -->
-    <div class="inset-0 bg-grid-pattern opacity-[0.07] z-0 pointer-events-none fixed"></div>
+    <div class="inset-0 bg-grid-pattern opacity-[0.15] z-0 pointer-events-none fixed"></div>
 
     <!-- Navbar Component -->
     <x-navbar />

tailwind.config.js

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./resources/**/*.blade.php",
+    "./resources/**/*.js",
+    "./resources/**/*.vue",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Montserrat', 'sans-serif'], // Define Montserrat como fuente principal
+      },
+      colors: {
+        // Tus colores personalizados
+        'neon-lime': '#ccff00',
+        'dark-bg': '#1a1a1a',
+        'panel-bg': '#242424',
+      }
+    },
+  },
+  plugins: [],
+}