Patched the changes suggested along with a few more improvements.

public/scripts/text-scramble.js

@@ -0,0 +1,99 @@
+function applyScrambleEffect() {
+	const glitchTextOnceElements = document.querySelectorAll('.glitch-text');
+	const glitchTextRepeatElements = document.querySelectorAll('.glitch-text-interval');
+  
+	function animateScramble(element, text, duration = 1000) {
+	  const chars = [];
+	  element.innerHTML = '';
+	  const preScrambleWidth = element.offsetWidth;
+	  element.style.width = `${preScrambleWidth}px`;
+  
+	  for (let t = 0; t < text.length; t++) {
+		const span = document.createElement('span');
+		span.innerHTML = text[t] === ' ' ? '&nbsp;' : text[t];
+		chars[t] = span;
+		span.style.display = 'inline-block';
+		element.appendChild(span);
+	  }
+  
+	  const rand = Math.random;
+	  const SECONDS = 1000;
+	  const FPS = 30;
+	  const animationLength = duration;
+  
+	  function animate3(k) {
+		const kk = k * text.length;
+		for (let i = 0; i < text.length; i++) {
+		  if (kk < i) {
+			chars[i].innerHTML = String.fromCharCode(~~(65 + rand() * 26));
+		  } else {
+			chars[i].innerHTML = text[i] === ' ' ? '&nbsp;' : text[i];
+		  }
+		}
+	  }
+  
+	  let start = Date.now();
+	  function animate() {
+		const current = Date.now();
+		const time = current - start;
+		const k = time / animationLength;
+  
+		if (k < 1) {
+		  setTimeout(animate, SECONDS / FPS);
+		  animate3(k);
+		} else {
+		  for (let i = 0; i < text.length; i++) {
+			chars[i].innerHTML = text[i] === ' ' ? '&nbsp;' : text[i];
+		  }
+		  element.style.width = 'auto';
+		  element.isAnimating = false;
+		}
+	  }
+  
+	  animate();
+	}
+  
+	const observer = new IntersectionObserver((entries, observer) => {
+	  entries.forEach(entry => {
+		if (entry.isIntersecting) {
+		  const element = entry.target;
+		  const text = element.innerText;
+		  animateScramble(element, text);
+		  observer.unobserve(element);
+		}
+	  });
+	}, {
+	  threshold: 0.1
+	});
+  
+	glitchTextOnceElements.forEach((element) => {
+	  observer.observe(element);
+	});
+  
+	glitchTextRepeatElements.forEach((element) => {
+	  const text = element.innerText;
+  
+	  animateScramble(element, text);
+  
+	  const intervalId = setInterval(() => {
+		if (!element.isAnimating) {
+		  animateScramble(element, text);
+		}
+	  }, 5000);
+  
+	  element.addEventListener('mouseenter', () => {
+		if (!element.isAnimating) {
+		  clearInterval(intervalId);
+		  animateScramble(element, text, 800);
+		  element.isAnimating = true;
+  
+		  setTimeout(() => {
+			element.isAnimating = false;
+		  }, 1000);
+		}
+	  });
+	});
+  }
+  
+  document.addEventListener('DOMContentLoaded', applyScrambleEffect);
+  

src/components/AboutFooter.astro

@@ -2,114 +2,147 @@
 import * as config from "../config.yaml";
 import core from "../core.json";
 import contributors from "../contributors.json";
-import { getPersonByGH } from "../lib/core.js";
+import SpeakerGrid from "./SpeakerGrid.astro";
-import PeopleCarousel from "../components/PeopleCarousel.astro";
+import SliderTestimonial from "./SliderTestimonial.astro";
+import MembersGrid from "./MembersGrid.astro";
 
-function findPerson(src) {
+// Accept sectionsConfig as a prop
-  const p = core.people.find((p) =>
+const {
-    src.refs?.twitter
+  sectionsConfig = [
-      ? p.refs?.twitter === src.refs.twitter
+    { name: "community", visible: true, order: 1 },
-      : src.refs?.bsky
+    { name: "socialLinks", visible: true, order: 2 },
-        ? p.refs.bsky === src.refs.bsky
+    { name: "speakers", visible: true, order: 3 },
-        : {}
+    { name: "core contributors", visible: true, order: 4 },
-  );
+    { name: "contributors", visible: true, order: 5 },
-  if (p) {
+    { name: "testimonials", visible: true, order: 6 },
-    p.ct = src;
+    { name: "membersGrid", visible: true, order: 7 },
-  }
+    { name: "communityPartners", visible: true, order: 8 },
-  return p;
+  ],
-}
+} = Astro.props;
 
-function personLink(person) {
+console.log(sectionsConfig);
-  return person.refs?.twitter
+// Function to sort sections by order
-    ? `https://twitter.com/${person.refs.twitter}`
+const sortedSections = sectionsConfig
-    : person.refs?.bsky
+  .filter((section) => section.visible)
-      ? `https://bsky.app/profile/${person.refs.bsky}`
+  .sort((a, b) => a.order - b.order);
-      : "#";
-}
 ---
 
