import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
Building2,
Phone,
Mail,
MapPin,
CheckCircle2,
ArrowRight,
Shield,
FileText,
Stethoscope,
Store,
TrendingUp,
BadgeCheck,
} from "lucide-react";
// Single-file marketing landing page
// - Tailwind-only styling
// - No backend required (form copies message to clipboard + opens mail client)
// - Swap NAME, PHONE, EMAIL, SERVICE AREA, and branding as needed
const BRAND = {
name: "Filipos Halikias",
title: "Commercial Real Estate Advisor",
tagline: "Medical • Retail • Service — site selection, leasing, and dispositions",
phoneDisplay: "(215) 555-0123",
phoneHref: "+12155550123",
email: "filipos@yourdomain.com",
area: "Greater Philadelphia • Bucks County • NJ",
brokerage: "OERE Commercial (Opus Elite Real Estate)",
};
function classNames(...xs) {
return xs.filter(Boolean).join(" ");
}
function Pill({ icon: Icon, children }) {
return (
<div className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/80 px-4 py-2 text-sm text-zinc-800 shadow-sm backdrop-blur">
<Icon className="h-4 w-4" />
<span>{children}</span>
</div>
);
}
function Stat({ label, value }) {
return (
<div className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
<div className="text-2xl font-semibold text-zinc-900">{value}</div>
<div className="mt-1 text-sm text-zinc-600">{label}</div>
</div>
);
}
function Feature({ icon: Icon, title, desc }) {
return (
<div className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
<div className="flex items-start gap-3">
<div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-3">
<Icon className="h-5 w-5" />
</div>
<div>
<div className="text-lg font-semibold text-zinc-900">{title}</div>
<div className="mt-1 text-sm leading-relaxed text-zinc-600">{desc}</div>
</div>
</div>
</div>
);
}
function Testimonial({ quote, name, role }) {
return (
<div className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
<div className="text-sm leading-relaxed text-zinc-700">“{quote}”</div>
<div className="mt-4 flex items-center justify-between">
<div>
<div className="text-sm font-semibold text-zinc-900">{name}</div>
<div className="text-xs text-zinc-500">{role}</div>
</div>
<BadgeCheck className="h-5 w-5" />
</div>
</div>
);
}
export default function LandingPage() {
const [form, setForm] = useState({
name: "",
email: "",
phone: "",
need: "Medical space / lease review",
message: "",
});
const [copied, setCopied] = useState(false);
const mailto = useMemo(() => {
const subject = encodeURIComponent(`Real estate inquiry — ${form.need}`);
const body = encodeURIComponent(
[
`Name: ${form.name}`,
`Email: ${form.email}`,
`Phone: ${form.phone}`,
`Need: ${form.need}`,
"",
form.message || "(no message)",
].join("\n")
);
return `mailto:${BRAND.email}?subject=${subject}&body=${body}`;
}, [form]);
function update(key, val) {
setForm((p) => ({ ...p, [key]: val }));
}
async function copyToClipboard() {
const text =
`Real estate inquiry\n` +
`Name: ${form.name}\nEmail: ${form.email}\nPhone: ${form.phone}\nNeed: ${form.need}\n\n${form.message || "(no message)"}`;
try {
await navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 1800);
} catch (e) {
// ignore
}
}
const fadeUp = {
hidden: { opacity: 0, y: 14 },
show: { opacity: 1, y: 0 },
};
return (
<div className="min-h-screen bg-zinc-50 text-zinc-900">
{/* Top bar */}
<div className="border-b border-zinc-200 bg-white/80 backdrop-blur">
<div className="mx-auto flex max-w-6xl items-center justify-between px-5 py-4">
<div className="flex items-center gap-3">
<div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-2">
<Building2 className="h-5 w-5" />
</div>
<div>
<div className="text-sm font-semibold">{BRAND.name}</div>
<div className="text-xs text-zinc-500">{BRAND.brokerage}</div>
</div>
</div>
<div className="hidden items-center gap-3 md:flex">
<a
className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-4 py-2 text-sm shadow-sm hover:bg-zinc-50"
href={`tel:${BRAND.phoneHref}`}
>
<Phone className="h-4 w-4" />
{BRAND.phoneDisplay}
</a>
<a
className="inline-flex items-center gap-2 rounded-full bg-zinc-900 px-4 py-2 text-sm text-white shadow-sm hover:bg-zinc-800"
href="#contact"
>
Get a call back <ArrowRight className="h-4 w-4" />
</a>
</div>
</div>
</div>
{/* Hero */}
<div className="relative overflow-hidden">
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(0,0,0,0.06),transparent_40%),radial-gradient(circle_at_70%_30%,rgba(0,0,0,0.08),transparent_45%)]" />
<div className="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-5 py-14 md:grid-cols-12 md:py-20">
<motion.div
variants={fadeUp}
initial="hidden"
animate="show"
transition={{ duration: 0.45 }}
className="md:col-span-7"
>
<div className="flex flex-wrap gap-2">
<Pill icon={Stethoscope}>Medical</Pill>
<Pill icon={Store}>Retail & Service</Pill>
<Pill icon={FileText}>Lease Review</Pill>
<Pill icon={Shield}>Risk Reduction</Pill>
</div>
<h1 className="mt-6 text-4xl font-semibold leading-tight tracking-tight md:text-5xl">
Real estate decisions that protect your cash flow — and your time.
</h1>
<p className="mt-4 max-w-xl text-base leading-relaxed text-zinc-700 md:text-lg">
{BRAND.title} helping {BRAND.tagline.toLowerCase()}. I focus on site selection,
lease strategy, and deals that hold up under zoning, underwriting, and real-world operations.
</p>
<div className="mt-7 flex flex-col gap-3 sm:flex-row">
<a
href="#contact"
className="inline-flex items-center justify-center gap-2 rounded-2xl bg-zinc-900 px-5 py-3 text-sm font-medium text-white shadow-sm hover:bg-zinc-800"
>
Get a quick consult <ArrowRight className="h-4 w-4" />
</a>
<a
href={`tel:${BRAND.phoneHref}`}
className="inline-flex items-center justify-center gap-2 rounded-2xl border border-zinc-200 bg-white px-5 py-3 text-sm font-medium shadow-sm hover:bg-zinc-50"
>
<Phone className="h-4 w-4" />
Call {BRAND.phoneDisplay}
</a>
</div>
<div className="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-3">
<Stat label="Primary focus" value="Medical & small CRE" />
<Stat label="Decision support" value="Zoning + comps + risks" />
<Stat label="Coverage" value={BRAND.area} />
</div>
<div className="mt-8 flex items-start gap-2 text-sm text-zinc-600">
<CheckCircle2 className="mt-0.5 h-4 w-4" />
<span>
If you’re opening a location, renewing a lease, or selling an asset under 10,000 SF — I’ll help you
avoid expensive surprises.
</span>
</div>
</motion.div>
{/* Lead card */}
<motion.div
variants={fadeUp}
initial="hidden"
animate="show"
transition={{ duration: 0.5, delay: 0.08 }}
className="md:col-span-5"
>
<div className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
<div className="text-lg font-semibold">Request a call back</div>
<div className="mt-1 text-sm text-zinc-600">
Tell me what you’re trying to accomplish. I’ll respond quickly.
</div>
<div className="mt-5 grid gap-3">
<input
value={form.name}
onChange={(e) => update("name", e.target.value)}
placeholder="Your name"
className="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm outline-none focus:border-zinc-400"
/>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
<input
value={form.email}
onChange={(e) => update("email", e.target.value)}
placeholder="Email"
className="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm outline-none focus:border-zinc-400"
/>
<input
value={form.phone}
onChange={(e) => update("phone", e.target.value)}
placeholder="Phone"
className="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm outline-none focus:border-zinc-400"
/>
</div>
<select
value={form.need}
onChange={(e) => update("need", e.target.value)}
className="w-full rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm outline-none focus:border-zinc-400"
>
<option>Medical space / lease review</option>
<option>Retail / service site selection</option>
<option>Sell a small commercial building</option>
<option>Renewal / renegotiation</option>
<option>Other</option>
</select>
<textarea
value={form.message}
onChange={(e) => update("message", e.target.value)}
placeholder="A sentence or two about what you need"
rows={4}
className="w-full resize-none rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-sm outline-none focus:border-zinc-400"
/>
<div className="flex flex-col gap-3 sm:flex-row">
<a
href={mailto}
onClick={copyToClipboard}
className="inline-flex flex-1 items-center justify-center gap-2 rounded-2xl bg-zinc-900 px-5 py-3 text-sm font-medium text-white shadow-sm hover:bg-zinc-800"
>
Email inquiry <Mail className="h-4 w-4" />
</a>
<a
href={`tel:${BRAND.phoneHref}`}
className="inline-flex flex-1 items-center justify-center gap-2 rounded-2xl border border-zinc-200 bg-white px-5 py-3 text-sm font-medium shadow-sm hover:bg-zinc-50"
>
Call now <Phone className="h-4 w-4" />
</a>
</div>
<div className="text-xs text-zinc-500">
{copied ? (
<span className="text-zinc-900">Copied details to clipboard.</span>
) : (
<span>
Tip: clicking “Email inquiry” will open your email app; the message is also copied for easy
paste.
</span>
)}
</div>
</div>
<div className="mt-6 rounded-2xl border border-zinc-200 bg-zinc-50 p-4 text-xs text-zinc-600">
<div className="flex items-center gap-2">
<Shield className="h-4 w-4" />
<span className="font-medium text-zinc-800">Straight answers.</span>
</div>
<div className="mt-2 leading-relaxed">
If I’m not the best fit for your deal, I’ll tell you — and introduce you to the right person.
</div>
</div>
</div>
</motion.div>
</div>
</div>
{/* Value props */}
<div className="mx-auto max-w-6xl px-5 py-12 md:py-16">
<motion.div
variants={fadeUp}
initial="hidden"
whileInView="show"
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.45 }}
className="max-w-2xl"
>
<h2 className="text-2xl font-semibold tracking-tight md:text-3xl">
What you get when you work with me
</h2>
<p className="mt-3 text-sm leading-relaxed text-zinc-600 md:text-base">
Practical guidance, deal mechanics, and a process built for people who don’t have time to guess.
</p>
</motion.div>
<div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
<Feature
icon={TrendingUp}
title="Site selection with real constraints"
desc="We pressure-test visibility, access, parking, competition, and the numbers — then validate zoning and approvals."
/>
<Feature
icon={FileText}
title="Lease strategy & clause review"
desc="I flag hidden risks (CAM, TI, use, assignment, exclusives, renewals) so you don’t sign a time-bomb."
/>
<Feature
icon={Shield}
title="Risk reduction for decisions"
desc="Clear tradeoffs: what matters, what doesn’t, and what will cost you if it goes wrong."
/>
</div>
<div className="mt-8 rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
<div className="grid grid-cols-1 gap-6 md:grid-cols-12 md:items-center">
<div className="md:col-span-8">
<div className="text-lg font-semibold">Free: 10-minute “deal sanity check”</div>
<div className="mt-2 text-sm leading-relaxed text-zinc-600">
Send an address or a listing link. I’ll tell you what I’d verify first and where deals commonly break.
</div>
</div>
<div className="md:col-span-4 md:text-right">
<a
href="#contact"
className="inline-flex items-center justify-center gap-2 rounded-2xl bg-zinc-900 px-5 py-3 text-sm font-medium text-white shadow-sm hover:bg-zinc-800"
>
Request it <ArrowRight className="h-4 w-4" />
</a>
</div>
</div>
</div>
</div>
{/* Testimonials */}
<div className="border-t border-zinc-200 bg-white">
<div className="mx-auto max-w-6xl px-5 py-12 md:py-16">
<motion.div
variants={fadeUp}
initial="hidden"
whileInView="show"
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.45 }}
className="max-w-2xl"
>
<h2 className="text-2xl font-semibold tracking-tight md:text-3xl">Proof beats promises</h2>
<p className="mt-3 text-sm leading-relaxed text-zinc-600 md:text-base">
Replace these with real client quotes as you collect them.
</p>
</motion.div>
<div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
<Testimonial
quote="He caught a lease issue we never would’ve noticed. Saved us months of headaches."
name="Practice Owner"
role="Medical — NJ"
/>
<Testimonial
quote="Clear, fast, and direct. We knew exactly what to do next within one call."
name="Business Operator"
role="Retail — PA"
/>
<Testimonial
quote="Understood zoning and the numbers. We felt protected through the whole process."
name="Investor"
role="Small CRE — Bucks County"
/>
</div>
</div>
</div>
{/* Contact */}
<div id="contact" className="mx-auto max-w-6xl px-5 py-12 md:py-16">
<div className="grid grid-cols-1 gap-6 md:grid-cols-12 md:items-start">
<motion.div
variants={fadeUp}
initial="hidden"
whileInView="show"
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.45 }}
className="md:col-span-7"
>
<h2 className="text-2xl font-semibold tracking-tight md:text-3xl">Let’s make your next move a smart one</h2>
<p className="mt-3 max-w-xl text-sm leading-relaxed text-zinc-600 md:text-base">
Call, text, or email — or use the form above. If you share an address, include what you’re trying to do
(lease / buy / sell / renew), and your timeline.
</p>
<div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
<div className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
<div className="flex items-center gap-2 text-sm font-semibold">
<Phone className="h-4 w-4" /> Phone
</div>
<a
className="mt-2 inline-flex text-sm text-zinc-700 underline decoration-zinc-300 underline-offset-4 hover:decoration-zinc-500"
href={`tel:${BRAND.phoneHref}`}
>
{BRAND.phoneDisplay}
</a>
</div>
<div className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
<div className="flex items-center gap-2 text-sm font-semibold">
<Mail className="h-4 w-4" /> Email
</div>
<a
className="mt-2 inline-flex text-sm text-zinc-700 underline decoration-zinc-300 underline-offset-4 hover:decoration-zinc-500"
href={`mailto:${BRAND.email}`}
>
{BRAND.email}
</a>
</div>
</div>
<div className="mt-4 rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
<div className="flex items-center gap-2 text-sm font-semibold">
<MapPin className="h-4 w-4" /> Service area
</div>
<div className="mt-2 text-sm text-zinc-700">{BRAND.area}</div>
<div className="mt-1 text-xs text-zinc-500">Ask about Monmouth County & broader NJ coverage.</div>
</div>
</motion.div>
<motion.div
variants={fadeUp}
initial="hidden"
whileInView="show"
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.45, delay: 0.05 }}
className="md:col-span-5"
>
<div className="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
<div className="text-lg font-semibold">Quick links</div>
<div className="mt-4 grid gap-3">
<a
className="group flex items-center justify-between rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm hover:bg-zinc-100"
href="#"
onClick={(e) => e.preventDefault()}
>
<span>Download: Medical Lease Red Flags (PDF)</span>
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
</a>
<a
className="group flex items-center justify-between rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm hover:bg-zinc-100"
href="#"
onClick={(e) => e.preventDefault()}
>
<span>Submit an address for a sanity check</span>
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
</a>
<a
className="group flex items-center justify-between rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm hover:bg-zinc-100"
href="#"
onClick={(e) => e.preventDefault()}
>
<span>See recent deals / case studies</span>
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
</a>
</div>
<div className="mt-6 text-xs text-zinc-500">
Replace these with real URLs: a PDF lead magnet, a simple address form (Typeform/Google Form), and a
“case studies” page.
</div>
</div>
</motion.div>
</div>
</div>
{/* Footer */}
<div className="border-t border-zinc-200 bg-white">
<div className="mx-auto max-w-6xl px-5 py-8">
<div className="flex flex-col items-start justify-between gap-3 text-xs text-zinc-500 md:flex-row md:items-center">
<div>
© {new Date().getFullYear()} {BRAND.name}. All rights reserved.
</div>
<div className="flex flex-wrap items-center gap-3">
<span className="inline-flex items-center gap-2">
<Building2 className="h-4 w-4" /> {BRAND.brokerage}
</span>
<span className="hidden md:inline">•</span>
<span className="inline-flex items-center gap-2">
<MapPin className="h-4 w-4" /> {BRAND.area}
</span>
</div>
</div>
<div className="mt-3 text-xs text-zinc-400">
Disclaimer: This page is a marketing example. Add your required brokerage disclosures, license numbers, and
privacy policy.
</div>
</div>
</div>
</div>
);
}
filiposhalikias.com 