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:01 +00:00
parent 3fa3bcbb5f
commit 4e26bb9d5a
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/PropertyDetail.tsx
+5 -5
View File
@@ -73,7 +73,7 @@ export default function PropertyDetailPage() {
<div className="grid lg:grid-cols-[1fr_auto] gap-4 mb-12 animate-fade-up"> <div className="grid lg:grid-cols-[1fr_auto] gap-4 mb-12 animate-fade-up">
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<div className={`relative h-[400px] lg:h-[500px] bg-gradient-to-br \${thumbGrads[mainImg]} rounded-2xl flex items-center justify-center cursor-pointer group overflow-hidden`}> <div className={`relative h-[400px] lg:h-[500px] bg-gradient-to-br ${thumbGrads[mainImg]} rounded-2xl flex items-center justify-center cursor-pointer group overflow-hidden`}>
<Home className="h-24 w-24 text-white/20" /> <Home className="h-24 w-24 text-white/20" />
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center"> <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<ZoomIn className="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity" /> <ZoomIn className="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
@@ -85,14 +85,14 @@ export default function PropertyDetailPage() {
</div> </div>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-w-4xl p-0 bg-transparent border-0"> <DialogContent className="max-w-4xl p-0 bg-transparent border-0">
<div className={`h-[70vh] bg-gradient-to-br \${thumbGrads[mainImg]} rounded-2xl flex items-center justify-center`}> <div className={`h-[70vh] bg-gradient-to-br ${thumbGrads[mainImg]} rounded-2xl flex items-center justify-center`}>
<Home className="h-32 w-32 text-white/20" /> <Home className="h-32 w-32 text-white/20" />
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<div className="flex lg:flex-col gap-3"> <div className="flex lg:flex-col gap-3">
{thumbGrads.map((g, i) => ( {thumbGrads.map((g, i) => (
<button key={i} onClick={() => setMainImg(i)} className={`w-20 h-20 lg:w-24 lg:h-24 rounded-xl bg-gradient-to-br \${g} flex items-center justify-center border-2 transition-all \${mainImg === i ? "border-emerald-500 scale-105" : "border-transparent opacity-70 hover:opacity-100"}`}> <button key={i} onClick={() => setMainImg(i)} className={`w-20 h-20 lg:w-24 lg:h-24 rounded-xl bg-gradient-to-br ${g} flex items-center justify-center border-2 transition-all ${mainImg === i ? "border-emerald-500 scale-105" : "border-transparent opacity-70 hover:opacity-100"}`}>
<Home className="h-6 w-6 text-white/30" /> <Home className="h-6 w-6 text-white/30" />
</button> </button>
))} ))}
@@ -218,9 +218,9 @@ export default function PropertyDetailPage() {
<h2 className="text-2xl font-bold text-stone-900 dark:text-white mb-8">Similar Properties</h2> <h2 className="text-2xl font-bold text-stone-900 dark:text-white mb-8">Similar Properties</h2>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
{similar.map((p, i) => ( {similar.map((p, i) => (
<Link key={i} to="/properties/1" className="group animate-fade-up" style={{ animationDelay: `\${i * 100}ms` }}> <Link key={i} to="/properties/1" className="group animate-fade-up" style={{ animationDelay: `${i * 100}ms` }}>
<Card className="overflow-hidden border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-900/50 rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300"> <Card className="overflow-hidden border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-900/50 rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div className={`h-44 bg-gradient-to-br \${p.gradient} flex items-center justify-center`}> <div className={`h-44 bg-gradient-to-br ${p.gradient} flex items-center justify-center`}>
<Home className="h-10 w-10 text-white/20" /> <Home className="h-10 w-10 text-white/20" />
</div> </div>
<CardContent className="p-4"> <CardContent className="p-4">