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); -}