-<!-- <div class="mt-20">
+{
-    <h1><a href="https://docs.web3privacy.info/follow-us">Follow us</a></h1>
+  sortedSections.map((section) => (
-    <div class="w3pn-wgrid">
+    <div>
-        {config.landing.follow.map((item) => (
+      {section.name === "community" && (
-            <a href={item.url || core.links[item.link]} target="_blank">
+        <div class="middle-pane-medium mt-16">
-                <span><span class="icon" class:list={[item.ico || ""]}></span></span>
-                <span class="title">{item.name}</span>
-                <span>{item.text}</span>
-            </a>
-        ))}
-    </div>
-</div>
-<div class="mt-10">
-    <h1><a href="https://docs.web3privacy.info/communication">Coordination</a></h1>
-    <div class="w3pn-wgrid">
-        {config.landing.coord.map((item) => (
-            <a href={item.url || core.links[item.link]} target="_blank">
-                <span><span class="icon" class:list={[item.ico || ""]}></span></span>
-                <span class="title">{item.name}</span>
-                <span>{item.text}</span>
-            </a>
-        ))}
-    </div>
-</div> -->
-<div class="mt-16">
           <h1>
-    <a href="https://docs.web3privacy.info/get-involved">Join the Community</a>
+            <a
+              class="glitch-text"
+              href="https://docs.web3privacy.info/get-involved"
+            >
+              Join the Community
+            </a>
           </h1>
           <div>{config.landing.community}</div>
+        </div>
+      )}
 
-  <h2 class="my-6">Speakers</h2>
+      {section.name === "socialLinks" && (
-  <div class="flex gap-3 flex-wrap items-center">
+        <div class=" middle-pane-big grid place-items-center grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2 pt-4 w-full">
-    {
+          <a
-      core.people
+            href={core.links.twitter}
-        .filter((p) => !core.teams["core-team"].includes(p.id))
+            class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
-        .filter((p) => p.imageUrl)
+          >
-        .map((person) => (
+            <button class="flex flex-col items-center justify-center">
-          <div>
+              <div class="icon twitter" />
-            <a href={personLink(person)}>
+              @web3privacy
-              <img
+            </button>
-                src={person.imageUrl}
+          </a>
-                title={person.name}
+          <a
-                class="w-14 rounded-full aspect-square"
+            href={core.links.telegram}
-              />
+            class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
+          >
+            <button class="flex flex-col items-center justify-center">
+              <div class="icon telegram" />
+              Telegram
+            </button>
+          </a>
+          <a
+            href={core.links.signal}
+            class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
+          >
+            <button class="flex flex-col items-center justify-center">
+              <div class="icon">
+                <img src="/icons/signal.svg" alt="" />
+              </div>
+              Signal
+            </button>
+          </a>
+          <a
+            href={core.links.matrix}
+            class="bg-[#101010]  w-full flex items-center justify-center w-full h-40 overflow-hidden"
+          >
+            <button class="flex flex-col items-center justify-center">
+              <div class="icon matrix" />
+              matrix
+            </button>
           </a>
         </div>
-        ))
+      )}
-    }
-  </div>
 
-  <div class="flex gap-3 lg:gap-6 pt-4 flex-wrap mt-4 mb-14">
+      {section.name === "speakers" && (
-    <a href={core.links.cfp} class="button inverted"
+        <div class="middle-pane-medium mt-16">
-      ><button>Submit your proposal (CfP)</button></a
+          <h1 class="my-6 glitch-text ">Speakers</h1>
-    >
+          <SpeakerGrid people={core.people} team={core.teams["core-team"]} />
         </div>
+      )}
 
-  <h2 class="my-6">Git Contributors</h2>
+      {section.name === "core contributors" && (
+        <div class="middle-pane-medium mt-16">
+          <h1 class="my-6 glitch-text">Core Contributors</h1>
+          <SpeakerGrid people={core.people} team={core.teams["core-team"]} />
+        </div>
+      )}
+
+      {section.name === "contributors" && (
+        <div class="middle-pane-medium">
+          <h1 class="my-6 glitch-text">Contributors</h1>
           <div class="flex gap-3 flex-wrap mb-4 items-center">
-    {
+            {contributors.items.map((contrib) => (
-      // filter(p => !core.teams['core-team'].includes(getPersonByGH(p.login)?.id))
-      contributors.items.map((contrib) => (
               <div>
-          <a href={contrib.html_url} target="_blank" title={contrib.login}>
+                <a
+                  href={contrib.html_url}
+                  target="_blank"
+                  title={contrib.login}
+                >
                   <img
                     src={contrib.avatar_url}
                     class="w-14 rounded-full aspect-square"
                   />
                 </a>
               </div>
+            ))}
+          </div>
+          <div class="flex gap-4 lg:gap-6 pt-4 flex-wrap">
+            <a href={core.links.telegram} class="button inverted">
+              <button>Become a Contributor</button>
+            </a>
+          </div>
+        </div>
+      )}
+
+      {section.name === "testimonials" && (
+        <div class="middle-pane-medium">
+          <h1 class="my-6 mt-16 glitch-text">
+            What People Have To Say About US
+          </h1>
+          <SliderTestimonial />
+        </div>
+      )}
+
+      {section.name === "membersGrid" && (
+        <div class="middle-pane-medium mt-16">
+          <h1 class="my-6 glitch-text">Members</h1>
+          <MembersGrid people={core.people} team={core.teams["core-team"]} />
+        </div>
+      )}
+    </div>
   ))
 }
-  </div>
-
-  <div class="flex gap-4 lg:gap-6 pt-4 flex-wrap">
-    <a href={core.links.telegram} class="button inverted"
-      ><button>Telegram</button></a
-    >
-    <a href={core.links.signal} class="button inverted"
-      ><button>Signal</button></a
-    >
-    <a href={core.links.matrix} class="button inverted"
-      ><button>matrix hub</button></a
-    >
-  </div>
-</div>

src/components/AboutItemGrid.astro

@@ -2,236 +2,107 @@
 import AboutItem from "../components/AboutItem.astro";
 ---
 
-<div>
+<AboutItem title="RESEARCH" subtext="">
-  <AboutItem
+  <div class="w-full">
-    title="AUDIENCES"
+    <div class="flex flex-col gap-[8px]">
-    subtext="For all of them we are building private platform to discuss and build privavy tooling and research"
+      <p>
-  >
+        We cultivate and foster a culture of privacy in web3 making data free
-    <div class="w-full grid grid-cols-2">
+        and public.
-      <div class="flex flex-col gap-[8px] text-white font-bold">
+      </p>
-        <span> General public </span>
+      <p>
-        <span> Projects </span>
+        Check our annual reports, infographics, privacy awards, newsletter, and
-        <span> Startupers</span>
+        guidelines.
-      </div>
+      </p>
-      <div class="flex flex-col gap-[8px] text-white font-bold">
+      <a class="button inverted"><button>web3privacy Research</button></a>
-        <span> Developers </span>
-        <span> Audit companies </span>
-        <span> Investors</span>
     </div>
   </div>
 </AboutItem>
-  <AboutItem
+<AboutItem title="PROJECTS & TOOLS PRODUCTION" subtext="">
-    title="PLATFORM"
+  <p class="mb-5">
-    subtext="We need to create activation points, that will push community around privacy forward and establish new connections"
+    By developing free and open tools, <br /> we empower people to make informed
-  >
+    decisions:
-    <div class="flex flex-col gap-[8px] items-start">
+  </p>
-      <div class="flex gap-[12px] md:items-center items-start w-full">
-        <img src="/icons/query_stats.svg" class="inline-block" />
-        <div
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
-        >
-          <span
-            class="font-bold text-white leading-[1rem] w-full max-w-[110px]"
-          >
-            Market stats
-          </span>
-          <span class="md:block hidden">-</span>
-          <span class="text-[1rem] w-full">
-            Like Crunchbase, but free forever
-          </span>
-        </div>
-      </div>
 
+  <div class="flex flex-col gap-5">
     <div class="flex gap-[12px] md:items-center items-start w-full">
-        <img src="/icons/star_half.svg" class="inline-block" />
+      <div class="flex flex-row space-x-5 w-full">
-        <div
+        <div>
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
-        >
-          <span
-            class="font-bold text-white leading-[1rem] w-full max-w-[140px]"
-          >
-            Privacy Ranking
-          </span>
-          <span class="md:block hidden">-</span>
-          <span class="text-[1rem] w-full">
-            Scoring and review of current privacy projects
-          </span>
-        </div>
-      </div>
-      <div class="flex gap-[12px] md:items-center items-start w-full">
-        <img src="/icons/school.svg" class="inline-block" />
-        <div
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
-        >
-          <span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
-            Academy
-          </span>
-          <span class="md:block hidden">-</span>
-          <span class="text-[1rem] w-full"
-            >Education for general public how to reach privacy
-          </span>
-        </div>
-      </div>
-      <div class="flex gap-[12px] md:items-center items-start w-full">
-        <img src="/icons/experiment.svg" class="inline-block" />
-        <div
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
-        >
-          <span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
-            Research
-          </span>
-          <span class="md:block hidden">-</span>
-          <span class="text-[1rem] w-full">
-            Anual reports, Frameworks, Tools, Books
-          </span>
-        </div>
-      </div>
-      <div class="flex gap-[12px] md:items-center items-start w-full">
           <img src="/icons/database.svg" class="inline-block" />
-        <div
+        </div>
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
+        <div>
+          <div class="flex items-center flex-nowrap space-x-5">
+            <span
+              class="font-bold text-white underline"
+              style="text-underline-offset: 4px;"
             >
-          <span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
+              PRIVACY EXPLORER
-            Data
             </span>
-          <span class="md:block hidden">-</span>
+          </div>
-          <span class="text-[1rem] w-full"
+          <span class="text-[1rem] mt-0 w-full"
             >For Projects, Use-case list, Market & Funding info
           </span>
         </div>
       </div>
     </div>
-  </AboutItem>
-  <AboutItem
-    title="ACTIVATIONS"
-    subtext="With all of that we want to focus everybody more in web3 related privacy issues, those are our estimates and long-term goals"
-  >
-    <div class="flex flex-col gap-[8px] items-start">
-      <div class="flex gap-[12px] md:items-center items-start w-full">
-        <img src="/icons/visibility_lock.svg" class="inline-block" />
-        <div
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
-        >
-          <span class="font-bold text-white leading-[1rem] w-fit">
-            Advocacy
-          </span>
-          <span class="md:block hidden">-</span>
-          <span class="text-[1rem] w-full">
-            Branding “decentralization = privacy”
-          </span>
-        </div>
-      </div>
 
     <div class="flex gap-[12px] md:items-center items-start w-full">
-        <img src="/icons/calendar_today.svg" class="inline-block" />
+      <div class="flex flex-row space-x-5 w-full">
-        <div
+        <div>
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
+          <img src="/icons/experiment.svg" class="inline-block" />
-        >
-          <span class="font-bold text-white leading-[1rem] w-fit">
-            Events
-          </span>
-          <span class="md:block hidden">-</span>
-          <span class="text-[1rem] w-full">
-            Meetups, Summits, Hackathons, Camps
-          </span>
         </div>
-      </div>
+        <div>
-      <div class="flex gap-[12px] md:items-center items-start w-full">
+          <div class="flex items-center flex-nowrap space-x-5">
-        <img src="/icons/group_work.svg" class="inline-block" />
-        <div
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
-        >
             <span
-            class="font-bold text-white leading-[1rem] w-full max-w-[220px]"
+              class="font-bold text-white underline"
+              style="text-underline-offset: 4px;"
             >
-            Ecosystems collaboration
+              HACKATHON IDEA GENERATOR
-          </span>
-          <span class="md:block hidden">-</span>
-          <span class="text-[1rem] w-full"> Networks, Alliances, Media </span>
-        </div>
-      </div>
-      <div class="flex gap-[12px] md:items-center items-start w-full">
-        <img src="/icons/encrypted.svg" class="inline-block" />
-        <div
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
-        >
-          <span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
-            Standartisation
-          </span>
-          <span class="md:block hidden">-</span>
-          <span class="text-[1rem] w-full">
-            Privacy-features, security audit (example)
             </span>
           </div>
+          <span class="text-[1rem] mt-0 w-full"
+            >Helps developers build applications that address real-world
+            problems, that people will actually use.
+          </span>
+        </div>
+      </div>
     </div>
     <div class="flex gap-[12px] md:items-center items-start w-full">
+      <div class="flex flex-row space-x-5 w-full">
+        <div>
           <img src="/icons/local_florist.svg" class="inline-block" />
-        <div
+        </div>
-          class="flex md:flex-row flex-col md:items-center md:gap-[12px] w-full"
+        <div>
+          <div class="flex items-center flex-nowrap space-x-5">
+            <span
+              class="font-bold text-white underline"
+              style="text-underline-offset: 4px;"
             >
-          <span class="font-bold text-white leading-[1rem] w-fit max-w-[140px]">
+              WEEK IN PRIVACY
-            Incubation
             </span>
-          <span class="md:block hidden">-</span>
+          </div>
-          <span class="text-[1rem] w-full"
+          <span class="text-[1rem] mt-0 w-full"
-            >Product managers facilitation, Business sustainability
+            >Weekly newsletter with round-up of the most important news
+            happening around privacy in Web3
           </span>
         </div>
       </div>
     </div>
+  </div>
 </AboutItem>
-  <AboutItem variant="secondary" title="GOALS">
+
-    <div class="flex md:flex-row flex-col gap-[32px]">
+<AboutItem title="EDUCATION" subtext="">
-      <div class="flex flex-col gap-[16px]">
+  <div class="w-full">
-        <div class="flex flex-col gap-[4px]">
+    <div class="flex flex-col gap-[8px]">
-          <span class="font-bold text-white my-2 leading-[1rem] uppercase">
+      <p>
-            GENERAL PUBLIC
+        We make privacy accessible for everyone, empowering people to learn and
-          </span>
+        implement best practices effectively.
-          <ul class="list-decimal ml-[18px]">
+      </p>
-            <li>Milions of educated users</li>
+      <p>
-            <li>Higher privacy culture</li>
+        From mentoring at hackathons, guidelines for developers, and the
-          </ul>
+        Cypherpunk Academy - we offer training, incubation, and acceleration
-        </div>
+        programs.
-        <div class="flex flex-col gap-[4px]">
+      </p>
-          <span class="font-bold text-white my-2 leading-[1rem] uppercase">
+      <a class="button inverted"><button>Privacy Academy</button></a>
-            PROJECTS
-          </span>
-          <ul class="list-decimal ml-[18px]">
-            <li>Better privacy features</li>
-            <li>New use-cases</li>
-            <li>Efficient demos</li>
-          </ul>
-        </div>
-        <div class="flex flex-col gap-[4px]">
-          <span class="font-bold text-white my-2 leading-[1rem] uppercase">
-            SECURITY AUDIT COMPANIES
-          </span>
-          <ul class="list-decimal ml-[18px]">
-            <li>New “privacy audit” category</li>
-            <li>Significant growth of audited projects.</li>
-          </ul>
-        </div>
-      </div>
-      <div class="flex flex-col gap-[16px]">
-        <div class="flex flex-col gap-[4px]">
-          <span class="font-bold text-white mb-2 mt-0 leading-[1rem] uppercase">
-            DEVELOPERS
-          </span>
-          <ul class="list-decimal ml-[18px] w-full">
-            <li>More devs building privacy</li>
-            <li>More sustainable projects.</li>
-          </ul>
-        </div>
-        <div class="flex flex-col gap-[4px] w-full">
-          <span class="font-bold text-white my-2 leading-[1rem] uppercase">
-            STARTUPERS
-          </span>
-          <ul class="list-decimal ml-[18px]">
-            <li>More privacy-oriented projects</li>
-            <li>Longer runway</li>
-          </ul>
-        </div>
     </div>
   </div>
 </AboutItem>
-</div>

src/components/EventItem.astro

@@ -71,7 +71,7 @@ const eventPoster = getEventPoster(item)
                 }
                 {/*<div class="text-sm"></div>*/}
                 {item.links?.rsvp &&
-                        <a href={item.links?.rsvp} class="button inverted"><button>Join</button></a>
+                        <a href={item.links?.rsvp} class="button inverted border-2"><button>Join</button></a>
                 }
             </div>
 

src/components/EventMasonry.astro

@@ -0,0 +1,142 @@
+---
+const {
+  images = [
+    "/events/masonry/1.webp",
+    "/events/masonry/2.webp",
+    "/events/masonry/3.webp",
+    "/events/masonry/4.webp",
+    "/events/masonry/5.webp",
+    "/events/masonry/6.webp",
+    "/events/masonry/7.webp",
+    "/events/masonry/8.webp",
+    "/events/masonry/9.webp",
+  ],
+} = Astro.props;
+---
+
+<div class="middle-pane-big flex flex-wrap lg:flex-nowrap gap-[3px]">
+  {
+    images.slice(0, 4).map((image, index) => (
+      <div class="flex-auto overflow-hidden" key={index}>
+        <img
+          class="object-cover w-full max-h-[223px] cursor-pointer gallery-image"
+          src={image}
+          alt={`Image ${index + 1}`}
+          data-index={index}
+        />
+      </div>
+    ))
+  }
+</div>
+
+<div class="middle-pane-big flex flex-wrap lg:flex-nowrap gap-[3px]">
+  {
+    images.slice(4).map((image, index) => (
+      <div class="flex-auto overflow-hidden" key={index + 4}>
+        <img
+          class="object-cover w-full max-h-[223px] cursor-pointer gallery-image"
+          src={image}
+          alt={`Image ${index + 5}`}
+          data-index={index + 4}
+        />
+      </div>
+    ))
+  }
+</div>
+
+<div
+  class="image-modal hidden fixed inset-0 bg-black flex-col flex items-center justify-center z-50"
+>
+  <div class="relative modal-content">
+    <button class="absolute top-6 right-0 text-white close-modal z-100"
+      ></button
+    >
+  </div>
+  <div class="flex flex-col" style="width: 54vw; height: 60vh;">
+    <img
+      class="w-full h-full object-contain modal-image"
+      src=""
+      alt="Selected Image"
+    />
+  </div>
+
+  <div class="flex overflow-x-auto gap-3 mt-4 thumbnails">
+    {
+      images.map((image, index) => (
+        <img
+          key={index}
+          class="w-24 h-24 object-contain cursor-pointer thumbnail-image"
+          src={image}
+          alt={`Thumbnail ${index + 1}`}
+          data-index={index}
+        />
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  let selectedIndex = 0;
+  const images = [
+    "/events/masonry/1.webp",
+    "/events/masonry/2.webp",
+    "/events/masonry/3.webp",
+    "/events/masonry/4.webp",
+    "/events/masonry/5.webp",
+    "/events/masonry/6.webp",
+    "/events/masonry/7.webp",
+    "/events/masonry/8.webp",
+    "/events/masonry/9.webp",
+  ];
+
+  function openModal(index) {
+    selectedIndex = index;
+    updateModalImage();
+    document.querySelector(".image-modal").classList.remove("hidden");
+  }
+
+  function closeModal() {
+    document.querySelector(".image-modal").classList.add("hidden");
+  }
+
+  function updateModalImage() {
+    const imageSrc = images[selectedIndex];
+    document.querySelector(".modal-image").src = imageSrc;
+  }
+
+  function showNextImage() {
+    selectedIndex = (selectedIndex + 1) % images.length;
+    updateModalImage();
+  }
+
+  function showPrevImage() {
+    selectedIndex = (selectedIndex - 1 + images.length) % images.length;
+    updateModalImage();
+  }
+
+  document.querySelectorAll(".gallery-image").forEach((image) => {
+    image.addEventListener("click", (event) => {
+      const index = event.target.getAttribute("data-index");
+      openModal(Number(index));
+    });
+  });
+
+  document.querySelector(".close-modal").addEventListener("click", closeModal);
+
+  document.querySelector(".image-modal").addEventListener("click", (event) => {
+    if (event.target === document.querySelector(".image-modal")) closeModal();
+  });
+
+  document.querySelectorAll(".thumbnail-image").forEach((thumbnail) => {
+    thumbnail.addEventListener("click", (event) => {
+      const index = event.target.getAttribute("data-index");
+      openModal(Number(index));
+    });
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowRight") showNextImage();
+    if (event.key === "ArrowLeft") showPrevImage();
+    if (event.key === "Escape") closeModal();
+  });
+</script>

src/components/MembersGrid.astro

@@ -0,0 +1,129 @@
+---
+const { people, team } = Astro.props;
+// Dummy data for now:
+let filteredPeople = [
+  {
+    id: "guy-zyskind",
+    name: "Guy Zyskind",
+    caption:
+      "Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
+    country: "is",
+    refs: {
+      twitter: "GuyZys",
+    },
+    imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
+    thumbs: {
+      "64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
+      "128":
+        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
+      "400":
+        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
+    },
+  },
+  {
+    id: "guy-zyskind",
+    name: "Guy Zyskind",
+    caption:
+      "Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
+    country: "is",
+    refs: {
+      twitter: "GuyZys",
+    },
+    imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
+    thumbs: {
+      "64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
+      "128":
+        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
+      "400":
+        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
+    },
+  },
+  {
+    id: "guy-zyskind",
+    name: "Guy Zyskind",
+    caption:
+      "Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
+    country: "is",
+    refs: {
+      twitter: "GuyZys",
+    },
+    imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
+    thumbs: {
+      "64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
+      "128":
+        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
+      "400":
+        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
+    },
+  },
+  {
+    id: "guy-zyskind",
+    name: "Guy Zyskind",
+    caption:
+      "Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
+    country: "is",
+    refs: {
+      twitter: "GuyZys",
+    },
+    imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
+    thumbs: {
+      "64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
+      "128":
+        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
+      "400":
+        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
+    },
+  },
+];
+
+// NOTE: Uncomment this if you want to filter people dynamically based upon a specific parameter
+
+// const filteredPeople = people
+//   .filter((p) => !team.includes(p.id))
+//   .filter((p) => p.imageUrl);
+
+// Limit the number of members to 12 (2 rows with a max of 6 columns each)
+const limitedPeople = filteredPeople.slice(0, 12);
+
+function personLink(person) {
+  return person.refs?.twitter
+    ? `https://twitter.com/${person.refs.twitter}`
+    : person.refs?.bsky
+      ? `https://bsky.app/profile/${person.refs.bsky}`
+      : "#";
+}
+
+function truncateCaption(caption) {
+  if (!caption) return "";
+  const words = caption.split(" ");
+  if (words.length > 10) {
+    return words.slice(0, 20).join(" ") + "...";
+  }
+  return caption;
+}
+---
+
+<div
+  class="grid place-items-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2"
+>
+  {
+    limitedPeople.map((person) => (
+      <div class=" max-w-xs w-full h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2">
+        <a href={personLink(person)}>
+          <img
+            src={person.imageUrl}
+            alt={person.name}
+            class="w-full h-48 object-cover filter grayscale"
+          />
+        </a>
+        <div class=" flex items-center justify-center  flex-col pt-8">
+          <h3 class="text-lg font-bold">{person.name}</h3>
+          {person.refs && person.refs.twitter && (
+            <p class="text-sm text-gray-500">@{person.refs.twitter}</p>
+          )}
+          {/* <p class="text-sm">{truncateCaption(person.caption)}</p> */}
+        </div>
+      </div>
+    ))
+  }
+</div>

src/components/MembershipOtherOptionsWidget.astro

@@ -0,0 +1,176 @@
+<div class="flex flex-col md:flex-row gap-8">
+  <div class="flex flex-col h-full">
+    <div class="bg-white px-[16px] text-black">
+      <h3 style="color:black !important" class="pb-[3px]">SPONSORSHIP</h3>
+    </div>
+    <div class="border-4 h-full border-white w-full">
+      <div
+        class="w-full h-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white"
+      >
+        <div
+          class="flex flex-col h-full justify-between p-4 px-6 z-[10] relative"
+        >
+          <div class="flex flex-col mb-4">
+            <p>
+              Members are our chosen collaborators for mutual support and
+              growth. Rather than one-time deals for individual events or
+              projects, we strive for consistent collaboration to achieve
+              lasting impact.
+            </p>
+            <span class="leading-[1.4rem]">
+              Become an integral part of our community! Join us with building
+              privacy platform we all need.
+            </span>
+          </div>
+          <div class="flex flex-col z-[10] mb-4">
+            <span class="text-white font-bold text-[18px]"> 2024 </span>
+            <ul class="text-white">
+              <a href="/" class="underline" style="text-underline-offset: 4px;">
+                <li>Privacy</li></a
+              >
+
+              <a href="/" class="underline" style="text-underline-offset: 4px;">
+                <li>Scaling</li></a
+              >
+              <a href="/" class="underline" style="text-underline-offset: 4px;">
+                <li>Exploration</li></a
+              >
+              <a href="/" class="underline" style="text-underline-offset: 4px;">
+                <li>Ethereum</li></a
+              >
+              <a href="/" class="underline" style="text-underline-offset: 4px;">
+                <li>Foundation</li></a
+              >
+              <a href="/" class="underline" style="text-underline-offset: 4px;">
+                <li>Railgun</li></a
+              >
+              <a href="/" class="underline" style="text-underline-offset: 4px;">
+                <li>Payy</li></a
+              >
+            </ul>
+          </div>
+          <div class="flex flex-col z-[10] mb-4">
+            <span class="text-white font-bold text-[18px] leading-[1.4rem]">
+              2023
+            </span>
+            <p class="text-white leading-widest">
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"><span>Zcash</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"><span>Firo</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"><span>Firn</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"
+                ><span>Privacy Scaling Exploration</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"><span>Railgun</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"><span>ENS</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"
+                ><span>Navio (ex Navcoin)</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"><span>Panther</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"
+                ><span>AragonTKResearch</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"
+                ><span>Secret Network</span></a
+              > /
+              <a
+                href="#"
+                class="hover:underline"
+                style="text-underline-offset: 4px;"><span>Waku</span></a
+              >
+            </p>
+          </div>
+          <a class="button inverted"><button>BECOME A SPONSOR</button></a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col justify-between gap-8">
+    <div class="">
+      <div class="bg-white w-full px-[16px] text-black">
+        <h3 style="color:black !important" class="pb-[3px]">DONATE</h3>
+      </div>
+      <div class="border-4 border-white w-full">
+        <div
+          class="w-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white p-4"
+        >
+          <div class="flex flex-col h-full justify-between gap-10 z-[10]">
+            <div class="flex flex-col my-4">
+              <p>
+                Members are our chosen collaborators for mutual support and
+                growth. Rather than one-time deals for individual events or
+                projects, we strive for consistent collaboration to achieve
+                lasting impact.
+              </p>
+              <p class="text-white mt-4">
+                <strong
+                  >Support our independence, help us to advocate for freedom</strong
+                >
+              </p>
+            </div>
+            <a class="button inverted"><button>DONATE</button></a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="">
+      <div class="bg-white w-full px-[16px] text-black">
+        <h3 style="color:black !important" class="pb-[3px]">
+          SPEAK at our events
+        </h3>
+      </div>
+      <div class="border-4 border-white w-full">
+        <div
+          class="w-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white p-4"
+        >
+          <div class="flex flex-col justify-between gap-10 z-[10]">
+            <div class="flex flex-col my-4">
+              <p>
+                At Web3Privacy Now, we are dedicated to fostering growth,
+                innovation, and collaboration. We offer a supportive environment
+                where like-minded individuals come together to share knowledge,
+                spark creativity, and drive positive change.
+              </p>
+            </div>
+          </div>
+          <a class="button inverted"><button>SPEAK AT OUR EVENTS</button></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/components/MembershipWidget.astro

@@ -0,0 +1,163 @@
+---
+import core from "../core.json";
+---
+
+<div class="flex flex-col md:flex-row gap-8">
+  <div>
+    <div class="bg-white w-full px-[16px] text-black">
+      <h3 style="color:black !important" class="pb-[3px] pt-2">INDIVIDUAL</h3>
+    </div>
+    <div class="border-4 h-full border-white w-full">
+      <div
+        class="w-full h-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white"
+      >
+        <div class="flex flex-col h-full justify-between px-6 z-[10] relative">
+          <div class="flex flex-col my-4">
+            <p>
+              Members are our chosen collaborators for mutual support and
+              growth. Rather than one-time deals for individual events or
+              projects, we strive for consistent collaboration to achieve
+              lasting impact.
+            </p>
+            <span class="leading-[1.4rem]">
+              Become an integral part of our community! Join us with building
+              privacy platform we all need.
+            </span>
+            <div class="flex flex-col gap-[16px] md:p-[24px] z-[10]">
+              <span class="text-white font-bold text-[18px] leading-[1.4rem]">
+                Benefits
+              </span>
+              <ul class="list-disc ml-[18px] text-white">
+                <li>You are supporting a good thing!</li>
+                <li>Guaranteed access to all our events</li>
+                <li>Swag Privacy Pack</li>
+                <li>Deals from our partners</li>
+                <li>Voting rights in our association</li>
+              </ul>
+            </div>
+          </div>
+
+          <div
+            class="flex relative w-full md:justify-between md:flex-row flex-col gap-[8px] md:items-end"
+          >
+            <div class="flex flex-col justify-end h-full gap-4 mb-4 md:mb-8 z-50">
+              <span>Price</span>
+              <span class="text-white font-bold text-[24px] leading-[1.4rem]">
+                €100 / Year
+              </span>
+              <a class="button inverted" href={core.links.individual}
+                ><button>BECOME A MEMBER</button></a
+              >
+              <p class="max-w-72 text-sm">
+                After making your donation, kindly send us the tx hash, your
+                T-shirt size, and let us know if you would like your membership
+                to be public or kept private.
+              </p>
+            </div>
+            <img
+              src="/about/image1.png"
+              alt=""
+              class="absolute hidden md:block right-0 bottom-0 md:w-[280px] md:h-auto"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="bg-white w-full px-[16px] text-black">
+      <h3 style="color:black !important" class="pb-[3px] pt-2">
+        Organisations
+      </h3>
+    </div>
+    <div class="border-4 h-full border-white w-full">
+      <div
+        class="w-full h-full md:border-x-4 md:border-b-4 border-l-0 md:border-b-0 border-b-4 border-white"
+      >
+        <div class="flex flex-col h-full justify-between px-6 z-[10] relative">
+          <div class="flex flex-col my-4">
+            <p>
+              Members are our chosen collaborators for mutual support and
+              growth. Rather than one-time deals for individual events or
+              projects, we strive for consistent collaboration to achieve
+              lasting impact.
+            </p>
+          </div>
+          <div class="flex flex-col gap-[16px] md:p-[24px] z-[10]">
+            <span class="text-white font-bold text-[18px] leading-[1.4rem]">
+              Benefits
+            </span>
+            <ul class="list-disc ml-4 text-white">
+              <li>
+                <span class="font-bold leading-wide"> Greater Exposure </span>
+                <p>
+                  Ensure visibility at all our events [Congresses, Summits &
+                  Hackathons]
+                </p>
+              </li>
+              <li>
+                <span class="font-bold leading-wide"> Access to Talent </span>
+
+                <p>Grow impact through strategic, targeted communications.</p>
+              </li>
+              <li>
+                <span class="font-bold leading-wide"> Tought Leadership </span>
+
+                <p>Participate in speaking engagements and mentorship roles.</p>
+              </li>
+              <li>
+                <span class="font-bold leading-wide">
+                  Deals from our partners
+                </span>
+
+                <p>More details about the deals from our partners.</p>
+              </li>
+              <li>
+                <span class="font-bold leading-wide"> Focused Engagement </span>
+                <p>
+                  Reach and interact with specific, highly-relevant audiences.
+                </p>
+              </li>
+            </ul>
+          </div>
+          <div
+            class="flex w-full md:justify-between md:flex-row flex-col gap-[8px] md:items-end"
+          >
+            <div
+              class="relative flex w-full md:justify-between md:flex-row flex-col gap-[8px] md:items-end"
+            >
+              <div
+                class="flex flex-col justify-end h-full gap-4 mb-4 md:mb-8 z-50"
+              >
+                <div class="flex flex-col justify-end h-full gap-2">
+                  <span>Our membership has multiple tiers ranging from</span>
+                  <span
+                    class="text-white font-bold text-[24px] leading-[1.4rem]"
+                  >
+                    7,000 to 70,000 € / year
+                  </span>
+                  <span
+                    >Membership for registered non-profit organizations is
+                  </span>
+                  <span
+                    class="text-white font-bold text-[24px] leading-[1.4rem]"
+                  >
+                    3,000 € / year
+                  </span>
+                </div>
+                <a class="button inverted" href={core.links.individual}
+                  ><button>Request Tier Breakdown</button></a
+                >
+              </div>
+              <img
+                src="/about/image2.png"
+                alt=""
+                class="absolute hidden md:block right-0 bottom-0 md:w-[450px] md:h-auto"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/components/SliderTestimonial.astro

@@ -0,0 +1,176 @@
+---
+const testimonials = [
+  {
+    author: "Matteo",
+    text: `balance between Transparency and Privacy, accountable and unaccountable, manifest and secret, convex and concave, 1 and 0 is one of the most fun puzzles.`,
+    imageUrl: "/review.png",
+  },
+  {
+    author: "Jane",
+    text: `This platform has opened my eyes to the potential of blockchain technology in a way that I never imagined. The community is vibrant and full of innovation.`,
+    imageUrl: "/review.png",
+  },
+  {
+    author: "Alex",
+    text: `It's amazing to see how much transparency can coexist with privacy, and this is the best representation of how it can work. Great work!`,
+    imageUrl: "/review.png",
+  },
+];
+
+let currentTestimonial = 0;
+---
+
+<div class="w-full mx-auto px-8 border-2 border-[#202020]">
+  <div class="relative testimonial-fade active" id="testimonial-container">
+    <div class="flex items-center justify-center overflow-hidden">
+      <div>
+        <img
+          src={testimonials[currentTestimonial].imageUrl}
+          class="grayscale"
+          alt="Review Image"
+          id="testimonial-image"
+        />
+      </div>
+      <div class="relative lg:w-9/12">
+        <div class="relative py-12 px-8 text-gray-700 leading-relaxed">
+          <h2 class="font-bold" id="testimonial-author">
+            {testimonials[currentTestimonial].author}:
+          </h2>
+          <p class="leading-tight" id="testimonial-text">
+            "{testimonials[currentTestimonial].text}"
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Navigation Buttons -->
+    <div class="absolute inset-y-0 left-0 lg:flex lg:items-center">
+      <button
+        class="mt-24 lg:mt-0 -ml-6 h-12 w-12 rounded-full p-3 shadow-lg"
+        id="prev-button"
+      >
+        <svg
+          class="h-full w-full text-white"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M5.41 11H21a1 1 0 0 1 0 2H5.41l5.3 5.3a1 1 0 0 1-1.42 1.4l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 0 1 1.42 1.4L5.4 11z"
+          ></path>
+        </svg>
+      </button>
+    </div>
+    <div class="absolute inset-y-0 right-0 lg:flex lg:items-center">
+      <button
+        class="mt-24 lg:mt-0 -mr-6 h-12 w-12 rounded-full p-3 shadow-lg"
+        id="next-button"
+      >
+        <svg
+          class="h-full w-full text-white"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M18.59 13H3a1 1 0 0 1 0-2h15.59l-5.3-5.3a1 1 0 1 1 1.42-1.4l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.42-1.4l5.3-5.3z"
+          ></path>
+        </svg>
+      </button>
+    </div>
+
+    <div
+      class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"
+    >
+      {
+        testimonials.map((_, index) => (
+          <button
+            class={`h-3 w-3 rounded-full ${index === currentTestimonial ? "bg-white" : "bg-transparent border"}`}
+            id={`dot-${index}`}
+          />
+        ))
+      }
+    </div>
+  </div>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const testimonials = [
+      {
+        author: "Matteo",
+        text: `balance between Transparency and Privacy, accountable and unaccountable, manifest and secret, convex and concave, 1 and 0 is one of the most fun puzzles.`,
+        imageUrl: "/review.png",
+      },
+      {
+        author: "Jane",
+        text: `This platform has opened my eyes to the potential of blockchain technology in a way that I never imagined. The community is vibrant and full of innovation.`,
+        imageUrl: "/review.png",
+      },
+      {
+        author: "Alex",
+        text: `It's amazing to see how much transparency can coexist with privacy, and this is the best representation of how it can work. Great work!`,
+        imageUrl: "/review.png",
+      },
+    ];
+
+    let currentTestimonial = 0;
+
+    const container = document.getElementById("testimonial-container");
+    const authorElement = document.getElementById("testimonial-author");
+    const textElement = document.getElementById("testimonial-text");
+    const imageElement = document.getElementById("testimonial-image");
+
+    const dots = testimonials.map((_, index) =>
+      document.getElementById(`dot-${index}`)
+    );
+
+    function showTestimonial(index) {
+      currentTestimonial = index;
+      const testimonial = testimonials[currentTestimonial];
+
+      // Add fade-out class before changing the content
+      container.classList.remove("active");
+
+      setTimeout(() => {
+        // Update content after fade-out
+        authorElement.innerText = testimonial.author;
+        textElement.innerText = `"${testimonial.text}"`;
+        imageElement.src = testimonial.imageUrl;
+
+        // Add fade-in class
+        container.classList.add("active");
+      }, 500); // Match with the CSS transition duration
+
+      // Update dots
+      dots.forEach((dot, i) => {
+        if (i === currentTestimonial) {
+          dot.classList.add("bg-white");
+          dot.classList.remove("bg-transparent", "border");
+        } else {
+          dot.classList.remove("bg-white");
+          dot.classList.add("bg-transparent", "border");
+        }
+      });
+    }
+
+    document.getElementById("prev-button").addEventListener("click", () => {
+      showTestimonial(
+        (currentTestimonial - 1 + testimonials.length) % testimonials.length
+      );
+    });
+
+    document.getElementById("next-button").addEventListener("click", () => {
+      showTestimonial((currentTestimonial + 1) % testimonials.length);
+    });
+
+    dots.forEach((dot, index) => {
+      dot.addEventListener("click", () => {
+        showTestimonial(index);
+      });
+    });
+
+    // Automatically change testimonial every 6 seconds
+    setInterval(() => {
+      showTestimonial((currentTestimonial + 1) % testimonials.length);
+    }, 6000);
+  });
+</script>

src/components/SpeakerGrid.astro

@@ -0,0 +1,49 @@
+---
+const { people, team } = Astro.props;
+
+// Filter the people and limit the results to 12
+const filteredPeople = people
+  .filter((p) => !team.includes(p.id))
+  .filter((p) => p.imageUrl)
+  .slice(0, 12); // Limit to the first 12 people
+
+function personLink(person) {
+  return person.refs?.twitter
+    ? `https://twitter.com/${person.refs.twitter}`
+    : person.refs?.bsky
+    ? `https://bsky.app/profile/${person.refs.bsky}`
+    : "#";
+}
+
+function truncateCaption(caption) {
+  if (!caption) return "";
+  const words = caption.split(" ");
+  if (words.length > 10) {
+    return words.slice(0, 20).join(" ") + "...";
+  }
+  return caption;
+}
+---
+
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
+  {filteredPeople.map((person) => (
+    <div
+      class="max-w-xs w-full h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2"
+    >
+      <a href={personLink(person)}>
+        <img
+          src={person.imageUrl}
+          alt={person.name}
+          class="w-full h-48 object-cover"
+        />
+      </a>
+      <div class="mt-4">
+        <h3 class="text-lg font-bold leading-6	">{person.name}</h3>
+        {person.refs && person.refs.twitter && (
+          <p class="text-sm text-gray-500">@{person.refs.twitter}</p>
+        )}
+        <p class="text-sm">{truncateCaption(person.caption)}</p>
+      </div>
+    </div>
+  ))}
+</div>

src/layouts/base.astro

@@ -151,11 +151,16 @@ function genHeading(str) {
         banner && typeof banner !== "object" && (
           <div class="w-full flex mt-20 sm:mt-32 middle-pane-medium">
             <div>
-              <div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" />
+              {/* <div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96" /> */}
+              <h1 class="glitch-text-interval text-6xl">
+                web3privacy summit #1
+              </h1>
               <div class="text-left mt-10">{config.hero.text}</div>
               <div class="mt-6">
                 <a class="button" href="/about">
-                  <button>About Web3Privacy Now</button>
+                  <button>
+                    <strong>About US</strong>
+                  </button>
                 </a>
               </div>
             </div>
@@ -165,18 +170,13 @@ function genHeading(str) {
       {
         !banner && (
           <>
-            <div class="middle-pane-medium mt-8 sm:mt-14 mb-2 sm:mb-8">
+            <div class="middle-pane-medium mt-8  sm:mt-14 sm:mb-8">
-              <div class="leading-none flex justify-center text-[4px] sm:text-[8px] text-white">
+              <div class="leading-none flex justify-center mb-3 text-[4px] sm:text-[8px] text-white">
-                {/*<img src="/page-events.png" class="h-8 sm:h-14" title="Events" />*/}
+                <pre>{genHeading(title)}</pre>
-                <pre>
-                  <code class="font-mono layout-heading  ">
-                    {genHeading(title)}
-                  </code>
-                </pre>
-              </div>
               </div>
               <div class="flex items-center justify-center w-full text-center">
-              <h3 class=" w-full max-w-[938px]">{subtext}</h3>
+                <h3 class=" w-full max-w-[938px] glitch-text">{subtext}</h3>
+              </div>
             </div>
           </>
         )
@@ -188,40 +188,79 @@ function genHeading(str) {
     <div
       class="border border-t-2 border-b-0 border-l-0 border-r-0 border-[#0f0f0f] mt-20 pt-10 pb-10"
     >
-      <div class="middle-pane-big">
       <div
-          class="flex gap-10 text-lg items-center flex-wrap align-top"
+        class="flex mx-6 gap-10 text-lg items-center flex-wrap align-top"
         id="footerMenu"
       >
-          <a href="/" class="w3pn-logo w-32"></a>
+        <a href="/" class="w3pn-logo w-52"></a>
         <div class="text-md">
           <a
             href="https://github.com/web3privacy/web"
             class="text-white hover:underline">v{pkg.version}</a
           >
         </div>
-          <div class="grow flex sm:justify-end">
+      </div>
-            <div class="sm:flex justify-center flex-wrap gap-4 lg:gap-10">
+
+      <div class="flex justify-between">
+        <div class="mx-6 py-10 text-center md:text-left">
+          <div class="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            <div class="">
+              <p class="mb-4">
+                <a href="#!">Manifesto</a>
+              </p>
+              <p class="mb-4">
+                <a href="#!">How to get involved?</a>
+              </p>
+              <p class="mb-4">
+                <a href="#!">Grants / Support Us</a>
+              </p>
+            </div>
+            <div>
+              <p class="mb-4">
+                <a href="#!">Events</a>
+              </p>
+              <p class="mb-4">
+                <a href="#!">Articles</a>
+              </p>
+              <p class="mb-4">
+                <a href="#!">Talks</a>
+              </p>
+            </div>
+            <div>
+              <p class="mb-4">
+                <a href="/#">Privacy Explorer</a>
+              </p>
+              <p class="mb-4">
+                <a href="/#">Privacy use-cases database</a>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="py-10 md:text-left">
+          <div class="grid-1 grid gap-4 md:grid-cols-2 lg:grid-cols-5">
             {
               config.footer.menu.map((item) => (
-                  <div class="flex gap-4 items-center menuItem lg:mb-0 mb-2">
+                <div>
-                    <div
+                  <p class="mb-4">
-                      class="icon small opacity-50"
+                    <a href={item.url || core.links[item.link]}>{item.title}</a>
-                      class:list={[item.ico]}
+                  </p>
-                    />
-                    <div class="text-white hover:underline">
-                      <a href={item.url || core.links[item.link]}>
-                        {item.title}
-                      </a>
-                    </div>
                 </div>
               ))
             }
           </div>
         </div>
       </div>
+
+      <!--Copyright section-->
+      <div class="bg-black/5 p-6 text-start">
+        <a class="font-semibold" href="https://tw-elements.com/"
+          >All rights not reserved, Creative commons 2024 - Web3Privacy z.s.</a
+        >
       </div>
     </div>
+
+    <!-- Load TextScramble.js -->
+    <script src="/scripts/text-scramble.js" type="module"></script>
     <script>
       document.querySelector(".hamburger").addEventListener("click", () => {
         document.querySelector(".nav-links").classList.toggle("expanded");

src/pages/about.astro

@@ -4,14 +4,55 @@ import * as config from "../config.yaml";
 import core from "../core.json";
 import AboutFooter from "../components/AboutFooter.astro";
 import AboutItemGrid from "../components/AboutItemGrid.astro";
-import AboutWidget from "../components/AboutWidget.astro";
+import EventMasonry from "../components/EventMasonry.astro";
+import EventItem from "../components/EventItem.astro";
+import { isFutureDate } from "../lib/date";
+
+const events = core.events;
+
+const upcomingEvents = [];
+let eventsPast = 0;
+let eventsUpcoming = 0;
+
+const sectionsConfig = [
+  { name: "testimonials", visible: true, order: 1 },
+  { name: "core contributors", visible: true, order: 2 },
+  { name: "contributors", visible: true, order: 3 },
+  { name: "membersGrid", visible: true, order: 4 },
+  { name: "socialLinks", visible: true, order: 5 },
+  // { name: "community", visible: false, order: 6 },
+];
+
+for (const ev of events) {
+  let future = isFutureDate(ev.date);
+  if (future) {
+    upcomingEvents.push(ev);
+    eventsUpcoming++;
+  } else {
+    eventsPast++;
+  }
+}
+
+const featuredEvents = [];
+for (const e of upcomingEvents) {
+  if (featuredEvents.length > 2) {
+    break;
+  }
+  if (
+    ["summit", "meetup", "online-summit"].includes(e.type) &&
+    e.links?.rsvp &&
+    !featuredEvents.find((ex) => ex.type === e.type)
+  ) {
+    featuredEvents.push(e);
+  }
+}
 ---
 
 <BaseLayout
   title="About web3privacy"
   image="og_about"
   subimage="/about/about.png"
-  subtext="we are a privacy focused ecosystem of hacktivists, researchers, lawyers, event organisers... pushing web3privacy forward"
+  subtext="We are a think-and-do tank of hundreds of people, projects, and organizations committed to protecting and advancing civil liberties, decentralization, and open-source software."
 >
   <div class="middle-pane-medium mt-10">
     <!--  <div class="mb-20">
@@ -23,24 +64,24 @@ import AboutWidget from "../components/AboutWidget.astro";
     <div class="grid grid-cols-1 xl:grid-cols-2 gap-16 mb-[82px]">
       <div class="flex flex-col gap-[36px] md:order-2">
         <div class="md:hidden block mb-[12px] ">
-          <h1>Our mission</h1>
+          <h1>activism. care. solidarity.</h1>
           <div set:html={config.landing.mission} />
           <div class="mt-8 flex gap-6 items-center w-full">
             <a class="button inverted" href={core.links.manifesto}
               ><button>Read manifesto</button></a
             >
-            <a class="button" href={core.links.telegram}
+            <a class="button font-bold " href={core.links.telegram}
               ><button>Join us</button></a
             >
           </div>
         </div>
-        <h1>how we support privacy in web3</h1>
+        <h1 class="glitch-text">how we support privacy in web3</h1>
 
         <AboutItemGrid />
       </div>
       <div class="md:order-1 order-2">
         <div class="md:block hidden">
-          <h1>Our mission</h1>
+          <h1 class="glitch-text">activism. care. solidarity.</h1>
           <div set:html={config.landing.mission} />
           <div class="mt-8 flex gap-6 items-center w-full">
             <a class="button inverted" href={core.links.manifesto}
@@ -51,58 +92,60 @@ import AboutWidget from "../components/AboutWidget.astro";
             >
           </div>
         </div>
-        <div class="md:mt-[56px] mt-[26px]">
+        <hr class="mt-10 border-[#e0e0e0]" />
-          <h1>our events</h1>
+        <div class="md:block hidden mt-[26px]">
-          <div set:html={config.landing.event} />
+          <h1 class="glitch-text">Our mission</h1>
-          <div class="mt-8 flex flex-col gap-6 items-start w-full">
+          <div  set:html={config.landing.mission} />
-            <div class="grid grid-cols-2 gap-[8px]">
-              <img src="/about/1.png" alt="" />
-              <img src="/about/2.png" alt="" />
-              <img src="/about/3.png" alt="" />
-              <img src="/about/4.png" alt="" />
         </div>
-            <a class="button inverted" href={"/events"}
+        <hr class="mt-10 border-[#e0e0e0]" />
-              ><button>EVENTS</button></a
+
-            >
+        <div class="mt-[26px]">
-          </div>
+          <h1 class="glitch-text">why privacy</h1>
-        </div>
+          <p class="mt-0 w-full">
-        <div class="md:mt-[56px] mt-[26px]">
+            In any society, privacy is essential for protecting civil liberties
-          <h1>Our Projects & research</h1>
+            and human rights.
-          <div set:html={config.landing.research} />
+            <br />
+            <br />
+            Privacy enables individuals to participate in political processes without
+            fear of retribution or surveillance, ensuring that they can freely express
+            their views, associate with others, and engage in activism. <br />
+            <br />
+            Robust privacy practices assist in balancing power between individuals
+            and the state or corporations. Without them, unchecked surveillance and
+            control leads to a loss of personal freedoms and the rise of authoritarianism.
+            <br />
+            <br /> When we talk about privacy, we are discussing more than just data
+            protection. We are addressing the fate of our societies, their present,
+            and their future.
+          </p>
           <div class="mt-8 flex gap-6 items-center w-full">
-            <a class="button inverted" href={core.links.projects}
+            <a class="button inverted" href={core.links.manifesto}
-              ><button>Projects</button></a
+              ><button>Read More</button></a
-            >
-            <a class="button inverted" href={core.links.research}
-              ><button>Research</button></a
             >
           </div>
         </div>
-        <!-- <div>
+
-          <h1>Topics</h1>
-          <div class="columns-2 uppercase text-sm w3pn-topics">
-            {config.landing.topics.map((topic) => <div>{topic}</div>)}
-          </div>
-        </div> -->
       </div>
     </div>
-    <AboutWidget variant="membership" />
+  </div>
-    <div
+  <div class="my-10">
-      class="flex md:flex-row flex-col items-center gap-[24px] justify-center w-full mt-[24px]"
+    <EventMasonry />
-    >
+  </div>
-      <div class="md:mt-[56px] mt-[26px] max-w-[460px] md:order-1 order-2">
+
-        <h1>empowering community with our brand</h1>
+  <div class="middle-pane-medium">
-        <div set:html={config.landing.merch} />
+    <div class="mb-6">
-        <div class="mt-8 flex gap-6 items-center w-full">
+      {featuredEvents.map((event) => <EventItem item={event} />)}
-          <a class="button inverted" href={core.links.brand}
+    </div>
-            ><button>Brand on Github</button></a
+
+    <div class="mt-6">
+      <a href="/events" class="button inverted"
+        ><button>Show all events</button></a
       >
     </div>
   </div>
-      <div class="md:order-2 order-1">
+  <div class="middle-pane-medium mt-10">
-        <img src="/about/stickers.png" alt="" />
+    <AboutFooter {sectionsConfig} />
-      </div>
-    </div>
-    <AboutFooter />
   </div>
 </BaseLayout>
+
+

src/pages/index.astro

@@ -1,48 +1,53 @@
 ---
-
+import BaseLayout from "../layouts/base.astro";
-import BaseLayout from '../layouts/base.astro';
+import AboutFooter from "../components/AboutFooter.astro";
-import AboutFooter from '../components/AboutFooter.astro';
+import core from "../core.json";
-import core from '../core.json';
+import articles from "../articles.json";
-import articles from '../articles.json';
+import talks from "../talks.json";
-import talks from '../talks.json';
+import dbRepo from "../db-repo.json";
-import explorer from '../explorer.json';
+import { format } from "date-fns";
-import dbRepo from '../db-repo.json';
+import EventItem from "../components/EventItem.astro";
-import { format } from 'date-fns';
+import { isFutureDate } from "../lib/date";
-import EventItem from '../components/EventItem.astro';
+import EventMasonry from "../components/EventMasonry.astro";
-import { isFutureDate } from '../lib/date';
 
 const events = core.events;
 
-const upcomingEvents = []
+const upcomingEvents = [];
-let eventsPast = 0
+let eventsPast = 0;
-let eventsUpcoming = 0
+let eventsUpcoming = 0;
 for (const ev of events) {
-	let future = isFutureDate(ev.date)
+  let future = isFutureDate(ev.date);
   if (future) {
-		upcomingEvents.push(ev)
+    upcomingEvents.push(ev);
-		eventsUpcoming++
+    eventsUpcoming++;
   } else {
-		eventsPast++
+    eventsPast++;
   }
 }
 
-const featuredEvents = []
+const featuredEvents = [];
 for (const e of upcomingEvents) {
   if (featuredEvents.length > 2) {
     break;
   }
-	if (['summit', 'meetup', 'online-summit'].includes(e.type) &&
+  if (
-			e.links?.rsvp && !featuredEvents.find(ex => ex.type === e.type))  {
+    ["summit", "meetup", "online-summit"].includes(e.type) &&
-		featuredEvents.push(e)
+    e.links?.rsvp &&
+    !featuredEvents.find((ex) => ex.type === e.type)
+  ) {
+    featuredEvents.push(e);
   }
 }
-
 ---
 
-<BaseLayout banner="true" description="Advocates worldwide are uniting to make privacy fundamental pillar of the Web3 industry, transforming it into a cultural movement that champions freedom and decentralization.">
+<BaseLayout
-
+  banner="true"
+  description="Advocates worldwide are uniting to make privacy fundamental pillar of the Web3 industry, transforming it into a cultural movement that champions freedom and decentralization."
+>
   <div class="middle-pane-big">
-		<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w3pn-hp-grid gap-2 mt-2">
+    <div
+      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 w3pn-hp-grid gap-2 mt-2"
+    >
       <div class="bg-events" data-url="/events">
         <div class="title">Events</div>
         <div class="numbers">
@@ -56,15 +61,28 @@ for (const e of upcomingEvents) {
           </div>
         </div>
       </div>
-			<div class="bg-projects relative" data-url="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents">
+      <div
+        class="bg-projects relative"
+        data-url="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents"
+      >
         <div class="title">
           <div class="flex items-center">
             <div class="icon github small mr-1.5 inline-block"></div>
-						<div class="text-white mt-1 ml-1.5"><a href="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents">Web3 Privacy Database</a></div>
+            <div class="text-white mt-1 ml-1.5">
+              <a
+                href="https://github.com/web3privacy/web3privacy/blob/main/README.md#contents"
+                >Web3 Privacy Database</a
+              >
+            </div>
           </div>
         </div>
         <!-- Place this tag where you want the button to render. -->
-				<div class="flex items-center absolute top-4 right-4 text-white opacity-30"><div class="icon star small mr-1.5"></div> {dbRepo.stars}</div>
+        <div
+          class="flex items-center absolute top-4 right-4 text-white opacity-30"
+        >
+          <div class="icon star small mr-1.5"></div>
+          {dbRepo.stars}
+        </div>
         <div class="numbers">
           <div>
             <div class="big">{dbRepo.count}</div>
@@ -87,24 +105,38 @@ for (const e of upcomingEvents) {
     </div>
   </div>
 
-
   <div class="middle-pane-medium mt-10">
     <!--div class="mt-10">
 			<h1>Our Projects</h1>
 		</div-->
 
     <div class="mt-16">
-			<h1>Featured Upcoming Events</h1>
+      <h1>Featured Events</h1>
     </div>
 
+    <div class="text-left">
+      Our gatherings aim to build understanding and solidarity among diverse
+      interest groups, cultures, states, chains, ecosystems, and backgrounds. We
+      bring together Web3 and non-tech individuals, builders, researchers,
+      philosophers, lawyers, policymakers, hacktivists, key players, local
+      communities, and the general public. Formats: Meetups, Summits,
+      Congresses, Hackathons, Camp fires
+    </div>
+  </div>
+
+  <div class="my-10">
+    <EventMasonry />
+  </div>
+
+  <div class="middle-pane-medium">
     <div class="mb-6">
-			{featuredEvents.map((event) => (
+      {featuredEvents.map((event) => <EventItem item={event} />)}
-				<EventItem item={event} />
-			))}
     </div>
 
     <div class="mt-6">
-			<a href="/events" class="button inverted"><button>Show all events</button></a>
+      <a href="/events" class="button inverted"
+        ><button>Show all events</button></a
+      >
     </div>
 
     <div class="mt-16">
@@ -112,18 +144,30 @@ for (const e of upcomingEvents) {
     </div>
 
     <div class="w3pn-articles grid md:grid-cols-2 gap-6">
-			{articles.slice(0,4).map((entry) => (
+      {
-				<div class="basegrid-entry aspect-video" style={{backgroundImage: `url("${entry.img}")`, backgroundSize: '100% 100%;'}}>
+        articles.slice(0, 4).map((entry) => (
+          <div
+            class="basegrid-entry aspect-video"
+            style={{
+              backgroundImage: `url("${entry.img}")`,
+              backgroundSize: "100% 100%;",
+            }}
+          >
             <div class="title">
               <a href={entry.url}>{entry.title}</a>
-						<span class="date">{format(new Date(entry.date), 'MMMM do, yyyy')}</span>
+              <span class="date">
+                {format(new Date(entry.date), "MMMM do, yyyy")}
+              </span>
             </div>
           </div>
-			))}
+        ))
+      }
     </div>
 
     <div class="mt-8">
-			<a href={core.links.mirror} class="button inverted"><button>More articles on Mirror</button></a>
+      <a href={core.links.mirror} class="button inverted"
+        ><button>More articles on Mirror</button></a
+      >
     </div>
 
     <div class="mt-16">
@@ -131,28 +175,38 @@ for (const e of upcomingEvents) {
     </div>
 
     <div class="grid md:grid-cols-2 gap-6">
-			{talks.slice(0,4).map((entry) => (
+      {
-				<div class="basegrid-entry aspect-video" style={{backgroundImage: `url("${entry.img}")`, backgroundSize: 'cover', backgroundPosition: 'center'}}>
+        talks.slice(0, 4).map((entry) => (
-					<a href={entry.url} class="w-full h-full" title={entry.title}></a>
+          <div
+            class="basegrid-entry aspect-video"
+            style={{
+              backgroundImage: `url("${entry.img}")`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }}
+          >
+            <a href={entry.url} class="w-full h-full" title={entry.title} />
           </div>
-			))}
+        ))
+      }
     </div>
 
     <div class="mt-8">
-			<a href={core.links.youtube} class="button inverted"><button>More talks on YouTube</button></a>
+      <a href={core.links.youtube} class="button inverted"
+        ><button>More talks on YouTube</button></a
+      >
+    </div>
   </div>
-
   <AboutFooter />
-	</div>
   <script is:inline>
-		document.querySelectorAll('.w3pn-hp-grid > div').forEach(el => {
+    document.querySelectorAll(".w3pn-hp-grid > div").forEach((el) => {
-			el.addEventListener('click', () => {
+      el.addEventListener("click", () => {
-			  window.location = el.getAttribute('data-url');
+        window.location = el.getAttribute("data-url");
       });
     });
-		document.querySelectorAll('.w3pn-articles > div').forEach(el => {
+    document.querySelectorAll(".w3pn-articles > div").forEach((el) => {
-			el.addEventListener('click', () => {
+      el.addEventListener("click", () => {
-			  window.location = el.querySelector('a').getAttribute('href');
+        window.location = el.querySelector("a").getAttribute("href");
       });
     });
   </script>

src/pages/membership/index.astro

@@ -1,19 +1,30 @@
 ---
 import BaseLayout from "../../layouts/base.astro";
-import * as config from "../config.yaml";
 import core from "../../core.json";
 import AboutFooter from "../../components/AboutFooter.astro";
-import AboutWidget from "../../components/AboutWidget.astro";
+import MembershipWidget from "../../components/MembershipWidget.astro";
+import contributors from "../../contributors.json";
+import MembershipOtherOptionsWidget from "../../components/MembershipOtherOptionsWidget.astro";
+import MembersGrid from "../../components/MembersGrid.astro";
+
+const sectionsConfig = [
+  // { name: "membersGrid", visible: true, order: 1 },
+  // { name: "socialLinks", visible: true, order: 2 },
+  // { name: "testimonials", visible: true, order: 1 },
+  // { name: "speakers", visible: true, order: 2 },
+  // { name: "contributors", visible: true, order: 3 },
+  // { name: "community", visible: false, order: 6 },
+];
 ---
 
 <BaseLayout
-  title="MEMBERSHIP"
+  title="GET INVOLVED"
   image="og_membership"
   subimage="/membership/membership.png"
 >
   <div class="middle-pane-medium my-10">
     <div
-      class="flex items-center justify-center w-full text-center mt-20 mb-20"
+      class="flex items-center justify-center w-full text-center my-12"
     >
       <h3 class="max-w-[900px] w-full">
         for all privacy advocates, projects and companies, we offer a simple and
@@ -21,10 +32,114 @@ import AboutWidget from "../../components/AboutWidget.astro";
         part of our ecosystem.
       </h3>
     </div>
-    <div>
-      <AboutWidget variant="membership" />
   </div>
 
-    <AboutFooter />
+  <div class="middle-pane-medium my-10">
+    <div class="border-4 border-white">
+      <div class="bg-white w-full px-[16px] text-black">
+        <h3 style="color:black !important " class="pb-[3px] pl-4 font-[21px]">
+          Github Contributors
+        </h3>
       </div>
+
+      <div class="w-full text-center my-10 text-lg">
+        <p>
+          This is the kind of support we value most: open-source, grassroots
+          initiatives driven by individual passion and the desire to create
+          something meaningful.
+        </p>
+      </div>
+
+      <div class="flex gap-3 flex-wrap mb-4 justify-start mx-4">
+        {
+          contributors.items.map((contrib) => (
+            <div>
+              <a href={contrib.html_url} target="_blank" title={contrib.login}>
+                <img
+                  src={contrib.avatar_url}
+                  class="w-14 rounded-full aspect-square"
+                />
+              </a>
+            </div>
+          ))
+        }
+      </div>
+      <div class="flex gap-4 p-4 lg:gap-6 pt-4 flex-wrap">
+        <a href={core.links.telegram} class="button inverted">
+          <button>Become a Contributor</button>
+        </a>
+      </div>
+    </div>
+    <div class="my-10">
+      <h1 class="font-[32px]">membership</h1>
+      <MembershipWidget />
+    </div>
+  </div>
+  <div class="middle-pane-medium mt-20">
+    <h1 class="font-[32px]">other ways</h1>
+
+    <MembershipOtherOptionsWidget />
+  </div>
+
+  <div class="mt-16 middle-pane-medium">
+    <h1 class="my-6 ">Members</h1>
+    <MembersGrid people={core.people} team={core.teams["core-team"]} />
+  </div>
+
+  <div class="middle-pane-medium my-10">
+    <h1>Join the community</h1>
+    <p>
+      We thrive on uniting diverse perspectives, skills, and visions. Both
+      online and offline, we bring together tech and non-tech individuals,
+      activists, key players, hackers, lawyers, researchers, philosophers,
+      policymakers, local communities, and grassroots movements.
+    </p>
+    <div
+      class="grid place-items-center grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2 pt-4 w-full"
+    >
+      <a
+        href={core.links.twitter}
+        class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
+      >
+        <button class="flex flex-col items-center justify-center">
+          <div class="icon twitter"></div>
+          @web3privacy
+        </button>
+      </a>
+      <a
+        href={core.links.telegram}
+        class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
+      >
+        <button class="flex flex-col items-center justify-center">
+          <div class="icon telegram"></div>
+          Telegram
+        </button>
+      </a>
+      <a
+        href={core.links.signal}
+        class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
+      >
+        <button class="flex flex-col items-center justify-center">
+          <div class="icon"><img src="/icons/signal.svg" alt="" /></div>
+          Signal
+        </button>
+      </a>
+      <a
+        href={core.links.matrix}
+        class="bg-[#101010] w-full flex items-center justify-center w-full h-40 overflow-hidden"
+      >
+        <button class="flex flex-col items-center justify-center">
+          <div class="icon matrix"></div>
+          matrix
+        </button>
+      </a>
+    </div>
+  </div>
+
+  <div class="mt-16 middle-pane-medium">
+    <h1 class="my-6 ">Community Partners</h1>
+    <MembersGrid people={core.people} team={core.teams["core-team"]} />
+  </div>
+
+  <AboutFooter {sectionsConfig} />
 </BaseLayout>