feat: center home page main layout

apps/website/app/[locale]/page.tsx

@@ -12,6 +12,7 @@ import { unstable_setRequestLocale } from "next-intl/server"
 import Image from "next/image"
 
 import WikipediaLogo from "#public/images/Wikipedia-Logo.webp"
+import { Section } from "@repo/ui/Layout/Section"
 
 interface HomePageProps extends LocaleProps {}
 
@@ -26,8 +27,8 @@ const HomePage: React.FC<HomePageProps> = (props) => {
   const localeWikipedia = fromLocaleToWikipediaLocale(params.locale)
 
   return (
-    <MainLayout>
-      <section className="text-center">
+    <MainLayout center>
+      <Section horizontalSpacing>
         <Typography as="h1" variant="h1">
           {t("home.title")}
         </Typography>
@@ -43,7 +44,7 @@ const HomePage: React.FC<HomePageProps> = (props) => {
             },
           })}
         </Typography>
-      </section>
+      </Section>
 
       <section className="my-6 flex items-center justify-center">
         <Image src={WikipediaLogo} alt="Wikipedia" className="w-72" />

packages/ui/src/Layout/MainLayout/MainLayout.tsx

@@ -12,7 +12,7 @@ export const MainLayout: React.FC<MainLayoutProps> = (props) => {
   return (
     <main
       className={classNames(
-        "min-h-[calc(100vh-188px)] md:mx-auto md:max-w-4xl lg:max-w-7xl",
+        "min-h-[calc(100vh-133px)] md:mx-auto md:max-w-4xl lg:max-w-7xl",
         {
           "flex flex-col items-center justify-center text-center": center,
         },