feat: Ajout de React pour le front, début de refonte du front

assets/react/app/presentation/components/MangaCard.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faStar } from '@fortawesome/free-solid-svg-icons';
+
+export function MangaCard({ manga, onClick }) {
+  return (
+    <div 
+      className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
+      onClick={() => onClick?.(manga.slug)}
+    >
+      <div className="relative h-64">
+        <img
+          src={manga.imageUrl || 'https://via.placeholder.com/300x400'}
+          alt={manga.title}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="text-lg font-semibold text-gray-800 mb-2">{manga.title}</h3>
+        <p className="text-sm text-gray-600 mb-2">By {manga.author}</p>
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-gray-500">{manga.publicationYear}</span>
+          {manga.rating && (
+            <span className="flex items-center text-yellow-500">
+              <FontAwesomeIcon icon={faStar} className="mr-1" />
+              {manga.rating}
+            </span>
+          )}
+        </div>
+        <div className="mt-2 flex flex-wrap gap-1">
+          {manga.genres.map((genre, index) => (
+            <span
+              key={index}
+              className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full"
+            >
+              {genre}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}