fix: update in person participants count and style

Author: Aydawka

src/pages/index.tsx

@@ -239,37 +239,37 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
                   <div className='h-full rounded-full border border-blue-100 bg-white shadow-[inset_0_0_8px_rgba(0,0,0,0.3)]'>
                     <motion.div
                       variants={WidthFramerItem}
-                      className='absolute inset-0 max-w-[100%] rounded-full bg-blue-300'
+                      className='absolute inset-0 max-w-[77%] rounded-full bg-blue-300'
                     />
                     <motion.div
                       variants={FadeFramerItem}
                       className='total-participants'
                     >
                       <span className='block text-xl font-bold'>Goal</span>
-                      <span className='max-w-[180px] text-[16px] font-normal max-md:max-w-[130px]'>
+                      <span className='max-w-[200px] text-[16px] font-normal max-md:max-w-[130px]'>
                         data collection from 4,000 participants
                       </span>
                     </motion.div>
                     <motion.div
                       variants={FadeFramerItem}
-                      className='completed-consent-text'
+                      className='completed-consent-text w-full'
                     >
                       <span className='block text-xl font-bold'>4,920+</span>
-                      <span className='max-w-[180px] text-[16px] font-normal max-md:max-w-[130px]'>
+                      <span className='max-w-[200px] text-[16px] font-normal max-md:max-w-[130px]'>
                         participants completed the consent process
                       </span>
                     </motion.div>
 
                     <motion.div
                       variants={WidthFramerItem}
-                      className='absolute inset-0 max-w-[85%] rounded-full bg-blue-600'
+                      className='absolute inset-0 max-w-[69%] rounded-full bg-blue-600'
                     />
                     <motion.div
                       variants={FadeFramerItem}
                       className='completed-study-text'
                     >
-                      <span className='block text-xl font-bold'>3,390+</span>
-                      <span className='max-w-[180px] text-[16px] font-normal max-md:max-w-[140px]'>
+                      <span className='block text-xl font-bold'>3,570+</span>
+                      <span className='max-w-[200px] text-[16px] font-normal max-md:max-w-[140px]'>
                         participants completed in-person study visit
                       </span>
                     </motion.div>

src/styles/globals.css

@@ -162,7 +162,6 @@
   bottom: 85px;
   left: calc(99% - 12px);
   z-index: 4;
-  width: 150px;
 }
 
 .completed-consent-text > span {
@@ -187,9 +186,8 @@
 
 .completed-study-text {
   position: absolute;
-  left: calc(85% - 12px);
+  left: calc(69% - 12px);
   z-index: 4;
-  width: 150px;
   bottom: 85px;
 }
 
@@ -215,7 +213,7 @@
 .total-participants {
   position: absolute;
   top: 85px;
-  left: calc(93% - 12px);
+  left: calc(77% - 12px);
   z-index: 4;
   width: 240px;
 }