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

1 files changed, 40 insertions, 0 deletions

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'
+    );
+  });
 });