Fixed the suggestions along with the event masonry fix for loading larger images.

src/components/EventMasonry.astro

@@ -1,28 +1,29 @@
 ---
 const {
   images = [
-    "/events/masonry/1.png",
+    { webp: "/events/masonry/1.webp", png: "/events/masonry/1.png" },
-    "/events/masonry/2.png",
+    { webp: "/events/masonry/2.webp", png: "/events/masonry/2.png" },
-    "/events/masonry/3.png",
+    { webp: "/events/masonry/3.webp", png: "/events/masonry/3.png" },
-    "/events/masonry/4.png",
+    { webp: "/events/masonry/4.webp", png: "/events/masonry/4.png" },
-    "/events/masonry/5.png",
+    { webp: "/events/masonry/5.webp", png: "/events/masonry/5.png" },
-    "/events/masonry/6.png",
+    { webp: "/events/masonry/6.webp", png: "/events/masonry/6.png" },
-    "/events/masonry/7.png",
+    { webp: "/events/masonry/7.webp", png: "/events/masonry/7.png" },
-    "/events/masonry/8.png",
+    { webp: "/events/masonry/8.webp", png: "/events/masonry/8.png" },
-    "/events/masonry/9.png",
+    { webp: "/events/masonry/9.webp", png: "/events/masonry/9.png" },
   ],
 } = Astro.props;
 ---
 
