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

update new

Browse Source
This commit is contained in:
Tieptk
2025-03-18 10:57:00 +07:00
parent 6dfa941a2f
commit af2175ebc2
26 changed files with 1285 additions and 629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.ts
View File

@@ -1,7 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
reactStrictMode: true,
};
export default nextConfig;

226
package-lock.json generated
View File

@@ -18,13 +18,15 @@
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@tailwindcss/postcss": "^4.0.14",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.4.21",
"eslint": "^9",
"eslint-config-next": "15.2.2",
"tailwindcss": "^4",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.14",
"typescript": "^5"
}
},
@@ -1523,6 +1525,43 @@
"node": ">= 0.4"
}
},
"node_modules/autoprefixer": {
"version": "10.4.21",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"browserslist": "^4.24.4",
"caniuse-lite": "^1.0.30001702",
"fraction.js": "^4.3.7",
"normalize-range": "^0.1.2",
"picocolors": "^1.1.1",
"postcss-value-parser": "^4.2.0"
},
"bin": {
"autoprefixer": "bin/autoprefixer"
},
"engines": {
"node": "^10 || ^12 || >=14"
},
"peerDependencies": {
"postcss": "^8.1.0"
}
},
"node_modules/available-typed-arrays": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1584,6 +1623,38 @@
"node": ">=8"
}
},
"node_modules/browserslist": {
"version": "4.24.4",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
"integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/browserslist"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"caniuse-lite": "^1.0.30001688",
"electron-to-chromium": "^1.5.73",
"node-releases": "^2.0.19",
"update-browserslist-db": "^1.1.1"
},
"bin": {
"browserslist": "cli.js"
},
"engines": {
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
}
},
"node_modules/busboy": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1916,6 +1987,12 @@
"node": ">= 0.4"
}
},
"node_modules/electron-to-chromium": {
"version": "1.5.119",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.119.tgz",
"integrity": "sha512-Ku4NMzUjz3e3Vweh7PhApPrZSS4fyiCIbcIrG9eKrriYVLmbMepETR/v6SU7xPm98QTqMSYiCwfO89QNjXLkbQ==",
"dev": true
},
"node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2101,6 +2178,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/escalade": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2646,6 +2732,19 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/fraction.js": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
"dev": true,
"engines": {
"node": "*"
},
"funding": {
"type": "patreon",
"url": "https://github.com/sponsors/rawify"
}
},
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -3881,6 +3980,21 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/node-releases": {
"version": "2.0.19",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
"dev": true
},
"node_modules/normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4149,6 +4263,12 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true
},
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5027,6 +5147,36 @@
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
"dev": true
},
"node_modules/update-browserslist-db": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
"integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/browserslist"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"escalade": "^3.2.0",
"picocolors": "^1.1.1"
},
"bin": {
"update-browserslist-db": "cli.js"
},
"peerDependencies": {
"browserslist": ">= 4.21.0"
}
},
"node_modules/uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -6035,6 +6185,20 @@
"integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
"dev": true
},
"autoprefixer": {
"version": "10.4.21",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
"dev": true,
"requires": {
"browserslist": "^4.24.4",
"caniuse-lite": "^1.0.30001702",
"fraction.js": "^4.3.7",
"normalize-range": "^0.1.2",
"picocolors": "^1.1.1",
"postcss-value-parser": "^4.2.0"
}
},
"available-typed-arrays": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -6081,6 +6245,18 @@
"fill-range": "^7.1.1"
}
},
"browserslist": {
"version": "4.24.4",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
"integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001688",
"electron-to-chromium": "^1.5.73",
"node-releases": "^2.0.19",
"update-browserslist-db": "^1.1.1"
}
},
"busboy": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -6312,6 +6488,12 @@
"gopd": "^1.2.0"
}
},
"electron-to-chromium": {
"version": "1.5.119",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.119.tgz",
"integrity": "sha512-Ku4NMzUjz3e3Vweh7PhApPrZSS4fyiCIbcIrG9eKrriYVLmbMepETR/v6SU7xPm98QTqMSYiCwfO89QNjXLkbQ==",
"dev": true
},
"emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -6464,6 +6646,12 @@
"is-symbol": "^1.0.4"
}
},
"escalade": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
"dev": true
},
"escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -6868,6 +7056,12 @@
"is-callable": "^1.2.7"
}
},
"fraction.js": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
"dev": true
},
"function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -7628,6 +7822,18 @@
}
}
},
"node-releases": {
"version": "2.0.19",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
"dev": true
},
"normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"dev": true
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -7804,6 +8010,12 @@
"source-map-js": "^1.2.1"
}
},
"postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true
},
"prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -8396,6 +8608,16 @@
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
"dev": true
},
"update-browserslist-db": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
"integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
"dev": true,
"requires": {
"escalade": "^3.2.0",
"picocolors": "^1.1.1"
}
},
"uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",

