Added Quote component

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "framer-motion": "^11.1.7",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.1.0"

src/components/Quote.jsx

@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+
+const Quote = ({ p1, p2, p3, auth}) => {
+    return (
+        <div>
+            <p className={"font-quotes text-3xl italic font-extralight tracking-wider"}>
+                {p1} <span
+                className={"font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary-light dark:from-primary-dark to-accent-light dark:to-accent-dark"}
+            >{p2}</span> {p3}
+            </p>
+            <p className={"pt-3 font-quotes text-2xl italic font-extralight tracking-wide"}>
+                {auth}
+            </p>
+        </div>
+    )
+};
+
+Quote.propTypes = {
+    p1: PropTypes.node.isRequired,
+    p2: PropTypes.node.isRequired,
+    p3: PropTypes.node.isRequired,
+    auth: PropTypes.node.isRequired,
+}
+
+export default Quote

src/sections/home/Whoami.jsx

@@ -1,3 +1,5 @@
+import Quote from "../../components/Quote.jsx";
+
 const Whoami = () => {
     return (
         <div>
@@ -22,14 +24,12 @@ const Whoami = () => {
                         </p>
                     </div>
                     <div className={"py-6"}>
-                        <p className={"font-quotes text-3xl italic font-extralight tracking-wider"}>
-                            “Dreams without goals, are just <span
-                                className={"font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary-light dark:from-primary-dark to-accent-light dark:to-accent-dark"}
-                            >dreams</span> and they ultimately fuel disappointment.”
-                        </p>
-                        <p className={"pt-3 font-quotes text-2xl italic font-extralight tracking-wide"}>
-                            Denzel Washington
-                        </p>
+                        <Quote
+                            p1={`"Dreams without goals, are just `}
+                            p2={"dreams"}
+                            p3={` and they ultimately fuel disappointment."`}
+                            auth={"Denzel Washington"}
+                        />
                     </div>
                     <div className={"flex mt-4 justify-center md:justify-start"}>
                         <button className={"text-center py-2 px-6 font-body text-2xl bg-primary-light flex-shrink-0 rounded-full dark:bg-primary-dark text-text-dark hover:bg-primary-dark dark:hover:bg-primary-light"}>