ProjectX-VJTI · Amal-Verma · Jan 23, 2025
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,5 @@
 // Enhanced App component with updated styles and layout
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import NavbarCard from './Components/NavbarCard';
@@ -15,17 +15,32 @@ import VerticalTimeline from './Components/Timeline';
 import Carousel from './Components/Carousel';
 import Hero from './Components/Hero';
 import Footer from "./Components/Footer"
+import Search from './Components/Search';
+import { HighlightProvider } from './context/HighlightContext';
+import HighlightWrapper from './Components/HighlightWrapper';
 
+const searchableContent = [
+  { path: '/', title: 'Home', description: 'Welcome to Project X' },
+  { path: '/events', title: 'Events', description: 'Upcoming and past events' },
+  { path: '/projects', title: 'Projects', description: 'Current projects' },
+  { path: '/achievements', title: 'Achievements', description: 'Our accomplishments' },
+  { path: '/past-projects', title: 'Past Projects', description: 'Completed projects' },
+  { path: '/upcoming-projects', title: 'Upcoming Projects', description: 'Future initiatives' },
+];
 
 const Homepage = () => {
   return (
     <div>
       <Hero />
        {/* Text Section between Hero and Carousel */}
       <div className="text-center py-8 px-4 md:px-12 bg-opacity-10 text-white">
-        <h2 className="text-4xl font-semibold mb-4">Welcome to Project X</h2>
+        <h2 className="text-4xl font-semibold mb-4">
+          <HighlightWrapper>Welcome to Project X</HighlightWrapper>
+        </h2>
         <p className="text-xl">
-          We are an exclusive club at Veermata Jijabai Technological Institute, Mumbai. We provide a collaborative environment for students to learn, grow, and build projects together under mentorship. Explore our achievements, past projects, and upcoming events!
+          <HighlightWrapper>
+            We are an exclusive club at Veermata Jijabai Technological Institute, Mumbai. We provide a collaborative environment for students to learn, grow, and build projects together under mentorship. Explore our achievements, past projects, and upcoming events!
+          </HighlightWrapper>
         </p>
       </div>
 
@@ -40,26 +55,45 @@ const Homepage = () => {
 
 
 function App() {
-  return (
-    <div className='bgC'>
-    <Router>
-      <Navigation />
-      <Routes>
-        <Route path="/" element={<Homepage />} />
-        <Route path="/events" element={<Events />} />
-        <Route path="/projects" element={<Projects />} />
-        <Route path="/achievements" element={<Achievements />} />
-        <Route path="/past-projects" element={<PastProjects />} />
-        <Route path="/upcoming-projects" element={<UpcomingProjects />} />
-        {/* <Route path="/time" element={<VerticalTimeline />} /> */}
+  const [searchQuery, setSearchQuery] = useState('');
 
-        {/* <Route path="/" element={<OrderManagement />} /> */}
-      </Routes>
-      <Footer />
-    </Router>
-    <div>
-    </div>
-    </div>
+  const searchResults = useMemo(() => {
+    if (!searchQuery) return [];
+    const query = searchQuery.toLowerCase();
+    return searchableContent.filter(
+      item => 
+        item.title.toLowerCase().includes(query) ||
+        item.description.toLowerCase().includes(query)
+    );
+  }, [searchQuery]);
+
+  return (
+    <HighlightProvider>
+      <div className='bgC'>
+        <Router>
+          <Navigation>
+            <Search 
+              searchQuery={searchQuery}
+              setSearchQuery={setSearchQuery}
+              searchResults={searchResults}
+            />
+          </Navigation>
+          <Routes>
+            <Route path="/" element={<Homepage />} />
+            <Route path="/events" element={<Events />} />
+            <Route path="/projects" element={<Projects />} />
+            <Route path="/achievements" element={<Achievements />} />
+            <Route path="/past-projects" element={<PastProjects />} />
+            <Route path="/upcoming-projects" element={<UpcomingProjects />} />
+            {/* <Route path="/time" element={<VerticalTimeline />} /> */}
+            {/* <Route path="/" element={<OrderManagement />} /> */}
+          </Routes>
+          <Footer />
+        </Router>
+        <div>
+        </div>
+      </div>
+    </HighlightProvider>
   );
 }
 

diff --git a/src/Components/Card.jsx b/src/Components/Card.jsx
@@ -1,11 +1,14 @@
 import React from 'react';
+import HighlightWrapper from './HighlightWrapper';
 
 const Card = ({ image, text }) => {
   return (
     <div className="flex items-center justify-center w-full bg-gray-100 shadow-lg rounded-lg p-4">
       <img className="w-full md:w-1/2 object-cover rounded-lg" src={image} alt="Card image" />
       <div className="w-full md:w-1/2 text-left p-4 md:p-8">
-        <p className="text-gray-800">{text}</p>
+        <HighlightWrapper>
+          {text}
+        </HighlightWrapper>
       </div>
     </div>
   );

diff --git a/src/Components/Carousel.jsx b/src/Components/Carousel.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import HighlightWrapper from './HighlightWrapper';
 
 const Typewriter = ({ texts, delay = 100 }) => {
   const [textIndex, setTextIndex] = useState(0);
@@ -29,7 +30,11 @@ const Typewriter = ({ texts, delay = 100 }) => {
     return () => clearTimeout(timer);
   }, [displayText, isDeleting, typingSpeed, textIndex, texts, delay]);
 
-  return <div className="text-white text-3xl">{displayText}</div>;
+  return (
+    <div className="text-white text-3xl">
+      <HighlightWrapper>{displayText}</HighlightWrapper>
+    </div>
+  );
 };
 
 const Carousel = () => {

diff --git a/src/Components/CircularCard.jsx b/src/Components/CircularCard.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSpring, animated } from 'react-spring';
+import HighlightWrapper from './HighlightWrapper';
 
 const CircularCard = ({ image, name, organization, link }) => {
   const props = useSpring({ opacity: 1, from: { opacity: 0 } });
@@ -11,8 +12,12 @@ const CircularCard = ({ image, name, organization, link }) => {
       <div className="w-32 h-32 rounded-full overflow-hidden shadow-lg">
         <img src={image} alt={name} className="w-full h-full object-cover" />
       </div>
-      <h3 className="mt-4 text-xl font-bold text-purple-200">{name}</h3>
-      <p className="mt-2 text-cyan-200">{organization}</p>
+      <h3 className="mt-4 text-xl font-bold text-purple-200">
+        <HighlightWrapper>{name}</HighlightWrapper>
+      </h3>
+      <p className="mt-2 text-cyan-200">
+        <HighlightWrapper>{organization}</HighlightWrapper>
+      </p>
     </animated.div>
 
     </a>

diff --git a/src/Components/Events.jsx b/src/Components/Events.jsx
@@ -1,14 +1,15 @@
 import React from "react";
 import { Chrono } from "react-chrono";
+import HighlightWrapper from './HighlightWrapper';
 import '../App.css'
 
 const Events = () => {
   const items = [
     {
-      title: "March 19 2024",
-      cardTitle: "Open Source Introduction",
+      title: <HighlightWrapper>March 19 2024</HighlightWrapper>,
+      cardTitle: <HighlightWrapper>Open Source Introduction</HighlightWrapper>,
       // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
-      cardDetailedText: "Open source software is software with source code that anyone can inspect, modify, and enhance",
+      cardDetailedText: <HighlightWrapper>Open source software is software with source code that anyone can inspect, modify, and enhance</HighlightWrapper>,
       media: {
         type: "IMAGE",
         source: {
@@ -17,10 +18,10 @@ const Events = () => {
       }
     },
     {
-      title: "April 24 2024",
-      cardTitle: "OpenCV Workshop",
+      title: <HighlightWrapper>April 24 2024</HighlightWrapper>,
+      cardTitle: <HighlightWrapper>OpenCV Workshop</HighlightWrapper>,
       // cardSubtitle: "OpenCV is a library of programming functions mainly for real-time computer vision..",
-      cardDetailedText: "OpenCV is a library of programming functions mainly for real-time computer vision",
+      cardDetailedText: <HighlightWrapper>OpenCV is a library of programming functions mainly for real-time computer vision</HighlightWrapper>,
       media: {
         type: "IMAGE",
         source: {
@@ -29,10 +30,10 @@ const Events = () => {
       }
     },
     {
-      title: "June - July 2024",
-      cardTitle: "Selection Phase for batch of 2027",
+      title: <HighlightWrapper>June - July 2024</HighlightWrapper>,
+      cardTitle: <HighlightWrapper>Selection Phase for batch of 2027</HighlightWrapper>,
       // cardSubtitle: "A surprise military strike by the Imperial Japanese Navy Air Service...",
-      cardDetailedText: "An exhuastive process involving tasks, proposal preparations and interviews was carried out to shortlists sys for the mentorship program.",
+      cardDetailedText: <HighlightWrapper>An exhuastive process involving tasks, proposal preparations and interviews was carried out to shortlists sys for the mentorship program.</HighlightWrapper>,
       media: {
         type: "IMAGE",
         source: {
@@ -41,10 +42,10 @@ const Events = () => {
       }
     },
     {
-      title: "July - October",
-      cardTitle: "Weekly Meets and project development phase",
+      title: <HighlightWrapper>July - October</HighlightWrapper>,
+      cardTitle: <HighlightWrapper>Weekly Meets and project development phase</HighlightWrapper>,
       // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
-      cardDetailedText: "Sys developed their respective projects under the mentorship of Tys which was continuosly monitored by Lys via weekly presentations.",
+      cardDetailedText: <HighlightWrapper>Sys developed their respective projects under the mentorship of Tys which was continuosly monitored by Lys via weekly presentations.</HighlightWrapper>,
       media: {
         type: "IMAGE",
         source: {
@@ -53,10 +54,10 @@ const Events = () => {
       }
     },
     {
-      title: "October 19 2024",
-      cardTitle: "Final Presentation",
+      title: <HighlightWrapper>October 19 2024</HighlightWrapper>,
+      cardTitle: <HighlightWrapper>Final Presentation</HighlightWrapper>,
       // cardSubtitle: "Men of the British Expeditionary Force (BEF) wade out to...",
-      cardDetailedText: "The project development phase was wrapped up , here the Sys presented their work and answered the questions posed to them.",
+      cardDetailedText: <HighlightWrapper>The project development phase was wrapped up , here the Sys presented their work and answered the questions posed to them.</HighlightWrapper>,
       media: {
         type: "IMAGE",
         source: {

diff --git a/src/Components/FeatureCard.jsx b/src/Components/FeatureCard.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import HighlightWrapper from './HighlightWrapper';
 import '../App.css'
 
 const FeatureCard = ({
@@ -20,22 +21,26 @@ const FeatureCard = ({
     <div className={` w-10/12 mx-auto border-2  backdrop-blur-sm shadow-gradient border-gray-700 p-3 flex flex-col bg-clip-border rounded-xl shadow-md`}>
       <div className="w-full mb-3">
       <h3 className={`aanimate-bounce-less text-3xl font-semibold ${tagStyle} bg-clip-text text-transparent bg-gradient-to-br from-blue-400 to-purple-400 duration-1000 ease-in-out`}>
-      {title}
-    </h3>
+        <HighlightWrapper>{title}</HighlightWrapper>
+      </h3>
     </div>
       <div className="mb-1">
-        <p className={`text-[0.8rem] text-gray-100 ${tagStyle}`}>{tag}</p>
+        <p className={`text-[0.8rem] text-gray-100 ${tagStyle}`}>
+          <HighlightWrapper>{tag}</HighlightWrapper>
+        </p>
       </div>
       <div className="mb-[4rem] md:h-[100px]">
-        <p className="text-[1.1rem] text-gray-300">{info}</p>
+        <p className="text-[1.1rem] text-gray-300">
+          <HighlightWrapper>{info}</HighlightWrapper>
+        </p>
       </div>
       <div className="">
         <button
           className={`mx-auto relative bg-gradient-to-br px-5 from-blue-800 via-blue-600 to-blue-800 inline-flex items-center justify-center p-0.5 mb-3 me-2 overflow-hidden text-lg font-medium text-gray-900 rounded-lg group bg-white dark:bg-gray-900`}
           onClick={handleButtonClick}
         >
           <span className="relative text-white px-3 py-2.5 transition-all ease-in duration-75 rounded-md group-hover:bg-opacity-0">
-            {buttontext}
+            <HighlightWrapper>{buttontext}</HighlightWrapper>
           </span>
         </button>
       </div>

diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { FaInstagram, FaGithub, FaEnvelope } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
+import HighlightWrapper from './HighlightWrapper';
 
 const Footer = () => {
   return (
@@ -17,7 +18,11 @@ const Footer = () => {
             <FaEnvelope size={24} />
           </a>
         </div>
-        <p className="text-sm">&copy; {new Date().getFullYear()} ProjectX</p>
+        <p className="text-sm">
+          <HighlightWrapper>
+            &copy; {new Date().getFullYear()} ProjectX
+          </HighlightWrapper>
+        </p>
       </div>
     </footer>
   );

diff --git a/src/Components/Hero.jsx b/src/Components/Hero.jsx
@@ -1,25 +1,27 @@
 import React from 'react';
-// import ThreeJSComponent from './ThreeJSComponent';
-// import Sphere from "./icons";
+import HighlightWrapper from './HighlightWrapper';
 
 const Hero = () => {
     return (
         <div className="relative bg-transparent min-h-screen w-full flex">
-    <div className="flex-1 bg-transparent flex items-center justify-center">
-        <div className="gp-10 rounded-lg text-left">
-            <h1 className="text-bounce text-[10rem] leading-none font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">ProjectX</h1>
-            <p className="text-bounce text-5xl leading-relaxed font-mono tracking-wide text-transparent text-center bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 mt-5">Innovating the future</p>
+            <div className="flex-1 bg-transparent flex items-center justify-center">
+                <div className="gp-10 rounded-lg text-left">
+                    <h1 className="text-bounce text-[10rem] leading-none font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">
+                        <HighlightWrapper>ProjectX</HighlightWrapper>
+                    </h1>
+                    <p className="text-bounce text-5xl leading-relaxed font-mono tracking-wide text-transparent text-center bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 mt-5">
+                        <HighlightWrapper>Innovating the future</HighlightWrapper>
+                    </p>
+                </div>
+            </div>
+            <svg
+                className="absolute bottom-0 left-0 right-0 z-10 opacity-100"
+                viewBox="0 0 1440 320"
+                style={{ clipPath: 'polygon(0 0, 100% 0, 100% 90%, 0 100%)' }}
+            >
+                <use href="src/assets/wordcloud.svg" />
+            </svg>
         </div>
-    </div>
-    <svg
-        className="absolute bottom-0 left-0 right-0 z-10 opacity-100"
-        viewBox="0 0 1440 320"
-        style={{ clipPath: 'polygon(0 0, 100% 0, 100% 90%, 0 100%)' }}
-    >
-        <use href="src/assets/wordcloud.svg" />
-    </svg>
-</div>
-
     );
 }
 

diff --git a/src/Components/HighlightWrapper.jsx b/src/Components/HighlightWrapper.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useHighlight } from '../context/HighlightContext';
+
+const HighlightWrapper = ({ children }) => {
+  const { highlightTerm } = useHighlight();
+  // console.log("HighlightWrapper", highlightTerm);
+  // console.log(children);
+
+  if (!highlightTerm || typeof children !== 'string') {
+    return children;
+  }
+
+  const parts = children.split(new RegExp(`(${highlightTerm})`, 'gi'));
+
+  return (
+    <>
+      {parts.map((part, i) => 
+        part.toLowerCase() === highlightTerm.toLowerCase() ?
+        (
+          <mark key={i} className="bg-yellow-300 bg-opacity-50 text-white rounded px-1">
+            {part}
+          </mark>
+        ) : part
+      )}
+    </>
+  );
+};
+
+export default HighlightWrapper;
diff --git a/src/Components/Navigation.jsx b/src/Components/Navigation.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../assets/X_Logo.png';
 
-const Navigation = () => {
+const Navigation = ({ children }) => {
   return (
     <nav className="flex justify-between items-center p-4 bg-gradient-to-r bg-slate-900 border-b-2 border-gray-700">
       <div className="flex items-center">
@@ -17,6 +17,9 @@ const Navigation = () => {
         <Link to="/achievements" className="text-xl text-white hover:text-gray-200 transition-colors duration-300">Achievements</Link>
         {/* <Link to="/staff" className="text-xl text-white hover:text-gray-200 transition-colors duration-300">Staff</Link> */}
       </div>
+      <div className="flex items-center">
+        {children} {/* This will render the Search component */}
+      </div>
     </nav>
   );
 };