From 696b941809e2159107f4e1879bda5bc245b2a69b Mon Sep 17 00:00:00 2001
From: Roderick Leito <roderick.leito@gmail.com>
Date: Fri, 12 Sep 2025 15:59:15 +0200
Subject: [PATCH] Finished Core

---
 src/sections/Art/index.jsx   | 36 +++++++++++++++++++++++++++++++++++-
 src/sections/Users/index.jsx | 26 +++++++++++++++++++++++++-
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/sections/Art/index.jsx b/src/sections/Art/index.jsx
index 0c74ffc2..934e142d 100644
--- a/src/sections/Art/index.jsx
+++ b/src/sections/Art/index.jsx
@@ -1,8 +1,42 @@
+import { useEffect, useState } from "react"
+
 function ArtsSection() {
+  const [arts, setArts] = useState([]);
+  const url = "https://boolean-uk-api-server.fly.dev/art";
+  const baseUrl = "https://boolean-uk-api-server.fly.dev";
+
+  useEffect(() => {
+    fetch(url)
+    .then(res => res.json())
+    .then(setArts)
+  }, []);
+
   return (
     <section>
       <h2>Arts Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ul className="art-list">
+          {arts.map(art =>
+            <li key={art.id}>
+              <div className="frame">
+                <img src = {`${baseUrl}/${art.imageURL}`} alt={art.title}>
+                </img>
+              </div>
+              <h3>{art.title}</h3>
+              <p>Artist: {art.artist}</p>
+              <h4>Publication History:</h4>
+              <ul>
+                {art.publicationHistory.map((publication, index) =>
+                  <li key={index}>
+                    {publication}
+                  </li>
+                )
+                }
+              </ul>
+            </li>
+          )}
+        </ul>
+      </div>
     </section>
   )
 }
diff --git a/src/sections/Users/index.jsx b/src/sections/Users/index.jsx
index 77332830..b579dcca 100644
--- a/src/sections/Users/index.jsx
+++ b/src/sections/Users/index.jsx
@@ -1,8 +1,32 @@
+import { useState, useEffect } from "react"
+
 function UsersSection() {
+  const [users, setUsers] = useState([]);
+  const url = "https://boolean-uk-api-server.fly.dev/RoderickLei/contact";
+
+  useEffect(() => {
+    fetch(url)
+    .then(res => res.json())
+    .then(setUsers)
+  }, []);
+
   return (
     <section>
       <h2>Users Section</h2>
-      <div className="scroll-container"></div>
+      <div className="scroll-container">
+        <ul className="users-list">
+          {users.map(user =>
+            <li key={user.id} style={{background: "#0d7f26"}}>
+              <img
+                src={`${user.profileImage}`}
+                alt={`${user.firstName} ${user.lastName}`}
+              />
+              <h3>{user.firstName} {user.lastName}</h3>
+              <p>{user.email}</p>
+            </li>
+          )}
+        </ul>
+      </div>
     </section>
   )
 }