489 lines
18 KiB
HTML
489 lines
18 KiB
HTML
<!-- views/productPage/productMain.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>SẢN PHẨM - CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG</title>
|
|
<link
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
|
|
/>
|
|
<link href="/components/header/header.css?v=1.1" rel="stylesheet" />
|
|
<link rel="stylesheet" href="components/footer/footer.css" />
|
|
<link rel="stylesheet" href="productPages/productMain/productMain.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Header Component -->
|
|
<div class="top-ribbon">
|
|
<div class="container-fluid px-4">
|
|
<div class="ribbon-content">
|
|
<div class="ribbon-company-info">
|
|
<img
|
|
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
|
|
alt="Ky Long Logo"
|
|
class="ribbon-logo"
|
|
/>
|
|
<span class="ribbon-company-name">KỲ LONG</span>
|
|
<span>Thắp sáng tương lai, vững bền thành quả</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header Section -->
|
|
<header class="header py-3">
|
|
<div class="container-fluid px-4">
|
|
<div class="row align-items-center">
|
|
<!-- Logo and Company Info -->
|
|
<div class="col-lg-6 col-md-6 col-12">
|
|
<div class="d-flex align-items-center">
|
|
<button class="mobile-menu-btn me-3">
|
|
<i class="bi bi-list"></i>
|
|
</button>
|
|
<img
|
|
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
|
|
alt="Ky Long Logo"
|
|
class="logo me-3"
|
|
/>
|
|
<div class="company-info">
|
|
<div>
|
|
<a
|
|
href="/"
|
|
title="Công ty TNHH Đầu Tư Thương Mại Dịch Vụ Kỳ Long"
|
|
class="company-name"
|
|
>
|
|
CÔNG TY TNHH ĐẦU TƯ THƯƠNG MẠI DỊCH VỤ KỲ LONG
|
|
</a>
|
|
</div>
|
|
<div class="company-slogan">
|
|
Thắp sáng tương lai, vững bền thành quả
|
|
</div>
|
|
<div class="company-year">SINCE 2010</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Info - Horizontal Layout -->
|
|
<div class="col-lg-6 col-md-6 col-12 contact-section">
|
|
<div class="row g-3">
|
|
<!-- Address -->
|
|
<div class="col-md-6 col-12">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
|
|
>
|
|
<i class="bi bi-geo-alt-fill"></i>
|
|
</div>
|
|
<div class="contact-text">
|
|
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
|
|
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="col-md-6 col-12">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="contact-icon d-flex align-items-center justify-content-center me-2"
|
|
>
|
|
<i class="bi bi-envelope-open-fill"></i>
|
|
</div>
|
|
|
|
<div class="contact-text">
|
|
<div>Email:</div>
|
|
<div class="contact-text">info@kylongtech.com</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation Section -->
|
|
<nav class="nav-container">
|
|
<div class="container-fluid px-4">
|
|
<div class="navbar-nav d-flex flex-row justify-content-around py-3">
|
|
<a href="/" class="nav-link" id="home">TRANG CHỦ</a>
|
|
<span class="separator"></span>
|
|
<a href="/aboutMain" class="nav-link" id="about">GIỚI THIỆU</a>
|
|
<span class="separator"></span>
|
|
<a href="/productMain" class="nav-link" id="products">SẢN PHẨM</a>
|
|
<span class="separator"></span>
|
|
<a href="/serviceMain" class="nav-link" id="services">DỊCH VỤ</a>
|
|
<span class="separator"></span>
|
|
<a href="/newsMain" class="nav-link" id="news">TIN TỨC</a>
|
|
<span class="separator"></span>
|
|
<a href="/lien-he" class="nav-link" id="contact">LIÊN HỆ</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Floating Menu Button -->
|
|
<button class="floating-menu-btn" id="floatingMenuBtn">
|
|
<i class="bi bi-list"></i>
|
|
</button>
|
|
|
|
<!-- Sidebar Overlay -->
|
|
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<img
|
|
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
|
|
alt="Ky Long Logo"
|
|
class="sidebar-logo"
|
|
/>
|
|
<button class="close-sidebar">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<a href="/" class="nav-link">TRANG CHỦ</a>
|
|
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
|
|
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
|
|
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
|
|
<a href="/newsMain" class="nav-link">TIN TỨC</a>
|
|
<a href="/lien-he" class="nav-link">LIÊN HỆ</a>
|
|
</nav>
|
|
|
|
<div class="sidebar-contact">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div
|
|
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
|
|
>
|
|
<i class="bi bi-geo-alt-fill"></i>
|
|
</div>
|
|
<div>
|
|
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
|
|
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="contact-icon d-flex align-items-center justify-content-center me-2"
|
|
>
|
|
<i class="bi bi-envelope-open-fill"></i>
|
|
</div>
|
|
<div>
|
|
<div>Email:</div>
|
|
<div>info@kylongtech.com</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PRODUCT HERO SECTION -->
|
|
<div class="symbol-hero">
|
|
<div class="symbol-container">
|
|
<i class="fas fa-industry"></i>
|
|
<i class="fas fa-gas-pump"></i>
|
|
<i class="fas fa-fire"></i>
|
|
<i class="fas fa-truck"></i>
|
|
<i class="fas fa-boxes"></i>
|
|
</div>
|
|
<div class="hero-text">
|
|
<h1>SẢN PHẨM</h1>
|
|
<p>Các giải pháp năng lượng và thiết bị công nghiệp chất lượng cao</p>
|
|
</div>
|
|
</div>
|
|
<!-- END PRODUCT HERO SECTION -->
|
|
|
|
<!-- PRODUCT CATEGORIES SECTION -->
|
|
<section class="product-categories">
|
|
<div class="container">
|
|
<div class="category-tabs">
|
|
<button class="category-tab active" data-category="production">
|
|
<i class="fas fa-industry"></i> SẢN XUẤT
|
|
</button>
|
|
<button class="category-tab" data-category="commerce">
|
|
<i class="fas fa-store"></i> THƯƠNG MẠI
|
|
</button>
|
|
</div>
|
|
|
|
<div class="category-content active" id="production">
|
|
<h2 class="shop-title">Thiết bị công nghiệp</h2>
|
|
<div class="shop-container">
|
|
<!-- PRU Product Card -->
|
|
<div class="shop-product-card">
|
|
<div class="product-image">
|
|
<div class="product-image-placeholder">
|
|
<i class="fas fa-gauge"></i>
|
|
</div>
|
|
<div class="product-badge">Chất lượng cao</div>
|
|
</div>
|
|
<div class="shop-product-info">
|
|
<h3>Trạm giảm áp (PRU)</h3>
|
|
<p class="product-description">
|
|
Trạm giảm áp chất lượng cao, đáp ứng các tiêu chuẩn an toàn
|
|
khắt khe nhất của ngành công nghiệp
|
|
</p>
|
|
<div class="product-features">
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Độ tin cậy cao</span
|
|
>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Dễ dàng vận hành</span
|
|
>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Tính năng an toàn vượt
|
|
trội</span
|
|
>
|
|
</div>
|
|
<a href="/productSeparateProductionPRU" class="product-link"
|
|
>XEM CHI TIẾT</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Đồng hồ đo Product Card -->
|
|
<div class="shop-product-card">
|
|
<div class="product-image">
|
|
<div class="product-image-placeholder">
|
|
<i class="fas fa-tachometer-alt"></i>
|
|
</div>
|
|
<div class="product-badge">Chính xác</div>
|
|
</div>
|
|
<div class="shop-product-info">
|
|
<h3>Đồng hồ đo khí</h3>
|
|
<p class="product-description">
|
|
Thiết bị đo lường chính xác cao, giúp kiểm soát và theo dõi
|
|
lượng khí tiêu thụ một cách hiệu quả
|
|
</p>
|
|
<div class="product-features">
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Độ chính xác cao</span
|
|
>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Độ bền vượt trội</span
|
|
>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Dễ dàng tích hợp</span
|
|
>
|
|
</div>
|
|
<a
|
|
href="/productSeparateProductionGasMeter"
|
|
class="product-link"
|
|
>XEM CHI TIẾT</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shop-container">
|
|
<!-- Dàn hóa hơi Product Card -->
|
|
<div class="shop-product-card">
|
|
<div class="product-image">
|
|
<div class="product-image-placeholder">
|
|
<i class="fas fa-wind"></i>
|
|
</div>
|
|
<div class="product-badge">Tiết kiệm</div>
|
|
</div>
|
|
<div class="shop-product-info">
|
|
<h3>Dàn hóa hơi</h3>
|
|
<p class="product-description">
|
|
Thiết bị chuyển đổi khí từ dạng lỏng sang dạng hơi một cách
|
|
hiệu quả, tiết kiệm năng lượng
|
|
</p>
|
|
<div class="product-features">
|
|
<span><i class="fas fa-check-circle"></i> Hiệu suất cao</span>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Tiết kiệm năng
|
|
lượng</span
|
|
>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Vận hành ổn định</span
|
|
>
|
|
</div>
|
|
<a
|
|
href="/productSeparateProductionVaporizer"
|
|
class="product-link"
|
|
>XEM CHI TIẾT</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Van điều áp Product Card -->
|
|
<div class="shop-product-card">
|
|
<div class="product-image">
|
|
<div class="product-image-placeholder">
|
|
<i class="fas fa-compress-alt"></i>
|
|
</div>
|
|
<div class="product-badge">An toàn</div>
|
|
</div>
|
|
<div class="shop-product-info">
|
|
<h3>Van điều áp</h3>
|
|
<p class="product-description">
|
|
Van điều áp chất lượng cao, đảm bảo an toàn và hiệu quả trong
|
|
việc kiểm soát áp suất khí
|
|
</p>
|
|
<div class="product-features">
|
|
<span><i class="fas fa-check-circle"></i> Độ bền cao</span>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Phản ứng nhanh</span
|
|
>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Dễ dàng bảo trì</span
|
|
>
|
|
</div>
|
|
<a
|
|
href="/productSeparateProductionPressureRegulatorValve"
|
|
class="product-link"
|
|
>XEM CHI TIẾT</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="other-products">
|
|
<h3>Dịch vụ sản xuất khác</h3>
|
|
<div class="service-list">
|
|
<div class="service-item">
|
|
<i class="fas fa-oil-can"></i>
|
|
<p>Sản xuất sản phẩm dầu mỏ tinh chế</p>
|
|
</div>
|
|
<div class="service-item">
|
|
<i class="fas fa-fire"></i>
|
|
<p>Sản xuất, phân phối khí đốt bằng đường ống</p>
|
|
</div>
|
|
<div class="service-item">
|
|
<i class="fas fa-water"></i>
|
|
<p>Sản xuất, phân phối hơi nước và nước nóng</p>
|
|
</div>
|
|
<div class="service-item">
|
|
<i class="fas fa-tools"></i>
|
|
<p>Bảo trì, sửa chữa thiết bị công nghiệp</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="category-content" id="commerce">
|
|
<h2 class="shop-title">Sản phẩm nổi bật</h2>
|
|
<div class="shop-container">
|
|
<!-- LNG Product Card -->
|
|
<div class="shop-product-card">
|
|
<div class="product-image">
|
|
<div class="product-image-placeholder">
|
|
<i class="fas fa-tint"></i>
|
|
</div>
|
|
<div class="product-badge">Phổ biến</div>
|
|
</div>
|
|
<div class="shop-product-info">
|
|
<h3>Khí tự nhiên hóa lỏng (LNG)</h3>
|
|
<p class="product-description">
|
|
Giải pháp năng lượng sạch, hiệu quả cao và tiết kiệm chi phí
|
|
cho doanh nghiệp
|
|
</p>
|
|
<div class="product-features">
|
|
<span><i class="fas fa-check-circle"></i> Hiệu suất cao</span>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Thân thiện môi
|
|
trường</span
|
|
>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Vận chuyển linh
|
|
hoạt</span
|
|
>
|
|
</div>
|
|
<a href="/productSeparateCommerceLNG" class="product-link"
|
|
>XEM CHI TIẾT</a
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PNG Product Card -->
|
|
<div class="shop-product-card">
|
|
<div class="product-image">
|
|
<div class="product-image-placeholder">
|
|
<i class="fas fa-fire"></i>
|
|
</div>
|
|
<div class="product-badge">Tiết kiệm</div>
|
|
</div>
|
|
<div class="shop-product-info">
|
|
<h3>Khí tự nhiên nén (PNG)</h3>
|
|
<p class="product-description">
|
|
Giải pháp cung cấp năng lượng liên tục qua đường ống cho nhà
|
|
máy và khu công nghiệp
|
|
</p>
|
|
<div class="product-features">
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Cung cấp liên tục</span
|
|
>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Không cần bồn
|
|
chứa</span
|
|
>
|
|
<span
|
|
><i class="fas fa-check-circle"></i> Chi phí vận hành
|
|
thấp</span
|
|
>
|
|
</div>
|
|
<a href="/productSeparateCommercePNG" class="product-link"
|
|
>XEM CHI TIẾT</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="other-products">
|
|
<h3>Dịch vụ thương mại khác</h3>
|
|
<div class="service-list">
|
|
<div class="service-item">
|
|
<i class="fas fa-truck"></i>
|
|
<p>Bán buôn ô tô và xe có động cơ khác</p>
|
|
</div>
|
|
<div class="service-item">
|
|
<i class="fas fa-handshake"></i>
|
|
<p>Đại lý bán hàng hóa; Môi giới mua bán hàng hóa</p>
|
|
</div>
|
|
<div class="service-item">
|
|
<i class="fas fa-cubes"></i>
|
|
<p>Bán buôn sắt, thép, bạc và kim loại khác</p>
|
|
</div>
|
|
<div class="service-item">
|
|
<i class="fas fa-hammer"></i>
|
|
<p>Bán buôn vật liệu, thiết bị lắp đặt khác trong xây dựng</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- END PRODUCT CATEGORIES SECTION -->
|
|
|
|
<!-- CONTACT CTA SECTION -->
|
|
<section class="contact-cta">
|
|
<div class="container">
|
|
<h2>QUÝ KHÁCH CẦN TƯ VẤN VỀ SẢN PHẨM?</h2>
|
|
<p>
|
|
Đội ngũ chuyên gia của chúng tôi sẵn sàng hỗ trợ bạn lựa chọn giải
|
|
pháp phù hợp nhất
|
|
</p>
|
|
<a href="/lien-he" class="cta-button">LIÊN HỆ NGAY</a>
|
|
</div>
|
|
</section>
|
|
<!-- END CONTACT CTA SECTION -->
|
|
|
|
<!-- Footer Component -->
|
|
<div id="footer"></div>
|
|
|
|
<script src="productPages/productMain/productMain.js"></script>
|
|
<script src="/components/header/header.js"></script>
|
|
</body>
|
|
</html>
|