```html



  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project 1 - Fedora52
  <script src="/tailwindcss.js">"></script>
  <style>
 .project {
 @apply bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow;
 }
 .project h2 {
 @apply text-2xl font-bold mb-3;
 }
 .team-member {
 @apply bg-gray-100 p-4 rounded-lg shadow-md mb-4;
 }
 .team-member h3 {
 @apply text-lg font-bold mb-2;
 }
 .accordion-content {
 @apply hidden;
 }
 .accordion-content.show {
 @apply block;
 }
 .feature {
 @apply bg-white p-4 rounded shadow-md mb-4;
 }
 .feature h4 {
 @apply text-xl font-bold mb-2;
 }
  </style>


  <header class="bg-blue-600 text-white p-4 text-center sticky top-0 shadow-lg">
  <nav>
  <ul class="flex justify-center space-x-4">
  <li>><a href="/fedora52/index.html" class="hover:underline">Home
  <li>><a href="/fedora52/about.html" class="hover:underline">About
  <li>><a href="/fedora52/docs.html" class="hover:underline">Documentation
  <li>><a href="/fedora52/community.html" class="hover:underline">Community
  </ul>
  </nav>
  </header>
  <main>
  <section class="hero bg-gray-200 p-8 text-center mt-4 rounded-lg shadow-md">
  <h1 class="text-5xl font-bold mb-4 animate-pulse">Fedora52 Project 1
  <p class="mb-4 text-lg">An innovative project aiming to enhance open-source collaboration and user experience..</p>
  <button onclick="showModal()" class="bg-blue