import React from "react";
import { Check, Shield, ConciergeBell, Clock, Sparkles, CreditCard, NotebookPen, Mail, Phone } from "lucide-react";
export default function ConciergeFeePage() {
return (
<div className="min-h-screen bg-neutral-50 text-neutral-900">
{/* Hero */}
<header className="relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-sky-100 via-white to-rose-50" />
<div className="relative mx-auto max-w-6xl px-6 py-20 sm:py-24">
<div className="grid gap-10 md:grid-cols-2 md:items-center">
<div>
<span className="inline-flex items-center gap-2 rounded-full bg-white/70 px-4 py-2 text-sm shadow-sm ring-1 ring-black/5">
<Sparkles className="h-4 w-4" /> Luxury Concierge Care
</span>
<h1 className="mt-4 text-4xl font-semibold leading-tight tracking-tight sm:text-5xl">
Concierge Planning Fee
</h1>
<p className="mt-4 max-w-prose text-lg text-neutral-700">
White‑glove, personalized service from your first hello to your welcome‑home. This professional planning fee
ensures you receive the time, expertise, and VIP support your luxury vacation deserves.
</p>
<div className="mt-8 flex flex-wrap gap-3">
<a
href="#pricing"
className="rounded-2xl bg-neutral-900 px-6 py-3 text-white shadow-lg transition hover:scale-[1.01] hover:shadow-xl"
>
View Pricing
</a>
<a
href="#pay"
className="rounded-2xl bg-white px-6 py-3 text-neutral-900 shadow ring-1 ring-black/10 transition hover:scale-[1.01]"
>
Make Payment
</a>
</div>
<p className="mt-3 text-sm text-neutral-600">Alysha Klein & Associates · Dream Vacations</p>
</div>
<div className="rounded-3xl bg-white/80 p-6 shadow-xl ring-1 ring-black/5">
<ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
{[
{ icon: ConciergeBell, label: "White‑glove trip design" },
{ icon: NotebookPen, label: "Curated itineraries" },
{ icon: Shield, label: "Advocacy & protection" },
{ icon: Clock, label: "Proactive milestone care" },
].map((item, i) => (
<li key={i} className="flex items-start gap-3 rounded-2xl bg-neutral-50 p-4 ring-1 ring-black/5">
<item.icon className="mt-0.5 h-5 w-5" />
<span className="text-sm font-medium leading-6">{item.label}</span>
</li>
))}
</ul>
</div>
</div>
</div>
</header>
{/* What is the fee */}
<section id="about" className="mx-auto max-w-5xl px-6 py-16">
<div className="grid gap-10 md:grid-cols-5 md:gap-14">
<div className="md:col-span-2">
<h2 className="text-2xl font-semibold">What is the Concierge Planning Fee?</h2>
</div>
<div className="md:col-span-3">
<p className="text-neutral-700">
It’s a professional service fee that covers the time, expertise, and personalized care invested in crafting your
trip. From inspiration and research to booking, monitoring, and support while you travel, this fee allows us to
dedicate the attention required for a seamless, luxury experience.
</p>
<div className="mt-6 grid gap-3 sm:grid-cols-2">
{[
"Discovery call & vision mapping",
"Tailored itinerary design & revisions",
"Preferred partner quotes & VIP perks when available",
"Comprehensive booking management (cruise, air*, hotel, tours)",
"Payment schedule tracking & deadline reminders",
"Pre‑departure concierge emails & readiness checks",
"On‑trip message support & supplier liaison",
"Post‑trip follow‑up & future planning notes",
].map((b, i) => (
<div key={i} className="flex items-start gap-2 rounded-xl bg-white p-3 ring-1 ring-black/5">
<Check className="mt-0.5 h-4 w-4" />
<span className="text-sm text-neutral-800">{b}</span>
</div>
))}
</div>
<p className="mt-3 text-xs text-neutral-500">*Air booking available as an add‑on; see Pricing.</p>
</div>
</div>
</section>
{/* Pricing */}
<section id="pricing" className="bg-white/70 py-16 ring-1 ring-black/5">
<div className="mx-auto max-w-5xl px-6">
<div className="mb-8 flex items-end justify-between gap-6">
<h2 className="text-2xl font-semibold">Pricing</h2>
<p className="text-sm text-neutral-600">Transparent. Simple. Fair to scope.</p>
</div>
<div className="grid gap-6 md:grid-cols-3">
{/* Core fee */}
<div className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-black/5">
<h3 className="text-lg font-semibold">Concierge Planning Fee</h3>
<p className="mt-1 text-sm text-neutral-600">Covers planning for one trip</p>
<div className="mt-4 flex items-baseline gap-2">
<span className="text-4xl font-semibold">$150</span>
<span className="text-sm text-neutral-600">per trip · up to 2 guests</span>
</div>
<ul className="mt-4 space-y-2 text-sm">
<li className="flex items-start gap-2"><Check className="mt-0.5 h-4 w-4" />Tailored itinerary & bookings</li>
<li className="flex items-start gap-2"><Check className="mt-0.5 h-4 w-4" />Milestone reminders & care</li>
<li className="flex items-start gap-2"><Check className="mt-0.5 h-4 w-4" />On‑trip message support</li>
</ul>
<p className="mt-4 text-sm text-neutral-600">Add <span className="font-medium">$75</span> for each additional guest in the same room.</p>
</div>
{/* Add‑ons */}
<div className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-black/5">
<h3 className="text-lg font-semibold">Optional Add‑Ons</h3>
<ul className="mt-3 space-y-2 text-sm">
<li className="flex items-start gap-2"><Check className="mt-0.5 h-4 w-4" />Airfare Concierge: <span className="font-medium">$75</span> per person</li>
<li className="flex items-start gap-2"><Check className="mt-0.5 h-4 w-4" />Pre/Post‑Cruise Package Design: <span className="font-medium">$100</span> per trip</li>
<li className="flex items-start gap-2"><Check className="mt-0.5 h-4 w-4" />Groups (8+ cabins): starting at <span className="font-medium">$250</span></li>
</ul>
<p className="mt-4 text-xs text-neutral-600">Custom itineraries or multi‑destination requests may require a bespoke quote.</p>
</div>
{/* What’s not included */}
<div className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-black/5">
<h3 className="text-lg font-semibold">What the Fee Isn’t</h3>
<ul className="mt-3 space-y-2 text-sm">
<li className="flex items-start gap-2"><Shield className="mt-0.5 h-4 w-4" />It’s not a deposit toward travel</li>
<li className="flex items-start gap-2"><Shield className="mt-0.5 h-4 w-4" />It’s separate from supplier costs</li>
<li className="flex items-start gap-2"><Shield className="mt-0.5 h-4 w-4" />It’s <span className="font-semibold">non‑refundable</span> as it covers professional time</li>
</ul>
<p className="mt-4 text-xs text-neutral-600">Supplier terms & conditions (e.g., cruise line) still apply to your booking.</p>
</div>
</div>
</div>
</section>
{/* How it works */}
<section id="how" className="mx-auto max-w-5xl px-6 py-16">
<div className="grid gap-10 md:grid-cols-5 md:gap-14">
<div className="md:col-span-2">
<h2 className="text-2xl font-semibold">How It Works</h2>
</div>
<div className="md:col-span-3">
<ol className="space-y-4 text-sm">
{[
{
t: "Confirm & Pay",
d: "Review this page and submit your Concierge Planning Fee to begin. You’ll receive a receipt and a brief questionnaire.",
},
{
t: "Design & Refine",
d: "We present curated options based on your vision. Together we refine until it’s perfect.",
},
{
t: "Book & Care",
d: "We secure reservations, manage payments, and keep you informed with proactive milestone emails.",
},
{
t: "Travel & Support",
d: "Enjoy your trip with on‑call message support and a dedicated advocate liaising with partners as needed.",
},
].map((s, i) => (
<li key={i} className="rounded-2xl bg-white p-4 ring-1 ring-black/5">
<div className="flex items-start gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-neutral-900 text-white">{i + 1}</div>
<div>
<p className="font-medium">{s.t}</p>
<p className="mt-1 text-neutral-700">{s.d}</p>
</div>
</div>
</li>
))}
</ol>
</div>
</div>
</section>
{/* Payment */}
<section id="pay" className="bg-neutral-900 py-16 text-white">
<div className="mx-auto max-w-5xl px-6">
<div className="grid gap-8 md:grid-cols-5 md:gap-14">
<div className="md:col-span-2">
<h2 className="text-2xl font-semibold">Make Your Payment</h2>
<p className="mt-2 text-neutral-300">Secure online checkout. You’ll receive an instant confirmation email.</p>
</div>
<div className="md:col-span-3">
<div className="rounded-3xl bg-white p-6 text-neutral-900 shadow-xl ring-1 ring-black/10">
<div className="flex flex-wrap items-center justify-between gap-4">
<div className="flex items-center gap-3">
<CreditCard className="h-5 w-5" />
<div>
<p className="text-sm font-medium">Concierge Planning Fee</p>
<p className="text-xs text-neutral-600">$150 per trip (up to 2 guests) · $75 each additional guest (same room)</p>
</div>
</div>
<a
href="https://YOUR-PAYMENT-LINK-HERE" // ← Replace with TravelJoy/TravelPay/Stripe link
target="_blank"
rel="noreferrer"
className="rounded-2xl bg-neutral-900 px-5 py-3 text-white shadow transition hover:scale-[1.02]"
>
Pay Securely
</a>
</div>
<p className="mt-3 text-xs text-neutral-600">
This professional service fee is non‑refundable and separate from supplier costs. By paying, you acknowledge our
<a href="#terms" className="text-neutral-900 underline"> Concierge Terms</a>.
</p>
</div>
</div>
</div>
</div>
</section>
{/* FAQ */}
<section id="faq" className="mx-auto max-w-5xl px-6 py-16">
<h2 className="text-2xl font-semibold">Frequently Asked Questions</h2>
<div className="mt-8 grid gap-4 md:grid-cols-2">
{[
{
q: "Is the fee applied to my booking?",
a: "No. It compensates for professional time, research, and concierge support. Supplier payments are separate.",
},
{
q: "What if my plans change?",
a: "We’ll happily adjust quotes and dates within the same scope. The fee remains non‑refundable as services begin immediately.",
},
{
q: "Do you book airfare?",
a: "Yes—add the Airfare Concierge for $75 per person. We’ll monitor schedules and add loyalty numbers when applicable.",
},
{
q: "How are groups handled?",
a: "For 8+ cabins or complex itineraries, a Group Concierge Fee (from $250) applies. We’ll provide a custom quote.",
},
].map((f, i) => (
<div key={i} className="rounded-2xl bg-white p-5 ring-1 ring-black/5">
<p className="font-medium">{f.q}</p>
<p className="mt-1 text-neutral-700 text-sm">{f.a}</p>
</div>
))}
</div>
</section>
{/* Terms */}
<section id="terms" className="bg-white/70 py-16 ring-1 ring-black/5">
<div className="mx-auto max-w-5xl px-6">
<h2 className="text-2xl font-semibold">Concierge Terms</h2>
<div className="mt-4 space-y-3 text-sm text-neutral-700">
<p>
The Concierge Planning Fee covers professional time and expertise for trip design, supplier outreach, and concierge
support. It is non‑refundable and separate from supplier payments (cruise lines, hotels, tour operators, airlines).
Supplier terms & cancellation policies will apply to booked components and will be provided at time of deposit.
</p>
<p>
Travel insurance is highly recommended. At checkout, you’ll have the option to select <em>Cancel For Any Reason</em>,
Classic, or to decline coverage (not advised). By paying this fee, you acknowledge receipt of our Service Agreement
and supplier terms where applicable.
</p>
</div>
</div>
</section>
{/* Contact */}
<footer className="mx-auto max-w-5xl px-6 py-14">
<div className="grid gap-6 sm:grid-cols-2">
<div>
<h3 className="text-lg font-semibold">Questions before you begin?</h3>
<p className="mt-1 text-neutral-700">We’re happy to help you choose the right scope before paying the fee.</p>
</div>
<div className="flex flex-wrap items-center gap-3">
<a href="mailto:aklein@dreamvacations.com" className="inline-flex items-center gap-2 rounded-2xl bg-neutral-900 px-5 py-3 text-white">
<Mail className="h-4 w-4" /> aklein@dreamvacations.com
</a>
<a href="tel:19543550090" className="inline-flex items-center gap-2 rounded-2xl bg-white px-5 py-3 ring-1 ring-black/10">
<Phone className="h-4 w-4" /> (954) 355‑0090
</a>
</div>
</div>
<p className="mt-10 text-center text-xs text-neutral-500">© {new Date().getFullYear()} Alysha Klein & Associates · Dream Vacations</p>
</footer>
</div>
);
}
