// shared.jsx — SVG icons, utilities, and BRAND config (edit here for each branch/brand) /* ─── BRAND CONFIG ───────────────────────────────────────────────────────── Change only this block to switch brands across git branches. All text, theme colours, images, routes, services, and copy live here. ──────────────────────────────────────────────────────────────────────── */ const BRAND = { /* ── Identity ─────────────────────────────────────────────── */ name: "XE GHÉP ĐỨC HẢI", // all-caps logo mark nameFull: "Xe Ghép Đức Hải", // body copy / headings tagline: "XE GHÉP MIỀN TRUNG", // sub-line under logo logo: "uploads/logo.png", founded: 2018, /* ── Contact ──────────────────────────────────────────────── */ phone: "070.274.7575", phoneHref: "tel:+84702747575", phoneZalo: "0702747575", // for zalo.me/{phoneZalo} address: "13/560 Nguyễn Tất Thành", email: "lienhe@xeghepduchai.com", /* ── Social ───────────────────────────────────────────────── */ social: { facebook: "https://www.facebook.com/buonbom.bin.1", zalo: "https://zalo.me/0702747575", messenger:"https://www.facebook.com/buonbom.bin.1", }, /* ── SEO / metadata ────────────────────────────────── */ seo: { title: "Xe Ghép Đức Hải — Xe ghép, đưa đón tận nơi", description: "Xe Ghép Đức Hải, hotline 070.274.7575, đón tận nơi tại 13/560 Nguyễn Tất Thành. Đặt xe ghép, xe riêng và limousine đúng giờ, phục vụ nhanh gọn.", siteName: "Xe Ghép Đức Hải", canonical: "https://www.xeghephuedanangduchai.com/", ogImage: "https://www.xeghephuedanangduchai.com/uploads/logo.png", ogImageAlt: "Logo Xe Ghép Đức Hải", favicon: "uploads/logo.png", }, /* ── Navigation links ─────────────────────────────────────── */ navLinks: [ { id: "trang-chu", label: "Trang chủ" }, { id: "dich-vu", label: "Dịch vụ" }, { id: "bang-gia", label: "Bảng giá" }, { id: "faq", label: "Liên hệ" }, { id: "tin-tuc", label: "Tin tức" }, ], /* ── Hero section copy ────────────────────────────────────── */ hero: { badge: "Xe ghép · Đưa đón sân bay · Limousine", badgeMobile: "Xe ghép · Limousine", heading: "XE GHÉP ĐỨC HẢI", cities: ["HUẾ", "ĐÀ NẴNG", "HỘI AN"], }, /* ── Brand intro section ──────────────────────────────────── */ intro: { eyebrow: "Giới thiệu", heading: "Xe Ghép Đức Hải", sub: "— Dịch vụ chuyên nghiệp — Giá cả hợp lý —", description: "Xe Ghép Đức Hải là đơn vị xe ghép, xe riêng và limousine phục vụ nhanh gọn, đón tận nơi, hỗ trợ khách hàng 24/7.", }, /* ── Utility bar (top of page, desktop only) ─────────────── */ utilityBar: "Đón tận nơi — Phục vụ đúng giờ — Hỗ trợ 24/7", /* ── CTA banner ───────────────────────────────────────────── */ ctaBanner: { eyebrow: "Sẵn sàng cho chuyến đi của bạn?", heading: "Một cuộc gọi — và đi.", }, /* ── Footer ───────────────────────────────────────────────── */ footer: { description: "Xe Ghép Đức Hải chuyên cung cấp dịch vụ xe ghép, xe riêng và limousine, đón tận nơi, phục vụ nhanh gọn và đúng giờ.", copyrightEnd: 2026, }, /* ── Booking modal ────────────────────────────────────────── */ booking: { cities: ["Huế", "Đà Nẵng", "Hội An", "Sân bay Đà Nẵng"], defaultFrom: "Huế", defaultTo: "Đà Nẵng", successToast: "Đặt xe thành công! Tổng đài sẽ gọi xác nhận trong 5 phút.", errorMsg: "Không gửi được. Vui lòng gọi 070.274.7575 để đặt trực tiếp.", confirmLine: "Tổng đài sẽ gọi xác nhận tại số", confirmTime: "trong vòng 5 phút", }, /* ── Vehicle types (booking modal step 0) ─────────────────── */ vehicleTypes: [ { v: "Xe ghép Limousine", desc: "Ghế đơn, 9 chỗ" }, { v: "Xe ghép 7 chỗ", desc: "Fortuner, Innova" }, { v: "Bao xe 4 chỗ", desc: "Sedan riêng" }, { v: "Bao xe 7 chỗ", desc: "Đi nhóm, gia đình" }, { v: "Bao Limousine 9 chỗ", desc: "VIP đoàn lớn" }, ], /* ── Departure times ──────────────────────────────────────── */ times: [ "04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30", "10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00", "15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00", ], /* ── Routes (booking form dropdowns) ─────────────────────── */ 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 }, ], /* ── Fleet ────────────────────────────────────────────────── */ 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" }, ], /* ── Why us section ───────────────────────────────────────── */ whyUs: { eyebrow: "Tại sao chọn", heading: "Tại sao chọn Xe Ghép Đức Hải", sub: "Sự hài lòng của quý khách là tiêu chí phục vụ của chúng tôi.", items: [ { icon: "shield", t: "Uy Tín Và Đúng Giờ", d: "Cam kết mang đến quý khách trải nghiệm an toàn và luôn đúng lịch trình." }, { icon: "check", t: "Giá Cả Cạnh Tranh", d: "Mức giá tối ưu nhất, phù hợp với mọi nhu cầu di chuyển của bạn." }, { icon: "car", t: "Xe Mới, Sạch Sẽ, Êm Ái", d: "Xe đời mới, nội thất sạch sẽ, chạy êm như ru — chỉ cần ngồi và tận hưởng." }, { icon: "user", t: "Đội Ngũ Tài Xế", d: "Đội ngũ tài xế thân thiện, sẵn sàng hỗ trợ khách hàng tận tâm và chu đáo." }, ], }, /* ── Process steps ────────────────────────────────────────── */ process: { eyebrow: "Quy trình", heading: "Quy trình đặt xe đơn giản", sub: "Chỉ 3 bước để có chuyến đi an toàn, đúng giờ.", steps: [ { icon: "car", t: "Liên hệ: Gọi/Zalo", d: "Đặt xe dễ dàng qua hotline hoặc Zalo. Tổng đài xác nhận ngày giờ đón." }, { icon: "check", t: "Xác nhận", d: "Tài xế Đức Hải gọi xác nhận trước giờ đón 15–30 phút." }, { icon: "shield", t: "Thanh toán", d: "Thanh toán khi xuống xe bằng tiền mặt, QR hoặc chuyển khoản." }, ], }, /* ── Feature chips ────────────────────────────────────────── */ 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í." }, ], /* ── Services ─────────────────────────────────────────────── */ services: [ { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Xe ghép 7 chỗ", desc: "1 vé ghép xe Fortuner", price: "150.000đ", tag: "ghep", hot: true }, { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Xe ghép Limousine", desc: "1 vé ghép xe Limousine", price: "180.000đ", tag: "limo" }, { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Bao xe 4 chỗ", desc: "Đi riêng", price: "700.000đ", tag: "bao" }, { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Bao xe 7 chỗ", desc: "Đi riêng — Fortuner", price: "900.000đ", tag: "bao" }, { route: "Huế — Đà Nẵng", from: "Huế", to: "Đà Nẵng", type: "Bao Limousine 9 chỗ", desc: "Đoàn lớn, VIP", price: "1.500.000đ", tag: "limo" }, { route: "Huế — Hội An", from: "Huế", to: "Hội An", type: "Bao xe 4 chỗ", desc: "Đi riêng", price: "900.000đ", tag: "bao" }, { route: "Huế — Hội An", from: "Huế", to: "Hội An", type: "Bao xe 7 chỗ", desc: "Đi riêng — Fortuner", price: "1.100.000đ", tag: "bao" }, { route: "Đà Nẵng — Hội An", from: "Đà Nẵng", to: "Hội An", type: "Bao xe 4 chỗ", desc: "Sân bay → Phố cổ", price: "250.000đ", tag: "bao" }, { route: "Đà Nẵng — Hội An", from: "Đà Nẵng", to: "Hội An", type: "Bao xe 7 chỗ", desc: "Đi nhóm, gia đình", price: "300.000đ", tag: "bao" }, ], serviceFilters: [ { key: "all", label: "Tất cả" }, { key: "ghep", label: "Xe ghép" }, { key: "limo", label: "Limousine" }, { key: "bao", label: "Bao xe" }, ], /* ── Gallery labels (must match SITE_IMAGES.gallery order) ── */ gallery: [ "Kia Carnival – Đen", "Toyota Fortuner – Trắng", "Kia Carnival – Sau", "Fortuner – Hậu", "Fortuner – Trước trắng", "Fortuner – Đen", "Limousine Dcar nội thất", "Văn phòng Huế", "Ford Transit limousine", ], /* ── Reviews ──────────────────────────────────────────────── */ reviews: [ { name: "Anh Hoàng Nam", role: "Kỹ sư xây dựng", stars: 5, avatar: "uploads/avatar-hoang-nam.jpg", text: "Tôi hay đi công tác sớm nên cần xe đúng giờ. Xe Ghép Đức Hải xác nhận nhanh, tài xế tới trước vài phút, xe sạch và đi rất êm." }, { name: "Chị Thuỳ Linh", role: "Nhân viên văn phòng", stars: 5, avatar: "uploads/avatar-thuy-linh.png", text: "Mình đặt xe đi nhiều lần rồi, lần nào tài xế cũng lịch sự, hỗ trợ hành lý gọn gàng và báo giá rõ ràng trước khi đi." }, { name: "Anh Quốc Huy", role: "Chuyên viên marketing", stars: 5, avatar: "uploads/avatar-quoc-huy.jpg", text: "Đi sân bay rất yên tâm vì tài xế gọi xác nhận sớm, tới đúng giờ và lái xe ổn định. Dịch vụ đáng tin cậy." }, { name: "Chị Ngọc Anh", role: "Giáo viên", stars: 5, avatar: "uploads/avatar-ngoc-anh.jpg", text: "Nhóm mình đi cả gia đình, xe rộng và thoải mái. Tài xế kiên nhẫn chờ, hỗ trợ lên xuống rất nhiệt tình." }, { name: "Anh Minh Đức", role: "Hướng dẫn viên du lịch", stars: 5, avatar: "uploads/avatar-minh-duc.png", text: "Tôi thường giới thiệu khách đi Xe Ghép Đức Hải vì xe gọn, mát và luôn đúng lịch trình. Khách của tôi phản hồi rất tốt." }, ], /* ── News / Blog posts ────────────────────────────────────── */ news: [ { tag: "Dịch vụ", title: "Dịch vụ xe ghép Huế — Đà Nẵng — Hội An | Xe Ghép Đức Hải", date: "24.05.2026", time: "8:25", read: "5 phút", excerpt: "Tổng hợp các tuyến và bảng giá mới nhất 2026, mẹo chọn dịch vụ phù hợp cho từng nhu cầu di chuyển." }, { tag: "Du lịch", title: "Khám phá hành trình du lịch Huế — Đà Nẵng", date: "24.05.2026", time: "8:26", read: "8 phút", excerpt: "Cẩm nang 3 ngày 2 đêm xuyên ba thành phố — điểm đến không thể bỏ qua, quán ăn địa phương và lưu ý đi xe." }, { tag: "Vận chuyển", title: "Dịch vụ nhận gửi hàng hoá an toàn, nhanh chóng và tiện lợi", date: "24.05.2026", time: "8:25", read: "4 phút", excerpt: "Đức Hải mở rộng dịch vụ gửi hàng kèm chuyến — bảng giá theo kích thước, cam kết giao đúng giờ." }, ], /* ── FAQ ─────────────────────────────────────────────────── */ faq: [ { q: "Đức Hải có đến tận địa chỉ đón không?", a: "Có. Tài xế đến đúng địa chỉ bạn cung cấp trong khu vực phục vụ, không cần ra điểm tập trung. Nếu địa chỉ nằm xa trung tâm, bạn chỉ cần báo trước để sắp xếp." }, { q: "Có thể thanh toán bằng chuyển khoản không?", a: "Được. Bạn có thể thanh toán tiền mặt khi lên xe, chuyển khoản trước hoặc quét QR qua Momo, ZaloPay, VietQR." }, { q: "Lỡ cần đổi giờ khởi hành thì sao?", a: "Chỉ cần báo sớm cho tổng đài. Chúng tôi sẽ điều chỉnh lại lịch đón nếu còn xe trống." }, { q: "Trẻ nhỏ đi cùng có tính vé riêng không?", a: "Trẻ dưới 5 tuổi ngồi cùng ghế với người lớn được miễn phí. Trẻ từ 5 tuổi trở lên tính một vé người lớn để đảm bảo an toàn và có chỗ ngồi riêng." }, { q: "Mang nhiều hành lý có được không?", a: "Mỗi khách được mang 1 vali và 1 balo xách tay. Hành lý quá kích thước hoặc quá số lượng nên báo trước để tài xế sắp xếp khoang chứa phù hợp." }, { q: "Đức Hải có nhận gửi hàng theo chuyến không?", a: "Có. Nhận gửi hàng nhỏ theo chuyến, giao tận nơi hoặc khách tự lấy tại điểm đến. Nhắn Zalo để báo trước và được sắp xếp chuyến phù hợp." }, ], /* ── Theme — "Forest & Copper" ─────────────────────────────── */ theme: { "--c-navy": "#123528", "--c-navy-soft": "#1F5A45", "--c-navy-deep": "#07150F", "--c-cream": "#F5F2E8", "--c-cream-2": "#E4DDC9", "--c-paper": "#FFFFFF", "--c-ink": "#10251E", "--c-ink-soft": "#496356", "--c-mute": "#718579", "--c-line": "rgba(18,53,40,0.10)", "--c-line-strong": "rgba(18,53,40,0.18)", "--c-accent": "#C9733B", "--c-accent-deep": "#A65626", "--c-accent-soft": "#F5D1B3", "--c-success": "#2F6B4F", "--card-radius": "16px", "--card-radius-sm":"10px", }, }; /* Apply BRAND.theme to CSS custom properties at load time */ (function applyTheme() { const root = document.documentElement.style; Object.entries(BRAND.theme).forEach(([k, v]) => root.setProperty(k, v)); })(); /* Apply BRAND.seo to meta tags at load time */ (function applySEO() { const s = BRAND.seo; document.title = s.title; const set = (sel, attr, val) => { const el = document.querySelector(sel); if (el && val) el.setAttribute(attr, val); }; set('meta[name="description"]', "content", s.description); set('link[rel="canonical"]', "href", s.canonical); set('link[rel="icon"]', "href", s.favicon); set('link[rel="apple-touch-icon"]', "href", s.favicon); set('meta[property="og:title"]', "content", s.title); set('meta[property="og:description"]', "content", s.description); set('meta[property="og:url"]', "content", s.canonical); set('meta[property="og:image"]', "content", s.ogImage); set('meta[property="og:image:alt"]', "content", s.ogImageAlt); set('meta[property="og:site_name"]', "content", s.siteName); set('meta[name="twitter:title"]', "content", s.title); set('meta[name="twitter:description"]', "content", s.description); set('meta[name="twitter:image"]', "content", s.ogImage); })(); /* ─── SVG icon library ──────────────────────────────────────────────────── */ 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 ─────────────────────────────────────────────────────────── */ const SITE_IMAGES = { hero: "uploads/hero-limousine-office.png", cta: "uploads/haivan.jpg", services: [ "uploads/scene-hue-1.jpg", "uploads/scene-hue-2.jpg", "uploads/scene-hue-3.webp", "uploads/scene-danang-1.jpg", "uploads/scene-danang-2.jpg", "uploads/scene-hoian-1.jpg", "uploads/scene-hoian-2.jpg", "uploads/scene-danang-3.jpg", "uploads/scene-hoian-3.webp", ], 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", ], news: [ "uploads/scene-hue-1.jpg", "uploads/scene-hoian-1.jpg", "uploads/scene-danang-1.jpg", ], }; /* ─── ImageSlot — image with striped placeholder fallback ───────────────── */ 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}}

); } /* ─── Logo — reads path from BRAND ─────────────────────────────────────── */ function Logo({ size=36 }) { return (

); } /* ─── useIsMobile ───────────────────────────────────────────────────────── */ 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 on scroll ───────────────────────────────── */ 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}

); } /* ─── RouteLine SVG ─────────────────────────────────────────────────────── */ 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 ( ); } /* ─── IMAGE_MANIFEST ────────────────────────────────────────────────────── */ const IMAGE_MANIFEST = [ { file: "hero-limousine-office.jpg", where: "Hero", purpose: "Ảnh nền hero — limousine trước văn phòng. Overlay tối để đè chữ trắng.", size: "1920×900", ratio: "16:7.5" }, { file: "cta-hai-van-limousine.jpg", where: "CTA Banner", purpose: "Ảnh nền CTA — xe trên đèo Hải Vân hoặc cảnh ven biển. Overlay tối.", size: "1920×600", ratio: "16:5" }, { file: "scene-hue.jpg", where: "Services — Huế—ĐN", purpose: "Phong cảnh Huế — Đại Nội / Sông Hương.", size: "800×600", ratio: "4:3" }, { file: "scene-hoian.jpg", where: "Services — Huế—HA", purpose: "Phong cảnh Hội An — Phố cổ, đèn lồng.", size: "800×600", ratio: "4:3" }, { file: "scene-danang.jpg", where: "Services — ĐN—HA", purpose: "Phong cảnh Đà Nẵng — Cầu Rồng, bãi biển.", size: "800×600", ratio: "4:3" }, { file: "gallery-01.jpg", where: "Gallery #1", purpose: "Kia Carnival màu đen — toàn cảnh bên hông.", size: "1000×750", ratio: "4:3" }, { file: "gallery-02.jpg", where: "Gallery #2", purpose: "Toyota Fortuner trắng — góc 3/4.", size: "1000×750", ratio: "4:3" }, { file: "gallery-03.jpg", where: "Gallery #3", purpose: "Kia Carnival phía sau.", size: "1000×750", ratio: "4:3" }, { file: "gallery-04.jpg", where: "Gallery #4", purpose: "Fortuner hậu.", size: "1000×750", ratio: "4:3" }, { file: "gallery-05.jpg", where: "Gallery #5", purpose: "Fortuner trắng — chính diện.", size: "1000×750", ratio: "4:3" }, { file: "gallery-06.jpg", where: "Gallery #6", purpose: "Fortuner đen.", size: "1000×750", ratio: "4:3" }, { file: "gallery-07.jpg", where: "Gallery #7", purpose: "Nội thất Dcar Limousine — ghế da, gối VIP.", size: "1000×750", ratio: "4:3" }, { file: "gallery-08.jpg", where: "Gallery #8", purpose: "Văn phòng Huế — biển hiệu, mặt tiền.", size: "1000×750", ratio: "4:3" }, { file: "gallery-09.jpg", where: "Gallery #9", purpose: "Ford Transit limousine.", size: "1000×750", ratio: "4:3" }, ]; Object.assign(window, { BRAND, Ico, SITE_IMAGES, IMAGE_MANIFEST, ImageSlot, Logo, Reveal, useIsMobile, RouteLine });