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'; import { MessageCircle } from 'lucide-react';
const CarCard = ({ car }) => ( 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 && ( {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 SPECIAL
</div> </div>
)} )}
<img <img
src={car.image} src={car.image}
alt={car.name} alt={car.name}
className="w-full h-48 object-cover" className="w-full h-56 object-cover"
/> />
<div className="p-4"> <div className="p-6">
<h2 className="text-lg font-bold text-gray-800"> <h2 className="text-xl font-bold text-gray-800 text-center mb-3">
{car.name} {car.name}
</h2> </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()} ${car.price.toLocaleString()}
</div> </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"> <div className="flex items-center">
<span>{car.specs.consumption}</span> <span>{car.specs.consumption}</span>
</div> </div>
@ -55,32 +55,32 @@ const HomePage = () => {
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
<header className="bg-white shadow-sm"> <header className="bg-white shadow-md">
<div className="max-w-7xl mx-auto px-4 py-4"> <div className="max-w-6xl mx-auto px-4 py-6">
<div className="w-48 h-12 bg-gray-200 rounded flex items-center justify-center"> <div className="w-48 h-12 bg-gray-800 rounded-lg flex items-center justify-center mx-auto">
<span className="text-gray-500">LOGO</span> <span className="text-white font-bold">LOGO</span>
</div> </div>
</div> </div>
</header> </header>
<main className="max-w-7xl mx-auto px-4 py-8"> <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-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
{cars.map(car => ( {cars.map(car => (
<CarCard key={car.id} car={car} /> <CarCard key={car.id} car={car} />
))} ))}
</div> </div>
</main> </main>
<footer className="bg-white shadow-sm mt-8"> <footer className="bg-white shadow-md mt-auto">
<div className="max-w-7xl mx-auto px-4 py-6"> <div className="max-w-6xl mx-auto px-4 py-8">
<div className="flex flex-col md:flex-row justify-between items-center"> <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 mb-4 md:mb-0"> <div className="text-gray-600 text-center md:text-left">
<p>Contact: +351 123 456 789</p> <p className="font-medium">Contact: +351 123 456 789</p>
<p>Email: info@cardealer.com</p> <p className="font-medium">Email: info@cardealer.com</p>
</div> </div>
<button <button
onClick={() => window.open('https://wa.me/351123456789')} 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" /> <MessageCircle className="w-5 h-5 mr-2" />
Contact via WhatsApp Contact via WhatsApp