tieptk/hurasoft_nextjs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Tieptk
2025-03-16 22:33:24 +07:00
parent abf8ab2c53
commit a2c5e28797
13 changed files with 807 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/layout.tsx
View File

@@ -1,15 +1,23 @@
"use client";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "@/styles/style.css";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Head from "next/head";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const handleBodyClick = () => {
const menu = document.getElementById("menu_product");
menu?.classList.remove("active");
};
return (
<html lang="vi">
<Head>
<meta charSet="utf-8" />
<meta
name="viewport"
@@ -17,10 +25,11 @@ export default function RootLayout({
/>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hurasoft</title>
<link rel="icon" href="/image" />
<link rel="icon" href="/image/favicon.png" />
</Head>
<body className="bg-white">
<Header />
<main>{children}</main>
<main onClick={handleBodyClick}>{children}</main>
<Footer />
</body>
</html>

1
src/app/page.tsx
View File

@@ -6,7 +6,6 @@ import { format } from "date-fns";
import { homePageEffect } from "@/effects/homeEffect";
import { ArticlesData } from "../data/article";
import { ArticlesType } from "../types/article";
export default function Home() {
useEffect(() => {

41
src/components/Header.tsx
View File

@@ -1,20 +1,37 @@
"use client";
import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
export default function Header() {
// State để kiểm tra trạng thái của menu
const [menuActive, setMenuActive] = useState(false);
const handleMenuClick = () => {
setMenuActive(!menuActive); // Toggle trạng thái của menu
};
return (
<header className="header">
<header>
<div className="header">
<div className="container">
<div className="content-header-main flex items-center justify-between">
<Link href="/" className="logo">
<Image src="/images/logo.png" width={100} height={100} alt="logo" />
<Image
src="/images/logo.png"
width={100}
height={100}
alt="logo"
/>
</Link>
<div className="menu-right flex items-center">
<div className="item">
<Link href="/page/dich-vu.html" className="title">
Sản phẩm
</Link>
<div className="hover-menu">
<div
className={`item ${menuActive ? "active" : ""}`}
onClick={handleMenuClick}
id="menu_product"
>
<div className="title">Sản phẩm</div>
<div className={`hover-menu ${menuActive ? "active" : ""}`}>
<div className="item-menu">
<div className="top">
<div className="icon">
@@ -26,7 +43,8 @@ export default function Header() {
/>
</div>
<p className="txt line-clamp-4">
Tốt nhất cho hoạt động thương mại điện tử của doanh nghiệp
Tốt nhất cho hoạt động thương mại điện tử của doanh
nghiệp
</p>
</div>
<a href="" className="more">
@@ -92,13 +110,13 @@ export default function Header() {
</div>
</div>
</div>
<Link href="/tuyen-dung" className="item">
<Link href="/job/page_job_introduction" className="item">
Tuyển dụng
</Link>
<Link href="/tin-tuc" className="item">
<Link href="/article" className="item">
Blog
</Link>
<Link href="/lien-he" className="item">
<Link href="/contact" className="item">
Liên hệ
</Link>
<Link href="javascript:void(0)" className="item">
@@ -107,6 +125,7 @@ export default function Header() {
</div>
</div>
</div>
</div>
</header>
);
}

80
src/data/job.ts Normal file
View File

@@ -0,0 +1,80 @@
import { JobType } from '../types/job';
export const JobData: JobType = {
"total": 4,
"list": [
{
"id": 13,
"title": "Nh\u00e2n vi\u00ean ph\u00e1t tri\u1ec3n th\u1ecb tr\u01b0\u1eddng",
"summary": "",
"salary": "Th\u1ecfa thu\u1eadn",
"vacancy_num": 2,
"end_date": "31-12-2024",
"location": "H\u00e0 N\u1ed9i",
"visit": 0,
"create_time": 1731653302,
"last_update": 1733899503,
"counter": 1,
"image": {
"small": "",
"large": ""
},
"url": "\/job\/nhan-vien-phat-trien-thi-truong.html"
},
{
"id": 12,
"title": "Nh\u00e2n vi\u00ean ch\u0103m s\u00f3c kh\u00e1ch h\u00e0ng",
"summary": "",
"salary": "7-12 tri\u1ec7u",
"vacancy_num": 2,
"end_date": "31-12-2024",
"location": "H\u00e0 N\u1ed9i",
"visit": 0,
"create_time": 1731653230,
"last_update": 1733899517,
"counter": 2,
"image": {
"small": "",
"large": ""
},
"url": "\/job\/nhan-vien-cham-soc-khach-hang.html"
},
{
"id": 11,
"title": "L\u1eadp tr\u00ecnh vi\u00ean front-end",
"summary": "",
"salary": "Th\u1ecfa thu\u1eadn",
"vacancy_num": 2,
"end_date": "31-12-2024",
"location": "H\u00e0 N\u1ed9i",
"visit": 0,
"create_time": 1731652851,
"last_update": 1733899525,
"counter": 3,
"image": {
"small": "",
"large": ""
},
"url": "\/job\/lap-trinh-vien-front-end.html"
},
{
"id": 10,
"title": "Thi\u1ebft k\u1ebf \u0111\u1ed3 h\u1ecda Website, Mobile (UX Designer)",
"summary": "",
"salary": "$500-1,000\/th\u00e1ng",
"vacancy_num": 1,
"end_date": "31-12-2024",
"location": "H\u00e0 N\u1ed9i",
"visit": 0,
"create_time": 1731652564,
"last_update": 1733899533,
"counter": 4,
"image": {
"small": "",
"large": ""
},
"url": "\/job\/thiet-ke-do-hoa-website-mobile-ux-designer.html"
}
]
}

132
src/pages/contact.tsx Normal file
View File

@@ -0,0 +1,132 @@
import Layout from "@/app/layout";
import { useEffect, useState } from "react";
const Contact = () => {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true); // Chỉ set khi component đã mount trên client
}, []);
if (!isClient) {
return null; // Tránh render trên server
}
return (
<Layout>
<div className="page-contact">
<div className="container">
<div className="content-page-contact flex justify-center">
<div className="contact-left">
<h1 className="title-contact">Liên hệ</h1>
<div className="note">
Đội ngũ hỗ trợ của Hurasoft luôn sẵn sàng hỗ trợ quý khách
</div>
<div className="list-info">
<div className="item">
<div className="icon">
<i className="icon_2024 map"></i>
</div>
<div className="txt">
Tầng 5 - Số 3,ngõ 18 Yên Lãng,Đống Đa, Hà Nội
</div>
</div>
<div className="item">
<div className="icon">
<i className="icon_2024 phone"></i>
</div>
<div className="txt d-flex align-items">
<a href="02422138068">02422.138.068</a>
<span>-</span>
<a href="tel:0904580181">0904.580.181</a>
</div>
</div>
<div className="item">
<div className="icon">
<i className="icon_2024 email"></i>
</div>
<a href="mailto:hotro@hurasoft.com" className="txt">
hotro@hurasoft.com
</a>
</div>
</div>
</div>
<div className="contact-right">
<div className="box-form">
<b>Để lại lời nhắn</b>
<div className="item-form">
<label>
Tên <span>*</span>
</label>
<input
type="text"
name="name"
className="input-item"
id="js-contact-name"
placeholder="Nhập họ và tên"
/>
<div className="note-error"></div>
</div>
<div className="item-form">
<label>
Email <span>*</span>
</label>
<input
type="text"
name="email"
className="input-item"
id="js-contact-email"
placeholder="hello@example.com..."
/>
<div className="note-error"></div>
</div>
<div className="item-form">
<label>
Số điện thoại <span>*</span>
</label>
<input
type="text"
name="phone"
className="input-item"
id="js-contact-tel"
placeholder="Nhập số điện thoại của bạn"
/>
<div className="note-error"></div>
</div>
<div className="item-form">
<label>website</label>
<input
type="text"
name="web"
className="input-item"
id="js-contact-web"
placeholder="Nhập website của bạn"
/>
<div className="note-error"></div>
</div>
<div className="item-form">
<label>Nội dung</label>
<textarea
name="note"
id="js-contact-content"
className="input-item"
placeholder="Nhập nội dung"
></textarea>
</div>
<a href="javascript:void(0)" className="btn btn-submit">
Gửi thông tin <i className="fa-solid fa-arrow-right-long"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</Layout>
);
};
export default Contact;

251
src/pages/job/detail.tsx Normal file
View File

@@ -0,0 +1,251 @@
import { useEffect, useState } from "react";
import Link from "next/link";
import Layout from "@/app/layout";
const Detail = () => {
const [activeTab, setActiveTab] = useState("#info");
const [isClient, setIsClient] = useState(false);
const showTab = (tab: string) => {
console.log(`Tab clicked: ${tab}`);
setActiveTab(tab);
};
useEffect(() => {
setIsClient(true); // Chỉ set khi component đã mount trên client
}, []);
if (!isClient) {
return null; // Tránh render trên server
}
return (
<Layout>
<div className="page-job detail">
<div className="container-job">
<h2 className="title">Nhân viên phát triển thị trường</h2>
<div className="content-job flex">
<div className="left-job">
<div className="item">
<p>Địa điểm</p>
<b>Hà Nội</b>
</div>
<div className="item">
<p>Hình thức làm việc</p>
<b>Toàn thời gian cố định</b>
</div>
<div className="item">
<p>Số lượng tuyển</p>
<b>7</b>
</div>
</div>
<div className="right-job">
<div className="list-tab flex items-center">
<div
onClick={() => showTab("#info")}
data-id="#info"
className={`item-tab ${
activeTab === "#info" ? "active" : ""
}`}
>
Chi tiết
</div>
<div
onClick={() => showTab("#formjob")}
data-id="#formjob"
className={`item-tab ${
activeTab === "#formjob" ? "active" : ""
}`}
>
Nộp hồ sơ
</div>
</div>
<div
className={`content-tab ${
activeTab === "#info" ? "active" : ""
}`}
id="info"
>
<b>Vị trí: Nhân viên phát triển thị trường</b>
<h2 className="title">Mô tả công việc</h2>
<ul>
<li>
Tìm kiếm khách hàng mới, tiếp cận khai thác Khách hàng tiềm
năng.
</li>
<li>Tư vấn khách hàng về sản phẩm, dịch vụ của công ty.</li>
<li>
Chốt hợp đồng khách hàng, triển khai quy trình làm việc với
khách hàng.
</li>
<li>
Hỗ trợ và chăm sóc khách hàng (tiềm năng, hiện tại, cũ) tạo
mối quan hệ với khách hàng.
</li>
<li>
Tiếp thu ý kiến khách hàng, phối hợp với các bộ phận khác để
khai thác tối đa lợi ích của dịch vụ, khách hàng.
</li>
<li>
Hoàn thành chỉ tiêu kinh doanh nhóm và chỉ tiêu cá nhân.
</li>
</ul>
<p>&nbsp;</p>
<h2 className="title">Yêu cầu ứng viên:</h2>
<ul>
<li>
Tốt nghiệp Cao Đẳng trở lên các trường đào tạo chuyên ngành
quản trị kinh doanh, CNTT hoặc các ngành liên quan.
</li>
<li>
Đặc biệt ưu tiên có kinh nghiệm làm việc ở các lĩnh vực kinh
doanh phần mềm, bán hàng, tư vấn, tiếp thị các sản phẩm về
CNTT là 1 lợi thế.
</li>
<li>
Có kỹ năng giao tiếp thuyết phục đàm phán tốt , năng động,
cải tiến, sáng tạo, chủ động trong công việc.
</li>
<li>
Tinh thần trách nhiệm trong công việc. Yêu thích công việc
kinh doanh và không ngừng học hỏi, sẵn sàng tiếp thu các
kiến thức mới.
</li>
<li>Có laptop, có phương tiện đi lại.</li>
</ul>
<p>&nbsp;</p>
<h2 className="title">Quyền lợi:</h2>
<ul>
<li>
Môi trường làm việc chuyên nghiệp, năng động, thân thiện
</li>
<li>Luôn được tiếp xúc với công nghệ và thử thách mới.</li>
<li>
Lương: Lương cứng + hoa hồng + phụ cấp xăng xe, điện thoại
</li>
<li>Thưởng theo ngày lễ, tết</li>
<li>
Được đào tạo kĩ năng mềm ( kỹ năng giao tiếp, xử lý tình
huống…..)
</li>
<li>Làm việc từ T2 – sáng T7</li>
<li>Đóng bảo hiểm theo quy định của Nhà nước</li>
<li>
Được hưởng đầy đủ các chế độ theo quy định của luật lao động
</li>
</ul>
<p>
Ứng viên vui lòng gửi hồ sơ cho chúng tôi qua email{" "}
<a href="mailto:info@hurasoft.com">info@hurasoft.com</a>
</p>
<a
href="javascript:void(0)"
onClick={() => showTab("#formjob")}
className="btn apply-job"
>
Ứng tuyển ngay
</a>
</div>
<div
className={`content-tab ${
activeTab === "#formjob" ? "active" : ""
}`}
id="formjob"
>
<input type="hidden" id="js-job_id" value="13" />
<div className="item-upload d-flex flex-wrap align-items">
<div className="upload-left">
<div className="d-flex align-items">
<i className="fa-solid fa-cloud-arrow-up"></i>
<p className="name-up">Tải lên sơ yếu lý lịch</p>
</div>
<p className="gray">
Tải sơ yếu lý lịch của bạn lên đây để tự động điền các
thông tin chính.
</p>
</div>
<div className="upload-right">
<input id="js-file-upload-id" type="hidden" value="" />
<div id="js-container-selector">
<a
id="js-select-file"
href="javascript:void(0);"
className="btn-upload d-block dz-clickable"
>
Upload file
</a>
</div>
</div>
<div className="pd-preview-file-upload">
<div id="js-file-uploaded-list"></div>
<div id="js-preview-file-upload"></div>
</div>
</div>
<div className="item-form">
<label>
Tên <span>*</span>
</label>
<input
type="text"
className="input-item"
name="name"
id="js-user_name"
placeholder="Nhập họ và tên"
/>
<div className="note-error"></div>
</div>
<div className="item-form">
<label>
Email <span>*</span>
</label>
<input
type="text"
className="input-item"
name="email"
id="js-user_email"
placeholder="Nhập địa chỉ email"
/>
<div className="note-error"></div>
</div>
<div className="item-form">
<label>
Số điện thoại <span>*</span>
</label>
<input
type="text"
className="input-item"
name="phone"
id="js-user_mobile"
placeholder="Nhập số điện thoại"
/>
<div className="note-error"></div>
</div>
<div className="item-form">
<label>Thông tin bổ sung</label>
<span className="ghichu">
Vui lòng chia sẻ bất kỳ điều gì khác bạn muốn chúng tôi
biết, chẳng hạn như động lực của bạn khi ứng tuyển hoặc các
bối cảnh bổ sung liên quan đến hồ sơ của bạn.
</span>
<textarea
className="input-item"
name="messenger"
id="js-user_note"
placeholder="Nhập nội dung bổ sung"
></textarea>
</div>
<a href="javascript:void(0)" className="btn btn-submit">
Nộp đơn <i className="fa-regular fa-paper-plane"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</Layout>
);
};
export default Detail;

46
src/pages/job/home.tsx Normal file
View File

@@ -0,0 +1,46 @@
import Link from "next/link";
import Layout from "@/app/layout";
import { useEffect, useState } from "react";
import { JobData } from "@/data/job";
const Home = () => {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true); // Chỉ set khi component đã mount trên client
}, []);
if (!isClient) {
return null; // Tránh render trên server
}
return (
<Layout>
<div className="page-job list">
<div className="container-job">
<h2 className="title">Tuyển dụng</h2>
<div className="list-job">
{JobData.list.map((job) => (
<div className="item-job" key={job.id}>
<div className="job-left">
<Link href="/job/detail" className="name line-clamp-1">
{job.title}
</Link>
<div className="time">{job.end_date}</div>
</div>
<div className="job-right flex items-center">
<div className="localhost">{job.location}</div>
<Link href="/job/detail" className="more">
Ứng tuyển ngay <i className="fa-solid fa-angle-right"></i>
</Link>
</div>
</div>
))}
</div>
</div>
</div>
</Layout>
);
};
export default Home;

92
src/pages/job/page_job_introduction.tsx Normal file
View File

@@ -0,0 +1,92 @@
import Link from "next/link";
import Image from "next/image";
import Layout from "@/app/layout";
import { useEffect, useState } from "react";
const Job = () => {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true); // Chỉ set khi component đã mount trên client
}, []);
if (!isClient) {
return null; // Tránh render trên server
}
return (
<Layout>
<div className="page-job">
<div className="container-job">
<h1>Việc làm tại hurasoft</h1>
<div className="note">
Nếu bạn là người đam mê công nghệ và yêu thử thách, hãy gia nhập
cùng chúng tôi.
</div>
<Link href="/job/home" className="btn btn-job">
Xem các vị trí <i className="fa-solid fa-arrow-right"></i>
</Link>
<div className="content">
<Image
src="/images/image-page-job.png"
width={100}
height={100}
alt="job"
layout="responsive"
/>
<h2>Đối tác tin cậy của doanh nghiệp</h2>
<p>
Hurasoft chuyên tư vấn và triển khai các giải pháp thương mại điện
tử tổng thể cho các doanh nghiệp từ khởi đầu kinh doanh đến quy mô
lớn. Thiết kế UX / UI, phát triển website app mobile, dịch vụ
marketing, các ứng dụng phần mềm & dịch vụ cơ sở hạ tầng chất
lượng. Những giải pháp mà chúng tôi thiết kế nhằm tăng tốc hiệu
quả & thúc đẩy tăng trưởng bền vững cho doanh nghiệp.
</p>
<h2>Mục tiêu của chúng tôi là giúp bạn bán hàng tốt hơn!</h2>
<p>
Chúng tôi hướng tới mục tiêu hỗ trợ bạn đạt được hiệu quả bán hàng
tối ưu nhất. Với sự tận tâm đồng hành trong từng bước phát triển,
đội ngũ chuyên gia giàu kinh nghiệm và kỹ thuật cao luôn sẵn sàng
đáp ứng nhu cầu của bạn. Uy tín được khẳng định qua việc cung cấp
dịch vụ cho nhiều doanh nghiệp lớn nhỏ trên toàn Việt Nam, chúng
tôi cam kết mang lại giải pháp phù hợp và bền vững để bạn tự tin
phát triển kinh doanh.
</p>
<h2>Văn hóa công ty</h2>
<p>
Chúng tôi cam kết đồng hành cùng khách hàng, coi mỗi vấn đề của
khách hàng là trách nhiệm của chính mình. Thấu hiểu khách hàng qua
các nghiên cứu chuyên sâu, phân tích và đánh giá chính xác, chúng
tôi mang đến các sản phẩm công nghệ thực sự hữu ích, chất lượng
vượt trội và giá cả hợp lý. Với tư duy đổi mới, tinh thần cam kết
và sự chủ động, chúng tôi không ngừng theo dõi, đề xuất giải pháp
sáng tạo để nâng tầm giá trị thương hiệu và trải nghiệm khách
hàng.
</p>
</div>
<div className="content-form-job">
<Image
src="/images/image-form.png"
width={100}
height={100}
alt="form"
layout="responsive"
/>
<div className="title">
<h3>Sẵn sàng tham gia cùng chúng tôi?</h3>
<a href="/job/home" className="btn btn-job">
Xem các vị trí <i className="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</Layout>
);
};
export default Job;

