UI changes

src/components/LandingPage.tsx

@@ -1,6 +1,19 @@
 import React from 'react';
-import { Box, Card, CardContent, Typography, Avatar, CardActionArea, useTheme } from '@mui/material';
-import { Agent } from '../contexts/AgentContext';
+import { 
+  Box, 
+  Card, 
+  CardContent, 
+  Typography, 
+  CardActionArea, 
+  useTheme,
+  Grid,
+  Container,
+  Stack 
+} from '@mui/material';
+import { Agent } from '../contexts/AgentContext'; // Assuming this import is correct
+
+// Helper constants for beautiful design
+const CARD_WIDTH = 280;
 
 type AgentCardProps = {
   agent: Agent;
@@ -10,54 +23,88 @@ type AgentCardProps = {
 const AgentCard: React.FC<AgentCardProps> = ({ agent, onSelect }) => {
   const theme = useTheme();
   
+  const isDisabled = agent.upcoming;
+
+  // Determine colors based on status
+  const cardSx = isDisabled ? {
+    opacity: 0.6,
+    cursor: 'not-allowed',
+    bgcolor: theme.palette.action.disabledBackground,
+  } : {
+    cursor: 'pointer',
+    bgcolor: theme.palette.background.paper,
+    boxShadow: theme.shadows[4],
+    transition: 'transform 0.3s, box-shadow 0.3s',
+    '&:hover': {
+      transform: 'translateY(-6px)',
+      boxShadow: theme.shadows[12], // Deeper shadow on hover
+      borderColor: theme.palette.primary.main,
+    },
+    border: `1px solid ${theme.palette.divider}`,
+  };
+
   return (
     <Card 
       sx={{ 
-        maxWidth: 300, 
+        width: CARD_WIDTH,
+        borderRadius: 3, // Slightly more rounded edges
         m: 2,
-        transition: 'transform 0.2s, box-shadow 0.2s',
-        '&:hover': {
-          transform: 'translateY(-4px)',
-          boxShadow: theme.shadows[8],
-        },
-        opacity: agent.upcoming ? 0.7 : 1,
+        ...cardSx,
       }}
-      onClick={() => !agent.upcoming && onSelect(agent)}
+      onClick={() => !isDisabled && onSelect(agent)}
     >
-      <CardActionArea disabled={agent.upcoming}>
-        <CardContent sx={{ textAlign: 'center', pt: 4 }}>
-          <Avatar 
-            src={agent.avatar} 
-            sx={{ 
-              width: 80, 
-              height: 80, 
-              mx: 'auto',
-              mb: 2,
-              border: `2px solid ${theme.palette.primary.main}`
-            }} 
+      <CardActionArea disabled={isDisabled} sx={{ height: '100%' }}>
+        <CardContent 
+          sx={{ 
+            textAlign: 'center', 
+            py: 4,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          {/* Agent Logo/Image */}
+          <Box
+            component="img"
+            src={agent.avatar}
+            alt={agent.name}
+            sx={{
+              width: 120,
+              height: 120,
+              mb: 3,
+              objectFit: 'contain',
+              maxWidth:'100 px' ,
+              bgcolor: 'transparent',
+            }}
           />
-          <Typography variant="h6" component="div" gutterBottom>
-            {agent.name}
-            {agent.upcoming && (
+
+          {/* Agent Name and Status */}
+          <Stack direction="row" alignItems="center" justifyContent="center" spacing={1} mb={1}>
+            <Typography variant="h6" component="div" sx={{ fontWeight: 600 }}>
+              {agent.name}
+            </Typography>
+            {isDisabled && (
               <Box 
                 component="span" 
                 sx={{
-                  backgroundColor: theme.palette.warning.light,
-                  color: theme.palette.warning.contrastText,
-                  fontSize: '0.7rem',
+                  backgroundColor: theme.palette.primary.main, // Premium badge color
+                  color: theme.palette.primary.contrastText,
+                  fontSize: '0.75rem',
                   px: 1,
-                  py: 0.3,
-                  borderRadius: 1,
-                  ml: 1,
-                  display: 'inline-block',
-                  verticalAlign: 'middle'
+                  py: 0.2,
+                  borderRadius: 99, // Pill shape
+                  fontWeight: 600,
+                  textTransform: 'uppercase'
                 }}
               >
-                Coming Soon
+                Upcoming
               </Box>
             )}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
+          </Stack>
+          
+          {/* Description */}
+          <Typography variant="body2" color="text.secondary" sx={{ minHeight: '40px' }}>
             {agent.description}
           </Typography>
         </CardContent>
@@ -72,40 +119,58 @@ type LandingPageProps = {
 };
 
 const LandingPage: React.FC<LandingPageProps> = ({ agents, onAgentSelect }) => {
+  const theme = useTheme();
+
   return (
     <Box
       sx={{
+        minHeight: '100vh',
+        width: '100%',
         display: 'flex',
         flexDirection: 'column',
-        minHeight: '100vh',
         alignItems: 'center',
-        justifyContent: 'center',
-        p: 3,
-        bgcolor: 'background.default',
+        pt: 8, // Padding top for header
+        pb: 8,
+        // Use a slight gradient or subtle background pattern for depth
+        bgcolor: theme.palette.mode === 'dark' ? '#121212' : '#f5f7fa', 
       }}
     >
-      <Typography variant="h3" component="h1" gutterBottom align="center" sx={{ mb: 4 }}>
-        Select an AI Assistant
-      </Typography>
-      <Box 
-        sx={{ 
-          display: 'flex', 
-          flexWrap: 'wrap', 
-          justifyContent: 'center',
-          maxWidth: '1200px',
-          width: '100%',
-        }}
-      >
-        {agents.map((agent) => (
-          <AgentCard 
-            key={agent.id} 
-            agent={agent} 
-            onSelect={onAgentSelect} 
-          />
-        ))}
-      </Box>
+      <Container maxWidth="lg">
+        {/* Header/Hero Section */}
+        <Box sx={{ textAlign: 'center', mb: 6, mt: 4 }}>
+          <Typography 
+            variant="h3" 
+            component="h1" 
+            gutterBottom 
+            sx={{ fontWeight: 700, color: theme.palette.text.primary }}
+          >
+            Choose Your AI Assistant
+          </Typography>
+          <Typography variant="h6" color="text.secondary" maxWidth="md" mx="auto">
+            Explore specialized AI agents designed to tackle specific legal research and analysis challenges.
+          </Typography>
+        </Box>
+
+        {/* Agent Cards Grid */}
+        <Grid 
+          container 
+          spacing={4} 
+          justifyContent="center"
+        >
+          {agents.map((agent) => (
+            <Grid item key={agent.id} xs={12} sm={6} md={4} lg={3} 
+              sx={{ display: 'flex', justifyContent: 'center' }}
+            >
+              <AgentCard 
+                agent={agent} 
+                onSelect={onAgentSelect} 
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
     </Box>
   );
 };
 
-export default LandingPage;
+export default LandingPage;