Atualizar src/app/page.jsx

src/app/page.jsx

@@ -1,62 +1,8 @@
+"use client";
+
 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 && (
@@ -71,7 +17,7 @@ const CarCard = ({ car }) => (
     />
     <div className="p-4">
       <h2 className="text-lg font-bold text-gray-800">
-        {car.name} {car.year}
+        {car.name}
       </h2>
       <div className="text-xl font-bold text-blue-500 mt-2">
         ${car.price.toLocaleString()}
@@ -79,21 +25,12 @@ const CarCard = ({ car }) => (
       <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>
@@ -101,9 +38,24 @@ const CarCard = ({ car }) => (
 );
 
 const HomePage = () => {
+  const cars = [
+    {
+      id: 1,
+      name: 'MERCEDES-BENZ C-CLASS 2015',
+      price: 35000,
+      image: '/api/placeholder/400/300',
+      special: true,
+      specs: {
+        consumption: '18/26',
+        transmission: 'Automatic',
+        mileage: '100'
+      }
+    },
+    // mais carros aqui
+  ];
+
   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">
@@ -112,7 +64,6 @@ const HomePage = () => {
         </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 => (
@@ -121,7 +72,6 @@ const HomePage = () => {
         </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">
@@ -144,3 +94,4 @@ const HomePage = () => {
 };
 
 export default HomePage;
+EOF