Social_Components_Component

<div class="relative min-h-screen bg-gray-100 p-4 sm:p-8 md:p-12 dark:bg-gray-900 overflow-hidden flex items-center justify-center">

  <!-- Base background (for pseudo-3D effect) -->
  <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-indigo-100 dark:from-purple-900 dark:to-indigo-800 transform rotate-3 scale-105 rounded-3xl opacity-50 blur-xl"></div>
  <div class="absolute inset-0 bg-gradient-to-tl from-teal-200 to-green-100 dark:from-teal-900 dark:to-green-800 transform -rotate-6 scale-105 rounded-3xl opacity-50 blur-xl"></div>

  <div class="relative z-10 w-full max-w-4xl bg-white bg-opacity-80 dark:bg-gray-800 dark:bg-opacity-80 backdrop-blur-md rounded-3xl shadow-2xl p-6 sm:p-8 md:p-10 border border-t-4 border-l-4 border-purple-300 dark:border-purple-600 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0 transition-all duration-700 ease-in-out">
    
    <div class="flex flex-col md:flex-row gap-8">

      <!-- Product/Image Section -->
      <div class="w-full md:w-1/2 relative bg-purple-50 dark:bg-purple-950 rounded-2xl p-2 shadow-inner border border-purple-200 dark:border-purple-700 transform rotate-3 translate-x-2 translate-y-1">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto object-cover rounded-xl shadow-lg transform -rotate-3 -translate-x-2 -translate-y-1 mx-auto">
        <div class="absolute bottom-2 left-2 right-2 p-2 bg-gradient-to-t from-black/60 to-transparent rounded-b-xl text-white text-sm flex justify-between items-center">
          <span>New Arrivals</span>
          <button class="flex items-center gap-1 text-white hover:text-green-300 transition-colors">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
            Save
          </button>
        </div>
      </div>

      <!-- Social Engagement Section -->
      <div class="w-full md:w-1/2 flex flex-col justify-between gap-6 relative">
        
        <div class="relative p-6 bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-950 dark:to-teal-900 rounded-3xl shadow-xl border border-green-200 dark:border-green-700 transform -rotate-2 -translate-x-1 translate-y-2">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 transform -rotate-1 origin-top-left">Customer Reviews</h3>
          
          <!-- Rating Block -->
          <div class="flex items-center mb-4">
            <div class="flex text-yellow-400">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <span class="ml-2 text-gray-700 dark:text-gray-300 font-semibold">4.5 out of 5</span>
            <a href="#" class="ml-4 text-sm text-purple-600 dark:text-purple-400 hover:underline">Read all 120 reviews</a>
          </div>

          <!-- Individual Review -->
          <div class="bg-white dark:bg-gray-700 p-4 rounded-xl shadow-md border-b-4 border-r-4 border-green-300 dark:border-green-600 transform translate-x-1 translate-y-1">
            <div class="flex items-center mb-3">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-purple-500 mr-3 shadow-sm">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Verified Purchaser</p>
              </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 italic text-sm mb-2">"Absolutely love this product! The quality is superb and it arrived so quickly."</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right">Reviewed on July 15, 2023</p>
          </div>

        </div>

        <!-- Share and Social Buttons -->
        <div class="relative p-6 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-950 dark:to-purple-900 rounded-3xl shadow-xl border border-indigo-200 dark:border-indigo-700 transform rotate-2 translate-x-2 -translate-y-1">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 transform rotate-1 origin-top-left">Share & Connect</h3>
          <div class="flex flex-wrap gap-4 justify-center sm:justify-start">
            <button class="flex items-center gap-2 px-5 py-3 bg-purple-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-purple-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.994 20.29c-.777 0-1.488-.363-1.944-.937-.456-.574-.694-1.309-.694-2.106V11.23a.75.75 0 011.5 0v6.071c0 .484.148.97.447 1.34s.707.57 1.157.57a3.99 3.99 0 003.99-3.99c0-.485-.149-.97-.448-1.34s-.708-.57-1.157-.57h-1.5a.75.75 0 010-1.5h1.5a.75.75 0 01.75.75c0 1.29-.444 2.502-1.282 3.407-.84.904-1.977 1.4-3.193 1.4zm-9.996-3.957A3.99 3.99 0 003 12.29c0-.485.149-.97.448-1.34s.708-.57 1.157-.57h1.5a.75.75 0 010-1.5H4.555a.75.75 0 01-.75-.75c0-1.29.444-2.502 1.282-3.407.84-.904 1.977-1.4 3.193-1.4.777 0 1.488.363 1.944.937.456.574.694 1.309.694 2.106v6.972c0 .484-.148.97-.447 1.34s-.707.57-1.157.57a3.99 3.99 0 00-3.99-3.99z"></path></svg>
              Share Product
            </button>
            <button class="flex items-center gap-2 px-5 py-3 bg-blue-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-blue-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 6.981a5.61 5.61 0 00-1.637-.446 3.149 3.149 0 01-2.28 1.002.75.75 0 01-.5-.14A5.61 5.61 0 0013 7.825c0-.422-.05-.838-.145-1.243a4.072 4.072 0 00-3.513-3.618 3.189 3.189 0 00-.817-.116 3.978 3.978 0 00-2.81 1.153C4.249 4.908 4 6.136 4 7.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V7.424C0 6.136.249 4.908.775 3.013A4.043 4.043 0 001.353 2.126a3.978 3.978 0 002.81-1.153C4.249.908 4 1.136 4 2.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V2.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V-.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V-.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0A.75.75 0 010 .681V.681c0 1.288-.249 2.516-.775 4.411A4.043 4.043 0 00-1.353 2.126c-.45-.487-1.026-.78-1.666-.889-.64-.108-1.316-.016-1.928.272-.61.286-1.12.753-1.472 1.341s-.513 1.22-.513 1.905c0 .285.029.566.088.841.059.274.148.539.26.792.112.253.25.495.412.72s.347.43.55.614l.05.044c.484.423.953.79 1.393 1.096.44.306.845.548 1.196.726.35.178.634.3l.865.253a.75.75 0 01.31.07zm-.591 1.242c.45-.487 1.026-.78 1.666-.889.64-.108 1.316-.016 1.928.272.61.286 1.12.753 1.472 1.341s.513 1.22.513 1.905c0 .285-.029.566-.088.841-.059.274-.148.539-.26.792-.112.253-.25.495-.412.72s-.347.43-.55.614l-.05.044c-.484.423-.953.79-1.393 1.096-.44.306-.845.548-1.196.726-.35.178-.634.3l-.865.253a.75.75 0 01-.31.07z"></path></svg>
              Facebook
            </button>
            <button class="flex items-center gap-2 px-5 py-3 bg-red-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-red-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 2H7c-2.76 0-5 2.24-5 5v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5zm3.78 17H3.22c-.68 0-1.22-.54-1.22-1.22V7c0-.68.54-1.22 1.22-1.22h13.56c.68 0 1.22.54 1.22 1.22v10.78zm-1.89-5.78c-.24-1.07-.63-2.07-1.13-2.98-.59-.8-1.29-1.42-2.16-1.81-.9-.4-1.88-.6-2.98-.63-1.1-.03-2.2.06-3.23.3-1.03.24-1.99.63-2.88 1.13-.8.59-1.42 1.29-1.81 2.16-.4.9-.6 1.88-.63 2.98-.03 1.1.06 2.2.3 3.23.24 1.03.63 1.99 1.13 2.88.59.8 1.29 1.42 2.16 1.81.9.4 1.88.6 2.98.63 1.1.03 2.2-.06 3.23-.3 1.03-.24 1.99-.63 2.88-1.13.8-.59 1.42-1.29 1.81-2.16.4-.9.6-1.88.63-2.98.03-1.1-.06-2.2-.3-3.23zM12 17.5c-3.03 0-5.5-2.47-5.5-5.5S8.97 6.5 12 6.5s5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5zm.96-8.54l-1.92 1.92v-2.88a.5.5 0 00-1 0v2.88l-1.92-1.92a.5.5 0 00-.71.71l2.5 2.5a.5.5 0 00.71 0l2.5-2.5a.5.5 0 00-.71-.71z"></path></svg>
              Instagram
            </button>
          </div>
        </div>

      </div>
    </div>

    <!-- Bottom Call to Action / Social Proof -->
    <div class="mt-8 text-center bg-gray-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border border-gray-200 dark:border-gray-600 transform perspective-1000 rotate-x-3 rotate-y-2 hover:rotate-x-0 hover:rotate-y-0 transition-all duration-700 ease-in-out">
      <p class="text-lg font-semibold text-gray-800 dark:text-white mb-3 tracking-wide transform perspective-1000 rotate-x-3 rotate-y-2">Join thousands of happy customers!</p>
      <button class="px-8 py-4 bg-gradient-to-r from-teal-500 to-green-500 text-white font-bold rounded-full text-xl shadow-lg hover:shadow-xl hover:from-teal-600 hover:to-green-600 transition-all duration-300 ease-in-out uppercase tracking-wider transform perspective-1000 translate-z-10 hover:translate-z-20 scale-105 hover:scale-110">
        Explore More Products
        <span class="ml-2 inline-block transition-transform duration-300 group-hover:translate-x-1">
          &rarr;
        </span>
      </button>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">"Your satisfaction is our priority."</p>
    </div>

     <!-- Small decorative elements -->
     <div class="absolute -top-4 -left-4 w-12 h-12 bg-purple-400 dark:bg-purple-700 rounded-full mix-blend-multiply blur-sm opacity-60 transform translate-z-10 rotate-45"></div>
     <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-teal-400 dark:bg-teal-700 rounded-full mix-blend-multiply blur-sm opacity-60 transform translate-z-10 -rotate-30"></div>

  </div>
</div>