Update src/app/community/page.tsx

src/app/community/page.tsx

@@ -4,8 +4,9 @@ import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import FeatureBento from "@/components/sections/feature/FeatureBento";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Brain, Eye, Zap, Layers, Globe, Users, Workflow, Lightbulb } from "lucide-react";
 
 export default function CommunityPage() {
   const navItems = [
@@ -74,18 +75,20 @@ export default function CommunityPage() {
           }))}
           brandName="JESUS MALVERDE MOVEMENT"
           button={{
-            text: "ENTER MOVEMENT",            href: "/contact"}}
+            text: "ENTER MOVEMENT",            href: "/contact"
+          }}
         />
       </div>
 
-      {/* Community Platforms */}
-      <div id="community-platforms" data-section="community-platforms" className="pt-32 pb-20 md:pb-32">
+      {/* Community Section */}
+      <div id="movement-community" data-section="movement-community" className="pt-32 pb-20 md:pb-32">
         <SocialProofOne
           names={[
-            "Instagram @jesusmalverdemovement",            "Twitter @malverdeagency",            "TikTok @jesusmalverde",            "Discord Community Hub",            "Substack Essays",            "Collaborative Events",            "Gallery Exhibitions",            "Global Chapters"]}
-          title="GLOBAL NETWORK"
-          description="Our community spans continents and platforms, united by a commitment to questioning narratives, fostering awareness, and building collective consciousness. Connect, collaborate, and contribute your voice."
-          tag="DECENTRALIZED MOVEMENT"
+            "Instagram @jesusmalverdemovement",            "Twitter @malverdeagency",            "TikTok @jesusmalverde",            "Discord Community Hub",            "Substack Essays",            "Collaborative Events",            "Gallery Exhibitions",            "Global Chapters"
+          ]}
+          title="JOIN THE MOVEMENT"
+          description="A global community of thinkers, creators, and cultural observers questioning narratives and building awareness. Share your perspective. Challenge assumptions. Think deeper."
+          tag="CULTURAL AWAKENING"
           tagAnimation="blur-reveal"
           textboxLayout="default"
           useInvertedBackground={false}
@@ -93,33 +96,48 @@ export default function CommunityPage() {
           showCard={true}
           buttons={[
             { text: "JOIN DISCORD", href: "#" },
-            { text: "FOLLOW CHANNELS", href: "#" },
+            { text: "FOLLOW SOCIAL", href: "#" },
           ]}
           containerClassName="py-20 md:py-32"
         />
       </div>
 
-      {/* Community Engagement Form */}
-      <div id="community-form" data-section="community-form" className="py-20 md:py-32">
-        <ContactSplitForm
-          title="JOIN OUR MOVEMENT"
-          description="Connect with thinkers, creators, and cultural observers around the world. Share your perspective, ask questions, and contribute to our collective awakening."
-          inputs={[
-            { name: "email", type: "email", placeholder: "your@email.com", required: true },
-            { name: "name", type: "text", placeholder: "Your Name", required: false },
+      {/* Community Pillars Section */}
+      <div id="visual-storytelling" data-section="visual-storytelling" className="py-20 md:py-32">
+        <FeatureBento
+          features={[
+            {
+              title: "Connection",              description: "Meet thinkers and creators from around the world.",              bentoComponent: "reveal-icon",              icon: Eye,
+            },
+            {
+              title: "Collaboration",              description: "Build projects and initiatives together.",              bentoComponent: "timeline",              heading: "COMMUNITY GROWTH",              subheading: "Building together",              items: [
+                { label: "Connect", detail: "Find your tribe" },
+                { label: "Collaborate", detail: "Create together" },
+                { label: "Contribute", detail: "Make an impact" },
+              ],
+              completedLabel: "Growing"
+            },
+            {
+              title: "Movement",              description: "Organize and amplify voices for change.",              bentoComponent: "orbiting-icons",              centerIcon: Zap,
+              items: [
+                { icon: Globe, ring: 1 },
+                { icon: Users, ring: 1 },
+                { icon: Layers, ring: 2 },
+                { icon: Workflow, ring: 2 },
+                { icon: Brain, ring: 3 },
+                { icon: Lightbulb, ring: 3 },
+              ],
+            },
           ]}
-          textarea={{
-            name: "message",            placeholder: "What draws you to the movement? What's your perspective?",            rows: 4,
-            required: false,
-          }}
+          title="COMMUNITY PILLARS"
+          description="The foundation of our global movement."
+          tag="TOGETHER WE RISE"
+          tagAnimation="blur-reveal"
+          textboxLayout="default"
+          animationType="blur-reveal"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-purple-flower-glass-jar-with-dark-wall_181624-4742.jpg?_wi=2"
-          imageAlt="Community connection visual"
-          mediaAnimation="blur-reveal"
-          mediaPosition="right"
-          buttonText="CONNECT"
           containerClassName="py-20 md:py-32"
-          onSubmit={(data) => console.log("Community signup:", data)}
+          cardClassName="backdrop-blur-sm border border-opacity-10 hover:border-opacity-30"
         />
       </div>
 
@@ -136,4 +154,4 @@ export default function CommunityPage() {
       </div>
     </ThemeProvider>
   );
-}
+}