Add Mantine marketing page

templates/mantine/component/component/template.json5

@@ -33,7 +33,8 @@
       "description": "The type of the component.",
       "choices": [
         "component",
-        "block"
+        "block",
+        "template"
       ],
       "required": true
     },

templates/mantine/template/marketing-page/README.md

@@ -0,0 +1,36 @@
+# Introduction
+
+This template adds the
+entire Mantine marketing page template to your project.
+
+It comes fully integrated with Croct, giving you CMS, AB testing, and personalization out of the box.
+
+> [!NOTE Forever-free]
+> This template is compatible with features available on the forever-free plan.
+
+## Usage
+
+To create a new project using this template, run:
+
+```croct-cmd
+croct use mantine://template/marketing-page
+```
+
+You can customize the template by specifying options, like defining which sections should be integrated with Croct
+slots:
+
+```croct-cmd
+croct use mantine://template/marketing-page --slots='["hero-section","stats-section"]'
+```
+
+## Options
+
+The following options are available for this template:
+
+| Option        | Description                                                                                                                                                                     | Required | Default                                |
+|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|----------------------------------------|
+| `projectName` | The name of the project.                                                                                                                                                        | No       | `my-app`                               |
+| `version`     | The Next.js version to use.                                                                                                                                                     | No       | `latest`                               |
+| `router`      | The router to use (`app` or `page`).                                                                                                                                            | No       | `app`                                  |
+| `javascript`  | Whether to use JavaScript instead of TypeScript.                                                                                                                                | No       | `false`                                |
+| `slots`       | Tha list of slots to use (`header`, `hero-section`, `features-cards-section`, `features-title-section`, and `stats-group-section`). | No       | `["hero-section", "features-cards-section"]` |

templates/mantine/template/marketing-page/code/components/Footer/index.module.css

@@ -0,0 +1,89 @@
+.footer {
+  margin-top: 120px;
+  padding-top: calc(var(--mantine-spacing-xl) * 2);
+  padding-bottom: calc(var(--mantine-spacing-xl) * 2);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.logo {
+  max-width: 200px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.description {
+  margin-top: 5px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    margin-top: var(--mantine-spacing-xs);
+    text-align: center;
+  }
+}
+
+.inner {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.groups {
+  display: flex;
+  flex-wrap: wrap;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    display: none;
+  }
+}
+
+.wrapper {
+  width: 160px;
+}
+
+.link {
+  display: block;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-sm);
+  padding-top: 3px;
+  padding-bottom: 3px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.title {
+  font-size: var(--mantine-font-size-lg);
+  font-weight: 500;
+  font-family: Outfit, var(--mantine-font-family);
+  margin-bottom: calc(var(--mantine-spacing-xs) / 2);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+}
+
+.afterFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--mantine-spacing-xl);
+  padding-top: var(--mantine-spacing-xl);
+  padding-bottom: var(--mantine-spacing-xl);
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    flex-direction: column;
+  }
+}
+
+.social {
+  @media (max-width: $mantine-breakpoint-sm) {
+    margin-top: var(--mantine-spacing-xs);
+  }
+}

templates/mantine/template/marketing-page/code/components/Footer/index.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { IconBrandInstagram, IconBrandTwitter, IconBrandYoutube } from '@tabler/icons-react';
+import { ActionIcon, Container, Group, Text } from '@mantine/core';
+import { MantineLogo } from '@mantinex/mantine-logo';
+import classes from '?/./index.module.css';
+
+const data = [
+  {
+    title: 'About',
+    links: [
+      { label: 'Features', link: '#' },
+      { label: 'Pricing', link: '#' },
+      { label: 'Support', link: '#' },
+      { label: 'Forums', link: '#' },
+    ],
+  },
+  {
+    title: 'Project',
+    links: [
+      { label: 'Contribute', link: '#' },
+      { label: 'Media assets', link: '#' },
+      { label: 'Changelog', link: '#' },
+      { label: 'Releases', link: '#' },
+    ],
+  },
+  {
+    title: 'Community',
+    links: [
+      { label: 'Join Discord', link: '#' },
+      { label: 'Follow on Twitter', link: '#' },
+      { label: 'Email newsletter', link: '#' },
+      { label: 'GitHub discussions', link: '#' },
+    ],
+  },
+];
+
+export function FooterLinks() {
+  const groups = data.map((group) => {
+    const links = group.links.map((link, index) => (
+      <Text<'a'>
+        key={index}
+        className={classes.link}
+        component="a"
+        href={link.link}
+        onClick={(event) => event.preventDefault()}
+      >
+        {link.label}
+      </Text>
+    ));
+
+    return (
+      <div className={classes.wrapper} key={group.title}>
+        <Text className={classes.title}>{group.title}</Text>
+        {links}
+      </div>
+    );
+  });
+
+  return (
+    <footer className={classes.footer}>
+      <Container className={classes.inner}>
+        <div className={classes.logo}>
+          <MantineLogo size={30} />
+          <Text size="xs" c="dimmed" className={classes.description}>
+            Build fully functional accessible web applications faster than ever
+          </Text>
+        </div>
+        <div className={classes.groups}>{groups}</div>
+      </Container>
+      <Container className={classes.afterFooter}>
+        <Text c="dimmed" size="sm">
+          © 2020 mantine.dev. All rights reserved.
+        </Text>
+
+        <Group gap={0} className={classes.social} justify="flex-end" wrap="nowrap">
+          <ActionIcon size="lg" color="gray" variant="subtle">
+            <IconBrandTwitter size={18} stroke={1.5} />
+          </ActionIcon>
+          <ActionIcon size="lg" color="gray" variant="subtle">
+            <IconBrandYoutube size={18} stroke={1.5} />
+          </ActionIcon>
+          <ActionIcon size="lg" color="gray" variant="subtle">
+            <IconBrandInstagram size={18} stroke={1.5} />
+          </ActionIcon>
+        </Group>
+      </Container>
+    </footer>
+  );
+}

templates/mantine/template/marketing-page/code/components/MarketingPage/index.module.css

@@ -0,0 +1,89 @@
+.footer {
+  margin-top: 120px;
+  padding-top: calc(var(--mantine-spacing-xl) * 2);
+  padding-bottom: calc(var(--mantine-spacing-xl) * 2);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.logo {
+  max-width: 200px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.description {
+  margin-top: 5px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    margin-top: var(--mantine-spacing-xs);
+    text-align: center;
+  }
+}
+
+.inner {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.groups {
+  display: flex;
+  flex-wrap: wrap;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    display: none;
+  }
+}
+
+.wrapper {
+  width: 160px;
+}
+
+.link {
+  display: block;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-sm);
+  padding-top: 3px;
+  padding-bottom: 3px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.title {
+  font-size: var(--mantine-font-size-lg);
+  font-weight: 500;
+  font-family: Outfit, var(--mantine-font-family);
+  margin-bottom: calc(var(--mantine-spacing-xs) / 2);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+}
+
+.afterFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--mantine-spacing-xl);
+  padding-top: var(--mantine-spacing-xl);
+  padding-bottom: var(--mantine-spacing-xl);
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    flex-direction: column;
+  }
+}
+
+.social {
+  @media (max-width: $mantine-breakpoint-sm) {
+    margin-top: var(--mantine-spacing-xs);
+  }
+}