style: restyle and align main page progress bar

Author: Aydawka

src/pages/index.tsx

@@ -239,22 +239,25 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
                   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 top-[45px] right-2 text-base font-medium'>
-                      4000 participants
-                    </span>
-                  </div>
-
                   <motion.div
                     variants={WidthFramerItem}
                     className='absolute inset-0 max-w-[95%] rounded-full bg-blue-300'
                   />
-
                   <motion.div
                     variants={FadeFramerItem}
-                    className='completed-consent-text xl:w-[240px] max-xl:w-[70px]'
+                    className='total-participants'
+                  >
+                    <span className='block text-xl font-bold'>Goal</span>
+                    <span className='text-[16px] font-normal'>
+                       data collection from 4,000 participants
+                    </span>
+                  </motion.div>
+                  <motion.div
+                    variants={FadeFramerItem}
+                    className='completed-consent-text'
                   >
                     <span className='block text-xl font-bold'>3,810+</span>
-                    <span className='text-[16px] font-normal max-xl:text-[12px]'>
+                    <span className='text-[16px] font-normal'>
                       participants completed the consent process
                     </span>
                   </motion.div>
@@ -263,16 +266,17 @@ const HomePage: React.FC<EventItem> = ({ slug, frontMatter }) => {
                     variants={WidthFramerItem}
                     className='absolute inset-0 max-w-[48%] rounded-full bg-blue-600'
                   />
-
                   <motion.div
                     variants={FadeFramerItem}
                     className='completed-study-text'
                   >
                     <span className='block text-xl font-bold'>1,940+</span>
-                    <span className='text-[16px] font-normal max-xl:text-[12px]'>
+                    <span className='text-[16px] font-normal'>
                       participants completed in-person study visit
                     </span>
                   </motion.div>
+                  </div>
+
                 </motion.div>
               </div>
             </div>

src/styles/globals.css

@@ -162,6 +162,14 @@
   bottom: 85px;
   left: calc(95% - 12px);
   z-index: 4;
+  width: 240px;
+}
+
+.completed-consent-text > span
+{
+	display: block;
+	transform: translateX(calc(-100% + 32px));
+	text-align: right;
 }
 
 .completed-consent-text:after {
@@ -186,6 +194,13 @@
   width: 240px;
 }
 
+.completed-study-text > span
+{
+	display: block;
+	transform: translateX(calc(-100% + 32px));
+	text-align: right;
+}
+
 .completed-study-text:after {
   content: '';
   position: absolute;
@@ -199,3 +214,32 @@
 
   @apply border-b-transparent border-l-transparent border-r-transparent border-t-blue-600;
 }
+
+.total-participants {
+  position: absolute;
+  top: 85px;
+  left: calc(99% - 12px);
+  z-index: 4;
+  width: 240px;
+}
+
+.total-participants > span
+{
+	display: block;
+	transform: translateX(calc(-101% + 32px));
+	text-align: right;
+}
+
+.total-participants:after {
+  content: '';
+  position: absolute;
+  top: -34px;
+  left: 0;
+  width: 0px;
+  height: 0px;
+  border-style: solid;
+  border-width: 28px 16.5px 0 16.5px;
+  transform: rotate(180deg);
+
+  @apply border-b-transparent border-l-transparent border-r-transparent border-t-blue-600;
+}