모든 구성 요소

                <div class="min-h-screen flex items-center justify-center p-4 sm:p-6 bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-black dark:to-gray-950 font-sans">
  <div class="relative w-full max-w-md mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80 border border-purple-300 dark:border-purple-800">
    <!-- Artistic Background Elements (simulated with gradients/overlays) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute top-0 left-0 w-32 h-32 rounded-full bg-gradient-to-br from-pink-400 to-purple-500 blur-xl opacity-70 animate-blob dark:from-pink-800 dark:to-purple-900"></div>
      <div class="absolute bottom-10 right-10 w-40 h-40 rounded-full bg-gradient-to-br from-blue-400 to-green-400 blur-xl opacity-70 animate-blob animation-delay-2000 dark:from-blue-800 dark:to-green-900"></div>
      <div class="absolute top-1/3 left-1/4 w-24 h-24 rounded-full bg-gradient-to-br from-yellow-300 to-red-400 blur-xl opacity-70 animate-blob animation-delay-4000 dark:from-yellow-700 dark:to-red-800"></div>
    </div>

    <div class="relative z-10 p-6 sm:p-8 md:p-10 text-center">
      <h2 class="text-4xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 dark:from-pink-400 dark:via-purple-400 dark:to-blue-400 mb-4 tracking-tight leading-tight" style="text-shadow: 0 0 10px rgba(255, 0, 150, 0.4), 0 0 20px rgba(150, 0, 255, 0.4);">Spark Your Connection</h2>
      <p class="text-lg text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto">Find your perfect match in a vibrant community.</p>

      <form class="space-y-6">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
            class="w-full px-5 py-3 rounded-full border-2 border-transparent bg-purple-50 dark:bg-purple-900 dark:bg-opacity-80 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
                   focus:ring-4 focus:ring-offset-2 focus:ring-pink-400 focus:border-pink-500 dark:focus:ring-pink-600 dark:focus:border-pink-500
                   transition duration-300 ease-in-out shadow-sm
                   bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70 dark:bg-opacity-70
                   outline-none"
            placeholder="Email address">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="w-full px-5 py-3 rounded-full border-2 border-transparent bg-blue-50 dark:bg-blue-900 dark:bg-opacity-80 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
                   focus:ring-4 focus:ring-offset-2 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500
                   transition duration-300 ease-in-out shadow-sm
                   bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70 dark:bg-opacity-70
                   outline-none"
            placeholder="Password">
        </div>

        <button type="submit"
          class="w-full flex items-center justify-center px-6 py-3 border-2 border-transparent text-lg font-semibold rounded-full shadow-lg 
                 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 
                 text-white dark:from-pink-600 dark:to-purple-700 dark:hover:from-pink-700 dark:hover:to-purple-800 
                 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400
                 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105
                 relative overflow-hidden group">
          <span class="absolute inset-0 border-animation"></span>
          <span class="block">Login</span>
          <svg class="ml-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 transition duration-300 ease-in-out">Forgot your password?</a>
        </div>
      </form>

      <div class="relative flex justify-center text-sm uppercase mt-8">
        <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
      </div>

      <div class="mt-6 flex justify-center space-x-4">
        <button class="w-12 h-12 flex items-center justify-center rounded-full border-2 border-blue-400 dark:border-blue-600 text-blue-500 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 transition duration-300 ease-in-out shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24h11.493v-9.294H8.772V10.37h4.045V7.411c0-4.013 2.392-6.22 6.044-6.22 1.748 0 3.267.13 3.69-.067v3.573H18.77c-1.879 0-2.253.945-2.253 2.213v2.877h4.811l-.837 3.718h-3.974V24h6.126c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"></path></svg>
        </button>
        <button class="w-12 h-12 flex items-center justify-center rounded-full border-2 border-red-400 dark:border-red-600 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900 transition duration-300 ease-in-out shadow-sm focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12.0003 4.2694C14.7302 4.2694 16.4883 5.4385 17.5029 6.3813L20.0094 3.8748C17.973 1.8385 15.2215 0 12.0003 0C7.27582 0 3.25056 2.6841 1.25078 6.5593L5.00088 9.0717C5.97544 6.7885 8.76678 4.2694 12.0003 4.2694ZM23.0005 10.5H12V14.5H19.0004C18.8996 15.1765 18.5721 15.8239 18.0694 16.3475L21.8219 18.859C20.618 20.1983 18.9912 21.3674 17.0004 22.0305V18.1772L15.0004 18.1772L15.0004 22.0305C13.8821 22.2599 12.7417 22.3789 11.5997 22.3789C7.27582 22.3789 3.25056 19.6948 1.25078 15.8196L5.00088 13.3073C5.97544 15.5905 8.76678 18.1096 12.0003 18.1096C13.8471 18.1096 15.5985 17.3822 16.7995 16.1812L19.5995 18.9818L21.0005 17.5818L23.0005 15.5818M12.0003 16.1096C11.3323 16.1096 10.6727 16.0592 10.0003 15.9329C9.32791 15.8066 8.66838 15.7061 8.00032 15.6305C7.33226 15.5549 6.67273 15.5045 6.00032 15.5045H12.0003C12.0003 15.5045 12.0003 15.5045 12.0003 15.5045V16.1096Z"></path></svg>
        </button>
      </div>

      <p class="mt-8 text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? <a href="#" class="font-medium text-green-600 dark:text-green-400 hover:text-green-500 dark:hover:text-green-300 transition duration-300 ease-in-out">Sign up now!</a>
      </p>
    </div>
  </div>
