Files
jenna-mcp/src/pages/Home.tsx
2025-10-20 14:01:08 +08:00

82 lines
2.3 KiB
TypeScript

import { Link } from "react-router-dom";
import {
Button,
Container,
Stack,
Title,
Text,
Group,
Card,
Divider,
} from "@mantine/core";
import { IconArrowRight, IconRocket, IconTerminal2 } from "@tabler/icons-react";
import clientRoutes from "@/clientRoutes";
export default function Home() {
return (
<Container
mih="100vh"
px="md"
size={"full"}
w={"100%"}
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background:
"radial-gradient(circle at top left, rgba(0,255,200,0.08), transparent 70%)",
}}
>
<Card
radius="xl"
p="xl"
withBorder
style={{
textAlign: "center",
background:
"linear-gradient(145deg, rgba(20,20,20,0.95), rgba(45,45,45,0.9))",
borderColor: "rgba(100,100,100,0.2)",
boxShadow: "0 0 25px rgba(0,255,200,0.08)",
backdropFilter: "blur(6px)",
}}
>
<Stack gap="lg" align="center">
<Group gap={8}>
<IconRocket size={28} color="teal" />
<Title order={1} c="gray.0">
Welcome to Jenna
</Title>
</Group>
<Text c="dimmed" size="md" maw={500}>
A futuristic dashboard experience built with Mantine and Bun
designed for speed, precision, and modern elegance. Navigate to your
dashboard and start exploring.
</Text>
<Divider w="40%" mx="auto" />
<Button
component={Link}
to={clientRoutes["/scr/dashboard"]}
radius="md"
size="md"
variant="gradient"
gradient={{ from: "teal", to: "cyan", deg: 45 }}
rightSection={<IconArrowRight size={18} />}
style={{
boxShadow: "0 0 12px rgba(0,255,200,0.3)",
transition: "all 0.2s ease",
}}
>
Go to Dashboard
</Button>
<Group mt="xl" gap={4} c="dimmed">
<IconTerminal2 size={14} />
<Text size="xs" c="dimmed">
Built for developers optimized for 2025 workflows.
</Text>
</Group>
</Stack>
</Card>
</Container>
);
}