Update CSS classes in web pages

The CSS classes used across different web pages in the web application have been updated. This change mainly consists of adjustments to spacing on various elements to improve the visual layout. The alterations should enhance the readability and user experience of the mentioned pages.

apps/web/app/(marketing)/blog/_components/post.tsx

@@ -9,7 +9,7 @@ export const Post: React.FC<{
   content: string;
 }> = ({ post, content }) => {
   return (
-    <div className={'mx-auto my-8 flex max-w-2xl flex-col space-y-6'}>
+    <div className={'mx-auto flex max-w-2xl flex-col space-y-6'}>
       <PostHeader post={post} />
 
       <article className={styles.HTML}>

apps/web/app/(marketing)/blog/page.tsx

@@ -25,7 +25,7 @@ async function BlogPage() {
 
   return (
     <div className={'container mx-auto'}>
-      <div className={'my-8 flex flex-col space-y-16'}>
+      <div className={'flex flex-col space-y-16'}>
         <SitePageHeader
           title={t('marketing:blog')}
           subtitle={t('marketing:blogSubtitle')}

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -51,7 +51,7 @@ async function DocumentationPage({ params }: PageParams) {
     <div className={'container mx-auto'}>
       <div
         className={
-          'relative mx-auto flex max-w-4xl grow flex-col space-y-4 px-8 py-8'
+          'relative mx-auto flex max-w-4xl grow flex-col space-y-4 px-8'
         }
       >
         <SitePageHeader

apps/web/app/(marketing)/docs/page.tsx

@@ -27,7 +27,7 @@ async function DocsPage() {
 
   return (
     <div className={'flex flex-1 flex-col'}>
-      <PageBody className={'mt-8'}>
+      <PageBody>
         <div className={'flex flex-col items-center space-y-16'}>
           <SitePageHeader
             title={t('marketing:documentation')}

apps/web/app/(marketing)/faq/page.tsx

@@ -68,7 +68,7 @@ async function FAQPage() {
       />
 
       <div className={'container mx-auto'}>
-        <div className={'my-8 flex flex-col space-y-16'}>
+        <div className={'flex flex-col space-y-16'}>
           <SitePageHeader
             title={t('marketing:faq')}
             subtitle={t('marketing:faqSubtitle')}

apps/web/app/(marketing)/layout.tsx

@@ -9,7 +9,7 @@ async function SiteLayout(props: React.PropsWithChildren) {
   const user = await getUser();
 
   return (
-    <>
+    <div className={'flex flex-col space-y-8'}>
       <SiteHeader user={user} />
 
       {props.children}
@@ -17,7 +17,7 @@ async function SiteLayout(props: React.PropsWithChildren) {
       <Separator />
 
       <SiteFooter />
-    </>
+    </div>
   );
 }
 

apps/web/app/(marketing)/page.tsx

@@ -17,7 +17,7 @@ function Home() {
       <div className={'container mx-auto'}>
         <div
           className={
-            'my-12 flex flex-col items-center md:flex-row lg:my-16' +
+            'mt-4 flex flex-col items-center md:flex-row xl:mt-12' +
             ' mx-auto flex-1 justify-center animate-in fade-in ' +
             ' duration-1000 slide-in-from-top-12'
           }