import React, { useEffect, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; import productsCatalog from './products_data.json'; import postsCatalog from './posts_data.json'; const media = 'https://muyecncar.com/wp-content/uploads'; const images = { logo: '/banner/logo.png', heroBanner: '/banner/banner-1.webp', neptrCard: '/banner/4-neptr.webp', neptCard: '/banner/12.webp', moreCard: '/banner/13.webp', contactBg: '/banner/contact-bg.webp', products: [ ['Armed A pillar mechanical handle', '/products/handle-1.jpg', '/products/handle-2.jpg', '$249.00', '$269.00', 'more-series'], ['Armed blind area sandboard mirror', '/products/mirror-1.jpg', '/products/mirror-2.jpg', '$189.00', '$229.00', 'more-series'], ['Armed carbon fiber handlebars', '/products/carbon-1.jpg', '/products/carbon-2.jpg', '$220.00', '$238.00', 'more-series'], ['Armed tail lamp shade', '/products/taillamp-1.jpg', '/products/taillamp-2.jpg', '$309.00', '$329.00', 'more-series'], ['Multi-function rearview mirror rain shield', '/products/rainshield-1.jpg', '/products/rainshield-2.jpg', '$319.00', '$349.00', 'more-series'], ['MUYE INDUSTRY GWM TANK key case', '/products/keycase-1.jpg', '/products/keycase-2.jpg', '$79.00', '$99.00', 'more-series'], ], testimonials: [ { author: 'US. MARTIN', image: '/testimonials/testimonial-car-1.jpg', quote: 'The craftsmanship of these products is evident in every detail. The materials used are of the highest quality, ensuring durability and reliability. The designs are innovative and eye-catching, making your off-roader stand out from the crowd.', }, { author: 'AU. LUCAS', image: '/testimonials/testimonial-car-2.jpg', quote: 'The quality of these products is superb. The materials are robust and built to last, capable of withstanding the toughest off-roading challenges. The design is a perfect blend of style and functionality. It gives the vehicle a bold and attractive look while enhancing its performance on and off the road.', }, { author: 'FR. JUSTIN LU', image: '/testimonials/testimonial-car-3.jpg', quote: 'The installation process is user-friendly, with clear instructions that make it easy to get the modifications done right. The suspension upgrades from these brands offer an incredibly smooth ride, ensuring comfort even on the roughest terrains. The larger tires provide excellent traction and stability, giving you the confidence to take on any obstacle', }, { author: 'US. OSAKA', image: '/testimonials/testimonial-car-4.jpg', quote: 'The customer service provided by NEPT and MORE is outstanding. The team is highly knowledgeable and always ready to assist. They answer queries promptly and offer valuable suggestions to ensure the best possible modification experience.', }, ], brand: [ `${media}/2025/12/Introduction-to-Muye-IndustryNEW_012-scaled.jpg`, `${media}/2025/12/Introduction-to-Muye-IndustryNEW_011-scaled.jpg`, `${media}/2025/12/Introduction-to-Muye-IndustryNEW_013-scaled.jpg`, `${media}/2025/12/Introduction-to-Muye-IndustryNEW_015-scaled.jpg`, ], }; const pages = { home: '/', shop: '/shop-2/', nept: '/product-category/modified-parts-exclusive-to-ford-bronco/', neptr: '/product-category/neptr-series/', more: '/product-category/more-series/', blog: '/our-blog/', brand: '/brand/', contact: '/contact/', supports: '/supports-center/', cart: '/cart/', checkout: '/checkout/', orderReceived: '/checkout/order-received/', }; const articleSlugs = [ '/exploring-the-market-prospect-of-off-road-vehicle-modification/', '/exploring-the-market-size-of-off-road-car-modification-parts/', '/33796-2/', '/33822-2/', '/shenzhen-muye-industrial-to-showcase-ford-bronco-carbon-fiber-accessories-at-automechanika-shanghai-2025/', '/tank-300/', '/muye-industrial-introduces-the-adjustable-40-52-roof-spotlight-bracket-at-automechanika-shanghai-2025/', '/bronco-central-control-integrated-rail-platform-automechanika/', '/nept-x-muye-industry-meet-us-at-automechanika-shanghai-booth-8-2k123/', '/the-ultimate-dashboard-organizer-for-your-ford-ranger/', '/ford-ranger/', '/a-pillar-dual-spotlight-bracket-for-2023-2025-ford-ranger/', '/multi-functional-flagpole-mount-for-off-road-adventures/', '/universal-roof-spotlight-bracket-for-serious-off-road-builds/', '/enhance-off-road-safety-with-a-wide-angle-blind-spot-mirror/', '/elevate-the-ritual-why-you-need-a-transparent-fuel-door-upgrade/', '/the-ultimate-rear-guard-why-your-rig-needs-cnc-aluminum-tail-light-covers/', '/quick-release-blind-spot-mirror/', '/rear-trunk-integration-platform-drawers-table/' ]; function prettySlug(slug) { return slug .split('-') .filter(Boolean) .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); } function go(path) { window.history.pushState({}, '', path); window.dispatchEvent(new PopStateEvent('popstate')); window.scrollTo({ top: 0, behavior: 'smooth' }); } /* =================================================== SVG ICONS =================================================== */ function GlobeIcon() { return ( ); } function SocialIcons() { return (
); } function WhatsAppIcon() { return ( ); } function SearchIcon() { return ( ); } function UserIcon() { return ( ); } function CartIcon() { return ( ); } function MailSolidIcon({ size = 16, color = '#111' }) { return ( ); } function WhatsAppSolidIcon({ size = 17, color = '#111' }) { return ( ); } function PinSolidIcon({ size = 16, color = '#111' }) { return ( ); } /* =================================================== HEADER COMPONENT =================================================== */ function Header({ currentPath, cartCount, onCart, onSearch }) { const [mobileOpen, setMobileOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [searchCategory, setSearchCategory] = useState('all'); const [searchOpen, setSearchOpen] = useState(false); const searchWrapRef = useRef(null); useEffect(() => { function handleOutsideClick(e) { if (searchWrapRef.current && !searchWrapRef.current.contains(e.target)) { setSearchOpen(false); } } function handleKeyDown(e) { if (e.key === 'Escape') setSearchOpen(false); } if (searchOpen) { document.addEventListener('mousedown', handleOutsideClick); document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('mousedown', handleOutsideClick); document.removeEventListener('keydown', handleKeyDown); }; } }, [searchOpen]); const handleSearchSubmit = (e) => { e.preventDefault(); if (onSearch) { onSearch(searchTerm, searchCategory); } setSearchOpen(false); }; const navLinks = [ { label: 'HOME', path: pages.home }, { label: 'NEPT SERIES', path: pages.nept }, { label: 'NEPTR SERIES', path: pages.neptr }, { label: 'MORE SERIES', path: pages.more }, { label: 'SHOP', path: pages.shop }, { label: 'BLOG', path: pages.blog }, { label: 'CONTACT', path: pages.contact }, ]; return ( <> {/* 1. TOP BAR */}
{/* 2. MAIN HEADER */}
{/* Left: WhatsApp Only */}
Whatsapp Me: +86-17727960741
{/* Center: Logo */}
{ e.preventDefault(); go('/'); }} > MUYE INDUSTRY
{/* Right: Actions (Search Icon -> Account -> Cart -> Mobile Menu) */}
{/* Search Icon & Dropdown Menu */}
{searchOpen && (
setSearchTerm(e.target.value)} />
)}
{/* 3. CENTERED NAV ROW */}
{/* Mobile Drawer */} {mobileOpen && (
setMobileOpen(false)}>
)} ); } /* =================================================== HERO BANNER COMPONENT =================================================== */ function HeroBanner() { return (
Exploring Never Stop - MUYE Off-Road Equipment

EXPLORING NEVER

STOP

THE ULTIMATE OFF-ROAD EQUIPMENT

{ e.preventDefault(); go(pages.shop); }} > Explore Collection ↗
); } /* =================================================== PRODUCT CATEGORIES COMPONENT =================================================== */ function ProductCategories() { const categories = [ { title: 'NEPTR SERIES', desc: 'Ford Ranger & Raptor', image: images.neptrCard, path: pages.neptr, }, { title: 'NEPT SERIES', desc: 'Ford Bronco Exclusive', image: images.neptCard, path: pages.nept, }, { title: 'MORE SERIES', desc: 'GWM Tank 300 & Universal', image: images.moreCard, path: pages.more, }, ]; return (
{categories.map((cat) => ( { e.preventDefault(); go(cat.path); }} > {cat.title}
↗

{cat.title}

{cat.desc}

 ))}
); } /* =================================================== PRODUCT CARDS & GRIDS (4:3 pure white background hero image + right-to-left hover slide) =================================================== */ function ProductCard({ product, onAdd }) { const isObj = product && typeof product === 'object' && !Array.isArray(product); const title = isObj ? product.name : product[0]; const img1 = isObj ? (product.hero_white || product.gallery?.[0]) : product[1]; const img2 = isObj ? (product.hero_lifestyle || product.gallery?.[1] || img1) : product[2]; const price = isObj ? product.price : product[3]; const origPrice = isObj ? product.regular_price : product[4]; const discount = isObj ? product.discount_percent : Math.round((1 - parseFloat(price.slice(1)) / parseFloat(origPrice.slice(1))) * 100); const slug = isObj ? product.slug : title.toLowerCase().replace(/[^a-z0-9]+/g, '-'); const targetUrl = `/product/${slug}/`; return (
go(targetUrl)} >
-{discount}% {title} {img2 && ( {`${title} )}

{ e.preventDefault(); e.stopPropagation(); go(targetUrl); }} > {title}

{origPrice} {price}

{onAdd && ( )}
); } function ProductGrid({ items = productsCatalog, onAdd, title = 'FEATURED OF MORE SERIES', showViewAll = false, viewAllUrl = pages.more }) { return (
{title && (

{title}

)}
{items.map((p) => ( ))}
{showViewAll && (
{ e.preventDefault(); go(viewAllUrl); }} > VIEW ALL PRODUCTS ↗
)}
); } /* =================================================== HOMEPAGE =================================================== */ function Home({ onAdd }) { const [testimonial, setTestimonial] = useState(0); // Pick top 9 MORE series items for the featured section const moreFeatured = useMemo(() => { return productsCatalog.filter((p) => p.series === 'MORE SERIES').slice(0, 9); }, []); return (
{/* 1. Hero Banner matching screenshot */} {/* 2. Product Category Cards matching screenshot */} {/* 3. Highlight Feature Banner (Exact match to Wasteland Roof Rack screenshot) */}
go('/product/wasteland-roof-rack/')}> Wasteland roof rack

WASTELAND ROOF RACK

ORIGINAL VEHICLE POSITION LOSSLESS INSTALLATION
WITHSTAND A STATIC LOAD OF 160KG

$1500
{ e.preventDefault(); e.stopPropagation(); go('/product/wasteland-roof-rack/'); }} > SHOP NOW
{/* 4. Product Showcase (9 MORE Series Products + View All Products button) */} {/* 5. Highlight Feature Banner below Featured (Armed Carbon Fiber Handlebars matching screenshot) */}
go('/product/armed-carbon-fiber-handlebars/')} > Armed Carbon Fiber Handlebars

ARMED CARBON FIBER HANDLEBARS

CARBON FIBER HAS EXCELLENT DAMPING EFFECT TO IMPROVE
THE HANDLING FEEL

$1480
{ e.preventDefault(); e.stopPropagation(); go('/product/armed-carbon-fiber-handlebars/'); }} > SHOP NOW
{/* 5B. Community & Newsletter Section (Exact match to screenshot) */}
{/* Left Card: Follow Us on Social Media with Tire Tread Background */}

FOLLOW US

SOCIAL MEDIA

Follow MUYE INDUSTRY across social networks for official releases, field testing footage, and precision installation guides.

{/* Right Card: Green Subscribe & Actions Card */}
{/* Top Quick Actions */} {/* Subscribe Form Content */}

SUBSCRIBE

Sign up for our newsletter to receive new product alerts and personalized deals

{ e.preventDefault(); alert('Thank you for subscribing to MUYE INDUSTRY updates!'); }} >
{/* 6. Customer Testimonials */} {/* 6. Customer Testimonials (4 Cards Matching Screenshot) */}

WHAT OUR CUSTOMERS SAY

REAL MILES. REAL STORIES.

{images.testimonials.map((t, idx) => (
{`Off-road
★★★★★

“{t.quote}”

{t.author}
))}
{/* Carousel Indicator Dots */}
{images.testimonials.map((_, i) => (
); } /* =================================================== FOOTER =================================================== */ function Footer() { return ( ); } /* =================================================== OTHER PAGES =================================================== */ function Listing({ kind, onAdd, searchQuery = '' }) { const [selectedCategory, setSelectedCategory] = useState( kind === 'nept' ? 'NEPT SERIES' : kind === 'neptr' ? 'NEPTR SERIES' : kind === 'more' ? 'MORE SERIES' : 'ALL' ); const [sortBy, setSortBy] = useState('featured'); useEffect(() => { if (kind === 'nept') setSelectedCategory('NEPT SERIES'); else if (kind === 'neptr') setSelectedCategory('NEPTR SERIES'); else if (kind === 'more') setSelectedCategory('MORE SERIES'); else if (kind === 'shop') setSelectedCategory('ALL'); }, [kind]); const filteredItems = useMemo(() => { let list = [...productsCatalog]; if (selectedCategory !== 'ALL') { list = list.filter((p) => p.series === selectedCategory); } if (searchQuery) { const q = searchQuery.toLowerCase(); list = list.filter((p) => p.name.toLowerCase().includes(q) || (p.compatibility && p.compatibility.toLowerCase().includes(q)) || (p.sku && p.sku.toLowerCase().includes(q)) ); } if (sortBy === 'price-low') { list.sort((a, b) => a.price_numeric - b.price_numeric); } else if (sortBy === 'price-high') { list.sort((a, b) => b.price_numeric - a.price_numeric); } else if (sortBy === 'name') { list.sort((a, b) => a.name.localeCompare(b.name)); } return list; }, [selectedCategory, searchQuery, sortBy]); const title = searchQuery ? `Search Results: "${searchQuery}"` : selectedCategory === 'ALL' ? 'All Off-Road Products' : selectedCategory; return (
{ e.preventDefault(); go('/'); }}>Home / { e.preventDefault(); go(pages.shop); }}>Shop {selectedCategory !== 'ALL' && ( <> / {selectedCategory} )}

MUYE Catalog

{title}

Showing {filteredItems.length} products
); } function Brand() { return (

The company

Brand

About MUYE INDUSTRY

We build the parts that take you further.

MUYE INDUSTRY creates CNC aluminum and carbon fiber upgrades for modern off-road vehicles. From the first sketch to the final fit, each part is built around real-world use, clean engineering and a desire to explore.

Our NEPT, NEPTR and MORE series are designed to be installed without compromise and to keep their character for years of dust, sun and mud.

{images.brand.map((src) => ( MUYE INDUSTRY workshop ))}
); } function Blog() { const [selectedCategory, setSelectedCategory] = useState('All'); const [searchWord, setSearchWord] = useState(''); const categories = useMemo(() => { const set = new Set(); postsCatalog.forEach((p) => { if (p.category) set.add(p.category); }); return ['All', ...Array.from(set)]; }, []); const filteredPosts = useMemo(() => { return postsCatalog.filter((p) => { const matchCat = selectedCategory === 'All' || p.category === selectedCategory; const matchSearch = !searchWord || p.title.toLowerCase().includes(searchWord.toLowerCase()) || p.excerpt.toLowerCase().includes(searchWord.toLowerCase()); return matchCat && matchSearch; }); }, [selectedCategory, searchWord]); const featuredPost = filteredPosts[0]; const gridPosts = filteredPosts.slice(1); return (
{/* Blog Hero Header */}

FIELD NOTES & ENGINEERING

MUYE JOURNAL

Technical build breakdowns, extreme terrain field testing, and precision CNC engineering stories for Ford Bronco, Ranger, and Tank 300.

{/* Filter Bar */}
{categories.map((cat) => ( ))}
setSearchWord(e.target.value)} className="blog-search-input" />
{/* Featured Card */} {featuredPost && ( )} {/* 3-Column Grid for Remaining Articles */}
{gridPosts.map((post) => ( ))}
); } function Contact() { const [formData, setFormData] = useState({ company: '', name: '', email: '', phone: '', message: '', }); const [submitted, setSubmitted] = useState(false); const handleSubmit = (e) => { e.preventDefault(); setSubmitted(true); }; return (
{/* Left Column: CONTACT US */}

CONTACT US

Customer service is our number one priority. Please feel free to reach out to us for regarding your order or giving feedback by{' '} info@muyecncar.com (Please show us your order number first).

We warmly welcome people with lofty ideals to join us. If you are interested in becoming our dealer, please contact us by{' '} info@muyecncar.com

Important!!! We will definitely reply to the mail, but sometimes the mail will be considered as spam, please check the spam mailbox to find our mail in time.

info@muyecncar.com +86-17727960741
101, Building 4, Baiwang Creative Factory, 1051 Songbai Road, Xili Street, Nanshan District, Shenzhen , China
{/* Right Column: GET IN TOUCH */}

GET IN TOUCH

{submitted ? (
THANK YOU FOR GETTING IN TOUCH!

We have received your message. Our team will review your inquiry and reply via email within 24 hours.

) : (
setFormData({ ...formData, company: e.target.value })} className="contact-field-input" /> setFormData({ ...formData, name: e.target.value })} className="contact-field-input" />
setFormData({ ...formData, email: e.target.value })} className="contact-field-input" /> setFormData({ ...formData, phone: e.target.value })} className="contact-field-input" />
)}
); } function GenericPage({ title, eyebrow = 'Customer service', children }) { return (

{eyebrow}

{title}

{children || ( <>

We're here to help.

Browse our collection, read our latest stories, or contact the MUYE INDUSTRY team for product and order support.

)}
); } function ProductPage({ onAdd, slug }) { const product = useMemo(() => { if (!slug) return productsCatalog[0]; const s = slug.toLowerCase().replace(/\/$/, ''); return ( productsCatalog.find( (p) => p.slug.toLowerCase() === s || String(p.id) === s || p.slug.toLowerCase().includes(s) || s.includes(p.slug.toLowerCase()) ) || productsCatalog[0] ); }, [slug]); const [activeImgIndex, setActiveImgIndex] = useState(0); const [qty, setQty] = useState(1); const [activeTab, setActiveTab] = useState('desc'); const [lightboxOpen, setLightboxOpen] = useState(false); // Gallery array const gallery = useMemo(() => { const list = [product.hero_white]; if (product.hero_lifestyle && product.hero_lifestyle !== product.hero_white) { list.push(product.hero_lifestyle); } (product.gallery || []).forEach((img) => { if (!list.includes(img)) list.push(img); }); return list.filter(Boolean); }, [product]); // Curated 4:3 white-background angle shots const whiteShots = useMemo(() => { if (product.white_gallery && product.white_gallery.length > 0) { return product.white_gallery; } const list = [product.hero_white]; (product.gallery || []).forEach((img) => { if (img !== product.hero_lifestyle && !list.includes(img) && list.length < 4) { list.push(img); } }); return list.filter(Boolean); }, [product]); // Lifestyle / on-car images for lookbook const lookbookImages = useMemo(() => { return (product.gallery || []).filter((img) => img !== product.hero_white).slice(0, 4); }, [product]); useEffect(() => { setActiveImgIndex(0); setQty(1); setLightboxOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); }, [product]); const currentImg = gallery[activeImgIndex] || product.hero_white; const nextImg = () => { setActiveImgIndex((prev) => (prev + 1) % gallery.length); }; const prevImg = () => { setActiveImgIndex((prev) => (prev - 1 + gallery.length) % gallery.length); }; const whatsappMessage = encodeURIComponent( `Hello MUYE INDUSTRY!\n\nI want to order: *${product.name}*\nPrice: ${product.price}\nSKU: ${product.sku}\nVehicle: ${product.compatibility}\n\nPlease check shipping rate and availability to my address.` ); const whatsappUrl = `https://wa.me/8617727960741?text=${whatsappMessage}`; const relatedProducts = useMemo(() => { return productsCatalog .filter((p) => p.id !== product.id && p.series === product.series) .slice(0, 3); }, [product]); // Highlights fallback const highlights = product.feature_highlights && product.feature_highlights.length >= 2 ? product.feature_highlights : [ { title: 'Aviation 6061-T6 Billet', text: 'Precision CNC machined from single-block aluminum for maximum strength.' }, { title: '100% Lossless Fitment', text: 'Uses original OEM bolt provisions with zero cutting or vehicle drilling.' }, { title: 'Mil-Spec Hard Anodizing', text: 'Electrolytic corrosion and UV-resistant finish for severe trail conditions.' }, { title: 'Off-Road Tested', text: 'Rigid stress-tested across dunes, rock crawls, and high-speed vibrations.' } ]; return (
{/* Lightbox Modal */} {lightboxOpen && (
setLightboxOpen(false)}>
e.stopPropagation()}> {product.name}
)} {/* Breadcrumbs Bar */}
{ e.preventDefault(); go('/'); }}>Home / { e.preventDefault(); go(pages.shop); }}>Shop / { e.preventDefault(); go( product.series === 'NEPT SERIES' ? pages.nept : product.series === 'NEPTR SERIES' ? pages.neptr : pages.more ); }} > {product.series} / {product.name}
✓ Confirmed Fitment: {product.compatibility}
{/* Main 2-Column Showcase */}
{/* Left Column: Gallery */}
setLightboxOpen(true)}> -{product.discount_percent}% OFF {product.series} {`${product.name} {activeImgIndex + 1} / {gallery.length} {gallery.length > 1 && ( <> )}
{/* Thumbnail Strip */} {gallery.length > 1 && (
{gallery.map((img, i) => ( ))}
)} {/* Gallery Trust Badges */}
✓ 4:3 Studio White Clean Shot ✓ CNC Billet Detail Inspected ✓ Real Vehicle Fit Tested
{/* Right Column: Information & Actions */}
{product.series} · RACING & OFF-ROAD SPEC

{product.name}

★★★★★ 5.0 (28 Verified Reviews)
In Stock & Ready to Dispatch
SKU: {product.sku}
{/* Guaranteed Vehicle Fitment Card */}
🚗
Guaranteed Vehicle Fitment {product.compatibility} Direct factory bolt-on · 100% reversible · No drilling or welding required
{/* Price Box */}
{product.price} {product.regular_price} Save ${(product.regular_price_numeric - product.price_numeric).toFixed(2)} (-{product.discount_percent}% OFF)
Import taxes included. Worldwide DHL/FedEx Express shipping calculated at checkout.
{/* 4 Feature Highlights Grid */}
{highlights.map((h, i) => (
✓ {h.title}

{h.text}

))}
{/* Purchase Row */}
{qty}
{/* Direct WhatsApp Ordering */} 💬 Direct Order via WhatsApp (+86-17727960741) {/* Live Stock & Dispatch Pill */}
In Stock: Dispatching within 24h via DHL Express (3-5 days delivery to US/EU).
{/* Guarantees Bar */}
✈️ Global Express DHL / FedEx 3-7 Days
🛡️ 2-Year Warranty Factory Guarantee
🔧 Lossless Fit Zero Drilling Needed
💬 24/7 Support Engineering Team
{/* Section A: Engineered for the Wild 3-Card Dark Banner */}

ENGINEERING EXCELLENCE

Built Around the Rigors of the Wild.

💎

6061-T6 Billet & Carbon Fiber

Milled from single-billet aerospace aluminum blocks and pre-preg carbon fiber for zero flex and maximum torsional rigidity.

🔧

100% Reversible Non-Destructive Fit

Engineered directly against 3D laser-scanned OEM chassis data to utilize existing vehicle screw provisions without drilling.

🛡️

Mil-Spec Type III Hard Anodizing

Electrolytic surface coating impervious to intense UV rays, desert sand blasting, salty mud, and trail abrasions.

{/* Section B: Tabs Section */}
{activeTab === 'desc' && (
{product.cleaned_description ? (
) : ( <>

{product.name} is precision-machined by MUYE INDUSTRY for demanding off-road conditions. Designed with strict attention to tolerance, structural strength, and seamless aesthetic integration with your vehicle's factory bodylines.

Constructed from high-grade CNC billet aluminum and autoclave-cured carbon fiber, this modification provides enhanced durability, trail readiness, and distinct mechanical styling.

  • Engineered for high stress resistance during overland expeditions.
  • Finished with UV-resistant anodized coating to withstand desert sun and trail debris.
  • Zero drilling or cutting required for standard vehicle models.
)}
)} {activeTab === 'specs' && (
Brand MUYE INDUSTRY (MUYE CNC)
Series {product.series}
Product SKU {product.sku}
Compatible Vehicle {product.compatibility}
Construction Material {product.material}
Surface Finish Type III Hard-Anodized Matte Black / UV-Protected Clear Coat
Mounting Provision Direct OEM Factory Anchor Points (Lossless Installation)
Package Contents 1 × {product.name}, 1 × Complete Stainless Steel Hardware Pack, 1 × Protective Gasket Set
Manufacturer Warranty 2-Year Limited Global Warranty
)} {activeTab === 'install' && (

Non-Destructive Installation Instructions

All MUYE INDUSTRY components are designed for 100% reversible, non-destructive installation:

  1. Preparation: Clean vehicle mounting area with isopropyl alcohol. Ensure no dust, grease or moisture remains.
  2. Hardware Alignment: Test fit the bracket or accessory against factory mounting holes without tightening screws completely.
  3. Gasket Placement: Place the included protective rubber gaskets between aluminum brackets and vehicle body paint to prevent scratches.
  4. Torque Down: Tighten stainless steel mounting hardware evenly using hand tools. Do not overtighten with impact wrenches.
  5. Inspection: Check tightness after the first 50 miles of off-road driving.
)} {activeTab === 'shipping' && (

Worldwide Express Delivery

We ship worldwide directly from our Shenzhen manufacturing facility via DHL Express, FedEx, and UPS.

  • Order Processing: Orders are verified and packaged within 24-48 business hours.
  • Delivery Times: North America & Europe: 3–7 business days; Australia & Asia: 3–5 business days.
  • Tracking: Complete real-time tracking number provided upon dispatch.
  • Returns: 30-day money-back guarantee for unused items in original packaging.
)}
{/* Section C: Real Vehicle Installation Showcase Lookbook */} {lookbookImages.length > 0 && (

FIELD TESTED

Real Vehicle Installation Showcase

{lookbookImages.map((src, i) => (
{ const idx = gallery.indexOf(src); if (idx !== -1) setActiveImgIndex(idx); setLightboxOpen(true); }} > {`${product.name}
))}
)} {/* Section D: Related Products Section */} {relatedProducts.length > 0 && (

EXPLORE MORE

Related From {product.series}

{relatedProducts.map((p) => ( ))}
)}
); } function BlogArticle({ post, path }) { const currentPost = post || postsCatalog.find( (p) => p.url === path || p.slug === path.replace(/^\//, '').replace(/\/$/, '') || `/blog/${p.slug}/` === path ) || postsCatalog[0]; const related = useMemo(() => { return postsCatalog .filter((p) => p.id !== currentPost.id) .slice(0, 3); }, [currentPost]); const currentIndex = postsCatalog.findIndex((p) => p.id === currentPost.id); const prevPost = currentIndex > 0 ? postsCatalog[currentIndex - 1] : null; const nextPost = currentIndex < postsCatalog.length - 1 ? postsCatalog[currentIndex + 1] : null; return (
{/* 1. Breadcrumbs */}
{/* 2. Article Header */}
{currentPost.category} {currentPost.read_time}

{currentPost.title}

M
MUYE Industry Editorial Published on {currentPost.date}
{/* 3. Hero Feature Image */} {currentPost.image && (
{currentPost.title}
)} {/* 4. Article Body Content */} {/* 5. Related Articles Grid */} {related.length > 0 && (

KEEP EXPLORING

Related Stories

{related.map((post) => ( ))}
)} {/* 6. Bottom Call to Action */}

Equip Your Rig with MUYE Precision Upgrades

Explore aviation-grade CNC aluminum and authentic carbon fiber accessories engineered specifically for severe off-road conditions.

{ e.preventDefault(); go('/shop-2/'); }}> Explore Collection ↗
); } /* =================================================== PAYMENT & CART HELPERS =================================================== */ function normalizeCartItem(product) { if (Array.isArray(product)) { const priceNum = parseFloat(String(product[3]).replace(/[^0-9.]/g, '')) || 249; return { id: product[0], name: product[0], price: product[3], priceNum: priceNum, image: product[1], slug: product[0].toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, ''), quantity: 1, }; } const priceNum = parseFloat(String(product.price || product.price_usd || '0').replace(/[^0-9.]/g, '')) || 199; return { id: product.id || product.slug || product.name, name: product.name, price: product.price || `$${priceNum.toFixed(2)}`, priceNum: priceNum, image: product.hero_white || product.image || (product.gallery && product.gallery[0]) || '/products/handle-1.jpg', slug: product.slug || (product.name ? product.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '') : ''), quantity: product.quantity || 1, }; } function PayPalMonogram({ size = 20 }) { return ( ); } function PaymentBadges() { return (
PayPal VISA Mastercard AMEX Apple Pay
); } /* =================================================== OFF-CANVAS CART DRAWER COMPONENT =================================================== */ function CartDrawer({ isOpen, onClose, cart, onUpdateQty, onRemove, onClear }) { if (!isOpen) return null; const totalQuantity = cart.reduce((sum, item) => sum + (item.quantity || 1), 0); const subtotal = cart.reduce((sum, item) => sum + item.priceNum * (item.quantity || 1), 0); const freeShippingThreshold = 500; const progressPercent = Math.min(100, Math.round((subtotal / freeShippingThreshold) * 100)); return (
); } /* =================================================== DEDICATED CART PAGE COMPONENT (/cart/) =================================================== */ function CartPage({ cart, onUpdateQty, onRemove, onClear }) { const [couponCode, setCouponCode] = useState(''); const [appliedCoupon, setAppliedCoupon] = useState(null); const [couponError, setCouponError] = useState(''); const [orderNote, setOrderNote] = useState(''); const subtotal = cart.reduce((sum, item) => sum + item.priceNum * (item.quantity || 1), 0); const totalQty = cart.reduce((sum, item) => sum + (item.quantity || 1), 0); const discount = useMemo(() => { if (!appliedCoupon) return 0; if (appliedCoupon.type === 'percent') return (subtotal * appliedCoupon.val) / 100; if (appliedCoupon.type === 'fixed') return Math.min(subtotal, appliedCoupon.val); return 0; }, [appliedCoupon, subtotal]); const shipping = subtotal >= 500 ? 0 : (appliedCoupon?.freeShip ? 0 : (subtotal > 0 ? 25 : 0)); const estimatedTotal = Math.max(0, subtotal - discount + shipping); const applyCoupon = (e) => { e.preventDefault(); setCouponError(''); const code = couponCode.trim().toUpperCase(); if (!code) return; if (code === 'MUYE10') { setAppliedCoupon({ code: 'MUYE10', type: 'percent', val: 10, label: '10% OFF Special' }); setCouponCode(''); } else if (code === 'OFFROAD50') { if (subtotal < 200) { setCouponError('Minimum order of $200 required for OFFROAD50.'); return; } setAppliedCoupon({ code: 'OFFROAD50', type: 'fixed', val: 50, label: '$50 Off' }); setCouponCode(''); } else if (code === 'FREESHIP') { setAppliedCoupon({ code: 'FREESHIP', type: 'fixed', val: 0, freeShip: true, label: 'Free Express Shipping' }); setCouponCode(''); } else { setCouponError('Invalid coupon code. Try MUYE10 for 10% off.'); } }; return (
{/* Breadcrumbs */}

SHOPPING CART

{totalQty} item{totalQty > 1 ? 's' : ''}
{cart.length === 0 ? (
🛒

YOUR SHOPPING CART IS EMPTY

You have no items in your cart. Explore our military-grade CNC parts and custom off-road equipment.

) : (
{/* Left Column: Items Table & Actions */}
{cart.map((item) => ( ))}
PRODUCT PRICE QUANTITY SUBTOTAL
${item.priceNum.toFixed(2)}
{item.quantity}
${(item.priceNum * (item.quantity || 1)).toFixed(2)}
{/* Bottom Row: Coupon & Order Note */}
setCouponCode(e.target.value)} className="coupon-input" />
{appliedCoupon && (
✓ {appliedCoupon.code} applied ({appliedCoupon.label})
)} {couponError &&

{couponError}

}
{/* Special Instructions */}