Componenti Recensioni dei prodotti Recensioni prodotto Skeuomorphic Componente - Blu oceano
Recensioni prodotto Skeuomorphic Componente - Blu oceano

Un componente di revisione del prodotto di complessità moderata progettato con uno stile scheumorfico, che utilizza i toni dell'oceano/blu per scopi aziendali/aziendali. È dotato di un design reattivo, supporto per la modalità oscura ed elementi interattivi.
Anteprima

Codice HTML

<div class="font-sans antialiased bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">

  <!-- Reviews Container -->
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-blue-200 to-blue-300 dark:from-gray-700 dark:to-gray-700 shadow-neu dark:shadow-neu-dark rounded-xl p-6 sm:p-8 lg:p-10 border-t border-l border-blue-100 dark:border-gray-600 relative overflow-hidden">
    <div class="absolute inset-0 bg-blue-300 dark:bg-gray-800 opacity-20 dark:opacity-10 rounded-xl pointer-events-none"></div>

    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center drop-shadow-md relative z-10">
      What Our Customers Say
    </h2>

    <!-- Overall Rating Section -->
    <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 mb-8 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700 relative z-10">
      <div class="flex flex-col sm:flex-row items-center justify-between">
        <div class="text-center sm:text-left mb-4 sm:mb-0">
          <p class="text-6xl font-bold text-blue-800 dark:text-blue-200">4.8</p>
          <div class="flex justify-center sm:justify-start mt-1">
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
          </div>
          <p class="text-blue-700 dark:text-blue-300 text-sm mt-1">(Based on 2,543 reviews)</p>
        </div>
        <button class="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full shadow-md neumorph-btn dark:neumorph-btn-dark active:scale-95 transition-all duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg>
          <span>Write a Review</span>
        </button>
      </div>
    </div>

    <!-- Review List -->
    <div class="space-y-6 relative z-10">

      <!-- Review Item 1 -->
      <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
        <div class="flex items-center mb-3">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="ml-4">
            <p class="font-semibold text-blue-900 dark:text-blue-100">John Doe</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 text-yellow-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"Absolutely stellar service!"</h3>
        <p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
          I was thoroughly impressed with the professionalism and efficiency. The product exceeded my expectations and functionality is truly top-notch. Highly recommended for any business looking to enhance their operations.
        </p>
        <p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on January 15, 2024</p>
      </div>

      <!-- Review Item 2 -->
      <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
        <div class="flex items-center mb-3">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="ml-4">
            <p class="font-semibold text-blue-900 dark:text-blue-100">Jane Smith</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"A game changer for our team!"</h3>
        <p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
          The customer support was responsive and helpful, guiding us through setup seamlessly. This product has significantly improved our workflow and team collaboration. We couldn't be happier with our investment.
        </p>
        <p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on February 01, 2024</p>
      </div>

      <!-- Review Item 3 -->
      <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
        <div class="flex items-center mb-3">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
          <div class="ml-4">
            <p class="font-semibold text-blue-900 dark:text-blue-100">Emily White</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.165 2.508c-.282-.877-1.564-.877-1.846 0l-1.09 3.376a1 1 0 01-.97.7h-3.56c-.958 0-1.353 1.24.57 1.81l2.88 2.09c.31.226.467.625.352 1.01l-1.09 3.377c-.282.877.747 1.6.973 1.01l2.88-2.09c.31-.226.744-.226 1.054 0l2.88 2.09c.226.59.973-.133.691-1.01l-1.09-3.377a1 1 0 01.352-1.01l2.88-2.09c1.923-.57.928-1.81-.352-1.81h-3.56a1 1 0 01-.97-.7l-1.09-3.376z" clip-rule="evenodd" /></svg>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"Very pleased with this purchase!"</h3>
        <p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
          The product seamlessly integrates with our existing systems, and the learning curve was minimal. It's a robust solution that delivers on its promises. Our team's productivity has noticeably increased.
        </p>
        <p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on February 10, 2024</p>
      </div>

    </div>
  </div>

  <!-- Custom Styles for Skeuomorphism -->
  <style>
    .shadow-neu {
      box-shadow: 8px 8px 16px #9ecbf2, -8px -8px 16px #d8f1ff;
    }
    .shadow-neu-dark {
      box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
    }
    .shadow-inner-neu {
      box-shadow: inset 5px 5px 10px #b1d8f7, inset -5px -5px 10px #e1f4ff;
    }
    .shadow-inner-neu-dark {
      box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
    }
    .neumorph-btn {
        box-shadow: 4px 4px 8px rgba(0,0,0,0.2), -4px -4px 8px rgba(255,255,255,0.7),
                    inset 0.5px 0.5px 1px rgba(255,255,255,0.5), inset -0.5px -0.5px 1px rgba(0,0,0,0.1);
    }
    .neumorph-btn-dark {
        box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #525252,
                    inset 0.5px 0.5px 1px rgba(255,255,255,0.1), inset -0.5px -0.5px 1px rgba(0,0,0,0.3);
    }
    .neumorph-btn:active {
        box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2), inset -4px -4px 8px rgba(255,255,255,0.7),
                    0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,0,0,0);
    }
    .neumorph-btn-dark:active {
        box-shadow: inset 4px 4px 8px #2a2a2a, inset -4px -4px 8px #525252,
                    0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,0,0,0);
    }
  </style>

  <!-- You can add a dark mode toggle script if needed, here's a placeholder comment -->
  <!-- <script>
    // Example Toggle Script (requires some JS, not part of the HTML-only output)
    document.documentElement.classList.toggle('dark');
  </script> -->

</div>
Componenti correlati

Componente delle recensioni dei prodotti

Un componente reattivo per le recensioni dei prodotti con un design industriale delle materie prime, una tavolozza di colori retrò/vintage tenui e il supporto della modalità scura, adatto per applicazioni meteorologiche/climatiche.
Aperto
Componente delle recensioni dei prodotti

Un componente minimalista per le recensioni dei prodotti progettato per le interfacce dei social media, che integra una combinazione di colori triadica ed elementi interattivi.
Aperto
Componente delle recensioni dei prodotti

Un componente minimalista per le recensioni dei prodotti progettato utilizzando Tailwind CSS, con effetti reattivi e supporto per i temi scuri.
Aperto