Light-it-labs · sgoycoechea-lightit · Jan 3, 2024 · Jan 3, 2024
diff --git a/apps/eo_web/dist/assets/main-94a1d790.css → apps/eo_web/dist/assets/main-0d348634.css b/apps/eo_web/dist/assets/main-94a1d790.css → apps/eo_web/dist/assets/main-0d348634.css
diff --git a/apps/eo_web/dist/assets/main-2bb9d3aa.js → apps/eo_web/dist/assets/main-b080c032.js b/apps/eo_web/dist/assets/main-2bb9d3aa.js → apps/eo_web/dist/assets/main-b080c032.js
diff --git a/apps/eo_web/dist/manifest.json b/apps/eo_web/dist/manifest.json
@@ -8,17 +8,17 @@
     "src": "../../packages/ui/src/assets/avatar.svg"
   },
   "src/main.css": {
-    "file": "assets/main-94a1d790.css",
+    "file": "assets/main-0d348634.css",
     "src": "src/main.css"
   },
   "src/main.tsx": {
     "assets": [
       "assets/UploadFile-694e44b5.svg"
     ],
     "css": [
-      "assets/main-94a1d790.css"
+      "assets/main-0d348634.css"
     ],
-    "file": "assets/main-2bb9d3aa.js",
+    "file": "assets/main-b080c032.js",
     "isEntry": true,
     "src": "src/main.tsx"
   }

