Init template

components/Welcome/Welcome.module.css

@@ -0,0 +1,10 @@
+.title {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-size: rem(100px);
+  font-weight: 900;
+  letter-spacing: rem(-2px);
+
+  @media (max-width: $mantine-breakpoint-md) {
+    font-size: rem(50px);
+  }
+}

components/Welcome/Welcome.story.tsx

@@ -0,0 +1,7 @@
+import { Welcome } from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Usage = () => <Welcome />;

components/Welcome/Welcome.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@/test-utils';
+import { Welcome } from './Welcome';
+
+describe('Welcome component', () => {
+  it('has correct Next.js theming section link', () => {
+    render(<Welcome />);
+    expect(screen.getByText('this guide')).toHaveAttribute(
+      'href',
+      'https://mantine.dev/guides/next/'
+    );
+  });
+});

components/Welcome/Welcome.tsx

@@ -0,0 +1,23 @@
+import { Title, Text, Anchor } from '@mantine/core';
+import classes from './Welcome.module.css';
+
+export function Welcome() {
+  return (
+    <>
+      <Title className={classes.title} ta="center" mt={100}>
+        Welcome to{' '}
+        <Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
+          Mantine
+        </Text>
+      </Title>
+      <Text color="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
+        This starter Next.js project includes a minimal setup for server side rendering, if you want
+        to learn more on Mantine + Next.js integration follow{' '}
+        <Anchor href="https://mantine.dev/guides/next/" size="lg">
+          this guide
+        </Anchor>
+        . To get started edit index.tsx file.
+      </Text>
+    </>
+  );
+}