tamfrr/friascar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Atualizar src/app/page.jsx

Browse Source
This commit is contained in:
tamfrr
2024-11-26 13:56:43 -08:00
parent 1e8b61305d
commit 8575ba35fc
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/page.jsx
View File

@ -4,25 +4,25 @@ import React from 'react';
import { MessageCircle } from 'lucide-react';
const CarCard = ({ car }) => (
<div className="bg-white rounded-lg shadow-md overflow-hidden relative">
<div className="bg-white rounded-lg shadow-lg overflow-hidden transition-transform hover:scale-[1.02]">
{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">
<div className="absolute top-4 right-4 bg-blue-500 text-white px-4 py-1 rounded z-10">
SPECIAL
</div>
)}
<img
src={car.image}
alt={car.name}
className="w-full h-48 object-cover"
className="w-full h-56 object-cover"
/>
<div className="p-4">
<h2 className="text-lg font-bold text-gray-800">
<div className="p-6">
<h2 className="text-xl font-bold text-gray-800 text-center mb-3">
{car.name}
</h2>
<div className="text-xl font-bold text-blue-500 mt-2">
<div className="text-2xl font-bold text-blue-500 text-center mb-4">
${car.price.toLocaleString()}
</div>
<div className="flex justify-between mt-4 text-gray-600 text-sm">
<div className="flex justify-center space-x-6 text-gray-600">
<div className="flex items-center">
<span>{car.specs.consumption}</span>
</div>
@ -55,32 +55,32 @@ const HomePage = () => {
return (
<div className="min-h-screen bg-gray-50">
<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>
<header className="bg-white shadow-md">
<div className="max-w-6xl mx-auto px-4 py-6">
<div className="w-48 h-12 bg-gray-800 rounded-lg flex items-center justify-center mx-auto">
<span className="text-white font-bold">LOGO</span>
</div>
</div>
</header>
<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">
<main className="max-w-6xl mx-auto px-4 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{cars.map(car => (
<CarCard key={car.id} car={car} />
))}
</div>
</main>
<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>
<footer className="bg-white shadow-md mt-auto">
<div className="max-w-6xl mx-auto px-4 py-8">
<div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8">
<div className="text-gray-600 text-center md:text-left">
<p className="font-medium">Contact: +351 123 456 789</p>
<p className="font-medium">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"
className="flex items-center bg-green-500 text-white px-6 py-3 rounded-lg hover:bg-green-600 transition-colors font-medium"
>
<MessageCircle className="w-5 h-5 mr-2" />
Contact via WhatsApp