added the Happy Recovery Story page (#519)

* added a happy recovery story page

* updated

* original Navbar.jsx

src/App.jsx

@@ -25,6 +25,9 @@ import { Donationfront } from './pages/user/Donation/Donationfront/Donationfront
 import requestPermission from './utils/Functions/notifyService';
 import TeamPage from './pages/shared/team';
 import NotFound from './Components/shared/PageNotfound';
+import RecoveredsPage from './pages/user/RecoveredsPage/RecoveredsPage';
+import HappyRecoveriesPage from './pages/user/RecoveredsPage/HappyRecoveriesPage';
+
 /**
  * The main component of the application.
  * @returns {JSX.Element} The rendered App component.
@@ -65,6 +68,8 @@ function App() {
               <Route path="/ngoProfile" element={<NgoProfile />} />
               <Route path="/donationfront" element={<Donationfront />} />
               <Route path="/team" element={<TeamPage />} />
+              <Route path="/recovereds-page" element={<RecoveredsPage />} />
+              <Route path="/happy-recoveries" element={<HappyRecoveriesPage />} />
             </Routes>
           </NgoProvider>
         </UserProvider>

src/pages/user/RecoveredsPage/HappyRecoveriesPage.css

@@ -0,0 +1,134 @@
+.happy-recoveries-page {
+  background: url('../RecoveredsPage/images/bg2.png') no-repeat center center fixed;
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.this-title {
+  font-size: 2.8rem;
+  font-weight: bold;
+  color: #0056AF;
+  margin: 40px 0 20px 0;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  animation: typing 3s steps(40, end);
+}
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+.cards {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.card {
+  margin-right: 80px;
+  margin-top: 50px;
+  margin-left: 80px;
+  width: 300px;
+  height: 350px;
+  border-radius: 10px;
+  box-shadow: 0 40px 60px -16px rgb(98, 98, 98);
+  overflow: hidden;
+  position: relative;
+}
+
+.card-title {
+  display: block;
+  text-align: center;
+  color: #fff;
+  background-color: #4582be;
+  padding: 2%;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  background-image: linear-gradient(#37d9f2, #5fa1f2);
+  border: 0;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  font-family: Montserrat,sans-serif;
+  font-size: 1.1em;
+  margin: 5px;
+  margin-bottom: 10px;
+  padding: 5px 5px;
+  text-align: center;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  position: relative;
+  border-radius: 10px;
+}
+
+.card-desc {
+  display: block;
+  font-size: 1rem;
+  position: absolute;
+  height: 0;
+  top: 0;
+  opacity: 0;
+  padding: 18px 8%;
+  background-color: white;
+  overflow-y: scroll;
+  transition: 0.8s ease;
+}
+
+.card:hover .card-desc {
+  opacity: 1;
+  height: 100%;
+}
+
+.rescuer-info {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.rescuer-info .rescuer-photo {
+  width: 50px; 
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.rescuer-info .rescuer-name {
+  font-size: 1rem;
+}
+
+.read-more-link {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.read-more-link a {
+  color: #3498db;
+  text-decoration: none;
+  font-size: 1.1em;
+}
+
+.read-more-link a:hover {
+  text-decoration: underline;
+}

src/pages/user/RecoveredsPage/HappyRecoveriesPage.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import './HappyRecoveriesPage.css';
+
+const HappyRecoveriesPage = () => {
+  const recoveredAnimals = [
+    {
+      name: 'Buddy',
+      recoveryDetails: 'Buddy, the dog, was rescued by one of our dedicated rescuers. After being saved from a difficult situation, he found a loving family who adopted him and gave him a new life full of care and happiness.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/buddy.PNG',
+      rescuer: {
+        name: 'Ms. Lobo',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer1.PNG',
+      },
+    },
+    {
+      name: 'Ash',
+      recoveryDetails: 'Ash, the cat rescued from a high-rise building by one of our dedicated rescuers and treated by Dr. Carol, now thrives in a loving foster home. Her journey from peril to safety is a testament to compassion and the promise of a brighter future for every rescued animal.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/ash.PNG',
+      rescuer: {
+        name: 'Mr. Smith',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer2.PNG',
+      },
+    },
+    {
+      name: 'Kau',
+      recoveryDetails: 'Kau, a cow rescued by one of our rescuers, was found abandoned near a slaughterhouse. Nursed back to health with care and compassion, she was eventually adopted by a kind couple involved in agriculture, who provided her with a loving home on their farm.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/kau.PNG',
+      rescuer: {
+        name: 'Dr. Carol',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer3.jpg',
+      },
+    },
+    {
+      name: 'Cherry',
+      recoveryDetails: 'Cherry, the horse, was found injured and in need of help by one of our rescuers. Thanks to the dedicated care of Dr. Carol, Cherry was nursed back to health. She found a new home with a compassionate family involved in agriculture, where she now thrives and enjoys a life filled with care and comfort.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/cherry.PNG',
+      rescuer: {
+        name: 'Ms. Lobo',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer1.PNG',
+      },
+    },
+    {
+      name: 'Luna',
+      recoveryDetails: 'Luna, a dog abandoned and abused by her previous owners, was rescued by one of our dedicated rescuers. She received compassionate care and rehabilitation, thanks to the efforts of our brave hearts. Now, Luna has found a loving forever home where she is cherished and cared for, embodying the resilience and joy that come with a second chance at life.',
+      imageUrl: './src/pages/user/RecoveredsPage/images/luna.PNG',
+      rescuer: {
+        name: 'Mr. Smith',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer2.PNG',
+      },
+    },
+    {
+      name: 'Cotton',
+      recoveryDetails: 'Cotton, a rabbit needing care, was rescued by a dedicated rescuer. Found in a situation requiring attention, Cotton received compassionate care and nurturing. Now, in a safe and loving home, Cotton hops freely, embodying resilience and joy after receiving a second chance at life..',
+      imageUrl: './src/pages/user/RecoveredsPage/images/cotton.PNG',
+      rescuer: {
+        name: 'Dr. Carol',
+        photoUrl: './src/pages/user/RecoveredsPage/images/rescuer3.jpg',
+      },
+    },
+  ];
+
+  return (
+    <div className="happy-recoveries-page">
+      <h1 className="this-title">Happy Recoveries</h1>
+      <div className="cards">
+        {recoveredAnimals.map((animal, index) => (
+          <div key={index} className="card">
+            <img src={animal.imageUrl} alt={animal.name} />
+            <div className="card-desc">
+              <h2 className="card-title">{animal.name}</h2>
+              <p>{animal.species}</p>
+              <p>{animal.recoveryDetails}</p>
+              <div className="rescuer-info">
+                <img src={animal.rescuer.photoUrl} alt={animal.rescuer.name} className="rescuer-photo" />
+                <p className="rescuer-name">Rescued by: {animal.rescuer.name}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      <p className="read-more-link">
+        <a href="/recovereds-page">Our Rescuers</a>
+      </p>
+    </div>
+  );
+};
+
+export default HappyRecoveriesPage;

src/pages/user/RecoveredsPage/RecoveredsPage.css

@@ -0,0 +1,103 @@
+.recovereds-page {
+    background: url('../RecoveredsPage/images/background.png') no-repeat center center fixed;
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .recovereds-container {
+    text-align: center;
+    width: 100%;
+    min-height: 100vh;
+    box-sizing: border-box;
+    margin-left: 300px;
+    margin-top: 100px;
+  }
+
+  .title {
+    font-size: 3.5rem;
+    margin-bottom: 40px;
+    color: #0056AF;
+    font-weight: bold;
+    margin-left: 300px;
+
+  }
+
+  .rescuers {
+    display: flex;
+    justify-content: flex-end; 
+    flex-wrap: wrap;
+    gap: 150px;
+    margin-bottom: 40px;
+    margin-right: 50px;
+  }
+
+  .rescuer {
+    text-align: center;
+  }
+
+  .rescuer-image {
+    width: 150px;
+    height: 150px;
+    border-radius: 20px;
+    border-right: 7px solid #0056AF;
+    border-bottom: 7px solid #0056AF;
+    object-fit: cover;
+    margin-bottom: 10px;
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+  }
+
+  .rescuer-image:hover {
+    width: 150px;
+    height: 150px;
+    border-radius: 20px;
+    border-right: 7px solid #0056AF;
+    border-bottom: 7px solid #0056AF;
+    object-fit: cover;
+    margin-bottom: 10px;
+    transform: scale(1.07);
+  }
+
+  .rescuer-details h2 {
+    font-size: 1.5rem;
+    margin-right: 30px;
+    color: #0056AF;
+  }
+
+  .rescuer-details p {
+        font-size: 1.0rem;
+        color: #434343;
+        overflow: hidden; 
+        white-space: nowrap;
+        animation: typing 1s steps(20, end) forwards; 
+      }
+
+      @keyframes typing {
+        from {
+          width: 0; 
+        }
+        to {
+          width: 100%;
+        }
+      }
+
+  .read-stories-link {
+    margin-top: 90px;
+    font-size: 1.0rem;
+    color: #434343;
+    margin-left: 300px;
+  }
+
+  .read-stories-link a {
+    color: #007bff;
+    text-decoration: none;
+
+  }
+
+  .read-stories-link a:hover {
+    color: #0056b3;
+    text-decoration: underline;
+  }
+

src/pages/user/RecoveredsPage/RecoveredsPage.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import './RecoveredsPage.css';
+
+const RecoveredsPage = () => {
+  // Define the data for rescuers
+  const rescuers = [
+    {
+      name: 'Ms. Lobo',
+      profileImage: 'src/pages/user/RecoveredsPage/images/rescuer1.PNG',
+      details: 'Saved 20+ lives',
+    },
+    {
+      name: 'Mr. Smith',
+      profileImage: 'src/pages/user/RecoveredsPage/images/rescuer2.PNG',
+      details: 'Rescued 10+ wilds',
+    },
+    {
+      name: 'Dr. Carol',
+      profileImage: 'src/pages/user/RecoveredsPage/images/rescuer3.jpg',
+      details: 'Healed several injureds',
+    },
+  ];
+
+  return (
+    <div className="recovereds-page">
+        <div className="recovereds-container">
+      <h1 className="title">Brave Hearts!</h1>
+      <div className="rescuers">
+        {rescuers.map((rescuer, index) => (
+          <div key={index} className="rescuer">
+            <img src={rescuer.profileImage} alt={rescuer.name} className="rescuer-image" />
+            <div className="rescuer-details">
+              <h2>{rescuer.name}</h2>
+              <p>{rescuer.details}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+      <p className="read-stories-link">
+        Read <a href="/happy-recoveries">Happy Recovery Stories</a>
+      </p>
+    </div>
+    </div>
+  );
+};
+
+export default RecoveredsPage;