From 7caff007c500344eed118568f88140bff9483f13 Mon Sep 17 00:00:00 2001
From: Ayush <ayushratan082@gmail.com>
Date: Sat, 27 Jul 2024 19:49:57 +0530
Subject: [PATCH 1/2] fix

---
 components/TimeLine.tsx | 76 +++++++++++++++++++++--------------------
 pages/tracks.tsx        | 32 ++++++++---------
 styles/globals.css      | 11 ++++++
 3 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/components/TimeLine.tsx b/components/TimeLine.tsx
index a4d9a58..e484d4f 100644
--- a/components/TimeLine.tsx
+++ b/components/TimeLine.tsx
@@ -1,41 +1,43 @@
-import { Text, Timeline } from '@mantine/core'
-import { AnnotationIcon } from '@heroicons/react/solid'
+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>
@@ -48,7 +50,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"
+            className="my-2 fade-in"
           >
             <Text size="md" mt={4} className="text-gray-700">
               {item.date}
@@ -57,5 +59,5 @@ export default function CustomTimeLine() {
         ))}
       </Timeline>
     </div>
-  )
+  );
 }
diff --git a/pages/tracks.tsx b/pages/tracks.tsx
index 5614c40..b5fb24c 100644
--- a/pages/tracks.tsx
+++ b/pages/tracks.tsx
@@ -2,18 +2,16 @@ import React from 'react';
 
 function Papers() {
   return (
-    <div className="mt-10 bg-gradient-to-b from-blue-50 to-blue-100 py-10">
-      <aside className="bg-white shadow-lg rounded-lg p-4 sm:p-8 lg:p-12 mx-auto max-w-4xl">
+    <div className="mt-10 bg-light-blue-100 py-10">
+      <aside className="bg-white shadow-lg rounded-lg p-6 sm:p-8 lg:p-12 mx-auto max-w-4xl">
         <div className="text-center">
-          <p className="text-2xl sm:text-3xl font-bold text-blue-700 sm:text-5xl">
-            Conference Tracks
-          </p>
+          <p className="text-3xl sm:text-5xl font-bold text-blue-700">Conference Tracks</p>
         </div>
         <p className="text-justify text-lg sm:text-2xl font-medium text-gray-700 my-4">
           Authors are invited to submit their original research work in the following areas (but not limited to):
         </p>
         <ul className="text-justify text-base sm:text-xl font-medium text-gray-600 list-none space-y-4">
-          <li className="mb-4">
+          <li>
             <b>Computational Analysis of Structural and Functional Materials:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Energy Materials, Nanomaterials, Smart Materials</li>
@@ -22,7 +20,7 @@ function Papers() {
               <li>Target Tracking/Recognition</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Green Electronics: Sustainable Practices:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Eco-Friendly Materials for Electronics</li>
@@ -31,7 +29,7 @@ function Papers() {
               <li>Biodegradable and Organic Electronics</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Robotics and Automation:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Artificial Intelligence in Robotics</li>
@@ -40,7 +38,7 @@ function Papers() {
               <li>Robotic Perception and Sensing</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Photonics, Optoelectronics and Mechatronics Systems:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Fiber optics and optical communications</li>
@@ -49,7 +47,7 @@ function Papers() {
               <li>Micro-electromechanical systems (MEMS)</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Artificial Intelligence for Sustainable World:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>AI and ML engineering and science applications</li>
@@ -60,7 +58,7 @@ function Papers() {
               <li>Generative AI for society and industry</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Digital Transformation in Various Sectors of Economy:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Digital transformation in Logistics</li>
@@ -69,7 +67,7 @@ function Papers() {
               <li>E-commerce and E-business</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Renewable Energy and Environmental Engineering:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Microgrids & Smart grids</li>
@@ -78,9 +76,10 @@ function Papers() {
               <li>Distributed Energy system and Control Strategies</li>
               <li>Power System operation, resilience, monitoring and control</li>
               <li>Carbon Capture, Utilization & Storage (CCUS) and Alternative Fuels</li>
+              <li>Sustainable construction materials and technologies</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Cyber-Physical Systems:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Next-Generation CPS Architectures</li>
@@ -89,7 +88,7 @@ function Papers() {
               <li>Ethical Considerations in CPS Design and Deployment</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Biomedical Electronics and Healthcare Applications:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Biomedical Image processing</li>
@@ -97,7 +96,7 @@ function Papers() {
               <li>Point of care devices, Bio_Mems</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Quantum Mechanics and Computing:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Hybrid quantum-classical computing systems</li>
@@ -105,7 +104,7 @@ function Papers() {
               <li>Quantum machine learning and optimization algorithms</li>
             </ul>
           </li>
-          <li className="mb-4">
+          <li>
             <b>Next-Generation Communication Systems:</b>
             <ul className="pl-6 list-disc list-inside space-y-2">
               <li>Internet of Things (IoT), 5G and Beyond</li>
@@ -118,7 +117,6 @@ function Papers() {
             </ul>
           </li>
         </ul>
-        
       </aside>
     </div>
   );
diff --git a/styles/globals.css b/styles/globals.css
index d0560a3..5c07c2d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -100,5 +100,16 @@
   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);
+}
 
 

From 8cae7f5b5b1d1bd897bb737732094317e7cfdbde Mon Sep 17 00:00:00 2001
From: Ayush <ayushratan082@gmail.com>
Date: Sat, 27 Jul 2024 19:53:40 +0530
Subject: [PATCH 2/2] fix2

---
 components/TimeLine.tsx | 69 ++++++++++++++++++++---------------------
 styles/globals.css      | 11 -------
 2 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/components/TimeLine.tsx b/components/TimeLine.tsx
index e484d4f..fe584c6 100644
--- a/components/TimeLine.tsx
+++ b/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}
diff --git a/styles/globals.css b/styles/globals.css
index 5c07c2d..d0560a3 100644
--- a/styles/globals.css
+++ b/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);
-}