Merge branch 'update_vers'

src/components/Card.js

@@ -0,0 +1,17 @@
+// src/components/Card.jsx
+import React from 'react';
+import styles from './Card.module.css'; // Import the corresponding CSS
+import Link from '@docusaurus/Link'; // Import Link component for internal navigation
+
+
+const Card = ({ imageUrl, headerText, linkUrl, isNew }) => (
+  <Link to={linkUrl} className={styles.cardLink}>
+    <div className={styles.card}>
+      {isNew && <div className={styles.newLabel}>✨New</div>}
+      <img src={require(`/static/img/${imageUrl}`).default} alt={headerText} className={styles.cardImage} />
+      <h3 className={styles.cardHeader}>{headerText}</h3>
+    </div>
+ </Link>
+);
+
+export default Card;

src/components/Card.module.css

@@ -0,0 +1,44 @@
+.cardLink {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  position: relative; /* Ensures that positioning is relative to the card */
+}
+
+.card {
+  position: relative; /* Needed for absolute positioning of the label */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  overflow: hidden;
+  margin: 10px;
+}
+
+.newLabel {
+  position: absolute;
+  top: 10px; /* Adjust as necessary */
+  right: 10px; /* Adjust as necessary */
+  background-color: #5332CD; /* Choose color based on your design */
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px; /* Rounded corners */
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+.cardImage {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.card:hover {
+  transform: scale(1.05); /* Optional: scale up on hover */
+}
+
+.cardHeader {
+  padding: 10px;
+  text-align: center;
+}

src/components/constants.js

@@ -4,3 +4,5 @@ export const magenta = 'rgb(220, 84, 183)';
 export const green = 'rgb(19, 173, 102)';
 export const orange = 'rgb(255, 144, 36)';
 export const teal = 'rgb(0,139,139)';
+export const purple = 'rgb(111,7,111)';
+export const brown = '#6C4F24';

src/css/custom.css

@@ -6,7 +6,7 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: #5835D4;
   --ifm-color-primary-dark: rgb(33, 175, 144);
   --ifm-color-primary-darker: rgb(31, 165, 136);
   --ifm-color-primary-darkest: rgb(26, 136, 112);
@@ -86,4 +86,10 @@ h1 {
 
 .hidden {
 display: none !important;
+}
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* Creates three columns */
+  gap: 20px; /* Space between the cards */
 }