Paket Rudi

import React, { useMemo, useState } from “react”;

// ————————————————————————————————————————————————
// Travel Packages Landing Page (single-file React component)
// Notes for you to customize quickly:
// 1) Edit CONTACT_INFO below (phone/email/brand).
// 2) Edit PACKAGES list (prices, highlights, images).
// 3) This file is fully responsive and interactive in one component.
// ————————————————————————————————————————————————

const CONTACT_INFO = {
brand: “Rudi Tour Travel”,
phoneIntl: “+628117771714”, // WhatsApp phone number (international format, no spaces)
phonePretty: “+62 811-7771-714”,
email: “ruditourandtravel@gmail.com”,
};

const PACKAGES = [
{
id: “batam”,
name: “Paket Tour Batam”,
region: “Indonesia”,
city: “Batam”,
duration: “2D1N”,
price: “SGD 129”,
rating: 4.7,
img: “https://images.unsplash.com/photo-1518684079-3c830dcef090?q=80&w=1200&auto=format&fit=crop”,
highlights: [“Ferry PP”, “Hotel 1 malam”, “City tour + belanja”, “Transport + Guide”],
},
{
id: “singapore”,
name: “Paket Tour Singapore”,
region: “Singapore”,
city: “Singapore”,
duration: “3D2N”,
price: “SGD 299”,
rating: 4.8,
img: “https://images.unsplash.com/photo-1525625293386-3f8f99389edd?q=80&w=1200&auto=format&fit=crop”,
highlights: [“Marina Bay Sands”, “Merlion Park”, “Universal Studios (opsional)”, “Transport + Guide”],
},
{
id: “malaysia”,
name: “Paket Tour Malaysia”,
region: “Malaysia”,
city: “Kuala Lumpur”,
duration: “3D2N”,
price: “MYR 899”,
rating: 4.6,
img: “https://images.unsplash.com/photo-1520473378652-85d9c4aee6cf?q=80&w=1200&auto=format&fit=crop”,
highlights: [“Petronas Twin Towers”, “Batu Caves”, “Putrajaya tour”, “Transport + Guide”],
},
{
id: “bangkok”,
name: “Paket Tour Bangkok”,
region: “Thailand”,
city: “Bangkok”,
duration: “4D3N”,
price: “THB 9,900”,
rating: 4.7,
img: “https://images.unsplash.com/photo-1508009603885-50cf7c579365?q=80&w=1200&auto=format&fit=crop”,
highlights: [“Wat Arun & Wat Pho”, “Chao Phraya cruise”, “Chatuchak/Asiatique”, “Transport + Guide”],
},
{
id: “taiwan”,
name: “Paket Tour Taiwan”,
region: “Taiwan”,
city: “Taipei”,
duration: “4D3N”,
price: “TWD 12,500”,
rating: 4.5,
img: “https://images.unsplash.com/photo-1526481280698-8fcc13fd5f1d?q=80&w=1200&auto=format&fit=crop”,
highlights: [“Chiang Kai-Shek Memorial”, “Shifen/Jiufen”, “Ximending”, “Transport + Guide”],
},
{
id: “hongkong”,
name: “Paket Tour Hong Kong”,
region: “Hong Kong”,
city: “Hong Kong”,
duration: “4D3N”,
price: “HKD 3,999”,
rating: 4.8,
img: “https://images.unsplash.com/photo-1512295767273-ac109ac3acfa?q=80&w=1200&auto=format&fit=crop”,
highlights: [“Victoria Harbour”, “Avenue of Stars”, “Disneyland (opsional)”, “Transport + Guide”],
},
{
id: “macau”,
name: “Paket Tour Macau”,
region: “Macau”,
city: “Macau”,
duration: “3D2N”,
price: “MOP 2,699”,
rating: 4.4,
img: “https://images.unsplash.com/photo-1554357469-196eab2f9f80?q=80&w=1200&auto=format&fit=crop”,
highlights: [“Ruins of St. Paul”, “Senado Square”, “Macau Tower”, “Transport + Guide”],
},
{
id: “shenzhen”,
name: “Paket Tour Shenzhen”,
region: “China”,
city: “Shenzhen”,
duration: “3D2N”,
price: “CNY 2,799”,
rating: 4.5,
img: “https://images.unsplash.com/photo-1552035509-c5ae27c10c56?q=80&w=1200&auto=format&fit=crop”,
highlights: [“OCT Bay/Window of the World”, “Nanshan”, “Shopping + kuliner”, “Transport + Guide”],
},
{
id: “zhuhai”,
name: “Paket Tour Zhuhai”,
region: “China”,
city: “Zhuhai”,
duration: “3D2N”,
price: “CNY 2,499”,
rating: 4.3,
img: “https://images.unsplash.com/photo-1603886241957-856ecf37013a?q=80&w=1200&auto=format&fit=crop”,
highlights: [“Lover’s Road”, “Fisher Girl statue”, “HK–Zhuhai–Macau Bridge view”, “Transport + Guide”],
},
];

