Replace project cards with sortable data table on Home page

frontend/src/components/DataTable.css

@@ -98,3 +98,58 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* Clickable rows */
+.data-table__row--clickable {
+  cursor: pointer;
+}
+
+.data-table__row--clickable:hover {
+  background: var(--bg-hover);
+}
+
+/* Responsive table wrapper */
+.data-table--responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.data-table--responsive table {
+  min-width: 800px;
+}
+
+/* Cell with name and icon */
+.data-table .cell-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.data-table .cell-name:hover {
+  color: var(--accent-primary);
+}
+
+/* Date cells */
+.data-table .cell-date {
+  color: var(--text-tertiary);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+}
+
+/* Description cell */
+.data-table .cell-description {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Owner cell */
+.data-table .cell-owner {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}