Adopt page, minor adjustment to backend

web/components/Navigation.js

@@ -15,7 +15,7 @@ export default function DisplayNav() {
   
   <div className="nav-links">
     <a href="/" className="nav-link">Home</a>
-    <a href="/pets" className="nav-link">Adopt a Pet</a>
+    <a href="/adopt" className="nav-link">Adopt a Pet</a>
     <a href="/" className="nav-link">Online Store</a>
     <a href="/appointments" className="nav-link">Schedule an Appointment</a>
     <a href="/contact" className="nav-link">Contact Us</a>

web/components/PetCard.js

@@ -0,0 +1,21 @@
+//Pet cards (on adopt page)
+
+import Link from "next/link";
+import { getSpeciesEmoji, getStatusClass } from "@/components/petUtils";
+
+export default function PetCard({petId, petName, petSpecies, petStatus}) {
+  return (
+    <Link href={`/adopt/${petId}`} className="pet-card">
+      <div className="pet-card-image-wrapper">
+        <span className="pet-card-emoji">{getSpeciesEmoji(petSpecies)}</span>
+      </div>
+      <div className="pet-card-body">
+        <h3 className="pet-card-name">{petName}</h3>
+        <p className="pet-card-species">{petSpecies}</p>
+        <span className={`pet-card-status ${getStatusClass(petStatus)}`}>
+          {petStatus}
+        </span>
+      </div>
+    </Link>
+  );
+}

web/components/PetProfile.js

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { getSpeciesEmoji, getStatusClass } from "@/components/petUtils";
+
+export default function PetProfile({ petName, petSpecies, petBreed, petAge, petStatus, petPrice }) {
+  return (
+    <div className="pet-detail-card">
+      <div className="pet-detail-image-wrapper">
+        <span className="pet-detail-emoji">{getSpeciesEmoji(petSpecies)}</span>
+      </div>
+
+      <div className="pet-detail-info">
+        <div className="pet-detail-header">
+          <h1 className="pet-detail-name">{petName}</h1>
+          <span className={`pet-card-status ${getStatusClass(petStatus)}`}>
+            {petStatus}
+          </span>
+        </div>
+
+        <div className="pet-detail-fields">
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Species</span>
+            <span className="pet-detail-value">{petSpecies ?? "—"}</span>
+          </div>
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Breed</span>
+            <span className="pet-detail-value">{petBreed ?? "—"}</span>
+          </div>
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Age</span>
+            <span className="pet-detail-value">
+              {petAge != null ? `${petAge} ${petAge === 1 ? "year" : "years"}` : "—"}
+            </span>
+          </div>
+          <div className="pet-detail-row">
+            <span className="pet-detail-label">Adoption Fee</span>
+            <span className="pet-detail-value pet-detail-price">
+              {petPrice != null ? `$${parseFloat(petPrice).toFixed(2)}` : "—"}
+            </span>
+          </div>
+        </div>
+
+        {/* Status */}
+        {petStatus?.toLowerCase() === "available" && (
+          <div className="pet-detail-cta">
+            <p className="pet-detail-cta-text">
+              Interested in adopting {petName}? Visit us in store or schedule an appointment.
+            </p>
+            <Link href="/appointments" className="pet-detail-cta-btn">
+              Schedule an Appointment
+            </Link>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

web/components/petUtils.js

@@ -0,0 +1,54 @@
+
+//Temporary, until image support is added
+export const SPECIES_EMOJI = {
+  dog: "🐶",
+  cat: "🐱",
+  bird: "🐦",
+  rabbit: "🐰",
+  hamster: "🐹",
+  fish: "🐟",
+  turtle: "🐢",
+  snake: "🐍",
+  lizard: "🦎",
+  guinea: "🐹",
+};
+
+export function getSpeciesEmoji(species) {
+  if (!species) {
+
+    return "🐾";
+  }
+
+  const key = species.toLowerCase();
+
+  for (const [k, v] of Object.entries(SPECIES_EMOJI)) {
+    if (key.includes(k)) {
+      
+      return v;
+    }
+  }
+
+  return "🐾";
+}
+
+export function getStatusClass(status) {
+  if (!status) {
+    return "";
+  }
+
+  const s = status.toLowerCase();
+
+  if (s === "available") {
+    return "status-available";
+  }
+
+  if (s === "adopted") {
+    return "status-adopted";
+  }
+
+  if (s === "pending") {
+    return "status-pending";
+  }
+
+  return "status-other";
+}