53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { ColorSchemesSwitcher } from "@/components/color-schemes-switcher"
|
|
import {
|
|
AppShell,
|
|
AppShellHeader,
|
|
AppShellMain,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core"
|
|
|
|
export default function Home() {
|
|
return (
|
|
<AppShell header={{ height: 60 }} padding="md">
|
|
<AppShellHeader></AppShellHeader>
|
|
<AppShellMain>
|
|
<Title className="text-center mt-20">
|
|
Welcome to{" "}
|
|
<Text
|
|
inherit
|
|
variant="gradient"
|
|
component="span"
|
|
gradient={{ from: "pink", to: "yellow" }}
|
|
>
|
|
Mantine
|
|
</Text>{" "}
|
|
+
|
|
<Text
|
|
inherit
|
|
variant="gradient"
|
|
component="span"
|
|
gradient={{ from: "blue", to: "green" }}
|
|
>
|
|
TailwindCSS
|
|
</Text>
|
|
</Title>
|
|
<Text
|
|
className="text-bold text-center text-gray-700 dark:text-gray-300 max-w-[500px] mx-auto mt-xl"
|
|
ta="center"
|
|
size="lg"
|
|
maw={580}
|
|
mx="auto"
|
|
mt="xl"
|
|
>
|
|
This starter Next.js project includes a minimal setup for
|
|
Mantine with TailwindCSS. To get started edit page.tsx file.
|
|
</Text>
|
|
<div className="flex justify-center mt-10">
|
|
<ColorSchemesSwitcher />
|
|
</div>
|
|
</AppShellMain>
|
|
</AppShell>
|
|
)
|
|
}
|