OrganicNatureInspiredBadges

<section class="py-12 sm:py-16 dark:bg-gray-900 bg-white">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 sm:mb-16">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-teal-700 dark:text-teal-400 mb-4 tracking-tight leading-tight">
        Our Natural Showcase
      </h2>
      <p class="mt-4 text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed">
        Discover the organic growth and natural flow of our creative endeavors, each badge representing a unique facet of our work.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Badge 1: Leaf Green - Primary focus -->
      <div class="relative p-6 sm:p-8 bg-gradient-to-br from-lime-50 dark:from-lime-950 to-lime-100 dark:to-lime-900 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 overflow-hidden group border-2 border-lime-200 dark:border-lime-700">
        <div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/nature1/600/400?blur=2');"></div>
        <div class="relative flex flex-col items-center text-center z-10">
          <span class="inline-flex items-center justify-center p-3 sm:p-4 rounded-full bg-lime-600 dark:bg-lime-500 text-white shadow-lg mb-4 transform group-hover:scale-110 transition-transform duration-300 ease-in-out">
            <svg class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4.636 4.636l-.707.707M3 12H2m8.88-9.88a6.364 6.364 0 0115.004-.515M12 16.5c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5z" />
            </svg>
          </span>
          <h3 class="text-xl sm:text-2xl font-bold text-lime-800 dark:text-lime-300 mb-2">Sustainable Design</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-4">
            Crafting eco-conscious solutions that blossom with environmental integrity.
          </p>
          <a href="#" class="inline-flex items-center px-5 py-2 sm:py-3 border border-transparent text-sm sm:text-base font-medium rounded-full shadow-sm text-lime-800 bg-lime-200 hover:bg-lime-300 dark:bg-lime-700 dark:text-white dark:hover:bg-lime-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 transition-all duration-300 ease-in-out group-hover:px-6">
            Explore Branch
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Badge 2: Ocean Blue - Complementary focus -->
      <div class="relative p-6 sm:p-8 bg-gradient-to-br from-blue-50 dark:from-blue-950 to-blue-100 dark:to-blue-900 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 overflow-hidden group border-2 border-blue-200 dark:border-blue-700">
        <div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/ocean2/600/400?blur=2');"></div>
        <div class="relative flex flex-col items-center text-center z-10">
          <span class="inline-flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-600 dark:bg-blue-500 text-white shadow-lg mb-4 transform group-hover:scale-110 transition-transform duration-300 ease-in-out">
            <svg class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 8a8 8 0 01-8-8H4a10 10 0 0015-6c-1.666 4-6 8-11 8z" />
            </svg>
          </span>
          <h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-300 mb-2">Fluid Innovations</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-4">
            Designing with an adaptive approach, like water finding its path, for seamless experiences.
          </p>
          <a href="#" class="inline-flex items-center px-5 py-2 sm:py-3 border border-transparent text-sm sm:text-base font-medium rounded-full shadow-sm text-blue-800 bg-blue-200 hover:bg-blue-300 dark:bg-blue-700 dark:text-white dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out group-hover:px-6">
            Dive Deeper
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Badge 3: Sunset Orange - Accent/Highlight focus -->
      <div class="relative p-6 sm:p-8 bg-gradient-to-br from-orange-50 dark:from-orange-950 to-orange-100 dark:to-orange-900 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 overflow-hidden group border-2 border-orange-200 dark:border-orange-700">
        <div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/sunset3/600/400?blur=2');"></div>
        <div class="relative flex flex-col items-center text-center z-10">
          <span class="inline-flex items-center justify-center p-3 sm:p-4 rounded-full bg-orange-600 dark:bg-orange-500 text-white shadow-lg mb-4 transform group-hover:scale-110 transition-transform duration-300 ease-in-out">
            <svg class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 3.197m0 0a5 5 0 01-7.07-7.07l3.196-3.197m0 0a5 5 0 017.07 7.07l-3.196 3.197m0 0l-3.197 3.197m7.07-7.07l3.197-3.197m0 0a5 5 0 00-7.07-7.07l-3.197 3.197m0 0a5 5 0 007.07 7.07l3.197-3.197M14.752 11.168a5 5 0 01-7.072-7.072m7.072 7.072a5 5 0 00-7.072 7.072" />
            </svg>
          </span>
          <h3 class="text-xl sm:text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2">Vibrant Storytelling</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-4">
            Illuminating narratives with captivating visuals and warm, engaging user experiences.
          </p>
          <a href="#" class="inline-flex items-center px-5 py-2 sm:py-3 border border-transparent text-sm sm:text-base font-medium rounded-full shadow-sm text-orange-800 bg-orange-200 hover:bg-orange-300 dark:bg-orange-700 dark:text-white dark:hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 transition-all duration-300 ease-in-out group-hover:px-6">
            View Radiance
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

    </div>
  </div>

  <!-- Optional: A natural, flowing divider or footer element -->
  <div class="mt-16 sm:mt-20 text-center">
    <p class="text-gray-500 dark:text-gray-400 text-sm italic">
      "Nature does not hurry, yet everything is accomplished." - Lao Tzu
    </p>
  </div>
</section>