Composant de mise en page du tableau de bord de livraison de nourriture

<div class="min-h-screen bg-gray-950 text-gray-100 dark:bg-gray-950 dark:text-gray-100 transition-colors duration-300 font-sans">
  <div class="flex flex-col lg:flex-row min-h-screen">

    <!-- Sidebar -->
    <aside class="w-full lg:w-64 bg-gray-900 border-b border-gray-800 lg:border-r lg:border-b-0 border-pink-600/30 lg:border-pink-600/30 p-4 flex flex-col flex-shrink-0 dark:bg-gray-900 dark:border-gray-800 dark:border-pink-600/30 transition-colors duration-300">
      <div class="flex items-center justify-between lg:justify-start mb-6">
        <h1 class="text-2xl font-extrabold text-pink-500 tracking-wider">FoodieDash</h1>
        <button class="lg:hidden text-gray-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-md p-1 invert dark:invert-0">
          <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>
      </div>
      <nav class="flex flex-col space-y-3">
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium bg-pink-600 text-white shadow-lg shadow-pink-500/30 hover:bg-pink-700 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          Orders
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
          Menu Items
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.195-1.264-.544-1.76M7 20v-2a3 3 0 015.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M12 18a6 6 0 100-12 6 6 0 000 12z"></path></svg>
          Customers
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          Settings
        </a>
      </nav>

      <div class="mt-auto pt-6 border-t border-gray-800 border-pink-600/30 flex items-center justify-between">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-mint-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div class="flex flex-col">
            <span class="text-sm font-semibold text-gray-200">Jane Doe</span>
            <span class="text-xs text-gray-400">Admin</span>
          </div>
        </div>
        <button class="text-gray-400 hover:text-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-md p-1 transform hover:scale-110 transition-transform duration-200">
          <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        </button>
      </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col overflow-hidden">

      <!-- Top Header -->
      <header class="flex items-center justify-between p-4 bg-gray-900 border-b border-gray-800 border-mint-600/30 shadow-md dark:bg-gray-900 dark:border-gray-800 dark:border-mint-600/30 transition-colors duration-300 z-10">
        <div class="relative w-full max-w-md mx-auto lg:mx-0">
          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
            </svg>
          </span>
          <input type="text" placeholder="Search for food, orders, customers..." class="w-full py-2 pl-10 pr-4 rounded-xl bg-gray-800 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-transparent transition-all duration-200">
        </div>
        <div class="flex items-center space-x-4 ml-4">
          <button class="p-2 text-gray-400 hover:text-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
            <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 17h.01M12 21v-4m0 0V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7m-7 7l4 4m0 0l4-4"></path></svg>
          </button>
          <button class="p-2 text-gray-400 hover:text-mint-400 focus:outline-none focus:ring-2 focus:ring-mint-500 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
            <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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path></svg>
          </button>
        </div>
      </header>

      <!-- Main Content -->
      <main class="flex-1 overflow-x-hidden overflow-y-auto p-4 md:p-6 bg-gray-950 dark:bg-gray-950 transition-colors duration-300">

        <h2 class="text-3xl font-extrabold text-pink-400 mb-6">Dashboard Overview</h2>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">Total Orders</p>
              <p class="text-4xl font-bold text-mint-400">1,234</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">+12% from last month</span>
          </div>
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">Revenue</p>
              <p class="text-4xl font-bold text-pink-400">$87,654</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">+8% from last month</span>
          </div>
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">New Customers</p>
              <p class="text-4xl font-bold text-sky-400">234</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">+5% from last month</span>
          </div>
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">Pending Orders</p>
              <p class="text-4xl font-bold text-orange-400">47</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">Needs attention</span>
          </div>
        </div>

        <!-- Recent Orders & Top Selling Items -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          <!-- Recent Orders -->
          <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
            <h3 class="text-xl font-bold text-mint-400 mb-4">Recent Orders</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full text-left text-gray-300">
                <thead>
                  <tr class="border-b border-gray-700 text-gray-500">
                    <th class="py-2 px-3">Order ID</th>
                    <th class="py-2 px-3">Customer</th>
                    <th class="py-2 px-3">Amount</th>
                    <th class="py-2 px-3">Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8765</td>
                    <td class="py-3 px-3">Alice Smith</td>
                    <td class="py-3 px-3 text-pink-400">$45.00</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-mint-600/20 text-mint-400">Delivered</span>
                    </td>
                  </tr>
                  <tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8764</td>
                    <td class="py-3 px-3">Bob Johnson</td>
                    <td class="py-3 px-3 text-pink-400">$32.50</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-sky-600/20 text-sky-400">Processing</span>
                    </td>
                  </tr>
                  <tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8763</td>
                    <td class="py-3 px-3">Charlie Brown</td>
                    <td class="py-3 px-3 text-pink-400">$60.00</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-600/20 text-orange-400">Pending</span>
                    </td>
                  </tr>
                  <tr class="hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8762</td>
                    <td class="py-3 px-3">Diana Prince</td>
                    <td class="py-3 px-3 text-pink-400">$28.75</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-mint-600/20 text-mint-400">Delivered</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- Top Selling Items -->
          <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
            <h3 class="text-xl font-bold text-pink-400 mb-4">Top Selling Items</h3>
            <ul class="space-y-4">
              <li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
                <img src="https://picsum.photos/80/80?random=1" alt="Spicy Thai Noodles" class="w-16 h-16 object-cover rounded-md border border-gray-700">
                <div>
                  <p class="font-semibold text-white">Spicy Thai Noodles</p>
                  <p class="text-sm text-gray-400">150 Orders</p>
                  <p class="text-md text-mint-400 font-bold">$14.99</p>
                </div>
              </li>
              <li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
                <img src="https://picsum.photos/80/80?random=2" alt="Classic Cheeseburger" class="w-16 h-16 object-cover rounded-md border border-gray-700">
                <div>
                  <p class="font-semibold text-white">Classic Cheeseburger</p>
                  <p class="text-sm text-gray-400">120 Orders</p>
                  <p class="text-md text-mint-400 font-bold">$12.50</p>
                </div>
              </li>
              <li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
                <img src="https://picsum.photos/80/80?random=3" alt="Vegan Buddha Bowl" class="w-16 h-16 object-cover rounded-md border border-gray-700">
                <div>
                  <p class="font-semibold text-white">Vegan Buddha Bowl</p>
                  <p class="text-sm text-gray-400">98 Orders</p>
                  <p class="text-md text-mint-400 font-bold">$13.00</p>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- Quick Actions -->
        <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20 mb-8">
          <h3 class="text-xl font-bold text-sky-400 mb-4">Quick Actions</h3>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-pink-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-pink-400 group-hover:text-white transition-colors duration-200" 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 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">Add New Item</span>
            </button>
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-mint-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-mint-400 group-hover:text-white transition-colors duration-200" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">View All Orders</span>
            </button>
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-orange-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-orange-400 group-hover:text-white transition-colors duration-200" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">Manage Categories</span>
            </button>
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-sky-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-sky-400 group-hover:text-white transition-colors duration-200" 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>
              <span class="text-gray-200 font-medium group-hover:text-white">Send Notification</span>
            </button>
          </div>
        </div>

        <!-- Customer Reviews (Example Section) -->
        <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
          <h3 class="text-xl font-bold text-mint-400 mb-4">Latest Customer Reviews</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-800 rounded-lg p-4 flex items-start space-x-4 shadow-md shadow-gray-700/20">
              <img class="w-12 h-12 rounded-full border-2 border-pink-400 flex-shrink-0" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Customer Avatar">
              <div class="flex-1">
                <h4 class="font-semibold text-white">John Davis</h4>
                <div class="flex items-center text-yellow-400 text-sm mb-1">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                </div>
                <p class="text-gray-300 text-sm">"Great food and fast delivery! Highly recommend the pasta."</p>
                <p class="text-xs text-gray-500 mt-2">2 days ago</p>
              </div>
            </div>
            <div class="bg-gray-800 rounded-lg p-4 flex items-start space-x-4 shadow-md shadow-gray-700/20">
              <img class="w-12 h-12 rounded-full border-2 border-mint-400 flex-shrink-0" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar">
              <div class="flex-1">
                <h4 class="font-semibold text-white">Emily White</h4>
                <div class="flex items-center text-yellow-400 text-sm mb-1">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                </div>
                <p class="text-gray-300 text-sm">"The delivery was a bit slow, but the pizza was delicious!"</p>
                <p class="text-xs text-gray-500 mt-2">4 days ago</p>
              </div>
            </div>
          </div>
        </div>

      </main>
    </div>

  </div>
</div>