From c82ae06030112c5dec8efab0a8dcb2e08f67cc28 Mon Sep 17 00:00:00 2001
From: Shintaro Jokagi <taroj1205@gmail.com>
Date: Thu, 15 May 2025 12:43:48 +1200
Subject: [PATCH] refactor(app): improve layout consistency and responsiveness
 across pages

The changes focus on standardizing layouts, spacing, and container usage
throughout the site while enhancing responsive behavior. Key improvements
include:

- Unified container usage for consistent page widths
- Standardized section padding and gaps
- Removed redundant padding/margin classes
- Better responsive grid layouts
- Consistent text alignment and spacing
- Cleaner flexbox structures
---
 src/components/Community.astro                | 12 +++---
 src/components/Features.astro                 |  4 +-
 src/components/Footer.astro                   |  4 +-
 src/components/Hero.astro                     |  4 +-
 src/components/ModsList.tsx                   |  8 ++--
 src/components/NavBar.astro                   |  2 +-
 src/components/Sponsors.astro                 |  6 +--
 src/i18n/en/translation.json                  |  5 ++-
 src/layouts/Layout.astro                      |  2 +-
 src/pages/[...locale]/404.astro               | 24 ++++++------
 src/pages/[...locale]/about.astro             | 38 +++++++++---------
 src/pages/[...locale]/donate.astro            | 22 +++++------
 src/pages/[...locale]/download.astro          |  2 +-
 src/pages/[...locale]/index.astro             |  2 +-
 src/pages/[...locale]/mods/index.astro        | 10 ++---
 .../[...locale]/release-notes/index.astro     |  4 +-
 src/pages/[...locale]/welcome.astro           |  2 +-
 src/pages/[...locale]/whatsnew.astro          | 39 ++++++++++---------
 tailwind.config.mjs                           | 16 ++++++++
 19 files changed, 108 insertions(+), 98 deletions(-)

