Made the changes to index.astro, added the events masonry.

src/components/EventMasonry.astro

@@ -0,0 +1,29 @@
+---
+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="flex flex-wrap gap-[3px]">
+  {
+    images.map((image, index) => (
+      <div class="flex-auto overflow-hidden">
+        <img
+          class="object-cover w-full lg:max-h-[120px] xl:max-h-[223px]"
+          src={image}
+          alt={`Image ${index + 1}`}
+        />
+      </div>
+    ))
+  }
+</div>

src/pages/index.astro

@@ -1,48 +1,53 @@
 ---
-
-import BaseLayout from '../layouts/base.astro';
-import AboutFooter from '../components/AboutFooter.astro';
-import core from '../core.json';
-import articles from '../articles.json';
-import talks from '../talks.json';
-import explorer from '../explorer.json';
-import dbRepo from '../db-repo.json';
-import { format } from 'date-fns';
-import EventItem from '../components/EventItem.astro';
-import { isFutureDate } from '../lib/date';
+import BaseLayout from "../layouts/base.astro";
+import AboutFooter from "../components/AboutFooter.astro";
+import core from "../core.json";
+import articles from "../articles.json";
+import talks from "../talks.json";
+import dbRepo from "../db-repo.json";
+import { format } from "date-fns";
+import EventItem from "../components/EventItem.astro";
+import { isFutureDate } from "../lib/date";
+import EventMasonry from "../components/EventMasonry.astro";
 
 const events = core.events;
 
-const upcomingEvents = []
-let eventsPast = 0
-let eventsUpcoming = 0
+const upcomingEvents = [];
+let eventsPast = 0;
+let eventsUpcoming = 0;
 for (const ev of events) {
-	let future = isFutureDate(ev.date)
+  let future = isFutureDate(ev.date);
   if (future) {
-		upcomingEvents.push(ev)
-		eventsUpcoming++
+    upcomingEvents.push(ev);
+    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) &&
-			e.links?.rsvp && !featuredEvents.find(ex => ex.type === e.type))  {
-		featuredEvents.push(e)
+  if (
+    ["summit", "meetup", "online-summit"].includes(e.type) &&
+    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">
@@ -51,20 +56,33 @@ for (const e of upcomingEvents) {
             <div>Upcoming events</div>
           </div>
           <div>
-						<div class="big">{ eventsPast}</div>
+            <div class="big">{eventsPast}</div>
             <div>Past events</div>
           </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) => (
-				<EventItem item={event} />
-			))}
+      {featuredEvents.map((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'}}>
-					<a href={entry.url} class="w-full h-full" title={entry.title}></a>
+      {
+        talks.slice(0, 4).map((entry) => (
+          <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 => {
-			el.addEventListener('click', () => {
-			  window.location = el.getAttribute('data-url');
+    document.querySelectorAll(".w3pn-hp-grid > div").forEach((el) => {
+      el.addEventListener("click", () => {
+        window.location = el.getAttribute("data-url");
       });
     });
-		document.querySelectorAll('.w3pn-articles > div').forEach(el => {
-			el.addEventListener('click', () => {
-			  window.location = el.querySelector('a').getAttribute('href');
+    document.querySelectorAll(".w3pn-articles > div").forEach((el) => {
+      el.addEventListener("click", () => {
+        window.location = el.querySelector("a").getAttribute("href");
       });
     });
   </script>