diff --git a/src/app/layout.jsx b/src/app/layout.jsx new file mode 100644 index 0000000..ea93b7a --- /dev/null +++ b/src/app/layout.jsx @@ -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 ( + + {children} + + ) +} \ No newline at end of file diff --git a/src/app/page.jsx b/src/app/page.jsx new file mode 100644 index 0000000..c300781 --- /dev/null +++ b/src/app/page.jsx @@ -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 }) => ( +
+ {car.special && ( +
+ SPECIAL +
+ )} + {car.name} +
+

+ {car.name} {car.year} +

+
+ ${car.price.toLocaleString()} +
+
+
+ {car.specs.consumption} + + + +
+
+ {car.specs.transmission} + + + +
+
+ {car.specs.mileage} + + + +
+
+
+
+); + +const HomePage = () => { + return ( +
+ {/* Header */} +
+
+
+ LOGO +
+
+
+ + {/* Main Content */} +
+
+ {cars.map(car => ( + + ))} +
+
+ + {/* Footer */} + +
+ ); +}; + +export default HomePage;