MinhQuan/PresentCorpo
0
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
MinhQuan
2026-06-03 01:06:32 +07:00
commit 31d30434d6
72 changed files with 11912 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/servicePages/serviceMain.css
+332
View File
@@ -0,0 +1,332 @@
/* views\servicePages\serviceMain.css */
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
/* Ensure visited links don't turn purple */
a:visited {
color: inherit;
}
/* Optional: Keep hover state consistent */
a:hover {
text-decoration: none;
color: inherit;
}
/* Optional: Keep active state consistent */
a:active {
color: inherit;
}
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
text-align: center;
color: #30875f;
font-size: 32px;
font-weight: bold;
margin-bottom: 40px;
position: relative;
padding-bottom: 15px;
}
.section-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background-color: #e84e0f;
}
/* Service Hero Section */
.service-hero {
width: 100%;
height: 400px;
background-image: url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
background-size: cover;
background-position: center;
position: relative;
margin-bottom: 60px;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
padding: 0 20px;
}
.hero-overlay h1 {
font-size: 48px;
margin-bottom: 20px;
color: #fff;
}
.hero-overlay p {
font-size: 24px;
max-width: 800px;
}
/* Service Categories Section */
.service-categories {
padding: 60px 0;
background-color: #f9f9f9;
}
.category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.category-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.category-card:hover {
transform: translateY(-10px);
}
.category-icon {
background-color: #30875f;
color: white;
padding: 25px;
text-align: center;
font-size: 40px;
}
.category-card h3 {
padding: 20px;
background-color: #f0f0f0;
color: #30875f;
font-size: 24px;
text-align: center;
}
.service-list {
padding: 0 20px 20px;
}
.service-item {
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.service-item:last-child {
border-bottom: none;
}
.service-item h4 {
color: #e84e0f;
font-size: 16px;
margin-bottom: 5px;
}
.service-item p {
font-size: 14px;
color: #666;
}
/* Service Benefits Section */
.service-benefits {
padding: 60px 0;
background-color: #30875f;
color: white;
}
.service-benefits .section-title {
color: white;
}
.service-benefits .section-title::after {
background-color: white;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-top: 40px;
}
.benefit-card {
background-color: white;
border-radius: 10px;
padding: 30px;
text-align: center;
color: #333;
transition: transform 0.3s ease;
}
.benefit-card:hover {
transform: translateY(-5px);
}
.benefit-icon {
width: 70px;
height: 70px;
background-color: #30875f;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: white;
font-size: 30px;
}
.benefit-card h3 {
font-size: 18px;
margin-bottom: 15px;
color: #30875f;
}
.benefit-card p {
font-size: 14px;
}
/* Service Process Section */
.service-process {
padding: 60px 0;
background-color: #f9f9f9;
}
.process-steps {
display: flex;
justify-content: space-between;
margin-top: 40px;
flex-wrap: wrap;
}
.process-step {
flex: 1;
min-width: 200px;
text-align: center;
padding: 0 15px;
margin-bottom: 30px;
position: relative;
}
.step-number {
width: 50px;
height: 50px;
background-color: #e84e0f;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
margin: 0 auto 20px;
}
.process-step h3 {
font-size: 18px;
margin-bottom: 15px;
color: #30875f;
}
.process-step p {
font-size: 14px;
color: #666;
}
/* Responsive Design */
@media (max-width: 1024px) {
.category-grid {
grid-template-columns: 1fr;
}
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-steps {
flex-direction: column;
}
.process-step {
margin-bottom: 40px;
}
.process-step::after {
content: "↓";
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 30px;
color: #30875f;
}
.process-step:last-child::after {
display: none;
}
}
@media (max-width: 768px) {
.hero-overlay h1 {
font-size: 36px;
}
.hero-overlay p {
font-size: 18px;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.service-hero {
height: 300px;
}
}
@media (max-width: 480px) {
.hero-overlay h1 {
font-size: 28px;
}
.hero-overlay p {
font-size: 16px;
}
.section-title {
font-size: 28px;
}
}
views/servicePages/serviceMain.html
+430
View File
@@ -0,0 +1,430 @@
<!-- views\servicePages\serviceMain.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DỊCH VỤ | 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="servicePages/serviceMain.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>
<!-- SERVICE HERO SECTION -->
<div class="service-hero">
<div class="hero-overlay">
<h1>DỊCH VỤ CHUYÊN NGHIỆP</h1>
<p>Giải pháp toàn diện cho mọi nhu cầu công nghiệp</p>
</div>
</div>
<!-- END SERVICE HERO SECTION -->
<!-- SERVICE CATEGORIES SECTION -->
<section class="service-categories">
<div class="container">
<h2 class="section-title">DANH MỤC DỊCH VỤ</h2>
<div class="category-grid">
<!-- Repair Services -->
<div class="category-card" id="sua-chua">
<div class="category-icon">
<i class="fas fa-tools"></i>
</div>
<h3>Sửa chữa</h3>
<div class="service-list">
<div class="service-item">
<h4>Sửa chữa máy móc, thiết bị</h4>
<p>
Dịch vụ sửa chữa chuyên nghiệp cho hệ thống máy móc công
nghiệp
</p>
</div>
</div>
</div>
<!-- Rental Services -->
<div class="category-card" id="cho-thue">
<div class="category-icon">
<i class="fas fa-key"></i>
</div>
<h3>Cho thuê</h3>
<div class="service-list">
<div class="service-item">
<h4>Cho thuê xe có động cơ</h4>
<p>Dịch vụ cho thuê xe chất lượng cao</p>
</div>
<div class="service-item">
<h4>Cho thuê máy móc, thiết bị</h4>
<p>Cho thuê máy móc xây dựng, văn phòng</p>
</div>
</div>
</div>
<!-- Transportation -->
<div class="category-card" id="van-tai">
<div class="category-icon">
<i class="fas fa-truck"></i>
</div>
<h3>Vận tải & Hỗ trợ vận tải</h3>
<div class="service-list">
<div class="service-item">
<h4>Vận tải hành khách đường bộ khác</h4>
<p>Dịch vụ vận tải hành khách chuyên nghiệp</p>
</div>
<div class="service-item">
<h4>Vận tải hàng hóa bằng đường bộ</h4>
<p>Vận chuyển hàng hóa an toàn, đúng tiến độ</p>
</div>
<div class="service-item">
<h4>Hoạt động dịch vụ hỗ trợ vận tải</h4>
<p>Các dịch vụ hỗ trợ logistics chuyên nghiệp</p>
</div>
</div>
</div>
<!-- IT Services -->
<div class="category-card" id="cong-nghe">
<div class="category-icon">
<i class="fas fa-laptop-code"></i>
</div>
<h3>Công nghệ thông tin</h3>
<div class="service-list">
<div class="service-item">
<h4>Lập trình máy vi tính</h4>
<p>Phát triển phần mềm theo yêu cầu</p>
</div>
<div class="service-item">
<h4>Tư vấn và quản trị hệ thống</h4>
<p>Tư vấn và triển khai hệ thống CNTT</p>
</div>
<div class="service-item">
<h4>Dịch vụ công nghệ thông tin khác</h4>
<p>Các giải pháp CNTT toàn diện</p>
</div>
</div>
</div>
<!-- Consulting -->
<div class="category-card" id="tu-van">
<div class="category-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3>Tư vấn, nghiên cứu & khoa học</h3>
<div class="service-list">
<div class="service-item">
<h4>Tư vấn đầu tư</h4>
<p>Tư vấn chiến lược đầu tư hiệu quả</p>
</div>
<div class="service-item">
<h4>Tư vấn quản lý</h4>
<p>Giải pháp quản lý doanh nghiệp tối ưu</p>
</div>
<div class="service-item">
<h4>Tư vấn kỹ thuật & giám sát</h4>
<p>Giám sát thi công công trình dân dụng và công nghiệp</p>
</div>
<div class="service-item">
<h4>Nghiên cứu khoa học</h4>
<p>Nghiên cứu phát triển công nghệ mới</p>
</div>
<div class="service-item">
<h4>Tư vấn chuyên ngành khác</h4>
<p>Tư vấn nông học, môi trường và công nghệ</p>
</div>
</div>
</div>
<!-- Construction & Installation -->
<div class="category-card" id="xay-dung">
<div class="category-icon">
<i class="fas fa-building"></i>
</div>
<h3>Xây dựng & Lắp đặt</h3>
<div class="service-list">
<div class="service-item">
<h4>Xây dựng nhà để ở</h4>
<p>Thi công các công trình dân dụng chất lượng cao</p>
</div>
<div class="service-item">
<h4>Xây dựng nhà không để ở</h4>
<p>Xây dựng nhà xưởng, kho bãi công nghiệp</p>
</div>
<div class="service-item">
<h4>Xây dựng công trình kỹ thuật dân dụng khác</h4>
<p>Thi công các công trình kỹ thuật đặc biệt</p>
</div>
<div class="service-item">
<h4>Lắp đặt hệ thống điện</h4>
<p>Lắp đặt hệ thống điện công nghiệp và dân dụng</p>
</div>
<div class="service-item">
<h4>Lắp đặt hệ thống cấp, thoát nước</h4>
<p>Thi công hệ thống cấp thoát nước chuyên nghiệp</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END SERVICE CATEGORIES SECTION -->
<!-- SERVICE BENEFITS SECTION -->
<section class="service-benefits">
<div class="container">
<h2 class="section-title">LỢI ÍCH KHI SỬ DỤNG DỊCH VỤ</h2>
<div class="benefits-grid">
<div class="benefit-card">
<div class="benefit-icon">
<i class="fas fa-clock"></i>
</div>
<h3>Tiết kiệm thời gian</h3>
<p>
Giải pháp nhanh chóng, tiết kiệm thời gian vận hành cho doanh
nghiệp
</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">
<i class="fas fa-dollar-sign"></i>
</div>
<h3>Tiết kiệm chi phí</h3>
<p>Tối ưu hóa ngân sách với chi phí dịch vụ cạnh tranh</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>An toàn tuyệt đối</h3>
<p>Tuân thủ nghiêm ngặt các tiêu chuẩn an toàn công nghiệp</p>
</div>
<div class="benefit-card">
<div class="benefit-icon">
<i class="fas fa-user-tie"></i>
</div>
<h3>Đội ngũ chuyên gia</h3>
<p>Đội ngũ kỹ sư giàu kinh nghiệm, trình độ cao</p>
</div>
</div>
</div>
</section>
<!-- END SERVICE BENEFITS SECTION -->
<!-- SERVICE PROCESS SECTION -->
<section class="service-process">
<div class="container">
<h2 class="section-title">QUY TRÌNH LÀM VIỆC</h2>
<div class="process-steps">
<div class="process-step">
<div class="step-number">1</div>
<h3>Tiếp nhận yêu cầu</h3>
<p>Khách hàng liên hệ và cung cấp thông tin yêu cầu dịch vụ</p>
</div>
<div class="process-step">
<div class="step-number">2</div>
<h3>Tư vấn giải pháp</h3>
<p>Chuyên gia phân tích và đề xuất giải pháp tối ưu</p>
</div>
<div class="process-step">
<div class="step-number">3</div>
<h3>Ký kết hợp đồng</h3>
<p>Thống nhất các điều khoản và ký kết hợp đồng</p>
</div>
<div class="process-step">
<div class="step-number">4</div>
<h3>Triển khai dịch vụ</h3>
<p>Đội ngũ chuyên gia thực hiện theo đúng kế hoạch</p>
</div>
<div class="process-step">
<div class="step-number">5</div>
<h3>Nghiệm thu & bảo hành</h3>
<p>Nghiệm thu công trình và cam kết bảo hành dài hạn</p>
</div>
</div>
</div>
</section>
<!-- END SERVICE PROCESS SECTION -->
<!-- Footer Component -->
<div id="footer"></div>
<script src="servicePages/serviceMain.js?v=1.0"></script>
<script src="/components/header/header.js"></script>
</body>
</html>
views/servicePages/serviceMain.js
+54
View File
@@ -0,0 +1,54 @@
//// views\servicePages\serviceMain.js
// Load footer
fetch("components/footer/footer.html")
.then((response) => response.text())
.then((data) => {
document.getElementById("footer").innerHTML = data;
});
// Navigation highlighting
document.addEventListener("DOMContentLoaded", function () {
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const targetId = this.getAttribute("href");
if (targetId === "#") return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 100,
behavior: "smooth",
});
}
});
});
// Animate service cards on scroll
const serviceCards = document.querySelectorAll(".category-card");
function animateOnScroll() {
serviceCards.forEach((card) => {
const cardPosition = card.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;
if (cardPosition < screenPosition) {
card.style.opacity = "1";
card.style.transform = "translateY(0)";
}
});
}
// Initialize card styles
serviceCards.forEach((card) => {
card.style.opacity = "0";
card.style.transform = "translateY(20px)";
card.style.transition = "all 0.5s ease";
});
// Check on load and scroll
window.addEventListener("scroll", animateOnScroll);
animateOnScroll();
});