Enviar arquivos para "src/app"
This commit is contained in:
12
src/app/layout.jsx
Normal file
12
src/app/layout.jsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
export const metadata = {
|
||||||
|
title: 'Nome do Site de Carros',
|
||||||
|
description: 'Descrição do site para SEO',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({ children }) {
|
||||||
|
return (
|
||||||
|
<html lang="pt">
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
146
src/app/page.jsx
Normal file
146
src/app/page.jsx
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { MessageCircle } from 'lucide-react';
|
||||||
|
|
||||||
|
// Dados de exemplo (depois virão do backend)
|
||||||
|
const cars = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: 'MERCEDES-BENZ C-CLASS',
|
||||||
|
year: '2015',
|
||||||
|
price: 35000,
|
||||||
|
image: '/api/placeholder/400/300',
|
||||||
|
special: true,
|
||||||
|
specs: {
|
||||||
|
consumption: '18/26',
|
||||||
|
transmission: 'Automatic',
|
||||||
|
mileage: '100'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: 'NISSAN ALTIMA',
|
||||||
|
year: '2019',
|
||||||
|
price: 18000,
|
||||||
|
image: '/api/placeholder/400/300',
|
||||||
|
special: true,
|
||||||
|
specs: {
|
||||||
|
consumption: '25/36',
|
||||||
|
transmission: 'Automatic',
|
||||||
|
mileage: '18000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: 'TESLA ROADSTER',
|
||||||
|
year: '2021',
|
||||||
|
price: 109000,
|
||||||
|
image: '/api/placeholder/400/300',
|
||||||
|
special: false,
|
||||||
|
specs: {
|
||||||
|
consumption: '18/100',
|
||||||
|
transmission: 'Automatic',
|
||||||
|
mileage: '400'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: 'LEXUS RX-350',
|
||||||
|
year: '2021',
|
||||||
|
price: 22000,
|
||||||
|
image: '/api/placeholder/400/300',
|
||||||
|
special: true,
|
||||||
|
specs: {
|
||||||
|
consumption: '18/100',
|
||||||
|
transmission: 'Automatic',
|
||||||
|
mileage: '2000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const CarCard = ({ car }) => (
|
||||||
|
<div className="bg-white rounded-lg shadow-md overflow-hidden relative">
|
||||||
|
{car.special && (
|
||||||
|
<div className="absolute top-4 right-4 bg-blue-500 text-white px-4 py-1 rounded-md transform rotate-45 z-10">
|
||||||
|
SPECIAL
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<img
|
||||||
|
src={car.image}
|
||||||
|
alt={car.name}
|
||||||
|
className="w-full h-48 object-cover"
|
||||||
|
/>
|
||||||
|
<div className="p-4">
|
||||||
|
<h2 className="text-lg font-bold text-gray-800">
|
||||||
|
{car.name} {car.year}
|
||||||
|
</h2>
|
||||||
|
<div className="text-xl font-bold text-blue-500 mt-2">
|
||||||
|
${car.price.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between mt-4 text-gray-600 text-sm">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span>{car.specs.consumption}</span>
|
||||||
|
<svg className="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M10 3a7 7 0 100 14 7 7 0 000-14z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span>{car.specs.transmission}</span>
|
||||||
|
<svg className="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M10 3a7 7 0 100 14 7 7 0 000-14z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span>{car.specs.mileage}</span>
|
||||||
|
<svg className="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M10 3a7 7 0 100 14 7 7 0 000-14z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const HomePage = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="bg-white shadow-sm">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 py-4">
|
||||||
|
<div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center">
|
||||||
|
<span className="text-gray-500">LOGO</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="max-w-7xl mx-auto px-4 py-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||||
|
{cars.map(car => (
|
||||||
|
<CarCard key={car.id} car={car} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-white shadow-sm mt-8">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 py-6">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<div className="text-gray-600 mb-4 md:mb-0">
|
||||||
|
<p>Contact: +351 123 456 789</p>
|
||||||
|
<p>Email: info@cardealer.com</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => window.open('https://wa.me/351123456789')}
|
||||||
|
className="flex items-center bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition-colors"
|
||||||
|
>
|
||||||
|
<MessageCircle className="w-5 h-5 mr-2" />
|
||||||
|
Contact via WhatsApp
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
Reference in New Issue
Block a user