Merge pull request #63 from prabhavpokharel/feature/event-card-functi…

…onality feat: add event url and animation to event card
computerclubkec · Oct 8, 2024 · f4e2b2c · f4e2b2c
2 parents 204d47b + 41640d1
commit f4e2b2c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/_includes/recent-events.html b/_includes/recent-events.html
@@ -7,8 +7,9 @@
 
   <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8">
     {% for event in site.events %} {% if event.completed %}
+    <a href="{{ event.url }}" class="block">
     <div
-      class="bg-[{{site.bg-colors.darkBlue}}] text-white md:p-6 p-4 rounded-2xl shadow-lg"
+      class="bg-[{{site.bg-colors.darkBlue}}] text-white md:p-6 p-4 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-[1.02] cursor-pointer"
     >
       <div class="flex flex-col md:flex-row items-start md:items-center">
         <!-- Event Image -->
@@ -39,8 +40,8 @@ <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
             >
 
             <!-- Read More / Read Less buttons -->
-            <a href="#" class="text-blue-400 read-more">Read More</a>
-            <a href="#" class="text-blue-400 read-less hidden">Show Less</a>
+            <button class="text-blue-400 read-more">Read More</button>
+            <button class="text-blue-400 read-less hidden">Show Less</button>
           </p>
 
           <p class="text-sm mb-1 text-gray-400 font-bold">
@@ -49,6 +50,7 @@ <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
         </div>
       </div>
     </div>
+  </a>
     {% endif %} {% endfor %}
   </div>
 

diff --git a/_includes/upcoming-events.html b/_includes/upcoming-events.html
@@ -8,10 +8,13 @@
   <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8">
     {% assign upcoming_events = site.events | where: 'completed', false | sort: 'date' | limit: 4 %}
     {% for event in upcoming_events %}
+
     <div
-      class="bg-[{{site.bg-colors.darkBlue}}] text-white md:p-6 p-4 rounded-2xl shadow-lg"
+      class="relative bg-[{{site.bg-colors.darkBlue}}] text-white md:p-6 p-4 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-[1.02] cursor-pointer"
     >
+      <a href="{{ event.url }}" class="absolute inset-0 block"></a>
       <div class="flex flex-col md:flex-row items-start md:items-center">
+
         <!-- Event Image -->
         <div class="md:w-1/3 w-full mb-4 md:mb-0">
           <img
@@ -40,24 +43,25 @@ <h3 class="md:text-2xl text-base font-bold">{{ event.title }}</h3>
             >
 
             <!-- Read More / Read Less buttons -->
-            <a href="#" class="text-blue-400 read-more">Read More</a>
-            <a href="#" class="text-blue-400 read-less hidden">Show Less</a>
+            <button class="text-blue-400 read-more relative z-10">Read More</button>
+            <button class="text-blue-400 read-less hidden relative z-10">Show Less</button>
           </p>
 
           <p class="text-sm mb-1 text-gray-400 font-bold">
             {{ event.participants }}
           </p>
 
           <!-- Register Button -->
-          <a
-            href="{{ event.url }}"
-            class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80"
-          >
-            Register Now
+          <a href="{{ event.registration_link }}">
+            <div class="relative inset-0"><button
+              class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300"
+            >
+              Register Now
+            </button></div>
           </a>
         </div>
       </div>
     </div>
     {% endfor %}
   </div>
-</div>
+</div>