// Shared bits used across all variations const Ico = { arrow: (p={}) => , arrowR: (p={}) => , arrowLR: (p={}) => , pin: (p={}) => , cal: (p={}) => , phone: (p={}) => , shield: (p={}) => , clock: (p={}) => , star: (p={}) => , user: (p={}) => , car: (p={}) => , wifi: (p={}) => , snow: (p={}) => , bag: (p={}) => , check: (p={}) => , plus: (p={}) => , minus: (p={}) => , zalo: (p={}) => ( ), messenger: (p={}) => ( ), facebook: (p={}) => ( ), }; // Image map: put files in /uploads with these names, or change the values here. const SITE_IMAGES = { hero: "uploads/hero-limousine-office.png", cta: "uploads/haivan.jpg", services: [ // Mỗi service 1 ảnh riêng (index khớp với SERVICES trong live-sections.jsx) "uploads/scene-hue-1.jpg", // 0 — Huế—ĐN, Xe ghép 7 chỗ "uploads/scene-hue-2.jpg", // 1 — Huế—ĐN, Xe ghép Limousine "uploads/scene-hue-3.webp", // 2 — Huế—ĐN, Bao xe 4 chỗ "uploads/scene-danang-1.jpg", // 3 — Huế—ĐN, Bao xe 7 chỗ "uploads/scene-danang-2.webp", // 4 — Huế—ĐN, Bao Limousine 9 chỗ "uploads/scene-hoian-1.jpg", // 5 — Huế—HA, Bao xe 4 chỗ "uploads/scene-hoian-2.jpg", // 6 — Huế—HA, Bao xe 7 chỗ "uploads/scene-danang-3.jpg", // 7 — ĐN—HA, Bao xe 4 chỗ "uploads/scene-hoian-3.webp", // 8 — ĐN—HA, Bao xe 7 chỗ ], gallery: [ "uploads/car-1.jpg", "uploads/car-2.jpg", "uploads/car-3.jpg", "uploads/car-4.jpg", "uploads/car-5.jpg", "uploads/car-6.jpg", "uploads/car-7.jpg", "uploads/car-8.webp", "uploads/car-9.webp", ], reviews: [ "uploads/avatar-01-ngoc-anh.webp", "uploads/avatar-02-trang-xinh.jpg", "uploads/avatar-03-minh-quan.png", "uploads/avatar-04-my-linh.jpg", "uploads/avatar-05-anh-duc.jpg", ], news: [ "uploads/scene-hue-1.jpg", // News #1 — Dịch vụ xe ghép (Đại Nội Huế) "uploads/scene-hoian-1.jpg", // News #2 — Du lịch Huế — ĐN (Phố cổ Hội An) "uploads/scene-danang-1.jpg", // News #3 — Gửi hàng (Cầu Rồng Đà Nẵng) ], }; /* ───────────────────────────────────────────────────────────────── IMAGE_MANIFEST — Hướng dẫn ảnh cần thêm vào thư mục /uploads Mỗi entry: file (tên file), where (vị trí hiển thị trên web), purpose (nội dung ảnh nên có), size (px gợi ý), ratio (tỉ lệ) ───────────────────────────────────────────────────────────── */ const IMAGE_MANIFEST = [ /* ── HERO & CTA — ảnh nền lớn, độ phân giải cao ───────────── */ { file: "hero-limousine-office.jpg", where: "Hero (đầu trang, id=trang-chu)", purpose: "Ảnh nền hero chính — limousine đậu trước văn phòng, hoặc xe đẹp trên đường Huế/ĐN/Hội An. Có overlay đen tối để đè chữ trắng.", size: "1920×900", ratio: "16:7.5 (landscape rộng)" }, { file: "cta-hai-van-limousine.jpg", where: "CTA Banner (giữa trang, trước News)", purpose: "Ảnh nền banner kêu gọi đặt xe — gợi ý: xe limousine trên đèo Hải Vân, hoặc cảnh đẹp ven biển. Có overlay đen.", size: "1920×600", ratio: "16:5 (banner ngang)" }, /* ── SERVICES — ảnh PHONG CẢNH theo route (không phải ảnh xe) ─ */ /* Hiện tại đang dùng loremflickr.com để load ảnh thật từ Flickr theo tag. Khi có ảnh chính chủ, thay URL trong SITE_IMAGES.services bằng path uploads/ tương ứng. */ { file: "scene-hue.jpg", where: "Services card — tuyến 'Huế — Đà Nẵng'", purpose: "Phong cảnh Huế — Đại Nội / Kinh Thành / Lăng tẩm / Sông Hương / cầu Tràng Tiền.", size: "800×600", ratio: "4:3" }, { file: "scene-hoian.jpg", where: "Services card — tuyến 'Huế — Hội An'", purpose: "Phong cảnh Hội An — Phố cổ về đêm với đèn lồng, Chùa Cầu, bến sông.", size: "800×600", ratio: "4:3" }, { file: "scene-danang.jpg", where: "Services card — tuyến 'Đà Nẵng — Hội An'", purpose: "Phong cảnh Đà Nẵng — Cầu Rồng, bán đảo Sơn Trà, bãi biển Mỹ Khê, cầu Vàng.", size: "800×600", ratio: "4:3" }, /* ── GALLERY — 9 ảnh trong section Thư viện (id=thu-vien) ── */ { file: "gallery-01-kia-carnival-black.jpg", where: "Gallery #1", purpose: "Kia Carnival màu đen — chụp toàn cảnh bên hông hoặc 3/4 trước.", size: "1000×750", ratio: "4:3" }, { file: "gallery-02-fortuner-white.jpg", where: "Gallery #2", purpose: "Toyota Fortuner màu trắng — góc 3/4 trước.", size: "1000×750", ratio: "4:3" }, { file: "gallery-03-kia-carnival-rear.jpg", where: "Gallery #3", purpose: "Kia Carnival chụp từ phía sau hoặc mở cốp khoe khoang hành lý.", size: "1000×750", ratio: "4:3" }, { file: "gallery-04-fortuner-rear.jpg", where: "Gallery #4", purpose: "Fortuner chụp từ phía sau / hậu xe.", size: "1000×750", ratio: "4:3" }, { file: "gallery-05-fortuner-front-white.jpg", where: "Gallery #5", purpose: "Fortuner trắng chụp chính diện đầu xe (logo nổi bật).", size: "1000×750", ratio: "4:3" }, { file: "gallery-06-fortuner-black.jpg", where: "Gallery #6", purpose: "Fortuner màu đen — góc 3/4 hoặc bên hông.", size: "1000×750", ratio: "4:3" }, { file: "gallery-07-limousine-interior.jpg", where: "Gallery #7", purpose: "Nội thất Dcar Limousine — ghế da, gối, không gian VIP.", size: "1000×750", ratio: "4:3" }, { file: "gallery-08-office-hue.jpg", where: "Gallery #8", purpose: "Văn phòng nhà xe Bôn Lê tại Huế — biển hiệu, mặt tiền.", size: "1000×750", ratio: "4:3" }, { file: "gallery-09-ford-transit-limousine.jpg", where: "Gallery #9", purpose: "Ford Transit limousine — chụp toàn cảnh bên hông hoặc nội thất.", size: "1000×750", ratio: "4:3" }, /* ── REVIEWS — avatar khách hàng (section Đánh giá) ───────── */ { file: "avatar-01-ngoc-anh.jpg", where: "Reviews #1 — Chị Ngọc Anh", purpose: "Ảnh chân dung khách hàng nữ (vuông, crop khuôn mặt rõ).", size: "400×400", ratio: "1:1 (vuông)" }, { file: "avatar-02-trang-xinh.jpg", where: "Reviews #2 — Chị Trang Xinh", purpose: "Ảnh chân dung khách hàng nữ, du khách Hà Nội.", size: "400×400", ratio: "1:1 (vuông)" }, { file: "avatar-03-minh-quan.jpg", where: "Reviews #3 — Anh Minh Quân", purpose: "Ảnh chân dung khách hàng nam, doanh nhân Đà Nẵng.", size: "400×400", ratio: "1:1 (vuông)" }, { file: "avatar-04-my-linh.jpg", where: "Reviews #4 — Chị Mỹ Linh", purpose: "Ảnh chân dung khách hàng nữ, ở Hội An.", size: "400×400", ratio: "1:1 (vuông)" }, { file: "avatar-05-anh-duc.jpg", where: "Reviews #5 — Anh Đức", purpose: "Ảnh chân dung khách hàng nam, khách quốc tế.", size: "400×400", ratio: "1:1 (vuông)" }, /* ── NEWS — thumbnail 3 bài viết (id=tin-tuc) ─────────────── */ { file: "news-01-xe-ghep-hue-da-nang-hoi-an.jpg", where: "News #1 — Dịch vụ xe ghép", purpose: "Thumbnail bài viết về dịch vụ xe ghép — xe đậu trước cảnh Huế/ĐN/Hội An.", size: "1200×800", ratio: "3:2" }, { file: "news-02-du-lich-hue-da-nang.jpg", where: "News #2 — Hành trình du lịch", purpose: "Thumbnail bài viết du lịch — cảnh đẹp Huế, Đà Nẵng (cầu Vàng, Hải Vân, phố cổ).", size: "1200×800", ratio: "3:2" }, { file: "news-03-gui-hang-mien-trung.jpg", where: "News #3 — Gửi hàng hoá", purpose: "Thumbnail bài viết gửi hàng — thùng hàng, hành lý, tài xế đóng cốp xe.", size: "1200×800", ratio: "3:2" }, ]; function ImageSlot({ src, alt="", dark=false, fallbackLabel="", style={}, imgStyle={}, children, ...props }) { const [failed, setFailed] = React.useState(false); React.useEffect(() => setFailed(false), [src]); const showImage = src && !failed; return (
{showImage && ( {alt} setFailed(true)} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", ...imgStyle }} /> )} {showImage ? children : <>{fallbackLabel || null}{children}}
); } // Shared content const ROUTES = [ { from: "Huế", to: "Đà Nẵng", duration: "2h 15p", km: "95 km", price: "150.000đ", popular: true }, { from: "Đà Nẵng", to: "Hội An", duration: "45 phút", km: "30 km", price: "100.000đ" }, { from: "Huế", to: "Hội An", duration: "3h 00p", km: "125 km", price: "220.000đ" }, { from: "Sân bay ĐN", to: "Hội An", duration: "40 phút", km: "28 km", price: "180.000đ", airport: true }, ]; const TIMES = ["06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00"]; const FLEET = [ { name: "Dcar Limousine 9 chỗ", seats: 9, tag: "VIP", desc: "Ghế da, massage, không gian riêng" }, { name: "Ford Transit Limousine", seats: 10, tag: "Phổ thông", desc: "Rộng rãi, phù hợp nhóm gia đình" }, { name: "Toyota Hiace 11 chỗ", seats: 11, tag: "Hành lý lớn", desc: "Khoang chứa rộng, đi sân bay" }, { name: "Hyundai Solati Sky", seats: 9, tag: "Sky View", desc: "Trần kính, view rộng dọc đường" }, ]; const FEATURES = [ { icon: "shield", title: "An toàn 5 sao", text: "Tài xế 5+ năm kinh nghiệm, bảo hiểm hành khách trọn chuyến." }, { icon: "clock", title: "Đúng giờ", text: "Đón đúng giờ ±5 phút. Tài xế gọi xác nhận trước 30 phút." }, { icon: "pin", title: "Đón tận nơi", text: "Đón tại địa chỉ trong nội thành. Không phụ phí." }, { icon: "car", title: "Xe đời mới", text: "Toàn bộ xe ≤ 3 năm tuổi. Bảo dưỡng hàng tuần." }, { icon: "phone", title: "Hỗ trợ 24/7", text: "Tổng đài và Zalo trực 24/7. Phản hồi dưới 1 phút." }, { icon: "user", title: "Giá niêm yết", text: "Không phụ thu cuối tuần, không phát sinh chi phí." }, ]; const FAQ = [ { q: "Có nhận đưa đón tận nhà không?", a: "Có. Bôn Lê đón và trả khách tại địa chỉ trong nội thành 3 tỉnh (Huế, Đà Nẵng, Quảng Nam). Khu vực ngoại thành báo trước 1 giờ để sắp xếp." }, { q: "Thanh toán bằng cách nào?", a: "Tiền mặt khi lên xe, chuyển khoản trước, hoặc quét QR (Momo, ZaloPay, VietQR). Xuất hóa đơn VAT cho công ty nếu yêu cầu." }, { q: "Có thể hủy chuyến không?", a: "Miễn phí huỷ trước giờ khởi hành 2 tiếng. Trong vòng 2 tiếng tính phí 50%, sau giờ khởi hành tính 100%." }, { q: "Trẻ em có tính phí riêng?", a: "Trẻ dưới 5 tuổi đi cùng người lớn miễn phí (ngồi chung ghế). Trẻ từ 5 tuổi tính như người lớn để đảm bảo chỗ ngồi riêng." }, { q: "Có hỗ trợ hành lý không?", a: "Mỗi khách 1 vali ≤ 20kg + 1 ba lô tay. Hành lý dư báo trước, phụ thu 30.000đ/kiện." }, ]; const POSTS = [ { tag: "Hội An", title: "5 góc phố cổ Hội An không nên bỏ lỡ vào sáng sớm", read: "6 phút đọc", date: "12.05.2026" }, { tag: "Kinh nghiệm", title: "Đi Huế - Đà Nẵng: nên chọn xe ghép hay xe khách?", read: "8 phút đọc", date: "08.05.2026" }, { tag: "Sân bay", title: "Cách đặt xe sân bay Đà Nẵng nhanh, không lo trễ chuyến", read: "5 phút đọc", date: "02.05.2026" }, ]; // useIsMobile — true khi viewport < breakpoint (mặc định 768px) function useIsMobile(breakpoint = 768) { const [isMobile, setIsMobile] = React.useState( typeof window !== "undefined" ? window.innerWidth < breakpoint : false ); React.useEffect(() => { const onResize = () => setIsMobile(window.innerWidth < breakpoint); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, [breakpoint]); return isMobile; } // Reveal — fade + slide-up khi element vào viewport (IntersectionObserver) function Reveal({ children, delay = 0, y = 28, duration = 0.6, threshold = 0.15, style = {}, ...rest }) { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; if (typeof IntersectionObserver === "undefined") { setVisible(true); return; } const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { setVisible(true); io.unobserve(el); } }); }, { threshold, rootMargin: "0px 0px -60px 0px" }); io.observe(el); return () => io.disconnect(); }, [threshold]); return (
{children}
); } // Logo mark — ảnh logo từ /uploads/logo.jpeg function Logo({ size=36 }) { return ( Nhà Xe Bôn Lê ); } // Tiny route-line SVG for map illustrations function RouteLine({ width=600, height=280, label="HUẾ → ĐÀ NẴNG → HỘI AN", color="rgba(255,255,255,.5)", dot="#E89B4A", labelColor="rgba(255,255,255,.7)" }) { return ( {/* grid */} {/* route path */} {/* dots */} HUẾ ĐÀ NẴNG HỘI AN ); } Object.assign(window, { Ico, SITE_IMAGES, IMAGE_MANIFEST, ImageSlot, Reveal, useIsMobile, ROUTES, TIMES, FLEET, FEATURES, FAQ, POSTS, Logo, RouteLine });