beginner-realm.html

<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>Reimagine Truth</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"/>
  <style>
    :root {
      --primary-color: #2f0139;
      --secondary-color: #2a0132;
      --highlight-color: #ff00ff;
      --text-color: #fff;
      --button-color: #692119;
      --hover-effect: radial-gradient(circle, #ff00ff, transparent);
      --button-bg-color: #000;
      --button-text-color: #fff;
      --button-hover-bg-color: #ffd700;
      --button-hover-text-color: #000;
    }
    body {
      background: #1a0120;
      color: var(--text-color);
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden;
    }
    .hero {
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      border: 2px solid var(--highlight-color);
      padding: 1rem;
    }
    .hero::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--hover-effect);
      opacity: 0.2;
      animation: float 6s infinite ease-in-out;
    }
    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }
    .glow-text {
      font-size: 2rem;
      font-weight: bold;
      text-shadow: 0 0 10px var(--highlight-color), 0 0 20px var(--highlight-color), 0 0 30px var(--highlight-color);
      animation: glow 2s infinite alternate;
    }
    @keyframes glow {
      0% {
        text-shadow: 0 0 10px var(--highlight-color), 0 0 20px var(--highlight-color), 0 0 30px var(--highlight-color);
      }
      100% {
        text-shadow: 0 0 20px var(--highlight-color), 0 0 30px var(--highlight-color), 0 0 40px var(--highlight-color);
      }
    }
    .card {
      background: var(--primary-color);
      border: 2px solid var(--highlight-color);
      border-radius: 10px;
      padding: 1rem;
      box-shadow: 0 0 15px var(--highlight-color);
      transition: transform 0.3s, box-shadow 0.3s;
      animation: fadeInUp 1s ease-in-out;
    }
    .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 0 25px var(--highlight-color);
    }
    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .btn {
      background: var(--button-bg-color);
      color: var(--button-text-color);
      padding: 0.75rem 1.5rem;
      border: 2px solid var(--highlight-color);
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.3s, color 0.3s;
      animation: pulse 2s infinite;
      display: inline-block;
      text-align: center;
    }
    .btn:hover {
      background: var(--button-hover-bg-color);
      color: var(--button-hover-text-color);
    }
    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }
    footer {
      background: var(--primary-color);
      color: var(--text-color);
      text-align: center;
      padding: 1rem;
    }
    html {
      scroll-behavior: smooth;
    }
    .sticky-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--primary-color);
      transition: background 0.3s, box-shadow 0.3s;
    }
    .sticky-header.scrolled {
      background: var(--secondary-color);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    .logo-text {
      font-size: 1.5rem;
      font-weight: 700;
      transition: font-size 0.3s;
    }
    .logo-text.scrolled {
      font-size: 1.25rem;
    }
    .nav-item {
      transition: transform 0.3s;
    }
    .nav-item:hover {
      transform: scale(1.1);
    }
    .fade-in {
      opacity: 0;
      animation: fadeIn 1s forwards;
    }
    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }
    .slide-in {
      transform: translateX(-100%);
      animation: slideIn 1s forwards;
    }
    @keyframes slideIn {
      to {
        transform: translateX(0);
      }
    }
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 500px;
      border-radius: 10px;
      animation: slideInFromTop 0.5s ease-out, fadeIn 0.5s ease-out;
    }
    @keyframes slideInFromTop {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(0);
      }
    }
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      transition: transform 0.3s;
    }
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
      transform: rotate(90deg);
    }
    .floating-effect {
      display: inline-block;
      transition: transform 0.3s;
    }
    .floating-effect:hover {
      transform: translateY(-10px);
    }
    .nav-item {
      opacity: 0;
      animation: fadeInUp 0.5s forwards;
    }
    .nav-item:nth-child(1) {
      animation-delay: 0.1s;
    }
    .nav-item:nth-child(2) {
      animation-delay: 0.2s;
    }
    .nav-item:nth-child(3) {
      animation-delay: 0.3s;
    }
    .nav-item:nth-child(4) {
      animation-delay: 0.4s;
    }
    .nav-item:nth-child(5) {
      animation-delay: 0.5s;
    }
    .nav-item:nth-child(6) {
      animation-delay: 0.6s;
    }
    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    </style>
  </head>
  <body>
    <!-- Header Section -->
    <header class="sticky-header flex justify-between items-center h-16 px-4">
        <div class="flex items-center">
            <a class="text-[var(--text-color)] mr-4 flex items-center" href="home.html">
                <span class="logo-text ml-2">TruthWeb</span>
            </a>
        </div>
        <div class="flex items-center">
            <a class="text-[var(--text-color)] mr-4 icon floating-effect" href="notifications.html">
                <i class="fas fa-bell text-xl sm:text-2xl"></i>
            </a>
            <a class="text-[var(--text-color)] mr-4 icon floating-effect" href="messages.html">
                <i class="fas fa-comments text-xl sm:text-2xl"></i>
            </a>
            <a class="text-[var(--text-color)] icon floating-effect" href="profile.html">
                <i class="fas fa-user text-xl sm:text-2xl"></i>
            </a>
        </div>
    </header>
    <!-- Navigation Section -->
    <nav class="bg-[var(--primary-color)] py-4">
        <ul class="flex flex-wrap justify-center space-x-4">
            <li class="nav-item">
                <a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="index.html">Home</a>
            </li>
            <li class="nav-item">
                <a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="discover.html" id="openModalButton">Discover</a>
            </li>
            <li class="nav-item">
                <a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="about.html">About</a>
            </li>
            <li class="nav-item">
                <a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="contact.html">Contact</a>
            </li>
            <li class="nav-item">
                <a class="text-[var(--text-color)] hover:text-[var(--highlight-color)] floating-effect" href="policy.html">Policy</a>
            </li>
        </ul>
    </nav>

    </ul>
  </div>
