1513 lines
61 KiB
TypeScript
1513 lines
61 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import {
|
|
AlertTriangle,
|
|
ArrowRight,
|
|
BarChart3,
|
|
Brain,
|
|
Building,
|
|
Calendar,
|
|
CheckCircle,
|
|
ChevronRight,
|
|
Code,
|
|
Database,
|
|
Eye,
|
|
FileText,
|
|
Home as HomeIcon,
|
|
Key,
|
|
MapPin,
|
|
MessageSquare,
|
|
Network,
|
|
Palette,
|
|
Rocket,
|
|
Search,
|
|
Shield,
|
|
Star,
|
|
Target,
|
|
Wrench as ToolIcon,
|
|
TrendingUp,
|
|
Users,
|
|
X,
|
|
} from "lucide-react";
|
|
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
|
import { Footer } from "../components/Footer";
|
|
import { Navigation } from "../components/Navigation";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "../components/ui/accordion";
|
|
import { Badge } from "../components/ui/badge";
|
|
import { Button } from "../components/ui/button";
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
import { ShimmerButton } from "../components/ui/shimmer-button";
|
|
import { navigateTo } from "@/App";
|
|
import { Helmet } from "react-helmet-async";
|
|
|
|
// Real Estate Tech Hero Section
|
|
const RealEstateTechHero = () => {
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>Real Estate Tech Solutions & Services by WDI</title>
|
|
<meta
|
|
name="description"
|
|
content="WDI delivers advanced Real Estate Tech solutions, transforming property management and transactions with AI, analytics, and seamless PropTech platforms."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/industries/financial-services/real-estate-tech" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="Real Estate Tech Solutions & Services by WDI" />
|
|
<meta
|
|
property="og:description"
|
|
content="WDI delivers advanced Real Estate Tech solutions, transforming property management and transactions with AI, analytics, and seamless PropTech platforms."
|
|
/>
|
|
<meta property="og:url" content="https://www.wdipl.com/services" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Twitter Card Tags */}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Real Estate Tech Solutions & Services by WDI" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="WDI delivers advanced Real Estate Tech solutions, transforming property management and transactions with AI, analytics, and seamless PropTech platforms."
|
|
/>
|
|
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Social Profiles (using JSON-LD Schema) */}
|
|
<script type="application/ld+json">
|
|
{`
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "WDI",
|
|
"url": "https://www.wdipl.com",
|
|
"sameAs": [
|
|
"https://www.facebook.com/wdideas",
|
|
"https://www.linkedin.com/in/website-developers-india/",
|
|
"https://www.instagram.com/wdipl/"
|
|
]
|
|
}
|
|
`}
|
|
</script>
|
|
</Helmet>
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="space-y-8"
|
|
>
|
|
{/* Industries Label */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="text-white/70 text-sm font-medium">
|
|
Industries • Financial Services
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Main Heading */}
|
|
<div className="space-y-6">
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
|
Real Estate Tech (PropTech)
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
|
Drive innovation in real estate with smart platforms for
|
|
property management, virtual tours, data analytics, and seamless
|
|
transaction experiences.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex flex-col sm:flex-row gap-4"
|
|
>
|
|
<ShimmerButton
|
|
className="text-lg px-8 py-4"
|
|
onClick={() => navigateTo("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
|
<span>Get a Free Consultation</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<Eye className="w-5 h-5 flex-shrink-0" />
|
|
<span>View PropTech Case Studies</span>
|
|
</div>
|
|
</Button>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right side with Property Management Dashboard Visualization */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative flex flex-col items-center"
|
|
>
|
|
{/* Property Management Dashboard Scene */}
|
|
<div className="relative w-full max-w-2xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="relative"
|
|
>
|
|
{/* Main Dashboard Interface */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
className="relative bg-gray-900 rounded-3xl p-6 mx-auto max-w-2xl shadow-2xl border border-gray-700"
|
|
>
|
|
{/* Dashboard Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.0 }}
|
|
className="flex items-center justify-between mb-6"
|
|
>
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-white">
|
|
Property Management Hub
|
|
</h3>
|
|
<p className="text-gray-400 text-sm">
|
|
Real-time property analytics
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
|
|
>
|
|
<TrendingUp className="w-3 h-3 mr-1" />
|
|
+8.3%
|
|
</Badge>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Property Portfolio Overview */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 1.2 }}
|
|
className="bg-gradient-to-br from-blue-600 to-indigo-600 rounded-2xl p-6 mb-6"
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<div className="text-blue-100 text-sm mb-1">
|
|
Total Property Value
|
|
</div>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 1.4 }}
|
|
className="text-white text-3xl font-bold"
|
|
>
|
|
$48.2M
|
|
</motion.div>
|
|
</div>
|
|
<div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
|
|
<Building className="w-6 h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between text-blue-100 text-sm">
|
|
<span className="flex items-center gap-1">
|
|
<HomeIcon className="w-4 h-4" />
|
|
247 Properties
|
|
</span>
|
|
<span>Occupancy: 94.2%</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Property Status Grid */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.6 }}
|
|
className="grid grid-cols-2 gap-4 mb-6"
|
|
>
|
|
{[
|
|
{
|
|
name: "Occupied",
|
|
value: "233",
|
|
percentage: "94.2%",
|
|
color: "green",
|
|
icon: Key,
|
|
},
|
|
{
|
|
name: "Vacant",
|
|
value: "14",
|
|
percentage: "5.8%",
|
|
color: "orange",
|
|
icon: HomeIcon,
|
|
},
|
|
{
|
|
name: "Maintenance",
|
|
value: "8",
|
|
percentage: "3.2%",
|
|
color: "red",
|
|
icon: ToolIcon,
|
|
},
|
|
{
|
|
name: "Showings",
|
|
value: "12",
|
|
percentage: "Today",
|
|
color: "blue",
|
|
icon: Eye,
|
|
},
|
|
].map((status, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 1.8 + i * 0.1 }}
|
|
className="bg-gray-800/50 rounded-xl p-4"
|
|
>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<status.icon
|
|
className={`w-4 h-4 ${status.color === "green"
|
|
? "text-green-400"
|
|
: status.color === "orange"
|
|
? "text-orange-400"
|
|
: status.color === "red"
|
|
? "text-red-400"
|
|
: "text-blue-400"
|
|
}`}
|
|
/>
|
|
<span className="text-white font-medium text-sm">
|
|
{status.name}
|
|
</span>
|
|
</div>
|
|
<div className="text-gray-300 text-lg font-semibold">
|
|
{status.value}
|
|
</div>
|
|
<div className="text-gray-400 text-xs">
|
|
{status.percentage}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
|
|
{/* Revenue Analytics */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 2.2 }}
|
|
className="bg-gray-800/30 rounded-xl p-4 mb-6"
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<span className="text-white font-medium">
|
|
Monthly Revenue
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-gray-400 hover:text-white"
|
|
>
|
|
6M
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-accent bg-accent/20"
|
|
>
|
|
1Y
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Simulated Revenue Chart */}
|
|
<div className="relative h-24 flex items-end justify-between gap-1">
|
|
{Array.from({ length: 12 }, (_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ height: 0 }}
|
|
animate={{ height: `${30 + Math.random() * 50}%` }}
|
|
transition={{ duration: 0.8, delay: 2.4 + i * 0.05 }}
|
|
className="bg-gradient-to-t from-blue-500/60 to-blue-400/20 rounded-t-sm w-full"
|
|
></motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Recent Activities */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 2.6 }}
|
|
className="space-y-3"
|
|
>
|
|
<div className="flex items-center justify-between text-white">
|
|
<span className="font-medium">Recent Activities</span>
|
|
<ChevronRight className="w-4 h-4 text-gray-400" />
|
|
</div>
|
|
|
|
{[
|
|
{
|
|
activity: "New Lease Signed",
|
|
property: "Apt 4B, Riverside",
|
|
time: "2h ago",
|
|
icon: Key,
|
|
color: "green",
|
|
},
|
|
{
|
|
activity: "Maintenance Request",
|
|
property: "Unit 12A, Downtown",
|
|
time: "4h ago",
|
|
icon: ToolIcon,
|
|
color: "orange",
|
|
},
|
|
{
|
|
activity: "Virtual Tour Completed",
|
|
property: "Penthouse, Skyline",
|
|
time: "6h ago",
|
|
icon: Eye,
|
|
color: "blue",
|
|
},
|
|
].map((activity, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.5, delay: 2.8 + i * 0.1 }}
|
|
className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
|
|
>
|
|
<div
|
|
className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "green"
|
|
? "bg-green-500/20"
|
|
: activity.color === "orange"
|
|
? "bg-orange-500/20"
|
|
: "bg-blue-500/20"
|
|
}`}
|
|
>
|
|
<activity.icon
|
|
className={`w-4 h-4 ${activity.color === "green"
|
|
? "text-green-400"
|
|
: activity.color === "orange"
|
|
? "text-orange-400"
|
|
: "text-blue-400"
|
|
}`}
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-white text-sm">
|
|
{activity.activity}
|
|
</div>
|
|
<div className="text-gray-400 text-xs">
|
|
{activity.property}
|
|
</div>
|
|
</div>
|
|
<div className="text-gray-400 text-xs">
|
|
{activity.time}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Floating VR Tour Element */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 3.0 }}
|
|
className="absolute -bottom-6 -left-6 transform -rotate-12"
|
|
>
|
|
<div className="w-16 h-16 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full flex items-center justify-center border border-purple-500/30">
|
|
<Eye className="w-8 h-8 text-purple-400" />
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Smart Home Integration */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.8, delay: 3.2 }}
|
|
className="absolute -top-8 -right-8 space-y-2"
|
|
>
|
|
<div className="flex items-center gap-2 text-green-400 text-sm">
|
|
<HomeIcon className="w-4 h-4" />
|
|
<span>Smart Home</span>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
<motion.div
|
|
animate={{ opacity: [0.3, 1, 0.3] }}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
className="w-2 h-2 bg-green-400 rounded-full"
|
|
></motion.div>
|
|
<motion.div
|
|
animate={{ opacity: [0.3, 1, 0.3] }}
|
|
transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
|
|
className="w-2 h-2 bg-blue-400 rounded-full"
|
|
></motion.div>
|
|
<motion.div
|
|
animate={{ opacity: [0.3, 1, 0.3] }}
|
|
transition={{ duration: 2, repeat: Infinity, delay: 1 }}
|
|
className="w-2 h-2 bg-orange-400 rounded-full"
|
|
></motion.div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* MLS Integration Badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 3.4 }}
|
|
className="absolute top-1/4 right-1/4 transform translate-x-1/2 -translate-y-1/2"
|
|
>
|
|
<div className="w-16 h-16 bg-blue-500/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl border border-blue-500/30">
|
|
<div className="text-center">
|
|
<Database className="w-6 h-6 text-blue-400 mx-auto mb-1" />
|
|
<div className="text-blue-400 text-xs font-bold">MLS</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* PropTech Features */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 3.6 }}
|
|
className="flex justify-center gap-4 flex-wrap mt-8"
|
|
>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
|
>
|
|
<Eye className="w-3 h-3 mr-1" />
|
|
Virtual Tours
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
|
>
|
|
<Database className="w-3 h-3 mr-1" />
|
|
MLS Integration
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-500/20 text-green-300 border-green-500/30"
|
|
>
|
|
<Brain className="w-3 h-3 mr-1" />
|
|
AI Analytics
|
|
</Badge>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// The Challenge We Solve
|
|
const RealEstateTechChallenge = () => {
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="max-w-6xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
|
Addressing the Core Challenges of Real Estate Tech
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-12 items-center">
|
|
{/* Challenge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Card className="bg-red-500/5 border-red-500/20 p-8 rounded-2xl">
|
|
<CardContent className="p-0">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
|
|
<AlertTriangle className="w-6 h-6 text-red-400" />
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-foreground">
|
|
The Challenge
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-4 text-muted-foreground">
|
|
<p>
|
|
The real estate sector is undergoing a digital
|
|
transformation, moving beyond traditional methods to
|
|
embrace technology for efficiency, transparency, and
|
|
enhanced user experiences. Challenges include fragmented
|
|
data, manual processes, slow transactions, and the need
|
|
for immersive property viewing experiences.
|
|
</p>
|
|
<ul className="space-y-2">
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>Fragmented data across multiple platforms</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>Manual, time-consuming processes</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>Slow transaction processing</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>Limited immersive viewing experiences</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Solution */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Card className="bg-green-500/5 border-green-500/20 p-8 rounded-2xl">
|
|
<CardContent className="p-0">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
|
|
<CheckCircle className="w-6 h-6 text-green-400" />
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-foreground">
|
|
Our Real Estate Tech (PropTech) Solution
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-4 text-muted-foreground">
|
|
<p>
|
|
WDI specializes in building innovative PropTech platforms
|
|
that digitize and optimize real estate operations. We
|
|
create solutions for smart property management, immersive
|
|
virtual tours, streamlined transaction processing, and
|
|
data-driven market insights, enhancing efficiency for
|
|
agents, brokers, developers, and property managers alike.
|
|
</p>
|
|
<ul className="space-y-2">
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>Smart property management platforms</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>Immersive virtual tours and AR/VR</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>Streamlined transaction processing</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>Data-driven market insights</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Key Features & Capabilities
|
|
const RealEstateTechFeatures = () => {
|
|
const features = [
|
|
{
|
|
icon: Building,
|
|
title: "Property Management Platforms",
|
|
description:
|
|
"Comprehensive tools for lease management, maintenance requests, tenant communication, and financial reporting.",
|
|
},
|
|
{
|
|
icon: Eye,
|
|
title: "Virtual Tour & AR/VR Integration",
|
|
description:
|
|
"Immersive 3D tours, augmented reality property visualizations, and virtual staging for enhanced property viewing.",
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: "Real Estate Market Analytics",
|
|
description:
|
|
"AI-driven insights on property valuation, market trends, investment opportunities, and predictive analytics.",
|
|
},
|
|
{
|
|
icon: FileText,
|
|
title: "Digital Transaction Management",
|
|
description:
|
|
"Streamlined workflows for offers, contracts, e-signatures, and secure document exchange.",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "CRM for Real Estate",
|
|
description:
|
|
"Specialized client relationship management tools for agents and brokers to track leads and nurture client relationships.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Tenant & Landlord Portals",
|
|
description:
|
|
"Secure self-service portals for online payments, maintenance requests, and communication.",
|
|
},
|
|
{
|
|
icon: MapPin,
|
|
title: "GIS Mapping & Location Intelligence",
|
|
description:
|
|
"Interactive maps with property overlays, demographic data, and proximity analysis.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Powerful Features for Your Real Estate Tech Solutions
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{features.slice(0, 6).map((feature, index) => {
|
|
const IconComponent = feature.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* Seventh item centered */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="flex justify-center mt-8"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.6 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group max-w-sm"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<MapPin className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{features[6].title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{features[6].description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// The WDI Advantage
|
|
const RealEstateTechAdvantage = () => {
|
|
const advantages = [
|
|
{
|
|
icon: Target,
|
|
title: "Deep PropTech Insight",
|
|
description:
|
|
"Our team understands the unique workflows, pain points, and opportunities within the real estate industry.",
|
|
},
|
|
{
|
|
icon: Eye,
|
|
title: "Immersive Tech Expertise",
|
|
description:
|
|
"Leveraging AR/VR, 3D modeling, and interactive mapping to create compelling property experiences.",
|
|
},
|
|
{
|
|
icon: Brain,
|
|
title: "Data-Driven Solutions",
|
|
description:
|
|
"Implementing AI and analytics for smarter property valuation, market predictions, and operational efficiency.",
|
|
},
|
|
{
|
|
icon: Network,
|
|
title: "Seamless Integrations",
|
|
description:
|
|
"Building solutions that connect with MLS systems, financial tools, and smart home devices for comprehensive management.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
Why Partner with WDI for Real Estate Tech Development?
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"
|
|
>
|
|
{advantages.map((advantage, index) => {
|
|
const IconComponent = advantage.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{advantage.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{advantage.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Development Process
|
|
const RealEstateTechProcess = () => {
|
|
const steps = [
|
|
{
|
|
title: "Discovery & Market Analysis",
|
|
description:
|
|
"Deep dive into your specific real estate niche, user needs (agents, buyers, tenants), and market opportunities.",
|
|
icon: Search,
|
|
},
|
|
{
|
|
title: "UX/UI Design & Property Flow Prototyping",
|
|
description:
|
|
"Design intuitive interfaces for complex property data, search, and transaction flows, with interactive prototypes.",
|
|
icon: Palette,
|
|
},
|
|
{
|
|
title: "Core Platform Development",
|
|
description:
|
|
"Build robust backend infrastructure for property listings, user management, and data processing.",
|
|
icon: Code,
|
|
},
|
|
{
|
|
title: "Emerging Tech Integration",
|
|
description:
|
|
"Implement AR/VR modules, AI analytics engines, or IoT connectivity as required.",
|
|
icon: Eye,
|
|
},
|
|
{
|
|
title: "Third-Party & MLS Integrations",
|
|
description:
|
|
"Seamlessly connect with Multiple Listing Services (MLS), payment gateways, and other real estate data sources.",
|
|
icon: Network,
|
|
},
|
|
{
|
|
title: "Rigorous Security & Data Integrity Testing",
|
|
description:
|
|
"Comprehensive testing to ensure data accuracy, privacy, and system security.",
|
|
icon: Shield,
|
|
},
|
|
{
|
|
title: "Deployment & Post-Launch Optimization",
|
|
description:
|
|
"Secure launch, ongoing monitoring, and continuous feature enhancements based on user feedback.",
|
|
icon: Rocket,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Our Streamlined Process for Real Estate Tech Development
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="relative">
|
|
{/* Timeline line */}
|
|
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
|
|
|
<div className="space-y-16">
|
|
{steps.map((step, index) => {
|
|
const IconComponent = step.icon;
|
|
const isEven = index % 2 === 0;
|
|
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
|
} flex-col lg:gap-16 gap-8`}
|
|
>
|
|
<div
|
|
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
|
|
} text-center lg:text-left`}
|
|
>
|
|
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
|
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<div className="text-2xl font-bold text-accent">
|
|
0{index + 1}
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-white mb-4">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline dot */}
|
|
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
|
|
|
|
<div className="flex-1 hidden lg:block"></div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Case Studies
|
|
const RealEstateTechCaseStudies = () => {
|
|
const caseStudies = [
|
|
{
|
|
title: "Smart Property Management Portal",
|
|
client: "Property Management Company",
|
|
problem:
|
|
"A property management company struggled with manual tenant communication and maintenance request handling.",
|
|
solution:
|
|
"WDI developed an all-in-one portal for tenants to submit requests, make payments, and communicate, with automated workflows for property managers.",
|
|
results:
|
|
"Reduced tenant complaints by 30% and streamlined maintenance operations by 40%.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=400&h=300&fit=crop&auto=format",
|
|
engagement: "Property management transformation",
|
|
gradient: "from-blue-500/20 to-cyan-500/20",
|
|
},
|
|
{
|
|
title: "Immersive Virtual Home Tour Platform",
|
|
client: "Real Estate Brokerage",
|
|
problem:
|
|
"A real estate brokerage needed to offer prospective buyers highly engaging virtual viewing experiences to reduce in-person tours.",
|
|
solution:
|
|
"Built a platform integrating high-resolution 3D virtual tours with floor plans and interactive points of interest, accessible on web and VR headsets.",
|
|
results:
|
|
"Increased virtual tour engagements by 60% and shortened sales cycles by 15%.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=400&h=300&fit=crop&auto=format",
|
|
engagement: "Virtual tour innovation",
|
|
gradient: "from-purple-500/20 to-pink-500/20",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
|
Real Estate Tech Success Stories
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto"
|
|
>
|
|
{caseStudies.map((study, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -8, scale: 1.02 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
|
<CardContent className="p-0 flex flex-col h-full">
|
|
<div className="p-8 pb-6">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<Building className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
|
|
{study.client}
|
|
</div>
|
|
<Badge
|
|
variant="secondary"
|
|
className="text-xs bg-accent/20 text-accent border-accent/30"
|
|
>
|
|
{study.results.split(" ").slice(0, 4).join(" ")}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
|
|
{study.title}
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="px-8 pb-6 flex-1">
|
|
<div
|
|
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
|
|
>
|
|
<ImageWithFallback
|
|
src={study.image}
|
|
alt={study.title}
|
|
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-8 pb-6">
|
|
<div className="space-y-3 mb-4">
|
|
<div>
|
|
<span className="text-red-400 text-xs font-medium">
|
|
Problem:{" "}
|
|
</span>
|
|
<span className="text-muted-foreground text-sm">
|
|
{study.problem}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-blue-400 text-xs font-medium">
|
|
Solution:{" "}
|
|
</span>
|
|
<span className="text-muted-foreground text-sm">
|
|
{study.solution}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-green-400 text-xs font-medium">
|
|
Results:{" "}
|
|
</span>
|
|
<span className="text-muted-foreground text-sm">
|
|
{study.results}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4 text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-1">
|
|
<CheckCircle className="w-3 h-3" />
|
|
{study.engagement}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 pt-0 mt-auto">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
|
|
>
|
|
<span className="text-sm font-medium">
|
|
VIEW FULL CASE STUDY
|
|
</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Client Testimonials
|
|
const RealEstateTechTestimonials = () => {
|
|
const testimonials = [
|
|
{
|
|
quote:
|
|
"WDI's PropTech solution has been a game-changer for our property management. The automation and transparency it provides are invaluable.",
|
|
author: "Owner",
|
|
company: "Property Management Group",
|
|
avatar:
|
|
"https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&auto=format",
|
|
},
|
|
{
|
|
quote:
|
|
"They brought our vision for immersive virtual tours to life. Our clients are amazed, and it's significantly improved our pre-sale engagement.",
|
|
author: "Marketing Director",
|
|
company: "Real Estate Developer",
|
|
avatar:
|
|
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&auto=format",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
|
|
What Our Clients Say About Our Real Estate Tech Solutions
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"
|
|
>
|
|
{testimonials.map((testimonial, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8">
|
|
<div className="flex items-center gap-1 mb-6">
|
|
{[...Array(5)].map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
className="w-5 h-5 fill-yellow-400 text-yellow-400"
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<blockquote className="text-gray-300 mb-6 leading-relaxed">
|
|
"{testimonial.quote}"
|
|
</blockquote>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<ImageWithFallback
|
|
src={testimonial.avatar}
|
|
alt={testimonial.author}
|
|
className="w-12 h-12 rounded-full object-cover"
|
|
/>
|
|
<div>
|
|
<div className="text-white font-medium">
|
|
{testimonial.author}
|
|
</div>
|
|
<div className="text-gray-400 text-sm">
|
|
{testimonial.company}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Mid-Page Lead Capture CTA
|
|
const RealEstateTechInlineCTA = () => {
|
|
return (
|
|
<section className="py-20">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
|
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Building className="w-5 h-5 text-foreground" />
|
|
<span className="text-foreground text-base font-medium">
|
|
PropTech Innovation
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
|
|
Ready to Innovate Your{" "}
|
|
<span className="text-accent">Real Estate Business?</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
|
Leverage our expertise to create cutting-edge, efficient, and
|
|
immersive real estate technology solutions.
|
|
</p>
|
|
|
|
<ShimmerButton
|
|
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
|
onClick={() => navigateTo("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
|
<span>Discuss Your PropTech Project</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// FAQs
|
|
const RealEstateTechFAQs = () => {
|
|
const faqs = [
|
|
{
|
|
question: "Do you integrate with Multiple Listing Service (MLS) systems?",
|
|
answer:
|
|
"Yes, we have extensive experience integrating with major MLS systems including CRMLS, NWMLS, MRED, and many others across different regions. Our platforms support real-time data synchronization, automated listing updates, and bidirectional data flow. We handle data normalization and ensure compliance with MLS rules and data licensing agreements.",
|
|
},
|
|
{
|
|
question:
|
|
"What kind of virtual tour technologies (e.g., 360 photos, 3D models, VR) do you support?",
|
|
answer:
|
|
"We support a comprehensive range of virtual tour technologies including 360-degree photography, 3D modeling, virtual reality (VR) experiences, augmented reality (AR) overlays, and interactive floor plans. Our platforms integrate with leading providers like Matterport and Zillow 3D Home. We also offer virtual staging and VR headset compatibility.",
|
|
},
|
|
{
|
|
question:
|
|
"Can you build solutions for specific real estate niches (e.g., commercial, residential, rentals)?",
|
|
answer:
|
|
"Absolutely! We specialize in developing tailored solutions for various real estate niches. For commercial real estate, we build platforms with advanced search filters, lease management, and financial analytics. For residential markets, we create buyer/seller portals and agent CRM systems. For rentals, we develop tenant screening and lease management systems.",
|
|
},
|
|
{
|
|
question:
|
|
"How do you ensure data security for property and client information?",
|
|
answer:
|
|
"We implement multiple layers of security including end-to-end encryption, secure data storage, role-based access controls, and regular security audits. Our platforms comply with real estate industry standards and data protection regulations. All data is encrypted both at rest and in transit, with comprehensive backup and disaster recovery systems.",
|
|
},
|
|
{
|
|
question:
|
|
"What is your experience with real estate CRM or ERP integrations?",
|
|
answer:
|
|
"We have extensive experience integrating with leading real estate CRM and ERP systems including Salesforce Real Estate Cloud, Top Producer, Chime, kvCORE, and BoomTown. For ERP systems, we work with Yardi, RealPage, and AppFolio. Our integrations support contact management, lead tracking, transaction management, and automated workflows.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-4xl mx-auto"
|
|
>
|
|
<Accordion type="single" collapsible className="space-y-8">
|
|
{faqs.map((faq, index) => (
|
|
<AccordionItem
|
|
key={index}
|
|
value={`item-${index}`}
|
|
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
|
|
>
|
|
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
|
|
<span className="font-semibold text-white">
|
|
{faq.question}
|
|
</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
|
|
{faq.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Final CTA Section
|
|
const RealEstateTechFinalCTA = () => {
|
|
return (
|
|
<section className="py-20 relative overflow-hidden">
|
|
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="mb-8"
|
|
>
|
|
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
|
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Building className="w-5 h-5 text-foreground" />
|
|
<span className="text-foreground text-base font-medium">
|
|
Real Estate Success
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
|
Accelerate Your Real Estate Success{" "}
|
|
<span className="text-accent">with WDI</span>
|
|
</h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
|
|
>
|
|
Partner with WDI to develop innovative and user-centric Real Estate
|
|
Tech solutions that streamline operations, enhance client
|
|
experiences, and drive growth in the dynamic property market.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
<ShimmerButton
|
|
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
|
onClick={() => navigateTo("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<Calendar className="w-6 h-6 flex-shrink-0" />
|
|
<span>Book Your Expert PropTech Consultation</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
|
|
<p className="text-muted-foreground text-sm">
|
|
Discovery • Design • Development • Testing • Launch • Support
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Background Decorative Elements */}
|
|
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
|
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-purple-500/3 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Main Real Estate Tech Page
|
|
export const RealEstateTech = () => {
|
|
return (
|
|
<div className="dark min-h-screen">
|
|
<Navigation />
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-black">
|
|
<RealEstateTechHero />
|
|
</section>
|
|
|
|
{/* Challenge */}
|
|
<section className="bg-background">
|
|
<RealEstateTechChallenge />
|
|
</section>
|
|
|
|
{/* Features */}
|
|
<section className="bg-card">
|
|
<RealEstateTechFeatures />
|
|
</section>
|
|
|
|
{/* Advantage */}
|
|
<section className="bg-background">
|
|
<RealEstateTechAdvantage />
|
|
</section>
|
|
|
|
{/* Process */}
|
|
<section className="bg-card">
|
|
<RealEstateTechProcess />
|
|
</section>
|
|
|
|
{/* Case Studies */}
|
|
<section className="bg-background">
|
|
<RealEstateTechCaseStudies />
|
|
</section>
|
|
|
|
{/* Testimonials */}
|
|
{/* <section className="bg-card">
|
|
<RealEstateTechTestimonials />
|
|
</section> */}
|
|
|
|
{/* Mid-Page CTA */}
|
|
<section className="bg-background">
|
|
<RealEstateTechInlineCTA />
|
|
</section>
|
|
|
|
{/* FAQs */}
|
|
<section className="bg-card">
|
|
<RealEstateTechFAQs />
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="bg-background">
|
|
<RealEstateTechFinalCTA />
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<section className="bg-card">
|
|
<Footer />
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|