function LightGlow() {
return (

{/* soft radial glow /}

{/ diagonal beam /}

{/ subtle grid */}

);
}

function SectionTitle({ title, subtitle }) {
return (

{title}

{subtitle && (

{subtitle} )}

);
}

function RatingStars({ value = 4.5 }) {
const full = Math.floor(value);
const half = value – full >= 0.5;
return (

Rating ${value.toFixed(1)} of 5}> {Array.from({ length: 5 }).map((_, i) => ( h-4 w-4 ${i < full ? “fill-yellow-400” : half && i === full ? “fill-yellow-300” : “fill-slate-300”}}>

))} {value.toFixed(1)}

);
}

function Modal({ open, onClose, children }) {
if (!open) return null;
return (

{children}

);
}

function PackageCard({ item, onClick }) {
return (
{item.name} {/* luminous top highlight */} {item.region} {item.name}{item.city} • {item.duration}Mulai {item.price}Lihat detail →
);
}

export default function TravelPackagesLanding() {
const [query, setQuery] = useState(“”);
const [region, setRegion] = useState(“Semua”);
const [selected, setSelected] = useState(null);

const regions = useMemo(() => [“Semua”, …Array.from(new Set(PACKAGES.map(p => p.region)))], []);

const filtered = useMemo(() => {
return PACKAGES.filter(p => {
const matchesRegion = region === “Semua” || p.region === region;
const q = query.trim().toLowerCase();
const matchesQuery = !q || [p.name, p.city, p.region, p.duration].some(v => v.toLowerCase().includes(q));
return matchesRegion && matchesQuery;
});
}, [query, region]);

const whatsAppHref = (pkgName) => {
const text = encodeURIComponent(
Halo ${CONTACT_INFO.brand}! Saya tertarik dengan ${pkgName}. Mohon info jadwal & harga terkini.
);
return https://wa.me/${CONTACT_INFO.phoneIntl.replace(/[^\d]/g, "")}?text=${text};
};

return (

  {/* Header */}
  <header className="mx-auto flex w-full max-w-7xl items-center justify-between px-6 py-5">
    <div className="flex items-center gap-3">
      <div className="grid h-10 w-10 place-items-center rounded-2xl bg-gradient-to-tr from-sky-500 to-emerald-500 text-white shadow-lg shadow-sky-500/30 ring-1 ring-white/40">
        <span className="text-lg font-black">RT</span>
      </div>
      <div>
        <div className="text-lg font-bold tracking-tight">{CONTACT_INFO.brand}</div>
        <div className="text-xs text-slate-500">Travel • Tour • Experience</div>
      </div>
    </div>
    <div className="hidden items-center gap-4 md:flex">
      <a href={`mailto:${CONTACT_INFO.email}`} className="text-sm text-slate-600 hover:text-slate-900">{CONTACT_INFO.email}</a>
      <span className="text-slate-300">•</span>
      <a href={`https://wa.me/${CONTACT_INFO.phoneIntl.replace(/[^\d]/g, "")}`} className="inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-emerald-500/30 transition hover:translate-y-[-1px] hover:shadow-xl">
        WhatsApp {CONTACT_INFO.phonePretty}
      </a>
    </div>
  </header>

  {/* Hero */}
  <section className="relative mx-auto mt-2 w-full max-w-7xl px-6 pb-10">
    <div className="relative overflow-hidden rounded-3xl bg-white/80 p-8 shadow-2xl ring-1 ring-black/5 md:p-12">
      <div className="pointer-events-none absolute -left-24 -top-24 h-72 w-72 rounded-full bg-sky-200/50 blur-3xl" />
      <div className="pointer-events-none absolute -right-24 -bottom-24 h-72 w-72 rounded-full bg-amber-200/60 blur-3xl" />

      <div className="max-w-3xl">
        <h1 className="text-4xl font-black tracking-tight text-slate-900 md:text-5xl">
          Temukan Paket Tour Impianmu ✈️
        </h1>
        <p className="mt-3 max-w-2xl text-slate-600">
          Klik kotak paket untuk melihat detail, highlights, dan tombol pemesanan cepat via WhatsApp.
        </p>

        {/* Search & Filters */}
        <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center">
          <div className="relative w-full sm:max-w-sm">
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Cari: Singapura, Hong Kong, 3D2N…"
              className="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-[15px] shadow-sm outline-none ring-0 placeholder:text-slate-400 focus:border-sky-400 focus:shadow-md"
            />
            <span className="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-slate-400">🔎</span>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            {regions.map(r => (
              <button key={r} onClick={() => setRegion(r)} className={`rounded-xl px-4 py-2 text-sm font-medium transition ${region === r ? "bg-sky-600 text-white shadow-sky-500/30 shadow" : "bg-sky-50 text-sky-800 ring-1 ring-sky-200 hover:bg-sky-100"}`}>
                {r}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>

  {/* Packages Grid */}
  <section className="relative mx-auto w-full max-w-7xl px-6 pb-24">
    <SectionTitle
      title="Paket Populer — Klik Kotaknya!"
      subtitle="Batam • Singapore • Malaysia • Bangkok • Taiwan • Hong Kong • Macau • Shenzhen • Zhuhai"
    />
    <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      {filtered.map(item => (
        <PackageCard key={item.id} item={item} onClick={() => setSelected(item)} />
      ))}
    </div>

    {filtered.length === 0 && (
      <div className="mt-10 rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center text-slate-500">
        Tidak ada paket yang cocok dengan pencarianmu. Coba kata kunci lain.
      </div>
    )}
  </section>

  {/* Footer */}
  <footer className="relative border-t border-slate-200 bg-white/60">
    <div className="mx-auto flex w-full max-w-7xl flex-col items-center justify-between gap-3 px-6 py-8 sm:flex-row">
      <p className="text-sm text-slate-600">© {new Date().getFullYear()} {CONTACT_INFO.brand}. Semua hak dilindungi.</p>
      <div className="flex items-center gap-4">
        <a className="text-sm text-slate-600 hover:text-slate-900" href={`mailto:${CONTACT_INFO.email}`}>Email</a>
        <a className="text-sm text-slate-600 hover:text-slate-900" href={`https://wa.me/${CONTACT_INFO.phoneIntl.replace(/[^\d]/g, "")}`}>WhatsApp</a>
        <a className="text-sm text-slate-600 hover:text-slate-900" href="#">Kebijakan Privasi</a>
      </div>
    </div>
  </footer>

  {/* Detail Modal */}
  <Modal open={!!selected} onClose={() => setSelected(null)}>
    {selected && (
      <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
        <div className="overflow-hidden rounded-xl ring-1 ring-slate-200">
          <div className="relative">
            <img src={selected.img} alt={selected.name} className="h-60 w-full object-cover" />
            <div className="pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white/70 to-transparent" />
          </div>
        </div>
        <div>
          <h3 className="text-2xl font-bold text-slate-900">{selected.name}</h3>
          <p className="mt-1 text-slate-600">{selected.city} • {selected.region} • {selected.duration}</p>
          <div className="mt-3"><RatingStars value={selected.rating} /></div>
          <div className="mt-4 grid grid-cols-1 gap-2">
            {selected.highlights.map((h, i) => (
              <div key={i} className="inline-flex items-center gap-2 rounded-xl bg-slate-50 px-3 py-2 text-sm text-slate-700 ring-1 ring-slate-200">
                <span>•</span>
                <span>{h}</span>
              </div>
            ))}
          </div>
          <div className="mt-5 flex items-center justify-between">
            <span className="text-xl font-extrabold text-emerald-600">Mulai {selected.price}</span>
            <div className="flex gap-2">
              <a
                href={whatsAppHref(selected.name)}
                className="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-4 py-2 text-white shadow-lg shadow-emerald-500/30 transition hover:translate-y-[-1px] hover:shadow-xl"
                target="_blank" rel="noreferrer"
              >Pesan via WhatsApp</a>
              <a
                href={`mailto:${CONTACT_INFO.email}?subject=Info%20${encodeURIComponent(selected.name)}`}
                className="inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-slate-800 shadow-sm transition hover:bg-slate-50"
              >Email</a>
            </div>
          </div>
        </div>
      </div>
    )}
  </Modal>
</main>

);
}