diff --git a/templates/user-profile.html b/templates/user-profile.html
new file mode 100644
index 0000000..ec7d431
--- /dev/null
+++ b/templates/user-profile.html
@@ -0,0 +1,687 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>TAKEONE - Bahraini Themed User Profile</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="https://fonts.googleapis.com/css?family=Inter:400,700,900&display=swap" rel="stylesheet" />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
+  <style>
+    /* Bahrain flag colors:
+       Dark Red: #8A1538
+       White: #FFFFFF
+       Light Red Accent: #C8102E
+    */
+    body {
+      margin: 0;
+      padding: 0;
+      background: #fef9f9;
+      font-family: 'Inter', sans-serif;
+      color: #3a1f2b;
+      min-height: 100vh;
+    }
+    .container {
+      max-width: 1140px;
+      margin: 48px auto;
+      padding: 0 20px;
+      display: grid;
+      grid-template-columns: 320px 1fr;
+      gap: 44px;
+      background: white;
+      border-radius: 28px;
+      box-shadow: 0 10px 35px rgba(138, 21, 56, 0.15);
+      overflow: hidden;
+    }
+    /* Left Profile Card */
+    .profile-card {
+      position: relative;
+      background: #8a1538;
+      border-radius: 28px;
+      color: white;
+      padding: 60px 36px 48px 36px;
+      box-shadow: 0 8px 28px rgba(138, 21, 56, 0.32);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-height: 700px;
+    }
+    .profile-avatar {
+      width: 144px;
+      height: 144px;
+      border-radius: 50%;
+      border: 6px solid #c8102e;
+      object-fit: cover;
+      box-shadow: 0 6px 35px rgba(200, 16, 46, 0.75);
+      margin-top: -110px;
+      background: white;
+    }
+    .profile-name {
+      margin-top: 24px;
+      font-weight: 900;
+      font-size: 2.3rem;
+      letter-spacing: 0.07em;
+      text-align: center;
+      text-transform: uppercase;
+      text-shadow: 0 0 8px rgba(200, 16, 46, 0.8);
+      line-height: 1.1;
+    }
+    .profile-subtitle {
+      margin-top: 6px;
+      font-weight: 500;
+      font-size: 1rem;
+      text-align: center;
+      opacity: 0.8;
+      letter-spacing: 0.02em;
+    }
+    /* Stats with circular arcs */
+    .stats-container {
+      margin-top: 36px;
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      gap: 18px;
+      padding: 0 4px;
+    }
+    .stat-arc-wrapper {
+      text-align: center;
+      cursor: default;
+    }
+    .stat-arc-svg {
+      width: 70px;
+      height: 70px;
+    }
+    .stat-value {
+      font-weight: 800;
+      font-size: 1.4rem;
+      margin-top: 6px;
+      letter-spacing: 0.05em;
+      text-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+    .stat-label {
+      font-size: 0.9rem;
+      opacity: 0.8;
+      letter-spacing: 0.04em;
+      margin-top: 2px;
+    }
+    /* Affiliations */
+    .affiliations-section {
+      margin-top: 54px;
+      width: 100%;
+    }
+    .affiliations-title {
+      font-weight: 700;
+      font-size: 1.3rem;
+      margin-bottom: 14px;
+      letter-spacing: 0.08em;
+      border-bottom: 2px solid #c8102e;
+      padding-bottom: 6px;
+      text-transform: uppercase;
+      text-align: center;
+      color: #fefefe;
+      filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
+    }
+    .clubs-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 14px;
+    }
+    .club-chip {
+      background: #c8102e;
+      color: white;
+      padding: 10px 20px;
+      border-radius: 32px;
+      font-weight: 600;
+      font-size: 0.98rem;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      box-shadow: 0 2px 10px rgba(200, 16, 46, 0.5);
+      transition: background 0.3s;
+      cursor: default;
+      user-select: none;
+    }
+    .club-chip:hover {
+      background: #8a1538;
+    }
+    .club-logo {
+      width: 28px;
+      height: 28px;
+      border-radius: 7px;
+      background: white;
+      border: 2px solid #8a1538;
+      padding: 3px;
+      object-fit: contain;
+    }
+    /* QR Code */
+    .qr-container {
+      margin-top: auto;
+      text-align: center;
+      background: white;
+      padding: 14px;
+      border-radius: 16px;
+      box-shadow: 0 2px 18px rgba(200, 16, 46, 0.14);
+    }
+    .qr-code {
+      width: 84px;
+      height: 84px;
+      margin-bottom: 10px;
+      border-radius: 14px;
+    }
+    .qr-label {
+      font-weight: 700;
+      color: #8a1538;
+      text-transform: uppercase;
+      font-size: 0.85rem;
+      letter-spacing: 0.07em;
+    }
+
+    /* Right Content Area */
+    .right-content {
+      display: flex;
+      flex-direction: column;
+      gap: 50px;
+      min-height: 700px;
+      position: relative;
+    }
+    /* Timeline Section */
+    .timeline-section {
+      background: white;
+      border-radius: 24px;
+      padding: 36px 38px;
+      box-shadow: 0 10px 30px rgba(200, 16, 46, 0.11);
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .timeline-title {
+      font-weight: 800;
+      font-size: 1.5rem;
+      color: #8a1538;
+      margin-bottom: 30px;
+      text-align: center;
+      letter-spacing: 0.06em;
+    }
+    .timeline-list {
+      position: relative;
+      margin-left: 12px;
+      border-left: 3px solid #c8102e;
+      padding-left: 26px;
+      overflow-y: auto;
+      max-height: 360px;
+    }
+    .timeline-item {
+      position: relative;
+      margin-bottom: 38px;
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+      padding: 12px 18px 12px 10px;
+      border-radius: 18px;
+    }
+    .timeline-item:hover {
+      background: #fcf1f4;
+    }
+    .timeline-dot {
+      position: absolute;
+      left: -15px;
+      top: 19px;
+      background: #c8102e;
+      border: 3.5px solid #8a1538;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      box-shadow: 0 0 9px rgba(200,16,46,0.45);
+    }
+    .timeline-header {
+      font-weight: 700;
+      font-size: 1.08rem;
+      color: #8a1538;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .timeline-header i {
+      color: #c8102e;
+      font-size: 1.25rem;
+    }
+    .timeline-meta {
+      font-weight: 500;
+      opacity: 0.65;
+      font-size: 0.92rem;
+      padding-left: 28px;
+      margin-top: 4px;
+      color: #3a1f2b;
+    }
+    .timeline-amount {
+      font-weight: 700;
+      color: #8a1538;
+      margin-left: auto;
+      font-size: 1.05rem;
+      padding-left: 14px;
+      white-space: nowrap;
+    }
+    .status-completed {
+      color: #1b5e20;
+      font-weight: 700;
+      background: #c8e6c9;
+      border-radius: 10px;
+      padding: 1px 8px;
+      font-size: 0.82rem;
+      margin-left: 18px;
+    }
+    /* Expanded timeline details */
+    .timeline-detail {
+      background: #fce9ed;
+      box-shadow: 0 6px 22px rgba(200, 16, 46, 0.18);
+      border-radius: 18px;
+      margin-top: 14px;
+      padding: 18px 25px 22px 25px;
+      font-size: 1rem;
+      color: #6b2a3c;
+      position: relative;
+      overflow-wrap: break-word;
+    }
+    .close-btn {
+      position: absolute;
+      top: 10px;
+      right: 18px;
+      font-weight: 900;
+      font-size: 1.3rem;
+      color: #8a1538;
+      cursor: pointer;
+      user-select: none;
+    }
+    .attachment-container {
+      margin-top: 14px;
+      display: flex;
+      gap: 18px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .attachment-container img,
+    .attachment-container iframe {
+      border-radius: 16px;
+      width: 180px;
+      height: 130px;
+      box-shadow: 0 0 15px rgba(200,16,46,0.3);
+      object-fit: contain;
+      background: white;
+    }
+    .attachment-link {
+      font-weight: 700;
+      color: #8a1538;
+      display: inline-block;
+      margin-top: 8px;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    /* Highlight and achievements section */
+    .achievements-highlights {
+      display: flex;
+      flex-direction: column;
+      gap: 36px;
+    }
+    .achievements-section {
+      background: white;
+      padding: 32px 40px;
+      border-radius: 24px;
+      box-shadow: 0 10px 29px rgba(200, 16, 46, 0.12);
+    }
+    .achievements-title {
+      font-weight: 800;
+      font-size: 1.4rem;
+      color: #8a1538;
+      margin-bottom: 24px;
+      text-align: center;
+      letter-spacing: 0.06em;
+    }
+    .badges-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 18px;
+      justify-content: center;
+    }
+    .badge {
+      background: #c8102e;
+      color: white;
+      padding: 10px 28px;
+      font-weight: 700;
+      font-size: 1rem;
+      border-radius: 28px;
+      box-shadow: 0 3px 16px rgba(200,16,46,0.35);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      text-transform: uppercase;
+      user-select: none;
+      transition: background 0.3s ease;
+      cursor: default;
+    }
+    .badge i {
+      font-size: 1.3rem;
+    }
+    .badge:hover {
+      background: #8a1538;
+    }
+    .highlight-section {
+      background: white;
+      border-radius: 24px;
+      padding: 30px 38px;
+      box-shadow: 0 10px 28px rgba(200, 16, 46, 0.12);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 28px;
+      justify-content: center;
+      font-size: 1rem;
+    }
+    .highlight-photo,
+    .highlight-video {
+      width: 180px;
+      height: 120px;
+      border-radius: 18px;
+      box-shadow: 0 6px 22px rgba(138, 21, 56, 0.12);
+      object-fit: cover;
+      background: white;
+      cursor: pointer;
+      transition: transform 0.24s ease;
+    }
+    .highlight-photo:hover,
+    .highlight-video:hover {
+      transform: scale(1.06);
+      box-shadow: 0 8px 26px rgba(138, 21, 56, 0.3);
+    }
+    .highlight-caption {
+      flex-basis: 100%;
+      color: #8a1538;
+      font-weight: 700;
+      text-align: center;
+      font-style: italic;
+      letter-spacing: 0.07em;
+      margin-top: 8px;
+    }
+
+    /* Recommendations placed full width below Right Content */
+    .recommendations-section {
+      margin: 48px auto 68px auto;
+      max-width: 1140px;
+      padding: 28px 36px;
+      background: #f9e0e6;
+      border-radius: 32px;
+      box-shadow: 0 8px 40px rgba(200, 16, 46, 0.16);
+      color: #8a1538;
+      font-weight: 600;
+      font-size: 1.15rem;
+      letter-spacing: 0.03em;
+      display: flex;
+      gap: 28px;
+      flex-wrap: wrap;
+      user-select: none;
+    }
+    .rec-card {
+      background: white;
+      flex: 1 1 280px;
+      border-radius: 24px;
+      box-shadow: 0 6px 26px rgba(200, 16, 46, 0.09);
+      cursor: pointer;
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      padding: 16px 20px;
+      transition: box-shadow 0.3s ease, transform 0.22s ease;
+      color: #5d1a2c;
+    }
+    .rec-card:hover {
+      box-shadow: 0 15px 50px rgba(200, 16, 46, 0.3);
+      transform: scale(1.05);
+      color: #8a1538;
+    }
+    .rec-img {
+      width: 68px;
+      height: 68px;
+      border-radius: 18px;
+      object-fit: cover;
+      box-shadow: 0 0 12px rgba(200, 16, 46, 0.3);
+      flex-shrink: 0;
+    }
+    .rec-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .rec-title {
+      display: flex;
+      align-items: center;
+      font-weight: 900;
+      font-size: 1.12rem;
+      gap: 10px;
+      letter-spacing: 0.03em;
+    }
+    .rec-title i {
+      color: #c8102e;
+      font-size: 1.3rem;
+    }
+    .rec-desc {
+      font-weight: 500;
+      font-size: 0.9rem;
+      color: #5a1428;
+    }
+
+    /* Responsive Layout */
+    @media (max-width: 940px) {
+      .container {
+        grid-template-columns: 1fr;
+        gap: 38px;
+      }
+      .profile-card {
+        min-height: auto;
+        margin: 0 auto;
+        max-width: 320px;
+      }
+      .right-content {
+        min-height: auto;
+      }
+    }
+    @media (max-width: 480px) {
+      .rec-card {
+        flex-direction: column;
+        text-align: center;
+      }
+      .rec-img {
+        margin-bottom: 8px;
+      }
+    }
+  </style>
+  <script>
+    // Timeline interaction handlers
+    function toggleDetail(id) {
+      const openDetails = document.querySelectorAll('.timeline-detail');
+      openDetails.forEach(detail => {
+        if(detail.id !== 'detail-' + id) detail.style.display = 'none';
+      });
+
+      const item = document.getElementById('detail-' + id);
+      if (item.style.display === 'block') {
+        item.style.display = 'none';
+      } else {
+        item.style.display = 'block';
+        window.scrollTo({ top: item.offsetTop - 60, behavior: 'smooth' });
+      }
+    }
+    function closeDetail(id) {
+      const item = document.getElementById('detail-' + id);
+      if(item) item.style.display = 'none';
+    }
+  </script>
+</head>
+<body>
+  <div class="container">
+    <!-- Left profile card -->
+    <section class="profile-card">
+      <img class="profile-avatar" src="https://randomuser.me/api/portraits/men/14.jpg" alt="Mohammed Al-Tae Kwon" />
+      <h1 class="profile-name">Mohammed Al-Tae Kwon</h1>
+      <p class="profile-subtitle">🛡️ National Athlete of Bahrain</p>
+      <p class="profile-subtitle">🎂 Age: 27</p>
+
+      <div class="stats-container" aria-label="User stats">
+        <div class="stat-arc-wrapper" title="Years active: 9">
+          <svg class="stat-arc-svg" viewBox="0 0 36 36">
+            <path fill="none" stroke="#c8102e" stroke-width="3" d="M18 2a16 16 0 1 1 0 32a16 16 0 1 1 0-32"/>
+            <path fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="80,100" d="M18 2a16 16 0 1 1 0 32"/>
+          </svg>
+          <div class="stat-value">9</div>
+          <div class="stat-label">Years Active</div>
+        </div>
+        <div class="stat-arc-wrapper" title="Clubs affiliated: 15">
+          <svg class="stat-arc-svg" viewBox="0 0 36 36">
+            <path fill="none" stroke="#c8102e" stroke-width="3" d="M18 2a16 16 0 1 1 0 32a16 16 0 1 1 0-32"/>
+            <path fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="90,100" d="M18 2a16 16 0 1 1 0 32"/>
+          </svg>
+          <div class="stat-value">15</div>
+          <div class="stat-label">Clubs</div>
+        </div>
+        <div class="stat-arc-wrapper" title="Transactions completed: 120">
+          <svg class="stat-arc-svg" viewBox="0 0 36 36">
+            <path fill="none" stroke="#c8102e" stroke-width="3" d="M18 2a16 16 0 1 1 0 32a16 16 0 1 1 0-32"/>
+            <path fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="65,100" d="M18 2a16 16 0 1 1 0 32"/>
+          </svg>
+          <div class="stat-value">120</div>
+          <div class="stat-label">Transactions</div>
+        </div>
+      </div>
+
+      <div class="affiliations-section" aria-label="Affiliated clubs">
+        <h2 class="affiliations-title">Affiliated Clubs</h2>
+        <div class="clubs-list">
+          <span class="club-chip"><img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Martial_Arts_icon.png" class="club-logo" alt="Taekwondo Power Club"/>Taekwondo Power Club</span>
+          <span class="club-chip"><img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Martial_Arts_icon.png" class="club-logo" alt="Elite Fighters"/>Elite Fighters</span>
+          <span class="club-chip"><img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Martial_Arts_icon.png" class="club-logo" alt="Bahraini Warriors"/>Bahraini Warriors</span>
+        </div>
+      </div>
+
+      <div class="qr-container" aria-label="Membership QR code">
+        <img src="https://api.qrserver.com/v1/create-qr-code/?data=TKD123456789&size=100x100&color=8a1538" alt="Membership QR Code" class="qr-code" />
+        <div class="qr-label">Membership QR</div>
+      </div>
+    </section>
+
+    <!-- Right side content -->
+    <section class="right-content">
+      <!-- Timeline -->
+      <article class="timeline-section" aria-label="Transaction timeline">
+        <div class="timeline-title"><i class="fa-solid fa-clock-rotate-left"></i> Transaction Timeline</div>
+        <div class="timeline-list">
+          <div class="timeline-item" onclick="toggleDetail(1)" tabindex="0" role="button" aria-expanded="false" aria-controls="detail-1" aria-label="Membership Renewal on 2025-10-18, BD 30">
+            <div class="timeline-dot"></div>
+            <div class="timeline-header">
+              <i class="fa-solid fa-credit-card"></i> Membership Renewal
+              <span class="timeline-amount">BD 30</span>
+              <span class="status-completed" aria-label="Completed">Completed</span>
+            </div>
+            <div class="timeline-meta">Taekwondo Power Club · 2025-10-18</div>
+            <div id="detail-1" class="timeline-detail" style="display:none;">
+              <span class="close-btn" onclick="closeDetail(1)" aria-label="Close details">&times;</span>
+              <b>Reference:</b> TXN-9384124<br />
+              <b>Details:</b> Renewal for 2025/2026 season.<br />
+              <b>Attachment:</b>
+              <div class="attachment-container">
+                <a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" target="_blank" class="attachment-link">Download Receipt (PDF)</a>
+                <iframe
+                  src="https://docs.google.com/gview?url=https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf&embedded=true"
+                  frameborder="0"
+                ></iframe>
+              </div>
+            </div>
+          </div>
+
+          <div class="timeline-item" onclick="toggleDetail(2)" tabindex="0" role="button" aria-expanded="false" aria-controls="detail-2" aria-label="Event Registration on 2025-08-22, BD 15">
+            <div class="timeline-dot"></div>
+            <div class="timeline-header">
+              <i class="fa-solid fa-ticket"></i> Event Registration
+              <span class="timeline-amount">BD 15</span>
+              <span class="status-completed" aria-label="Completed">Completed</span>
+            </div>
+            <div class="timeline-meta">Elite Fighters · 2025-08-22</div>
+            <div id="detail-2" class="timeline-detail" style="display:none;">
+              <span class="close-btn" onclick="closeDetail(2)" aria-label="Close details">&times;</span>
+              <b>Reference:</b> TXN-8371940<br />
+              <b>Details:</b> Registration for Elite Summer Open.<br />
+              <b>Attachment:</b>
+              <div class="attachment-container">
+                <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=400&q=80" alt="Event Receipt" />
+              </div>
+            </div>
+          </div>
+
+          <div class="timeline-item" onclick="toggleDetail(3)" tabindex="0" role="button" aria-expanded="false" aria-controls="detail-3" aria-label="Tournament Fee on 2025-07-10, BD 20">
+            <div class="timeline-dot"></div>
+            <div class="timeline-header">
+              <i class="fa-solid fa-trophy"></i> Tournament Fee
+              <span class="timeline-amount">BD 20</span>
+              <span class="status-completed" aria-label="Completed">Completed</span>
+            </div>
+            <div class="timeline-meta">Taekwondo Power Club · 2025-07-10</div>
+            <div id="detail-3" class="timeline-detail" style="display:none;">
+              <span class="close-btn" onclick="closeDetail(3)" aria-label="Close details">&times;</span>
+              <b>Reference:</b> TXN-6638194<br />
+              <b>Details:</b> Participation: Bahrain National Tournament 2025.<br />
+              <b>Attachment:</b>
+              <div class="attachment-container">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Martial_Arts_icon.png" alt="Tournament Badge" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </article>
+
+      <!-- Achievements and Highlights -->
+      <section class="achievements-highlights" aria-label="Achievements and highlights">
+        <div class="achievements-section">
+          <h2 class="achievements-title"><i class="fa-solid fa-award"></i> Achievements & Badges</h2>
+          <div class="badges-list">
+            <span class="badge"><i class="fa-solid fa-medal"></i> Gold Medal · Nationals 2024</span>
+            <span class="badge"><i class="fa-solid fa-chess-knight"></i> Black Belt Level 3</span>
+            <span class="badge"><i class="fa-solid fa-star"></i> Community Star 2025</span>
+          </div>
+        </div>
+
+        <div class="highlight-section">
+          <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=400&q=80" class="highlight-photo" alt="Event highlight" />
+          <video class="highlight-video" src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
+          <img src="https://images.unsplash.com/photo-1518717758536-85ae29035b6d?auto=format&fit=crop&w=400&q=80" class="highlight-photo" alt="Tournament highlight" />
+          <div class="highlight-caption" aria-live="polite" aria-atomic="true">
+            <i class="fa-solid fa-quote-left"></i> Defeated the top national athlete in the 2024 finals: a victory to remember!
+          </div>
+        </div>
+      </section>
+    </section>
+  </div>
+
+  <!-- Recommendations positioned below the container -->
+  <section class="recommendations-section" aria-label="Personalized recommendations">
+    <div class="rec-card" tabindex="0" role="button" aria-describedby="rec1-desc" onclick="alert('Redirecting to Membership Renewal page');">
+      <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=80&q=80" alt="Membership Renewal" class="rec-img" />
+      <div class="rec-content">
+        <div class="rec-title"><i class="fa-solid fa-hourglass-half"></i> Renew your Taekwondo Power Club membership</div>
+        <div id="rec1-desc" class="rec-desc">Secure your spot next season before the deadline!</div>
+      </div>
+    </div>
+    <div class="rec-card" tabindex="0" role="button" aria-describedby="rec2-desc" onclick="alert('Redirecting to Alumni Meetup page');">
+      <img src="https://images.unsplash.com/photo-1596495578060-02592f618695?auto=format&fit=crop&w=80&q=80" alt="Alumni Meetup" class="rec-img" />
+      <div class="rec-content">
+        <div class="rec-title"><i class="fa-solid fa-people-group"></i> Elite Fighters Alumni Meet-up</div>
+        <div id="rec2-desc" class="rec-desc">Reconnect and share stories with fellow champions next month!</div>
+      </div>
+    </div>
+    <div class="rec-card" tabindex="0" role="button" aria-describedby="rec3-desc" onclick="alert('Redirecting to tournament registration');">
+      <img src="https://images.unsplash.com/photo-1549576490-b0b4831ef60a?auto=format&fit=crop&w=80&q=80" alt="Tournaments Open" class="rec-img" />
+      <div class="rec-content">
+        <div class="rec-title"><i class="fa-solid fa-trophy"></i> New Tournaments Open</div>
+        <div id="rec3-desc" class="rec-desc">Explore upcoming events and test your skills on the big stage!</div>
+      </div>
+    </div>
+  </section>
+</body>
+</html>