+<!-- Display gallery with webp images -->
 <div
   class="middle-pane-big grid grid-cols-2 lg:flex lg:flex-nowrap gap-2 md:gap-[3px]"
 >
   {
     images.slice(0, 4).map((image, index) => (
-      <div class="flex-auto overflow-hidden ">
+      <div class="flex-auto overflow-hidden">
         <img
           class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
-          src={image}
+          src={image.webp}
           alt={`Image ${index + 1}`}
           data-index={index}
         />
@@ -39,7 +40,7 @@ const {
       <div class="flex-auto overflow-hidden">
         <img
           class="object-cover w-full max-h-28 md:max-h-[223px] cursor-pointer gallery-image"
-          src={image}
+          src={image.webp}
           alt={`Image ${index + 5}`}
           data-index={index + 4}
         />
@@ -48,6 +49,7 @@ const {
   }
 </div>
 
+<!-- Modal for fullscreen images -->
 <div
   class="image-modal hidden fixed inset-0 bg-black flex-col flex items-center justify-center z-50"
 >
@@ -60,6 +62,7 @@ const {
       class="w-full h-full object-contain modal-image"
       src=""
       alt="Selected Image"
+      loading="lazy"
     />
   </div>
 
@@ -68,7 +71,7 @@ const {
       images.map((image, index) => (
         <img
           class="w-24 h-24 object-contain cursor-pointer thumbnail-image"
-          src={image}
+          src={image.webp}
           alt={`Thumbnail ${index + 1}`}
           data-index={index}
         />
@@ -80,15 +83,15 @@ const {
 <script>
   let selectedIndex = 0;
   const images = [
-    "/events/masonry/1.png",
+    { webp: "/events/masonry/1.webp", png: "/events/masonry/1.png" },
-    "/events/masonry/2.png",
+    { webp: "/events/masonry/2.webp", png: "/events/masonry/2.png" },
-    "/events/masonry/3.png",
+    { webp: "/events/masonry/3.webp", png: "/events/masonry/3.png" },
-    "/events/masonry/4.png",
+    { webp: "/events/masonry/4.webp", png: "/events/masonry/4.png" },
-    "/events/masonry/5.png",
+    { webp: "/events/masonry/5.webp", png: "/events/masonry/5.png" },
-    "/events/masonry/6.png",
+    { webp: "/events/masonry/6.webp", png: "/events/masonry/6.png" },
-    "/events/masonry/7.png",
+    { webp: "/events/masonry/7.webp", png: "/events/masonry/7.png" },
-    "/events/masonry/8.png",
+    { webp: "/events/masonry/8.webp", png: "/events/masonry/8.png" },
-    "/events/masonry/9.png",
+    { webp: "/events/masonry/9.webp", png: "/events/masonry/9.png" },
   ];
 
   function openModal(index) {
@@ -102,7 +105,7 @@ const {
   }
 
   function updateModalImage() {
-    const imageSrc = images[selectedIndex];
+    const imageSrc = images[selectedIndex].png;
     document.querySelector(".modal-image").src = imageSrc;
   }
 

src/components/MembershipWidget.astro

@@ -38,22 +38,25 @@ import core from "../core.json";
               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]">
+              <span
+                class="text-white font-bold text-lg md: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 <span class="underline">send us</span> the tx hash, your
+                After making your donation, kindly <span class="underline"
-                T-shirt size, and let us know if you would like your membership
+                  >send us</span
-                to be public or kept private.
+                > 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"
+              class="absolute hidden md:block right-0 bottom-0 md:w-[280px] md:h-auto opacity-30"
             />
           </div>
         </div>
@@ -94,7 +97,10 @@ import core from "../core.json";
               <li>
                 <span class="font-bold leading-wide"> Access to Talent </span>
 
-                <p>Connect with the right builders to test or develop your beta projects or services.</p>
+                <p>
+                  Connect with the right builders to test or develop your beta
+                  projects or services.
+                </p>
               </li>
               <li>
                 <span class="font-bold leading-wide"> Targeted Outreach </span>
@@ -126,7 +132,7 @@ import core from "../core.json";
                 <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]"
+                    class="text-white font-bold text-lg md:text-[24px] leading-[1.4rem]"
                   >
                     7,000 to 70,000 € / year
                   </span>
@@ -134,7 +140,7 @@ import core from "../core.json";
                     >Membership for registered non-profit organizations is
                   </span>
                   <span
-                    class="text-white font-bold text-[24px] leading-[1.4rem]"
+                    class="text-white font-bold text-lg md:text-[24px] leading-[1.4rem]"
                   >
                     3,000 € / year
                   </span>

src/components/SpeakerGrid.astro

@@ -47,9 +47,7 @@ function personLink(person) {
         </a>
         <div class="mt-4">
           <h3 class="text-xs md:text-[16px] font-bold leading-9">{person.name}</h3>
-          <p class="text-xs text-gray-500">
+        
-            {person.caption}
-            </p>
           {person.refs && (
             <p class="text-xs text-gray-500">
               {person.refs.twitter && `@${person.refs.twitter}`}
@@ -59,6 +57,9 @@ function personLink(person) {
               {person.refs.github && ` | GitHub: ${person.refs.github}`}
               {person.refs.matrix && ` | Matrix: ${person.refs.matrix}`}
               {person.refs.email && ` | Email: ${person.refs.email}`}
+            </p>
+              <p class="text-xs text-gray-500">
+            {person.caption && person.caption}
             </p>
             <p class="text-xs text-gray-500">
               {person.refs.designation && `${person.refs.designation}`}

src/core.json

@@ -227,6 +227,7 @@
       "kurt-opsahl",
       "guy-zyskind"
     ],
+
     "core-contributors": [
       {
         "id": "mykola-siusko",
@@ -261,7 +262,7 @@
         "name": "Robert De Groot",
         "caption": "Partnership & Volunteers",
 
-        "imageUrl": "https://data.web3privacy.info/img/people/coinmandeer.png"
+        "imageUrl": "/core-contributors/robert.png"
       },
       {
         "id": "cat",

src/layouts/base.astro

@@ -153,11 +153,10 @@ function genHeading(str) {
             <div>
               <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" set:html={config.hero.text}></div>
+              <div class="text-left mt-10" set:html={config.hero.text} />
               <div class="mt-6">
                 <a class="button" href="/about">
                   <button>
@@ -192,7 +191,7 @@ function genHeading(str) {
     <slot />
 
     <div
-      class="border border-t-2 border-b-0 border-l-0 border-r-0 border-[#0f0f0f] mt-20 pt-10 pb-10"
+      class="border border-t-2 border-b-0 border-l-0 border-r-0 border-[#0f0f0f] mt-20 pt-10 pb-10 middle-pane-medium"
     >
       <div
         class="flex mx-6 gap-10 text-lg items-center flex-wrap align-top"