research page added

package.json

@@ -16,12 +16,15 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "framer-motion": "^11.11.1",
     "papaparse": "^5.4.1",
+    "antd": "^5.20.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
+    "react-tsparticles": "^2.12.2",
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1",
-    "three": "^0.169.0"
+    "three": "^0.169.0",
+    "tsparticles-slim": "^2.12.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.jsx

@@ -7,7 +7,7 @@ import NewsPage from "./pages/news/News.jsx";
 import Publications from "./pages/publications/Publications.jsx";
 import { HomeNewsCardContext } from "./context/HomeNewsContext.jsx";
 // import JobListings from "./Pages/JoinUs/JoinUs.jsx";
-// import ResearchPage from "./Pages/Research/Research.jsx";
+import Research from "./pages/research/Research.jsx";
 import Navbar from "./components/header/NavBar";
 import { MemberProvider } from "./context/MemberContext";
 import Teams from "./pages/teams/Teams.jsx";
@@ -35,6 +35,7 @@ function App() {
           />
 
           <Route path="/publications" element={<Publications />} />
+          <Route path="/research" element={<Research />} />
           {/* <Route path="/contact" element={<JobListings />} />
           <Route path="/research" element={<ResearchPage />} /> */}
         </Routes>

src/components/research/ResearchCarouselOne.jsx

@@ -0,0 +1,58 @@
+// components/research/ResearchCarousel/ResearchCarouselOne.jsx
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { ResearchContext } from '../../context/ResearchContext';
+
+const ResearchCarouselOne = ({ isActive }) => {
+  const { research } = useContext(ResearchContext);
+  const biosciences = research.sections.biosciences;
+
+  const [isVisible, setIsVisible] = useState(false);
+  const titleRef = useRef(null);
+
+  useEffect(() => {
+    if (!isActive) {
+      setIsVisible(false);
+      return;
+    }
+
+    const sectionElement = titleRef.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0.5 }
+    );
+
+    if (sectionElement) {
+      observer.observe(sectionElement);
+    }
+
+    return () => {
+      if (sectionElement) observer.unobserve(sectionElement);
+    };
+  }, [isActive]);
+
+  return (
+    <div
+      className="flex flex-col justify-center items-start w-screen h-screen bg-black text-white px-8 md:px-20"
+      ref={titleRef}
+    >
+      <div className="max-w-3xl space-y-6">
+        <h1
+          className={`text-3xl md:text-4xl font-bold mb-6 text-white transform transition-transform duration-800 ease-in-out ${
+            isVisible ? 'animate-slideUp' : ''
+          }`}
+        >
+          {biosciences.title}
+        </h1>
+        {biosciences.content.map((paragraph, index) => (
+          <p key={index} className="text-justify leading-7 text-gray-200">
+            {paragraph}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ResearchCarouselOne;

src/components/research/ResearchCarouselThree.jsx

@@ -0,0 +1,58 @@
+// components/research/ResearchCarousel/ResearchCarouselOne.jsx
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { ResearchContext } from '../../context/ResearchContext';
+
+const ResearchCarouselThree = ({ isActive }) => {
+  const { research } = useContext(ResearchContext);
+  const ai = research.sections.ai;
+
+  const [isVisible, setIsVisible] = useState(false);
+  const titleRef = useRef(null);
+
+  useEffect(() => {
+    if (!isActive) {
+      setIsVisible(false);
+      return;
+    }
+
+    const sectionElement = titleRef.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0.5 }
+    );
+
+    if (sectionElement) {
+      observer.observe(sectionElement);
+    }
+
+    return () => {
+      if (sectionElement) observer.unobserve(sectionElement);
+    };
+  }, [isActive]);
+
+  return (
+    <div
+      className="flex flex-col justify-center items-start w-screen h-screen bg-black text-white px-8 md:px-20"
+      ref={titleRef}
+    >
+      <div className="max-w-3xl space-y-6">
+        <h1
+          className={`text-3xl md:text-4xl font-bold mb-6 text-white transform transition-transform duration-800 ease-in-out ${
+            isVisible ? 'animate-slideUp' : ''
+          }`}
+        >
+          {ai.title}
+        </h1>
+        {ai.content.map((paragraph, index) => (
+          <p key={index} className="text-justify leading-7 text-gray-200">
+            {paragraph}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ResearchCarouselThree;

src/components/research/ResearchCarouselTwo.jsx

@@ -0,0 +1,58 @@
+// components/research/ResearchCarousel/ResearchCarouselOne.jsx
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { ResearchContext } from '../../context/ResearchContext';
+
+const ResearchCarouselTwo = ({ isActive }) => {
+  const { research } = useContext(ResearchContext);
+  const hci = research.sections.hci;
+
+  const [isVisible, setIsVisible] = useState(false);
+  const titleRef = useRef(null);
+
+  useEffect(() => {
+    if (!isActive) {
+      setIsVisible(false);
+      return;
+    }
+
+    const sectionElement = titleRef.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0.5 }
+    );
+
+    if (sectionElement) {
+      observer.observe(sectionElement);
+    }
+
+    return () => {
+      if (sectionElement) observer.unobserve(sectionElement);
+    };
+  }, [isActive]);
+
+  return (
+    <div
+      className="flex flex-col justify-center items-start w-screen h-screen bg-black text-white px-8 md:px-20"
+      ref={titleRef}
+    >
+      <div className="max-w-3xl space-y-6">
+        <h1
+          className={`text-3xl md:text-4xl font-bold mb-6 text-white transform transition-transform duration-800 ease-in-out ${
+            isVisible ? 'animate-slideUp' : ''
+          }`}
+        >
+          {hci.title}
+        </h1>
+        {hci.content.map((paragraph, index) => (
+          <p key={index} className="text-justify leading-7 text-gray-200">
+            {paragraph}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ResearchCarouselTwo;

src/context/ResearchContext.jsx

@@ -0,0 +1,43 @@
+
+
+import { createContext, useState } from 'react';
+
+export const ResearchContext = createContext();
+
+export const ResearchProvider = ({ children }) => {
+  const [research] = useState({
+    sections: {
+      biosciences: {
+        title: "Health and Biosciences",
+        content: [
+          "Our lab is dedicated to improving human health through cutting-edge research that combines biology with advanced computer technologies. We study the tiny microbes living in our bodies, particularly in our gut, to understand how they affect our health and even our physical performance. Using powerful DNA sequencing tools, we're discovering new types of bacteria and exploring how they might be used to develop new treatments.",
+          "We're also making strides in cancer research, using artificial intelligence to analyze medical images and genetic information. This helps us better understand cancer risks and how tumors develop, potentially leading to more accurate diagnoses and personalized treatments.",
+          "Our work extends to studying human genetics across different populations, looking at how our DNA influences our health and susceptibility to diseases. We're even peering into humanity's past by examining ancient DNA, which gives us insights into how diseases have evolved over time.",
+          "In addition, we're developing new ways to look at tissues and cells using advanced imaging techniques. These tools allow doctors to see diseases in incredible detail, potentially catching problems earlier and more accurately.",
+          "All of this research is supported by our work in bioinformatics – essentially, using computers to make sense of vast amounts of biological data. We're creating new software tools that help scientists visualize and understand complex genetic information.",
+        ]
+      },
+      hci: {
+        title: "Human-Computer Interaction and Interactive Visualization",
+        content: [
+          "This category explores the intersection of AI, machine learning, and user interfaces. It focuses on creating intuitive tools and platforms for visualizing complex datasets like genome interaction maps and other multi-dimensional data, enabling users to interact with and explore data insights.",
+          "It covers web-based visualizations, immersive VR tools, and interfaces designed for both scientific and clinical applications, enhancing user engagement and decision-making through AI-driven visual analytics."
+        ]
+      },
+      ai: {
+        title: "Core Machine Learning & AI",
+        content: [
+          "This category covers foundational AI and machine learning techniques across various domains. It includes Vision-Based Machine Learning, which focuses on applying machine learning to visual data like images and medical scans for tasks such as classification, segmentation, and diagnosis.",
+          "Generative AI and Deep Learning explores the development of deep neural networks for generating synthetic data, images, and text, focusing on models like GANs and VAEs.",
+          "Responsible AI emphasizes ethical considerations, fairness, and bias mitigation in AI, ensuring that models are transparent, explainable, and equitable in their predictions and decisions."
+        ]
+      }
+    }
+  });
+
+  return (
+    <ResearchContext.Provider value={{ research }}>
+      {children}
+    </ResearchContext.Provider>
+  );
+};

src/pages/research/Research.jsx

@@ -0,0 +1,130 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Carousel } from 'antd';
+import Particles from 'react-tsparticles';
+import { loadSlim } from 'tsparticles-slim';
+import 'antd/dist/reset.css';
+
+import { ResearchProvider } from "../../context/ResearchContext.jsx";
+import ResearchCarouselOne from "../../components/research/ResearchCarouselOne.jsx";
+import ResearchCarouselTwo from "../../components/research/ResearchCarouselTwo.jsx";
+import ResearchCarouselThree from "../../components/research/ResearchCarouselThree.jsx";
+
+const ResearchContent = () => {
+  const carouselRef = useRef();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const totalSlides = 3;
+  const [lastInvocation, setLastInvocation] = useState(0);
+  const particlesContainerRef = useRef(null);
+  const isTransitioning = useRef(false);
+
+  const handleScroll = useCallback((event) => {
+    const now = Date.now();
+    const throttleTime = 600; // Adjusted to 500ms to avoid too rapid scrolling
+
+    if (now - lastInvocation > throttleTime && !isTransitioning.current) {
+      event.preventDefault();
+      const scrollDirection = event.deltaY;
+      let newIndex = activeIndex;
+
+      if (scrollDirection > 0 && activeIndex < totalSlides - 1) {
+        newIndex = activeIndex + 1;
+        carouselRef.current.next();
+      } else if (scrollDirection < 0 && activeIndex > 0) {
+        newIndex = activeIndex - 1;
+        carouselRef.current.prev();
+      }
+
+      if (newIndex !== activeIndex) {
+        isTransitioning.current = true;
+        setActiveIndex(newIndex);
+        if (particlesContainerRef.current) {
+          particlesContainerRef.current.style.opacity = '0';
+        }
+      }
+
+      setLastInvocation(now);
+    }
+  }, [activeIndex, lastInvocation, totalSlides]);
+
+  useEffect(() => {
+    const carouselElement = document.querySelector('.ant-carousel');
+    carouselElement.addEventListener('wheel', handleScroll, { passive: false });
+    return () => {
+      carouselElement.removeEventListener('wheel', handleScroll);
+    };
+  }, [handleScroll]);
+
+  const onChange = useCallback((currentSlide) => {
+    setActiveIndex(currentSlide);
+    if (particlesContainerRef.current) {
+      particlesContainerRef.current.style.opacity = '0';
+      setTimeout(() => {
+        particlesContainerRef.current.style.opacity = '1';
+        isTransitioning.current = false;
+      }, 10); // Adjust the delay to match the transition duration
+    }
+  }, []);
+
+  const particlesInit = async (main) => {
+    await loadSlim(main);
+  };
+
+  const particlesOptions = {
+    fullScreen: { enable: false, zIndex: 1 },
+    particles: {
+      number: { value: 100, density: { enable: true, value_area: 1000 } },
+      color: { value: ["#aa73ff", "#f8c210", "#83d238", "#33b1f8"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.6 },
+      size: { value: 2, random: true },
+      links: { enable: true, distance: 120, color: "#ffffff", opacity: 0.4, width: 1 },
+      move: { enable: true, speed: 1.5 }
+    }
+  };
+
+  return (
+    <div className="relative h-screen overflow-hidden bg-black">
+      <div
+        ref={particlesContainerRef}
+        className="absolute top-0 right-0 w-full h-full overflow-hidden transition-all duration-100"
+      >
+        <Particles
+          id="tsparticles"
+          init={particlesInit}
+          options={particlesOptions}
+          className="absolute top-0 right-0 w-1/2 h-full z-10"
+        />
+      </div>
+      <Carousel
+        ref={carouselRef}
+        dots={true}
+        vertical
+        afterChange={onChange}
+        effect="scroll"
+        speed={1200}
+      >
+        <div>
+          <ResearchCarouselOne isActive={activeIndex === 0} />
+        </div>
+        <div>
+          <ResearchCarouselTwo isActive={activeIndex === 1} />
+        </div>
+        <div>
+          <ResearchCarouselThree isActive={activeIndex === 2} />
+        </div>
+      </Carousel>
+    </div>
+  );
+};
+
+const Research = () => {
+  return (
+    <ResearchProvider>
+      <div className="font-bricky">
+        <ResearchContent />
+      </div>
+    </ResearchProvider>
+  );
+};
+
+export default Research;