</section>

<section class="my-16 px-6" id="beginner-realm">
  <div class="text-center">
    <h2 class="text-3xl md:text-4xl font-bold text-highlight-color mb-6">Beginner Realm: Mortal Dawn</h2>
    <p class="text-xl text-gray-300 mb-4">The Beginner Realm, also known as Mortal Dawn, marks the starting point of the truthseeker's journey. It is a realm where mortals first awaken to the possibilities of truth and begin to question the nature of their reality.</p>
  </div>
   <section class="py-12">
        <div class="container mx-auto px-4">
            
                    <h1 class="text-3xl font-bold mb-4">
                         </section>
  <div class="grid md:grid-cols-2 gap-8">
    <div class="card">
      <h3 class="text-2xl font-semibold text-highlight-color mb-4">Key Features</h3>
      <ul class="list-disc pl-6 text-lg text-gray-300">
        <li><strong>Race:</strong> Mortals</li>
        <li><strong>Appearance:</strong> Humans with ordinary features, representing the natural diversity of life. No distinct physical traits beyond their mortal origins.</li>
        <li><strong>Theme:</strong> Exploration of fundamental truths and the courage to embark on the path of discovery.</li>
      </ul>
    </div>
    
    <div class="card">
      <h3 class="text-2xl font-semibold text-highlight-color mb-4">Inhabitants</h3>
      <ul class="list-disc pl-6 text-lg text-gray-300">
        <li><strong>Truth Guides:</strong> Benevolent mentors who spark curiosity and offer guidance to new truthseekers.</li>
        <li><strong>Fledgling Spirits:</strong> Gentle entities embodying the potential of untapped knowledge, often aiding mortals in their early steps.</li>
      </ul>
    </div>
  </div>
  
  <div class="mt-8">
    <h3 class="text-2xl font-semibold text-highlight-color mb-4">Landscape</h3>
    <p class="text-lg text-gray-300 mb-4">The Beginner Realm features a balanced and harmonious environment, symbolic of untainted potential and simplicity:</p>
    <ul class="list-disc pl-6 text-lg text-gray-300">
      <li><strong>Rolling Meadows:</strong> Expansive fields of lush green grass and wildflowers, fostering a sense of calm and openness.</li>
      <li><strong>Crystal-clear Streams:</strong> Flowing waters that symbolize clarity and the beginning of understanding.</li>
      <li><strong>Ancient Groves:</strong> Forested areas with towering trees, offering wisdom and shelter to those who seek.</li>
      <li><strong>Rustic Villages:</strong> Humble settlements where mortals live and interact, sharing stories and insights.</li>
    </ul>
  </div>
