From 6090df923d8ceed73e14e5f81042d9411c43026e Mon Sep 17 00:00:00 2001
From: slugb0t <wheresdorian@gmail.com>
Date: Tue, 7 Jan 2025 10:52:37 -0800
Subject: [PATCH] refactor: :recycle: add tracker to homepage

---
 src/pages/index.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index be7b511..c48a768 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -12,6 +12,12 @@ import Layout from '@/components/layout/Layout';
 import ButtonLink from '@/components/links/ButtonLink';
 import Seo from '@/components/Seo';
 
+import {
+  FadeFramerItem,
+  WidthFramerContainer,
+  WidthFramerItem,
+} from '@/utils/framer';
+
 /**
  * SVGR Supportgray
  * Caveat: No React Props Type.
@@ -430,6 +436,52 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
                 </div>
               </div>
             </motion.div>
+
+            <div className='mx-auto mt-20 max-w-screen-xl'>
+              <motion.div
+                variants={WidthFramerContainer}
+                initial='hidden'
+                whileInView='show'
+                viewport={{ once: true, amount: 1 }}
+                className='relative h-[40px] w-full'
+              >
+                <div className='h-full rounded-full border border-blue-100 bg-white shadow-[inset_0_0_8px_rgba(0,0,0,0.3)]'>
+                  <span className='absolute bottom-[45px] right-2 text-base font-medium'>
+                    4000 participants
+                  </span>
+                </div>
+
+                <motion.div
+                  variants={WidthFramerItem}
+                  className='absolute inset-0 max-w-[78%] rounded-full bg-blue-300'
+                />
+
+                <motion.div
+                  variants={FadeFramerItem}
+                  className='completed-consent-text'
+                >
+                  <span className='block text-xl font-bold'>3,140+</span>
+                  <span className='text-[16px] font-normal'>
+                    participants have completed the consent process
+                  </span>
+                </motion.div>
+
+                <motion.div
+                  variants={WidthFramerItem}
+                  className='absolute inset-0 max-w-[40%] rounded-full bg-blue-600'
+                />
+
+                <motion.div
+                  variants={FadeFramerItem}
+                  className='completed-study-text'
+                >
+                  <span className='block text-xl font-bold'>1590+</span>
+                  <span className='text-[16px] font-normal'>
+                    participants have completed in-person study visit
+                  </span>
+                </motion.div>
+              </motion.div>
+            </div>
           </section>
 
           <section className='bg-gradient-to-t from-sky-100 to-white py-20'>