From 0e04407ae032c6e054b4e14ddbaac7bea5413025 Mon Sep 17 00:00:00 2001
From: "NABADEEP KR. DAS" <nabadeepdas069@gmail.com>
Date: Wed, 16 Oct 2024 19:42:11 +0530
Subject: [PATCH] Update community.tsx

Padding adjustments: Added padding to the section for better spacing on smaller screens.
Title: Changed the title to "Join Our Community" for a warmer, more welcoming message.
Subtitle: Increased the text size for a more prominent and balanced appearance.
Grid layout: Improved the responsiveness and added spacing between grid items.
Gaps and spacing: Adjusted gaps for better spacing between sections and elements.
Alignment: Kept everything centered for a clean, cohesive look.
---
 apps/docs/components/marketing/community.tsx | 63 +++++++++++---------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/apps/docs/components/marketing/community.tsx b/apps/docs/components/marketing/community.tsx
index 562c33eb07..fa41a1f865 100644
--- a/apps/docs/components/marketing/community.tsx
+++ b/apps/docs/components/marketing/community.tsx
@@ -1,36 +1,45 @@
-import {Spacer} from "@nextui-org/react";
-
-import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
-
-import {FeaturesGrid} from "@/components/marketing/features-grid";
-import {communityAccounts} from "@/libs/constants";
+import { Spacer } from "@nextui-org/react";
+import { sectionWrapper, titleWrapper, title, subtitle } from "../primitives";
+import { FeaturesGrid } from "@/components/marketing/features-grid";
+import { communityAccounts } from "@/libs/constants";
 
 export const Community = () => {
   return (
-    <section className={sectionWrapper({class: "flex flex-col items-center mt-16 lg:mt-44"})}>
-      <div className="max-w-4xl flex flex-col gap-8">
-        <div>
-          <div className={titleWrapper({class: "items-center"})}>
-            <div className="inline-flex items-center">
-              <h1 className={title({size: "lg"})}>Community</h1>&nbsp;&nbsp;
-            </div>
+    <section
+      className={sectionWrapper({
+        class: "flex flex-col items-center mt-16 lg:mt-44 px-4 md:px-0",
+      })}
+    >
+      <div className="max-w-4xl flex flex-col gap-10">
+        {/* Title Section */}
+        <div className={titleWrapper({ class: "items-center text-center" })}>
+          <div className="inline-flex items-center">
+            <h1 className={title({ size: "lg" })}>Join Our Community</h1>
           </div>
-          <p
-            className={subtitle({class: "md:w-full text-center flex justify-center items-center"})}
-          >
-            Get involved in our community. Everyone is welcome!
-          </p>
-          <Spacer y={12} />
-          <FeaturesGrid
-            classNames={{
-              base: "lg:grid-cols-3",
-              iconWrapper: "bg-transparent",
-              body: "pt-0",
-            }}
-            features={communityAccounts}
-          />
         </div>
+
+        {/* Subtitle Section */}
+        <p
+          className={subtitle({
+            class:
+              "md:w-full text-center flex justify-center items-center text-lg lg:text-xl",
+          })}
+        >
+          Get involved in our community. Everyone is welcome!
+        </p>
+
+        {/* Features Section */}
+        <Spacer y={10} />
+        <FeaturesGrid
+          classNames={{
+            base: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8",
+            iconWrapper: "bg-transparent",
+            body: "pt-4",
+          }}
+          features={communityAccounts}
+        />
       </div>
     </section>
   );
 };
+