update the membership page

src/components/MembershipPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Box,
   Typography,
@@ -28,6 +28,16 @@ const teams = [
     description:
       "Organize in-person T4P events in the US to help grow the movement.",
   },
+  {
+    name: "T4P Hackathons",
+    description:
+      "Arrange hackathons to kickstart software solutions to movement problems.",
+  },
+  {
+    name: "Boycott Search",
+    description:
+      "Develop a search engine that aggregates boycott targets and alternatives to Zionist resources, providing a central entry point to easily navigate boycotting information across organizations.",
+  },
 ];
 
 function QgivEmbed() {
@@ -58,15 +68,36 @@ function QgivEmbed() {
 }
 
 export default function MembershipPage() {
+  const [showCalculator] = useState<boolean>(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get("calculator") !== "no";
+  });
+
+  useEffect(() => {
+    if (typeof window.plausible !== "undefined") {
+      window.plausible("Membership Page", {
+        props: { membership_variant: showCalculator ? "Calculator" : "No Calculator" },
+      });
+    }
+  }, [showCalculator]);
+
   return (
     <Box sx={{ maxWidth: 800, mx: "auto" }}>
       {/* Intro */}
+      <Typography variant="h5" component="h2" sx={{ mb: 3, fontWeight: 700, color: "#111827" }}>
+        Becoming a member is the best way to support Tech for Palestine
+      </Typography>
       <Typography variant="body1" sx={{ mb: 2, fontSize: "1.125rem", lineHeight: 1.75, color: "#374151" }}>
-        <strong>Becoming a member is the best way to donate to Tech for Palestine.</strong> Your membership dues fund training, financial grants, and volunteers for pro-Palestine projects
-        like Upscrolled, Boycat, and Newscord.
+        Members support T4P's work directly through dues and by joining teams to scale the movement,
+        advocate for non-complicit tech and collaborate for Palestinian liberation.
+      </Typography>
+      <Typography variant="body1" sx={{ mb: 2, fontSize: "1.125rem", lineHeight: 1.75, color: "#374151" }}>
+        Membership dues support all T4P initiatives, including the Incubator, the 90+ external projects
+        we support, and teams & campaigns working on tech complicity. Our best known successes include
+        UpScrolled, Boycat, Find a Protest, Apricot, and Thaura AI.
       </Typography>
       <Typography variant="body1" sx={{ mb: 1, fontSize: "1.125rem", lineHeight: 1.75, color: "#374151" }}>
-        As a member, you are invited to join our portal, the <strong>Hub</strong>, where you can:
+        After joining, you'll be invited to join <strong>Hub</strong>, our member portal, where you can:
       </Typography>
       <Box
         component="ul"
@@ -80,16 +111,16 @@ export default function MembershipPage() {
           "& li": { mb: 0.75, lineHeight: 1.75 },
         }}
       >
-        <li>Join teams to scale the movement, advocate for non-complicit tech and fight for Palestinian liberation</li>
-        <li>Start an initiative of your own, with T4P support and resources to help you grow</li>
+        <li>Join our advocacy and support teams, working directly on Palestinian liberation</li>
+        <li>Start a team of your own, with T4P support and resources to help you grow</li>
       </Box>
       <Typography variant="body1" sx={{ mb: 5, fontSize: "1.125rem", lineHeight: 1.75, color: "#374151" }}>
         Whether you're a thinker, builder, leader, software developer, marketer, or activist, there's a place for you to contribute in your own way.
       </Typography>
 
       {/* Team cards */}
       <Typography variant="h5" component="h2" sx={{ mb: 3, fontWeight: 700, color: "#111827" }}>
-        A few examples of our teams on the Hub:
+        A few examples of our teams:
       </Typography>
 
       <Box
@@ -123,12 +154,16 @@ export default function MembershipPage() {
       </Box>
 
       {/* Membership Dues */}
+      <Typography variant="h5" component="h2" sx={{ mb: 3, fontWeight: 700, color: "#111827" }}>
+        Membership Dues
+      </Typography>
       <Typography variant="body1" sx={{ mb: 3, fontSize: "1.125rem", lineHeight: 1.75, color: "#374151" }}>
-        You can choose to donate any amount you want for membership dues. We suggest a contribution equal to one hour's salary,
-        which you can calculate below:
+        {showCalculator
+          ? "Contribute any amount for membership dues. We suggest monthly dues equal to one hour's salary, which you can calculate below:"
+          : "Contribute any amount for membership dues. We suggest monthly dues equal to one hour's salary."}
       </Typography>
 
-      <MembershipCalculator />
+      {showCalculator && <MembershipCalculator />}
 
       {/* Payment form + side info */}
       <Box