</section>
 </section>
  </ul>
    </nav>
   <!-- News Content Section -->
    <section class="py-12">
        <div class="container mx-auto px-4">

             <div class="card">
                <img src="https://i.ibb.co/4s55ptN/Screenshot-2025-01-01-203329.png" alt="Screenshot-2025-01-01-203329" class="w-full h-auto mb-4">  
                    <h1 class="text-3xl font-bold mb-4">Beginner Realm: The World of Mortals</h1>
                    <p class="text-lg mb-4">The Beginner Realm is a land of simplicity, where the mundane and the miraculous coexist in subtle harmony. Its inhabitants, known as Mortals, are humans of diverse appearances and backgrounds, reflecting the vast spectrum of human experience. Their skin tones range from pale ivory to deep ebony, and their features vary across countless combinations, mirroring the diversity found in the natural world.</p>
    <p class="text-lg mb-4">In this realm, Mortals live ordinary lives, unaware of the mystical forces that ripple beneath the surface of their existence. They cultivate the land, build communities, and explore the wonders of their surroundings with curiosity and determination. Though they lack magical abilities, Mortals possess a unique spark—a boundless potential for growth through learning, resilience, and innovation.</p>
    <p class="text-lg mb-4">The landscapes of the Beginner Realm are as varied as its people. Rolling meadows, dense forests, and rugged mountains provide the backdrop for their lives. Villages and towns are scattered across the land, with bustling markets, quiet temples, and sturdy homes built from the materials of the earth. Here, Mortals forge deep connections with each other, sharing stories, traditions, and aspirations that shape their communities.</p>
    <p class="text-lg mb-4">Despite their ordinariness, Mortals are driven by an intrinsic hunger for knowledge and discovery. They invent tools, map uncharted territories, and seek to understand the world’s mysteries, even as they remain blind to the greater truths that lie beyond their grasp. This ignorance shields them from the dangers of the mystical realms, but it also limits their understanding of their place within the cosmos.</p>
    <p class="text-lg mb-4">The Mortals’ greatest strength lies not in power, but in their adaptability and tenacity. They are dreamers and builders, capable of transforming their world through sheer will and ingenuity. Some among them begin to sense faint whispers of something greater—a pull toward the unknown that beckons them to explore not only their world but also the depths of their own potential.</p>
    <p class="text-lg mb-4">For those who heed this call, the Beginner Realm is only the starting point. It is the foundation upon which they will build their journey, a humble beginning that holds the promise of infinite growth. The Mortals’ simplicity is their strength, for it allows them to evolve, to strive, and, ultimately, to ascend to realms where the extraordinary becomes their new reality.</p><div class="flex justify-center">
                   
          </div>
        </div>
  
    <!-- Main Content -->
<main class="py-16 px-4">
  <!-- Featured NFTs -->
  <section class="text-center" id="explore">
    <h2 class="text-3xl font-bold mb-8">Beginner Realm Truthseeker Deck</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Card: Truthseeker BR 002 -->
      <div class="card">
        <img src="https://i.ibb.co/dBR1dmt/Screenshot-2025-01-06-204319.png" alt="Screenshot-2025-01-06-204319" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 002</h3>
        <p class="mb-4">Description: A card that symbolizes the initial step in the journey of truth-seeking, a reminder of the path ahead.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR002.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 003 -->
      <div class="card">
       <img src="https://i.ibb.co/GsLR1jw/Screenshot-2025-01-06-205441.png" alt="Screenshot-2025-01-06-205441" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 003</h3>
        <p class="mb-4">Description: This card reflects the early moments of questioning, where the seeker begins to doubt the certainty of their surroundings.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR003.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 004 -->
      <div class="card">
        <img src="https://i.ibb.co/cD6Rqzn/Screenshot-2025-01-06-211917.png" alt="Screenshot-2025-01-06-211917" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 004</h3>
        <p class="mb-4">Description: The moment when the seeker feels the pull toward understanding, igniting their curiosity to explore beyond the surface.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR004.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 005 -->
      <div class="card">
        <img src="https://i.ibb.co/jJ7TL1H/Screenshot-2025-01-07-214940.png" alt="Screenshot-2025-01-07-214940" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 005</h3>
        <p class="mb-4">Description: Symbolizes the seeker’s first experience of uncertainty, a critical moment that shapes the quest for deeper truths.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR005.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 006 -->
      <div class="card">
        <img src="https://i.ibb.co/L8sz7Jr/Screenshot-2025-01-07-213826.png" alt="Screenshot-2025-01-07-213826" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 006</h3>
        <p class="mb-4">Description: A card that marks the transition from uncertainty to the realization that truth is a journey, not a destination.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR006.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 007 -->
      <div class="card">
