Interactive Social Media Gallery

<div class="bg-white py-16 px-6">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); .font-quicksand { font-family: 'Quicksand', sans-serif; } .jelly-btn { position: relative; border: none; border-radius: 45px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; color: white; font-family: 'Quicksand', sans-serif; font-weight: 500; text-decoration: none; } .jelly-btn::before { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250, 0.678); content: ""; filter: blur(1px); top: 7px; border-radius: 50%; } .jelly-btn::after { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250, 0.137); content: ""; filter: blur(1px); bottom: 7px; border-radius: 50%; } .jelly-btn:hover { animation: jello-horizontal 0.9s both; transform: translateY(-2px); } @keyframes jello-horizontal { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } .jelly-btn-primary { background-color: rgb(151, 95, 255); box-shadow: rgb(210, 187, 253) 0px 10px 10px inset, rgba(5, 5, 5, 0.21) 0px 5px 10px, rgb(124, 54, 255) 0px -10px 10px inset; }
  </style>
  <div class="text-center mb-16">
    <div class="inline-flex items-center gap-2 rounded-full border border-pink-200 bg-pink-50 px-3 py-1 text-xs text-pink-700 shadow-sm backdrop-blur mb-4 font-quicksand">
      @yesbobatea
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="w-3 h-3">
        <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
        <path d="m16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
        <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
      </svg>
    </div>
    <h2 class="text-3xl text-gray-900 sm:text-4xl mb-4 font-quicksand tracking-tight font-semibold">
      Follow us
      <span class="text-gray-950 font-quicksand tracking-tight font-semibold">on the gram</span>
    </h2>
    <p class="text-lg text-gray-700 max-w-2xl mx-auto font-quicksand">
      Join our bubble tea community! See the latest drinks, behind-the-scenes moments, and share your #YesBobaMoments with us.
    </p>
  </div>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
    <div class="bg-white border border-gray-200 rounded-2xl group relative overflow-hidden transition cursor-pointer shadow-lg hover:shadow-xl">
      <div class="aspect-square overflow-hidden">
        <img src="https://cdn.midjourney.com/4de72a82-eec6-49fd-951f-312b26e9a927/0_0.png?w=800&q=80" alt="Matcha creation process" class="h-full w-full object-cover transition duration-500 group-hover:scale-110 rounded-2xl">
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-end rounded-2xl">
        <div class="p-4">
          <div class="flex items-center gap-2 text-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="w-4 h-4">
              <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path>
            </svg>
            <span class="text-xs font-quicksand">1.2k likes</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white border border-gray-200 rounded-2xl group relative overflow-hidden transition cursor-pointer shadow-lg hover:shadow-xl">
      <div class="aspect-square overflow-hidden">
        <img src="https://cdn.midjourney.com/7d14dfb2-7ce3-45dc-81d5-ca319bda791e/0_0.png?w=800&q=80" alt="Taro bubble tea styling" class="h-full w-full object-cover transition duration-500 group-hover:scale-110 rounded-2xl">
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-end rounded-2xl">
        <div class="p-4">
          <div class="flex items-center gap-2 text-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="w-4 h-4">
              <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path>
            </svg>
            <span class="text-xs font-quicksand">924 likes</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white border border-gray-200 rounded-2xl group relative overflow-hidden transition cursor-pointer shadow-lg hover:shadow-xl">
      <div class="aspect-square overflow-hidden">
        <img src="https://cdn.midjourney.com/30ac4841-0371-4524-90d3-ab9d0c71d0f1/0_2.png?w=800&q=80" alt="Store interior aesthetic" class="h-full w-full object-cover transition duration-500 group-hover:scale-110 rounded-2xl">
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-end rounded-2xl">
        <div class="p-4">
          <div class="flex items-center gap-2 text-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="w-4 h-4">
              <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path>
            </svg>
            <span class="text-xs font-quicksand">756 likes</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white border border-gray-200 rounded-2xl group relative overflow-hidden transition cursor-pointer shadow-lg hover:shadow-xl">
      <div class="aspect-square overflow-hidden">
        <img src="https://cdn.midjourney.com/2791b229-007d-4120-9c9f-7ee0aac2e2d9/0_1.png?w=800&q=80" alt="Happy customers with boba" class="h-full w-full object-cover transition duration-500 group-hover:scale-110 rounded-2xl">
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-end rounded-2xl">
        <div class="p-4">
          <div class="flex items-center gap-2 text-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="w-4 h-4">
              <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path>
            </svg>
            <span class="text-xs font-quicksand">1.8k likes</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center">
    <a href="#"
   class="jelly-btn jelly-btn-primary gap-2 text-sm font-quicksand inline-flex items-center justify-center w-full max-w-sm mx-auto"
   style="height: 48px; padding: 0px 24px;">
  Follow @yesbobatea
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="w-5 h-5">
    <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
    <path d="m16 11.37a4 4 0 1 1-1 1.26 4 4 0 0 1 1-1.26z"></path>
    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
  </svg>
</a>

  </div>
</div>