Site de Livros
Vou criar um site de livros com uma página inicial que apresenta livros em destaque, categorias e funcionalidade de pesquisa.
Criei um site de livros completo em português com as seguintes características:
Funcionalidades Principais
- Cabeçalho responsivo com logo, barra de pesquisa e botões de login/cadastro
- Banner principal destacando a proposta da livraria
- Seção de livros em destaque mostrando os livros mais populares
- Categorias de livros com ícones representativos
- Seção de clube do livro para promover assinaturas
- Rodapé completo com links de navegação e newsletter
Componentes
BookCard - Card para exibir informações de cada livro:
- Imagem de capa
- Título e autor
- Avaliação com estrelas
- Preço original e com desconto
- Botão para adicionar ao carrinho
CategoryCard - Card para exibir categorias:
- Ícone representativo
- Nome da categoria
- Quantidade de livros disponíveis
- Dados de exemplo - Arquivo com dados de exemplo para livros e categorias
Design
- Design responsivo que se adapta a dispositivos móveis e desktop
- Cores neutras para facilitar a leitura
- Elementos visuais que destacam os livros e categorias
Site de Venda de eBooks "Entre Páginas Com Duda"
Vou criar um site para venda de eBooks inspirado nas cores vibrantes do seu logo.
Site de Venda de eBooks "Entre Páginas Com Duda"
Criei um site completo para venda de eBooks inspirado nas cores vibrantes do seu logo (turquesa, rosa, amarelo/laranja). O site foi desenvolvido com foco na experiência do usuário e na apresentação atraente dos seus eBooks.
Características Principais:
Design Colorido e Atraente
- Paleta de cores baseada no logo: turquesa (
#00A9B4), rosa (#E94D8A), amarelo/laranja (#F7B32B) - Layout moderno e responsivo para todos os dispositivos
- Elementos visuais que destacam os eBooks
- Paleta de cores baseada no logo: turquesa (
Páginas Completas
- Página Inicial: Destaque para eBooks populares, categorias e seção "Como Funciona"
- Catálogo de eBooks: Lista completa com filtros por categoria e preço
- Página de Detalhes do eBook: Informações completas, preço, descrição e eBooks relacionados
Componentes Funcionais
- Header: Logo, navegação, pesquisa e ícones de carrinho/conta
- Book Card: Exibição atraente de cada eBook com capa, título, autor e preço
- Category Card: Cards para navegação por categorias
- Footer: Links úteis, informações de contato e newsletter
Funcionalidades
- Sistema de navegação intuitivo
- Pesquisa de eBooks
- Filtragem por categorias e preço
- Carrinho de compras (interface visual)
- Recomendações de eBooks relacionados
O site está pronto para ser expandido com funcionalidades adicionais como autenticação de usuários, processamento de pagamentos e área de administração para gerenciar os eBooks.
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
export default function HomePage() {
const [loggedIn, setLoggedIn] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
function handleLogin() {
if (email && password) {
setLoggedIn(true);
}
}
return (
<div className="min-h-screen bg-gradient-to-br from-pink-100 to-purple-200 p-6">
<div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl font-bold mb-4">Bem-vinda ao Meu Cantinho Literário</h1>
<p className="text-lg mb-6">Descubra meus livros, inspire-se e leve uma história com você!</p>
</div>
{!loggedIn ? (
<Card className="max-w-md mx-auto mb-8">
<CardContent className="p-6 space-y-4">
<h2 className="text-2xl font-semibold">Login</h2>
<Input placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
<Input placeholder="Senha" type="password" value={password} onChange={e => setPassword(e.target.value)} />
<Button onClick={handleLogin} className="w-full">Entrar</Button>
</CardContent>
</Card>
) : (
<div className="grid gap-6 md:grid-cols-2">
<div className="bg-white rounded-2xl shadow-lg p-6">
<h2 className="text-2xl font-semibold mb-2">Meus Livros</h2>
<ul className="list-disc list-inside text-left">
<li>Livro 1 - "Título do Livro A"</li>
<li>Livro 2 - "Título do Livro B"</li>
<li>eBook - "Título Digital C"</li>
</ul>
<Button className="mt-4">Ver Carrinho</Button>
</div>
<div className="bg-yellow-100 rounded-2xl shadow-inner p-6">
<h2 className="text-2xl font-semibold mb-2">Cantinho da Inspiração 🌟</h2>
<p className="text-left mb-2">
"A escrita é a pintura da voz. Que sua inspiração floresça a cada página." 🌸
</p>
<p className="italic text-sm text-gray-700">
"Portanto, agora nenhuma condenação há para os que estão em Cristo Jesus." — Romanos 8:1
</p>
</div>
</div>
)}
<a
href="https://wa.me/SEUNUMEROAQUI"
className="fixed bottom-4 right-4 bg-green-500 text-white p-3 rounded-full shadow-lg hover:bg-green-600"
target="_blank"
rel="noopener noreferrer"
>
WhatsApp
</a>
</div>
);
}