Seed: real-estate template (18 files)
This commit is contained in:
@@ -0,0 +1,227 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import {
|
||||||
|
Search, ArrowRight, Home, Bed, Bath, Maximize, Star, MapPin,
|
||||||
|
Building2, Users, Award, TrendingUp, Eye, Handshake, Key
|
||||||
|
} from "lucide-react";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const featured = [
|
||||||
|
{ name: "Modern Loft Penthouse", price: "$1,850,000", beds: "3", baths: "2", sqft: "2,400", addr: "88 Park Ave, Manhattan", status: "For Sale", gradient: "from-emerald-800/40 to-stone-700/40" },
|
||||||
|
{ name: "Lakeside Villa", price: "$3,200/mo", beds: "4", baths: "3", sqft: "3,100", addr: "12 Lakeshore Dr, Austin", status: "For Rent", gradient: "from-stone-700/40 to-amber-800/40" },
|
||||||
|
{ name: "Hillcrest Estate", price: "$4,750,000", beds: "6", baths: "5", sqft: "6,800", addr: "9 Hillcrest Rd, Beverly Hills", status: "For Sale", gradient: "from-amber-800/40 to-emerald-900/40" },
|
||||||
|
{ name: "Downtown Condo", price: "$675,000", beds: "2", baths: "2", sqft: "1,200", addr: "300 Main St, Chicago", status: "For Sale", gradient: "from-emerald-900/40 to-stone-800/40" },
|
||||||
|
{ name: "Beachfront Apartment", price: "$4,500/mo", beds: "3", baths: "2", sqft: "1,800", addr: "55 Ocean Blvd, Miami", status: "For Rent", gradient: "from-stone-800/40 to-emerald-800/40" },
|
||||||
|
{ name: "Country Ranch Home", price: "$925,000", beds: "5", baths: "3", sqft: "4,500", addr: "44 Ranch Rd, Scottsdale", status: "For Sale", gradient: "from-emerald-700/40 to-amber-900/40" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ icon: Building2, val: "2,500+", label: "Properties Sold" },
|
||||||
|
{ icon: Users, val: "4,800+", label: "Happy Clients" },
|
||||||
|
{ icon: Award, val: "20+", label: "Years Experience" },
|
||||||
|
{ icon: TrendingUp, val: "35", label: "Cities Covered" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{ icon: Search, title: "Search", desc: "Browse our curated collection of premium properties with advanced filters." },
|
||||||
|
{ icon: Eye, title: "Visit", desc: "Schedule private viewings and explore every detail in person or virtually." },
|
||||||
|
{ icon: Key, title: "Close", desc: "Our agents guide you through negotiations to a seamless closing." },
|
||||||
|
];
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{ name: "Sarah Mitchell", text: "Prestige Realty made our home buying journey incredibly smooth. Our agent was knowledgeable, patient, and truly cared about finding us the perfect fit.", role: "Homeowner, Manhattan" },
|
||||||
|
{ name: "James Chen", text: "Sold our property in under two weeks at above asking price. The marketing strategy and negotiation skills were exceptional.", role: "Property Seller, Austin" },
|
||||||
|
{ name: "Maria Gonzalez", text: "As first-time buyers, we were nervous. The team walked us through every step with patience and expertise. Could not recommend them more.", role: "First-time Buyer, Chicago" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function IndexPage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background text-foreground antialiased">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* ── HERO ── */}
|
||||||
|
<section className="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-br from-stone-950 via-emerald-950/30 to-stone-950">
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
<div className="absolute top-1/4 left-1/3 w-[600px] h-[600px] rounded-full bg-emerald-600 opacity-10 blur-[180px]" />
|
||||||
|
<div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full bg-amber-500 opacity-[0.07] blur-[120px]" />
|
||||||
|
</div>
|
||||||
|
<div className="relative mx-auto max-w-7xl px-6 py-32 grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<div className="animate-fade-up">
|
||||||
|
<Badge className="bg-emerald-600/20 text-emerald-400 border-emerald-600/30 mb-6">#1 Luxury Real Estate Platform</Badge>
|
||||||
|
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-white leading-[1.1] mb-6">Find Your Dream Home</h1>
|
||||||
|
<p className="text-lg text-stone-400 max-w-md mb-8">Discover exceptional properties in the most sought-after neighborhoods. Your perfect home is just a search away.</p>
|
||||||
|
|
||||||
|
{/* Search Bar */}
|
||||||
|
<div className="bg-white/10 backdrop-blur-xl rounded-2xl p-4 border border-white/10 shadow-2xl">
|
||||||
|
<div className="grid sm:grid-cols-4 gap-3">
|
||||||
|
<Input placeholder="Location..." className="bg-white/10 border-white/10 text-white placeholder:text-stone-400 rounded-xl" />
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger className="bg-white/10 border-white/10 text-white rounded-xl"><SelectValue placeholder="Type" /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{["House", "Apartment", "Condo", "Villa"].map((t) => <SelectItem key={t} value={t.toLowerCase()}>{t}</SelectItem>)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select>
|
||||||
|
<SelectTrigger className="bg-white/10 border-white/10 text-white rounded-xl"><SelectValue placeholder="Price Range" /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{["$0-$250K", "$250K-$500K", "$500K-$1M", "$1M+"].map((t) => <SelectItem key={t} value={t}>{t}</SelectItem>)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Button className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl shadow-lg shadow-emerald-600/20 active:scale-[0.97] transition-all">
|
||||||
|
<Search className="h-4 w-4 mr-2" />Search
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Floating Property Card */}
|
||||||
|
<div className="hidden lg:flex justify-center animate-fade-up" style={{ animationDelay: "200ms" }}>
|
||||||
|
<Card className="w-80 bg-white/10 backdrop-blur-xl border-white/10 rounded-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300 shadow-2xl">
|
||||||
|
<div className="h-48 bg-gradient-to-br from-emerald-700/40 to-amber-800/30 flex items-center justify-center">
|
||||||
|
<Home className="h-16 w-16 text-white/30" />
|
||||||
|
</div>
|
||||||
|
<CardContent className="p-5">
|
||||||
|
<Badge className="bg-emerald-600/20 text-emerald-400 border-emerald-600/30 mb-2">Featured</Badge>
|
||||||
|
<div className="text-2xl font-bold text-white">$2,450,000</div>
|
||||||
|
<div className="text-sm text-stone-400 mt-1">1240 Ocean Drive, Malibu, CA</div>
|
||||||
|
<div className="flex items-center gap-4 mt-3 text-xs text-stone-400">
|
||||||
|
<span className="flex items-center gap-1"><Bed className="h-3 w-3" /> 5 Beds</span>
|
||||||
|
<span className="flex items-center gap-1"><Bath className="h-3 w-3" /> 4 Baths</span>
|
||||||
|
<span className="flex items-center gap-1"><Maximize className="h-3 w-3" /> 4,200 sqft</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── FEATURED PROPERTIES ── */}
|
||||||
|
<section className="py-24 bg-stone-50 dark:bg-stone-950">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-16 animate-fade-up">
|
||||||
|
<Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-600/20 dark:text-emerald-400 mb-4">Featured Listings</Badge>
|
||||||
|
<h2 className="text-4xl font-bold text-stone-900 dark:text-white">Handpicked Properties</h2>
|
||||||
|
<p className="mt-3 text-stone-500 dark:text-stone-400 max-w-lg mx-auto">Discover premium homes curated by our expert agents.</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{featured.map((p, i) => (
|
||||||
|
<Link key={i} to="/properties/1" className="group animate-fade-up" style={{ animationDelay: `\${i * 80}ms` }}>
|
||||||
|
<Card 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">
|
||||||
|
<div className={`h-52 bg-gradient-to-br \${p.gradient} flex items-center justify-center relative`}>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<CardContent className="p-5">
|
||||||
|
<div className="text-2xl font-bold text-emerald-600">{p.price}</div>
|
||||||
|
<div className="text-base font-semibold text-stone-800 dark:text-white mt-1">{p.name}</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">
|
||||||
|
<span className="flex items-center gap-1"><Bed className="h-4 w-4" />{p.beds}</span>
|
||||||
|
<span className="flex items-center gap-1"><Bath className="h-4 w-4" />{p.baths}</span>
|
||||||
|
<span className="flex items-center gap-1"><Maximize className="h-4 w-4" />{p.sqft} sqft</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="text-center mt-12">
|
||||||
|
<Button asChild variant="outline" className="rounded-full px-8 border-emerald-600 text-emerald-600 hover:bg-emerald-600 hover:text-white transition-all">
|
||||||
|
<Link to="/properties">View All Properties <ArrowRight className="h-4 w-4 ml-2" /></Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── STATS ── */}
|
||||||
|
<section className="py-20 bg-stone-900 dark:bg-stone-950">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{stats.map((s, i) => (
|
||||||
|
<div key={i} className="text-center animate-fade-up" style={{ animationDelay: `\${i * 100}ms` }}>
|
||||||
|
<s.icon className="h-8 w-8 text-emerald-500 mx-auto mb-3" />
|
||||||
|
<div className="text-4xl font-bold text-white">{s.val}</div>
|
||||||
|
<div className="text-sm text-stone-400 mt-1">{s.label}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── HOW IT WORKS ── */}
|
||||||
|
<section className="py-24 bg-white dark:bg-stone-950">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-16 animate-fade-up">
|
||||||
|
<Badge className="bg-amber-100 text-amber-700 dark:bg-amber-600/20 dark:text-amber-400 mb-4">Simple Process</Badge>
|
||||||
|
<h2 className="text-4xl font-bold text-stone-900 dark:text-white">How It Works</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{steps.map((s, i) => (
|
||||||
|
<div key={i} className="text-center animate-fade-up" style={{ animationDelay: `\${i * 120}ms` }}>
|
||||||
|
<div className="w-16 h-16 rounded-2xl bg-emerald-100 dark:bg-emerald-600/20 flex items-center justify-center mx-auto mb-5">
|
||||||
|
<s.icon className="h-7 w-7 text-emerald-600" />
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-bold text-emerald-600 mb-1">Step {i + 1}</div>
|
||||||
|
<h3 className="text-xl font-bold text-stone-900 dark:text-white mb-2">{s.title}</h3>
|
||||||
|
<p className="text-stone-500 dark:text-stone-400 text-sm">{s.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── TESTIMONIALS ── */}
|
||||||
|
<section className="py-24 bg-stone-50 dark:bg-stone-900/50">
|
||||||
|
<div className="mx-auto max-w-7xl px-6">
|
||||||
|
<div className="text-center mb-16 animate-fade-up">
|
||||||
|
<Badge className="bg-emerald-100 text-emerald-700 dark:bg-emerald-600/20 dark:text-emerald-400 mb-4">Testimonials</Badge>
|
||||||
|
<h2 className="text-4xl font-bold text-stone-900 dark:text-white">What Our Clients Say</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{testimonials.map((t, i) => (
|
||||||
|
<Card key={i} className="bg-white/70 dark:bg-white/5 backdrop-blur-xl border-stone-200 dark:border-white/10 rounded-2xl hover:-translate-y-1 transition-transform duration-300 animate-fade-up" style={{ animationDelay: `\${i * 100}ms` }}>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex gap-1 mb-4">{Array.from({ length: 5 }).map((_, j) => <Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />)}</div>
|
||||||
|
<p className="text-stone-600 dark:text-stone-300 text-sm mb-4 italic">“{t.text}”</p>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-700 flex items-center justify-center text-white font-bold text-sm">{t.name.charAt(0)}</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-stone-900 dark:text-white text-sm">{t.name}</div>
|
||||||
|
<div className="text-xs text-stone-500 dark:text-stone-400">{t.role}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── CTA ── */}
|
||||||
|
<section className="py-24 bg-gradient-to-br from-emerald-700 via-emerald-800 to-stone-900 relative overflow-hidden">
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
<div className="absolute top-0 right-0 w-[500px] h-[500px] rounded-full bg-amber-400 opacity-[0.07] blur-[150px]" />
|
||||||
|
</div>
|
||||||
|
<div className="relative mx-auto max-w-3xl px-6 text-center animate-fade-up">
|
||||||
|
<h2 className="text-4xl sm:text-5xl font-bold text-white mb-4">Ready to Find Your Dream Home?</h2>
|
||||||
|
<p className="text-emerald-100/80 text-lg mb-8">Let our expert agents guide you to the perfect property. Start your journey today.</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Button asChild size="lg" className="bg-white text-emerald-700 hover:bg-stone-100 rounded-full px-8 shadow-xl active:scale-[0.97] transition-all">
|
||||||
|
<Link to="/properties">Browse Properties</Link>
|
||||||
|
</Button>
|
||||||
|
<Button asChild size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10 rounded-full px-8 active:scale-[0.97] transition-all">
|
||||||
|
<Link to="/contact">Schedule Viewing</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user