feat: add Bento style to MCP page

public/locales/en.json

@@ -15,6 +15,9 @@
   "ComponentList": {
     "tableComponentHeader": "Name",
     "tableVersionHeader": "Version"
+  },
+  "MemberList": {
+
   },
   "FluxList": {
     "tableNameHeader": "Name",
@@ -390,9 +393,9 @@
   "Hints": {
     "CrossplaneHint": {
       "title": "Crossplane",
-      "subtitle": "Managed Resources Readiness",
+      "subtitle": "Manage your cloud landscape in code",
       "activeStatus": "Active v",
-      "progressAvailable": "% Available",
+      "progressAvailable": "Available",
       "noResources": "No Resources",
       "inactive": "Inactive",
       "activate": "Activate",
@@ -406,9 +409,9 @@
     },
     "GitOpsHint": {
       "title": "Flux",
-      "subtitle": "GitOps Progress",
+      "subtitle": "Persist desired state in code repsitories",
       "activeStatus": "Active v",
-      "progressAvailable": "% Available",
+      "progressAvailable": "Available",
       "noResources": "No Resources",
       "inactive": "Inactive",
       "activate": "Activate",
@@ -419,15 +422,30 @@
         "unmanaged": "Unmanaged"
       }
     },
-    "VaultHint": {
-      "title": "Vault",
-      "subtitle": "Rotating Secrets Progress",
+    "MembersHint": {
+      "title": "Members",
+      "subtitle": "Manage access to your Managed Control Plane",
+      "users": "Users",
+      "serviceAccounts": "Service Accounts"
+    },
+    "ESOHint": {
+      "title": "ESO",
+      "subtitle": "Secure secrets with rotation",
       "activeStatus": "Active v",
-      "progressAvailable": "% Available",
+      "progressAvailable": "Available",
       "noResources": "No Resources",
       "inactive": "Coming soon...",
       "activate": "Activate"
     },
+    "KyvernoHint": {
+      "title": "Kyverno",
+      "subtitle": "Enforce policies",
+      "activeStatus": "Active v",
+      "progressAvailable": "Available",
+      "noResources": "No Resources",
+      "inactive": "Inactive",
+      "activate": "Activate"
+    },
     "common": {
       "loading": "Loading...",
       "errorLoadingResources": "Error loading resources",

src/components/BentoGrid/BentoGrid.module.css

@@ -0,0 +1,92 @@
+/* Bento Grid Layout - 12 columns x 6 rows */
+.bentoGrid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  gap: 24px;
+  width: 100%;
+  height: 600px; /* Fixed height for the entire grid */
+  position: relative;
+}
+
+/* Base card styling */
+.bentoCard {
+  border-radius: 18px; /* Increased to match or slightly exceed ui5-card */
+  overflow: hidden;
+  background: var(--sapTile_Background);
+  border: 1px solid var(--sapTile_BorderColor);
+  box-shadow: var(--sapContent_Shadow0); /* Reduced shadow intensity */
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.bentoCard:hover {
+  box-shadow: var(--sapContent_Shadow1); /* Reduced hover shadow intensity */
+  transform: translateY(-2px);
+}
+
+/* Card sizes are explicitly positioned via gridColumn/gridRow props */
+/* Layout: 
+   - Left: Extra large graph (8 cols x 4 rows) + Large crossplane (8 cols x 2 rows)
+   - Right: Two medium GitOps (4 cols x 2 rows each) + Two small underneath (2 cols x 2 rows each)
+*/
+
+/* Fallback positioning for cards in case the layout breaks */
+.card-small {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.card-medium {
+  grid-column: span 3;
+  grid-row: span 2;
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  .bentoCard {
+    background: var(--sapTile_Background);
+    border-color: var(--sapTile_BorderColor);
+  }
+}
+
+/* Responsive behavior - simplified as requested */
+@media (max-width: 768px) {
+  .bentoGrid {
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(10, 1fr);
+    height: 1000px;
+  }
+
+  .card-extra-large {
+    grid-column: 1 / 7;
+    grid-row: 1 / 5;
+  }
+
+  .card-large {
+    grid-column: 1 / 7;
+    grid-row: 5 / 7;
+  }
+
+  .card-medium:nth-of-type(3) {
+    grid-column: 1 / 7;
+    grid-row: 7 / 9;
+  }
+
+  .card-medium:nth-of-type(4) {
+    grid-column: 1 / 7;
+    grid-row: 9 / 11;
+  }
+
+  .card-small:nth-of-type(5) {
+    grid-column: 1 / 4;
+    grid-row: 11 / 13;
+  }
+
+  .card-small:nth-of-type(6) {
+    grid-column: 4 / 7;
+    grid-row: 11 / 13;
+  }
+}

src/components/BentoGrid/BentoGrid.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styles from './BentoGrid.module.css';
+
+export type CardSize = 'small' | 'medium' | 'large' | 'extra-large';
+
+export interface BentoCardProps {
+  size: CardSize;
+  children: React.ReactNode;
+  className?: string;
+  gridColumn?: string;
+  gridRow?: string;
+}
+
+export interface BentoGridProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const BentoCard: React.FC<BentoCardProps> = ({ size, children, className = '', gridColumn, gridRow }) => {
+  const cardClass = `${styles.bentoCard} ${styles[`card-${size}`]} ${className}`;
+
+  const style: React.CSSProperties = {};
+  if (gridColumn) style.gridColumn = gridColumn;
+  if (gridRow) style.gridRow = gridRow;
+
+  return (
+    <div className={cardClass} style={style}>
+      {children}
+    </div>
+  );
+};
+
+export const BentoGrid: React.FC<BentoGridProps> = ({ children, className = '' }) => {
+  return <div className={`${styles.bentoGrid} ${className}`}>{children}</div>;
+};

src/components/BentoGrid/ComponentCard/ComponentCard.module.css

@@ -0,0 +1,131 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.disabled {
+  opacity: 0.6;
+  user-select: none; 
+  pointer-events: none; 
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.disabledOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: transparent;
+  object-fit: cover;
+}
+
+.contentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0;
+  flex: 1;
+}
+
+.contentContainerMultiple {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0;
+  flex: 1;
+}
+
+.progressBarContainer {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  max-width: 500px;
+  padding: 0 0.5rem;
+}
+
+.progressBarContainerSmall {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  max-width: 400px;
+  padding: 0 0.5rem;
+}
+
+.progressBarContainerMedium {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  max-width: 600px;
+  padding: 0 0.75rem;
+}
+
+.progressBarContainerLarge {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  max-width: none;
+  padding: 0 1rem;
+}
+
+.progressBar {
+  width: 100%;
+}
+
+.activateButton {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.activateButtonClickable {
+  cursor: pointer;
+}
+
+.activateButtonDefault {
+  cursor: default;
+}
+
+.expandButton {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  min-width: 32px;
+  height: 32px;
+  z-index: 10;
+}
+
+.expandButtonSmall {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  min-width: 24px;
+  height: 24px;
+  z-index: 10;
+}