diff --git a/src/components/Community.astro b/src/components/Community.astro
index 293c729..5585d56 100644
--- a/src/components/Community.astro
+++ b/src/components/Community.astro
@@ -19,9 +19,9 @@ const {
 
 <section
   id="Community"
-  class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:pt-36"
+  class="relative flex w-full flex-col items-center text-start md:text-center lg:py-36 gap-6 py-12"
 >
-  <Description class="mb-2 px-4 text-6xl font-bold">
+  <Description class="mb-2 text-6xl font-bold">
     <motion.span client:load {...getTitleAnimation(0.2)}>
       {community.title[0]}
     </motion.span>
@@ -35,12 +35,12 @@ const {
   <motion.p
     client:load
     {...getTitleAnimation(0.6)}
-    className="px-4 md:px-24 lg:w-1/2 lg:px-0"
+    className="lg:w-1/2 lg:px-0"
   >
     {community.description}
   </motion.p>
   <div
-    class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 md:justify-center"
+    class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center"
   >
     <motion.span client:load {...getTitleAnimation(0.8)}>
       <Button class:list={['px-4']} href="https://github.com/zen-browser">
@@ -66,14 +66,14 @@ const {
     </motion.div>
   </div>
   <motion.span
-    className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
+    className="flex max-w-full lg:max-w-none lg:flex-none"
     client:load
     {...getTitleAnimation(1.4)}
   >
     <Image
       src={ComImage}
       alt={community.images.community.alt}
-      class="my-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
+      class="rounded-3xl shadow-md lg:mx-auto dark:opacity-80"
     />
   </motion.span>
 </section>
diff --git a/src/components/Features.astro b/src/components/Features.astro
index bbbb7c9..bdb538d 100644
--- a/src/components/Features.astro
+++ b/src/components/Features.astro
@@ -32,7 +32,7 @@ const descriptions = Object.values(features.featureTabs).map(
 
 <section
   id="Features"
-  class="relative flex w-full flex-col px-4 text-start md:px-24 lg:mx-auto lg:w-3/4 lg:px-0 lg:py-36"
+  class="relative flex w-full flex-col text-start lg:py-36 py-12"
 >
   <Description class="mb-2 text-6xl font-bold">
     <motion.span client:load {...getTitleAnimation(0.2)}>
@@ -49,7 +49,7 @@ const descriptions = Object.values(features.featureTabs).map(
     {features.description}
   </motion.p>
   <div
-    class="mb-12 mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2"
+    class="mt-6 flex flex-col gap-6 lg:flex-row lg:justify-between lg:gap-2"
   >
     <div class="flex w-full flex-col lg:w-1/3">
       <!-- Mobile tabs -->
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 337cb20..3dd8bc6 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -15,11 +15,11 @@ const {
 
 <footer
   id="footer"
-  class="relative flex w-full flex-col gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24"
+  class="relative flex w-full flex-col gap-16 overflow-hidden border-t border-dark bg-dark px-4 py-12 text-paper lg:p-24 items-center"
   role="contentinfo"
   aria-label="Site footer"
 >
-  <div class="flex w-full flex-col items-start justify-between gap-12">
+  <div class="flex w-full flex-col items-start justify-between gap-12 container">
     <section
       class="w-full text-center lg:w-1/2 lg:text-left"
       aria-labelledby="footer-title"
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index c6274b8..8192afc 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -88,7 +88,7 @@ const {
   </div>
 </header>
 <motion.span
-  className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
+  className="flex max-w-full lg:max-w-none lg:flex-none"
   client:load
   {...getHeroTitleAnimation()}
 >
@@ -99,6 +99,6 @@ const {
     muted
     playsinline
     preload="none"
-    class="mb-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
+    class="mb-24 rounded-3xl shadow-md dark:opacity-80"
   />
 </motion.span>
diff --git a/src/components/ModsList.tsx b/src/components/ModsList.tsx
index 39df915..d1e2e99 100644
--- a/src/components/ModsList.tsx
+++ b/src/components/ModsList.tsx
@@ -138,8 +138,8 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
 
   return (
     <div>
-      <div className="mx-auto flex flex-col items-start gap-4 px-8 lg:w-1/2">
-        <div className="flex w-full flex-col items-center gap-6">
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex w-full flex-col items-center justify-center gap-6">
           <input
             type="text"
             id="search"
@@ -200,13 +200,13 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
         </div>
       </div>
 
-      <div className="mx-auto grid grid-cols-1 place-items-start gap-12 p-10 md:grid-cols-2 lg:grid-cols-3 lg:p-24 lg:px-24 2xl:grid-cols-4">
+      <div className="grid grid-cols-1 w-full place-items-start gap-12 md:grid-cols-2 xl:grid-cols-3 py-6">
         {paginatedMods.length > 0 ? (
           paginatedMods.map((mod) => (
             <a
               key={mod.id}
               href={`/mods/${mod.id}`}
-              className="flex flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
+              className="flex flex-col w-full gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
             >
               <div className="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md">
                 <img
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index bb39314..6026cfd 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -21,7 +21,7 @@ const {
 <!-- Desktop Navigation -->
 <Astronav>
   <MenuItems
-    class="relative z-20 mx-auto grid w-full grid-cols-2 items-center gap-2 bg-paper px-4 py-3 lg:grid lg:min-w-fit lg:grid-cols-[auto_1fr_auto] lg:p-6 xl:w-3/4"
+    class="relative z-20 grid w-full grid-cols-2 items-center gap-2 bg-paper py-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:py-6 container"
   >
     <a
       class="flex items-center gap-2 text-lg font-bold"
diff --git a/src/components/Sponsors.astro b/src/components/Sponsors.astro
index cbc6297..89e16db 100644
--- a/src/components/Sponsors.astro
+++ b/src/components/Sponsors.astro
@@ -18,10 +18,10 @@ const {
 } = getUI(locale)
 ---
 
-<section id="sponsors" class:list={['mb-32 px-4', !showSponsors && 'hidden']}>
-  <div class="mx-auto flex flex-col px-6 text-center">
+<section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
+  <div class="mx-auto flex flex-col text-center">
     <motion.span client:load {...getTitleAnimation(0.2)}>
-      <Description class="mb-2 px-4 text-6xl font-bold"
+      <Description class="mb-2 text-6xl font-bold"
         >Our Sponsors</Description
       >
     </motion.span>
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 14ae198..4986e4c 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -144,7 +144,7 @@
       }
     },
     "about": {
-      "title": "About - Zen Browser",
+      "title": "About - Zen",
       "description": "We are simply a group of developers and designers who care about your experience on the web. We believe that the internet should be a place where you can explore, learn, and connect without worrying about your data being collected.",
       "littleHelp": "A little help?",
       "mainTeam": {
@@ -223,7 +223,8 @@
       "description": "We are a small team of developers working hard to bring you the best browsing experience. If you like what we do, please consider supporting us.",
       "patreon": {
         "title": "Patreon",
-        "description": "Patreon allows you to support us with a monthly donation. You can choose the level of support that works best for you."
+        "description": "Patreon allows you to support us with a monthly donation. You can choose the level of support that works best for you.",
+        "button": "Go to Patreon"
       },
       "koFi": {
         "title": "Ko-fi",
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ce4f8c3..7065931 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -97,7 +97,7 @@ const locale = getLocale(Astro);
 
   </head>
   <body
-    class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark"
+    class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark text-pretty"
   >
     <NavBar />
     <slot />
diff --git a/src/pages/[...locale]/404.astro b/src/pages/[...locale]/404.astro
index b458086..1bb68df 100644
--- a/src/pages/[...locale]/404.astro
+++ b/src/pages/[...locale]/404.astro
@@ -15,17 +15,19 @@ const {
 
 <Layout title={notFound.title}>
   <main
-    class="flex min-h-[70vh] flex-col items-center justify-center py-24 text-center"
+    class="flex min-h-[70vh] container flex-col items-center justify-center gap-6 py-24 text-center"
   >
-    <Title class="mb-4 text-7xl font-bold text-coral md:text-9xl">404</Title>
-    <Description class="mb-6 text-xl md:text-2xl">
-      {notFound.title}
-    </Description>
-    <p class="mb-8 max-w-xl text-lg text-gray-500 dark:text-gray-400">
-      {notFound.description}
-    </p>
-    <Button href={getLocalePath('/')} isPrimary>
-      {notFound.button}
-    </Button>
+    <Title class="text-7xl font-bold text-coral md:text-9xl">404</Title>
+    <div class="flex flex-col gap-4 items-center">
+      <Description class="text-xl md:text-2xl">
+        {notFound.title}
+      </Description>
+      <p class="max-w-xl text-lg text-gray-500 dark:text-gray-400">
+        {notFound.description}
+      </p>
+      <Button href={getLocalePath('/')} isPrimary class="w-fit">
+        {notFound.button}
+      </Button>
+    </div>
   </main>
 </Layout>
diff --git a/src/pages/[...locale]/about.astro b/src/pages/[...locale]/about.astro
index c23a2a8..cc9de4d 100644
--- a/src/pages/[...locale]/about.astro
+++ b/src/pages/[...locale]/about.astro
@@ -18,64 +18,62 @@ const {
   description={layout.about.description}
 >
   <main
-    class="relative flex min-h-screen flex-col items-center justify-center py-24"
+    class="flex min-h-screen flex-col items-center justify-center py-24 container w-full gap-24"
   >
-    <div class="mb-24 p-4 text-center lg:w-1/2">
-      <Description class="text-6xl font-bold">{about.title}</Description>
-      <Description>
+    <div class="text-center w-full flex flex-col gap-4">
+      <Description class="text-6xl font-bold leading-none">{about.title}</Description>
+      <Description class="max-w-3xl mx-auto">
         {about.description}
       </Description>
-      <Button href="/donate" class="mx-auto mt-4 w-fit" isPrimary
+      <Button href="/donate" class="mx-auto w-fit" isPrimary
         >{about.littleHelp}</Button
       >
     </div>
     <div
-      class="relative flex w-full flex-col items-center justify-center lg:flex-row"
+      class="grid lg:grid-cols-[1fr_1px_1fr] gap-6"
     >
-      <div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
-        <div class="text-4xl font-bold lg:text-6xl">{about.mainTeam.title}</div>
+      <div class="flex flex-col gap-4">
+        <div class="text-4xl font-bold lg:text-6xl leading-none">{about.mainTeam.title}</div>
         <Description>
           {about.mainTeam.description}
         </Description>
-        <div class="mt-4">
-          <ul>
+        <div>
+          <ul class="flex flex-col gap-2">
             {Object.entries(about.mainTeam.members).map(([_key, member]) => (
               <li class="text-sm">
                 {member.link ? (
                   <a href={member.link === true ? '' : member.link}>
                     <strong class="zen-link font-bold">{member.name}</strong>
                   </a>
-                  <span class="opacity-60"> : {member.description}</span>
+                  <span class="opacity-80"> : {member.description}</span>
                 ) : (
                   <strong class="font-bold">{member.name}</strong>
-                  <span class="opacity-60"> : {member.description}</span>
+                  <span class="opacity-80"> : {member.description}</span>
                 )}
               </li>
             ))}
           </ul>
         </div>
       </div>
-      <div class="absolute hidden h-full w-[1px] bg-dark opacity-15 lg:block">
-      </div>
-      <div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
-        <div class="text-4xl font-bold lg:text-6xl">{about.contributors.title}</div>
+      <hr class="hidden h-full w-[1px] bg-dark opacity-15 lg:block" />
+      <div class="flex flex-col gap-4">
+        <div class="text-4xl font-bold lg:text-6xl leading-none">{about.contributors.title}</div>
         <Description>
           {about.contributors.description}
         </Description>
-        <a href="https://github.com/zen-browser/desktop/graphs/contributors"
+        <div class="flex flex-col gap-4"><a href="https://github.com/zen-browser/desktop/graphs/contributors"
           ><img
             src="https://contributors-img.web.app/image?repo=zen-browser/desktop"
             alt="Contributors"
-            class="mt-8"
           /></a
         >
         <a href="https://github.com/zen-browser/www/graphs/contributors"
           ><img
             src="https://contributors-img.web.app/image?repo=zen-browser/www"
             alt="Contributors (website)"
-            class="mt-8"
           /></a
-        >
+        ></div>
+
       </div>
     </div>
   </main>
diff --git a/src/pages/[...locale]/donate.astro b/src/pages/[...locale]/donate.astro
index cbee1e1..a7d5bc5 100644
--- a/src/pages/[...locale]/donate.astro
+++ b/src/pages/[...locale]/donate.astro
@@ -14,40 +14,37 @@ const {
 ---
 
 <Layout title={layout.donate.title} description={layout.donate.description}>
-  <main class="pb-52 pt-36">
+  <main class="pb-52 pt-36 container">
     <div
-      class="relative flex w-full flex-col items-center justify-center gap-12"
+      class="flex flex-col items-center justify-center gap-12"
     >
-      <div class="px-8 lg:w-2/5 lg:text-center xl:px-0">
+      <div class="lg:text-center flex flex-col gap-4">
         <Description class="text-6xl font-bold">{donate.title}</Description>
-        <Description>
+        <Description class="max-w-3xl">
           {donate.description}
         </Description>
       </div>
-      <div class="flex w-full flex-col items-center justify-center lg:flex-row">
-        <div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
+      <div class="grid grid-cols-1 lg:grid-cols-[1fr_1px_1fr] gap-12 text-center max-w-5xl">
+        <div class="flex flex-col gap-4 items-center">
           <div class="text-6xl font-bold">{donate.patreon.title}</div>
           <Description>
             {donate.patreon.description}
           </Description>
-          <div class="mt-6">
             <Button
               isPrimary
               href="https://www.patreon.com/zen_browser"
               class="w-fit"
             >
-              Go to Patreon
+              {donate.patreon.button}
               <ArrowRight class="size-4" />
             </Button>
-          </div>
         </div>
-        <div class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block"></div>
-        <div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
+        <hr class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block" />
+        <div class="flex flex-col gap-4 items-center">
           <div class="text-6xl font-bold">{donate.koFi.title}</div>
           <Description>
             {donate.koFi.description}
           </Description>
-          <div class="mt-6">
             <Button
               href="https://ko-fi.com/zen_browser"
               isPrimary
@@ -56,7 +53,6 @@ const {
               {donate.koFi.button}
               <ArrowRight class="size-4" />
             </Button>
-          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/[...locale]/download.astro b/src/pages/[...locale]/download.astro
index 8da0b3b..29374a1 100644
--- a/src/pages/[...locale]/download.astro
+++ b/src/pages/[...locale]/download.astro
@@ -41,7 +41,7 @@ const platformDescriptions = download.platformDescriptions
 
 <Layout title={layout.download.title} description={layout.download.description}>
   <main class="flex min-h-screen flex-col px-6 data-[os='windows']:bg-zen-blue">
-    <div class="container relative mx-auto max-w-5xl py-12">
+    <div class="container relative mx-auto py-12">
       <div class="mb-6 mt-12 flex flex-col gap-4">
         <Description id="download-title" class="text-6xl font-bold"
           >{download.title}</Description
diff --git a/src/pages/[...locale]/index.astro b/src/pages/[...locale]/index.astro
index 1b4c38f..9932584 100644
--- a/src/pages/[...locale]/index.astro
+++ b/src/pages/[...locale]/index.astro
@@ -17,7 +17,7 @@ const { layout } = getUI(locale)
   description={layout.index.description}
   isHome
 >
-  <main>
+  <main class="container">
     <Hero />
     <Features />
     <Sponsors showSponsors />
diff --git a/src/pages/[...locale]/mods/index.astro b/src/pages/[...locale]/mods/index.astro
index 05955af..9b9c019 100644
--- a/src/pages/[...locale]/mods/index.astro
+++ b/src/pages/[...locale]/mods/index.astro
@@ -18,16 +18,12 @@ const allMods = (await getAllMods()) || []
 ---
 
 <Layout title={layout.mods.title}>
-  <main class="mx-auto mt-32 max-w-[120rem] 2xl:mt-0">
-    <header class="mb-10 mt-32 flex w-full flex-col justify-center border-dark">
-      <div class="mx-auto flex flex-col gap-6 px-8 lg:w-1/2">
-        <div>
+  <main class="mt-32 container 2xl:mt-32 flex flex-col gap-10">
+    <header class="flex w-full flex-col border-dark gap-8">
           <Description class="text-6xl font-bold">{mods.title}</Description>
-          <Description>
+          <Description class="max-w-3xl">
             {mods.description}
           </Description>
-        </div>
-      </div>
     </header>
 
     <!-- Importing ModList component -->
diff --git a/src/pages/[...locale]/release-notes/index.astro b/src/pages/[...locale]/release-notes/index.astro
index 8ff2989..6f11d6f 100644
--- a/src/pages/[...locale]/release-notes/index.astro
+++ b/src/pages/[...locale]/release-notes/index.astro
@@ -22,11 +22,11 @@ const {
 
 <Layout title={layout.releaseNotes.title}>
   <main
-    class="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4"
+    class="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4 container"
   >
     <div
       id="release-notes"
-      class="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5"
+      class="py-42 flex min-h-screen flex-col justify-center w-full"
     >
       <Description class="mt-48 text-4xl font-bold">Release Notes</Description>
       <p
diff --git a/src/pages/[...locale]/welcome.astro b/src/pages/[...locale]/welcome.astro
index fa89ba8..d90304b 100644
--- a/src/pages/[...locale]/welcome.astro
+++ b/src/pages/[...locale]/welcome.astro
@@ -14,7 +14,7 @@ const {
 
 <Layout title={layout.welcome.title} description={layout.welcome.description}>
   <main
-    class="relative mx-auto flex flex-col items-center gap-24 px-6 lg:gap-0 lg:px-24"
+    class="container"
   >
     <Features
       title1={welcome.title[0]}
diff --git a/src/pages/[...locale]/whatsnew.astro b/src/pages/[...locale]/whatsnew.astro
index 69fd6b1..cf7d9b8 100644
--- a/src/pages/[...locale]/whatsnew.astro
+++ b/src/pages/[...locale]/whatsnew.astro
@@ -37,7 +37,7 @@ if (
   )}
 >
   <main
-    class="relative mx-auto flex flex-col items-center gap-24 px-6 pb-52 pt-36 lg:px-24 xl:flex-row"
+    class="container flex xl:min-h-[calc(100vh-12rem)] xl:mt-22 flex-col gap-12 py-12 xl:grid xl:grid-cols-[2fr_3fr]"
   >
     <div class="flex flex-col gap-8">
       <div>
@@ -54,26 +54,26 @@ if (
       <div>
         <Fragment set:html={whatsNewText[0].replace(/\n/g, '<br>')} />
       </div>
-      <ul class="hidden flex-col gap-2 md:flex">
+      <ul class="hidden list-disc flex-col gap-2 xl:flex xl:container">
         <a
           href="https://github.com/zen-browser/desktop/issues/new/choose"
           target="_blank"
         >
-          <li class="ml-3 list-disc">
-            <Description class="text-base font-bold"
-              >{whatsNew.reportIssue}</Description
-            >
+          <li>
+            <Description class="text-base font-bold">
+              {whatsNew.reportIssue}
+            </Description>
           </li>
         </a>
         <a href="https://discord.gg/zen-browser" target="_blank">
-          <li class="ml-3 list-disc">
-            <Description class="text-base font-bold"
-              >{whatsNew.joinDiscord}</Description
-            >
+          <li>
+            <Description class="text-base font-bold">
+              {whatsNew.joinDiscord}
+            </Description>
           </li>
         </a>
       </ul>
-      <div class="flex flex-col gap-8 md:flex-row">
+      <div class="flex flex-wrap gap-8 place-self-start xl:place-self-center">
         <Button
           href={`/release-notes#${latestVersion.version}`}
           isPrimary
@@ -85,14 +85,15 @@ if (
         <SocialMediaStrip gap="6" />
       </div>
     </div>
+    
     <Video
-      src={whatsNewVideo}
-      autoplay
-      loop
-      muted
-      playsinline
-      preload="none"
-      class="w-full rounded-3xl object-cover shadow-lg"
-    />
+    src={whatsNewVideo}
+    autoplay
+    loop
+    muted
+    playsinline
+    preload="none"
+    class="rounded-3xl object-cover shadow-lg"
+  />
   </main>
 </Layout>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 75ec5a1..eecbb7d 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -3,6 +3,22 @@ export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   darkMode: ['selector', '[data-theme="dark"]'],
   theme: {
+    container: {
+      screens: {
+         sm: "100%",
+         md: "100%",
+         lg: "1024px",
+         xl: "1280px",
+      },
+      padding: {
+        DEFAULT: '1rem',  
+        sm: '1.5rem',       
+        md: '1.5rem',       
+        lg: '1.5rem',       
+        xl: '2rem',  
+      },
+      center: true,
+    },
     extend: {
       screens: {
         '-sm': '@media (max-width: 639px)',