Added the basic catalog page

package.json

@@ -8,10 +8,13 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-scripts": "5.0.1",
-    "typescript": "^5.6.2",
+    "react-scripts": "^5.0.1",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,22 +1,16 @@
+/* App.css */
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #fff4e4;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-}
-
-.App-link {
-  color: #61dafb;
-}
+    background-color: #fff4e4; /* Set the background color */
+    min-height: 100vh; /* Ensure it takes full height */
+    display: flex; /* Use flex to layout content */
+    flex-direction: column; /* Stack children vertically */
+  }
+
+  main {
+    flex-grow: 1; /* Allow main to take up available space */
+  }
+
+  .App-footer {
+    /* You can also include footer styles here if needed */
+  }
+

src/App.tsx

@@ -1,20 +1,18 @@
-import React from 'react';
+// App.tsx
+import React from 'react';// Import the Catalog component
 import './App.css';
 import Header from './components/Header';
+import Catalog from './components/Catalog';
+import Footer from './components/Footer';
 
 const App: React.FC = () => {
   return (
     <div className="App">
       <Header />
       <main>
-        <section>
-          <h2>Welcome to The Dog Catalog!</h2>
-          <p>Discover various dog breeds and learn more about them.</p>
-        </section>
+        <Catalog />
       </main>
-      <footer className="App-footer">
-        <p>&copy; {new Date().getFullYear()} The Dog Catalog. All rights reserved.</p>
-      </footer>
+      <Footer />
     </div>
   );
 };

src/components/Catalog.css

@@ -0,0 +1,26 @@
+/* Catalog.css */
+.catalog {
+    padding: 20px;
+    text-align: center; /* Center the title */
+  }
+
+  .dog-cards-container {
+    display: grid; /* Use grid layout for cards */
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */
+    gap: 16px; /* Space between cards */
+  }
+
+  .dog-card {
+    background-color: white; /* White background for the card */
+    border-radius: 8px; /* Rounded corners */
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
+    padding: 16px; /* Padding inside the card */
+    text-align: center; /* Center text */
+  }
+
+  .dog-image {
+    width: 100%; /* Responsive image */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 8px; /* Match card's corners */
+  }
+

