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

@@ -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>