6
package.json
View File

@@ -19,13 +19,15 @@
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@tailwindcss/postcss": "^4.0.14",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.4.21",
"eslint": "^9",
"eslint-config-next": "15.2.2",
"tailwindcss": "^4",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.14",
"typescript": "^5"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
"@tailwindcss/postcss": {},
autoprefixer: {},
},
};

0
src/app/article/category.tsx Normal file
View File

0
src/app/article/detail.tsx Normal file
View File

111
src/app/article/page.tsx Normal file
View File

@@ -0,0 +1,111 @@
"use client";
import { ArticlesData } from "@/data/article";
import { format } from "date-fns";
const Home = () => {
return (
<div className="page-article">
<div className="container">
<div className="main-title">
<h2 className="text-center text-4xl text-sky-800 mb-[15px]">Blog</h2>
<div className="text-center text-base text-gray-400">
Cập nhật từ Hurasoft
</div>
</div>
<div className="box-big-article flex">
<div className="box-big" id="js-holder-big">
{ArticlesData.list.slice(0, 1).map((articles) => (
<div className="item-article" key={articles.id}>
<a href={articles.url} className="image-article">
<img
src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
width={100}
height={100}
alt={articles.title}
/>
</a>
<div className="info">
<div className="time">
<i className="fa-regular fa-clock"></i>{" "}
<span>
{format(
new Date(articles.last_update * 1000),
"dd/MM/yyyy HH:mm"
)}
</span>
</div>
<a href={articles.url} className="name-article line-clamp-2">
{articles.title}
</a>
</div>
</div>
))}
</div>
<div className="box-small" id="js-holder-small">
{ArticlesData.list.slice(1, 3).map((articles) => (
<div className="item-article" key={articles.id}>
<a href={articles.url} className="image-article">
<img
src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
width={100}
height={100}
alt={articles.title}
/>
</a>
<div className="info">
<div className="time">
<i className="fa-regular fa-clock"></i>{" "}
<span>
{format(
new Date(articles.last_update * 1000),
"dd/MM/yyyy HH:mm"
)}
</span>
</div>
<a href={articles.url} className="name-article line-clamp-2">
{articles.title}
</a>
</div>
</div>
))}
</div>
</div>
<div className="box-article-other mt-[50px]">
<h2 className="title text-xl font-bold mb-[25px]">
Xem thêm bài khác
</h2>
<div className="list-article flex flex-wrap" id="js-list-article">
{ArticlesData.list.map((articles) => (
<div className="item-article" key={articles.id}>
<a href={articles.url} className="image-article">
<img
src={`https://hurasoft8.hurasoft.com/${articles.image.large}`}
width={100}
height={100}
alt={articles.title}
/>
</a>
<div className="info">
<div className="time">
<i className="fa-regular fa-clock"></i>{" "}
<span>
{format(
new Date(articles.last_update * 1000),
"dd/MM/yyyy HH:mm"
)}
</span>
</div>
<a href={articles.url} className="name-article line-clamp-2">
{articles.title}
</a>
</div>
</div>
))}
</div>
</div>
</div>
</div>
);
};
export default Home;

119
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,119 @@
"use client";
const Contact = () => {
return (
<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>
);
};
export default Contact;