</div>

<style>
  /* Keyframes for the 'blob' animation */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.4, 1);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Custom border animation for the button */
  .border-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 9999px; /* Full rounded */
    border: 2px solid transparent;
    background: linear-gradient(45deg, #FF00FF, #00BFFF, #FF00FF) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: glow-border 2s infinite alternate;
  }

  .dark .border-animation {
    background: linear-gradient(45deg, #F06EB0, #40E0D0, #F06EB0) border-box;
  }

  @keyframes glow-border {
    0% {
      border-color: rgba(255, 0, 255, 0.5);
      transform: translate(0, 0);
    }
    50% {
      border-color: rgba(0, 191, 255, 0.8);
      transform: translate(1px, 1px);
    }
    100% {
      border-color: rgba(255, 0, 255, 0.5);
      transform: translate(0, 0);
    }
  }
</style>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-400 to-pink-500 dark:from-gray-900 dark:to-purple-900 min-h-screen font-sans">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Course Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-fuchsia-500 dark:border-cyan-400">
      <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-400 to-electric-blue-600 dark:from-cyan-500 dark:to-lime-400 opacity-20 dark:opacity-10 transform -rotate-6 scale-125"></div>
      <div class="relative p-6">
        <img src="https://picsum.photos/id/10/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-lime-400 dark:border-fuchsia-400">
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Introduction to Quantum Computing</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Dive into the fascinating world of quantum mechanics and its computational applications.</p>
        <div class="flex items-center justify-between mb-4">
          <div class="flex -space-x-2 overflow-hidden">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-fuchsia-500 dark:ring-cyan-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor 1">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-fuchsia-500 dark:ring-cyan-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instructor 2">
          </div>
          <span class="text-lg font-bold text-hot-pink-600 dark:text-electric-blue-400">$199.99</span>
        </div>
        <button class="w-full py-3 px-6 rounded-lg bg-lime-400 text-blue-900 dark:bg-fuchsia-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          Enroll Now
        </button>
      </div>
    </div>

    <!-- Course Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-lime-400 dark:border-fuchsia-500">
      <div class="absolute inset-0 bg-gradient-to-br from-lime-400 to-hot-pink-500 dark:from-fuchsia-500 dark:to-cyan-400 opacity-20 dark:opacity-10 transform rotate-12 scale-125"></div>
      <div class="relative p-6">
        <img src="https://picsum.photos/id/25/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-fuchsia-400 dark:border-lime-400">
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Memphis Design Fundamentals</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Master the bold aesthetics of 80s Memphis design with practical projects.</p>
        <div class="flex items-center justify-between mb-4">
          <div class="flex -space-x-2 overflow-hidden">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Instructor 1">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Instructor 2">
          </div>
          <span class="text-lg font-bold text-electric-blue-600 dark:text-hot-pink-400">$149.99</span>
        </div>
        <button class="w-full py-3 px-6 rounded-lg bg-fuchsia-500 text-white dark:bg-lime-400 dark:text-blue-900 font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          Learn More
        </button>
      </div>
    </div>

    <!-- Course Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-cyan-400 dark:border-hot-pink-500">
      <div class="absolute inset-0 bg-gradient-to-br from-cyan-400 to-purple-500 dark:from-hot-pink-500 dark:to-electric-blue-400 opacity-20 dark:opacity-10 transform -rotate-12 scale-125"></div>
      <div class="relative p-6">
        <img src="https://picsum.photos/id/40/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-hot-pink-400 dark:border-cyan-400">
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Advanced AI & Machine Learning</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Explore cutting-edge AI algorithms and build intelligent systems.</p>
        <div class="flex items-center justify-between mb-4">
          <div class="flex -space-x-2 overflow-hidden">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-cyan-500 dark:ring-fuchsia-400" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Instructor 1">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-cyan-500 dark:ring-fuchsia-400" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Instructor 2">
          </div>
          <span class="text-lg font-bold text-lime-600 dark:text-fuchsia-400">$249.99</span>
        </div>
        <button class="w-full py-3 px-6 rounded-lg bg-electric-blue-500 text-white dark:bg-hot-pink-400 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          View Details
        </button>
      </div>
    </div>

    <!-- Video Lesson Card -->
    <div class="relative md:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-hot-pink-500 dark:border-lime-400">
      <div class="absolute inset-0 bg-gradient-to-br from-hot-pink-400 to-lime-500 dark:from-electric-blue-500 dark:to-fuchsia-400 opacity-20 dark:opacity-10 transform scale-110"></div>
      <div class="relative p-6 flex flex-col md:flex-row items-center">
        <div class="md:w-1/2 mb-6 md:mb-0 md:mr-6">
          <img src="https://picsum.photos/id/90/600/350" alt="Video Thumbnail" class="w-full rounded-lg shadow-xl border-2 border-dashed border-electric-blue-400 dark:border-hot-pink-400">
        </div>
        <div class="md:w-1/2">
          <span class="text-xs font-bold uppercase tracking-wide text-hot-pink-600 dark:text-lime-400 mb-2 block">Featured Lesson</span>
          <h3 class="text-3xl font-extrabold text-blue-800 dark:text-lime-400 mb-3 leading-tight">Understanding Asynchronous JavaScript</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base mb-6">A comprehensive guide to promises, async/await, and event loops in modern JavaScript development.</p>
          <div class="flex items-center mb-6">
            <img class="h-10 w-10 rounded-full ring-2 ring-hot-pink-500 dark:ring-lime-400 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Instructor">
            <div>
              <p class="text-sm font-bold text-gray-800 dark:text-gray-200">Dr. Elara Vance</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Senior Developer & Educator</p>
            </div>
          </div>
          <button class="w-full md:w-auto py-3 px-8 rounded-lg bg-electric-blue-500 text-white dark:bg-fuchsia-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
            Watch Now
            <span class="ml-2 text-2xl">&#9654;</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Downloadable Resource Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-fuchsia-500 dark:border-cyan-400">
      <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-400 to-electric-blue-600 dark:from-cyan-500 dark:to-lime-400 opacity-20 dark:opacity-10 transform rotate-6 scale-125"></div>
      <div class="relative p-6">
        <div class="text-center mb-4">
          <svg class="mx-auto h-16 w-16 text-lime-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight text-center">Essential Python Cheat Sheet</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 text-center">A quick reference guide for Python syntax, functions, and common libraries.</p>
        <span class="block text-center text-xs font-semibold text-gray-500 dark:text-gray-400 mb-4">PDF, 2.5 MB</span>
        <button class="w-full py-3 px-6 rounded-lg bg-cyan-400 text-blue-900 dark:bg-electric-blue-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          Download PDF
        </button>
      </div>
    </div>

  </div>
</div>

<style>
  /* Custom colors for Memphis theme */
  /* You would typically define these in tailwind.config.js */
  .bg-electric-blue-500 {
    background-color: #00FFFF; /* Aqua/Electric Blue */
  }
  .text-electric-blue-500 {
    color: #00FFFF;
  }
  .dark\:bg-electric-blue-500 {
    background-color: #00FFFF;
  }
  .dark\:text-electric-blue-400 {
    color: #00FFFF;
  }

  .bg-hot-pink-500 {
    background-color: #FF1493; /* Deep Pink/Hot Pink */
  }
  .text-hot-pink-600 {
    color: #C71585; /* Darker hot pink */
  }
  .dark\:bg-hot-pink-400 {
    background-color: #FF69B4; /* Lighter hot pink for dark mode */
  }
  .dark\:text-hot-pink-400 {
    color: #FF69B4;
  }

  .bg-lime-400 {
    background-color: #A3E635; /* Lime Green */
  }
  .text-lime-400 {
    color: #A3E635;
  }
  .text-lime-600 {
    color: #84CC16;
  }
  .dark\:bg-lime-400 {
    background-color: #BEF264; /* Lighter lime for dark mode */
  }
  .dark\:text-lime-400 {
    color: #BEF264;
  }

  .border-fuchsia-500 {
    border-color: #D946EF; /* Brighter fuchsia */
  }
  .border-cyan-400 {
    border-color: #22D3EE; /* Brighter cyan */
  }
  .border-hot-pink-400 {
    border-color: #FF69B4; 
  }
  .border-electric-blue-400 {
    border-color: #00FFFF;
  }

  /* Background gradients for overall theme */
  .from-purple-400 {
      --tw-gradient-from: #C084FC;
      --tw-gradient-to: rgba(192, 132, 252, 0);
  }
  .to-pink-500 {
      --tw-gradient-to: #EC4899;
  }

  .dark\:from-gray-900 {
      --tw-gradient-from: #111827;
      --tw-gradient-to: rgba(17, 24, 32, 0);
  }
  .dark\:to-purple-900 {
      --tw-gradient-to: #581C87;
  }
</style>
              

                <div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-50 flex items-center justify-center dark:bg-gray-900 overflow-hidden">
  <div class="max-w-6xl w-full mx-auto p-6 md:p-8 rounded-3xl bg-white shadow-xl dark:bg-gray-800 transition-colors duration-300">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white transition-colors duration-300 tracking-tight leading-tight">
        Your Connection Ecosystem
      </h2>
      <button class="px-4 py-2 rounded-full text-sm font-semibold bg-pink-500 text-white shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75 transition-all duration-300 transform hover:scale-105">
        Expand View
      </button>
    </div>

    <p class="text-md md:text-lg mb-8 text-gray-600 dark:text-gray-300 transition-colors duration-300 leading-snug">
      Visualize the organic flow of your social connections and discover new possibilities within your network.
    </p>

    <div class="relative w-full h-80 sm:h-96 md:h-[500px] lg:h-[600px] flex items-center justify-center p-4 border border-gray-200 rounded-2xl dark:border-gray-700 overflow-hidden bg-gradient-to-br from-gray-50 to-white dark:from-gray-850 dark:to-gray-800">
      <!-- Main Node -->
      <div class="absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="You" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-pink-500 shadow-lg ring ring-pink-500 ring-opacity-50 transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:ring-8" />
        <span class="mt-2 text-sm md:text-base font-semibold text-gray-800 dark:text-white transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-2 whitespace-nowrap">You</span>
      </div>

      <!-- Connection Nodes (Organic Placement) -->
      <div class="absolute z-10 w-full h-full">
        <!-- Path 1 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 48 50 C 30 20, 10 30, 25 15" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute top-[10%] left-[18%] md:top-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Alice" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Alice</span>
        </div>

        <!-- Path 2 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 52 50 C 70 80, 85 70, 75 85" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute bottom-[10%] right-[18%] md:bottom-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Bob" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Bob</span>
        </div>

        <!-- Path 3 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 48 C 20 70, 30 90, 15 75" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute bottom-[10%] left-[18%] md:bottom-[12%] md:left-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Carol" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Carol</span>
        </div>

        <!-- Path 4 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 52 C 80 30, 70 10, 85 25" stroke="#EC4899" stroke-width="1" fill="none" class="opacity-70 dark:opacity-50" style="filter:drop-shadow(0 0 4px #EC4899);"/>
        </svg>
        <div class="absolute top-[10%] right-[18%] md:top-[12%] md:right-[10%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="David" class="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs md:text-sm text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">David</span>
        </div>

        <!-- Path 5 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 50 C 25 5, 20 50, 40 10" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
        </svg>
         <div class="absolute top-[5%] left-[30%] md:top-[2%] md:left-[35%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Eve" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Eve</span>
        </div>

        <!-- Path 6 -->
        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M 50 50 C 75 95, 80 50, 60 90" stroke="#EC4899" stroke-width="0.5" fill="none" class="opacity-50 dark:opacity-30" style="filter:drop-shadow(0 0 2px #EC4899);"/>
        </svg>
         <div class="absolute bottom-[5%] right-[30%] md:bottom-[2%] md:right-[35%] flex flex-col items-center group cursor-pointer">
            <img src="https://randomuser.me/api/portraits/men/90.jpg" alt="Frank" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-pink-500" />
            <span class="mt-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-300 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transform -translate-y-4 group-hover:translate-y-0 group-focus:translate-y-0 transition-all duration-300 absolute bottom-full pb-1 whitespace-nowrap">Frank</span>
        </div>

      </div>
    </div>

    <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
      <div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Total Connections</h4>
        <p class="text-3xl font-extrabold text-pink-500">236</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+12 since last week</p>
      </div>
      <div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Mutual Interests</h4>
        <p class="text-3xl font-extrabold text-pink-500">78%</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Avg. across your network</p>
      </div>
      <div class="p-5 rounded-xl bg-gray-100 dark:bg-gray-700 shadow-sm">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">New Connections this Month</h4>
        <p class="text-3xl font-extrabold text-pink-500">18</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Ready to mingle</p>
      </div>
    </div>

    <div class="mt-8 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 rounded-full text-lg font-semibold bg-gray-900 text-white dark:bg-pink-500 dark:text-white shadow-lg hover:bg-gray-700 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:scale-105">
        Explore New Matches
        <svg class="ml-2 -mr-1 w-5 h-5" 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="M17 8l4 4m0 0l-4 4m4-4H3">
          </path>
        </svg>
      </a>
    </div>
  </div>
</div>
              

                <header class="sticky top-0 z-50 bg-emerald-100/90 backdrop-blur-sm shadow-sm dark:bg-emerald-950/90 dark:shadow-lg transition-colors duration-300">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-8">
      <a href="#" class="flex items-center group">
        <svg class="h-8 w-8 text-emerald-600 dark:text-emerald-300 group-hover:rotate-6 transition-transform duration-200 ease-out" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM5.293 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L10 9.586l-1.293-1.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="ml-2 text-2xl font-bold tracking-tight text-emerald-800 dark:text-emerald-100 group-hover:text-emerald-600 dark:group-hover:text-emerald-200 transition-colors duration-200">MarketPulse</span>
      </a>
      <ul class="hidden md:flex space-x-6">
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Products
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Categories
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Vendors
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
      </ul>
    </div>

    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Search">
        <svg class="h-6 w-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Cart">
        <svg class="h-6 w-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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13H4m0 0l2 2m-2-2a2 2 0 100 4 2 2 0 000-4zM17 13h-4m4 0l-2 2m2-2a2 2 0 100 4 2 2 0 000-4z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hidden md:block bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="User Profile">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="h-7 w-7 rounded-full object-cover border border-emerald-300 dark:border-emerald-700">
      </button>
      <div class="flex items-center space-x-2">
        <button id="dark-mode-toggle" aria-label="Toggle dark mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105">
          <svg class="h-6 w-6 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
          </svg>
          <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 4a1 1 0 011 1v1a1 1 0 11-2 0V7a1 1 0 011-1zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm15 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zM9 16a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.586 5.586a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414 0l-.707-.707zm5.657 8.947a1 1 0 01-1.414 0l-.707-.707a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707zM4 10a6 6 0 1112 0 6 6 0 01-12 0z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
      <button class="md:hidden p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Open menu">
        <svg class="h-6 w-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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </nav>
</header>

<script>
  // Dark mode functionality (optional, not part of the HTML/CSS requirement but common for such components)
  const toggleDarkMode = () => {
    if (document.documentElement.classList.contains('dark')) {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    } else {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    }
  };

  const darkLightToggle = document.getElementById('dark-mode-toggle');
  if (darkLightToggle) {
    darkLightToggle.addEventListener('click', toggleDarkMode);
  }

  // Apply saved theme on load
  if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>
              

                <nav class="bg-gray-100 dark:bg-gray-900 border-b-4 border-yellow-500 dark:border-blue-700 p-4 transition-colors duration-300">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <div class="w-8 h-8 bg-blue-600 dark:bg-red-500 transform rotate-45"></div>
      <a href="#" class="text-gray-800 dark:text-gray-100 text-xl font-bold uppercase tracking-wider block">CLIMA</a>
    </div>

    <!-- Mobile Menu Button -->
    <button class="lg:hidden text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-blue-500" aria-label="Toggle navigation menu" onclick="this.nextElementSibling.classList.toggle('hidden'); this.nextElementSibling.classList.toggle('flex');">
      <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="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Navigation Links Container -->
    <div class="hidden lg:flex w-full lg:w-auto mt-4 lg:mt-0 items-center justify-end flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500">
        Forecast
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500">
        Radar
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500">
        Climate
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-red-500 uppercase font-medium transition-colors duration-200 py-2 border-b-2 border-transparent hover:border-yellow-500 dark:hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-blue-500">
        Alerts
      </a>

      <!-- Search Bar -->
      <div class="relative">
        <input type="text" placeholder="Search city..." class="py-2 px-4 pl-10 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-blue-500 border border-gray-300 dark:border-gray-700 w-full lg:w-48 transition-colors duration-200">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>
  </div>
</nav>
              

                <nav class="bg-gradient-to-r from-blue-600 to-blue-800 dark:from-gray-900 dark:to-gray-950 shadow-lg relative z-50 transform skew-y-1 -translate-y-1 overflow-visible md:skew-y-0 md:translate-y-0">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 relative z-10 transform -skew-y-1 md:skew-y-0">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 flex items-center group">
          <div class="w-10 h-10 bg-blue-400 dark:bg-blue-600 rounded-full flex items-center justify-center shadow-md transform transition-transform duration-300 group-hover:scale-110 group-hover:rotate-12">
            <svg class="h-6 w-6 text-white" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M16.364 18.364l.707.707M12 21v-1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M10 11h4l-1 5v5h-2v-5l-1-5z"></path>
            </svg>
          </div>
          <span class="ml-3 text-white text-2xl font-extrabold tracking-tight transform transition-transform duration-300 group-hover:px-2 group-hover:-translate-x-1">Food<span class="text-blue-200 dark:text-blue-400">Express</span></span>
        </a>
      </div>

      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-8">
          <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <span class="z-10">Home</span>
          </a>
          <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <span class="z-10">Restaurants</span>
          </a>
          <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <span class="z-10">Deals</span>
          </a>
          <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-700 dark:hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-md flex items-center group relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-500 dark:bg-gray-800 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            <span class="z-10">Contact</span>
          </a>
        </div>
      </div>

      <div class="hidden md:flex items-center ml-auto space-x-6">
        <div class="relative w-64">
          <input type="text" placeholder="Search food or restaurants..." class="w-full pl-10 pr-4 py-2 rounded-full bg-blue-700 dark:bg-gray-800 text-white placeholder-blue-200 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 shadow-inner 3d-inset-shadow transition-all duration-300 focus:w-72">
          <svg class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-300 dark:text-gray-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
        <button class="p-2 rounded-full bg-blue-700 dark:bg-gray-800 text-blue-200 dark:text-gray-400 hover:text-white hover:bg-blue-600 dark:hover:bg-gray-700 transition shadow-md transform hover:scale-110 relative 3d-button-raised">
          <svg class="h-6 w-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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 dark:text-red-900 transform translate-x-1/2 -translate-y-1/2 bg-red-500 dark:bg-red-400 rounded-full shadow-lg">3</span>
        </button>
        <div class="relative group">
          <button class="flex items-center p-1 rounded-full bg-blue-700 dark:bg-gray-800 text-blue-200 dark:text-gray-400 hover:text-white hover:bg-blue-600 dark:hover:bg-gray-700 transition transform hover:scale-110 shadow-md 3d-button-raised">
            <img class="h-8 w-8 rounded-full border-2 border-blue-400 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
            <span class="ml-2 text-white font-medium hidden lg:block">Emily R.</span>
            <svg class="ml-1 mr-1 h-5 w-5 text-blue-300 dark:text-gray-500" 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="M19 9l-7 7-7-7"></path>
            </svg>
          </button>
          <div class="hidden group-hover:block absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl py-1 transform translate-z-10 transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:translate-y-0 translate-y-2 dark:shadow-light-md-reverse">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700">Sign out</a>
          </div>
        </div>
      </div>

      <div class="-mr-2 flex md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-200 dark:text-gray-400 hover:text-white hover:bg-blue-700 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-800 dark:focus:ring-offset-gray-900 focus:ring-white transition shadow-lg 3d-button-raised" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-blue-700 dark:bg-gray-900 border-t border-blue-600 dark:border-gray-800 shadow-inner transform translate-z-neg-10 z-0">
      <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Home</a>
      <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Restaurants</a>
      <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Deals</a>
      <a href="#" class="text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 shadow-sm">Contact</a>
      <div class="border-t border-blue-500 dark:border-gray-700 my-2 pt-2"></div>
      <div class="relative mt-4">
        <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-full bg-blue-600 dark:bg-gray-800 text-white placeholder-blue-300 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-gray-600 shadow-inner 3d-inset-shadow">
        <svg class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400 dark:text-gray-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <button class="flex items-center justify-between w-full px-3 py-2 rounded-md text-blue-100 dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 transition shadow-sm 3d-button-raised mt-2">
        <div class="flex items-center">
          <svg class="h-6 w-6 mr-2" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          <span>Cart</span>
        </div>
        <span class="px-2 py-1 text-xs font-bold leading-none text-red-100 dark:text-red-900 bg-red-500 dark:bg-red-400 rounded-full shadow-lg">3</span>
      </button>
      <div class="flex items-center px-3 py-2 mt-2">
        <img class="h-9 w-9 rounded-full border-2 border-blue-400 dark:border-gray-600 object-cover mr-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
        <div>
          <p class="text-white font-medium">Emily R.</p>
          <a href="#" class="text-blue-200 dark:text-gray-400 hover:text-white text-sm">View Profile</a>
        </div>
      </div>
    </div>
  </div>
  <style>
    /* Custom 3D-like shadows for a more pronounced effect */
    .3d-inset-shadow {
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
    }
    .dark .3d-inset-shadow {
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
    }
    .3d-button-raised {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
    }
    .dark .3d-button-raised {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
    }
    .shadow-light-md-reverse {
      box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .dark .shadow-light-md-reverse {
      box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.3), 0 -2px 4px -1px rgba(0, 0, 0, 0.1);
    }
    /* Further minor adjustments for 3D depth, usually handled well by transform properties */
    .translate-z-10 {
      transform: translateZ(10px) translateY(0);
    }
    .translate-z-neg-10 {
      transform: translateZ(-10px);
    }
  </style>
</nav>
              

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 lg:p-8">
  <div class="relative w-full max-w-2xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800 transform transition-all duration-300 ease-in-out scale-95 opacity-0 animate-scale-in ">
    <!-- animate-scale-in is a placeholder for a hypothetical animation class -->
    <div class="h-4 bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-600 dark:to-indigo-700"></div>
    <div class="p-6 md:p-8">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white md:text-3xl">Production Line Status</h2>
        <button type="button" class="text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 rounded-md p-1.5 transition-colors duration-200">
          <span class="sr-only">Close modal</span>
          <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="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>

      <div class="mb-8 space-y-4 md:flex md:space-y-0 md:space-x-6">
        <div class="w-full p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600 flex-1">
          <p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Current Output</p>
          <p class="text-3xl font-extrabold text-teal-600 dark:text-teal-400 animate-pulse">1,245 <span class="text-lg font-normal text-gray-700 dark:text-gray-300">units/hr</span></p>
          <div class="w-full bg-gray-200 rounded-full h-2.5 mt-2 dark:bg-gray-600">
            <div class="h-2.5 rounded-full bg-gradient-to-r from-teal-500 to-indigo-500 animating-width" style="width: 85%;"></div>
          </div>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">85% of target capacity</p>
        </div>
        <div class="w-full p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600 flex-1">
          <p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Efficiency Score</p>
          <p class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400 animate-pulse">92.3%</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 flex items-center">
            <svg class="w-4 h-4 mr-1 text-green-500" 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="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
            +1.2% in last 24h
          </p>
        </div>
      </div>

      <div class="grid grid-cols-1 gap-4 mb-8 md:grid-cols-2">
        <div class="p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600">
          <p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">System Alerts</p>
          <ul class="space-y-2">
            <li class="flex items-center text-sm text-red-600 dark:text-red-400">
              <svg class="w-5 h-5 mr-2" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
              Critical: Machine #3 Overheating
            </li>
            <li class="flex items-center text-sm text-amber-600 dark:text-amber-400">
              <svg class="w-5 h-5 mr-2" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
              Warning: Material Feed Low on Line 1
            </li>
            <li class="flex items-center text-sm text-gray-600 dark:text-gray-300">
              <svg class="w-5 h-5 mr-2" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              Maintenance task pending
            </li>
          </ul>
        </div>
        <div class="p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600">
          <p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Maintenance Team</p>
          <div class="flex -space-x-2 overflow-hidden mb-4">
            <img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Smith">
            <img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-800 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Doe">
            <img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-800 object-cover" src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar of Mark Johnson">
          </div>
          <p class="mb-2 text-sm text-gray-700 dark:text-gray-300">
            Upcoming Scheduled: <span class="font-semibold text-teal-600 dark:text-teal-400">Line 2 Inspection (08:00 AM)</span>
          </p>
          <a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">
            View All Tasks
            <svg class="w-4 h-4 ml-1" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>

      <div class="flex flex-col-reverse justify-end gap-3 sm:flex-row">
        <button type="button" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200">
          Dismiss All Alerts
        </button>
        <button type="button" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-teal-500 to-indigo-600 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:from-teal-600 dark:to-indigo-700 transition-all duration-200 hover:scale-105 active:scale-95">
          Take Corrective Action
          <svg class="w-5 h-5 ml-2" 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="M9 5l7 7-7 7"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
              

                <section class="py-12 bg-lime-50 dark:bg-emerald-900 rounded-xl shadow-lg m-4">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center text-emerald-800 dark:text-lime-200 mb-12 font-sans leading-tight">
      Harvesting Joy, Cultivating Growth
    </h2>

    <div class="relative flex items-center justify-center">
      <!-- Navigation Buttons (for display purposes, actual JS for functionality) -->
      <button aria-label="Previous slide" class="absolute left-0 z-10 p-3 bg-emerald-600 rounded-full shadow-lg text-white hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300 ease-in-out -left-4 md:-left-8 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
        <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="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button aria-label="Next slide" class="absolute right-0 z-10 p-3 bg-emerald-600 rounded-full shadow-lg text-white hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300 ease-in-out -right-4 md:-right-8 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
        <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="M9 5l7 7-7 7"></path></svg>
      </button>

      <!-- Carousel Track (Conceptual - assumes JS for dynamic sliding) -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full overflow-hidden">
        <!-- Slide 1 -->
        <div class="bg-white dark:bg-emerald-800 rounded-3xl p-6 shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl border-4 border-emerald-200 dark:border-emerald-700">
          <img class="w-full h-48 object-cover rounded-2xl mb-6 shadow-md border-2 border-emerald-300" src="https://picsum.photos/seed/agriculture1/600/400" alt="Freshly Harvested Produce">
          <h3 class="text-2xl font-bold text-emerald-700 dark:text-lime-300 mb-3">Bountiful Harvests</h3>
          <p class="text-emerald-600 dark:text-lime-400 text-lg leading-relaxed">Discover the freshest, organically grown produce straight from our fields to your table. Sustainable practices for a healthier planet.</p>
          <div class="mt-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-12 h-12 rounded-full border-4 border-emerald-400 dark:border-lime-500 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Farmer John">
              <span class="text-emerald-700 dark:text-lime-300 font-semibold">Farmer John</span>
            </div>
            <a href="#" class="inline-flex items-center px-5 py-2 font-semibold text-white bg-emerald-500 rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition duration-300 dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-300 shadow-md">
              Learn More
              <svg class="w-4 h-4 ml-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="bg-white dark:bg-emerald-800 rounded-3xl p-6 shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl border-4 border-emerald-200 dark:border-emerald-700">
          <img class="w-full h-48 object-cover rounded-2xl mb-6 shadow-md border-2 border-emerald-300" src="https://picsum.photos/seed/agriculture2/600/400" alt="Modern Farming Technology">
          <h3 class="text-2xl font-bold text-emerald-700 dark:text-lime-300 mb-3">Smart Farming Solutions</h3>
          <p class="text-emerald-600 dark:text-lime-400 text-lg leading-relaxed">Embrace the future with our innovative farming technologies. Maximizing yields with minimal impact on nature.</p>
          <div class="mt-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-12 h-12 rounded-full border-4 border-emerald-400 dark:border-lime-500 shadow-md" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Agri-Tech Anya">
              <span class="text-emerald-700 dark:text-lime-300 font-semibold">Agri-Tech Anya</span>
            </div>
            <a href="#" class="inline-flex items-center px-5 py-2 font-semibold text-white bg-emerald-500 rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition duration-300 dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-300 shadow-md">
              Discover
              <svg class="w-4 h-4 ml-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="bg-white dark:bg-emerald-800 rounded-3xl p-6 shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl border-4 border-emerald-200 dark:border-emerald-700">
          <img class="w-full h-48 object-cover rounded-2xl mb-6 shadow-md border-2 border-emerald-300" src="https://picsum.photos/seed/agriculture3/600/400" alt="Community Farming">
          <h3 class="text-2xl font-bold text-emerald-700 dark:text-lime-300 mb-3">Community and Care</h3>
          <p class="text-emerald-600 dark:text-lime-400 text-lg leading-relaxed">Join our vibrant farming community. Share knowledge, grow together, and nurture the earth with love and dedication.</p>
          <div class="mt-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-12 h-12 rounded-full border-4 border-emerald-400 dark:border-lime-500 shadow-md" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Community Leader Chris">
              <span class="text-emerald-700 dark:text-lime-300 font-semibold">Community Chris</span>
            </div>
            <a href="#" class="inline-flex items-center px-5 py-2 font-semibold text-white bg-emerald-500 rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition duration-300 dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-300 shadow-md">
              Join Us
              <svg class="w-4 h-4 ml-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Dot Indicators (Conceptual - assumes JS for dynamic navigation) -->
    <div class="flex justify-center mt-12 space-x-4">
      <button aria-label="Go to slide 1" class="w-4 h-4 bg-emerald-600 dark:bg-lime-500 rounded-full focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300"></button>
      <button aria-label="Go to slide 2" class="w-4 h-4 bg-emerald-300 dark:bg-emerald-600 rounded-full hover:bg-emerald-400 dark:hover:bg-lime-400 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300"></button>
      <button aria-label="Go to slide 3" class="w-4 h-4 bg-emerald-300 dark:bg-emerald-600 rounded-full hover:bg-emerald-400 dark:hover:bg-lime-400 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300"></button>
    </div>
  </div>
</section>
              

                <div class="p-4 md:p-6 lg:p-8 bg-gray-950 dark:bg-gray-950 text-blue-300 font-mono antialiased">
  <div class="max-w-xl mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 ease-in-out
              bg-gradient-to-br from-gray-900 to-gray-800 dark:from-gray-900 dark:to-gray-800
              border border-blue-800 dark:border-blue-800 transform hover:scale-[1.01] hover:shadow-blue-500/30">
    
    <!-- Header / User Info -->
    <div class="flex items-center p-4 lg:p-5 border-b border-blue-900 dark:border-blue-900">
      <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-400 object-cover mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-blue-200 text-sm md:text-base font-semibold">@NeonNomad_2077</p>
        <p class="text-blue-500 text-xs mt-0.5">Sent from Cyber-Grid v3.1</p>
      </div>
    </div>

    <!-- Embedded Media Content -->
    <div class="relative pb-[56.25%] overflow-hidden bg-gray-800 dark:bg-gray-800">
      <!-- Placeholder for an iframe or video element -->
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <!-- Caption / Description -->
    <div class="p-4 lg:p-5 border-t border-blue-900 dark:border-blue-900">
      <p class="text-blue-300 text-sm leading-relaxed mb-2">
        Just uploaded the latest #CyberpunkBeat from the data-streams. Feel the pulse of the city! 🤘 Dive into the rhythm. 
        <span class="text-blue-500 hover:text-blue-400 cursor-pointer transition-colors duration-200">#FutureSounds #Synthwave #NeoTokyo</span>
      </p>
      <div class="flex justify-between items-center text-blue-400 text-xs">
        <span>2.3K Likes</span>
        <span>45 Comments</span>
        <span>Link Shared</span>
      </div>
    </div>

    <!-- Action Buttons (Optional) -->
    <div class="flex justify-around py-3 px-4 bg-gray-850 dark:bg-gray-850 border-t border-blue-900 dark:border-blue-900">
      <button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
                     hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        <svg class="w-5 h-5 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
        Like
      </button>
      <button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
                     hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        <svg class="w-5 h-5 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        Comment
      </button>
      <button class="flex items-center px-3 py-1 rounded-full text-blue-300 transition-all duration-300 ease-in-out
                     hover:bg-blue-900 hover:text-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        <svg class="w-5 h-5 mr-1" 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="M8.684 13.342C8.882 13.07 9 12.73 9 12c0-.73-.118-1.07-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l.676-.676M4.342 13.342C4.148 13.064 4 12.721 4 12c0-.721.148-1.064.342-1.342m0 2.684L5.018 12.018m0 0L4.342 11.342V12c0-.721.148-1.064.342-1.342m0 2.684a3 3 0 110-2.684"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.643v4.614z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11l-3 3-3-3"></path></svg>
        Share
      </button>
    </div>

  </div>
</div>
              

                <nav class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <ul class="flex list-none p-0 m-0 rounded-lg shadow-lg dark:shadow-xl">
    <li>
      <a href="#" class="relative block px-4 py-2 text-fuchsia-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-fuchsia-400 dark:hover:bg-gray-600 rounded-l-lg transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">&laquo; Previous</span>
        <span class="absolute inset-0 bg-fuchsia-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-fuchsia-500 rounded-l-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li>
      <a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">1</span>
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative block px-4 py-2 text-cyan-500 bg-gray-300 dark:bg-gray-600 font-bold glow-effect-active transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">2</span>
        <span class="absolute inset-0 bg-cyan-700 opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-cyan-500 scale-105-outline-sm"></span>
      </a>
    </li>
    <li>
      <a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">3</span>
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li class="sm:block hidden">
      <a href="#" class="relative block px-4 py-2 text-emerald-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-emerald-400 dark:hover:bg-gray-600 transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">4</span>
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
    <li>
      <a href="#" class="relative block px-4 py-2 text-fuchsia-500 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:text-fuchsia-400 dark:hover:bg-gray-600 rounded-r-lg transition-all duration-300 overflow-hidden group">
        <span class="relative z-10">Next &raquo;</span>
        <span class="absolute inset-0 bg-fuchsia-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm"></span>
        <span class="absolute inset-0 border-2 border-fuchsia-500 rounded-r-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 scale-105 group-hover:scale-100"></span>
      </a>
    </li>
  </ul>
</nav>

<style>
  /* Custom CSS for the glowing active state and outline effect */
  .glow-effect-active {
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.7), 0 0 16px rgba(6, 182, 212, 0.5), 0 0 24px rgba(6, 182, 212, 0.3);
    transform: scale(1.05);
    position: relative;
    z-index: 20;
  }

  .dark .glow-effect-active {
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.7), 0 0 16px rgba(34, 211, 238, 0.5), 0 0 24px rgba(34, 211, 238, 0.3);
  }

  /* Outline effect for hover */
  .group:hover .scale-105, .group:hover .scale-105-outline-sm {
    transform: scale(1.05);
  }

   .scale-105-outline-sm {
    position: absolute;
    inset: 0;
    border: 2px solid theme('colors.cyan.500'); /* Use Tailwind config for consistency */
    border-radius: inherit; /* Inherit border-radius from parent if applies */
    opacity: 1;
    filter: drop-shadow(0 0 4px theme('colors.cyan.500'));
    transition: transform 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
  }

  .dark .scale-105-outline-sm {
    border-color: theme('colors.cyan.400');
    filter: drop-shadow(0 0 4px theme('colors.cyan.400'));
  }

  /* Small adjustment for responsiveness on smaller screens */
  @media (max-width: 640px) {
    .glow-effect-active {
      transform: scale(1.03);
    }
    .group:hover .scale-105, .group:hover .scale-105-outline-sm {
      transform: scale(1.03);
    }
  }
</style>