<img src="https://i.ibb.co/W3XCPv9/Screenshot-2025-01-07-214007.png" alt="Screenshot-2025-01-07-214007" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 007</h3>
        <p class="mb-4">Description: A representation of the seeker’s growing awareness, realizing that their search for truth may require letting go of old beliefs.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR007.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 008 -->
      <div class="card">
        <img src="https://i.ibb.co/ZHxmkvT/Screenshot-2025-01-07-214144.png" alt="Screenshot-2025-01-07-214144" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 008</h3>
        <p class="mb-4">Description: A card symbolizing the seeker’s realization that the pursuit of truth is not always linear, but filled with twists and turns.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR008.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 009 -->
      <div class="card">
        <img src="https://i.ibb.co/XXtRqY3/Screenshot-2025-01-07-214635.png" alt="Screenshot-2025-01-07-214635" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 009</h3>
        <p class="mb-4">Description: The seeker’s understanding begins to expand, revealing that truth is not confined to one perspective, but many.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR009.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 010 -->
      <div class="card">
        <img src="https://i.ibb.co/Bwx9rxY/Screenshot-2025-01-07-214052.png" alt="Screenshot-2025-01-07-214052" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 010</h3>
        <p class="mb-4">Description: A pivotal moment when the seeker realizes that their journey toward truth is intertwined with the paths of others.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR010.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 011 -->
      <div class="card">
        <img src="https://i.ibb.co/sm1d56Q/Screenshot-2025-01-07-214352.png" alt="Screenshot-2025-01-07-214352" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 011</h3>
        <p class="mb-4">Description: As the seeker grows, they begin to understand that truth comes in layers, each one deeper than the last.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR011.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 012 -->
      <div class="card">
        <img src="https://i.ibb.co/myVL37F/Screenshot-2025-01-07-214452.png" alt="Screenshot-2025-01-07-214452" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 012</h3>
        <p class="mb-4">Description: The seeker begins to see through illusions, realizing that what they thought was truth is but a veil.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR012.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 013 -->
      <div class="card">
        <img src="https://i.ibb.co/5ctJnj2/Screenshot-2025-01-07-214109.png" alt="Screenshot-2025-01-07-214109" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 013</h3>
        <p class="mb-4">Description: A realization that truth comes with responsibility, as the seeker understands the weight of their newfound knowledge.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR013.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 014 -->
      <div class="card">
        <img src="https://i.ibb.co/VSc5ZZc/Screenshot-2025-01-07-214748.png" alt="Screenshot-2025-01-07-214748" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 014</h3>
        <p class="mb-4">Description: A glimpse of the unknown, where the seeker begins to understand that truth is not always what it seems.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR014.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 015 -->
      <div class="card">
        <img src="https://i.ibb.co/6vxcsjy/Screenshot-2025-01-07-214237.png" alt="Screenshot-2025-01-07-214237" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 015</h3>
        <p class="mb-4">Description: This card symbolizes the progression of thought, where seekers begin to question their surroundings and the nature of their reality.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR015.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 016 -->
      <div class="card">
                <img src="https://i.ibb.co/3RJVDP6/Screenshot-2025-01-07-214428.png" alt="Screenshot-2025-01-07-214428" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 016</h3>
        <p class="mb-4">Description: Represents the threshold where the seeker first steps into the unknown, guided by a deep, inner calling.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR016.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 017 -->
      <div class="card">
        <img src="https://i.ibb.co/W3XTwRg/Screenshot-2025-01-07-214334.png" alt="Screenshot-2025-01-07-214334" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 017</h3>
        <p class="mb-4">Description: A symbol of inner strength and perseverance as the seeker pushes onward, despite facing confusion and uncertainty.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR017.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 018 -->
      <div class="card">
       <img src="https://i.ibb.co/YyN6kFv/Screenshot-2025-01-07-214405.png" alt="Screenshot-2025-01-07-214405" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 018</h3>
        <p class="mb-4">Description: The moment of realization when the seeker understands that truth is a personal journey—one that constantly evolves.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR018.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 019 -->
      <div class="card">
        <img src="https://i.ibb.co/7KM2PNH/Screenshot-2025-01-07-214258.png" alt="Screenshot-2025-01-07-214258" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 019</h3>
        <p class="mb-4">Description: A representation of the seeker’s growing wisdom, as they begin to understand the complexity of the world around them.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR019.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 020 -->
      <div class="card">
         <img src="https://i.ibb.co/QKspQmk/Screenshot-2025-01-07-214210.png" alt="Screenshot-2025-01-07-214210" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 020</h3>
        <p class="mb-4">Description: A symbol of enlightenment, as the seeker breaks free from the constraints of conventional thought and begins to shape their own path.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR020.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 021 -->
      <div class="card">
        <img src="https://i.ibb.co/TmMm273/Screenshot-2025-01-07-214124.png" alt="Screenshot-2025-01-07-214124" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 021</h3>
        <p class="mb-4">Description: The seeker’s inner transformation begins, as they embrace the unknown, ready to face whatever challenges lie ahead.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR021.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 022 -->
      <div class="card">
        <img src="https://i.ibb.co/1mkmxsq/Screenshot-2025-01-07-213942.png" alt="Screenshot-2025-01-07-213942" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 022</h3>
        <p class="mb-4">Description: A moment of clarity when the seeker understands that truth is not a fixed point, but a dynamic, ever-changing process.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR022.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 023 -->
      <div class="card">
          <img src="https://i.ibb.co/b7GffCX/Screenshot-2025-01-07-214313.png" alt="Screenshot-2025-01-07-214313" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 023</h3>
        <p class="mb-4">Description: A pivotal card in the seeker’s journey, symbolizing the moment when they begin to realize the interconnectedness of all things.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR023.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 024 -->
      <div class="card">
