VNC Logistics – Professional International Logistics Services<\/title>\n <meta name=\"description\" content=\"VNC Logistics provides comprehensive international shipping and logistics solutions including import\/export agency, foreign exchange, customs clearance, and international transport services.\">\n <script src=\"https:\/\/unpkg.com\/react@18.3.1\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18.3.1\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide-react@0.344.0\/dist\/umd\/lucide-react.js\"><\/script>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n <script>\n \/\/ Language Context\n const LanguageContext = React.createContext();\n \n const LanguageProvider = ({ children }) => {\n const [language, setLanguage] = React.useState('en');\n return React.createElement(LanguageContext.Provider, { value: { language, setLanguage } }, children);\n };\n\n const useLanguage = () => {\n const context = React.useContext(LanguageContext);\n if (context === undefined) {\n throw new Error('useLanguage must be used within a LanguageProvider');\n }\n return context;\n };\n\n \/\/ Navigation Items\n const navItems = [\n {\n label: {\n en: 'Home',\n vi: 'Trang ch\u1ee7',\n },\n href: '\/',\n },\n {\n label: {\n en: 'Import\/Export Agency',\n vi: '\u0110\u1ea1i l\u00fd xu\u1ea5t nh\u1eadp kh\u1ea9u',\n },\n href: 'https:\/\/vnclogistic.com\/?page_id=27',\n },\n {\n label: {\n en: 'Foreign Exchange',\n vi: 'Ngo\u1ea1i h\u1ed1i',\n },\n href: '\/services\/foreign-exchange',\n },\n {\n label: {\n en: 'Customs & Inspection',\n vi: 'H\u1ea3i quan & Ki\u1ec3m tra',\n },\n href: '\/services\/customs',\n },\n {\n label: {\n en: 'International Transport',\n vi: 'V\u1eadn t\u1ea3i qu\u1ed1c t\u1ebf',\n },\n href: '\/services\/transport',\n },\n {\n label: {\n en: 'Contact',\n vi: 'Li\u00ean h\u1ec7',\n },\n href: 'https:\/\/vnclogistic.com\/?page_id=75',\n },\n ];\n\n \/\/ Services Data\n const services = [\n {\n id: 'import-export',\n title: {\n en: 'Import\/Export Agency',\n vi: '\u0110\u1ea1i l\u00fd xu\u1ea5t nh\u1eadp kh\u1ea9u',\n },\n description: {\n en: 'Complete international trade solutions including documentation, compliance, and regulatory guidance for businesses of all sizes.',\n vi: 'Gi\u1ea3i ph\u00e1p th\u01b0\u01a1ng m\u1ea1i qu\u1ed1c t\u1ebf to\u00e0n di\u1ec7n bao g\u1ed3m t\u00e0i li\u1ec7u, tu\u00e2n th\u1ee7 v\u00e0 h\u01b0\u1edbng d\u1eabn quy \u0111\u1ecbnh cho c\u00e1c doanh nghi\u1ec7p thu\u1ed9c m\u1ecdi quy m\u00f4.',\n },\n icon: ' \ud83d\udce6',\n },\n {\n id: 'foreign-exchange',\n title: {\n en: 'Foreign Exchange',\n vi: 'Ngo\u1ea1i h\u1ed1i',\n },\n description: {\n en: 'Secure and efficient international payment solutions with competitive exchange rates and minimal transaction fees.',\n vi: 'Gi\u1ea3i ph\u00e1p thanh to\u00e1n qu\u1ed1c t\u1ebf an to\u00e0n v\u00e0 hi\u1ec7u qu\u1ea3 v\u1edbi t\u1ef7 gi\u00e1 h\u1ed1i \u0111o\u00e1i c\u1ea1nh tranh v\u00e0 ph\u00ed giao d\u1ecbch t\u1ed1i thi\u1ec3u.',\n },\n icon: '\ud83d\udcb2',\n },\n {\n id: 'customs',\n title: {\n en: 'Customs & Inspection',\n vi: 'H\u1ea3i quan & Ki\u1ec3m tra',\n },\n description: {\n en: 'Expert customs clearance and inspection services ensuring smooth passage of goods through border controls with all necessary documentation.',\n vi: 'D\u1ecbch v\u1ee5 th\u00f4ng quan v\u00e0 ki\u1ec3m tra chuy\u00ean nghi\u1ec7p \u0111\u1ea3m b\u1ea3o h\u00e0ng h\u00f3a th\u00f4ng qua ki\u1ec3m so\u00e1t bi\u00ean gi\u1edbi su\u00f4n s\u1ebb v\u1edbi \u0111\u1ea7y \u0111\u1ee7 gi\u1ea5y t\u1edd c\u1ea7n thi\u1ebft.',\n },\n icon: '\ud83d\udccb',\n },\n {\n id: 'transport',\n title: {\n en: 'International Transport',\n vi: 'V\u1eadn t\u1ea3i qu\u1ed1c t\u1ebf',\n },\n description: {\n en: 'Comprehensive logistics solutions including air, sea, and land freight with real-time tracking and delivery optimization.',\n vi: 'Gi\u1ea3i ph\u00e1p h\u1eadu c\u1ea7n to\u00e0n di\u1ec7n bao g\u1ed3m v\u1eadn chuy\u1ec3n \u0111\u01b0\u1eddng h\u00e0ng kh\u00f4ng, \u0111\u01b0\u1eddng bi\u1ec3n v\u00e0 \u0111\u01b0\u1eddng b\u1ed9 v\u1edbi theo d\u00f5i th\u1eddi gian th\u1ef1c v\u00e0 t\u1ed1i \u01b0u h\u00f3a giao h\u00e0ng.',\n },\n icon: '\u2693',\n },\n ];\n\n \/\/ Testimonials Data\n const testimonials = [\n {\n id: '1',\n name: 'Sarah Johnson',\n company: 'Germany Company',\n content: {\n en: 'VNC Logistics has transformed our international shipping process. Their attention to detail and expert knowledge of customs procedures has saved us both time and money.',\n vi: 'VNC Logistics \u0111\u00e3 c\u1ea3i thi\u1ec7n quy tr\u00ecnh v\u1eadn chuy\u1ec3n qu\u1ed1c t\u1ebf c\u1ee7a ch\u00fang t\u00f4i. S\u1ef1 ch\u00fa \u00fd \u0111\u1ebfn chi ti\u1ebft v\u00e0 ki\u1ebfn th\u1ee9c chuy\u00ean m\u00f4n v\u1ec1 th\u1ee7 t\u1ee5c h\u1ea3i quan \u0111\u00e3 gi\u00fap ch\u00fang t\u00f4i ti\u1ebft ki\u1ec7m c\u1ea3 th\u1eddi gian v\u00e0 ti\u1ec1n b\u1ea1c.',\n },\n },\n {\n id: '2',\n name: 'David Chen',\n company: 'China Supplier',\n content: {\n en: 'We have been working with VNC for over 5 years now and they consistently provide reliable and efficient logistics services for our sensitive electronics shipments.',\n vi: 'Ch\u00fang t\u00f4i \u0111\u00e3 l\u00e0m vi\u1ec7c v\u1edbi VNC h\u01a1n 5 n\u0103m v\u00e0 h\u1ecd li\u00ean t\u1ee5c cung c\u1ea5p d\u1ecbch v\u1ee5 h\u1eadu c\u1ea7n \u0111\u00e1ng tin c\u1eady v\u00e0 hi\u1ec7u qu\u1ea3 cho c\u00e1c l\u00f4 h\u00e0ng \u0111i\u1ec7n t\u1eed nh\u1ea1y c\u1ea3m c\u1ee7a ch\u00fang t\u00f4i.',\n },\n },\n {\n id: '3',\n name: 'Minh Nguyen',\n company: 'VN Manufacturing',\n content: {\n en: 'As a growing manufacturing business, we needed a logistics partner who understood our unique challenges. VNC has proven to be that partner, helping us expand our international reach.',\n vi: 'L\u00e0 m\u1ed9t doanh nghi\u1ec7p s\u1ea3n xu\u1ea5t \u0111ang ph\u00e1t tri\u1ec3n, ch\u00fang t\u00f4i c\u1ea7n m\u1ed9t \u0111\u1ed1i t\u00e1c h\u1eadu c\u1ea7n hi\u1ec3u \u0111\u01b0\u1ee3c nh\u1eefng th\u00e1ch th\u1ee9c \u0111\u1ed9c \u0111\u00e1o c\u1ee7a ch\u00fang t\u00f4i. VNC \u0111\u00e3 ch\u1ee9ng minh l\u00e0 \u0111\u1ed1i t\u00e1c \u0111\u00f3, gi\u00fap ch\u00fang t\u00f4i m\u1edf r\u1ed9ng t\u1ea7m v\u1edbi qu\u1ed1c t\u1ebf.',\n },\n },\n ];\n\n \/\/ Components\n const Header = () => {\n const { language, setLanguage } = useLanguage();\n const [isOpen, setIsOpen] = React.useState(false);\n\n return React.createElement('header', { className: 'sticky top-0 z-50 bg-white shadow-md transition-all duration-300' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'flex justify-between items-center py-4' },\n React.createElement('div', { className: 'flex items-center' },\n React.createElement('div', { className: 'text-2xl font-bold text-blue-800' },\n React.createElement('span', { className: 'text-orange-500' }, 'VNC'),\n ' Logistic'\n )\n ),\n React.createElement('nav', { className: 'hidden md:flex space-x-6' },\n navItems.map((item, index) =>\n React.createElement('a', {\n key: index,\n href: item.href,\n className: 'text-gray-700 hover:text-blue-800 transition-colors font-medium'\n }, item.label[language])\n )\n ),\n React.createElement('div', { className: 'hidden md:flex items-center space-x-2' },\n React.createElement('button', {\n onClick: () => setLanguage('en'),\n className: `px-2 py-1 rounded transition-colors ${\n language === 'en'\n ? 'bg-blue-100 text-blue-800'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`\n }, 'EN'),\n React.createElement('button', {\n onClick: () => setLanguage('vi'),\n className: `px-2 py-1 rounded transition-colors ${\n language === 'vi'\n ? 'bg-blue-100 text-blue-800'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`\n }, 'VI')\n ),\n React.createElement('div', { className: 'md:hidden flex items-center' },\n React.createElement('button', {\n type: 'button',\n className: 'inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-800 hover:bg-gray-100 focus:outline-none',\n onClick: () => setIsOpen(!isOpen)\n }, isOpen ? 'Close' : 'Menu')\n )\n ),\n isOpen && React.createElement('div', { className: 'md:hidden bg-white border-t border-gray-200' },\n React.createElement('div', { className: 'px-2 pt-2 pb-3 space-y-1 sm:px-3' },\n navItems.map((item, index) =>\n React.createElement('a', {\n key: index,\n href: item.href,\n className: 'block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-800 hover:bg-blue-50',\n onClick: () => setIsOpen(false)\n }, item.label[language])\n ),\n React.createElement('div', { className: 'flex items-center space-x-2 px-3 py-2' },\n React.createElement('button', {\n onClick: () => setLanguage('en'),\n className: `px-2 py-1 rounded transition-colors ${\n language === 'en'\n ? 'bg-blue-100 text-blue-800'\n : 'bg-gray-100 text-gray-700'\n }`\n }, 'English'),\n React.createElement('button', {\n onClick: () => setLanguage('vi'),\n className: `px-2 py-1 rounded transition-colors ${\n language === 'vi'\n ? 'bg-blue-100 text-blue-800'\n : 'bg-gray-100 text-gray-700'\n }`\n }, 'Ti\u1ebfng Vi\u1ec7t')\n )\n )\n )\n )\n );\n };\n\n const Footer = () => {\n const { language } = useLanguage();\n \n const content = {\n en: {\n companyInfo: 'VNC Logistics provides full-service international shipping and logistics solutions for businesses of all sizes.',\n address: 'Tianfu New District, ChengDu, Sichuan, China',\n contact: 'Contact Us',\n services: 'Our Services',\n hours: 'Working Hours',\n hoursDetail: 'Monday to Friday: 8:00 AM - 6:00 PM | Saturday: 8:00 AM - 12:00 PM',\n copyright: '\u00a9 2025 VNC Logistics. All rights reserved.',\n },\n vi: {\n companyInfo: 'VNC Logistics cung c\u1ea5p c\u00e1c gi\u1ea3i ph\u00e1p v\u1eadn chuy\u1ec3n v\u00e0 h\u1eadu c\u1ea7n qu\u1ed1c t\u1ebf to\u00e0n di\u1ec7n cho c\u00e1c doanh nghi\u1ec7p thu\u1ed9c m\u1ecdi quy m\u00f4.',\n address: 'Tianfu New District, ChengDu, Sichuan, China',\n contact: 'Li\u00ean h\u1ec7 v\u1edbi ch\u00fang t\u00f4i',\n services: 'D\u1ecbch v\u1ee5 c\u1ee7a ch\u00fang t\u00f4i',\n hours: 'Gi\u1edd l\u00e0m vi\u1ec7c',\n hoursDetail: 'Th\u1ee9 Hai \u0111\u1ebfn Th\u1ee9 S\u00e1u: 8:00 - 18:00 | Th\u1ee9 B\u1ea3y: 8:00 - 12:00',\n copyright: '\u00a9 2025 VNC Logistics. B\u1ea3o l\u01b0u m\u1ecdi quy\u1ec1n.',\n }\n };\n\n return React.createElement('footer', { className: 'bg-blue-900 text-white' },\n React.createElement('div', { className: 'max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-3 gap-10' },\n React.createElement('div', null,\n React.createElement('div', { className: 'text-2xl font-bold mb-4' },\n React.createElement('span', { className: 'text-orange-400' }, 'VNC'),\n ' Logistic'\n ),\n React.createElement('p', { className: 'text-blue-100 mb-6' },\n content[language].companyInfo\n ),\n React.createElement('div', { className: 'flex items-start space-x-2 mb-2' },\n React.createElement('span', { className: 'text-blue-100' },\n content[language].address\n )\n )\n ),\n React.createElement('div', null,\n React.createElement('h3', { className: 'text-xl font-semibold mb-4' },\n content[language].contact\n ),\n React.createElement('div', { className: 'space-y-3' },\n React.createElement('div', { className: 'flex items-center space-x-3' },\n React.createElement('div', null,\n React.createElement('p', null, 'Vietnam: +84 943 855 995 (Zalo)'),\n React.createElement('p', null, 'China: +86 156 8062 6288'),\n React.createElement('p', null, 'WeChat: 16623337551')\n )\n ),\n React.createElement('div', { className: 'flex items-center space-x-3' },\n React.createElement('span', null, 'info.vnclogistic@gmail.com')\n ),\n React.createElement('div', { className: 'flex items-center space-x-3' },\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium' },\n content[language].hours\n ),\n React.createElement('p', { className: 'text-blue-200 text-sm' },\n content[language].hoursDetail\n )\n )\n )\n )\n ),\n React.createElement('div', null,\n React.createElement('h3', { className: 'text-xl font-semibold mb-4' },\n content[language].services\n ),\n React.createElement('ul', { className: 'space-y-2' },\n React.createElement('li', null,\n React.createElement('a', {\n href: '\/services\/import-export',\n className: 'text-blue-100 hover:text-white transition-colors'\n }, language === 'en' ? 'Import\/Export Agency' : '\u0110\u1ea1i l\u00fd xu\u1ea5t nh\u1eadp kh\u1ea9u')\n ),\n React.createElement('li', null,\n React.createElement('a', {\n href: '\/services\/foreign-exchange',\n className: 'text-blue-100 hover:text-white transition-colors'\n }, language === 'en' ? 'Foreign Exchange' : 'Ngo\u1ea1i h\u1ed1i')\n ),\n React.createElement('li', null,\n React.createElement('a', {\n href: '\/services\/customs',\n className: 'text-blue-100 hover:text-white transition-colors'\n }, language === 'en' ? 'Customs & Inspection' : 'H\u1ea3i quan & Ki\u1ec3m tra')\n ),\n React.createElement('li', null,\n React.createElement('a', {\n href: '\/services\/transport',\n className: 'text-blue-100 hover:text-white transition-colors'\n }, language === 'en' ? 'International Transport' : 'V\u1eadn t\u1ea3i qu\u1ed1c t\u1ebf')\n )\n )\n )\n ),\n React.createElement('div', { className: 'border-t border-blue-800 mt-10 pt-6 text-center text-blue-200' },\n content[language].copyright\n )\n )\n );\n };\n\n const HeroSection = () => {\n const { language } = useLanguage();\n\n const content = {\n en: {\n title: 'Global Logistics Solutions',\n subtitle: 'Expert International Shipping & Logistics',\n description: 'We provide comprehensive logistics services to help your business navigate the complexities of global trade with confidence.',\n cta: 'Get a Quote',\n secondaryCta: 'Learn More',\n },\n vi: {\n title: 'Gi\u1ea3i ph\u00e1p H\u1eadu c\u1ea7n To\u00e0n c\u1ea7u',\n subtitle: 'V\u1eadn chuy\u1ec3n & H\u1eadu c\u1ea7n Qu\u1ed1c t\u1ebf Chuy\u00ean nghi\u1ec7p',\n description: 'Ch\u00fang t\u00f4i cung c\u1ea5p d\u1ecbch v\u1ee5 h\u1eadu c\u1ea7n to\u00e0n di\u1ec7n \u0111\u1ec3 gi\u00fap doanh nghi\u1ec7p c\u1ee7a b\u1ea1n v\u01b0\u1ee3t qua nh\u1eefng ph\u1ee9c t\u1ea1p c\u1ee7a th\u01b0\u01a1ng m\u1ea1i to\u00e0n c\u1ea7u m\u1ed9t c\u00e1ch t\u1ef1 tin.',\n cta: 'Nh\u1eadn B\u00e1o gi\u00e1',\n secondaryCta: 'T\u00ecm hi\u1ec3u th\u00eam',\n },\n };\n\n return React.createElement('div', { className: 'relative bg-gradient-to-r from-blue-900 to-blue-700 overflow-hidden' },\n React.createElement('div', {\n className: 'absolute inset-0 opacity-20 bg-[url(\"https:\/\/images.pexels.com\/photos\/2226458\/pexels-photo-2226458.jpeg?auto=compress&cs=tinysrgb&w=1600\")] bg-cover bg-center'\n }),\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative' },\n React.createElement('div', { className: 'py-20 md:py-28 lg:py-32' },\n React.createElement('div', { className: 'max-w-2xl' },\n React.createElement('span', {\n className: 'inline-block px-3 py-1 mb-4 text-xs font-semibold tracking-wider text-blue-100 uppercase bg-blue-800 bg-opacity-50 rounded-full'\n }, content[language].subtitle),\n React.createElement('h1', {\n className: 'text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight'\n }, content[language].title),\n React.createElement('p', {\n className: 'text-xl text-blue-100 mb-8 max-w-lg'\n }, content[language].description),\n React.createElement('div', { className: 'flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4' },\n React.createElement('a', {\n href: '\/contact',\n className: 'px-6 py-3 text-center font-medium bg-orange-500 hover:bg-orange-600 text-white rounded-md transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1 duration-200'\n }, content[language].cta),\n React.createElement('a', {\n href: '#services',\n className: 'px-6 py-3 text-center font-medium bg-transparent hover:bg-blue-800 border border-white text-white rounded-md transition-colors'\n }, content[language].secondaryCta)\n )\n )\n )\n )\n );\n };\n\n const ServiceCard = ({ service }) => {\n const { language } = useLanguage();\n \n return React.createElement('div', { className: 'bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300 flex flex-col h-full' },\n React.createElement('div', { className: 'p-6' },\n React.createElement('div', { className: 'w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4' },\n React.createElement('span', { className: 'text-blue-800' }, service.icon)\n ),\n React.createElement('h3', { className: 'text-xl font-semibold text-gray-900 mb-2' },\n service.title[language]\n ),\n React.createElement('p', { className: 'text-gray-600 mb-4 flex-grow' },\n service.description[language]\n ),\n React.createElement('a', {\n href: `\/services\/${service.id}`,\n className: 'inline-flex items-center text-blue-700 hover:text-blue-800 font-medium'\n },\n language === 'en' ? 'Learn more' : 'T\u00ecm hi\u1ec3u th\u00eam',\n React.createElement('svg', {\n className: 'w-4 h-4 ml-1',\n fill: 'none',\n stroke: 'currentColor',\n viewBox: '0 0 24 24',\n xmlns: 'http:\/\/www.w3.org\/2000\/svg'\n },\n React.createElement('path', {\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n strokeWidth: 2,\n d: 'M9 5l7 7-7 7'\n })\n )\n )\n )\n );\n };\n\n const ServiceSection = () => {\n const { language } = useLanguage();\n\n const title = language === 'en' ? 'Our Services' : 'D\u1ecbch v\u1ee5 c\u1ee7a ch\u00fang t\u00f4i';\n const subtitle = language === 'en'\n ? 'Comprehensive logistics solutions for your business needs'\n : 'Gi\u1ea3i ph\u00e1p h\u1eadu c\u1ea7n to\u00e0n di\u1ec7n cho nhu c\u1ea7u kinh doanh c\u1ee7a b\u1ea1n';\n\n return React.createElement('section', { id: 'services', className: 'py-16 bg-gray-50' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'text-center mb-12' },\n React.createElement('h2', { className: 'text-3xl md:text-4xl font-bold text-gray-900 mb-4' },\n title\n ),\n React.createElement('p', { className: 'text-xl text-gray-600 max-w-3xl mx-auto' },\n subtitle\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8' },\n services.map(service =>\n React.createElement(ServiceCard, { key: service.id, service: service })\n )\n )\n )\n );\n };\n\n const AboutSection = () => {\n const { language } = useLanguage();\n\n const content = {\n en: {\n title: 'About VNC Logistics',\n subtitle: 'Your Trusted Partner in Global Logistics',\n description: 'With over 15 years of experience in international logistics, VNC Logistics has established itself as a leader in the industry. We combine local expertise with global capabilities to provide seamless logistics solutions for businesses across all sectors.',\n stats: [\n { value: '15+', label: 'Years Experience' },\n { value: '50+', label: 'Countries Served' },\n { value: '1000+', label: 'Satisfied Clients' },\n { value: '24\/7', label: 'Customer Support' },\n ],\n },\n vi: {\n title: 'V\u1ec1 VNC Logistics',\n subtitle: '\u0110\u1ed1i t\u00e1c \u0110\u00e1ng tin c\u1eady c\u1ee7a b\u1ea1n trong H\u1eadu c\u1ea7n To\u00e0n c\u1ea7u',\n description: 'V\u1edbi h\u01a1n 15 n\u0103m kinh nghi\u1ec7m trong l\u0129nh v\u1ef1c h\u1eadu c\u1ea7n qu\u1ed1c t\u1ebf, VNC Logistics \u0111\u00e3 kh\u1eb3ng \u0111\u1ecbnh v\u1ecb th\u1ebf l\u00e0 nh\u00e0 l\u00e3nh \u0111\u1ea1o trong ng\u00e0nh. Ch\u00fang t\u00f4i k\u1ebft h\u1ee3p chuy\u00ean m\u00f4n \u0111\u1ecba ph\u01b0\u01a1ng v\u1edbi kh\u1ea3 n\u0103ng to\u00e0n c\u1ea7u \u0111\u1ec3 cung c\u1ea5p gi\u1ea3i ph\u00e1p h\u1eadu c\u1ea7n li\u1ec1n m\u1ea1ch cho c\u00e1c doanh nghi\u1ec7p thu\u1ed9c m\u1ecdi l\u0129nh v\u1ef1c.',\n stats: [\n { value: '15+', label: 'N\u0103m Kinh nghi\u1ec7m' },\n { value: '50+', label: 'Qu\u1ed1c gia Ph\u1ee5c v\u1ee5' },\n { value: '1000+', label: 'Kh\u00e1ch h\u00e0ng H\u00e0i l\u00f2ng' },\n { value: '24\/7', label: 'H\u1ed7 tr\u1ee3 Kh\u00e1ch h\u00e0ng' },\n ],\n },\n };\n\n return React.createElement('section', { id: 'about', className: 'py-16 bg-white' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'text-center mb-12' },\n React.createElement('h2', { className: 'text-3xl md:text-4xl font-bold text-gray-900 mb-4' },\n content[language].title\n ),\n React.createElement('p', { className: 'text-xl text-blue-700 font-medium' },\n content[language].subtitle\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16' },\n React.createElement('div', null,\n React.createElement('p', { className: 'text-lg text-gray-700 mb-8' },\n content[language].description\n ),\n React.createElement('div', { className: 'grid grid-cols-2 md:grid-cols-4 gap-6' },\n content[language].stats.map((stat, index) =>\n React.createElement('div', { key: index, className: 'text-center' },\n React.createElement('div', { className: 'text-3xl md:text-4xl font-bold text-blue-800' },\n stat.value\n ),\n React.createElement('div', { className: 'text-sm text-gray-500' },\n stat.label\n )\n )\n )\n )\n ),\n React.createElement('div', { className: 'rounded-lg overflow-hidden shadow-lg' },\n React.createElement('img', {\n src: 'https:\/\/images.pexels.com\/photos\/1427541\/pexels-photo-1427541.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',\n alt: 'Logistics operations',\n className: 'w-full h-full object-cover'\n })\n )\n )\n )\n );\n };\n\n const TestimonialSection = () => {\n const { language } = useLanguage();\n\n const title = language === 'en' ? 'What Our Clients Say' : 'Kh\u00e1ch h\u00e0ng n\u00f3i g\u00ec v\u1ec1 ch\u00fang t\u00f4i';\n const subtitle = language === 'en'\n ? 'Trusted by businesses worldwide'\n : '\u0110\u01b0\u1ee3c tin t\u01b0\u1edfng b\u1edfi c\u00e1c doanh nghi\u1ec7p tr\u00ean to\u00e0n c\u1ea7u';\n\n return React.createElement('section', { className: 'py-16 bg-blue-50' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'text-center mb-12' },\n React.createElement('h2', { className: 'text-3xl md:text-4xl font-bold text-gray-900 mb-4' },\n title\n ),\n React.createElement('p', { className: 'text-xl text-gray-600 max-w-3xl mx-auto' },\n subtitle\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-3 gap-8' },\n testimonials.map(testimonial =>\n React.createElement('div', {\n key: testimonial.id,\n className: 'bg-white p-6 rounded-lg shadow-md border border-gray-100'\n },\n React.createElement('div', { className: 'flex items-center mb-4' },\n React.createElement('div', {\n className: 'h-12 w-12 rounded-full bg-blue-200 flex items-center justify-center text-xl font-bold text-blue-800'\n }, testimonial.name.charAt(0)),\n React.createElement('div', { className: 'ml-4' },\n React.createElement('h3', { className: 'font-semibold text-lg text-gray-900' },\n testimonial.name\n ),\n React.createElement('p', { className: 'text-sm text-gray-500' },\n testimonial.company\n )\n )\n ),\n React.createElement('p', { className: 'text-gray-700 italic' },\n `\"${testimonial.content[language]}\"`\n )\n )\n )\n )\n )\n );\n };\n\n const ContactSection = () => {\n const { language } = useLanguage();\n const [formStatus, setFormStatus] = React.useState('idle');\n\n const content = {\n en: {\n title: 'Contact Us',\n subtitle: 'Get in touch with our logistics experts',\n name: 'Full Name',\n email: 'Email Address',\n phone: 'Phone Number',\n company: 'Company Name',\n service: 'Service Interested In',\n message: 'Your Message',\n submit: 'Send Message',\n submitting: 'Sending...',\n success: 'Thank you! Your message has been sent. We will contact you shortly.',\n error: 'There was an error sending your message. Please try again later.',\n services: {\n importExport: 'Import\/Export Agency',\n foreignExchange: 'Foreign Exchange',\n customs: 'Customs & Inspection',\n transport: 'International Transport',\n other: 'Other Services'\n }\n },\n vi: {\n title: 'Li\u00ean h\u1ec7 v\u1edbi ch\u00fang t\u00f4i',\n subtitle: 'Li\u00ean h\u1ec7 v\u1edbi c\u00e1c chuy\u00ean gia h\u1eadu c\u1ea7n c\u1ee7a ch\u00fang t\u00f4i',\n name: 'H\u1ecd v\u00e0 t\u00ean',\n email: '\u0110\u1ecba ch\u1ec9 Email',\n phone: 'S\u1ed1 \u0111i\u1ec7n tho\u1ea1i',\n company: 'T\u00ean c\u00f4ng ty',\n service: 'D\u1ecbch v\u1ee5 quan t\u00e2m',\n message: 'Tin nh\u1eafn c\u1ee7a b\u1ea1n',\n submit: 'G\u1eedi tin nh\u1eafn',\n submitting: '\u0110ang g\u1eedi...',\n success: 'C\u1ea3m \u01a1n b\u1ea1n! Tin nh\u1eafn c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eedi. Ch\u00fang t\u00f4i s\u1ebd li\u00ean h\u1ec7 v\u1edbi b\u1ea1n trong th\u1eddi gian s\u1edbm nh\u1ea5t.',\n error: '\u0110\u00e3 x\u1ea3y ra l\u1ed7i khi g\u1eedi tin nh\u1eafn c\u1ee7a b\u1ea1n. Vui l\u00f2ng th\u1eed l\u1ea1i sau.',\n services: {\n importExport: '\u0110\u1ea1i l\u00fd xu\u1ea5t nh\u1eadp kh\u1ea9u',\n foreignExchange: 'Ngo\u1ea1i h\u1ed1i',\n customs: 'H\u1ea3i quan & Ki\u1ec3m tra',\n transport: 'V\u1eadn t\u1ea3i qu\u1ed1c t\u1ebf',\n other: 'D\u1ecbch v\u1ee5 kh\u00e1c'\n }\n },\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n setFormStatus('submitting');\n \n setTimeout(() => {\n setFormStatus('success');\n e.target.reset();\n setTimeout(() => {\n setFormStatus('idle');\n }, 5000);\n }, 1500);\n };\n\n return React.createElement('section', { id: 'contact', className: 'py-16 bg-white' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'text-center mb-12' },\n React.createElement('h2', { className: 'text-3xl md:text-4xl font-bold text-gray-900 mb-4' },\n content[language].title\n ),\n React.createElement('p', { className: 'text-xl text-gray-600 max-w-3xl mx-auto' },\n content[language].subtitle\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 lg:grid-cols-2 gap-12' },\n React.createElement('div', { className: 'bg-blue-900 rounded-lg p-8 text-white' },\n React.createElement('div', { className: 'mb-6' },\n React.createElement('img', {\n src: 'https:\/\/images.pexels.com\/photos\/1117210\/pexels-photo-1117210.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',\n alt: 'Logistics Contact',\n className: 'w-full h-64 object-cover rounded-lg mb-6'\n }),\n React.createElement('h3', { className: 'text-2xl font-bold mb-3' },\n language === 'en' ? 'VNC Logistics Headquarters' : 'Tr\u1ee5 s\u1edf ch\u00ednh VNC Logistics'\n ),\n React.createElement('p', { className: 'text-blue-100 mb-6' },\n language === 'en'\n ? 'Our experienced team is ready to help you with any logistics challenges you face.'\n : '\u0110\u1ed9i ng\u0169 gi\u00e0u kinh nghi\u1ec7m c\u1ee7a ch\u00fang t\u00f4i s\u1eb5n s\u00e0ng gi\u00fap b\u1ea1n v\u1edbi b\u1ea5t k\u1ef3 th\u00e1ch th\u1ee9c h\u1eadu c\u1ea7n n\u00e0o b\u1ea1n g\u1eb7p ph\u1ea3i.'\n ),\n React.createElement('div', { className: 'space-y-4' },\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium text-lg' },\n language === 'en' ? 'Address' : '\u0110\u1ecba ch\u1ec9',\n ':'\n ),\n React.createElement('p', { className: 'text-blue-100' },\n 'Tianfu New District, ChengDu, Sichuan, China'\n )\n ),\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium text-lg' },\n 'Email:'\n ),\n React.createElement('p', { className: 'text-blue-100' },\n 'info.vnclogistic@gmail.com'\n )\n ),\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium text-lg' },\n language === 'en' ? 'Phone (Vietnam)' : '\u0110i\u1ec7n tho\u1ea1i (Vi\u1ec7t Nam)',\n ':'\n ),\n React.createElement('p', { className: 'text-blue-100' },\n '+84 943 855 995 (Zalo)'\n )\n ),\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium text-lg' },\n language === 'en' ? 'Phone (China)' : '\u0110i\u1ec7n tho\u1ea1i (Trung Qu\u1ed1c)',\n ':'\n ),\n React.createElement('p', { className: 'text-blue-100' },\n '+86 156 8062 6288 (WeChat: 16623337551)'\n )\n )\n )\n )\n ),\n React.createElement('div', { className: 'bg-gray-50 rounded-lg p-8 shadow-md border border-gray-200' },\n formStatus === 'success'\n ? React.createElement('div', { className: 'text-center py-8' },\n React.createElement('div', { className: 'bg-green-100 text-green-800 p-4 rounded-lg mb-6' },\n React.createElement('p', { className: 'font-medium' },\n content[language].success\n )\n ),\n React.createElement('button', {\n type: 'button',\n onClick: () => setFormStatus('idle'),\n className: 'px-6 py-2 bg-blue-700 text-white rounded-md hover:bg-blue-800 transition-colors'\n },\n language === 'en' ? 'Send another message' : 'G\u1eedi tin nh\u1eafn kh\u00e1c'\n )\n )\n : React.createElement('form', {\n onSubmit: handleSubmit,\n className: 'space-y-6'\n },\n formStatus === 'error' && React.createElement('div', { className: 'bg-red-100 text-red-800 p-4 rounded-lg' },\n React.createElement('p', null, content[language].error)\n ),\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-2 gap-6' },\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'name',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].name,\n ' *'\n ),\n React.createElement('input', {\n type: 'text',\n id: 'name',\n name: 'name',\n required: true,\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n ),\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'email',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].email,\n ' *'\n ),\n React.createElement('input', {\n type: 'email',\n id: 'email',\n name: 'email',\n required: true,\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-2 gap-6' },\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'phone',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].phone\n ),\n React.createElement('input', {\n type: 'tel',\n id: 'phone',\n name: 'phone',\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n ),\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'company',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].company\n ),\n React.createElement('input', {\n type: 'text',\n id: 'company',\n name: 'company',\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n )\n ),\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'service',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].service\n ),\n React.createElement('select', {\n id: 'service',\n name: 'service',\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n },\n Object.entries(content[language].services).map(([key, value]) =>\n React.createElement('option', { key: key, value: key }, value)\n )\n )\n ),\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'message',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].message,\n ' *'\n ),\n React.createElement('textarea', {\n id: 'message',\n name: 'message',\n rows: 5,\n required: true,\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n ),\n React.createElement('div', null,\n React.createElement('button', {\n type: 'submit',\n disabled: formStatus === 'submitting',\n className: 'w-full px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 disabled:opacity-75'\n },\n formStatus === 'submitting' ? content[language].submitting : content[language].submit\n )\n )\n )\n )\n )\n )\n );\n };\n\n const HomePage = () => {\n return React.createElement('div', null,\n React.createElement(HeroSection),\n React.createElement(ServiceSection),\n React.createElement(AboutSection),\n React.createElement(TestimonialSection),\n React.createElement(ContactSection)\n );\n };\n\n const App = () => {\n return React.createElement(LanguageProvider, null,\n React.createElement('div', { className: 'flex flex-col min-h-screen' },\n React.createElement(Header),\n React.createElement('main', { className: 'flex-grow' },\n React.createElement(HomePage)\n ),\n React.createElement(Footer)\n )\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(React.createElement(React.StrictMode, null,\n React.createElement(App)\n ));\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>VNC Logistics – Professional International Logistics Services<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vnclogistic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":10,"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/vnclogistic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":15,"date":"2025-05-24T10:07:01","date_gmt":"2025-05-24T10:07:01","guid":{"rendered":"https:\/\/vnclogistic.com\/?page_id=15"},"modified":"2025-05-26T16:27:17","modified_gmt":"2025-05-26T16:27:17","slug":"15-2","status":"publish","type":"page","link":"https:\/\/vnclogistic.com\/","title":{"rendered":"Main page"},"content":{"rendered":"\n\n\n\n \n \n VNC Logistics – Professional International Logistics Services<\/title>\n <meta name=\"description\" content=\"VNC Logistics provides comprehensive international shipping and logistics solutions including import\/export agency, foreign exchange, customs clearance, and international transport services.\">\n <script src=\"https:\/\/unpkg.com\/react@18.3.1\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18.3.1\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide-react@0.344.0\/dist\/umd\/lucide-react.js\"><\/script>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n <script>\n \/\/ Language Context\n const LanguageContext = React.createContext();\n \n const LanguageProvider = ({ children }) => {\n const [language, setLanguage] = React.useState('en');\n return React.createElement(LanguageContext.Provider, { value: { language, setLanguage } }, children);\n };\n\n const useLanguage = () => {\n const context = React.useContext(LanguageContext);\n if (context === undefined) {\n throw new Error('useLanguage must be used within a LanguageProvider');\n }\n return context;\n };\n\n \/\/ Navigation Items\n const navItems = [\n {\n label: {\n en: 'Home',\n vi: 'Trang ch\u1ee7',\n },\n href: '\/',\n },\n {\n label: {\n en: 'Import\/Export Agency',\n vi: '\u0110\u1ea1i l\u00fd xu\u1ea5t nh\u1eadp kh\u1ea9u',\n },\n href: 'https:\/\/vnclogistic.com\/?page_id=27',\n },\n {\n label: {\n en: 'Foreign Exchange',\n vi: 'Ngo\u1ea1i h\u1ed1i',\n },\n href: '\/services\/foreign-exchange',\n },\n {\n label: {\n en: 'Customs & Inspection',\n vi: 'H\u1ea3i quan & Ki\u1ec3m tra',\n },\n href: '\/services\/customs',\n },\n {\n label: {\n en: 'International Transport',\n vi: 'V\u1eadn t\u1ea3i qu\u1ed1c t\u1ebf',\n },\n href: '\/services\/transport',\n },\n {\n label: {\n en: 'Contact',\n vi: 'Li\u00ean h\u1ec7',\n },\n href: 'https:\/\/vnclogistic.com\/?page_id=75',\n },\n ];\n\n \/\/ Services Data\n const services = [\n {\n id: 'import-export',\n title: {\n en: 'Import\/Export Agency',\n vi: '\u0110\u1ea1i l\u00fd xu\u1ea5t nh\u1eadp kh\u1ea9u',\n },\n description: {\n en: 'Complete international trade solutions including documentation, compliance, and regulatory guidance for businesses of all sizes.',\n vi: 'Gi\u1ea3i ph\u00e1p th\u01b0\u01a1ng m\u1ea1i qu\u1ed1c t\u1ebf to\u00e0n di\u1ec7n bao g\u1ed3m t\u00e0i li\u1ec7u, tu\u00e2n th\u1ee7 v\u00e0 h\u01b0\u1edbng d\u1eabn quy \u0111\u1ecbnh cho c\u00e1c doanh nghi\u1ec7p thu\u1ed9c m\u1ecdi quy m\u00f4.',\n },\n icon: ' \ud83d\udce6',\n },\n {\n id: 'foreign-exchange',\n title: {\n en: 'Foreign Exchange',\n vi: 'Ngo\u1ea1i h\u1ed1i',\n },\n description: {\n en: 'Secure and efficient international payment solutions with competitive exchange rates and minimal transaction fees.',\n vi: 'Gi\u1ea3i ph\u00e1p thanh to\u00e1n qu\u1ed1c t\u1ebf an to\u00e0n v\u00e0 hi\u1ec7u qu\u1ea3 v\u1edbi t\u1ef7 gi\u00e1 h\u1ed1i \u0111o\u00e1i c\u1ea1nh tranh v\u00e0 ph\u00ed giao d\u1ecbch t\u1ed1i thi\u1ec3u.',\n },\n icon: '\ud83d\udcb2',\n },\n {\n id: 'customs',\n title: {\n en: 'Customs & Inspection',\n vi: 'H\u1ea3i quan & Ki\u1ec3m tra',\n },\n description: {\n en: 'Expert customs clearance and inspection services ensuring smooth passage of goods through border controls with all necessary documentation.',\n vi: 'D\u1ecbch v\u1ee5 th\u00f4ng quan v\u00e0 ki\u1ec3m tra chuy\u00ean nghi\u1ec7p \u0111\u1ea3m b\u1ea3o h\u00e0ng h\u00f3a th\u00f4ng qua ki\u1ec3m so\u00e1t bi\u00ean gi\u1edbi su\u00f4n s\u1ebb v\u1edbi \u0111\u1ea7y \u0111\u1ee7 gi\u1ea5y t\u1edd c\u1ea7n thi\u1ebft.',\n },\n icon: '\ud83d\udccb',\n },\n {\n id: 'transport',\n title: {\n en: 'International Transport',\n vi: 'V\u1eadn t\u1ea3i qu\u1ed1c t\u1ebf',\n },\n description: {\n en: 'Comprehensive logistics solutions including air, sea, and land freight with real-time tracking and delivery optimization.',\n vi: 'Gi\u1ea3i ph\u00e1p h\u1eadu c\u1ea7n to\u00e0n di\u1ec7n bao g\u1ed3m v\u1eadn chuy\u1ec3n \u0111\u01b0\u1eddng h\u00e0ng kh\u00f4ng, \u0111\u01b0\u1eddng bi\u1ec3n v\u00e0 \u0111\u01b0\u1eddng b\u1ed9 v\u1edbi theo d\u00f5i th\u1eddi gian th\u1ef1c v\u00e0 t\u1ed1i \u01b0u h\u00f3a giao h\u00e0ng.',\n },\n icon: '\u2693',\n },\n ];\n\n \/\/ Testimonials Data\n const testimonials = [\n {\n id: '1',\n name: 'Sarah Johnson',\n company: 'Germany Company',\n content: {\n en: 'VNC Logistics has transformed our international shipping process. Their attention to detail and expert knowledge of customs procedures has saved us both time and money.',\n vi: 'VNC Logistics \u0111\u00e3 c\u1ea3i thi\u1ec7n quy tr\u00ecnh v\u1eadn chuy\u1ec3n qu\u1ed1c t\u1ebf c\u1ee7a ch\u00fang t\u00f4i. S\u1ef1 ch\u00fa \u00fd \u0111\u1ebfn chi ti\u1ebft v\u00e0 ki\u1ebfn th\u1ee9c chuy\u00ean m\u00f4n v\u1ec1 th\u1ee7 t\u1ee5c h\u1ea3i quan \u0111\u00e3 gi\u00fap ch\u00fang t\u00f4i ti\u1ebft ki\u1ec7m c\u1ea3 th\u1eddi gian v\u00e0 ti\u1ec1n b\u1ea1c.',\n },\n },\n {\n id: '2',\n name: 'David Chen',\n company: 'China Supplier',\n content: {\n en: 'We have been working with VNC for over 5 years now and they consistently provide reliable and efficient logistics services for our sensitive electronics shipments.',\n vi: 'Ch\u00fang t\u00f4i \u0111\u00e3 l\u00e0m vi\u1ec7c v\u1edbi VNC h\u01a1n 5 n\u0103m v\u00e0 h\u1ecd li\u00ean t\u1ee5c cung c\u1ea5p d\u1ecbch v\u1ee5 h\u1eadu c\u1ea7n \u0111\u00e1ng tin c\u1eady v\u00e0 hi\u1ec7u qu\u1ea3 cho c\u00e1c l\u00f4 h\u00e0ng \u0111i\u1ec7n t\u1eed nh\u1ea1y c\u1ea3m c\u1ee7a ch\u00fang t\u00f4i.',\n },\n },\n {\n id: '3',\n name: 'Minh Nguyen',\n company: 'VN Manufacturing',\n content: {\n en: 'As a growing manufacturing business, we needed a logistics partner who understood our unique challenges. VNC has proven to be that partner, helping us expand our international reach.',\n vi: 'L\u00e0 m\u1ed9t doanh nghi\u1ec7p s\u1ea3n xu\u1ea5t \u0111ang ph\u00e1t tri\u1ec3n, ch\u00fang t\u00f4i c\u1ea7n m\u1ed9t \u0111\u1ed1i t\u00e1c h\u1eadu c\u1ea7n hi\u1ec3u \u0111\u01b0\u1ee3c nh\u1eefng th\u00e1ch th\u1ee9c \u0111\u1ed9c \u0111\u00e1o c\u1ee7a ch\u00fang t\u00f4i. VNC \u0111\u00e3 ch\u1ee9ng minh l\u00e0 \u0111\u1ed1i t\u00e1c \u0111\u00f3, gi\u00fap ch\u00fang t\u00f4i m\u1edf r\u1ed9ng t\u1ea7m v\u1edbi qu\u1ed1c t\u1ebf.',\n },\n },\n ];\n\n \/\/ Components\n const Header = () => {\n const { language, setLanguage } = useLanguage();\n const [isOpen, setIsOpen] = React.useState(false);\n\n return React.createElement('header', { className: 'sticky top-0 z-50 bg-white shadow-md transition-all duration-300' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'flex justify-between items-center py-4' },\n React.createElement('div', { className: 'flex items-center' },\n React.createElement('div', { className: 'text-2xl font-bold text-blue-800' },\n React.createElement('span', { className: 'text-orange-500' }, 'VNC'),\n ' Logistic'\n )\n ),\n React.createElement('nav', { className: 'hidden md:flex space-x-6' },\n navItems.map((item, index) =>\n React.createElement('a', {\n key: index,\n href: item.href,\n className: 'text-gray-700 hover:text-blue-800 transition-colors font-medium'\n }, item.label[language])\n )\n ),\n React.createElement('div', { className: 'hidden md:flex items-center space-x-2' },\n React.createElement('button', {\n onClick: () => setLanguage('en'),\n className: `px-2 py-1 rounded transition-colors ${\n language === 'en'\n ? 'bg-blue-100 text-blue-800'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`\n }, 'EN'),\n React.createElement('button', {\n onClick: () => setLanguage('vi'),\n className: `px-2 py-1 rounded transition-colors ${\n language === 'vi'\n ? 'bg-blue-100 text-blue-800'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`\n }, 'VI')\n ),\n React.createElement('div', { className: 'md:hidden flex items-center' },\n React.createElement('button', {\n type: 'button',\n className: 'inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-blue-800 hover:bg-gray-100 focus:outline-none',\n onClick: () => setIsOpen(!isOpen)\n }, isOpen ? 'Close' : 'Menu')\n )\n ),\n isOpen && React.createElement('div', { className: 'md:hidden bg-white border-t border-gray-200' },\n React.createElement('div', { className: 'px-2 pt-2 pb-3 space-y-1 sm:px-3' },\n navItems.map((item, index) =>\n React.createElement('a', {\n key: index,\n href: item.href,\n className: 'block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-800 hover:bg-blue-50',\n onClick: () => setIsOpen(false)\n }, item.label[language])\n ),\n React.createElement('div', { className: 'flex items-center space-x-2 px-3 py-2' },\n React.createElement('button', {\n onClick: () => setLanguage('en'),\n className: `px-2 py-1 rounded transition-colors ${\n language === 'en'\n ? 'bg-blue-100 text-blue-800'\n : 'bg-gray-100 text-gray-700'\n }`\n }, 'English'),\n React.createElement('button', {\n onClick: () => setLanguage('vi'),\n className: `px-2 py-1 rounded transition-colors ${\n language === 'vi'\n ? 'bg-blue-100 text-blue-800'\n : 'bg-gray-100 text-gray-700'\n }`\n }, 'Ti\u1ebfng Vi\u1ec7t')\n )\n )\n )\n )\n );\n };\n\n const Footer = () => {\n const { language } = useLanguage();\n \n const content = {\n en: {\n companyInfo: 'VNC Logistics provides full-service international shipping and logistics solutions for businesses of all sizes.',\n address: 'Tianfu New District, ChengDu, Sichuan, China',\n contact: 'Contact Us',\n services: 'Our Services',\n hours: 'Working Hours',\n hoursDetail: 'Monday to Friday: 8:00 AM - 6:00 PM | Saturday: 8:00 AM - 12:00 PM',\n copyright: '\u00a9 2025 VNC Logistics. All rights reserved.',\n },\n vi: {\n companyInfo: 'VNC Logistics cung c\u1ea5p c\u00e1c gi\u1ea3i ph\u00e1p v\u1eadn chuy\u1ec3n v\u00e0 h\u1eadu c\u1ea7n qu\u1ed1c t\u1ebf to\u00e0n di\u1ec7n cho c\u00e1c doanh nghi\u1ec7p thu\u1ed9c m\u1ecdi quy m\u00f4.',\n address: 'Tianfu New District, ChengDu, Sichuan, China',\n contact: 'Li\u00ean h\u1ec7 v\u1edbi ch\u00fang t\u00f4i',\n services: 'D\u1ecbch v\u1ee5 c\u1ee7a ch\u00fang t\u00f4i',\n hours: 'Gi\u1edd l\u00e0m vi\u1ec7c',\n hoursDetail: 'Th\u1ee9 Hai \u0111\u1ebfn Th\u1ee9 S\u00e1u: 8:00 - 18:00 | Th\u1ee9 B\u1ea3y: 8:00 - 12:00',\n copyright: '\u00a9 2025 VNC Logistics. B\u1ea3o l\u01b0u m\u1ecdi quy\u1ec1n.',\n }\n };\n\n return React.createElement('footer', { className: 'bg-blue-900 text-white' },\n React.createElement('div', { className: 'max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-3 gap-10' },\n React.createElement('div', null,\n React.createElement('div', { className: 'text-2xl font-bold mb-4' },\n React.createElement('span', { className: 'text-orange-400' }, 'VNC'),\n ' Logistic'\n ),\n React.createElement('p', { className: 'text-blue-100 mb-6' },\n content[language].companyInfo\n ),\n React.createElement('div', { className: 'flex items-start space-x-2 mb-2' },\n React.createElement('span', { className: 'text-blue-100' },\n content[language].address\n )\n )\n ),\n React.createElement('div', null,\n React.createElement('h3', { className: 'text-xl font-semibold mb-4' },\n content[language].contact\n ),\n React.createElement('div', { className: 'space-y-3' },\n React.createElement('div', { className: 'flex items-center space-x-3' },\n React.createElement('div', null,\n React.createElement('p', null, 'Vietnam: +84 943 855 995 (Zalo)'),\n React.createElement('p', null, 'China: +86 156 8062 6288'),\n React.createElement('p', null, 'WeChat: 16623337551')\n )\n ),\n React.createElement('div', { className: 'flex items-center space-x-3' },\n React.createElement('span', null, 'info.vnclogistic@gmail.com')\n ),\n React.createElement('div', { className: 'flex items-center space-x-3' },\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium' },\n content[language].hours\n ),\n React.createElement('p', { className: 'text-blue-200 text-sm' },\n content[language].hoursDetail\n )\n )\n )\n )\n ),\n React.createElement('div', null,\n React.createElement('h3', { className: 'text-xl font-semibold mb-4' },\n content[language].services\n ),\n React.createElement('ul', { className: 'space-y-2' },\n React.createElement('li', null,\n React.createElement('a', {\n href: '\/services\/import-export',\n className: 'text-blue-100 hover:text-white transition-colors'\n }, language === 'en' ? 'Import\/Export Agency' : '\u0110\u1ea1i l\u00fd xu\u1ea5t nh\u1eadp kh\u1ea9u')\n ),\n React.createElement('li', null,\n React.createElement('a', {\n href: '\/services\/foreign-exchange',\n className: 'text-blue-100 hover:text-white transition-colors'\n }, language === 'en' ? 'Foreign Exchange' : 'Ngo\u1ea1i h\u1ed1i')\n ),\n React.createElement('li', null,\n React.createElement('a', {\n href: '\/services\/customs',\n className: 'text-blue-100 hover:text-white transition-colors'\n }, language === 'en' ? 'Customs & Inspection' : 'H\u1ea3i quan & Ki\u1ec3m tra')\n ),\n React.createElement('li', null,\n React.createElement('a', {\n href: '\/services\/transport',\n className: 'text-blue-100 hover:text-white transition-colors'\n }, language === 'en' ? 'International Transport' : 'V\u1eadn t\u1ea3i qu\u1ed1c t\u1ebf')\n )\n )\n )\n ),\n React.createElement('div', { className: 'border-t border-blue-800 mt-10 pt-6 text-center text-blue-200' },\n content[language].copyright\n )\n )\n );\n };\n\n const HeroSection = () => {\n const { language } = useLanguage();\n\n const content = {\n en: {\n title: 'Global Logistics Solutions',\n subtitle: 'Expert International Shipping & Logistics',\n description: 'We provide comprehensive logistics services to help your business navigate the complexities of global trade with confidence.',\n cta: 'Get a Quote',\n secondaryCta: 'Learn More',\n },\n vi: {\n title: 'Gi\u1ea3i ph\u00e1p H\u1eadu c\u1ea7n To\u00e0n c\u1ea7u',\n subtitle: 'V\u1eadn chuy\u1ec3n & H\u1eadu c\u1ea7n Qu\u1ed1c t\u1ebf Chuy\u00ean nghi\u1ec7p',\n description: 'Ch\u00fang t\u00f4i cung c\u1ea5p d\u1ecbch v\u1ee5 h\u1eadu c\u1ea7n to\u00e0n di\u1ec7n \u0111\u1ec3 gi\u00fap doanh nghi\u1ec7p c\u1ee7a b\u1ea1n v\u01b0\u1ee3t qua nh\u1eefng ph\u1ee9c t\u1ea1p c\u1ee7a th\u01b0\u01a1ng m\u1ea1i to\u00e0n c\u1ea7u m\u1ed9t c\u00e1ch t\u1ef1 tin.',\n cta: 'Nh\u1eadn B\u00e1o gi\u00e1',\n secondaryCta: 'T\u00ecm hi\u1ec3u th\u00eam',\n },\n };\n\n return React.createElement('div', { className: 'relative bg-gradient-to-r from-blue-900 to-blue-700 overflow-hidden' },\n React.createElement('div', {\n className: 'absolute inset-0 opacity-20 bg-[url(\"https:\/\/images.pexels.com\/photos\/2226458\/pexels-photo-2226458.jpeg?auto=compress&cs=tinysrgb&w=1600\")] bg-cover bg-center'\n }),\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative' },\n React.createElement('div', { className: 'py-20 md:py-28 lg:py-32' },\n React.createElement('div', { className: 'max-w-2xl' },\n React.createElement('span', {\n className: 'inline-block px-3 py-1 mb-4 text-xs font-semibold tracking-wider text-blue-100 uppercase bg-blue-800 bg-opacity-50 rounded-full'\n }, content[language].subtitle),\n React.createElement('h1', {\n className: 'text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight'\n }, content[language].title),\n React.createElement('p', {\n className: 'text-xl text-blue-100 mb-8 max-w-lg'\n }, content[language].description),\n React.createElement('div', { className: 'flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4' },\n React.createElement('a', {\n href: '\/contact',\n className: 'px-6 py-3 text-center font-medium bg-orange-500 hover:bg-orange-600 text-white rounded-md transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-1 duration-200'\n }, content[language].cta),\n React.createElement('a', {\n href: '#services',\n className: 'px-6 py-3 text-center font-medium bg-transparent hover:bg-blue-800 border border-white text-white rounded-md transition-colors'\n }, content[language].secondaryCta)\n )\n )\n )\n )\n );\n };\n\n const ServiceCard = ({ service }) => {\n const { language } = useLanguage();\n \n return React.createElement('div', { className: 'bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:shadow-xl transition-shadow duration-300 flex flex-col h-full' },\n React.createElement('div', { className: 'p-6' },\n React.createElement('div', { className: 'w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4' },\n React.createElement('span', { className: 'text-blue-800' }, service.icon)\n ),\n React.createElement('h3', { className: 'text-xl font-semibold text-gray-900 mb-2' },\n service.title[language]\n ),\n React.createElement('p', { className: 'text-gray-600 mb-4 flex-grow' },\n service.description[language]\n ),\n React.createElement('a', {\n href: `\/services\/${service.id}`,\n className: 'inline-flex items-center text-blue-700 hover:text-blue-800 font-medium'\n },\n language === 'en' ? 'Learn more' : 'T\u00ecm hi\u1ec3u th\u00eam',\n React.createElement('svg', {\n className: 'w-4 h-4 ml-1',\n fill: 'none',\n stroke: 'currentColor',\n viewBox: '0 0 24 24',\n xmlns: 'http:\/\/www.w3.org\/2000\/svg'\n },\n React.createElement('path', {\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n strokeWidth: 2,\n d: 'M9 5l7 7-7 7'\n })\n )\n )\n )\n );\n };\n\n const ServiceSection = () => {\n const { language } = useLanguage();\n\n const title = language === 'en' ? 'Our Services' : 'D\u1ecbch v\u1ee5 c\u1ee7a ch\u00fang t\u00f4i';\n const subtitle = language === 'en'\n ? 'Comprehensive logistics solutions for your business needs'\n : 'Gi\u1ea3i ph\u00e1p h\u1eadu c\u1ea7n to\u00e0n di\u1ec7n cho nhu c\u1ea7u kinh doanh c\u1ee7a b\u1ea1n';\n\n return React.createElement('section', { id: 'services', className: 'py-16 bg-gray-50' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'text-center mb-12' },\n React.createElement('h2', { className: 'text-3xl md:text-4xl font-bold text-gray-900 mb-4' },\n title\n ),\n React.createElement('p', { className: 'text-xl text-gray-600 max-w-3xl mx-auto' },\n subtitle\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8' },\n services.map(service =>\n React.createElement(ServiceCard, { key: service.id, service: service })\n )\n )\n )\n );\n };\n\n const AboutSection = () => {\n const { language } = useLanguage();\n\n const content = {\n en: {\n title: 'About VNC Logistics',\n subtitle: 'Your Trusted Partner in Global Logistics',\n description: 'With over 15 years of experience in international logistics, VNC Logistics has established itself as a leader in the industry. We combine local expertise with global capabilities to provide seamless logistics solutions for businesses across all sectors.',\n stats: [\n { value: '15+', label: 'Years Experience' },\n { value: '50+', label: 'Countries Served' },\n { value: '1000+', label: 'Satisfied Clients' },\n { value: '24\/7', label: 'Customer Support' },\n ],\n },\n vi: {\n title: 'V\u1ec1 VNC Logistics',\n subtitle: '\u0110\u1ed1i t\u00e1c \u0110\u00e1ng tin c\u1eady c\u1ee7a b\u1ea1n trong H\u1eadu c\u1ea7n To\u00e0n c\u1ea7u',\n description: 'V\u1edbi h\u01a1n 15 n\u0103m kinh nghi\u1ec7m trong l\u0129nh v\u1ef1c h\u1eadu c\u1ea7n qu\u1ed1c t\u1ebf, VNC Logistics \u0111\u00e3 kh\u1eb3ng \u0111\u1ecbnh v\u1ecb th\u1ebf l\u00e0 nh\u00e0 l\u00e3nh \u0111\u1ea1o trong ng\u00e0nh. Ch\u00fang t\u00f4i k\u1ebft h\u1ee3p chuy\u00ean m\u00f4n \u0111\u1ecba ph\u01b0\u01a1ng v\u1edbi kh\u1ea3 n\u0103ng to\u00e0n c\u1ea7u \u0111\u1ec3 cung c\u1ea5p gi\u1ea3i ph\u00e1p h\u1eadu c\u1ea7n li\u1ec1n m\u1ea1ch cho c\u00e1c doanh nghi\u1ec7p thu\u1ed9c m\u1ecdi l\u0129nh v\u1ef1c.',\n stats: [\n { value: '15+', label: 'N\u0103m Kinh nghi\u1ec7m' },\n { value: '50+', label: 'Qu\u1ed1c gia Ph\u1ee5c v\u1ee5' },\n { value: '1000+', label: 'Kh\u00e1ch h\u00e0ng H\u00e0i l\u00f2ng' },\n { value: '24\/7', label: 'H\u1ed7 tr\u1ee3 Kh\u00e1ch h\u00e0ng' },\n ],\n },\n };\n\n return React.createElement('section', { id: 'about', className: 'py-16 bg-white' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'text-center mb-12' },\n React.createElement('h2', { className: 'text-3xl md:text-4xl font-bold text-gray-900 mb-4' },\n content[language].title\n ),\n React.createElement('p', { className: 'text-xl text-blue-700 font-medium' },\n content[language].subtitle\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16' },\n React.createElement('div', null,\n React.createElement('p', { className: 'text-lg text-gray-700 mb-8' },\n content[language].description\n ),\n React.createElement('div', { className: 'grid grid-cols-2 md:grid-cols-4 gap-6' },\n content[language].stats.map((stat, index) =>\n React.createElement('div', { key: index, className: 'text-center' },\n React.createElement('div', { className: 'text-3xl md:text-4xl font-bold text-blue-800' },\n stat.value\n ),\n React.createElement('div', { className: 'text-sm text-gray-500' },\n stat.label\n )\n )\n )\n )\n ),\n React.createElement('div', { className: 'rounded-lg overflow-hidden shadow-lg' },\n React.createElement('img', {\n src: 'https:\/\/images.pexels.com\/photos\/1427541\/pexels-photo-1427541.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',\n alt: 'Logistics operations',\n className: 'w-full h-full object-cover'\n })\n )\n )\n )\n );\n };\n\n const TestimonialSection = () => {\n const { language } = useLanguage();\n\n const title = language === 'en' ? 'What Our Clients Say' : 'Kh\u00e1ch h\u00e0ng n\u00f3i g\u00ec v\u1ec1 ch\u00fang t\u00f4i';\n const subtitle = language === 'en'\n ? 'Trusted by businesses worldwide'\n : '\u0110\u01b0\u1ee3c tin t\u01b0\u1edfng b\u1edfi c\u00e1c doanh nghi\u1ec7p tr\u00ean to\u00e0n c\u1ea7u';\n\n return React.createElement('section', { className: 'py-16 bg-blue-50' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'text-center mb-12' },\n React.createElement('h2', { className: 'text-3xl md:text-4xl font-bold text-gray-900 mb-4' },\n title\n ),\n React.createElement('p', { className: 'text-xl text-gray-600 max-w-3xl mx-auto' },\n subtitle\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-3 gap-8' },\n testimonials.map(testimonial =>\n React.createElement('div', {\n key: testimonial.id,\n className: 'bg-white p-6 rounded-lg shadow-md border border-gray-100'\n },\n React.createElement('div', { className: 'flex items-center mb-4' },\n React.createElement('div', {\n className: 'h-12 w-12 rounded-full bg-blue-200 flex items-center justify-center text-xl font-bold text-blue-800'\n }, testimonial.name.charAt(0)),\n React.createElement('div', { className: 'ml-4' },\n React.createElement('h3', { className: 'font-semibold text-lg text-gray-900' },\n testimonial.name\n ),\n React.createElement('p', { className: 'text-sm text-gray-500' },\n testimonial.company\n )\n )\n ),\n React.createElement('p', { className: 'text-gray-700 italic' },\n `\"${testimonial.content[language]}\"`\n )\n )\n )\n )\n )\n );\n };\n\n const ContactSection = () => {\n const { language } = useLanguage();\n const [formStatus, setFormStatus] = React.useState('idle');\n\n const content = {\n en: {\n title: 'Contact Us',\n subtitle: 'Get in touch with our logistics experts',\n name: 'Full Name',\n email: 'Email Address',\n phone: 'Phone Number',\n company: 'Company Name',\n service: 'Service Interested In',\n message: 'Your Message',\n submit: 'Send Message',\n submitting: 'Sending...',\n success: 'Thank you! Your message has been sent. We will contact you shortly.',\n error: 'There was an error sending your message. Please try again later.',\n services: {\n importExport: 'Import\/Export Agency',\n foreignExchange: 'Foreign Exchange',\n customs: 'Customs & Inspection',\n transport: 'International Transport',\n other: 'Other Services'\n }\n },\n vi: {\n title: 'Li\u00ean h\u1ec7 v\u1edbi ch\u00fang t\u00f4i',\n subtitle: 'Li\u00ean h\u1ec7 v\u1edbi c\u00e1c chuy\u00ean gia h\u1eadu c\u1ea7n c\u1ee7a ch\u00fang t\u00f4i',\n name: 'H\u1ecd v\u00e0 t\u00ean',\n email: '\u0110\u1ecba ch\u1ec9 Email',\n phone: 'S\u1ed1 \u0111i\u1ec7n tho\u1ea1i',\n company: 'T\u00ean c\u00f4ng ty',\n service: 'D\u1ecbch v\u1ee5 quan t\u00e2m',\n message: 'Tin nh\u1eafn c\u1ee7a b\u1ea1n',\n submit: 'G\u1eedi tin nh\u1eafn',\n submitting: '\u0110ang g\u1eedi...',\n success: 'C\u1ea3m \u01a1n b\u1ea1n! Tin nh\u1eafn c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eedi. Ch\u00fang t\u00f4i s\u1ebd li\u00ean h\u1ec7 v\u1edbi b\u1ea1n trong th\u1eddi gian s\u1edbm nh\u1ea5t.',\n error: '\u0110\u00e3 x\u1ea3y ra l\u1ed7i khi g\u1eedi tin nh\u1eafn c\u1ee7a b\u1ea1n. Vui l\u00f2ng th\u1eed l\u1ea1i sau.',\n services: {\n importExport: '\u0110\u1ea1i l\u00fd xu\u1ea5t nh\u1eadp kh\u1ea9u',\n foreignExchange: 'Ngo\u1ea1i h\u1ed1i',\n customs: 'H\u1ea3i quan & Ki\u1ec3m tra',\n transport: 'V\u1eadn t\u1ea3i qu\u1ed1c t\u1ebf',\n other: 'D\u1ecbch v\u1ee5 kh\u00e1c'\n }\n },\n };\n\n const handleSubmit = (e) => {\n e.preventDefault();\n setFormStatus('submitting');\n \n setTimeout(() => {\n setFormStatus('success');\n e.target.reset();\n setTimeout(() => {\n setFormStatus('idle');\n }, 5000);\n }, 1500);\n };\n\n return React.createElement('section', { id: 'contact', className: 'py-16 bg-white' },\n React.createElement('div', { className: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' },\n React.createElement('div', { className: 'text-center mb-12' },\n React.createElement('h2', { className: 'text-3xl md:text-4xl font-bold text-gray-900 mb-4' },\n content[language].title\n ),\n React.createElement('p', { className: 'text-xl text-gray-600 max-w-3xl mx-auto' },\n content[language].subtitle\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 lg:grid-cols-2 gap-12' },\n React.createElement('div', { className: 'bg-blue-900 rounded-lg p-8 text-white' },\n React.createElement('div', { className: 'mb-6' },\n React.createElement('img', {\n src: 'https:\/\/images.pexels.com\/photos\/1117210\/pexels-photo-1117210.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',\n alt: 'Logistics Contact',\n className: 'w-full h-64 object-cover rounded-lg mb-6'\n }),\n React.createElement('h3', { className: 'text-2xl font-bold mb-3' },\n language === 'en' ? 'VNC Logistics Headquarters' : 'Tr\u1ee5 s\u1edf ch\u00ednh VNC Logistics'\n ),\n React.createElement('p', { className: 'text-blue-100 mb-6' },\n language === 'en'\n ? 'Our experienced team is ready to help you with any logistics challenges you face.'\n : '\u0110\u1ed9i ng\u0169 gi\u00e0u kinh nghi\u1ec7m c\u1ee7a ch\u00fang t\u00f4i s\u1eb5n s\u00e0ng gi\u00fap b\u1ea1n v\u1edbi b\u1ea5t k\u1ef3 th\u00e1ch th\u1ee9c h\u1eadu c\u1ea7n n\u00e0o b\u1ea1n g\u1eb7p ph\u1ea3i.'\n ),\n React.createElement('div', { className: 'space-y-4' },\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium text-lg' },\n language === 'en' ? 'Address' : '\u0110\u1ecba ch\u1ec9',\n ':'\n ),\n React.createElement('p', { className: 'text-blue-100' },\n 'Tianfu New District, ChengDu, Sichuan, China'\n )\n ),\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium text-lg' },\n 'Email:'\n ),\n React.createElement('p', { className: 'text-blue-100' },\n 'info.vnclogistic@gmail.com'\n )\n ),\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium text-lg' },\n language === 'en' ? 'Phone (Vietnam)' : '\u0110i\u1ec7n tho\u1ea1i (Vi\u1ec7t Nam)',\n ':'\n ),\n React.createElement('p', { className: 'text-blue-100' },\n '+84 943 855 995 (Zalo)'\n )\n ),\n React.createElement('div', null,\n React.createElement('p', { className: 'font-medium text-lg' },\n language === 'en' ? 'Phone (China)' : '\u0110i\u1ec7n tho\u1ea1i (Trung Qu\u1ed1c)',\n ':'\n ),\n React.createElement('p', { className: 'text-blue-100' },\n '+86 156 8062 6288 (WeChat: 16623337551)'\n )\n )\n )\n )\n ),\n React.createElement('div', { className: 'bg-gray-50 rounded-lg p-8 shadow-md border border-gray-200' },\n formStatus === 'success'\n ? React.createElement('div', { className: 'text-center py-8' },\n React.createElement('div', { className: 'bg-green-100 text-green-800 p-4 rounded-lg mb-6' },\n React.createElement('p', { className: 'font-medium' },\n content[language].success\n )\n ),\n React.createElement('button', {\n type: 'button',\n onClick: () => setFormStatus('idle'),\n className: 'px-6 py-2 bg-blue-700 text-white rounded-md hover:bg-blue-800 transition-colors'\n },\n language === 'en' ? 'Send another message' : 'G\u1eedi tin nh\u1eafn kh\u00e1c'\n )\n )\n : React.createElement('form', {\n onSubmit: handleSubmit,\n className: 'space-y-6'\n },\n formStatus === 'error' && React.createElement('div', { className: 'bg-red-100 text-red-800 p-4 rounded-lg' },\n React.createElement('p', null, content[language].error)\n ),\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-2 gap-6' },\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'name',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].name,\n ' *'\n ),\n React.createElement('input', {\n type: 'text',\n id: 'name',\n name: 'name',\n required: true,\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n ),\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'email',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].email,\n ' *'\n ),\n React.createElement('input', {\n type: 'email',\n id: 'email',\n name: 'email',\n required: true,\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n )\n ),\n React.createElement('div', { className: 'grid grid-cols-1 md:grid-cols-2 gap-6' },\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'phone',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].phone\n ),\n React.createElement('input', {\n type: 'tel',\n id: 'phone',\n name: 'phone',\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n ),\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'company',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].company\n ),\n React.createElement('input', {\n type: 'text',\n id: 'company',\n name: 'company',\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n )\n ),\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'service',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].service\n ),\n React.createElement('select', {\n id: 'service',\n name: 'service',\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n },\n Object.entries(content[language].services).map(([key, value]) =>\n React.createElement('option', { key: key, value: key }, value)\n )\n )\n ),\n React.createElement('div', null,\n React.createElement('label', {\n htmlFor: 'message',\n className: 'block text-sm font-medium text-gray-700 mb-1'\n },\n content[language].message,\n ' *'\n ),\n React.createElement('textarea', {\n id: 'message',\n name: 'message',\n rows: 5,\n required: true,\n className: 'w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500'\n })\n ),\n React.createElement('div', null,\n React.createElement('button', {\n type: 'submit',\n disabled: formStatus === 'submitting',\n className: 'w-full px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 disabled:opacity-75'\n },\n formStatus === 'submitting' ? content[language].submitting : content[language].submit\n )\n )\n )\n )\n )\n )\n );\n };\n\n const HomePage = () => {\n return React.createElement('div', null,\n React.createElement(HeroSection),\n React.createElement(ServiceSection),\n React.createElement(AboutSection),\n React.createElement(TestimonialSection),\n React.createElement(ContactSection)\n );\n };\n\n const App = () => {\n return React.createElement(LanguageProvider, null,\n React.createElement('div', { className: 'flex flex-col min-h-screen' },\n React.createElement(Header),\n React.createElement('main', { className: 'flex-grow' },\n React.createElement(HomePage)\n ),\n React.createElement(Footer)\n )\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(React.createElement(React.StrictMode, null,\n React.createElement(App)\n ));\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>VNC Logistics – Professional International Logistics Services<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vnclogistic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":10,"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/vnclogistic.com\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/vnclogistic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}