diff --git a/apps/eo_web/src/components/AllDonePanel.tsx b/apps/eo_web/src/components/AllDonePanel.tsx
@@ -0,0 +1,22 @@
+import { Typography } from '@eo/ui'
+import type { ReactNode } from "react";
+
+interface AllDonePanelProps {
+  children?: ReactNode
+}
+
+export const AllDonePanel = ({ children }: AllDonePanelProps) => {
+  return (
+    <section className="flex h-auto flex-col items-center justify-center px-[20%] md:min-h-[479px] pb-10">
+      <Typography
+        variant="large"
+        className="text-[42px] font-bold leading-[55px]"
+      >
+        All done!
+      </Typography>
+
+      <br />
+      {children}
+    </section>
+  )
+}
diff --git a/apps/eo_web/src/components/EOInYourInbox.tsx b/apps/eo_web/src/components/EOInYourInbox.tsx
@@ -0,0 +1,30 @@
+import { Button, Typography } from '@eo/ui'
+import React from 'react'
+
+export const EOInYourInbox = () => {
+  return (
+    <section className="w-full bg-white px-6 py-12 md:px-[50px] md:py-[100px]">
+      <div className="flex flex-col items-center">
+        <Typography
+          font="bold"
+          className="mb-4 text-center text-[32px] leading-[40px] text-skunk"
+        >
+          eo in your inbox
+        </Typography>
+        <Typography className="text-center text-skunk-mid">
+          Rollouts in new markets, new partnerships, research initiatives and
+          special offers are all coming soon.
+        </Typography>
+        <div className="mt-[30px] flex w-full flex-col justify-items-end gap-4 md:w-auto md:flex-row">
+          <input
+            className="h-[49px] w-full rounded-[40px] border border-solid border-black bg-white py-3 pl-4 pr-2 text-black placeholder:text-gray-300 md:w-[327px]"
+            placeholder="Enter your email..."
+          />
+          <Button variant="black" font="semiBold">
+            Subscribe
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/eo_web/src/components/FAQs.tsx b/apps/eo_web/src/components/FAQs.tsx
@@ -0,0 +1,29 @@
+import { Typography } from '@eo/ui'
+import React from 'react'
+import { faqs } from '~/copy/copy'
+import { Collapsible } from './Collapsible'
+
+export const FAQs = () => {
+  return (
+    <section className="px-6 py-12 md:mx-0 md:my-[100px]">
+      <div className="mx-auto my-0 flex max-w-[900px] flex-col">
+        <Typography
+          font="bold"
+          variant="large"
+          className="mb-[50px] text-center"
+        >
+          FAQs
+        </Typography>
+        <div className="flex flex-col gap-6">
+          {faqs.map(({ title, content }) => (
+            <Collapsible key={title} title={title} active={false}>
+              <Typography className="text-[18px] leading-[26px] text-gray-800">
+                {content}
+              </Typography>
+            </Collapsible>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/eo_web/src/components/HowEOWorks.tsx b/apps/eo_web/src/components/HowEOWorks.tsx
@@ -0,0 +1,36 @@
+import { Typography } from '@eo/ui'
+import React from 'react'
+import { EoCarousel } from './Carousel'
+import { CarrouselItems } from '~/copy/copy'
+
+export const HowEOWorks = () => {
+  return (
+    <section className="bg-white px-6 py-12 md:px-[50px] md:py-[100px] ">
+      <Typography font="bold" variant="large" className="mb-20 text-center">
+        How eo care plans work
+      </Typography>
+      <EoCarousel>
+        {CarrouselItems.map(({ title, content, step, icon: Icon }) => (
+          <article
+            key={step}
+            className="mx-auto my-0 flex h-auto w-auto max-w-[361px] flex-col items-center justify-center gap-2 md:flex-none md:items-start"
+          >
+            <div className="flex h-[70.13px] w-[70.13px] flex-row items-center justify-center rounded-full bg-electric-blue fill-gray-50">
+              <Icon className="h-9 w-[37px]" />
+            </div>
+
+            <Typography className="text-[16px] uppercase leading-4 tracking-[.8px]">
+              STEP {step}
+            </Typography>
+            <Typography font="bold" className="text-xl">
+              {title}
+            </Typography>
+            <Typography className="text-center text-lg md:text-left">
+              {content}
+            </Typography>
+          </article>
+        ))}
+      </EoCarousel>
+    </section>
+  )
+}
diff --git a/apps/eo_web/src/screens/Athlete/AthleteSurveyThankYou.tsx b/apps/eo_web/src/screens/Athlete/AthleteSurveyThankYou.tsx
@@ -8,6 +8,10 @@ import { Typography } from "@eo/ui";
 import { useApi } from "~/api/useApi";
 import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
+import { AllDonePanel } from "~/components/AllDonePanel";
+import { HowEOWorks } from "~/components/HowEOWorks";
+import { FAQs } from "~/components/FAQs";
+import { FooterFull } from "~/layouts/FooterFull";
 
 
 
@@ -44,28 +48,25 @@ export const AthleteSurveyThankYou = () => {
 
   return (
     <LayoutDefault>
-      <div className="flex h-full flex-col items-center justify-center px-[20%]">
-        <Typography
-          variant="large"
-          className="font-nunito text-[45px] font-bold leading-[55px]"
-        >
-          All done!
-        </Typography>
-        <br />
+      <AllDonePanel>
         <Typography
           variant="base"
           font="regular"
-          className="font-nunito text-center text-[28px] font-light leading-[40px]"
+          className="text-center text-[22px] font-normal leading-[36px]"
         >
-          We receive your feedback! <br />
+          We received your feedback! <br />
           <br />
           Thank you! <br />
           <br />
-          Have questions? We’re here. Email [email protected], call{" "}
+          Have questions? We’re here. Email [email protected], call
+          <br />
           <a href="tel:+1-877-707-0706">877-707-0706</a>, or schedule a free
           consultation.
         </Typography>
-      </div>
+      </AllDonePanel>
+      <HowEOWorks />
+      <FAQs />
+      <FooterFull />
     </LayoutDefault>
   );
 };
diff --git a/apps/eo_web/src/screens/ProfilingThankYou.tsx b/apps/eo_web/src/screens/ProfilingThankYou.tsx
@@ -4,18 +4,18 @@ import axios from "axios";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { toast } from "react-toastify";
 
-import { Button, Typography } from "@eo/ui";
+import { Typography } from "@eo/ui";
 
 import { useApi } from "~/api/useApi";
-import { EoCarousel } from "~/components/Carousel";
-import { Collapsible } from "~/components/Collapsible";
-import { WEB_APP_URL } from "~/configs/env";
-import { CarrouselItems, faqs } from "~/copy/copy";
 import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
 import { FooterFull } from "~/layouts/FooterFull";
 import { ROUTES } from "~/router";
 import { useProfilingStore } from "~/stores/useProfilingStore";
+import { FAQs } from "~/components/FAQs";
+import { HowEOWorks } from "~/components/HowEOWorks";
+import { AllDonePanel } from "~/components/AllDonePanel";
+import { WEB_APP_URL } from "~/configs/env";
 
 
 export const ProfilingThankYou = () => {
@@ -72,15 +72,7 @@ export const ProfilingThankYou = () => {
 
   return (
     <LayoutDefault>
-      <section className="flex h-auto flex-col items-center justify-center px-[20%] md:min-h-[479px]">
-        <Typography
-          variant="large"
-          className="text-[42px] font-bold leading-[55px]"
-        >
-          All done!
-        </Typography>
-
-        <br />
+      <AllDonePanel>
         <Typography
           variant="base"
           font="regular"
@@ -101,77 +93,9 @@ export const ProfilingThankYou = () => {
           <a href="tel:+1-877-707-0706">877-707-0706</a>, or schedule a free
           consultation.
         </Typography>
-      </section>
-      <section className="bg-white px-6 py-12 md:px-[50px] md:py-[100px] ">
-        <Typography font="bold" variant="large" className="mb-20 text-center">
-          How eo care plans work
-        </Typography>
-        <EoCarousel>
-          {CarrouselItems.map(({ title, content, step, icon: Icon }) => (
-            <article
-              key={step}
-              className="mx-auto my-0 flex h-auto w-auto max-w-[361px] flex-col items-center justify-center gap-2 md:flex-none md:items-start"
-            >
-              <div className="flex h-[70.13px] w-[70.13px] flex-row items-center justify-center rounded-full bg-electric-blue fill-gray-50">
-                <Icon className="h-9 w-[37px]" />
-              </div>
-
-              <Typography className="mt-6 text-[16px] uppercase leading-4 tracking-[.8px]">
-                {step}
-              </Typography>
-              <Typography font="bold" className="text-xl">
-                {title}
-              </Typography>
-              <Typography className="text-center text-lg md:text-left">
-                {content}
-              </Typography>
-            </article>
-          ))}
-        </EoCarousel>
-      </section>
-      <section className="px-6 py-12 md:mx-0 md:my-[100px]">
-        <div className="mx-auto my-0 flex max-w-[900px] flex-col">
-          <Typography
-            font="bold"
-            variant="large"
-            className="mb-[50px] text-center"
-          >
-            FAQs
-          </Typography>
-          <div className="flex flex-col gap-6">
-            {faqs.map(({ title, content }) => (
-              <Collapsible key={title} title={title} active={false}>
-                <Typography className="text-[18px] leading-[26px] text-gray-800">
-                  {content}
-                </Typography>
-              </Collapsible>
-            ))}
-          </div>
-        </div>
-      </section>
-      <section className="hidden w-full bg-white px-6 py-12 md:px-[50px] md:py-[100px]">
-        <div className="flex flex-col items-center">
-          <Typography
-            font="bold"
-            className="mb-4 text-center text-[32px] leading-[40px] text-skun"
-          >
-            eo in your inbox
-          </Typography>
-          <Typography className="text-center text-skun-mid">
-            Rollouts in new markets, new partnerships, research initiatives and
-            special offers are all coming soon.
-          </Typography>
-          <div className="mt-[30px] flex w-full flex-col justify-items-end gap-4 md:w-auto md:flex-row">
-            <input
-              className="h-[49px] w-full rounded-[40px] border border-solid border-black bg-white py-3 pl-4 pr-2 text-black placeholder:text-gray-300 md:w-[327px]"
-              placeholder="Enter your email..."
-            />
-            <Button variant="black" font="semiBold">
-              Subscribe
-            </Button>
-          </div>
-        </div>
-      </section>
+      </AllDonePanel>
+      <HowEOWorks />
+      <FAQs />
       <FooterFull />
     </LayoutDefault>
   );

diff --git a/apps/eo_web/src/screens/Senior/SeniorSurveyThankYou.tsx b/apps/eo_web/src/screens/Senior/SeniorSurveyThankYou.tsx
@@ -8,6 +8,10 @@ import { Typography } from "@eo/ui";
 import { useApi } from "~/api/useApi";
 import { useMount } from "~/hooks/useMount";
 import { LayoutDefault } from "~/layouts";
+import { AllDonePanel } from "~/components/AllDonePanel";
+import { HowEOWorks } from "~/components/HowEOWorks";
+import { FAQs } from "~/components/FAQs";
+import { FooterFull } from "~/layouts/FooterFull";
 
 
 export const SeniorSurveyThankYou = () => {
@@ -41,28 +45,25 @@ export const SeniorSurveyThankYou = () => {
 
   return (
     <LayoutDefault>
-      <div className="flex h-full flex-col items-center justify-center px-[20%]">
-        <Typography
-          variant="large"
-          className="font-nunito text-[45px] font-bold leading-[55px]"
-        >
-          All done!
-        </Typography>
-        <br />
+      <AllDonePanel>
         <Typography
           variant="base"
           font="regular"
-          className="text-center font-nunito text-[28px] font-light leading-[40px]"
+          className="text-center text-[22px] font-normal leading-[36px]"
         >
-          We receive your feedback! <br />
+          We received your feedback! <br />
           <br />
           Thank you! <br />
           <br />
-          Have questions? We’re here. Email [email protected], call{" "}
+          Have questions? We’re here. Email [email protected], call
+          <br />
           <a href="tel:+1-877-707-0706">877-707-0706</a>, or schedule a free
           consultation.
         </Typography>
-      </div>
+      </AllDonePanel>
+      <HowEOWorks />
+      <FAQs />
+      <FooterFull />
     </LayoutDefault>
   );
 };