fix2

Author: AyushRatan1

components/TimeLine.tsx

@@ -1,46 +1,45 @@
-import { useEffect, useRef } from 'react';
 import { Text, Timeline } from '@mantine/core';
 import { AnnotationIcon } from '@heroicons/react/solid';
 
 
 export default function CustomTimeLine() {
   const data = [
-    { label: 'Submission of Full-length Manuscript (opens from)', date: '5th July 2024' },
-    { label: 'Last date to submit Full-length Manuscript', date: '30th July 2024' },
-    { label: 'Notification of Acceptance', date: '28th August 2024' },
-    { label: 'Early Bird Registration', date: 'Before 18th September 2024' },
-    { label: 'Submission of Camera-ready Manuscript and Copyright Form', date: '10th October 2024' },
-    { label: 'Last Date for Registration', date: '15th October 2024' },
-    { label: 'Pre-Conference Tutorial', date: '7th November 2024' },
-    { label: 'Conference Dates', date: '8th and 9th November 2024' },
+    {
+      label: 'Submission of Full-length Manuscript (opens from)',
+      date: '5th July 2024',
+    },
+    {
+      label: 'Last date to submit Full-length Manuscript',
+      date: '30th July 2024',
+    },
+    {
+      label: 'Notification of Acceptance',
+      date: '28th August 2024',
+    },
+    {
+      label: 'Early Bird Registration',
+      date: 'Before 18th September 2024',
+    },
+    {
+      label: 'Submission of Camera-ready Manuscript and Copyright Form',
+      date: '10th October 2024',
+    },
+    {
+      label: 'Last Date for Registration',
+      date: '15th October 2024',
+    },
+    {
+      label: 'Pre-Conference Tutorial',
+      date: '7th November 2024',
+    },
+    {
+      label: 'Conference Dates',
+      date: '8th and 9th November 2024',
+    },
   ];
 
-  const observer = useRef();
-
-  useEffect(() => {
-    observer.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add('fade-in-visible');
-          }
-        });
-      },
-      { threshold: 0.1 }
-    );
-
-    const elements = document.querySelectorAll('.fade-in');
-    elements.forEach((element) => observer.current.observe(element));
-
-    return () => {
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-    };
-  }, []);
-
   return (
-    <div>
+    <div className="fade-in">
       <h1 className="my-4 bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-3xl font-extrabold text-transparent underline">
         Important Dates
       </h1>
@@ -50,7 +49,7 @@ export default function CustomTimeLine() {
             key={index}
             bullet={<AnnotationIcon className="h-6 w-6 text-teal-500" />}
             title={<span className="font-semibold text-lg">{item.label}</span>}
-            className="my-2 fade-in"
+            className="my-2"
           >
             <Text size="md" mt={4} className="text-gray-700">
               {item.date}

styles/globals.css

@@ -100,16 +100,5 @@
   height: 100%;
   display: block;
 }
-/* CustomTimeLine.css */
-.fade-in {
-  opacity: 0;
-  transform: translateY(20px);
-  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
-}
-
-.fade-in-visible {
-  opacity: 1;
-  transform: translateY(0);
-}