make the below page make look better using shades of blue. You can make use of radiance colors.
import { NavBar } from "@/components/navbar"
import { BottomNav } from "@/components/bottom-nav"
import { CarCard } from "@/components/car-card"
import { Button } from "@/components/ui/button"
import { PlusCircle } from "lucide-react"
import Link from "next/link"
// This would typically come from a database or API
const userCars = [
{
id: 1,
name: "Tesla Model 3",
imageUrl: "https://hips.hearstapps.com/hmg-prod/images/2025-tesla-model-s-1-672d42e172407.jpg?crop=0.465xw:0.466xh;0.285xw,0.361xh&resize=1200",
bookings: [
{ start: "2023-06-01", end: "2023-06-03" },
{ start: "2023-06-10", end: "2023-06-15" },
],
},
{
id: 2,
name: "Ford Mustang",
imageUrl: "https://platform.cstatic-images.com/in/v2/stock_photos/602375aa-858e-4b71-a9eb-f77ca929c9d0/2fb5b283-ca73-41c1-812d-151a80af3953.png",
bookings: [
{ start: "2023-06-05", end: "2023-06-07" },
{ start: "2023-06-20", end: "2023-06-25" },
],
},
{
id: 3,
name: "Toyota Camry",
imageUrl: "https://stimg.cardekho.com/images/carexteriorimages/930x620/Toyota/Camry/11344/1733916451269/front-left-side-47.jpg",
bookings: [
{ start: "2023-06-08", end: "2023-06-09" },
{ start: "2023-06-18", end: "2023-06-22" },
],
},
]
export default function Home() {
return (
<div className="min-h-screen bg-blue-100">
<NavBar />
<main className="container mx-auto px-4 py-8 pb-16 sm:pb-8">
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">My Cars</h1>
<Button>
<PlusCircle className="mr-2 h-4 w-4" /> Add Car
</Button>
</div>
<div className="flex flex-col sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
{userCars.map((car) => (
<Link href={/car/${car.id}} key={car.id}>
<CarCard name={car.name} imageUrl={car.imageUrl} />
</Link>
))}
</div>
</main>
<BottomNav />
</div>
)
}
I'll enhance the page using shades of blue and incorporate radial gradients to create a more visually appealing design. Here's the updated version of your code:
These changes incorporate various shades of blue and radial gradients to enhance the visual appeal of your car rental app. Here's a summary of the improvements:
These changes should significantly improve the visual appeal of your car rental app while maintaining its functionality. The use of various shades of blue creates a cohesive and professional look, while the gradients add depth and interest to the design.
here is car card component.
import Image from "next/image"
import { Card, CardContent } from "@/components/ui/card"
interface CarCardProps {
name: string
imageUrl: string
}
export function CarCard({ name, imageUrl }: CarCardProps) {
return (
<Card className="w-full">
<CardContent className="p-2 cursor-pointer">
<div className="flex sm:flex-col flex-row justify-around sm:px-1 px-8">
<div className="relative sm:w-full w-2/3 sm:h-48">
<Image
src={imageUrl || "/placeholder.svg"}
alt={name}
fill
style={{ objectFit: "cover" }}
className="sm:rounded-l-lg sm:rounded-t-none"
/>
</div>
<div className="p-4 w-full flex sm:justify-center justify-end items">
<h3 className="text-lg font-semibold">{name}</h3>
</div>
</div>
</CardContent>
</Card>
)
}
Thank you for providing the CarCard component. I'll update it to match the new blue theme and improve its visual appeal. Here's the enhanced version of the CarCard component:
Here are the changes and improvements made to the CarCard component:
Now, let's update the main page to reflect these changes:
These changes will create a more cohesive and visually appealing design for your car rental app. The CarCard component now has a more modern look with the image taking up more space and the car information displayed below. The hover effects on both the main page and the CarCard component add interactivity and depth to the design.
The blue theme is consistently applied throughout the components, creating a harmonious and professional appearance. The gradient backgrounds and subtle shadows add depth and visual interest to the overall design.