about.html

<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>TruthWeb - 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; /* Dark Violet */
        --secondary-color: #2a0132; /* Deep Black */
        --highlight-color: #ff00ff; /* Enhanced Bright Violet */
        --text-color: #fff; /* White */
        --button-color: #692119; /* Button Color */
        --hover-effect: radial-gradient(circle, #ff00ff, transparent);
      }
      body {
        background: #1a0120;
        color: var(--text-color);
        font-family: 'Poppins', sans-serif;
        overflow-x: hidden;
      }
      .hero {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        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-color);
        color: var(--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;
      }
      .btn:hover {
        background: var(--highlight-color);
        color: var(--primary-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>
    <!-- About Section -->
    <section class="bg-[var(--primary-color)] text-[var(--text-color)] py-16 px-8" id="about" class="py-16 px-8">
  <h2 class="text-3xl font-bold mb-8">About TruthWeb</h2>
  
  <p class="text-lg mb-6">
    TruthWeb is a revolutionary social media platform designed specifically for the crypto and Web3 community. Combining the best features of Facebook, X (formerly Twitter), and Telegram, TruthWeb offers a seamless experience for real-time discussions, news, and community engagement within the decentralized ecosystem.
  </p>
  
  <p class="text-lg mb-6">
    Our platform empowers users with transparent, community-driven features while fostering meaningful interactions and promoting decentralized values.
  </p>

  <h3 class="text-2xl font-semibold mt-8 mb-4">Key Features</h3>
  <ul class="list-disc list-inside text-lg space-y-4">
    <li><strong>Crypto News Feed:</strong> A personalized, curated feed delivering the latest and most relevant crypto updates.</li>
    <li><strong>Real-Time Updates and Discussions:</strong> Engage in dynamic conversations and live threads for breaking news.</li>
    <li><strong>Community Group Chats:</strong> Join public, private, or decentralized groups for seamless engagement.</li>
    <li><strong>Web3 Integration:</strong> Enjoy wallet integrations, NFT-based profile verification, and dApp interactions.</li>
    <li><strong>Decentralization and Privacy:</strong> Built-in privacy and governance features to uphold Web3 values.</li>
    <li><strong>Token Rewards:</strong> Earn platform tokens through engagement and content creation.</li>
  </ul>

  <h3 class="text-2xl font-semibold mt-8 mb-4">Our Vision & Mission</h3>
  <p class="text-lg mb-4"><strong>Vision:</strong> To create a fully decentralized social media ecosystem where crypto enthusiasts, builders, and investors can thrive, interact, and innovate together.</p>
  <p class="text-lg mb-4"><strong>Mission:</strong> To empower the crypto and Web3 community with a platform that values transparency, decentralization, and meaningful engagement.</p>

  <h3 class="text-2xl font-semibold mt-8 mb-4">Why Choose TruthWeb?</h3>
  <ul class="list-disc list-inside text-lg space-y-4">
    <li><strong>Unified Experience:</strong> Combines the best features of leading platforms in one place.</li>
    <li><strong>Built for Web3:</strong> Natively designed for the decentralized community.</li>
    <li><strong>Community-Driven:</strong> Governed by and for its users.</li>
    <li><strong>Secure & Private:</strong> Prioritizing user data protection and control.</li>
  </ul>
</section>
  </main>
 <!-- Modal -->
    <div class="modal" id="infoModal">
        <div class="modal-content">
            <span class="close" id="closeModalButton">×</span>
            <h2>More Options</h2>
            <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>
    
    </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>
  