feat: add styles of page cart

templates/cart/index.html.twig

-{% extends 'base.html.twig' %}
+{% extends 'base.html.twig' %} {% block title %}Cart {% endblock %} {% block
+body %}
+<section>
+  <h3 class="font-bold text-5xl">Votre panier</h3>
 
-{% block title %}Cart index{% endblock %}
-
-{% block body %}
-    <h1>Cart index</h1>
-
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Id</th>
-                <th>Price_total</th>
-                <th>Quantity</th>
-                <th>actions</th>
-            </tr>
-        </thead>
-        <tbody>
-        {# {% for cart in carts %}
-            <tr>
-                <td>{{ cart.id }}</td>
-                <td>{{ cart.priceTotal }}</td>
-                <td>{{ cart.quantity }}</td>
-                <td>
-                    <a href="{{ path('app_cart_show', {'id': cart.id}) }}">show</a>
-                    <a href="{{ path('app_cart_edit', {'id': cart.id}) }}">edit</a>
-                </td>
-            </tr>
-        {% else %}
-            <tr>
-                <td colspan="4">no records found</td>
-            </tr>
-        {% endfor %} #}
-        {% for cart in carts %}
-        <tr>
-          <td>
+  <div class="flex flex-col my-12">
+    {% for cart in carts %}
+    <article class="border-t border-b py-4">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-6">
             {% for product in cart.getProductId() %}
-              {{ product.getTitle() }}<br>
+          <img class="w-[60px]" src="{{ asset(product.imageSrc) }}" alt="" />
+          <div>
+            <h4 class="text-lg">{{ product.getTitle() }}</h4>
+            <p class="text-sm font-light truncate text-ellipsis max-w-[30vw]">
+              {{ product.Description() }}
+            </p>
             {% endfor %}
-          </td>
-          <td>{{ cart.getQuantity() }}</td>
-          <td>{{ cart.getProductId().first().getPrice() }} €</td>
-          <td>{{ cart.getPriceTotal() }} €</td>
-        </tr>
-        {% endfor %}
-        
+          </div>
+        </div>
+        <div>
+          <span class="font-bold text-orange-500 text-lg">4 €</span>
+        </div>
+      </div>
+      <div class="flex gap-6 mt-6">
+        <a class="hover:text-orange-400 transition-colors" href="#">Voir</a>
+        <a class="text-red-500" href="#">Supprimer</a>
+      </div>
+    </article>
+    {% else %}
+    <p>Votre pannier est vide !</p>
+    {% endfor %}
+  </div>
 
-        </tbody>
-    </table>
+  <a href="#">Retour aux achats</a>
+</section>
+{% endblock %} {# {% extends 'base.html.twig' %} {% block title %}Cart index{%
+endblock %} {% block body %}
+<h1>Cart index</h1>
+
+<table class="table">
+  <thead>
+    <tr>
+      <th>Id</th>
+      <th>Price_total</th>
+      <th>Quantity</th>
+      <th>actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for cart in carts %}
+    <tr>
+      <td>{{ cart.id }}</td>
+      <td>{{ cart.priceTotal }}</td>
+      <td>{{ cart.quantity }}</td>
+      <td>
+        <a href="{{ path('app_cart_show', { id: cart.id }) }}">show</a>
+        <a href="{{ path('app_cart_edit', { id: cart.id }) }}">edit</a>
+      </td>
+    </tr>
+    {% else %}
+    <tr>
+      <td colspan="4">no records found</td>
+    </tr>
+    {% endfor %} {% for cart in carts %}
+    <tr>
+      <td>
+        {% for product in cart.getProductId() %}
+        {{ product.getTitle() }}<br />
+        {% endfor %}
+      </td>
+      <td>{{ cart.getQuantity() }}</td>
+      <td>{{ cart.getProductId().first().getPrice() }} €</td>
+      <td>{{ cart.getPriceTotal() }} €</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
 
-    <a href="{{ path('app_cart_new') }}">Create new</a>
-{% endblock %}
+<a href="{{ path('app_cart_new') }}">Create new</a>
+{% endblock %} #}