Final frontend updates: profile page, full-width layout, pet details

frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

frontend/src/App.tsx

@@ -2,6 +2,9 @@ import { Routes, Route } from 'react-router-dom';
 import Home from "./pages/Home.tsx";
 import About from './pages/About';
 import NavBar from './components/NavBar';
+import PetProfile from './pages/PetProfile';
+
+
 
 function App() {
   return (
@@ -10,6 +13,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
+        <Route path="/pet-profile" element={<PetProfile />} />
       </Routes>
     </>
   );

frontend/src/components/NavBar.tsx

@@ -1,10 +1,20 @@
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
+import { FaHome, FaSearch, FaUser } from "react-icons/fa";
 
 export default function NavBar() {
   return (
-    <nav style={{ padding: '1rem', backgroundColor: '#eee' }}>
-      <Link to="/" style={{ marginRight: '1rem' }}>Home</Link>
-      <Link to="/about">About</Link>
+    <nav style={{
+      backgroundColor: "black",
+      padding: "1rem",
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: "1rem"
+    }}>
+      <Link to="/" style={{ color: "white" }}><FaHome /></Link>
+      <Link to="/search" style={{ color: "white" }}><FaSearch /></Link>
+      <Link to="/profile" style={{ color: "white" }}><FaUser /></Link>
+      <Link to="/pet-profile" style={{ color: "white" }}>Pet Profile</Link>
+
     </nav>
   );
 }

frontend/src/pages/Home.tsx

@@ -1,4 +1,63 @@
+import dogshakeImg from '../assets/dogshake.png';
+import dog2Img from '../assets/dog2.png';
+import catImg from '../assets/cat.png';
+import bird from '../assets/bird.png';
+import turtle from '../assets/turtle.png';
+import doggo from '../assets/puppy.png';
+
 export default function Home() {
-    return <h2>Welcome to the Home Page!</h2>;
-  }
-
+  return (
+    <div style={{ backgroundColor: "#b4a48f", minHeight: "100vh", width: "100vw", overflowX: "hidden" }}>
+      <h2 style={{ marginLeft: "1rem", color: "#222" }}>Home Page</h2>
+
+      <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", gap: "1rem", padding: "1rem" }}>
+        <img src={dogshakeImg} alt="Dog handshake" style={{ width: "300px", maxWidth: "90%", borderRadius: "8px" }} />
+        <img src={dog2Img} alt="Animal group" style={{ width: "300px", maxWidth: "90%", borderRadius: "8px" }} />
+      </div>
+
+      <div style={{ textAlign: "center", marginBottom: "1rem" }}>
+        <p style={{ fontSize: "1.25rem" }}>Adopt your perfect companion today!</p>
+        <button style={{ margin: "0.5rem", backgroundColor: "black", color: "white", padding: "0.5rem 1rem", borderRadius: "4px" }}>View available pets!</button>
+        <button style={{ margin: "0.5rem", backgroundColor: "black", color: "white", padding: "0.5rem 1rem", borderRadius: "4px" }}>Search now!</button>
+      </div>
+
+      <h2 style={{ textAlign: "center", backgroundColor: "black", color: "white", padding: "0.5rem", margin: 0 }}>Featured Pets</h2>
+
+      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "2rem", padding: "2rem" }}>
+        {[
+          { name: "Stella", age: 1, type: "Golden Retriever", img: doggo },
+          { name: "Cleo", age: 7, type: "Maine Coon Cat", img: catImg },
+          { name: "Bowser", age: 13, type: "Western Painted Turtle", img: turtle },
+          { name: "Moon", age: 9, type: "Cockatiel", img: bird },
+        ].map((pet) => (
+          <div key={pet.name} style={{ textAlign: "center", maxWidth: "200px" }}>
+            <img src={pet.img} alt={pet.name} style={{ width: "100%", borderRadius: "8px" }} />
+            <div style={{ backgroundColor: "black", color: "white", padding: "0.5rem", borderRadius: "0 0 8px 8px" }}>
+              <div>Name: {pet.name}</div>
+              <div>Age: {pet.age}</div>
+              <div>Type: {pet.type}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <footer style={{
+        backgroundColor: "black",
+        display: "flex",
+        justifyContent: "center",
+        gap: "1.5rem",
+        padding: "1rem",
+        position: "fixed",
+        bottom: 0,
+        width: "100%",
+        left: 0
+      }}>
+        <a href="#"><img src="your-instagram-icon.svg" alt="Instagram" width="24" /></a>
+        <a href="#"><img src="your-facebook-icon.svg" alt="Facebook" width="24" /></a>
+        <a href="#"><img src="your-twitter-icon.svg" alt="Twitter" width="24" /></a>
+        <a href="#"><img src="your-youtube-icon.svg" alt="YouTube" width="24" /></a>
+        <a href="#"><img src="your-menu-icon.svg" alt="Menu" width="24" /></a>
+      </footer>
+    </div>
+  );
+}

frontend/src/pages/PetProfile.tsx

@@ -0,0 +1,85 @@
+import maxImg from '../assets/max-cat.png'; // Make sure this path is correct
+
+export default function PetProfile() {
+  return (
+    <div style={{
+      backgroundColor: "#b4a48f",
+      minHeight: "100vh",
+      width: "100vw",
+      overflowX: "hidden",
+      paddingBottom: "4rem",
+      paddingTop: "1rem"
+    }}>
+      <h2 style={{ marginLeft: "1rem", color: "#aaa" }}>Pet Profile Page</h2>
+
+      <div style={{
+        display: "flex",
+        justifyContent: "space-evenly",
+        alignItems: "center",
+        padding: "2rem",
+        flexWrap: "wrap",
+        gap: "2rem",
+        width: "100%",
+        boxSizing: "border-box"
+      }}>
+        {/* LEFT CARD */}
+        <div style={{
+          backgroundColor: "#716a66",
+          color: "white",
+          padding: "2rem",
+          borderRadius: "10px",
+          boxShadow: "3px 3px 5px rgba(0,0,0,0.2)",
+          maxWidth: "500px",
+          width: "100%"
+        }}>
+          <h1 style={{ textAlign: "center", marginBottom: "1rem" }}>MAX</h1>
+          <p><strong>Breed:</strong> American Short-hair</p>
+          <p><strong>Age:</strong> 8 years old</p>
+          <p><strong>Size:</strong> Medium</p>
+          <p><strong>Temperament:</strong> Gentle, affectionate, and independent</p>
+          <p><strong>History:</strong> Rescued from a shelter. Max has been an affectionate companion but is looking for a permanent home to wind down!</p>
+
+          <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", marginTop: "1.5rem", gap: "0.5rem" }}>
+            <button style={btnStyle}>Apply to Adopt</button>
+            <button style={btnStyle}>Save to List</button>
+            <button style={btnStyle}>Contact Seller</button>
+          </div>
+        </div>
+
+        {/* RIGHT IMAGE */}
+        <div style={{ maxWidth: "400px", width: "100%", textAlign: "center" }}>
+          <img src={maxImg} alt="Max the cat" style={{ width: "100%", borderRadius: "12px" }} />
+        </div>
+      </div>
+
+      {/* FOOTER */}
+      <footer style={{
+        backgroundColor: "black",
+        display: "flex",
+        justifyContent: "center",
+        gap: "1.5rem",
+        padding: "1rem",
+        position: "fixed",
+        bottom: 0,
+        width: "100%"
+      }}>
+        <a href="#"><img src="/instagram.svg" alt="Instagram" width="24" /></a>
+        <a href="#"><img src="/facebook.svg" alt="Facebook" width="24" /></a>
+        <a href="#"><img src="/twitter.svg" alt="Twitter" width="24" /></a>
+        <a href="#"><img src="/youtube.svg" alt="YouTube" width="24" /></a>
+        <a href="#"><img src="/menu.svg" alt="Menu" width="24" /></a>
+      </footer>
+    </div>
+  );
+}
+
+const btnStyle = {
+  backgroundColor: "black",
+  color: "white",
+  padding: "0.5rem 1rem",
+  borderRadius: "6px",
+  border: "none",
+  cursor: "pointer",
+  fontWeight: "bold",
+  flex: 1
+};