feat: Add HallOfFame Component

ad956 · Aug 23, 2024 · ac58027 · ac58027
1 parent 9884a7c
commit ac58027
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 26 deletions.
diff --git a/apps/frontend/src/components/HallOfFame.astro b/apps/frontend/src/components/HallOfFame.astro
@@ -1,45 +1,125 @@
 ---
 const winners = [
-  { year: 2023, team: "Thunder Strikers", captain: "Rahul Sharma" },
-  { year: 2022, team: "Royal Challengers", captain: "Priya Patel" },
-  { year: 2021, team: "Golden Eagles", captain: "Amit Kumar" },
+  {
+    year: 2023,
+    team: "Thunder Strikers",
+    captain: "Chmphk Chacha",
+    avatar:
+      "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/80ca8181477227.5d00c08feec0f.jpg",
+  },
+  {
+    year: 2022,
+    team: "Royal Challengers",
+    captain: "Manak Kumar",
+    avatar:
+      "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/80ca8181477227.5d00c08feec0f.jpg",
+  },
+  {
+    year: 2021,
+    team: "Golden Eagles",
+    captain: "Amit Kumar",
+    avatar:
+      "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/80ca8181477227.5d00c08feec0f.jpg",
+  },
 ];
 ---
 
-<section class="py-24 bg-gray-900 relative overflow-hidden">
+<section
+  class="py-24 bg-gradient-to-b from-gray-900 to-black text-white relative overflow-hidden"
+>
   <div class="absolute inset-0 z-0">
-    <video
-      autoplay
-      muted
-      loop
-      class="absolute inset-0 w-full h-full object-cover"
-    >
-      <source src="/path/to/your/video.mp4" type="video/mp4" />
-    </video>
-    <div class="absolute inset-0 bg-black opacity-70"></div>
+    <div class="absolute inset-0 bg-black opacity-40"></div>
     <div
-      class="absolute inset-0 bg-gradient-to-br from-transparent to-black opacity-40"
+      class="absolute inset-0 bg-[url('https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/80ca8181477227.5d00c08feec0f.jpg.png')] opacity-10"
     >
     </div>
   </div>
-  <div class="container mx-auto px-6 relative z-10">
-    <h2 class="text-5xl font-bold text-center mb-12 text-white">
-      Hall of Fame
+  <div class="container mx-auto px-4 relative z-10">
+    <h2 class="text-4xl md:text-5xl font-extrabold mb-16 text-center">
+      <span
+        class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-yellow-500 to-yellow-600"
+      >
+        Hall of Champions
+      </span>
     </h2>
+
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       {
-        winners.map((winner) => (
-          <div class="bg-gray-800 p-6 rounded-lg shadow-lg transition-transform duration-300 hover:scale-105">
-            <div class="p-4">
-              <h3 class="text-3xl font-semibold text-teal-400 mb-2">
-                {winner.year} Champions
-              </h3>
-              <p class="text-white text-lg mb-1">{winner.team}</p>
-              <p class="text-gray-400 italic">Captain: {winner.captain}</p>
+        winners.map((winner, index) => (
+          <div class="relative group">
+            <div class="absolute -inset-0.5 bg-gradient-to-r from-yellow-600 to-yellow-500 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt" />
+            <div class="relative px-7 py-6 bg-black rounded-lg leading-none flex items-center justify-center space-x-6">
+              <div class="space-y-2">
+                <p class="text-yellow-400">
+                  <span class="inline-block text-xl">
+                    {winner.year} Champions
+                  </span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="inline-block h-6 w-6 ml-2"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+                    />
+                  </svg>
+                </p>
+                <p class="text-xl font-semibold text-white transition duration-200">
+                  {winner.team}
+                </p>
+                <div class="flex items-center space-x-3">
+                  <img
+                    class="w-10 h-10 rounded-full"
+                    src={winner.avatar}
+                    alt={winner.captain}
+                  />
+                  <div>
+                    <p class="text-sm text-yellow-200">Captain</p>
+                    <p class="font-medium text-white">{winner.captain}</p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         ))
       }
     </div>
+
+    <div class="mt-16 text-center">
+      <a
+        class="relative inline-flex items-center justify-center p-4 px-6 py-3
+      overflow-hidden font-medium text-yellow-600 transition duration-300
+      ease-out border-2 border-yellow-500 rounded-full shadow-md group"
+        href="#"
+      >
+        <span
+          class="absolute inset-0 flex items-center justify-center w-full h-full text-white duration-300 -translate-x-full bg-yellow-500 group-hover:translate-x-0 ease"
+        >
+          <svg
+            class="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+          </svg>
+        </span>
+        <span
+          class="absolute flex items-center justify-center w-full h-full text-yellow-500 transition-all duration-300 transform group-hover:translate-x-full ease"
+          >Join the League</span
+        >
+        <span class="relative invisible">Join the League</span>
+      </a>
+    </div>
   </div>
 </section>
diff --git a/apps/frontend/src/pages/index.astro b/apps/frontend/src/pages/index.astro
@@ -11,8 +11,8 @@ import Layout from "../layouts/Layout.astro";
   <div class="relative hero z-10">
     <HeroSection />
     <Overview />
+    <HallOfFame />
     <!-- 
-      <HallOfFame />
     <MemoriesSection />
     <LoginRegister /> -->
   </div>