<body>
  <div class="container mt-5">
    <h1 class="mb-4">Discover Events</h1>
    <div class="card-container">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">

            <!-- Event 1 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}

            <!-- Event 2 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}

            <!-- Event 3 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}

            <!-- Event 4 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}

            <!-- Event 5 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}

            <!-- Event 6 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}

            <!-- Event 7 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}

            <!-- Event 8 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}

            <!-- Event 9 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}

            <!-- Event 10 -->
            {{> event_card imageURL="https://via.placeholder.com/300" eventName="Event Name" eventDateTime="Date and Time"}}
            
        </div>
    </div>
  </div>
</body>

