Version sin Vite.

frontend/pages/index.js

@@ -0,0 +1,159 @@
+import { useState, useEffect } from 'react';
+import Navbar from '../Navbar';
+
+export default function Home() {
+  const [posts, setPosts] = useState([]);
+  const [filter, setFilter] = useState('');
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // Carga de posts
+    fetch('http://localhost:9002/posts')
+      .then(res => res.json())
+      .then(data => setPosts(Array.isArray(data) ? data : []))
+      .catch(err => console.error("Error:", err));
+
+    // Manejo de responsive
+    const handleResize = () => setIsMobile(window.innerWidth <= 768);
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const handleRead = async (id) => {
+    try { await fetch(`http://localhost:9002/posts/view/${id}`, { method: 'POST' }); } catch (e) {}
+  };
+
+  const filtered = posts.filter(p => 
+    p.title.toLowerCase().includes(filter.toLowerCase()) || 
+    p.tags?.toLowerCase().includes(filter.toLowerCase())
+  );
+
+  return (
+    <div style={{ 
+      fontFamily: "'Plus Jakarta Sans', sans-serif", 
+      backgroundColor: '#f8fafc', 
+      minHeight: '100vh', 
+      color: '#1e293b' 
+    }}>
+      <Navbar />
+      
+      <div style={{ 
+        maxWidth: '1200px', 
+        margin: '0 auto', 
+        padding: isMobile ? '30px 15px' : '60px 24px' 
+      }}>
+        
+        <header style={{ textAlign: 'center', marginBottom: isMobile ? '30px' : '50px' }}>
+          <h1 style={{ 
+            fontSize: isMobile ? '1.8rem' : '2.8rem', 
+            fontWeight: '800', 
+            marginBottom: '20px', 
+            color: '#0f172a',
+            letterSpacing: '-0.025em'
+          }}>
+            Bienvenido al Blog
+          </h1>
+          <input 
+            placeholder="🔍 Buscar por título o tag..." 
+            value={filter} 
+            onChange={e => setFilter(e.target.value)} 
+            style={{
+              width: '100%', 
+              maxWidth: '600px', 
+              padding: isMobile ? '12px 20px' : '16px 25px',
+              borderRadius: '30px', 
+              border: '2px solid #e2e8f0',
+              fontSize: '1rem', 
+              outline: 'none',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.02)',
+              boxSizing: 'border-box'
+            }}
+          />
+        </header>
+
+        <main style={{
+          display: 'grid',
+          gap: isMobile ? '20px' : '30px'
+        }}>
+          {filtered.map(post => (
+            <article key={post.id} style={{
+              backgroundColor: 'white', 
+              padding: isMobile ? '25px' : '40px', 
+              borderRadius: '20px',
+              border: '1px solid #e2e8f0', 
+              boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)',
+              transition: 'transform 0.2s ease'
+            }}>
+              <div style={{ 
+                display: 'flex', 
+                justifyContent: 'space-between', 
+                alignItems: 'center', 
+                marginBottom: '15px' 
+              }}>
+                <span style={{ 
+                  color: '#2563eb', 
+                  fontWeight: '800', 
+                  fontSize: '0.75rem', 
+                  textTransform: 'uppercase', 
+                  backgroundColor: '#eff6ff',
+                  padding: '4px 12px',
+                  borderRadius: '20px'
+                }}>
+                  #{post.tags || 'General'}
+                </span>
+                <span style={{ fontSize: '0.8rem', color: '#94a3b8' }}>
+                  {post.views || 0} visitas
+                </span>
+              </div>
+              
+              <h2 style={{ 
+                margin: '0 0 15px 0', 
+                fontSize: isMobile ? '1.4rem' : '1.8rem', 
+                color: '#0f172a',
+                lineHeight: '1.2'
+              }}>
+                {post.title}
+              </h2>
+              
+              <div 
+                dangerouslySetInnerHTML={{ __html: post.content?.substring(0, 180) + '...' }} 
+                style={{ 
+                  lineHeight: '1.6', 
+                  color: '#475569',
+                  fontSize: isMobile ? '0.95rem' : '1rem'
+                }} 
+              />
+              
+              <button 
+                onClick={() => handleRead(post.id)} 
+                style={{
+                  marginTop: '25px', 
+                  color: 'white', 
+                  backgroundColor: '#0f172a',
+                  border: 'none',
+                  padding: '10px 20px',
+                  borderRadius: '10px',
+                  fontWeight: '600', 
+                  cursor: 'pointer', 
+                  fontSize: '0.9rem',
+                  display: 'inline-flex',
+                  alignItems: 'center'
+                }}
+              >
+                Leer más
+                <span style={{ marginLeft: '8px' }}>→</span>
+              </button>
+            </article>
+          ))}
+          
+          {filtered.length === 0 && (
+            <div style={{ textAlign: 'center', padding: '40px' }}>
+              <p style={{ color: '#64748b', fontSize: '1.1rem' }}>No se encontraron artículos que coincidan con tu búsqueda.</p>
+            </div>
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}