<img src="https://i.ibb.co/5vRJGHh/Screenshot-2025-01-07-214018.png" alt="Screenshot-2025-01-07-214018" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 024</h3>
        <p class="mb-4">Description: The seeker’s trust in their intuition is strengthened, as they begin to see the connections between different sources of knowledge.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR024.html">View Card</a>
      </div>

      <!-- Card: Truthseeker BR 025 -->
      <div class="card">
        <img src="https://i.ibb.co/1v4Cj41/Screenshot-2025-01-07-214039.png" alt="Screenshot-2025-01-07-214039" border="0">
        <h3 class="text-xl font-semibold mb-2">Truthseeker BR 025</h3>
        <p class="mb-4">Description: A symbol of the seeker’s resilience and strength, as they continue their journey despite obstacles and challenges.</p>
        <p class="mb-4"><strong>Rarity:</strong> Common</p>
        <a class="btn" href="BR025.html">View Card</a>
      </div>
    </div>
  </section>

<!-- Main Content Section -->
  <section class="flex justify-center items-center min-h-screen">
   <div class="card text-center max-w-md mx-auto">
    <img alt="A wise and enigmatic guide, the Front Man leads players through the realms, offering quests and unraveling the mysteries of the Truth Web with wisdom, riddles, and subtle challenges." class="w-full h-auto" src="https://storage.googleapis.com/a1aa/image/2qpoee48nCp6i0NYFMedBgrAqXWk1NIFfjhMBRWjaeG2yAOgC.jpg" width="300">
    <h3 class="text-xl font-semibold mb-2 text-[var(--heading-color)]">
    
     TruthWeb Quest
    </h3>
    <p class="mb-4">
    Journey Through Interconnected Realms
    </p>
    <a class="btn" href="ENTRANCE.html">
     Door Lock
    </a>
   </div>
  </section>

 <section class="py-12">
  <div class="text-center">
    <h3 class="text-2xl md:text-3xl font-bold text-highlight-color mb-6">The Journey Ahead</h3>
    <p class="text-lg text-gray-300">
      As truthseekers, mortals must embrace their humanity and step forth with courage. Each choice made in this realm lays the foundation for their future exploration of the vast Truth Web.
    </p>
    <a href="initiate-realm.html" class="btn mt-6">Proceed to the Next Realm</a>
  </div>
</section>
    <!-- Main Content -->
