APP

import React from 'react';
import { Search, Bell, MessageCircle, User, Home, Compass, ShoppingBag, Menu } from 'lucide-react';

export default function HomePage() {
  return (
    <div className="font-sans bg-gray-100 h-screen flex flex-col">
      {/* Header */}
      <header className="bg-blue-600 text-white p-4 flex justify-between items-center">
        <h1 className="text-xl font-bold">Te Hago Visible</h1>
        <div className="flex items-center space-x-4">
          <Search size={24} />
          <Bell size={24} />
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-grow overflow-y-auto p-4">
        {/* Destacados del día */}
        <section className="mb-6">
          <h2 className="text-lg font-semibold mb-2">Destacados del día</h2>
          <div className="flex space-x-4 overflow-x-auto pb-2">
            {[1, 2, 3].map((item) => (
              <div key={item} className="flex-shrink-0 w-40 h-40 bg-white rounded-lg shadow-md"></div>
            ))}
          </div>
        </section>

        {/* Productos cercanos */}
        <section className="mb-6">
          <h2 className="text-lg font-semibold mb-2">Productos cercanos</h2>
          <div className="grid grid-cols-2 gap-4">
            {[1, 2, 3, 4].map((item) => (
              <div key={item} className="bg-white p-2 rounded-lg shadow-md">
                <div className="w-full h-24 bg-gray-300 rounded mb-2"></div>
                <p className="text-sm font-medium">Producto {item}</p>
                <p className="text-xs text-gray-600">Vendedor {item}</p>
              </div>
            ))}
          </div>
        </section>

        {/* Categorías populares */}
        <section>
          <h2 className="text-lg font-semibold mb-2">Categorías populares</h2>
          <div className="grid grid-cols-4 gap-4">
            {['Ropa', 'Electrónica', 'Hogar', 'Accesorios'].map((category) => (
              <div key={category} className="bg-white p-2 rounded-lg shadow-md text-center">
                <div className="w-12 h-12 bg-gray-300 rounded-full mx-auto mb-2"></div>
                <p className="text-xs">{category}</p>
              </div>
            ))}
          </div>
        </section>
      </main>

      {/* Navigation Bar */}
      <nav className="bg-white border-t border-gray-200 flex justify-around items-center p-2">
        <Home size={24} />
        <Compass size={24} />
        <ShoppingBag size={24} />
        <MessageCircle size={24} />
        <User size={24} />
      </nav>
    </div>
  );
}