src/components/Catalog.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import DogCard from './DogCard';
+import './Catalog.css'; // Import the CSS for the catalog
+
+const dogs = [
+    {
+      id: 1, // Unique numeric ID
+      name: 'Buddy',
+      age: 3,
+      picture: 'path/to/buddy.jpg', // Replace with actual image paths
+      height: '24 inches',
+      color: 'Golden',
+      favoritePortFeature: 'Fetching Ball',
+      favoriteMeal: 'Chicken and Rice',
+    },
+    {
+      id: 2, // Unique numeric ID
+      name: 'Bella',
+      age: 2,
+      picture: 'path/to/bella.jpg',
+      height: '22 inches',
+      color: 'Brown',
+      favoritePortFeature: 'Jumping',
+      favoriteMeal: 'Buchari', // Changed meal to Buchari
+    },
+    {
+      id: 3, // Unique numeric ID
+      name: 'Charlie',
+      age: 4,
+      picture: 'path/to/charlie.jpg',
+      height: '26 inches',
+      color: 'Black',
+      favoritePortFeature: 'Chasing Frisbees',
+      favoriteMeal: 'Beef Stew',
+    },
+    {
+      id: 4, // Unique numeric ID
+      name: 'Daisy',
+      age: 1,
+      picture: 'path/to/daisy.jpg',
+      height: '20 inches',
+      color: 'White',
+      favoritePortFeature: 'Digging',
+      favoriteMeal: 'Green Day', // Changed meal to Green Day
+    },
+    {
+      id: 5, // Unique numeric ID
+      name: 'Max',
+      age: 5,
+      picture: 'path/to/max.jpg',
+      height: '30 inches',
+      color: 'Sable',
+      favoritePortFeature: 'Swimming',
+      favoriteMeal: 'Fish and Chips',
+    },
+    {
+      id: 6, // Unique numeric ID
+      name: 'Luna',
+      age: 3,
+      picture: 'path/to/luna.jpg',
+      height: '22 inches',
+      color: 'Brindle',
+      favoritePortFeature: 'Barking at Birds',
+      favoriteMeal: 'Pasta',
+    },
+    {
+      id: 7, // Unique numeric ID
+      name: 'Rocky',
+      age: 6,
+      picture: 'path/to/rocky.jpg',
+      height: '28 inches',
+      color: 'Fawn',
+      favoritePortFeature: 'Running',
+      favoriteMeal: 'Chicken Nuggets',
+    },
+];
+
+
+const Catalog: React.FC = () => {
+  return (
+    <section className="catalog">
+      <h2>Port's Dog Catalog</h2>
+      <div className="dog-cards-container">
+        {dogs.map((dog, index) => (
+          <DogCard key={index} {...dog} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Catalog;

src/components/DogCard.css

@@ -0,0 +1,32 @@
+/* DogCard.css */
+.dog-card {
+    background-color: #ffffff; /* White background for the card */
+    border-radius: 12px; /* Rounded corners for a softer look */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow for depth */
+    padding: 16px; /* Padding inside the card */
+    text-align: center; /* Center text */
+    transition: transform 0.3s, box-shadow 0.3s; /* Transition effects for hover */
+  }
+
+  .dog-card:hover {
+    transform: translateY(-4px); /* Lift effect on hover */
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
+  }
+
+  .dog-image {
+    width: 100%; /* Responsive image */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 12px; /* Match card's corners */
+  }
+
+  h3 {
+    font-size: 1.5rem; /* Slightly larger font for the dog's name */
+    color: #333; /* Darker text color */
+    margin: 12px 0; /* Space above and below the name */
+  }
+
+  p {
+    font-size: 1rem; /* Standard font size for other text */
+    color: #555; /* Gray text color for other details */
+  }
+

src/components/DogCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import './DogCard.css'; 
+
+interface DogCardProps {
+  id: number; // Add id prop
+  name: string;
+  age: number;
+  picture: string;
+  height: string;
+  color: string;
+  favoritePortFeature: string;
+  favoriteMeal: string;
+}
+
+const DogCard: React.FC<DogCardProps> = ({ 
+    id, // Include the id prop
+    name, 
+    age, 
+    picture, 
+    height, 
+    color, 
+    favoritePortFeature, 
+    favoriteMeal 
+  }) => {
+    return (
+      <div className="dog-card" key={id}> {/* Optionally add id here for styling or functionality */}
+        <img src={picture} alt={name} className="dog-image" />
+        <h3>{name}</h3>
+        <p>ID: {id}</p>
+        <p>Age: {age} years</p>
+        <p>Height: {height}</p>
+        <p>Color: {color}</p>
+        <p>Favorite Port Feature: {favoritePortFeature}</p>
+        <p>Favorite Meal: {favoriteMeal}</p>
+      </div>
+    );
+  };
+
+
+export default DogCard;

src/components/Footer.css

@@ -0,0 +1,7 @@
+.App-footer {
+    text-align: center; /* Center the text */
+    padding: 16px; /* Add some padding */
+    background-color: #fff; /* Change background color if desired */
+    border-top: 1px solid #ccc; /* Optional: Add a top border */
+  }
+

src/components/Footer.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Footer.css'; // Import the CSS for Footer
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="App-footer">
+      <p>&copy; {new Date().getFullYear()} The Dog Catalog. All rights reserved.</p>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Header.css

@@ -1,38 +1,41 @@
+/* Header.css */
 .App-header {
     display: flex;
     align-items: center;
-    padding: 1rem;
-  }
-
-  .logo {
-    margin-right: auto; /* Pushes the nav to the center */
+    justify-content: space-between;
+    padding: 16px; /* Adjust the padding as needed */
+    background-color: #ffebcc; /* Change the background color for distinction */
+    border-bottom: 2px solid #ffa500; /* Add a bottom border for separation */
   }
 
   .logo img {
-    height: 50px; /* Adjust size as needed */
+    height: 20px; /* Set logo height to 20px */
   }
 
   .nav-container {
-    flex: 1; /* Allows nav to take up available space */
-    text-align: center; /* Centers the navigation */
+    flex-grow: 1; /* Allow nav to grow */
+    text-align: center; /* Center the text */
   }
 
-  nav ul {
-    display: flex;
-    justify-content: center; /* Centers nav items */
-    list-style: none;
-    padding: 0;
+  .nav-container ul {
+    display: flex; /* Use flexbox for the list */
+    justify-content: center; /* Center the list items */
+    list-style-type: none; /* Remove bullet points */
+    padding: 0; /* Remove default padding */
+    margin: 0; /* Remove default margin */
   }
 
-  nav li {
-    margin: 0 15px;
+  .nav-container li {
+    margin: 0 16px; /* Add horizontal space between items */
   }
 
-  nav a {
-    text-decoration: none;
+  .nav-container a {
+    text-decoration: none; /* Remove underline from links */
+    color: #1a202c; /* Set link color */
+    transition: color 0.3s; /* Smooth transition for hover effect */
   }
 
-  nav a:hover {
-    text-decoration: underline;
+  .nav-container a:hover {
+    color: #3182ce; /* Change link color on hover */
   }