// Xedap.vn homepage — reference layout: hero carousel, category tiles, brand wall, // four category product sections (rich cards), dual promo banners, closing hero. const { Button, Badge, PriceTag, Rating, ColorSwatches, IconButton, ProductCard, ProductCardCp } = window.XedapVnDesignSystem_03b1c0; /* ---------- Hero carousel ---------- */ function Hero({ onExplore }) { const { HERO_SLIDES } = window.KitData; const [i, setI] = React.useState(0); const [muted, setMuted] = React.useState(true); const vidRef = React.useRef(null); const slides = HERO_SLIDES; const s = slides[i]; const go = (d) => setI((p) => (p + d + slides.length) % slides.length); React.useEffect(() => { if (vidRef.current) vidRef.current.muted = muted; }, [muted, i]); React.useEffect(() => { if (s.type === "video") return; const t = setTimeout(() => go(1), 6000); return () => clearTimeout(t); }, [i]); return (
{s.type === "placeholder" ? (
Banner {String(i + 1).padStart(2, "0")} — chờ bổ sung ảnh/video
) : s.type === "video" ? (
); } const arrowStyle = (side) => ({ position: "absolute", top: "50%", [side]: 24, transform: "translateY(-50%)", width: 56, height: 42, borderRadius: 5, border: "1.5px solid rgba(255,255,255,.5)", background: "rgba(255,255,255,.06)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "calc(13px + 7px*var(--ts))", cursor: "pointer", backdropFilter: "blur(2px)", transition: "background var(--dur) var(--ease-out)", }); /* ---------- Category tiles (ô đầu ghim, phần còn lại trượt) ---------- */ function renderCategoryTile(t, IMG, onPick, basis) { return (
{t.eyebrow}
{t.title}
{ e.preventDefault(); if (t.finder) { window.location.href = "./find-your-bike.html"; return; } onPick && onPick(); }} style={{ position: "relative", display: "inline-flex", alignItems: "center", gap: 10, cursor: "pointer", textDecoration: "none" }}> {t.finder ? "Tìm xe phù hợp" : "Khám phá"}
); } /* ---------- Category tiles (auto-scroll carousel) ---------- */ function CategoryTiles({ onPick }) { const { TILES, IMG } = window.KitData; const trackRef = React.useRef(null); const [trackW, setTrackW] = React.useState(1200); React.useEffect(() => { const el = trackRef.current; if (!el || typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(([e]) => setTrackW(e.contentRect.width)); ro.observe(el); return () => ro.disconnect(); }, []); const VISIBLE = Math.max(1, Math.min(4, Math.floor(trackW / 250) || 1)); // Ô đầu tiên được ghim cố định; chỉ các ô còn lại trượt. const pinned = TILES[0]; const sliding = TILES.slice(1); const slideVisible = Math.max(1, VISIBLE - 1); const maxIndex = Math.max(0, sliding.length - slideVisible); const [index, setIndex] = React.useState(0); const [paused, setPaused] = React.useState(false); React.useEffect(() => { if (paused) return; const id = setInterval(() => setIndex((i) => (i >= maxIndex ? 0 : i + 1)), 2800); return () => clearInterval(id); }, [paused, maxIndex]); return (
setPaused(true)} onMouseLeave={() => setPaused(false)}>
{renderCategoryTile(pinned, IMG, onPick, "100%")}
{Array.from({ length: maxIndex + 1 }).map((_, i) => (
); } /* ---------- Brand wall ---------- */ function BrandWall() { const { PARTNERS } = window.KitData; const loop = [...PARTNERS, ...PARTNERS]; const scrollRef = React.useRef(null); const pausedRef = React.useRef(false); const dragRef = React.useRef(null); React.useEffect(() => { const el = scrollRef.current; if (!el) return; let raf; const step = () => { if (!pausedRef.current && !dragRef.current) { el.scrollLeft += 0.5; const half = el.scrollWidth / 2; if (el.scrollLeft >= half) el.scrollLeft -= half; } raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, []); const onPointerDown = (e) => { const el = scrollRef.current; dragRef.current = { x: e.clientX, left: el.scrollLeft, moved: false }; el.setPointerCapture(e.pointerId); }; const onPointerMove = (e) => { const d = dragRef.current; if (!d) return; const el = scrollRef.current; const dx = e.clientX - d.x; if (Math.abs(dx) > 3) d.moved = true; let next = d.left - dx; const half = el.scrollWidth / 2; if (next < 0) next += half; else if (next >= half) next -= half; el.scrollLeft = next; }; const endDrag = (e) => { const el = scrollRef.current; if (dragRef.current) { try { el.releasePointerCapture(e.pointerId); } catch (_) {} } dragRef.current = null; }; return (
{ pausedRef.current = true; }} onMouseLeave={() => { pausedRef.current = false; }} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endDrag} onPointerCancel={endDrag} style={{ display: "flex", alignItems: "center", gap: 56, overflowX: "auto", scrollbarWidth: "none", cursor: "grab", touchAction: "pan-y", userSelect: "none" }} > {loop.map((b, i) => (
{`Partner
))}
); } /* ---------- Rich product card ---------- */ function SectionCard({ product, onAdd, onOpen }) { const { IMG } = window.KitData; const p = product; return onOpen && onOpen(p)} />; } /* ---------- Category section: promo panel + 3 cards ---------- */ function CategorySection({ section, onAdd, onOpen, onCategory, onBrand }) { const { IMG } = window.KitData; const pr = section.promo; return (

{section.title}

{pr.eyebrow} {pr.title}
{section.products.map((p) => )}
); } /* ---------- Exclusive promo banners ---------- */ function ExclusiveBanners({ onExplore }) { const { IMG } = window.KitData; const banners = [ { tag: "Xedap.vn", img: "https://cdn.hstatic.net/files/200001086651/file/48_6df1156ec5cc4486842d1af6715028f2.png", seed: "xedap-vn-exclusive-1" }, { tag: "Xedap.vn", img: "https://cdn.hstatic.net/files/200001086651/file/49.png", seed: "xedap-vn-exclusive-2" }, ]; return (
{banners.map((b, k) => (
Xe cao cấp
đã có mặt
))}
); } /* ---------- Social feed: Cập nhật thêm từ Xedap.vn ---------- */ function SocialFeed() { const posts = [ { id: "raptor-hunter-4", img: "https://cdn.hstatic.net/files/200001086651/file/tiktok_thumb__2_.png" }, { id: "can-thi-kinh", img: "https://cdn.hstatic.net/files/200001086651/file/tiktok_thumb__1_.png" }, { id: "trong-kinh", img: "https://cdn.hstatic.net/files/200001086651/file/tiktok_thumb__4_.png" }, { id: "chi-nhanh", img: "https://cdn.hstatic.net/files/200001086651/file/tiktok_thumb__5_.png" }, { id: "giant-rincon-2", img: "https://cdn.hstatic.net/files/200001086651/file/tiktok_thumb__3_.png" }, ]; return (

Cập nhật thêm từ Xedap.vn

{/* profile row */}
Xedapvn
Xedapvn xedap.vn.official 37,7K follower · 246,2K lượt thích
Follow
{/* thumbnails */}
{posts.map((p) => (
))}
); } function PromoRow() { return (
{[ { img: "https://cdn.hstatic.net/files/200001188264/file/logo_brand_xedap-21.svg", lines: ["Trả chậm 0%", "trả trước 0đ"] }, { img: "https://cdn.hstatic.net/files/200001188264/file/logo_brand_xedap-22.svg", lines: ["Miễn phí", "giao hàng"] }, { img: "https://cdn.hstatic.net/files/200001188264/file/logo_brand_xedap-19.svg", lines: ["Bảo hành", "đến 5 năm"] }, { img: "https://cdn.hstatic.net/files/200001188264/file/logo_brand_xedap-20.svg", lines: ["Miễn phí", "bảo dưỡng"] }, ].map((it, i) => (

{it.lines[0]}

{it.lines[1]}

))}
); } /* ---------- Closing showroom CTA (giống trang blog) ---------- */ function HomeStoreCTA() { return (
HỆ THỐNG SHOWROOM

Ghé thăm Xedap.vn Store

32 showroom trên toàn quốc — trải nghiệm, chạy thử và nhận tư vấn trực tiếp từ chuyên gia.

); } /* ---------- Scroll-to-top arrow (xuất hiện khi cuộn quá 1/3 trang) ---------- */ function ScrollTopButton() { const [show, setShow] = React.useState(false); React.useEffect(() => { const onScroll = () => { const bw = document.getElementById("home-brandwall"); setShow(bw ? bw.getBoundingClientRect().bottom < 0 : false); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); return ( ); } /* ---------- Flash sale (tab đỏ + đếm ngược + carousel) ---------- */ const FLASH_TABS = [ { key: "flash", label: "SẢN PHẨM HOT TREND" }, { key: "new", label: "HÀNG MỚI VỀ" }, ]; const FLASH_SLOTS = [ { label: "Đang diễn ra", time: "09:00 - 23:59" }, { label: "Ngày mai", time: "00:00 - 23:59" }, ]; function FlashCard({ product, sold, quota, onOpen, onAdd }) { const { IMG } = window.KitData; return (
onOpen && onOpen(product)} />
); } function HomeFlashSale({ onOpen, onAdd, perView, noBorder, rows, onSeeAll }) { const ROWS = Math.max(1, rows || 1); const { PRODUCTS } = window.KitData; const [tab, setTab] = React.useState("flash"); const [slotIdx, setSlotIdx] = React.useState(0); const [page, setPage] = React.useState(0); const [left, setLeft] = React.useState(9 * 3600 + 13 * 60 + 20); React.useEffect(() => { const id = setInterval(() => setLeft((s) => (s <= 0 ? 12 * 3600 : s - 1)), 1000); return () => clearInterval(id); }, []); React.useEffect(() => setPage(0), [tab, slotIdx]); const [shown, setShown] = React.useState(0); const pad = (n) => String(n).padStart(2, "0"); const digits = [pad(Math.floor(left / 3600)), pad(Math.floor((left % 3600) / 60)), pad(left % 60)]; const POOL_SIZE = ROWS > 1 ? 20 : 10; const pool = tab === "flash" ? PRODUCTS.slice(0, POOL_SIZE) : [...PRODUCTS].slice(-POOL_SIZE).reverse(); const items = pool.map((p, i) => ({ p, sold: [0, 3, 7, 12, 5, 9, 2, 14, 6, 1][i % 10], quota: [10, 20, 50, 30, 20, 10, 20, 100, 20, 10][i % 10] })); const trackRef = React.useRef(null); const [trackW, setTrackW] = React.useState(1200); React.useEffect(() => { const el = trackRef.current; if (!el || typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(([e]) => setTrackW(e.contentRect.width)); ro.observe(el); return () => ro.disconnect(); }, []); const VISIBLE = perView ? Math.max(1, Math.min(perView, items.length)) : Math.max(1, Math.min(4, Math.floor(trackW / 250) || 1)); const PER_PAGE = VISIBLE * ROWS; const pages = Math.max(1, Math.ceil(items.length / PER_PAGE)); const go = (d) => setPage((p) => (p + d + pages) % pages); React.useEffect(() => setShown(PER_PAGE), [tab, slotIdx, PER_PAGE]); return (
{/* gray stage */}
{/* blue header bar, overlapping the stage */}
FASHSALE
{FLASH_TABS.map((t) => { const on = t.key === tab; return ( ); })}
Kết thúc trong
{digits.map((d, k) => ( {k > 0 && :} {d} ))}
{FLASH_SLOTS.map((s, i) => ( ))}
{/* carousel */}
{ROWS > 1 ? (
{items.slice(0, shown).map((it, i) => (
))}
) : (
{items.map((it) => (
))}
)} {ROWS === 1 && pages > 1 && ( )}
{((ROWS > 1 && shown < items.length) || onSeeAll) && (
)}

Chỉ áp dụng thanh toán online thành công — Mỗi SĐT chỉ được mua 1 sản phẩm cùng loại · Không áp dụng cùng ưu đãi khác

); } const flashArrow = (side) => ({ position: "absolute", top: "50%", [side]: 0, transform: "translateY(-50%)", width: 30, height: 30, border: "none", cursor: "pointer", borderRadius: "50%", background: "rgba(255,255,255,.95)", color: "#27272a", fontSize: "calc(13px + 5px*var(--ts))", boxShadow: "0 2px 8px rgba(0,0,0,.18)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 3, }); function HomePage({ onAdd, onOpen, onCategory, onBrand, onCollection }) { const { SECTIONS } = window.KitData; return (
{SECTIONS.map((s) => )}
); } Object.assign(window, { HomePage, HomeFlashSale });