refactor(pages): improve Homepage

* move custom homepage components that does not require props to the
MDX file (links should not need to be translated here but where they
are defined)
* move SEO title and meta desc to MDX file
* make Page component the wrapper instead of using a React fragment
* fix MDX module types

3 files changed, 60 insertions, 0 deletions

diff --git a/src/components/molecules/grid/grid.module.scss b/src/components/molecules/grid/grid.module.scss
index f13af30..d5260cf 100644
--- a/src/components/molecules/grid/grid.module.scss
+++ b/src/components/molecules/grid/grid.module.scss
@@ -2,6 +2,18 @@
   display: grid;
   gap: var(--gap);
 
+  &--align-items-center {
+    align-items: center;
+  }
+
+  &--align-items-start {
+    align-items: start;
+  }
+
+  &--align-items-end {
+    align-items: end;
+  }
+
   &--is-centered {
     place-content: center;
   }
diff --git a/src/components/molecules/grid/grid.test.tsx b/src/components/molecules/grid/grid.test.tsx
index e69610d..b4b9f77 100644
--- a/src/components/molecules/grid/grid.test.tsx
+++ b/src/components/molecules/grid/grid.test.tsx
@@ -109,4 +109,44 @@ describe('Grid', () => {
 
     expect(rtlScreen.getByRole('list')).toHaveClass('wrapper--is-centered');
   });
+
+  it('can render a list of centered items', () => {
+    render(
+      <Grid alignItems="center">
+        {items.map((item) => (
+          <GridItem key={item.id}>{item.contents}</GridItem>
+        ))}
+      </Grid>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass(
+      'wrapper--align-items-center'
+    );
+  });
+
+  it('can render a list of items with end alignment', () => {
+    render(
+      <Grid alignItems="end">
+        {items.map((item) => (
+          <GridItem key={item.id}>{item.contents}</GridItem>
+        ))}
+      </Grid>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass('wrapper--align-items-end');
+  });
+
+  it('can render a list of items with start alignment', () => {
+    render(
+      <Grid alignItems="start">
+        {items.map((item) => (
+          <GridItem key={item.id}>{item.contents}</GridItem>
+        ))}
+      </Grid>
+    );
+
+    expect(rtlScreen.getByRole('list')).toHaveClass(
+      'wrapper--align-items-start'
+    );
+  });
 });
diff --git a/src/components/molecules/grid/grid.tsx b/src/components/molecules/grid/grid.tsx
index 3d0ecf1..38f6e55 100644
--- a/src/components/molecules/grid/grid.tsx
+++ b/src/components/molecules/grid/grid.tsx
@@ -13,6 +13,12 @@ export type GridProps<T extends boolean> = Omit<
   'children' | 'hideMarker' | 'isHierarchical' | 'isInline' | 'spacing'
 > & {
   /**
+   * How the items should be aligned?
+   *
+   * @default undefined // The default behavior is `stretch`.
+   */
+  alignItems?: 'center' | 'end' | 'start';
+  /**
    * The grid items.
    */
   children: ReactNode;
@@ -62,6 +68,7 @@ export type GridProps<T extends boolean> = Omit<
 
 const GridWithRef = <T extends boolean>(
   {
+    alignItems,
     children,
     className = '',
     col = 'auto-fit',
@@ -77,6 +84,7 @@ const GridWithRef = <T extends boolean>(
 ) => {
   const gridClass = [
     styles.wrapper,
+    styles[alignItems ? `wrapper--align-items-${alignItems}` : ''],
     styles[isCentered ? 'wrapper--is-centered' : ''],
     styles[size ? 'wrapper--has-fixed-size' : ''],
     styles[sizeMin ? 'wrapper--has-min-size' : ''],