Enviar arquivos para "src/app"

2024-11-24 08:59:12 -08:00
parent afdb67f21c
commit 3a6a3bce37
2 changed files with 158 additions and 0 deletions
--- a/src/app/layout.jsx
+++ 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 (
+    <html lang="pt">
+      <body>{children}</body>
+    </html>
+  )
+}
--- a/src/app/page.jsx
+++ 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 }) => (
+  <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;