vibeasite-templates/template-real-estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: real-estate template (18 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:58:00 +00:00
parent e9b5201e05
commit 3fa3bcbb5f
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Properties.tsx
+5 -5
View File
@@ -77,17 +77,17 @@ export default function PropertiesPage() {
<div className="mx-auto max-w-7xl px-6"> <div className="mx-auto max-w-7xl px-6">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{listings.map((p, i) => ( {listings.map((p, i) => (
<Card key={p.id} className="overflow-hidden border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-900/50 backdrop-blur rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group animate-fade-up" style={{ animationDelay: `\${i * 80}ms` }}> <Card key={p.id} className="overflow-hidden border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-900/50 backdrop-blur rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 group animate-fade-up" style={{ animationDelay: `${i * 80}ms` }}>
<div className={`h-56 bg-gradient-to-br \${p.gradient} flex items-center justify-center relative`}> <div className={`h-56 bg-gradient-to-br ${p.gradient} flex items-center justify-center relative`}>
<Home className="h-12 w-12 text-white/20" /> <Home className="h-12 w-12 text-white/20" />
<Badge className="absolute top-4 left-4 bg-emerald-600 text-white border-0">{p.status}</Badge> <Badge className="absolute top-4 left-4 bg-emerald-600 text-white border-0">{p.status}</Badge>
<button onClick={() => toggleLike(p.id)} className={`absolute top-4 right-4 p-2 rounded-full backdrop-blur-sm transition-all \${liked.has(p.id) ? "bg-red-500/20 text-red-400" : "bg-white/10 text-white/60 hover:text-red-400"}`}> <button onClick={() => toggleLike(p.id)} className={`absolute top-4 right-4 p-2 rounded-full backdrop-blur-sm transition-all ${liked.has(p.id) ? "bg-red-500/20 text-red-400" : "bg-white/10 text-white/60 hover:text-red-400"}`}>
<Heart className={`h-4 w-4 \${liked.has(p.id) ? "fill-current" : ""}`} /> <Heart className={`h-4 w-4 ${liked.has(p.id) ? "fill-current" : ""}`} />
</button> </button>
</div> </div>
<CardContent className="p-5"> <CardContent className="p-5">
<div className="text-2xl font-bold text-emerald-600">{p.price}</div> <div className="text-2xl font-bold text-emerald-600">{p.price}</div>
<Link to={`/properties/\${p.id}`} className="text-base font-semibold text-stone-800 dark:text-white mt-1 block hover:text-emerald-600 transition-colors">{p.name}</Link> <Link to={`/properties/${p.id}`} className="text-base font-semibold text-stone-800 dark:text-white mt-1 block hover:text-emerald-600 transition-colors">{p.name}</Link>
<div className="flex items-center gap-1 text-sm text-stone-500 dark:text-stone-400 mt-1"><MapPin className="h-3 w-3" />{p.addr}</div> <div className="flex items-center gap-1 text-sm text-stone-500 dark:text-stone-400 mt-1"><MapPin className="h-3 w-3" />{p.addr}</div>
<div className="flex items-center gap-4 mt-3 pt-3 border-t border-stone-100 dark:border-stone-800 text-sm text-stone-500 dark:text-stone-400"> <div className="flex items-center gap-4 mt-3 pt-3 border-t border-stone-100 dark:border-stone-800 text-sm text-stone-500 dark:text-stone-400">
<span className="flex items-center gap-1"><Bed className="h-4 w-4" />{p.beds}</span> <span className="flex items-center gap-1"><Bed className="h-4 w-4" />{p.beds}</span>