update,

2025-01-31 19:47:49 +08:00
parent 32bc49f19a
commit 893eaee67b
129 changed files with 71057 additions and 0 deletions
--- a/givefortune/task3-quote/src/AboutUs.js
+++ b/givefortune/task3-quote/src/AboutUs.js
@@ -0,0 +1,135 @@
+import React from "react";
+import NewNavbar from "./NewNavbar";
+import Footer from "./components/Footer";
+import styles from "./AboutUs.module.css";
+import { motion } from "framer-motion";
+import NGOLogo from "./components/NGOLogo";
+
+const AboutUs = () => {
+  return (
+    <div className="container">
+      <NewNavbar />
+      <div className={styles["middle-content"]}>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.5 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          style={{ minHeight: "100vh" }}
+        >
+          <div className="title">
+            <h2 className={styles["title-About-Us"]}>關於我們</h2>
+          </div>
+          <div className={styles["about-us-1"]}>
+            <div className={styles["about-us-photo-wrapper"]}>
+              <img
+                className={styles["about-us-photo-1"]}
+                src="https://images.unsplash.com/photo-1551730459-92db2a308d6a?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="About Us"
+              />
+            </div>
+            <div className={styles["about-us-para-1"]}>
+              <div className={styles["para"]}>
+                <div className={styles["para-title"]}>
+                  歡迎來到祖積家， 這是瀏覽全港待領養寵物資訊的最佳地方！
+                </div>
+                <br />
+                <div className={styles["para-content"]}>
+                  祖積家是一個匯集來多個香港動物協會及組織的待領養寵物資訊的網路平臺，只要瀏覽祖積家就能找到能完美的毛茸茸的寵物伴侶。
+                  我們是一群熱愛動物的人，我們希望能幫助流浪動物找到一個溫暖的家。我們的網站提供了各種寵物的資訊，包括品種、性格、健康狀況等，讓你可以根據自己的喜好和條件選擇最適合你的寵物。我們也提供了基本領養流程和注意事項，給予你的新朋友最好的照顧。
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.5 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5 }}
+          style={{ minHeight: "100vh" }}
+        >
+          <div className={styles["about-us-2"]}>
+            <div className={styles["about-us-para-2"]}>
+              <div className={styles["para"]}>
+                <div className={styles["para-title"]}>
+                  我們相信每一隻動物都有自己的個性和故事，都值得被愛和尊重。
+                </div>
+                <br />
+                <div className={styles["para-content"]}>
+                  除了宣傳不同機構的領養/助養活動，我們亦會不定時舉辦線下的領養活動，讓寵物和領養者可以面對面地互動。我們希望透過我們的平台，能夠減少流浪動物的數量，並且創造更多幸福的家庭。如果你也想成為我們的一份子，歡迎你加入我們的領養大家庭！
+                </div>
+              </div>
+            </div>
+            <div className={styles["about-us-photo-wrapper"]}>
+              <img
+                className={styles["about-us-photo-2"]}
+                src="https://images.unsplash.com/photo-1573865526739-10659fec78a5?q=80&w=1915&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="About Us"
+              />
+            </div>
+          </div>
+        </motion.div>
+      </div>
+      <div className={styles["divider"]}>
+        <img
+          className={styles["divider-image"]}
+          src="./Imgs/pawsdivider.svg"
+          alt="Divider"
+        />
+      </div>
+      <motion.div
+        initial={{ opacity: 0, scale: 0.5 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5 }}
+        className={styles["logocontainer"]}
+      >
+        <NGOLogo />
+      </motion.div>
+
+      <motion.div
+        className={styles["contactUs-wrapper"]}
+        initial={{ opacity: 0, scale: 0.5 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5 }}
+      >
+        <div className={styles["contactUs-info-bg"]}>
+          <div className={styles["contact-Title"]}>聯絡我們</div>
+          <div className={styles["contact-container"]}>
+            <img
+              className={styles["contact-Image"]}
+              src="./Imgs/cat-and-dog.svg"
+              alt="Contact Us"
+            />
+
+            <div className={styles["contact-Us"]}>
+              <span className={styles["contact-Info"]}>
+                <span className={styles["contact-Details"]}>
+                  <img
+                    src="./icons/phone.png"
+                    alt="phone"
+                    className={styles["contactUsIcon"]}
+                  />
+                  電話：3500 7164
+                </span>
+              </span>
+              <p className={styles["contact-Info"]}>
+                <span className={styles["contact-Details"]}>
+                  <img
+                    src="./icons/email.png"
+                    alt="email"
+                    className={styles["contactUsIcon"]}
+                  />
+                  電郵： jojac.home.official@gmail.com
+                </span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default AboutUs;
--- a/givefortune/task3-quote/src/AboutUs.module.css
+++ b/givefortune/task3-quote/src/AboutUs.module.css
@@ -0,0 +1,181 @@
+.title-About-Us {
+  text-align: center;
+  margin-top: 50px;
+  margin-bottom: 70px;
+  color: rgb(70, 30, 10);
+}
+
+.about-us {
+  text-align: center;
+}
+
+.about-us-photo-1 {
+  width: 300px;
+  height: 500px;
+}
+
+.about-us-1 {
+  display: flex;
+  margin-bottom: 30px;
+  justify-content: center;
+}
+
+.about-us-2 {
+  display: flex;
+  justify-content: center;
+}
+
+.about-us-photo-2 {
+  width: 350px;
+  height: 500px;
+}
+
+.about-us-para-1 {
+  display: flex;
+  align-items: center;
+}
+.about-us-para-2 {
+  display: flex;
+  align-items: center;
+}
+
+.para {
+  display: flex;
+  flex-direction: column;
+}
+.para-title {
+  color: #a94a52;
+  font-weight: 800;
+}
+
+.para-content {
+  color: #6e6e6e;
+  max-width: 500px;
+}
+
+.contactUs-wrapper {
+  /* display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: antiquewhite;
+  margin: 10px 0 0 0; */
+
+  display: flex;
+  /* flex-direction: column; */
+  align-items: center;
+  align-self: center;
+  justify-self: center;
+  justify-content: center;
+  background-image: url("../public/StarPetImgs/star-bg.png");
+  object-fit: cover;
+  background-size: 100%;
+  /* position: relative; */
+  margin: 30px 0 0 0;
+  padding: 30px;
+}
+
+.contactUs-info-bg {
+  background-color: rgba(255, 248, 239, 0.5);
+  padding: 30px;
+  border-radius: 30px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.contact-Title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2.4rem;
+  padding: 10px 0;
+  color: rgb(70, 30, 10);
+  flex: 1;
+}
+.contact-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 60px;
+  justify-content: center;
+  align-items: center;
+}
+
+.contactUsIcon {
+  width: 20px;
+  padding-right: 10px;
+}
+.contact-Image {
+  height: 200px;
+}
+.contact-Info {
+  color: #a94a52;
+}
+.contact-Details {
+  font-weight: 800;
+  display: flex;
+  align-content: center;
+}
+
+@media (min-width: 1280px) {
+  .about-us-1 {
+    flex-direction: row;
+  }
+  .about-us-2 {
+    flex-direction: row;
+  }
+  .about-us-para-1 {
+    margin-left: 20px;
+  }
+  .about-us-para-2 {
+    margin-right: 20px;
+  }
+}
+
+@media (min-width: 960px) and (max-width: 1279px) {
+  .about-us-1 {
+    flex-direction: column;
+  }
+  .about-us-2 {
+    flex-direction: column;
+  }
+  .about-us-photo-wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0 20px 0;
+  }
+  .about-us-para-2 {
+    justify-content: center;
+  }
+  .about-us-para-1 {
+    justify-content: center;
+  }
+  .allLogos {
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 959px) {
+  .about-us-1 {
+    flex-direction: column;
+  }
+  .about-us-2 {
+    flex-direction: column;
+  }
+  .about-us-photo-wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0 20px 0;
+  }
+  .about-us-para-2 {
+    justify-content: center;
+  }
+  .about-us-para-1 {
+    justify-content: center;
+  }
+  .allLogos {
+    flex-wrap: wrap;
+  }
+}
--- a/givefortune/task3-quote/src/AdoptionInfoPage.js
+++ b/givefortune/task3-quote/src/AdoptionInfoPage.js
@@ -0,0 +1,318 @@
+import React from "react";
+import styles from "./AdoptionInfoPage.module.css";
+import { Button, Box } from "@mui/material";
+import NewNavbar from "./NewNavbar.js";
+import { IconButton, SvgIcon } from "@mui/material";
+import { Link } from "react-router-dom";
+import Footer from "./components/Footer.js";
+import NGOLogo from "./components/NGOLogo.js";
+import { motion } from "framer-motion";
+
+function AdoptionInfoPage() {
+  return (
+    <div id={styles["wholecontainer"]}>
+      <NewNavbar />
+      <div id={styles["infocontainer"]}>
+        <div className={styles["bg-wrapper"]}>
+          <div id={styles["headingcontainer"]}>
+            <p className={styles["Info-heading"]}>基本領養需知</p>
+          </div>
+          <div className={styles["Info-content"]}>
+            <ul>
+              <li className={styles["point"]}>
+                領養前仔細考慮：領養動物是一個長期承諾，請確保您有足夠的時間、資源和能力來照顧動物的生活需求。
+              </li>
+              <li className={styles["point"]}>
+                選擇合適的寵物：根據您的生活方式、住房狀況和家庭成員的需求，選擇適合的寵物品種和性格。
+              </li>
+              <li className={styles["point"]}>
+                準備領養費用:
+                領養動物通常需要支付已用於動物的醫療保健、疫苗接種、結紮手術、晶片植入等費用。
+                <br />
+                具體金額可能因機構、動物種類和需求而有所不同。
+              </li>
+              <li className={styles["point"]}>
+                寵物繁殖控制：如果您領養的是未結紮的寵物，請進行結紮手術，以控制寵物繁殖和負擔。
+              </li>
+              <li className={styles["point"]}>
+                注冊和標識寵物：根據香港法律，您需要為寵物進行注冊和標識，如植入晶片或佩戴識別圈等。
+              </li>
+              <li className={styles["point"]}>
+                提供良好的飲食和醫療照顧：給予寵物均衡的飲食，定期接受獸醫檢查和必要的疫苗接種，並提供必要的醫療照顧。
+              </li>
+              <li className={styles["point"]}>
+                寵物訓練和社交化：提供寵物適當的訓練和社交化，以確保其行為和與人類及其他動物的相處方式良好。
+              </li>
+              <li className={styles["point"]}>
+                耐心和愛心：給予寵物足夠的耐心和愛心，建立牢固的信任關係，並對其提供家庭的溫暖和關懷。
+              </li>
+              <li className={styles["point"]}>
+                提供適當的運動和娛樂：確保寵物有足夠的運動和娛樂，例如遛狗、玩耍和提供適合的玩具等，以維持其身心健康。
+              </li>
+            </ul>
+          </div>
+          <div className={styles["precautions"]}>
+            <p className={styles["attention"]}>
+              以上僅是一些基本的領養需知，具體領養程序和要求會因應不同的領養機構或動物種類而有所不同。建議您在領養前進一步了解相關資訊，並與相關機構聯繫以獲取更詳細的指引。
+            </p>
+          </div>
+          <Box display="flex" justifyContent="center" marginTop={5}>
+            <Link
+              to={{
+                pathname: `/Category_Page`,
+              }}
+            >
+              <IconButton href="www.google.com" id="more-pet">
+                <SvgIcon
+                  id="pets-icon"
+                  enable-background="new 0 0 512 512"
+                  height="512"
+                  viewBox="0 0 512 512"
+                  width="512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g>
+                    <path
+                      d="m7.611 143.299v-58.886c0-8.864 7.186-16.05 16.05-16.05 5.546 0 10.7 2.864 13.629 7.573l41.896 67.363-35.788 12.059z"
+                      fill="#918291"
+                    />
+                    <path
+                      d="m37.29 75.936c-2.929-4.71-8.083-7.573-13.629-7.573-8.864 0-16.05 7.186-16.05 16.05v2.346c.068-.001.135-.01.203-.01 5.546 0 10.7 2.864 13.629 7.573l30.608 48.977 11.903 5.133 15.232-5.133z"
+                      fill="#7f737f"
+                    />
+                    <path
+                      d="m245.783 143.299 4.973-27.374-4.973-31.513c0-8.864-7.186-16.05-16.05-16.05-5.546 0-10.7 2.864-13.629 7.573l-41.896 67.363 35.788 8.916z"
+                      fill="#918291"
+                    />
+                    <path
+                      d="m229.733 68.363c-5.546 0-10.7 2.863-13.629 7.573l-3.271 5.259c3.552 2.944 5.815 7.388 5.815 12.362v49.742l6.533 5.133 20.602-5.133 4.973-27.374-4.973-31.513c0-8.863-7.186-16.049-16.05-16.049z"
+                      fill="#7f737f"
+                    />
+                    <path
+                      d="m126.697 346.882c-65.769 0-119.086-10.887-119.086-76.656v-126.927h238.171l16.024 55.492-16.024 46.656v24.778c.001 65.769-53.316 76.657-119.085 76.657z"
+                      fill="#e2dee2"
+                    />
+                    <path
+                      d="m218.648 143.299v126.926c0 61.18-46.139 74.867-105.518 76.48 4.453.121 8.979.176 13.567.176 65.769 0 119.086-10.887 119.086-76.656v-24.778l16.024-46.656-16.024-55.492z"
+                      fill="#cbc4cc"
+                    />
+                    <path
+                      d="m95.617 346.882h62.16c33.987 0 61.539 27.552 61.539 61.539v58.633c0 7.505-6.084 13.589-13.589 13.589l-36.709-.004-42.321-13.248-42.322 13.251h-36.708c-7.505 0-13.589-6.084-13.589-13.589v-58.633c0-33.986 27.552-61.538 61.539-61.538z"
+                      fill="#e2dee2"
+                    />
+                    <path
+                      d="m157.777 346.882h-27.135c33.987 0 61.539 27.552 61.539 61.539v58.633c0 7.505-6.084 13.589-13.589 13.589h27.135c7.505 0 13.589-6.084 13.589-13.589v-58.633c.001-33.987-27.552-61.539-61.539-61.539z"
+                      fill="#cbc4cc"
+                    />
+                    <path
+                      d="m169.019 480.643h-42.322l-7.763-35.93 7.763-27.741c0-4.518 3.663-8.181 8.181-8.181h25.96c4.518 0 8.181 3.663 8.181 8.181z"
+                      fill="#918291"
+                    />
+                    <path
+                      d="m169.018 416.977v63.663h-17.425v-63.663c0-4.526-3.664-8.19-8.18-8.19h17.425c4.516 0 8.18 3.664 8.18 8.19z"
+                      fill="#7f737f"
+                    />
+                    <path
+                      d="m126.697 480.643h-42.322v-63.671c0-4.518 3.663-8.181 8.181-8.181h25.96c4.518 0 8.181 3.663 8.181 8.181z"
+                      fill="#918291"
+                    />
+                    <path
+                      d="m126.696 416.977v63.663h-17.425v-63.663c0-4.526-3.664-8.19-8.18-8.19h17.425c4.516 0 8.18 3.664 8.18 8.19z"
+                      fill="#7f737f"
+                    />
+                    <path
+                      d="m512 103.576v141.868c0 73.517-59.593 85.685-133.11 85.685s-133.11-12.168-133.11-85.685v-141.868z"
+                      fill="#e19974"
+                    />
+                    <path
+                      d="m484.865 103.575v141.873c0 68.934-52.4 83.928-119.541 85.529 4.461.106 8.987.154 13.567.154 73.514 0 133.109-12.169 133.109-85.683v-141.873z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m344.151 331.13h69.48c37.989 0 68.786 30.796 68.786 68.786v67.138c0 7.505-6.084 13.589-13.589 13.589h-179.873c-7.505 0-13.589-6.084-13.589-13.589v-67.138c-.001-37.989 30.796-68.786 68.785-68.786z"
+                      fill="#e19974"
+                    />
+                    <path
+                      d="m413.631 331.13h-27.135c37.989 0 68.786 30.797 68.786 68.786v67.138c0 7.505-6.084 13.589-13.589 13.589h27.135c7.505 0 13.589-6.084 13.589-13.589v-67.138c0-37.989-30.796-68.786-68.786-68.786z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m367.546 480.643h-41.24v-72.278c0-4.438 3.597-8.035 8.035-8.035h25.17c4.438 0 8.035 3.597 8.035 8.035z"
+                      fill="#e19974"
+                    />
+                    <path
+                      d="m367.544 408.361v72.279h-19.049v-72.279c0-4.435-3.593-8.028-8.038-8.028h19.049c4.445 0 8.038 3.593 8.038 8.028z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m359.54 253.62h38.703v26.157c0 10.688-8.664 19.352-19.352 19.352-10.688 0-19.352-8.664-19.352-19.352v-26.157z"
+                      fill="#e759aa"
+                    />
+                    <path
+                      d="m378.891 253.62v26.157c0 7.159-3.897 13.394-9.676 16.741 2.849 1.65 6.147 2.61 9.676 2.61 10.688 0 19.351-8.664 19.351-19.351v-26.157z"
+                      fill="#e03d9c"
+                    />
+                    <path
+                      d="m337.699 103.575h-91.916v-38.475c0-18.636 15.107-33.744 33.744-33.744h24.429c18.636 0 33.744 15.107 33.744 33.744v38.475z"
+                      fill="#e19974"
+                    />
+                    <path
+                      d="m303.955 31.357h-24.429c-.454 0-.904.017-1.353.034 18.008.711 32.391 15.527 32.391 33.709v38.474h27.135v-38.474c-.001-18.636-15.108-33.743-33.744-33.743z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m297.262 143.299c-13.968 0-25.292-11.324-25.292-25.292v-39.22c0-4.182 3.39-7.572 7.572-7.572 4.182 0 7.572 3.39 7.572 7.572v39.22h35.44c0 13.968-11.324 25.292-25.292 25.292z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m312.406 143.299c-13.968 0-25.292-11.324-25.292-25.292v-46.792h50.584v46.792c.001 13.968-11.323 25.292-25.292 25.292z"
+                      fill="#e19974"
+                    />
+                    <path
+                      d="m310.564 71.215v46.792c0 8.974-4.678 16.851-11.725 21.34 3.921 2.498 8.573 3.952 13.567 3.952 13.968 0 25.292-11.324 25.292-25.292v-46.792z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m420.084 103.575h91.916v-38.475c0-18.636-15.107-33.744-33.744-33.744h-24.429c-18.636 0-33.744 15.107-33.744 33.744v38.475z"
+                      fill="#e19974"
+                    />
+                    <path
+                      d="m478.256 31.357h-24.429c-.454 0-.903.017-1.353.034 18.008.711 32.39 15.527 32.39 33.709v38.474h27.136v-38.474c0-18.636-15.108-33.743-33.744-33.743z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m457.106 103.576v14.431c0 13.965-11.326 25.291-25.301 25.291-13.965 0-25.29-11.326-25.29-25.291v-14.431z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m445.376 143.299c13.968 0 25.292-11.324 25.292-25.292v-46.792h-50.584v46.792c0 13.968 11.324 25.292 25.292 25.292z"
+                      fill="#e19974"
+                    />
+                    <path
+                      d="m456.814 71.215c-7.334 0-13.28 5.946-13.28 13.28v33.512c0 8.974-4.678 16.851-11.725 21.34 3.921 2.498 8.573 3.952 13.567 3.952 13.968 0 25.292-11.324 25.292-25.292v-32.938c0-7.651-6.202-13.854-13.854-13.854z"
+                      fill="#dc8758"
+                    />
+                    <g>
+                      <g>
+                        <path
+                          d="m83.195 256.292c-4.204 0-7.611-3.408-7.611-7.611v-13.71c0-4.204 3.407-7.611 7.611-7.611s7.611 3.408 7.611 7.611v13.71c.001 4.203-3.407 7.611-7.611 7.611z"
+                          fill="#918291"
+                        />
+                      </g>
+                      <g>
+                        <path
+                          d="m170.198 256.292c-4.204 0-7.611-3.408-7.611-7.611v-13.71c0-4.204 3.407-7.611 7.611-7.611s7.611 3.408 7.611 7.611v13.71c.001 4.203-3.407 7.611-7.611 7.611z"
+                          fill="#918291"
+                        />
+                      </g>
+                    </g>
+                    <path
+                      d="m156.92 286.62c-2.093-3.216-6.252-4.374-9.706-2.7l-.249.121c-1.157.706-6.702 3.639-12.657-.619v-27.129h2.17c4.204 0 7.611-3.408 7.611-7.611 0-4.204-3.407-7.611-7.611-7.611h-19.563c-4.204 0-7.611 3.408-7.611 7.611 0 4.204 3.407 7.611 7.611 7.611h2.169v27.132c-5.955 4.259-11.501 1.322-12.658.616l-.287-.154c-3.471-1.855-7.784-.746-9.93 2.552-2.485 3.819-1.08 8.986 3.032 10.95 5.222 2.495 9.057 3.499 13.288 3.499 4.467 0 9.373-1.131 14.165-4.221 4.794 3.092 9.701 4.221 14.17 4.221 4.098 0 7.826-.943 12.762-3.149 4.278-1.912 5.85-7.192 3.294-11.119z"
+                      fill="#918291"
+                    />
+                    <g>
+                      <g>
+                        <path
+                          d="m34.136 255.808h-26.525c-4.204 0-7.611-3.408-7.611-7.612s3.407-7.611 7.611-7.611h26.524c4.204 0 7.611 3.408 7.611 7.611.001 4.204-3.406 7.612-7.61 7.612z"
+                          fill="#eaf9fa"
+                        />
+                      </g>
+                      <g>
+                        <path
+                          d="m10.258 300.894c-2.771 0-5.443-1.518-6.788-4.157-1.909-3.745-.419-8.329 3.326-10.238l29.061-14.812c3.744-1.908 8.329-.42 10.238 3.325s.419 8.329-3.326 10.238l-29.061 14.812c-1.106.565-2.288.832-3.45.832z"
+                          fill="#eaf9fa"
+                        />
+                      </g>
+                      <g>
+                        <path
+                          d="m34.134 335.861c-1.847 0-3.699-.668-5.163-2.021-3.088-2.852-3.278-7.668-.426-10.756l18.474-19.998c2.85-3.088 7.667-3.278 10.755-.426 3.088 2.853 3.278 7.668.426 10.756l-18.474 19.998c-1.499 1.624-3.543 2.447-5.592 2.447z"
+                          fill="#eaf9fa"
+                        />
+                      </g>
+                    </g>
+                    <g>
+                      <g>
+                        <path
+                          d="m245.783 255.808h-26.524c-4.204 0-7.611-3.408-7.611-7.611 0-4.204 3.407-7.611 7.611-7.611h26.524c4.204 0 7.611 3.408 7.611 7.611s-3.407 7.611-7.611 7.611z"
+                          fill="#eaf9fa"
+                        />
+                      </g>
+                      <g>
+                        <path
+                          d="m243.137 300.894c-1.164 0-2.343-.267-3.45-.832l-29.062-14.812c-3.745-1.909-5.235-6.493-3.326-10.238 1.91-3.746 6.496-5.233 10.238-3.325l29.062 14.812c3.745 1.909 5.235 6.493 3.326 10.238-1.345 2.639-4.017 4.157-6.788 4.157z"
+                          fill="#eaf9fa"
+                        />
+                      </g>
+                      <g>
+                        <path
+                          d="m219.261 335.861c-2.05 0-4.092-.823-5.593-2.446l-18.475-19.998c-2.852-3.088-2.662-7.903.425-10.756 3.088-2.853 7.903-2.662 10.756.426l18.475 19.998c2.852 3.088 2.662 7.903-.425 10.756-1.464 1.351-3.316 2.02-5.163 2.02z"
+                          fill="#eaf9fa"
+                        />
+                      </g>
+                    </g>
+                    <g>
+                      <g>
+                        <path
+                          d="m337.699 231.615c-4.204 0-7.611-3.408-7.611-7.611v-12.982c0-4.204 3.407-7.611 7.611-7.611s7.612 3.408 7.612 7.611v12.982c-.001 4.203-3.408 7.611-7.612 7.611z"
+                          fill="#918291"
+                        />
+                      </g>
+                      <g>
+                        <path
+                          d="m420.084 231.615c-4.204 0-7.611-3.408-7.611-7.611v-12.982c0-4.204 3.407-7.611 7.611-7.611s7.612 3.408 7.612 7.611v12.982c0 4.203-3.408 7.611-7.612 7.611z"
+                          fill="#918291"
+                        />
+                      </g>
+                    </g>
+                    <path
+                      d="m420.084 246.008h-33.582v-22.004h-15.223v22.004h-33.581c-4.204 0-7.611 3.408-7.611 7.611 0 4.204 3.407 7.611 7.611 7.611h82.386c4.204 0 7.612-3.408 7.612-7.611s-3.408-7.611-7.612-7.611z"
+                      fill="#918291"
+                    />
+                    <path
+                      d="m326.306 480.643h-15.223v-72.701c0-4.204 3.408-7.611 7.611-7.611 4.204 0 7.612 3.408 7.612 7.611z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m399.291 480.643h-15.223v-72.701c0-4.204 3.408-7.611 7.611-7.611 4.204 0 7.611 3.408 7.611 7.611v72.701z"
+                      fill="#dc8758"
+                    />
+                    <path
+                      d="m440.531 480.643h-41.24v-72.278c0-4.438 3.597-8.035 8.035-8.035h25.17c4.438 0 8.035 3.597 8.035 8.035z"
+                      fill="#e19974"
+                    />
+                    <path
+                      d="m440.529 408.361v72.279h-19.049v-72.279c0-4.435-3.593-8.028-8.038-8.028h19.049c4.445 0 8.038 3.593 8.038 8.028z"
+                      fill="#dc8758"
+                    />
+                    <g>
+                      <path
+                        d="m388.154 231.615h-18.524c-4.204 0-7.611-3.408-7.611-7.611 0-4.204 3.407-7.612 7.611-7.612h18.524c4.204 0 7.611 3.408 7.611 7.612 0 4.203-3.407 7.611-7.611 7.611z"
+                        fill="#e759aa"
+                      />
+                    </g>
+                  </g>
+                </SvgIcon>
+                睇睇尋家中既動物
+              </IconButton>
+            </Link>
+          </Box>
+        </div>
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, scale: 0.5 }}
+        whileInView={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5 }}
+        className={styles["logocontainer"]}
+      >
+        <NGOLogo />
+      </motion.div>
+
+      <div>
+        <Footer />
+      </div>
+    </div>
+  );
+}
+
+export default AdoptionInfoPage;
--- a/givefortune/task3-quote/src/AdoptionInfoPage.module.css
+++ b/givefortune/task3-quote/src/AdoptionInfoPage.module.css
@@ -0,0 +1,106 @@
+.bg-wrapper {
+  justify-self: center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position-y: 30%;
+  background-image: url(../public/BeforeadoptImgs/adoptionpagebg.png);
+}
+
+.adoptionheading {
+  text-align: center;
+}
+
+.headingcontainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+}
+
+.Info-content {
+  line-height: 35px;
+  display: flex;
+  justify-content: center;
+  text-align: left;
+  margin-right: 20px;
+}
+
+.awaitinglistbtn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30px;
+}
+
+.adoptionheading {
+  text-align: center;
+}
+
+#custom-button {
+  background-color: #9ed3f8;
+  color: #2364aa;
+  margin-bottom: 40px;
+}
+
+#custom-button:hover {
+  background-color: #efebce;
+}
+
+.Info-heading {
+  font-size: 30px;
+  display: flex;
+  justify-content: center;
+  font-weight: 700;
+  margin: 0;
+  padding-top: 80px;
+  padding-bottom: 30px;
+  color: #a53f2b;
+}
+
+.precautions {
+  display: flex;
+  justify-content: center;
+  color: #4c230a;
+}
+
+.attention {
+  font-size: 12px;
+  font-weight: 600;
+  color: #280004;
+}
+
+.awaitinglistbtn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30px;
+  width: 100%;
+}
+
+@media only screen and (max-width: 1020px) {
+  .precautions {
+    margin: 15px;
+  }
+  .Info-content {
+    line-height: 25px;
+    font-size: 15px;
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  .bg-wrapper {
+    background-size: 100%;
+    background-position-x: 100%;
+    object-fit: fill;
+  }
+
+  .precautions {
+    margin: 15px;
+  }
+
+  .Info-content {
+    line-height: 25px;
+    font-size: 12px;
+  }
+}
--- a/givefortune/task3-quote/src/CategoryPage.js
+++ b/givefortune/task3-quote/src/CategoryPage.js
@@ -0,0 +1,15 @@
+import FilterBar from "./components/FilterBar.js";
+import NewNavbar from "./NewNavbar.js";
+import Footer from "./components/Footer.js";
+
+function CategoryPage() {
+  return (
+    <>
+      <NewNavbar />
+      <FilterBar />
+      <Footer />
+    </>
+  );
+}
+
+export default CategoryPage;
--- a/givefortune/task3-quote/src/Drawer_NewNavBar.js
+++ b/givefortune/task3-quote/src/Drawer_NewNavBar.js
@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import {
+  Drawer,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import MenuTwoToneIcon from "@mui/icons-material/MenuTwoTone";
+import { Link } from "react-router-dom";
+
+const navButton = [
+  { 登記待領動物: "https://forms.gle/HESZBGAgCoJqW2xp9" },
+  {
+    報失寵物:
+      "https://docs.google.com/forms/d/e/1FAIpQLScomQJmP_29GITVpcB5ipMJGoQhDMGBElZc-WtsRhrLRC2tbw/viewform?usp=sharing",
+  },
+];
+
+const pages = [
+  { 主頁: "Home" },
+  { 關於我們: "About_us" },
+  { 待領養動物: "Category_Page" },
+  { 領養須知: "Adoption_Info_Page" },
+];
+
+const Drawercomp = () => {
+  const [openDrawer, setopenDrawer] = useState(false);
+  return (
+    <React.Fragment>
+      <Drawer open={openDrawer} onClose={() => setopenDrawer(false)}>
+        <List sx={{ width: 130, margin: "5px" }}>
+          {pages.map((page, index) => (
+            <ListItemButton onClick={() => setopenDrawer(false)} key={index}>
+              <ListItemIcon>
+                <Link
+                  style={{ textDecoration: "none" }}
+                  key={Object.values(page)}
+                  to={`/${Object.values(page)}`}
+                >
+                  <ListItemText sx={{ color: "#A53F2B" }}>
+                    {Object.keys(page)}
+                  </ListItemText>
+                </Link>
+              </ListItemIcon>
+            </ListItemButton>
+          ))}
+          {navButton.map((navbtn, index) => (
+            <ListItemButton onClick={() => setopenDrawer(false)} key={index}>
+              <ListItemIcon>
+                <a
+                  href={`${Object.values(navbtn)}`}
+                  style={{ textDecoration: "none" }}
+                >
+                  <ListItemText sx={{ color: "#A53F2B" }}>
+                    {Object.keys(navbtn)}
+                  </ListItemText>
+                </a>
+              </ListItemIcon>
+            </ListItemButton>
+          ))}
+        </List>
+      </Drawer>
+      <IconButton
+        sx={{ color: "white", marginLeft: "auto" }}
+        onClick={() => setopenDrawer(!openDrawer)}
+      >
+        <MenuTwoToneIcon sx={{ color: "#A53F2B" }} />
+      </IconButton>
+    </React.Fragment>
+  );
+};
+
+export default Drawercomp;
--- a/givefortune/task3-quote/src/HKSCDA_animal_info.json
+++ b/givefortune/task3-quote/src/HKSCDA_animal_info.json
--- a/givefortune/task3-quote/src/Homepage.js
+++ b/givefortune/task3-quote/src/Homepage.js
@@ -0,0 +1,24 @@
+import React from "react";
+import NewNavbar from "./NewNavbar.js";
+import Footer from "./components/Footer.js";
+import Shortcut from "./components/Shortcut.js";
+import StarPet from "./components/StarPet.js";
+import MapButtons from "./components/MapButtons.js";
+import AdoptionCalendar from "./components/Calendar.js";
+import MapDisplay from "./components/MapDisplay.js";
+
+function Homepage() {
+  return (
+    <div>
+      <NewNavbar />
+      <StarPet />
+      <Shortcut />
+      <AdoptionCalendar />
+      <MapButtons />
+      <MapDisplay />
+      <Footer />
+    </div>
+  );
+}
+
+export default Homepage;
--- a/givefortune/task3-quote/src/LostAndFoundPage.js
+++ b/givefortune/task3-quote/src/LostAndFoundPage.js
@@ -0,0 +1,17 @@
+import React from "react";
+import NewNavbar from "./NewNavbar";
+import Footer from "./components/Footer";
+import MapDisplay from "./components/MapDisplay";
+import MapButtons from "./components/MapButtons";
+
+const LostAndFound = () => {
+  return (
+    <div>
+      <NewNavbar />
+      <MapButtons />
+      <MapDisplay />
+      <Footer />
+    </div>
+  );
+};
+export default LostAndFound;
--- a/givefortune/task3-quote/src/NewNavbar.js
+++ b/givefortune/task3-quote/src/NewNavbar.js
@@ -0,0 +1,154 @@
+import React, { useState } from "react";
+import {
+  Stack,
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  Tabs,
+  Tab,
+  Box,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import Drawercomp from "./Drawer_NewNavBar.js";
+import { Link } from "react-router-dom";
+import Logo from "./jojachomelogo.png";
+
+const pages = [
+  { 主頁: "Home" },
+  { 關於我們: "About_us" },
+  { 待領動物: "Category_Page" },
+];
+const objKeys = pages.map((el) => Object.keys(el));
+const objValues = pages.map((el) => Object.values(el));
+
+const PAGES = ["主頁", "關於我們", "待領養動物"];
+function Navbar() {
+  const [value, setValue] = useState();
+  const theme = useTheme();
+  const responsive = useMediaQuery(theme.breakpoints.down("md"));
+  console.log(pages);
+  return (
+    <AppBar position="static" sx={{ background: "#F0FFCE" }}>
+      <Toolbar>
+        <Link to={{ pathname: `/Home` }} style={{ textDecoration: "none" }}>
+          <Box
+            mt={2}
+            mb={2}
+            m1={2}
+            component="img"
+            sx={{
+              height: 50,
+              display: "flex",
+              justifyContent: "centre",
+              alignItems: "center",
+              marginRight: "12px",
+            }}
+            alt="JoJacHomeLogo"
+            src={Logo}
+            className="JoJacHomeLogo"
+          />
+        </Link>
+        <Link to={{ pathname: `/Home` }} style={{ textDecoration: "none" }}>
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href="#app-bar-with-responsive-menu"
+            sx={{
+              mr: 2,
+              display: { md: "flex" },
+              fontWeight: 700,
+              letterSpacing: ".3rem",
+              color: "#A53F2B",
+              textDecoration: "none",
+            }}
+          >
+            祖積家
+          </Typography>
+        </Link>
+
+        {responsive ? (
+          <>
+            <Drawercomp />
+          </>
+        ) : (
+          <>
+            <Tabs sx={{ marginLeft: "auto" }}>
+              {pages.map((page, index) => (
+                <Link
+                  style={{ textDecoration: "none" }}
+                  key={index}
+                  to={`/${Object.values(page)}`}
+                >
+                  <Tab
+                    key={index}
+                    label={Object.keys(page)}
+                    sx={{
+                      color: "#584D3D",
+                      fontWeight: 600,
+                    }}
+                  />
+                </Link>
+              ))}
+            </Tabs>
+
+            <Stack direction="row" mt={2} mb={2} ml={2} spacing={3}>
+              <Link
+                to={{
+                  pathname: "/Adoption_Info_Page",
+                }}
+                rel="noopener noreferrer"
+              >
+                <Button
+                  sx={{
+                    marginLeft: "auto",
+                    color: "rgb(70, 30, 10)",
+                    background: "#f9a24bcb",
+                    "&:hover": {
+                      background: "rgb(255, 224, 100)",
+                    },
+                  }}
+                  variant="contained"
+                >
+                  領養須知
+                </Button>
+              </Link>
+              <Button
+                sx={{
+                  marginLeft: "20px",
+                  color: "#2364AA",
+                  background: "#9ED3F8",
+                  "&:hover": {
+                    background: "#EFEBCE",
+                  },
+                }}
+                variant="contained"
+                href="https://forms.gle/HESZBGAgCoJqW2xp9"
+              >
+                登記待領動物
+              </Button>
+              <Button
+                sx={{
+                  marginLeft: "20px",
+                  color: "#2364AA",
+                  background: "#9ED3F8",
+                  "&:hover": {
+                    background: "#EFEBCE",
+                  },
+                }}
+                variant="contained"
+                href="https://docs.google.com/forms/d/e/1FAIpQLScomQJmP_29GITVpcB5ipMJGoQhDMGBElZc-WtsRhrLRC2tbw/viewform?usp=sharing"
+              >
+                報失寵物
+              </Button>
+            </Stack>
+          </>
+        )}
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+export default Navbar;
--- a/givefortune/task3-quote/src/Outline_jojachome.png
+++ b/givefortune/task3-quote/src/Outline_jojachome.png
--- a/givefortune/task3-quote/src/Profile.module.css
+++ b/givefortune/task3-quote/src/Profile.module.css
@@ -0,0 +1,54 @@
+.content {
+  display: flex;
+  flex-wrap: wrap;
+  /* flex-direction: row; */
+  justify-content: space-evenly;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.App {
+  /* width: 40vw; */
+}
+
+.slider {
+  border-radius: 15px;
+  width: 40vw;
+  /* width: 100%; */
+  height: 40vh;
+  object-fit: scale-down;
+}
+.adoptionButton {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#external-link {
+  border: 5px dotted rgb(250, 220, 180);
+  background-color: #f9a24bcb;
+  width: max-content;
+  min-width: 150px;
+  padding: 10px 20px;
+  border-radius: 15px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: rgb(70, 30, 10);
+}
+#external-link :hover {
+  background-color: rgb(255, 224, 100);
+  border: 5px dotted #fff;
+}
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+  .content {
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
+  }
+  .App {
+    max-width: 90%;
+  }
+}
--- a/givefortune/task3-quote/src/SocialMediaIcons/FB.svg
+++ b/givefortune/task3-quote/src/SocialMediaIcons/FB.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 9 4 C 6.2504839 4 4 6.2504839 4 9 L 4 41 C 4 43.749516 6.2504839 46 9 46 L 25.832031 46 A 1.0001 1.0001 0 0 0 26.158203 46 L 31.832031 46 A 1.0001 1.0001 0 0 0 32.158203 46 L 41 46 C 43.749516 46 46 43.749516 46 41 L 46 9 C 46 6.2504839 43.749516 4 41 4 L 9 4 z M 9 6 L 41 6 C 42.668484 6 44 7.3315161 44 9 L 44 41 C 44 42.668484 42.668484 44 41 44 L 33 44 L 33 30 L 36.820312 30 L 38.220703 23 L 33 23 L 33 21 C 33 20.442508 33.05305 20.398929 33.240234 20.277344 C 33.427419 20.155758 34.005822 20 35 20 L 38 20 L 38 14.369141 L 37.429688 14.097656 C 37.429688 14.097656 35.132647 13 32 13 C 29.75 13 27.901588 13.896453 26.71875 15.375 C 25.535912 16.853547 25 18.833333 25 21 L 25 23 L 22 23 L 22 30 L 25 30 L 25 44 L 9 44 C 7.3315161 44 6 42.668484 6 41 L 6 9 C 6 7.3315161 7.3315161 6 9 6 z M 32 15 C 34.079062 15 35.38736 15.458455 36 15.701172 L 36 18 L 35 18 C 33.849178 18 32.926956 18.0952 32.150391 18.599609 C 31.373826 19.104024 31 20.061492 31 21 L 31 25 L 35.779297 25 L 35.179688 28 L 31 28 L 31 44 L 27 44 L 27 28 L 24 28 L 24 25 L 27 25 L 27 21 C 27 19.166667 27.464088 17.646453 28.28125 16.625 C 29.098412 15.603547 30.25 15 32 15 z"/></svg>
--- a/givefortune/task3-quote/src/SocialMediaIcons/IG.svg
+++ b/givefortune/task3-quote/src/SocialMediaIcons/IG.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 16 3 C 8.8324839 3 3 8.8324839 3 16 L 3 34 C 3 41.167516 8.8324839 47 16 47 L 34 47 C 41.167516 47 47 41.167516 47 34 L 47 16 C 47 8.8324839 41.167516 3 34 3 L 16 3 z M 16 5 L 34 5 C 40.086484 5 45 9.9135161 45 16 L 45 34 C 45 40.086484 40.086484 45 34 45 L 16 45 C 9.9135161 45 5 40.086484 5 34 L 5 16 C 5 9.9135161 9.9135161 5 16 5 z M 37 11 A 2 2 0 0 0 35 13 A 2 2 0 0 0 37 15 A 2 2 0 0 0 39 13 A 2 2 0 0 0 37 11 z M 25 14 C 18.936712 14 14 18.936712 14 25 C 14 31.063288 18.936712 36 25 36 C 31.063288 36 36 31.063288 36 25 C 36 18.936712 31.063288 14 25 14 z M 25 16 C 29.982407 16 34 20.017593 34 25 C 34 29.982407 29.982407 34 25 34 C 20.017593 34 16 29.982407 16 25 C 16 20.017593 20.017593 16 25 16 z"/></svg>
--- a/givefortune/task3-quote/src/SocialMediaIcons/X.svg
+++ b/givefortune/task3-quote/src/SocialMediaIcons/X.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 11 4 C 7.1456661 4 4 7.1456661 4 11 L 4 39 C 4 42.854334 7.1456661 46 11 46 L 39 46 C 42.854334 46 46 42.854334 46 39 L 46 11 C 46 7.1456661 42.854334 4 39 4 L 11 4 z M 11 6 L 39 6 C 41.773666 6 44 8.2263339 44 11 L 44 39 C 44 41.773666 41.773666 44 39 44 L 11 44 C 8.2263339 44 6 41.773666 6 39 L 6 11 C 6 8.2263339 8.2263339 6 11 6 z M 13.085938 13 L 22.308594 26.103516 L 13 37 L 15.5 37 L 23.4375 27.707031 L 29.976562 37 L 37.914062 37 L 27.789062 22.613281 L 36 13 L 33.5 13 L 26.660156 21.009766 L 21.023438 13 L 13.085938 13 z M 16.914062 15 L 19.978516 15 L 34.085938 35 L 31.021484 35 L 16.914062 15 z"/></svg>
--- a/givefortune/task3-quote/src/arrow.png
+++ b/givefortune/task3-quote/src/arrow.png
--- a/givefortune/task3-quote/src/catcursor.css
+++ b/givefortune/task3-quote/src/catcursor.css
@@ -0,0 +1,28 @@
+.trailElement {
+  transform: translate(-50%, -50%);
+  position: absolute;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: right;
+  border-radius: 10%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.trailElement#trail_0 {
+  background-image: url("../public/cursorimgs/mouse.png");
+  transition: 0.1s;
+  width: 50px;
+  height: 20px;
+}
+
+.trailElement#trail_1 {
+  background-image: url("../public/cursorimgs/cat.png");
+  transition: 0.4s;
+  width: 80px;
+  height: 60px;
+}
+
+.trailElement.right {
+  transform: translate(-50%, -50%) scaleX(-1);
+}
--- a/givefortune/task3-quote/src/catcursor.js
+++ b/givefortune/task3-quote/src/catcursor.js
@@ -0,0 +1,87 @@
+import React, { useEffect, useRef } from "react";
+import "./catcursor.css";
+
+function Catcursor() {
+  const trailElementsRef = useRef([]);
+  const mouseRef = useRef({ x: 100, y: 100 });
+  const drag = [0.35, 0.3, 0.25, 0.2];
+
+  useEffect(() => {
+    const trailElements = trailElementsRef.current;
+
+    function updateMouseLocations(e) {
+      mouseRef.current = { x: e.pageX, y: e.pageY };
+    }
+
+    function trailTheElements() {
+      for (let x = 0; x < trailElements.length; x++) {
+        trailElements[x] = loop(trailElements[x], x);
+      }
+      requestAnimationFrame(trailTheElements);
+    }
+
+    function loop(trailElement, i) {
+      let x = parseFloat(trailElement.style.left) || 0;
+      let y = parseFloat(trailElement.style.top) || 0;
+
+      let following_x, following_y;
+      if (trailElements[i - 1] !== undefined) {
+        following_x = parseFloat(trailElements[i - 1].style.left);
+        following_y = parseFloat(trailElements[i - 1].style.top);
+      } else {
+        following_x = mouseRef.current.x;
+        following_y = mouseRef.current.y;
+      }
+
+      let x_diff = following_x - x;
+      let y_diff = following_y - y;
+
+      const distance_behind = i === 0 ? 20 : 10;
+
+      x_diff = x_diff > 0 ? x_diff - distance_behind : x_diff + distance_behind;
+      y_diff = y_diff > 0 ? y_diff - distance_behind : y_diff + distance_behind;
+
+      const x_move = x_diff * drag[i];
+      const y_move = y_diff * drag[i];
+
+      x += x_move;
+      y += y_move;
+
+      trailElement.style.left = x + "px";
+      trailElement.style.top = y + "px";
+
+      // Add or remove 'right' class based on cursor direction
+      if (x_move > 0) {
+        trailElement.classList.add("right");
+      } else {
+        trailElement.classList.remove("right");
+      }
+
+      return trailElement;
+    }
+
+    document.addEventListener("mousemove", updateMouseLocations);
+    trailTheElements();
+
+    return () => {
+      document.removeEventListener("mousemove", updateMouseLocations);
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        className="trailElement cursor-trail"
+        ref={(el) => (trailElementsRef.current[0] = el)}
+        id="trail_0"
+      ></div>
+      <div
+        className="trailElement cursor-trail"
+        ref={(el) => (trailElementsRef.current[1] = el)}
+        id="trail_1"
+      ></div>
+    </>
+  );
+}
+
+export default Catcursor;
--- a/givefortune/task3-quote/src/components/AnimalList.js
+++ b/givefortune/task3-quote/src/components/AnimalList.js
@@ -0,0 +1,179 @@
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import styles from "./AnimalList.module.css";
+import { motion } from "framer-motion";
+
+function AnimalList(props) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemPerPage, setItemPerPage] = useState(calculateItemsPerPage());
+  const lastIndex = currentPage * itemPerPage;
+  const firstIndex = lastIndex - itemPerPage;
+  const items = props.data.slice(firstIndex, lastIndex);
+  const numberOfPages = Math.ceil(props.data.length / itemPerPage);
+  const pageNum = [...Array(numberOfPages + 1).keys()].slice(1);
+
+  useEffect(() => {
+    function handleResize() {
+      setItemPerPage(calculateItemsPerPage());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  function calculateItemsPerPage() {
+    const screenWidth = window.innerWidth;
+    if (screenWidth >= 1280) {
+      return 16; // Show 16 items per page for large screens
+    } else if (screenWidth >= 960) {
+      return 12; // Show 12 items per page for medium screens
+    } else {
+      return 8; // Show 8 items per page for small screens
+    }
+  }
+
+  // Pagination motion effect
+  function previousPage() {
+    if (currentPage !== 1) {
+      setCurrentPage(currentPage - 1);
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }
+
+  function changeCurrentPage(chosenPage) {
+    setCurrentPage(chosenPage);
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+
+  function nextPage() {
+    if (currentPage !== pageNum.length) {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      setCurrentPage(currentPage + 1);
+    }
+  }
+
+  // Hover effect
+  const cardVariants = {
+    offscreen: {
+      y: -40,
+    },
+    onscreen: {
+      y: -75,
+
+      transition: {
+        type: "spring",
+        duration: 1,
+      },
+    },
+  };
+
+  return (
+    <div>
+      <div className={styles["image-list-container"]}>
+        <div className={styles["image-list"]}>
+          {items.map((el) => (
+            <Link
+              key={el.name}
+              to={{
+                pathname: `/Category_Page/${el.name}`,
+              }}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ textDecoration: "none" }}
+            >
+              <div className={styles["image-wrapper"]}>
+                <motion.div>
+                  <motion.button
+                    className={styles["motion-button"]}
+                    variants={cardVariants}
+                    initial="offscreen"
+                    whileInView="onscreen"
+                    viewport={{ once: true, amount: 0.8 }}
+                    whileHover={{
+                      y: -89,
+                      scale: 1,
+                      transition: { duration: 1 },
+                    }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <img
+                      src={`${el.image}?w=248&fit=crop&auto=format`}
+                      alt={el.name}
+                      className={styles["bio-image"]}
+                    ></img>
+                  </motion.button>
+                </motion.div>
+                <div className={styles["image-details"]}>
+                  <img
+                    className={styles["paper-box"]}
+                    src="./Imgs/paperBox.svg"
+                    alt="paper box"
+                  ></img>
+                  <div className={styles["pet-info"]}>
+                    {/* Name, gender and age */}
+                    <div className={styles["bioName"]}>{el.name}</div>
+                    <div className={styles["more-details"]}>
+                      <div className={styles["bio-gender-age"]}>
+                        {el.gender === "女" ? (
+                          <img
+                            className={styles["gender-icon"]}
+                            src="./icons/female.svg"
+                            alt="female"
+                          ></img>
+                        ) : (
+                          <img
+                            className={styles["gender-icon"]}
+                            src="./icons/male.svg"
+                            alt="male"
+                          ></img>
+                        )}
+                        {el.age}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+      <nav>
+        <ul className={styles["pagination"]}>
+          <li className={styles["page-item"]}>
+            <button className={styles["page-item"]} onClick={previousPage}>
+              {currentPage === 1 || numberOfPages === 0 ? "  " : "🐕 ⏪"}
+            </button>
+          </li>
+
+          {pageNum.map((eachAnimal, index) => (
+            <div>
+              <li
+                className={`page-item ${
+                  currentPage === eachAnimal ? "active" : ""
+                }`}
+                key={index}
+              >
+                <button
+                  className={styles["page-item"]}
+                  onClick={() => changeCurrentPage(eachAnimal)}
+                >
+                  {eachAnimal}
+                </button>
+              </li>
+            </div>
+          ))}
+          <li className={styles["page-item"]}>
+            <button className={styles["page-item"]} onClick={nextPage}>
+              {currentPage === pageNum.length || numberOfPages === 0
+                ? "  "
+                : "⏩ 🐈"}
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+}
+
+export default AnimalList;
--- a/givefortune/task3-quote/src/components/AnimalList.module.css
+++ b/givefortune/task3-quote/src/components/AnimalList.module.css
@@ -0,0 +1,108 @@
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 30px 60px;
+}
+
+.image-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  justify-content: center;
+  /* width: fit-content; */
+  padding: 30px;
+  height: 290px;
+}
+
+.bio-image {
+  width: 210px;
+  max-height: 250px;
+  min-height: 200px;
+  object-fit: cover;
+  border-radius: 30px;
+  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3));
+  position: relative;
+  overflow: hidden;
+}
+
+.image-details {
+  /* border: 1px solid brown; */
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  /* bottom: 0; */
+  /* bottom: 20%; */
+  /* width: fit-content; */
+  /* height: fit-content; */
+  /* padding: 3px; */
+}
+
+.paper-box {
+  /* position: relative; */
+  width: 300px;
+  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3));
+  /* bottom: 20%; */
+}
+
+.pet-info {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin: 0 50px 0 0;
+}
+
+.bioName {
+  /* position: absolute; */
+  color: rgb(70, 30, 10);
+  font-size: 2rem;
+  font-weight: 800;
+}
+
+.more-details {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.bio-gender-age {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  font-size: 1rem;
+  color: rgb(155, 60, 25);
+}
+.gender-icon {
+  width: 20px;
+}
+/* motion style */
+
+.motion-button {
+  border: none;
+  background-color: unset;
+}
+
+.pagination {
+  display: flex;
+  list-style-type: none;
+  justify-content: center;
+  gap: 30px;
+  padding: 20px;
+}
+
+.page-item {
+  background-color: white;
+  border: transparent;
+  font-size: 1.4rem;
+}
+
+.page-item:hover {
+  background-color: yellow;
+}
--- a/givefortune/task3-quote/src/components/AnimalsProfile.js
+++ b/givefortune/task3-quote/src/components/AnimalsProfile.js
@@ -0,0 +1,92 @@
+import { useParams } from "react-router-dom";
+import HKSCDA_info from "../HKSCDA_animal_info.json";
+import { Button, Stack } from "@mui/material";
+import NewNavbar from "../NewNavbar";
+import Footer from "./Footer";
+import ImageG from "./ImageGallery";
+import "react-image-gallery/styles/css/image-gallery.css";
+import styles from "../Profile.module.css";
+import { motion } from "framer-motion";
+
+function AnimalsProfile() {
+  let { animal_Name } = useParams();
+  let unfilteredInfo = [];
+  for (let keys in HKSCDA_info) {
+    unfilteredInfo.push(...HKSCDA_info[keys]);
+  }
+  let animalInfo = unfilteredInfo.filter((el) => el.name === animal_Name);
+  return (
+    <div>
+      <NewNavbar />
+      <br></br>
+      <br></br>
+      <div className={styles["content"]}>
+        <ImageG data={animalInfo} />
+        <motion.div animate={{ y: 50 }} transition={{ duration: 0.4 }}>
+          <h1>{animalInfo[0].name}</h1>
+          <h4>
+            我係{animalInfo[0].gender}仔 {animalInfo[0].species}, 我
+            {animalInfo[0].age}大啦～
+          </h4>
+          <h4>
+            我現時
+            {
+              <em>
+                <span className={styles["underline"]}>
+                  {animalInfo[0].chipped}
+                </span>
+              </em>
+            }
+            晶片, 而且
+            <em>
+              <span className={styles["underline"]}>
+                {animalInfo[0].castrated}
+              </span>
+            </em>
+            ~
+          </h4>
+          <br></br>
+          <p>
+            性別: {animalInfo[0].gender}({animalInfo[0].castrated})
+          </p>
+          <p>歲數: {animalInfo[0].age}</p>
+          <p>晶片: {animalInfo[0].chipped}</p>
+
+          <br></br>
+        </motion.div>
+      </div>
+      <br></br>
+      <br></br>
+      <br></br>
+      <br></br>
+      <br></br>
+      <br></br>
+      <motion.div
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true, amount: 0.4 }}
+        transition={{ duration: 1.5 }}
+        className={styles["adoptionButton"]}
+      >
+        <p>狗狗準備好返屋企，你準備好未?</p>
+        <h3>領養前，停一停，諗一諗</h3>
+        <Stack spacing={2}>
+          <a href={`${animalInfo[0].href}`}>
+            <Button id={styles["external-link"]} variant="contained">
+              去了解我更多
+            </Button>
+          </a>
+        </Stack>
+      </motion.div>
+      <br></br>
+      <br></br>
+      <br></br>
+      <br></br>
+      <br></br>
+      <br></br>
+      <Footer />
+    </div>
+  );
+}
+
+export default AnimalsProfile;
--- a/givefortune/task3-quote/src/components/Calendar.js
+++ b/givefortune/task3-quote/src/components/Calendar.js
@@ -0,0 +1,123 @@
+import Calendar from "react-calendar";
+import { useState } from "react";
+import "react-calendar/dist/Calendar.css";
+import styles from "./Calendar.module.css";
+
+function AdoptionCalendar() {
+  const [value, onChange] = useState(new Date());
+  const dummyAdoptionDay = [
+    {
+      date: new Date(2024, 4, 26),
+      event: "領養日 - 長洲愛護動物小組 x Q-Pets",
+      location: "荔枝角D2 Place 2期3樓301-303號鋪（Q-Pets門市）",
+      startTime: 14,
+      endTime: 17,
+      eventLink:
+        "https://www.facebook.com/photo.php?fbid=474201651932951&set=pb.100080293603628.-2207520000&type=3",
+    },
+    {
+      date: new Date(2024, 4, 26),
+      event: "Dog & Puppy Adoption Sundays - Kirsten's Zoo",
+      location: "Staunton's Soho, Central",
+      startTime: 14,
+      endTime: 17,
+      eventLink: "https://kirstenszoo.com/",
+    },
+    {
+      date: new Date(2024, 4, 12),
+      event: "Dog & Puppy Adoption Sundays - Kirsten's Zoo",
+      location: "Staunton's Soho, Central",
+      startTime: 14,
+      endTime: 17,
+      eventLink: "https://kirstenszoo.com/",
+    },
+    {
+      date: new Date(2024, 3, 14),
+      event: "Dog & Puppy Adoption Sundays - Kirsten's Zoo",
+      location: "Staunton's Soho, Central",
+      startTime: 15,
+      endTime: 17,
+      eventLink: "https://kirstenszoo.com/news-events/adoption-events/",
+    },
+    {
+      date: new Date(2024, 2, 17),
+      event: "毛孩領養日 - Tailslantau",
+      location: "梅窩梅窩碼頭等0號銀礦中心大廈",
+      startTime: 15,
+      endTime: 17,
+      eventLink: "https://zh.tailslantau.org/events",
+    },
+  ];
+  const filteredEvents = dummyAdoptionDay.filter(
+    (event) =>
+      event.date.getMonth() === value.getMonth() ||
+      event.date.getMonth() === value.getMonth() + 1
+  );
+
+  const tileContent = ({ date }) => {
+    const formattedDate = date.toDateString();
+    const matchingEvents = dummyAdoptionDay.filter(
+      (event) => event.date.toDateString() === formattedDate
+    );
+    return matchingEvents.length > 0 ? (
+      <div className={styles["tile-content"]}>
+        <div className={styles["dot"]}></div>
+      </div>
+    ) : null;
+  };
+  const formatDate = (date) => {
+    return `${date.getFullYear()}-${(date.getMonth() + 1)
+      .toString()
+      .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} (${
+      ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][date.getDay()]
+    })`;
+  };
+
+  return (
+    <div className={styles["calendar-section"]}>
+      <div className={styles["calendarTitle"]}>
+        唔想網上交友？可以來偶遇一下命中"主"子🐈
+      </div>
+      <div className={styles["calanderPlusDetailsWrapper"]}>
+        <div className={styles["calanderPlusDetails"]}>
+          <Calendar
+            onChange={onChange}
+            value={value}
+            tileContent={tileContent}
+            tileClassName="custom-tile"
+            className={styles["react-calendar"]}
+          />
+        </div>
+        <div>
+          <div className={styles["calendarDetailsWrapper"]}>
+            <div className={styles["calendar-month"]}>
+              {`${value.getMonth() + 1}月至${value.getMonth() + 2}月時間表`}
+            </div>
+            {filteredEvents.map((el, index) => (
+              <div key={index} className={styles["calendarDetails"]}>
+                <span className={styles["eventLocation"]}>
+                  活動:{" "}
+                  <a
+                    href={el.eventLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={styles.eventLink}
+                  >
+                    {el.event}
+                  </a>{" "}
+                  | | 地點: {el.location}
+                </span>
+                <p className={styles["eventDate"]}>
+                  日期: {formatDate(el.date)} | | 時間: {el.startTime}:00 -{" "}
+                  {el.endTime}:00
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdoptionCalendar;
--- a/givefortune/task3-quote/src/components/Calendar.module.css
+++ b/givefortune/task3-quote/src/components/Calendar.module.css
@@ -0,0 +1,121 @@
+.tile-content {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  overflow: hidden;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  background-color: #f9a24bcb;
+  border-radius: 50%;
+  /*margin: 0;*/
+  border-radius: 50%;
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.custom-tile {
+  position: relative;
+}
+.custom-tile .dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.calanderPlusDetailsWrapper {
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+  flex-wrap: wrap;
+  /* flex-wrap: wrap; */
+}
+.calanderPlusDetails {
+  display: flex;
+  align-items: center;
+}
+.calendarDetails {
+  padding: 5px 0 0 20px;
+  border-left: 4px ridge rgb(205, 94, 38);
+}
+
+.calendar-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: antiquewhite;
+  padding: 30px;
+}
+.calendarTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2.4rem;
+  color: rgb(70, 30, 10);
+  padding: 20px;
+}
+
+/* right section  */
+.calendarDetailsWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 10px;
+  width: 40vw;
+}
+
+.calendar-month {
+  padding: 10px 0;
+  font-size: 1.2rem;
+  font-weight: 800;
+  color: rgb(169, 62, 9);
+}
+.eventLocation {
+  color: rgb(202, 124, 52);
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.eventDate {
+  border-bottom: 3px dotted rgb(151, 144, 144);
+  font-weight: 500;
+  color: rgb(70, 30, 10);
+  /* padding: 3px; */
+}
+
+.eventLink {
+  color: rgb(255, 185, 93); /* Change the color to your desired value */
+  text-decoration: none; /* Remove the underline */
+}
+
+.eventLink:hover {
+  color: rgb(250, 213, 65); /* Change the hover color to your desired value */
+  text-decoration: underline; /* Add an underline on hover */
+}
+
+:global(.react-calendar) {
+  max-width: 400px;
+  max-height: 400px;
+  color: #222;
+  border-radius: 10px;
+  border: transparent;
+}
+:global(.react-calendar__navigation__label) {
+  color: #f9a24bcb;
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+:global(.react-calendar__tile--now) {
+  background-color: wheat;
+  border-radius: 50%;
+}
+:global(.react-calendar__till) {
+  max-width: 40px;
+  max-height: 40px;
+  padding: 0;
+}
--- a/givefortune/task3-quote/src/components/FilterBar.js
+++ b/givefortune/task3-quote/src/components/FilterBar.js
@@ -0,0 +1,213 @@
+import React, { useState } from "react";
+import HKSCDA_info from "../HKSCDA_animal_info.json";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import AnimalList from "./AnimalList.js";
+import Shortcut from "./Shortcut.js";
+import styles from "./FilterBar.module.css";
+
+function FilterBar() {
+  let unfilteredInfo = [];
+  for (let keys in HKSCDA_info) {
+    unfilteredInfo.push(...HKSCDA_info[keys]);
+  }
+
+  const handleSpeciesChange = (e) => {
+    setSelectedSpecies(e.target.value);
+  };
+  const handleGenderChange = (e) => {
+    setSelectedGender(e.target.value);
+  };
+
+  const handleChipChange = (e) => {
+    setSelectedChip(e.target.value);
+  };
+
+  const handleCastratedChange = (e) => {
+    setSelectedCastrated(e.target.value);
+  };
+
+  const [selectedSpecies, setSelectedSpecies] = useState("all");
+  const [selectedGender, setSelectedGender] = useState("all");
+  const [selectedChip, setSelectedChip] = useState("all");
+  const [selectedCastrated, setSelectedCastrated] = useState("all");
+  const [filteredList, setFilteredList] = useState([]);
+
+  const handleFilterOnClick = () => {
+    const newFilteredList = unfilteredInfo.filter((el) => {
+      return (
+        (selectedSpecies === "all" || selectedSpecies === el.species) &&
+        (selectedGender === "all" || selectedGender === el.gender) &&
+        (selectedChip === "all" || selectedChip === el.chipped) &&
+        (selectedCastrated === "all" || selectedCastrated === el.castrated)
+      );
+    });
+    setFilteredList(newFilteredList);
+  };
+  const handleClearOnClick = () => {
+    setSelectedSpecies("all");
+    setSelectedGender("all");
+    setSelectedChip("all");
+    setSelectedCastrated("all");
+  };
+
+  return (
+    <div className={styles["categoryPage-container"]}>
+      <Shortcut />
+      <div className={styles["filterBar-wrapper"]}>
+        <div className={styles["drop-down-wrapper"]}>
+          <div className={styles["group"]}>
+            <div className={styles["filterBar"]}>
+              <FormControl fullWidth>
+                <InputLabel
+                  id={styles["speciesFiltering"]}
+                  className={styles["selection"]}
+                >
+                  物種
+                </InputLabel>
+                <Select
+                  labelId="speciesFiltering"
+                  id={styles["chosenSpecies"]}
+                  className={styles["selection"]}
+                  label="品種"
+                  onChange={handleSpeciesChange}
+                  value={selectedSpecies}
+                >
+                  <MenuItem value="all" className={styles["option"]}>
+                    所有
+                  </MenuItem>
+                  <MenuItem value="dog" className={styles["option"]}>
+                    狗狗
+                  </MenuItem>
+                  <MenuItem value="cat" className={styles["option"]}>
+                    貓貓
+                  </MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+
+            <div className={styles["filterBar"]}>
+              <FormControl fullWidth>
+                <InputLabel
+                  id="genderFiltering"
+                  className={styles["selection"]}
+                >
+                  性別
+                </InputLabel>
+                <Select
+                  labelId="genderFiltering"
+                  id="chosenGender"
+                  className={styles["selection"]}
+                  label="性別"
+                  onChange={handleGenderChange}
+                  value={selectedGender}
+                >
+                  <MenuItem value="all" className={styles["option"]}>
+                    所有
+                  </MenuItem>
+                  <MenuItem value="女" className={styles["option"]}>
+                    女
+                  </MenuItem>
+                  <MenuItem value="男" className={styles["option"]}>
+                    男
+                  </MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+          </div>
+          <div className={styles["group"]}>
+            <div className={styles["filterBar"]}>
+              <FormControl fullWidth>
+                <InputLabel id="chipFiltering" className={styles["selection"]}>
+                  晶片
+                </InputLabel>
+                <Select
+                  labelId="chipFiltering"
+                  id="is_Chip"
+                  className={styles["selection"]}
+                  label="晶片"
+                  onChange={handleChipChange}
+                  value={selectedChip}
+                >
+                  <MenuItem value="all" className={styles["option"]}>
+                    所有
+                  </MenuItem>
+                  <MenuItem value="未植入" className={styles["option"]}>
+                    未植入
+                  </MenuItem>
+                  <MenuItem value="已植入" className={styles["option"]}>
+                    已植入
+                  </MenuItem>
+                  <MenuItem value="/" className={styles["option"]}>
+                    未知
+                  </MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+
+            <div className={styles["filterBar"]}>
+              <FormControl fullWidth>
+                <InputLabel
+                  id="castratedFiltering"
+                  className={styles["selection"]}
+                >
+                  絕育
+                </InputLabel>
+                <Select
+                  labelId="castratedFiltering"
+                  id="is_castrated"
+                  className={styles["selection"]}
+                  label="絕育"
+                  onChange={handleCastratedChange}
+                  value={selectedCastrated}
+                >
+                  <MenuItem value="all" className={styles["option"]}>
+                    所有
+                  </MenuItem>
+                  <MenuItem value="未絕育" className={styles["option"]}>
+                    未絕育
+                  </MenuItem>
+                  <MenuItem value="已絕育" className={styles["option"]}>
+                    已絕育
+                  </MenuItem>
+                  <MenuItem value="/" className={styles["option"]}>
+                    未知
+                  </MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+          </div>
+        </div>
+        <div className={styles["filterClearButton-wrapper"]}>
+          <div className={styles["filterClearButton"]}>
+            <button
+              className={styles["filtering"]}
+              id="filterBtn"
+              onClick={handleFilterOnClick}
+            >
+              篩選
+            </button>
+          </div>
+          <div className={styles["filterClearButton"]}>
+            <button
+              className={styles["clearAll"]}
+              id="clearAllBtn"
+              onClick={handleClearOnClick}
+            >
+              清除
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <AnimalList
+          data={filteredList.length > 0 ? filteredList : unfilteredInfo}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default FilterBar;
--- a/givefortune/task3-quote/src/components/FilterBar.module.css
+++ b/givefortune/task3-quote/src/components/FilterBar.module.css
@@ -0,0 +1,159 @@
+.filterBar-wrapper {
+  /* display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 20px; */
+  /* margin: 20px; */
+  /* display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  padding: 60px; */
+  margin: 0 30px 80px 30px;
+}
+/* Drop-down Buttons */
+.drop-down-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+  /* flex: 1 !important; */
+  padding: 20px;
+}
+.group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+  flex: 1 !important;
+}
+
+.filterBar {
+  flex: 1;
+}
+.selection {
+  color: rgb(70, 30, 10) !important;
+  font-size: 1rem !important;
+  font-weight: 600 !important;
+  /* min-width: 150px !important; */
+  flex: 1 !important;
+}
+.option {
+  color: rgb(70, 30, 10) !important;
+  font-size: 1rem !important;
+  /* font-weight: 600; */
+}
+
+/* Buttons */
+.filterClearButton-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: 10px;
+  flex-wrap: wrap;
+  /* min-height: 40px; */
+}
+
+.filterClearButton {
+  /* flex: 1; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.filtering {
+  /* min-width: 95%;
+  min-height: 80%;
+  border-radius: 5px;
+  color: white;
+  background-color: rgb(255, 128, 82);
+  border: 2px solid rgb(255, 128, 82); */
+  border: 5px dotted rgb(250, 220, 180);
+  background-color: #f9a24bcb;
+  width: max-content;
+  min-width: 150px;
+  padding: 10px 20px;
+  border-radius: 15px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: rgb(70, 30, 10);
+  /* flex: 1; */
+}
+
+.clearAll {
+  /* min-width: 95%;
+  min-height: 80%;
+  border-radius: 5px;
+  background-color: white;
+  color: rgb(255, 128, 82);
+  border: 2px solid rgb(255, 128, 82); */
+  border: 5px dotted rgb(250, 220, 180);
+  background-color: #fff;
+  width: max-content;
+  min-width: 150px;
+  padding: 10px 20px;
+  border-radius: 15px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: rgb(70, 30, 10);
+  /* flex: 1; */
+}
+
+.filtering:hover {
+  /* background-color: white;
+  color: rgb(255, 128, 82); */
+  background-color: rgb(255, 224, 100);
+  border: 5px dotted #fff;
+  /* color: white; */
+}
+.clearAll:hover {
+  /* background-color: rgb(255, 128, 82); */
+  /* color: white;
+  border: 5px dotted #fff; */
+  background-color: rgb(255, 224, 100);
+  border: 5px dotted #fff;
+}
+
+/* 
+@media (min-width: 1280px) {
+  .filterBar-wrapper {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+@media (min-width: 960px) and (max-width: 1000px) {
+  .filterBar-wrapper {
+    grid-template-columns: repeat(2, 1fr);
+    margin-bottom: 70px;
+  }
+  .filterBar {
+    margin: 10px;
+  }
+
+  .filtering {
+    justify-self: flex-end;
+  }
+
+  .clearAll {
+    justify-self: flex-start;
+  }
+} */
+
+/* @media (max-width: 959px) {
+  .filterBar-wrapper {
+    grid-template-columns: repeat(1, 1fr);
+  }
+  .filterBar {
+    margin: 10px;
+  }
+  .filtering {
+    min-width: 100%;
+    min-height: 100%;
+  }
+
+  .clearAll {
+    min-width: 100%;
+    min-height: 100%;
+  }
+} */
--- a/givefortune/task3-quote/src/components/Footer.js
+++ b/givefortune/task3-quote/src/components/Footer.js
@@ -0,0 +1,143 @@
+import React from "react";
+import { Box, Container, Grid, Typography } from "@mui/material";
+import FB from "../SocialMediaIcons/FB.svg";
+import IG from "../SocialMediaIcons/IG.svg";
+import X from "../SocialMediaIcons/X.svg";
+import outlinejojachomelogo from "../Outline_jojachome.png";
+import style from "./Footer.module.css";
+
+export const Footer = () => {
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        height: "350px",
+        backgroundColor: "#F0FFCE",
+        paddingTop: "1rem",
+        paddingBottom: "1rem",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Container maxWidth="lg">
+        <Grid
+          container
+          direction="column"
+          alignItems="center"
+          justifyContent="center"
+          sx={{ height: "100%" }}
+        >
+          <Grid item>
+            <img
+              src={outlinejojachomelogo}
+              alt="JoJacHome Logo"
+              style={{ width: "80px", height: "auto", marginTop: "20px" }}
+            />
+          </Grid>
+          <br />
+          <Grid item sx={{ textAlign: "center" }}>
+            <Typography color="#A53F2B" variant="h5" fontWeight={700}>
+              祖積家
+            </Typography>
+            <Typography color="#000000" sx={{ fontSize: "14px" }}>
+              "俾小動物一個家！"
+            </Typography>
+          </Grid>
+          <br />
+          <Grid item sx={{ marginBottom: "1rem" }}>
+            <Grid
+              container
+              display="flex"
+              spacing={4}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Grid item justifyContent="center" mt={3}>
+                <a href="https://www.facebook.com/">
+                  <img
+                    src={FB}
+                    alt="Facebook Icon"
+                    style={{ width: "30px", height: "30px" }}
+                    className={style["social-icon"]}
+                  />
+                </a>
+              </Grid>
+              <Grid item justifyContent="center" mt={3}>
+                <a href="https://www.instagram.com/">
+                  <img
+                    src={IG}
+                    alt="Instagram Icon"
+                    style={{ width: "30px", height: "30px" }}
+                    className={style["social-icon"]}
+                  />
+                </a>
+              </Grid>
+              <Grid item justifyContent="center" mt={3}>
+                <a href="https://twitter.com/home/">
+                  <img
+                    src={X}
+                    alt="X Icon"
+                    style={{ width: "30px", height: "30px" }}
+                    className={style["social-icon"]}
+                  />
+                </a>
+              </Grid>
+            </Grid>
+          </Grid>
+          <br />
+          <Grid item>
+            <Typography
+              color="#000000"
+              variant="subtitle1"
+              align="center"
+              sx={{ fontSize: "14px", marginTop: "0px", textAlign: "center" }}
+            >
+              到底啦！Subscribe我哋Social Media, 了解最新&更多資訊！
+            </Typography>
+            <br />
+            <Typography
+              color="#000000"
+              variant="subtitle1"
+              align="center"
+              sx={{
+                fontSize: "14px",
+                marginTop: "0px",
+                textAlign: "center",
+                "& a": {
+                  color: "#0077b6",
+                  textDecoration: "none",
+                  "&:hover": {
+                    textDecoration: "underline",
+                  },
+                },
+              }}
+            >
+              如有任何合作，歡迎電郵至：
+              <a href="mailto:jojac.home@hkofficial.com">
+                jojac.home@hkofficial.com
+              </a>
+            </Typography>
+            <br />
+            <Typography
+              color="#808080"
+              variant="subtitle1"
+              sx={{
+                fontSize: "12px",
+                marginBottom: "10px",
+                marginTop: "0px",
+                textAlign: "center",
+              }}
+            >
+              &copy; {new Date().getFullYear()} JoJackHome Love Unlimited
+              Company 祖積家愛心無限公司 | All Rights Reserved
+            </Typography>
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+
+export default Footer;
--- a/givefortune/task3-quote/src/components/Footer.module.css
+++ b/givefortune/task3-quote/src/components/Footer.module.css
@@ -0,0 +1,7 @@
+.social-icon {
+  transition: 0.5s;
+}
+
+.social-icon:hover {
+  transform: translateY(-10px);
+}
--- a/givefortune/task3-quote/src/components/ImageGallery.js
+++ b/givefortune/task3-quote/src/components/ImageGallery.js
@@ -0,0 +1,37 @@
+import ImageGallery from "react-image-gallery";
+import "react-image-gallery/styles/css/image-gallery.css";
+import styles from "../Profile.module.css";
+
+const ImageG = (props) => {
+  const images = [
+    {
+      original: props.data[0].image,
+      thumbnail: props.data[0].image,
+    },
+    {
+      original: "../icons/HKSCDA_logo.jpeg",
+      thumbnail: "../icons/HKSCDA_logo.jpeg",
+    },
+  ];
+  return (
+    <div className={styles["App"]}>
+      <ImageGallery
+        items={images}
+        showPlayButton={false}
+        slideOnThumbnailOver={true}
+        autoPlay={true}
+        slideInterval={8000}
+        renderItem={(item) => (
+          <img
+            src={item.original}
+            className={styles["slider"]}
+            alt={item.originalAlt}
+            title={item.originalTitle}
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+export default ImageG;
--- a/givefortune/task3-quote/src/components/MapButtons.js
+++ b/givefortune/task3-quote/src/components/MapButtons.js
@@ -0,0 +1,162 @@
+import React from "react";
+import { IconButton, SvgIcon } from "@mui/material";
+import { Link } from "react-router-dom";
+import styles from "./MapButtons.module.css";
+
+const MapButtons = () => {
+  return (
+    <div className={styles["content-wrapper"]}>
+      <div className={styles["title-wrapper"]}>
+        <img
+          className={styles["detective-dog"]}
+          src="./Imgs/detective_dog.svg"
+          alt="deco"
+        ></img>
+        <div className={styles["content"]}>
+          <div className={styles["title"]}>有狗狗貓貓走失咗? 搵禾哋報料 ⬇️</div>
+          <div className={styles["button-container"]}>
+            <Link
+              to={
+                "https://docs.google.com/forms/d/e/1FAIpQLScomQJmP_29GITVpcB5ipMJGoQhDMGBElZc-WtsRhrLRC2tbw/viewform?usp=sharing"
+              }
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ textDecoration: "none" }}
+            >
+              <IconButton id={styles["found-pet"]}>
+                <SvgIcon
+                  id={styles["icon"]}
+                  height="512pt"
+                  viewBox="0 0 512 512.00042"
+                  width="512pt"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m190.691406 375.855469v-7.390625c0-16.484375 6.679688-32.613282 18.328125-44.257813l24.347657-24.332031-21.242188-21.242188-24.332031 24.347657c-11.644531 11.648437-27.773438 18.328125-44.257813 18.328125h-7.390625c-33.59375 0-54.046875 20.316406-54.617187 20.941406l-64.910156 67.238281c-23.386719 24.070313-21.3125 61.855469 1.355468 84.539063 22.683594 22.667968 60.46875 24.742187 84.535156 1.355468l67.242188-64.910156c.625-.570312 20.941406-21.027344 20.941406-54.617187zm0 0"
+                    fill="#3dc6ff"
+                  />
+                  <path
+                    d="m336.332031 351.332031c-96.863281 0-175.664062-78.804687-175.664062-175.664062 0-96.863281 78.800781-175.667969 175.664062-175.667969s175.667969 78.804688 175.667969 175.667969c0 96.859375-78.804688 175.664062-175.667969 175.664062zm0 0"
+                    fill="#8bddff"
+                  />
+                  <path
+                    d="m336.332031 30c-80.320312 0-145.664062 65.347656-145.664062 145.667969 0 80.320312 65.34375 145.664062 145.664062 145.664062 80.320313 0 145.667969-65.34375 145.667969-145.664062 0-80.320313-65.347656-145.667969-145.667969-145.667969zm0 0"
+                    fill="#f3eee9"
+                  />
+                  <g fill-rule="evenodd">
+                    <path
+                      d="m304.199219 96.402344c8.28125 0 15 6.71875 15 15 0 8.273437-6.71875 15-15 15s-15-6.726563-15-15c0-8.28125 6.71875-15 15-15zm0 0"
+                      fill="#db8a53"
+                    />
+                    <path
+                      d="m256 136.570312c8.28125 0 15 6.71875 15 15 0 8.273438-6.71875 15-15 15s-15-6.726562-15-15c0-8.28125 6.71875-15 15-15zm0 0"
+                      fill="#db8a53"
+                    />
+                    <path
+                      d="m416.664062 136.570312c8.28125 0 15 6.71875 15 15 0 8.273438-6.71875 15-15 15-8.277343 0-15-6.726562-15-15 0-8.28125 6.722657-15 15-15zm0 0"
+                      fill="#db8a53"
+                    />
+                    <path
+                      d="m368.464844 96.402344c8.28125 0 15 6.71875 15 15 0 8.273437-6.71875 15-15 15-8.277344 0-15-6.726563-15-15 0-8.28125 6.722656-15 15-15zm0 0"
+                      fill="#db8a53"
+                    />
+                  </g>
+                  <path
+                    d="m352.398438 254.9375h-32.132813c-26.449219 0-47.132813-21.554688-47.132813-47.132812 0-34.851563 28.351563-63.203126 63.199219-63.203126 34.847657 0 63.199219 28.351563 63.199219 63.203126 0 25.597656-20.695312 47.132812-47.132812 47.132812zm0 0"
+                    fill="#db8a53"
+                  />
+                </SvgIcon>
+                發現疑似走失寵物
+              </IconButton>
+            </Link>
+            <Link
+              to={
+                "https://docs.google.com/forms/d/e/1FAIpQLScu0EI6U7zWtdvCJNvBkK5Fy1hF3S6RO7fNGEB0-b9pxUUhkg/viewform?usp=sharing"
+              }
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ textDecoration: "none" }}
+            >
+              <IconButton id={styles["lost-pet"]}>
+                <SvgIcon
+                  id={styles["icon"]}
+                  xmlns="http://www.w3.org/2000/svg"
+                  x="0px"
+                  y="0px"
+                  viewBox="0 0 512 512"
+                >
+                  <style type="text/css"></style>
+
+                  <g>
+                    <path
+                      class="st0"
+                      d="M289.4,197.1h32.6v124h-32.6V197.1z"
+                      fill="#7A6D79"
+                    />
+                    <path
+                      class="st1"
+                      d="M179.1,217V17.5c0-5.5,4.5-10,10-10h233.1c5.5,0,10,4.5,10,10V217c0,5.5-4.5,10-10,10H189.1
+		C183.6,227,179.1,222.5,179.1,217z"
+                      fill="#EFEDEF"
+                    />
+                    <g>
+                      <ellipse
+                        class="st2"
+                        cx="305.6"
+                        cy="66.7"
+                        rx="14.6"
+                        ry="14.6"
+                      />
+                      <ellipse
+                        class="st2"
+                        cx="356.9"
+                        cy="90.5"
+                        rx="14.6"
+                        ry="14.6"
+                      />
+                      <ellipse
+                        class="st2"
+                        cx="254.3"
+                        cy="90.5"
+                        rx="14.6"
+                        ry="14.6"
+                      />
+                      <path
+                        class="st2"
+                        d="M338.9,135.2c-3-1.1-5.4-3.5-6.9-6.4c-4.8-9.7-14.8-16.3-26.3-16.3s-21.5,6.6-26.3,16.3
+			c-1.4,2.9-3.8,5.2-6.9,6.4c-8.8,3.3-15.1,11.8-15.1,21.8c0,12.8,10.4,23.3,23.3,23.3h50.2c12.8,0,23.3-10.4,23.3-23.3
+			C354,147,347.7,138.5,338.9,135.2L338.9,135.2z"
+                        fill="#E19974"
+                      />
+                    </g>
+                    <path
+                      class="st3"
+                      d="M350.2,342.1c2.4-2.6,3.8-6.1,3.8-10c0-3.8-1.4-7.3-3.8-10c-1.7-1.9-1.6-4.7,0.1-6.7c2.4-2.8,3.8-6.4,3.7-10.4
+		c-0.3-8.1-7.3-14.4-15.4-14.4h-49.2v-30.4h-13.9c-12.1,0-22.9,7.8-26.7,19.3l-7.9,24.2c-1.8,5.6-5.2,10.5-9.7,14.3l-92.5,77.6
+		l47.5,56.7l58-48.6c2.9-2.4,6.5-3.7,10.2-3.7h76.1c8.1,0,15.2-6.6,15.4-14.7c0-2.5-0.5-4.9-1.6-7c-1.2-2.4-0.3-5.3,2.1-6.7
+		c4.6-2.6,7.7-7.4,7.7-13.1c0-3.8-1.4-7.3-3.8-10C348.5,346.8,348.5,344,350.2,342.1L350.2,342.1z"
+                      fill="#FFCEBF"
+                    />
+                    <path
+                      class="st4"
+                      d="M79.9,431.7l76-63.8l61.1,72.8l-76,63.8L79.9,431.7z"
+                      fill="#5F99D7"
+                    />
+                    <path
+                      class="st5"
+                      d="M166,353.5l66.9,79.7c3.6,4.3,3,10.6-1.2,14.2l-10.7,9c-4.3,3.6-10.6,3-14.2-1.2l-66.9-79.7
+		c-3.6-4.3-3-10.6,1.2-14.2l10.7-9C156,348.7,162.4,349.2,166,353.5z"
+                      fill="#5DE1C4"
+                    />
+                  </g>
+                </SvgIcon>
+                主子唔見咗
+              </IconButton>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default MapButtons;
--- a/givefortune/task3-quote/src/components/MapButtons.module.css
+++ b/givefortune/task3-quote/src/components/MapButtons.module.css
@@ -0,0 +1,75 @@
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  /* width: 100%; */
+  margin: 30px 20px;
+}
+
+.title-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 20px;
+}
+.detective-dog {
+  max-width: 150px;
+  max-height: 150px;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  width: auto;
+}
+.title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2.1rem;
+}
+.button-container {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+#found-pet {
+  border: 5px dotted rgb(250, 220, 180);
+  background-color: #fff;
+  width: fit-content;
+  padding: 0 10px 0 0;
+  border-radius: 15px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: rgb(70, 30, 10);
+}
+#found-pet:hover {
+  background-color: rgb(255, 224, 100);
+  border: 5px dotted #fff;
+}
+
+#icon {
+  width: 40px;
+  height: 40px;
+  padding: 10px;
+}
+
+#lost-pet {
+  border: 5px dotted rgb(250, 220, 180);
+  background-color: #f9a24bcb;
+  width: fit-content;
+  padding: 0 10px 0 0;
+  border-radius: 15px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: rgb(70, 30, 10);
+}
+
+#lost-pet:hover {
+  background-color: rgb(255, 224, 100);
+  border: 5px dotted #fff;
+}
--- a/givefortune/task3-quote/src/components/MapDisplay.js
+++ b/givefortune/task3-quote/src/components/MapDisplay.js
@@ -0,0 +1,135 @@
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import iconUrl from "../dog_1049342.svg";
+import shadowUrl from "leaflet/dist/images/marker-shadow.png";
+import styles from "./MapDisplay.module.css";
+
+const customIcon = L.icon({
+  iconUrl,
+  shadowUrl,
+  iconSize: [45, 45],
+  iconAnchor: [12, 41],
+  popupAnchor: [0, -41],
+});
+
+function MapDisplay() {
+  const markers = [
+    {
+      position: [22.37368405, 114.11026608000796],
+      address: "Superluck Industrial Centre Phase 2",
+      org: "香港拯救貓狗協會HKSCDA",
+      name: "串串",
+      species: "英短",
+      gender: "男仔",
+      age: "4歲",
+      phone: 21800000,
+      characteristics: "全身灰白色，後背近尾巴位置有心形虎斑紋",
+      lost_location: "8月30日 晚上10:30在大坪走失, $2000 REWARD薄酬",
+      src: "./Imgs/case01.jpg",
+    },
+    {
+      position: [22.36330235264489, 114.13267672061922],
+      address: "Millennium Trade Centre",
+      org: "Generation HK",
+      name: "FEWD-9",
+      species: "哈士奇",
+      gender: "男仔",
+      age: "3歲",
+      phone: 21700000,
+      characteristics: " 無頸帶, 長尾, 四隻腳都係白襪",
+      lost_location: "係西環邨西苑台走失",
+      src: "https://images.rawpixel.com/image_social_landscape/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdXB3azYxNzI4NjQyLXdpa2ltZWRpYS1pbWFnZS1rb3dyMjB5cy5qcGc.jpg",
+    },
+    {
+      position: [22.363550400409355, 114.13270354270936],
+      address: "Millennium Trade Centre",
+      org: "Generation HK",
+      name: "Jo2",
+      species: "標準貴賓犬",
+      gender: "男仔",
+      age: "4歲",
+      phone: 21800000,
+      characteristics: "無頸帶, 長尾, 四隻腳都係白襪, 識得講人話",
+      lost_location: "係西環邨西苑台走失",
+      src: "./Imgs/jo2.png",
+    },
+    {
+      position: [22.363371806063473, 114.13241922855379],
+      address: "Millennium Trade Centre",
+      org: "Generation HK",
+      name: "Jack",
+      species: "柴犬",
+      gender: "男仔",
+      age: "4歲",
+      phone: 21800000,
+      characteristics: "鍾意食炸雞同薯條, 腰痛, 常在海邊出没",
+      lost_location: "1月10日 1:30pm 在大浪灣走失, $2000 薄酬",
+      src: "./Imgs/jack.png",
+    },
+  ];
+  function ImgaePopUp({
+    src,
+    name,
+    phone,
+    age,
+    characteristics,
+    lost_location,
+    species,
+  }) {
+    return (
+      <div className={styles["content-area"]}>
+        <img className={styles["image"]} src={src} alt="dog" />
+        <div className={styles["basic-info"]}>
+          <div className={styles["name"]}>{name}</div>
+          <div className={styles["age-and-species"]}>
+            {age}, {species}
+          </div>
+        </div>
+        <div className={styles["details-info"]}>
+          <div className={styles["characteristics"]}>
+            <div className={styles["sub-title"]}>特徵：</div>
+            {characteristics}
+          </div>
+          <div className={styles["lost_location"]}>
+            <div className={styles["sub-title"]}>走失資訊：</div>
+            {lost_location}
+          </div>
+        </div>
+
+        <div className={styles["contact-owner"]}>{`聯絡失主：${phone}`}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <MapContainer
+        className={styles["map"]}
+        center={[22.37071382920351, 114.121470451355]}
+        zoom={15}
+        scrollWheelZoom={false}
+      >
+        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        {markers.map((marker, index) => (
+          <Marker key={index} position={marker.position} icon={customIcon}>
+            <Popup>
+              <ImgaePopUp
+                src={marker.src}
+                name={marker.name}
+                phone={marker.phone}
+                characteristics={marker.characteristics}
+                age={marker.age}
+                lost_location={marker.lost_location}
+                species={marker.species}
+              />
+            </Popup>
+          </Marker>
+        ))}
+      </MapContainer>
+    </div>
+  );
+}
+
+export default MapDisplay;
--- a/givefortune/task3-quote/src/components/MapDisplay.module.css
+++ b/givefortune/task3-quote/src/components/MapDisplay.module.css
@@ -0,0 +1,62 @@
+.map {
+  width: 100%;
+  height: 80vh;
+}
+
+.content-area {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 5px;
+  gap: 10px;
+}
+
+.image {
+  /* max-width: 100%; */
+  height: 250px;
+  width: 250px;
+  object-fit: cover;
+  border-radius: 30px;
+}
+
+.basic-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+.name {
+  font-size: 1.5rem;
+  line-height: 2.1rem;
+  font-weight: 600;
+}
+.age-and-species {
+  font-size: 1rem;
+  line-height: 1.4rem;
+  font-weight: 500;
+  color: rgb(155, 60, 25);
+}
+
+.details-info {
+  font-size: 1rem;
+  line-height: 1.4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  /* padding: 10px; */
+}
+
+.characteristics {
+  display: flex;
+  flex-wrap: wrap;
+}
+.sub-title {
+  font-weight: 600;
+  color: rgb(70, 30, 10);
+}
+
+.contact-owner {
+  font-size: 1rem;
+  color: rgb(155, 60, 25);
+  font-weight: 600;
+}
--- a/givefortune/task3-quote/src/components/NGOLogo.js
+++ b/givefortune/task3-quote/src/components/NGOLogo.js
@@ -0,0 +1,74 @@
+import React from "react";
+import styles from "./NGOLogo.module.css";
+
+const NGOLogo = () => {
+  return (
+    <div className={styles["LOGO-heading"]}>
+      <h4 id={styles["LOGO-subheading"]}>合作伙伴:</h4>
+      <span id={styles["subheading-text"]}>
+        好歡迎更多獨立或大型機構搵我哋合作㗎！目標係成為全港最大既領養資訊平台。
+        <br />
+        絕不收取中介費！！
+      </span>
+      <div className={styles["LOGO-wrapper"]}>
+        <a
+          href="https://hkscda.com/adoption/instructions"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src="./icons/HKSCDA_logo.jpeg"
+            className={styles["logo-one"]}
+            alt="HKSCDA"
+          />
+        </a>
+        <a
+          href="https://www.spca.org.hk/zh-hant/what-we-do/adoption/adoption-process/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src="./icons/HKSPCA_logo.jpeg"
+            className={styles["logo-one"]}
+            alt="HKSPCA"
+          />
+        </a>
+        <a
+          href="https://www.hk-aac.org.hk/image/data/pdf/dogs.pdf"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src="./icons/HKAAC_logo.jpeg"
+            className={styles["logo-one"]}
+            alt="HKAAC"
+          />
+        </a>
+        <a
+          href="https://drive.google.com/file/d/18i9IPSWbWwd1Jypv3uaN4T5wnualOCRB/view"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src="./icons/LAP_logo.jpeg"
+            className={styles["logo-one"]}
+            alt="LAP"
+          />
+        </a>
+        <a
+          href="https://www.saa.org.hk/zh/service.php?id=1"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img
+            src="./icons/SAA_logo.jpeg"
+            className={styles["logo-one"]}
+            alt="SAA"
+          />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NGOLogo;
--- a/givefortune/task3-quote/src/components/NGOLogo.module.css
+++ b/givefortune/task3-quote/src/components/NGOLogo.module.css
@@ -0,0 +1,48 @@
+#LOGO-subheading {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+#subheading-text {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-size: 12px;
+}
+
+.LOGO-wrapper {
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+.logo-one {
+  height: 80px;
+  max-width: 100%;
+}
+
+@media (min-width: 960px) and (max-width: 1279px) {
+  .LOGO-wrapper {
+    flex-wrap: wrap;
+  }
+
+  .logo-one {
+    margin-right: 20px;
+    margin-top: 20px;
+  }
+}
+
+@media (max-width: 959px) {
+  .LOGO-wrapper {
+    flex-wrap: wrap;
+  }
+
+  .logo-one {
+    margin-right: 20px;
+    margin-top: 20px;
+  }
+}
--- a/givefortune/task3-quote/src/components/Shortcut.js
+++ b/givefortune/task3-quote/src/components/Shortcut.js
@@ -0,0 +1,37 @@
+import React from "react";
+import HKSCDA_info from "../HKSCDA_animal_info.json";
+import styles from "./Shortcut.module.css";
+
+function Shortcut(props) {
+  return (
+    <div className={styles["count-container"]}>
+      <div className={styles["title"]}>現時本站收錄到嘅待領養主子數目：</div>
+      <div className={styles["pet-wrapper"]}>
+        <div className={styles["dog"]}>
+          <img
+            src="./icons/dog_icon.png"
+            alt="dog icon"
+            className={styles["dog-icon"]}
+          ></img>
+          <div className={styles["num-info"]}>
+            待領養狗狗
+            <div className={styles["num"]}>{HKSCDA_info.HKSCDA_dog.length}</div>
+          </div>
+        </div>
+        <div className={styles["cat"]}>
+          <img
+            src="./icons/cat_icon.png"
+            alt="cat icon"
+            className={styles["cat-icon"]}
+          ></img>
+          <div className={styles["num-info"]}>
+            待領養貓貓
+            <div className={styles["num"]}>{HKSCDA_info.HKSCDA_cat.length}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Shortcut;
--- a/givefortune/task3-quote/src/components/Shortcut.module.css
+++ b/givefortune/task3-quote/src/components/Shortcut.module.css
@@ -0,0 +1,53 @@
+.count-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 60px 30px 0px 30px;
+}
+.title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2.4rem;
+  padding: 10px 0;
+  color: rgb(70, 30, 10);
+}
+.pet-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: 50px;
+  padding: 30px;
+}
+.dog {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 20px;
+  color: rgb(70, 30, 10);
+}
+.dog-icon {
+  max-width: 100px;
+  object-fit: cover;
+}
+
+.cat-icon {
+  max-width: 100px;
+  object-fit: cover;
+}
+.num-info {
+  font-size: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.num {
+  font-size: 2rem;
+  color: rgb(155, 60, 25);
+}
+.cat {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 20px;
+  color: rgb(70, 30, 10);
+}
--- a/givefortune/task3-quote/src/components/StarPet.css
+++ b/givefortune/task3-quote/src/components/StarPet.css
@@ -0,0 +1,187 @@
+.star-wrapper {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  background-image: url("../../public/StarPetImgs/star-bg.png");
+  object-fit: cover;
+  background-size: 100%;
+  position: relative;
+}
+.pet-star {
+  width: 100vw;
+  height: 500px;
+}
+
+.pet-of-the-day {
+  width: 100%;
+}
+
+.star-container {
+  width: 100%;
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+}
+
+.star-photo {
+  max-width: 40%;
+  max-height: 80%;
+  object-fit: cover;
+  border-radius: 30px;
+  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.3));
+}
+.info-wrapper {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.text-background {
+  width: 60vw;
+  max-width: 700px;
+  min-width: 580px;
+  position: relative;
+}
+.info {
+  position: absolute;
+  max-width: 380px;
+  min-width: 250px;
+  color: rgb(70, 30, 10);
+}
+.text {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2.4rem;
+  padding: 10px 0;
+}
+.call-to-action {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 30px 20px;
+  gap: 20px;
+}
+
+.frame.upper-right {
+  height: 40%;
+  object-fit: cover;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.frame.bottom-left {
+  height: 80%;
+  object-fit: cover;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.frame.bottom {
+  display: none;
+}
+#about-me {
+  border: 5px dotted rgb(250, 220, 180);
+  background-color: #f9a24bcb;
+  width: fit-content;
+  padding: 0 10px 0 0;
+  border-radius: 15px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: rgb(70, 30, 10);
+}
+#about-me:hover {
+  background-color: rgb(255, 224, 100);
+  border: 5px dotted #fff;
+}
+#about-me-icon {
+  width: 40px;
+  height: 40px;
+  padding: 10px 5px 10px 10px;
+}
+
+#more-pet {
+  border: 5px dotted rgb(250, 220, 180);
+  background-color: #ffffff;
+  width: fit-content;
+  padding: 0 10px 0 0;
+  border-radius: 15px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: rgb(70, 30, 10);
+}
+#more-pet:hover {
+  background-color: rgb(255, 224, 100);
+  border: 5px dotted #fff;
+}
+#pets-icon {
+  width: 40px;
+  height: 40px;
+  padding: 10px;
+}
+@media only screen and (max-width: 1020px) {
+  .star-container {
+    height: fit-content;
+    padding: 40px 0 40px 0;
+    display: flex;
+    flex-direction: column;
+    object-fit: cover;
+    position: relative;
+  }
+
+  .star-photo {
+    max-height: 50vh;
+    min-height: 40vh;
+    min-width: 40vw;
+  }
+
+  .pet-star {
+    width: 100vw;
+    height: fit-content;
+  }
+  .frame.upper-right {
+    height: 30%;
+  }
+  .frame.bottom-left {
+    display: none;
+  }
+  .frame.bottom {
+    display: block;
+    width: 100vw;
+  }
+  .info-wrapper {
+    margin: -8% 0 7% 0;
+  }
+  @media only screen and (max-width: 420px) {
+    .text {
+      font-size: 1.2rem;
+      line-height: 1.68rem;
+      padding: 10px 20px;
+    }
+    .info {
+      margin: 30px 0;
+    }
+    .star-container {
+      height: fit-content;
+      padding: 40px 0 0 0;
+      background-size: 100%;
+      position: relative;
+    }
+    .frame.upper-right {
+      height: 20%;
+    }
+  }
+  @media only screen and (max-width: 375px) {
+    .text-background {
+      min-height: 400px;
+      position: relative;
+    }
+    .info-wrapper {
+      margin: -8% 0 3% 0;
+    }
+    .frame.upper-right {
+      height: 15%;
+    }
+  }
+}
--- a/givefortune/task3-quote/src/components/StarPet.js
+++ b/givefortune/task3-quote/src/components/StarPet.js
@@ -0,0 +1,408 @@
+import React, { useState, useEffect } from "react";
+import "./StarPet.css";
+import petsData from "../HKSCDA_animal_info.json";
+import { IconButton, SvgIcon } from "@mui/material";
+import { Link } from "react-router-dom";
+
+function StarPet() {
+  // State to store the selected pet
+  const [selectedPet, setSelectedPet] = useState(null);
+  //   console.log(petsData);
+  const catData = petsData.HKSCDA_cat;
+  const dogData = petsData.HKSCDA_dog;
+  const species = [...catData, ...dogData];
+
+  // Function to select a random species from the JSON data
+  const getRandomPet = () => {
+    const optionRandomIndex = Math.floor(Math.random() * species.length);
+    return species[optionRandomIndex];
+  };
+
+  const petStar = () => {
+    const randomPet = getRandomPet();
+    setSelectedPet(randomPet);
+  };
+  // Use useEffect to update the pet data
+  useEffect(() => {
+    petStar();
+  }, []); // Empty dependency array ensures the effect runs only once on mount
+
+  return (
+    <>
+      <div className="star-wrapper">
+        {selectedPet && (
+          <div className="pet-star">
+            <div className="star-container">
+              <img
+                className="star-photo"
+                src={selectedPet.image}
+                alt={selectedPet.name}
+              ></img>
+              <div className="info-wrapper">
+                <img
+                  className="text-background"
+                  src="./StarPetImgs/star-text-bg.png"
+                  alt="upper left frame"
+                ></img>
+                <div className="info">
+                  <div className="text">Hello, 我叫{selectedPet.name}呀！</div>
+                  <div className="text">
+                    我同其他朋友都等緊一個家，快啲帶我哋返去啦～
+                  </div>
+                  <div className="call-to-action">
+                    <Link
+                      key={selectedPet.name}
+                      to={{
+                        pathname: `/Category_Page/${selectedPet.name}`,
+                      }}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style={{ textDecoration: "none" }}
+                    >
+                      <IconButton id="about-me">
+                        <SvgIcon
+                          id="about-me-icon"
+                          enable-background="new 0 0 512 512"
+                          height="512"
+                          viewBox="0 0 512 512"
+                          width="512"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g>
+                            <g>
+                              <path
+                                d="m442.182 431.58v-335.645c0-38.192-26.633-70.143-62.334-78.353l-25.588 16.379-224.105.345v397.274c0 44.415 8.964 80.42 108.595 80.42h123.012c44.414 0 80.42-36.005 80.42-80.42z"
+                                fill="#b0ebd8"
+                              />
+                              <path
+                                d="m379.848 17.583c-5.816-1.337-11.864-2.068-18.087-2.068-58.694 0-152.771 0-211.523 0-44.415 0-80.42 36.005-80.42 80.42v335.645c0 44.415 36.005 80.42 80.42 80.42h85.333 3.178c-44.415 0-80.42-36.005-80.42-80.42v-330.581c8.083 4.824 17.517 7.607 27.594 7.607h140.154c29.8 0 54.044-24.244 54.044-54.044v-31.548c0-1.833-.094-3.645-.273-5.431z"
+                                fill="#5fd9b3"
+                              />
+                              <path
+                                d="m379.075 65.138-27.226 17.092h-202.386v353.487c0 16.425 5.689 29.737 61.802 29.737h154.634c16.425 0 29.737-13.312 29.737-29.737v-343.919c0-11.692-6.748-21.802-16.561-26.66z"
+                                fill="#efedff"
+                              />
+                              <path
+                                d="m365.899 62.061c-.08 0-89.828 0-154.634 0h-65.164c-16.423 0-29.737 13.314-29.737 29.737v343.919c0 16.423 13.314 29.737 29.737 29.737h65.164c-16.425 0-29.737-13.312-29.737-29.737v-288.926c0-21.089 17.096-38.185 38.185-38.185h106.365c26.181 0 48.067-18.715 52.999-43.468-3.974-1.967-8.445-3.077-13.178-3.077z"
+                                fill="#d4d4ff"
+                              />
+                              <path
+                                d="m349.091 54.562v-31.548c0-12.668-10.269-23.014-23.014-23.014h-101.366c-39.564 0-41.632 10.322-41.632 23.014v31.547c0 12.668 9.05 23.014 41.632 23.014h101.366c12.723.001 23.014-10.322 23.014-23.013z"
+                                fill="#726c88"
+                              />
+                              <path
+                                d="m201.697 54.562v-31.548c0-12.692 10.291-23.014 23.014-23.014h-38.788c-12.723 0-23.014 10.322-23.014 23.014v31.547c0 12.668 10.269 23.014 23.014 23.014h38.788c-12.745.001-23.014-10.345-23.014-23.013z"
+                                fill="#656178"
+                              />
+                              <path
+                                d="m356.848 160.323c0-8.564-6.951-15.515-15.515-15.515h-142.739c-23.531 0-28.962 6.965-28.962 15.515 0 8.564 7.24 15.515 28.962 15.515h142.739c8.565 0 15.515-6.965 15.515-15.515z"
+                                fill="#a3defe"
+                              />
+                              <path
+                                d="m183.079 160.323c0-8.55 6.951-15.515 15.515-15.515h-27.927c-8.565 0-15.515 6.965-15.515 15.515 0 8.564 6.951 15.515 15.515 15.515h27.927c-8.564 0-15.515-6.95-15.515-15.515z"
+                                fill="#8cd6fe"
+                              />
+                              <path
+                                d="m350.332 297.105c4.766-8.586 5.08-18.181 1.564-25.139-9.122-9.122-22.67-1.175-28.216 8.817-4.766 8.594-7.425 21.122 2.364 30.912 8.851 1.003 18.742-4.591 24.288-14.59z"
+                                fill="#d0876f"
+                              />
+                              <path
+                                d="m327.608 286.546c5.546-9.991 15.437-15.583 24.288-14.579-1.596-3.159-3.981-5.774-7.098-7.505-9.992-5.544-23.707.083-30.637 12.567-8.57 15.453-2.487 33.037 11.883 34.666-3.516-6.959-3.203-16.556 1.564-25.149z"
+                                fill="#c9735a"
+                              />
+                              <path
+                                d="m312.858 356.538c-7.023-3.32-12.329-9.319-15.194-16.549-3.946-9.94-11.346-18.134-20.717-23.104-19.136-3.21-34.727 8.312-38.674 18.253-2.865 7.23-8.171 13.229-15.195 16.549-12.247 5.803-20.718 18.277-20.718 32.727 0 5.026 5.026 22.74 21.512 17.869 19.085-18.282 49.833-17.019 67.337 3.222 14.128 16.337 41.43 6.741 42.336-14.688.601-15.043-7.928-28.244-20.687-34.279z"
+                                fill="#d0876f"
+                              />
+                              <path
+                                d="m241.034 356.538c7.023-3.32 12.329-9.319 15.195-16.549 3.946-9.94 11.346-18.134 20.717-23.104-23.249-12.328-52.656-1.966-62.609 23.104-2.865 7.23-8.171 13.229-15.194 16.549-12.247 5.803-20.718 18.277-20.718 32.727 0 23.158 28.196 32.626 42.367 16.239.985-1.139 2.019-2.204 3.081-3.222-2.225-3.612-3.556-7.991-3.556-13.018-.001-14.449 8.471-26.923 20.717-32.726z"
+                                fill="#c9735a"
+                              />
+                              <path
+                                d="m197.839 277.028c-5.311-9.568-14.606-15.1-23.158-14.671-10.221 2.876-10.639 22.096-5.997 30.459 5.311 9.576 20.17 16.808 30.967 8.8 3.229-6.909 2.83-16.218-1.812-24.588z"
+                                fill="#d0876f"
+                              />
+                              <path
+                                d="m176.493 286.934c-4.642-8.363-5.042-17.669-1.812-24.577-15.203.763-21.777 18.96-13.014 34.748 9.666 17.428 30.805 19.865 37.983 4.511-8.55.428-17.846-5.107-23.157-14.682z"
+                                fill="#c9735a"
+                              />
+                              <path
+                                d="m276.687 254.924c0-10.27-4.785-19.139-11.723-23.313-16.894 0-20.687 13.043-20.687 23.313s5.861 23.313 20.687 23.313c6.938-4.174 11.723-13.043 11.723-23.313z"
+                                fill="#d0876f"
+                              />
+                              <path
+                                d="m253.242 254.924c0-10.27 4.785-19.139 11.723-23.313-2.712-1.632-5.752-2.546-8.964-2.546-11.429 0-20.687 11.574-20.687 25.859 0 19.211 16.079 31.479 29.651 23.313-6.938-4.174-11.723-13.043-11.723-23.313z"
+                                fill="#c9735a"
+                              />
+                            </g>
+                          </g>
+                        </SvgIcon>
+                        起我底
+                      </IconButton>
+                    </Link>
+                    <Link
+                      to={{
+                        pathname: `/Category_Page`,
+                      }}
+                    >
+                      <IconButton href="www.google.com" id="more-pet">
+                        <SvgIcon
+                          id="pets-icon"
+                          enable-background="new 0 0 512 512"
+                          height="512"
+                          viewBox="0 0 512 512"
+                          width="512"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g>
+                            <path
+                              d="m7.611 143.299v-58.886c0-8.864 7.186-16.05 16.05-16.05 5.546 0 10.7 2.864 13.629 7.573l41.896 67.363-35.788 12.059z"
+                              fill="#918291"
+                            />
+                            <path
+                              d="m37.29 75.936c-2.929-4.71-8.083-7.573-13.629-7.573-8.864 0-16.05 7.186-16.05 16.05v2.346c.068-.001.135-.01.203-.01 5.546 0 10.7 2.864 13.629 7.573l30.608 48.977 11.903 5.133 15.232-5.133z"
+                              fill="#7f737f"
+                            />
+                            <path
+                              d="m245.783 143.299 4.973-27.374-4.973-31.513c0-8.864-7.186-16.05-16.05-16.05-5.546 0-10.7 2.864-13.629 7.573l-41.896 67.363 35.788 8.916z"
+                              fill="#918291"
+                            />
+                            <path
+                              d="m229.733 68.363c-5.546 0-10.7 2.863-13.629 7.573l-3.271 5.259c3.552 2.944 5.815 7.388 5.815 12.362v49.742l6.533 5.133 20.602-5.133 4.973-27.374-4.973-31.513c0-8.863-7.186-16.049-16.05-16.049z"
+                              fill="#7f737f"
+                            />
+                            <path
+                              d="m126.697 346.882c-65.769 0-119.086-10.887-119.086-76.656v-126.927h238.171l16.024 55.492-16.024 46.656v24.778c.001 65.769-53.316 76.657-119.085 76.657z"
+                              fill="#e2dee2"
+                            />
+                            <path
+                              d="m218.648 143.299v126.926c0 61.18-46.139 74.867-105.518 76.48 4.453.121 8.979.176 13.567.176 65.769 0 119.086-10.887 119.086-76.656v-24.778l16.024-46.656-16.024-55.492z"
+                              fill="#cbc4cc"
+                            />
+                            <path
+                              d="m95.617 346.882h62.16c33.987 0 61.539 27.552 61.539 61.539v58.633c0 7.505-6.084 13.589-13.589 13.589l-36.709-.004-42.321-13.248-42.322 13.251h-36.708c-7.505 0-13.589-6.084-13.589-13.589v-58.633c0-33.986 27.552-61.538 61.539-61.538z"
+                              fill="#e2dee2"
+                            />
+                            <path
+                              d="m157.777 346.882h-27.135c33.987 0 61.539 27.552 61.539 61.539v58.633c0 7.505-6.084 13.589-13.589 13.589h27.135c7.505 0 13.589-6.084 13.589-13.589v-58.633c.001-33.987-27.552-61.539-61.539-61.539z"
+                              fill="#cbc4cc"
+                            />
+                            <path
+                              d="m169.019 480.643h-42.322l-7.763-35.93 7.763-27.741c0-4.518 3.663-8.181 8.181-8.181h25.96c4.518 0 8.181 3.663 8.181 8.181z"
+                              fill="#918291"
+                            />
+                            <path
+                              d="m169.018 416.977v63.663h-17.425v-63.663c0-4.526-3.664-8.19-8.18-8.19h17.425c4.516 0 8.18 3.664 8.18 8.19z"
+                              fill="#7f737f"
+                            />
+                            <path
+                              d="m126.697 480.643h-42.322v-63.671c0-4.518 3.663-8.181 8.181-8.181h25.96c4.518 0 8.181 3.663 8.181 8.181z"
+                              fill="#918291"
+                            />
+                            <path
+                              d="m126.696 416.977v63.663h-17.425v-63.663c0-4.526-3.664-8.19-8.18-8.19h17.425c4.516 0 8.18 3.664 8.18 8.19z"
+                              fill="#7f737f"
+                            />
+                            <path
+                              d="m512 103.576v141.868c0 73.517-59.593 85.685-133.11 85.685s-133.11-12.168-133.11-85.685v-141.868z"
+                              fill="#e19974"
+                            />
+                            <path
+                              d="m484.865 103.575v141.873c0 68.934-52.4 83.928-119.541 85.529 4.461.106 8.987.154 13.567.154 73.514 0 133.109-12.169 133.109-85.683v-141.873z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m344.151 331.13h69.48c37.989 0 68.786 30.796 68.786 68.786v67.138c0 7.505-6.084 13.589-13.589 13.589h-179.873c-7.505 0-13.589-6.084-13.589-13.589v-67.138c-.001-37.989 30.796-68.786 68.785-68.786z"
+                              fill="#e19974"
+                            />
+                            <path
+                              d="m413.631 331.13h-27.135c37.989 0 68.786 30.797 68.786 68.786v67.138c0 7.505-6.084 13.589-13.589 13.589h27.135c7.505 0 13.589-6.084 13.589-13.589v-67.138c0-37.989-30.796-68.786-68.786-68.786z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m367.546 480.643h-41.24v-72.278c0-4.438 3.597-8.035 8.035-8.035h25.17c4.438 0 8.035 3.597 8.035 8.035z"
+                              fill="#e19974"
+                            />
+                            <path
+                              d="m367.544 408.361v72.279h-19.049v-72.279c0-4.435-3.593-8.028-8.038-8.028h19.049c4.445 0 8.038 3.593 8.038 8.028z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m359.54 253.62h38.703v26.157c0 10.688-8.664 19.352-19.352 19.352-10.688 0-19.352-8.664-19.352-19.352v-26.157z"
+                              fill="#e759aa"
+                            />
+                            <path
+                              d="m378.891 253.62v26.157c0 7.159-3.897 13.394-9.676 16.741 2.849 1.65 6.147 2.61 9.676 2.61 10.688 0 19.351-8.664 19.351-19.351v-26.157z"
+                              fill="#e03d9c"
+                            />
+                            <path
+                              d="m337.699 103.575h-91.916v-38.475c0-18.636 15.107-33.744 33.744-33.744h24.429c18.636 0 33.744 15.107 33.744 33.744v38.475z"
+                              fill="#e19974"
+                            />
+                            <path
+                              d="m303.955 31.357h-24.429c-.454 0-.904.017-1.353.034 18.008.711 32.391 15.527 32.391 33.709v38.474h27.135v-38.474c-.001-18.636-15.108-33.743-33.744-33.743z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m297.262 143.299c-13.968 0-25.292-11.324-25.292-25.292v-39.22c0-4.182 3.39-7.572 7.572-7.572 4.182 0 7.572 3.39 7.572 7.572v39.22h35.44c0 13.968-11.324 25.292-25.292 25.292z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m312.406 143.299c-13.968 0-25.292-11.324-25.292-25.292v-46.792h50.584v46.792c.001 13.968-11.323 25.292-25.292 25.292z"
+                              fill="#e19974"
+                            />
+                            <path
+                              d="m310.564 71.215v46.792c0 8.974-4.678 16.851-11.725 21.34 3.921 2.498 8.573 3.952 13.567 3.952 13.968 0 25.292-11.324 25.292-25.292v-46.792z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m420.084 103.575h91.916v-38.475c0-18.636-15.107-33.744-33.744-33.744h-24.429c-18.636 0-33.744 15.107-33.744 33.744v38.475z"
+                              fill="#e19974"
+                            />
+                            <path
+                              d="m478.256 31.357h-24.429c-.454 0-.903.017-1.353.034 18.008.711 32.39 15.527 32.39 33.709v38.474h27.136v-38.474c0-18.636-15.108-33.743-33.744-33.743z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m457.106 103.576v14.431c0 13.965-11.326 25.291-25.301 25.291-13.965 0-25.29-11.326-25.29-25.291v-14.431z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m445.376 143.299c13.968 0 25.292-11.324 25.292-25.292v-46.792h-50.584v46.792c0 13.968 11.324 25.292 25.292 25.292z"
+                              fill="#e19974"
+                            />
+                            <path
+                              d="m456.814 71.215c-7.334 0-13.28 5.946-13.28 13.28v33.512c0 8.974-4.678 16.851-11.725 21.34 3.921 2.498 8.573 3.952 13.567 3.952 13.968 0 25.292-11.324 25.292-25.292v-32.938c0-7.651-6.202-13.854-13.854-13.854z"
+                              fill="#dc8758"
+                            />
+                            <g>
+                              <g>
+                                <path
+                                  d="m83.195 256.292c-4.204 0-7.611-3.408-7.611-7.611v-13.71c0-4.204 3.407-7.611 7.611-7.611s7.611 3.408 7.611 7.611v13.71c.001 4.203-3.407 7.611-7.611 7.611z"
+                                  fill="#918291"
+                                />
+                              </g>
+                              <g>
+                                <path
+                                  d="m170.198 256.292c-4.204 0-7.611-3.408-7.611-7.611v-13.71c0-4.204 3.407-7.611 7.611-7.611s7.611 3.408 7.611 7.611v13.71c.001 4.203-3.407 7.611-7.611 7.611z"
+                                  fill="#918291"
+                                />
+                              </g>
+                            </g>
+                            <path
+                              d="m156.92 286.62c-2.093-3.216-6.252-4.374-9.706-2.7l-.249.121c-1.157.706-6.702 3.639-12.657-.619v-27.129h2.17c4.204 0 7.611-3.408 7.611-7.611 0-4.204-3.407-7.611-7.611-7.611h-19.563c-4.204 0-7.611 3.408-7.611 7.611 0 4.204 3.407 7.611 7.611 7.611h2.169v27.132c-5.955 4.259-11.501 1.322-12.658.616l-.287-.154c-3.471-1.855-7.784-.746-9.93 2.552-2.485 3.819-1.08 8.986 3.032 10.95 5.222 2.495 9.057 3.499 13.288 3.499 4.467 0 9.373-1.131 14.165-4.221 4.794 3.092 9.701 4.221 14.17 4.221 4.098 0 7.826-.943 12.762-3.149 4.278-1.912 5.85-7.192 3.294-11.119z"
+                              fill="#918291"
+                            />
+                            <g>
+                              <g>
+                                <path
+                                  d="m34.136 255.808h-26.525c-4.204 0-7.611-3.408-7.611-7.612s3.407-7.611 7.611-7.611h26.524c4.204 0 7.611 3.408 7.611 7.611.001 4.204-3.406 7.612-7.61 7.612z"
+                                  fill="#eaf9fa"
+                                />
+                              </g>
+                              <g>
+                                <path
+                                  d="m10.258 300.894c-2.771 0-5.443-1.518-6.788-4.157-1.909-3.745-.419-8.329 3.326-10.238l29.061-14.812c3.744-1.908 8.329-.42 10.238 3.325s.419 8.329-3.326 10.238l-29.061 14.812c-1.106.565-2.288.832-3.45.832z"
+                                  fill="#eaf9fa"
+                                />
+                              </g>
+                              <g>
+                                <path
+                                  d="m34.134 335.861c-1.847 0-3.699-.668-5.163-2.021-3.088-2.852-3.278-7.668-.426-10.756l18.474-19.998c2.85-3.088 7.667-3.278 10.755-.426 3.088 2.853 3.278 7.668.426 10.756l-18.474 19.998c-1.499 1.624-3.543 2.447-5.592 2.447z"
+                                  fill="#eaf9fa"
+                                />
+                              </g>
+                            </g>
+                            <g>
+                              <g>
+                                <path
+                                  d="m245.783 255.808h-26.524c-4.204 0-7.611-3.408-7.611-7.611 0-4.204 3.407-7.611 7.611-7.611h26.524c4.204 0 7.611 3.408 7.611 7.611s-3.407 7.611-7.611 7.611z"
+                                  fill="#eaf9fa"
+                                />
+                              </g>
+                              <g>
+                                <path
+                                  d="m243.137 300.894c-1.164 0-2.343-.267-3.45-.832l-29.062-14.812c-3.745-1.909-5.235-6.493-3.326-10.238 1.91-3.746 6.496-5.233 10.238-3.325l29.062 14.812c3.745 1.909 5.235 6.493 3.326 10.238-1.345 2.639-4.017 4.157-6.788 4.157z"
+                                  fill="#eaf9fa"
+                                />
+                              </g>
+                              <g>
+                                <path
+                                  d="m219.261 335.861c-2.05 0-4.092-.823-5.593-2.446l-18.475-19.998c-2.852-3.088-2.662-7.903.425-10.756 3.088-2.853 7.903-2.662 10.756.426l18.475 19.998c2.852 3.088 2.662 7.903-.425 10.756-1.464 1.351-3.316 2.02-5.163 2.02z"
+                                  fill="#eaf9fa"
+                                />
+                              </g>
+                            </g>
+                            <g>
+                              <g>
+                                <path
+                                  d="m337.699 231.615c-4.204 0-7.611-3.408-7.611-7.611v-12.982c0-4.204 3.407-7.611 7.611-7.611s7.612 3.408 7.612 7.611v12.982c-.001 4.203-3.408 7.611-7.612 7.611z"
+                                  fill="#918291"
+                                />
+                              </g>
+                              <g>
+                                <path
+                                  d="m420.084 231.615c-4.204 0-7.611-3.408-7.611-7.611v-12.982c0-4.204 3.407-7.611 7.611-7.611s7.612 3.408 7.612 7.611v12.982c0 4.203-3.408 7.611-7.612 7.611z"
+                                  fill="#918291"
+                                />
+                              </g>
+                            </g>
+                            <path
+                              d="m420.084 246.008h-33.582v-22.004h-15.223v22.004h-33.581c-4.204 0-7.611 3.408-7.611 7.611 0 4.204 3.407 7.611 7.611 7.611h82.386c4.204 0 7.612-3.408 7.612-7.611s-3.408-7.611-7.612-7.611z"
+                              fill="#918291"
+                            />
+                            <path
+                              d="m326.306 480.643h-15.223v-72.701c0-4.204 3.408-7.611 7.611-7.611 4.204 0 7.612 3.408 7.612 7.611z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m399.291 480.643h-15.223v-72.701c0-4.204 3.408-7.611 7.611-7.611 4.204 0 7.611 3.408 7.611 7.611v72.701z"
+                              fill="#dc8758"
+                            />
+                            <path
+                              d="m440.531 480.643h-41.24v-72.278c0-4.438 3.597-8.035 8.035-8.035h25.17c4.438 0 8.035 3.597 8.035 8.035z"
+                              fill="#e19974"
+                            />
+                            <path
+                              d="m440.529 408.361v72.279h-19.049v-72.279c0-4.435-3.593-8.028-8.038-8.028h19.049c4.445 0 8.038 3.593 8.038 8.028z"
+                              fill="#dc8758"
+                            />
+                            <g>
+                              <path
+                                d="m388.154 231.615h-18.524c-4.204 0-7.611-3.408-7.611-7.611 0-4.204 3.407-7.612 7.611-7.612h18.524c4.204 0 7.611 3.408 7.611 7.612 0 4.203-3.407 7.611-7.611 7.611z"
+                                fill="#e759aa"
+                              />
+                            </g>
+                          </g>
+                        </SvgIcon>
+                        識埋我啲Fd
+                      </IconButton>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <img
+              className="frame upper-right"
+              src="./StarPetImgs/star-frame-ur.png"
+              alt="upper right frame"
+            ></img>
+            <img
+              className="frame bottom-left"
+              src="./StarPetImgs/star-frame-bl.png"
+              alt="bottom left frame"
+            ></img>
+            <img
+              className="frame bottom"
+              src="./StarPetImgs/star-frame-b.png"
+              alt="bottom frame"
+            ></img>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default StarPet;
--- a/givefortune/task3-quote/src/dog_1049342.svg
+++ b/givefortune/task3-quote/src/dog_1049342.svg
--- a/givefortune/task3-quote/src/dogcursor.css
+++ b/givefortune/task3-quote/src/dogcursor.css
@@ -0,0 +1,31 @@
+.trailElement {
+  transform: translate(-50%, -50%);
+  /*position: absolute;*/
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: right;
+  border-radius: 10%;
+  pointer-events: none;
+  z-index: 1;
+  position: relative;
+}
+
+.trailElement#trail_0 {
+  background-image: url("../public/cursorimgs/ball.png");
+  transition: 0.1s;
+  width: 50px;
+  height: 20px;
+}
+
+.trailElement#trail_1 {
+  background-image: url("../public/cursorimgs/dog.png");
+  transition: 0.2s;
+  width: 100px;
+  height: 60px;
+  margin-left: -40px;
+}
+
+.trailElement.left {
+  transform: translate(-50%, -50%) scaleX(-1);
+  margin-left: -80px;
+}
--- a/givefortune/task3-quote/src/dogcursor.js
+++ b/givefortune/task3-quote/src/dogcursor.js
@@ -0,0 +1,87 @@
+import React, { useEffect, useRef } from "react";
+import "./dogcursor.css";
+
+function Dogcursor() {
+  const trailElementsRef = useRef([]);
+  const mouseRef = useRef({ x: 100, y: 100 });
+  const drag = [0.35, 0.3, 0.25, 0.2];
+
+  useEffect(() => {
+    const trailElements = trailElementsRef.current;
+
+    function updateMouseLocations(e) {
+      mouseRef.current = { x: e.pageX, y: e.pageY };
+    }
+
+    function trailTheElements() {
+      for (let x = 0; x < trailElements.length; x++) {
+        trailElements[x] = loop(trailElements[x], x);
+      }
+      requestAnimationFrame(trailTheElements);
+    }
+
+    function loop(trailElement, i) {
+      let x = parseFloat(trailElement.style.left) || 0;
+      let y = parseFloat(trailElement.style.top) || 0;
+
+      let following_x, following_y;
+      if (trailElements[i - 1] !== undefined) {
+        following_x = parseFloat(trailElements[i - 1].style.left);
+        following_y = parseFloat(trailElements[i - 1].style.top);
+      } else {
+        following_x = mouseRef.current.x;
+        following_y = mouseRef.current.y;
+      }
+
+      let x_diff = following_x - x;
+      let y_diff = following_y - y;
+
+      const distance_behind = i === 0 ? 20 : 10;
+
+      x_diff = x_diff > 0 ? x_diff - distance_behind : x_diff + distance_behind;
+      y_diff = y_diff > 0 ? y_diff - distance_behind : y_diff + distance_behind;
+
+      const x_move = x_diff * drag[i];
+      const y_move = y_diff * drag[i];
+
+      x += x_move;
+      y += y_move;
+
+      trailElement.style.left = x + "px";
+      trailElement.style.top = y + "px";
+
+      // Add or remove 'right' class based on cursor direction
+      if (x_move < 0) {
+        trailElement.classList.add("left");
+      } else {
+        trailElement.classList.remove("left");
+      }
+
+      return trailElement;
+    }
+
+    document.addEventListener("mousemove", updateMouseLocations);
+    trailTheElements();
+
+    return () => {
+      document.removeEventListener("mousemove", updateMouseLocations);
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        className="trailElement cursor-trail"
+        ref={(el) => (trailElementsRef.current[0] = el)}
+        id="trail_0"
+      ></div>
+      <div
+        className="trailElement cursor-trail"
+        ref={(el) => (trailElementsRef.current[1] = el)}
+        id="trail_1"
+      ></div>
+    </>
+  );
+}
+
+export default Dogcursor;
--- a/givefortune/task3-quote/src/index.css
+++ b/givefortune/task3-quote/src/index.css
@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-width: 330px;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
--- a/givefortune/task3-quote/src/index.js
+++ b/givefortune/task3-quote/src/index.js
@@ -0,0 +1,36 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter as Router } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
+import Homepage from "./Homepage.js";
+import AdoptionInfoPage from "./AdoptionInfoPage.js";
+import CategoryPage from "./CategoryPage.js";
+import AnimalsProfile from "./components/AnimalsProfile.js";
+import AboutUs from "./AboutUs.js";
+import Catcursor from "./catcursor.js";
+//import Dogcursor from "./dogcursor.js";
+//import Jojaccursor from "./jojaccursor.js";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <Catcursor />
+    <Router>
+      <Routes>
+        <Route exact path="/" element={<Homepage />} />
+        <Route path="/Home" element={<Homepage />} />
+        <Route path="/Adoption_Info_Page" element={<AdoptionInfoPage />} />
+        <Route path="/Category_Page" element={<CategoryPage />} />
+        <Route
+          path="Category_Page/:animal_Name"
+          element={<AnimalsProfile />}
+        ></Route>
+        <Route path="/About_us" element={<AboutUs />}></Route>
+      </Routes>
+    </Router>
+  </React.StrictMode>
+);
+
+reportWebVitals();
--- a/givefortune/task3-quote/src/jojaccursor.css
+++ b/givefortune/task3-quote/src/jojaccursor.css
@@ -0,0 +1,40 @@
+.trailElement {
+  transform: translate(-50%, -50%);
+  background-size: contain;
+  background-repeat: no-repeat;
+  border-radius: 10%;
+  width: 100px;
+  height: 60px;
+  pointer-events: none;
+  z-index: 1;
+  /*margin-right: 10px;*/
+  position: relative;
+}
+
+.trailElement#trail_0 {
+  background-image: url("../public/cursorimgs/home-2.png");
+  transition: 0.1s;
+  width: 100px;
+  height: 60px;
+}
+
+.trailElement#trail_1 {
+  background-image: url("../public/cursorimgs/shibainu.png");
+  transition: 0.2s;
+  width: 100px;
+  height: 40px;
+}
+
+.trailElement#trail_2 {
+  background-image: url("../public/cursorimgs/paw.png");
+  transition: 0.3s;
+  width: 100px;
+  height: 40px;
+}
+
+.trailElement#trail_3 {
+  background-image: url("../public/cursorimgs/poodle.png");
+  transition: 0.4s;
+  width: 100px;
+  height: 50px;
+}
--- a/givefortune/task3-quote/src/jojaccursor.js
+++ b/givefortune/task3-quote/src/jojaccursor.js
@@ -0,0 +1,102 @@
+import React, { useEffect, useRef, useState } from "react";
+import "./jojaccursor.css";
+
+function Jojaccursor() {
+  const trailElementsRef = useRef([]);
+  const [mouse, setMouse] = useState({ x: 100, y: 100 });
+  const drag = [0.35, 0.3, 0.25, 0.2];
+  useEffect(() => {
+    console.log(trailElementsRef.current);
+  }, [trailElementsRef]);
+  useEffect(() => {
+    const trailElements = trailElementsRef.current;
+
+    function updateMouseLocations(e) {
+      setMouse({ x: e.pageX, y: e.pageY });
+    }
+
+    function trailTheElements() {
+      for (let x = 0; x < trailElements.length; x++) {
+        trailElements[x] = loop(trailElements[x], x);
+      }
+      requestAnimationFrame(trailTheElements);
+    }
+
+    function loop(trailElement, i) {
+      // let x, y;
+      // if (trailElement) {
+      //   x = parseFloat(trailElement.style.left);
+      //   y = parseFloat(trailElement.style.top);
+      // } else {
+      //   x = 0;
+      //   y = 0;
+      // }
+      let x = parseFloat(trailElement.style.left) || 0;
+      let y = parseFloat(trailElement.style.top) || 0;
+
+      let following_x, following_y;
+      if (typeof trailElements[i - 1] !== "undefined") {
+        following_x = parseFloat(trailElements[i - 1].style.left);
+        following_y = parseFloat(trailElements[i - 1].style.top);
+      } else {
+        following_x = mouse.x;
+        following_y = mouse.y;
+      }
+
+      let x_diff = following_x - x;
+      let y_diff = following_y - y;
+
+      const distance_behind = i === 0 ? 20 : 10;
+
+      x_diff = x_diff > 0 ? x_diff - distance_behind : x_diff + distance_behind;
+      y_diff = y_diff > 0 ? y_diff - distance_behind : y_diff + distance_behind;
+
+      const x_move = x_diff * drag[i];
+      const y_move = y_diff * drag[i];
+
+      x += x_move;
+      y += y_move;
+
+      trailElement.style.left = x + "px";
+      trailElement.style.top = y + "px";
+
+      return trailElement;
+    }
+
+    document.addEventListener("mousemove", updateMouseLocations);
+    trailTheElements();
+
+    return () => {
+      document.removeEventListener("mousemove", updateMouseLocations);
+    };
+  }, [mouse]);
+
+  console.log(trailElementsRef.current);
+
+  return (
+    <div className="trailContainer">
+      <div
+        className="trailElement cursor-trail"
+        ref={(el) => (trailElementsRef.current[0] = el)}
+        id="trail_0"
+      ></div>
+      <div
+        className="trailElement cursor-trail"
+        ref={(el) => (trailElementsRef.current[1] = el)}
+        id="trail_1"
+      ></div>
+      <div
+        className="trailElement cursor-trail"
+        ref={(el) => (trailElementsRef.current[2] = el)}
+        id="trail_2"
+      ></div>
+      <div
+        className="trailElement cursor-trail"
+        ref={(el) => (trailElementsRef.current[3] = el)}
+        id="trail_3"
+      ></div>
+    </div>
+  );
+}
+
+export default Jojaccursor;
--- a/givefortune/task3-quote/src/jojachomelogo.png
+++ b/givefortune/task3-quote/src/jojachomelogo.png
--- a/givefortune/task3-quote/src/reportWebVitals.js
+++ b/givefortune/task3-quote/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 9 4 C 6.2504839 4 4 6.2504839 4 9 L 4 41 C 4 43.749516 6.2504839 46 9 46 L 25.832031 46 A 1.0001 1.0001 0 0 0 26.158203 46 L 31.832031 46 A 1.0001 1.0001 0 0 0 32.158203 46 L 41 46 C 43.749516 46 46 43.749516 46 41 L 46 9 C 46 6.2504839 43.749516 4 41 4 L 9 4 z M 9 6 L 41 6 C 42.668484 6 44 7.3315161 44 9 L 44 41 C 44 42.668484 42.668484 44 41 44 L 33 44 L 33 30 L 36.820312 30 L 38.220703 23 L 33 23 L 33 21 C 33 20.442508 33.05305 20.398929 33.240234 20.277344 C 33.427419 20.155758 34.005822 20 35 20 L 38 20 L 38 14.369141 L 37.429688 14.097656 C 37.429688 14.097656 35.132647 13 32 13 C 29.75 13 27.901588 13.896453 26.71875 15.375 C 25.535912 16.853547 25 18.833333 25 21 L 25 23 L 22 23 L 22 30 L 25 30 L 25 44 L 9 44 C 7.3315161 44 6 42.668484 6 41 L 6 9 C 6 7.3315161 7.3315161 6 9 6 z M 32 15 C 34.079062 15 35.38736 15.458455 36 15.701172 L 36 18 L 35 18 C 33.849178 18 32.926956 18.0952 32.150391 18.599609 C 31.373826 19.104024 31 20.061492 31 21 L 31 25 L 35.779297 25 L 35.179688 28 L 31 28 L 31 44 L 27 44 L 27 28 L 24 28 L 24 25 L 27 25 L 27 21 C 27 19.166667 27.464088 17.646453 28.28125 16.625 C 29.098412 15.603547 30.25 15 32 15 z"/></svg>