Merge remote-tracking branch 'upstream/master' into fix-tagsinput-onc…

…hange-firing-twice-on-enter-selection-after-search

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.2.2.cjs
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

apps/mantine.dev/src/components/FrameworksGuides/FrameworksGuides.tsx

@@ -1,11 +1,66 @@
-import { FRAMEWORKS_GUIDES_DATA } from './data';
-import { FrameworkLink } from './FrameworkLink/FrameworkLink';
-import classes from './FrameworksGuides.module.css';
+import { SimpleGrid, SimpleGridProps, Space } from '@mantine/core';
+import { GettingStartedCard } from './GettingStartedCard/GettingStartedCard';
 
-export function FrameworksGuides() {
-  const frameworks = FRAMEWORKS_GUIDES_DATA.map((framework) => (
-    <FrameworkLink key={framework.name} data={framework} />
-  ));
+interface FrameworksGuidesProps {
+  primaryCols?: SimpleGridProps['cols'];
+  secondaryCols?: SimpleGridProps['cols'];
+  secondaryBreakpoint?: 'md' | 'xl';
+}
+
+export function FrameworksGuides({
+  primaryCols = { md: 2 },
+  secondaryCols = { md: 3 },
+  secondaryBreakpoint = 'md',
+}: FrameworksGuidesProps) {
+  return (
+    <>
+      <SimpleGrid cols={primaryCols} spacing="lg">
+        <GettingStartedCard
+          title="Vite"
+          description="Best choice for a single page application (SPA)"
+          logo="vite"
+          type="primary"
+          link="/guides/vite"
+          secondaryBreakpoint={secondaryBreakpoint}
+        />
+        <GettingStartedCard
+          title="Next.js"
+          description="Best choice for an application with SSR"
+          logo="next"
+          type="primary"
+          link="/guides/next"
+          secondaryBreakpoint={secondaryBreakpoint}
+        />
+      </SimpleGrid>
+
+      <SimpleGrid cols={secondaryCols} mt="lg" spacing="lg">
+        <GettingStartedCard
+          title="Remix"
+          logo="remix"
+          type="secondary"
+          link="/guides/remix"
+          description="Get started with Remix"
+          secondaryBreakpoint={secondaryBreakpoint}
+        />
 
-  return <div className={classes.root}>{frameworks}</div>;
+        <GettingStartedCard
+          title="Redwood"
+          description="Get started with RedwoodJS"
+          logo="redwood"
+          type="secondary"
+          link="/guides/redwood"
+          secondaryBreakpoint={secondaryBreakpoint}
+        />
+        <GettingStartedCard
+          title="Gatsby"
+          logo="gatsby"
+          type="secondary"
+          link="/guides/gatsby"
+          description="Get started with Gatsby"
+          secondaryBreakpoint={secondaryBreakpoint}
+        />
+      </SimpleGrid>
+      <Space h="xl" />
+    </>
+  );
 }

apps/mantine.dev/src/components/FrameworksGuides/GettingStartedCard/GettingStartedCard.module.css

@@ -0,0 +1,134 @@
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  transition:
+    transform 100ms ease,
+    box-shadow 100ms ease;
+
+  &[data-type='primary'] {
+    height: 340px;
+    padding-inline-end: 80px;
+  }
+
+  &[data-type='secondary'] {
+    padding: var(--mantine-spacing-md);
+    height: 80px;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--mantine-spacing-md);
+  }
+
+  @mixin hover {
+    transform: scale(1.01);
+    box-shadow: var(--mantine-shadow-md);
+  }
+}
+
+.recommended {
+  position: absolute;
+  top: var(--mantine-spacing-lg);
+  right: var(--mantine-spacing-lg);
+  background-color: light-dark(var(--mantine-color-red-8), var(--mantine-color-yellow-5));
+  color: light-dark(var(--mantine-color-white), var(--mantine-color-black));
+}
+
+.iconWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &[data-logo='vite'] {
+    width: 100px;
+
+    &::before {
+      content: '';
+      inset: -20px;
+      z-index: 0;
+      position: absolute;
+      background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+      filter: blur(72px);
+    }
+  }
+
+  &[data-logo='next'] {
+    width: 160px;
+  }
+
+  &[data-logo='gatsby'],
+  &[data-logo='redwood'] {
+    justify-content: flex-start;
+
+    &[data-breakpoint='xl'] {
+      @mixin smaller-than $mantine-breakpoint-xl {
+        width: 80px;
+      }
+    }
+
+    &[data-breakpoint='md'] {
+      @mixin smaller-than $mantine-breakpoint-md {
+        width: 80px;
+      }
+    }
+  }
+}
+
+.icon {
+  position: relative;
+  z-index: 1;
+
+  &[data-logo='vite'] {
+    width: 100px;
+  }
+
+  &[data-logo='next'] {
+    width: 160px;
+  }
+
+  &[data-logo='gatsby'] {
+    width: 40px;
+  }
+
+  &[data-logo='redwood'] {
+    height: 40px;
+  }
+
+  &[data-logo='remix'] {
+    width: 80px;
+  }
+}
+
+.title {
+  .root[data-type='primary'] & {
+    font-size: 32px;
+    font-family: var(--docs-font-primary);
+    margin-bottom: 5px;
+  }
+
+  .root[data-type='secondary'] & {
+    font-size: 18px;
+    font-weight: 500;
+  }
+}
+
+.description {
+  .root[data-type='primary'] & {
+    font-size: var(--mantine-font-size-lg);
+  }
+
+  .root[data-type='secondary'] & {
+    font-size: var(--mantine-font-size-xs);
+  }
+}
+
+.arrow {
+  position: absolute;
+  bottom: var(--mantine-spacing-xl);
+  inset-inline-end: var(--mantine-spacing-lg);
+  width: 30px;
+  height: 30px;
+}

