WD-51: tasks for landing page

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",

src/App.js

@@ -643,6 +643,8 @@ function App() {
                       height: "150px",
                       display: "block",
                       transition: "transform 0.5s ease",
+                      objectFit: "cover",     
+                      objectPosition: "center",
                     }}
                     loading="lazy"
                   />

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;
   }

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
           </a>
         </div>
       </FadeInOnScroll>
@@ -50,7 +50,7 @@ const InfoCards = () => {
             target="_blank"
             rel="noopener noreferrer"
           >
-            Available Now
+            Truy Cập
           </a>
         </div>
       </FadeInOnScroll>
@@ -75,7 +75,31 @@ const InfoCards = () => {
             target="_blank"
             rel="noopener noreferrer"
           >
-            Available Now
+            Truy Cập
+          </a>
+        </div>
+      </FadeInOnScroll>
+
+      {/* Quamon */}
+      <FadeInOnScroll direction="left" delay={400}>
+        <div className="info-card" style={{ marginLeft: '0.2rem' }}>
+          <div className="card-icon">
+            <FaCalculator className="icon" />
+          </div>
+
+          <h3 className="card-title">Quamon</h3>
+          <p className="card-description">
+            Ứ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ả.
+          </p>
+
+          <a
+            className="card-badge"
+            href="https://quamon.svuit.org/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Truy Cập
           </a>
         </div>
       </FadeInOnScroll>

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;
-}
+}