import React, { useMemo, useState } from "react"; import { motion, useScroll, useTransform } from "framer-motion"; import { Home, Building2, KeyRound, TrendingUp, MapPin, Phone, Mail, Send, CheckCircle2, ShieldCheck, ArrowRight, Menu, X } from "lucide-react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; const palette = { espresso: "#241b0f", cocoa: "#3a2c17", olive: "#5b6047", champagne: "#d8c79f", cream: "#f7f2e7", paper: "#fffaf0", }; const services = [ { icon: Home, title: "Buy", text: "Clear guidance for families, first-time buyers, and move-up buyers across London." }, { icon: KeyRound, title: "Sell", text: "Strategic listing support, positioning, and negotiation with local market knowledge." }, { icon: Building2, title: "Lease", text: "Residential and condo leasing support with a practical management-informed lens." }, { icon: TrendingUp, title: "Invest", text: "Support for investors comparing condos, rentals, cash flow, and long-term value." }, { icon: Building2, title: "Commercial", text: "Commercial and business real estate guidance for entrepreneurs and operators." }, { icon: ShieldCheck, title: "Condo Expertise", text: "Condo-focused insight supported by OLCM and RCM experience." }, ]; const neighbourhoods = ["Byron", "Riverbend", "Masonville", "Hyde Park", "Downtown", "Old East Village", "Wortley", "West London"]; const proof = [ "Sold firm in London", "Leased condos and townhomes", "Commercial business sale experience", "Condo-focused guidance", ]; function FloatingListingCard({ className = "", delay = 0, title, tag, value }) { return (

{tag}

{title}

{value}

 ); } function Hero3D() { const { scrollYProgress } = useScroll(); const y1 = useTransform(scrollYProgress, [0, 1], [0, -180]); const y2 = useTransform(scrollYProgress, [0, 1], [0, 120]); const rotate = useTransform(scrollYProgress, [0, 0.35], [0, -8]); return (
Realtor® | OLCM | RCM | Condo, Commercial & Residential London real estate guidance with a condo expert advantage. Buy, sell, lease, invest, or explore commercial opportunities with practical advice shaped by real estate and property management experience.
{proof.map((item) => (
{item}
))}
London C21

Featured focus

Condos, homes & commercial spaces.

A premium, editable section designed for WordPress. Replace this with a real Maran photo or London property image.

519

Local Focus

6

Core Services

Lease • Buy • Sell • Invest • Manage
); } function Services() { return (

What Maran Helps With

Editable service blocks for every real estate lead.

Each card is designed to be individually editable in Elementor or WordPress, so services can be changed later without touching the whole layout.

{services.map((service, index) => { const Icon = service.icon; return (

{service.title}

{service.text}

 ); })}
); } function CondoExpertise() { const { scrollYProgress } = useScroll(); const slide = useTransform(scrollYProgress, [0.25, 0.62], [80, -80]); return (

3D Scroll Section

A condo expert experience that moves as users scroll.

This section can become the website’s signature immersive moment. As users scroll, condo cards glide past like floating building panels, creating a premium feel without making the site hard to edit.

{["Status certificate awareness", "Reserve fund and condo rules understanding", "Leasing and management perspective", "Investor-friendly condo guidance"].map((item) => (
{item}
))}

Condo Buyer

Know what you are buying before you commit.

A clean place to explain condo guidance in simple language.

 -v * 0.65) }} className="absolute right-8 top-40 h-64 w-80 rotate-[5deg] rounded-[2rem] bg-[#d8c79f] p-5 text-[#241b0f] shadow-2xl">

Investor

Compare location, fees, rent, and long-term value.

Designed for buyers who want practical numbers and local insight.

 v * 0.35) }} className="absolute bottom-10 left-24 h-56 w-80 rotate-[2deg] rounded-[2rem] bg-white p-5 text-[#241b0f] shadow-2xl">

Leasing

Lease support with management awareness.
); } function LondonAreas() { return (

London, Ontario Focus

Built around the neighbourhoods where clients actually search.

{neighbourhoods.map((area, index) => (

{area}

Future editable area page or section.

 ))}
); } function LeadForm() { const [interest, setInterest] = useState("Buying"); const interests = useMemo(() => ["Buying", "Selling", "Leasing", "Commercial", "Investing", "Condo Advice"], []); return (

Lead Capture

Let’s talk about your next move in London.

This contact form should be placed on the homepage and repeated on the contact page for easy inquiries.

I’m interested in

{interests.map((item) => ( ))}