theme fixes

src/Home.tsx

@@ -1,12 +1,108 @@
 import * as React from "react";
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, Button, Container, Stack } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 export default function Home() {
+  const navigate = useNavigate();
+
   return (
-    <Box sx={{ p: 4 }}>
-      <Typography variant="h1" gutterBottom>
-        Welcome to Khata
-      </Typography>
+    <Box
+      sx={{
+        width: "100%",
+        minHeight: "calc(100vh - 64px)", // accounting for header
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        overflow: "hidden",
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: "-20%",
+          left: "-10%",
+          width: "50%",
+          height: "60%",
+          background: "radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(0,0,0,0) 70%)",
+          zIndex: 0,
+        },
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          bottom: "-20%",
+          right: "-10%",
+          width: "50%",
+          height: "60%",
+          background: "radial-gradient(circle, rgba(236,72,153,0.15) 0%, rgba(0,0,0,0) 70%)",
+          zIndex: 0,
+        },
+      }}
+    >
+      <Container maxWidth="lg" sx={{ position: "relative", zIndex: 1 }}>
+        <Stack
+          spacing={4}
+          alignItems="center"
+          textAlign="center"
+          sx={{
+            p: { xs: 4, md: 8 },
+            backdropFilter: "blur(20px)",
+            backgroundColor: (theme) => 
+               theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.03)" : "rgba(255, 255, 255, 0.6)",
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 4,
+            boxShadow: (theme) =>
+              theme.palette.mode === "dark"
+                ? "0 8px 32px 0 rgba(0, 0, 0, 0.37)"
+                : "0 8px 32px 0 rgba(31, 38, 135, 0.07)",
+          }}
+        >
+          <Typography
+            variant="h1"
+            sx={{
+              fontWeight: 800,
+              fontSize: { xs: "3rem", md: "5rem" },
+              background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              mb: 2,
+            }}
+          >
+            Welcome to Khata
+          </Typography>
+
+          <Typography
+            variant="h5"
+            color="text.secondary"
+            sx={{ maxWidth: "600px", lineHeight: 1.6 }}
+          >
+            Your intelligent, extensible financial ledger. Control accounts, manage transactions, and track your data dynamically with our OpenAPI-driven architecture.
+          </Typography>
+
+          <Box mt={4}>
+            <Button
+              variant="contained"
+              size="large"
+              endIcon={<ArrowForwardIcon />}
+              onClick={() => navigate("/admin")}
+              sx={{
+                px: 4,
+                py: 1.5,
+                borderRadius: "50px",
+                fontWeight: "bold",
+                background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
+                transition: "transform 0.2s ease-in-out, box-shadow 0.2s",
+                "&:hover": {
+                  transform: "translateY(-3px)",
+                  boxShadow: "0 8px 20px rgba(236,72,153,0.4)",
+                },
+              }}
+            >
+              Enter Dashboard
+            </Button>
+          </Box>
+        </Stack>
+      </Container>
     </Box>
   );
 }