Componentes modernos para una tienda web

Generame varios componentes como una barra de navegacion, un footer, un componente que muestre los productos y permita diferentes opciones de filtrado, busqueda, etc, Cada uno de estos componentes deben tener un diseño moderno y atraactivo

Claro, aquí tienes una descripción de varios componentes que podrías implementar en una aplicación web moderna. Te proporcionaré ejemplos de cómo podrían estructurarse y algunos estilos CSS sugeridos para cada uno.

1. Barra de Navegación

HTML:

<nav class="navbar">
    <div class="logo">Mi Tienda</div>
    <ul class="nav-links">
        <li><a href="#home">Inicio</a></li>
        <li><a href="#productos">Productos</a></li>
        <li><a href="#sobre-nosotros">Sobre Nosotros</a></li>
        <li><a href="#contacto">Contacto</a></li>
    </ul>
    <div class="search-container">
        <input type="text" placeholder="Buscar productos...">
        <button type="submit">Buscar</button>
    </div>
</nav>

CSS:

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 15px 30px;
    color: white;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #ff6347;
}

.search-container {
    display: flex;
}

.search-container input {
    padding: 5px;
    border: none;
    border-radius: 5px;
}

.search-container button {
    padding: 5px 10px;
    background-color: #ff6347;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-container button:hover {
    background-color: #e5533d;
}

2. Footer

HTML:

<footer class="footer">
    <div class="footer-content">
        <p>&copy; 2023 Mi Tienda. Todos los derechos reservados.</p>
        <ul class="social-links">
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Instagram</a></li>
        </ul>
    </div>
</footer>

CSS:

.footer {
    background-color: #333;
    color: white;
    padding: 20px 30px;
    text-align: center;
}

.social-links {
    list-style: none;
    padding: 0;
}

.social-links li {
    display: inline;
    margin: 0 10px;
}

.social-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #ff6347;
}

3. Componente de Productos

HTML:

<div class="product-filter">
    <input type="text" placeholder="Buscar productos..." class="filter-search">
    <select class="filter-category">
        <option value="">Categoría</option>
        <option value="electronica">Electrónica</option>
        <option value="ropa">Ropa</option>
        <option value="hogar">Hogar</option>
    </select>
    <button class="filter-button">Filtrar</button>
</div>

<div class="product-list">
    <div class="product-card">
        <img src="producto1.jpg" alt="Producto 1">
        <h3>Producto 1</h3>
        <p>$10.00</p>
        <button>Añadir al carrito</button>
    </div>
    <div class="product-card">
        <img src="producto2.jpg" alt="Producto 2">
        <h3>Producto 2</h3>
        <p>$20.00</p>
        <button>Añadir al carrito</button>
    </div>
    <!-- Más productos -->
</div>

CSS:

.product-filter {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.filter-search, .filter-category, .filter-button {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.filter-button {
    background-color: #ff6347;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

.filter-button:hover {
    background-color: #e5533d;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product-card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    width: 200px;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: scale(1.05);
}

.product-card img {
    max-width: 100%;
    border-radius: 5px;
}

Resumen

Estos componentes son solo ejemplos básicos y pueden ser personalizados según tus necesidades. Puedes agregar más funcionalidades como un sistema de autenticación, un carrito de compras, o integrar una API para obtener productos dinámicamente. Además, considera usar frameworks como React, Vue o Angular para una mejor gestión de estados y componentes.