AW-103-lottie

src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx

@@ -4,8 +4,7 @@ import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import Header from "../../components/Header";
-import LottieAnimation from "@/lotties/v1/magnifyingGlassAndPlanet.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import Lottie from "lottie-react";
 
 function AlmostTherePage() {
   const navigate = useNavigate();
@@ -26,7 +25,11 @@ function AlmostTherePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      <Lottie animationData={LottieAnimation} loop={false} />
+      <DotLottiePlayer
+        src="https://lottie.host/7e1e77e6-46a3-4122-8584-7555539d1b15/ASrDx8yoMC.lottie"
+        autoplay
+        loop={false}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           Almost there! <br /> Now let's tailor your plan by understanding the{" "}

src/components/pages/ABDesign/v1/pages/Both/index.tsx

@@ -9,8 +9,7 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
-import LottieScalesNeutral from "@/lotties/v1/scales-neutral.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import Lottie from "lottie-react";
 
 function BothPage() {
   const navigate = useNavigate();
@@ -35,10 +34,11 @@ function BothPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles["image-container"]}>
-        <Lottie
+        <DotLottiePlayer
           className={styles["lottie-animation"]}
+          src="https://lottie.host/ddd2cb46-d62f-4808-a10d-1dd5ce8d42d2/6hgUBBGjaJ.lottie"
+          autoplay
           loop={false}
-          animationData={LottieScalesNeutral}
         />
       </div>
       <div>

src/components/pages/ABDesign/v1/pages/EmailConfirm/index.tsx

@@ -6,8 +6,7 @@ import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import QuestionnaireGreenButton from "../../ui/GreenButton";
-import LottieAnimation from "@/lotties/v1/hand-and-stars.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import Lottie from "lottie-react";
 
 function EmailConfirmPage() {
   const navigate = useNavigate();
@@ -26,10 +25,11 @@ function EmailConfirmPage() {
       />
       <Header className={styles.header} />
       <div className={styles["top-section"]}>
-        <Lottie
+        <DotLottiePlayer
           className={styles["lottie-animation"]}
+          src="https://lottie.host/25105d46-cc0a-4f76-9ad0-5e64e3eb0e52/OenfEsMruV.lottie"
+          autoplay
           loop={false}
-          animationData={LottieAnimation}
         />
         <Title className={styles.title}>
           Get access to your{" "}

src/components/pages/ABDesign/v1/pages/GoalSetup/index.tsx

@@ -6,8 +6,7 @@ import routes from "@/routes";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import LottieAnimation from "@/lotties/v1/zodiac-signs-map.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import Lottie from "lottie-react";
 
 function GoalSetupPage() {
   const navigate = useNavigate();
@@ -30,9 +29,9 @@ function GoalSetupPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles["image-container"]}>
-        <Lottie
+        <DotLottiePlayer
-          animationData={LottieAnimation}
           className={styles["lottie-animation"]}
+          src="https://lottie.host/a86e1531-7028-4688-a836-ea9d71dafa3b/Pe5G1g9s9L.lottie"
           autoplay
           loop={false}
         />

src/components/pages/ABDesign/v1/pages/GoalSetup/styles.module.css

@@ -76,6 +76,9 @@
 
 .text-container {
     margin-top: 68px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .lottie-animation {

src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx

@@ -7,8 +7,7 @@ import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import Header from "../../components/Header";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import LottieUmbrella from "@/lotties/v1/umbrella.json";
 
 function NotAlonePage() {
   const navigate = useNavigate();
@@ -29,7 +28,11 @@ function NotAlonePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      <Lottie loop={false} animationData={LottieUmbrella} />
+      <DotLottiePlayer
+        src="https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie"
+        autoplay
+        loop={false}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           You’re not alone.

src/components/pages/ABDesign/v1/pages/PartnerThing/index.tsx

@@ -9,8 +9,7 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import Header from "../../components/Header";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
-import LottieScalesHeart from "@/lotties/v1/compass.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import Lottie from "lottie-react";
 
 function PartnerThingPage() {
   const navigate = useNavigate();
@@ -35,7 +34,11 @@ function PartnerThingPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles.circle}>
-        <Lottie loop={false} animationData={LottieScalesHeart} />
+        <DotLottiePlayer
+          src="https://lottie.host/15b235d7-b8c9-487f-8d65-73143afc9ecc/czTjX9Lwp1.lottie"
+          autoplay
+          loop={false}
+        />
       </div>
       <div>
         <Title variant="h1" className={styles.title}>

src/components/pages/ABDesign/v1/pages/QuestionnaireIntermediate/index.tsx

@@ -5,10 +5,9 @@ import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
-import LottieKey from "@/lotties/v1/key.json";
 import Header from "../../components/Header";
 import { textVariables } from "../../data/textVariables";
-import Lottie from "lottie-react";
+import { DotLottiePlayer } from "@dotlottie/react-player";
 
 function QuestionnaireIntermediatePage() {
   const navigate = useNavigate();
@@ -45,7 +44,11 @@ function QuestionnaireIntermediatePage() {
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}
       />
-      <Lottie loop={false} animationData={LottieKey} />
+      <DotLottiePlayer
+        src="https://lottie.host/a80ec293-6f3d-4d21-a19e-9dfb40b86a14/clQys1OEAL.lottie"
+        autoplay
+        loop={false}
+      />
       <div>
         {path && (
           <Title variant="h1" className={styles.title}>

src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx

@@ -4,8 +4,7 @@ import MainButton from "@/components/MainButton";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
 import Header from "../../components/Header";
-import LottieAnimation from "@/lotties/v1/magnifyingGlassAndPlanet.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import Lottie from "lottie-react";
 
 function RelationshipAlmostTherePage() {
   const navigate = useNavigate();
@@ -24,7 +23,11 @@ function RelationshipAlmostTherePage() {
         classNameTitle={styles["header-title"]}
         isBackButtonVisible={false}
       />
-      <Lottie animationData={LottieAnimation} loop={false} />
+      <DotLottiePlayer
+        src="https://lottie.host/7e1e77e6-46a3-4122-8584-7555539d1b15/ASrDx8yoMC.lottie"
+        autoplay
+        loop={false}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           <strong>Almost there!</strong> <br /> Now let's begin tailoring your

src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx

@@ -7,9 +7,7 @@ import { selectors } from "@/store";
 import { useSelector } from "react-redux";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import Header from "../../components/Header";
-import LottieSun from "@/lotties/v1/sun.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import LottieUmbrella from "@/lotties/v1/umbrella.json";
-import Lottie from "lottie-react";
 
 function Satisfied() {
   const navigate = useNavigate();
@@ -42,9 +40,19 @@ function Satisfied() {
         classNameTitle={styles["header-title"]}
         isBackButtonVisible={false}
       />
-      {satisfied === "yes" && <Lottie loop={false} animationData={LottieSun} />}
+      {satisfied === "yes" && (
+        <DotLottiePlayer
+          src="https://lottie.host/da11de16-a8a4-47f3-bf0c-36302131f174/hdmkQ2wPxz.lottie"
+          autoplay
+          loop={false}
+        />
+      )}
       {satisfied === "no" && (
-        <Lottie loop={false} animationData={LottieUmbrella} />
+        <DotLottiePlayer
+          src="https://lottie.host/e353e80c-fd4a-4eca-a930-d9bf923466e0/G4sxbtkhIA.lottie"
+          autoplay
+          loop={false}
+        />
       )}
       <div>
         {satisfied === "yes" && (

src/components/pages/ABDesign/v1/pages/WithHead/index.tsx

@@ -9,8 +9,7 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import LottieScalesWithHead from "@/lotties/v1/scales-head.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import Lottie from "lottie-react";
 
 function WithHeadPage() {
   const navigate = useNavigate();
@@ -35,10 +34,11 @@ function WithHeadPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles["image-container"]}>
-        <Lottie
+        <DotLottiePlayer
           className={styles["lottie-animation"]}
+          src="https://lottie.host/19fe41d7-d26f-431c-b063-8e123ce3d57a/HiucMMidQT.lottie"
+          autoplay
           loop={false}
-          animationData={LottieScalesWithHead}
         />
       </div>
       <div>

src/components/pages/ABDesign/v1/pages/WithHeart/index.tsx

@@ -9,8 +9,7 @@ import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { useDynamicSize } from "@/hooks/useDynamicSize";
 import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
-import LottieScalesHeart from "@/lotties/v1/scales-heart.json";
+import { DotLottiePlayer } from "@dotlottie/react-player";
-import Lottie from "lottie-react";
 
 function WithHeartPage() {
   const navigate = useNavigate();
@@ -35,7 +34,12 @@ function WithHeartPage() {
       />
       <Header isBackButtonVisible={false} />
       <div className={styles["image-container"]}>
-        <Lottie className={styles["lottie-animation"]} loop={false} animationData={LottieScalesHeart} />
+        <DotLottiePlayer
+          className={styles["lottie-animation"]}
+          src="https://lottie.host/9eb3f7a1-83c2-495a-9342-c234bfebc40c/0T90l2xSWl.lottie"
+          autoplay
+          loop={false}
+        />
       </div>
       <div>
         <Title variant="h1" className={styles.title}>