diff --git a/package-lock.json b/package-lock.json index 6295f0e..13bd85e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,8 @@ "react-icons": "^5.5.0", "react-router-dom": "^6.30.3", "three": "^0.180.0", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yaml": "^2.9.0" }, "devDependencies": { "@babel/core": "^7.28.4", @@ -3847,6 +3848,16 @@ "node": ">=10" } }, + "node_modules/@svgr/core/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/@svgr/hast-util-to-babel-ast": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz", @@ -3920,6 +3931,16 @@ "node": ">=10" } }, + "node_modules/@svgr/plugin-svgo/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/@svgr/webpack": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.5.0.tgz", @@ -5793,6 +5814,16 @@ "node": ">=10" } }, + "node_modules/babel-plugin-macros/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/babel-plugin-named-asset-import": { "version": "0.3.8", "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz", @@ -6879,6 +6910,16 @@ "node": ">=8" } }, + "node_modules/cosmiconfig/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/cross-env": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", @@ -7282,6 +7323,16 @@ "postcss": "^8.2.15" } }, + "node_modules/cssnano/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/csso": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", @@ -14486,6 +14537,16 @@ "node": ">=10" } }, + "node_modules/postcss-loader/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "dev": true, + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/postcss-logical": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", @@ -18096,21 +18157,6 @@ } } }, - "node_modules/tailwindcss/node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", @@ -20003,13 +20049,18 @@ "license": "ISC" }, "node_modules/yaml": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", - "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true, + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz", + "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==", "license": "ISC", + "bin": { + "yaml": "bin.mjs" + }, "engines": { - "node": ">= 6" + "node": ">= 14.6" + }, + "funding": { + "url": "https://github.com/sponsors/eemeli" } }, "node_modules/yargs": { diff --git a/package.json b/package.json index 9fac481..152f08f 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "react-icons": "^5.5.0", "react-router-dom": "^6.30.3", "three": "^0.180.0", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yaml": "^2.9.0" }, "scripts": { "start": "react-scripts start", diff --git a/public/1(1).png b/public/1(1).png new file mode 100644 index 0000000..c05277d Binary files /dev/null and b/public/1(1).png differ diff --git a/public/1.png b/public/1.png index c05277d..15c879d 100644 Binary files a/public/1.png and b/public/1.png differ diff --git a/public/2(1).jpg b/public/2(1).jpg new file mode 100644 index 0000000..2314fdd Binary files /dev/null and b/public/2(1).jpg differ diff --git a/public/2.jpg b/public/2.jpg index 2314fdd..57a77a4 100644 Binary files a/public/2.jpg and b/public/2.jpg differ diff --git a/public/3(1).png b/public/3(1).png new file mode 100644 index 0000000..85cbcca Binary files /dev/null and b/public/3(1).png differ diff --git a/public/3.png b/public/3.png index 85cbcca..e4d2a2e 100644 Binary files a/public/3.png and b/public/3.png differ diff --git a/public/4(1).jpg b/public/4(1).jpg new file mode 100644 index 0000000..89a9afc Binary files /dev/null and b/public/4(1).jpg differ diff --git a/public/4.jpg b/public/4.jpg index 89a9afc..b914d82 100644 Binary files a/public/4.jpg and b/public/4.jpg differ diff --git a/src/App.js b/src/App.js index 89b72e9..bac4c83 100644 --- a/src/App.js +++ b/src/App.js @@ -643,6 +643,8 @@ function App() { height: "150px", display: "block", transition: "transform 0.5s ease", + objectFit: "cover", + objectPosition: "center", }} loading="lazy" /> diff --git a/src/components/InfoCards/InfoCards.css b/src/components/InfoCards/InfoCards.css index ef4e79d..c5aab7b 100644 --- a/src/components/InfoCards/InfoCards.css +++ b/src/components/InfoCards/InfoCards.css @@ -15,11 +15,11 @@ @media (min-width: 1024px) { .info-cards-container { flex-direction: row; - justify-content: space-between; - align-items: flex-start; - flex-wrap: nowrap; + justify-content: center; + align-items: stretch; + flex-wrap: wrap; padding: 8rem 1rem; - gap: 0.25rem; + gap: 2rem; } } @@ -52,7 +52,7 @@ @media (min-width: 1024px) { .info-card { - width: 33.333%; + width: 45%; min-width: 360px; min-height: 500px; } diff --git a/src/components/InfoCards/InfoCards.jsx b/src/components/InfoCards/InfoCards.jsx index d16d472..b30232c 100644 --- a/src/components/InfoCards/InfoCards.jsx +++ b/src/components/InfoCards/InfoCards.jsx @@ -1,7 +1,7 @@ import React from 'react'; import './InfoCards.css'; import FadeInOnScroll from '../FadeInOnScroll/FadeInOnScroll'; -import { FaBookOpen, FaCalendarAlt, FaBox } from 'react-icons/fa'; +import { FaBookOpen, FaCalendarAlt, FaBox, FaCalculator } from 'react-icons/fa'; const InfoCards = () => { return ( @@ -26,7 +26,7 @@ const InfoCards = () => { target="_blank" rel="noopener noreferrer" > - Available Now + Truy Cập @@ -50,7 +50,7 @@ const InfoCards = () => { target="_blank" rel="noopener noreferrer" > - Available Now + Truy Cập @@ -75,7 +75,31 @@ const InfoCards = () => { target="_blank" rel="noopener noreferrer" > - Available Now + Truy Cập + + + + + {/* Quamon */} + +
+
+ +
+ +

Quamon

+

+ Ứng dụng hỗ trợ sinh viên quản lý điểm số, tính toán điểm trung bình (GPA) + và theo dõi tiến độ học tập, giúp bạn lên chiến lược "qua môn" hiệu quả. +

+ + + Truy Cập
diff --git a/src/index.css b/src/index.css index c8f72aa..5777f62 100644 --- a/src/index.css +++ b/src/index.css @@ -1,7 +1,7 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&subset=vietnamese&display=swap'); * { - font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -16,4 +16,4 @@ body { code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; -} +} \ No newline at end of file