Removed addresses, adjusted contact page

web/app/contact/page.js

@@ -1,31 +1,24 @@
-const LOCATIONS = [
-  {
-    name: "Downtown Branch",
-    address: "123 Main St",
-    phone: "(123) 456-7890",
-    email: "downtown@petshop.com",
-  },
-  {
-    name: "North Branch",
-    address: "456 North Ave",
-    phone: "(987) 654-3210",
-    email: "north@petshop.com",
-  },
-  {
-    name: "West Side Store",
-    address: "789 West Blvd",
-    phone: "(555) 123-4567",
-    email: "westside@petshop.com",
-  },
-];
+"use client";
 
-const PERSONNEL = [
-  { name: "John Doe", role: "Store Manager" },
-  { name: "Sara Smith", role: "Staff" },
-  { name: "Michael Johnson", role: "Grooming Team" },
-];
+import { useState, useEffect } from "react";
 
 export default function ContactPage() {
+  const [locations, setLocations] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const params = new URLSearchParams({ page: "0", size: "100", sort: "storeName,asc" });
+    fetch(`/api/v1/stores?${params}`)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((data) => setLocations(data.content ?? []))
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, []);
+
   return (
     <main className="info-page">
       <section className="info-hero">
@@ -44,28 +37,40 @@ export default function ContactPage() {
 
         <div className="info-card">
           <h2>Store Locations</h2>
-          <div className="info-card-grid">
-            {LOCATIONS.map((location) => (
-              <article key={location.name} className="info-mini-card">
-                <h3>{location.name}</h3>
-                <p>{location.address}</p>
-                <p>{location.phone}</p>
-                <p>{location.email}</p>
-              </article>
-            ))}
-          </div>
-        </div>
 
-        <div className="info-card">
-          <h2>Store Personnel</h2>
-          <div className="info-card-grid">
-            {PERSONNEL.map((person) => (
-              <article key={person.name} className="info-mini-card">
-                <h3>{person.name}</h3>
-                <p>{person.role}</p>
-              </article>
-            ))}
-          </div>
+          {loading && <p>Loading locations...</p>}
+
+          {error && <p style={{ color: "red" }}>Failed to load locations: {error}</p>}
+
+          {!loading && !error && locations.length === 0 && (
+            <p>No store locations found.</p>
+          )}
+
+          {!loading && !error && locations.length > 0 && (
+            <div className="info-card-grid">
+              {locations.map((location) => (
+                <article key={location.storeId} className="info-mini-card location-card">
+                  <div className="location-card-image-wrapper">
+                    <img
+                      src={location.imageUrl || "/images/pet-placeholder.png"}
+                      alt={location.storeName}
+                      className="location-card-image"
+                      onError={(e) => {
+                        e.currentTarget.onerror = null;
+                        e.currentTarget.src = "/images/pet-placeholder.png";
+                      }}
+                    />
+                  </div>
+                  <div className="location-card-body">
+                    <h3>{location.storeName}</h3>
+                    <p>{location.address}</p>
+                    <p>{location.phone}</p>
+                    <p>{location.email}</p>
+                  </div>
+                </article>
+              ))}
+            </div>
+          )}
         </div>
       </section>
     </main>

web/app/globals.css

@@ -38,7 +38,7 @@ body {
   align-items: center;
   flex-wrap: wrap;
   min-height: 70px;
-  border-radius: 0px 0px 10px 10px;
+  /* border-radius: 0px 0px 10px 10px; */
 }
 
 /* Add padding to body to account for fixed header */
@@ -758,6 +758,39 @@ body {
   margin-bottom: 0.5rem;
 }
 
+.location-card {
+  padding: 0;
+  overflow: hidden;
+}
+
+.location-card-image-wrapper {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: #eee;
+}
+
+.location-card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.location-card-body {
+  padding: 1rem;
+}
+
+.location-card-body h3 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.location-card-body p {
+  margin: 0.25rem 0;
+  font-size: 0.9rem;
+  color: #555;
+}
+
 .products-hero {
   text-align: center;
   padding: 4rem 2rem 3rem;