redesigned app for cleaner ux

src/Components/Pages/Results/ResultsPage.tsx

@@ -1,16 +1,25 @@
 import { useTranslation } from "react-i18next";
+import { motion, useReducedMotion } from "framer-motion";
 import CardContainer from "./CardContainer";
 
 const ResultsPage = () => {
   const { t } = useTranslation();
+  const prefersReducedMotion = useReducedMotion();
 
   return (
     <div className="header-text">
-      <h1>
-        <span className="gold-text">"</span>
+      <motion.h1
+        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
+        whileInView={
+          prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+        }
+        viewport={{ once: true, margin: "-100px" }}
+        transition={{ type: "spring", damping: 22, stiffness: 140 }}
+      >
+        <span className="gold-text">&ldquo;</span>
         {t("results.heading.part1")} <br /> {t("results.heading.part2")}
-        <span className="gold-text">"</span>
-      </h1>
+        <span className="gold-text">&rdquo;</span>
+      </motion.h1>
       <CardContainer />
     </div>
   );