234
src/app/job/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,234 @@
"use client";
import { useState } from "react";
const Detail = () => {
const [activeTab, setActiveTab] = useState("#info");
const showTab = (tab: string) => {
console.log(`Tab clicked: ${tab}`);
setActiveTab(tab);
};
return (
<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>
);
};
export default Detail;

234
src/app/job/detail/page.tsx Normal file
View File

@@ -0,0 +1,234 @@
"use client";
import { useState } from "react";
const Detail = () => {
const [activeTab, setActiveTab] = useState("#info");
const showTab = (tab: string) => {
console.log(`Tab clicked: ${tab}`);
setActiveTab(tab);
};
return (
<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>
);
};
export default Detail;

32
src/app/job/page.tsx Normal file
View File

@@ -0,0 +1,32 @@
import Link from "next/link";
import { JobData } from "@/data/job";
const Home = () => {
return (
<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>
);
};
export default Home;

15
src/app/layout.tsx
View File

@@ -3,7 +3,6 @@ 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,
@@ -16,18 +15,8 @@ export default function RootLayout({
};
return (
<html lang="vi">
<Head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1"
/>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hurasoft</title>
<link rel="icon" href="/image/favicon.png" />
</Head>
<body className="bg-white">
<html>
<body>
<Header />
<main onClick={handleBodyClick}>{children}</main>
<Footer />

2
src/app/page.tsx
View File

@@ -16,8 +16,6 @@ export default function Home() {
// slider đối tác
homePageEffect.startCarousel("#navheight", true, 3000);
console.log(ArticlesData);
}, []);
return (

78
src/app/page/page_job.tsx Normal file
View File

@@ -0,0 +1,78 @@
import Link from "next/link";
import Image from "next/image";
const Page_job = () => {
return (
<div className="page-job">
<div className="container-job">
<h1 className="text-[] pt-[100px] pb-[25px] text-sky-900 uppercase text-center text-4xl font-bold">
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>
<Link href="/job/home" className="btn btn-job">
Xem các vị trí <i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
</div>
</div>
</div>
);
};
export default Page_job;

2
src/components/Footer.tsx
View File

@@ -1,5 +1,6 @@
export default function Footer() {
return (
<footer>
<div className="footer">
<div className="container">
<div className="main-footer flex">
@@ -59,5 +60,6 @@ export default function Footer() {
<div className="bottom-footer">Copyright @2025 Hurasoft</div>
</div>
</div>
</footer>
);
}

2
src/components/Header.tsx
View File

@@ -119,7 +119,7 @@ export default function Header() {
<Link href="/contact" className="item">
Liên hệ
</Link>
<Link href="javascript:void(0)" className="item">
<Link href="#" className="item">
<i className="icon_2024 global"></i>
</Link>
</div>

147
src/data/article.ts
View File

@@ -205,3 +205,150 @@ export const ArticlesData: ArticlesType = {
}
]
}
export const ArticlesDetailData = {
"total": 5,
"list": [
{
"id": 726,
"category": 39,
"title": "An toàn thông tin website",
"summary": "An toàn thông tin website đề cập đến các biện pháp và quy trình nhằm bảo vệ dữ liệu và thông tin trên website khỏi các mối đe dọa như hacker, phần mềm độc hại, và các cuộc tấn công mạng khác",
"create_time": 1731644833,
"create_by": "HuraSoft",
"last_update": 1734319905,
"last_update_by": "hurasoft - Tiệp",
"content": `
<p><strong>An toàn thông tin website</strong> đề cập đến các biện pháp và quy trình nhằm bảo vệ dữ liệu và thông tin trên website khỏi các mối đe dọa như hacker, phần mềm độc hại, và các cuộc tấn công mạng khác. Điều này bao gồm việc bảo vệ dữ liệu người dùng, đảm bảo các giao dịch trực tuyến được mã hóa an toàn, và duy trì tính toàn vẹn của các tài nguyên trên website.</p>
<p>Để <strong>đảm bảo an toàn thông tin website</strong>, bạn có thể áp dụng các biện pháp sau:</p>
<h3>1. <strong>Sử dụng chứng chỉ SSL (Secure Sockets Layer)</strong></h3>
<ul>
<li><strong>SSL</strong> mã hóa dữ liệu giữa máy chủ và người dùng, giúp bảo vệ thông tin nhạy cảm như thông tin tài khoản và thẻ tín dụng khỏi bị đánh cắp khi truyền qua mạng. Website có SSL thường bắt đầu bằng <strong>HTTPS</strong> thay vì <strong>HTTP</strong>, và trình duyệt hiển thị một ổ khóa nhỏ trên thanh địa chỉ.</li>
</ul>
<h3>2. <strong>Cập nhật phần mềm và hệ thống thường xuyên</strong></h3>
<ul>
<li>Việc duy trì các bản cập nhật mới nhất cho hệ thống quản lý nội dung (CMS), plugins, và các phần mềm khác trên website giúp giảm thiểu các lỗ hổng bảo mật. Các nhà phát triển thường xuyên phát hành các bản vá lỗi để bảo vệ website khỏi các cuộc tấn công lợi dụng lỗ hổng bảo mật.</li>
</ul>
<h3>3. <strong>Tạo mật khẩu mạnh và quản lý người dùng</strong></h3>
<ul>
<li>Mật khẩu mạnh và chính sách quản lý mật khẩu là một trong những yếu tố quan trọng nhất để bảo vệ tài khoản quản trị website. Nên sử dụng các mật khẩu dài, kết hợp giữa chữ cái, số và ký tự đặc biệt. Ngoài ra, việc yêu cầu xác thực đa yếu tố (2FA) giúp tăng cường bảo mật tài khoản người quản trị.</li>
</ul>
<h3>4. <strong>Sao lưu định kỳ</strong></h3>
<ul>
<li>Việc sao lưu thường xuyên giúp bạn có thể phục hồi website nhanh chóng sau một sự cố bảo mật hoặc mất dữ liệu. Hãy lưu trữ các bản sao lưu ở nhiều nơi an toàn, bao gồm cả đám mây và các ổ cứng ngoài.</li>
</ul>
<h3>5. <strong>Tường lửa web (Web Application Firewall - WAF)</strong></h3>
<ul>
<li><strong>WAF</strong> giúp bảo vệ website khỏi các cuộc tấn công web phổ biến như SQL injection, cross-site scripting (XSS), và các mối đe dọa khác. WAF hoạt động bằng cách phân tích và lọc các lưu lượng mạng đến website của bạn, chỉ cho phép các yêu cầu hợp lệ và an toàn.</li>
</ul>
<h3>6. <strong>Kiểm tra và bảo vệ khỏi phần mềm độc hại</strong></h3>
<ul>
<li>Cài đặt phần mềm diệt virus và các công cụ quét mã độc giúp phát hiện và loại bỏ các phần mềm độc hại có thể xâm nhập vào hệ thống website. Điều này giúp bảo vệ website khỏi bị nhiễm mã độc, gây hại cho người dùng và làm giảm độ tin cậy của trang web.</li>
</ul>
<h3>7. <strong>Giám sát và phát hiện xâm nhập</strong></h3>
<ul>
<li>Sử dụng các công cụ giám sát và phát hiện xâm nhập để theo dõi hoạt động của website và xác định các dấu hiệu xâm nhập hoặc hành vi đáng ngờ. Các hệ thống này có thể giúp bạn phát hiện sớm các cuộc tấn công và giảm thiểu thiệt hại.</li>
</ul>
<h3>8. <strong>Quản lý quyền truy cập</strong></h3>
<ul>
<li>Cung cấp quyền truy cập chỉ cho những người dùng cần thiết và giới hạn quyền truy cập đối với các khu vực quan trọng của website. Việc này giúp giảm nguy cơ bị xâm nhập từ các tài khoản quản trị không đáng tin cậy.</li>
</ul>
<p>Bằng cách thực hiện các biện pháp bảo mật trên, bạn có thể bảo vệ thông tin website và dữ liệu của khách hàng khỏi các mối đe dọa trực tuyến.</p>
`,
"image": {
"thumb": "/media/article/t-cyber-security-concept-digital-art_23-2151637760.jpg",
"large": "/media/article/l-cyber-security-concept-digital-art_23-2151637760.jpg"
},
"canonical": "https://hurasoft8.hurasoft.com/an-toan-thong-tin-website",
"path": "/an-toan-thong-tin-website"
},
{
"id": 724,
"category": 39,
"title": "Xu hướng cá nhân hóa trải nghiệm người dùng trong thương mại điện tử",
"summary": "",
"create_time": 1731640923,
"create_by": "HuraSoft",
"last_update": 1732517289,
"last_update_by": "hurasoft - Tiệp",
"content": `
<p>Cá nhân hóa trải nghiệm người dùng là xu hướng nổi bật trong thương mại điện tử, nhằm đáp ứng nhu cầu cá nhân của từng khách hàng dựa trên hành vi, sở thích, và dữ liệu cá nhân. Trong năm 2024, xu hướng này tiếp tục phát triển với các công nghệ tiên tiến, như trí tuệ nhân tạo (AI) và học máy (machine learning), giúp các doanh nghiệp hiểu sâu hơn về khách hàng và tạo ra trải nghiệm tùy chỉnh cao hơn. Dưới đây là một số hướng cá nhân hóa tiêu biểu:</p>
<h3>1. <strong>Đề xuất sản phẩm thông minh dựa trên AI</strong></h3>
<p>AI và machine learning hỗ trợ gợi ý sản phẩm phù hợp với sở thích của từng khách hàng. Các thuật toán phân tích hành vi mua sắm, tìm kiếm và các tương tác trên website để gợi ý sản phẩm một cách chính xác. Ví dụ, Amazon sử dụng hệ thống gợi ý sản phẩm dựa trên lịch sử mua sắm và các sản phẩm mà khách hàng đã xem, giúp tăng tỷ lệ chuyển đổi​</p>
<h3>2. <strong>Tùy chỉnh nội dung và giao diện theo người dùng</strong></h3>
<p>Cá nhân hóa nội dung cho phép website điều chỉnh giao diện, các banner khuyến mãi và thông tin sản phẩm dựa trên vị trí địa lý, ngôn ngữ, và các mối quan tâm của khách hàng. Ví dụ, các trang web TMĐT có thể hiển thị các sản phẩm phổ biến trong khu vực của khách hàng hoặc ưu đãi đặc biệt theo mùa để tăng sự quan tâm​</p>
<h3>3. <strong>Email marketing cá nhân hóa</strong></h3>
<p>Email marketing ngày càng được cải tiến để cá nhân hóa với nội dung phù hợp như sản phẩm vừa xem, các gợi ý đặc biệt, và mã giảm giá dựa trên lịch sử mua hàng. Điều này giúp tăng cường tương tác và khiến khách hàng quay lại trang web thường xuyên hơn.</p>
<h3>4. <strong>Chatbot và hỗ trợ khách hàng theo thời gian thực</strong></h3>
<p>Chatbot được lập trình dựa trên AI có khả năng trả lời các câu hỏi của khách hàng theo cách tự nhiên và có thể cá nhân hóa từng cuộc trò chuyện dựa trên thông tin cá nhân và lịch sử mua sắm. Điều này không chỉ tăng cường trải nghiệm khách hàng mà còn giảm tải công việc cho bộ phận chăm sóc khách hàng.</p>
<h3>5. <strong>Các chương trình khách hàng thân thiết và ưu đãi cá nhân hóa</strong></h3>
<p>Nhiều website TMĐT áp dụng chương trình khách hàng thân thiết với các ưu đãi dành riêng cho từng cấp độ khách hàng. Dữ liệu về tần suất mua hàng và giá trị giỏ hàng giúp xác định các ưu đãi phù hợp, khuyến khích khách hàng quay lại mua sắm nhiều hơn.</p>
<h3>6. <strong>Cá nhân hóa trải nghiệm giỏ hàng</strong></h3>
<p>Các trang thương mại điện tử ngày càng quan tâm tới việc nhắc nhở giỏ hàng bị bỏ quên bằng cách gửi email hoặc thông báo đẩy. Thêm vào đó, khi khách hàng quay lại, trang web có thể hiển thị lại giỏ hàng còn dang dở để giúp họ tiếp tục quá trình mua sắm một cách liền mạch.</p>
<h3>7. <strong>Dữ liệu và quyền riêng tư</strong></h3>
<p>Với xu hướng cá nhân hóa, quyền riêng tư của khách hàng ngày càng được ưu tiên. Các trang TMĐT cần bảo mật dữ liệu và tuân thủ các quy định bảo vệ thông tin cá nhân, đồng thời cung cấp cho khách hàng quyền kiểm soát đối với thông tin cá nhân của họ.</p>
<p>Cá nhân hóa trong TMĐT đang dần trở thành yếu tố cốt lõi giúp doanh nghiệp xây dựng mối quan hệ chặt chẽ hơn với khách hàng, nâng cao trải nghiệm mua sắm và tạo sự khác biệt trong cạnh tranh.</p>
`,
"image": {
"thumb": "/media/article/t-3d-representation-reselling-market_23-2150473097.jpg",
"large": "/media/article/l-3d-representation-reselling-market_23-2150473097.jpg"
},
"canonical": "/xu-huong-ca-nhan-hoa-trai-nghiem-nguoi-dung-trong-thuong-mai-dien-tu",
"path": "/xu-huong-ca-nhan-hoa-trai-nghiem-nguoi-dung-trong-thuong-mai-dien-tue"
},
{
"id": 723,
"category": 39,
"title": "Thu hút người dùng bằng minigame trên website",
"summary": "",
"create_time": 1731640169,
"create_by": "HuraSoft",
"last_update": 1732517364,
"last_update_by": "hurasoft - Tiệp",
"content": `
<p>Phương pháp marketing bằng <strong>minigame trên website</strong> là một cách sáng tạo để thu hút người dùng, tăng tương tác và xây dựng mối quan hệ với khách hàng tiềm năng. Cách tiếp cận này thường tận dụng yếu tố giải trí để khách hàng dễ dàng tương tác với thương hiệu và nhớ đến sản phẩm lâu hơn. Dưới đây là đánh giá chi tiết và ví dụ về phương pháp này:</p>
<h3>Lợi ích của marketing bằng minigame</h3>
<ol>
<li>
<p><strong>Tăng tương tác và thu hút người dùng</strong>: Minigame tạo ra sự thích thú và kích thích người dùng quay lại website nhiều hơn. Khi tham gia trò chơi, người dùng có thể bị cuốn hút bởi các yếu tố thách thức và phần thưởng, khiến họ tương tác lâu hơn với thương hiệu.</p>
</li>
<li>
<p><strong>Thu thập dữ liệu khách hàng</strong>: Trong quá trình chơi, doanh nghiệp có thể yêu cầu người dùng cung cấp thông tin liên hệ như email hoặc số điện thoại để nhận phần thưởng. Điều này giúp doanh nghiệp xây dựng cơ sở dữ liệu cho các chiến dịch tiếp thị tiếp theo.</p>
</li>
<li>
<p><strong>Tăng cường nhận diện thương hiệu</strong>: Minigame giúp thương hiệu dễ dàng được người dùng nhớ đến hơn, đặc biệt khi trò chơi có liên quan đến sản phẩm hoặc dịch vụ mà thương hiệu cung cấp. Thương hiệu có thể khéo léo đưa hình ảnh sản phẩm vào trò chơi để quảng bá.</p>
</li>
<li>
<p><strong>Kích thích hành vi mua hàng</strong>: Nhiều minigame có thể thiết kế để tặng các phần thưởng hoặc mã giảm giá cho người chơi sau khi hoàn thành. Điều này thúc đẩy khách hàng mua sắm ngay sau khi chơi.</p>
</li>
</ol>
<h3>Ví dụ về minigame trong marketing</h3>
<ol>
<li>
<p><strong>Minigame "Vòng quay may mắn" của Tiki</strong>: Tiki, nền tảng TMĐT nổi tiếng tại Việt Nam, đã từng triển khai vòng quay may mắn để thu hút khách hàng. Khi tham gia trò chơi, người dùng có cơ hội nhận các mã giảm giá hấp dẫn. Đây là cách để Tiki vừa tăng tương tác, vừa kích thích hành vi mua hàng.</p>
</li>
<li>
<p><strong>Shopee Shake</strong>: Shopee sử dụng minigame "Shopee Shake" trong các chiến dịch flash sale hoặc sự kiện đặc biệt. Người dùng tham gia chơi để thu thập Shopee Coins, sau đó có thể dùng để đổi mã giảm giá hoặc giảm trực tiếp vào đơn hàng. Minigame này tạo cảm giác thú vị và khuyến khích người dùng quay lại ứng dụng hàng ngày.</p>
</li>
<li>
<p><strong>Các trò chơi đoán vui nhận quà</strong>: Một số thương hiệu như L'Oreal hoặc Samsung cũng sử dụng trò chơi đoán vui để người dùng tham gia và trả lời các câu hỏi liên quan đến sản phẩm. Người chơi có cơ hội nhận quà nếu trả lời đúng. Điều này không chỉ tăng cường nhận diện sản phẩm mà còn giúp khách hàng tìm hiểu kỹ hơn về sản phẩm của thương hiệu.</p>
</li>
</ol>
<h3>Lưu ý khi triển khai minigame</h3>
<ul>
<li><strong>Đảm bảo dễ chơi và hấp dẫn</strong>: Minigame nên được thiết kế sao cho đơn giản, không phức tạp để người chơi dễ dàng tham gia và cảm thấy hứng thú.</li>
<li><strong>Phần thưởng hợp lý</strong>: Các phần thưởng hoặc mã giảm giá phải thực sự có giá trị và thu hút để tạo động lực cho người chơi.</li>
<li><strong>Không quá lạm dụng</strong>: Doanh nghiệp cần tránh tạo quá nhiều minigame dễ gây mệt mỏi cho người dùng. Thay vào đó, hãy tổ chức minigame vào các dịp đặc biệt như lễ hội hoặc sự kiện lớn để tạo điểm nhấn.</li>
</ul>
<p>Minigame là công cụ marketing mạnh mẽ nếu được triển khai hiệu quả, giúp doanh nghiệp tăng tương tác, thu thập dữ liệu và thúc đẩy doanh số.</p>
`,
"image": {
"thumb": "/media/article/t-lucky-dice-game-background_23-2150971831.jpg",
"large": "/media/article/l-lucky-dice-game-background_23-2150971831.jpg"
},
"canonical": "/marketing-bang-minigame-tren-website",
"path": "/marketing-bang-minigame-tren-website"
},
]
}

132
src/pages/contact.tsx
View File

@@ -1,132 +0,0 @@
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
View File

@@ -1,251 +0,0 @@
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
View File

@@ -1,46 +0,0 @@
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
View File

@@ -1,92 +0,0 @@
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
View File

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

32
src/styles/style.css
View File

@@ -1,8 +1,5 @@
@charset "UTF-8";
@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--color-btn: #2cb2ff;
--color-title: #00578a;
@@ -21,14 +18,14 @@
::-webkit-scrollbar-thumb {
background: #2cb2ff;
border-radius: 20px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.7, #2cb2ff), color-stop(0.5, transparent), to(transparent));
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Plus Jakarta Sans", sans-serif;
background-image: -webkit-gradient(
linear,
0 0,
0 100%,
color-stop(0.7, #2cb2ff),
color-stop(0.5, transparent),
to(transparent)
);
}
body {
@@ -404,7 +401,7 @@ table {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-size: 14px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 500;
@@ -697,7 +694,8 @@ table {
line-height: 45px;
margin-right: 10px;
}
.page-job .content-job .list-tab .item-tab.active, .page-job .content-job .list-tab .item-tab:hover {
.page-job .content-job .list-tab .item-tab.active,
.page-job .content-job .list-tab .item-tab:hover {
color: #000;
border-bottom: 1px solid #000;
}
@@ -881,7 +879,11 @@ table {
bottom: 0;
width: 100%;
height: 230px;
background: linear-gradient(360deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 77.09%);
background: linear-gradient(
360deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0) 77.09%
);
border-radius: 0 0 20px 20px;
z-index: 1;
}

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

File diff suppressed because one or more lines are too long

3
src/styles/style.scss
View File

@@ -1,6 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
:root {

11
tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}