7
src/pages/product.tsx Normal file
View File

@@ -0,0 +1,7 @@
import Link from "next/link";
const Product: React.FC = () => {
return <></>;
};
export default Product;

32
src/styles/style.css
View File

@@ -137,6 +137,7 @@ table {
margin-left: 15px;
position: relative;
font-weight: 500;
cursor: pointer;
}
.header .menu-right .item::before {
position: absolute;
@@ -169,7 +170,11 @@ table {
.header .menu-right .item:hover::after {
display: block;
}
.header .menu-right .item:hover .hover-menu {
.header .menu-right .item.active .title {
color: var(--color-btn);
font-weight: 700;
}
.header .menu-right .item.active .hover-menu {
opacity: 1;
visibility: visible;
}
@@ -538,14 +543,6 @@ table {
width: 794px;
margin: 0 auto;
}
.page-job .container-job h1 {
padding-bottom: 25px;
font-size: 48px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
color: var(--color-title);
}
.page-job .container-job .note {
width: 408px;
margin: 0 auto;
@@ -605,9 +602,14 @@ table {
margin: 20px 0 0 0;
}
.page-job .title {
font-size: 20px;
padding-top: 80px;
font-size: 38px;
font-weight: 700;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
color: var(--color-title);
width: 450px;
margin: 0 auto 30px auto;
}
.page-job .title span {
font-size: 14px;
@@ -721,6 +723,14 @@ table {
line-height: 22px;
margin-bottom: 5px;
}
.page-job .content-job .content-tab h2,
.page-job .content-job .content-tab h2,
.page-job .content-job .content-tab h3 {
font-size: 14px;
margin-bottom: 15px;
text-align: left;
padding-top: 0;
}
.page-job .content-job .apply-job {
display: block;
width: 100%;

2
src/styles/style.css.map
View File

File diff suppressed because one or more lines are too long

33
src/styles/style.scss
View File

@@ -133,6 +133,7 @@ table {
margin-left: 15px;
position: relative;
font-weight: 500;
cursor: pointer;
&::before {
position: absolute;
content: "";
@@ -167,6 +168,12 @@ table {
&::after {
display: block;
}
}
&.active {
.title {
color: var(--color-btn);
font-weight: 700;
}
.hover-menu {
opacity: 1;
visibility: visible;
@@ -549,14 +556,7 @@ table {
padding: 20px 10px;
width: 794px;
margin: 0 auto;
h1 {
padding-bottom: 25px;
font-size: 48px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
color: var(--color-title);
}
.note {
width: 408px;
margin: 0 auto;
@@ -619,9 +619,14 @@ table {
}
}
.title {
font-size: 20px;
padding-top: 80px;
font-size: 38px;
font-weight: 700;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
color: var(--color-title);
width: 450px;
margin: 0 auto 30px auto;
span {
font-size: 14px;
margin-left: 5px;
@@ -736,6 +741,14 @@ table {
line-height: 22px;
margin-bottom: 5px;
}
h2,
h2,
h3 {
font-size: 14px;
margin-bottom: 15px;
text-align: left;
padding-top: 0;
}
}
.apply-job {
display: block;

27
src/types/job.ts Normal file
View File

@@ -0,0 +1,27 @@
export interface JobImage {
small: string; // Đường dẫn ảnh thu nhỏ
large: string; // Đường dẫn ảnh lớn
}
export interface Job {
id: number;
title: string;
summary: string;
salary: string;
vacancy_num: number;
end_date: string;
location: string;
visit: number;
create_time: number;
last_update: number;
counter: number;
image: JobImage; // Đối tượng ảnh
url: string;
}
export interface JobType {
total: number;
list: Job[];
}