From 0b82696857222012b98e936e533940166d89389a Mon Sep 17 00:00:00 2001
From: Emma Fredriksen <emmafre@stud.ntnu.no>
Date: Thu, 15 Oct 2026 17:46:16 +0200
Subject: [PATCH 1/2] refactor: update artwork cards and connect gallery
 components

---
 frontend/src/App.tsx                    |  6 ++--
 frontend/src/components/ArtworkCard.css |  4 +--
 frontend/src/components/ArtworkCard.tsx | 38 +++++++++++--------------
 frontend/src/components/ArtworkGrid.css |  4 +--
 frontend/src/pages/Artworks.tsx         | 19 ++-----------
 5 files changed, 25 insertions(+), 46 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c30d37e..42fe42b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,6 @@
-
 import { Routes, Route } from "react-router-dom";
-import './index.css'
-import HomePage from './pages/HomePage'
+import "./index.css";
+import HomePage from "./pages/HomePage";
 import Login from "./pages/login";
 import Artworks from "./pages/Artworks";
 
@@ -9,6 +8,7 @@ function App() {
   return (
     <Routes>
       <Route path="/" element={<HomePage />} />
+      <Route path="/lol" element={<Artworks />} />
       <Route path="/login" element={<Login />} />
     </Routes>
   );
diff --git a/frontend/src/components/ArtworkCard.css b/frontend/src/components/ArtworkCard.css
index 737ab3f..a257081 100644
--- a/frontend/src/components/ArtworkCard.css
+++ b/frontend/src/components/ArtworkCard.css
@@ -11,7 +11,7 @@
 .artwork-card__image,
 .artwork-card__placeholder {
   display: block;
-  width: 100%;
+  width: 60rem;
   aspect-ratio: 4 / 5;
 }
 
@@ -38,4 +38,4 @@
   margin: 0;
   color: #595959;
   overflow-wrap: anywhere;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/ArtworkCard.tsx b/frontend/src/components/ArtworkCard.tsx
index 897e1c8..bf0aebd 100644
--- a/frontend/src/components/ArtworkCard.tsx
+++ b/frontend/src/components/ArtworkCard.tsx
@@ -1,20 +1,16 @@
-import { useState } from 'react'
-import type { Artwork } from '../types/Artwork'
-import './ArtworkCard.css'
+import { useState } from "react";
+import type { Artwork } from "../types/Artwork";
+import "./ArtworkCard.css";
 
 type ArtworkCardProps = {
-  artwork: Artwork
-}
+  artwork: Artwork;
+};
 
 function ArtworkImage({ src, alt }: { src: string; alt: string }) {
-  const [hasError, setHasError] = useState(false)
+  const [hasError, setHasError] = useState(false);
 
   if (hasError) {
-    return (
-      <div className="artwork-card__placeholder">
-        Image unavailable
-      </div>
-    )
+    return <div className="artwork-card__placeholder">Image unavailable</div>;
   }
 
   return (
@@ -25,28 +21,26 @@ function ArtworkImage({ src, alt }: { src: string; alt: string }) {
       loading="lazy"
       onError={() => setHasError(true)}
     />
-  )
+  );
 }
 
 export default function ArtworkCard({ artwork }: ArtworkCardProps) {
-  const artist = artwork.artist?.trim() || 'Unknown artist'
+  const artist = artwork.artist_display?.trim() || "Unknown artist";
 
   return (
     <article className="artwork-card">
-      {artwork.imageUrl ? (
+      {artwork.image_url ? (
         <ArtworkImage
-          key={artwork.imageUrl}
-          src={artwork.imageUrl}
-          alt={artwork.imageAlt || `${artwork.title} by ${artist}`}
+          key={artwork.image_url}
+          src={artwork.image_url}
+          alt={artwork.image_url || `${artwork.title} by ${artist}`}
         />
       ) : (
-        <div className="artwork-card__placeholder">
-          Image unavailable
-        </div>
+        <div className="artwork-card__placeholder">Image unavailable</div>
       )}
 
       <h3 className="artwork-card__title">{artwork.title}</h3>
       <p className="artwork-card__artist">{artist}</p>
     </article>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/frontend/src/components/ArtworkGrid.css b/frontend/src/components/ArtworkGrid.css
index 904c56e..b157926 100644
--- a/frontend/src/components/ArtworkGrid.css
+++ b/frontend/src/components/ArtworkGrid.css
@@ -3,7 +3,7 @@
   grid-template-columns: minmax(0, 1fr);
   align-items: start;
   gap: 20px;
-  margin: 0;
+  margin: 2rem 2rem;
   padding: 0;
   list-style: none;
 }
@@ -16,4 +16,4 @@
   .artwork-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/Artworks.tsx b/frontend/src/pages/Artworks.tsx
index 591bb6a..893a037 100644
--- a/frontend/src/pages/Artworks.tsx
+++ b/frontend/src/pages/Artworks.tsx
@@ -1,3 +1,4 @@
+import ArtworkGrid from "../components/ArtworkGrid";
 import { useArtworks } from "../hooks/useArtworks";
 
 export default function Artworks() {
@@ -10,23 +11,7 @@ export default function Artworks() {
     <div>
       <h1>Artex gallery</h1>
       <p>Number of artworks: {artworks.length}</p>
-      <div>
-        {artworks.map((artwork) => (
-          <div key={artwork.id}>
-            <h2>{artwork.title}</h2>
-            <p>{artwork.artist_display || "Unknown artist"}</p>
-
-            {artwork.image_url && (
-              <img
-                src={artwork.image_url}
-                alt={artwork.title}
-                loading="lazy"
-                width={300}
-              />
-            )}
-          </div>
-        ))}
-      </div>
+      <ArtworkGrid artworks={artworks} />
     </div>
   );
 }

From d445cbc50e9e6fa1ebcf29a48d147f3515716a4d Mon Sep 17 00:00:00 2001
From: Emma Fredriksen <emmafre@stud.ntnu.no>
Date: Thu, 15 Oct 2026 18:31:30 +0200
Subject: [PATCH 2/2] chore: structure webpage and tweak styling

---
 frontend/src/App.tsx                    |  2 --
 frontend/src/components/ArtworkCard.css |  2 +-
 frontend/src/components/ArtworkGrid.css | 12 +++++++-----
 frontend/src/components/Hero.tsx        | 20 +++++++++++---------
 frontend/src/pages/Artworks.tsx         | 17 -----------------
 frontend/src/pages/HomePage.tsx         | 12 +++++++++---
 6 files changed, 28 insertions(+), 37 deletions(-)
 delete mode 100644 frontend/src/pages/Artworks.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 42fe42b..6f4191d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,13 +2,11 @@ import { Routes, Route } from "react-router-dom";
 import "./index.css";
 import HomePage from "./pages/HomePage";
 import Login from "./pages/login";
-import Artworks from "./pages/Artworks";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<HomePage />} />
-      <Route path="/lol" element={<Artworks />} />
       <Route path="/login" element={<Login />} />
     </Routes>
   );
diff --git a/frontend/src/components/ArtworkCard.css b/frontend/src/components/ArtworkCard.css
index a257081..6da270d 100644
--- a/frontend/src/components/ArtworkCard.css
+++ b/frontend/src/components/ArtworkCard.css
@@ -11,7 +11,7 @@
 .artwork-card__image,
 .artwork-card__placeholder {
   display: block;
-  width: 60rem;
+  width: 100%;
   aspect-ratio: 4 / 5;
 }
 
diff --git a/frontend/src/components/ArtworkGrid.css b/frontend/src/components/ArtworkGrid.css
index b157926..e1cd20f 100644
--- a/frontend/src/components/ArtworkGrid.css
+++ b/frontend/src/components/ArtworkGrid.css
@@ -1,11 +1,13 @@
 .artwork-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: start;
-  gap: 20px;
-  margin: 2rem 2rem;
-  padding: 0;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
+  gap: 24px;
+
+  justify-content: center;
+
   list-style: none;
+  padding: 0;
+  margin: 5rem 2rem 5rem 2rem;
 }
 
 .artwork-grid > li {
diff --git a/frontend/src/components/Hero.tsx b/frontend/src/components/Hero.tsx
index 38d3c00..8eecfb6 100644
--- a/frontend/src/components/Hero.tsx
+++ b/frontend/src/components/Hero.tsx
@@ -10,7 +10,7 @@ function Hero() {
         to="/login"
         aria-label="Open login"
         className="absolute left-10 top-15 text-gray-300 hover:text-gray-500"
-        >
+      >
         <CircleUserRound size={34} strokeWidth={1.5} />
       </Link>
 
@@ -18,25 +18,27 @@ function Hero() {
         <h1 className="font-serif text-5xl sm:text-6xl leading-tight">Artex</h1>
 
         <p className="mt-8 font-serif text-base leading-7 text-gray-700 sm:text-lg sm:leading-8">
-          Explore thousands of artworks in the Art Institute of Chiacago’s collection. From their renowned icons to lesser known works from every corner of the globe. 
+          Explore thousands of artworks in the Metropolitan Museum´s collection.
+          From their renowned icons to lesser known works from every corner of
+          the globe.
         </p>
       </div>
 
       <div className="relative hidden min-h-88 w-full items-center justify-center min-[1000px]:flex min-[1000px]:flex-1 lg:min-h-136 lg:justify-end">
         <img
-            src={heroImageBack}
-            alt=""
-            className="absolute left-1/2 top-1/2 hidden w-[88%] max-w-2xl -translate-x-1/2 -translate-y-1/2 object-contain lg:block"
+          src={heroImageBack}
+          alt=""
+          className="absolute left-1/2 top-1/2 hidden w-[88%] max-w-2xl -translate-x-1/2 -translate-y-1/2 object-contain lg:block"
         />
 
         <img
-            src={heroImageFront}
-            alt="Featured artwork"
-            className="absolute left-1/2 top-1/2 hidden w-[72%] max-w-xl -translate-x-1/2 -translate-y-1/2 object-contain min-[1000px]:block min-w-[320px]"
+          src={heroImageFront}
+          alt="Featured artwork"
+          className="absolute left-1/2 top-1/2 hidden w-[72%] max-w-xl -translate-x-1/2 -translate-y-1/2 object-contain min-[1000px]:block min-w-[320px]"
         />
       </div>
     </section>
   );
 }
 
-export default Hero;
\ No newline at end of file
+export default Hero;
diff --git a/frontend/src/pages/Artworks.tsx b/frontend/src/pages/Artworks.tsx
deleted file mode 100644
index 893a037..0000000
--- a/frontend/src/pages/Artworks.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import ArtworkGrid from "../components/ArtworkGrid";
-import { useArtworks } from "../hooks/useArtworks";
-
-export default function Artworks() {
-  const { artworks, loading, error } = useArtworks();
-
-  if (loading) return <p>Loading artworks...</p>;
-  if (error) return <p>Error: {error}</p>;
-
-  return (
-    <div>
-      <h1>Artex gallery</h1>
-      <p>Number of artworks: {artworks.length}</p>
-      <ArtworkGrid artworks={artworks} />
-    </div>
-  );
-}
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index a6679ff..698d708 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,11 +1,17 @@
+import ArtworkGrid from "../components/ArtworkGrid";
 import Hero from "../components/Hero";
+import { useArtworks } from "../hooks/useArtworks";
+
+export default function HomePage() {
+  const { artworks, loading, error } = useArtworks();
+
+  if (loading) return <p>Loading artworks...</p>;
+  if (error) return <p>Error: {error}</p>;
 
-function HomePage() {
   return (
     <main>
       <Hero />
+      <ArtworkGrid artworks={artworks} />
     </main>
   );
 }
-
-export default HomePage;
\ No newline at end of file