my-app/src/components/ui/Card.jsx

@@ -1,17 +1,55 @@
 import React from 'react';
-import styles from './Card.module.css'; // Import the CSS Module
+import styles from './Card.module.css';
+
+const Card = ({ imageUrl, header, subheader, features = [], onClick, as: Component = 'div' }) => {
+	const cardProps = {
+		className: styles.card,
+		onClick,
+		...(Component === 'div' && {
+			role: "button",
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					onClick?.(e);
+				}
+			}
+		})
+	};
 
-const Card = ({ imageUrl, header, subheader }) => {
 	return (
-		<div className={styles.card} style={{ backgroundImage: `url(${imageUrl})` }}>
-			<div className={styles.gradientOverlay}>
-				<div className={styles.textContainer}>
-					<h2 className={styles.header}>{header}</h2>
-					<div className={styles.line}></div>
-					<h3 className={styles.subheader}>{subheader}</h3>
+		<Component {...cardProps}>
+			<div className={styles.imageSection} style={{ backgroundImage: `url(${imageUrl})` }}>
+				<div className={styles.imageOverlay}></div>
+			</div>
+			
+			<div className={styles.contentSection}>
+				<h3 className={styles.header}>{header}</h3>
+				{subheader && (
+					<p className={styles.subheader}>{subheader}</p>
+				)}
+				{features.length > 0 && (
+					<div className={styles.features}>
+						{features.map((feature, index) => (
+							<div key={index} className={styles.feature}>
+								{feature.icon && (
+									<div className={styles.featureIcon}>
+										{feature.icon}
+									</div>
+								)}
+								<span>{feature.text}</span>
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+			
+			<div className={styles.actionSection}>
+				<div className={styles.actionIcon}>
+					→
 				</div>
 			</div>
-		</div>
+		</Component>
 	);
 };
 

my-app/src/components/ui/Card.module.css

@@ -1,46 +1,116 @@
 .card {
-	width: 100%; /* Adjust width as needed */
-	height: 300px; /* Adjust height as needed */
+	display: flex;
+	background: var(--bg-primary);
+	border: 2px solid var(--border-light);
+	border-radius: var(--border-radius-xl);
+	overflow: hidden;
+	cursor: pointer;
+	transition: all var(--transition-medium);
+	box-shadow: var(--shadow-sm);
+	text-decoration: none;
+	color: inherit;
+}
+
+.card:hover {
+	border-color: var(--color-primary);
+	box-shadow: var(--shadow-lg);
+	transform: translateY(-1px);
+}
+
+.card:focus {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}
+
+.imageSection {
+	width: 120px;
+	min-width: 120px;
+	height: 100px;
 	background-size: cover;
 	background-position: center;
+	background-color: var(--bg-secondary);
 	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 }
 
-.gradientOverlay {
+.imageOverlay {
 	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: linear-gradient(to bottom, transparent, #05305E);
-	display: flex;
-	align-items: center;
-	justify-content: center;
+	inset: 0;
+	background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
 }
 
-.textContainer {
-	text-align: center;
-	color: white;
-	padding: 20px;
+.contentSection {
+	flex: 1;
+	padding: var(--spacing-lg);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: var(--spacing-sm);
 }
 
 .header {
 	margin: 0;
-	font-size: 2em; /* Adjust font size as needed */
-}
-
-.line {
-	width: 100%;
-	height: 3px; /* Adjust thickness as needed */
-	background-color: white;
-	margin: 10px auto;
+	font-size: var(--font-size-2xl);
+	font-weight: var(--font-weight-semibold);
+	color: var(--text-primary);
+	line-height: var(--line-height-tight);
 }
 
 .subheader {
 	margin: 0;
-	font-size: 1.2em; /* Adjust font size as needed */
-	font-weight: normal;
+	font-size: var(--font-size-md);
+	font-weight: var(--font-weight-normal);
+	color: var(--text-secondary);
+	line-height: var(--line-height-normal);
+}
+
+.features {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-sm);
+	margin-top: var(--spacing-xs);
+}
+
+.feature {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+	font-size: var(--font-size-sm);
+	color: var(--text-tertiary);
+	padding: var(--spacing-xs) var(--spacing-sm);
+	background: var(--bg-secondary);
+	border-radius: var(--border-radius-sm);
+}
+
+.featureIcon {
+	width: 14px;
+	height: 14px;
+	color: var(--color-primary);
+}
+
+.actionSection {
+	width: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
+	position: relative;
+}
+
+.actionSection::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background: rgba(255, 255, 255, 0.1);
+	opacity: 0;
+	transition: opacity var(--transition-fast);
+}
+
+.card:hover .actionSection::before {
+	opacity: 1;
+}
+
+.actionIcon {
+	width: 24px;
+	height: 24px;
+	color: white;
 }