apps/mantine.dev/src/components/FrameworksGuides/GettingStartedCard/GettingStartedCard.tsx

@@ -0,0 +1,54 @@
+import Link from 'next/link';
+import { IconArrowUpRight } from '@tabler/icons-react';
+import { Badge, Card, Text } from '@mantine/core';
+import { frameworkIcons } from '@/components/icons';
+import classes from './GettingStartedCard.module.css';
+
+interface GettingStartedCardProps {
+  title: string;
+  description?: string;
+  logo: keyof typeof frameworkIcons;
+  link: string;
+  type: 'primary' | 'secondary';
+  secondaryBreakpoint: 'md' | 'xl';
+}
+
+export function GettingStartedCard({
+  title,
+  description,
+  logo,
+  link,
+  type,
+  secondaryBreakpoint,
+}: GettingStartedCardProps) {
+  const Icon = frameworkIcons[logo];
+  return (
+    <Card
+      withBorder
+      radius="lg"
+      padding="xl"
+      component={Link}
+      href={link}
+      data-type={type}
+      className={classes.root}
+    >
+      {type === 'primary' && (
+        <>
+          <IconArrowUpRight className={classes.arrow} />
+          <Badge color="red.8" size="md" className={classes.recommended}>
+            Recommended
+          </Badge>
+        </>
+      )}
+
+      <div className={classes.iconWrapper} data-logo={logo} data-breakpoint={secondaryBreakpoint}>
+        <Icon className={classes.icon} data-logo={logo} />
+      </div>
+
+      <div>
+        <Text className={classes.title}>{title}</Text>
+        {description && <Text className={classes.description}>{description}</Text>}
+      </div>
+    </Card>
+  );
+}

apps/mantine.dev/src/components/HomePage/HomePage.tsx

@@ -9,6 +9,7 @@ import { DarkTheme } from './DarkTheme/DarkTheme';
 import { Hooks } from './Hooks/Hooks';
 import { JoinCommunity } from './JoinCommunity/JoinCommunity';
 import { Jumbotron } from './Jumbotron/Jumbotron';
+import { Reviews } from './Reviews/Reviews';
 import { Theming } from './Theming/Theming';
 import { Usage } from './Usage/Usage';
 import { Waves } from './Waves/Waves';
@@ -35,9 +36,11 @@ export function HomePage() {
           <Theming />
           <Banner />
           <Hooks />
-          <Waves height={42} width={220} rotate flip alt />
+          <Waves height={42} width={280} rotate flip />
+          <Reviews />
+          <Waves height={58} width={160} alt />
           <Usage />
-          <Waves height={48} width={180} />
+          <Waves height={48} width={180} flip />
           <JoinCommunity />
         </div>
         <Footer />

apps/mantine.dev/src/components/HomePage/JoinCommunity/JoinCommunity.tsx

@@ -4,7 +4,7 @@ import { PageSection } from '../PageSection/PageSection';
 
 export function JoinCommunity() {
   return (
-    <PageSection title="Join the community">
+    <PageSection title="Join the community" alt>
       <Space h="md" />
       <SocialCards />
       <Space h={120} />