refactor: landing page

clean-architecture-visualizer/frontend/src/components/common/HomeButtonCard.module.css

@@ -0,0 +1,88 @@
+.card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-card);
+  border: 1px solid var(--color-border);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-raised);
+}
+
+.illustration {
+  padding: var(--space-5) var(--space-4);
+  background-color: var(--color-surface);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.stepBadge {
+  font-family: var(--font-sans);
+  font-size: var(--text-micro);
+  font-weight: 700;
+  letter-spacing: var(--tracking-eyebrow);
+  text-transform: uppercase;
+  padding: 3px var(--space-2);
+  border-radius: var(--radius-pill);
+  width: fit-content;
+}
+
+.illustrationInner {
+  border-radius: var(--radius-card);
+  padding: var(--space-4) var(--space-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.illustrationImg {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+.body {
+  padding: var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.title {
+  font-family: var(--font-sans);
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: var(--leading-tight);
+}
+
+.description {
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  color: var(--color-text-mute);
+  line-height: var(--leading-loose);
+}
+
+.cta {
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  font-weight: 600;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  margin-top: var(--space-1);
+}
+
+.cta:hover {
+  opacity: 0.75;
+}

clean-architecture-visualizer/frontend/src/components/common/HomeButtonCard.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import {
-  Box,
-  Typography,
-  Card,
-  CardActionArea,
-  CardContent,
-} from '@mui/material';
+import { Box, Card, CardActionArea } from '@mui/material';
+import styles from './HomeButtonCard.module.css';
 
 interface HomeButtonCardProps {
   title: string;
   description: string;
   to: string;
   icon: React.ReactElement;
-  bgColor: string;
+  bgColor?: string;
   iconColor?: string;
+  badge?: string;
+  badgeBg?: string;
+  badgeColor?: string;
+  ctaLabel?: string;
+  ctaColor?: string;
 }
 
 const isExternalLink = (to: string) => /^https?:\/\//.test(to);
@@ -24,60 +24,92 @@ const HomeButtonCard = ({
   description,
   to,
   icon,
-  bgColor,
+  bgColor = 'white',
   iconColor = 'white',
+  badge,
+  badgeBg = '#EBF4FC',
+  badgeColor = '#207FD4',
+  ctaLabel = 'Get started',
+  ctaColor = 'primary.main',
 }: HomeButtonCardProps) => {
   const linkProps = isExternalLink(to)
-    ? { component: 'a', href: to, target: '_blank', rel: 'noopener noreferrer' }
+    ? {
+        component: 'a' as const,
+        href: to,
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      }
     : { component: RouterLink, to };
 
   return (
-    <Card elevation={0} sx={{ background: 'transparent', width: '100%' }}>
+    <Card
+      elevation={0}
+      sx={{ background: 'transparent', width: '100%', bgcolor: bgColor }}
+      className={styles.card}
+    >
       <CardActionArea
         {...linkProps}
         sx={{
           borderRadius: 4,
           p: 2,
           textAlign: 'center',
+          display: 'block',
           '&:hover .icon-box': { transform: 'scale(1.05)' },
         }}
       >
-        <Box
-          className="icon-box"
-          sx={{
-            width: 140,
-            height: 140,
-            mx: 'auto',
-            mb: 3,
-            bgcolor: bgColor,
-            borderRadius: 8,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            transition: 'transform 0.2s ease-in-out',
-          }}
-        >
-          {/* Ensure the icon itself is treated as a block or flex item */}
-          {React.cloneElement(icon as React.ReactElement, {
-            sx: {
-              fontSize: 70,
-              color: iconColor,
-              display: 'block',
-            },
-          })}
-        </Box>
-        <CardContent sx={{ p: 0 }}>
-          <Typography variant="h5" fontWeight="bold" gutterBottom>
-            {title}
-          </Typography>
-          <Typography
-            variant="body2"
-            color="text.secondary"
-            sx={{ maxWidth: 220, mx: 'auto' }}
+        <div className={styles.illustration}>
+          {badge && (
+            <Box
+              component="span"
+              className={styles.stepBadge}
+              sx={{
+                bgcolor: badgeBg,
+                color: badgeColor,
+              }}
+            >
+              {badge}
+            </Box>
+          )}
+
+          <Box
+            className="icon-box"
+            sx={{
+              width: 140,
+              height: 140,
+              mx: 'auto',
+              mb: 3,
+              bgcolor: bgColor,
+              borderRadius: 8,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'transform 0.2s ease-in-out',
+            }}
           >
-            {description}
-          </Typography>
-        </CardContent>
+            {React.cloneElement(icon as React.ReactElement, {
+              sx: {
+                ...((
+                  icon as React.ReactElement & {
+                    props?: { sx?: Record<string, unknown> };
+                  }
+                ).props?.sx || {}),
+                fontSize: 72,
+                color: iconColor,
+              },
+            })}
+          </Box>
+        </div>
+
+        <div className={styles.body}>
+          <h2 className={styles.title}>{title}</h2>
+
+          <p className={styles.description}>{description}</p>
+
+          <Box component="span" className={styles.cta} sx={{ color: ctaColor }}>
+            {ctaLabel}
+            <span aria-hidden>›</span>
+          </Box>
+        </div>
       </CardActionArea>
     </Card>
   );

clean-architecture-visualizer/frontend/src/components/common/HomeButtonGrid.tsx

@@ -7,8 +7,13 @@ interface GridItem {
   description: string;
   to: string;
   icon: React.ReactElement;
-  bgColor: string;
+  bgColor?: string;
   iconColor?: string;
+  badge?: string;
+  badgeBg?: string;
+  badgeColor?: string;
+  ctaLabel?: string;
+  ctaColor?: string;
 }
 
 interface HomeButtonGridProps {
@@ -37,6 +42,11 @@ const HomeButtonGrid = ({ items }: HomeButtonGridProps) => {
             icon={item.icon}
             bgColor={item.bgColor}
             iconColor={item.iconColor}
+            badge={item.badge}
+            badgeBg={item.badgeBg}
+            badgeColor={item.badgeColor}
+            ctaLabel={item.ctaLabel}
+            ctaColor={item.ctaColor}
           />
         </Grid>
       ))}