<main class="py-16 px-4">
  <!-- Featured NFTs -->
  <section class="text-center" id="explore">
    <h2 class="text-3xl font-bold mb-8"></h2>
    <a href="index.html" class="btn mt-4">Back to Realms</a>
      </div>
  </section>
    </section>
    <!-- Footer Section -->
    <footer class="bg-[var(--primary-color)] py-8">
      <div class="container mx-auto text-center">
        <div class="mb-4">
          <a class="text-[var(--text-color)] mx-2 floating-effect" href="https://www.facebook.com/reimaginetruthofficial/" target="_blank"><i class="fab fa-facebook-f"></i></a>
          <a class="text-[var(--text-color)] mx-2 floating-effect" href="https://x.com/reimagine_truth" target="_blank"><i class="fab fa-twitter"></i></a>
          <a class="text-[var(--text-color)] mx-2 floating-effect" href="https://t.me/TruthWebOfficial" target="_blank"><i class="fab fa-telegram"></i></a>
            <a class="text-[var(--text-color)] mx-2 floating-effect" href="https://www.youtube.com/@ReimagineTruth" target="_blank"><i class="fab fa-youtube"></i></a>
        </div>
        <p class="text-[var(--text-color)] mb-4">© 2025 TruthWeb. All rights reserved.</p>
        
      </div>
  

        <!-- Quick Links Section -->
        <div class="flex justify-center space-x-8 mb-8 animate-fadeIn">
            <a class="text-white hover:text-gray-300 transition-colors" href="about.html">About Us</a>
            <a class="text-white hover:text-gray-300 transition-colors" href="termsofservice.html">Terms & Conditions</a>
            <a class="text-white hover:text-gray-300 transition-colors" href="policy.html">Privacy Policy</a>
            <a class="text-white hover:text-gray-300 transition-colors" href="contact.html">Contact</a>
        </div>

        <!-- Support Section -->
        <div class="text-center animate-fadeIn">
            <p class="text-lg mb-4">Support Us</p>
            <a href="donate.html" class="inline-flex items-center text-white bg-purple-700 px-4 py-2 rounded-full hover:bg-purple-600 transition-colors transform hover:scale-110">
                <i class="fas fa-heart mr-2"></i> Donate
            </a>
        </div>
    </div>
</footer>
    <script>
        document.getElementById('openModalButton').addEventListener('click', function(event) {
            event.preventDefault();
            document.getElementById('infoModal').style.display = 'block';
        });

        document.getElementById('closeModalButton').addEventListener('click', function() {
            document.getElementById('infoModal').style.display = 'none';
        });

        window.addEventListener('click', function(event) {
            if (event.target == document.getElementById('infoModal')) {
                document.getElementById('infoModal').style.display = 'none';
            }
        });

        window.addEventListener('scroll', function() {
            const header = document.querySelector('.sticky-header');
            const logoText = document.querySelector('.logo-text');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
                logoText.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
                logoText.classList.remove('scrolled');
            }
        });
    </script>
   </section>
  </main>
</body>
</html>
  
 <!-- Modal -->
    <div id="modal" class="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center hidden">
      <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-black">More Options</h2>
          <button id="closeModal" class="text-gray-700 hover:text-red-500 transition-transform duration-300">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <ul class="space-y-4">
          <li><a href="wiki.html" class="text-gray-700 hover:text-blue-500"><i class="fas fa-book mr-2"></i>Wiki</a></li>
          <li><a href="whitepaper.html" class="text-gray-700 hover:text-blue-500"><i class="fas fa-file-alt mr-2"></i>Whitepaper</a></li>
          <li><a href="airdrop.html" class="text-gray-700 hover:text-blue-500"><i class="fas fa-gift mr-2"></i>Airdrop</a></li>
          <li><a href="listing.html" class="text-gray-700 hover:text-blue-500"><i class="fas fa-list mr-2"></i>Listing</a></li>
          <li><a href="rto-token.html" class="text-gray-700 hover:text-blue-500"><i class="fas fa-coins mr-2"></i>RTO Token</a></li>
          <li><a href="news.html" class="text-gray-700 hover:text-blue-500"><i class="fas fa-newspaper mr-2"></i>News</a></li>
          <li><a href="nft-collection.html" class="text-gray-700 hover:text-blue-500 flex items-center"><i class="fas fa-images mr-2"></i>NFT Collection</a></li>
          
       
        </ul>
      </div>
    </div>

    <script>
      document.getElementById('openModalButton').addEventListener('click', function(event) {
        event.preventDefault();
        document.getElementById('modal').classList.remove('hidden');
      });

      document.getElementById('closeModal').addEventListener('click', function() {
        document.getElementById('modal').classList.add('hidden');
      });

      window.addEventListener('click', function(event) {
        if (event.target == document.getElementById('modal')) {
          document.getElementById('modal').classList.add('hidden');
        }
      });
    </script>
  </body>
</html>      

            
  