Enhance movie cards: add Japanese title,image,director, and short description

Author: AyushGupta011

src/components/Card.jsx

@@ -1,7 +1,15 @@
-export default function Card({ title, children, footer }) {
+export default function Card({ title,japaneseTitle,image, children, footer }) {
   return (
     <div className="card">
+      {image && (
+        <img
+          src={image}
+          alt={title}
+          className="w-full h-64 object-cover"
+        />
+      )}
       {title && <h3>{title}</h3>}
+         {japaneseTitle && <p className="text-sm italic text-gray-500 dark:text-gray-300">{japaneseTitle}</p>}
       <div className="card-body">{children}</div>
       {footer && <div className="card-footer">{footer}</div>}
     </div>

src/pages/Movies.jsx

@@ -50,7 +50,7 @@ export default function Movies() {
       <ErrorMessage error={error} />
       <div className="grid">
         {filtered.map(f => (
-          <Card key={f.id} title={`${f.title} (${f.release_date})`}>
+          <Card key={f.id}  title={`${f.title} (${f.release_date})`} japaneseTitle={f.original_title} image={f.image}>
             <p><strong>Director:</strong> {f.director}</p>
             <p>{f.description.slice(0,120)}...</p>
             {/* TODO: Add poster images (need mapping) */}